修改UI

App.vue

@@ -1,8 +1,11 @@
+<style lang="scss">
+/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+@import "@/uni_modules/uview-ui/index.scss";
+</style>
 <script>
   import config from './config'
   import store from '@/store'
   import { getToken } from '@/utils/auth'
-
   export default {
     onLaunch: function() {
       this.initApp()

config.js

@@ -2,7 +2,7 @@
 module.exports = {
   //baseUrl: 'https://vue.ruoyi.vip/prod-api',
   baseUrl: 'http://127.0.0.1:8090',
-  socketUrl: 'ws://120.55.183.139:8090/websocket',
+  socketUrl: 'ws://127.0.0.1:8090/websocket',
   imgUrl:'https://saomawzz.oss-cn-hangzhou.aliyuncs.com/chargerforeign',
   // 应用信息
   appInfo: {

main.js

@@ -4,7 +4,8 @@ import store from './store' // store
 import plugins from './plugins' // plugins
 import './permission' // permission
 // import axios from "axios";
-
+import uView from '@/uni_modules/uview-ui'
+Vue.use(uView)
 // Vue.prototype.axios = axios;
 Vue.use(plugins)
 

pages/index.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-
+import { getDeviceInfoFromQrcode } from '@/api/device/device.js'
   export default {
     data:function(){
       return {
@@ -81,8 +81,9 @@
             if(res.data != null){
                   let imei = res.data.imei;
                   let ccid = res.data.ccid;
+                  let qrcode = res.data.qrcode;
                   uni.navigateTo({
-                    url: '/pages/weitiandi/device/index?id='+imei+'&ccid='+ccid
+                    url: '/pages/weitiandi/device/index?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
                   });
             }
         });

pages/weitiandi/device/index.vue

@@ -1,134 +1,186 @@
 <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 class="header-status chong-active" v-if="portDetail.portStatus == 1">
         充电枪未连接
       </view>
 
-      <view class="header-status chong-active" v-if="portDetail.port_first_status == 0">
+      <view class="header-status chong-active" v-if="portDetail.portStatus == 0">
         正在读取状态
       </view>
 
-      <view class="header-status chong-active" v-if="portDetail.port_first_status == 5">
+      <view class="header-status chong-active" v-if="portDetail.portStatus == 5">
         充电枪已连接
       </view>
 
-      <view class="header-status chong-active" v-if="portDetail.port_first_status == 2">
+      <view class="header-status chong-active" v-if="portDetail.portStatus == 2">
         充电枪已连接
       </view>
-      <view class="header-img" v-if="portDetail.port_first_status == 2">
+      <view class="header-img" v-if="portDetail.portStatus == 2">
         <image :src="imgUrl+'/chargedetail/chonging.png'">
 
         </image>
       </view>
 
-      <view class="header-img" v-if="portDetail.port_first_status != 2">
+      <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.port_first_status == 2">
+      <view class="header-status-desc" v-if="portDetail.portStatus == 2">
         充电中
       </view>
 
-      <view class="header-status-desc" style="color: #B2B2B2" v-if="portDetail.port_first_status != 2">
+      <view class="header-status-desc" style="color: #B2B2B2" v-if="portDetail.portStatus != 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 class="port"  @click="showPort = true">
+      <view class="port-image">
+        <image class="btn-image" :src="imgUrl+'/index/device.png'" >
+        </image>
       </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 class="port-text">
+        设备编号：{{ deviceInfo.qrcode }}
       </view>
 
-      <view class="info-content">
-
-        <view class="info-content-value">{{portDetail.dev_temper}}℃</view>
-        <view class="info-content-text">
-          设备温度
+      <view class="port-num">
+        <view>
+          {{portList[0][choosePort-1]["text"]}}
         </view>
-      </view>
-
 
-      <view class="info-content">
-
-        <view class="info-content-value">{{portDetail.wire_temper}}℃</view>
-        <view class="info-content-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 class="info-summary">
-      <view class="summary charge-time">
-          <view class="charge-num">{{ portDetail.time }}分钟</view>
-          <view class="charge-title">已冲时间</view>
+    </view>
+    <view class="info-body">
+     <view>
+       <view class="info-content">
 
-      </view>
+         <view class="info-content-value">{{ portDetail.voltage }}V</view>
+         <view class="info-content-text">
+           充电电压
+         </view>
+       </view>
 
+       <view class="info-content">
 
-      <view class="summary charge-gonglv">
-        <view class="charge-num">{{ portDetail.power }}W</view>
-        <view class="charge-title">充电功率</view>
+         <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>
+         <view class="info-content-text">
+           充电电流
+         </view>
+       </view>
 
+       <view class="info-content">
 
-      <view class="summary charge-dianliang">
-        <view class="charge-num">{{ portDetail.elec }} 度</view>
-        <view class="charge-title">已冲电量</view>
+         <view class="info-content-value">{{portDetail.dev_temper}}℃</view>
+         <view class="info-content-text">
+           设备温度
+         </view>
+       </view>
 
-      </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-bottom">
+      <view class="body-bottom">
+        <view class="info-content">
 
-      <view class="info-bottom-btn" >
-          <view class="btn-area left" @click="getInfo">
-            <image class="btn-image" :src="imgUrl+'/chargedetail/getstatus.png'">
+          <view class="info-content-value">{{ portDetail.time }}分钟</view>
+          <view class="info-content-text">
+            已冲时间
+          </view>
+        </view>
+        <view class="info-content">
 
-            </image>
+          <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 class="btn-area right" @click="trigger()">
-          <image class="btn-image" :src="imgUrl+'/chargedetail/stop.png'" v-if="portDetail.port_first_status == 2">
+        </view>
+      </view>
 
-          </image>
+    </view>
+    <u-picker @cancel="showPort=false" @confirm="confirmPort" :show="showPort" :columns="portList" keyName="text"></u-picker>
 
-          <image class="btn-image" :src="imgUrl+'/chargedetail/start.png'" v-if="portDetail.port_first_status != 2">
 
-          </image>
+    <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>
+      <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="info-plan" @click="toPlan">
-        预约充电
+      <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} from "@/api/device/device";
+import {getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange,getPlanInfo,cancelPlan} from "@/api/device/device";
 import websocket from '@/utils/websocket'
 export default {
  data() {
@@ -136,10 +188,15 @@ export default {
      deviceInfo:{},
      visitTime:"",
      timer:null,
-     portDetail:{port_first_status:0,POWER:0,voltage:0},
+     showPort:false,
+     portDetail:{portStatus:0,POWER:0,voltage:0},
      statusTimer:"",
      connected:false,
      scriptTask:null,
+     choosePort:1,
+     portList:[[{port:1,text:"端口一"}]],
+     planInfo:null,
+     days:["","周一","周二","周三","周四","周五","周六","周日"]
    }
  },
  computed: {
@@ -150,14 +207,67 @@ export default {
  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: {
+    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
@@ -179,6 +289,22 @@ export default {
         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){
@@ -209,20 +335,20 @@ export default {
     },
     toPlan(){
       uni.navigateTo({
-        url: '/pages/weitiandi/device/plan?id='+this.deviceInfo.deviceId+"&ccid="+this.deviceInfo.ccid
+        url: '/pages/weitiandi/device/plan?port='+this.choosePort+'&id='+this.deviceInfo.deviceId+"&ccid="+this.deviceInfo.ccid
       });
     },
     trigger(){
-      let port_first_status = this.portDetail.port_first_status;
-      if(port_first_status == 2){//需要停止充电
+      let portStatus = this.portDetail.portStatus;
+      if(portStatus == 2){//需要停止充电
         this.$modal.confirm("需要停止充电么？").then(res=>{
               this.stopCharge();
         })
       }else{
-        if(port_first_status == 1){
+        if(portStatus == 1){
           this.$modal.msg("请先将充电枪插入后再点击充电");
         }
-        if(port_first_status == 5){
+        if(portStatus == 5){
           this.$modal.confirm("确认开始充电么？").then(res=>{
             this.startCharge();
           })
@@ -247,6 +373,7 @@ export default {
   },
     stopCharge(){
       let self = this;
+      this.deviceInfo.port = this.choosePort;
       stopCharge(this.deviceInfo).then(()=>{
         self.$modal.loading("停止成功");
         setTimeout((()=>{
@@ -256,6 +383,7 @@ export default {
     },
     startCharge(){
       let self = this;
+      this.deviceInfo.port = this.choosePort;
       startCharge(this.deviceInfo).then(res=>{
         self.$modal.loading("启动成功");
         setTimeout((()=>{
@@ -361,7 +489,7 @@ export default {
 .info-body{
   background: #0E9F9B;
   height: 20vh;
-  margin: 0 10%;
+  margin: 0 2%;
   border-radius: 1vw;
   margin-top:2vh;
   color: #F8FCFF;
@@ -369,7 +497,7 @@ export default {
 }
 .info-content{
   display: inline-block;
-  width: 48%;
+  width: 23%;
   text-align: center;
   margin: 1%;
   margin-top:2.5vh;
@@ -442,4 +570,82 @@ export default {
   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>

pages/weitiandi/device/plan.vue

@@ -63,7 +63,7 @@
 <script>
 	import {save} from '@/api/device/plan.js'
 export default {
-	
+
   data() {
     return {
       deviceId: "",
@@ -74,6 +74,7 @@ export default {
       oneTime:{
         time:"",
       },
+      port:1,
       time:"",
       index:0,
       array: [],
@@ -116,6 +117,7 @@ export default {
   onLoad(opt){
     this.deviceId = opt.id;
     this.ccid = opt.ccid;
+    this.port = opt.port;
   },
   methods: {
     chooseDay(){
@@ -216,7 +218,7 @@ export default {
                 deviceId: this.deviceId, // 设备 ID
                 ccid:this.ccid
              };
-   		  
+        params.port = this.port;
    		  console.log(params);
           save(params).then(res => {
             this.$modal.loading("预约成功");
@@ -302,4 +304,4 @@ export default {
   background:  rgb(249, 252, 255);
   width: 300px;
 }
-</style>
+</style>

uni.scss

@@ -1,6 +1,7 @@
 /**
  * uni-app内置的常用样式变量
  */
+@import '@/uni_modules/uview-ui/theme.scss';
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
@@ -61,4 +62,4 @@ $uni-font-size-title:20px;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-paragraph:15px;