饮用水基础框架页面

2021-12-07 18:04:57 +08:00
parent 012f8b168c
commit d9278fa7ea
10 changed files with 1710 additions and 15 deletions
--- a/src/views/water/drinking-water/statistic/city/base.vue
+++ b/src/views/water/drinking-water/statistic/city/base.vue
@@ -0,0 +1,176 @@
+<!--市级 检测数据报送表-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <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)"
+      >
+        <template #waterCode="{ text, record }">
+          <span>
+            {{
+              record.reportTime == null
+                ? (text = "")
+                : record.reportTime.substr(5, 2) == "01" ||
+                  record.reportTime.substr(5, 2) == "02" ||
+                  record.reportTime.substr(5, 2) == "03" ||
+                  record.reportTime.substr(5, 2) == "12"
+                ? (text = "K")
+                : record.reportTime.substr(5, 2) == "04" ||
+                  record.reportTime.substr(5, 2) == "05" ||
+                  record.reportTime.substr(5, 2) == "10" ||
+                  record.reportTime.substr(5, 2) == "11"
+                ? (text = "P")
+                : record.reportTime.substr(5, 2) == "06" ||
+                  record.reportTime.substr(5, 2) == "07" ||
+                  record.reportTime.substr(5, 2) == "08" ||
+                  record.reportTime.substr(5, 2) == "09"
+                ? (text = "F")
+                : (text = "无采样时间")
+            }}
+          </span>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  pageBsaeListUrl
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableColumns } from "./../colums/base";
+import Search from "./../components/search.vue";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+    Search,
+  },
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys: {
+      typeof: Object,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageBsaeListUrl,
+      selection: [],
+      columns: [...tableColumns],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  watch: {
+    filterKeys(newKeys) {
+      this.filterColumns(newKeys);
+    },
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+    // 传上父级
+    changeFilter(data) {
+      this.$emit("changeFilter", data);
+    },
+    //动态修改表头
+    filterColumns(keys) {
+      if (!Array.isArray(keys)) {
+        return;
+      }
+
+      let newCloumns = [...tableColumns];
+
+      let filterIndex = [];
+      newCloumns.forEach((item, index) => {
+        if (keys.indexOf(item.dataIndex) > -1) {
+          filterIndex.push(index);
+        }
+      });
+
+      const newList = newCloumns.filter((item, index) => {
+        return filterIndex.indexOf(index) == -1;
+      });
+      this.columns = newList;
+    },
+
+    // 执行搜索
+    searchData(data) {
+      this.where = data;
+      this.$emit("search", this.where);
+      this.reload();
+    },
+    /* 刷新表格 */
+    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>
--- a/src/views/water/drinking-water/statistic/city/overStandard.vue
+++ b/src/views/water/drinking-water/statistic/city/overStandard.vue
@@ -0,0 +1,138 @@
+<!--超标评价-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <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 Search from "./../components/search.vue";
+import {
+  pageDrinkingWaterStatisticUrl,
+  // getColumnOptions
+} from "@/api/ecology/drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        }
+    },
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageDrinkingWaterStatisticUrl,
+      selection: [],
+      columns: [
+       {title: "城市名称",dataIndex: "sourceWaterName",sorter: true,},
+       {title: "水源地名称",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "取水量（万m3）",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标水源取水量",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标项目",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "水源性质",dataIndex: "waterWithdrawal",sorter: true,},
+      ],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.$refs.table.reload({
+        where: this.where,
+      });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      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>
--- a/src/views/water/drinking-water/statistic/city/situation.vue
+++ b/src/views/water/drinking-water/statistic/city/situation.vue
@@ -0,0 +1,231 @@
+<!--情况说明-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+        <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <!-- <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)"
+      >
+      <template #county="{text}">
+        {{text="市区"}}
+      </template>
+
+    <template #enumber="{ text, record }">
+        <div class="editable-cell">
+            <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
+            <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
+            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
+            </div>
+            <div v-else class="editable-cell-text-wrapper">
+            {{ text || ' ' }}
+            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
+            </div>
+        </div>
+        </template>
+      </ele-pro-table> -->
+
+
+
+      <ele-pro-table ref="table" row-key="drinkingWaterId" :datasource="datasource" :columns="columns" :where="where"
+        :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+          <template #county="{text}">
+            {{text="市区"}}
+          </template>
+
+        <template #enumber="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
+                  <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index)" />
+                </div>
+            </div>
+            </template>
+      </ele-pro-table>
+
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  // pageDescListUrl,.0
+  pageBsaeListUrl,
+  getPageDescList
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+import moment from "moment";
+
+import Search from "./../components/search.vue";
+import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search,
+      CheckOutlined,
+      EditOutlined,
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        }
+    },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      editableData:[],
+      // 表格数据接口
+      url: pageBsaeListUrl,
+      datasource:{},
+      selection: [],
+      columns:[
+        {key: "index",title:"序号",dataIndex: "index",width: 48,align: "center",customRender: ({ index }) => index + 1,},
+        {title:"城市",dataIndex:"city",},
+        {title:"县城",dataIndex:"county",slots:{customRender:'county'}},
+        {title:"水源地名称",dataIndex:"place",},
+        {title:"类型",dataIndex:"waterSourceProperty",},
+        {title:"监测时间",dataIndex:"reportTime",customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
+        {title:"应当监测项目个数",dataIndex:'',filters:[
+            {
+                text: '61',
+                value: '61',
+            },
+                {
+                text: '63',
+                value: '63',
+            },
+                {
+                text: '64',
+                value: '64',
+            },
+        ]},
+        {title:"未测个数",dataIndex:"",},
+        {title:"独立分析项目个数",dataIndex:"place",
+         slots: {
+          customRender: 'enumber',
+        },
+        },
+        {title:"外送分析项目个数",dataIndex:"",},
+        {title:"超标项目",dataIndex:"",},
+        {title:"情况说明或原因",dataIndex:""},
+        {title:"备注",dataIndex:"remark"},
+      ],
+        
+        
+      // 表格搜索条件
+      where: {
+        checked: 1,
+        page:1,
+        limit:10
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+    this.reload()
+  },
+  methods: {
+
+      //编辑单元格
+     edit(item,index){
+      console.log('key',item.drinkingWaterId)
+      console.log('index',index)
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+    // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+    /* 刷新表格 */
+    reload() {
+      
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+
+        getPageDescList(this.where).then((res) => {
+          console.log(res.data.data);
+          if (res.data.code == 0) {
+            // this.$message.success(res.data.msg);
+            this.datasource = res.data.data
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+    },
+
+
+
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      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>
--- a/src/views/water/drinking-water/statistic/city/waterCount.vue
+++ b/src/views/water/drinking-water/statistic/city/waterCount.vue
@@ -0,0 +1,138 @@
+<!--取水量统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <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 Search from "./../components/search.vue";
+import {
+  pageDrinkingWaterStatisticUrl,
+  // getColumnOptions
+} from "@/api/ecology/drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        }
+    },
+  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);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.$refs.table.reload({
+        where: this.where,
+      });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      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>