fix:修复其他指标列表无法打开，文本错乱的问题

src/views/perfManage/kpiOverView/index.vue

@@ -3,30 +3,17 @@ import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
 import * as echarts from 'echarts/core';
 import { LegendComponent } from 'echarts/components';
 import { LineChart, BarChart } from 'echarts/charts';
-import {
+import { GridComponent, TooltipComponent, TitleComponent, } from 'echarts/components';
-  GridComponent,
-  TooltipComponent,
-  TitleComponent,
-} from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
 import useI18n from '@/hooks/useI18n';
 import { message } from 'ant-design-vue';
-import {
+import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-  RESULT_CODE_ERROR,
-  RESULT_CODE_SUCCESS,
-} from '@/constants/result-constants';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { generateColorRGBA } from '@/utils/generate-utils';
-import {
+import { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, DownOutlined, MoreOutlined } from '@ant-design/icons-vue';
-  BarChartOutlined,
-  LineChartOutlined,
-  UnorderedListOutlined,
-  DownOutlined,
-  MoreOutlined,
-} from '@ant-design/icons-vue';
 
 // 在这里定义 ChartDataItem 接口
 interface ChartDataItem {
@@ -315,9 +302,9 @@ const updateChart = () => {
       data:
         chartData.value.length > 0
           ? chartData.value.map(item => {
-              // 将时间戳转换为包含时分秒的格式
+            // 将时间戳转换为包含时分秒的格式
-              return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
+            return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
-            })
+          })
           : [''],
       axisLabel: {
         formatter: (value: string) => {
@@ -325,7 +312,7 @@ const updateChart = () => {
           return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
         },
         rotate: 0,
-        interval: 'auto', // 自动计算显示间隔
+        interval: 'auto', // 自动计算显示<EFBFBD><EFBFBD>隔
         align: 'right',
       },
     },
@@ -337,7 +324,7 @@ const updateChart = () => {
       },
       // 添加自动计算的分割段数
       splitNumber: 5,
-      // 添加自动计算的最小/最大值围
+      // 添加自动计算的最小/最大值范围
       scale: true,
     },
     series: series, //配置数据
@@ -511,7 +498,7 @@ const fetchSpecificKPI = async () => {
       if (validSavedKPIs.length > 0) {
         selectedKPIs.value = validSavedKPIs;
       } else {
-        // 如果没有有效的保存选择，则默认选择<EFBFBD><EFBFBD>要指标
+        // 如果没有有效的保存选择，则默认选择其他指标
         selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
       }
     } else {
@@ -653,26 +640,24 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
         </template>
         {{
           chartType === 'line'
-            ? t('views.perfManage.kpiOverView.changeLine')
+            ? t('views.perfManage.kpiOverView.changeBar')
-            : t('views.perfManage.kpiOverView.changeBar')
+            : t('views.perfManage.kpiOverView.changeLine')
         }}
       </a-button>
       <a-form-item
         :label="
           isRealtime
-            ? t('views.dashboard.cdr.realTimeDataStart')
+            ? t('views.dashboard.cdr.realTimeDataStop')
-            : t('views.dashboard.cdr.realTimeDataStop')
+            : t('views.dashboard.cdr.realTimeDataStart')
         "
       >
         <a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
       </a-form-item>
     </div>
     <div id="chartContainer" class="chart-container"></div>
-
-    <!-- 修改指标选择对话框 -->
     <a-modal
       v-model:visible="isModalVisible"
-      title="选择要显示的指标"
+      :title="t('views.perfManage.kpiOverView.chooseShowMetrics')"
       @ok="handleModalOk"
       @cancel="handleModalCancel"
       width="800px"
@@ -690,15 +675,8 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
               <span class="card-title">{{ neType.toUpperCase() }}</span>
             </template>
             <template #extra>
-              <a-dropdown v-if="secondaryKPIs[neType]?.length" trigger="click">
+              <a-dropdown v-if="secondaryKPIs[neType]?.length">
-                <a-button type="link" size="small">
+                <template #overlay>
-                  <more-outlined />
-                  <down-outlined />
-                  <span class="secondary-count"
-                    >({{ secondaryKPIs[neType].length }})</span
-                  >
-                </a-button>
-                <template>
                   <div class="secondary-kpi-menu" @click.stop>
                     <div
                       v-for="kpi in secondaryKPIs[neType]"
@@ -709,13 +687,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
                       <a-checkbox
                         :value="kpi.kpiId"
                         :checked="tempSelectedKPIs.includes(kpi.kpiId)"
-                        @change="
+                        @change="(e:any) => handleSecondaryKPIChange(kpi.kpiId, e.target.checked)"
-                          (e:any) =>
-                            handleSecondaryKPIChange(
-                              kpi.kpiId,
-                              e.target.checked
-                            )
-                        "
                         @click.stop
                       >
                         {{ kpi.title }}
@@ -723,6 +695,11 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
                     </div>
                   </div>
                 </template>
+                <a-button type="link" size="small">
+                  <more-outlined />
+                  <down-outlined />
+                  <span class="secondary-count">({{ secondaryKPIs[neType].length }})</span>
+                </a-button>
               </a-dropdown>
             </template>
             <div class="ne-type-items">
@@ -744,7 +721,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
 </template>
 
 <style scoped>
-/* 基础布局样式 */
 .kpi-overview {
   padding: 20px;
 }
@@ -760,13 +736,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   height: calc(100vh - 160px);
   width: 100%;
 }
-
-/* 指标选择对话框样式 */
-.kpi-checkbox-list {
-  padding: 8px;
-  width: 100%;
-}
-
 /* 网元指标列表样式 */
 .ne-type-items {
   display: grid;
@@ -782,14 +751,13 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 /* 其他指标下拉菜单样式 */
 .secondary-kpi-menu {
   background: #fff;
   padding: 4px 0;
   border-radius: 2px;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08);
+  0 6px 16px 0 rgba(0, 0, 0, 0.08);
   max-height: 300px;
   overflow-y: auto;
   min-width: 200px;