PBL大屏优化

src/views/PBL/TVScreen/index.vue

@@ -12,19 +12,24 @@
       <el-row>
         <el-col :span="6" v-for="(item, index) in dataList" :key="index">
           <div class="item-box" @click="closeLight(item)">
-            <el-card :class="`card ${getStatusClass(item)}`">
+            <el-card :class="`card `">
               <div :class="`card-header`">
                 <span>料架号: {{ item.rackCode }}</span>
               </div>
               <div class="card-body">
-                <el-row v-if="item.layerNum === 1" :gutter="5">
-                  <el-col :span="6" v-for="(item2, index2) in item.maxCapacity" :key="index2">
-                    <div :class="`box ${boxSelectClass(item.packageNum, index2)}`"></div>
+                <!-- 一层料架 -->
+                <el-row style="margin-bottom: 5px" v-for="(item2, index2) in item.layerObjectArray" :gutter="5">
+                  <!-- 左侧描述 -->
+                  <el-col :span="4">
+                    <div class="card-left-text">{{ item2.layerNum === 1 ? '上层' : '中层' }}</div>
                   </el-col>
-                </el-row>
-                <el-row v-if="item.layerNum === 2" :gutter="5">
-                  <el-col :span="6" v-for="(item2, index2) in item.maxCapacity" :key="index2">
-                    <div :class="`box ${boxSelectClass(item.packageNum, index2)}`"></div>
+                  <!-- 右侧物料 -->
+                  <el-col :span="20" :class="`${getStatusClass(item)}`">
+                    <el-row>
+                      <el-col :span="6" v-for="(item3, index3) in item2.maxCapacity" :key="index2">
+                        <div :class="`box ${boxSelectClass(item2.packageNum, index3)}`"></div>
+                      </el-col>
+                    </el-row>
                   </el-col>
                 </el-row>
               </div>
@@ -64,20 +69,13 @@ const queryParams = reactive({
 })
 const msg = ref('JK-003叫料')
 function getList() {
-  // loading.value = true
   SearchShelfLightInfomation(queryParams).then((res) => {
-    console.log(res.data)
+    const { code, data } = res
+    if (code == 200) {
+      dataList.value = data
+      loading.value = false
+    }
   })
-  // listStoragelocation(queryParams).then((res) => {
-  //   const { code, data } = res
-  //   if (code == 200) {
-  //     // 数据模拟
-  //     let _list = data.result
-  //     dataList.value = _list
-  //     total.value = data.totalNum
-  //     loading.value = false
-  //   }
-  // })
 }
 // 灯状态变动
 function changeLight(rackCode, partnumber, status = 1) {
@@ -94,7 +92,7 @@ function closeLight(item) {
   }
 }
 function getStatusClass(item) {
-  return item.status === 1 ? 'light' : ''
+  return item.isLight ? 'light' : ''
 }
 function boxSelectClass(num, index) {
   let _index = index + 1
@@ -224,14 +222,22 @@ onUnmounted(() => {
   font-size: 24px;
   font-weight: 600;
   height: 60px;
-  padding: 20px;
+  padding: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 .card-body {
-  padding: 20px;
+  padding: 10px;
+}
+.card-left-text {
+  height: 100%;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 /* 亮灯颜色 */
 .light {
@@ -245,9 +251,9 @@ onUnmounted(() => {
 /* 箱子原始状态 */
 .box {
   font-size: 14px;
-  margin-bottom: 10px;
+  margin: 5px;
   border: 2px solid #a9aabc;
-  height: 50px;
+  height: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;