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

src/views/water/drinking-water/statistic/cityWaterWithdrawal.vue

@@ -0,0 +1,185 @@
+<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-form-item label="时间:">
+            <a-range-picker separator="~" v-model:value="reportTimeScope" />
+          </a-form-item>
+
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+            <a-form-item label="水源名称:">
+              <a-select
+                mode="tags"
+                :size="size"
+                placeholder="未选择"
+                style="width: 200px"
+                @change="handleChange"
+                v-model:value="where.sourceWaterName"
+              >
+                <!-- <a-select-option
+                  v-for="item in sourceWaterName"
+                  :key="item.value"
+                  >{{ item.label }}
+                </a-select-option> -->
+                <a-select-option :value="'1'">1</a-select-option>
+                <a-select-option :value="'2'">2</a-select-option>
+                <a-select-option :value="'3'">3</a-select-option>
+                <a-select-option :value="'4'">4</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="drinkingWaterId"
+        :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 { pageRoadNoiseUrl, getColumnOptions } from "@/api/ecology/noise/road-sound";
+import {
+  pageDrinkingWaterStatisticUrl,
+  // getColumnOptions
+} from "@/api/ecology/drinking-water";
+// import pageDictUrl from "@/api/ecology/drinking-water-dict"
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableColumns } from "./colums";
+// import moment from "moment";
+//   import utils from "./utils";
+// const columns =tableColumns;
+export default {
+  name: "DrinkingWaterBase",
+  components: {},
+
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageDrinkingWaterStatisticUrl,
+      selection: [],
+      columns: [
+       {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
+       {title: "取水量",dataIndex: "waterWithdrawal",sorter: true,},
+      ],
+
+      // 表格列配置
+
+      // palceOptions: [],
+      // areaOptions: [],
+      // roadOptions: [],
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+    /**获取下来框数据 */
+    // 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 = [...tableColumns];
+      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>