添加报告

添加细节

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

@@ -1,54 +1,55 @@
 <template>
   <div class="">
-      <ele-pro-table ref="table" row-key="id" :datasource="url" :columns="columns" :where="where" :needPage="false"
-        @done="(d)=>data = d.data" :scroll="{x: 'max-content'}">
-        <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="modelOptions" v-model:value="where.model" 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>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="8" :md="12" :sm="24" :xs="24">
-            <a-form-item label="时间范围:">
-              <!-- <a-month-picker v-model:value="timeScope" placeholder="起始" /> -->
-              <a-range-picker v-model:value="timeScope" format="YYYY-MM-DD" />
-            </a-form-item>
-          </a-col>
+    <ele-pro-table ref="table" row-key="id" :datasource="url" :columns="columns" :where="where" :needPage="false"
+      @done="stableDone" :scroll="{x: 'max-content'}">
+      <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>
+              </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>
+              </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>
+              </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>
-                <a-button type="primary" @click="reload">查询</a-button>
-                <a-button @click="reset">重置</a-button>
-                <a-button @click="exportFile">导出excel</a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-          <!-- <a-space>
+            <a-col :lg="4" :md="12" :sm="24" :xs="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>
+                  <a-button @click="exportFile">导出excel</a-button>
+                </a-space>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+        <!-- <a-space>
             
           </a-space> -->
-        </template>
-      </ele-pro-table>
+      </template>
+    </ele-pro-table>
   </div>
 </template>
 
 <script>
-  import _ from "lodash";
+  // import _ from "lodash";
   import XLSX from 'xlsx';
   import {
-    pageRoadNoiseStatisticUrl
+    pageRoadNoiseCompare
   } from "@/api/ecology/road-sound"
   const columns = [{
       title: '测点',
@@ -64,7 +65,7 @@
       title: '城区',
       dataIndex: 'area',
     },
-      {
+    {
       title: '市',
       dataIndex: 'city',
     },
@@ -75,27 +76,36 @@
 
     },
     data() {
+      const groupModelOptions = [{
+        label: "测点",
+        value: "place"
+      },{
+        label: "城区",
+        value: "area"
+      },{
+        label: "市",
+        value: "city"
+      }];
+      const groupTimeLengthOptions = [{
+        label: "年",
+        value: "monitor_year"
+      },
+      {
+        label: "季度",
+        value: "quarter"
+      }]
       return {
-        url: pageRoadNoiseStatisticUrl,
+        url: pageRoadNoiseCompare,
         data: [],
         where: {
-          model: "place"
+          groupModel: "area",
+          groupTimeLength: "monitor_year",
+          timeSlot: '昼'
         },
         timeScope: [],
         columns,
-        modelOptions: [{
-          value: "place",
-          label: "测点",
-        }, {
-          value: "road",
-          label: "路段",
-        }, {
-          value: "area",
-          label: "城区",
-        },{
-          value: "city",
-          label: "市"
-        }],
+        groupModelOptions,
+        groupTimeLengthOptions,
         timeSlotOptions: [{
           value: "昼",
           label: "昼"
@@ -110,27 +120,9 @@
       /* 刷新表格 */
       reload() {
         this.$refs.table.reload({
-          where: {
-            model: this.where.model,
-            timeStart: this.timeScope.length == 2 ? this.timeScope[0].format("Y-M-D") : null,
-            timeEnd: this.timeScope.length == 2 ? this.timeScope[1].format("Y-M-D") : null,
-            timeSlot: this.where.timeSlot
-          }
+          where: this.where
         });
-        let cloneColumns = _.cloneDeep(columns);
-        if (this.where.model == "area") {
-          this.columns = cloneColumns.filter(item => {
-            return item.dataIndex != "place" && item.dataIndex != "road";
-          })
-        } else if (this.where.model == "road") {
-          this.columns = cloneColumns.filter(item => {
-            return item.dataIndex != "place"
-          })
-        }else if(this.where.model == "city"){
-        this.columns = cloneColumns.filter(item => {
-            return item.dataIndex != "place" && item.dataIndex != "road"  && item.dataIndex != "area";
-          })
-        }
+
       },
       /* 重置搜索 */
       reset() {
@@ -142,6 +134,66 @@
 
         this.reload();
       },
+      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
+          })
+        }
+        columns.push({
+            title : "年份",
+            dataIndex: "year",
+            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 "";
+              }
+            }
+          })
+        }
+
+        // if(this.where.groupTimeLength == 'monitor_year'){
+          columns.push({
+            title : "Leq",
+            dataIndex: "value",
+            customRender: ({text}) => Number(text).toFixed(2)
+            
+          })
+        // }
+        this.columns = columns;
+      },
       exportFile() {
         let array = [
           ['测点', '路段', '城区', '路长', '路宽', '平均Leq', '平均SD']