hs_control_app/pages/control/index.vue

<template>
	<view style="padding: 30px 10px 10px;;margin-top: 20px;">
		<view style="text-align: right;margin: 0 20px 10px;">
			<image src="../../static/img/control/switch-user.png" style="width: 30px;height: 30px;"
				@click="isOutLoginShow()">
				</u-image>
		</view>
		<view class="controlDiv" v-for="item in data" @longpress="longpress(item)">
			<zai-lattice v-if="item.runningStatus === 0" class="controlBody" backgroundColor="#dae3dd" shadow
				progressColor='#cecece' type="img" :progressPercent='item.dosagePct' :title='item.deviceName'
				:num='item.dosage' :unit='item.dosageUnit' src="../../static/img/control/close.png"
				@click="latticeClick(item)" titleColor='#969696' unitColor="#969696" numColor="#969696" />

			<zai-lattice v-if="item.runningStatus === 1" class="controlBody" backgroundColor="#f6fff9" shadow
				progressColor='#26a495' type="img" :progressPercent='item.dosagePct' :title='item.deviceName'
				:num='item.dosage' :unit='item.dosageUnit' src="../../static/img/control/open.png"
				@click="latticeClick(item)" titleColor='#26a495' />
		</view>
		<view class="controlDiv">
			<zai-lattice :showNow="false" class="controlBody" backgroundColor="#dae3dd" titleColor='#26a495' shadow
				progressColor='#ffffff' type="img" title='新增' src="../../static/img/control/plus.png"
				@click="toForm()" />
		</view>
		<view>
			<u-action-sheet :actions="list" :title="title" :show="show" @close="close" @select="selectClick">
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import zaiLattice from "../../components/zai-lattice";
	export default {
		components: {
			zaiLattice
		},
		data() {
			return {
				openOrCloseButton: true,
				title: '操作',
				list: [{
						name: '编辑',
						type: 1,
						subname: "修改名称",
						color: '#000000',
						fontSize: '20'
					},
					{
						name: '电量统计',
						type: 5,
						subname: "月度统计",
						color: '#000000',
						fontSize: '20'
					},
					{
						name: '用时统计',
						type: 2,
						subname: "月度统计",
						color: '#000000',
						fontSize: '20'
					},
					{
						name: '定时设置',
						type: 3,
						subname: "智能启停",
						color: '#000000',
						fontSize: '20'
					},
					{
						name: '删除',
						type: 4,
						subname: "直接删除",
						color: '#000000',
						fontSize: '20'
					}
				],
				show: false,
				data: [],
				form: {
					deviceInfoId: null,
					deviceId: null,
					useNoId: null,
					isOpenOrClose: null
				}
			}
		},
		onLoad() {
			this.getList()
			const value1 = uni.getStorageSync('userId');
			const value2 = uni.getStorageSync('token');
			if (!value1 && !value2) {
				this.$goto('../login/login');
			}
		},
		onShow() {
			this.getList()
		},
		onHide() {

		},
		onPullDownRefresh() {
			this.getList()
			uni.stopPullDownRefresh();
		},
		methods: {
			toForm() {
				this.$goto('form')
			},
			selectClick(index) {

				if (index.type === 1) {
					this.edit()
				} else if (index.type === 2) {
					this.$goto('stat?type=sc')
				} else if (index.type === 3) {
					this.$goto('timing')
				} else if (index.type === 4) {
					this.delete()
				} else if (index.type === 5) {
					this.$goto("stat?type=nh")
				}
			},
			async getList() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/control/list?userId=' + uni.getStorageSync('userId'),
					method: 'get',
					isNotErrorMsg: true
				});
				if (res.code === 200) {
					this.data = res.data
					console.log(this.data)
				} else {

				}
			},
			async openOrClose(item) {
				if (item.runningStatus === 0) {
					this.form.isOpenOrClose = 1
				} else {
					this.form.isOpenOrClose = 0
				}
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/control/openOrClose',
					method: 'post',
					data: this.form
				});
				setTimeout(() => {
					if (res.code === 200 && item.runningStatus === 0 || res.code === 500 && item
						.runningStatus === 1) {
						item.runningStatus = 1
						item.dosagePct = 100
					} else if (res.code === 500 && item.runningStatus === 0 || res.code === 200 && item
						.runningStatus === 1) {
						item.runningStatus = 0
						item.dosagePct = 0
					}
					this.openOrCloseButton = true
				}, 2000)
			},
			latticeClick(item) {
				if (this.openOrCloseButton) {
					this.openOrCloseButton = false
					this.form.deviceInfoId = item.id
					this.form.deviceId = item.deviceId
					this.form.useNoId = item.deviceUseNo
					if (item.runningStatus === 0) {
						item.dosagePct = 100
					} else {
						item.dosagePct = 0
					}
					this.openOrClose(item)
				}
			},
			longpress(item) {
				uni.setStorageSync("deviceInfo", item)
				this.show = true
			},
			isOutLoginShow() {
				uni.showModal({
					title: '提示',
					content: '是否退回到登录页面',
					confirmColor: '#26a495', //删除字体的颜色
					cancelColor: '#343047', //取消字体的颜色
					success: function(res) {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.reLaunch({
								url: '../login/login'
							})
						} else if (res.cancel) {}
					}
				});
			},
			edit() {
				var that = this
				uni.showModal({
					title: '编辑',
					placeholderText: "修改名称",
					editable: true,
					confirmColor: '#26a495', //删除字体的颜色
					cancelColor: '#000000', //取消字体的颜色
					success: function(res) {
						if (res.confirm) {
							var data = uni.getStorageSync("deviceInfo")
							data.deviceName = res.content
							that.editDeviceInfo(data)
							uni.redirectTo({
								url: 'index'
							});
						} else if (res.cancel) {}
					}
				});
			},
			delete() {
				var that = this
				uni.showModal({
					title: '提示',
					content: "确认删除吗？",
					confirmColor: '#26a495', //删除字体的颜色
					cancelColor: '#000000', //取消字体的颜色
					success: function(res) {
						if (res.confirm) {
							var id = uni.getStorageSync("deviceInfo").id
							that.deleteDeviceInfo(id)
						} else if (res.cancel) {}
					}
				});
			},
			async deleteDeviceInfo(id) {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/control/delete?deviceInfoId=' + id,
					method: 'get',
				});
				if (res.code === 200) {
					this.getList()
				} else {

				}
			},
			async editDeviceInfo(data) {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/control/editDevice',
					method: 'put',
					data: data
				});
				if (res.code === 200) {

				} else {

				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom right, #ececec, #ececec);
	}

	.controlDiv {
		float: left;
		width: 50%;
		margin-bottom: 20px;
		border-radius: 10px;
	}
</style>