fj-dc-ui/.svn/pristine/3c/3c124b30e8bbb635f9c31e8b8760e178ef692fb5.svn-base

<template>

    <el-row>

        <el-col :span="3">
            <div>
                <provTreeList :rootCode="rootCode" :rootType="rootType" @provTreeSelectChange="provTreeSelectChangeHandler"
                              :style="{'max-height':dxdcAsideHeight+'px'}"
                >
                </provTreeList>
            </div>
        </el-col>

        <el-col :span="21">
            <el-card class="ducha_form" :body-style="{'padding':'20px 5px'}">
                <el-form :inline="true" :model="formInline" class="sh-form-inline">
                    <el-form-item label="地表水水源地代码" style="margin-left: 5px">
                        <el-input v-model="formInline.swsCd" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="地表水水源地名称">
                        <el-input v-model="formInline.swsNm" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <!--<el-form-item label="水质目标">-->
                        <!--<el-input v-model="formInline.wqGoal" :placeholder="autoSort" clearable></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="地表水水源地类型">
                        <el-select v-model="formInline.swsTp" :placeholder="autoSort" clearable>
                            <el-option v-for="item in swsTpOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="行政区划">-->
                        <!--<el-input v-model="formInline.addvcd" :placeholder="autoInput" clearable ></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item style="margin: 0 ">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0 5px">
                        <el-button type="info" plain @click="empty" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0">
                        <el-button type="success" @click="exportExcel" icon="el-icon-sort-up">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="ducha_table" :body-style="{ 'padding': '0 5px' }">
                <el-main style="margin: 0 -5px;padding: 0">
                    <el-table :data="tableList" style="width: 100%;" :row-class-name="tableRowClassName"
                              ref="singleTable"
                              v-loading="tableLoading"
                              border
                              :height="dxdcMainHeight+'px'"
                              :render-header="renderHeader"
                              tooltip-effect="dark"
                    >
                        <el-table-column type="index" min-width="80" :index="getIndex" label="序号" align="center" show-overflow-tooltip></el-table-column>

                        <!--<el-table-column prop="lgtd" label="经度" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="lttd" label="纬度" min-width="110" show-overflow-tooltip></el-table-column>-->

                        <el-table-column prop="swsCd" label="地表水水源地代码" min-width="130" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="swsNm" label="地表水水源地名称 " min-width="130" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="swsTp" label="地表水水源地类型" min-width="120" align="center" :formatter="formatSwsTp" show-overflow-tooltip></el-table-column>

                        <el-table-column prop="watA" label="水面面积(平方公里)" min-width="130" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wqGoal" label="水质目标" min-width="80" align="center" show-overflow-tooltip :formatter="formatWqGoal"></el-table-column>
                        <el-table-column prop="consCond" label="建设状况" min-width="80" align="center" show-overflow-tooltip :formatter="formatConsCond"></el-table-column>
                        <el-table-column prop="putProdTm" label="投产时间" min-width="100" align="center" show-overflow-tooltip></el-table-column>

                        <el-table-column prop="runCond" label="运行状况" min-width="100" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wsCond" label="水源供水持续状况 " min-width="130" align="center" show-overflow-tooltip :formatter="formatWsCond"></el-table-column>
                        <el-table-column prop="wsObj" label="供水对象" min-width="100" align="center" show-overflow-tooltip></el-table-column>

                        <el-table-column prop="dywsPp" label="设计年供水人口(万人)" min-width="140" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="dywsW" label="设计年供水量(万立方米)" min-width="160" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="ddwsW" label="设计日供水量(万立方米)" min-width="160" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="whsManCd" label="水源地管理单位代码 " min-width="130" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="whsApprCd" label="水源地审批单位代码" min-width="130" align="center" show-overflow-tooltip></el-table-column>

                        <el-table-column prop="emCd" label="应急管理单位代码" min-width="130" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="monG" label="监控级别" min-width="100" align="center" show-overflow-tooltip :formatter="formatMonG"></el-table-column>
                        <el-table-column prop="ts" label="时间戳" min-width="130" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="nt" label="备注" min-width="100" align="center" show-overflow-tooltip></el-table-column>


                        <!--<el-table-column prop="repPer" label="未知字段" min-width="100" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="isuse" label="是否使用" min-width="100" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="firProA" label="未知字段" min-width="100" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="secProA" label="未知字段" min-width="100" show-overflow-tooltip></el-table-column>-->

                        <!--<el-table-column prop="norProA" label="未知字段" min-width="100" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="isEmg" label="未知字段" min-width="100" show-overflow-tooltip></el-table-column>-->

                    </el-table>
                </el-main>
                <el-footer class="el-footer-style">
                    <el-pagination
                            style="text-align:center;"
                            small
                            background
                            :current-page.sync="page.pageNum"
                            :page-size="page.pageSize"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            layout="sizes, total,prev, pager, next,jumper"
                            :total="showResultCount"
                            @current-change="pageIndexChange"
                            @size-change="handleSizeChange"
                    ></el-pagination>
                </el-footer>
            </el-card>

        </el-col>



    </el-row>

</template>

<style>

    .el-table {


    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .ducha_form {
        width: 100%;
        height: 70px;
        overflow-y: scroll;
    }

    .ducha_form .el-input {
        width: 150px !important;
    }

    .ducha_table{
        /*border: 1px solid #ebeef5;*/
        /*transition: .3s;*/
    }

    .el-footer-style {
        text-align: center;
        width:100%;
    }

    .sh-form-inline {


    }

</style>

<script>
    // 造数据
    let swsTpOptions = [{
        value: '1',
        label: '河道（江河）'
    }, {
        value: '2',
        label: '水库'
    },{
        value: '3',
        label: '湖泊'
    },{
        value: '9',
        label: '其他'
    }]

    const monGTypeOptions = [{
        value:'1',
        label:'国控级',
    },{
        value:'2',
        label:'省控级',
    },{
        value:'3',
        label:'地市级',
    },{
        value:'4',
        label:'区县级',
    },{
        value:'9',
        label:'其他',
    }];

    import provTreeList from '../../../widgets/provTreeList'
    import request from '../../../utils/gw_ajax_request.js';
    import { exportModel } from "@util/gw_exportModel";

    // 地表水水源地查询
    export default {
        name: "shuiYuanDiChaXun_sws",
        components:{
            provTreeList
        },
        data() {
            return {
                monGTypeOptions:monGTypeOptions,
                tableLoading:true,
                tableList: [],
                input: "",
                page:{
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                showEdit: true,
                tableData: [],
                currentShowList: [],
                swsTpOptions: swsTpOptions,
                autoSort: '请选择',
                autoInput: '请输入',
                value: '',
                duChaType: '1',
                formInline: {
                    swsCd: '',
                    swsNm: '',
                    wqGoal: '',
                    swsTp: '',
                    addvcd: '',
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                rootCode:'000000',
                // rootType:'1',
                rootType:'2',
                dxdcMainHeight: window.innerHeight - 197,
                dxdcAsideHeight: window.innerHeight - 90,

            }
        },
        mounted() {
            this.getShuiHuiList()
        },
        activated(){
            this.getShuiHuiList()
        },
        methods: {
            empty(){
                this.formInline = {};
            },
            provTreeSelectChangeHandler: function(params) {
                // this.formInline.addvcd = params.code;
                this.formInline.addvcd = params.likeCode;
                this.getShuiHuiList();
            },
            formatSwsTp(row,column){
                let swsTp = row.swsTp;
                switch (swsTp) {
                    case '1' : swsTp = '河道（江河）';break;
                    case '2' : swsTp = '水库';break;
                    case '3' : swsTp = '湖泊';break;
                    case '9' : swsTp = '其他';break;
                }
                return swsTp;
            },
            formatWqGoal(row,column){
                let wqGoal = row.wqGoal;
                switch (wqGoal) {
                    case '1' : wqGoal = 'Ⅰ类';break;
                    case '2' : wqGoal = 'Ⅱ类';break;
                    case '3' : wqGoal = 'Ⅲ类';break;
                    case '4' : wqGoal = 'Ⅳ类';break;
                    case '5' : wqGoal = '劣Ⅴ类';break;
                }
                return wqGoal;
            },
            formatConsCond(row,column){
                let consCond = row.consCond;
                switch (consCond) {
                    case '1' : consCond = '已建';break;
                    case '2' : consCond = '在建';break;
                    case '3' : consCond = '待建';break;
                }
                return consCond;
            },
            formatWsCond(row,column){
                let wsCond = row.wsCond;
                return wsCond == '1' ? '常年' : wsCond=='2' ? '汛期' : wsCond=='3' ?  '非汛期' : wsCond ;
            },
            formatMonG(row,column){
                let monG = row.monG;
                switch (monG) {
                    case '1' : monG = '国控级';break;
                    case '2' : monG = '省控级';break;
                    case '3' : monG = '地市级';break;
                    case '4' : monG = '区县级';break;
                    case '9' : monG = '其他';break;
                    default:
                        monG = '其他';
                        break;
                }
                return monG;
            },
            getIndex(index){
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            onSearch(){
                this.getShuiHuiList();
            },
            pageIndexChange(val){
                this.page.pageNum = val;
                this.getShuiHuiList();
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.getShuiHuiList();
            },
            renderHeader(){

            },
            tableRowClassName({row, rowIndex}) {
                // if (rowIndex === 1) {
                //     return 'warning-row';
                // } else if (rowIndex === 3) {
                //     return 'success-row';
                // }
                return '';
            },
            getShuiHuiList(){
                let params = {
                    'pageSize': this.page.pageSize,
                    'pageNum': this.page.pageNum,
                    'swsCd': this.formInline.swsCd,
                    'swsNm': this.formInline.swsNm,
                    'wqGoal': this.formInline.wqGoal,
                    'swsTp': this.formInline.swsTp,
                    'adCode': this.formInline.addvcd,
                }
                request.post('/dc/insp/wrSwsB/queryListByPage',params).then((res)=>{
                    let data = res.data
                    this.tableList = data.list
                    this.showResultCount = data.total
                    this.tableLoading = false
                })
            },
            getStrParams(obj) {
                let str = '?';
                for(let key of Object.keys(obj)) {
                    str += `${key}=${obj[key]}&`;
                }
                str = str.slice(0, str.length - 1);
                return str;
            },
            // 导出Excel
            async exportExcel(){
                this.tableLoading = true;
                let type = "get";
                let url = `/pdcApi/dc/export/wrSwsB${this.getStrParams(Object.assign(this.formInline, this.page))}`;
                let downloadName =  "Excel.xls";
                await exportModel(type,url,downloadName).catch((err) => {
                    this.$message.error("导出失败");
                    this.tableLoading = false;
                })
                this.$message.success("导出成功");
                this.tableLoading = false;
            }
        },
        computed: {

        },
        watch: {

        },
    }
</script>