From bd6b2140c59d38ebcd631eb6d4b5651699d37a79 Mon Sep 17 00:00:00 2001
From: shixiaoman <531268472@qq.com>
Date: Mon, 22 Nov 2021 10:41:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B1=9F=E6=B2=B3=E6=B0=B4=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=87=87=E9=9B=86=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../water/river-station/statistic/colums.js   |  27 +
 .../river-station/statistic/site-day-avg.vue  | 508 ++++++++++++
 .../water/river-station/statistic/site.vue    | 570 ++++++++++++++
 src/views/water/river/collect/colums.js       | 279 +++++--
 src/views/water/river/collect/index.vue       | 745 +++++++++---------
 src/views/water/river/statistic/area-base.vue | 249 ++++++
 src/views/water/river/statistic/area.vue      | 309 ++++++++
 src/views/water/river/statistic/avg.vue       | 228 ++++++
 .../river/statistic/city-county-place.vue     | 286 +++++++
 src/views/water/river/statistic/index.vue     |  81 +-
 .../water-function-area/statistic/auto.vue    | 325 ++++++++
 .../statistic/national.vue                    | 354 +++++++++
 12 files changed, 3503 insertions(+), 458 deletions(-)
 create mode 100644 src/views/water/river-station/statistic/colums.js
 create mode 100644 src/views/water/river-station/statistic/site-day-avg.vue
 create mode 100644 src/views/water/river-station/statistic/site.vue
 create mode 100644 src/views/water/river/statistic/area-base.vue
 create mode 100644 src/views/water/river/statistic/area.vue
 create mode 100644 src/views/water/river/statistic/avg.vue
 create mode 100644 src/views/water/river/statistic/city-county-place.vue
 create mode 100644 src/views/water/water-function-area/statistic/auto.vue
 create mode 100644 src/views/water/water-function-area/statistic/national.vue

diff --git a/src/views/water/river-station/statistic/colums.js b/src/views/water/river-station/statistic/colums.js
new file mode 100644
index 0000000..094a206
--- /dev/null
+++ b/src/views/water/river-station/statistic/colums.js
@@ -0,0 +1,27 @@
+const tableColumns = [
+    {title: "水体类型", dataIndex: "waterBodyType", sorter: true,},
+    {title: "水资源一级区名称", dataIndex: "waterResourcesFirstLevelZoneName", sorter: true,},
+    {title: "水质目标", dataIndex: "waterQualityGoal", sorter: true,},
+    {title: "数据来源", dataIndex: "dataSources", sorter: true,},
+    {title: "断面名称", dataIndex: "sectionName", sorter: true,},
+    // {title: "采样时间", dataIndex: "samplingTime", sorter: true,},
+    {title: "溶解氧", dataIndex: "dissolvedOxygen", sorter: true,},
+    {title: "高锰酸盐指数", dataIndex: "permanganateIndex", sorter: true,},
+    {title: "化学需氧量", dataIndex: "cod", sorter: true,},
+    {title: "五日生化需氧量", dataIndex: "fiveDayBod", sorter: true,},
+    {title: "氨氮", dataIndex: "ammonia", sorter: true,},
+    {title: "总磷", dataIndex: "totalPhosphorus", sorter: true,},
+
+    {title: "水功能区水质类别", dataIndex: "ffeWaterFunctionAreaWaterQualityCategory"},
+    {title: "达标评价结论", dataIndex: "ffeCompliantEvaluationConclusion"},
+    {title: "主要超标项目及其超标倍数", dataIndex: "ffeMajorOverStandardItemsMultiples"},
+
+    {title: "水功能区水质类别", dataIndex: "lprlWaterFunctionAreaWaterQualityCategory"},
+    {title: "达标评价结论", dataIndex: "lprlCompliantEvaluationConclusion"},
+    {title: "主要超标项目及其超标倍数", dataIndex: "lprlMajorOverStandardItemsMultiples"},
+    {title: "系统编码", dataIndex: "systemCode", sorter: true,},
+    {title: "备注", dataIndex: "remark", sorter: true,},
+
+];
+
+export {tableColumns}
diff --git a/src/views/water/river-station/statistic/site-day-avg.vue b/src/views/water/river-station/statistic/site-day-avg.vue
new file mode 100644
index 0000000..43bbc77
--- /dev/null
+++ b/src/views/water/river-station/statistic/site-day-avg.vue
@@ -0,0 +1,508 @@
+<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"
+      row-key="id"
+      :datasource="url"
+      :columns="columns"
+      :where="where"
+      :needPage="false"
+      :initLoad="false"
+      :scroll="{ x: 'max-content' }"
+      :method="'POST'"
+      @done="(d) => (data = d.data)"
+    >
+      <template #toolbar>
+        <!-- 搜索表单 -->
+
+        <!-- <a-space>
+            
+        </a-space> -->
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script>
+// import _ from "lodash";
+import { ref } from "vue";
+import XLSX from "xlsx";
+import {
+  pageRoadNoiseCompare,
+  getHistoryyears,
+} from "@/api/ecology/noise/road-sound";
+export default {
+  name: "StatisticSoundRoadCompare",
+  components: {},
+  data() {
+    const groupModelOptions = [
+      { label: "测点", value: "place" },
+      { label: "城区", value: "area" },
+      { label: "市", value: "city" },
+    ];
+    const groupTimeLengthOptions = [
+      {
+        label: "年",
+        value: "monitor_year",
+      },
+      {
+        label: "季度",
+        value: "quarter",
+      },
+    ];
+
+    // const valueTypeOptions = ['Leq','SD','L10','L50','L90','Lmin','Lmax'];
+    const valueTypeOptions = [
+      {
+        label: "Leq",
+        value: "index_Leq",
+      },
+      {
+        label: "SD",
+        value: "index_SD",
+      },
+      {
+        label: "L10",
+        value: "index_L10",
+      },
+      {
+        label: "L50",
+        value: "index_L50",
+      },
+      {
+        label: "L90",
+        value: "index_L90",
+      },
+      {
+        label: "Lmin",
+        value: "index_Lmin",
+      },
+      {
+        label: "Lmax",
+        value: "index_Lmax",
+      },
+    ];
+
+    const whereRules = {};
+    return {
+      url: pageRoadNoiseCompare,
+      data: [],
+      where: {
+        groupModel: "area",
+        groupTimeLength: "monitor_year",
+        reportTimeScope: [],
+        valueType: ["index_Leq"],
+        timeRange: [],
+        regionLevel: "市级"
+      },
+      timeRange: [],
+      whereRules,
+      hisYears: [],
+      timeScope: [],
+      columns: [{ title: "年", dataIndex: "year" }],
+      groupModelOptions,
+      groupTimeLengthOptions,
+      valueTypeOptions: ref(valueTypeOptions),
+      timeSlotOptions: [
+        {
+          value: "昼",
+          label: "昼",
+        },
+        {
+          value: "夜",
+          label: "夜",
+        },
+      ],
+    };
+  },
+  mounted() {
+    getHistoryyears().then((res) => {
+      this.hisYears = res.data.data;
+      this.$nextTick(() => {
+        this.reload();
+      });
+    });
+  },
+  methods: {
+    /* 刷新表格 */
+    reload() {
+      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.where.startYear = this.where.timeRange[0];
+        this.where.endYear = this.where.timeRange[1];
+      }
+      this.stableDone();
+      this.$refs.table.reload({
+        where: this.where,
+      });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        groupModel: "area",
+        groupTimeLength: "monitor_year",
+        reportTimeScope: [],
+        valueType: ["index_Leq"],
+        timeRange: [],
+        regionLevel: "市级"
+      };
+      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") {
+        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,
+        });
+      }
+
+      this.hisYears.forEach((item) => {
+        if (
+          (!this.where.timeRange[0] || this.where.timeRange[0] <= item) &&
+          (!this.where.timeRange[1] || this.where.timeRange[1] >= item)
+        ) {
+          if (this.where.groupTimeLength == "quarter") {
+            columns.push({
+              title: item + "年第一季度Leq",
+              dataIndex: item + "1" + "Leq",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度Leq",
+              dataIndex: item + "2" + "Leq",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度Leq",
+              dataIndex: item + "3" + "Leq",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度Leq",
+              dataIndex: item + "4" + "Leq",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第一季度SD",
+              dataIndex: item + "1" + "Sd",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度SD",
+              dataIndex: item + "2" + "Sd",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度SD",
+              dataIndex: item + "3" + "Sd",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度SD",
+              dataIndex: item + "4" + "Sd",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第一季度L10",
+              dataIndex: item + "1" + "L10",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度L10",
+              dataIndex: item + "2" + "L10",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度L10",
+              dataIndex: item + "3" + "L10",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度L10",
+              dataIndex: item + "4" + "L10",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第一季度L50",
+              dataIndex: item + "1" + "L50",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度L50",
+              dataIndex: item + "2" + "L50",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度L50",
+              dataIndex: item + "3" + "L50",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度L50",
+              dataIndex: item + "4" + "L50",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第一季度L90",
+              dataIndex: item + "1" + "L90",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度L90",
+              dataIndex: item + "2" + "L90",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度L90",
+              dataIndex: item + "3" + "L90",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度L90",
+              dataIndex: item + "4" + "L90",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第一季度Lmin",
+              dataIndex: item + "1" + "Lmin",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度Lmin",
+              dataIndex: item + "2" + "Lmin",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度Lmin",
+              dataIndex: item + "3" + "Lmin",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度Lmin",
+              dataIndex: item + "4" + "Lmin",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第一季度Lmax",
+              dataIndex: item + "1" + "Lmax",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第二季度Lmax",
+              dataIndex: item + "2" + "Lmax",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第三季度Lmax",
+              dataIndex: item + "3" + "Lmax",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+            columns.push({
+              title: item + "年第四季度Lmax",
+              dataIndex: item + "4" + "Lmax",
+              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
+            });
+          } else {
+            if (this.where.valueType.includes("index_Leq")) {
+              columns.push({
+                title: item + "年Leq",
+                dataIndex: item + "Leq",
+                customRender: ({ text }) => {
+                  const val = text ? Number(text).toFixed(1) : "";
+                  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(1) : "";
+                  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(1) : "";
+                  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(1) : "";
+                  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(1) : "";
+                  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(1) : "";
+                  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(1) : "";
+                  return val;
+                },
+              });
+            }
+          }
+        }
+      });
+      //
+      this.columns = columns;
+    },
+    exportFile() {
+      const arr = [];
+      const th = this.columns.map((item) => item.title);
+      arr.push(th);
+      this.data.forEach((d) => {
+        const td = this.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>
+</style>
\ No newline at end of file
diff --git a/src/views/water/river-station/statistic/site.vue b/src/views/water/river-station/statistic/site.vue
new file mode 100644
index 0000000..39bfef4
--- /dev/null
+++ b/src/views/water/river-station/statistic/site.vue
@@ -0,0 +1,570 @@
+<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.regionLevel" allowClear showSearch>
+                <a-select-option
+                  v-for="(item) in regionLevelOptions"
+                  :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 label="测点名称:">
+              <a-select v-model:value="where.place" allowClear showSearch>
+                <a-select-option
+                  v-for="(item) in palceOptions"
+                  :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 label="路段:">
+              <a-select v-model:value="where.road" allowClear showSearch>
+                <a-select-option
+                  v-for="(item) in roadOptions"
+                  :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 label="城区">
+              <a-select v-model:value="where.area" allowClear showSearch>
+                <a-select-option
+                  v-for="(item) in areaOptions"
+                  :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="roadNoiseId"
+        :datasource="url"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+        <template #Leq="{ text,record  }">
+          <a-tag v-if="(record.timeSlot == '昼' && text <= 68) || (record.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-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import { pageRoadNoiseUrl, getColumnOptions } from "@/api/ecology/noise/road-sound";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import moment from "moment";
+//   import utils from "./utils";
+export default {
+  name: "StatisticSoundRoadBase",
+  components: {},
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageRoadNoiseUrl,
+      selection: [],
+      // 表格列配置
+      columns: [
+        {
+          title: "监测日期",
+          dataIndex: "monitorTime",
+          sorter: true,
+        },
+        {
+          title: "测点名称",
+          dataIndex: "place",
+          sorter: true,
+        },
+        {
+          title: "点号",
+          dataIndex: "placeCode",
+          sorter: true,
+        },
+        {
+          title: "所属路段",
+          dataIndex: "road",
+          sorter: true,
+        },
+        {
+          title: "所属城区",
+          dataIndex: "area",
+          sorter: true,
+        },
+        {
+          title: "路长",
+          dataIndex: "roadLength",
+          sorter: true,
+        },
+        {
+          title: "路宽",
+          dataIndex: "roadWidth",
+          sorter: true,
+        },
+        {
+          title: "中小型车流量（辆/20分钟）",
+          dataIndex: "smallTrafficFlow",
+          sorter: true,
+        },
+        {
+          title: "大型车流量（辆/20分钟）",
+          dataIndex: "largeTrafficFlow",
+          sorter: true,
+        },
+        {
+          title: "时段",
+          dataIndex: "timeSlot",
+          sorter: true,
+        },
+        //   {
+        //     title: '月',
+        //     dataIndex: 'monitorMonth',
+        //     sorter: true
+        //   },
+        //   {
+        //     title: '日',
+        //     dataIndex: 'monitorDay',
+        //     sorter: true
+        //   },
+        //   {
+        //     title: '时',
+        //     dataIndex: 'monitorHour',
+        //     sorter: true
+        //   },
+        //   {
+        //     title: '分',
+        //     dataIndex: 'monitorMinute',
+        //     sorter: true
+        //   },
+        {
+          title: "LeqdB(A)",
+          dataIndex: "indexLeq",
+          slots: {customRender: "Leq"},
+          sorter: true,
+          
+        },
+        {
+          title: "SDdB(A)",
+          dataIndex: "indexSd",
+          sorter: true,
+        },
+        {
+          title: "L10dB(A)",
+          dataIndex: "indexL10",
+          sorter: true,
+        },
+        {
+          title: "L50dB(A)",
+          dataIndex: "indexL50",
+          sorter: true,
+        },
+        {
+          title: "L90dB(A)",
+          dataIndex: "indexL90",
+          sorter: true,
+        },
+        {
+          title: "LmindB(A)",
+          dataIndex: "indexLmin",
+          sorter: true,
+        },
+        {
+          title: "LmaxdB(A)",
+          dataIndex: "indexLmax",
+          sorter: true,
+        },
+        {
+          title: "测点经度",
+          dataIndex: "placeLng",
+          sorter: true,
+        },
+        {
+          title: "测点纬度",
+          dataIndex: "placeLat",
+          sorter: true,
+        },
+        {
+          title: "机动车车道数",
+          dataIndex: "motorway",
+          sorter: true,
+        },
+        {
+          title: "车道类别",
+          dataIndex: "motorwayType",
+          sorter: true,
+        },
+        {
+          title: "道路等级",
+          dataIndex: "motorwayLevel",
+          sorter: true,
+        },
+        {
+          title: "测点参照物",
+          dataIndex: "refObj",
+          sorter: true,
+        },
+        {
+          title: "道路覆盖人口（万人）",
+          dataIndex: "people",
+          sorter: true,
+        },
+        {
+          title: "监测站名",
+          dataIndex: "station",
+          sorter: true,
+        },
+        {
+          title: "监测仪器型号",
+          dataIndex: "monitorInstrumentModel",
+          sorter: true,
+        },
+        {
+          title: "监测仪器编号",
+          dataIndex: "monitorInstrumentCode",
+          sorter: true,
+        },
+        {
+          title: "监测前校准值",
+          dataIndex: "beforeMonitorValue",
+          sorter: true,
+        },
+        {
+          title: "声校准器测量声压值",
+          dataIndex: "soundPressureValue",
+          sorter: true,
+        },
+        {
+          title: "声校准仪器型号",
+          dataIndex: "soundInstrumentModel",
+          sorter: true,
+        },
+        {
+          title: "声校准仪器编号",
+          dataIndex: "soundInstrumentCode",
+          sorter: true,
+        },
+         {
+          title: "区域等级",
+          dataIndex: "regionLevel",
+          sorter: true,
+        },
+        {
+          title: "备注",
+          dataIndex: "remark",
+          sorter: true,
+        },
+        {
+          title: "创建人",
+          dataIndex: "username",
+          sorter: true,
+        },
+      ],
+      palceOptions: [],
+      areaOptions: [],
+      roadOptions: [],
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  mounted() {
+    this.loadOptionData();
+  },
+  methods: {
+    /**获取下来框数据 */
+    loadOptionData() {
+      getColumnOptions("place").then((res) => {
+        this.palceOptions = res.data.data.map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
+      getColumnOptions("area").then((res) => {
+        this.areaOptions = res.data.data.map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
+      getColumnOptions("road").then((res) => {
+        this.roadOptions = res.data.data.map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
+      getColumnOptions("region_level").then((res) => {
+        this.regionLevelOptions = 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: "regionCode",
+          sorter: true,
+        },
+        {
+          title: "监测年度",
+          dataIndex: "monitorYear",
+          sorter: true,
+        },
+        {
+          title: "点位编码",
+          dataIndex: "placeCode",
+          sorter: true,
+        },
+        {
+          title: "测点名称",
+          dataIndex: "place",
+          sorter: true,
+        },
+        {
+          title: "测点经度",
+          dataIndex: "placeLng",
+          sorter: true,
+        },
+        {
+          title: "测点纬度",
+          dataIndex: "placeLat",
+          sorter: true,
+        },
+        {
+          title: "路段名称",
+          dataIndex: "road",
+          sorter: true,
+        },
+         {
+          title: "路段长度（m）",
+          dataIndex: "roadLength",
+          sorter: true,
+        },
+        {
+          title: "道路总宽度（m）",
+          dataIndex: "roadWidth",
+          sorter: true,
+        },
+         {
+          title: "机动车车道数",
+          dataIndex: "motorway",
+          sorter: true,
+        },
+        {
+          title: "车道类别",
+          dataIndex: "motorwayType",
+          sorter: true,
+        },
+        {
+          title: "道路等级",
+          dataIndex: "motorwayLevel",
+          sorter: true,
+        },
+        {
+          title: "测点参照物",
+          dataIndex: "refObj",
+          sorter: true,
+        },
+         {
+          title: "路段覆盖人口（万人）",
+          dataIndex: "people",
+          sorter: true,
+        },
+        {
+          title: "月",
+          dataIndex: "monitorMonth",
+          sorter: true,
+        },
+        {
+          title: "日",
+          dataIndex: "monitorDay",
+          sorter: true,
+        },
+        {
+          title: "时",
+          dataIndex: "monitorHour",
+          sorter: true,
+        },
+        {
+          title: "分",
+          dataIndex: "monitorMinute",
+          sorter: true,
+        },
+       
+       
+        {
+          title: "中小型车20min车流量",
+          dataIndex: "smallTrafficFlow",
+          sorter: true,
+        },
+        {
+          title: "大型车20min车流量",
+          dataIndex: "largeTrafficFlow",
+          sorter: true,
+        },
+        {
+          title: "Leq",
+          dataIndex: "indexLeq",
+          sorter: true,
+        },
+        
+        {
+          title: "L10",
+          dataIndex: "indexL10",
+          sorter: true,
+        },
+        {
+          title: "L50",
+          dataIndex: "indexL50",
+          sorter: true,
+        },
+        {
+          title: "L90",
+          dataIndex: "indexL90",
+          sorter: true,
+        },
+        {
+          title: "最大值",
+          dataIndex: "indexLmax",
+          sorter: true,
+        },
+         {
+          title: "最小值",
+          dataIndex: "indexLmin",
+          sorter: true,
+        },
+       {
+          title: "标准差(SD)",
+          dataIndex: "indexSd",
+          sorter: true,
+        },
+        {
+          title: "监测站名",
+          dataIndex: "station",
+          sorter: true,
+        },
+        {
+          title: "监测仪器型号",
+          dataIndex: "monitorInstrumentModel",
+          sorter: true,
+        },
+        {
+          title: "监测仪器编号",
+          dataIndex: "monitorInstrumentCode",
+          sorter: true,
+        },
+        {
+          title: "监测前校准值",
+          dataIndex: "beforeMonitorValue",
+          sorter: true,
+        },
+        {
+          title: "声校准器测量声压值",
+          dataIndex: "soundPressureValue",
+          sorter: true,
+        },
+        {
+          title: "声校准仪器型号",
+          dataIndex: "soundInstrumentModel",
+          sorter: true,
+        },
+        {
+          title: "声校准仪器编号",
+          dataIndex: "soundInstrumentCode",
+          sorter: true,
+        },
+        {
+          title: "区域等级",
+          dataIndex: "regionLevel",
+          sorter: true,
+        },
+         {
+          title: "备注",
+          dataIndex: "remark",
+          sorter: true,
+        },
+      ];
+      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>
\ No newline at end of file
diff --git a/src/views/water/river/collect/colums.js b/src/views/water/river/collect/colums.js
index 4c287cd..19365bd 100644
--- a/src/views/water/river/collect/colums.js
+++ b/src/views/water/river/collect/colums.js
@@ -1,50 +1,231 @@
-const tableColumns = [
-        {title: "断面编码",dataIndex: "sectionCode",sorter: true,},
-        {title: "断面名称",dataIndex: "sectionName",sorter: true,},
-        {title: "考核省份",dataIndex: "evaluationProvince",sorter: true,},
-        {title: "断面类型",dataIndex: "sectionType",sorter: true,},
-        {title: "断面属性",dataIndex: "sectionAttributes",sorter: true,},
-        {title: "流域",dataIndex: "watershed",sorter: true,},
-        {title: "水系",dataIndex: "waterSystem",sorter: true,},
-        // {title: "监测时间",dataIndex: "monitorTime",sorter: true,},
-        {title: "所在水体",dataIndex: "waterBody",sorter: true,},
-        {title: "汇入水体 ",dataIndex: "intoWaterBody",sorter: true,},
-        {title: "河流级别",dataIndex: "riverLevel",sorter: true,},
-        {title: "监测年份",dataIndex: "monitoringYear",sorter: true,},
-        {title: "监测月份",dataIndex: "monitoringMonth",sorter: true,},
-        {title: "水质类别",dataIndex: "waterQualityCategory",sorter: true,},
-        {title: "电导率(ms/m)",dataIndex: "conductivity",sorter: true,},
-        {title: "水温(℃)",dataIndex: "waterTemperature",sorter: true,},
-        {title: "pH值",dataIndex: "ph",sorter: true,},
-        {title: "溶解氧(mg/L)",dataIndex: "dissolvedOxygen",sorter: true,},
-        {title: "透明度(cm)",dataIndex: "transparency",sorter: true,},
-        {title: "盐度(‰)",dataIndex: "salinity",sorter: true,},
-        {title: "COD Mn(mg/L)",dataIndex: "codMn",sorter: true,},
-        {title: "COD Cr(mg/L)",dataIndex: "codCr",sorter: true,},
-        {title: "NH₃-N(mg/L)",dataIndex: "nh3N",sorter: true,},
-        {title: "T-P(mg/L)",dataIndex: "tP",sorter: true,},
-        {title: "T-N(mg/L)",dataIndex: "tN",sorter: true,},
-        {title: "Cu(mg/L)",dataIndex: "cu",sorter: true,},
-        {title: "Zn(mg/L)",dataIndex: "zn",sorter: true,},
-        {title: "Pb(mg/L)",dataIndex: "pb",sorter: true,},
-        {title: "Cd(mg/L)",dataIndex: "cd",sorter: true,},
-        {title: "BOD5(mg/L)",dataIndex: "bod5",sorter: true,},
-        {title: "T-As(mg/L)",dataIndex: "tAs",sorter: true,},
-        {title: "T-Se(mg/L)",dataIndex: "tSe",sorter: true,},
-        {title: "T-Hg(mg/L)",dataIndex: "tHg",sorter: true,},
-        {title: "Cr6+(mg/L)",dataIndex: "cr6",sorter: true,},
-        {title: "F-(mg/L)",dataIndex: "f",sorter: true,},
-        {title: "CN-(mg/L)",dataIndex: "cn",sorter: true,},
-        {title: "挥发酚(mg/L)",dataIndex: "volatilePhenol",sorter: true,},
-        {title: "石油类(mg/L)",dataIndex: "petro",sorter: true,},
-        {title: "LAS(mg/L)",dataIndex: "las",sorter: true,},
-        {title: "S2-(mg/L)",dataIndex: "s2",sorter: true,},
-        {title: "Chla(mg/L)",dataIndex: "chla",sorter: true,},
-        {title: "NO₃-(mg/L)",dataIndex: "no3",sorter: true,},
-        {title: "NO₂-(mg/L)",dataIndex: "no2",sorter: true,},
-        {title: "流量(m³/s)",dataIndex: "flow",sorter: true,},
-        {title: "水位",dataIndex: "waterLevel",sorter: true,},
-        {title: "备注",dataIndex: "remark",sorter: true,},
-    ];
+const tableColumns = [{
+    title: "断面编码",
+    dataIndex: "sectionCode",
+    sorter: true,
+  },
+  {
+    title: "断面名称",
+    dataIndex: "sectionName",
+    sorter: true,
+  },
+  {
+    title: "考核省份",
+    dataIndex: "evaluationProvince",
+    sorter: true,
+  },
+  {
+    title: "断面类型",
+    dataIndex: "sectionType",
+    sorter: true,
+  },
+  {
+    title: "断面属性",
+    dataIndex: "sectionAttributes",
+    sorter: true,
+  },
+  {
+    title: "流域",
+    dataIndex: "watershed",
+    sorter: true,
+  },
+  {
+    title: "水系",
+    dataIndex: "waterSystem",
+    sorter: true,
+  },
+  // {title: "监测时间",dataIndex: "monitorTime",sorter: true,},
+  {
+    title: "所在水体",
+    dataIndex: "waterBody",
+    sorter: true,
+  },
+  {
+    title: "汇入水体 ",
+    dataIndex: "intoWaterBody",
+    sorter: true,
+  },
+  {
+    title: "河流级别",
+    dataIndex: "riverLevel",
+    sorter: true,
+  },
+  {
+    title: "监测年份",
+    dataIndex: "monitoringYear",
+    sorter: true,
+  },
+  {
+    title: "监测月份",
+    dataIndex: "monitoringMonth",
+    sorter: true,
+  },
+  {
+    title: "水质类别",
+    dataIndex: "waterQualityCategory",
+    sorter: true,
+  },
+  {
+    title: "电导率(ms/m)",
+    dataIndex: "conductivity",
+    sorter: true,
+  },
+  {
+    title: "水温(℃)",
+    dataIndex: "waterTemperature",
+    sorter: true,
+  },
+  {
+    title: "pH值",
+    dataIndex: "ph",
+    sorter: true,
+  },
+  {
+    title: "溶解氧(mg/L)",
+    dataIndex: "dissolvedOxygen",
+    sorter: true,
+  },
+  {
+    title: "透明度(cm)",
+    dataIndex: "transparency",
+    sorter: true,
+  },
+  {
+    title: "盐度(‰)",
+    dataIndex: "salinity",
+    sorter: true,
+  },
+  {
+    title: "COD Mn(mg/L)",
+    dataIndex: "codMn",
+    sorter: true,
+  },
+  {
+    title: "COD Cr(mg/L)",
+    dataIndex: "codCr",
+    sorter: true,
+  },
+  {
+    title: "NH₃-N(mg/L)",
+    dataIndex: "nh3N",
+    sorter: true,
+  },
+  {
+    title: "T-P(mg/L)",
+    dataIndex: "tP",
+    sorter: true,
+  },
+  {
+    title: "T-N(mg/L)",
+    dataIndex: "tN",
+    sorter: true,
+  },
+  {
+    title: "Cu(mg/L)",
+    dataIndex: "cu",
+    sorter: true,
+  },
+  {
+    title: "Zn(mg/L)",
+    dataIndex: "zn",
+    sorter: true,
+  },
+  {
+    title: "Pb(mg/L)",
+    dataIndex: "pb",
+    sorter: true,
+  },
+  {
+    title: "Cd(mg/L)",
+    dataIndex: "cd",
+    sorter: true,
+  },
+  {
+    title: "BOD5(mg/L)",
+    dataIndex: "bod5",
+    sorter: true,
+  },
+  {
+    title: "T-As(mg/L)",
+    dataIndex: "tAs",
+    sorter: true,
+  },
+  {
+    title: "T-Se(mg/L)",
+    dataIndex: "tSe",
+    sorter: true,
+  },
+  {
+    title: "T-Hg(mg/L)",
+    dataIndex: "tHg",
+    sorter: true,
+  },
+  {
+    title: "Cr6+(mg/L)",
+    dataIndex: "cr6",
+    sorter: true,
+  },
+  {
+    title: "F-(mg/L)",
+    dataIndex: "f",
+    sorter: true,
+  },
+  {
+    title: "CN-(mg/L)",
+    dataIndex: "cn",
+    sorter: true,
+  },
+  {
+    title: "挥发酚(mg/L)",
+    dataIndex: "volatilePhenol",
+    sorter: true,
+  },
+  {
+    title: "石油类(mg/L)",
+    dataIndex: "petro",
+    sorter: true,
+  },
+  {
+    title: "LAS(mg/L)",
+    dataIndex: "las",
+    sorter: true,
+  },
+  {
+    title: "S2-(mg/L)",
+    dataIndex: "s2",
+    sorter: true,
+  },
+  {
+    title: "Chla(mg/L)",
+    dataIndex: "chla",
+    sorter: true,
+  },
+  {
+    title: "NO₃-(mg/L)",
+    dataIndex: "no3",
+    sorter: true,
+  },
+  {
+    title: "NO₂-(mg/L)",
+    dataIndex: "no2",
+    sorter: true,
+  },
+  {
+    title: "流量(m³/s)",
+    dataIndex: "flow",
+    sorter: true,
+  },
+  {
+    title: "水位",
+    dataIndex: "waterLevel",
+    sorter: true,
+  },
+  {
+    title: "备注",
+    dataIndex: "remark",
+    sorter: true,
+  },
+];
 
-    export {tableColumns}
+export {
+  tableColumns
+}
diff --git a/src/views/water/river/collect/index.vue b/src/views/water/river/collect/index.vue
index 7cbb85f..2ec72af 100644
--- a/src/views/water/river/collect/index.vue
+++ b/src/views/water/river/collect/index.vue
@@ -2,29 +2,32 @@
   <div class="ele-body">
     <a-card style="width: 100%" :bordered="false">
       <template #title>
-        <div>
-          <a-space>
-            <a-upload
-              :before-upload="importFileCity"
-              :showUploadList="false"
-              accept=".xls,.xlsx,.csv"
-            >
+        <a-dropdown>
+          <a-upload :before-upload="importFileCity" :showUploadList="false" accept=".xls,.xlsx,.csv">
             <a-button>江河导入</a-button>
-            </a-upload>
-            <a-button @click="showModal" >水功能区导入</a-button>
-            <a-modal v-model:visible="visible" title="水功能区导入" :footer="null">
-              <a-select  allowClear placeholder="请选择行政级别"  @change="currentVal" style="width:150px"> 
-                <a-select-option :value="'1'">国家级水功能</a-select-option>
-                <a-select-option :value="'2'">区控水站水功能</a-select-option>
-              </a-select>
-              <a-upload
-              :before-upload="importFileFunctionArea"
-              :showUploadList="false"
-              accept=".xls,.xlsx,.csv">
-                  <a-button key="submit" type="primary" :loading="loading">导入</a-button>
-              </a-upload>
-          </a-modal>
-            <a-button @click="showModalWater" >水站导入</a-button>
+          </a-upload>
+        </a-dropdown>
+        <a-dropdown>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item>
+                <a-upload :before-upload="importFileFunctionArea" @change="currentVal(1)" :showUploadList="false" accept=".xls,.xlsx,.csv">
+                  国家级水功能
+                </a-upload>
+              </a-menu-item>
+              <a-menu-item>
+                <a-upload :before-upload="importFileFunctionArea" @change="currentVal(2)" :showUploadList="false" accept=".xls,.xlsx,.csv">
+                  区控水站水功能
+                </a-upload>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            水功能区导入
+            <DownOutlined />
+          </a-button>
+        </a-dropdown>
+        <a-button @click="showModalWater" >水站导入</a-button>
             <a-modal v-model:visible="visibleWater" title="水站导入" :footer="null">
                <a-select allowClear placeholder="请选择站名"   @change="currentSel" style="width:150px">
                 <a-select-option
@@ -41,36 +44,22 @@
                   <a-button key="submit" type="primary" :loading="loading">导入</a-button>
               </a-upload>
           </a-modal>
-          <a-button @click="templateExp" >模板下载</a-button>
-          <a-modal v-model:visible="visibleTemplate" title="模板下载" :footer="null">
-            <div>
-              <a-button @click="downloadRiver">江河模板下载</a-button>
-            </div>
-            <div>
-              <a-button @click="downloadNational">国家级水功能模板下载</a-button>
-              <a-button @click="downloadWater">区控水功能模板下载</a-button>
-            </div>
-            <div>
-              <a-button @click="downloadState">国家水站模板下载</a-button>
-              <a-button @click="downloadCity">广西水站模板下载</a-button>
-            </div>
-           </a-modal>
-        </a-space>
-        </div>
-        <!-- <div>
-          <a-space align="center" style="margin-top: 10px;">
-            <a-button @click="downloadRiver">江河模板下载</a-button>
-            <a-button @click="downloadNational">国家级水功能模板下载</a-button>
-            <a-button @click="downloadState">国家水站模板下载</a-button>
-          </a-space>
-        </div>
-        <div>
-          <a-space align="center" style="margin-top: 10px;">
-            <a-button > </a-button>
-            <a-button @click="downloadWater" style="margin-left:85px">区控水功能模板下载</a-button>
-            <a-button @click="downloadCity" style="margin-left:13px">广西水站模板下载</a-button>
-          </a-space>
-        </div> -->
+        <a-dropdown>
+          <template #overlay>
+            <a-menu style="word-spacing:10px;">
+              <a-menu-item @click="download('江河-断面共享数据表','xls')"> 江河-断面共享数据表 </a-menu-item>
+              <a-menu-item @click="download('水功能区-国家级水功能区数据表','xlsx')"> 水功能区-国家级水功能区数据表 </a-menu-item>
+              <a-menu-item @click="download('水功能区-自治区级水站月均值数据表','xls')"> 水功能区-自治区级水站月均值数据表</a-menu-item>
+              <a-menu-item @click="download('水站-国家级水站历史数据表','xlsx')"> 水站-国家级水站历史数据表</a-menu-item>
+              <a-menu-item @click="download('水站-自治区级水站均值数据报表','xlsx')" style="word-spacing:3px">水站-自治区级水站均值数据报表
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button type="primary" style="left: 60px">
+            模板下载
+            <DownOutlined />
+          </a-button>
+        </a-dropdown>
       </template>
       <a-tabs v-model:activeKey="activeKey">
         <a-tab-pane tab="江河信息" key="water">
@@ -88,79 +77,60 @@
 </template>
 
 <script>
-import XLSX from "xlsx";
-import utils from "./utils";
-import {Modal} from "ant-design-vue";
-import WaterBill from "./water-bill.vue";
-import FunctionBill from "../../water-function-area/collect/water-bill"
-import StationBill from "../../river-station/collect/water-bill"
-import {saveWaterFunctionAreaBill} from "@/api/ecology/water-function-area"
-import {saveRiverBill} from "@/api/ecology/river";
-import {saveRiverStationBill} from "@/api/ecology/river-station";
+  import XLSX from "xlsx";
+  import utils from "./utils";
+  import {
+    Modal
+  } from "ant-design-vue";
+  import WaterBill from "./water-bill.vue";
+  import FunctionBill from "../../water-function-area/collect/water-bill"
+  import StationBill from "../../river-station/collect/water-bill"
+  import {
+    DownOutlined
+  } from "@ant-design/icons-vue";
+  import {
+    saveWaterFunctionAreaBill
+  } from "@/api/ecology/water-function-area"
+  import {
+    saveRiverBill
+  } from "@/api/ecology/river";
+  import {
+    saveRiverStationBill
+  } from "@/api/ecology/river-station";
 
-import {listInfo} from "@/api/ecology/water/river-water";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-water";
 
-import {saveRiverSiteBill} from "@/api/ecology/river-site";
-import {downloadRiverTemplate} from "@/utils/excel-util";
+  import {
+    saveRiverSiteBill
+  } from "@/api/ecology/river-site";
+  import {
+    downloadTemplatexls,
+    downloadTemplate
+  } from "@/utils/excel-util";
+  export default {
+    name: "RiverCollectIndex",
 
-export default {
-  name: "RiverCollectIndex",
-  
-  components: {
-    WaterBill,
-    FunctionBill,
-    StationBill
-  },
-  data() {
-    return {
-      activeKey: "functionWater",
-      visible: false,
-      exportType:String,
-      visibleWater:false,
-      visibleTemplate:false,
-      form:{},
-      param:{}
-    };
-  },
-  methods: {
-    //模板下载
-    downloadRiver() {
-      let filename = "江河"
-      downloadRiverTemplate(filename)
+    components: {
+      WaterBill,
+      FunctionBill,
+      DownOutlined,
+      StationBill
     },
-    downloadNational() {
-      let filename = "国家级水功能区"
-      downloadRiverTemplate(filename)
+    data() {
+      return {
+        activeKey: "functionWater",
+        visible: false,
+        exportType: String,
+        visibleWater: false,
+        form: [],
+        param: {}
+      };
     },
-    downloadWater() {
-      let filename = "区控水功能区"
-      downloadRiverTemplate(filename)
-    },
-    downloadState() {
-      let filename = "国家水站"
-      downloadRiverTemplate(filename)
-    },
-    downloadCity() {
-      let filename = "广西水站"
-      downloadRiverTemplate(filename)
-    },
-    currentSel(selVal) {
-        this.param.waterStationPointId = selVal.waterStationPointId;
-        this.param.riverName = selVal.riverName;
-        this.param.stationName = selVal.stationName;
-        this.param.system = selVal.system;
-        this.param.waterTarget = selVal.waterTarget;
-    },
-    currentVal(val) {
-        this.exportType = val;
-    },
-    showModal(){
-      this.visible = true;
-    },
-    templateExp(){
-      this.visibleTemplate = true;
-    },
-    showModalWater(){
+    
+    methods: {
+      showModalWater(){
       listInfo().then((res) => {
             if (res.data.code == 0) {
               console.log(res.data.data)
@@ -171,302 +141,325 @@ export default {
             }
           })
     },
-    /* 导入本地excel文件 */
-    importFileCity(file) {
-      const hide = this.$message.loading("导入中..", 0);
+      //模板下载
+      download(filename, fileType) {
+        if (fileType == "xls") {
+          downloadTemplatexls(filename);
+        } else if (fileType == "xlsx") {
+          downloadTemplate(filename);
+        }
+      },
+      currentSel(selVal) {
+        this.param.waterStationPointId = selVal.waterStationPointId;
+        this.param.riverName = selVal.riverName;
+        this.param.stationName = selVal.stationName;
+        this.param.system = selVal.system;
+        this.param.waterTarget = selVal.waterTarget;
+      },
+      currentVal(val) {
+        this.exportType = val;
+      },
+      showModal() {
+        this.visible = true;
+      },
+      /* 导入本地excel文件 */
+      importFileCity(file) {
+        const hide = this.$message.loading("导入中..", 0);
 
-      let reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          let data = new Uint8Array(e.target.result);
-          let workbook = XLSX.read(data, {
-            type: "array",
-          });
-          //0.昼间数据 1.夜间数据 2.其他信息
-          let sheetNames = workbook.SheetNames;
-          // 解析成二维数组
-          let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
-            header: 1,
-          });
-
-          const reportDate = aoa[1][0].replace(/[^\d]+/g, "-");
-
-          const riverList = aoa.filter(
-            (item) => {
-              return item.length >= 30 && item[0] && item[0] != "断面编码"
-            }
-          );
-
-
-          // 解析成对象数组
-          const billName = file.name;
-          const billData = utils.toObjData(riverList);
-          if (!billData || billData.length == 0) {
-            hide()
-            Modal.error({
-              title: "导入失败",
-              content: "找不到数据",
+        let reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            let data = new Uint8Array(e.target.result);
+            let workbook = XLSX.read(data, {
+              type: "array",
             });
-            return;
-          }
-          const tasks = [];
-          if (billData.length > 0) {
-            tasks.push(
-              saveRiverBill({
-                reportTime: new Date(reportDate).getTime(),
-                billName: billName,
-                regionLevel: "市级",
-                surfaceWaterSectionList: billData,
-              })
+            //0.昼间数据 1.夜间数据 2.其他信息
+            let sheetNames = workbook.SheetNames;
+            // 解析成二维数组
+            let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
+              header: 1,
+            });
+
+            const reportDate = aoa[1][0].replace(/[^\d]+/g, "-");
+
+            const riverList = aoa.filter(
+              (item) => {
+                return item.length >= 30 && item[0] && item[0] != "断面编码"
+              }
             );
-          }
 
 
-          // 上传到服务器
+            // 解析成对象数组
+            const billName = file.name;
+            const billData = utils.toObjData(riverList);
+            if (!billData || billData.length == 0) {
+              hide()
+              Modal.error({
+                title: "导入失败",
+                content: "找不到数据",
+              });
+              return;
+            }
+            const tasks = [];
+            if (billData.length > 0) {
+              tasks.push(
+                saveRiverBill({
+                  reportTime: new Date(reportDate).getTime(),
+                  billName: billName,
+                  regionLevel: "市级",
+                  surfaceWaterSectionList: billData,
+                })
+              );
+            }
 
-          Promise.all(tasks)
-            .then((res) => {
-              if (res[0].data.code == 0) {
-                Modal.success({
-                  title: "导入成功",
-                  content: `成功导入${billData.length}条数据`,
-                });
-                this.$refs.water && this.$refs.water.reload();
-              } else {
+
+            // 上传到服务器
+
+            Promise.all(tasks)
+              .then((res) => {
+                if (res[0].data.code == 0) {
+                  Modal.success({
+                    title: "导入成功",
+                    content: `成功导入${billData.length}条数据`,
+                  });
+                  this.$refs.water && this.$refs.water.reload();
+                } else {
+                  Modal.error({
+                    title: "导入失败",
+                    content: "数据上传出错",
+                  });
+                }
+
+              })
+              .catch(() => {
                 Modal.error({
                   title: "导入失败",
                   content: "数据上传出错",
                 });
-              }
-
-            })
-            .catch(() => {
-              Modal.error({
-                title: "导入失败",
-                content: "数据上传出错",
+              })
+              .finally(() => {
+                hide();
               });
-            })
-            .finally(() => {
-              hide();
-            });
-        } catch (error) {
-          hide();
-          Modal.error({
-            title: "导入失败",
-            content: error.message,
-          });
-        }
-        // console.log(billData);
-      };
-      reader.readAsArrayBuffer(file);
-
-      return false;
-    },
-    importFileFunctionArea(file) {
-      const hide = this.$message.loading("导入中..", 0);
-
-      let reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          let data = new Uint8Array(e.target.result);
-          let workbook = XLSX.read(data, {
-            type: "array",
-          });
-          //0.昼间数据 1.夜间数据 2.其他信息
-          let sheetNames = workbook.SheetNames;
-          // 解析成二维数组
-          let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
-            header: 1,
-          });
-          const riverList = aoa.filter(
-            (item) => {
-              console.log("export"+this.exportType)
-              if(this.exportType == "1"){  //国家级水功能
-                return item.length >= 30 && item[8] && item[8] != "水体类型"
-              }else{ //区控水站水功能模板
-                return item[6] && item[6] != "站点名称"
-              }
-             
-            }
-          );
-          console.log(riverList)
-          // 解析成对象数组
-          const billName = file.name;
-          var billData;
-          if(this.exportType == "1"){
-            billData = utils.toNationalLevelDataObj(riverList);
-          }else{
-            billData = utils.towaterStationDataObj(riverList);
-          }
-         
-          if (!billData || billData.length == 0) {
-            hide()
+          } catch (error) {
+            hide();
             Modal.error({
               title: "导入失败",
-              content: "找不到数据",
+              content: error.message,
             });
-            return;
           }
-          const tasks = [];
-          if (billData.length > 0) {
-            if(this.exportType == "1"){
-               tasks.push(
+          // console.log(billData);
+        };
+        reader.readAsArrayBuffer(file);
+
+        return false;
+      },
+      importFileFunctionArea(file) {
+        const hide = this.$message.loading("导入中..", 0);
+
+        let reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            let data = new Uint8Array(e.target.result);
+            let workbook = XLSX.read(data, {
+              type: "array",
+            });
+            //0.昼间数据 1.夜间数据 2.其他信息
+            let sheetNames = workbook.SheetNames;
+            // 解析成二维数组
+            let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
+              header: 1,
+            });
+            const riverList = aoa.filter(
+              (item) => {
+                console.log("export" + this.exportType)
+                if (this.exportType == "1") { //国家级水功能
+                  return item.length >= 30 && item[8] && item[8] != "水体类型"
+                } else { //区控水站水功能模板
+                  return item[6] && item[6] != "站点名称"
+                }
+
+              }
+            );
+            console.log(riverList)
+            // 解析成对象数组
+            const billName = file.name;
+            var billData;
+            if (this.exportType == "1") {
+              billData = utils.toNationalLevelDataObj(riverList);
+            } else {
+              billData = utils.towaterStationDataObj(riverList);
+            }
+
+            if (!billData || billData.length == 0) {
+              hide()
+              Modal.error({
+                title: "导入失败",
+                content: "找不到数据",
+              });
+              return;
+            }
+            const tasks = [];
+            if (billData.length > 0) {
+              if (this.exportType == "1") {
+                tasks.push(
                   saveWaterFunctionAreaBill({
                     billName: billName,
-                    regionLevel:this.exportType,
+                    regionLevel: this.exportType,
                     nationalLevelWaterFunctionAreaList: billData,
                   })
                 );
-              }else{
+              } else {
                 tasks.push(
                   saveRiverStationBill({
                     billName: billName,
-                    regionLevel:this.exportType,
+                    regionLevel: this.exportType,
                     waterStationWaterFunctionAreaList: billData,
                   })
                 );
               }
-              
-          }
-          // 上传到服务器
-          console.log(tasks);
-          Promise.all(tasks)
-            .then((res) => {
-              if (res[0].data.code == 0) {
-                Modal.success({
-                  title: "导入成功",
-                  content: `成功导入${billData.length}条数据`,
-                });
-                this.visible=false;
-                this.$refs.functionWater && this.$refs.functionWater.reload();
-              } else {
-                Modal.error({
-                  title: "导入失败",
-                  content: res[0].data.msg,
-                });
-              }
 
-            })
-            .catch(() => {
-              Modal.error({
-                title: "导入失败",
-                content: "数据上传出错",
-              });
-            })
-            .finally(() => {
-              hide();
-            });
-        } catch (error) {
-          hide();
-          Modal.error({
-            title: "导入失败",
-            content: error.message,
-          });
-        }
-        // console.log(billData);
-      };
-      reader.readAsArrayBuffer(file);
-
-      return false;
-    },
-    importFileStation(file) {
-      const hide = this.$message.loading("导入中..", 0);
-
-      let reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          let data = new Uint8Array(e.target.result);
-          let workbook = XLSX.read(data, {
-            type: "array",
-            cellDates:true
-          });
-          let sheetNames = workbook.SheetNames;
-          // 解析成二维数组
-          let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
-            header: 1,
-          });
-          const riverList = aoa.filter(
-            (item) => {
-              if(this.param.system == "1"){
-                return item[1] && item[1] != "时间"
-              }else{
-              
-                return item[2] && item[2] != "时间" && item[2] != "三类标准"&& item[2] != "平均值"&& item[2] != "最大值"&& item[2] != "最小值"&& item[2] != "有效数据个数"&& item[2] != "总数据个数"
-              }
-              
             }
-          );
-          console.log(riverList)
-          // 解析成对象数组
-          const billName = file.name;
-          var billData;
-          if(this.param.system == "1"){ //国家系统
-            billData = utils.toRiverStationObjData(riverList,this.param);
-          }else{
-            billData = utils.toCityStationObjData(riverList,this.param);
-          }
-          
-          if (!billData || billData.length == 0) {
-            hide()
-            Modal.error({
-              title: "导入失败",
-              content: "找不到数据",
-            });
-            return;
-          }
-          const tasks = [];
-          if (billData.length > 0) {
-            tasks.push(
-              saveRiverSiteBill({
-                billName: billName,
-                systemType:this.param.system,
-                waterSiteList: billData,
-              })
-            );
-          }
-          // 上传到服务器
+            // 上传到服务器
+            console.log(tasks);
+            Promise.all(tasks)
+              .then((res) => {
+                if (res[0].data.code == 0) {
+                  Modal.success({
+                    title: "导入成功",
+                    content: `成功导入${billData.length}条数据`,
+                  });
+                  this.visible = false;
+                  this.$refs.functionWater && this.$refs.functionWater.reload();
+                } else {
+                  Modal.error({
+                    title: "导入失败",
+                    content: res[0].data.msg,
+                  });
+                }
 
-          Promise.all(tasks)
-            .then((res) => {
-              if (res[0].data.code == 0) {
-                Modal.success({
-                  title: "导入成功",
-                  content: `成功导入${billData.length}条数据`,
-                });
-                this.visibleWater=false;
-                this.$refs.station && this.$refs.station.reload();
-              } else {
+              })
+              .catch(() => {
                 Modal.error({
                   title: "导入失败",
                   content: "数据上传出错",
                 });
-              }
+              })
+              .finally(() => {
+                hide();
+              });
+          } catch (error) {
+            hide();
+            Modal.error({
+              title: "导入失败",
+              content: error.message,
+            });
+          }
+          // console.log(billData);
+        };
+        reader.readAsArrayBuffer(file);
 
-            })
-            .catch(() => {
+        return false;
+      },
+      importFileStation(file) {
+        const hide = this.$message.loading("导入中..", 0);
+
+        let reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            let data = new Uint8Array(e.target.result);
+            let workbook = XLSX.read(data, {
+              type: "array",
+              cellDates: true
+            });
+            let sheetNames = workbook.SheetNames;
+            // 解析成二维数组
+            let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
+              header: 1,
+            });
+            const riverList = aoa.filter(
+              (item) => {
+                if (this.param.system == "1") {
+                  return item[1] && item[1] != "时间"
+                } else {
+
+                  return item[2] && item[2] != "时间" && item[2] != "三类标准" && item[2] != "平均值" && item[2] != "最大值" &&
+                    item[2] != "最小值" && item[2] != "有效数据个数" && item[2] != "总数据个数"
+                }
+
+              }
+            );
+            console.log(riverList)
+            // 解析成对象数组
+            const billName = file.name;
+            var billData;
+            if (this.param.system == "1") { //国家系统
+              billData = utils.toRiverStationObjData(riverList, this.param);
+            } else {
+              billData = utils.toCityStationObjData(riverList, this.param);
+            }
+
+            if (!billData || billData.length == 0) {
+              hide()
               Modal.error({
                 title: "导入失败",
-                content: "数据上传出错",
+                content: "找不到数据",
               });
-            })
-            .finally(() => {
-              hide();
-            });
-        } catch (error) {
-          hide();
-          Modal.error({
-            title: "导入失败",
-            content: error.message,
-          });
-        }
-        // console.log(billData);
-      };
-      reader.readAsArrayBuffer(file);
+              return;
+            }
+            const tasks = [];
+            if (billData.length > 0) {
+              tasks.push(
+                saveRiverSiteBill({
+                  billName: billName,
+                  systemType: this.param.system,
+                  waterSiteList: billData,
+                })
+              );
+            }
+            // 上传到服务器
 
-      return false;
+            Promise.all(tasks)
+              .then((res) => {
+                if (res[0].data.code == 0) {
+                  Modal.success({
+                    title: "导入成功",
+                    content: `成功导入${billData.length}条数据`,
+                  });
+                  this.visibleWater = false;
+                  this.$refs.station && this.$refs.station.reload();
+                } else {
+                  Modal.error({
+                    title: "导入失败",
+                    content: "数据上传出错",
+                  });
+                }
+
+              })
+              .catch(() => {
+                Modal.error({
+                  title: "导入失败",
+                  content: "数据上传出错",
+                });
+              })
+              .finally(() => {
+                hide();
+              });
+          } catch (error) {
+            hide();
+            Modal.error({
+              title: "导入失败",
+              content: error.message,
+            });
+          }
+          // console.log(billData);
+        };
+        reader.readAsArrayBuffer(file);
+
+        return false;
+      },
     },
-  },
-};
+  };
+
 </script>
 
 <style scoped lang="less">
diff --git a/src/views/water/river/statistic/area-base.vue b/src/views/water/river/statistic/area-base.vue
new file mode 100644
index 0000000..f41cadf
--- /dev/null
+++ b/src/views/water/river/statistic/area-base.vue
@@ -0,0 +1,249 @@
+<template>
+    <div class="ele-body">
+        <a-card :bordered="false">
+            <!-- 搜索表单 -->
+            <a-form :model="where" layout="inline">
+                <a-form-item label="区域等级:">
+                    <a-select v-model:value="where.regionLevel">
+                        <a-select-option
+                            v-for="(item) in modelOptions"
+                            :key="item.value"
+                        >{{ item.label }}
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <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-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>
+            <!-- 表格 -->
+            <ele-pro-table
+                ref="table"
+                row-key="ambientAirId"
+                :need-page="false"
+                :datasource="url"
+                :columns="columns"
+                :where="where"
+                :scroll="{ x: 'max-content' }"
+                :init-load="false"
+                @done="(d) => (data = d.data)"
+                method="POST"
+            >
+
+            </ele-pro-table>
+        </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import _ from "lodash";
+import XLSX from "xlsx";
+import {statisticAreaBase, getColumnOptions} from "@/api/ecology/atmosphere/air";
+// import { Modal } from "ant-design-vue";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import moment from "moment";
+
+//   import utils from "./utils";
+export default {
+    name: "StatisticAirAreaBase",
+    components: {},
+    data() {
+        const year = new Date().getFullYear();
+        return {
+            data: [],
+            locale,
+            bill: {},
+            // 表格数据接口
+            url: statisticAreaBase,
+            selection: [],
+            modelOptions: [
+                {label: "市", value: "city"},
+                {label: "县", value: "county"},
+                {label: "站点", value: "place"},
+
+            ],
+            // 表格列配置
+            columns: [
+                {title: "日期", dataIndex: "monitorTime", align: "center",customRender:({text})=>moment(text).format("YYYY-MM-DD"),fixed: "left"},
+
+                {title: "SO2五象", dataIndex: "wuXiangXinQuSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2五象", dataIndex: "wuXiangXinQuNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10五象", dataIndex: "wuXiangXinQuPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO五象", dataIndex: "wuXiangXinQuCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3五象", dataIndex: "wuXiangXinQuO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5五象", dataIndex: "wuXiangXinQuPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI五象", dataIndex: "wuXiangXinQuAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别五象", dataIndex: "wuXiangXinQuAqiCategory", align: "center"},
+
+                {title: "SO2兴宁", dataIndex: "xingNingSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2兴宁", dataIndex: "xingNingNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10兴宁", dataIndex: "xingNingPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO兴宁", dataIndex: "xingNingCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h兴宁", dataIndex: "xingNingO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5兴宁", dataIndex: "xingNingPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI兴宁", dataIndex: "xingNingAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别兴宁", dataIndex: "xingNingAqiCategory", align: "center"},
+
+                {title: "SO2江南", dataIndex: "jiangNanSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2江南", dataIndex: "jiangNanNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10江南", dataIndex: "jiangNanPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO江南", dataIndex: "jiangNanCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h江南", dataIndex: "jiangNanO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5江南", dataIndex: "jiangNanPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI江南", dataIndex: "jiangNanAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别江南", dataIndex: "jiangNanAqiCategory", align: "center"},
+
+                {title: "SO2青秀", dataIndex: "qingXiuSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2青秀", dataIndex: "qingXiuNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10青秀", dataIndex: "qingXiuPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO青秀", dataIndex: "qingXiuCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h青秀", dataIndex: "qingXiuO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5青秀", dataIndex: "qingXiuPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI青秀", dataIndex: "qingXiuAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别青秀", dataIndex: "qingXiuAqiCategory", align: "center"},
+
+                {title: "SO2西乡塘", dataIndex: "xiXiangTangSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2西乡塘", dataIndex: "xiXiangTangNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10西乡塘", dataIndex: "xiXiangTangPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO西乡塘", dataIndex: "xiXiangTangCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h西乡塘", dataIndex: "xiXiangTangO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5西乡塘", dataIndex: "xiXiangTangPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI西乡塘", dataIndex: "xiXiangTangAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别西乡塘", dataIndex: "xiXiangTangAqiCategory", align: "center"},
+
+                {title: "SO2邕宁", dataIndex: "yongNingSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2邕宁", dataIndex: "yongNingNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10邕宁", dataIndex: "yongNingPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO邕宁", dataIndex: "yongNingCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h邕宁", dataIndex: "yongNingO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5邕宁", dataIndex: "yongNingPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI邕宁", dataIndex: "yongNingAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别邕宁", dataIndex: "yongNingAqiCategory", align: "center"},
+
+                {title: "SO2良庆", dataIndex: "liangQingSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2良庆", dataIndex: "liangQingNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10良庆", dataIndex: "liangQingPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO良庆", dataIndex: "liangQingCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h良庆", dataIndex: "liangQingO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5良庆", dataIndex: "liangQingPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI良庆", dataIndex: "liangQingAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别良庆", dataIndex: "liangQingAqiCategory", align: "center"},
+
+                {title: "SO2高新", dataIndex: "gaoXinSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2高新", dataIndex: "gaoXinNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10高新", dataIndex: "gaoXinPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "CO高新", dataIndex: "gaoXinCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h高新", dataIndex: "gaoXinO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5高新", dataIndex: "gaoXinPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI高新", dataIndex: "gaoXinAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别高新", dataIndex: "gaoXinAqiCategory", align: "center"},
+
+                {title: "SO2经开", dataIndex: "jingKaiSo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "NO2经开", dataIndex: "jingKaiNo2", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM10经开", dataIndex: "jingKaiPm10", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "Co经开", dataIndex: "jingKaiCo", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                {title: "O3_8h经开", dataIndex: "jingKaiO3", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "PM2.5经开", dataIndex: "jingKaiPm25", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "AQI经开", dataIndex: "jingKaiAqi", align: "center",customRender:({text})=> typeof text == "number"?text.toFixed(0)+"":""},
+                {title: "类别经开", dataIndex: "jingKaiAqiCategory", align: "center"},
+            ],
+            regionLevelOptions: [],
+            time: [],
+            // 表格搜索条件
+            where: {
+                regionLevel: "place",
+                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("region_level").then((res) => {
+                this.regionLevelOptions = res.data.data.map((item) => {
+                    return {
+                        label: item,
+                        value: item,
+                    };
+                });
+            });
+        },
+        /* 刷新表格 */
+        reload() {
+            const where = _.cloneDeep(this.where);
+            this.$refs.table.reload({
+                where
+            });
+        },
+        /* 重置搜索 */
+        reset() {
+            this.where = {
+                regionLevel: "place",
+            };
+            this.time = undefined;
+            this.reload();
+        },
+        exportFile() {
+            const arr = [];
+            const th1 = [];
+            const th2 = [];
+            const merges = []; // 合并
+            const columnsTemp = []; // 树形结构整理成list
+            this.columns.forEach((item, index) => {
+                if (item.children) {
+                    item.children.forEach((citem) => {
+                        th1.push(item.title)
+                        th2.push(citem.title)
+                        columnsTemp.push(citem)
+                    })
+                    merges.push({s: {r: 0, c: th1.length - item.children.length}, e: {r: 0, c: th1.length - 1}})
+                } else {
+                    th1.push(item.title)
+                    th2.push("")
+                    columnsTemp.push(item)
+                    merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
+                }
+            })
+            arr.push(th1, th2);
+            this.data.forEach((d) => {
+                const td = columnsTemp.map((item) => {
+                    if(item.customRender){
+                        return item.customRender({text:d[item.dataIndex]});
+                    }
+                    return d[item.dataIndex];
+                });
+                arr.push(td);
+            });
+            let sheet = XLSX.utils.aoa_to_sheet(arr);
+            sheet['!merges'] = merges;
+
+            this.$util.exportSheet(XLSX, sheet, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "城区浓度统计");
+
+        },
+    },
+
+};
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/area.vue b/src/views/water/river/statistic/area.vue
new file mode 100644
index 0000000..4b50bbd
--- /dev/null
+++ b/src/views/water/river/statistic/area.vue
@@ -0,0 +1,309 @@
+<template>
+    <div class="ele-body">
+        <a-card :bordered="false">
+            <!-- 搜索表单 -->
+            <a-form
+                :model="where"
+                layout="vertical"
+                :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.regionLevel">
+                                <a-select-option
+                                    v-for="(item) in modelOptions"
+                                    :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 label="时间范围:">
+                            <a-range-picker v-model:value="time"/>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row>
+                    <a-col :lg="24" :md="24" :sm="24" :xs="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-col>
+                </a-row>
+            </a-form>
+            <!-- 表格 -->
+            <ele-pro-table
+                v-model:selection="selectionList"
+                ref="table"
+                row-key="ambientAirId"
+                :need-page="false"
+                :datasource="url"
+                :columns="columns"
+                :where="where"
+                :scroll="{ x: 'max-content' }"
+                :init-load="false"
+                @done="(d) => (data = d.data)"
+                method="POST"
+            >
+
+            </ele-pro-table>
+        </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import _ from "lodash";
+import XLSX from "xlsx";
+import {statisticArea, getColumnOptions} from "@/api/ecology/atmosphere/air";
+import { Modal } from "ant-design-vue";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import moment from "moment";
+
+//   import utils from "./utils";
+export default {
+    name: "StatisticAirArea",
+    components: {},
+    data() {
+        return {
+            data: [],
+            locale,
+            bill: {},
+            // 表格数据接口
+            url: statisticArea,
+            selection: [],
+            modelOptions: [
+                {label: "市", value: "city"},
+                {label: "县", value: "county"},
+                {label: "站点", value: "place"},
+
+            ],
+            // 表格列配置
+            columns: [
+                {title: "站点/县", dataIndex: "place",align:"center"},
+                {
+                    title: "二氧化硫", children: [
+                        {title: "本次", dataIndex: "so2Current",align:"center"},
+                        {title: "上年同期", dataIndex: "so2SameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "so2ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "so2Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "二氧化氮", children: [
+                        {title: "本次", dataIndex: "no2Current",align:"center"},
+                        {title: "上年同期", dataIndex: "no2SameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "no2ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "no2Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "可吸入颗粒物", children: [
+                        {title: "本次", dataIndex: "pm10Current",align:"center"},
+                        {title: "上年同期", dataIndex: "pm10SameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "pm10ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "pm10Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "一氧化碳", children: [
+                        {title: "本次", dataIndex: "coCurrent",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "上年同期", dataIndex: "coSameTimeLastYear",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "增减（%）", dataIndex: "coChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "coRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "臭氧", children: [
+                        {title: "本次", dataIndex: "o3Current",align:"center"},
+                        {title: "上年同期", dataIndex: "o3SameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "o3ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "o3Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "细颗粒物", children: [
+                        {title: "本次", dataIndex: "pm25Current",align:"center"},
+                        {title: "上年同期", dataIndex: "pm25SameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "pm25ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "pm25Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "空气质量综合指数", children: [
+                        {title: "本次", dataIndex: "comprehensiveAirQualityIndexCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "comprehensiveAirQualityIndexSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "comprehensiveAirQualityIndexChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "comprehensiveAirQualityIndexRank",align:"center"},
+                    ]
+                },/*
+
+                 BigDecimal pm25Change = BigDecimal.ZERO;
+            BigDecimal current = ambientAirStatisticalAnalysisExcel.getPm25Current();
+            BigDecimal sameTimeLastYear = ambientAirStatisticalAnalysisExcel.getPm25SameTimeLastYear();
+            BigDecimal subtract = current.subtract(sameTimeLastYear);
+            if(subtract.compareTo(BigDecimal.ZERO) != 0){
+                pm25Change = subtract.multiply(new BigDecimal(100)).divide(sameTimeLastYear,CHANGE_PERCENT_SCALE,ROUNDING_MODE);
+            }
+                */
+                {
+                    title: "优天数", children: [
+                        {title: "本次", dataIndex: "excellentDaysCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "excellentDaysSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "excellentDaysChangePercentage",align:"center"},
+                        // {title: "排名（按浓度值）", dataIndex: "excellentDaysRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "良天数", children: [
+                        {title: "本次", dataIndex: "goodDaysCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "goodDaysSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "goodDaysChangePercentage",align:"center"},
+                        // {title: "排名（按浓度值）", dataIndex: "goodDaysRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "轻度污染天数", children: [
+                        {title: "本次", dataIndex: "lightPollutionDaysCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "lightPollutionDaysSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "lightPollutionDaysChangePercentage",align:"center"},
+                        // {title: "排名（按浓度值）", dataIndex: "lightPollutionDaysRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "中度污染天数", children: [
+                        {title: "本次", dataIndex: "moderatelyPollutedDaysCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "moderatelyPollutedDaysSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "moderatelyPollutedDaysChangePercentage",align:"center"},
+                        // {title: "排名（按浓度值）", dataIndex: "moderatelyPollutedDaysRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "良天数", children: [
+                        {title: "本次", dataIndex: "goodDaysCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "goodDaysSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "goodDaysChangePercentage",align:"center"},
+                        // {title: "排名（按浓度值）", dataIndex: "goodDaysRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "重度污染天数", children: [
+                        {title: "本次", dataIndex: "heavyPollutionDaysCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "heavyPollutionDaysSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "heavyPollutionDaysChangePercentage",align:"center"},
+                    ]
+                },
+                {
+                    title: "优良率", children: [
+                        {title: "本次", dataIndex: "excellentRateCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "excellentRateSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "excellentRateChangePercentage",align:"center"},
+                    ]
+                },
+
+            ],
+            regionLevelOptions: [],
+            time: undefined,
+            // 表格搜索条件
+            where: {
+                regionLevel: "place",
+            },
+            // 表格选中数据
+            selectionList: [],
+        };
+    },
+    mounted() {
+        this.loadOptionData();
+        this.reload();
+    },
+    methods: {
+        /**获取下来框数据 */
+        loadOptionData() {
+            getColumnOptions("region_level").then((res) => {
+                this.regionLevelOptions = res.data.data.map((item) => {
+                    return {
+                        label: item,
+                        value: item,
+                    };
+                });
+            });
+        },
+        /* 刷新表格 */
+        reload() {
+            const where = _.cloneDeep(this.where);
+            const year = new Date().getFullYear();
+            if (!this.time) {
+                where.timeStart = `${year}-01-01 00:00:00`;
+                where.timeEnd = moment(Date.now()).format("YYYY-MM-DD 00:00:00")
+            } else {
+                if(this.time[0].year() != this.time[1].year()){
+                    Modal.error({
+                        title: "查询失败",
+                        content: "开始时间与结束时间年份不一致",
+                    })
+                    return;
+                }
+                where.timeStart = this.time[0].format("YYYY-MM-DD 00:00:00");
+                where.timeEnd = this.time[1].format("YYYY-MM-DD 00:00:00");
+            }
+            this.$refs.table.reload({
+                where
+            });
+        },
+        /* 重置搜索 */
+        reset() {
+            this.where = {
+                regionLevel: "place",
+            };
+            this.time = undefined;
+            this.reload();
+        },
+        exportFile() {
+            const arr = [];
+            const th1 = [];
+            const th2 = [];
+            const merges = []; // 合并
+            const columnsTemp = []; // 树形结构整理成list
+            this.columns.forEach((item,index)=>{
+                if(item.children){
+                    item.children.forEach((citem)=>{
+                        th1.push(item.title)
+                        th2.push(citem.title)
+                        columnsTemp.push(citem)
+                    })
+                    merges.push({s: {r: 0, c: th1.length-item.children.length}, e: {r: 0, c: th1.length-1}})
+                }else{
+                    th1.push(item.title)
+                    th2.push("")
+                    columnsTemp.push(item)
+                    merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
+                }
+            })
+            arr.push(th1,th2);
+            this.data.forEach((d) => {
+                const td = columnsTemp.map((item) => {
+                  if(item.customRender){
+                    return item.customRender({text:d[item.dataIndex]});
+                  }
+                  return d[item.dataIndex];
+                });
+
+                arr.push(td);
+            });
+            let sheet = XLSX.utils.aoa_to_sheet(arr);
+            sheet['!merges'] = merges;
+            this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/avg.vue b/src/views/water/river/statistic/avg.vue
new file mode 100644
index 0000000..463f90c
--- /dev/null
+++ b/src/views/water/river/statistic/avg.vue
@@ -0,0 +1,228 @@
+<template>
+    <div class="ele-body">
+        <a-card :bordered="false">
+            <!-- 搜索表单 -->
+            <a-form
+                :model="where"
+                layout="vertical"
+                :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.model" >
+                                <a-select-option
+                                    v-for="(item) in modelOptions"
+                                    :key="item.value"
+                                >{{ item.label }}
+                                </a-select-option>
+                            </a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row>
+                    <a-col :lg="24" :md="24" :sm="24" :xs="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-col>
+                </a-row>
+            </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)"
+            >
+
+            </ele-pro-table>
+        </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import {statisticAvg, getColumnOptions, listAllAir} from "@/api/ecology/atmosphere/air";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import moment from "moment";
+//   import utils from "./utils";
+export default {
+    name: "StatisticAirAvg",
+    components: {},
+    data() {
+        return {
+            data: [],
+            locale,
+            bill: {},
+            // 表格数据接口
+            url: statisticAvg,
+            selection: [],
+            modelOptions: [
+                {label: "市", value: "city"},
+                {label: "县", value: "county"},
+                {label: "站点", value: "place"},
+
+            ],
+            // 表格列配置
+            columns: [
+                {title:"SO2",dataIndex:"avgSo2"},
+                {title:"NO2",dataIndex:"avgNo2"},
+                {title:"PM10",dataIndex:"avgPm10"},
+                {title:"PM25",dataIndex:"avgPm25"},
+                {title:"CO",dataIndex:"avgCo"},
+                {title:"O3",dataIndex:"avgO3"},
+                {title:"AQI",dataIndex:"avgAqi"},
+                {title:"首要污染物",dataIndex:"primaryPollutant"},
+                {title:"空气质量指数级别",dataIndex:"aqiLevel"},
+                {title:"空气质量状况",dataIndex:"airQualityStatus"},
+                {title:"一氧化碳百分位数评价",dataIndex:"evaluationCo"},
+                {title:"臭氧百分位数评价",dataIndex:"evaluationO3"},
+            ],
+            regionLevelOptions: [],
+            // 表格搜索条件
+            where: {
+                model: "city",
+            },
+            // 表格选中数据
+            selectionList: [],
+        };
+    },
+    mounted() {
+        this.loadOptionData();
+    },
+    methods: {
+        /**获取下来框数据 */
+        loadOptionData() {
+            getColumnOptions("region_level").then((res) => {
+                this.regionLevelOptions = res.data.data.map((item) => {
+                    return {
+                        label: item,
+                        value: item,
+                    };
+                });
+            });
+        },
+        /* 刷新表格 */
+        reload() {
+            this.$refs.table.reload({
+                where: this.where,
+            });
+        },
+        /* 重置搜索 */
+        reset() {
+            this.where = {
+                model: "city",
+            };
+            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,
+                },
+                {
+                    title: "创建人",
+                    dataIndex: "username",
+                    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, new Date().getTime().toString());
+                }
+            })
+
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+</style>
\ No newline at end of file
diff --git a/src/views/water/river/statistic/city-county-place.vue b/src/views/water/river/statistic/city-county-place.vue
new file mode 100644
index 0000000..a299f69
--- /dev/null
+++ b/src/views/water/river/statistic/city-county-place.vue
@@ -0,0 +1,286 @@
+<template>
+    <div class="ele-body">
+        <a-card :bordered="false">
+            <!-- 搜索表单 -->
+            <a-form
+                :model="where"
+                layout="inline"
+            >
+                        <a-form-item label="区域等级:">
+                            <a-select v-model:value="where.regionLevel">
+                                <a-select-option
+                                    v-for="(item) in modelOptions"
+                                    :key="item.value"
+                                >{{ item.label }}
+                                </a-select-option>
+                            </a-select>
+                        </a-form-item>
+
+                        <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-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>
+            <!-- 表格 -->
+            <ele-pro-table
+                ref="table"
+                row-key="ambientAirId"
+                :need-page="false"
+                :datasource="url"
+                :columns="columns"
+                :where="where"
+                :scroll="{ x: 'max-content' }"
+                :init-load="false"
+                @done="(d) => (data = d.data)"
+                method="POST"
+            >
+
+            </ele-pro-table>
+        </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import _ from "lodash";
+import XLSX from "xlsx";
+import {statisticUrl, getColumnOptions,statisticArea} from "@/api/ecology/atmosphere/air";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import moment from "moment";
+
+//   import utils from "./utils";
+export default {
+    name: "StatisticAirAvg",
+    components: {},
+    data() {
+        const year = new Date().getFullYear();
+        return {
+            data: [],
+            locale,
+            bill: {},
+            // 表格数据接口
+            // url: statisticUrl,
+            selection: [],
+            modelOptions: [
+                {label: "市", value: "city"},
+                {label: "县", value: "county"},
+                {label: "站点", value: "place"},
+                {label: "城区", value: "area"},
+
+            ],
+            // 表格列配置
+            columns: [
+                {title: "站点/县", dataIndex: "place",align:"center",fixed: "left",},
+                {
+                    title: "二氧化硫", children: [
+                        {title: "本次", dataIndex: "so2Current",align:"center",customRender:({text})=>text + ""},
+                        {title: "上年同期", dataIndex: "so2SameTimeLastYear",align:"center",customRender:({text})=>text + ""},
+                        {title: "增减（%）", dataIndex: "so2ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "so2Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "二氧化氮", children: [
+                        {title: "本次", dataIndex: "no2Current",align:"center",customRender:({text})=>text + ""},
+                        {title: "上年同期", dataIndex: "no2SameTimeLastYear",align:"center",customRender:({text})=>text + ""},
+                        {title: "增减（%）", dataIndex: "no2ChangePercentage",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "no2Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "可吸入颗粒物", children: [
+                        {title: "本次", dataIndex: "pm10Current",align:"center",customRender:({text})=>text + ""},
+                        {title: "上年同期", dataIndex: "pm10SameTimeLastYear",align:"center",customRender:({text})=>text + ""},
+                        {title: "增减（%）", dataIndex: "pm10ChangePercentage",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "pm10Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "一氧化碳", children: [
+                        {title: "本次", dataIndex: "coCurrent",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "上年同期", dataIndex: "coSameTimeLastYear",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "增减（%）", dataIndex: "coChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "coRank",align:"center"},
+                    ]
+                },
+                {
+                    title: "臭氧", children: [
+                        {title: "本次", dataIndex: "o3Current",align:"center",customRender:({text})=>text + ""},
+                        {title: "上年同期", dataIndex: "o3SameTimeLastYear",align:"center",customRender:({text})=>text + ""},
+                        {title: "增减（%）", dataIndex: "o3ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "o3Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "细颗粒物", children: [
+                        {title: "本次", dataIndex: "pm25Current",align:"center",customRender:({text})=>text + ""},
+                        {title: "上年同期", dataIndex: "pm25SameTimeLastYear",align:"center",customRender:({text})=>text + ""},
+                        {title: "增减（%）", dataIndex: "pm25ChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "pm25Rank",align:"center"},
+                    ]
+                },
+                {
+                    title: "综合指数", children: [
+                        {title: "本次", dataIndex: "comprehensiveAirQualityIndexCurrent",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(2)+"":""},
+                        {title: "上年同期", dataIndex: "comprehensiveAirQualityIndexSameTimeLastYear",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(2)+"":""},
+                        {title: "增减（%）", dataIndex: "comprehensiveAirQualityIndexChangePercentage",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                        {title: "排名（按浓度值）", dataIndex: "comprehensiveAirQualityIndexRank",align:"center"},
+                    ]
+                },
+                // {
+                //     title: "优天数", children: [
+                //         {title: "本次", dataIndex: "excellentDaysCurrent",align:"center"},
+                //         {title: "上年同期", dataIndex: "excellentDaysSameTimeLastYear",align:"center"},
+                //         {title: "增减（%）", dataIndex: "excellentDaysChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                //         // {title: "排名（按浓度值）", dataIndex: "excellentDaysRank",align:"center"},
+                //     ]
+                // },
+                // {
+                //     title: "良天数", children: [
+                //         {title: "本次", dataIndex: "goodDaysCurrent",align:"center"},
+                //         {title: "上年同期", dataIndex: "goodDaysSameTimeLastYear",align:"center"},
+                //         {title: "增减（%）", dataIndex: "goodDaysChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                //         // {title: "排名（按浓度值）", dataIndex: "goodDaysRank",align:"center"},
+                //     ]
+                // },
+                // {
+                //     title: "轻度污染天数", children: [
+                //         {title: "本次", dataIndex: "lightPollutionDaysCurrent",align:"center"},
+                //         {title: "上年同期", dataIndex: "lightPollutionDaysSameTimeLastYear",align:"center"},
+                //         {title: "增减（%）", dataIndex: "lightPollutionDaysChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                //         // {title: "排名（按浓度值）", dataIndex: "lightPollutionDaysRank",align:"center"},
+                //     ]
+                // },
+                // {
+                //     title: "中度污染天数", children: [
+                //         {title: "本次", dataIndex: "moderatelyPollutedDaysCurrent",align:"center"},
+                //         {title: "上年同期", dataIndex: "moderatelyPollutedDaysSameTimeLastYear",align:"center"},
+                //         {title: "增减（%）", dataIndex: "moderatelyPollutedDaysChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                //         // {title: "排名（按浓度值）", dataIndex: "moderatelyPollutedDaysRank",align:"center"},
+                //     ]
+                // },
+                // {
+                //     title: "良天数", children: [
+                //         {title: "本次", dataIndex: "goodDaysCurrent",align:"center"},
+                //         {title: "上年同期", dataIndex: "goodDaysSameTimeLastYear",align:"center"},
+                //         {title: "增减（%）", dataIndex: "goodDaysChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                //         // {title: "排名（按浓度值）", dataIndex: "goodDaysRank",align:"center"},
+                //     ]
+                // },
+                // {
+                //     title: "重度污染天数", children: [
+                //         {title: "本次", dataIndex: "heavyPollutionDaysCurrent",align:"center"},
+                //         {title: "上年同期", dataIndex: "heavyPollutionDaysSameTimeLastYear",align:"center"},
+                //         {title: "增减（%）", dataIndex: "heavyPollutionDaysChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                //     ]
+                // },
+                {
+                    title: "优良率", children: [
+                        {title: "本次", dataIndex: "excellentRateCurrent",align:"center"},
+                        {title: "上年同期", dataIndex: "excellentRateSameTimeLastYear",align:"center"},
+                        {title: "增减（%）", dataIndex: "excellentRateChangePercentage",align:"center",customRender:({text})=> typeof text == "number"?text.toFixed(1)+"":""},
+                    ]
+                },
+
+            ],
+            regionLevelOptions: [],
+            time: [],
+            // 表格搜索条件
+            where: {
+                regionLevel: "place",
+                timeStart:moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
+                timeEnd:moment().format("YYYY-MM-DD 00:00:00")
+            },
+            // 表格选中数据
+            selectionList: [],
+        };
+    },
+    mounted() {
+
+        this.loadOptionData();
+        this.reload();
+    },
+    computed:{
+        url(){
+            if(this.where.regionLevel == "area"){
+                return statisticArea
+            }else{
+                return statisticUrl
+            }
+        }
+    },
+    methods: {
+        /**获取下来框数据 */
+        loadOptionData() {
+            getColumnOptions("region_level").then((res) => {
+                this.regionLevelOptions = res.data.data.map((item) => {
+                    return {
+                        label: item,
+                        value: item,
+                    };
+                });
+            });
+        },
+        /* 刷新表格 */
+        reload() {
+            const where = _.cloneDeep(this.where);
+
+            if(this.where.regionLevel == "area"){
+                delete where["regionLevel"]
+            }
+            this.$refs.table.reload({
+                where
+            });
+        },
+        /* 重置搜索 */
+        reset() {
+            this.where = {
+                regionLevel: "place",
+            };
+            this.time = undefined;
+            this.reload();
+        },
+        exportFile() {
+            const arr = [];
+            const th1 = [];
+            const th2 = [];
+            const merges = []; // 合并
+            const columnsTemp = []; // 树形结构整理成list
+            this.columns.forEach((item,index)=>{
+                if(item.children){
+                    item.children.forEach((citem)=>{
+                        th1.push(item.title)
+                        th2.push(citem.title)
+                        columnsTemp.push(citem)
+                    })
+                    merges.push({s: {r: 0, c: th1.length-item.children.length}, e: {r: 0, c: th1.length-1}})
+                }else{
+                    th1.push(item.title)
+                    th2.push("")
+                    columnsTemp.push(item)
+                    merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
+                }
+            })
+            arr.push(th1,th2);
+            this.data.forEach((d) => {
+                const td = columnsTemp.map((item) => d[item.dataIndex]);
+                arr.push(td);
+            });
+            let sheet = XLSX.utils.aoa_to_sheet(arr);
+            sheet['!merges'] = merges;
+            this.$util.exportSheet(XLSX, sheet, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日")+ "统计数据");
+
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/index.vue b/src/views/water/river/statistic/index.vue
index 790a126..c434198 100644
--- a/src/views/water/river/statistic/index.vue
+++ b/src/views/water/river/statistic/index.vue
@@ -2,57 +2,72 @@
   <div class="ele-body">
     <a-card :bordered="false">
       <a-tabs v-model:activeKey="activeKey">
-        <a-tab-pane key="base" tab="数据总览">
-          <base-statistic></base-statistic>
+        <a-tab-pane tab="江河信息" key="cca">
+          <a-tabs v-model:active="active">
+            <a-tab-pane key="base" tab="数据总览">
+              <base-statistic></base-statistic>
+            </a-tab-pane>
+            <a-tab-pane tab="当月水质达标" key="base1">
+              <function-bill ref="functionWater"></function-bill>
+            </a-tab-pane>
+            <a-tab-pane tab="平均水质达标" key="base2">
+              <function-bill ref="functionWater"></function-bill>
+            </a-tab-pane>
+            <a-tab-pane tab="当月综合指数" key="base3">
+              <function-bill ref="functionWater"></function-bill>
+            </a-tab-pane>
+            <a-tab-pane tab="平均水质指数" key="base4">
+              <function-bill ref="functionWater"></function-bill>
+            </a-tab-pane>
+          </a-tabs>
+        </a-tab-pane>
+        <a-tab-pane tab="水功能区" key="ccb">
+          <a-tabs v-model:activeWater="activeWater">
+            <a-tab-pane tab="自治区级水功能" key="water1">
+              <auto-statis ref="water"></auto-statis>
+            </a-tab-pane>
+            <a-tab-pane tab="国家级水功能" key="water2">
+              <national-statis ref="functionWater"></national-statis>
+            </a-tab-pane>
+          </a-tabs>
+        </a-tab-pane>
+        <a-tab-pane tab="水站" key="ccd">
+          <a-tabs v-model:activeSite="activeSite">
+            <a-tab-pane tab="水站数据统计" key="site1">
+              <site-statis ref="water"></site-statis>
+            </a-tab-pane>
+            <a-tab-pane tab="水站日均值数据统计" key="site2">
+              <site-day-statis ref="functionWater"></site-day-statis>
+            </a-tab-pane>
+          </a-tabs>
         </a-tab-pane>
-<!--          <a-tab-pane v-show="false" key="avg" tab="均值、百分位">-->
-<!--              <avg-statistic></avg-statistic>-->
-<!--          </a-tab-pane>-->
-          <a-tab-pane key="ccp" tab="市、县、站点统计">
-              <city-county-place></city-county-place>
-          </a-tab-pane>
-          <a-tab-pane key="area" tab="城区分担浓度统计">
-              <area-base></area-base>
-          </a-tab-pane>
-<!--          <a-tab-pane key="avg" tab="均值、百分位">-->
-<!--              <avg-statistic></avg-statistic>-->
-<!--          </a-tab-pane>-->
       </a-tabs>
     </a-card>
   </div>
 </template>
 
 <script>
-  /**
-   * 
-   * 
-   * 
-   */
   import BaseStatistic from "./base.vue";
-  // import AvgStatistic from "./avg";
-  // import CityCountyPlace from "./city-county-place";
-  // import AreaBase from "./area-base";
+  import AutoStatis from "../../water-function-area/statistic/auto.vue";
+  import NationalStatis from "../../water-function-area/statistic/national.vue";
+  import SiteStatis from "../../river-station/statistic/site.vue";
+  import SiteDayStatis from "../../river-station/statistic/site-day-avg.vue";
   export default {
     name: 'StatisticAirIndex',
     components: {
-        // eslint-disable-next-line vue/no-unused-components
       BaseStatistic
-      // ,AvgStatistic,CityCountyPlace,AreaBase
-
     },
     data() {
       return {
-        activeKey: 'ccp'
+        activeKey: 'cca',
+        active: 'base',
+        activeWater: 'water1',
+        activeSite:'site1'
       };
-        
+
     },
-    methods: {
-     
-    }
 
   }
+
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/water/water-function-area/statistic/auto.vue b/src/views/water/water-function-area/statistic/auto.vue
new file mode 100644
index 0000000..72ae1a5
--- /dev/null
+++ b/src/views/water/water-function-area/statistic/auto.vue
@@ -0,0 +1,325 @@
+<!--江河水功能区自治区数据统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form
+        :model="where"
+        :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 16 }, 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.area" allowClear showSearch>
+                <a-select-option
+                  v-for="item in areaOptions"
+                  :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-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <a-modal
+        v-model:visible="showEdit"
+        :title="form.waterStationWaterFunctionAreaId !== undefined ? '修改记录' : '添加记录'"
+        :confirm-loading="loading"
+        :width="1000"
+        :body-style="{ paddingBottom: '8px' }"
+        @ok="save"
+      >
+        <a-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          :label-col="{ md: { span: 24 }, sm: { span: 24 } }"
+          :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
+          layout="vertical"
+          labelAlign="left"
+        >
+          <a-row gutter="12"	>
+            <a-col :md="12" :sm="24">
+              <a-form-item label="采样时间" name="monitorTime">
+                <a-date-picker
+                  v-model:value="form.monitorTime"
+                  :locale="locale"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :sm="24">
+            </a-col>
+            <template  v-for="(item,index) in tableCityColumns" :key="index">
+              <template v-if="item.children">
+                <a-col  v-for="(citem,cindex) in item.children" :key="cindex"  :md="12" :sm="24">
+                  <a-form-item :label="item.title + '-' + citem.title" :name="citem.dataIndex">
+                    <a-input
+                      v-model:value="form[citem.dataIndex]"
+                      :placeholder="'请输入' +item.title + '-' + citem.title"
+                      allow-clear
+                    />
+                  </a-form-item>
+                </a-col>
+              </template>
+              <template v-else>
+                <a-col :md="12" :sm="24">
+                  <a-form-item :label="item.title" :name="item.dataIndex">
+                    <a-input
+                      v-model:value="form[item.dataIndex]"
+                      :placeholder="'请输入' + item.title"
+                      allow-clear
+                    />
+                  </a-form-item>
+                </a-col>
+              </template>
+            </template>
+
+          </a-row>
+        </a-form>
+      </a-modal>
+      <!-- 表格 -->
+      <ele-pro-table
+        v-model:selection="selectionList"
+        ref="table"
+        row-key="waterStationWaterFunctionAreaId"
+        :datasource="url"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+      >
+        <template v-if="bill.checked != 1" #toolbar>
+          <a-space>
+            <a-button @click="openEdit" type="primary">新增</a-button>
+            <a-popconfirm
+              :disabled="selectionList.length == 0"
+              :title="`确认删除${selectionList.length}条数据吗?`"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="removeBatch"
+            >
+              <a-button
+                :disabled="selectionList.length == 0"
+                type="primary"
+                ghost
+                danger
+                >删除</a-button
+              >
+            </a-popconfirm>
+          </a-space>
+        </template>
+        <template #action="{ record }">
+          <a-space>
+            <a-button
+              @click="openEdit(record)"
+              type="primary"
+              shape="round"
+              size="small"
+              >修改</a-button
+            >
+            <a-popconfirm
+              :title="`确认删除这条数据吗?`"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="remove(record)"
+            >
+              <a-button type="primary" danger shape="round" size="small"
+                >删除</a-button
+              >
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import _ from "lodash";
+import {
+  pageRiverStationUrl,
+  saveRiverStation,
+  removeRiverStation,
+  removeBatchRiverStation,
+  updateRiverStation,
+  getRiverStationBill,
+} from "@/api/ecology/river-station";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableCityColumns } from "./colums";
+//   import utils from "./utils";
+export default {
+  name: "RiverStationCollectWater",
+  components: {},
+  data() {
+    const { billId } = this.$route.params;
+    return {
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageRiverStationUrl,
+      selection: [],
+      tableCityColumns,
+      // 表格列配置
+      columns: [
+        ...tableCityColumns,
+
+        {
+          title: "创建人",
+          dataIndex: "userName",
+          sorter: true,
+        },
+        {
+          title: "操作",
+          key: "action",
+          width: 150,
+          align: "center",
+          fixed: "right",
+          slots: {
+            customRender: "action",
+          },
+        },
+      ],
+      // 表格搜索条件
+      waterStationWaterFunctionAreaBillId: billId,
+      where: {
+        waterStationWaterFunctionAreaBillId: billId,
+      },
+      // 表格选中数据
+      selectionList: [],
+      // 是否显示编辑弹窗
+      showEdit: false,
+      // 表单数据
+      form: {},
+      loading: false,
+      rules: {},
+    };
+  },
+  mounted() {
+    const { billId } = this.$route.params;
+    getRiverStationBill(billId).then((res) => {
+      this.bill = res.data.data;
+      if (res.data.data.checked == 1) {
+        this.columns.splice(this.columns.length - 1, 1);
+      }
+    });
+    this.loadOptionData();
+  },
+  methods: {
+    /**获取下来框数据 */
+    loadOptionData() {},
+    /* 刷新表格 */
+    reload() {
+      console.log("--------------------------")
+      console.log(this.url);
+      this.$refs.table.reload({
+        where: this.where,
+      });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        waterStationWaterFunctionAreaBillId: this.waterStationWaterFunctionAreaBillId,
+      };
+      this.reload();
+    },
+    /* 显示编辑 */
+    openEdit(record) {
+      const cloneRecord = _.cloneDeep(record);
+      this.form = Object.assign({}, cloneRecord);
+      this.showEdit = true;
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(); // 清除表单验证信息
+      });
+    },
+
+    save() {
+      const hide = this.$message.loading("请求中..", 0);
+      const form = _.cloneDeep(this.form);
+      if (form.waterStationWaterFunctionAreaId) {
+        updateRiverStation(form)
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.showEdit = false;
+              this.$message.success(res.data.msg);
+              this.reload();
+            } else {
+              this.$message.error(res.data.msg);
+            }
+          })
+          .catch((error) => {
+            this.$message.error(error.message);
+          })
+          .finally(() => {
+            console.log("finallyfinallyfinallyfinally");
+            hide();
+          });
+      } else {
+        form.waterStationWaterFunctionAreaBillId = this.waterStationWaterFunctionAreaBillId;
+        form.userId = this.$store.state.user.user.userId
+        saveRiverStation(form)
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.showEdit = false;
+              this.$message.success(res.data.msg);
+              this.reload();
+            } else {
+              this.$message.error(res.data.msg);
+            }
+          })
+          .catch((error) => {
+            this.$message.error(error.message);
+          })
+          .finally(() => {
+            hide();
+          });
+      }
+    },
+    /* 删除单个 */
+    remove(row) {
+      const hide = this.$message.loading("请求中..", 0);
+      removeRiverStation(row.waterStationWaterFunctionAreaId)
+        .then((res) => {
+          if (res.data.code === 0) {
+            this.$message.success(res.data.msg);
+            this.reload();
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((e) => {
+          this.$message.error(e.msg);
+        })
+        .finally(() => hide());
+    },
+    removeBatch() {
+      const ids = this.selectionList.map((item) => item.waterStationWaterFunctionAreaId);
+      const hide = this.$message.loading("请求中..", 0);
+      removeBatchRiverStation(ids)
+        .then((res) => {
+          if (res.data.code === 0) {
+            this.$message.success(res.data.msg);
+            this.reload();
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((e) => {
+          this.$message.error(e.msg);
+        })
+        .finally(() => hide());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/water-function-area/statistic/national.vue b/src/views/water/water-function-area/statistic/national.vue
new file mode 100644
index 0000000..5a827a1
--- /dev/null
+++ b/src/views/water/water-function-area/statistic/national.vue
@@ -0,0 +1,354 @@
+<!--江河水功能区国家级数据统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form
+        :model="where"
+        :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 16 }, 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.area" allowClear showSearch>
+                <a-select-option
+                  v-for="item in areaOptions"
+                  :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-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <a-modal
+        v-model:visible="showEdit"
+        :title="form.nationalLevelWaterFunctionAreaId !== undefined ? '修改记录' : '添加记录'"
+        :confirm-loading="loading"
+        :width="1000"
+        :body-style="{ paddingBottom: '8px' }"
+        @ok="save"
+      >
+        <a-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          :label-col="{ md: { span: 24 }, sm: { span: 24 } }"
+          :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
+          layout="vertical"
+          labelAlign="left"
+        >
+          <a-row gutter="12"	>
+            <a-col :md="12" :sm="24">
+              <a-form-item label="采样时间" name="monitorDate">
+                <a-date-picker
+                  v-model:value="form.monitorDate"
+                  :locale="locale"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :sm="24">
+<!--              <a-form-item label="时间" name="monitorTime">-->
+<!--                <a-time-picker-->
+<!--                  v-model:value="form.monitorTime"-->
+<!--                  format="HH:mm"-->
+<!--                />-->
+<!--              </a-form-item>-->
+            </a-col>
+            <template  v-for="(item,index) in tableColumns" :key="index">
+              <template v-if="item.children">
+                <a-col  v-for="(citem,cindex) in item.children" :key="cindex"  :md="12" :sm="24">
+                  <a-form-item :label="item.title + '-' + citem.title" :name="citem.dataIndex">
+                    <a-input
+                      v-model:value="form[citem.dataIndex]"
+                      :placeholder="'请输入' +item.title + '-' + citem.title"
+                      allow-clear
+                    />
+                  </a-form-item>
+                </a-col>
+              </template>
+              <template v-else>
+                <a-col :md="12" :sm="24">
+                  <a-form-item :label="item.title" :name="item.dataIndex">
+                    <a-input
+                      v-model:value="form[item.dataIndex]"
+                      :placeholder="'请输入' + item.title"
+                      allow-clear
+                    />
+                  </a-form-item>
+                </a-col>
+              </template>
+            </template>
+
+          </a-row>
+        </a-form>
+      </a-modal>
+      <!-- 表格 -->
+      <ele-pro-table
+        v-model:selection="selectionList"
+        ref="table"
+        row-key="nationalLevelWaterFunctionAreaId"
+        :datasource="url"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+      >
+        <template v-if="bill.checked != 1" #toolbar>
+          <a-space>
+            <a-button @click="openEdit" type="primary">新增</a-button>
+            <a-popconfirm
+              :disabled="selectionList.length == 0"
+              :title="`确认删除${selectionList.length}条数据吗?`"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="removeBatch"
+            >
+              <a-button
+                :disabled="selectionList.length == 0"
+                type="primary"
+                ghost
+                danger
+                >删除</a-button
+              >
+            </a-popconfirm>
+          </a-space>
+        </template>
+        <template #action="{ record }">
+          <a-space>
+            <a-button
+              @click="openEdit(record)"
+              type="primary"
+              shape="round"
+              size="small"
+              >修改</a-button
+            >
+            <a-popconfirm
+              :title="`确认删除这条数据吗?`"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="remove(record)"
+            >
+              <a-button type="primary" danger shape="round" size="small"
+                >删除</a-button
+              >
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import _ from "lodash";
+import {
+  pageWaterFunctionAreaUrl,
+  saveWaterFunctionArea,
+  removeWaterFunctionArea,
+  removeBatchWaterFunctionArea,
+  updateWaterFunctionArea,
+  getWaterFunctionAreaBill,
+  // getColumnOptions,
+} from "@/api/ecology/water-function-area";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import moment from "moment";
+import { tableColumns } from "./colums";
+//   import utils from "./utils";
+export default {
+  name: "WaterFunctionAreaCollectWater",
+  components: {},
+  data() {
+    const { billId } = this.$route.params;
+    return {
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageWaterFunctionAreaUrl,
+      selection: [],
+      tableColumns,
+      // 表格列配置
+      columns: [
+        ...tableColumns,
+
+        {
+          title: "创建人",
+          dataIndex: "userName",
+          sorter: true,
+        },
+        {
+          title: "操作",
+          key: "action",
+          width: 150,
+          align: "center",
+          fixed: "right",
+          slots: {
+            customRender: "action",
+          },
+        },
+      ],
+      // 表格搜索条件
+      nationalLevelWaterFunctionAreaBillId: billId,
+      where: {
+        nationalLevelWaterFunctionAreaBillId: billId,
+      },
+      // 表格选中数据
+      selectionList: [],
+      // 是否显示编辑弹窗
+      showEdit: false,
+      // 表单数据
+      form: {},
+      loading: false,
+      rules: {},
+    };
+  },
+  mounted() {
+    const { billId } = this.$route.params;
+    getWaterFunctionAreaBill(billId).then((res) => {
+      this.bill = res.data.data;
+      if (res.data.data.checked == 1) {
+        this.columns.splice(this.columns.length - 1, 1);
+      }
+    });
+    this.loadOptionData();
+  },
+  methods: {
+    /**获取下来框数据 */
+    loadOptionData() {},
+    /* 刷新表格 */
+    reload() {
+      console.log("--------------------------")
+      console.log(this.url);
+      this.$refs.table.reload({
+        where: this.where,
+      });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        nationalLevelWaterFunctionAreaBillId: this.nationalLevelWaterFunctionAreaBillId,
+      };
+      this.reload();
+    },
+    /* 显示编辑 */
+    openEdit(record) {
+      const cloneRecord = _.cloneDeep(record);
+      if (record && cloneRecord.samplingTime) {
+        console.log(moment(cloneRecord.monitorTime).format("YYYY MM DD"));
+        cloneRecord.monitorDate = moment(cloneRecord.samplingTime);
+        cloneRecord.monitorTime = moment(cloneRecord.samplingTime);
+      }
+      // cloneRecord.mi
+      this.form = Object.assign({}, cloneRecord);
+      this.showEdit = true;
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(); // 清除表单验证信息
+      });
+    },
+
+    save() {
+      console.log("save开始"+this.form)
+      const hide = this.$message.loading("请求中..", 0);
+      const form = _.cloneDeep(this.form);
+      const date = new Date();
+      date.setFullYear(form.monitorDate.year());
+      date.setMonth(form.monitorDate.month());
+      date.setDate(form.monitorDate.date());
+      form.samplingTime = date.getTime();
+      // form.monitorYear = date.getFullYear();
+      // form.monitorMonth = date.getMonth() + 1;
+      // form.monitorDay = date.getDate();
+      // form.monitorHour = date.getHours();
+      // form.monitorMinute = date.getMinutes();
+      delete form["monitorDate"];
+      delete form["monitorTime"];
+      if (form.nationalLevelWaterFunctionAreaId) {
+        console.log("编辑开始"+form)
+        updateWaterFunctionArea(form)
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.showEdit = false;
+              this.$message.success(res.data.msg);
+              this.reload();
+            } else {
+              this.$message.error(res.data.msg);
+            }
+          })
+          .catch((error) => {
+            this.$message.error(error.message);
+          })
+          .finally(() => {
+            console.log("finallyfinallyfinallyfinally");
+            hide();
+          });
+      } else {
+        console.log("保存开始"+form);
+        form.nationalLevelWaterFunctionAreaBillId = this.nationalLevelWaterFunctionAreaBillId;
+        form.userId = this.$store.state.user.user.userId
+        saveWaterFunctionArea(form)
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.showEdit = false;
+              this.$message.success(res.data.msg);
+              this.reload();
+            } else {
+              this.$message.error(res.data.msg);
+            }
+          })
+          .catch((error) => {
+            this.$message.error(error.message);
+          })
+          .finally(() => {
+            hide();
+          });
+      }
+    },
+    /* 删除单个 */
+    remove(row) {
+      const hide = this.$message.loading("请求中..", 0);
+      removeWaterFunctionArea(row.nationalLevelWaterFunctionAreaId)
+        .then((res) => {
+          if (res.data.code === 0) {
+            this.$message.success(res.data.msg);
+            this.reload();
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((e) => {
+          this.$message.error(e.msg);
+        })
+        .finally(() => hide());
+    },
+    removeBatch() {
+      const ids = this.selectionList.map((item) => item.nationalLevelWaterFunctionAreaId);
+      const hide = this.$message.loading("请求中..", 0);
+      removeBatchWaterFunctionArea(ids)
+        .then((res) => {
+          if (res.data.code === 0) {
+            this.$message.success(res.data.msg);
+            this.reload();
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((e) => {
+          this.$message.error(e.msg);
+        })
+        .finally(() => hide());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>