todo

优化细节页面

pages/bluetooth/index/index.vue

@@ -96,6 +96,19 @@
           ></u--input>
         </u-form-item>
 
+
+        <u-form-item
+            label="产品ID:"
+            borderBottom
+            ref="item1"
+            labelWidth="auto"
+        >
+          <u--input
+              v-model="productId"
+              border="none"
+          ></u--input>
+        </u-form-item>
+
       </u--form>
 
     </view>
@@ -143,6 +156,7 @@ import i18 from '@/utils/i18.js'
         SSID:"",
         password:"",
         showWiftList:false,
+        productId:56,
         wifiList: [
           []
         ],
@@ -331,11 +345,24 @@ import i18 from '@/utils/i18.js'
         },800);
 
         setTimeout(function(){
-          self.sendBlueData("OK");
+          self.sendBlueData("pid:"+self.productId+endStr);
         },1000);
 
+        setTimeout(function(){
+          self.sendBlueData("OK");
+        },1200);
+
 
 
+      },
+      stringToHex(str) {
+          let hex = '';
+          for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            const hexChar = char.toString(16).padStart(2, '0');
+            hex += hexChar;
+          }
+          return hex;
       },
       doByTime(func,time){
         setTimeout(function (){
@@ -430,6 +457,7 @@ import i18 from '@/utils/i18.js'
         return pwd;
       },
      sendBlueData(tempSendData){
+       tempSendData = this.stringToHex(tempSendData);
         let data = tempSendData
             .replace(/\s*/g, '')
             .replace(/\n/g, '')

pages/device/detail.vue

@@ -10,25 +10,44 @@
         </view>
         <view class="device_info">机器编号: {{deviceInfo.serialNumber}}</view>
       </view>
-      <view style="position: absolute;right:10vw;top:9vh;z-index: 9" @click="showDrawer">
+      <view style="position: absolute;right:10vw;top:12vh;z-index: 9" @click="showDrawer">
         <image :src="imgUrl+'/detail/setting2.png'" style="width: 50rpx;height: 50rpx;"/>
       </view>
-      <view style="position: relative;top:8%;width: 100%;text-align: center">
+      <view style="position: relative;top:15vh;width: 100%;text-align: center">
 
-        <image :src="imgUrl+'/detail/product.png'" style="width: 330rpx;height: 550rpx;"/>
+        <image :src="imgUrl+'/detail/product.png'" :style="productSize"/>
       </view>
       <view class="tabs">
-        <view class="child_tab" v-for="item in (summary)" @click="changeTab(item)">
+        <view class="child_tab"  @click="changeTab(1)">
           <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
-          <image class="child_img" v-if="item.checked" :src="imgUrl+'/detail/jianyao_on.png'" />
-          <image class="child_img" v-if="!item.checked" :src="imgUrl+'/detail/jianyao_off.png'" />
-          <view class="child_title" :class="item.checked?'active_on':''">
-            {{item.name}}
+          <image class="child_img" v-if="tabActive[0]" :src="imgUrl+'/detail/jianyao_on.png'" />
+          <image class="child_img" v-if="!tabActive[0]" :src="imgUrl+'/detail/jianyao_off.png'" />
+          <view class="child_title" :class="tabActive[0]?'active_on':''">
+           煎药机一
           </view>
         </view>
 
 
-        <view class="child_tab" @click="changeTab({name:'baozhuang'})">
+        <view class="child_tab" :class="secondMachine?'':'disabled_tab'" @click="changeTab(2)">
+          <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
+          <image class="child_img" v-if="tabActive[1]" :src="imgUrl+'/detail/jianyao_on.png'" />
+          <image class="child_img" v-if="!tabActive[1]" :src="imgUrl+'/detail/jianyao_off.png'" />
+          <view class="child_title" :class="isPage(2)?'active_on':''">
+            煎药机二
+          </view>
+        </view>
+
+        <view class="child_tab" :class="thirdMachine?'':'disabled_tab'" @click="changeTab(3)">
+          <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
+          <image class="child_img" v-if="tabActive[2]" :src="imgUrl+'/detail/jianyao_on.png'" />
+          <image class="child_img" v-if="!tabActive[2]" :src="imgUrl+'/detail/jianyao_off.png'" />
+          <view class="child_title" :class="tabActive[2]?'active_on':''">
+            煎药机三
+          </view>
+        </view>
+
+
+        <view class="child_tab" @click="changeTab(4)">
           <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
           <image class="child_img" v-if="firstTab" :src="imgUrl+'/detail/baozhuang_off.png'" />
           <image class="child_img" v-if="!firstTab" :src="imgUrl+'/detail/baozhuang_on.png'" />
@@ -39,7 +58,7 @@
 
       </view>
 
-      <view v-if="firstTab">
+      <view class="control_area" v-if="firstTab">
         <view class="control">
           <view class="control_item">
             <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
@@ -54,25 +73,41 @@
               <view class="control_item_right" @click="addTemperature(1)">+</view>
             </view>
             <view class="control_item_title">
-              温度设置
+              设置温度
             </view>
           </view>
 
-          <view class="control_item">
+          <view class="control_item" v-if="wenhuoTimeDlgShow">
             <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
             <view class="control_item_detail">
+              <view class="control_item_left" @click="subTemperatureTime(1)">-</view>
               <view class="control_item_center">
                 <view style="position: absolute">
-                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   v-model="leftJianyaoTime"></u-input>
+                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   v-model="temperatureTime"></u-input>
                 </view>
               </view>
               <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
-              <view class="control_item_right" style="left:75%;top:10rpx"  @click="showBaozhuangDlg(3)">
-                <uni-icons type="gear-filled" size="20"></uni-icons>
+              <view class="control_item_right" style="left: 74%;" @click="addTemperatureTime(1)">+</view>
+            </view>
+            <view class="control_item_title">
+              时间设置
+            </view>
+          </view>
+
+          <view class="control_item" v-if="!wenhuoTimeDlgShow">
+            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
+            <view class="control_item_detail">
+              <view class="control_item_left" @click="subTemperatureTime(1)">-</view>
+              <view class="control_item_center">
+                <view style="position: absolute">
+                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   v-model="leftJianyaoTime"></u-input>
+                </view>
               </view>
+              <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
+              <view class="control_item_right" style="left: 74%;" @click="addTemperatureTime(1)">+</view>
             </view>
             <view class="control_item_title">
-              文火时间倒计时
+              时间设置
             </view>
           </view>
 
@@ -130,37 +165,67 @@
         </view>
       </view>
 
-      <view v-if="!firstTab">
+      <view class="control_area" v-if="!firstTab">
         <view class="control">
-          <view class="control_item">
+          <view class="control_item" v-if="fengbianDlgShow">
+            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
+            <view class="control_item_detail">
+              <view class="control_item_left" @click="subEdegTemperature(1)">-</view>
+              <view class="control_item_center">
+                <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white"  placeholder="0" disabled v-model="setEdegTemperature"></u-input>
+              </view>
+              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
+              <view class="control_item_right" @click="addEdegTemperature(1)">+</view>
+            </view>
+            <view class="control_item_title">
+              设置温度
+            </view>
+          </view>
+
+          <view class="control_item" v-if="!fengbianDlgShow">
             <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
             <view class="control_item_detail">
+              <view class="control_item_left" @click="subEdegTemperature(1)">-</view>
               <view class="control_item_center">
                 <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white"  placeholder="0" disabled v-model="edegTemperature"></u-input>
               </view>
               <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
-              <view class="control_item_right" style="left:75%;top:10rpx" @click="showBaozhuangDlg(1)">
-                <uni-icons type="gear-filled" size="20"></uni-icons>
+              <view class="control_item_right" @click="addEdegTemperature(1)">+</view>
+
+            </view>
+            <view class="control_item_title">
+               封边温度
+            </view>
+          </view>
+
+          <view class="control_item" v-if="fengkouDlgShow">
+            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
+            <view class="control_item_detail">
+              <view class="control_item_left" @click="subSealingTemperature(1)">-</view>
+              <view class="control_item_center">
+                <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white" placeholder="0" disabled  v-model="setSealingTemperature"></u-input>
               </view>
+              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
+              <view class="control_item_right" @click="addSealingTemperature(1)">+</view>
             </view>
             <view class="control_item_title">
-              当前封边温度
+             设置温度
             </view>
           </view>
 
-          <view class="control_item">
+          <view class="control_item" v-if="!fengkouDlgShow">
             <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
             <view class="control_item_detail">
+              <view class="control_item_left" @click="subSealingTemperature(1)">-</view>
               <view class="control_item_center">
                 <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white" placeholder="0" disabled  v-model="sealingTemperature"></u-input>
               </view>
               <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
-              <view class="control_item_right" style="left:75%;top:10rpx"  @click="showBaozhuangDlg(2)">
-                <uni-icons type="gear-filled" size="20"></uni-icons>
-              </view>
+              <view class="control_item_right" @click="addSealingTemperature(1)">+</view>
+
             </view>
             <view class="control_item_title">
-              当前封口温度
+              封口温度
             </view>
           </view>
 
@@ -227,7 +292,7 @@
       </view>
     </view>
 
-    <u-popup :show="popDlg" @close="closePop" mode="center" bgColor="transparent" :closeable="true">
+    <u-popup :show="false" @close="closePop" mode="center" bgColor="transparent" :closeable="true">
       <view style="position: relative;width: 500rpx;height:300rpx;background: none">
         <view class="control_item" style="width: 100%" v-if="fengbianDlgShow">
           <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
@@ -276,11 +341,13 @@
       </view>
     </u-popup>
 
-    <u-popup :show="deviceInfo.status != 3"  mode="center"  >
+    <u-popup :show="true"  mode="center"  >
         <view style="
-        margin:2%;padding:10%;background-color: #f0f0f0; /* 背景色 */color: #000; padding: 10px; /* 内边距 */border-radius: 5px; /* 圆角 */font-size: 16px; /* 文字大小 */text-align: center; /* 文字居中 */  ">
-          设备未在线，无法操作
+        margin:2%;padding:10%; /* 背景色 */color: #000; padding: 10px; /* 内边距 */border-radius: 5px; /* 圆角 */font-size: 16px; /* 文字大小 */text-align: center; /* 文字居中 */  ">
+         <view style="width: 100px;margin-top:40rpx;">设备未在线</view>
+          <view>无法操作</view>
         </view>
+
     </u-popup>
 
     <u-popup :show="planPopDlg" @close="closePlanPop" mode="center"  :closeable="true">
@@ -446,7 +513,7 @@
               <image :src="imgUrl+'/setting/list.png'" style="width: 100%;height:100%;"/>
             </view>
             <view class="prop-item-left">工作模式</view>
-            <view class="prop-item-right" @click="showModelPicker = true">
+            <view class="prop-item-right" @click="showWorkPicker">
               <view v-if="workMode == 1">
                 微压循环<uni-icons type="forward" size="16"></uni-icons>
               </view>
@@ -473,7 +540,7 @@
               <image :src="imgUrl+'/setting/learn.png'" style="width: 100%;height:100%;"/>
             </view>
             <view class="prop-item-left">使用教程</view>
-            <view class="prop-item-right">
+            <view class="prop-item-right" @click="skip(1)">
               <uni-icons type="forward" size="16"></uni-icons>
             </view>
           </view>
@@ -482,7 +549,7 @@
               <image :src="imgUrl+'/setting/video.png'" style="width: 100%;height:100%;"/>
             </view>
             <view class="prop-item-left">维修视频</view>
-            <view class="prop-item-right">
+            <view class="prop-item-right"  @click="skip(1)">
               <uni-icons type="forward" size="16"></uni-icons>
             </view>
           </view>
@@ -500,7 +567,7 @@
               <image :src="imgUrl+'/setting/shou.png'" style="width: 100%;height:100%;"/>
             </view>
             <view class="prop-item-left">售后服务</view>
-            <view class="prop-item-right">
+            <view class="prop-item-right"  @click="skip(2)">
               <uni-icons type="forward" size="16"></uni-icons>
             </view>
           </view>
@@ -564,6 +631,7 @@ export default {
         {id:3,text:"密闭微压"},
         {id:3,text:"常温常压"},
       ]],
+      productSize:"",
       showModelPicker:false,
       unitFixedStyle:"",
       unitFixedStyle1:"",
@@ -576,7 +644,7 @@ export default {
       currentTemperature:0,
       temperatureTime:1,
       temperature:0,
-      packageNumber:0,
+      packageNumber:1,
       packageVolume:50,
       firstTab:true,
       decoctControlStatus:false,
@@ -654,6 +722,13 @@ export default {
       yuyueIngPop:false,
       firmware:{},
       jianyaoPopClose:true,
+      tabIndex:1,
+      appid:"wxfd7b1a0e03e9b7e9",
+      secondMachine:false,
+      thirdMachine:false,
+      deviceType:1,
+      tabActive:[true,false,false],
+      resetDuration:4000,
     }
   },
   onLoad: function(opt) {
@@ -663,6 +738,7 @@ export default {
     this.getDetail();
     this.imgUrl = config.imgUrl
     this.fixStyle();
+    // console.log = function(){}
   },
   destroyed() {
     // 取消订阅主题
@@ -670,6 +746,66 @@ export default {
     clearTimeout(this.checkTimer);
   },
   methods:{
+    showWorkPicker(){
+      let self = this;
+
+      uni.showModal({
+        title: "提示",
+        content: "该功能请在专业人士指导下使用,是否继续",
+        confirmText:"是",
+        success: function (res) {
+          if(res.confirm){
+            self.showModelPicker = true;
+          }
+        },
+      })
+    },
+    skip(type){
+      if(type == 1){
+        wx.navigateToMiniProgram({
+          appId: this.appid,
+          path: 'pages/news_details/help?id=25',
+          success(res) {
+            // 打开成功
+          },
+          fail(res){
+            console.log(res);
+          }
+        })
+      }else if(type == 2){
+        wx.openCustomerServiceChat({
+          extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc4202b8764df71c0c'},
+          corpId: 'ww8e678fbe6f1079ba',
+          success(res) {
+
+          },
+          fail(res){
+            console.log(res);
+          }
+        })
+      }
+    },
+    isMulTab(index){
+      let type = this.deviceType;
+      if(index == 2){
+        if(type == 4 || type == 5){
+          return true;
+        }
+      }
+      if(index == 3){
+        if(type == 5){
+          return true;
+        }
+      }
+      return false;
+
+    },
+    isPage(index){
+       if(this.tabIndex == index){
+         return true;
+       }
+       return false;
+    },
     getUpdateInfo(){
       let self = this;
       getLatestFirmware(this.id).then(res=>{
@@ -756,8 +892,19 @@ export default {
       this.jiaozhunPopDlg = false;
     },
     showJiaozhunProp(){
-      this.jiaozhunTemp_temp = this.jiaozhunTemp;
-      this.jiaozhunPopDlg = true;
+      let self = this;
+
+      uni.showModal({
+        title: "提示",
+        content: "该功能请在专业人士指导下使用,是否继续",
+        confirmText:"是",
+        success: function (res) {
+          if(res.confirm){
+            self.jiaozhunTemp_temp = self.jiaozhunTemp;
+            self.jiaozhunPopDlg = true;
+          }
+        },
+      })
     },
     fixStyle(){
       let self  = this;
@@ -774,6 +921,14 @@ export default {
             self.unitFixedStyle1 = ";padding-top:10rpx;left: 32vw;";
           }
           self.maxWidth = windowWidth;
+
+          let rate = 0.35;
+          if(windowHeight<800){
+            rate = 0.30;
+          }
+          let imgHeight = windowHeight*rate;
+          let imageWidth = imgHeight * 0.6;
+          self.productSize = ";width:"+imageWidth+"px;height:"+imgHeight+"px;";
         }
       })
     },
@@ -800,11 +955,16 @@ export default {
       this.fengkouDlgShow = false;
       this.wenhuoTimeDlgShow = false;
     },
-    changeTab(item){
-      let summary = this.summary;
+    changeTab(index){
+      let type = this.deviceType;
       let self = this;
+      if(index == 2 || index == 3){
+        if(!this.isMulTab(index)){
+          return;
+        }
+      }
       this.resetChoose();
-     if(item.name == 'baozhuang'){
+     if(index == 4){
           this.firstTab = false;
        getDeviceStatus(this.id,0).then(res=>{
          let data =res.data;
@@ -812,20 +972,25 @@ export default {
          self.parseStatusData(data)
        });
      }else{
-       item.checked = true;
        this.firstTab = true;
-        if(summary.length>1){
-          this.childId = item.id;
-          this.getDeviceStatus()
-        }else{
-          this.getDeviceStatus()
-        }
+       let arr = ["a","b","c"]
+       if(type == 4 || type == 5){
+         this.childId =arr[index-1];
+         this.getDeviceStatus();
+       }else{
+         this.getDeviceStatus()
+       }
+       this.tabIndex = index;
+       this.tabActive[index-1] = true;
+       console.log(this.tabActive)
+       this.$forceUpdate();
+
      }
     },
     resetChoose(){
-      for (let i = 0; i <this.summary.length; i++) {
-        let data = this.summary[i];
-        data.checked = false;
+          this.tabIndex = 0;
+      for (let i = 0; i < 3; i++) {
+        this.tabActive[i] = false;
       }
     },
     changePackageVolume(){
@@ -1106,53 +1271,85 @@ export default {
     },
     addPackageVolume(){
       this.packageVolume++;
+      if(this.packageVolume>300){
+        this.packageVolume = 50;
+      }
       console.log("增加包装容量")
       this.changePackageVolume()
     },
     subPackageVolume(){
       this.packageVolume--;
+      if( this.packageVolume<50){
+        this.packageVolume = 300;
+      }
       console.log("减少包装容量")
       this.changePackageVolume()
     },
     addPackageNumber(){
       this.packageNumber++;
+      if(this.packageNumber>999){
+        this.packageNumber = 1;
+      }
       console.log("增加包装数量")
       this.changePackageNumber();
     },
     subPackageNumber(){
       this.packageNumber--;
+      if(this.packageNumber<1){
+        this.packageNumber = 999;
+      }
       console.log("减少包装数量")
       this.changePackageNumber();
     },
     addSealingTemperature(){
       console.log("增加封口温度")
+      if(!this.fengkouDlgShow){
+        this.fengkouDlgShow = true;
+      }
       this.setSealingTemperature++;
       this.changeSealingTemperature();
     },
     subSealingTemperature(){
       console.log("减少封口温度")
+      if(!this.fengkouDlgShow){
+        this.fengkouDlgShow = true;
+      }
       this.setSealingTemperature--;
       this.changeSealingTemperature();
     },
     addEdegTemperature(){
       console.log("增加封边温度")
       this.editing = true;
+      if(!this.fengbianDlgShow){
+        this.fengbianDlgShow = true;
+      }
       this.setEdegTemperature++;
       this.changeEdegTemperature();
     },
     subEdegTemperature(){
       console.log("减少封边温度")
       this.editing = true;
+      if(!this.fengbianDlgShow){
+        this.fengbianDlgShow = true;
+      }
       this.setEdegTemperature--;
       this.changeEdegTemperature();
     },
     addTemperatureTime(){
       console.log("增加煎药时间")
+      if(!this.wenhuoTimeDlgShow){
+        this.wenhuoTimeDlgShow = true;
+        this.temperatureTime = this.leftJianyaoTime;
+      }
       this.temperatureTime++;
       this.changeTemperatureTime()
     },
     subTemperatureTime(){
       console.log("减少煎药时间")
+      if(!this.wenhuoTimeDlgShow){
+        this.wenhuoTimeDlgShow = true;
+        this.temperatureTime = this.leftJianyaoTime;
+      }
       this.temperatureTime--;
       if(this.temperatureTime<=0){
         this.temperatureTime = 1;
@@ -1198,9 +1395,15 @@ export default {
           }
           if(key === "SetSealTemp"){
             obj.shadow = this.setSealingTemperature;
+            setTimeout(function (){
+              self.fengkouDlgShow = false;
+            },self.resetDuration);
           }
           if(key === "SetBandingTemp"){
             obj.shadow = this.setEdegTemperature;
+            setTimeout(function (){
+              self.fengbianDlgShow = false;
+            },self.resetDuration);
           }
           if(targetKey == key){
             arr.push(obj);
@@ -1211,6 +1414,7 @@ export default {
       }.bind(this),500);
     },
     sendJianYao(targetKey){
+      let self = this;
       let arr = [];
       if(this.jianyaoTimer != null){
         clearTimeout(this.jianyaoTimer);
@@ -1223,6 +1427,9 @@ export default {
           obj.id = key;
           if(key === "TempSetting"){
             obj.shadow = this.temperature;
+            setTimeout(function(){
+              self.wenhuoTimeDlgShow = false;
+            },self.resetDuration)
           }
           if(key === "TimeSetting"){
             obj.shadow = this.temperatureTime;
@@ -1544,6 +1751,8 @@ export default {
       getDetail(this.id).then(res=>{
 
         self.deviceInfo = res.data;
+        self.deviceType = res.data.type;
+        console.log("当前设备类型:"+JSON.stringify(self.deviceInfo.type))
         self.location = {
           latitude: self.deviceInfo.latitude,
           longitude: self.deviceInfo.longitude};
@@ -1552,7 +1761,13 @@ export default {
         self.mqttSubscribe(res.data);
         self.getDeviceStatus();
         self.seeTime();
-        self.summary[0].checked = true;
+        self.$forceUpdate();
+        if(self.deviceType == 4 ||self.deviceType == 5 ){
+          self.secondMachine = true;
+        }
+        if(self.deviceType == 5){
+          self.thirdMachine = true;
+        }
       });
     },
     getDeviceStatus(){
@@ -2503,7 +2718,7 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
 }
 .tabs{
  position: relative;
-  top:7vh;
+  top:15vh;
 }
 .child_tab{
   position: relative;
@@ -2529,7 +2744,6 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
 }
 .control{
   width: 100%;
-  margin-top:8vh;
   position: relative;
 }
 .control_item{
@@ -2575,12 +2789,11 @@ position: absolute;
   text-align: center;
 }
 .bottom{
-  height: 140rpx;
+  height: 190rpx;
   position: absolute;
   left: 0px;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 10rpx;
+  width: 100%;
+  padding-top: 18rpx;
 }
 .bottom_item{
     display: inline-block;
@@ -2597,7 +2810,7 @@ position: absolute;
 .status_info{
   position: absolute;
   left: 5vw;
-  top: 8vh;
+  top: 10vh;
 }
 .status_detail{
   display: flex;
@@ -2616,4 +2829,11 @@ font-size: 16px;
 .device_info{
   font-size: 13px;
 }
+.control_area{
+  position: relative;
+  top:19vh;
+}
+.disabled_tab{
+  opacity: 0.4;
+}
 </style>

pages/work/index.vue

@@ -13,6 +13,15 @@
     </uni-swiper-dot>
   </view>
     <view style="box-sizing: border-box;margin-top:20rpx;padding:0 20rpx">
+      <view class="grid-item-box" @click="watchDevice"  style="background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/scan.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">查看设备</view>
+          <view class="bottom">View Device</view>
+        </view>
+      </view>
 
       <view class="grid-item-box" v-if="hasRole(['admin'])" @click="goPage('user')" style="background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/icons/bg.png');background-size: 100% 100%">
         <view class="grid-image">
@@ -33,7 +42,6 @@
             <view class="bottom">User Management</view>
           </view>
       </view>
-
       <view class="grid-item-box" v-if="isCompanyUser()" @click="goPage('device')"  style="background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/icons/bg.png');background-size: 100% 100%">
         <view class="grid-image">
           <u-image :showLoading="true" src="/static/images/icons/device.png" width="80rpx" height="80rpx" ></u-image>
@@ -44,7 +52,6 @@
         </view>
       </view>
 
-
       <view class="grid-item-box" @click="goPage('wifi')"  style="background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/icons/bg.png');background-size: 100% 100%">
         <view class="grid-image">
           <u-image :showLoading="true" src="/static/images/icons/wifi.png" width="80rpx" height="80rpx" ></u-image>
@@ -77,15 +84,7 @@
       </view>
 
 
-      <view class="grid-item-box" @click="watchDevice"  style="background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/icons/bg.png');background-size: 100% 100%">
-        <view class="grid-image">
-          <u-image :showLoading="true" src="/static/images/icons/scan.png" width="80rpx" height="80rpx" ></u-image>
-        </view>
-        <view class="grid-text">
-          <view class="top">查看设备</view>
-          <view class="bottom">View Device</view>
-        </view>
-      </view>
+
 
 
       <view class="grid-item-box" v-if="isCompanyUser()" @click="goPage('alert')"  style="background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/icons/bg.png');background-size: 100% 100%">