ref: 重构黄金指标数据列表，图表切换显示优化

src/api/perfManage/goldTarget.ts

@@ -82,19 +82,11 @@ export async function listgoldData(query: Record<string, any>) {
  * @param query 查询参数
  * @returns object
  */
-export async function goldData(query: Record<string, any>) {
+export async function listKPIData(query: Record<string, any>) {
   const result = await request({
     url: `/neData/kpi/data`,
     method: 'get',
-    params: {
-      neType: query.neType[0],
-      neId: query.neType[1],
-      startTime: query.beginTime,
-      endTime: query.endTime,
-      interval: query.particle,
-      sortField: query.sortField,
-      sortOrder: query.sortOrder,
-    },
+    params: query,
     timeout: 60_000,
   });
 
@@ -102,14 +94,14 @@ export async function goldData(query: Record<string, any>) {
 }
 
 /**
- * 查询网元可用黄金指标
+ * 查询黄金指标数据kpi.id转换title
  * @param neType 网元类型
  * @returns object
  */
-export async function getGoldTitleByNE(neType: string) {
+export async function getKPITitle(neType: string) {
   // 发起请求
   const result = await request({
-    url: `/ne/kpi/title`,
+    url: `/neData/kpi/title`,
     method: 'get',
     params: { neType },
   });

src/components/ChartLine/index.vue

@@ -252,7 +252,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  newChart.dispose();
+  newChart?.dispose();
 });
 </script>
 

src/i18n/locales/en-US.ts

@@ -708,14 +708,14 @@ export default {
         value:'Value',
         startTime:'Start Time',
         endTime:'End Time',
-        particle: 'Granularity',
+        interval: 'Granularity',
         timeFrame: 'Time Range',
         nullTip:'There are no statistical data within this time range',
-        kpiTitle:'KPI Statistics Chart',
-        allData:'Complete Data',
-        makeLine:'Statistical Chart',
+        kpiChartTitle:'KPI Statistics Chart',
+        kpiTableTitle:'KPI Statistics Data',
         time:'Time',
         exportSure:'Confirm whether to export all statistical data',
+        exportEmpty: "Export data is empty",
       }
     },
     traceManage: {

src/i18n/locales/zh-CN.ts

@@ -708,14 +708,14 @@ export default {
         value:'值',
         startTime:'开始时间',
         endTime:'结束时间',
-        particle:'颗粒度',
+        interval:'颗粒度',
         timeFrame:'时间范围',
         nullTip:'此时间范围内没有统计数据',
-        kpiTitle:'KPI统计图表',
-        allData:'完整统计数据',
-        makeLine:'统计图',
+        kpiChartTitle:'KPI统计图表',
+        kpiTableTitle:'KPI统计数据',
         time:'时间',
         exportSure:'确认是否导出全部统计数据',
+        exportEmpty: "导出数据为空",
       }
     },
     traceManage: {

src/views/perfManage/goldTarget/index.vue

@@ -1,35 +1,99 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
+import * as echarts from 'echarts/core';
+import {
+  TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
+  LegendComponent,
+  LegendComponentOption,
+  DataZoomComponent,
+  DataZoomComponentOption,
+} from 'echarts/components';
+import { LineChart, LineSeriesOption } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+import { reactive, ref, onMounted, toRaw, markRaw, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Form, Modal } from 'ant-design-vue/lib';
+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 ChartLine from '@/components/ChartLine/index.vue';
 import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
-import { getGoldTitleByNE, goldData } from '@/api/perfManage/goldTarget';
+import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
 import { parseDateToStr } from '@/utils/date-utils';
 import { writeSheet } from '@/utils/execl-utils';
 import saveAs from 'file-saver';
 const neInfoStore = useNeInfoStore();
 const { t, currentLocale } = useI18n();
 
+echarts.use([
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+]);
+
+type EChartsOption = echarts.ComposeOption<
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | DataZoomComponentOption
+  | LineSeriesOption
+>;
+
+/**图DOM节点实例对象 */
+const kpiChartDom = ref<HTMLElement | undefined>(undefined);
+
+/**图实例对象 */
+const kpiChart = ref<any>(null);
+
 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
 
 /**记录开始结束时间 */
 let queryRangePicker = ref<[string, string]>(['', '']);
 
+/**表格字段列 */
+let tableColumns = ref<ColumnsType>([]);
+
 /**表格字段列排序 */
 let tableColumnsDnd = ref<ColumnsType>([]);
 
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+  },
+});
+
 /**表格状态类型 */
 type TabeStateType = {
-  /**表格列 */
-  tableColumns: object[];
   /**加载等待 */
   loading: boolean;
   /**紧凑型 */
@@ -37,7 +101,9 @@ type TabeStateType = {
   /**搜索栏 */
   seached: boolean;
   /**记录数据 */
-  data: object[];
+  data: Record<string, any>[];
+  /**显示表格 */
+  showTable: boolean;
 };
 
 /**表格状态 */
@@ -47,6 +113,7 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: true,
   data: [],
+  showTable: false,
 });
 
 /**表格紧凑型变更操作 */
@@ -56,295 +123,370 @@ function fnTableSize({ key }: MenuInfo) {
 
 /**查询参数 */
 let queryParams: any = reactive({
-  /**卡片切换Flag */
-  cardFlag: 0, //0-显示统计图 1-显示统计表
-  /**告警设备类型 */
+  /**网元类型 */
   neType: '',
-  /**告警网元标识 */
+  /**网元标识 */
   neId: '',
   /**颗粒度 */
-  particle: '15',
-  beginTime: '',
+  interval: 900,
+  /**开始时间 */
+  startTime: '',
+  /**结束时间 */
   endTime: '',
   /**排序字段 */
   sortField: 'timeGroup',
   /**排序方式 */
-  sortOrder: 'asc',
+  sortOrder: 'desc',
 });
 
 /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
 function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
-  tableState.loading = true;
   const { columnKey, order } = sorter;
+  if (!order) return;
+  if (order.startsWith(queryParams.sortOrder)) return;
+
   if (order) {
     queryParams.sortField = columnKey;
     queryParams.sortOrder = order.replace('end', '');
   } else {
     queryParams.sortOrder = 'asc';
   }
-  fnMakeTable(1);
-}
 
-/**图表显示数据 */
-const chartsOption = reactive({
-  /**性能指标 */
-  perfChart: {},
-});
+  fnGetList();
+}
 
 /**对象信息状态类型 */
 type StateType = {
   /**网元类型 */
   neType: string[];
-  /**制表网元类型 */
-  designNeType: string;
-  /**黄金指标集 tree */
-  designTreeData: any[];
-  /**表单数据 */
-  from: Record<string, any>;
+  /**图表配置数据 */
+  chartsOption: Record<string, any>;
 };
 
 /**对象信息状态 */
 let state: StateType = reactive({
   neType: [],
-  designNeType: '',
-  designTreeData: [],
-  from: {
-    uploadLoading: false,
-    sendLoading: false,
-  },
+  chartsOption: {},
 });
 
-/**网元类型选择对应修改 */
-function fnNeChange(keys: any, _: any) {
-  // 不是同类型时需要重新加载
-  if (state.designNeType !== keys[0]) {
-    state.designTreeData = [];
-    queryParams.cardFlag = 0;
-    fnGetList();
-  }
+function fnChangShowType() {
+  tableState.showTable = !tableState.showTable;
 }
 
-/**查询可选命令列表 */
-function fnGetList() {
-  const neType = queryParams.neType[0];
-  state.designNeType = neType;
+/**
+ * 数据列表导出
+ */
+function fnRecordExport() {
+  Modal.confirm({
+    title: 'Tip',
+    content: t('views.perfManage.goldTarget.exportSure'),
+    onOk() {
+      const key = 'exportKPI';
+      message.loading({ content: t('common.loading'), key });
+
+      if (tableState.data.length <= 0) {
+        message.error({
+          content: t('views.perfManage.goldTarget.exportEmpty'),
+          key,
+          duration: 2,
+        });
+        return;
+      }
+
+      const tableColumnsTitleArr: string[] = [];
+      const tableColumnsKeyArr: string[] = [];
+      for (const columns of tableColumnsDnd.value) {
+        tableColumnsTitleArr.push(`${columns.title}`);
+        tableColumnsKeyArr.push(`${columns.key}`);
+      }
+
+      const kpiDataArr = [];
+      for (const item of tableState.data) {
+        const kpiData: Record<string, any> = {};
+        const keys = Object.keys(item);
+        for (let i = 0; i <= tableColumnsKeyArr.length; i++) {
+          for (const key of keys) {
+            if (tableColumnsKeyArr[i] === key) {
+              const title = tableColumnsTitleArr[i];
+              kpiData[title] = item[key];
+            }
+          }
+        }
+        kpiDataArr.push(kpiData);
+      }
+
+      writeSheet(kpiDataArr, 'KPI', { header: tableColumnsTitleArr })
+        .then(fileBlob => saveAs(fileBlob, `kpi_data_${Date.now()}.xlsx`))
+        .finally(() => {
+          message.success({
+            content: t('common.msgSuccess', { msg: t('common.export') }),
+            key,
+            duration: 2,
+          });
+        });
+    },
+  });
+}
+
+/**查询数据列表表头 */
+function fnGetListTitle() {
+  // 当前语言
   var language = currentLocale.value.split('_')[0];
   if (language === 'zh') language = 'cn';
-  getGoldTitleByNE(neType).then(res => {
+
+  // 获取表头文字
+  getKPITitle(state.neType[0])
+    .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      // 构建树结构
-      const treeArr: Record<string, any>[] = [];
+        tableColumns.value = [];
+        const columns: ColumnsType = [
+          {
+            title: t('views.perfManage.perfData.neName'),
+            dataIndex: 'neName',
+            key: 'neName',
+            align: 'left',
+            width: 100,
+          },
+        ];
         for (const item of res.data) {
-        const id = item['id'];
           const kpiDisplay = item[`${language}Title`];
           const kpiValue = item[`kpiId`];
-        treeArr.push({
-          key: kpiValue,
+          columns.push({
             title: kpiDisplay,
+            dataIndex: kpiValue,
+            align: 'left',
+            key: kpiValue,
+            resizable: true,
+            width: 100,
+            minWidth: 150,
+            maxWidth: 300,
           });
         }
-      state.designTreeData = treeArr;
+        columns.push({
+          title: t('views.perfManage.goldTarget.time'),
+          dataIndex: 'timeGroup',
+          align: 'left',
+          fixed: 'right',
+          key: 'timeGroup',
+          sorter: true,
+          width: 100,
+        });
+        nextTick(() => {
+          tableColumns.value = columns;
+        });
+        return true;
       } else {
         message.warning({
           content: t('common.getInfoFail'),
           duration: 2,
         });
+        return false;
       }
+    })
+    .then(result => {
+      result && fnGetList();
     });
-  fnDesign();
 }
 
-/**根据 key 查找对应的 title */
-function findTitleByKey(key: string): string | undefined {
-  const item = state.designTreeData.find(item => item.key === key);
-  return item ? item.title : key;
-}
-
-/**筛选条件进行制图 */
-function fnMakeTable(flag: any) {
-  queryParams.cardFlag = flag;
-  fnDesign();
-}
-
-/**筛选条件进行制图 */
-function fnDesign() {
-  //当前界面是表格界面
-  const columnsArr = state.designTreeData.map(item => {
-    return {
-      title: item.title,
-      dataIndex: item.key,
-      align: 'center',
-    };
-  });
-  tableState.tableColumns = columnsArr;
-  tableState.tableColumns.unshift({
-    title: t('views.perfManage.perfData.neName'),
-    dataIndex: 'neName',
-    align: 'center',
-  });
-  tableState.tableColumns.push({
-    title: t('views.perfManage.goldTarget.time'),
-    dataIndex: 'timeGroup',
-    align: 'center',
-    fixed: 'right',
-    key: 'timeGroup',
-    sorter: true,
-  });
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
-  }
-  queryParams.beginTime = queryRangePicker.value[0];
+/**查询数据列表 */
+function fnGetList() {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  queryParams.neType = state.neType[0];
+  queryParams.neId = state.neType[1];
+  queryParams.startTime = queryRangePicker.value[0];
   queryParams.endTime = queryRangePicker.value[1];
-  let goldXDate: any = [];
-  let goldYData: any = [];
-  let hideAll: any = {};
-  goldData(queryParams)
+  listKPIData(toRaw(queryParams))
     .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        if (res.data.length > 0) {
-          console.log(res.data);
+      tableState.loading = false;
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        tablePagination.total = res.data.length;
         tableState.data = res.data;
-          goldXDate = res.data.map((item: any) => item.timeGroup);
-          goldYData = Object.keys(res.data[0])
-            .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
-            .map(key => {
-              const title: any = findTitleByKey(key);
-              hideAll[title] = false;
-              return {
-                name: title,
-                data: res.data.map((item: any) => parseInt(item[key])),
-              };
-            });
+        return true;
+      }
+      return false;
+    })
+    .then(result => {
+      if (result) {
+        if (kpiChart.value == null) {
+          fnRanderChart();
         } else {
-          tableState.data = [];
-          state.designTreeData.forEach((item: any) => {
-            goldYData.push({ name: item.title, data: [] });
+          fnRanderChartData();
+        }
+      }
     });
-          message.warning({
-            content: t('views.perfManage.goldTarget.nullTip'),
-            duration: 2,
+}
+
+/**绘制图表 */
+function fnRanderChart() {
+  const container: HTMLElement | undefined = kpiChartDom.value;
+  if (!container) return;
+  kpiChart.value = markRaw(echarts.init(container, 'light'));
+
+  fnRanderChartData();
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    if (kpiChart.value) {
+      kpiChart.value.resize();
+    }
   });
+  // 监听元素大小变化
+  observer.observe(container);
+}
+
+/**面积颜色 */
+const areaStyleColor = [
+  {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: 'rgba(22, 119, 255, .5)',
+      },
+      {
+        offset: 1,
+        color: 'rgba(22, 119, 255, 0)',
+      },
+    ]),
+  },
+  {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: 'rgba(82, 196, 26, .5)',
+      },
+      {
+        offset: 1,
+        color: 'rgba(82, 196, 26, 0)',
+      },
+    ]),
+  },
+  {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: 'rgba(250, 173, 20, .5)',
+      },
+      {
+        offset: 1,
+        color: 'rgba(250, 173, 20, 0)',
+      },
+    ]),
+  },
+  {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: 'rgba(255, 77, 79, 0.5)',
+      },
+      {
+        offset: 1,
+        color: 'rgba(255, 77, 79, 0)',
+      },
+    ]),
+  },
+];
+
+/**图表数据渲染 */
+function fnRanderChartData() {
+  if (kpiChart.value == null && tableState.data.length <= 0) {
+    return;
   }
 
-        // 图标参数
-        const option = {
-          xDatas: goldXDate,
-          yDatas: goldYData,
+  const xDatas: string[] = [];
+  const yDatas: Record<string, any>[] = [];
+
+  const tableColumnsKeyArr: string[] = [];
+
+  const columnsLen = tableColumnsDnd.value.length;
+  for (let i = 0; i < columnsLen; i++) {
+    const columns = tableColumnsDnd.value[i];
+    if (
+      columns.key === 'neName' ||
+      columns.key === 'startIndex' ||
+      columns.key === 'timeGroup'
+    ) {
+      continue;
+    }
+    yDatas.push({
+      name: `${columns.title}`,
+      type: 'line',
+      symbol: 'none',
+      sampling: 'lttb',
+      itemStyle: {
+        color: 'rgb(255, 70, 131)',
+      },
+      areaStyle: areaStyleColor[i % columnsLen],
+      data: [],
+    });
+    tableColumnsKeyArr.push(`${columns.key}`);
+  }
+
+  // 用降序就反转
+  let orgData = tableState.data;
+  if (queryParams.sortOrder === 'desc') {
+    orgData = orgData.toReversed();
+  }
+  for (const item of orgData) {
+    xDatas.push(item['timeGroup']);
+    const keys = Object.keys(item);
+    for (let i = 0; i < tableColumnsKeyArr.length; i++) {
+      for (const key of keys) {
+        if (tableColumnsKeyArr[i] === key) {
+          yDatas[i].data.push(+item[key]);
+        }
+      }
+    }
+  }
+  // console.log(queryParams.sortOrder, xDatas, yDatas);
+
+  const option: EChartsOption = {
     tooltip: {
       trigger: 'axis',
-            formatter: function (datas: any) {
-              let res = datas[0].name + '<br/>';
-              for (const item of datas) {
-                res += `${item.marker} ${item.seriesName}:${item.data}<br/>`;
-              }
-              return res;
+      position: function (pt: any) {
+        return [pt[0], '10%'];
       },
     },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: xDatas,
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
     legend: {
-            //  orient: 'vertical',
-            //  left: 'left',
       type: 'scroll',
-            orient: 'vertical', // vertical
+      orient: 'vertical',
+      top: 40,
       right: 20,
-            //itemWidth: 20,
+      itemWidth: 20,
       itemGap: 25,
       textStyle: {
         color: '#646A73',
       },
       icon: 'circle',
-            selected: hideAll,
     },
     grid: {
       left: '10%',
       right: '30%',
       bottom: '20%',
     },
-          yAxis: [
-            { type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } },
-          ],
-        };
-        chartsOption.perfChart = option;
-
-        //处理表格数据
-      } else {
-        message.warning({
-          content: t('common.getInfoFail'),
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      tableState.loading = false;
-    });
-}
-
-/**
- * 导出全部
- */
-function fnExportAll() {
-  Modal.confirm({
-    title: 'Tip',
-    content: t('views.perfManage.goldTarget.exportSure'),
-    onOk() {
-      const key = 'exportAlarm';
-      message.loading({ content: t('common.loading'), key });
-      let sortArr: any = [];
-      tableColumnsDnd.value.forEach((item: any) => {
-        if (item.dataIndex) sortArr.push(item.title);
-      });
-
-      // 排序字段
-      const sortData = {
-        header: sortArr,
-      };
-      if (!queryRangePicker.value) {
-        queryRangePicker.value = ['', ''];
-      }
-      queryParams.beginTime = queryRangePicker.value[0];
-      queryParams.endTime = queryRangePicker.value[1];
-      goldData(queryParams).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.export') }),
-            key,
-            duration: 3,
-          });
-          let realArr: any = [];
-          res.data.map((item: any) => {
-            const chineseData: any = {};
-            for (const key in item) {
-              const title: any = findTitleByKey(key);
-              if (['timeGroup', 'neName', 'startIndex'].includes(title)) {
-                switch (title) {
-                  case 'timeGroup':
-                    chineseData[t('views.perfManage.goldTarget.time')] =
-                      item[key];
-                    break;
-                  case 'neName':
-                    chineseData[t('views.perfManage.perfData.neName')] =
-                      item[key];
-                    break;
-                  case 'startIndex':
-                    break;
-                }
-              } else chineseData[title] = item[key];
-            }
-            realArr.push(chineseData);
-          });
-
-          writeSheet(realArr, 'gold', sortData).then(fileBlob =>
-            saveAs(fileBlob, `gold_${Date.now()}.xlsx`)
-          );
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key,
-            duration: 3,
-          });
-        }
-      });
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 90,
+        end: 100,
       },
-  });
+      {
+        start: 90,
+        end: 100,
+      },
+    ],
+    series: yDatas,
+  };
+  kpiChart.value.setOption(option);
 }
 
 onMounted(() => {
@@ -365,26 +507,27 @@ onMounted(() => {
           });
           return;
         }
-        // 默认选择AMF
+        // 默认选择UPF
         const item = neCascaderOptions.value.find(s => s.value === 'UPF');
         if (item && item.children) {
           const info = item.children[0];
-          queryParams.neType = [info.neType, info.neId];
+          state.neType = [info.neType, info.neId];
+          queryParams.neType = info.neType;
+          queryParams.neId = info.neId;
         } else {
           const info = neCascaderOptions.value[0].children[0];
-          queryParams.neType = [info.neType, info.neId];
+          state.neType = [info.neType, info.neId];
+          queryParams.neType = info.neType;
+          queryParams.neId = info.neId;
         }
-        const initTime: Date = new Date();
-        const startTime: Date = new Date(initTime);
-        startTime.setHours(0, 0, 0, 0); // 设置为今天的0点
-        const endTime: Date = new Date(initTime);
-        endTime.setHours(23, 59, 59, 59); // 设置为今天的12点
 
-        queryRangePicker.value = [
-          parseDateToStr(startTime),
-          parseDateToStr(endTime),
-        ];
-        fnGetList();
+        // 查询当天数据
+        const nowDate: Date = new Date();
+        nowDate.setHours(0, 0, 0, 0); // 设置为今天的0点
+        queryRangePicker.value[0] = '2024-01-31 00:00:00'; //parseDateToStr(nowDate);
+        nowDate.setHours(23, 59, 59, 59); // 设置为今天的12点
+        queryRangePicker.value[1] = parseDateToStr(nowDate);
+        fnGetListTitle();
       }
     } else {
       message.warning({
@@ -412,9 +555,8 @@ onMounted(() => {
               :label="t('views.traceManage.task.neType')"
             >
               <a-cascader
-                v-model:value="queryParams.neType"
+                v-model:value="state.neType"
                 :options="neCascaderOptions"
-                @change="fnNeChange"
                 :allow-clear="false"
                 :placeholder="t('common.selectPlease')"
               />
@@ -436,11 +578,11 @@ onMounted(() => {
           </a-col>
           <a-col :lg="4" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.perfManage.goldTarget.particle')"
-              name="particle"
+              :label="t('views.perfManage.goldTarget.interval')"
+              name="interval"
             >
               <a-select
-                v-model:value="queryParams.particle"
+                v-model:value="queryParams.interval"
                 :placeholder="t('common.selectPlease')"
                 :options="[
                   { label: '5S', value: 5 },
@@ -456,7 +598,7 @@ onMounted(() => {
           <a-col :lg="2" :md="12" :xs="24">
             <a-form-item>
               <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnDesign()">
+                <a-button type="primary" @click.prevent="fnGetListTitle()">
                   <template #icon><SearchOutlined /></template>
                   {{ t('common.search') }}
                 </a-button>
@@ -467,25 +609,34 @@ onMounted(() => {
       </a-form>
     </a-card>
 
-    <template v-if="queryParams.cardFlag">
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-            <a-button type="primary" @click.prevent="fnMakeTable(0)">
-              <template #icon> <area-chart-outlined /> </template>
-              {{ t('views.perfManage.goldTarget.kpiTitle') }}
+          <a-button type="primary" @click.prevent="fnChangShowType()">
+            <template #icon> <AreaChartOutlined /> </template>
+            {{
+              tableState.showTable
+                ? t('views.perfManage.goldTarget.kpiChartTitle')
+                : t('views.perfManage.goldTarget.kpiTableTitle')
+            }}
           </a-button>
-            <a-button type="primary" @click.prevent="fnExportAll()">
-              <template #icon> <export-outlined /> </template>
-              {{ t('views.faultManage.activeAlarm.exportAll') }}
+          <a-button
+            type="dashed"
+            @click.prevent="fnRecordExport()"
+            v-show="tableState.showTable"
+          >
+            <template #icon>
+              <ExportOutlined />
+            </template>
+            {{ t('common.export') }}
           </a-button>
         </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-          <a-space :size="8" align="center">
+        <a-space :size="8" align="center" v-show="tableState.showTable">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -502,7 +653,8 @@ onMounted(() => {
             </a-button>
           </a-tooltip>
           <TableColumnsDnd
-              :columns="tableState.tableColumns"
+            v-if="tableColumns.length > 0"
+            :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
           <a-tooltip>
@@ -534,50 +686,27 @@ onMounted(() => {
 
       <!-- 表格列表 -->
       <a-table
+        v-show="tableState.showTable"
         class="table"
         row-key="id"
         :columns="tableColumnsDnd"
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
-          :pagination="false"
+        :pagination="tablePagination"
         :scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
         :show-expand-column="false"
         @change="fnTableChange"
       >
       </a-table>
-      </a-card>
-    </template>
 
-    <a-card :bordered="false" :body-style="{ marginBottom: '24px' }" v-else>
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>{{
-        t('views.perfManage.goldTarget.kpiTitle')
-      }}</template>
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-button type="default" size="small" @click.prevent="fnMakeTable(1)">
-            <template #icon> <bars-outlined /> </template>
-            {{ t('views.perfManage.goldTarget.allData') }}
-          </a-button>
-        </a-space>
-      </template>
-      <div class="chart">
-        <ChartLine
-          :option="chartsOption.perfChart"
-          :dataZoom="false"
-          height="400px"
-        ></ChartLine>
+      <!-- 图表 -->
+      <div style="padding: 24px" v-show="!tableState.showTable">
+        <div ref="kpiChartDom" style="height: 450px; width: 100%"></div>
       </div>
     </a-card>
   </PageContainer>
 </template>
 
-<style lang="less" scoped>
-.chart {
-  width: 100%;
-  height: 400px;
-}
-</style>
+<style lang="less" scoped></style>