From a70ffbecae992d51819b4b54c403c67772d9f4af Mon Sep 17 00:00:00 2001
From: weicw <594098497@qq.com>
Date: Thu, 19 Aug 2021 17:14:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A3=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sound/road/collect/index.vue     |   7 +-
 src/views/sound/road/statistic/compare.vue | 470 +++++++++++++--------
 src/views/sound/road/statistic/index.vue   |   5 +-
 3 files changed, 297 insertions(+), 185 deletions(-)

diff --git a/src/views/sound/road/collect/index.vue b/src/views/sound/road/collect/index.vue
index 3e9ad64..18754f1 100644
--- a/src/views/sound/road/collect/index.vue
+++ b/src/views/sound/road/collect/index.vue
@@ -46,6 +46,7 @@
     methods: {
       /* 导入本地excel文件 */
       importFile(file) {
+        const hide = this.$message.loading('导入中..', 0);
         try {
           let reader = new FileReader();
           reader.onload = (e) => {
@@ -105,8 +106,10 @@
             // 上传到服务器
 
             Promise.all(tasks).then(() => {
-              this.$refs.noise.reload()
-              this.$refs.place.reload()
+              this.$refs.noise&&this.$refs.noise.reload()
+              this.$refs.place&&this.$refs.place.reload()
+            }).finally(()=>{
+              hide();
             })
 
             // console.log(billData);
diff --git a/src/views/sound/road/statistic/compare.vue b/src/views/sound/road/statistic/compare.vue
index a587f23..730415b 100644
--- a/src/views/sound/road/statistic/compare.vue
+++ b/src/views/sound/road/statistic/compare.vue
@@ -1,5 +1,80 @@
 <template>
   <div class="">
+    <a-form :model="where" :rules="whereRules" :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 name="timeRange" label="时间范围:">
+            <a-range-picker
+              @panelChange="timeRangePanelChange"
+              v-model:value="timeRange"
+              format="YYYY"
+              :mode="['year', 'year']"
+            />
+          </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="12" :md="12" :sm="24" :xs="24">
+          <a-form-item label="类型:">
+            <a-select
+              v-model:value="where.valueType"
+              :options="valueTypeOptions"
+              mode="multiple"
+              placeholder="至少选择一项"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
+              <a-form-item label="时间范围:">
+                <a-range-picker @change="reportTimeScopeChange" :mode="['year','year']" separator="~" v-model:value="where.reportTimeScope" ><a-range-picker>
+                   <template #renderExtraFooter>
+                      extra footer
+                    </template>
+                </a-range-picker>
+              </a-form-item>
+            </a-col> -->
+
+        <a-col :lg="12" :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>
     <ele-pro-table
       v-if="hisYears.length > 0"
       ref="table"
@@ -11,78 +86,14 @@
       :initLoad="false"
       :scroll="{ x: 'max-content' }"
       :method="'POST'"
-      @done="d=>data = d.data"
+      @done="(d) => (data = d.data)"
     >
       <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="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: 400px"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
-              <a-form-item label="时间范围:">
-                <a-range-picker @change="reportTimeScopeChange" :mode="['year','year']" separator="~" v-model:value="where.reportTimeScope" ><a-range-picker>
-                   <template #renderExtraFooter>
-                      extra footer
-                    </template>
-                </a-range-picker>
-              </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-space> -->
+        </a-space> -->
       </template>
     </ele-pro-table>
   </div>
@@ -101,9 +112,9 @@ export default {
   components: {},
   data() {
     const groupModelOptions = [
-      {label: "测点",value: "place"},
-      {label: "城区",value: "area"},
-      {label: "市",value: "city"},
+      { label: "测点", value: "place" },
+      { label: "城区", value: "area" },
+      { label: "市", value: "city" },
     ];
     const groupTimeLengthOptions = [
       {
@@ -124,7 +135,7 @@ export default {
       },
       {
         label: "SD",
-        value: "index_Sd",
+        value: "index_SD",
       },
       {
         label: "L10",
@@ -147,19 +158,23 @@ export default {
         value: "index_Lmax",
       },
     ];
+
+    const whereRules = {};
     return {
       url: pageRoadNoiseCompare,
       data: [],
       where: {
         groupModel: "area",
         groupTimeLength: "monitor_year",
-        timeSlot: "昼",
         reportTimeScope: [],
         valueType: ["index_Leq"],
+        timeRange:[]
       },
+      timeRange: [],
+      whereRules,
       hisYears: [],
       timeScope: [],
-      columns: [{title:'年',dataIndex: 'year'}],
+      columns: [{ title: "年", dataIndex: "year" }],
       groupModelOptions,
       groupTimeLengthOptions,
       valueTypeOptions: ref(valueTypeOptions),
@@ -178,15 +193,27 @@ export default {
   mounted() {
     getHistoryyears().then((res) => {
       this.hisYears = res.data.data;
-      this.$nextTick(()=>{
-       this.reload()
-      })
+      this.$nextTick(() => {
+        this.reload();
+      });
     });
   },
   methods: {
     /* 刷新表格 */
     reload() {
-      this.stableDone()
+      if (this.where.valueType.length == 0) {
+        this.$message.error("请至少选择一个类型");
+        return;
+      }
+
+      // 结束时间必须大于开始时间
+      if (this.where.timeRange && this.where.timeRange.length == 2) {
+        if (this.where.timeRange[0] > this.where.timeRange[1]) {
+          this.$message.error("结束时间必须大于起始时间");
+          return;
+        }
+      }
+      this.stableDone();
       this.$refs.table.reload({
         where: this.where,
       });
@@ -195,15 +222,19 @@ export default {
     reset() {
       this.where = {
         model: "place",
-        timeSlot: "昼",
       };
       this.this.timeScope = [];
-
       this.reload();
     },
     reportTimeScopeChange(d, dstr) {
       console.log(d, dstr);
     },
+    timeRangePanelChange(val) {
+      val[0]&&(this.where.timeRange[0] = val[0].year());
+      val[1]&&(this.where.timeRange[1] = val[1].year());
+      this.timeRange = val;
+    },
+    // 数据加载完成
     stableDone() {
       const columns = [];
       if (this.where.groupModel == "area") {
@@ -226,122 +257,203 @@ export default {
         });
       }
 
-      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")) {
+        if (this.where.groupTimeLength == "quarter") {
           columns.push({
-            title: item + "年Leq",
-            dataIndex: item + "Leq",
-            customRender: ({ text }) => {
-              const val = text ? Number(text).toFixed(2) : "";
-              console.log(val);
-              return val;
-            },
+            title: item + "年第一季度Leq",
+            dataIndex: item+'1'+"Leq",
+          });
+           columns.push({
+            title: item + "年第二季度Leq",
+            dataIndex: item+'2'+"Leq",
+          });
+           columns.push({
+            title: item + "年第三季度Leq",
+             dataIndex: item+'3'+"Leq",
+          });
+           columns.push({
+            title: item + "年第四季度Leq",
+             dataIndex: item+'4'+"Leq",
+          });
+           columns.push({
+            title: item + "年第一季度SD",
+            dataIndex: item+'1'+"Sd",
+          });
+           columns.push({
+            title: item + "年第二季度SD",
+            dataIndex: item+'2'+"Sd",
+          });
+           columns.push({
+            title: item + "年第三季度SD",
+             dataIndex: item+'3'+"Sd",
+          });
+           columns.push({
+            title: item + "年第四季度SD",
+             dataIndex: item+'4'+"Sd",
+          });
+           columns.push({
+            title: item + "年第一季度L10",
+            dataIndex: item+'1'+"L10",
+          });
+           columns.push({
+            title: item + "年第二季度L10",
+            dataIndex: item+'2'+"L10",
+          });
+           columns.push({
+            title: item + "年第三季度L10",
+             dataIndex: item+'3'+"L10",
+          });
+           columns.push({
+            title: item + "年第四季度L10",
+             dataIndex: item+'4'+"L10",
+          });
+           columns.push({
+            title: item + "年第一季度L50",
+            dataIndex: item+'1'+"L50",
+          });
+           columns.push({
+            title: item + "年第二季度L50",
+            dataIndex: item+'2'+"L50",
+          });
+           columns.push({
+            title: item + "年第三季度L50",
+             dataIndex: item+'3'+"L50",
+          });
+           columns.push({
+            title: item + "年第四季度L50",
+             dataIndex: item+'4'+"L50",
+          });
+         columns.push({
+            title: item + "年第一季度L90",
+            dataIndex: item+'1'+"L90",
+          });
+           columns.push({
+            title: item + "年第二季度L90",
+            dataIndex: item+'2'+"L90",
+          });
+           columns.push({
+            title: item + "年第三季度L90",
+             dataIndex: item+'3'+"L90",
+          });
+           columns.push({
+            title: item + "年第四季度L90",
+             dataIndex: item+'4'+"L90",
           });
-        }
-        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;
-            },
+            title: item + "年第一季度Lmin",
+            dataIndex: item+'1'+"Lmin",
+          });
+           columns.push({
+            title: item + "年第二季度Lmin",
+            dataIndex: item+'2'+"Lmin",
+          });
+           columns.push({
+            title: item + "年第三季度Lmin",
+             dataIndex: item+'3'+"Lmin",
+          });
+           columns.push({
+            title: item + "年第四季度Lmin",
+             dataIndex: item+'4'+"Lmin",
           });
-        }
-        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;
-            },
+            title: item + "年第一季度Lmax",
+            dataIndex: item+'1'+"Lmax",
           });
-        }
+           columns.push({
+            title: item + "年第二季度Lmax",
+            dataIndex: item+'2'+"Lmax",
+          });
+           columns.push({
+            title: item + "年第三季度Lmax",
+             dataIndex: item+'3'+"Lmax",
+          });
+           columns.push({
+            title: item + "年第四季度Lmax",
+             dataIndex: item+'4'+"Lmax",
+          });
+        } else {
+          if (this.where.valueType.includes("index_Leq")) {
+            columns.push({
+              title: item + "年Leq",
+              dataIndex: item + "Leq",
+              customRender: ({ text }) => {
+                const val = text ? Number(text).toFixed(2) : "";
+                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) : "";
+                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) : "";
+                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;
-            },
-          });
+          if (this.where.valueType.includes("index_L50")) {
+            columns.push({
+              title: item + "年L50",
+              dataIndex: item + "L50",
+              customRender: ({ text }) => {
+                const val = text ? Number(text).toFixed(2) : "";
+                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) : "";
+                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) : "";
+                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) : "";
+                return val;
+              },
+            });
+          }
         }
       });
-
-      // 
-      console.log(columns);
-
+      //
       this.columns = columns;
     },
     exportFile() {
       const arr = [];
-      const th = this.columns.map(item=>item.title);
-
-      arr.push(th)
+      const th = this.columns.map((item) => item.title);
+      arr.push(th);
       this.data.forEach((d) => {
-        const td = this.columns.map(item=>d[item.dataIndex]);
+        const td = this.columns.map((item) => d[item.dataIndex]);
         arr.push(td);
       });
       let sheet = XLSX.utils.aoa_to_sheet(arr);
diff --git a/src/views/sound/road/statistic/index.vue b/src/views/sound/road/statistic/index.vue
index 8d052c2..888ac8e 100644
--- a/src/views/sound/road/statistic/index.vue
+++ b/src/views/sound/road/statistic/index.vue
@@ -11,14 +11,11 @@
         <!-- <a-tab-pane key="quarter" tab="季度报告">
          <quarter-statistic></quarter-statistic>
         </a-tab-pane> -->
-        <a-tab-pane key="year-compare" tab="报告">
+        <a-tab-pane key="year-compare" tab="年度报告">
          <compare></compare>
         </a-tab-pane>
       </a-tabs>
-   
     </a-card>
-
-
   </div>
 </template>