对接报表

src/views/report/ftoOutputBM/index.vue

@@ -4,7 +4,7 @@
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
     </div>
     <div class="containerBottom">
-      <div class="smallTitle">4月FTO/基片投入</div>
+      <div class="smallTitle">FTO/基片投入</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -26,101 +26,61 @@
 <script>
 import bmSearchBar from "../components/bmSearchBar.vue";
 import BmLineBar from "../components/bmLineBar.vue";
-const tableProps = [
-  {
-    prop: "factory",
-    label: "工厂名称",
-    // filter: (val) => factoryList[val],
-    minWidth: 200,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "name",
-    label: "科目",
-    minWidth: 120,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "unit",
-    label: "单位",
-    minWidth: 80,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "time1",
-    label: "时间1",
-    minWidth: 150,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "time2",
-    label: "时间2",
-    minWidth: 150,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "mubiao",
-    label: "目标值",
-    minWidth: 150,
-    showOverflowtooltip: true,
-  },
-];
+import {
+  fTOReportByDateRangePage,
+  fTOReportByDateRangeExport,
+} from "@/api/report/benchmarking.js";
+import moment from "moment";
 export default {
   name: "FtoOutputBM",
   data() {
     return {
-      tableProps,
+      factoryList: [
+        { id: 0, name: "瑞昌" },
+        { id: 1, name: "邯郸" },
+      ],
+      tableProps: [],
+      tableProps1: [
+        {
+          prop: "factory",
+          label: "工厂名称",
+          filter: (val) => this.factoryList[val].name,
+          minWidth: 150,
+          showOverflowtooltip: true,
+        },
+        {
+          prop: "item",
+          label: "科目",
+          minWidth: 120,
+          showOverflowtooltip: true,
+        },
+        {
+          prop: "unit",
+          label: "单位",
+          minWidth: 80,
+          showOverflowtooltip: true,
+        },
+      ],
       listQuery: {
         current: 1,
-        size: 1000,
+        size: 100,
       },
-      tableData: [
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-        { factory: "工厂1" },
-      ],
+      tableData: [],
       chartHeight: this.tableHeight(269) / 2,
       tableH: this.tableHeight(269) / 2,
       legendList: [
-        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
-        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
-        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+        { id: 1, name: "", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "", type: 1, color: "#288AFF" },
       ],
       chartMsg: {
         color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
-        xData: ["成都", "邯郸", "瑞昌"],
+        xData: [],
         yName: "单位/片",
         series: [
           {
-            name: "2024年4月目标值",
-            // data: [3000, 2000, 3000],
-            // data: [6800, 5000, 8900],
-            // data: [12000, 17000, 19000],
-            data: [560000, 540000, 600000],
+            name: "1",
+            data: [],
             type: "line",
             symbol: "circle",
             symbolSize: 6,
@@ -130,28 +90,22 @@ export default {
             },
           },
           {
-            name: "2023年4月",
-            // data: [2100, 800, 1500],
-            // data: [9500, 7200, 9901],
-            // data: [14666, 15000, 17888],
-            data: [550000, 456666, 590000],
+            name: "2",
+            data: [],
             type: "bar",
             barWidth: 20,
             label: {
               show: true,
               // position: [-5, -16],
               // position: [-5, -16],
-              // position: [-10, -16],
-              position: [-17, -16],
+              position: [-10, -16],
+              // position: [-17, -16],
               color: "#68C483",
             },
           },
           {
-            name: "2024年4月",
-            // data: [2100, 900, 1300],
-            // data: [9100, 7300, 9700],
-            // data: [14666, 15300, 18000],
-            data: [556666, 456666, 650000],
+            name: "3",
+            data: [],
             type: "bar",
             barWidth: 20,
             label: {
@@ -188,6 +142,13 @@ export default {
     this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
+  mounted() {
+    this.tableProp = this.tableProp1;
+    this.listQuery.date = 2;
+    this.listQuery.queryTime = moment().format("yyyy-MM-DD");
+    this.listQuery.factorys = [];
+    this.getList();
+  },
   destroyed() {
     window.removeEventListener("resize", this._setTableHeight);
   },
@@ -206,59 +167,156 @@ export default {
       }
     },
     getSearch(val) {
-      console.log(val);
-      console.log("==========下面是测试代码，需删除");
-      this.chartMsg.series = [];
+      this.listQuery.date = val.type;
+      this.listQuery.queryTime = val.startDate;
+      this.listQuery.factorys = val.factory;
+      this.getList();
     },
-    handleExport() {
-      console.log("导出=====下面是测试代码，需删除");
-      this.chartMsg.series = [
-        {
-          name: "2024年4月目标值1",
-          // 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",
+    getList() {
+      this.tableProps = [];
+      fTOReportByDateRangePage({ ...this.listQuery }).then((res) => {
+        if (res.data && res.data.length > 0) {
+          // 设置表头
+          let msg = res.data[0];
+          let arr = [
+            {
+              prop: "lastone",
+              label: msg.lastone.reportTime,
+              minWidth: 150,
+            },
+            {
+              prop: "currentone",
+              label: msg.currentone.reportTime,
+              minWidth: 150,
+            },
+            {
+              prop: "targetone",
+              label: msg.targetone.reportTime,
+              minWidth: 150,
+            },
+          ];
+          this.tableProps = this.tableProps1.concat(arr);
+          // 整理表格数据
+          let tableArr = [];
+          res.data.forEach((item) => {
+            let obj = {};
+            obj.factory = item.factory;
+            obj.item = "FTO投入";
+            obj.unit = "片";
+            obj.lastone = item.lastone.total;
+            obj.currentone = item.currentone.total;
+            obj.targetone = item.targetone.total;
+            tableArr.push(obj);
+          });
+          this.tableData = tableArr;
+          // 设置图例
+          this.legendList[0].name = msg.targetone.reportTime;
+          this.legendList[1].name = msg.lastone.reportTime;
+          this.legendList[2].name = msg.currentone.reportTime;
+          this.chartMsg.series[0].name = msg.targetone.reportTime;
+          this.chartMsg.series[1].name = msg.lastone.reportTime;
+          this.chartMsg.series[2].name = msg.currentone.reportTime;
+          // 设置偏移量
+          switch (this.listQuery.type) {
+            case 0:
+              this.chartMsg.series[1].label.position = [-5, -16];
+              break;
+            case 1:
+              this.chartMsg.series[1].label.position = [-5, -16];
+              break;
+            case 2:
+              this.chartMsg.series[1].label.position = [-10, -16];
+              break;
+            default:
+              this.chartMsg.series[1].label.position = [-17, -16];
+          }
+          // 设置chartMsg的series的数据
+          this.setChartMsg(res.data);
+        } else {
+          // 重置
+          this.resetMsg();
+        }
+      });
+    },
+    setChartMsg(val) {
+      let xData = [];
+      let lineData = [];
+      let barData1 = [];
+      let barData2 = [];
+      for (let i = 0; i < val.length; i++) {
+        this.factoryList.map((item) => {
+          if (item.id === val[i].factory) {
+            xData.push(item.name);
+          }
+        });
+        lineData.push(val[i].targetone.total || 0);
+        barData1.push(val[i].lastone.total || 0);
+        barData2.push(val[i].currentone.total || 0);
+      }
+      this.chartMsg.xData = xData;
+      this.chartMsg.series[0].data = lineData;
+      this.chartMsg.series[1].data = barData1;
+      this.chartMsg.series[2].data = barData2;
+      this.chartMsg.xData = xData;
+    },
+    resetMsg() {
+      this.tableProps = this.tableProps1;
+      this.tableData = [];
+      this.chartMsg = {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: [],
+        yName: "单位/片",
+        series: [
+          {
+            name: "1",
+            data: [],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
           },
-        },
-        {
-          name: "2023年4月",
-          // 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: "2",
+            data: [],
+            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: [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",
+          {
+            name: "3",
+            data: [],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
           },
-        },
-      ];
+        ],
+      };
+    },
+    handleExport(val) {
+      this.listQuery.type = val.type;
+      this.listQuery.startDate = val.startDate;
+      this.listQuery.factory = val.factory;
+      let fileName = "产量对标FTO.xls";
+      fTOReportByDateRangeExport({ ...this.listQuery })
+        .then((response) => {
+          this.$download.excel(response, fileName);
+          this.$message.success("导出成功");
+        })
+        .catch(() => {});
     },
   },
 };