hht-hengsen-acs-uni/pages/modules/pointmanage.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 v-show="active" class="msg_wrapper">
		  <view class="msg_box">
			<view class="msg_item">
			  <view class="label_item">当前设备</view>
			  <view class="from_item">
				{{obj.device_name}}
			  </view>
			</view>
			<view class="msg_item">
			  <view class="label_item">设备状态</view>
			  <view class="from_item">
				  <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
			  </view>
			</view>
			<view class="msg_btns">
			  <button class="msg_btn" :disabled="disabled1" @click="msgSure">确认</button>
			  <button class="msg_btn" @click="msgCancle">取消</button>
			</view>
		  </view>
		</view>
		<view v-show="active" class="mask"></view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {queryArea, queryPointByArea, bindpoint} 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,
				value: '',
				range: [{value: '0',text: "空位"	},{value: '1',text: "有货"}],
				obj: {},
				active: false
			};
		},
		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) {
				this.active = true
				this.obj = el
				this.value = el.status
			},
			change(e){
				console.log(this.value)
			},
			msgCancle () {
				this.obj = {}
				this.active = false
				this.disabled1 = false
			},
			msgSure () {
				this.disabled1 = true
				this._bindpoint()
			},
			async _bindpoint () {
				try {
					let res = await bindpoint(this.obj.device_code, this.value)
					this.msgCancle()
					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 152rpx
.locate_block
	width 100%
.locate_name
	position relative
	_wh(100%,48rpx)
.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 10rpx
	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)
.title_2
	_wh(100%, 40%)
	_fj(center)
	overflow hidden
	_font(24rpx,24rpx,#303133,500, center)
	opacity .69
	white-space: nowrap
.submit-bar
	justify-content space-between
	padding 10rpx
.dot_item
	width 35%
	background-color #e5e5e5
	_fj(center,,column)
.p1
	_wh(100%, 52rpx)
	_font(30rpx,52rpx,,,center)
	border-bottom 1rpx solid #fff
	overflow hidden
.p2
	_wh(100%, 80rpx)
	_fj(center)
	padding 0 5rpx
	_font(30rpx,40rpx,,,center)
	overflow hidden
	word-break break-all
.btn_block
	_fj(,,column)
	align-content: flex-end
.submit-button
	line-height 56rpx
	margin 0
	&:nth-child(1)
		margin-bottom 10rpx
.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)
.msg_wrapper
	position fixed
	top 0
	bottom 0
	left 0
	right 0
	text-align center
	z-index 100
	&::after
		content ""
		display inline-block
		height 100%
		width 0
		vertical-align middle
.msg_box
	display inline-block
	width 90%
	max-width 420px
	padding 20rpx
	vertical-align middle
	background-color #fff
	border-radius 4px
	border 1px solid #ebeef5
	box-shadow 0 2px 12px 0 rgb(0 0 0 / 10%)
	overflow hidden
	backface-visibility hidden
.input_item
	width 100%
	height 70rpx
	border-radius 4px
	border 1px solid #DCDFE6
	_font(28rpx,70rpx,#606266)
	padding 0 10px
.mask
	position fixed
	top 0
	left 0
	width 100%
	height 100%
	opacity .2
	background #000
	z-index 99
.msg_item
	_fj()
	height 70rpx
	line-height 70rpx
	margin-bottom 30rpx
.msg_txt
	_font(32rpx,70rpx,#333)
.label_item
	width 150rpx
	_font(32rpx,70rpx,#333)
.from_item
	width calc(100% - 160rpx)
	_font(28rpx,70rpx,#606266)
.msg_btns
	height 70rpx
	line-height 70rpx
	width 100%
	margin 40rpx auto 0
	_fj()
.msg_btn
	width 160rpx
	height 70rpx
	line-height 70rpx
	font-size 28rpx
	color #fff
	background-color #d7592f
	border-radius 5px
	text-align center
	&:disabled
		background-color $gray
/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner
	border-color #e64e00
/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner .radio__inner-icon
	background-color #e64e00 
/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text
	color #e64e00
</style>