2024-05-14 08:49:23 +08:00
11 changed files with 521 additions and 111 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -1,7 +1,7 @@
 ###
 # @Author: zhp
 # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-11 08:52:30
+ # @LastEditTime: 2024-05-13 13:30:20
 # @LastEditors: zhp
 # @Description:
 ###
--- a/src/views/copilot/components/LineChartBase.vue
+++ b/src/views/copilot/components/LineChartBase.vue
@@ -8,33 +8,25 @@
 <template>
  <chart-container class="line-chart-base">
    <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
+      <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
    </div>
-    <div
-      ref="chart"
-      style="max-width: 50vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="elsChart" :style="{ height: '100%',width: width}"></div>
  </chart-container>
 </template>

 <script>
 import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
 import ChartContainer from "./ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
+// import chartMixin from "@/mixins/chart.js";
 import * as echarts from "echarts";
 export default {
  name: "LineChartBase",
  components: {
    ChartContainer,
  },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
@@ -59,6 +51,7 @@ export default {
  },
  data() {
    return {
+      width: '100%',
      isFullscreen: false,
      actualOptions: null,
      options: {
@@ -84,11 +77,11 @@ export default {
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
        grid: {
          left: '3%',
          right: '4%',
@@ -366,7 +359,22 @@ export default {
      },
    };
  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
  watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isFullscreen(val) {
      this.actualOptions.series.map((item) => {
@@ -375,11 +383,11 @@ export default {
      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
+      this.initChart(this.actualOptions);
    },
    series(val) {
      if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
        return;
      }
      const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -388,19 +396,42 @@ export default {
      actualOptions.series[1].data = val?.[1]?.data || [];
      actualOptions.series[1].name = val?.[1]?.name || "";
      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
    },
  },
-  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);

-    if (screenfull.isEnabled) {
-      screenfull.on("change", () => {
-        this.isFullscreen = screenfull.isFullscreen;
-      });
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    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(this.$refs.elsChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
 };
 </script>

--- a/src/views/copilot/components/LineChartWater.vue
+++ b/src/views/copilot/components/LineChartWater.vue
@@ -1,4 +1,3 @@
-
 <!--
    filename: LineChartBase.vue
    author: liubin
@@ -9,33 +8,25 @@
 <template>
  <chart-container class="line-chart-base">
    <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
+      <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
    </div>
-    <div
-      ref="chart"
-      style="max-width: 50vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="waterChart" :style="{ height: '100%',width: width}"></div>
  </chart-container>
 </template>

 <script>
 import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
 import ChartContainer from "./ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
+// import chartMixin from "@/mixins/chart.js";
 import * as echarts from "echarts";
 export default {
  name: "LineChartBase",
  components: {
    ChartContainer,
  },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
@@ -60,11 +51,12 @@ export default {
  },
  data() {
    return {
+      width:'',
      isFullscreen: false,
      actualOptions: null,
      options: {
        grid: {
-          left: "5%",
+          left: "1%",
          right: "4%",
          bottom: "3%",
          top: "15%",
@@ -85,11 +77,11 @@ export default {
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
        grid: {
          left: '3%',
          right: '4%',
@@ -368,19 +360,34 @@ export default {
    };
  },
  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ztl')
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isFullscreen(val) {
+      if (val === true && this.isOpen === true) {
+        this.width = '99%'
+      }
      this.actualOptions.series.map((item) => {
        item.barWidth = val ? 18 : 12;
      });
      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
+      this.initChart(this.actualOptions);
    },
    series(val) {
      if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
        return;
      }
      const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -389,18 +396,45 @@ export default {
      actualOptions.series[1].data = val?.[1]?.data || [];
      actualOptions.series[1].name = val?.[1]?.name || "";
      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
    },
  },
  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);
-
    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
+    this.actualOptions = this.options
+    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(this.$refs.waterChart);
+      this.chart.setOption(this.actualOptions);
+    },
  },
 };
 </script>
--- a/src/views/copilot/components/gasBarChartBase.vue
+++ b/src/views/copilot/components/gasBarChartBase.vue
@@ -0,0 +1,304 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-13 14:08:51
+ * @LastEditTime: 2024-05-14 08:46:07
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <chart-container class="bar-chart-base">
+    <div class="legend">
+      <!-- <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> -->
+    </div>
+    <div  ref="gasChart" :style="{ height: '100%',width: width}"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    legend: {
+      type: Array,
+      required: false,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "1%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ryf')
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === true && this.isOpen === true) {
+        this.width = '99%'
+      }
+      this.actualOptions.series.map((item) => {
+        item.barWidth = val ? 18 : 12;
+      });
+      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initOptions(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      console.log('actualOptions', 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.initChart(actualOptions);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    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(this.$refs.gasChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+  // mounted() {
+  //   this.actualOptions = this.options;
+  //   this.initOptions(this.options);
+  //   window.addEventListener("resize", this.initOptions(this.actualOptions))
+  //   if (screenfull.isEnabled) {
+  //     screenfull.on("change", () => {
+  //       this.isFullscreen = screenfull.isFullscreen;
+  //     });
+  //   }
+  // },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
@@ -1,40 +1,32 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-09 16:22:24
+ * @LastEditTime: 2024-05-14 08:32:44
 * @LastEditors: zhp
 * @Description:
 -->
 <template>
  <chart-container class="bar-chart-base">
    <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
+      <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
    </div>
-    <div
-      ref="chart"
-      style="max-width: 40vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="chart" :style="{ height: '100%',width: width}"></div>
  </chart-container>
 </template>

 <script>
 import screenfull from "screenfull";
 import ChartContainer from "../../../../components/ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
-
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
 export default {
  name: "BarChartBase",
  components: {
    ChartContainer,
  },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
@@ -59,12 +51,13 @@ export default {
  },
  data() {
    return {
+      width: '100%',
      isFullscreen: false,
      actualOptions: null,
      options: {
        grid: {
          left: "5%",
-          right: "4%",
+          right: "0%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
@@ -182,7 +175,21 @@ export default {
      },
    };
  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
  watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = '100%-128px'
+        this.canvasReset()
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isFullscreen(val) {
      this.actualOptions.series.map((item) => {
@@ -191,11 +198,11 @@ export default {
      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
+      this.initChart(this.actualOptions);
    },
    series(val) {
      if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
        return;
      }
      console.log(val)
@@ -205,19 +212,41 @@ export default {
      actualOptions.series[1].data = val?.[1]?.data || [];
      actualOptions.series[1].name = val?.[1]?.name || "";
      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
    },
  },
  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);
-
-    if (screenfull.isEnabled) {
-      screenfull.on("change", () => {
-        this.isFullscreen = screenfull.isFullscreen;
-      });
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    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(this.$refs.chart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
 };
 </script>

--- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
@@ -159,6 +159,7 @@ export default {
  }

  .chart {
+    width: 390px;
    align-self: stretch;
    height: 280px;
  }
--- a/src/views/copilot/energy/components/ElecCost.vue
+++ b/src/views/copilot/energy/components/ElecCost.vue
@@ -7,31 +7,30 @@

 <template>
  <LineChartBase
-    v-if="1"
    :legend="legend"
    :series="series"
    :xAxis="xAxis"
    in="elecCost"
    class="elec-cost"
  />
-  <BarChartBase
+  <!-- <BarChartBase
    v-else
    :legend="legend"
    :series="series"
    :xAxis="xAxis"
    in="elecCost"
    class="elec-cost"
-  />
+  /> -->
 </template>

 <script>
-import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
 import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";

 export default {
  name: "ElecCost",
  components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
    LineChartBase: LineChartBaseVue,
  },
  props: {
--- a/src/views/copilot/energy/components/NatGas.vue
+++ b/src/views/copilot/energy/components/NatGas.vue
@@ -15,7 +15,7 @@
 </template>

 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue";

 export default {
  name: "NatGasCost",
--- a/src/views/copilot/energy/components/sub/monitor/MonitorItem.vue
+++ b/src/views/copilot/energy/components/sub/monitor/MonitorItem.vue
@@ -10,10 +10,12 @@
    <div class="cities">
      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
    </div>
-    <div class="chart" ref="chart"></div>
+    <div style="padding: 0 30px;width: 90%;">
+      <div class="chart" ref="chart"></div>
+    </div>
    <div class="legend" v-if="1">
      <div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
-        <div >
+        <div>
          <span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
          <span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
        </div>
@@ -108,6 +110,8 @@ export default {
  }

  .chart {
+    margin-left: 5%;
+    width: 290px;
    align-self: stretch;
    height: 280px;
  }
--- a/src/views/copilot/energy/index.vue
+++ b/src/views/copilot/energy/index.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 08:41:11
+ * @LastEditTime: 2024-05-13 15:48:10
 * @LastEditors: zhp
 * @Description:
 -->
@@ -56,8 +56,11 @@ export default {
      immediate: true,
    },
  },
+
  methods: {
    fetchData(period = "日") {
+      // console.log(this.width);
+      // console.log('sidebar', this.$store.getters.sidebar);
      console.log(`效率驾驶舱，获取${period}数据`);
      this.$store.dispatch("copilot/initCopilot", {
        period,
--- a/src/views/dashboard/components/Header.vue
+++ b/src/views/dashboard/components/Header.vue
@@ -25,6 +25,7 @@ export default {
  props: {},
  data() {
    return {
+      weatherInterval:null,
      isFullscreen: false,
      times: null,
      weather:'',
@@ -39,9 +40,15 @@ export default {
      };
    },
  },
-  mounted () {
-    ;this.getTimes()
-    this.getWeather()
+  mounted() {
+    this.getTimes()
+    this.weatherInterval = setInterval(() => {
+      this,this.getWeather()
+    }, 1000)
+  },
+  destroyed() {
+    // console.log(1111)
+    clearInterval(this.weatherInterval)
  },
  methods: {
    getTimes() {
@@ -83,23 +90,21 @@ export default {
        '.' +
        day
    },
-   async getWeather() {
-      setInterval(() => {
-       fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
-          method: 'get',
-         extensions: 'base',
+    getWeather() {
+      fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
+        method: 'get',
+        extensions: 'base',
        //  output:'JSON'
-       }).then((response) => {
-         // 注意此处
-         response.json().then((data) => {
-           console.log(data)
-           this.weather = data.lives[0].weather + '   '+ data.lives[0].temperature + '℃'
-         }).catch((err) => {
+      }).then((response) => {
+        // 注意此处
+        response.json().then((data) => {
+          console.log(data)
+          this.weather = data.lives[0].weather + '   ' + data.lives[0].temperature + '℃'
+        }).catch((err) => {
          this.weather = '晴  25℃'
-           console.log(err);
-         })
-       })
-      }, 1000)
+          console.log(err);
+        })
+      })
    },
    toggleFullscreen() {
      screenfull.toggle();