智能货架大屏更新

src/views/intelligentShelves/components/ShelfPanel.vue

@@ -2,32 +2,32 @@
   <div class="" :style="{width:config.width+'px',height:config.height+'px'}">
     <Border15>
       <template #title>
-        <text class="title">T-02M0</text>
+        <text class="title">{{ data.name }}</text>
       </template>
       <div class="body">
         <div class="top">
-          <div>货架利用率 <text>50%</text></div>
+          <div>货架利用率 <text>{{ data.rate }}</text></div>
           <div>传感器&集成器状态</div>
         </div>
         <div class="center">
           <div class="center-l">
-            <div class="clt">100</div>
-            <div class="clb">200</div>
+            <div class="clt">{{ data.num }}</div>
+            <div class="clb">{{ data.total }}</div>
           </div>
           <div class="center-r">
             <div>
-              <img src="../../../assets/img/sensor_y.svg" alt="">
+              <img :src="sensor" alt="传感器">
             </div>
             <div>
-              <img src="../../../assets/img/integrator.svg" alt="">
+              <img :src="integrator" alt="集成器">
             </div>
             
           </div>
         </div>
         <div class="bottom">
-          <div class="box" v-for="i in 6">1-{{ i }}</div>
-          <div class="kong">空位12</div>
-          <div class="tip"><Tip></Tip>  </div>
+          <div class="box"  v-for="i in emptyList">{{ i }}</div>
+          <div class="kong" v-show="data.emptyList.length > 6">空位 {{ data.emptyList.length }}</div>
+          <div class="tip" v-show="data.tip"><Tip></Tip>  </div>
         </div>
       </div>
     </Border15>
@@ -36,23 +36,53 @@
 
 <script setup lang='ts'>
 import Border15 from "@/components/borderBox/border15.vue"
-import Tip from "./Tip.vue"
-defineProps({
+import Tip from "./Tip.vue";
+import { computed } from "vue";
+let prop = defineProps({
   config: {
     type: Object,
     default: () => {
       return {
         width: 421,
-        height: 218,
-        data:{
-          name:"T-02M0",
-          rate:50,
-          
-        }
+        height: 218        
+      }
+    }
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        name:"T-02M0",
+        rate:50,
+        num:0,
+        total:0,
+        sensor:true,
+        integrator:true,
+        emptyList:['1-1','1-2','1-3','1-4','1-5','1-6','1-7'],
+        tip:false
       }
     }
   }
 })
+
+let img = {
+  sensor:require("@/assets/img/sensor.svg"),
+  sensor_y:require("@/assets/img/sensor_y.svg"),
+  integrator:require("@/assets/img/integrator.svg"),
+  integrator_y:require("@/assets/img/integrator_y.svg"),
+}
+let sensor = computed(()=>{
+    return prop.data.sensor?img.sensor:img.sensor_y;
+})
+
+let integrator = computed(()=>{
+    return prop.data.integrator?img.integrator:img.integrator_y
+})
+
+let emptyList = computed(()=>{
+  return prop.data.emptyList.slice(0,6)
+})
+
 </script>
 
 <style scoped>

src/views/intelligentShelves/index.vue

@@ -46,7 +46,7 @@ let { t } = useI18n();
 
 let panelConfig = ref({
   width:434,
-  height:244
+  height:244,  
 })
 let centerConfig = ref({
   width:803,