feat: 页面调整组件属性升级

src/views/perfManage/goldTarget/index.vue

@@ -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,
@@ -78,10 +77,10 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**表格字段列 */
-let tableColumns = ref<ColumnsType>([]);
+let tableColumns = ref<any[]>([]);
 
 /**表格字段列排序 */
-let tableColumnsDnd = ref<ColumnsType>([]);
+let tableColumnsDnd = ref<any[]>([]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -251,14 +250,18 @@ function fnGetListTitle() {
 
   // 获取表头文字
   getKPITitle(state.neType[0])
-    .then(res => {//处理getKPITitle返回的结果
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {//检查值
-        tableColumns.value = [];//设为空数组
-        const columns: ColumnsType = [];//初始化，构建新表头
-        for (const item of res.data) {//遍历res.data
-          const kpiDisplay = item[`${language}Title`];//提取标题kpiDisplay和ID标识kpiValue
+    .then(res => {
+      //处理getKPITitle返回的结果
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        //检查值
+        tableColumns.value = []; //设为空数组
+        const columns: any[] = []; //初始化，构建新表头
+        for (const item of res.data) {
+          //遍历res.data
+          const kpiDisplay = item[`${language}Title`]; //提取标题kpiDisplay和ID标识kpiValue
           const kpiValue = item[`kpiId`];
-          columns.push({//
+          columns.push({
+            //
             title: kpiDisplay,
             dataIndex: kpiValue,
             align: 'left',
@@ -297,7 +300,8 @@ function fnGetListTitle() {
         return false;
       }
     })
-    .then(result => {//result是前一个.then返回的值(true or false)
+    .then(result => {
+      //result是前一个.then返回的值(true or false)
       result && fnGetList();
     });
 }
@@ -334,27 +338,31 @@ function fnChangShowType() {
 
 /**绘制图表 */
 function fnRanderChart() {
-  const container: HTMLElement | undefined = kpiChartDom.value;//获取图表容器DOM元素
-  if (!container) return;//若没有，则退出函数
+  const container: HTMLElement | undefined = kpiChartDom.value; //获取图表容器DOM元素
+  if (!container) return; //若没有，则退出函数
   kpiChart.value = markRaw(echarts.init(container, 'light'));
-//初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应
-  const option: EChartsOption = {//定义图表的配置对象，tooltip的出发方式为axis
+  //初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应
+  const option: EChartsOption = {
+    //定义图表的配置对象，tooltip的出发方式为axis
     tooltip: {
       trigger: 'axis',
       position: function (pt: any) {
         return [pt[0], '10%'];
       },
     },
-    xAxis: {//x类别轴
+    xAxis: {
+      //x类别轴
       type: 'category',
       boundaryGap: false,
       data: [], // 数据x轴
     },
-    yAxis: {//y类别轴
+    yAxis: {
+      //y类别轴
       type: 'value',
       boundaryGap: [0, '100%'],
     },
-    legend: {//图例垂直滚动
+    legend: {
+      //图例垂直滚动
       type: 'scroll',
       orient: 'vertical',
       top: 40,
@@ -367,13 +375,15 @@ function fnRanderChart() {
       icon: 'circle',
       selected: {},
     },
-    grid: {//网格区域边距
+    grid: {
+      //网格区域边距
       left: '10%',
       right: '30%',
       bottom: '20%',
     },
     dataZoom: [
-      {//启用图表的数据缩放，范围90%-100%
+      {
+        //启用图表的数据缩放，范围90%-100%
         type: 'inside',
         start: 90,
         end: 100,
@@ -385,7 +395,7 @@ function fnRanderChart() {
     ],
     series: [], // 数据y轴
   };
-  kpiChart.value.setOption(option);//设置图表配置项，应用到kpiChart实例上
+  kpiChart.value.setOption(option); //设置图表配置项，应用到kpiChart实例上
 
   // 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
   var observer = new ResizeObserver(entries => {
@@ -648,10 +658,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"