From 32f748856ea9641d60ee97949d9e54ff9f947970 Mon Sep 17 00:00:00 2001
From: weicw <594098497@qq.com>
Date: Fri, 28 Jan 2022 07:09:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E6=B0=94=E6=95=B0=E6=8D=AE=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/atmosphere/air/statistic/base.vue | 647 +++++++++++---------
 1 file changed, 368 insertions(+), 279 deletions(-)

diff --git a/src/views/atmosphere/air/statistic/base.vue b/src/views/atmosphere/air/statistic/base.vue
index 5941355..040af09 100644
--- a/src/views/atmosphere/air/statistic/base.vue
+++ b/src/views/atmosphere/air/statistic/base.vue
@@ -1,60 +1,65 @@
 <template>
-    <div class="ele-body">
-        <a-card :bordered="false">
-            <!-- 搜索表单 -->
-            <a-form
-                :model="where"
-                layout="inline"
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form
+        :model="where"
+        layout="inline"
+      >
+        <a-form-item label="起始日期:">
+          <a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker>
+        </a-form-item>
+        <a-form-item label="结束日期:">
+          <a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
+        </a-form-item>
+        <a-form-item label="区域等级:">
+          <a-select v-model:value="where.regionLevel" placeholder="选择区域等级" allowClear showSearch>
+            <a-select-option
+              v-for="(item) in regionLevelOptions"
+              :key="item.value"
+            >{{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="监测点:">
+          <a-select v-model:value="where.place" placeholder="选择监测点" allowClear showSearch>
+            <a-select-option
+              v-for="(item) in placeOptions"
+              :key="item.value"
+            >{{ item.label }}
+            </a-select-option
             >
-                <a-form-item label="起始日期:">
-                    <a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker>
-                </a-form-item>
-                <a-form-item label="结束日期:">
-                    <a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
-                </a-form-item>
-                        <a-form-item label="区域等级:">
-                            <a-select v-model:value="where.regionLevel"  placeholder="选择区域等级" allowClear showSearch>
-                                <a-select-option
-                                    v-for="(item) in regionLevelOptions"
-                                    :key="item.value"
-                                >{{ item.label }}
-                                </a-select-option>
-                            </a-select>
-                        </a-form-item>
-                        <a-form-item label="监测点:">
-                            <a-select v-model:value="where.place" placeholder="选择监测点" allowClear showSearch>
-                                <a-select-option
-                                    v-for="(item) in placeOptions"
-                                    :key="item.value"
-                                >{{ item.label }}
-                                </a-select-option
-                                >
-                            </a-select>
-                        </a-form-item>
+          </a-select>
+        </a-form-item>
 
-                        <a-space>
-                            <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
-                            <a-button @click="exportFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出Excel</a-button>
-                        </a-space>
-            </a-form>
-            <!-- 表格 -->
-            <ele-pro-table
-                v-model:selection="selectionList"
-                ref="table"
-                row-key="ambientAirId"
-                :datasource="url"
-                :columns="columns"
-                :where="where"
-                :scroll="{ x: 'max-content' }"
-                @done="(d) => (data = d.data)"
-                :init-load="false"
-            >
+        <a-space>
+          <a-button type="primary" @click="reload">查询</a-button>
+          <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+          <a-button @click="exportCityFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">
+            市级模板导出
+          </a-button>
+          <a-button @click="exportCountyFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">
+            县级模板导出
+          </a-button>
+        </a-space>
+      </a-form>
+      <!-- 表格 -->
+      <ele-pro-table
+        v-model:selection="selectionList"
+        ref="table"
+        row-key="ambientAirId"
+        :datasource="url"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+        :init-load="false"
+      >
 
-            </ele-pro-table>
-        </a-card>
-    </div>
-    <!-- 编辑弹窗 -->
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
 </template>
 
 <script>
@@ -65,235 +70,319 @@ import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
 import moment from "moment";
 //   import utils from "./utils";
 export default {
-    name: "StatisticAirBase",
-    components: {},
-    data() {
-        const year = new Date().getFullYear();
-        return {
-            data: [],
-            locale,
-            bill: {},
-            // 表格数据接口
-            url: pageAirUrl,
-            selection: [],
-            // 表格列配置
-            columns: [
-                {
-                    title: "监测日期",
-                    dataIndex: "monitorTime",
-                    sorter: true,
-                    customRender: ({text}) => moment(text).format("YYYY-MM-DD")
-                },
-                {
-                    title: "城市",
-                    dataIndex: "city",
-                    sorter: true,
-                },
-                {
-                    title: "测点名称",
-                    dataIndex: "place",
-                    sorter: true,
-                },
-                {
-                    title: "SO2/(μg/m3)",
-                    dataIndex: "so2",
-                    sorter: true,
-                },
-                {
-                    title: "NO2/(μg/m3)",
-                    dataIndex: "no2",
-                    sorter: true,
-                },
-                {
-                    title: "PM10/(μg/m3)",
-                    dataIndex: "pm10",
-                    sorter: true,
-                },
-                {
-                    title: "CO/(mg/m3)",
-                    dataIndex: "co",
-                    sorter: true,
-                },
-                {
-                    title: "臭氧（O3）最大8小时滑动平均浓度/(μg/m3)",
-                    dataIndex: "o3",
-                    sorter: true,
-                },
-                {
-                    title: "PM2.5",
-                    dataIndex: "pm25",
-                    sorter: true,
-                },
-                {
-                    title: "空气质量指数AQI",
-                    dataIndex: "aqi",
-                    sorter: true,
-                },
-                {
-                    title: "首要污染物",
-                    dataIndex: "primaryPollutant",
-                    sorter: true,
-                },
-                {
-                    title: "空气质量指数级别",
-                    dataIndex: "aqiLevel",
-                    sorter: true,
-                },
-                {
-                    title: "空气质量状况",
-                    dataIndex: "airQualityStatus",
-                    sorter: true,
-                },
-                {
-                    title: "备注",
-                    dataIndex: "remark",
-                    sorter: true,
-                },
-                {
-                    title: "创建人",
-                    dataIndex: "username",
-                    sorter: true,
-                }
-            ],
-            regionLevelOptions: [
-                {label: "市区", value: "city"},
-                {label: "城区", value: "area"},
-                {label: "县区", value: "county"},
-                {label: "站点", value: "place"},
-            ],
-            placeOptions:[],
-            time:[],
-            // 表格搜索条件
-            where: {
-                checked: 1,
-                timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
-                timeEnd: moment().format("YYYY-MM-DD 23:59:59")
-            },
-            // 表格选中数据
-            selectionList: [],
-        };
+  name: "StatisticAirBase",
+  components: {},
+  data() {
+    const year = new Date().getFullYear();
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageAirUrl,
+      selection: [],
+      // 表格列配置
+      columns: [
+        {
+          title: "监测日期",
+          dataIndex: "monitorTime",
+          sorter: true,
+          customRender: ({text}) => moment(text).format("YYYY-MM-DD")
+        },
+        {
+          title: "城市",
+          dataIndex: "city",
+          sorter: true,
+        },
+        {
+          title: "测点名称",
+          dataIndex: "place",
+          sorter: true,
+        },
+        {
+          title: "SO2/(μg/m3)",
+          dataIndex: "so2",
+          sorter: true,
+        },
+        {
+          title: "NO2/(μg/m3)",
+          dataIndex: "no2",
+          sorter: true,
+        },
+        {
+          title: "PM10/(μg/m3)",
+          dataIndex: "pm10",
+          sorter: true,
+        },
+        {
+          title: "CO/(mg/m3)",
+          dataIndex: "co",
+          sorter: true,
+        },
+        {
+          title: "臭氧（O3）最大8小时滑动平均浓度/(μg/m3)",
+          dataIndex: "o3",
+          sorter: true,
+        },
+        {
+          title: "PM2.5",
+          dataIndex: "pm25",
+          sorter: true,
+        },
+        {
+          title: "空气质量指数AQI",
+          dataIndex: "aqi",
+          sorter: true,
+        },
+        {
+          title: "首要污染物",
+          dataIndex: "primaryPollutant",
+          sorter: true,
+        },
+        {
+          title: "空气质量指数级别",
+          dataIndex: "aqiLevel",
+          sorter: true,
+        },
+        {
+          title: "空气质量状况",
+          dataIndex: "airQualityStatus",
+          sorter: true,
+        },
+        {
+          title: "备注",
+          dataIndex: "remark",
+          sorter: true,
+        },
+        {
+          title: "创建人",
+          dataIndex: "username",
+          sorter: true,
+        }
+      ],
+      regionLevelOptions: [
+        {label: "市区", value: "city"},
+        {label: "城区", value: "area"},
+        {label: "县区", value: "county"},
+        {label: "站点", value: "place"},
+      ],
+      placeOptions: [],
+      time: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+        timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
+        timeEnd: moment().format("YYYY-MM-DD 23:59:59")
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  mounted() {
+    this.loadOptionData();
+    this.reload();
+  },
+  methods: {
+    /**获取下来框数据 */
+    loadOptionData() {
+      getColumnOptions("place").then((res) => {
+        this.placeOptions = res.data.data.map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
     },
-    mounted() {
-        this.loadOptionData();
-        this.reload();
+    /* 刷新表格 */
+    reload() {
+      this.$refs.table.reload({
+        where: this.where,
+      });
     },
-    methods: {
-        /**获取下来框数据 */
-        loadOptionData() {
-            getColumnOptions("place").then((res) => {
-                this.placeOptions = res.data.data.map((item) => {
-                    return {
-                        label: item,
-                        value: item,
-                    };
-                });
-            });
-        },
-        /* 刷新表格 */
-        reload() {
-            this.$refs.table.reload({
-                where: this.where,
-            });
-        },
-        /* 重置搜索 */
-        reset() {
-            this.where = {
-                checked: 1,
-            };
-            this.reload();
-        },
-        exportFile() {
-
-            const columns = [
-                {
-                    title: "监测日期",
-                    dataIndex: "monitorTime",
-                    sorter: true,
-                    customRender: ({text}) => moment(text).format("YYYY-MM-DD HH:mm")
-                },
-                {
-                    title: "城市",
-                    dataIndex: "city",
-                    sorter: true,
-                },
-                {
-                    title: "测点名称",
-                    dataIndex: "place",
-                    sorter: true,
-                },
-                {
-                    title: "SO2/(μg/m3)",
-                    dataIndex: "so2",
-                    sorter: true,
-                },
-                {
-                    title: "NO2/(μg/m3)",
-                    dataIndex: "no2",
-                    sorter: true,
-                },
-                {
-                    title: "PM10/(μg/m3)",
-                    dataIndex: "pm10",
-                    sorter: true,
-                },
-                {
-                    title: "CO/(mg/m3)",
-                    dataIndex: "co",
-                    sorter: true,
-                },
-                {
-                    title: "臭氧（O3）最大8小时滑动平均浓度/(μg/m3)",
-                    dataIndex: "o3",
-                    sorter: true,
-                },
-                {
-                    title: "PM2.5",
-                    dataIndex: "pm25",
-                    sorter: true,
-                },
-                {
-                    title: "空气质量指数AQI",
-                    dataIndex: "aqi",
-                    sorter: true,
-                },
-                {
-                    title: "首要污染物",
-                    dataIndex: "primaryPollutant",
-                    sorter: true,
-                },
-                {
-                    title: "空气质量指数级别",
-                    dataIndex: "aqiLevel",
-                    sorter: true,
-                },
-                {
-                    title: "空气质量状况",
-                    dataIndex: "airQualityStatus",
-                    sorter: true,
-                },
-                {
-                    title: "备注",
-                    dataIndex: "remark",
-                    sorter: true,
-                },
-            ];
-            const arr = [];
-            const th = columns.map((item) => item.title);
-            arr.push(th);
-            listAllAir(this.where).then(res => {
-                if (res.data.code == 0) {
-                    res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");
-
-                }
-            })
-
-        },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
     },
+    exportCityFile() {
+
+      const columns = [
+
+        {
+          title: "城市",
+          dataIndex: "city",
+          sorter: true,
+        },
+        {
+          title: "时间",
+          dataIndex: "monitorTime",
+          sorter: true,
+          customRender: ({text}) => moment(text).format("YYYY-MM-DD HH:mm")
+        },
+        {
+          title: "二氧化硫浓度/(μg/m3)",
+          dataIndex: "so2",
+          sorter: true,
+        },
+        {
+          title: "二氧化氮浓度/(μg/m3)",
+          dataIndex: "no2",
+          sorter: true,
+        },
+        {
+          title: "可吸入颗粒物浓度/(μg/m3)",
+          dataIndex: "pm10",
+          sorter: true,
+        },
+        {
+          title: "一氧化碳浓度/(mg/m3)",
+          dataIndex: "co",
+          sorter: true,
+        },
+        {
+          title: "臭氧（O3）最大8小时滑动平均浓度/(μg/m3)",
+          dataIndex: "o3",
+          sorter: true,
+        },
+        {
+          title: "细颗粒物浓度/(μg/m3)",
+          dataIndex: "pm25",
+          sorter: true,
+        },
+
+        {
+          title: "空气质量指数AQI",
+          dataIndex: "aqi",
+          sorter: true,
+        },
+        {
+          title: "首要污染物",
+          dataIndex: "primaryPollutant",
+          sorter: true,
+        },
+        {
+          title: "空气质量指数级别",
+          dataIndex: "aqiLevel",
+          sorter: true,
+        },
+        {
+          title: "类别",
+          dataIndex: "airQualityStatus",
+          sorter: true,
+        },
+        {
+          title: "备注",
+          dataIndex: "remark",
+          sorter: true,
+        },
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      listAllAir(this.where).then(res => {
+        if (res.data.code == 0) {
+          res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");
+
+        }
+      })
+
+    },
+
+    exportCountyFile() {
+
+      const columns = [
+        {
+          title: "测点名称",
+          dataIndex: "place",
+          sorter: true,
+        },
+        {
+          title: "日期",
+          dataIndex: "monitorTime",
+          sorter: true,
+          customRender: ({text}) => moment(text).format("YYYY-MM-DD")
+        },
+        {
+          title: "空气质量状况",
+          dataIndex: "airQualityStatus",
+          sorter: true,
+        },
+        {
+          title: "空气质量指数级别",
+          dataIndex: "aqiLevel",
+          sorter: true,
+        },
+        {
+          title: "AQI",
+          dataIndex: "aqi",
+          sorter: true,
+        },
+        {
+          title: "首要污染物",
+          dataIndex: "primaryPollutant",
+          sorter: true,
+        },
+        {
+          title: "SO2)",
+          dataIndex: "so2",
+          sorter: true,
+        },
+        {
+          title: "NO2",
+          dataIndex: "no2",
+          sorter: true,
+        },
+        {
+          title: "PM10",
+          dataIndex: "pm10",
+          sorter: true,
+        },
+        {
+          title: "CO",
+          dataIndex: "co",
+          sorter: true,
+        },
+        {
+          title: "O3-8h",
+          dataIndex: "o3",
+          sorter: true,
+        },
+        {
+          title: "PM2.5",
+          dataIndex: "pm25",
+          sorter: true,
+        },
+        {
+          title: "备注",
+          dataIndex: "remark",
+          sorter: true,
+        },
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      listAllAir(this.where).then(res => {
+        if (res.data.code == 0) {
+          res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");
+
+        }
+      })
+
+    },
+  },
 };
 </script>