同步UI

todo 英文版

pages.json

@@ -14,6 +14,13 @@
         "navigationStyle": "default"
       }
     },
+    {
+      "path": "pages/weitiandi/bluetooth/status",
+      "style": {
+        "navigationBarTitleText": "充电页面",
+        "navigationStyle": "default"
+      }
+    },
     {
       "path": "pages/bluetooth/index/index",
       "style": {

pages/weitiandi/bluetooth/index.vue

@@ -1,182 +1,111 @@
 <template>
   <view class="container">
-    <view style="height: 20px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:30px;z-index: 9999;background: rgb(243,123,26);color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="goBack">
-      断开连接
-    </view>
+    <view class="dboxs dport">
+      <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/port.png"/>
+        <view class="dboxtitle-text"> 设备端口</view>
 
-    <view style="height: 20px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:120px;z-index: 9999;background: #0E9F9B;color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="modifyPwd">
-     修改密码
-    </view>
-    <view class="header">
-      <view class="header-img" v-if="portDetail.portStatus == 2">
-        <image :src="imgUrl+'/chargedetail/chonging.png'">
+        </view>
 
-        </image>
-      </view>
 
-      <view class="header-img" v-if="portDetail.portStatus != 2">
-        <image :src="imgUrl+'/chargedetail/chongoff.png'">
+      <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: 0px;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/start/using.png"/>
+            <view class="dpropitem-status">充电中</view>
+          </view>
 
-        </image>
-      </view>
-      <view class="header-status-desc" v-if="portDetail.portStatus == 2">
-        充电中
-      </view>
+          <view class="dpropitem-block dportitem-block-1" v-if="item.status == 1">
+            <image class="dportitem-img" src="/static/images/new/start/free.png"/>
+            <view class="dpropitem-status">空闲中</view>
+          </view>
 
-      <view class="header-status-desc" style="color: #B2B2B2" v-if="portDetail.portStatus != 2">
-        未充电
-      </view>
-      <view class="header-status chong-active" v-if="portDetail.portStatus == 1">
-        充电枪未连接
-      </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/start/ban.png"/>
+            <view class="dpropitem-status">禁用中</view>
+          </view>
 
-      <view class="header-status chong-active" v-if="portDetail.portStatus == 0">
-        正在读取状态
-      </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/start/bad.png"/>
+            <view class="dpropitem-status">故障中</view>
+          </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-status chong-active" v-if="portDetail.portStatus == 6">
-        充电枪已预约
-      </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">
-       当前端口：
-      </view>
+          <view class="dpropitem-block dportitem-block-3" style=";" v-if="item.status == 5">
+            <image class="dportitem-img" src="/static/images/new/start/lianjie.png"/>
+            <view class="dpropitem-status">已连接</view>
+          </view>
 
-      <view class="port-num">
-        <view>
-          {{portList[0][choosePort-1]["text"]}}
+          <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">已预约</view>
+          </view>
         </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 class="dboxs dport" style="height: 100px" @click="planCharge">
+      <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/clock.png"/>
+      <view class="dboxtitle-text">预约充电</view>
       </view>
-      <view class="port-text" v-if="portDetail.portStatus == 6"  style="top:16px">
+
+      <view class="port-text" v-if="portDetail.portStatus == 6"  style="left:40px;top:48px;font-size: 14px">
         已预约
       </view>
-      <view class="port-text" style="top:24px" v-else>
+      <view class="port-text" style="left:40px;top:55px;font-size: 14px" v-else>
         点击预约充电
       </view>
-      <view class="port-num" style="top:48px;font-size: 12px" v-if="portDetail.portStatus == 6">
-        点击取消预约
+      <view class="port-num" style="left:40px;top:70px;font-size: 12px" v-if="portDetail.portStatus == 6">
+        可点击取消预约
       </view>
-      <view class="port-icon"  v-if="portDetail.portStatus !=6">
-        <image class="btn-image" :src="imgUrl+'/index/right.png'" >
+      <view class="port-icon"  v-if="portDetail.portStatus !=6" style="width: 50px;height: 50px;right:10px;top:28%">
+        <image class="btn-image" src="/static/images/new/start/clock.png" >
         </image>
       </view>
-      <view class="port-icon" v-if="portDetail.portStatus == 6" style="width: 18px;height: 18px;right:1px;">
-        <image class="btn-image"  :src="imgUrl+'/index/del.png'" >
+      <view class="port-icon" v-if="portDetail.portStatus == 6" 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="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="dboxs dport" style="height: 200px">
+      <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/oper.png"/>
+        <view class="dboxtitle-text">设备操作</view>
+      </view>
       <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
-        <image class="btn-image" :src="imgUrl+'/control/stop.png'" >
+        <image class="btn-image" src="/static/images/new/start/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 class="btn-image"  src="/static/images/new/start/using.png" >
         </image>
         <view>立即充电</view>
       </view>
       <view class="control-btn" @click="getInfo">
-        <image class="btn-image" :src="imgUrl+'/control/getstatus.png'" >
+        <image class="btn-image"  src="/static/images/new/start/get.png" >
         </image>
         <view>获取状态</view>
       </view>
       <view class="control-btn" @click="toSet">
-        <image class="btn-image" :src="imgUrl+'/control/control.png'" >
+        <image class="btn-image" src="/static/images/new/start/oper.png" >
         </image>
         <view>设备控制</view>
       </view>
+
+      <view class="control-btn" @click="goBack">
+        <image class="btn-image" src="/static/images/new/start/back.png" >
+        </image>
+        <view>返回</view>
+      </view>
 <!--      <view class="control-btn">-->
 <!--        <image class="btn-image" :src="imgUrl+'/control/record.png'" >-->
 <!--        </image>-->
@@ -250,6 +179,7 @@ export default {
      firstInit:false,
      hasRight:false,
      startAutoCharge:true,
+     curPort:[]
    }
  },
  computed: {
@@ -271,6 +201,10 @@ export default {
    this.closeSocket();
   },
   methods: {
+   selectPort(id){
+     this.choosePort = id;
+     console.log(this.choosePort)
+   },
     cancel(){
       this.showPwd = false;
     },
@@ -429,13 +363,24 @@ export default {
       if(type == 103){
         self.portDetail = real_data
         self.portList = [[]];
+        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:"端口一"});
+          self.curPort.push({
+            text:"端口一",
+            status:port_first_status,
+            id:1,
+          })
         }
         if(port_second_status){
           self.portList[0].push({port:2,text:"端口二"});
+          self.curPort.push({
+            text:"端口二",
+            status:port_second_status,
+            id:2
+          })
         }
         let choosePort = self.choosePort
         if(choosePort == 1){
@@ -648,8 +593,6 @@ export default {
     closeSocket(){
       ecBLE.onBLEConnectionStateChange(() => {})
       ecBLE.onBLECharacteristicValueChange(() => {})
-      ecBLE.closeBLEConnection()
-      uni.removeStorageSync('blueid');
     },
     statusChangeTimer(){
       let self = this;
@@ -876,4 +819,72 @@ padding:0 22px;
 }
 .control-btn .btn-image{
 }
+.dportitem{
+  color: #60af7b
+}
+.dboxs{
+  background: #F8FCFF;
+  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: #1A87FF;
+  margin:20px;
+  position: relative;
+}
+.portimg{
+  width: 20px;
+  height: 20px;
+}
+.dportitem-img{
+  width: 30px;
+  height: 30px;
+}
+.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;
+}
+.dportitem{
+  margin:10px;
+  width: 70px;
+  position: relative;
+  display: inline-block;
+}
+.dportitem-block-2{
+  background: #f9f4e5;
+  color: #FFAA00;
+}
+.dpropitem-title{
+  text-align: center;
+  margin-bottom: 5px;
+  font-size: 16px;
+}
+.dpropitem-status{
+  font-size: 14px;
+}
+.dboxtitle{
+  font-size: 18px;
+  position: relative;
+}
+.dboxtitle-text{
+  display: inline-block;
+  position: absolute;
+  top: -2px;
+  left: 25px;
+}
+.btn-image{
+  width: 30px;
+  height: 30px;
+}
+.control-btn{
+  font-size: 14px;
+}
 </style>