Merge branch 'lichang' of http://192.168.2.166:3180/OMC/ems_frontend_vue3 into lichang
This commit is contained in:
TsMask
@@ -30,6 +30,7 @@
|
||||
"dayjs": "^1.11.11",
|
||||
"echarts": "~5.5.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"grid-layout-plus": "^1.0.5",
|
||||
"intl-tel-input": "^23.8.1",
|
||||
"js-base64": "^3.7.7",
|
||||
"js-cookie": "^3.0.5",
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import draggable from 'vuedraggable';
|
||||
import { DragOutlined } from '@ant-design/icons-vue';
|
||||
import { GridLayout, GridItem } from 'grid-layout-plus'
|
||||
import * as echarts from 'echarts';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted} from 'vue';
|
||||
import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted, watch } 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';
|
||||
@@ -10,12 +11,11 @@ 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, Switch, Form } 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 neInfoStore = useNeInfoStore();
|
||||
@@ -34,10 +34,53 @@ const handleRealTimeSwitch = (checked: any) => {
|
||||
// 网元数组
|
||||
const networkElementTypes = ['udm', 'upf', 'amf', 'smf', 'ims','ausf'] as const;
|
||||
// 定义 ChartType
|
||||
type ChartType = typeof networkElementTypes[number];
|
||||
type ChartType = typeof networkElementTypes[number]; // 将 i 的类型改为 ChartType
|
||||
|
||||
// 添加类型定义
|
||||
interface LayoutItem {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
i: ChartType; // 将 i 的类型改为 ChartType
|
||||
}
|
||||
|
||||
type Layout = LayoutItem[];
|
||||
|
||||
//构建响应式数组储存图表类型数据
|
||||
const chartOrder = ref([...networkElementTypes]);
|
||||
const chartOrder = ref<Layout>(
|
||||
networkElementTypes.map((type, index) => ({
|
||||
x: index % 2 * 6, // 每行两个图表，宽度为6
|
||||
y: Math.floor(index / 2) * 4, // 每个图表占据 4 个单位高度
|
||||
w: 6, // 宽度为6个单位
|
||||
h: 4, // 高度为4个单位
|
||||
i: type, // 使用网元类型作为唯一标识符
|
||||
}))
|
||||
);
|
||||
|
||||
// 改变布局触发更新
|
||||
const handleLayoutUpdated = (newLayout: Layout) => {
|
||||
chartOrder.value = newLayout;
|
||||
nextTick(() => {
|
||||
newLayout.forEach((item) => {
|
||||
const state = chartStates[item.i];
|
||||
if (state.chart.value) {
|
||||
state.chart.value.resize();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 监听 chartOrder 的变化
|
||||
watch(chartOrder, () => {
|
||||
nextTick(() => {
|
||||
Object.values(chartStates).forEach(state => {
|
||||
if (state.chart.value) {
|
||||
state.chart.value.resize();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 定义表格状态类型
|
||||
type TableStateType = {
|
||||
@@ -79,8 +122,7 @@ const chartStates: Record<ChartType, ReturnType<typeof createChartState>> = Obje
|
||||
) as Record<ChartType, ReturnType<typeof createChartState>>;
|
||||
|
||||
//日期选择器
|
||||
interface RangePicker {
|
||||
[key: string]: [string, string] | Record<string, [Dayjs, Dayjs]>;
|
||||
interface RangePicker extends Record<ChartType, [string, string]> {
|
||||
placeholder: [string, string];
|
||||
ranges: Record<string, [Dayjs, Dayjs]>;
|
||||
}
|
||||
@@ -90,10 +132,10 @@ const rangePicker = reactive<RangePicker>({
|
||||
...Object.fromEntries(networkElementTypes.map(type => [
|
||||
type,
|
||||
[
|
||||
dayjs('2024-09-20 00:00:00').valueOf().toString(),//模拟数据日期为9月20日数据
|
||||
dayjs('2024-09-20 00:00:00').valueOf().toString(),//模拟数据的日期设为默认日期
|
||||
dayjs('2024-09-20 23:59:59').valueOf().toString()
|
||||
]
|
||||
])),
|
||||
])) as Record<ChartType, [string, string]>,
|
||||
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')],
|
||||
@@ -157,6 +199,7 @@ const initChart = (type: ChartType) => {
|
||||
series: [],
|
||||
};
|
||||
state.chart.value.setOption(option);
|
||||
state.chart.value.resize(); // 确保图表正确调整大小
|
||||
|
||||
// 创建 ResizeObserver 实例
|
||||
state.observer.value = new ResizeObserver(() => {
|
||||
@@ -173,11 +216,11 @@ const initChart = (type: ChartType) => {
|
||||
//结束拖拽事件
|
||||
const onDragEnd = () => {
|
||||
nextTick(() => {
|
||||
chartOrder.value.forEach((type) => {
|
||||
chartOrder.value.forEach((type:any) => {
|
||||
const state = chartStates[type as ChartType];
|
||||
if (state.chart.value) {
|
||||
state.chart.value.resize(); // 调整图表大小
|
||||
// 重新设置图表选项，保留原有数据
|
||||
// 重新设置图表选项，保留原有数
|
||||
state.chart.value.setOption({
|
||||
xAxis: { data: state.chartDataXAxisData },
|
||||
series: state.chartDataYSeriesData,
|
||||
@@ -188,9 +231,9 @@ const onDragEnd = () => {
|
||||
};
|
||||
|
||||
|
||||
// 创建可复用的数据获取函数
|
||||
// 可复用的数据获取函数
|
||||
const fetchData = async (type: ChartType) => {
|
||||
const state = chartStates[type];
|
||||
const state = chartStates[type]; // 直接使用 type
|
||||
const neId = '001';
|
||||
state.tableState.loading = true;
|
||||
try {
|
||||
@@ -206,7 +249,6 @@ const fetchData = async (type: ChartType) => {
|
||||
interval: 5,
|
||||
});
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
|
||||
state.tableState.data = res.data;
|
||||
nextTick(() => {
|
||||
renderChart(type);
|
||||
@@ -318,7 +360,6 @@ interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
|
||||
}
|
||||
// 创建可复用的图表渲染函数
|
||||
const renderChart = (type: ChartType) => {
|
||||
|
||||
const state = chartStates[type];
|
||||
if (state.chart.value == null) {
|
||||
return;
|
||||
@@ -327,13 +368,14 @@ const renderChart = (type: ChartType) => {
|
||||
state.chartLegendSelected = {};
|
||||
state.chartDataXAxisData = [];
|
||||
state.chartDataYSeriesData = [];
|
||||
|
||||
// 处理数据
|
||||
for (const columns of state.tableColumns.value) {
|
||||
if (['neName', 'startIndex', 'timeGroup'].includes(columns.key as string)) continue;
|
||||
for (const column of state.tableColumns.value) {
|
||||
if (['neName', 'startIndex', 'timeGroup'].includes(column.key as string)) continue;
|
||||
const color = generateColorRGBA();
|
||||
state.chartDataYSeriesData.push({
|
||||
name: columns.title as string,
|
||||
customKey: columns.key as string,
|
||||
name: column.title as string,
|
||||
customKey: column.key as string,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
sampling: 'lttb',
|
||||
@@ -346,22 +388,23 @@ const renderChart = (type: ChartType) => {
|
||||
},
|
||||
data: [],
|
||||
} as CustomSeriesOption);
|
||||
state.chartLegendSelected[columns.title as string] = true;
|
||||
state.chartLegendSelected[column.title as string] = true;
|
||||
}
|
||||
|
||||
const orgData = [...state.tableState.data].reverse();
|
||||
for (const item of orgData) {
|
||||
state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup));
|
||||
for (const y of state.chartDataYSeriesData) {
|
||||
//const key = (y.emphasis as any).customKey;
|
||||
y.data.push(+item[y.customKey as string]);
|
||||
for (const series of state.chartDataYSeriesData) {
|
||||
series.data.push(+item[series.customKey as string]);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新图表
|
||||
state.chart.value.setOption(
|
||||
{
|
||||
legend: { selected: state.chartLegendSelected },
|
||||
xAxis: { data: state.chartDataXAxisData,
|
||||
xAxis: {
|
||||
data: state.chartDataXAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
},
|
||||
@@ -413,7 +456,7 @@ onMounted(async () => {
|
||||
for (const type of networkElementTypes) {
|
||||
await fetchKPITitle(type);
|
||||
initChart(type);
|
||||
fetchData(type);
|
||||
fetchData(type); // 确保这行存在
|
||||
}
|
||||
|
||||
});
|
||||
@@ -437,30 +480,60 @@ onUnmounted(() => {
|
||||
<template>
|
||||
<PageContainer>
|
||||
<div class="control-row">
|
||||
<div class="real-time-switch">
|
||||
<Switch
|
||||
<a-form layout="inline">
|
||||
<a-form-item>
|
||||
<a-switch
|
||||
v-model:checked="realTimeEnabled"
|
||||
@change="handleRealTimeSwitch as any"
|
||||
@change="handleRealTimeSwitch"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span class="switch-label">{{ realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop') }}</span>
|
||||
</a-form-item>
|
||||
<!-- 这里可以添加更多的表单项 -->
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
v-model="chartOrder"
|
||||
:animation="200"
|
||||
item-key="type"
|
||||
@end="onDragEnd"
|
||||
class="row"
|
||||
onscroll='false'
|
||||
<GridLayout
|
||||
v-model:layout="chartOrder"
|
||||
:col-num="12"
|
||||
:row-height="100"
|
||||
:margin="[10, 10]"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:vertical-compact="true"
|
||||
:use-css-transforms="true"
|
||||
:responsive="true"
|
||||
:prevent-collision="false"
|
||||
@layout-updated="handleLayoutUpdated"
|
||||
class="charts-container"
|
||||
>
|
||||
<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'}">
|
||||
<template #title>{{ type.toUpperCase() }}</template>
|
||||
<GridItem
|
||||
v-for="item in chartOrder"
|
||||
:key="item.i"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
:min-w="4"
|
||||
:min-h="3"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:resizable-handles="['ne']"
|
||||
drag-allow-from=".drag-handle"
|
||||
drag-ignore-from=".no-drag"
|
||||
class="grid-item"
|
||||
>
|
||||
<div class="drag-handle">
|
||||
<DragOutlined />
|
||||
</div>
|
||||
<a-card :bordered="false" class="card-container">
|
||||
<template #title>
|
||||
<span class="no-drag">{{ item.i.toUpperCase() }}</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-range-picker
|
||||
v-model:value="(rangePicker[type as keyof RangePicker]as[string,string])"
|
||||
v-model:value="rangePicker[item.i]"
|
||||
:allow-clear="false"
|
||||
bordered
|
||||
:show-time="{ format: 'HH:mm:ss' }"
|
||||
@@ -469,67 +542,102 @@ onUnmounted(() => {
|
||||
:placeholder="rangePicker.placeholder"
|
||||
:ranges="rangePicker.ranges"
|
||||
style="width: 100%"
|
||||
@change="() => fetchData(type)"
|
||||
@change="() => fetchData(item.i)"
|
||||
></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'>
|
||||
<div :ref="el => { if (el) chartStates[item.i].chartDom.value = el as HTMLElement }"></div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</draggable>
|
||||
</GridItem>
|
||||
</GridLayout>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
.charts-container {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
opacity: 0.5;
|
||||
background: #c8ebfb;
|
||||
.grid-item {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sortable-drag {
|
||||
opacity: 0.8;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.row {
|
||||
.card-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -12px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
padding: 12px;
|
||||
.chart {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: #f0f2f5;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.real-time-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
z-index: 100;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
:deep {
|
||||
.ant-card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-form-item-label {
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user