功能优化

src/views/yunying/kdg/index.vue

@@ -189,120 +189,144 @@
               <div style="width: 9vw;border:0.5vw solid #000;">
                 <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(1)">
                   <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDivLeft">{{ getStatus(1) }}</div>
                   <div class="indexDiv">{{ formatIndex(1) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(2)">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDivLeft">{{ getStatus(2) }}</div>
                   <div class="indexDiv">{{ formatIndex(2) }}</div>
                 </div>
                 <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 3)"
                   v-for="(item, index) in 6">
                   <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+3) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 3) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 9)"
                   v-for="(item, index) in 3">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+9) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 9) }}</div>
                 </div>
               </div>
               <div style="width: 9vw;border:0.5vw solid #000;">
                 <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(12)">
                   <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDivLeft">{{ getStatus(12) }}</div>
                   <div class="indexDiv">{{ formatIndex(12) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(13)">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDivLeft">{{ getStatus(13) }}</div>
                   <div class="indexDiv">{{ formatIndex(13) }}</div>
                 </div>
                 <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 14)"
                   v-for="(item, index) in 6">
                   <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+14) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 14) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 20)"
                   v-for="(item, index) in 3">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+20) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 20) }}</div>
                 </div>
               </div>
               <div style="width: 9vw;border:0.5vw solid #000;">
                 <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(23)">
                   <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDivLeft">{{ getStatus(23) }}</div>
                   <div class="indexDiv">{{ formatIndex(23) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(24)">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDivLeft">{{ getStatus(24) }}</div>
                   <div class="indexDiv">{{ formatIndex(24) }}</div>
                 </div>
                 <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 25)"
                   v-for="(item, index) in 6">
                   <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+25) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 25) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 31)"
                   v-for="(item, index) in 3">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+31) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 31) }}</div>
                 </div>
               </div>
               <div style="width: 9vw;border:0.5vw solid #000;">
                 <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(34)">
                   <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDivLeft">{{ getStatus(34) }}</div>
                   <div class="indexDiv">{{ formatIndex(34) }}</div>
                 </div>
                 <div style="width: 8vw;height: 154px;position:relative" @click="clickCabinet(35)">
                   <img style="width: 8vw;height: 154px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDivLeft">{{ getStatus(35) }}</div>
                   <div class="indexDiv">{{ formatIndex(35) }}</div>
                 </div>
                 <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 36)"
                   v-for="(item, index) in 2">
                   <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+36) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 36) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 38)"
                   v-for="(item, index) in 3">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+38) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 38) }}</div>
                 </div>
               </div>
               <div style="width: 9vw;border:0.5vw solid #000;">
                 <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(41)">
                   <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDivLeft">{{ getStatus(41) }}</div>
                   <div class="indexDiv">{{ formatIndex(41) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(42)">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDivLeft">{{ getStatus(42) }}</div>
                   <div class="indexDiv">{{ formatIndex(42) }}</div>
                 </div>
                 <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 43)"
                   v-for="(item, index) in 6">
                   <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+43) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 43) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 49)"
                   v-for="(item, index) in 3">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+49) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 49) }}</div>
                 </div>
               </div>
               <div style="width: 9vw;border:0.5vw solid #000;">
                 <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(52)">
                   <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDivLeft">{{ getStatus(52) }}</div>
                   <div class="indexDiv">{{ formatIndex(52) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(53)">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDivLeft">{{ getStatus(53) }}</div>
                   <div class="indexDiv">{{ formatIndex(53) }}</div>
                 </div>
                 <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 54)"
                   v-for="(item, index) in 6">
                   <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+54) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 54) }}</div>
                 </div>
                 <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 60)"
                   v-for="(item, index) in 3">
                   <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDivLeft">{{ getStatus(index+60) }}</div>
                   <div class="indexDiv">{{ formatIndex(index + 60) }}</div>
                 </div>
               </div>
@@ -348,6 +372,7 @@
   import { TreeNode } from "element-plus";
   import { useRoute, useRouter } from "vue-router";
   import EZUIKit from 'ezuikit-js';
+  import { ElMessage, ElMessageBox } from 'element-plus'
   import { getCameraPlayerConfig } from '@/api/gpsData';
   import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
   import { updateData, listData } from "@/api/system/dict/data";
@@ -400,12 +425,33 @@
   }
 
   const openBox = (value, lockCode) => {
-    getLock(boxCode.value, lockCode).then(res => {
-      console.log(res.code)
-      if (res.code == 0) {
-        ElMessage.success(value + "号柜远程开启成功");
-      }
-    })
+    if (res.code == 0) {
+      ElMessageBox.confirm(
+        '是否打开' + value + "号柜",
+        '提示',
+        {
+          confirmButtonText: '是',
+          cancelButtonText: '否',
+          type: 'warning',
+        }
+      )
+        .then(() => {
+          getLock(boxCode.value, lockCode).then(res => {
+            console.log(res.code)
+            ElMessage.success(value + "号柜远程开启成功");
+          })
+          // ElMessage({
+          //   type: 'success',
+          //   message: 'Delete completed',
+          // })
+        })
+        .catch(() => {
+          // ElMessage({
+          //   type: 'info',
+          //   message: 'Delete canceled',
+          // })
+        })
+    }
   }
 
   const clickCabinet = (value, lockCode) => {
@@ -496,12 +542,33 @@
 
   const openAllBox = () => {
     let code = boxCode.value
-    openall(code).then(res => {
-      console.log(res)
-      if (res.code == 0) {
-        ElMessage.success("打开所有柜子成功");
+    ElMessageBox.confirm(
+      '是否打开所有柜子',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'warning',
       }
-    })
+    )
+      .then(() => {
+        openall(code).then(res => {
+          console.log(res)
+          if (res.code == 0) {
+            ElMessage.success("打开所有柜子成功");
+          }
+        })
+        // ElMessage({
+        //   type: 'success',
+        //   message: 'Delete completed',
+        // })
+      })
+      .catch(() => {
+        // ElMessage({
+        //   type: 'info',
+        //   message: 'Delete canceled',
+        // })
+      })
   }
 
   const deleteDevice = (datac) => {
@@ -558,9 +625,6 @@
     })
   }
 
-
-
-
   const addDevice = () => {
     dialogVisible.value = false;
     if (formdata.value.name == "") {
@@ -614,11 +678,11 @@
       )
     }
   }
-  const openbox = (code) => {
-    setTimeout(() => {
-      ElMessage.success("指令已发送！");
-    }, 1000);
-  }
+  // const openbox = (code) => {
+  //   setTimeout(() => {
+  //     ElMessage.success("指令已发送！");
+  //   }, 1000);
+  // }
 
   const formatIndex = (value) => {
     if (value < 10) {
@@ -628,6 +692,15 @@
     }
   }
 
+  const getStatus = (index) => {
+    console.log(boxData.value[index - 1].box_use_status)
+    if (boxData.value[index - 1].box_use_status == 0) {
+      return '空闲中'
+    } else {
+      return '使用中'
+    }
+  }
+
   const data = computed(() => {
 
     var index = 1;
@@ -677,4 +750,18 @@
     font-size: 10px;
     text-align: center;
   }
+
+  .indexDivLeft {
+    background-color: white;
+    width: 40px;
+    height: 10px;
+    color: #000;
+    font-weight: 600;
+    position: absolute;
+    left: 2px;
+    bottom: 1px;
+    z-index: 1000;
+    font-size: 10px;
+    text-align: center;
+  }
 </style>