1

src/views/copilot/factoryData/components/Order.vue

@@ -1,8 +1,9 @@
 <template>
   <dv-scroll-board
-    v-if="aa"
+    v-if="showTable"
     :config="config"
     style="width: 100%; height: 100%"
+    ref="orderScrollBoard"
   />
 </template>
 <script>
@@ -11,7 +12,7 @@ export default {
   name: "Order",
   data() {
     return {
-      aa: true,
+      showTable: true,
       config: {
         header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
         headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -26,51 +27,87 @@ export default {
       },
     };
   },
+  props: {
+    prodOrder: {
+      type: Array,
+      default: [],
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    isOpen(val) {
+      this.tableReset();
+    },
+    prodOrder() {
+      this.getTableList();
+    },
+  },
   mounted() {
-    this.getTableList();
-    this.tableReset();
     window.addEventListener("resize", this.tableReset);
   },
   methods: {
     tableReset() {
-      this.aa = false;
+      this.showTable = false;
       debounce(() => {
         this.initTable();
       }, 500)();
     },
     initTable() {
-      this.aa = true;
+      this.showTable = true;
     },
     getTableList() {
-      let _this = this;
-      setTimeout(
-        (function name() {
-          _this.config.data = [
-            ["1", "行1列1", "行1列2", "行1列3", "50%"],
-            ["2", "行2列1", "行2列2", "行2列3", "50%"],
-            ["3", "行3列1", "行3列2", "行3列3", "50%"],
-            ["4", "行4列1", "行4列2", "行4列3", "50%"],
-            ["5", "行5列1", "行5列2", "行5列3", "50%"],
-            ["6", "行6列1", "行6列2", "行6列3", "50%"],
-            ["7", "行7列1", "行7列2", "行7列3", "50%"],
-            ["8", "行8列1", "行8列2", "行8列3", "50%"],
-            ["9", "行9列1", "行9列2", "行9列3", "50%"],
-            ["10", "行10列1", "行10列2", "行10列3", "50%"],
-            ["11", "行11列1", "行11列2", "行11列3", "50%"],
-            ["12", "行12列1", "行12列2", "行12列3", "50%"],
-            ["13", "行13列1", "行13列2", "行13列3", "50%"],
-            ["14", "行14列1", "行14列2", "行14列3", "50%"],
-            ["15", "行15列1", "行15列2", "行15列3", "50%"],
-            ["16", "行16列1", "行16列2", "行16列3", "50%"],
-            ["17", "行17列1", "行17列2", "行17列3", "50%"],
-            ["18", "行18列1", "行18列2", "行18列3", "50%"],
-            ["19", "行19列1", "行19列2", "行19列3", "50%"],
-            ["20", "行20列1", "行20列2", "行20列3", "50%"],
-          ];
-        })(),
-        2000
-      );
-      this.initTable();
+      let outArr = [];
+      if (this.prodOrder.length > 0) {
+        for (let i = 0; i < this.prodOrder.length; i++) {
+          let arr = [];
+          arr.push(i + 1);
+          arr.push(
+            `<span title=${this.prodOrder[i].customerName || ""}>${
+              this.prodOrder[i].customerName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].productName || ""}>${
+              this.prodOrder[i].productName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
+              this.prodOrder[i].plannedProductionQuantity || ""
+            }</span>`
+          );
+          arr.push(`<span style="display:inline-block;width:45px;">${
+            this.prodOrder[i].productionProgress
+              ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
+              : "0%"
+          }</span>
+            <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
+            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
+              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
+                this.prodOrder[i].productionProgress
+                  ? this.prodOrder[i].productionProgress.toFixed(0) *
+                      37.68 *
+                      0.01 +
+                    "," +
+                    (1 -
+                      this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
+                      37.68
+                  : 0 + "," + 37.68
+              }"/>
+            </svg>
+          </div>`);
+          outArr.push(arr);
+        }
+        this.config.data = outArr;
+      } else {
+        this.config.data = [];
+      }
+      this.$refs["orderScrollBoard"].updateRows(outArr);
     },
   },
 };