From 8d92f2a588331866034bb2b534d3b77ea888f2c8 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 6 Feb 2024 14:35:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=84=E9=87=91=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E9=A1=B9=E5=9B=BE=E8=A1=A8=E9=BB=98=E8=AE=A4=E4=B8=8D=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/goldTarget/index.vue | 133 ++++++++++++----------
 1 file changed, 71 insertions(+), 62 deletions(-)

diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue
index 434bc733..9b70aea5 100644
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -160,14 +160,68 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
 type StateType = {
   /**网元类型 */
   neType: string[];
+  /**图表标签选择 */
+  chartLegendSelected: Record<string, boolean>;
   /**图表配置数据 */
-  chartsOption: Record<string, any>;
+  chartOption: EChartsOption;
 };
 
 /**对象信息状态 */
 let state: StateType = reactive({
   neType: [],
-  chartsOption: {},
+  chartLegendSelected: {},
+  chartOption: {
+    tooltip: {
+      trigger: 'axis',
+      position: function (pt: any) {
+        return [pt[0], '10%'];
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [],
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      top: 40,
+      right: 20,
+      itemWidth: 20,
+      itemGap: 25,
+      textStyle: {
+        color: '#646A73',
+      },
+      icon: 'circle',
+      selected: {
+        // 选中'系列1'
+        系列1: true,
+        // 不选中'系列2'
+        系列2: false,
+      },
+    },
+    grid: {
+      left: '10%',
+      right: '30%',
+      bottom: '20%',
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 90,
+        end: 100,
+      },
+      {
+        start: 90,
+        end: 100,
+      },
+    ],
+    series: [],
+  },
 });
 
 function fnChangShowType() {
@@ -309,11 +363,7 @@ function fnGetList() {
     })
     .then(result => {
       if (result) {
-        if (kpiChart.value == null) {
-          fnRanderChart();
-        } else {
-          fnRanderChartData();
-        }
+        fnRanderChartData();
       }
     });
 }
@@ -324,7 +374,7 @@ function fnRanderChart() {
   if (!container) return;
   kpiChart.value = markRaw(echarts.init(container, 'light'));
 
-  fnRanderChartData();
+  kpiChart.value.setOption(state.chartOption);
 
   // 创建 ResizeObserver 实例
   var observer = new ResizeObserver(entries => {
@@ -346,10 +396,8 @@ function fnRanderChartData() {
   const yDatas: Record<string, any>[] = [];
 
   const tableColumnsKeyArr: string[] = [];
-
-  const columnsLen = tableColumnsDnd.value.length;
-  for (let i = 0; i < columnsLen; i++) {
-    const columns = tableColumnsDnd.value[i];
+  const chartLegendSelected: Record<string, boolean> = {};
+  for (const columns of tableColumns.value) {
     if (
       columns.key === 'neName' ||
       columns.key === 'startIndex' ||
@@ -381,6 +429,7 @@ function fnRanderChartData() {
       data: [],
     });
     tableColumnsKeyArr.push(`${columns.key}`);
+    chartLegendSelected[`${columns.title}`] = false;
   }
 
   // 用降序就反转
@@ -400,60 +449,17 @@ function fnRanderChartData() {
     }
   }
   // console.log(queryParams.sortOrder, xDatas, yDatas);
-
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'axis',
-      position: function (pt: any) {
-        return [pt[0], '10%'];
-      },
+  // 图标签选择状态标记
+  state.chartLegendSelected = chartLegendSelected;
+  kpiChart.value.setOption({
+    legend: {
+      selected: chartLegendSelected,
     },
     xAxis: {
-      type: 'category',
-      boundaryGap: false,
       data: xDatas,
     },
-    yAxis: {
-      type: 'value',
-      boundaryGap: [0, '100%'],
-    },
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      top: 40,
-      right: 20,
-      itemWidth: 20,
-      itemGap: 25,
-      textStyle: {
-        color: '#646A73',
-      },
-      icon: 'circle',
-      selected: {
-        // 选中'系列1'
-        系列1: true,
-        // 不选中'系列2'
-        系列2: false,
-      },
-    },
-    grid: {
-      left: '10%',
-      right: '30%',
-      bottom: '20%',
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-        start: 90,
-        end: 100,
-      },
-      {
-        start: 90,
-        end: 100,
-      },
-    ],
     series: yDatas,
-  };
-  kpiChart.value.setOption(option);
+  });
 }
 
 onMounted(() => {
@@ -491,10 +497,13 @@ onMounted(() => {
         // 查询当前小时
         const nowDate: Date = new Date();
         nowDate.setMinutes(0, 0, 0);
-        queryRangePicker.value[0] = '2024-01-30 00:00:00'; // parseDateToStr(nowDate);
+        queryRangePicker.value[0] = parseDateToStr(nowDate);
+        // queryRangePicker.value[0] = '2024-01-30 00:00:00';
         nowDate.setMinutes(59, 59, 59);
         queryRangePicker.value[1] = parseDateToStr(nowDate);
         fnGetListTitle();
+        // 绘图
+        fnRanderChart();
       }
     } else {
       message.warning({