hht-tongbo-acs-two-uni/pages/manage/call-manage.vue

<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<!-- <view class="zd-row jcflexstart state-wrap">
			<view class="zd-col-4 zd-row jcflexstart" 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-row mgb10 xzd-wraper">
			<view class="zd-col-11 item-font-6 bggreen">起:{{sObj.device_name}}</view>
			<view class="zd-col-1 item-font-7">&ndash;</view>
			<view class="zd-col-11 item-font-6 bgblue">终:{{nObj.device_name}}</view>
		</view>
		<view class="zd_content">
			<view class="zd_wrapper grid-wraper">
				<view class="allwidth" v-for="e in areaArr" :key="e.region_code">
					<view class="zd-row" @click="getPonit (e)">
						<view class="title_locate">{{e.region_name}}</view>
						<uni-icons :type="e.checked ? 'up' : 'down'" size="16"></uni-icons>
					</view>
					<view v-show="e.checked === true" class="zd-row flexstart flexwrap">
						<view class="zd-col-12 site_item" v-for="(el, i) in e.pointArr" :key="i">
							<view class="site_item_box" :class="{'bggreen': sObj.device_code === el.device_code, 'bgblue': nObj.device_code === el.device_code}" @click="setcode(el)">
								<view class="point_title_1">{{el.device_name}}</view>
								<view class="point_title_2">{{el.device_code}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-4 button-default" @click="cancle">清空</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" :disabled="disabled" @tap="_callTask('1')">生箔换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" :disabled="disabled" @tap="_callTask('2')">分切换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" :disabled="disabled" @tap="_callTask('3')">搬运任务</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {queryArea, queryPointByArea, callTask} from '@/utils/mork2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				title: '',
				interTime: this.$store.getters.setTime,
				timer: null,
				state: [{color: 'bggray', name: '空位'}, {color: 'bggreen', name: '有货'}],
				areaArr: [],
				pointArr: [],
				regobj: {},
				disabled: false,
				sObj: {},
				nObj: {},
				isS: false
			};
		},
		onLoad (options) {
			this.title = options.title
		},
		created () {
			this.initArea()
		},
		beforeDestroy () {
			if (this.timer) {
				clearInterval(this.timer);  
				this.timer = null
			}
		},
		onUnload () {
			if (this.timer) {
				clearInterval(this.timer);  
				this.timer = null
			}
		},
		methods: {
			refresh (e) {
				this.timer = setInterval(() => {
					this.initPonit(e)
				}, this.interTime)
			},
			async initArea () {
				let res = await queryArea()
				this.areaArr = [...res.data]
				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.data])
					}
				})
			},
			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 (this.isS === false) {
					this.sObj = el
					this.isS = true
				} else if (this.isS) {
					this.nObj = el
					this.isS = false
				}
			},
			/** 清空点位选择 */
			cancle () {
				this.sObj = {}
				this.nObj = {}
				this.disabled = false
			},
			async _callTask (type) {
				this.disabled = true
				if (JSON.stringify(this.sObj) === '{}' || JSON.stringify(this.nObj) === '{}') {
					this.disabled = false
					return
				}
				try {
					let res = await callTask(this.sObj.device_code, this.nObj.device_code, type)
					this.cancle()
					clearInterval(this.timer)
					this.timer = null
					setTimeout(() => {
						this.refresh()
						this.cancle()
					}, 2000)
					uni.showToast({
						title: res.desc,
						icon: 'none'
					})
				} catch (err) {
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="stylus">
@import '../../common/style/mixin.styl';
.zd_content
	padding-bottom 200rpx
.submit-bar
	box-shadow none
.button-default, .button-primary
	font-size 30rpx
.bgblue .point_title_1,.bgblue .point_title_2,.bggreen .point_title_1,.bggreen .point_title_2
		color #fff
</style>