报表

src/views/report/ftoOutputBM/index.vue

@@ -1,4 +1,3 @@
-<!-- 产量对标FTO -->
 <template>
   <div>
     <div class="containerTop">
@@ -7,6 +6,8 @@
         :chartHeight="chartHeight"
         :legendList="legendList"
         :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
       />
     </div>
     <div class="containerBottom">
@@ -112,34 +113,81 @@ export default {
       chartMsg: {
         color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
         xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value;
+          },
+        },
         series: [
           {
             name: "2024年4月目标值",
-            data: [70000, 80000, 90000],
+            // data: [3000, 2000, 3000],
+            // data: [6800, 5000, 8900],
+            // data: [12000, 17000, 19000],
+            data: [560000, 540000, 600000],
             type: "line",
             symbol: "circle",
             symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
           },
           {
             name: "2023年4月",
-            data: [12000, 20000, 150000],
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [550000, 456666, 590000],
             type: "bar",
             barWidth: 20,
+            label: {
+              show: true,
+              // position: [-5, -16],
+              // position: [-5, -16],
+              // position: [-10, -16],
+              position: [-17, -16],
+              color: "#68C483",
+            },
           },
           {
             name: "2024年4月",
-            data: [60000, 70000, 80000],
+            // data: [2100, 900, 1300],
+            // data: [9100, 7300, 9700],
+            // data: [14666, 15300, 18000],
+            data: [556666, 456666, 650000],
             type: "bar",
             barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
           },
         ],
       },
+      chartId: "ftoOutputBMChart",
+      chartNum: 1,
     };
   },
   components: {
     bmSearchBar,
     BmLineBar,
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "FtoOutputBM") {
+        this.chartNum++;
+      }
+    },
+  },
   created() {
     this.tableH = this.tableHeight(137) / 2 - 70;
     this.chartHeight = this.tableHeight(137) / 2 - 111;
@@ -148,10 +196,19 @@ export default {
   destroyed() {
     window.removeEventListener("resize", this._setTableHeight);
   },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "FtoOutputBM") {
+      this.chartNum++;
+    }
+  },
   methods: {
     _setTableHeight() {
       this.tableH = this.tableHeight(137) / 2 - 70;
       this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "FtoOutputBM") {
+        this.chartNum++;
+      }
     },
     getSearch(val) {
       console.log(val);