OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

同步主线antd3

Browse Source
This commit is contained in:
lai
2024-11-07 15:17:56 +08:00
parent 612592ec2a
commit 44cd1d354a
10 changed files with 555 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
VITE_APP_CODE = "OMC"
# 应用版本
VITE_APP_VERSION = "2.241028"
VITE_APP_VERSION = "2.241102"
# 接口基础URL地址-不带/后缀
VITE_API_BASE_URL = "/omc-api"

2
.env.production
View File

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
VITE_APP_CODE = "OMC"
# 应用版本
VITE_APP_VERSION = "2.241028"
VITE_APP_VERSION = "2.241102"
# 接口基础URL地址-不带/后缀
VITE_API_BASE_URL = "/omc-api"

5
src/i18n/locales/en-US.ts
View File

@@ -567,6 +567,8 @@ export default {
rowInfo: "Info",
type: "Type",
duration: "Duration",
seizureTime: "Call Start Time",
releaseTime: "Hangup Time",
caller: "Caller",
called: "Called",
result: "Result",
@@ -1069,6 +1071,8 @@ export default {
expression:'Expression',
description:' Description',
kpiSet:' Statistical Settings',
sixHoursAgo:'Six hours ago',
threeHoursAgo:'Three hours ago.',
delCustomTip:'Confirm deletion of data item with record number {num}?',
delCustom:' Successfully delete record number {num} custom indicator',
addCustom:' Add custom indicator',
@@ -1095,6 +1099,7 @@ export default {
"layout3": "Layout 3"
},
kpiOverView:{
"kpiChartTitle":"Overview of NE metrics",
"changeLine":"Change to Line Charts",
"changeBar":"Change to Bar Charts",
"chooseShowMetrics":"Select the metric you want to display",

9
src/i18n/locales/zh-CN.ts
View File

@@ -567,6 +567,8 @@ export default {
rowInfo: "记录信息",
type: "记录类型",
duration: "通话时长",
seizureTime: "呼叫开始时间",
releaseTime: "挂断结束时间",
caller: "主叫",
called: "被叫",
result: "结果",
@@ -1069,6 +1071,8 @@ export default {
expression:'计算公式',
description:'描述',
kpiSet:'统计设置',
sixHoursAgo:'6小时前',
threeHoursAgo:'3小时前',
delCustomTip:'确认删除记录编号为 {num} 的数据项?',
delCustom:'成功删除记录编号为 {num} 自定义指标',
addCustom:'添加自定义指标',
@@ -1095,6 +1099,7 @@ export default {
"layout3": "布局3"
},
kpiOverView:{
"kpiChartTitle":"网元指标概览",
"changeLine":"切换为折线图",
"changeBar":"切换为柱状图",
"chooseShowMetrics":"选择需要显示的指标",
@@ -1341,8 +1346,8 @@ export default {
filter: "全局过滤",
startTime: '开始时间',
endTime: '结束时间',
today: '昨天',
yesterday: '今天',
today: '今天',
yesterday: '昨天',
week: '本周',
month: '本月',
avgLoad: '平均负载',

154
src/views/dashboard/imsCDR/index.vue
View File

@@ -167,6 +167,13 @@ let tableColumns: ColumnsType = [
return cdrJSON.calledParty;
},
},
{
title: t('views.dashboard.cdr.result'),
dataIndex: 'cdrJSON',
key: 'cause',
align: 'left',
width: 150,
},
{
title: t('views.dashboard.cdr.duration'),
dataIndex: 'cdrJSON',
@@ -181,20 +188,29 @@ let tableColumns: ColumnsType = [
},
},
{
title: t('views.dashboard.cdr.result'),
title: t('views.dashboard.cdr.seizureTime'),
dataIndex: 'cdrJSON',
key: 'cause',
align: 'left',
width: 150,
},
{
title: t('views.dashboard.cdr.time'),
dataIndex: 'cdrJSON',
align: 'center',
width: 150,
width: 200,
customRender(opt) {
const cdrJSON = opt.value;
return parseDateToStr(+cdrJSON.releaseTime * 1000);
if (typeof cdrJSON.seizureTime === 'number') {
return parseDateToStr(+cdrJSON.seizureTime * 1000);
}
return cdrJSON.seizureTime;
},
},
{
title: t('views.dashboard.cdr.releaseTime'),
dataIndex: 'cdrJSON',
align: 'left',
width: 200,
customRender(opt) {
const cdrJSON = opt.value;
if (typeof cdrJSON.releaseTime === 'number') {
return parseDateToStr(+cdrJSON.releaseTime * 1000);
}
return cdrJSON.releaseTime;
},
},
{
@@ -774,61 +790,73 @@ onBeforeUnmount(() => {
</template>
</template>
<template #expandedRowRender="{ record }">
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.type') }}: </span>
<DictTag
:options="dict.cdrCallType"
:value="record.cdrJSON.callType"
/>
</div>
<div>
<span>{{ t('views.dashboard.cdr.duration') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
{{ parseDuration(record.cdrJSON.callDuration) }}
</span>
<span v-else> - </span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.caller') }}: </span>
<span>{{ record.cdrJSON.callerParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.called') }}: </span>
<span>{{ record.cdrJSON.calledParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.result') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
<a-row :gutter="16">
<a-col :lg="5" :md="12" :xs="24">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.type') }}: </span>
<DictTag
:options="dict.cdrSipCode"
:value="record.cdrJSON.cause"
value-default="0"
:options="dict.cdrCallType"
:value="record.cdrJSON.callType"
/>
</span>
<span v-else>
{{ t('views.dashboard.cdr.resultOk') }}
</span>
</div>
</div>
</div>
<div>
<span>{{ t('views.dashboard.cdr.duration') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
{{ parseDuration(record.cdrJSON.callDuration) }}
</span>
<span v-else> - </span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.caller') }}: </span>
<span>{{ record.cdrJSON.callerParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.called') }}: </span>
<span>{{ record.cdrJSON.calledParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.result') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
<DictTag
:options="dict.cdrSipCode"
:value="record.cdrJSON.cause"
value-default="0"
/>
</span>
<span v-else>
{{ t('views.dashboard.cdr.resultOk') }}
</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.seizureTime') }}: </span>
<span>{{ record.cdrJSON.seizureTime }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.releaseTime') }}: </span>
<span>{{ record.cdrJSON.releaseTime }}</span>
</div>
</a-col>
</a-row>
</template>
</a-table>
</a-card>

3
src/views/neUser/pcf/index.vue
View File

@@ -780,9 +780,6 @@ onMounted(() => {
ok-text="TXT"
ok-type="default"
@confirm="fnExportList('txt')"
:show-cancel="false"
cancel-text="CSV"
@cancel="fnExportList('csv')"
>
<a-button type="dashed">
<template #icon><ExportOutlined /></template>

45
src/views/perfManage/kpiCReport/index.vue
View File

@@ -24,10 +24,9 @@ import {
onBeforeUnmount,
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import {
RESULT_CODE_ERROR,
@@ -43,6 +42,7 @@ import saveAs from 'file-saver';
import { generateColorRGBA } from '@/utils/generate-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { useRoute } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';
const neInfoStore = useNeInfoStore();
const route = useRoute();
const { t, currentLocale } = useI18n();
@@ -78,11 +78,24 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**时间选择 */
let ranges = ref<Record<string, [Dayjs, Dayjs]>>({
[t('views.perfManage.customTarget.sixHoursAgo')]: [
dayjs().subtract(6, 'hours'),
dayjs(),
],
[t('views.perfManage.customTarget.threeHoursAgo')]: [
dayjs().subtract(3, 'hours'),
dayjs(),
],
[t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
});
/**表格字段列 */
let tableColumns = ref<ColumnsType>([]);
let tableColumns = ref<any[]>([]);
/**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]);
let tableColumnsDnd = ref<any[]>([]);
/**表格分页器参数 */
let tablePagination = reactive({
@@ -261,12 +274,14 @@ function fnGetListTitle() {
tableColumns.value = [];
tableColumnsDnd.value = [];
fnRanderChartData();
return false;
return false;
}
tableColumns.value = [];
const columns: ColumnsType = [];
const columns: any[] = [];
for (const item of res.data) {
const kpiDisplay = item[`unit`]? item[`title`]+ `(${item['unit']})`:item[`title`];
const kpiDisplay = item[`unit`]
? item[`title`] + `(${item['unit']})`
: item[`title`];
const kpiValue = item[`kpiId`];
columns.push({
title: kpiDisplay,
@@ -627,9 +642,9 @@ onMounted(() => {
const now = new Date();
now.setMinutes(0, 0, 0);
queryRangePicker.value[0] = parseDateToStr(now.getTime());
queryRangePicker.value[0] = `${now.getTime()}`;
now.setMinutes(59, 59, 59);
queryRangePicker.value[1] = parseDateToStr(now.getTime());
queryRangePicker.value[1] = `${now.getTime()}`;
fnGetListTitle();
// 绘图
fnRanderChart();
@@ -659,10 +674,7 @@ onBeforeUnmount(() => {
<a-form :model="queryParams" name="queryParamsFrom" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
name="neType"
:label="t('views.ne.common.neType')"
>
<a-form-item name="neType" :label="t('views.ne.common.neType')">
<a-cascader
v-model:value="state.neType"
:options="neCascaderOptions"
@@ -682,7 +694,8 @@ onBeforeUnmount(() => {
:allow-clear="false"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
value-format="x"
:ranges="ranges"
style="width: 100%"
></a-range-picker>
</a-form-item>

453
src/views/perfManage/kpiOverView/index.vue
View File

@@ -3,22 +3,35 @@ 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 { GridComponent, TooltipComponent, TitleComponent } from 'echarts/components';
import {
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, Modal } from 'ant-design-vue';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { message } 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 } from '@ant-design/icons-vue';
import {
BarChartOutlined,
LineChartOutlined,
UnorderedListOutlined,
DownOutlined,
MoreOutlined,
} from '@ant-design/icons-vue';
// 在这里定义 ChartDataItem 接口
interface ChartDataItem {
date: string; // 将存储完整的时间字符串，包含时分秒
[kpiId: string]: string | number; // 动态指标值
date: string; // 将存储完整的时间字符串，包含时分秒
[kpiId: string]: string | number; // 动态指标
}
echarts.use([
@@ -28,7 +41,7 @@ echarts.use([
TooltipComponent,
TitleComponent,
CanvasRenderer,
LegendComponent
LegendComponent,
]);
// WebSocket连接
const ws = ref<WS | null>(null);
@@ -36,7 +49,7 @@ const ws = ref<WS | null>(null);
//日期范围响应式变量
const dateRange = ref<[string, string]>([
dayjs().startOf('day').valueOf().toString(),
dayjs().valueOf().toString()
dayjs().valueOf().toString(),
]);
//实时数据状态
const isRealtime = ref(false);
@@ -49,7 +62,7 @@ let chart: echarts.ECharts | null = null;
//observer 变量 监听图表容器大小
let observer: ResizeObserver | null = null;
//日期变化时触发数据变化时触发
//日期变化时更新图表数据
const handleDateChange = (
value: [string, string] | [Dayjs, Dayjs],
dateStrings: [string, string]
@@ -61,21 +74,19 @@ const handleDateChange = (
dateRange.value = [
dayjs(dateStrings[0]).valueOf().toString(),
dayjs(dateStrings[1]).valueOf().toString()
dayjs(dateStrings[1]).valueOf().toString(),
];
fetchChartData();
};
//切换实时数据方法
//切换实时数据
const toggleRealtime = () => {
fnRealTimeSwitch(isRealtime.value);
};
// 定义所有网元类型
const ALL_NE_TYPES = ['AMF', 'SMF', 'UPF', 'MME', 'IMS', 'SMSC'] as const;
type NeType = typeof ALL_NE_TYPES[number];
type NeType = (typeof ALL_NE_TYPES)[number];
// 定义要筛选的指标 ID，按网元类型组织
const TARGET_KPI_IDS: Record<NeType, string[]> = {
@@ -84,13 +95,13 @@ const TARGET_KPI_IDS: Record<NeType, string[]> = {
UPF: ['UPF.03', 'UPF.04', 'UPF.05', 'UPF.06'],
MME: ['MME.A.01', 'MME.A.02', 'MME.A.03'],
IMS: ['SCSCF.01', 'SCSCF.02', 'SCSCF.05', 'SCSCF.06'],
SMSC: ['SMSC.A.01', 'SMSC.A.02', 'SMSC.A.03']
SMSC: ['SMSC.A.01', 'SMSC.A.02', 'SMSC.A.03'],
};
// 实时数据开关函数
const fnRealTimeSwitch = (bool: boolean) => {
if (bool) {
if(!ws.value) {
if (!ws.value) {
ws.value = new WS();
}
chartData.value = [];
@@ -104,18 +115,18 @@ const fnRealTimeSwitch = (bool: boolean) => {
onerror: wsError,
};
ws.value.connect(options);
} else if(ws.value) {
ws.value.close();//断开链接
ws.value = null;//清空链接
} else if (ws.value) {
ws.value.close(); //断开链接
ws.value = null; //清空链接
}
}
};
// 接收数据后错误回调
const wsError = () => {
message.error(t('common.websocketError'));
}
};
// 收数据回调
// 接收数据后回调
const wsMessage = (res: Record<string, any>) => {
const { code, data } = res;
if (code === RESULT_CODE_ERROR) {
@@ -136,10 +147,10 @@ const wsMessage = (res: Record<string, any>) => {
const newData: ChartDataItem = {
date: kpiEvent.timeGroup
? kpiEvent.timeGroup.toString()
: Date.now().toString()
: Date.now().toString(),
};
// 只添加已选中的指标数据
// 只添加已选中的指标的数据
selectedKPIs.value.forEach(kpiId => {
if (kpiEvent[kpiId] !== undefined) {
newData[kpiId] = Number(kpiEvent[kpiId]);
@@ -152,7 +163,7 @@ const wsMessage = (res: Record<string, any>) => {
updateChartData(newData);
};
// 取图表数据
// 获取图表数据方法
const fetchChartData = async () => {
if (kpiColumns.value.length === 0) {
console.warn('No KPI columns available');
@@ -180,18 +191,16 @@ const fetchChartData = async () => {
sortField: 'timeGroup',
sortOrder: 'asc',
interval: 5,
kpiIds: TARGET_KPI_IDS[neType].join(',')
kpiIds: TARGET_KPI_IDS[neType].join(','),
};
const res = await listKPIData(params);
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
allData.push(...res.data);
}
}
// 按时间分组合并数据
// 按时间分组合数据
const groupedData = new Map<string, any>();
allData.forEach(item => {
const timeKey = item.timeGroup;
@@ -215,7 +224,6 @@ const fetchChartData = async () => {
return dataItem;
});
updateChart();
} catch (error) {
console.error('Failed to fetch chart data:', error);
@@ -223,10 +231,10 @@ const fetchChartData = async () => {
}
};
// 添加一个 Map 来存储每个指标的固定颜色
// 添加一个 Map 来存储每个指标的临时固定颜色
const kpiColors = new Map<string, string>();
// 加图表类型的响应式变量
// 定义图表类型的响应式变量
const chartType = ref<'line' | 'bar'>('line');
// 添加切换图表类型的方法
@@ -235,51 +243,55 @@ const toggleChartType = () => {
updateChart();
};
// 修改 updateChart 函数中的系列配置
// 更新图表
const updateChart = () => {
if (!chart || !kpiColumns.value.length) return;
const filteredColumns = kpiColumns.value.filter(col => selectedKPIs.value.includes(col.kpiId));
const legendData = filteredColumns.map(item => item.title);
if (!chart || !kpiColumns.value.length) return; //首先检查图表实例和指标是否存在
//过滤出已选择的指标列
const filteredColumns = kpiColumns.value.filter(col =>
selectedKPIs.value.includes(col.kpiId)
);
const legendData = filteredColumns.map(item => item.title); //创建图例数据数组，包含所有选中的指标的标题
//为每个选中的指标创建一个系列配置
const series = filteredColumns.map(item => {
const color = kpiColors.get(item.kpiId) || generateColorRGBA();
if (!kpiColors.has(item.kpiId)) {
kpiColors.set(item.kpiId, color);
kpiColors.set(item.kpiId, color); //保持指标颜色的临时一致性
}
return {
name: item.title,
type: chartType.value, // 使用当前选择的图表类型
data: chartData.value.length > 0
? chartData.value.map(dataItem => dataItem[item.kpiId] || 0)
: [0],
data:
chartData.value.length > 0
? chartData.value.map(dataItem => dataItem[item.kpiId] || 0)
: [0],
smooth: chartType.value === 'line', // 只在折线图时使用平滑
symbol: chartType.value === 'line' ? 'circle' : undefined, // 只在折线图时显示标记
symbolSize: chartType.value === 'line' ? 6 : undefined,
showSymbol: chartType.value === 'line',
itemStyle: { color }
itemStyle: { color },
};
});
//图表配置对象
const option = {
title: {
text: '网元指标概览',
left: 'center'
text: t('views.perfManage.kpiOverView.kpiChartTitle'),
left: 'center',
},
tooltip: {
trigger: 'axis',
position: function(pt: any) {
position: function (pt: any) {
return [pt[0], '10%'];
},
},
legend: {
//图例配置
data: legendData,
type: 'scroll',
orient: 'horizontal',
top: 25,
textStyle: {
fontSize: 12
fontSize: 12,
},
selected: Object.fromEntries(legendData.map(name => [name, true])),
show: true,
@@ -289,46 +301,50 @@ const updateChart = () => {
padding: [5, 10],
},
grid: {
//网格配置
left: '3%',
right: '4%',
bottom: '3%',
top: 100,
containLabel: true
containLabel: true,
},
xAxis: {
//x轴配置
type: 'category',
boundaryGap: false,
data: chartData.value.length > 0
? chartData.value.map(item => {
// 将时间戳转换为包含时分秒的格式
return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
})
: [''],
data:
chartData.value.length > 0
? chartData.value.map(item => {
// 将时间戳转换为包含时分秒的格式
return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
})
: [''],
axisLabel: {
formatter: (value: string) => {
// 自定义 x 轴标签的显示格式
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
},
rotate: 0,
interval: 'auto', // 自动计算显示间隔
align: 'right'
}
interval: 'auto', // 自动计算显示间隔
align: 'right',
},
},
yAxis: {
// y轴配置
type: 'value',
axisLabel: {
formatter: '{value}'
formatter: '{value}',
},
// 添加自动计算的分割段数
splitNumber: 5,
// 添加自动计算的最小/最大值围
scale: true
scale: true,
},
series: series
series: series, //配置数据
};
chart.setOption(option);
chart.resize();
chart.setOption(option); //使用新的配置更新图表
chart.resize(); //调整图表大小以适应容器
// 如果已经有 observer，先断开连接
if (observer) {
@@ -361,7 +377,6 @@ onMounted(async () => {
chart = echarts.init(container);
if (kpiColumns.value.length > 0) {
updateChart();
await fetchChartData();
} else {
@@ -378,101 +393,136 @@ onMounted(async () => {
}
});
// 定义指标列类型
// 定义指列类型
interface KPIColumn {
title: string;
dataIndex: string;
key: string;
kpiId: string;
neType: string; // 添加网元类型字段
}
// 存储指标列信
const kpiColumns = ref<KPIColumn[]>([]);
// 添加选中标的的状态
// 添加选中指标的的状态
const selectedKPIs = ref<string[]>([]);
// 添加对话框可见性状态
const isModalVisible = ref(false);
// 添加临时存储下拉框选择的数组
const tempSelectedKPIs = ref<string[]>([]);
// 打开对话框
// 添加一个变量保存打开对话框时的选择状态
const originalSelectedKPIs = ref<string[]>([]);
// 打开对话框的方法
const showKPISelector = () => {
// 保存当前的选择状态
originalSelectedKPIs.value = [...selectedKPIs.value];
// 初始化临时选择为当前已选择的其他指标
const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
tempSelectedKPIs.value = selectedKPIs.value.filter(
kpiId => !primaryKPIs.includes(kpiId)
);
isModalVisible.value = true;
};
// 添加保存选中指标到 localStorage 的方法
// 保存选中指标到 localStorage 的方法
const saveSelectedKPIs = () => {
localStorage.setItem('selectedKPIs', JSON.stringify(selectedKPIs.value));
};
// 窗口确认按钮
const handleModalOk = () => {
saveSelectedKPIs(); // 保存选择
updateChart();
// 取消按钮的处理方法
const handleModalCancel = () => {
// 恢复到打开对话框时的选择状态
selectedKPIs.value = [...originalSelectedKPIs.value];
// 清空临时选择
tempSelectedKPIs.value = [];
isModalVisible.value = false;
};
// 取消按钮
const handleModalCancel = () => {
// 确认按钮的处理方法
const handleModalOk = () => {
// 获取主要指标列表
const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
// 获取当前在主界面选中的主要指标
const selectedPrimaryKPIs = selectedKPIs.value.filter(kpiId =>
primaryKPIs.includes(kpiId)
);
// 合并选中的主要指标和临时选中的其他指标
selectedKPIs.value = Array.from(
new Set([
...selectedPrimaryKPIs, // 只包含已选中的主要指标
...tempSelectedKPIs.value, // 临时选中的其他指标
])
);
// 清空临时选择和原始选择
tempSelectedKPIs.value = [];
originalSelectedKPIs.value = [];
// 保存选择并更新图表
saveSelectedKPIs();
updateChart();
isModalVisible.value = false;
};
// 获取网元指标
const fetchSpecificKPI = async () => {
const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
const language =
currentLocale.value.split('_')[0] === 'zh'
? 'cn'
: currentLocale.value.split('_')[0];
try {
let allKPIs: KPIColumn[] = [];
// 使用 ALL_NE_TYPES 遍历网元类型
// 1. 获取所有网元的全部指标
for (const neType of ALL_NE_TYPES) {
const res = await getKPITitle(neType);
const res = await getKPITitle(neType.toUpperCase());
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
// 过滤当前网元类型的指标
const filteredKPIs = res.data.filter(item =>
TARGET_KPI_IDS[neType].some(targetId =>
item.kpiId === targetId || // 完全匹配
item.kpiId.startsWith(targetId) // 前缀匹配
)
);
// 转换并添加到总指标列表
const formattedKPIs = filteredKPIs.map(item => ({
// 转换指标格式
const formattedKPIs = res.data.map(item => ({
title: item[`${language}Title`],
dataIndex: item.kpiId,
key: item.kpiId,
kpiId: item.kpiId
kpiId: item.kpiId,
neType: neType, // 添加网元类型信息
}));
// 添加到所有指标数组
allKPIs = [...allKPIs, ...formattedKPIs];
}
}
// 更新指标列信息
// 2. 更新所有指标到 kpiColumns
kpiColumns.value = allKPIs;
// 尝试加载保存的选择
// 3. 尝试加载保存的选择
const savedKPIs = localStorage.getItem('selectedKPIs');
if (savedKPIs) {
// 确保保存的选择仍然存在于前指标中
const validSavedKPIs = JSON.parse(savedKPIs).filter(
(kpiId: string) => kpiColumns.value.some(col => col.kpiId === kpiId)
// 确保保存的选择仍然存在于当前指标中
const validSavedKPIs = JSON.parse(savedKPIs).filter((kpiId: string) =>
kpiColumns.value.some(col => col.kpiId === kpiId)
);
if (validSavedKPIs.length > 0) {
selectedKPIs.value = validSavedKPIs;
} else {
// 如果没有有效的保存选择，则默认全选
selectedKPIs.value = kpiColumns.value.map(col => col.kpiId);
// 如果没有有效的保存选择，则默认选择<E98089><E68BA9>要指标
selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
}
} else {
// 如果没有保存的选择，则默认全选
selectedKPIs.value = kpiColumns.value.map(col => col.kpiId);
// 如果没有保存的选择，则默认选择重要指标
selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
}
if (kpiColumns.value.length === 0) {
console.warn('No matching KPIs found');
console.warn('No KPIs found');
} else {
console.log(`Found ${kpiColumns.value.length} total KPIs:`,
kpiColumns.value.map(kpi => kpi.kpiId));
console.log(`Found ${kpiColumns.value.length} total KPIs`);
}
return kpiColumns.value;
@@ -483,9 +533,9 @@ const fetchSpecificKPI = async () => {
}
};
// 确保只保留一个 onUnmounted 钩子
// onUnmounted 钩子
onUnmounted(() => {
if(ws.value && ws.value.state() === WebSocket.OPEN) {
if (ws.value && ws.value.state() === WebSocket.OPEN) {
ws.value.close();
}
if (observer) {
@@ -502,7 +552,7 @@ onUnmounted(() => {
const { t, currentLocale } = useI18n();
// 修改 updateChartData 方法，只更新数据而不重新渲染整个图表
// 更新图表数据方法
const updateChartData = (newData: ChartDataItem) => {
chartData.value.push(newData);
if (chartData.value.length > 100) {
@@ -514,17 +564,17 @@ const updateChartData = (newData: ChartDataItem) => {
xAxis: {
data: chartData.value.map(item =>
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
)
),
},
series: selectedKPIs.value.map(kpiId => ({
type: chartType.value, // 使用当前选择的图表类型
data: chartData.value.map(item => item[kpiId] || 0)
}))
data: chartData.value.map(item => item[kpiId] || 0),
})),
});
}
};
// 修改 groupedKPIs 计算属性，使用 TARGET_KPI_IDS 来分组
// groupedKPIs 计算属性，使用 TARGET_KPI_IDS 来分组过滤
const groupedKPIs = computed(() => {
const groups: Record<string, KPIColumn[]> = {};
@@ -532,15 +582,52 @@ const groupedKPIs = computed(() => {
// 使用 TARGET_KPI_IDS 中定义的指标 ID 来过滤
const targetIds = TARGET_KPI_IDS[neType];
groups[neType] = kpiColumns.value.filter(kpi =>
targetIds.some(targetId =>
kpi.kpiId === targetId || // 完全匹配
kpi.kpiId.startsWith(targetId) // 前缀匹配
)
targetIds.includes(kpi.kpiId)
);
});
return groups;
});
// 计算其他指标
const secondaryKPIs = computed(() => {
const groups: Record<string, KPIColumn[]> = {};
if (kpiColumns.value.length === 0) {
console.warn('No KPI columns available');
return groups;
}
ALL_NE_TYPES.forEach(neType => {
// 获取当前网元类型的主要指标 ID
const primaryIds = TARGET_KPI_IDS[neType];
// 从所有指标中筛选出当前网元其他指标
groups[neType] = kpiColumns.value.filter(kpi => {
// 检查是否不在主要指标列表中
const isNotPrimary = !primaryIds.includes(kpi.kpiId);
// 检查是否属于当前网元类型
// 使用 getKPITitle API 返回的原始数据中的网元类型信息
const isCurrentNeType = kpi.neType === neType;
return isCurrentNeType && isNotPrimary;
});
});
return groups;
});
// 添加处理其他指标选择变化的方法
const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
if (checked) {
// 如果选中，将指标 ID 添加到临时列表
if (!tempSelectedKPIs.value.includes(kpiId)) {
tempSelectedKPIs.value = [...tempSelectedKPIs.value, kpiId];
}
} else {
// 如果取消选中，从临时列表中移除指标 ID
tempSelectedKPIs.value = tempSelectedKPIs.value.filter(id => id !== kpiId);
}
};
</script>
<template>
<div class="kpi-overview">
@@ -557,20 +644,27 @@ const groupedKPIs = computed(() => {
<template #icon>
<unordered-list-outlined />
</template>
{{t('views.perfManage.kpiOverView.chooseMetrics')}}
{{ t('views.perfManage.kpiOverView.chooseMetrics') }}
</a-button>
<a-button @click="toggleChartType">
<template #icon>
<bar-chart-outlined v-if="chartType === 'line'" />
<line-chart-outlined v-else />
</template>
{{ chartType === 'line' ? t('views.perfManage.kpiOverView.changeLine') : t('views.perfManage.kpiOverView.changeBar') }}
{{
chartType === 'line'
? t('views.perfManage.kpiOverView.changeLine')
: t('views.perfManage.kpiOverView.changeBar')
}}
</a-button>
<a-form-item :label="isRealtime ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop')">
<a-switch
v-model:checked="isRealtime"
@change="toggleRealtime"
/>
<a-form-item
:label="
isRealtime
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
"
>
<a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
</a-form-item>
</div>
<div id="chartContainer" class="chart-container"></div>
@@ -578,7 +672,7 @@ const groupedKPIs = computed(() => {
<!-- 修改指标选择对话框 -->
<a-modal
v-model:visible="isModalVisible"
:title="t('views.perfManage.kpiOverView.chooseShowMetrics')"
title="选择要显示的指标"
@ok="handleModalOk"
@cancel="handleModalCancel"
width="800px"
@@ -586,8 +680,51 @@ const groupedKPIs = computed(() => {
>
<a-checkbox-group v-model:value="selectedKPIs">
<div class="kpi-checkbox-list">
<div v-for="neType in ALL_NE_TYPES" :key="neType" class="ne-type-group">
<div class="ne-type-title">{{ neType.toUpperCase() }}</div>
<a-card
v-for="neType in ALL_NE_TYPES"
:key="neType"
class="ne-type-card"
:bordered="false"
>
<template #title>
<span class="card-title">{{ neType.toUpperCase() }}</span>
</template>
<template #extra>
<a-dropdown v-if="secondaryKPIs[neType]?.length" trigger="click">
<a-button type="link" size="small">
<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]"
:key="kpi.kpiId"
class="secondary-kpi-item"
@click.stop
>
<a-checkbox
:value="kpi.kpiId"
:checked="tempSelectedKPIs.includes(kpi.kpiId)"
@change="
(e:any) =>
handleSecondaryKPIChange(
kpi.kpiId,
e.target.checked
)
"
@click.stop
>
{{ kpi.title }}
</a-checkbox>
</div>
</div>
</template>
</a-dropdown>
</template>
<div class="ne-type-items">
<div
v-for="kpi in groupedKPIs[neType]"
@@ -599,7 +736,7 @@ const groupedKPIs = computed(() => {
</a-checkbox>
</div>
</div>
</div>
</a-card>
</div>
</a-checkbox-group>
</a-modal>
@@ -607,11 +744,11 @@ const groupedKPIs = computed(() => {
</template>
<style scoped>
/* 基础布局样式 */
.kpi-overview {
padding: 20px;
}
/* 控制区域样式 */
.controls {
display: flex;
gap: 16px;
@@ -619,7 +756,6 @@ const groupedKPIs = computed(() => {
align-items: center;
}
/* 图表容器样式 */
.chart-container {
height: calc(100vh - 160px);
width: 100%;
@@ -631,24 +767,8 @@ const groupedKPIs = computed(() => {
width: 100%;
}
/* 网元分组样式 */
.ne-type-group {
margin-bottom: 24px;
border: 1px solid #f0f0f0;
border-radius: 4px;
width: 100%;
background: #fff;
}
.ne-type-title {
padding: 12px 16px;
font-weight: bold;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
/* 网元指标列表样式 */
.ne-type-items {
padding: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
@@ -663,29 +783,25 @@ const groupedKPIs = computed(() => {
white-space: nowrap;
}
/* 深度选择器样式 */
:deep(.ant-modal-body) {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
&:hover {
background: #999;
}
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
/* 其他指标下拉菜单样式 */
.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);
max-height: 300px;
overflow-y: auto;
min-width: 200px;
}
/* 组件高度统一样式 */
.secondary-kpi-item {
padding: 8px 12px;
cursor: pointer;
user-select: none;
}
/* 组件统一样式 */
:deep(.ant-form-item),
:deep(.ant-picker),
:deep(.ant-btn) {
@@ -698,15 +814,16 @@ const groupedKPIs = computed(() => {
align-items: center;
}
:deep(.ant-form-item-label) {
padding-right: 8px;
line-height: 32px;
}
:deep(.ant-checkbox-wrapper) {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 添加次要指标数量的样式 */
.secondary-count {
margin-left: 4px;
font-size: 12px;
}
</style>

63
src/views/system/setting/components/change-home-index.vue
View File

@@ -5,6 +5,7 @@ import useI18n from '@/hooks/useI18n';
import { listMenu } from '@/api/system/menu';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getConfigKey, changeValue } from '@/api/system/config';
import { parseDataToTree } from '@/utils/parse-tree-utils';
const { t } = useI18n();
type StateType = {
@@ -59,14 +60,21 @@ onMounted(() => {
listMenu(toRaw({ status: 1 })).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
// 过滤旧前端菜单以及不是菜单类型以及路径为空
res.data = res.data
.filter(i => i.perms !== 'page' && i.menuType === 'M' && i.component)
.map((item: any) => {
state.options.push({
label: item.menuName,
value: item.component,
});
});
res.data = res.data.filter(i => i.perms !== 'page' && i.menuType !== 'B');
state.options = parseDataToTree(res.data, 'menuId');
const setDisabledAndComponent = (item: any) => {
if (!item.component) {
item.disabled = true;
item.component = 'Null' + item.menuId;
}
};
state.options.forEach((item: any) => {
setDisabledAndComponent(item); // 处理父菜单
if (item.children && Array.isArray(item.children)) {
item.children.forEach(setDisabledAndComponent); // 处理子菜单
}
});
}
});
@@ -84,13 +92,22 @@ onMounted(() => {
<a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
<template v-if="state.edite">
<a-form-item :label="t('views.system.setting.home')">
<a-select
ref="select"
<a-tree-select
v-model:value="state.default"
show-search
style="width: 240px"
:disabled="false"
:options="state.options"
></a-select>
:tree-data="state.options"
:field-names="{
children: 'children',
label: 'menuName',
value: 'component',
}"
tree-default-expand-all
tree-node-label-prop="menuName"
tree-node-filter-prop="menuName"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:placeholder="t('common.selectPlease')"
></a-tree-select>
</a-form-item>
<a-button type="primary" @click="fnSave">
@@ -102,13 +119,23 @@ onMounted(() => {
</template>
<template v-else>
<a-form-item :label="t('views.system.setting.home')">
<a-select
ref="select"
<a-tree-select
v-model:value="state.default"
style="width: 240px"
:disabled="true"
:options="state.options"
></a-select>
show-search
style="width: 240px"
:tree-data="state.options"
:field-names="{
children: 'children',
label: 'menuName',
value: 'component',
}"
tree-default-expand-all
tree-node-label-prop="menuName"
tree-node-filter-prop="menuName"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:placeholder="t('common.selectPlease')"
></a-tree-select>
</a-form-item>
<a-button type="dashed" @click="fnEdit(true)">

154
src/views/tenant/imsCDR/index.vue
View File

@@ -149,6 +149,13 @@ let tableColumns: ColumnsType = [
return cdrJSON.calledParty;
},
},
{
title: t('views.dashboard.cdr.result'),
dataIndex: 'cdrJSON',
key: 'cause',
align: 'left',
width: 150,
},
{
title: t('views.dashboard.cdr.caller'),
dataIndex: 'cdrJSON',
@@ -174,20 +181,29 @@ let tableColumns: ColumnsType = [
},
},
{
title: t('views.dashboard.cdr.result'),
title: t('views.dashboard.cdr.seizureTime'),
dataIndex: 'cdrJSON',
key: 'cause',
align: 'left',
width: 150,
},
{
title: t('views.dashboard.cdr.time'),
dataIndex: 'cdrJSON',
align: 'center',
width: 150,
width: 200,
customRender(opt) {
const cdrJSON = opt.value;
return parseDateToStr(+cdrJSON.releaseTime * 1000);
if (typeof cdrJSON.seizureTime === 'number') {
return parseDateToStr(+cdrJSON.seizureTime * 1000);
}
return cdrJSON.seizureTime;
},
},
{
title: t('views.dashboard.cdr.releaseTime'),
dataIndex: 'cdrJSON',
align: 'left',
width: 200,
customRender(opt) {
const cdrJSON = opt.value;
if (typeof cdrJSON.releaseTime === 'number') {
return parseDateToStr(+cdrJSON.releaseTime * 1000);
}
return cdrJSON.releaseTime;
},
},
];
@@ -656,61 +672,73 @@ onBeforeUnmount(() => {
</template>
</template>
<template #expandedRowRender="{ record }">
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.type') }}: </span>
<DictTag
:options="dict.cdrCallType"
:value="record.cdrJSON.callType"
/>
</div>
<div>
<span>{{ t('views.dashboard.cdr.duration') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
{{ parseDuration(record.cdrJSON.callDuration) }}
</span>
<span v-else> - </span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.caller') }}: </span>
<span>{{ record.cdrJSON.callerParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.called') }}: </span>
<span>{{ record.cdrJSON.calledParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.result') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
<a-row :gutter="16">
<a-col :lg="5" :md="12" :xs="24">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.type') }}: </span>
<DictTag
:options="dict.cdrSipCode"
:value="record.cdrJSON.cause"
value-default="0"
:options="dict.cdrCallType"
:value="record.cdrJSON.callType"
/>
</span>
<span v-else>
{{ t('views.dashboard.overview.userActivity.resultOK') }}
</span>
</div>
</div>
</div>
<div>
<span>{{ t('views.dashboard.cdr.duration') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
{{ parseDuration(record.cdrJSON.callDuration) }}
</span>
<span v-else> - </span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.caller') }}: </span>
<span>{{ record.cdrJSON.callerParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.called') }}: </span>
<span>{{ record.cdrJSON.calledParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.result') }}: </span>
<span v-if="record.cdrJSON.callType !== 'sms'">
<DictTag
:options="dict.cdrSipCode"
:value="record.cdrJSON.cause"
value-default="0"
/>
</span>
<span v-else>
{{ t('views.dashboard.cdr.resultOk') }}
</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.seizureTime') }}: </span>
<span>{{ record.cdrJSON.seizureTime }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.releaseTime') }}: </span>
<span>{{ record.cdrJSON.releaseTime }}</span>
</div>
</a-col>
</a-row>
</template>
</a-table>
</a-card>