feat: 黄金指标项图表显示全部开关控制

src/views/perfManage/goldTarget/index.vue

@@ -161,6 +161,8 @@ type StateType = {
   /**网元类型 */
   neType: string[];
   /**图表标签选择 */
+  chartLegendSelectedFlag: boolean;
+  /**图表标签选择 */
   chartLegendSelected: Record<string, boolean>;
   /**图表配置数据 */
   chartOption: EChartsOption;
@@ -169,6 +171,7 @@ type StateType = {
 /**对象信息状态 */
 let state: StateType = reactive({
   neType: [],
+  chartLegendSelectedFlag: false,
   chartLegendSelected: {},
   chartOption: {
     tooltip: {
@@ -197,12 +200,7 @@ let state: StateType = reactive({
         color: '#646A73',
       },
       icon: 'circle',
-      selected: {
-        // 选中'系列1'
-        系列1: true,
-        // 不选中'系列2'
-        系列2: false,
-      },
+      selected: {},
     },
     grid: {
       left: '10%',
@@ -224,10 +222,6 @@ let state: StateType = reactive({
   },
 });
 
-function fnChangShowType() {
-  tableState.showTable = !tableState.showTable;
-}
-
 /**
  * 数据列表导出
  */
@@ -368,6 +362,11 @@ function fnGetList() {
     });
 }
 
+/**切换显示类型 图或表格 */
+function fnChangShowType() {
+  tableState.showTable = !tableState.showTable;
+}
+
 /**绘制图表 */
 function fnRanderChart() {
   const container: HTMLElement | undefined = kpiChartDom.value;
@@ -429,7 +428,7 @@ function fnRanderChartData() {
       data: [],
     });
     tableColumnsKeyArr.push(`${columns.key}`);
-    chartLegendSelected[`${columns.title}`] = false;
+    chartLegendSelected[`${columns.title}`] = state.chartLegendSelectedFlag;
   }
 
   // 用降序就反转
@@ -449,6 +448,7 @@ function fnRanderChartData() {
     }
   }
   // console.log(queryParams.sortOrder, xDatas, yDatas);
+
   // 图标签选择状态标记
   state.chartLegendSelected = chartLegendSelected;
   kpiChart.value.setOption({
@@ -462,6 +462,21 @@ function fnRanderChartData() {
   });
 }
 
+/**图表折线显示全部 */
+function fnLegendSelected(bool: any) {
+  const chartLegendSelected: Record<string, boolean> = {};
+  for (const key of Object.keys(state.chartLegendSelected)) {
+    chartLegendSelected[key] = bool;
+  }
+  // 图标签选择状态标记
+  state.chartLegendSelected = chartLegendSelected;
+  kpiChart.value.setOption({
+    legend: {
+      selected: chartLegendSelected,
+    },
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -662,6 +677,20 @@ onMounted(() => {
             </a-dropdown>
           </a-tooltip>
         </a-space>
+        <a-space :size="8" align="center" v-show="!tableState.showTable">
+          <a-tooltip>
+            <template #title>
+              {{ t('views.perfManage.goldTarget.showChartSelected') }}
+            </template>
+            <a-switch
+              :disabled="tableState.loading"
+              v-model:checked="state.chartLegendSelectedFlag"
+              :checked-children="t('common.switch.open')"
+              :un-checked-children="t('common.switch.shut')"
+              @change="fnLegendSelected"
+            />
+          </a-tooltip>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->