工厂驾驶舱样式

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

@@ -9,19 +9,14 @@
         >{{ item.label }}</span
       >
     </div>
-    <div
+    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
-      ref="chart"
-      style="width: 100%"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
   </div>
 </template>
 <script>
-import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
   name: "Energy",
-  mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -44,6 +39,7 @@ export default {
     return {
       isFullscreen: false,
       actualOptions: null,
+      chart: "",
       options: {
         color: ["#FFD160", "#2760FF", "#12FFF5"],
         grid: {
@@ -205,49 +201,67 @@ export default {
     //   this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
     //   this.initOptions(this.actualOptions);
     // },
-    series(val) {
+    // series(val) {
-      if (!val) {
+    //   if (!val) {
-        this.initOptions(this.options);
+    //     this.initOptions(this.options);
-        return;
+    //     return;
-      }
+    //   }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
+    //   const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = val[0].data;
+    //   actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
+    //   actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val[1].data;
+    //   actualOptions.series[1].data = val[1].data;
-      actualOptions.series[1].name = val[1].name;
+    //   actualOptions.series[1].name = val[1].name;
-      actualOptions.series[2].data = val[2].data;
+    //   actualOptions.series[2].data = val[2].data;
-      actualOptions.series[2].name = val[2].name;
+    //   actualOptions.series[2].name = val[2].name;
-      this.actualOptions = actualOptions;
+    //   this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+    //   this.initOptions(actualOptions);
-    },
+    // },
   },
   mounted() {
-    console.log("00000000000000000000");
-    const actualOptions = JSON.parse(JSON.stringify(this.options));
-    actualOptions.series[0].data = this.series[0].data;
-    actualOptions.series[0].name = this.series[0].name;
-    actualOptions.series[1].data = this.series[1].data;
-    actualOptions.series[1].name = this.series[1].name;
-    actualOptions.series[2].data = this.series[2].data;
-    actualOptions.series[2].name = this.series[2].name;
-    this.actualOptions = actualOptions;
-    console.log(actualOptions);
-    console.log("1111111111");
-    this.initOptions(actualOptions);
-    // this.actualOptions = this.options;
-    // this.initOptions(this.options);
-
     // if (screenfull.isEnabled) {
     //   screenfull.on("change", () => {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[1].data = this.series[1].data;
+      actualOptions.series[1].name = this.series[1].name;
+      actualOptions.series[2].data = this.series[2].data;
+      actualOptions.series[2].name = this.series[2].name;
+      this.actualOptions = actualOptions;
+      this.chart.setOption(actualOptions);
+    },
   },
 };
 </script>
 <style scoped lang="scss">
 .left-chart-base {
   // position: relative;
+  height: 100%;
 
   .legend {
     position: absolute;

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

@@ -1,11 +1,17 @@
 <template>
-  <dv-scroll-board :config="config" style="width: 100%; height: 100%" />
+  <dv-scroll-board
+    v-if="aa"
+    :config="config"
+    style="width: 100%; height: 100%"
+  />
 </template>
 <script>
+import { debounce } from "@/utils/debounce";
 export default {
   name: "Order",
   data() {
     return {
+      aa: true,
       config: {
         header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
         headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -41,5 +47,20 @@ export default {
       },
     };
   },
+  mounted() {
+    this.tableReset();
+    window.addEventListener("resize", this.tableReset);
+  },
+  methods: {
+    tableReset() {
+      this.aa = false;
+      debounce(() => {
+        this.initTable();
+      }, 500)();
+    },
+    initTable() {
+      this.aa = true;
+    },
+  },
 };
 </script>

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

@@ -1,15 +1,11 @@
 <template>
-  <div
+  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
-    ref="chart"
-    style="width: 100%"
-    :style="{ height: vHeight + 'vh' }"
-  ></div>
 </template>
 <script>
-import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
 export default {
   name: "Store",
-  mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -28,6 +24,7 @@ export default {
     return {
       isFullscreen: false,
       actualOptions: null,
+      chart: "",
       options: {
         grid: {
           left: "3%",
@@ -134,18 +131,39 @@ export default {
     },
   },
   mounted() {
-    console.log("store");
-    const actualOptions = JSON.parse(JSON.stringify(this.options));
-    actualOptions.series[0].data = this.series[0].data;
-    actualOptions.series[0].name = this.series[0].name;
-    this.actualOptions = actualOptions;
-    this.initOptions(actualOptions);
-
     // if (screenfull.isEnabled) {
     //   screenfull.on("change", () => {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryStoreChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
+      this.actualOptions = actualOptions;
+      this.chart.setOption(actualOptions);
+    },
   },
 };
 </script>