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

fix:代码优化-方法封装-拖拽保存-大小自适应

Browse Source
This commit is contained in:
zhongzm
2024-10-14 18:52:47 +08:00
parent ba98b37306
commit bf8d7f2124
1 changed files with 121 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/views/perfManage/kpiKeyTarget/index.vue
View File

@@ -1,44 +1,43 @@
<script setup lang="ts">
import draggable from 'vuedraggable';
import * as echarts from 'echarts';
import { PageContainer } from 'antdv-pro-layout';
import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted } from 'vue';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted} from 'vue';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { listKPIData, getKPITitle } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n';
import { parseDateToStr } from '@/utils/date-utils';
import dayjs, { Dayjs } from 'dayjs';
import useNeInfoStore from '@/store/modules/neinfo';
import { message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { ColumnsType } from 'ant-design-vue/es/table';
import { generateColorRGBA } from '@/utils/generate-utils';
import { LineSeriesOption } from 'echarts/charts';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { Switch } from 'ant-design-vue';
const { t, currentLocale } = useI18n();
const { t, currentLocale } = useI18n();
const neInfoStore = useNeInfoStore();
//WebSocket连接
//const ws = new WS();
const ws = ref<WS | null>(null);
//实时数据开关
const handleRealTimeSwitch = (checked: any, event: Event) => {
console.log('Switch toggled:', checked);
fnRealTimeSwitch(!!checked);
};
//添加实时数据开关状态
const realTimeEnabled = ref(false);
//实时数据开关
const handleRealTimeSwitch = (checked: any) => {
fnRealTimeSwitch(!!checked);
};
// 网元数组
const networkElementTypes = ['udm', 'upf', 'amf', 'smf', 'ims','ausf'] as const;
// 定义 ChartType
type ChartType = typeof networkElementTypes[number];
// 定义图表类型
type ChartType = 'udm' | 'upf' | 'amf' | 'smf';
//构建响应式数组储存图表类型数据
const chartOrder = ref(['udm', 'upf', 'amf', 'smf']);
const chartOrder = ref([...networkElementTypes]);
// 定义表格状态类型
type TableStateType = {
@@ -49,78 +48,59 @@ type TableStateType = {
selectedRowKeys: (string | number)[];
};
// 创建可复用的状态
const createChartState = () => ({
chartDom: ref<HTMLElement | null>(null),
chart: ref<echarts.ECharts | null>(null),
tableColumns: ref<ColumnsType>([]),
tableState: reactive<TableStateType>({
loading: false,
size: 'small',
seached: true,
data: [],
selectedRowKeys: [],
}),
chartLegendSelected: {} as Record<string, boolean>,
chartDataXAxisData: [] as string[],
chartDataYSeriesData: [] as CustomSeriesOption[],
});
const createChartState = () => {
const chartDom = ref<HTMLElement | null>(null);
const chart = ref<echarts.ECharts | null>(null);
const observer = ref<ResizeObserver | null>(null);
return {
chartDom,
chart,
observer,
tableColumns: ref<ColumnsType>([]),
tableState: reactive<TableStateType>({
loading: false,
size: 'small',
seached: true,
data: [],
selectedRowKeys: [],
}),
chartLegendSelected: {} as Record<string, boolean>,
chartDataXAxisData: [] as string[],
chartDataYSeriesData: [] as CustomSeriesOption[],
};
};
// 为每种图表类型创建状态
const chartStates: Record<ChartType, ReturnType<typeof createChartState>> = {
udm: createChartState(),
upf: createChartState(),
amf: createChartState(),
smf: createChartState(),
};
const chartStates: Record<ChartType, ReturnType<typeof createChartState>> = Object.fromEntries(
networkElementTypes.map(type => [type, createChartState()])
) as Record<ChartType, ReturnType<typeof createChartState>>;
//日期选择器
interface RangePicker {
udm: [string, string];
upf: [string, string];
amf: [string, string];
smf: [string, string];
[key: string]: [string, string] | Record<string, [Dayjs, Dayjs]>;
placeholder: [string, string];
ranges: Record<string, [Dayjs, Dayjs]>;
}
// 创建日期选择器状态
const rangePicker = reactive<RangePicker>({
udm: [
dayjs('2024-09-20 00:00:00').valueOf().toString(),
dayjs('2024-09-20 23:59:59').valueOf().toString(),
],
upf: [
dayjs('2024-09-20 00:00:00').valueOf().toString(),
dayjs('2024-09-20 23:59:59').valueOf().toString(),
],
amf: [
dayjs('2024-09-20 00:00:00').valueOf().toString(),
dayjs('2024-09-20 23:59:59').valueOf().toString(),
],
smf: [
dayjs('2024-09-20 00:00:00').valueOf().toString(),
dayjs('2024-09-20 23:59:59').valueOf().toString(),
],
placeholder: [
t('views.monitor.monitor.startTime'),
t('views.monitor.monitor.endTime'),
] as [string, string],
...Object.fromEntries(networkElementTypes.map(type => [
type,
[
dayjs('2024-09-20 00:00:00').valueOf().toString(),//模拟数据日期为9月20日数据
dayjs('2024-09-20 23:59:59').valueOf().toString()
]
])),
placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
ranges: {
[t('views.monitor.monitor.yesterday')]: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day').endOf('day'),
],
[t('views.monitor.monitor.yesterday')]: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
[t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
[t('views.monitor.monitor.week')]: [
dayjs().startOf('week'),
dayjs().endOf('week'),
],
[t('views.monitor.monitor.month')]: [
dayjs().startOf('month'),
dayjs().endOf('month'),
],
},
[t('views.monitor.monitor.week')]: [dayjs().startOf('week'), dayjs().endOf('week')],
[t('views.monitor.monitor.month')]: [dayjs().startOf('month'), dayjs().endOf('month')],
} as Record<string, [Dayjs, Dayjs]>,
});
// 创建可复用的图表初始化函数
@@ -129,11 +109,12 @@ const initChart = (type: ChartType) => {
const state = chartStates[type];
const container = state.chartDom.value;
if (!container) return;
state.chart.value = markRaw(echarts.init(container, 'light'));
const option: echarts.EChartsOption = {
tooltip: {
trigger: 'axis',
position: function (pt: any) {
position: function(pt: any) {
return [pt[0], '10%'];
},
},
@@ -176,29 +157,45 @@ const initChart = (type: ChartType) => {
series: [],
};
state.chart.value.setOption(option);
// 创建 ResizeObserver 实例
state.observer.value = new ResizeObserver(() => {
if (state.chart.value) {
state.chart.value.resize();
}
});
// 开始观察图表容器
state.observer.value.observe(container);
});
};
//结束拖拽事件
const onDragEnd = () => {
nextTick(() => {
chartOrder.value.forEach(type => {
chartOrder.value.forEach((type) => {
const state = chartStates[type as ChartType];
if (state.chart.value) {
state.chart.value.dispose(); // 销毁旧的图表实例
state.chart.value.resize(); // 调整图表大小
// 重新设置图表选项，保留原有数据
state.chart.value.setOption({
xAxis: { data: state.chartDataXAxisData },
series: state.chartDataYSeriesData,
});
}
initChart(type as ChartType);
fetchData(type as ChartType); // 重新获取数据并渲染图表
});
});
};
// 创建可复用的数据获取函数
const fetchData = async (type: ChartType) => {
const state = chartStates[type];
const neId = '001';
state.tableState.loading = true;
try {
const [startTime, endTime] = rangePicker[type];
const dateRange = rangePicker[type] as [string, string];
const [startTime, endTime] = dateRange;
const res = await listKPIData({
neType: type.toUpperCase(),
neId,
@@ -209,8 +206,9 @@ const fetchData = async (type: ChartType) => {
interval: 5,
});
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
state.tableState.data = res.data;
nextTick(() => {
nextTick(()=> {
renderChart(type);
});
}
@@ -224,11 +222,11 @@ const fetchData = async (type: ChartType) => {
//建立实时数据连接
function fnRealTimeSwitch(bool: boolean) {
console.log('fnRealTimeSwitch called with:', bool);
realTimeEnabled.value = bool;
if (bool) {
if (!ws.value) {
console.log('Creating new WS instance');
if(!ws.value){
ws.value = new WS();
}
Object.values(chartStates).forEach(state => {
@@ -238,21 +236,15 @@ function fnRealTimeSwitch(bool: boolean) {
const options: OptionsType = {
url: '/ws',
params: {
subGroupID: Object.keys(chartStates)
.map(type => `10_${type.toUpperCase()}_001`)
.join(','),
subGroupID: networkElementTypes.map(type => `10_${type.toUpperCase()}_001`).join(','),
},
onmessage: wsMessage,
onerror: wsError,
onopen: () => {
console.log('WebSocket connection established');
},
};
console.log('Attempting to connect with options:', options);
ws.value.connect(options);
console.log('Connection attempt initiated');
} else if (ws.value) {
console.log('Closing WebSocket connection');
} else if(ws.value){
Object.values(chartStates).forEach(state => {
state.tableState.seached = true;
});
@@ -262,8 +254,8 @@ function fnRealTimeSwitch(bool: boolean) {
}
// 接收数据后错误回调
function wsError(ev: any) {
console.error('WebSocket error:', ev);
function wsError() {
message.error(t('common.websocketError'));
}
@@ -282,9 +274,9 @@ function wsMessage(res: Record<string, any>) {
}
// 处理四个图表的数据
(Object.keys(chartStates) as ChartType[]).forEach(type => {
networkElementTypes.forEach((type) => {
const state = chartStates[type];
const kpiEvent = data.data[type.toUpperCase()];
const kpiEvent:any = data.data[type.toUpperCase()];
if (kpiEvent) {
// 更新 X 轴数据
@@ -326,25 +318,22 @@ interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
}
// 创建可复用的图表渲染函数
const renderChart = (type: ChartType) => {
const state = chartStates[type];
if (state.chart.value == null || state.tableState.data.length <= 0) {
if (state.chart.value == null ) {
return;
}
// 重置数据
state.chartLegendSelected = {};
state.chartDataXAxisData = [];
state.chartDataYSeriesData = [];
// 处理数据
for (const columns of state.tableColumns.value) {
if (['neName', 'startIndex', 'timeGroup'].includes(columns.key as string))
continue;
if (['neName', 'startIndex', 'timeGroup'].includes(columns.key as string)) continue;
const color = generateColorRGBA();
state.chartDataYSeriesData.push({
name: columns.title as string,
customKey: columns.key as string,
//key: columns.key as string,
type: 'line',
symbol: 'none',
sampling: 'lttb',
@@ -358,8 +347,6 @@ const renderChart = (type: ChartType) => {
data: [],
} as CustomSeriesOption);
state.chartLegendSelected[columns.title as string] = true;
//});
//state.chartLegendSelected[columns.title as string] = true;
}
const orgData = [...state.tableState.data].reverse();
@@ -370,12 +357,14 @@ const renderChart = (type: ChartType) => {
y.data.push(+item[y.customKey as string]);
}
}
// 更新图表
state.chart.value.setOption(
{
legend: { selected: state.chartLegendSelected },
xAxis: { data: state.chartDataXAxisData },
xAxis: { data: state.chartDataXAxisData,
type: 'category',
boundaryGap: false,
},
series: state.chartDataYSeriesData,
dataZoom: [
{
@@ -393,12 +382,10 @@ const renderChart = (type: ChartType) => {
);
};
// 获取表头数据
const fetchKPITitle = async (type: ChartType) => {
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 {
const res = await getKPITitle(type.toUpperCase());
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
@@ -423,22 +410,26 @@ const fetchKPITitle = async (type: ChartType) => {
onMounted(async () => {
ws.value = new WS();
await neInfoStore.fnNelist();
for (const type of Object.keys(chartStates) as ChartType[]) {
for (const type of networkElementTypes) {
await fetchKPITitle(type);
initChart(type);
fetchData(type);
}
});
// 在组件卸载时销毁图表实例
onUnmounted(() => {
if (ws.value && ws.value.state() === WebSocket.OPEN) {
if(ws.value &&ws.value.state()===WebSocket.OPEN) {
ws.value.close();
}
Object.values(chartStates).forEach(state => {
Object.values(chartStates).forEach((state) => {
if (state.chart.value) {
state.chart.value.dispose();
}
if (state.observer.value) {
state.observer.value.disconnect();
}
});
});
</script>
@@ -451,9 +442,7 @@ onUnmounted(() => {
v-model:checked="realTimeEnabled"
@change="handleRealTimeSwitch as any"
/>
<span class="switch-label">{{
realTimeEnabled ? '实时数据已开启' : '实时数据已关闭'
}}</span>
<span class="switch-label">{{ realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop') }}</span>
</div>
</div>
<draggable
@@ -462,14 +451,12 @@ onUnmounted(() => {
item-key="type"
@end="onDragEnd"
class="row"
onscroll="false"
onscroll='false'
>
<template #item="{ element: type }">
<template #item="{element:type}">
<div class="col-lg-6 col-md=-6 col-xs-12">
<a-card
:bordered="false"
:body-style="{ marginBottom: '24px', padding: '24px' }"
>
<a-card :bordered="false" :body-style="{ marginBottom: '24px', padding: '24px'}">
<template #title>{{ type.toUpperCase() }}</template>
<template #extra>
<a-range-picker
@@ -485,14 +472,12 @@ onUnmounted(() => {
@change="() => fetchData(type)"
></a-range-picker>
</template>
<div class="chart" style="padding: 12px">
<div
:ref="el => { if (el) chartStates[type as ChartType].chartDom.value = el as HTMLElement }"
style="height: 400px; width: 100%"
></div>
<div class='chart' style="padding: 12px">
<div :ref="el => { if (el) chartStates[type as ChartType].chartDom.value = el as HTMLElement }" style="height:400px;width:100%"></div>
</div>
</a-card>
</div>
</template>
</draggable>
</PageContainer>
@@ -503,6 +488,7 @@ onUnmounted(() => {
width: 100%;
height: 450px;
}
.sortable-ghost {
opacity: 0.5;
background: #c8ebfb;
@@ -512,30 +498,19 @@ onUnmounted(() => {
opacity: 0.8;
background: #f4f4f4;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -12px;
margin-left: -12px;
margin: -12px;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
padding-right: 12px;
padding-left: 12px;
}
@media (max-width: 991px) {
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 575px) {
.col-xs-12 {
flex: 0 0 100%;
max-width: 100%;
}
padding: 12px;
}
.control-row {
display: flex;
justify-content: flex-start;