fj-dc-ui/.svn/pristine/5d/5d54a99ffa75c4569b89651ea0317c156a873a24.svn-base

<template>
<div style="height:100%;">
    <el-container>
        <el-aside id="dxdcAside" width="200px" :style="{'max-height':dxdcAsideHeight+'px'}">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;font-size: small;">
                <i class="el-icon-share"></i>分工节点
            </p>
            <dczTree :style="{'max-height':dxdcAsideHeight+'px'}" @dczTreeSelectChange="dczTreeSelectChangeHandler"></dczTree>
        </el-aside>
        <el-container style="height:100%;">
            <el-header id="dcdxHeader">
                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="督查类型">
                        <el-select style="width:140px;" v-model="dcType" :placeholder="dcTypeDefault" clearable @change="dcdxTypeChange">
                            <el-option label="小水库" value="1"></el-option>
                            <el-option label="农村饮水" value="2"></el-option>
                            <el-option label="水毁工程" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="水库名称" v-if="xskSer">
                        <el-input style="width:140px;" v-model="searchNameOfRsName" clearable placeholder="请输入水库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="工程规模" v-if="xskSer">
                        <el-select style="width:90px;" v-model="engScal" clearable placeholder="请选择">
                            <el-option label="大(1)型" value="1"></el-option>
                            <el-option label="大(2)型" value="2"></el-option>
                            <el-option label="中型" value="3"></el-option>
                            <el-option label="小(1)型" value="4"></el-option>
                            <el-option label="小(2)型" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="归口管理部门" v-if="xskSer">
                        <el-select style="width:100px;" v-model="rsAdmDep" clearable placeholder="请选择">
                            <el-option label="水利部门" value="1"></el-option>
                            <el-option label="电力部门" value="2"></el-option>
                            <el-option label="农业部门" value="3"></el-option>
                            <el-option label="林业部门" value="4"></el-option>
                            <el-option label="城建部门" value="5"></el-option>
                            <el-option label="航运部门" value="6"></el-option>
                            <el-option label="环保部门" value="7"></el-option>
                            <el-option label="其他部门" value="9"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="行政区名称" v-if="ncysSer">
                        <el-input style="width:140px;" v-model="searchNameOfAdName" clearable placeholder="请输入行政区名称"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="工程类别" v-if="shgcSer">
              <el-input style="width:130px;" v-model="wtdstType" clearable placeholder="请输入项目名称"></el-input>
            </el-form-item>-->
                    <el-form-item label="修复状态" v-if="shgcSer">
                        <el-select style="width:85px;" v-model="wtdstState" clearable placeholder="请选择">
                            <el-option label="已修复" value="1"></el-option>
                            <el-option label="未修复" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目名称" v-if="shgcSer">
                        <el-input style="width:130px;" v-model="searchNameOfwtdstNm" clearable placeholder="请输入项目名称"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="督查组">
              <el-input v-model="dcBatch" clearable @focus="showTree()"></el-input>
               <dczTree v-if="treeShow" @closeTree='hideTree'></dczTree>
            </el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="getTableData">查询</el-button>
                        <!-- <el-button type="info" @click="getTableData">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main id="dxdcListMain" style="padding:5px 20px;" :style="{'height':dxdcMainHeight+'px'}" v-loading="loading">
                <el-table border :data="currentShowList" tooltip-effect="dark" style="width: 100%" v-if="xskSer">
                    <el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="rsName" label="水库名称" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="rsAdmName" label="位置" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="engScal" label="工程规模" :formatter="engScalFormatter" min-width="80"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="rsAdmDep" label="归口管理部门" :formatter="rsAdmDepFormatter" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="rsAdmName" label="所在位置" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="totCap" label="总库容(10^4m³)" min-width="100"></el-table-column>
                </el-table>
                <el-table border :data="currentShowList" tooltip-effect="dark" style="width: 100%" v-if="ncysSer">
                    <el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="adName" label="行政区名称" min-width="100"></el-table-column>
                    <!-- <el-table-column
                      align="center"
                      show-overflow-tooltip
                      prop="locat"
                      label="位置"
                      min-width="100"
                    ></el-table-column>-->
                            <!-- <el-table-column
                      align="center"
                      show-overflow-tooltip
                      prop="type"
                      label="行政区级别"
                      min-width="100"
                      :formatter="nyTypeFormatter"
                    ></el-table-column>-->
                    <el-table-column align="center" show-overflow-tooltip prop="adGrad" label="行政区划级别" :formatter="adGradFormatter" min-width="100"></el-table-column>
                </el-table>
                <el-table border :data="currentShowList" tooltip-effect="dark" style="width: 100%" v-if="shgcSer">
                    <el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="wtdstNm" label="项目名称" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="locNm" label="项目所在位置" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip :formatter="wtdstStateFormatter" prop="wtdstState" label="修复状态" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="wtdstType" label="工程类别" min-width="100"></el-table-column>
                </el-table>
            </el-main>
            <el-footer id="dxdcFooter">
                <el-pagination background @current-change="handleCurrentChange" :pager-count="5" :current-page.sync="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
            </el-footer>
        </el-container>
    </el-container>
    <transition name="fade">
        <draggable v-if="mapLocationWindow" initWidth="1000" initHeight="650" title style="z-index: 50000;top: 60px;left: 165px;background-color:white;" @closeDraggable="closeMapLocationWindow">
            <div class style="height:100%;background-color:rgba(249,249,249,0.7);border-radius:0px 0px 10px 10px;padding-bottom: 10px;"></div>
        </draggable>
    </transition>
</div>
</template>

<script>
import dczTree from "../../widgets/dczTree.vue";
import request from "../../utils/gw_ajax_request.js";
import provTreeList from "../../widgets/provTreeList.vue";
import draggable from "../../widgets/draggable.vue";
// import { getDcdxList } from "../../api/duChaDuiXiang_xsk_API.js";
import {
    getDcdxList
} from "../../api/duChaPlan.js";
export default {
    components: {
        provTreeList: provTreeList,
        draggable,
        dczTree: dczTree
    },
    props: [],

    data() {
        return {
            groupId: "",
            dczType: "",
            loading: false,
            dxdcMainHeight: window.innerHeight - 190,
            dxdcAsideHeight: window.innerHeight - 90,
            dcType: "1",
            dcTypeDefault: "小水库",
            searchNameOfRsName: "",
            searchNameOfAdName: "",
            searchNameOfwtdstNm: "",
            searchName: "",
            dcCount: "",
            engScal: "",
            rsAdmDep: "",
            wtdstType: "",
            wtdstState: "",
            dcBatch: "",
            dcgroup: "",
            pageNum: 1,
            pageSize: 11,
            total: 50,
            currentShowList: [],
            xskSer: true,
            ncysSer: false,
            shgcSer: false,
            mapLocationWindow: false,
            searchProvTreeListCode: "",
            treeShow: 0
        };
    },
    computed: {
        userId: function () {
            return localStorage.getItem("userid") ?
                localStorage.getItem("userid") :
                "1098101939614724096";
        },
        guId: function () {
            return localStorage.getItem("guid") ?
                localStorage.getItem("guid") :
                "000";
        }
    },
    mounted() {
        this.getTableData();
    },

    watch: {
        // dczType: function(n, o) {
        //   this.dczType = n;
        // },
        // guId:function(n, o) {
        //   this.guId = n;
        //     // this.getTableData();
        // },
        groupId: function (n, o) {
            this.groupId = n;
            this.getTableData();
        }
    },

    methods: {
        showTree() {
            this.treeShow = 1;
        },
        hideTree(hide) {
            console.log(hide);
            this.treeShow = hide;
        },
        dcdxTypeChange: function (val) {
            this.dcType = val;
            if (this.dcType == "1") {
                (this.loading = true), this.getTableData();
                this.xskSer = true;
                this.ncysSer = false;
                this.shgcSer = false;
            } else if (this.dcType == "2") {
                (this.loading = true), this.getTableData();
                this.xskSer = false;
                this.ncysSer = true;
                this.shgcSer = false;
            } else {
                (this.loading = true), this.getTableData();
                this.xskSer = false;
                this.ncysSer = false;
                this.shgcSer = true;
            }
        },
        engScalFormatter: function (row, column) {
            return row.engScal == 1 ?
                "大(1)型" :
                row.engScal == 2 ?
                "大(2)型" :
                row.engScal == 3 ?
                "中型" :
                row.engScal == 4 ?
                "小(1)型" :
                "小(2)型";
        },
        nyTypeFormatter: function (row, column) {
            return row.type == 1 ?
                "Ⅰ" :
                row.type == 2 ?
                "Ⅱ" :
                row.type == 3 ?
                "Ⅲ" :
                "Ⅳ";
        },
        wtdstStateFormatter: function (row, column) {
            return row.wtdstState == 1 ? "已修复" : "未修复";
        },
        rsAdmDepFormatter: function (row, column) {
            return row.rsAdmDep == 1 ?
                "水利部门" :
                row.rsAdmDep == 2 ?
                "电力部门" :
                row.rsAdmDep == 3 ?
                "农业部门" :
                row.rsAdmDep == 4 ?
                "林业部门" :
                row.rsAdmDep == 5 ?
                "城建部门" :
                row.rsAdmDep == 6 ?
                "航运部门" :
                row.rsAdmDep == 7 ?
                "环保部门" :
                "其他部门";
        },
        adGradFormatter: function (row, column) {
            return row.adGrad == 1 ?
                "国家级" :
                row.adGrad == 2 ?
                "省级" :
                row.adGrad == 3 ?
                "地市级" :
                row.adGrad == 4 ?
                "县级" :
                row.adGrad == 5 ?
                "乡级" :
                row.adGrad == 6 ?
                "村" :
                "村组";
        },
        getTableData: function () {
            var _self = this;
            getDcdxList(
                this.groupId,
                this.dcType,
                this.pageSize,
                this.pageNum,
                this.searchNameOfRsName, //水库名称
                this.searchNameOfAdName, //农村饮水行政区划名称
                this.searchNameOfwtdstNm, //水毁-工程名称
                this.engScal, //水库-工程规模
                this.rsAdmDep, //水库-归口管理部门
                this.wtdstType, //水毁-工程类别
                this.wtdstState //水毁-工程类别
            ).then(response => {
                this.loading = false;
                var res = response.data;
                _self.currentShowList = res.list;
                _self.total = res.total;
                _self.currentShowList.forEach((element, index) => {
                    element["index"] = _self.pageSize * (_self.pageNum - 1) + index + 1;
                });
            });
            // var obj = {};
            // if (this.dcType == "RSVR") {
            //   obj.groupId = this.groupId;
            //   obj.name = this.searchName; //督查对象名称
            //   obj.type = this.dcType; //督查对象类型
            //   obj.pageNum = this.pageNum; //页码
            //   obj.pageSize = this.pageSize; //每页条数
            //   var params = {
            //     bisInspParam: obj
            //   };
            //   // request.post("/dc/insp/base/getCatalog", obj).then(res => {
            //   //   this.loading=false;
            //   //   this.currentShowList = res.data.list;
            //   //   this.currentShowList.forEach((element, index) => {
            //   //     element["index"] = this.pageSize * (this.pageNum - 1) + index + 1;
            //   //   });
            //   //   this.total = res.data.total;
            //   // });
            // } else if (this.dcType == "CWS") {
            //   obj.groupId = this.groupId;
            //   obj.name = this.searchName; //督查对象名称
            //   obj.type = this.dcType; //督查对象类型
            //   obj.pageNum = this.pageNum; //页码
            //   obj.pageSize = this.pageSize; //每页条数
            //   var params = {
            //     bisInspParam: obj
            //   };
            //   // request.post("/dc/insp/base/getPageCwsList", obj).then(res => {
            //   //   this.loading=false;
            //   //   this.currentShowList = res.data.list;
            //   //   this.currentShowList.forEach((element, index) => {
            //   //     element["index"] = this.pageSize * (this.pageNum - 1) + index + 1;
            //   //   });
            //   //   this.total = res.data.total;
            //   // });
            // } else {
            //   obj.groupId = this.groupId;
            //   obj.name = this.searchName; //督查对象名称
            //   obj.type = this.dcType; //督查对象类型
            //   obj.pageNum = this.pageNum; //页码
            //   obj.pageSize = this.pageSize; //每页条数
            //   var params = {
            //     bisInspParam: obj
            //   };
            //   // request.post("/dc/insp/base/getPageWtdstList", obj).then(res => {
            //   //   this.loading=false;
            //   //   this.currentShowList = res.data.list;
            //   //   this.currentShowList.forEach((element, index) => {
            //   //     element["index"] = this.pageSize * (this.pageNum - 1) + index + 1;
            //   //   });
            //   //   this.total = res.data.total;
            //   // });
            // }
            // request.post("/dc/insp/base/getCatalog", obj).then(res => {
            //   this.loading = false;
            //   this.currentShowList = res.data.list;
            //   this.currentShowList.forEach((element, index) => {
            //     element["index"] = this.pageSize * (this.pageNum - 1) + index + 1;
            //   });
            //   this.total = res.data.total;
            // });
            // obj.type = this.dcType; //督查对象类型

            // getDcdxList(
            //   // this.userId,//树节点ID
            //   this.dcType,
            //   this.pageSize,
            //   this.pageNum,
            //   this.searchNameOfRsName, //水库名称
            //   this.searchNameOfAdName, //农村饮水行政区划名称
            //   this.searchNameOfwtdstNm, //水毁工程名称
            //   this.engScal, //水库-工程规模
            //   this.rsAdmDep, //水库-归口管理部门
            //   this.wtdstType, //水毁-工程类别
            //   this.wtdstState, //水毁-工程类别
            //   this.groupId, //水毁-修复状态
            // ).then(
            //   res => {
            //     console.log(res);
            //     this.loading=false;
            //     this.currentShowList = res.data.list;
            //     // this.currentShowList = this.currentShowList.filter(item => typeof item === null);
            //     this.currentShowList.forEach((element, index) => {
            //       element["index"] = this.pageSize * (this.pageNum - 1) + index + 1;
            //     });
            //     this.total = res.data.total;
            //   },
            //   err => {
            //     console.log("查询错误");
            //   }
            // );
        },
        // dcdxListSearch() {
        //   this.getTableData();
        // },
        handleCurrentChange(val) {
            this.getTableData();
        },
        dczTreeSelectChangeHandler: function (params) {
            this.groupId = params.id;
            // this.dczType = params.type;
            //   this.getTableData();
        },
        mapLocation: function (params) {
            this.mapLocationWindow = true;
            //   this.searchProvTreeListCode = params.code;
            //   this.getTableData();
        },
        closeMapLocationWindow: function () {
            this.mapLocationWindow = false;
        }
    }
};
</script>

<style>
#dcdxHeader {
    padding: 15px 20px;
}

#dxdcFooter {
    text-align: center;
}

#dxdcAside {
    border: 1px solid #d5d5ff;
}

.el-form-item__content {
    z-index: 1;
}
</style>