feat:添加漫游式引导
This commit is contained in:
zhongzm
@@ -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
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user