江河模块修改

src/views/water/river/statistic/avg-index.vue

@@ -7,8 +7,28 @@
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
           <a-form-item label="断面名称">
-            <a-select v-model:value="where.name" allowClear showSearch>
-              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+            <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
+                {{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="河段名称">
+            <a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
+              <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="水系名称">
+            <a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
+              <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="指标名称">
+            <a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
+              <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
+                {{ item }}
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -42,7 +62,8 @@
 
 <script>
   import {
-    listMonthCompositeIndex
+    listAvgCompositeIndex,
+    listTargetInfo,
   } from "@/api/ecology/river-statis";
   import {
     listInfo
@@ -103,14 +124,35 @@
         sectionInfo: {},
         loading: false,
         rules: {},
+        waterBodyList: [],
+        waterSystemList: [],
+        targetInfo:{},
+        targetInfoList:[],
       };
     },
     created() {
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
-          this.visibleWater = true;
           this.sectionInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.waterSystemList.push(m.waterBody);
+            this.waterBodyList.push(m.riverSystem);
+          })
+          this.waterSystemList = [...new Set(this.waterSystemList)];
+          this.waterBodyList = [...new Set(this.waterBodyList)];
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      }),
+      listTargetInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.targetInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.targetInfoList.push(m.indicatorName);
+          })
+          this.targetInfoList = [...new Set(this.targetInfoList)];
         } else {
           this.$message.error(res.data.msg);
         }
@@ -121,7 +163,7 @@
       reload() {
         this.loading=true;
         this.momData = [];
-        listMonthCompositeIndex(this.where).then((res) => {
+        listAvgCompositeIndex(this.where).then((res) => {
           console.log(res.data.data);
           if (res.data.code == 0) {
             this.$message.success(res.data.msg);

src/views/water/river/statistic/avg-standard.vue

@@ -7,8 +7,28 @@
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
           <a-form-item label="断面名称">
-            <a-select v-model:value="where.name" allowClear showSearch>
-              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+            <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
+                {{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="河段名称">
+            <a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
+              <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="水系名称">
+            <a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
+              <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="指标名称">
+            <a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
+              <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
+                {{ item }}
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -48,7 +68,8 @@
 
 <script>
   import {
-    listMonthWaterQualitySandard
+    listAvgWaterQualitySandard,
+    listTargetInfo,
   } from "@/api/ecology/river-statis";
   import {
     listInfo
@@ -111,14 +132,35 @@
         sectionInfo: {},
         loading: false,
         rules: {},
+        waterBodyList: [],
+        waterSystemList: [],
+        targetInfo:{},
+        targetInfoList:[],
       };
     },
     created() {
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
-          this.visibleWater = true;
           this.sectionInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.waterSystemList.push(m.waterBody);
+            this.waterBodyList.push(m.riverSystem);
+          })
+          this.waterSystemList = [...new Set(this.waterSystemList)];
+          this.waterBodyList = [...new Set(this.waterBodyList)];
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      }),
+      listTargetInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.targetInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.targetInfoList.push(m.indicatorName);
+          })
+          this.targetInfoList = [...new Set(this.targetInfoList)];
         } else {
           this.$message.error(res.data.msg);
         }
@@ -129,7 +171,7 @@
       reload() {
         this.loading = true;
         this.momData = [];
-        listMonthWaterQualitySandard(this.where).then((res) => {
+        listAvgWaterQualitySandard(this.where).then((res) => {
           console.log(res.data.data);
           if (res.data.code == 0) {
             this.$message.success(res.data.msg);

src/views/water/river/statistic/base-index.vue

@@ -7,8 +7,28 @@
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
           <a-form-item label="断面名称">
-            <a-select v-model:value="where.name" allowClear showSearch>
-              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+            <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
+                {{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="河段名称">
+            <a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
+              <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="水系名称">
+            <a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
+              <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="指标名称">
+            <a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
+              <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
+                {{ item }}
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -18,9 +38,12 @@
           <a-form-item label="月份:">
             <a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
           </a-form-item> -->
-          <a-form-item label="查询时间:">
+         <a-form-item label="开始时间:">
             <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          <a-form-item label="结束时间:">
+            <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" />
+          </a-form-item>
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -45,7 +68,8 @@
 
 <script>
   import {
-    listMonthCompositeIndex
+    listMonthCompositeIndex,
+    listTargetInfo,
   } from "@/api/ecology/river-statis";
   import {
     listInfo
@@ -70,6 +94,11 @@
             dataIndex: 'orderBy',
             key: 'orderBy',
           },
+          {
+            title: '采样时间',
+            dataIndex: 'monitorTime',
+            key: 'monitorTime',
+          },
           {
             title: "水质综合指数",
             children: [{
@@ -106,14 +135,35 @@
         sectionInfo: {},
         loading: false,
         rules: {},
+        waterBodyList: [],
+        waterSystemList: [],
+        targetInfo:{},
+        targetInfoList:[],
       };
     },
     created() {
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
-          this.visibleWater = true;
           this.sectionInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.waterSystemList.push(m.waterBody);
+            this.waterBodyList.push(m.riverSystem);
+          })
+          this.waterSystemList = [...new Set(this.waterSystemList)];
+          this.waterBodyList = [...new Set(this.waterBodyList)];
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      }),
+      listTargetInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.targetInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.targetInfoList.push(m.indicatorName);
+          })
+          this.targetInfoList = [...new Set(this.targetInfoList)];
         } else {
           this.$message.error(res.data.msg);
         }

src/views/water/river/statistic/base-standard.vue

@@ -7,8 +7,28 @@
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
           <a-form-item label="断面名称">
-            <a-select v-model:value="where.name" allowClear showSearch>
-              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+            <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
+                {{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="河段名称">
+            <a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
+              <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="水系名称">
+            <a-select v-model:value="where.waterSystem" placeholder="请选择水系名称"  allowClear showSearch>
+              <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="指标名称">
+            <a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
+              <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
+                {{ item }}
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -18,9 +38,12 @@
           <a-form-item label="月份:">
             <a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
           </a-form-item> -->
-          <a-form-item label="查询时间:">
+          <a-form-item label="开始时间:">
             <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          <a-form-item label="结束时间:">
+            <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" />
+          </a-form-item>
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -45,7 +68,8 @@
 
 <script>
   import {
-    listMonthWaterQualitySandard
+    listMonthWaterQualitySandard,
+    listTargetInfo,
   } from "@/api/ecology/river-statis";
   import {
     listInfo
@@ -80,6 +104,11 @@
             dataIndex: 'waterTarget',
             key: 'waterTarget',
           },
+          {
+            title: '采样时间',
+            dataIndex: 'monitorTime',
+            key: 'monitorTime',
+          },
           {
             title: '水质类别',
             dataIndex: 'waterQualityCategory',
@@ -108,14 +137,35 @@
         sectionInfo: {},
         loading: false,
         rules: {},
+        waterBodyList: [],
+        waterSystemList: [],
+        targetInfo:{},
+        targetInfoList:[],
       };
     },
     created() {
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
-          this.visibleWater = true;
           this.sectionInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.waterSystemList.push(m.waterBody);
+            this.waterBodyList.push(m.riverSystem);
+          })
+          this.waterSystemList = [...new Set(this.waterSystemList)];
+          this.waterBodyList = [...new Set(this.waterBodyList)];
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      }),
+      listTargetInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.targetInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.targetInfoList.push(m.indicatorName);
+          })
+          this.targetInfoList = [...new Set(this.targetInfoList)];
         } else {
           this.$message.error(res.data.msg);
         }

src/views/water/river/statistic/base.vue

@@ -42,8 +42,28 @@
     <a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
   </a-form-item>
   <a-form-item label="断面名称">
-    <a-select v-model:value="where.sectionName" allowClear showSearch style="width: 150px;">
-      <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+    <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
+      <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
+        {{ item.sectionName }}
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+  <a-form-item label="河段名称">
+    <a-select v-model:value="where.riverLakeLibrary" allowClear showSearch>
+      <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+  <a-form-item label="水系名称">
+    <a-select v-model:value="where.waterSystem" allowClear showSearch>
+      <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+  <a-form-item label="指标名称">
+    <a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
+      <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
+        {{ item }}
       </a-select-option>
     </a-select>
   </a-form-item>
@@ -69,6 +89,9 @@
     getRiverBill,
     pageRiverUrl
   } from "@/api/ecology/river";
+  import {
+    listTargetInfo,
+  } from "@/api/ecology/river-statis";
   import {
     listInfo
   } from "@/api/ecology/water/river-plcae";
@@ -104,6 +127,10 @@
         sectionInfo: {},
         loading: false,
         rules: {},
+        waterBodyList: [],
+        waterSystemList: [],
+        targetInfo:{},
+        targetInfoList:[],
       };
     },
     mounted() {
@@ -126,6 +153,18 @@
         } else {
           this.$message.error(res.data.msg);
         }
+      }),
+      listTargetInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.targetInfo = res.data.data
+          res.data.data.forEach((m) => {
+            this.targetInfoList.push(m.indicatorName);
+          })
+          this.targetInfoList = [...new Set(this.targetInfoList)];
+        } else {
+          this.$message.error(res.data.msg);
+        }
       })
     },
     methods: {

src/views/water/river/statistic/index.vue

@@ -7,13 +7,13 @@
             <a-tab-pane key="base" tab="数据总览">
               <base-statistic></base-statistic>
             </a-tab-pane>
-            <a-tab-pane tab="当月水质达标" key="base1">
+            <a-tab-pane tab="单月水质达标" key="base1">
               <month-standard ></month-standard>
             </a-tab-pane>
             <a-tab-pane tab="平均水质达标" key="base2">
               <avg-standard></avg-standard>
             </a-tab-pane>
-            <a-tab-pane tab="当月综合指数" key="base3">
+            <a-tab-pane tab="单月综合指数" key="base3">
               <month-index ></month-index>
             </a-tab-pane>
             <a-tab-pane tab="平均水质指数" key="base4">
@@ -24,11 +24,33 @@
         <a-tab-pane tab="水功能区" key="ccb">
           <a-tabs v-model:activeWater="activeWater">
             <a-tab-pane tab="自治区级水功能" key="water1">
-              <auto-statis></auto-statis>
+              <a-tabs v-model:autoWater="autoWater">
+                <a-tab-pane tab="自治区级水功能统计" key="auto1">
+                  <auto-statis></auto-statis>
+                </a-tab-pane>
+                <a-tab-pane tab="自治区水功能达标率" key="auto2">
+                  <auto-standard></auto-standard>
+                </a-tab-pane>
+                <a-tab-pane tab="自治区水功能同比/环比" key="auto3">
+                  <auto-yoy></auto-yoy>
+                </a-tab-pane>
+                </a-tabs>
             </a-tab-pane>
             <a-tab-pane tab="国家级水功能" key="water2">
-              <national-statis></national-statis>
+              <a-tabs v-model:nationalWater="nationalWater">
+                <a-tab-pane tab="国家级水功能统计" key="national">
+                  <national-statis></national-statis>
+                </a-tab-pane>
+                <a-tab-pane tab="国家级水功能达标率" key="national2">
+                  <national-standard></national-standard>
+                </a-tab-pane>
+                <a-tab-pane tab="国家级水功能同比/环比" key="national3">
+                  <national-yoy></national-yoy>
+                </a-tab-pane>
+                </a-tabs>
+             
             </a-tab-pane>
+            
           </a-tabs>
         </a-tab-pane>
         <a-tab-pane tab="水站" key="ccd">
@@ -57,6 +79,11 @@
   import AvgStandard from "./avg-standard.vue";
   import MonthIndex from "./base-index.vue";
   import AvgIndex from "./avg-index.vue";
+  
+  import AutoStandard from "../../water-function-area/statistic/auto-standard.vue";
+  import AutoYoy from "../../water-function-area/statistic/auto-yoy.vue";
+  import NationalStandard from "../../water-function-area/statistic/national-standard.vue";
+  import NationalYoy from "../../water-function-area/statistic/national-yoy.vue";
   export default {
     name: 'StatisticAirIndex',
     components: {
@@ -69,13 +96,19 @@
       AvgStandard,
       MonthIndex,
       AvgIndex,
+      AutoStandard,
+      AutoYoy,
+      NationalStandard,
+      NationalYoy,
     },
     data() {
       return {
         activeKey: 'cca',
         active: 'base',
         activeWater: 'water1',
-        activeSite:'site1'
+        activeSite:'site1',
+        autoWater:'auto1',
+        nationalWater:'national'
       };
 
     },

src/views/water/water-function-area/statistic/auto-standard.vue

@@ -0,0 +1,134 @@
+<!-- 江河水查看数据页面-->
+<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-form-item label="断面名称">
+            <a-select v-model:value="where.name" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="起始日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="结束日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
+          </a-form-item>
+
+          <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>
+      <!-- 表格 -->
+      <a-spin :spinning="loading">
+        <ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
+          :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+        </ele-pro-table>
+      </a-spin>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    autonomyWaterFunctionTotalUrl,
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-autonomous";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import {
+    tableColumns
+  } from "./colums";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        locale,
+        datasource: {},
+        // 表格数据接口
+        url: autonomyWaterFunctionTotalUrl,
+        selection: [],
+        tableColumns,
+        // 表格列配置
+        columns: [
+          ...tableColumns,
+        ],
+        // 表格搜索条件
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    mounted() {
+      this.loading = true;
+      this.$refs.table.reload({
+        where: this.where,
+      });
+      this.loading = false;
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        this.loading = true;
+        console.log(this.where);
+        this.$refs.table.reload({
+        where: this.where,
+      });
+      console.log(this.url);
+      this.loading = false;
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        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>

src/views/water/water-function-area/statistic/auto-yoy.vue

@@ -0,0 +1,134 @@
+<!-- 江河水查看数据页面-->
+<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-form-item label="断面名称">
+            <a-select v-model:value="where.name" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="起始日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="结束日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
+          </a-form-item>
+
+          <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>
+      <!-- 表格 -->
+      <a-spin :spinning="loading">
+        <ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
+          :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+        </ele-pro-table>
+      </a-spin>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    autonomyWaterFunctionTotalUrl,
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-autonomous";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import {
+    tableColumns
+  } from "./colums";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        locale,
+        datasource: {},
+        // 表格数据接口
+        url: autonomyWaterFunctionTotalUrl,
+        selection: [],
+        tableColumns,
+        // 表格列配置
+        columns: [
+          ...tableColumns,
+        ],
+        // 表格搜索条件
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    mounted() {
+      this.loading = true;
+      this.$refs.table.reload({
+        where: this.where,
+      });
+      this.loading = false;
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        this.loading = true;
+        console.log(this.where);
+        this.$refs.table.reload({
+        where: this.where,
+      });
+      console.log(this.url);
+      this.loading = false;
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        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>

src/views/water/water-function-area/statistic/national-standard.vue

@@ -0,0 +1,134 @@
+<!-- 江河水查看数据页面-->
+<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-form-item label="断面名称">
+            <a-select v-model:value="where.name" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="起始日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="结束日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
+          </a-form-item>
+
+          <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>
+      <!-- 表格 -->
+      <a-spin :spinning="loading">
+        <ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
+          :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+        </ele-pro-table>
+      </a-spin>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    autonomyWaterFunctionTotalUrl,
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-autonomous";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import {
+    tableColumns
+  } from "./colums";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        locale,
+        datasource: {},
+        // 表格数据接口
+        url: autonomyWaterFunctionTotalUrl,
+        selection: [],
+        tableColumns,
+        // 表格列配置
+        columns: [
+          ...tableColumns,
+        ],
+        // 表格搜索条件
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    mounted() {
+      this.loading = true;
+      this.$refs.table.reload({
+        where: this.where,
+      });
+      this.loading = false;
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        this.loading = true;
+        console.log(this.where);
+        this.$refs.table.reload({
+        where: this.where,
+      });
+      console.log(this.url);
+      this.loading = false;
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        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>

src/views/water/water-function-area/statistic/national-yoy.vue

@@ -0,0 +1,134 @@
+<!-- 江河水查看数据页面-->
+<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-form-item label="断面名称">
+            <a-select v-model:value="where.name" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="起始日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="结束日期:">
+            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
+          </a-form-item>
+
+          <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>
+      <!-- 表格 -->
+      <a-spin :spinning="loading">
+        <ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
+          :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+        </ele-pro-table>
+      </a-spin>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    autonomyWaterFunctionTotalUrl,
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-autonomous";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import {
+    tableColumns
+  } from "./colums";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        locale,
+        datasource: {},
+        // 表格数据接口
+        url: autonomyWaterFunctionTotalUrl,
+        selection: [],
+        tableColumns,
+        // 表格列配置
+        columns: [
+          ...tableColumns,
+        ],
+        // 表格搜索条件
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    mounted() {
+      this.loading = true;
+      this.$refs.table.reload({
+        where: this.where,
+      });
+      this.loading = false;
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        this.loading = true;
+        console.log(this.where);
+        this.$refs.table.reload({
+        where: this.where,
+      });
+      console.log(this.url);
+      this.loading = false;
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        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>