饮用水前端页面更新（参数和接口需要修改）

src/views/water/drinking-water/statistic/city-avg-index.vue

@@ -0,0 +1,163 @@
+<!-- 江河水查看数据页面-->
+<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-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>
+                <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="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)">
+      </ele-pro-table>
+    </a-spin>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    listMonthCompositeIndex
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-plcae";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        momData: [],
+        datasource: {},
+        columns: [{
+            title: '断面名称',
+            dataIndex: 'sectionName',
+            key: 'sectionName',
+          },
+          {
+            title: '水质综合指数排名',
+            dataIndex: 'orderBy',
+            key: 'orderBy',
+          },
+          {
+            title: "水质综合指数",
+            children: [{
+                title: "本月综合指数",
+                dataIndex: "baseIndex"
+              },
+              {
+                title: "上月综合指数",
+                dataIndex: "momIndex"
+              },
+              {
+                title: "上年同期指数",
+                dataIndex: "yoyIndex"
+              },
+            ]
+          },
+          {
+            title: "水质综合指数变化率",
+            children: [{
+                title: "上月",
+                dataIndex: "momRateChange"
+              },
+              {
+                title: "上年同期",
+                dataIndex: "yoyRateChange"
+              },
+            ]
+          },
+        ],
+        locale,
+        bill: {},
+        selection: [],
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    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;
+        this.momData = [];
+        listMonthCompositeIndex(this.where).then((res) => {
+          console.log(res.data.data);
+          if (res.data.code == 0) {
+            this.$message.success(res.data.msg);
+            res.data.data.forEach((m) => {
+              this.momData.push(m);
+            })
+          } else {
+            this.$message.error(res.data.msg);
+          }
+          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>