1

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

@@ -1,36 +1,43 @@
 <template>
-  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
+  <div>
+    <NotMsg v-show="notMsg" />
+    <div
+      id="factoryStoreChart"
+      style="width: 100%; height: 100%"
+      v-show="!notMsg"
+    ></div>
+  </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
 export default {
   name: "Store",
+  components: { NotMsg },
   props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
-    xAxis: {
-      type: Array,
+    stock: {
+      type: Object,
       required: true,
     },
-    series: {
-      type: Array,
-      required: true,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
     },
   },
   data() {
     return {
       isFullscreen: false,
       actualOptions: null,
+      notMsg: false,
       chart: "",
       options: {
         grid: {
           left: "3%",
           right: "1%",
           bottom: "0",
-          top: "10%",
+          top: "15%",
           containLabel: true,
         },
         tooltip: {},
@@ -47,7 +54,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: this.xAxis,
+          data: [],
         },
         yAxis: {
           name: "单位/片",
@@ -116,18 +123,11 @@ export default {
     };
   },
   watch: {
-    series(val) {
-      if (!val) {
-        this.initOptions(this.options);
-        return;
-      }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val[1].data;
-      actualOptions.series[1].name = val[1].name;
-      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+    stock(val) {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
     },
   },
   mounted() {
@@ -154,13 +154,23 @@ export default {
       }, 500)();
     },
     initChart() {
+      let xAxis = Object.keys(this.stock) || [];
+      let data = [];
+      if (xAxis.length > 0) {
+        this.notMsg = false;
+        data = xAxis.map((item) => {
+          return this.stock[item].total;
+        });
+      } else {
+        this.notMsg = true;
+      }
       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;
+      actualOptions.xAxis.data = xAxis;
+      actualOptions.series[0].data = data;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },