techtron/pages/weitiandi/device/status.vue

<template>
  <view class="container">
    <view style=";position: relative;height: 250px;margin-top:2vh;">
      <view class="dtop">
        <view class="can" style="background-image: url(/static/images/new/quan.png);">

          <view class="box">
            <!--view class="top_ball one"></view-->
            <!--view class="top_ball two"></view-->
            <view class="three">
              <view class="four"></view>
              <view class="five"></view>
              <view class="six"></view>

            </view>

            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>

          <!--            <canvas id="c">-->
          <!--            </canvas>-->
          <view class="stip">

            <view class="p0" st="">{{ deviceInfo.qrcode}}</view>
            <view class="p1">
              <view v-if="portDetail.portStatus == 2">
                {{$t('charge.charging')}}
              </view>
              <view v-else-if="portDetail.portStatus == 6">
                {{$t('charge.planed')}}
              </view>

              <view v-else-if="portDetail.portStatus == 5">
                {{$t('charge.connected')}}
              </view>

              <view v-else>
                {{$t('charge.nocharge')}}
              </view>

            </view>

          </view>
        </view>

      </view>
    </view>
    <view class="dstatus">
      <view class="ditem">
        <image class="itemimg" src="/static/images/new/tmp.png"/>
        <view class="item-value">{{portDetail.dev_temper}}℃</view>
        <span class="item-text">{{$t('charge.devtemper')}}</span>
      </view>
      <view class="ditem">
        <image class="itemimg" src="/static/images/new/dianya.png"/>
        <view class="item-value">{{ portDetail.voltage }}V</view>
        <span class="item-text">{{$t('charge.voltage')}}</span>
      </view>
      <view class="ditem">
        <image class="itemimg" src="/static/images/new/dianliu.png"/>
        <view class="item-value" v-if="portDetail.voltage == 0">0A</view>
        <view class="item-value" v-else>{{portDetail.POWER/portDetail.voltage}}A</view>
        <span class="item-text">{{$t('charge.current')}}</span>
      </view>

      <view class="ditem">
        <image class="itemimg" src="/static/images/new/shjian.png"/>
        <view class="item-value">{{ portDetail.time }}{{ i18('分钟') }}</view>
        <span class="item-text">{{$t('charge.chargetime')}}</span>
      </view>

      <view class="ditem">
        <image class="itemimg" src="/static/images/new/gonglv.png"/>
        <view class="item-value">{{ portDetail.power }}W</view>
        <span class="item-text">{{$t('charge.power')}}</span>
      </view>

      <view class="ditem">
        <image class="itemimg" src="/static/images/new/dianliang.png"/>
        <view class="item-value">{{ portDetail.elec }} {{ i18('度') }}</view>
        <span class="item-text">{{$t('charge.elec')}}</span>
      </view>

    </view>
    <view class="dbtns">
      <view class="start" @click="toPage">
        <image style="width:25px;height: 25px;margin-right: 5px;" src="/static/images/new/start.png"/>
        <span>{{$t('charge.startcharge')}}</span>
      </view>


      <view class="get" @click="getInfo">
        <image style="width:25px;height: 25px;margin-right: 5px;" src="/static/images/new/get.png"/>
        <span>{{$t('charge.getinfo')}}</span>
      </view>

    </view>
    <view class="dtip">
      <view style="margin:10px 0px;color: #1A87FF;"><img style="width: 13px;height: 13px" src="/static/images/new/tip.png">{{i18('温馨提示')}}</view>
      <view>1，{{i18('桩控制最大输出电流，当功率没有达到请检查车的状态或者车的设置')}};</view>
      <view>2，{{i18('启动充电-&gt;设备管理->可设置设备最大输出电流')}}</view>
      <view>3，{{i18('为保障您远程启动正常充电，请确保枪头完全连接充电口，同时确认您的爱车处于立即充电状态下')}};</view>
      <view>4，{{i18('注意规范安全充电，停好车，锁好车。')}}</view>
    </view>
  </view>
</template>

<script>
import {getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange,getPlanInfo,cancelPlan} from "@/api/device/device";
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:["","周一","周二","周三","周四","周五","周六","周日"]
   }
 },
 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: {
    toPage(){
      let imei =  this.deviceInfo.deviceId;
      let ccid =  this.deviceInfo.ccid;
      this.closeSocket();
      uni.navigateTo({
        url: '/pages/weitiandi/device/index?id='+imei+'&ccid='+ccid
      });
    },
    i18(text){
      return i18(text)
    },
    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 +=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;
      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.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));
      });
      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() {
    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);
        }
       // 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(){
      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;
  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: 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: 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 20px;
  text-align: center;
  font-size: 12px;
  color: black;
}
.control-btn .btn-image{
}

#box {
  /* width: 300px; */
  height: 280px;
  position: relative;
  /* 背景色 */
  /* background: #f7f6f6; */
  overflow: hidden;
  /* padding: 50px 0; */
  box-sizing: border-box;
;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  /* 此处尽量不要设置背景色,可以选择在父标签上设置背景色，否则没有黏黏的效果 */
  filter: url("#goo");
}

/* 电量文字 */
.text {
  font-weight: 200;
  font-size: 20px;
  margin-top: 5px;
  text-align: center;
  color: #ff6600;
}

/* 电量文字 */
.text span {
  font-size: 15px;
}

/* 顶部的两个旋转小球 */
.top_ball {
  width: 200px;
  height: 200px;
  border-radius: 35%;
  opacity: 0.5;
  position: absolute;
  top: 20px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  -webkit-mask: radial-gradient(transparent 95px, white 0px);
}

/* 顶部的两个旋转小球 */
.top_ball.one {
  background: var(--c);
  animation: ballZhuan 5s linear infinite;
}

/* 顶部的两个旋转小球 */
.top_ball.two {
  background: var(--c);
  animation: ballZhuan 8s linear infinite;
}

.three {
  width: 170px;
  height: 170px;
  border-radius: 300px;
  opacity: 1;
  position: absolute;
  top: 20px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #ffffff;
  /* animation: ballZhuan 9s linear infinite; */
  overflow: hidden;
  box-shadow: 0px 0px 19px 1px #2196f3;
}
.four {
  width: 200px;
  height: 200px;
  border-radius: 80px;
  opacity: 0.3;
  position: absolute;
  top: 10px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #2196f3;
  animation: ballZhuan1 linear infinite;
  animation-duration: 11s;
}
.five {
  width: 270px;
  height: 270px;
  border-radius: 99px;
  opacity: 0.6;
  position: absolute;
  top: 30px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #2196f3;
  animation: ballZhuan1 linear infinite;
  /* transform: rotate(120deg); */
  animation-duration: 9s;
  left: -67px;
}
.six {
  width: 270px;
  height: 270px;
  border-radius: 99px;
  opacity: 0.6;
  position: absolute;
  top:30px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #2196f3;
  animation: ballZhuan1 7s linear infinite;
  /* transform: rotate(120deg); */
  right: -67px;
}

@keyframes ballZhuan {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ballZhuan1 {
  100% {
    transform: rotate(360deg);
  }
}

/* 底部的小球 */
.dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(101,192,255,0.28);
  position: absolute;
  z-index: 1000;
  bottom: -50px;
}

.dot:nth-of-type(1) {
  width: 40px;
  height: 40px;
  right: 116px;
  animation: dotMove 5s linear infinite;
}

.dot:nth-of-type(2) {
  width: 50px;
  height: 50px;
  left: 120px;
  animation: dotMove 4s linear infinite;
}

.dot:nth-of-type(3) {
  animation: dotMove 2s linear infinite;
}

.dot:nth-of-type(4) {
  width: 15px;
  height: 15px;
  left: 130px;
  animation: dotMove 2s linear infinite;
}

.dot:nth-of-type(5) {
  width: 30px;
  height: 30px;
  animation: dotMove 3s linear infinite;
}

@keyframes dotMove {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    transform: translateY(-260px);
    opacity: 0;
  }
}

.w-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 0px 25px;
}
.w-flex__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.w-item{
  text-align: center;
  padding: 5px;
}
.w-item-tit{
  font-size: 14px;
  color: #888;
}
.w-item-num{
  font-size: 18px;
  color: #111;
}
.can{
  position: relative;
  z-index: 0;
  width: 211px;
  height: 211px;

  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dtop{
  background: url(/static/images/new/box1.png);
  background-size: cover;
  width: 260px;
  height: 236px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 15%;
  position: relative;
}
.dstatus{
  margin-top: 0.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
}
.ditem{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.3rem;
  margin-top: 10px;
}
.itemimg{
  width: 50px;
  height: 50px;
}

.item-value{
  font-weight: bold;
  font-size: 19px;
  margin:4px 0;
}
.item-text{
  font-size: 13px;
  margin:1px 0;
  color: #999999;
}
.start{
  background: #1A87FF;
  color: #fff;
  width: 45%;
  height: 50px;
  min-height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.dbtns{
  display: flex;
  margin-top:10px;
  justify-content: space-between;
  padding: 0 30px;
}
.get{
  background: #fff;
  border: 1px solid #1A87FF;
  color: #1A87FF;
  width: 45%;
  height: 50px;
  min-height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.dtip{
  margin: 20px 20px;
  padding: 10px;
  background: rgba(127,200,251,0.1);
  border: 1px solid #7FC8FB;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.19);
  border-radius: 5px;
  font-size: 17px;
  font-weight: 400;
  color: #B8B9BA;
  margin-bottom: 10px;
}
.p1{
  font-size: 20px;
  color: white;
  font-weight: bold;
  margin-top:10px;
}
.stip{
  text-align: center;
  z-index: 9999;
}
</style>