市同比与年同比

src/views/sound/zone/statistic/average.vue

@@ -1,258 +1,213 @@
 <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="timeSlotOptions"
-                  v-model:value="where.timeSlot"
-                  placeholder="昼夜"
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form
+        :model="where"
+        :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
+      >
+        <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+            <a-form-item label="年份">
+              <a-select v-model:value="where.year" allowClear showSearch>
+                <a-select-option
+                  v-for="item in yearOptions"
+                  :key="item.value"
+                  >{{ item.label }}</a-select-option
                 >
-                </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>
-
-            <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>
-      <template #Leq="{ text, record }">
-        <a-tag
-          v-if="
-            (where.timeSlot == '昼' && text <= 68) ||
-            (where.timeSlot == '夜' && text <= 58)
-          "
-          color="green"
-          >{{ text }}</a-tag
-        >
-        <a-tag
-          v-else-if="
-            (record.timeSlot == '昼' && text > 68 && text <= 70) ||
-            (record.timeSlot == '夜' && text > 58 && text <= 60)
-          "
-          color="blue"
-          >{{ text }}</a-tag
-        >
-        <a-tag
-          v-else-if="
-            (record.timeSlot == '昼' && text > 70 && text <= 72) ||
-            (record.timeSlot == '夜' && text > 60 && text <= 62)
-          "
-          color="red"
-          >{{ text }}</a-tag
-        >
-        <a-tag
-          v-else-if="
-            (record.timeSlot == '昼' && text > 62 && text <= 74) ||
-            (record.timeSlot == '夜' && text > 62 && text <= 64)
-          "
-          color="red"
-          >{{ text }}</a-tag
-        >
-        <a-tag
-          v-else-if="
-            (record.timeSlot == '昼' && text > 74) ||
-            (record.timeSlot == '夜' && text > 64)
-          "
-          color="red"
-          >{{ text }}</a-tag
-        >
-        <template v-else color="#FFF">{{ text }}</template>
-      </template>
-    </ele-pro-table>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :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-model:selection="selectionList"
+        ref="table"
+        row-key="area"
+        :datasource="url"
+        :columns="columns"
+        :where="where"
+        :needPage="false"
+        :initLoad="false"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
   </div>
+  <!-- 编辑弹窗 -->
 </template>
 
 <script>
-import _ from "lodash";
+// import _ from "lodash";
 import XLSX from "xlsx";
-import { pageZoneNoiseStatisticUrl } from "@/api/ecology/zone-sound";
-const columns = [
-  {
-    title: "城区",
-    dataIndex: "area",
-  },
-
-  {
-    title: "市",
-    dataIndex: "city",
-  },
-  {
-    title: "路长",
-    dataIndex: "zoneLength",
-  },
-  {
-    title: "路宽",
-    dataIndex: "zoneWidth",
-  },
-  {
-    title: "LeqdB(A)",
-    dataIndex: "avgLeq",
-    slots: { customRender: "Leq" },
-    sorter: true,
-  },
-  {
-    title: "SDdB(A)",
-    dataIndex: "avgSD",
-  },
-  {
-    title: "L10dB(A)",
-    dataIndex: "avgL10",
-  },
-  {
-    title: "L50dB(A)",
-    dataIndex: "avgL50",
-  },
-  {
-    title: "L90dB(A)",
-    dataIndex: "avgL90",
-  },
-];
+import { pageZoneNoiseStatisticUrl, getColumnOptions } from "@/api/ecology/zone-sound";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+//   import utils from "./utils";
 export default {
   name: "StatisticSoundZoneAverage",
   components: {},
   data() {
     return {
-      url: pageZoneNoiseStatisticUrl,
       data: [],
-      where: {
-        model: "area",
-        timeSlot: "昼"
-      },
-      timeScope: [],
-      columns,
-      modelOptions: [
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageZoneNoiseStatisticUrl,
+      selection: [],
+      // 表格列配置
+      columns: [
         {
-          value: "place",
-          label: "测点",
+          title: "噪声源分类",
+          dataIndex: "source",
         },
         {
-          value: "zone",
-          label: "路段",
+          title: "测点数（个）",
+          dataIndex: "count",
         },
         {
-          value: "area",
-          label: "城区",
+          title: "声源占比（%）",
+          dataIndex: "rate",
         },
         {
-          value: "city",
-          label: "市",
-        },
-      ],
-      timeSlotOptions: [
-        {
-          value: "昼",
-          label: "昼",
-        },
-        {
-          value: "夜",
-          label: "夜",
+          title: "时段",
+          dataIndex: "timeSlot",
+        },
+        {
+          title: "监测结果",
+          children: [
+            {
+              title: "Leq",
+              dataIndex: "leq",
+            },
+            {
+              title: "L10",
+              dataIndex: "l10",
+            },
+            {
+              title: "L50",
+              dataIndex: "l50",
+            },
+            {
+              title: "L90",
+              dataIndex: "l90",
+            },
+          ],
         },
       ],
+      // 表格搜索条件
+      where: {},
+      yearOptions: [],
+      // 表格选中数据
+      selectionList: [],
     };
   },
+  mounted() {
+    this.loadOptionData();
+  },
   methods: {
+    /**获取下来框数据 */
+    loadOptionData() {
+      getColumnOptions("monitor_year").then((res) => {
+        this.yearOptions = res.data.data.map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+        this.reload();
+      });
+    },
     /* 刷新表格 */
     reload() {
+      const columns = [
+        {
+          title: "城区",
+          dataIndex: "area"
+        }
+      ]
+      this.yearOptions.forEach(item=>{
+        const {startYear,endYear} = this.where;
+        if((startYear&& Number(startYear)>Number(item.value))|| (endYear&&Number(endYear)<Number(item.value))){
+          console.log("");
+        }else{
+          columns.push({
+          title: item.value + "年噪声值",
+          dataIndex: item.value + "Leq"
+        })
+        }
+       
+      })
+      this.columns = columns;
+     
       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 != "zone";
-        });
-      } else if (this.where.model == "zone") {
-        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 != "zone" &&
-            item.dataIndex != "area"
-          );
-        });
-      }
     },
     /* 重置搜索 */
     reset() {
-      this.where = {
-        model: "area",
-        timeSlot: "昼",
-      };
-      this.this.timeScope = [];
-
       this.reload();
     },
     exportFile() {
-      let array = [
-        ["测点", "路段", "城区", "路长", "路宽", "平均Leq", "平均SD"],
+      const columns = [
+        {
+          title: "噪声源分类",
+          dataIndex: "source",
+        },
+        {
+          title: "测点数（个）",
+          dataIndex: "count",
+        },
+        {
+          title: "声源占比（%）",
+          dataIndex: "rate",
+        },
+        {
+          title: "时段",
+          dataIndex: "timeSlot",
+        },
+
+        {
+          title: "Leq",
+          dataIndex: "leq",
+        },
+        {
+          title: "L10",
+          dataIndex: "l10",
+        },
+        {
+          title: "L50",
+          dataIndex: "l50",
+        },
+        {
+          title: "L90",
+          dataIndex: "l90",
+        },
       ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
       this.data.forEach((d) => {
-        array.push([
-          d.place,
-          d.zone,
-          d.area,
-          d.zoneLength,
-          d.zoneWidth,
-          d.avgLeq,
-          d.avgSD,
-        ]);
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
       });
-      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, "道路交通噪声统计表");
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
     },
   },
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
 </style>