城市内湖框架页面

2021-12-07 11:42:43 +08:00
parent 012f8b168c
commit 3670be1575
9 changed files with 1279 additions and 1 deletions
--- a/src/views/water/lake/statistic/inner/component/average.vue
+++ b/src/views/water/lake/statistic/inner/component/average.vue
@@ -0,0 +1,166 @@
+<!--平均数据-->
+<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="lakeLibrarySpecialId"
+                :datasource="url"
+                :columns="columns"
+                :where="where"
+                :scroll="{ x: 'max-content' }"
+                @done="(d) => (data = d.data)"
+            >
+            </ele-pro-table>
+        </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {pageLakeUrl, getColumnOptions} from "@/api/ecology/lake";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import Search from './search.vue';
+import {averageTableColumns} from "./raw-colums"
+export default {
+    name: 'inner-raw',
+    components: {
+        Search
+    },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        }
+    },
+    data() {
+        return {
+            data: [],
+            locale,
+            bill: {},
+            // 表格数据接口
+            url: pageLakeUrl,
+            selection: [],
+            // 表格列配置
+            columns: averageTableColumns,
+            palceOptions: [],
+            areaOptions: [],
+            regionLevelOptions: [],
+            where:{},
+            // 表格选中数据
+            selectionList: [],
+        };
+    },
+    mounted() {
+        // this.loadOptionData();
+    },
+    watch: {
+        filterKeys(newKeys) {
+        this.filterColumns(newKeys)
+        },
+    },
+    methods: {
+     // 传上父级
+        changeFilter(data){
+            this.$emit('changeFilter',data)
+        },
+        //动态修改表头
+        filterColumns(keys){
+
+            if(!Array.isArray(keys)){return}
+
+            let newCloumns = [...averageTableColumns]
+
+            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();
+        },
+
+        /**获取下来框数据 */
+        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("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 = 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>