From 86833e7d6bbcef95c12a64319bb87ce217e82b8a Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 11 Oct 2024 18:48:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=B3=E9=94=AE=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E6=8A=A5=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiKeyTarget/index.vue | 560 ++++++++++++++++++++
 src/views/perfManage/perfSet/index.vue      |  16 -
 src/views/tool/test/index.vue               | 537 +------------------
 3 files changed, 566 insertions(+), 547 deletions(-)
 create mode 100644 src/views/perfManage/kpiKeyTarget/index.vue
 delete mode 100644 src/views/perfManage/perfSet/index.vue

diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue
new file mode 100644
index 00000000..1775bf62
--- /dev/null
+++ b/src/views/perfManage/kpiKeyTarget/index.vue
@@ -0,0 +1,560 @@
+<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 { 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 { 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();
+//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);
+
+// 定义图表类型
+type ChartType = 'udm' | 'upf' | 'amf' | 'smf';
+//构建响应式数组储存图表类型数据
+const chartOrder = ref(['udm', 'upf', 'amf', 'smf']);
+
+// 定义表格状态类型
+type TableStateType = {
+  loading: boolean;
+  size: SizeType;
+  seached: boolean;
+  data: Record<string, any>[];
+  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 chartStates: Record<ChartType, ReturnType<typeof createChartState>> = {
+  udm: createChartState(),
+  upf: createChartState(),
+  amf: createChartState(),
+  smf: createChartState(),
+};
+
+//日期选择器
+interface RangePicker {
+  udm: [string, string];
+  upf: [string, string];
+  amf: [string, string];
+  smf: [string, string];
+  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],
+  ranges: {
+    [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'),
+    ],
+  },
+});
+
+// 创建可复用的图表初始化函数
+const initChart = (type: ChartType) => {
+  nextTick(() => {
+    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) {
+          return [pt[0], '10%'];
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: [],
+      },
+      yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+      },
+      legend: {
+        type: 'scroll',
+        orient: 'horizontal',
+        top: -5,
+        itemWidth: 20,
+        textStyle: {
+          color: '#646A73',
+        },
+        icon: 'circle',
+        selected: {},
+      },
+      grid: {
+        left: '10%',
+        right: '10%',
+        bottom: '15%',
+      },
+      dataZoom: [
+        {
+          type: 'inside',
+          start: 0,
+          end: 100,
+        },
+        {
+          start: 0,
+          end: 100,
+        },
+      ],
+      series: [],
+    };
+    state.chart.value.setOption(option);
+  });
+};
+//结束拖拽事件
+const onDragEnd = () => {
+  nextTick(() => {
+    chartOrder.value.forEach(type => {
+      const state = chartStates[type as ChartType];
+      if (state.chart.value) {
+        state.chart.value.dispose(); // 销毁旧的图表实例
+      }
+      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 res = await listKPIData({
+      neType: type.toUpperCase(),
+      neId,
+      startTime,
+      endTime,
+      sortField: 'timeGroup',
+      sortOrder: 'desc',
+      interval: 5,
+    });
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      state.tableState.data = res.data;
+      nextTick(() => {
+        renderChart(type);
+      });
+    }
+  } catch (error) {
+    console.error(error);
+    message.error(t('common.getInfoFail'));
+  } finally {
+    state.tableState.loading = false;
+  }
+};
+
+//建立实时数据连接
+function fnRealTimeSwitch(bool: boolean) {
+  console.log('fnRealTimeSwitch called with:', bool);
+  realTimeEnabled.value = bool;
+  if (bool) {
+    if (!ws.value) {
+      console.log('Creating new WS instance');
+      ws.value = new WS();
+    }
+    Object.values(chartStates).forEach(state => {
+      state.tableState.seached = false;
+    });
+    // 建立连接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        subGroupID: Object.keys(chartStates)
+          .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');
+    Object.values(chartStates).forEach(state => {
+      state.tableState.seached = true;
+    });
+    ws.value.close();
+    ws.value = null;
+  }
+}
+
+// 接收数据后错误回调
+function wsError(ev: any) {
+  console.error('WebSocket error:', ev);
+  message.error(t('common.websocketError'));
+}
+
+// 接收数据后回调
+function wsMessage(res: Record<string, any>) {
+  //const res = JSON.parse(event.data);
+  const { code, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+
+  // 处理四个图表的数据
+  (Object.keys(chartStates) as ChartType[]).forEach(type => {
+    const state = chartStates[type];
+    const kpiEvent = data.data[type.toUpperCase()];
+
+    if (kpiEvent) {
+      // 更新 X 轴数据
+      if (kpiEvent.timeGroup) {
+        state.chartDataXAxisData.push(parseDateToStr(+kpiEvent.timeGroup));
+        if (state.chartDataXAxisData.length > 100) {
+          state.chartDataXAxisData.shift();
+        }
+      }
+
+      // 更新 Y 轴数据
+      state.chartDataYSeriesData.forEach(series => {
+        if (kpiEvent[series.customKey as string] !== undefined) {
+          series.data.push(+kpiEvent[series.customKey as string]);
+          if (series.data.length > 100) {
+            series.data.shift();
+          }
+        }
+      });
+
+      // 更新图表
+      if (state.chart.value) {
+        state.chart.value.setOption({
+          xAxis: { data: state.chartDataXAxisData },
+          series: state.chartDataYSeriesData,
+        });
+      }
+    }
+  });
+}
+
+type LineDataItem = {
+  value: number;
+  [key: string]: any;
+};
+interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
+  customKey?: string;
+  data: (number | LineDataItem)[];
+}
+// 创建可复用的图表渲染函数
+const renderChart = (type: ChartType) => {
+  const state = chartStates[type];
+  if (state.chart.value == null || state.tableState.data.length <= 0) {
+    return;
+  }
+
+  // 重置数据
+  state.chartLegendSelected = {};
+  state.chartDataXAxisData = [];
+  state.chartDataYSeriesData = [];
+
+  // 处理数据
+  for (const columns of state.tableColumns.value) {
+    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',
+      itemStyle: { color },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: color.replace(')', ',0.8)') },
+          { offset: 1, color: color.replace(')', ',0.3)') },
+        ]),
+      },
+      data: [],
+    } as CustomSeriesOption);
+    state.chartLegendSelected[columns.title as string] = true;
+    //});
+    //state.chartLegendSelected[columns.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]);
+    }
+  }
+
+  // 更新图表
+  state.chart.value.setOption(
+    {
+      legend: { selected: state.chartLegendSelected },
+      xAxis: { data: state.chartDataXAxisData },
+      series: state.chartDataYSeriesData,
+      dataZoom: [
+        {
+          type: 'inside',
+          start: 0,
+          end: 100,
+        },
+        {
+          start: 0,
+          end: 100,
+        },
+      ],
+    },
+    { replaceMerge: ['xAxis', 'series'] }
+  );
+};
+
+// 获取表头数据
+const fetchKPITitle = async (type: ChartType) => {
+  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)) {
+      chartStates[type].tableColumns.value = res.data.map(item => ({
+        title: item[`${language}Title`],
+        dataIndex: item.kpiId,
+        align: 'left',
+        key: item.kpiId,
+        resizable: true,
+        width: 100,
+        minWidth: 150,
+        maxWidth: 300,
+      }));
+    }
+  } catch (error) {
+    console.error(error);
+    message.warning(t('common.getInfoFail'));
+  }
+};
+
+// 初始化所有图表
+onMounted(async () => {
+  ws.value = new WS();
+  await neInfoStore.fnNelist();
+  for (const type of Object.keys(chartStates) as ChartType[]) {
+    await fetchKPITitle(type);
+    initChart(type);
+    fetchData(type);
+  }
+});
+
+// 在组件卸载时销毁图表实例
+onUnmounted(() => {
+  if (ws.value && ws.value.state() === WebSocket.OPEN) {
+    ws.value.close();
+  }
+  Object.values(chartStates).forEach(state => {
+    if (state.chart.value) {
+      state.chart.value.dispose();
+    }
+  });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <div class="control-row">
+      <div class="real-time-switch">
+        <Switch
+          v-model:checked="realTimeEnabled"
+          @change="handleRealTimeSwitch as any"
+        />
+        <span class="switch-label">{{
+          realTimeEnabled ? '实时数据已开启' : '实时数据已关闭'
+        }}</span>
+      </div>
+    </div>
+    <draggable
+      v-model="chartOrder"
+      :animation="200"
+      item-key="type"
+      @end="onDragEnd"
+      class="row"
+      onscroll="false"
+    >
+      <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>
+            <template #extra>
+              <a-range-picker
+                v-model:value="(rangePicker[type as keyof RangePicker]as[string,string])"
+                :allow-clear="false"
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                :placeholder="rangePicker.placeholder"
+                :ranges="rangePicker.ranges"
+                style="width: 100%"
+                @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>
+          </a-card>
+        </div>
+      </template>
+    </draggable>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 450px;
+}
+.sortable-ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.sortable-drag {
+  opacity: 0.8;
+  background: #f4f4f4;
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -12px;
+  margin-left: -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%;
+  }
+}
+.control-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 16px;
+  margin-bottom: 16px;
+  background-color: #f0f2f5;
+  border-radius: 4px;
+}
+
+.real-time-switch {
+  display: flex;
+  align-items: center;
+}
+
+.switch-label {
+  margin-left: 8px;
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/perfManage/perfSet/index.vue b/src/views/perfManage/perfSet/index.vue
deleted file mode 100644
index 4f2f7650..00000000
--- a/src/views/perfManage/perfSet/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-
-onMounted(() => {});
-</script>
-
-<template>
-  <PageContainer>
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <h1>Perf Set</h1>
-    </a-card>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped></style>
diff --git a/src/views/tool/test/index.vue b/src/views/tool/test/index.vue
index 05cbf61f..1a685595 100644
--- a/src/views/tool/test/index.vue
+++ b/src/views/tool/test/index.vue
@@ -1,541 +1,16 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable';
-
-import * as echarts from 'echarts';
+import { onMounted } from 'vue';
 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 { 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 { useRoute } from 'vue-router';
-import { ColumnsType } from 'ant-design-vue/es/table';
-import { generateColorRGBA } from '@/utils/generate-utils';
-import { SeriesOption } from 'echarts/types/dist/shared';
-import { LineSeriesOption } from 'echarts/charts';
-import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { Switch } from 'ant-design-vue';
 
-const { t, currentLocale } = useI18n();
-const route = useRoute();
-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);
-
-// 定义图表类型
-type ChartType = 'udm' | 'upf' | 'amf' | 'smf';
-//构建响应式数组储存图表类型数据
-const chartOrder = ref(['udm', 'upf', 'amf', 'smf']);
-
-// 定义表格状态类型
-type TableStateType = {
-  loading: boolean;
-  size: SizeType;
-  seached: boolean;
-  data: Record<string, any>[];
-  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 chartStates: Record<ChartType, ReturnType<typeof createChartState>> = {
-  udm: createChartState(),
-  upf: createChartState(),
-  amf: createChartState(),
-  smf: createChartState(),
-};
-
-//日期选择器
-interface RangePicker {
-  udm: [string, string];
-  upf: [string, string];
-  amf: [string, string];
-  smf: [string, string];
-  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],
-  ranges: {
-    [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')],
-  },
-});
-
-// 创建可复用的图表初始化函数
-const initChart = (type: ChartType) => {
-  nextTick(()=> {
-    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) {
-          return [pt[0], '10%'];
-        },
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: [],
-      },
-      yAxis: {
-        type: 'value',
-        boundaryGap: [0, '100%'],
-      },
-      legend: {
-        type: 'scroll',
-        orient: 'horizontal',
-        top: -5,
-        itemWidth: 20,
-        textStyle: {
-          color: '#646A73',
-        },
-        icon: 'circle',
-        selected: {},
-      },
-      grid: {
-        left: '10%',
-        right: '10%',
-        bottom: '15%',
-      },
-      dataZoom: [
-        {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
-          start: 0,
-          end: 100,
-        },
-      ],
-      series: [],
-    };
-    state.chart.value.setOption(option);
-  });
-};
-//结束拖拽事件
-const onDragEnd = () => {
-  nextTick(() => {
-    chartOrder.value.forEach((type) => {
-      const state = chartStates[type as ChartType];
-      if (state.chart.value) {
-        state.chart.value.dispose(); // 销毁旧的图表实例
-      }
-      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 res = await listKPIData({
-      neType: type.toUpperCase(),
-      neId,
-      startTime,
-      endTime,
-      sortField: 'timeGroup',
-      sortOrder: 'desc',
-      interval: 5,
-    });
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      state.tableState.data = res.data;
-      nextTick(()=> {
-        renderChart(type);
-      });
-    }
-  } catch (error) {
-    console.error(error);
-    message.error(t('common.getInfoFail'));
-  } finally {
-    state.tableState.loading = false;
-  }
-};
-
-//建立实时数据连接
-function fnRealTimeSwitch(bool: boolean) {
-  console.log('fnRealTimeSwitch called with:', bool);
-  realTimeEnabled.value = bool;
-  if (bool) {
-    if(!ws.value){
-      console.log('Creating new WS instance');
-      ws.value = new WS();
-    }
-    Object.values(chartStates).forEach(state => {
-      state.tableState.seached = false;
-    });
-    // 建立连接
-    const options: OptionsType = {
-      url: '/ws',
-      params: {
-        subGroupID: Object.keys(chartStates).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');
-    Object.values(chartStates).forEach(state => {
-      state.tableState.seached = true;
-    });
-    ws.value.close();
-    ws.value = null;
-  }
-}
-
-// 接收数据后错误回调
-function wsError(ev: any) {
-  console.error('WebSocket error:', ev);
-  message.error(t('common.websocketError'));
-}
-
-// 接收数据后回调
-function wsMessage(res: Record<string, any>) {
-  //const res = JSON.parse(event.data);
-  const { code, data } = res;
-  if (code === RESULT_CODE_ERROR) {
-    console.warn(res.msg);
-    return;
-  }
-
-  // 订阅组信息
-  if (!data?.groupId) {
-    return;
-  }
-
-  // 处理四个图表的数据
-  (Object.keys(chartStates)as ChartType[]).forEach((type) => {
-    const state = chartStates[type];
-    const kpiEvent = data.data[type.toUpperCase()];
-
-    if (kpiEvent) {
-      // 更新 X 轴数据
-      if (kpiEvent.timeGroup) {
-        state.chartDataXAxisData.push(parseDateToStr(+kpiEvent.timeGroup));
-        if (state.chartDataXAxisData.length > 100) {
-          state.chartDataXAxisData.shift();
-        }
-      }
-
-      // 更新 Y 轴数据
-      state.chartDataYSeriesData.forEach(series => {
-        if (kpiEvent[series.customKey as string] !== undefined) {
-          series.data.push(+kpiEvent[series.customKey as string]);
-          if (series.data.length > 100) {
-            series.data.shift();
-          }
-        }
-      });
-
-      // 更新图表
-      if (state.chart.value) {
-        state.chart.value.setOption({
-          xAxis: { data: state.chartDataXAxisData },
-          series: state.chartDataYSeriesData,
-        });
-      }
-    }
-  });
-}
-
-type LineDataItem = {
-  value: number;
-  [key: string]: any;
-};
-interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
-  customKey?: string;
-  data: (number | LineDataItem)[];
-}
-// 创建可复用的图表渲染函数
-const renderChart = (type: ChartType) => {
-  const state = chartStates[type];
-  if (state.chart.value == null || state.tableState.data.length <= 0) {
-    return;
-  }
-
-  // 重置数据
-  state.chartLegendSelected = {};
-  state.chartDataXAxisData = [];
-  state.chartDataYSeriesData = [];
-
-  // 处理数据
-  for (const columns of state.tableColumns.value) {
-    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',
-      itemStyle: { color },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: color.replace(')', ',0.8)') },
-          { offset: 1, color: color.replace(')', ',0.3)') },
-        ]),
-      },
-      data: [],
-    } as CustomSeriesOption);
-    state.chartLegendSelected[columns.title as string] = true;
-    //});
-    //state.chartLegendSelected[columns.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]);
-    }
-  }
-
-  // 更新图表
-  state.chart.value.setOption(
-    {
-      legend: { selected: state.chartLegendSelected },
-      xAxis: { data: state.chartDataXAxisData,
-      },
-      series: state.chartDataYSeriesData,
-      dataZoom: [
-        {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
-          start: 0,
-          end: 100,
-        },
-      ],
-    },
-    { replaceMerge: ['xAxis', 'series'] }
-  );
-};
-
-
-// 获取表头数据
-const fetchKPITitle = async (type: ChartType) => {
-  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)) {
-      chartStates[type].tableColumns.value = res.data.map(item => ({
-        title: item[`${language}Title`],
-        dataIndex: item.kpiId,
-        align: 'left',
-        key: item.kpiId,
-        resizable: true,
-        width: 100,
-        minWidth: 150,
-        maxWidth: 300,
-      }));
-    }
-  } catch (error) {
-    console.error(error);
-    message.warning(t('common.getInfoFail'));
-  }
-};
-
-// 初始化所有图表
-onMounted(async () => {
-  ws.value = new WS();
-  await neInfoStore.fnNelist();
-  for (const type of Object.keys(chartStates) as ChartType[]) {
-    await fetchKPITitle(type);
-    initChart(type);
-    fetchData(type);
-  }
-
-});
-
-// 在组件卸载时销毁图表实例
-onUnmounted(() => {
-  if(ws.value &&ws.value.state()===WebSocket.OPEN) {
-    ws.value.close();
-  }
-  Object.values(chartStates).forEach((state) => {
-    if (state.chart.value) {
-      state.chart.value.dispose();
-    }
-  });
-});
+onMounted(() => {});
 </script>
 
 <template>
   <PageContainer>
-    <div class="control-row">
-      <div class="real-time-switch">
-        <Switch
-          v-model:checked="realTimeEnabled"
-          @change="handleRealTimeSwitch as any"
-        />
-        <span class="switch-label">{{ realTimeEnabled ? '实时数据已开启' : '实时数据已关闭' }}</span>
-      </div>
-    </div>
-    <draggable
-      v-model="chartOrder"
-      :animation="200"
-      item-key="type"
-      @end="onDragEnd"
-      class="row"
-      onscroll='false'
-    >
-      <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>
-            <template #extra>
-              <a-range-picker
-                v-model:value="(rangePicker[type as keyof RangePicker]as[string,string])"
-                :allow-clear="false"
-                bordered
-                :show-time="{ format: 'HH:mm:ss' }"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                :placeholder="rangePicker.placeholder"
-                :ranges="rangePicker.ranges"
-                style="width: 100%"
-                @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>
-          </a-card>
-        </div>
-
-      </template>
-    </draggable>
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <h1>Test Page</h1>
+    </a-card>
   </PageContainer>
 </template>
 
-<style lang="less" scoped>
-.chart {
-  width: 100%;
-  height: 450px;
-}
-.sortable-ghost {
-  opacity: 0.5;
-  background: #c8ebfb;
-}
-
-.sortable-drag {
-  opacity: 0.8;
-  background: #f4f4f4;
-}
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -12px;
-  margin-left: -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%;
-  }
-}
-.control-row {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 16px;
-  margin-bottom: 16px;
-  background-color: #f0f2f5;
-  border-radius: 4px;
-}
-
-.real-time-switch {
-  display: flex;
-  align-items: center;
-}
-
-.switch-label {
-  margin-left: 8px;
-  font-size: 14px;
-  color: #333;
-  white-space: nowrap;
-}
-</style>
+<style lang="less" scoped></style>