修复列选择工具不刷新

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"
-      :where="where" :needPage="false" @done="stableDone" :scroll="{x: 'max-content'}" :method="'POST'">
+    <ele-pro-table
+      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-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"
-                  placeholder="Please select" style="width: 600px">
+                <a-select
+                  v-model:value="where.valueType"
+                  :options="valueTypeOptions"
+                  mode="multiple"
+                  placeholder="Please select"
+                  style="width: 400px"
+                >
                 </a-select>
               </a-form-item>
             </a-col>
@@ -41,9 +68,8 @@
               </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-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
                 <a-space>
                   <a-button type="primary" @click="reload">查询</a-button>
                   <a-button @click="reset">重置</a-button>
@@ -62,293 +88,274 @@
 </template>
 
 <script>
-  // import _ from "lodash";
-  import {
-    ref
-  } from 'vue';
-  import XLSX from 'xlsx';
-  import {
-    pageRoadNoiseCompare,
-    getHistoryyears
-  } from "@/api/ecology/road-sound"
-  export default {
-    name: 'StatisticSoundRoadCompare',
-    components: {},
-    data() {
-      const groupModelOptions = [];
-      const groupTimeLengthOptions = [{
-          label: "年",
-          value: "monitor_year"
-        },
-        {
-          label: "季度",
-          value: "quarter"
-        }
-      ]
+// import _ from "lodash";
+import { ref } from "vue";
+import XLSX from "xlsx";
+import {
+  pageRoadNoiseCompare,
+  getHistoryyears,
+} from "@/api/ecology/road-sound";
+export default {
+  name: "StatisticSoundRoadCompare",
+  components: {},
+  data() {
+    const groupModelOptions = [
+      {label: "测点",value: "place"},
+      {label: "城区",value: "area"},
+      {label: "市",value: "city"},
+    ];
+    const groupTimeLengthOptions = [
+      {
+        label: "年",
+        value: "monitor_year",
+      },
+      {
+        label: "季度",
+        value: "quarter",
+      },
+    ];
 
-      // const valueTypeOptions = ['Leq','SD','L10','L50','L90','Lmin','Lmax'];
-      const valueTypeOptions = [{
-          label: 'Leq',
-          value: 'index_Leq'
-        },
+    // const valueTypeOptions = ['Leq','SD','L10','L50','L90','Lmin','Lmax'];
+    const valueTypeOptions = [
+      {
+        label: "Leq",
+        value: "index_Leq",
+      },
+      {
+        label: "SD",
+        value: "index_Sd",
+      },
+      {
+        label: "L10",
+        value: "index_L10",
+      },
+      {
+        label: "L50",
+        value: "index_L50",
+      },
+      {
+        label: "L90",
+        value: "index_L90",
+      },
+      {
+        label: "Lmin",
+        value: "index_Lmin",
+      },
+      {
+        label: "Lmax",
+        value: "index_Lmax",
+      },
+    ];
+    return {
+      url: pageRoadNoiseCompare,
+      data: [],
+      where: {
+        groupModel: "area",
+        groupTimeLength: "monitor_year",
+        timeSlot: "昼",
+        reportTimeScope: [],
+        valueType: ["index_Leq"],
+      },
+      hisYears: [],
+      timeScope: [],
+      columns: [{title:'年',dataIndex: 'year'}],
+      groupModelOptions,
+      groupTimeLengthOptions,
+      valueTypeOptions: ref(valueTypeOptions),
+      timeSlotOptions: [
         {
-          label: 'SD',
-          value: 'index_Sd'
-        },
-        {
-          label: 'L10',
-          value: 'index_L10'
-        },
-        {
-          label: 'L50',
-          value: 'index_L50'
-        },
-        {
-          label: 'L90',
-          value: 'index_L90'
-        },
-        {
-          label: 'Lmin',
-          value: 'index_Lmin'
-        },
-        {
-          label: 'Lmax',
-          value: 'index_Lmax'
-        },
-      ]
-      return {
-        url: pageRoadNoiseCompare,
-        data: [],
-        where: {
-          groupModel: "area",
-          groupTimeLength: "monitor_year",
-          timeSlot: '昼',
-          reportTimeScope: [],
-          valueType: ['index_Leq']
-        },
-        hisYears: [],
-        timeScope: [],
-        columns:[],
-        groupModelOptions,
-        groupTimeLengthOptions,
-        valueTypeOptions: ref(valueTypeOptions),
-        timeSlotOptions: [{
           value: "昼",
-          label: "昼"
-        }, {
+          label: "昼",
+        },
+        {
           value: "夜",
-          label: "夜"
-        }]
-
-      };
-    },
-    mounted() {
-      getHistoryyears().then(res => {
-        this.hisYears = res.data.data
+          label: "夜",
+        },
+      ],
+    };
+  },
+  mounted() {
+    getHistoryyears().then((res) => {
+      this.hisYears = res.data.data;
+      this.$nextTick(()=>{
+       this.reload()
       })
+    });
+  },
+  methods: {
+    /* 刷新表格 */
+    reload() {
+      this.stableDone()
+      this.$refs.table.reload({
+        where: this.where,
+      });
     },
-    methods: {
-      /* 刷新表格 */
-      reload() {
-        this.$refs.table.reload({
-          where: this.where
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        model: "place",
+        timeSlot: "昼",
+      };
+      this.this.timeScope = [];
+
+      this.reload();
+    },
+    reportTimeScopeChange(d, dstr) {
+      console.log(d, dstr);
+    },
+    stableDone() {
+      const columns = [];
+      if (this.where.groupModel == "area") {
+        columns.push({
+          title: "城区",
+          dataIndex: "area",
+          sorter: true,
         });
-
-      },
-      /* 重置搜索 */
-      reset() {
-        this.where = {
-          model: "place",
-          timeSlot: "昼"
-        };
-        this.this.timeScope = []
-
-        this.reload();
-      },
-      reportTimeScopeChange(d, dstr) {
-        console.log(d, dstr);
-      },
-      stableDone() {
-        const columns = [];
-        if (this.where.groupModel == "area") {
-          columns.push({
-            title: "城区",
-            dataIndex: "area",
-            sorter: true
-          })
-        } else if (this.where.groupModel == "place") {
-          columns.push({
-            title: "测点",
-            dataIndex: "area",
-            sorter: true
-          })
-        } else if (this.where.groupModel == "city") {
-          columns.push({
-            title: "城市",
-            dataIndex: "area",
-            sorter: true
-          })
-        }
-
-        if (this.where.groupTimeLength == 'quarter') {
-          columns.push({
-            title: "季度",
-            dataIndex: "quarter",
-            sorter: true,
-            customRender: ({
-              text
-            }) => {
-              switch (text) {
-                case 1:
-                  return "第一季度";
-                case 2:
-                  return "第二季度";
-                case 3:
-                  return "第三季度";
-                case 4:
-                  return "第四季度";
-
-                default:
-                  return "";
-              }
-            }
-          })
-        }
-
-
-        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: ({
-                text
-              }) => {
-                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: ({
-                text
-              }) => {
-                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: ({
-                text
-              }) => {
-                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: ({
-                text
-              }) => {
-                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: ({
-                text
-              }) => {
-                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: ({
-                text
-              }) => {
-                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: ({
-                text
-              }) => {
-                const val = text ? Number(text).toFixed(2) : ''
-                console.log(val)
-                return val;
-              }
-
-            })
-          }
-
-
-
-
-
-
-
-        })
-
-        // }
-        this.columns = columns;
-      },
-      exportFile() {
-        let array = [
-          ['测点', '路段', '城区', '路长', '路宽', '平均Leq', '平均SD']
-        ];
-        this.data.forEach(d => {
-          array.push([d.place, d.road, d.area, d.roadLength, d.roadWidth, d.avgLeq, d.avgSD]);
+      } else if (this.where.groupModel == "place") {
+        columns.push({
+          title: "测点",
+          dataIndex: "area",
+          sorter: true,
+        });
+      } else if (this.where.groupModel == "city") {
+        columns.push({
+          title: "城市",
+          dataIndex: "area",
+          sorter: true,
         });
-        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, '道路交通噪声统计表');
       }
-    }
 
-  }
+      if (this.where.groupTimeLength == "quarter") {
+        columns.push({
+          title: "季度",
+          dataIndex: "quarter",
+          sorter: true,
+          customRender: ({ text }) => {
+            switch (text) {
+              case 1:
+                return "第一季度";
+              case 2:
+                return "第二季度";
+              case 3:
+                return "第三季度";
+              case 4:
+                return "第四季度";
+
+              default:
+                return "";
+            }
+          },
+        });
+      }
+
+      this.hisYears.forEach((item) => {
+        if (this.where.valueType.includes("index_Leq")) {
+          columns.push({
+            title: item + "年Leq",
+            dataIndex: item + "Leq",
+            customRender: ({ text }) => {
+              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: ({ text }) => {
+              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: ({ text }) => {
+              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: ({ text }) => {
+              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: ({ text }) => {
+              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: ({ text }) => {
+              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: ({ text }) => {
+              const val = text ? Number(text).toFixed(2) : "";
+              console.log(val);
+              return val;
+            },
+          });
+        }
+      });
+
+      // 
+      console.log(columns);
+
+      this.columns = columns;
+    },
+    exportFile() {
+      let array = [
+        ["测点", "路段", "城区", "路长", "路宽", "平均Leq", "平均SD"],
+      ];
+      this.data.forEach((d) => {
+        array.push([
+          d.place,
+          d.road,
+          d.area,
+          d.roadLength,
+          d.roadWidth,
+          d.avgLeq,
+          d.avgSD,
+        ]);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(array);
+     
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime());
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>