江河模块修改

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>