diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue index 891ff313..332be093 100644 --- a/src/views/perfManage/kpiOverView/index.vue +++ b/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(false); + +const handleOpen = (val: boolean): void => { + open.value = val; +}; + +const ref1=ref(null); +const ref2=ref(null); +const ref3=ref(null); +const ref4=ref(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([]); // 打开对话框的方法 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) => {
{ :disabled="isRealtime" @change="handleDateChange" /> - + {{ t('views.perfManage.kpiOverView.chooseMetrics') }} - + - + ({{ secondaryKPIs[neType].length }}) @@ -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; } -