|
@@ -0,0 +1,671 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+ <view class="header">
|
|
|
|
|
+ <view class="header-status chong-active" v-if="portDetail.portStatus == 1">
|
|
|
|
|
+ 充电枪未连接
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="header-status chong-active" v-if="portDetail.portStatus == 0">
|
|
|
|
|
+ 正在读取状态
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="header-status chong-active" v-if="portDetail.portStatus == 5">
|
|
|
|
|
+ 充电枪已连接
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="header-status chong-active" v-if="portDetail.portStatus == 2">
|
|
|
|
|
+ 充电枪已连接
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="header-img" v-if="portDetail.portStatus == 2">
|
|
|
|
|
+ <image :src="imgUrl+'/chargedetail/chonging.png'">
|
|
|
|
|
+
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="header-img" v-if="portDetail.portStatus != 2">
|
|
|
|
|
+ <image :src="imgUrl+'/chargedetail/chongoff.png'">
|
|
|
|
|
+
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="header-status-desc" v-if="portDetail.portStatus == 2">
|
|
|
|
|
+ 充电中
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="header-status-desc" style="color: #B2B2B2" v-if="portDetail.portStatus != 2">
|
|
|
|
|
+ 未充电
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port" @click="showPort = true">
|
|
|
|
|
+ <view class="port-image">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/index/device.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-text">
|
|
|
|
|
+ 设备编号:{{ deviceInfo.qrcode }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="port-num">
|
|
|
|
|
+ <view>
|
|
|
|
|
+ {{portList[0][choosePort-1]["text"]}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-icon">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/index/right.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="plan" @click="planCharge">
|
|
|
|
|
+ <view class="port-image">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/index/clock.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-text" v-if="planInfo != null" style="top:8px">
|
|
|
|
|
+ 预约充电时间:
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view v-if="planInfo != null" class="port-text" style="top:30px;">
|
|
|
|
|
+ <text style="font-size: 10px">{{ planInfo.runTime }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-text" style="top:24px" v-else>
|
|
|
|
|
+ 点击预约充电
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-num" style="top:48px;font-size: 12px" v-if="planInfo != null">
|
|
|
|
|
+ 点击取消预约
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-icon" v-if="planInfo==null">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/index/right.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="port-icon" v-if="planInfo !=null" style="width: 18px;height: 18px;right:1px;">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/index/del.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-body">
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value">{{ portDetail.voltage }}V</view>
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 充电电压
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value" v-if="portDetail.voltage == 0">0A</view>
|
|
|
|
|
+ <view class="info-content-value" v-else>{{portDetail.POWER/portDetail.voltage}}A</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 充电电流
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value">{{portDetail.dev_temper}}℃</view>
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 设备温度
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value">{{portDetail.wire_temper}}℃</view>
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 线路温度
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="body-bottom">
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value">{{ portDetail.time }}分钟</view>
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 已冲时间
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value">{{ portDetail.power }}W</view>
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 充电功率
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-content">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-content-value">{{ portDetail.elec }} 度</view>
|
|
|
|
|
+ <view class="info-content-text">
|
|
|
|
|
+ 已冲电量
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-picker @cancel="showPort=false" @confirm="confirmPort" :show="showPort" :columns="portList" keyName="text"></u-picker>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <view class="bottom-control">
|
|
|
|
|
+ <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/control/stop.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <view>停止充电</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus != 2">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/control/charge.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <view>立即充电</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="control-btn" @click="getInfo">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/control/getstatus.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <view>获取状态</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="control-btn" @click="toSet">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/control/control.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <view>设备控制</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="control-btn">
|
|
|
|
|
+ <image class="btn-image" :src="imgUrl+'/control/record.png'" >
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <view>使用记录</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import {getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange,getPlanInfo,cancelPlan} from "@/utils/weitiandi/device/device.js";
|
|
|
|
|
+// #ifdef APP
|
|
|
|
|
+import ecUI from '@/utils/ecUI.js'
|
|
|
|
|
+import ecBLE from '@/utils/ecBLE/ecBLE.js'
|
|
|
|
|
+// #endif
|
|
|
|
|
+// #ifdef MP
|
|
|
|
|
+const ecUI = require('@/utils/ecUI.js')
|
|
|
|
|
+const ecBLE = require('@/utils/ecBLE/ecBLE.js')
|
|
|
|
|
+// #endif
|
|
|
|
|
+let ctx
|
|
|
|
|
+let isCheckScroll = true
|
|
|
|
|
+let isCheckRevHex = false
|
|
|
|
|
+let isCheckSendHex = false
|
|
|
|
|
+let sendData = ''
|
|
|
|
|
+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:["","周一","周二","周三","周四","周五","周六","周日"],
|
|
|
|
|
+ textRevData: '',
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ imgUrl() {
|
|
|
|
|
+ return getApp().globalData.config.imgUrl;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(opt) {
|
|
|
|
|
+ this.deviceInfo.deviceId = opt.id;
|
|
|
|
|
+ this.deviceInfo.ccid = opt.ccid;
|
|
|
|
|
+ this.deviceInfo.qrcode = opt.qrcode;
|
|
|
|
|
+ this.buletooth();
|
|
|
|
|
+ this.checkPassword();
|
|
|
|
|
+ },
|
|
|
|
|
+ onShow(){
|
|
|
|
|
+ this.getInfo();
|
|
|
|
|
+ },
|
|
|
|
|
+ onUnload (){
|
|
|
|
|
+ this.closeSocket();
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ checkPassword(){
|
|
|
|
|
+ },
|
|
|
|
|
+ buletooth(){
|
|
|
|
|
+ let self = this;
|
|
|
|
|
+ ctx = this
|
|
|
|
|
+ isCheckScroll = true
|
|
|
|
|
+ isCheckRevHex = false
|
|
|
|
|
+ isCheckSendHex = false
|
|
|
|
|
+ sendData = ''
|
|
|
|
|
+
|
|
|
|
|
+ //on disconnect
|
|
|
|
|
+ ecBLE.onBLEConnectionStateChange(() => {
|
|
|
|
|
+ ecUI.showModal('提示', '设备断开连接')
|
|
|
|
|
+ })
|
|
|
|
|
+ //receive data
|
|
|
|
|
+ ecBLE.onBLECharacteristicValueChange((str, strHex) => {
|
|
|
|
|
+ ctx.textRevData = str
|
|
|
|
|
+ console.log("收到消息:"+str);
|
|
|
|
|
+ let data = JSON.parse(str);
|
|
|
|
|
+ let type = data.type;
|
|
|
|
|
+ let real_data = data.real_data;
|
|
|
|
|
+ if(type == 103){
|
|
|
|
|
+ self.portDetail = real_data
|
|
|
|
|
+ self.portList = [[]];
|
|
|
|
|
+ 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:"端口一"});
|
|
|
|
|
+ }
|
|
|
|
|
+ if(port_second_status){
|
|
|
|
|
+ self.portList[0].push({port:2,text:"端口二"});
|
|
|
|
|
+ }
|
|
|
|
|
+ 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();
|
|
|
|
|
+ }
|
|
|
|
|
+ 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));
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ planCharge(){
|
|
|
|
|
+ if(this.planInfo != null){
|
|
|
|
|
+ this.$modal.confirm("确认取消预约?").then(res=>{
|
|
|
|
|
+ this.cancelPlan();
|
|
|
|
|
+ })
|
|
|
|
|
+ }else{
|
|
|
|
|
+ this.toPlan()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ sendBlueData(){
|
|
|
|
|
+ ecBLE.writeBLECharacteristicValue(tempSendData, false)
|
|
|
|
|
+ },
|
|
|
|
|
+ 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 +=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()
|
|
|
|
|
+ },
|
|
|
|
|
+ initSocket(key){
|
|
|
|
|
+ let self = this;
|
|
|
|
|
+ },
|
|
|
|
|
+ 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() {
|
|
|
|
|
+ this.$modal.loading("正在获取状态,请稍等...");
|
|
|
|
|
+ sendPortDetailCmd().then(res => {
|
|
|
|
|
+ this.$modal.loading("正在获取状态,请稍等...");
|
|
|
|
|
+ this.visitTime = res.msg;
|
|
|
|
|
+ if(!this.visitTime){
|
|
|
|
|
+ this.$modal.msg("请重新进入页面");
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if(!this.scriptTask){
|
|
|
|
|
+ // this.initSocket(this.deviceInfo.deviceId);
|
|
|
|
|
+ }
|
|
|
|
|
+ // this.getPortInfo()
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ 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(){
|
|
|
|
|
+ ecBLE.onBLEConnectionStateChange(() => {})
|
|
|
|
|
+ ecBLE.onBLECharacteristicValueChange(() => {})
|
|
|
|
|
+ ecBLE.closeBLEConnection()
|
|
|
|
|
+ },
|
|
|
|
|
+ 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(249, 252, 255);
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.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;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.header-status {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ padding-left: 5vw;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.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: 90%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+.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 6px 1px rgba(101,101,101,0.29);
|
|
|
|
|
+ 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;
|
|
|
|
|
+}
|
|
|
|
|
+.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: 20vh;
|
|
|
|
|
+ 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 20px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: black;
|
|
|
|
|
+}
|
|
|
|
|
+.control-btn .btn-image{
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|