烘房生产监控看板修改

package.json

@@ -55,6 +55,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "swiper": "^5.4.5",
     "v-scale-screen": "^1.0.2",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",

src/views/kanban/Dryingprocess/index.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="content">
         <div class="itemtop">
-          <div class="left">
+          <div class="left left2">
             <div class="box">
               <div class="name name1">当天烘房情况</div>
             </div>
@@ -114,12 +114,12 @@
                             <div class="footer-title">烘房温度</div>
                           </div>
                         </div>
-                        <div class="image1">
+                        <!-- <div class="image1">
                           <img
-                            src=""
+                            src="../../../assets/images/image1.png"
                             alt="暂无图片"
                           />
-                        </div>
+                        </div> -->
                         <div class="card-footer">
                           <div class="card-footer-item">
                             <div class="footer-detail">
@@ -175,7 +175,7 @@
               </div>
             </div>
           </div>
-          <div class="left">
+          <div class="left left2">
             <div class="box">
               <div class="name name1">当天质量情况</div>
             </div>
@@ -184,7 +184,7 @@
                 <div class="card-header">
                   <span class="card-header-left"
                     >不合格异常数量:
-                    <span class="color2">{{ Qualitydaynumber || "0" }}</span>
+                    <span class="color2">{{ Qualityday.length || "0" }}</span>
                     车</span
                   >
                 </div>
@@ -192,7 +192,7 @@
                   <div class="list1">
                     <div class="listitem1 header1">烘房</div>
                     <div class="listitem1 header2">托盘号</div>
-                    <div class="listitem1 header3">不合格车数</div>
+                    <div class="listitem1 header3">时间</div>
                   </div>
                 </div>
                 <div class="card-box card-box1">
@@ -218,7 +218,7 @@
                       class="listitem1"
                       style="min-width: 170px; text-align: center"
                     >
-                      {{ card.taskNum || "0" }}
+                      {{ card.createTime || "0" }}
                     </div>
                   </div>
                 </div>
@@ -316,7 +316,7 @@ export default {
       swiper: null,
       swiperList: [],
       Dailyoutputnumber: null,
-      Qualitydaynumber: null,
+      Qualitydaynumber: [],
       dataPropdata: [],
     };
   },
@@ -734,12 +734,10 @@ export default {
       }).then((response) => {
         if (response) {
           if (response.data) {
-            _this.Qualitydaynumber = 0;
             _this.Qualityday = response.data;
             _this.Qualityday.forEach((item) => {
-              if (item.taskNum != null) {
-                _this.Qualitydaynumber =
-                  parseFloat(item.taskNum) + parseFloat(_this.Qualitydaynumber);
+              if (item.createTime != null) {
+                item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
               }
             });
           }
@@ -838,14 +836,14 @@ export default {
       .left {
         .box {
           width: 525px;
-          height: 62px;
-          background: url("../../../assets/images/bg2.png") no-repeat;
-          background-size: 100% 100%;
+          height: 46px;
+          // background: url("../../../assets/images/bg2.png") no-repeat;
+          // background-size: 100% 100%;
           padding: 0px 21px 0px 25px;
           box-sizing: border-box;
           display: flex;
           align-items: center;
-          background-color: #1f3668;
+          // background-color: #1f3668;
           .name {
             min-width: 300px;
             letter-spacing: 4px;
@@ -881,20 +879,20 @@ export default {
           .card-item {
             width: 525px;
             height: 420px;
-            background: url("../../../assets/images/bg3.png") no-repeat;
-            background-size: 100% 100%;
+            // background: url("../../../assets/images/bg3.png") no-repeat;
+            // background-size: 100% 100%;
             padding: 10px;
-            background-color: #192c56;
+            // background-color: #192c56;
             // display: flex;
             // flex-direction: column;
           }
           .card-item1 {
             width: 750px;
             height: 481px;
-            background: url("../../../assets/images/bg3.png") no-repeat;
+            background: url("../../../assets/images/image1.png") no-repeat;
             background-size: 100% 100%;
             padding: 10px;
-            background-color: #0e1d3a;
+            // background-color: #0e1d3a;
             // display: flex;
             // flex-direction: column;
           }
@@ -912,7 +910,7 @@ export default {
               min-width: 100px;
               padding: 14px 26px;
               letter-spacing: 8px;
-              background: linear-gradient(to right, #192c56, #11518f, #192c56);
+              // background: linear-gradient(to right, #192c56, #11518f, #192c56);
               .color1 {
                 color: #0195fd;
               }
@@ -1003,6 +1001,7 @@ export default {
       }
       .left1 {
         width: 750px;
+
         .swiper-container {
           .swiper-wrapper {
             .lefttop {
@@ -1020,9 +1019,10 @@ export default {
                   min-width: 100px;
                   padding: 14px 26px;
                   letter-spacing: 8px;
-                  background-color: #114989;
-                  box-shadow: 0px 0px 10px 6px #114989;
-                  border-bottom: 1px solid #20aae6;
+                  // background-color: #114989;
+                  // box-shadow: 0px 0px 10px 6px #114989;
+                  margin-top: 10px;
+                  // border-bottom: 1px solid #20aae6;
                 }
               }
               .boximage {
@@ -1073,6 +1073,12 @@ export default {
           }
         }
       }
+      .left2 {
+        width: 525px;
+        height: 480px;
+        background: url("../../../assets/images/bg4.png") no-repeat;
+        background-size: 100% 100%;
+      }
     }
 
     .itembottom {
@@ -1082,16 +1088,19 @@ export default {
 
       .left {
         width: 1872px;
+        height: 417px;
+        background: url("../../../assets/images/bg5.png");
+        background-size: 100% 100%;
         .box {
           width: 1872px;
           height: 56px;
-          background: url("../../../assets/images/bg2.png");
-          background-size: 100% 100%;
+          // background: url("../../../assets/images/bg2.png");
+          // background-size: 100% 100%;
           padding: 0px 21px 0px 25px;
           box-sizing: border-box;
           display: flex;
           align-items: center;
-          background-color: #1f3668;
+          // background-color: #1f3668;
           .name {
             min-width: 300px;
             letter-spacing: 4px;
@@ -1127,10 +1136,10 @@ export default {
           .card-item {
             width: 100%;
             height: 360px;
-            background: url("../../../assets/images/bg3.png") no-repeat;
-            background-size: 100% 100%;
+            // background: url("../../../assets/images/bg3.png") no-repeat;
+            // background-size: 100% 100%;
             padding: 10px;
-            background-color: #192c56;
+            // background-color: #192c56;
             // display: flex;
             // flex-direction: column;
           }