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_content">
			<view class="zd_wrapper">
				<view class="zd-row mgb20 border-bottom">
					<uni-icons type="arrow-up" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 item-font-2">任务起点</view>
					<view class="zd-col-16 item-font-1">{{sCode}}</view>
				</view>
				<view class="zd-row">
					<uni-icons type="arrow-down" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 item-font-2">任务终点</view>
					<view class="zd-col-16 item-font-1">{{nCode}}</view>
				</view>
			</view>
			<view class="zd_wrapper">
				<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="pkId === e.region_code ? 'up' : 'down'" size="16"></uni-icons>
					</view>
					<view v-if="pkId === e.region_code" class="zd-row flexstart flexwrap">
						<view class="zd-col-12 site_item" v-for="(el, index) in pointArr" :key="index">
							<view class="site_item_box" :class="{'isChecked': el.device_code === sCode || el.device_code === nCode}" :id="'site_item_box_'+ index" @click="setcode(el,index)">
								<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': sCode === '' || nCode === ''}" :disabled="disabled" @tap="_callTask('1')">生箔换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': sCode === '' || nCode === ''}" :disabled="disabled" @tap="_callTask('2')">分切换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': sCode === '' || nCode === ''}" :disabled="disabled" @tap="_callTask('3')">搬运任务</button>
		</view>
		<view class="pop_point_wrap" :style="{top: distanceToTop + 'px',left: distanceToLeft + 'px'}">
			<view class="zd-row jccenter">
				<uni-icons type="map-pin-ellipse" size="18" color="#fff"></uni-icons>
			</view>
			<view class="zd-row pop_point_content">
				<view class="zd-col-11 item-font-6 bggreen" @tap="getstartcode">任务起点</view>
				<view class="zd-col-11 item-font-6 bgblue" @tap="getnextcode">任务终点</view>
			</view>
		</view>
		<view v-if="show" class="msg_mask" @tap="colsePop"></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: '',
				areaArr: [],
				pointArr: [],
				pkId: '',
				disabled: false,
				code: '',
				sCode: '',
				nCode: '',
				show: false,
				distanceToTop: -300,
				distanceToLeft: -300
			};
		},
		onLoad (options) {
			this.title = options.title
		},
		created () {
			this.initArea()
		},
		methods: {
			async initArea () {
				let res = await queryArea()
				this.areaArr = [...res.data]
				if (this.areaArr.length > 0) {
					this.pkId = this.areaArr[0].region_code
					this.initPonit()
				}
			},
			getPonit (e) {
				this.pkId = this.pkId === e.region_code ? '' : e.region_code
				if (this.pkId) {
					this.initPonit()
				}
			},
			async initPonit () {
				let res = await queryPointByArea(this.pkId)
				this.pointArr = [...res.data]
			},
			setcode (el,index) {
				const query = uni.createSelectorQuery().in(this)
				query
				.select(`#site_item_box_${index}`)
				.boundingClientRect(data => {
					if (data) {
						this.distanceToTop = data.top + (data.height / 2) - 9
						this.distanceToLeft = data.left
					}
				}).exec()
				this.show = true
				this.code = el.device_code
			},
			colsePop () {
				this.show = !this.show
				if (!this.show) {
					this.distanceToTop = -300
					this.distanceToLeft = -300
				}
			},
			getstartcode () {
				if (this.nCode !== '' && this.nCode === this.code) {
					this.nCode = ''
				} 
				this.sCode = this.code
				this.show = false
				this.distanceToTop = -300
				this.distanceToLeft = -300
			},
			getnextcode () {
				if (this.sCode !== '' && this.sCode === this.code) {
					this.sCode = ''
				}
				this.nCode = this.code
				this.show = false
				this.distanceToTop = -300
				this.distanceToLeft = -300
			},
			/** 清空点位选择 */
			cancle () {
				this.sCode = ''
				this.nCode = ''
				this.disabled = false
			},
			async _callTask (type) {
				this.disabled = true
				if (this.sCode === '' || nCode === '') {
					this.disabled = false
					return
				}
				try {
					let res = await callTask(this.sCode, this.nCode, 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';
.item-font-6
	color #fff
</style>