techtron/pages/weitiandi/device/index.vue

<template>
  <view class="container">
    <view class="header">
      <view class="setting" @click="toSet">设备控制</view>
      <view class="header-status chong-active" v-if="portDetail.port_first_status == 1">
        充电枪未连接
      </view>

      <view class="header-status chong-active" v-if="portDetail.port_first_status == 0">
        正在读取状态
      </view>

      <view class="header-status chong-active" v-if="portDetail.port_first_status == 5">
        充电枪已连接
      </view>

      <view class="header-status chong-active" v-if="portDetail.port_first_status == 2">
        充电枪已连接
      </view>
      <view class="header-img" v-if="portDetail.port_first_status == 2">
        <image :src="imgUrl+'/chargedetail/chonging.png'">

        </image>
      </view>

      <view class="header-img" v-if="portDetail.port_first_status != 2">
        <image :src="imgUrl+'/chargedetail/chongoff.png'">

        </image>
      </view>
      <view class="header-status-desc" v-if="portDetail.port_first_status == 2">
        充电中
      </view>

      <view class="header-status-desc" style="color: #B2B2B2" v-if="portDetail.port_first_status != 2">
        未充电
      </view>
    </view>

    <view class="info-body">
      <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="info-summary">
      <view class="summary charge-time">
          <view class="charge-num">{{ portDetail.time }}分钟</view>
          <view class="charge-title">已冲时间</view>

      </view>


      <view class="summary charge-gonglv">
        <view class="charge-num">{{ portDetail.power }}W</view>
        <view class="charge-title">充电功率</view>

      </view>


      <view class="summary charge-dianliang">
        <view class="charge-num">{{ portDetail.elec }} 度</view>
        <view class="charge-title">已冲电量</view>

      </view>

    </view>


    <view class="info-bottom">

      <view class="info-bottom-btn" >
          <view class="btn-area left" @click="getInfo">
            <image class="btn-image" :src="imgUrl+'/chargedetail/getstatus.png'">

            </image>

          </view>
        <view class="btn-area right" @click="trigger()">
          <image class="btn-image" :src="imgUrl+'/chargedetail/stop.png'" v-if="portDetail.port_first_status == 2">

          </image>

          <image class="btn-image" :src="imgUrl+'/chargedetail/start.png'" v-if="portDetail.port_first_status != 2">

          </image>

        </view>
      </view>
      <view class="info-plan" @click="toPlan">
        预约充电
      </view>
    </view>
  </view>
</template>

<script>
import {getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange} from "@/api/device/device";
import websocket from '@/utils/websocket'
export default {
 data() {
   return {
     deviceInfo:{},
     visitTime:"",
     timer:null,
     portDetail:{port_first_status:0,POWER:0,voltage:0},
     statusTimer:"",
     connected:false,
     scriptTask:null,
   }
 },
 computed: {
   imgUrl() {
     return getApp().globalData.config.imgUrl;
   }
 },
 onLoad(opt) {
   this.deviceInfo.deviceId = opt.id;
   this.deviceInfo.ccid = opt.ccid;

 },
  onShow(){
    this.getInfo();
  },
  onUnload (){
   this.closeSocket();
  },
  methods: {
    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.portDetail = real_data;
            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();
        }
        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?id='+this.deviceInfo.deviceId+"&ccid="+this.deviceInfo.ccid
      });
    },
    trigger(){
      let port_first_status = this.portDetail.port_first_status;
      if(port_first_status == 2){//需要停止充电
        this.$modal.confirm("需要停止充电么？").then(res=>{
              this.stopCharge();
        })
      }else{
        if(port_first_status == 1){
          this.$modal.msg("请先将充电枪插入后再点击充电");
        }
        if(port_first_status == 1){
          this.$modal.confirm("确认开始充电么？").then(res=>{
            this.startCharge();
          })
        }

      }
    },
   getInfo() {
    this.$modal.loading("正在获取状态，请稍等...");
     sendPortDetailCmd(this.deviceInfo).then(res => {
        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;
      stopCharge(this.deviceInfo).then(()=>{
        self.$modal.loading("停止成功");
        setTimeout((()=>{
          self.getInfo();
        }),1000);
      })
    },
    startCharge(){
      let self = this;
      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(249, 252, 255);
  inset: 0;
  position: absolute;
}

.header {
  position: relative;
}

.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 10%;
  border-radius: 1vw;
  margin-top:2vh;
  color: #F8FCFF;
  line-height: 3vh;
}
.info-content{
  display: inline-block;
  width: 48%;
  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;
}
</style>