修复列选择工具不刷新

.env

@@ -1,3 +1,3 @@
 VUE_APP_VERSION=1.0.0
-VUE_APP_NAME=生态环境监测系统
+VUE_APP_NAME=生态环境监测数据综合分析平台
 VUE_APP_API_BASE_URL=http://1.14.132.108:10002/api

src/components/ele-admin-pro/packages/ele-pro-table-tools/src/main.vue

@@ -190,6 +190,11 @@ export default {
       fullScreenTipVisible: false
     };
   },
+  watch:{
+    columns(val){
+      this.orgColumns = val
+    }
+  },
   computed: {
     // 表格尺寸下拉选中
     selectedKeys() {

src/components/ele-admin-pro/packages/ele-pro-table/src/main.vue

@@ -479,9 +479,12 @@ export default {
     },
     columns() {
       this.cols = this.columns;
+      this.$nextTick(()=>{
         if (this.toolbar) {
         this.$refs.toolbar.initColumnList();
       }
+      })
+      
     },
     size() {
       this.tableSize = this.size;

src/views/sound/road/statistic/compare.vue

@@ -1,33 +1,60 @@
 <template>
   <div class="">
-    <ele-pro-table v-if="hisYears.length > 0" ref="table" row-key="id" :datasource="url" :columns="columns"
+    <ele-pro-table
-      :where="where" :needPage="false" @done="stableDone" :scroll="{x: 'max-content'}" :method="'POST'">
+      v-if="hisYears.length > 0"
+      ref="table"
+      row-key="id"
+      :datasource="url"
+      :columns="columns"
+      :where="where"
+      :needPage="false"
+      :initLoad="false"
+      :scroll="{ x: 'max-content' }"
+      :method="'POST'"
+    >
       <template #toolbar>
         <!-- 搜索表单 -->
         <a-form :model="where" layout="inline" :labelCol="{ offset: 1 }">
           <a-row>
             <a-col :lg="6" :md="12" :sm="24" :xs="24">
               <a-form-item label="统计模块:">
-                <a-select :options="groupModelOptions" v-model:value="where.groupModel" placeholder="统计模块">
+                <a-select
+                  :options="groupModelOptions"
+                  v-model:value="where.groupModel"
+                  placeholder="统计模块"
+                >
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :lg="6" :md="12" :sm="24" :xs="24">
               <a-form-item label="时间细度:">
-                <a-select :options="groupTimeLengthOptions" v-model:value="where.groupTimeLength" placeholder="">
+                <a-select
+                  :options="groupTimeLengthOptions"
+                  v-model:value="where.groupTimeLength"
+                  placeholder=""
+                >
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :lg="6" :md="12" :sm="24" :xs="24">
               <a-form-item label="昼夜:">
-                <a-select :options="timeSlotOptions" v-model:value="where.timeSlot" placeholder="昼夜">
+                <a-select
+                  :options="timeSlotOptions"
+                  v-model:value="where.timeSlot"
+                  placeholder="昼夜"
+                >
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :lg="6" :md="12" :sm="24" :xs="24">
               <a-form-item label="类型:">
-                <a-select v-model:value="where.valueType" :options="valueTypeOptions" mode="multiple"
+                <a-select
-                  placeholder="Please select" style="width: 600px">
+                  v-model:value="where.valueType"
+                  :options="valueTypeOptions"
+                  mode="multiple"
+                  placeholder="Please select"
+                  style="width: 400px"
+                >
                 </a-select>
               </a-form-item>
             </a-col>
@@ -41,7 +68,6 @@
               </a-form-item>
             </a-col> -->
 
-
             <a-col :lg="4" :md="12" :sm="24" :xs="24">
               <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
                 <a-space>
@@ -63,105 +89,114 @@
 
 <script>
 // import _ from "lodash";
-  import {
+import { ref } from "vue";
-    ref
+import XLSX from "xlsx";
-  } from 'vue';
-  import XLSX from 'xlsx';
 import {
   pageRoadNoiseCompare,
-    getHistoryyears
+  getHistoryyears,
-  } from "@/api/ecology/road-sound"
+} from "@/api/ecology/road-sound";
 export default {
-    name: 'StatisticSoundRoadCompare',
+  name: "StatisticSoundRoadCompare",
   components: {},
   data() {
-      const groupModelOptions = [];
+    const groupModelOptions = [
-      const groupTimeLengthOptions = [{
+      {label: "测点",value: "place"},
+      {label: "城区",value: "area"},
+      {label: "市",value: "city"},
+    ];
+    const groupTimeLengthOptions = [
+      {
         label: "年",
-          value: "monitor_year"
+        value: "monitor_year",
       },
       {
         label: "季度",
-          value: "quarter"
+        value: "quarter",
-        }
+      },
-      ]
+    ];
 
     // const valueTypeOptions = ['Leq','SD','L10','L50','L90','Lmin','Lmax'];
-      const valueTypeOptions = [{
+    const valueTypeOptions = [
-          label: 'Leq',
+      {
-          value: 'index_Leq'
+        label: "Leq",
+        value: "index_Leq",
       },
       {
-          label: 'SD',
+        label: "SD",
-          value: 'index_Sd'
+        value: "index_Sd",
       },
       {
-          label: 'L10',
+        label: "L10",
-          value: 'index_L10'
+        value: "index_L10",
       },
       {
-          label: 'L50',
+        label: "L50",
-          value: 'index_L50'
+        value: "index_L50",
       },
       {
-          label: 'L90',
+        label: "L90",
-          value: 'index_L90'
+        value: "index_L90",
       },
       {
-          label: 'Lmin',
+        label: "Lmin",
-          value: 'index_Lmin'
+        value: "index_Lmin",
       },
       {
-          label: 'Lmax',
+        label: "Lmax",
-          value: 'index_Lmax'
+        value: "index_Lmax",
       },
-      ]
+    ];
     return {
       url: pageRoadNoiseCompare,
       data: [],
       where: {
         groupModel: "area",
         groupTimeLength: "monitor_year",
-          timeSlot: '昼',
+        timeSlot: "昼",
         reportTimeScope: [],
-          valueType: ['index_Leq']
+        valueType: ["index_Leq"],
       },
       hisYears: [],
       timeScope: [],
-        columns:[],
+      columns: [{title:'年',dataIndex: 'year'}],
       groupModelOptions,
       groupTimeLengthOptions,
       valueTypeOptions: ref(valueTypeOptions),
-        timeSlotOptions: [{
+      timeSlotOptions: [
+        {
           value: "昼",
-          label: "昼"
+          label: "昼",
-        }, {
+        },
+        {
           value: "夜",
-          label: "夜"
+          label: "夜",
-        }]
+        },
-
+      ],
     };
   },
   mounted() {
-      getHistoryyears().then(res => {
+    getHistoryyears().then((res) => {
-        this.hisYears = res.data.data
+      this.hisYears = res.data.data;
+      this.$nextTick(()=>{
+       this.reload()
       })
+    });
   },
   methods: {
     /* 刷新表格 */
     reload() {
+      this.stableDone()
       this.$refs.table.reload({
-          where: this.where
+        where: this.where,
       });
-
     },
     /* 重置搜索 */
     reset() {
       this.where = {
         model: "place",
-          timeSlot: "昼"
+        timeSlot: "昼",
       };
-        this.this.timeScope = []
+      this.this.timeScope = [];
 
       this.reload();
     },
@@ -174,30 +209,28 @@
         columns.push({
           title: "城区",
           dataIndex: "area",
-            sorter: true
+          sorter: true,
-          })
+        });
       } else if (this.where.groupModel == "place") {
         columns.push({
           title: "测点",
           dataIndex: "area",
-            sorter: true
+          sorter: true,
-          })
+        });
       } else if (this.where.groupModel == "city") {
         columns.push({
           title: "城市",
           dataIndex: "area",
-            sorter: true
+          sorter: true,
-          })
+        });
       }
 
-        if (this.where.groupTimeLength == 'quarter') {
+      if (this.where.groupTimeLength == "quarter") {
         columns.push({
           title: "季度",
           dataIndex: "quarter",
           sorter: true,
-            customRender: ({
+          customRender: ({ text }) => {
-              text
-            }) => {
             switch (text) {
               case 1:
                 return "第一季度";
@@ -211,144 +244,118 @@
               default:
                 return "";
             }
-            }
+          },
-          })
+        });
       }
 
-
+      this.hisYears.forEach((item) => {
-        this.hisYears.forEach(item => {
-          console.log(this.where.valueType)
         if (this.where.valueType.includes("index_Leq")) {
           columns.push({
             title: item + "年Leq",
             dataIndex: item + "Leq",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
-              }
+            },
-
+          });
-            })
         }
         if (this.where.valueType.includes("index_SD")) {
           columns.push({
             title: item + "年SD",
             dataIndex: item + "Sd",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
-              }
+            },
-
+          });
-            })
         }
         if (this.where.valueType.includes("index_L10")) {
           columns.push({
             title: item + "年L10",
             dataIndex: item + "L10",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
-              }
+            },
-
+          });
-            })
         }
 
         if (this.where.valueType.includes("index_L50")) {
           columns.push({
             title: item + "年L50",
             dataIndex: item + "L50",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
-              }
+            },
-
+          });
-            })
         }
         if (this.where.valueType.includes("index_L90")) {
           columns.push({
             title: item + "年L90",
             dataIndex: item + "L90",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
-              }
+            },
-
+          });
-            })
         }
         if (this.where.valueType.includes("index_Lmin")) {
           columns.push({
             title: item + "年Lmin",
             dataIndex: item + "Lmin",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
-              }
+            },
-
+          });
-            })
         }
         if (this.where.valueType.includes("index_Lmax")) {
           columns.push({
             title: item + "年Lmax",
             dataIndex: item + "Lmax",
-              customRender: ({
+            customRender: ({ text }) => {
-                text
+              const val = text ? Number(text).toFixed(2) : "";
-              }) => {
+              console.log(val);
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
               return val;
+            },
+          });
         }
+      });
 
-            })
+      // 
-          }
+      console.log(columns);
 
-
-
-
-
-
-
-        })
-
-        // }
       this.columns = columns;
     },
     exportFile() {
       let array = [
-          ['测点', '路段', '城区', '路长', '路宽', '平均Leq', '平均SD']
+        ["测点", "路段", "城区", "路长", "路宽", "平均Leq", "平均SD"],
       ];
-        this.data.forEach(d => {
+      this.data.forEach((d) => {
-          array.push([d.place, d.road, d.area, d.roadLength, d.roadWidth, d.avgLeq, d.avgSD]);
+        array.push([
+          d.place,
+          d.road,
+          d.area,
+          d.roadLength,
+          d.roadWidth,
+          d.avgLeq,
+          d.avgSD,
+        ]);
       });
       let sheet = XLSX.utils.aoa_to_sheet(array);
-        // sheet['!merges'] = [
-        //   {s: {r: 0, c: 1}, e: {r: 0, c: 5}},  // 合并第0行第1列到第0行第5列
-        //   {s: {r: 0, c: 0}, e: {r: 1, c: 0}},  // 合并第0行第0列到第1行第0列
-        //   {s: {r: 0, c: 6}, e: {r: 1, c: 6}}  // 合并第0行第6列到第1行第6列
-        // ];
-        this.$util.exportSheet(XLSX, sheet, '道路交通噪声统计表');
-      }
-    }
      
-  }
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime());
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>