feat:添加漫游式引导

src/views/perfManage/kpiOverView/index.vue

@@ -6,13 +6,47 @@ import { LineChart, BarChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
 import useI18n from '@/hooks/useI18n';
-import { message } from 'ant-design-vue';
+import { message, TourProps } from 'ant-design-vue';
 import { 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 { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, DownOutlined, MoreOutlined } from '@ant-design/icons-vue';
+import { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, MoreOutlined } from '@ant-design/icons-vue';
+//配置漫游引导变量
+const open = ref<boolean>(false);
+
+const handleOpen = (val: boolean): void => {
+  open.value = val;
+};
+
+const ref1=ref<any>(null);
+const ref2=ref<any>(null);
+const ref3=ref<any>(null);
+const ref4=ref<any>(null);
+
+const steps: TourProps['steps']=[
+  {
+    title:'日期范围选择器',
+    description: '选择要查看数据的时间范围建议范围一个小时',
+    target: () => ref1.value && ref1.value.$el,
+  },
+  {
+    title:'选择指标按钮',
+    description: '在这里勾选想要查看的指标',
+    target: () => ref2.value && ref2.value.$el,
+  },
+  {
+    title:'切换图表类型',
+    description: '点击切换另一种图表查看数据概览',
+    target: () => ref3.value && ref3.value.$el,
+  },
+  {
+    title:'实时数据开关',
+    description: '打开开关观看实时数据',
+    target: () => ref4.value && ref4.value.$el,
+  },
+]
 
 //定义KPI接口
 interface KPIBase{
@@ -311,27 +345,17 @@ const updateChart = () => {
     },
     xAxis: {
       // 指定x轴类型为类目轴，适用于离散的类目数据
-      //type: 'category',
-      // boundaryGap 控制坐标轴两边留白
+      type: 'category',
+      //控制坐标轴两边留白
       // 当为折线图时(isLine为true)时不留白，柱状图时留白
       // 这样可以让折线图从原点开始，柱状图有合适的间距
-      //boundaryGap: isLine,
+      boundaryGap: isLine,
       // 设置x轴的数据
       // 将时间戳转换为格式化的时间字符串
       data:chartData.value.map(item=>
       dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
       ),
-      // 设置坐标轴刻度标签的样式
-      // axisLabel: {
-      //   // 格式化函数，这里直接返回原值
-      //   formatter: (value: string) => value,
-      //   // 刻度标签旋转角度，0表示不旋转
-      //   rotate: 0,
-      //   // 自动计算标签显示的间隔，防止标签重叠
-      //   interval: 'auto', // 自动计算显示间隔
-      //   // 刻度标签对齐方式，右对齐
-      //   align: 'right',
-      // },
+      //设置坐标轴刻度标签的样式
     },
     yAxis: {
       // y轴配置
@@ -375,6 +399,7 @@ const updateChart = () => {
 
 //钩子函数
 onMounted(async () => {
+  open.value=true;
   try {
     // 获取所有网元的指标
     await fetchSpecificKPI();
@@ -415,6 +440,7 @@ const originalSelectedKPIs = ref<string[]>([]);
 
 // 打开对话框的方法
 const showKPISelector = () => {
+
   // 保存当前的选择状态
   originalSelectedKPIs.value = [...selectedKPIs.value];
 
@@ -442,6 +468,7 @@ const handleModalCancel = () => {
 
 // 确认按钮的处理方法
 const handleModalOk = () => {
+
   // 获取主要指标列表
   const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
 
@@ -545,7 +572,7 @@ onUnmounted(() => {
     chart.dispose();
     chart = null;
   }
-  // 可选：在组件卸载时保存选择
+  // 可选:在组件卸载时保存选择
   saveSelectedKPIs();
 });
 
@@ -615,14 +642,15 @@ const secondaryKPIs = computed(() => {
     const primaryIds = TARGET_KPI_IDS[neType];
     // 从所有指标中筛选出当前网元其他指标
     groups[neType] = kpiColumns.value.filter(kpi => {
+      return kpi.neType === neType && !primaryIds.includes(kpi.kpiId);
       // 检查是否不在主要指标列表中
-      const isNotPrimary = !primaryIds.includes(kpi.kpiId);
-
-      // 检查是否属于当前网元类型
-      // 使用 getKPITitle API 返回的原始数据中的网元类型信息
-      const isCurrentNeType = kpi.neType === neType;
-
-      return isCurrentNeType && isNotPrimary;
+      // const isNotPrimary = !primaryIds.includes(kpi.kpiId);
+      //
+      // // 检查是否属于当前网元类型
+      // // 使用 getKPITitle API 返回的原始数据中的网元类型信息
+      // const isCurrentNeType = kpi.neType === neType;
+      //
+      // return isCurrentNeType && isNotPrimary;
     });
   });
   return groups;
@@ -645,6 +673,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   <div class="kpi-overview">
     <div class="controls">
       <a-range-picker
+        ref="ref1"
         v-model:value="dateRange"
         :show-time="{ format: 'HH:mm:ss' }"
         format="YYYY-MM-DD HH:mm:ss"
@@ -652,13 +681,13 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
         :disabled="isRealtime"
         @change="handleDateChange"
       />
-      <a-button @click="showKPISelector">
+      <a-button ref="ref2" @click="showKPISelector">
         <template #icon>
           <unordered-list-outlined />
         </template>
         {{ t('views.perfManage.kpiOverView.chooseMetrics') }}
       </a-button>
-      <a-button @click="toggleChartType">
+      <a-button ref="ref3" @click="toggleChartType">
         <template #icon>
           <bar-chart-outlined v-if="chartType === 'line'" />
           <line-chart-outlined v-else />
@@ -676,8 +705,13 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
             : t('views.dashboard.cdr.realTimeDataStart')
         "
       >
-        <a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
+        <a-switch ref="ref4" v-model:checked="isRealtime" @change="toggleRealtime" />
       </a-form-item>
+      <a-tour :open="open" :steps="steps" @close="handleOpen(false)">
+        <template #indicatorsRender="{ current, total }">
+          <span>{{ current + 1 }} / {{ total }}</span>
+        </template>
+      </a-tour>
     </div>
     <div id="chartContainer" class="chart-container"></div>
     <a-modal
@@ -688,7 +722,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
       width="800px"
       :bodyStyle="{ maxHeight: '600px', overflow: 'auto' }"
     >
-      <a-checkbox-group v-model:value="selectedKPIs">
+      <a-checkbox-group v-model:value="selectedKPIs" >
         <div class="kpi-checkbox-list">
           <a-card
             v-for="neType in ALL_NE_TYPES"
@@ -696,6 +730,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
             class="ne-type-card"
             :bordered="false"
           >
+            {{neType.toUpperCase()}}
             <template #title>
               <span class="card-title">{{ neType.toUpperCase() }}</span>
             </template>
@@ -722,7 +757,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
                     </div>
                   </div>
                 </template>
-                <a-button type="link" size="small" class="more-metrics-btn">
+                <a-button type="link" size="small" class="more-metrics-btn" ref="ref6">
                   <more-outlined />
                   <span class="secondary-count">({{ secondaryKPIs[neType].length }})</span>
                 </a-button>
@@ -758,7 +793,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
 }
 
 .chart-container {
-  height: calc(100vh - 160px);
+  height: calc(100vh - 210px);/*调整图表大小*/
   width: 100%;
 }
 /* 网元指标列表样式 */
@@ -874,5 +909,4 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 </style>