hht-hengsen-acs-uni/pages/modules/callmanage.vue

<template>
	<view class="zd_container">
		<nav-bar title="呼叫管理"></nav-bar>
		<view class="zd_content">
			<view class="state-wrap">
				<view class="state-item-wrap" v-for="e in state">
					<view class="state-color" :class="e.color"></view>
					<view class="state-name">{{e.name}}</view>
				</view>
			</view>
			<view class="zd_wrapper grid-wraper">
				<view class="locate_block" v-for="e in areaArr" :key="e.region_code">
					<view class="locate_name" @click="getPonit (e)">
						<view class="title_locate">{{e.region_name}}</view>
						<view class="iconfont open_icon" :class="{'is_reverse': e.checked === true}"></view>
					</view>
					<view v-show="e.checked === true" class="site_block" ref="liCon">
						<view class="site_item" v-for="(el, i) in e.pointArr" :key="i">
							<view class="site_item_box" :class="['bggray', 'bggreen'][Number(el.status)]" @click="setcode(el)">
								<text class="title_1">{{el.device_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zd-row filter_bar">
			<view class="zd-col-4 p1">起始点</view>
			<view class="zd-col-8 p2">{{sObj.device_name}}</view>
			<view class="zd-col-4 p1">目标点</view>
			<view class="zd-col-8 p2">{{nObj.device_name}}</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-11 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" @click="cancle">清空</button>
			<button class="zd-col-11 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' || JSON.stringify(nObj) === '{}'}" :disabled="disabled1" @click="toSure">确认</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {queryArea, queryPointByArea, callTask} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				// interTime: this.$store.getters.setTime,
				// timer: null,
				state: [{color: 'bggray', name: '空位'}, {color: 'bggreen', name: '有货'}],
				areaArr: [],
				pointArr: [],
				regobj: {},
				disabled1: false,
				sObj: {},
				nObj: {}
			};
		},
		created () {
			this.initArea()
		},
		// beforeDestroy () {
		// 	clearInterval(this.timer)
		// },
		methods: {
			// refresh (e) {
			// 	this.timer = setInterval(() => {
			// 		this.initPonit(e)
			// 	}, this.interTime)
			// },
			async initArea () {
				let res = await queryArea()
				this.areaArr = [...res.result]
				this.areaArr.map(el => {
					this.$set(el, 'checked', false)
					this.$set(el, 'pointArr', [])
				})
				if (this.areaArr.length > 0) {
					this.getPonit(this.areaArr[0])
				}
			},
			async initPonit (e) {
				let res = await queryPointByArea(e.region_code)
				this.regobj = e
				this.areaArr.map(el => {
					if (el.region_code === e.region_code) {
						this.$set(el, 'pointArr', [...res.result])
					}
				})
			},
			getPonit (e) {
				// clearInterval(this.timer)
				this.areaArr.map(el => {
					if (el.region_code !== e.region_code) {
						el.checked = false
					}
					if (el.region_code === e.region_code) {
						e.checked = !e.checked
					}
				})
				if (e.checked) {
					this.initPonit(e)
					// this.refresh(e)
				}
			},
			setcode (el) {
				if (JSON.stringify(this.sObj) === '{}') {
					this.sObj = el
				} else if (JSON.stringify(this.sObj) !== '{}' && JSON.stringify(this.nObj) === '{}') {
					this.nObj = el
				}
			},
			/** 清空点位选择 */
			cancle () {
				this.sObj = {}
				this.nObj = {}
				this.disabled1 = false
			},
			toSure () {
				this.disabled1 = true
				if (JSON.stringify(this.sObj) === '{}' || JSON.stringify(this.nObj) === '{}') {
					this.disabled1 = false
					return
				}
				this._callTask()
			},
			async _callTask () {
				try {
					let res = await callTask(this.sObj.device_code, this.nObj.device_code)
					this.cancle()
					uni.showToast({
						title: res.desc,
						icon: 'none'
					})
					// clearInterval(this.timer)
					// this.timer = null
					// setTimeout(() => {
					// 	this.refresh()
					// 	this.cancle()
					// }, 2000)
				} catch (err) {
					this.disabled1 = false
				}
			}
		}
	}
</script>

<style lang="stylus">
@import '../../common/style/mixin.styl';
.zd_wrapper
	padding 0 7rpx
.zd_content
	padding-bottom 196rpx
.open_icon
	position absolute
	right 0
	top 0
	_wh(48rpx,48rpx)
	_font(40rpx,48rpx,$red,,right)
	transition all .3s
	transform rotateZ(-90deg)
	&:before
		content: "\e6db";
.is_reverse
	transform rotateZ(90deg)
.site_block
	_wh(100%,auto)
	overflow hidden
	transition height .3s
	_fj(flex-start,,,wrap)
	padding-bottom 10rpx
.site_item
	_wh(calc(100% / 3),110rpx)
	padding 5rpx 5rpx
	overflow hidden
	_fj(center)
.site_item_box
	_wh(100%, 100%)
	padding 10rpx
	background-color rgb(220, 223, 230)
	border-radius 10rpx
.title_locate
	width 50%
	_font(30rpx,40rpx,#333,bold)
	font-style italic
.title_1
	_wh(100%, 100%)
	_fj(center)
	overflow hidden
	_font(28rpx,28rpx,#303133,500, center)
.p1
	_font(30rpx,80rpx,#855d15,700,center)
.p2
	_font(30rpx,55rpx,#fff,,center)
	background: linear-gradient(46deg, #ef8900, #eb6600);
	border-radius: 24rpx;
.state-wrap
	_wh(100%, 60rpx)
	margin-bottom 10rpx
	_fj(flex-start)
.state-item-wrap
	height 60rpx
	margin-right 20rpx
	_fj()
.state-color
	_wh(30rpx, 30rpx)
	border-radius 50%
	margin-right 10rpx
.state-name
	_font(28rpx, 60rpx, #333)
</style>