From 6d040980c2b178241841ef335d4f70cbdb467d4b Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期三, 06 十二月 2023 17:16:33 +0800
Subject: [PATCH] 增加计算加工数和生产数的方法

---
 src/views/cockpitPage/components/OrderCompleteRadio.vue |   69 +++++++++++++++++++++++++---------
 1 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index 3f964b9..9d447b0 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -4,7 +4,6 @@
       <ChartTitle name="璁㈠崟瀹屾垚姣旂巼"></ChartTitle>
     </div>
     <div class="list-view">
-      <!-- <ul> -->
       <template v-for="item in tableList">
         <div class="table-bg-view">
           <div class="left">{{ item.title }}</div>
@@ -15,14 +14,11 @@
               :percentage="item.radio"
               :define-back-color="'#083f55'"
               :text-color="'#fec718'"
+              :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'"
             ></el-progress>
-            <!-- <div class="container">
-              <div class="item" v-for="i in 40" :key="i"></div>
-            </div> -->
           </div>
         </div>
       </template>
-      <!-- </ul> -->
     </div>
   </div>
 </template>
@@ -33,21 +29,48 @@
   components: {
     ChartTitle,
   },
-  props: {},
+  props: {
+    orderCompleteObject: {
+      type: Object,
+      default: () => {
+        return {
+          startIndex: 0,
+          orderCompleteList: [],
+        };
+      },
+    },
+  },
   data() {
     return {
-      tableList: [
-        { title: "DD19070047", radio: 50 },
-        { title: "DD19070048", radio: 70 },
-        { title: "DD19070049", radio: 85 },
-        { title: "DD19070050", radio: 30 },
-      ],
+      startIndex: 0,
+      time: 0,
     };
   },
   mounted() {
-    console.log(this.$refs.middle.$el, "sssssssss");
+    setInterval(() => {
+      this.startIndex += 4;
+    }, 5000);
   },
-  watch: {},
+  computed: {
+    tableList: {
+      get() {
+        if (
+          this.startIndex > this.orderCompleteObject.orderCompleteList.length
+        ) {
+          this.startIndex = 0;
+        }
+        return this.orderCompleteObject.orderCompleteList.slice(
+          this.startIndex,
+          this.startIndex + 4
+        );
+      },
+    },
+  },
+  watch: {
+    "orderCompleteObject.orderCompleteList"(val) {
+      this.startIndex = this.orderCompleteObject.startIndex;
+    },
+  },
   methods: {},
 };
 </script>
@@ -70,14 +93,18 @@
       height: calc(20% - 10px);
       width: 100%;
       border-radius: 50px;
+      transition: all 1s ease-in-out 0s;
       .left {
-        width: 20%;
+        width: 23%;
         margin: 0 10px;
         color: #02f1fc;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .middle {
         flex: 1;
-        margin: 0 10px;
+        margin-right: 5px;
       }
     }
   }
@@ -93,12 +120,18 @@
     background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
       center center / cover;
   }
-  .el-progress-bar__innerText {
+  .setTitle-right .el-progress-bar__innerText {
     position: absolute;
     top: 2px;
-    right: -50px;
+    right: -66px;
     text-align: left;
     font-size: 18px;
+    width: 60px;
+  }
+  .setTitle-left .el-progress-bar__innerText {
+    color: rgb(226, 146, 27) !important;
+    font-size: 18px;
+    width: 60px;
   }
 }
 </style>

--
Gitblit v1.8.0