专项湖库

src/views/water/lake/statistic/special/component/com-nutritional.vue

@@ -0,0 +1,144 @@
+<!--综合营养指标-->
+<template>
+    <div class="ele-body">
+        <a-card :bordered="false">
+            <!-- 搜索表单 -->
+           <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
+            <!-- 表格 -->
+            <ele-pro-table
+                v-model:selection="selectionList"
+                ref="table"
+                :datasource="datasource"
+                :columns="columns"
+                :where="where"
+                :loading="loading"
+                :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 {specialComprehensiveNutritionData} from "@/api/ecology/new-lake";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import Search from './search.vue';
+export default {
+    name: 'lakeLibraryInnerCity',
+    components: {
+        Search
+    },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+         visiable:{
+            typeof:Boolean
+        }
+    },
+    data() {
+        return {
+            data: [],
+            locale,
+            bill: {},
+            // 表格数据接口
+            // url: pageLakeUrl,
+            datasource:[],
+            selection: [],
+            // 表格列配置
+            columns: [
+                {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
+                {title: "类别", dataIndex: "type", sorter: true,},
+                {title: "点位名称", dataIndex: "pointName", sorter: true,},
+                {title: "水质类别", dataIndex: "waterType", sorter: true,},
+                {title: "级别", dataIndex: "level", sorter: true,},
+                {title: "综合营养状态指数", dataIndex: "comprehensiveNutrition", sorter: true,},
+                {title: "超标项目（超标倍数）", dataIndex: "overflow", sorter: true,},
+            ],
+            palceOptions: [],
+            areaOptions: [],
+            regionLevelOptions: [],
+            where:{},
+            // 表格选中数据
+            selectionList: [],
+            loading:false
+        };
+    },
+    mounted() {
+        // this.loadOptionData();
+    },
+    methods: {
+        // 传上父级
+        changeFilter(data){
+            this.$emit('changeFilter',data)
+        },
+        // 执行搜索
+        searchData(data){
+            this.where = data;
+            this.$emit("search", this.where);
+            this.reload();
+        },
+
+                // 获取列表数据
+        getPageData(){
+            console.log('请求')
+            this.loading = true;
+            specialComprehensiveNutritionData(this.where).then(res=>{
+                this.loading = false;
+                if(res.data.code){
+                    this.$message.error(res.data.msg);
+                    this.datasource = []
+                }else{
+                    this.datasource = res.data.data
+                }
+            }).catch(()=>{
+                 this.loading = false;
+            })
+        },
+
+        /* 刷新表格 */
+        reload() {
+            this.getPageData();
+            // 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>