解析空气

src/views/atmosphere/air/statistic/source.vue

@@ -0,0 +1,195 @@
+<template>
+  <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="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="(record) => record.source + record.timeSlot"
+        :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 XLSX from "xlsx";
+import { statisticSourceUrl, 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: "StatisticSoundZoneSource",
+  components: {},
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: statisticSourceUrl,
+      selection: [],
+      // 表格列配置
+      columns: [
+        {
+          title: "噪声源分类",
+          dataIndex: "source",
+        },
+        {
+          title: "测点数（个）",
+          dataIndex: "count",
+        },
+        {
+          title: "声源占比（%）",
+          dataIndex: "rate",
+        },
+        {
+          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.where.year = this.yearOptions[0].value;
+        this.reload();
+      });
+    },
+    /* 刷新表格 */
+    reload() {
+      this.$refs.table.reload({
+        where: this.where,
+      });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.reload();
+    },
+    exportFile() {
+      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) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>