techtron/pages/weitiandi/device/index.vue

<template>
	<view class="container">
		<view style="color: #f4f4f4;margin: 3vh;">
			<!-- <view style="display: flex;">
				<text>{{ i18('设备端口') }}:</text>
				<view class="dportitem " v-for="item in curPort" @click="selectPort(item.id);" style="display: contents;">
					<p class="dpropitem-title "> {{ item.text }}</p>
					<view style="position: absolute;right: 0px;z-index: 9999" v-if="item.id == choosePort">
						
					</view>
					<view class="dpropitem-block dportitem-block-2" v-if="item.status == 2">
						<view class="dpropitem-status">{{ i18('充电中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-1" v-if="item.status == 1 || item.status == 7">
						<view class="dpropitem-status">{{ i18('空闲中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(247,238,240);color:#FF6868"
						v-if="item.status == 3">
						<view class="dpropitem-status">{{ i18('禁用中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(248,244,230);color:#FFAA00"
						v-if="item.status == 4">
						<view class="dpropitem-status">{{ i18('故障中') }}</view>
					</view>


					<view class="dpropitem-block dportitem-block-3" style=";" v-if="item.status == 5">
						<view class="dpropitem-status">{{ i18('已连接') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(239,235,254);color:#A552FF"
						v-if="item.status == 6">
						<view class="dpropitem-status">{{ i18('已预约') }}</view>
					</view>
				</view>
			</view> -->
		</view>
		<view>

		</view>



		<view class="dboxs dport">
			<view class="dboxtitle">
				<image class="" style="width: 18px;height: 30px;" src="../../../static/images/new/starts/mine/symbol1.png" />
				<view class="dboxtitle-text"> {{ i18('设备端口') }}</view>
			</view>
			<view class="dportitems">
				<view class="dportitem " v-for="item in curPort" @click="selectPort(item.id);">
					<p class="dpropitem-title "> {{ item.text }}</p>
					<view style="position: absolute;right: 20px;z-index: 9999" v-if="item.id == choosePort">
						<image class="dportitem-img" style="width: 15px;height: 15px"
							src="/static/images/new/start/choose.png" />
					</view>
					<view class="dpropitem-block dportitem-block-2" v-if="item.status == 2">
						<image class="dportitem-img" src="/static/images/new/starts/charnging.png" />
						<view class="dpropitem-status">{{ i18('充电中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-1" v-if="item.status == 1 || item.status == 7">
						<image class="dportitem-img" src="/static/images/new/starts/free.png" />
						<view class="dpropitem-status">{{ i18('空闲中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(247,238,240);color:#FF6868"
						v-if="item.status == 3">
						<image class="dportitem-img" src="/static/images/new/starts/ban.png" />
						<view class="dpropitem-status">{{ i18('禁用中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(248,244,230);color:#FFAA00"
						v-if="item.status == 4">
						<image class="dportitem-img" src="/static/images/new/starts/bad.png" />
						<view class="dpropitem-status">{{ i18('故障中') }}</view>
					</view>


					<view class="dpropitem-block dportitem-block-3" style=";" v-if="item.status == 5">
						<image class="dportitem-img" src="/static/images/new/port.png" />
						<view class="dpropitem-status">{{ i18('已连接') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(239,235,254);color:#A552FF"
						v-if="item.status == 6">
						<image class="dportitem-img" src="/static/images/new/start/yuyue.png" />
						<view class="dpropitem-status">{{ i18('已预约') }}</view>
					</view>
				</view>


			</view>
		</view>
		<view class="dboxs dport" style="height: 100px" @click="planCharge">
			<view class="dboxtitle">
				<image class="portimg" src="../../../static/images/new/starts/mine/yuyue.png" />
				<view class="dboxtitle-text">{{ i18('预约充电') }}</view>
			</view>

			<view class="port-text" v-if="planInfo != null" style="left:60px;top:55px;font-size: 14px">
				{{ i18('已预约') }} {{planInfo.runTime}}
			</view>
			<view class="port-text" style="left:60px;top:55px;font-size: 14px" v-else>
				{{ i18('点击预约充电') }}
			</view>
			<view class="port-num" style="left:60px;top:55px;font-size: 12px" v-if="planInfo != null">
				{{ i18('可点击取消预约') }}
			</view>
			<!-- <view class="port-icon" v-if="planInfo == null" style="width: 50px;height: 50px;right:10px;top:28%">
				<image class="btn-image" src="../../../static/images/new/starts/index/yuyue.png">
				</image>
			</view>
			<view class="port-icon" v-if="planInfo != null" style="width: 50px;height: 50px;right:10px;top:28%">
				<image class="btn-image" src="/static/images/new/start/del.png">
				</image>
			</view> -->
		</view>
		<view class="dboxs dport" style="height: 25vh">
			<view class="dboxtitle">
				<image class="portimg" src="../../../static/images/new/starts/mine/list.png" />
				<view class="dboxtitle-text"> {{ i18('设备操作') }}</view>
			</view>
			<view style="margin-left: 7vw;display: flex;width: 70vw;">
			<view class="control-btn" @click="trigger()">
				<view v-if="portDetail.portStatus == 2">
					<image class="btn-image" src="../../../static/images/new/start/stop.png">
					</image>
					<view>{{ i18('停止充电') }}</view>
				</view>
				<view v-else>
					<image class="btn-image" src="../../../static/images/new/starts/index/using.png"> </image>
						<view>{{ i18('立即充电') }}</view>
				</view>
			</view>
			<!-- <view class="control-btn" @click="trigger()" v-else-if="portDetail.portStatus != 2">
				<view>
				<image class="btn-image" src="../../../static/images/new/starts/index/using.png"
				</image>
				<view>{{ i18('立即充电') }}{{portDetail.portStatus}}</view>
				</view>
			</view> -->
			<view class="control-btn" @click="getInfo">
				<image class="btn-image" src="../../../static/images/new/starts/index/icon_pull.png">
				</image>
				<view>{{ i18('获取状态') }}</view>
			</view>
			<view class="control-btn" @click="toSet">
				<image class="btn-image" src="../../../static/images/new/starts/index/list.png">
				</image>
				<view>{{ i18('设备控制') }}</view>
			</view>

			<!-- <view class="control-btn" @click="goBack">
				<image class="btn-image" src="../../../static/images/new/starts/index/return.png">
				</image>
				<view>{{ i18('查看状态') }}</view>
			</view> -->
			<view class="control-btn" @click="restart">
				<image class="btn-image" src="../../../static/images/new/starts/index/return.png">
				</image>
				<view>{{ i18('重置设备') }}</view>
			</view>
			</view>
		</view>
		<u-picker @cancel="showPort=false" @confirm="confirmPort" :show="showPort" :columns="portList"
			keyName="text"></u-picker>
		<view style="width: 100%;text-align: center;">
			<image style="height: 3vh;width: 35vw;position: absolute;bottom: 10vh;left: 32.5vw;"
				src="../../../static/images/new/starts/login/backImg2.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		getDeviceInfo,
		getPortDetail,
		startCharge,
		stopCharge,
		sendPortDetailCmd,
		checkStatusChange,
		getPlanInfo,
		cancelPlan
	} from "@/api/device/device";
	import {
		restart
	} from '@/api/device/current.js'

	import websocket from '@/utils/websocket'
	import i18 from '@/utils/i18.js'
	export default {
		data() {
			return {
				deviceInfo: {},
				visitTime: "",
				timer: null,
				showPort: false,
				portDetail: {
					portStatus: 0,
					POWER: 0,
					voltage: 0
				},
				statusTimer: "",
				connected: false,
				scriptTask: null,
				choosePort: 1,
				portList: [
					[{
						port: 1,
						text: "端口一"
					}]
				],
				planInfo: null,
				days: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
				curPort: []
			}
		},
		computed: {
			imgUrl() {
				return getApp().globalData.config.imgUrl;
			}
		},
		onLoad(opt) {
			this.deviceInfo.deviceId = opt.id;
			this.deviceInfo.ccid = opt.ccid;
			this.deviceInfo.qrcode = opt.qrcode;
		},
		onShow() {
			this.getInfo();
			this.getPlanInfo();
		},
		onUnload() {
			this.closeSocket();
		},
		methods: {
			i18(text) {
				return i18(text)
			},
			restart() {
				let deviceId = this.deviceInfo.deviceId;
				this.$modal.loading("正在重置中，请稍等...");
				// 重启充电桩
				let self = this;
				restart({
					deviceId: deviceId,
					ccid: this.deviceInfo.ccid
				}).then(res => {
					this.$modal.loading("正在重置中，请稍等...");
					setTimeout(function() {
						self.getInfo()
					}, 5000)
				})
			},
			goBack() {
				uni.navigateBack({});
			},
			planCharge() {
				if (this.planInfo != null) {
					this.$modal.confirm("确认取消预约？").then(res => {
						this.cancelPlan();
					})
				} else {
					this.toPlan()
				}
			},
			cancelPlan() {
				cancelPlan(this.planInfo.id).then(res => {
					this.$modal.msg("取消成功");
					this.planInfo = null;
					this.getPlanInfo();
				})
			},
			getPlanInfo() {
				getPlanInfo(this.deviceInfo.deviceId, this.choosePort).then(res => {
					let data = res.data;
					if (data != null) {
						let planType = data.planType;
						if (planType == 1) { //单次预约
							let planInfo = {};
							planInfo.runTime = data.runTime;
							this.planInfo = planInfo;
							this.planInfo.id = data.id;
						} else {
							let planInfo = {};
							planInfo.runTime = data.runTime;
							let repeatDays = data.repeatDays;
							let days = repeatDays.split(",")
							let strs = "";
							for (let i = 0; i < days.length; i++) {
								if (strs.length > 0) {
									strs += ",";
								}
								strs += i18(this.days[days[i]]);
							}
							this.planInfo = planInfo;
							this.planInfo.runTime = strs + " " + data.repeatTime;
							this.planInfo.id = data.id;
						}
					}
				})
			},
			confirmPort(e) {
				let value = e.value[0]
				this.choosePort = value.port;
				this.showPort = false;
				this.getInfo()
			},

			parsePortCmd(real_data) {
				let self = this;
				self.portDetail = real_data
				self.curPort = [];
				let port_first_status = self.portDetail["port_first_status"];
				let port_second_status = self.portDetail["port_second_status"]
				if (port_first_status) {
					self.portList[0].push({
						port: 1,
						text: i18("端口一")
					});
					self.curPort.push({
						text: i18("端口一"),
						status: port_first_status,
						id: 1,
					})
				}
				if (port_second_status) {
					self.portList[0].push({
						port: 2,
						text: i18("端口二")
					});
					self.curPort.push({
						text: i18("端口二"),
						status: port_second_status,
						id: 2
					})
				}
				let choosePort = self.choosePort
				if (choosePort == 1) {
					self.portDetail.portStatus = port_first_status;
				} else if (choosePort == 2) {
					self.portDetail.portStatus = port_second_status;
				}

				self.$modal.closeLoading();
			},
			initSocket(key) {
				let self = this;
				let socketUrl = getApp().globalData.config.socketUrl
				this.scriptTask = websocket({
					url: "/" + key + "/",
				});
				let scriptTask = this.scriptTask;
				scriptTask.onOpen(function(res) {
					console.log('WebSocket连接已打开！');
					self.connected = true;
				});
				scriptTask.onError(function(res) {
					self.connected = false;
					console.log(res);
				});
				scriptTask.onMessage(function(res) {
					let data = JSON.parse(res.data);
					let type = data.type;
					let real_data = data.real_data;


					if (type == 103) {
						self.parsePortCmd(real_data);
					}
					if (type == 116) {
						self.$modal.closeLoading();
						self.getInfo();
					}
					if (type == 113) {
						self.$modal.closeLoading();
						self.getInfo();
					}
					if (type == 96) {
						self.mainBoardInfo = real_data;
						self.formatMainboardData();
						self.$modal.closeLoading();
					}
					self.$forceUpdate();
					console.log('收到服务器内容：' + JSON.stringify(data));
				});
				scriptTask.onClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},
			toSet() {
				this.closeSocket();
				uni.navigateTo({
					url: '/pages/weitiandi/device/setting?id=' + this.deviceInfo.deviceId + "&ccid=" + this
						.deviceInfo.ccid
				});
			},
			toPlan() {
				uni.navigateTo({
					url: '/pages/weitiandi/device/plan?port=' + this.choosePort + '&id=' + this.deviceInfo
						.deviceId + "&ccid=" + this.deviceInfo.ccid
				});
			},
			trigger() {
				let portStatus = this.portDetail.portStatus;
				if (portStatus == 2) { //需要停止充电
					this.$modal.confirm("需要停止充电么？").then(res => {
						this.stopCharge();
					})
				} else {
					if (portStatus == 1) {
						this.$modal.msg("请先将充电枪插入后再点击充电");
					}
					if (portStatus == 5) {
						this.$modal.confirm("确认开始充电么？").then(res => {
							this.startCharge();
						})
					}

				}
			},
			getInfo() {
				let self = this;
				this.$modal.loading("正在获取状态，请稍等...");
				sendPortDetailCmd(this.deviceInfo).then(res => {
					this.$modal.loading("正在获取状态，请稍等...");
					this.visitTime = res.msg;
					if (!this.visitTime) {
						this.$modal.msg("请重新进入页面");
						return;
					}
					if (!this.scriptTask) {
						this.initSocket(this.deviceInfo.deviceId);
					}
					setTimeout(function() {
						getPortDetail(self.deviceInfo, self.visitTime).then(res => {
							let data = res.data;
							if (data != null) {
								self.parsePortCmd(data);
							} else {}
						});
					}, 500)
				})
			},
			stopCharge() {
				let self = this;
				this.deviceInfo.port = this.choosePort;
				stopCharge(this.deviceInfo).then(() => {
					self.$modal.loading("停止成功");
					setTimeout((() => {
						self.getInfo();
					}), 1000);
				})
			},
			startCharge() {
				let self = this;
				this.deviceInfo.port = this.choosePort;
				startCharge(this.deviceInfo).then(res => {
					self.$modal.loading("启动成功");
					setTimeout((() => {
						self.getInfo();
					}), 1000);
				})
			},
			getPortInfo() {
				this.startPortDetailTimer();
			},
			startPortDetailTimer() {
				let self = this;
				this.timer = setTimeout(function() {
					getPortDetail(self.deviceInfo, self.visitTime).then(res => {
						let data = res.data;
						if (data != null) {
							self.portDetail = data;
							self.checkStatusCheck();
							self.$modal.closeLoading();
						} else {
							self.startPortDetailTimer();
						}
					});
				}, 1000);
			},
			checkStatusCheck() {
				this.statusChangeTimer();
			},
			checkOnPage() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				if ("pages/weitiandi/device/index" != currentRoute) {
					return false;
				}
				return true;
			},
			closeSocket() {
				this.scriptTask.close();
				this.scriptTask = null;
			},
			statusChangeTimer() {
				let self = this;
				this.statusTimer = setTimeout(function() {
					if (!this.checkOnPage()) {
						return;
					}
					checkStatusChange(self.deviceInfo, self.visitTime).then(res => {
						let data = res.data;
						if (data != null) {
							self.getInfo();
						} else {
							self.statusChangeTimer();
						}
					});
				}, 3000);
			}
		}
	}
</script>

<style>
	.container {
		/* background: rgb(213, 213, 213); */
		background-image: url('../../../static/images/new/starts/bg2.jpg');
		inset: 0;
		position: absolute;
		background-size: cover;
		background-repeat: no-repeat;
		height: 100%;
		width: 100%;
	}

	.header {
		position: relative;
		margin-top: 4vw;
	}

	.header-status-desc {
		position: absolute;
		text-align: center;
		width: 100%;
		bottom: 1vh;
		font-size: 5vw;
		font-weight: bold;
		color: #0E9F9B;
		margin-bottom: 5vw;
	}

	.header-status {
		font-weight: bold;
		text-align: center;
	}

	.chong-active {
		color: #0E9F9B
	}

	.header-img {
		width: 100%;
		padding: 5% 10%;
		text-align: center;

	}

	.header-img image {
		width: 100%;
		height: 23vh;
	}

	.info-body {
		background: #0E9F9B;
		height: 20vh;
		margin: 0 2%;
		border-radius: 1vw;
		margin-top: 2vh;
		color: #F8FCFF;
		line-height: 3vh;
	}

	.info-content {
		display: inline-block;
		width: 23%;
		text-align: center;
		margin: 1%;
		margin-top: 2.5vh;
	}

	.info-content-value {
		font-weight: bold;
	}

	.info-content-text {}

	.info-summary {
		display: flex;
		flex-direction: row;
		text-align: center;
		margin: 3vh 0;
	}

	.summary {
		width: 33%;
		line-height: 2.5vh;
	}

	.charge-num {
		color: #0E9F9B;
		font-weight: bold;
		font-size: 4.5vw;
	}

	.charge-title {
		color: #B2B2B2;
		font-weight: 400;
	}

	.btn-image {
		width: 42px;
		height: 42px;
	}

	.info-bottom-btn {
		display: flex;
		flex-direction: row;
		text-align: center;
		position: relative;
		margin-top: 10vh;
	}

	.btn-area {
		width: 50%;
		height: 50px;
	}

	.left {
		position: relative;
		left: 10px;
		text-align: right;
	}

	.right {
		text-align: left;
		position: relative;
		right: 10px;
	}

	.info-plan {
		text-align: center;
		color: #0E9F9B;
		margin-top: 1vh;
		font-weight: 400;
	}

	.setting {
		position: fixed;
		right: -1px;
		top: 10vh;
		z-index: 999;
		background: rgb(227, 243, 245);
		color: #0E9F9B;
		font-size: 10px;
		border-radius: 5px;
		padding: 3px;
	}

	.port {
		height: 70px;
		background: #F8FCFF;
		border: 0px solid #F8FCFF;
		box-shadow: 0px 0px 10px 1px rgba(52, 52, 52, 0.3);
		border-radius: 4px;
		margin: 0 10px;
		position: relative;
		margin-top: 10px;
	}

	.plan {
		height: 70px;
		background: #F8FCFF;
		border: 0px solid #F8FCFF;
		box-shadow: 0px 0px 6px 1px rgba(101, 101, 101, 0.29);
		border-radius: 4px;
		margin: 0 10px;
		position: relative;
		margin-top: 15px;
	}

	.dpropitem-block {
		padding: 0.12rem 0.37rem;
		/* background: #e6f6f1; */
		display: flex;
		width: 70px;
		height: 70px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.port-image {
		height: 40px;
		width: 40px;
		position: absolute;
		top: 15px;
		left: 20px;
	}

	.port-text {
		position: absolute;
	top:13px;
	left:75px;
		font-weight: bold;
	}

	.port-num {
		position: absolute;
		top: 38px;
		left: 75px;
		color: #B2B2B2;
	}

	.port-icon {
		position: absolute;
		top: 30px;
		right: 5px;
		width: 10px;
		height: 16px;
	}

	.port-icon image {
		width: 90%;
	}

	.body-bottom {
		padding: 0 22px;
	}

	.body-bottom .info-content {
		width: 30%;
	}

	.bottom-control {
		height: 22vh;
		margin: 0 2%;
		margin-top: 2vh;
		line-height: 3vh;
		background: #F8FCFF;
		border: 0px solid #F8FCFF;
		box-shadow: 0px 0px 6px 1px rgba(101, 101, 101, 0.29);
		border-radius: 4px;
		padding: 3%;
	}

	.control-btn {
		/* display: inline-block;
		;
		height: 60px;
		width: 25%; */
		padding: 10px 12px;
		text-align: center;
		font-size: 12px;
		color: black;
	}

	.control-btn .btn-image {}

	.dportitem {
		color: #60af7b
	}

	.dboxs {
		background: linear-gradient(#1e1e1e, #050609);
		border: 0px solid #F8FCFF;
		box-shadow: 0px 0px 6px 1px rgba(101, 101, 101, 0.29);
		border-radius: 4px;
		padding: 20px;
		font-size: 0.24rem;
		color: #57B03D;
		margin: 5px;
		position: relative;
	}

	.portimg {
		width: 20px;
		height: 22px;
	}

	.dportitem-img {
		width: 50px;
		height: 50px;
	}

	.dpropitem-block {
		/* padding: 0.12rem 0.37rem;
		background: #e6f6f1; */
		margin-left: 7px;

	}

	.dportitem {
		margin: 10px 10px 0 32px;
		width: 81px;
		position: relative;
		display: inline-block;
	}

	.dportitem-block-2 {
		/* background: #f9f4e5; */
		color: #FFAA00;
	}

	.dpropitem-title {
		text-align: center;
		margin-bottom: 5px;
		font-size: 16px;
		/* margin-left: 16px; */
	}

	.dpropitem-status {
		font-size: 14px;
		
	}

	.dboxtitle {
		font-size: 18px;
		position: relative;
	}

	.dboxtitle-text {
		display: inline-block;
		position: absolute;
		top: 0px;
		left: 40px;
		color: #e7e7e7;
	}



	.control-btn {
		font-size: 14px;
		color: #d8d8d8;
	}
</style>