烘房监控界面修改

src/views/kanban/exception/cards.vue

@@ -1,10 +1,10 @@
 <template xmlns:fontSize="http://www.w3.org/1999/xhtml">
   <div>
-    <div id="cards">
-      <div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data1" :key="card.title">
+    <div id="cards" style="height: 20vh">
+      <div style="height: 20vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data1" :key="card.title">
         <div class="card-header">
           <div class="card-header-left">{{ card.title }}</div>
-          <div class="card-header-right">{{ card.i }}</div>
+<!--          <div class="card-header-right">{{ card.i }}</div>-->
         </div>
         <div class="card-box">
         </div>
@@ -46,11 +46,11 @@
     </div>
 
 
-    <div id="cardss">
-      <div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data2" :key="card.title">
+    <div id="cardss" style="height: 20vh">
+      <div style="height: 20vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data2" :key="card.title">
         <div class="card-header">
           <div class="card-header-left">{{ card.title }}</div>
-          <div class="card-header-right">{{ (i + 9) }}</div>
+<!--          <div class="card-header-right">{{ (i + 9) }}</div>-->
         </div>
         <div class="card-box">
         </div>
@@ -91,6 +91,51 @@
       </div>
     </div>
 
+
+    <div id="cardsss" style="height: 20vh">
+      <div style="height: 20vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data3" :key="card.title">
+        <div class="card-header">
+          <div class="card-header-left">{{ card.title }}</div>
+<!--          <div class="card-header-right">{{ (i + 9) }}</div>-->
+        </div>
+        <div class="card-box">
+        </div>
+
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">烘房模式</div>
+            <div class="footer-detail">
+              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
+                   {{ getTagModel(card.model) }}
+              </span>
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">门前数量</div>
+            <div class="footer-detail">
+             <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
+                   {{ getTagText(card.dollyNumber) }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">烘房温度</div>
+            <div class="footer-detail">
+              <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">保持时长</div>
+            <div class="footer-detail">
+              <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -105,6 +150,7 @@ export default {
     return {
       cards: [],
       cardss: [],
+      cardsss: [],
     }
   },
   methods: {
@@ -144,6 +190,9 @@ export default {
       this.cardss = new Array(8).fill(0).map((foo, i) => ({
         title: '烘房' + (i + 9),
       }));
+      this.cardsss = new Array(8).fill(0).map((foo, i) => ({
+        title: '烘房' + (i + 9),
+      }));
     },
 
 
@@ -158,10 +207,10 @@ export default {
 </script>
 
 <style lang="less">
-#cards ,#cardss {
+#cards ,#cardss , #cardsss{
   display: flex;
   justify-content: space-between;
-  height: 35vh;
+
   margin-bottom: 12px;
 
   .card-item {

src/views/kanban/exception/carousel.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="fullscreen-carousel">
   <el-carousel :interval="3000"  indicator-position="outside" @change="handleScroll">
-    <el-carousel-item   v-for="(item,k) in 2" :key="item" >
+    <el-carousel-item   v-for="(item,k) in 1" :key="item" >
       <h3 v-if="k===0"><cards :dataProp="cards" /></h3>
-      <h3 v-if="k===1"><cards2 :dataProp="cardss"/></h3>
+<!--      <h3 v-if="k===1"><cards2 :dataProp="cardss"/></h3>-->
     </el-carousel-item>
   </el-carousel>
   </div>
@@ -25,7 +25,7 @@ export default {
   // 轮播图组件
   name: 'carousel',
   components: {
-    cards2,
+    // cards2,
     cards
   },
   props: {
@@ -40,7 +40,6 @@ export default {
         data1:[],
         data2:[],
       },
-
       cardss: [],
     }
   },
@@ -55,7 +54,7 @@ export default {
       this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
         i:(i+9),
       }));
-      this.cardss = new Array(5).fill(0).map((foo, i) => ({
+      this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
         i: (i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63),
       }));
      // console.log(this.cards.data1)
@@ -93,6 +92,22 @@ export default {
               return card;
             }
 
+          });
+          this.cards.data3 = this.cards.data3.map((card) => {
+            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
+            if (matchingIndex) {
+              return {
+                ...card,
+                title: '烘房' + matchingIndex.i,
+                model: matchingIndex.status,
+                dollyNumber:matchingIndex.dollyNumber,
+                waitmin:matchingIndex.waitmin,
+                temperature:matchingIndex.temperature
+              };
+            } else {
+              return card;
+            }
+
           });
 
           this.cardss = this.cardss.map((card) => {