1

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

@@ -1,36 +1,37 @@
 <template>
-  <div class="left-chart-base">
-    <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
-        >{{ item.label }}</span
-      >
+  <div>
+    <div class="left-chart-base">
+      <NotMsg v-show="notMsg" />
+      <div class="legend" v-show="!notMsg">
+        <span
+          v-for="item in legend"
+          :key="item.label"
+          class="legend-item"
+          :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
+          >{{ item.label }}</span
+        >
+      </div>
+      <div
+        id="factoryEnergyChart"
+        style="width: 100%; height: 100%"
+        v-show="!notMsg"
+      ></div>
     </div>
-    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
 export default {
   name: "Energy",
+  components: { NotMsg },
   props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
     legend: {
       type: Array,
       required: true,
     },
-    xAxis: {
-      type: Array,
-      required: true,
-    },
-    series: {
+    energyCockpits: {
       type: Array,
       required: true,
     },
@@ -39,6 +40,7 @@ export default {
     return {
       isFullscreen: false,
       actualOptions: null,
+      notMsg: false,
       chart: "",
       options: {
         color: ["#FFD160", "#2760FF", "#12FFF5"],
@@ -65,7 +67,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: this.xAxis,
+          data: [],
         },
         yAxis: [
           {
@@ -190,6 +192,11 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     // isFullscreen(val) {
@@ -216,6 +223,12 @@ export default {
     //   this.actualOptions = actualOptions;
     //   this.initOptions(actualOptions);
     // },
+    energyCockpits() {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
   },
   mounted() {
     // if (screenfull.isEnabled) {
@@ -241,17 +254,63 @@ export default {
       }, 500)();
     },
     initChart() {
+      let energyxAxis = [];
+      let n = 0;
+      let seriesArr = [
+        {
+          name: "水",
+          energyType: 1,
+          data: [],
+        },
+        {
+          name: "电",
+          energyType: 2,
+          data: [],
+        },
+        {
+          name: "气",
+          energyType: 3,
+          data: [],
+        },
+      ];
+      if (this.energyCockpits.length > 0) {
+        this.notMsg = false;
+        let dataArr = this.energyCockpits.map((item) => {
+          return item.groupName;
+        });
+        energyxAxis = Array.from(new Set(dataArr));
+        n = energyxAxis.length;
+        seriesArr[0].data = Array.from({ length: n }, () => 0);
+        seriesArr[1].data = Array.from({ length: n }, () => 0);
+        seriesArr[2].data = Array.from({ length: n }, () => 0);
+        for (let i = 0; i < this.energyCockpits.length; i++) {
+          for (let j = 0; j < energyxAxis.length; j++) {
+            if (this.energyCockpits[i].groupName === energyxAxis[j]) {
+              if (this.energyCockpits[i].energyType === 1) {
+                seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 2) {
+                seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 3) {
+                seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
+              }
+            }
+          }
+        }
+      } else {
+        this.notMsg = true;
+      }
       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;
+      actualOptions.xAxis.data = energyxAxis;
+      actualOptions.series[0].data = seriesArr[0].data;
+      actualOptions.series[0].name = seriesArr[0].name;
+      actualOptions.series[1].data = seriesArr[1].data;
+      actualOptions.series[1].name = seriesArr[1].name;
+      actualOptions.series[2].data = seriesArr[2].data;
+      actualOptions.series[2].name = seriesArr[2].name;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },