perf: 优化首页图表

admin_2/src/pages/engineSearch/components/Search.vue

@@ -59,6 +59,7 @@
             v-model="form.businessName"
             placeholder="请选择业务"
             clearable
+            filterable
           >
             <el-option
               v-for="v in businessList"
@@ -74,6 +75,7 @@
             v-model="form.pjOption"
             placeholder="请选择评价选项"
             clearable
+            filterable
           >
             <el-option
               v-for="(v, i) in pjOption"
@@ -89,6 +91,7 @@
             v-model="form.deptName"
             placeholder="请选择部门"
             clearable
+            filterable
           >
             <el-option
               v-for="v in deptList"
@@ -104,6 +107,7 @@
             v-model="form.windowName"
             placeholder="请选择窗口"
             clearable
+            filterable
           >
             <el-option
               v-for="v in windowList"

admin_2/src/pages/home/Home.vue

@@ -194,7 +194,9 @@ export default {
         this.totalDataset.source = thirtyStatList
           .map((item) => {
             return {
-              name: `${item.month}-${item.day}`,
+              name: this.$moment(
+                `${item.year}-${item.month}-${item.day}`
+              ).format("YYYY-MM-DD"),
               value: item.count,
             };
           })
@@ -202,7 +204,9 @@ export default {
         this.phDataset.source = thirtyPhStatList
           .map((item) => {
             return {
-              name: `${item.month}-${item.day}`,
+              name: this.$moment(
+                `${item.year}-${item.month}-${item.day}`
+              ).format("YYYY-MM-DD"),
               value: item.phCount,
             };
           })
@@ -210,7 +214,9 @@ export default {
         this.pjDataset.source = thirtyPjStatList
           .map((item) => {
             return {
-              name: `${item.month}-${item.day}`,
+              name: this.$moment(
+                `${item.year}-${item.month}-${item.day}`
+              ).format("YYYY-MM-DD"),
               value: item.pjCount,
             };
           })

admin_2/src/pages/home/components/LineEchart.vue

@@ -11,7 +11,7 @@ export default {
     },
     endValue: {
       type: Number,
-      default: 6,
+      default: 10,
     },
     color: {
       type: String,
@@ -42,7 +42,7 @@ export default {
       this.myChart && this.myChart.resize();
     },
     initChart(dataset) {
-      let data = dataset.source || [];
+      // let data = dataset.source || [];
       let dom = this.$refs.MyEchart;
       // 获取或者初始化 ECharts 实例
       this.myChart = this.$echarts.getInstanceByDom(dom);
@@ -73,19 +73,23 @@ export default {
             }</span>${params[0].value.value}</div>`;
           },
         },
-        dataZoom: [
-          {
-            type: "inside",
-            show: false,
-            startValue: 0,
-            endValue: this.endValue - 1,
-          },
-        ],
+        // dataZoom: [
+        //   {
+        //     type: "inside",
+        //     show: false,
+        //     startValue: 0,
+        //     endValue: this.endValue - 1,
+        //   },
+        // ],
         xAxis: {
           type: "category",
           boundaryGap: false,
           axisLabel: {
             color: "#5A5C60",
+            formatter: (name) => {
+              let formatterName = name.split("-");
+              return `${formatterName[1]}-${formatterName[2]}`;
+            },
           },
           axisLine: {
             show: true,
@@ -180,39 +184,40 @@ export default {
       window.addEventListener("resize", this.adapterEcharts);
 
       // 清除现有定时器，防止多次调用
-      clearInterval(this.timer);
+      // clearInterval(this.timer);
 
       // 定义并启动定时器
-      this.timer = setInterval(() => {
-        if (option.dataZoom[0].endValue >= data.length - 1) {
-          option.dataZoom[0].endValue = this.endValue - 1;
-          option.dataZoom[0].startValue = 0;
-        } else {
-          option.dataZoom[0].endValue += 1;
-          option.dataZoom[0].startValue += 1;
-        }
-        this.myChart.setOption(option);
-      }, 2000);
+      // this.timer = setInterval(() => {
+      //   if (option.dataZoom[0].endValue >= data.length - 1) {
+      //     option.dataZoom[0].endValue = this.endValue - 1;
+      //     option.dataZoom[0].startValue = 0;
+      //   } else {
+      //     option.dataZoom[0].endValue += 1;
+      //     option.dataZoom[0].startValue += 1;
+      //   }
+      //   this.myChart.setOption(option);
+      // }, 2000);
 
-      // 绑定鼠标移入事件
-      this.myChart.on("mousemove", () => {
-        clearInterval(this.timer); // 清除定时器
-      });
+      // // 绑定鼠标移入事件
+      // this.myChart.on("mousemove", () => {
+      //   console.log(111);
+      //   clearInterval(this.timer); // 清除定时器
+      // });
 
       // 绑定鼠标移出事件
-      this.myChart.on("mouseout", () => {
-        clearInterval(this.timer); // 清除定时器
-        this.timer = setInterval(() => {
-          if (option.dataZoom[0].endValue >= data.length - 1) {
-            option.dataZoom[0].endValue = this.endValue - 1;
-            option.dataZoom[0].startValue = 0;
-          } else {
-            option.dataZoom[0].endValue += 1;
-            option.dataZoom[0].startValue += 1;
-          }
-          this.myChart.setOption(option);
-        }, 2000);
-      });
+      // this.myChart.on("mouseout", () => {
+      //   clearInterval(this.timer); // 清除定时器
+      //   this.timer = setInterval(() => {
+      //     if (option.dataZoom[0].endValue >= data.length - 1) {
+      //       option.dataZoom[0].endValue = this.endValue - 1;
+      //       option.dataZoom[0].startValue = 0;
+      //     } else {
+      //       option.dataZoom[0].endValue += 1;
+      //       option.dataZoom[0].startValue += 1;
+      //     }
+      //     this.myChart.setOption(option);
+      //   }, 2000);
+      // });
     },
 
     hexToRgba(hex, opacity) {