fj-dc-ui/.svn/pristine/3f/3fd45c008a2d687dcde9c967a23c25d48ab2bfd9.svn-base

<template>
    <div style="height:100%;width:100%;">
        <el-container style="height:100%;width:100%;">
            <el-aside
                width="320px"
                style="border-right:2px solid #d5d5ff;float:left"
                :style="{'max-height':testHeight+'px','height':testHeight+'px'}"
            >
                <div
                    class="tree"
                    style="height: 100%"
                    width="100%"
                    overflow="auto"
                    display="inline-flex;"
                >
                    <el-tree
                        :highlight-current="true"
                        style="height:100%;"
                        :data="treeData"
                        node-key="id"
                        show-checkbox
                        :expand-on-click-node="false"
                        @check-change="handleCheckChange"
                        ref="jigou_tree"
                    >
                        <div class="custom-tree-node" slot-scope="{ node, data }">
                            <span style="float:left;">{{ data.name}}</span>
                        </div>
                    </el-tree>
                </div>
            </el-aside>
            <el-main id="dxdcListMainsk" style="padding:5px 20px;">
                <el-row>
                    <el-col :span="24">
                        <el-form
                            :inline="true"
                            size="mini"
                            class="demo-form-inline"
                            style="padding-left: 10px;"
                        >
                            <el-form-item label="督查状态">
                                <el-select v-model="dcType" clearable placeholder="督查状态">
                                    <el-option label="未督查" value="0"></el-option>
                                    <el-option label="督查中" value="1"></el-option>
                                    <el-option label="已督查" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="行政区名称">
                                <el-input v-model="adName" clearable placeholder="行政区名称"></el-input>
                                 <addvSearch
                                    v-model="adName"
                                    :maxHeight="300"
                                    :maxWidth="250"
                                    :rootAddCode='"000000000000"'
                                    :level='"3"'
                                    :nameOrCode="'name'"
                                ></addvSearch>
                             </el-form-item> -->
                            <el-form-item label="水闸名称">
                                <el-input v-model="nm" placeholder="水闸名称" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="工程规模">
                                <el-select v-model="engScale" clearable placeholder="工程规模">
                                    <el-option
                                        v-for="item in engScales"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="检查单位">
                <el-select v-model="orgName" clearable placeholder="检查单位">
                  <el-option v-for="item in lyjg" :key="item.id" :label="item.pnm" :value="item.id"></el-option>
                </el-select>
                            </el-form-item>-->
                            <!-- <el-form-item label="所在组">
                                <el-autocomplete
                                    v-model="groupName"
                                    clearable
                                    value-key="nm"
                                    :fetch-suggestions="querySearchAsync"
                                    placeholder="请输入内容"
                                    @select="handleSelect"
                                ></el-autocomplete>
                            </el-form-item> -->
                            <el-form-item label="督查时间">
                                <div style="display: flex;">
                                    <el-date-picker
                                        v-model="dateRange"
                                        type="daterange"
                                        value-format="yyyy-MM-dd"
                                        style="width:100%"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                    ></el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                            <!-- <el-button
                                type="success"
                                style="float:right;margin-left:5px"
                                @click="showPlDialog"
                                icon="el-icon-upload2"
                                :disabled="disabled"
                            >批量填报</el-button>-->
                            <!-- 水闸批量导入弹窗 -->
                            <dctb-sz-pl
                                v-if="showShuiZhaTianBaoPl"
                                :id="this.currentNodeId"
                                @closePlDialog="closePlDialog"
                            ></dctb-sz-pl>
                        </el-form>
                    </el-col>
                </el-row>
                <el-table
                    :data="skDataList"
                    style="width: 100%"
                    :height="dxdcMainHeight"
                    v-loading="expLoading"
                >
                    <el-table-column
                        prop="province"
                        label="省"  v-if="isXj"
                        show-overflow-tooltip
                        min-width="100"
                        align="center"
                    ></el-table-column>
                    <el-table-column
            prop="city"
            :label="ownAdName"
                        show-overflow-tooltip
                        min-width="100"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="county"
                        label="县"
                        v-if="isXj"
                        show-overflow-tooltip
                        min-width="100"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="nm"
                        label="水闸名称"
                        min-width="130"
                        align="center"
                        fixed="left"
                    ></el-table-column>
                    <!-- <el-table-column
                        prop="riverName"
                        label="检查单位"
                        show-overflow-tooltip
                        min-width="120"
                        align="center"
                    ></el-table-column> -->
                    <!-- <el-table-column
                        prop="groupName"
                        label="所在组"
                        show-overflow-tooltip
                        min-width="150"
                        align="center"
                    ></el-table-column> -->
                    <el-table-column
                        prop="intm1"
                        label="督查时间"
                        show-overflow-tooltip
                        min-width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column prop="wtdstState" label="督查状态" align="center" min-width="130">
                        <template slot-scope="scope">
                            <span
                                style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                                v-if="scope.row.wtdstState == 0"
                            >未督查</span>
                            <span
                                style="padding: 3px 10px;background:#67C23A;border-radius:15px;color:rgba(255,255,255,1)"
                                v-if="scope.row.wtdstState == 1"
                            >督查中</span>
                            <span
                                style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                                v-if="scope.row.wtdstState == 2"
                            >已督查</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="engScal"
                        label="工程规模"
                        :formatter="formatEngScal"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column
                        prop="gateType"
                        label="水闸类型"
                        :formatter="formatGateType"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column
                        prop="location"
                        show-overflow-tooltip
                        min-width="200"
                        label="水闸所在位置"
                    ></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="gateAdmName"
                        min-width="180"
                        label="管理单位"
                    ></el-table-column>
                    <el-table-column prop="mrsCiStat" label="管理责任体系" align="center" min-width="130">
                        <template slot-scope="scope">
                            <p
                                style="cursor:pointer;color:#F56C6C;"
                                v-if="scope.row.mrsCiStat == 0 || !scope.row.mrsCiStat"
                            >待填报</p>
                            <p
                                style="cursor:pointer;color:#fbb56d"
                                v-if="scope.row.mrsCiStat == 1"
                            >未完成</p>
                            <p
                                style="cursor:pointer;color:#67C23A"
                                v-if="scope.row.mrsCiStat == 2"
                            >已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="safeStat" label="安全管理" align="center" min-width="130">
                        <template slot-scope="scope">
                            <p
                                style="cursor:pointer;color:#F56C6C;"
                                v-if="scope.row.safeStat == 0"
                            >待填报</p>
                            <p
                                style="cursor:pointer;color:#fbb56d"
                                v-if="scope.row.safeStat == 1"
                            >未完成</p>
                            <p
                                style="cursor:pointer;color:#67C23A"
                                v-if="scope.row.safeStat == 2"
                            >已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="dmamStat"
                        label="日常管理和维修养护"
                        align="center"
                        min-width="130"
                    >
                        <template slot-scope="scope">
                            <p
                                style="cursor:pointer;color:#F56C6C;"
                                v-if="scope.row.dmamStat == 0"
                            >待填报</p>
                            <p
                                style="cursor:pointer;color:#fbb56d"
                                v-if="scope.row.dmamStat == 1"
                            >未完成</p>
                            <p
                                style="cursor:pointer;color:#67C23A"
                                v-if="scope.row.dmamStat == 2"
                            >已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="proenStat" label="工程实体" align="center" min-width="130">
                        <template slot-scope="scope">
                            <p
                                style="cursor:pointer;color:#F56C6C;"
                                v-if="scope.row.proenStat == 0"
                            >待填报</p>
                            <p
                                style="cursor:pointer;color:#fbb56d"
                                v-if="scope.row.proenStat == 1"
                            >未完成</p>
                            <p
                                style="cursor:pointer;color:#67C23A"
                                v-if="scope.row.proenStat == 2"
                            >已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="220" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="success"
                                plain
                                @click="sZInfo(scope.row,'dcInfo')"
                            >查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    :pager-count="5"
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    layout="sizes, total, prev, pager, next"
                    :total="total"
                    @current-change="pageIndexChange"
                    @size-change="handleSizeChange"
                ></el-pagination>
            </el-main>
            <sztb
                v-if="showShuiZhaTianBao"
                :rowData="rowData"
                :currentObjectRgstrId="currentObjectRgstrId"
                :currentResCode="currentResCode"
                :currentGroupId="currentGroupId"
                :currentAdcode="currentAdcode"
                :currentObjectId="currentObjectId"
                :currentObjectName="currentResName"
                :currentObjectEngScale="currentEngScale"
                :showOrEdit="showOrEdit"
                :gdX="gdX"
                :gdY="gdY"
                @cancelHandler="cancelHandler"
                @addShuiKuSuccess="addShuiKuSuccess"
            ></sztb>
        </el-container>
        <!-- 水闸督查信息 -->
        <popupSz
            ref="shuizaJcxxRef"
            v-if="showSzDuChaInfo"
            :currentDuchaTpe="currentDuchaTpe"
            :currentObjectRgstrId="currentObjectRgstrId"
            :currentGroupId="currentGroupId"
            :currentResCode="currentResCode"
            :currentObjectId="currentObjectId"
            :currentObjectName="currentResName"
            @cancelHandler="szCancelHandler"
        ></popupSz>
    </div>
</template>

<script>
import request from "../../../utils/gw_ajax_request.js";
import { dateFormat } from "../../../utils/gw_date.js";
import provTreeList from "../../../widgets/provTreeList.vue";
import sztb from "../../duChaTianBao/sztb.vue";
import dctbSzPl from "../../duChaTianBao/dctb_sz_piliang.vue";
import addvSearch from "../../../widgets/addvSearch.vue";
import popupSz from "../../zongHeXinXiOl/components/popupWindow/sz/main.vue";

export default {
    components: {
        provTreeList: provTreeList,
        sztb: sztb,
        dctbSzPl: dctbSzPl,
        addvSearch,
        popupSz
    },
    props: [],

    data() {
        return {
            dateRange: [],
            nm: "",
            lyjg: [],
            engScales: [
                { id: "1", name: "大型" },
                { id: "2", name: "中型" },
                { id: "3", name: "小型" },
                { id: "4", name: "其他" }
            ],
            engScale: "",
            orgName: "",
            groupName: "",
            groupId: "",
            groups: [],
            sttm: "",
            ettm: "",
            adName: "",
            treeData: [],
            dxdcMainHeight: window.innerHeight - 290,
            testHeight: window.innerHeight - 111,
            skDataList: [],
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            tableHeight: 0,
            currentResCode: "",
            currentResName: "",
            currentObjectId: "",
            currentObjectRgstrId: "",
            currentObjectInfoObject: null,
            showShuiZhaTianBao: false,
            currentAdCode: "",
            currentNodeId: "",
            rsvrName: "",
            dcType: "",
            rowData: "",
            disabled: false,
            showShuiZhaTianBaoPl: false,
            downIcon: "el-icon-download",
            expLoading: false,
            currentEngScale: "",
            currentGroupId: "",
            currentAdcode: "",
            showOrEdit: "",
            gdX: 0,
            gdY: 0,
            adCodes: [],
            baseurl: "",
            showSzDuChaInfo: false,
            currentDuchaTpe: false, //督查还是未督查
            currentRsCode: "", //当前水库id
            currentRsName: "", //当前水库名称
            currentRgstrId: "", //当前登记表id
            currentObjId: "", //当前objId
            xskRgstrId: ""
        };
    },
    computed: {
        persId() {
            return localStorage.getItem("userid")
                ? localStorage.getItem("userid")
                : "1098101939614724096";
        },
        isAdmin: function() {
            return localStorage.getItem("isAdmin")
                ? localStorage.getItem("isAdmin")
                : "";
        }
    },
    mounted() {
        this.getLeftTreeData();
        // this.getSkDataList();
        this.getAllGroup();
        let h = document.getElementById("dxdcListMainsk").offsetHeight;
        this.tableHeight = h - 100;
    },
    activated() {
        this.getLeftTreeData();
        this.currentNodeId = "";
        this.rsvrName = "";
        this.dcType = "";
        // this.getSkDataList();
    },
    watch: {
        // currentNodeId(n, o) {
        //     this.getSkDataList();
        // },
        groupName(n, o) {
            if (n == "") {
                this.groupId = "";
            }
        },
        adCodes(val) {
            if(val.length){
                this.getSkDataList();
            }
        }
    },

    methods: {
        //获取所有的组
        getAllGroup() {
            var _self = this;
            request
                .get("/dc/user/getGroupByPersid", {
                    params: { persid: this.persId, ptype: "6" }
                })
                .then(res => {
                    if (res.success) {
                        _self.groups = res.data;
                    }
                });
        },
        querySearchAsync(queryString, cb) {
            var restaurants = this.groups;
            var results = queryString
                ? restaurants.filter(this.createStateFilter(queryString))
                : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 1500 * Math.random());
        },
        createStateFilter(queryString) {
            return state => {
                return (
                    state.nm.toLowerCase().indexOf(queryString.toLowerCase()) !=
                    -1
                );
            };
        },
        handleSelect(item) {
            this.groupId = item.id;
        },
        getLeftTreeData() {
            var _self = this;
            _self.lyjg = [];
            request
                .get(
                    `/bis/insp/BisInspConfigOrgAd/getAdByPersId/${
                        this.persId
                    }/${6}`
                )
                .then(res => {
                    let data = res.data;
                    data.forEach(ele => {
                        if (ele.pid == null || ele.pid == "") {
                            ele.pid = "006";
                        }
                        if (ele.id.length == 6) {
                            _self.lyjg.push(ele);
                        }
                    });
                    data = _self.getTrees(data);
                    _self.treeData = data;
                });
        },
        //格式化树形数据
        getTrees(list) {
            //@wxcwater重写方法 适应多个树
            let highLevelLength = 99; //预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
            let _self = this;
            list.forEach((item, index) => {
                item["pidLength"] =
                    item.pid && item.pid != "" ? item.pid.length : 0;
                if (highLevelLength > item.pidLength) {
                    highLevelLength = item.pidLength;
                }
            });
            let heightLevelNode = [];
            list.forEach((item, index) => {
                if (highLevelLength >= item.pidLength) {
                    heightLevelNode.push(item);
                }
            });

            list.forEach((item, index) => {
                heightLevelNode.forEach(pItem => {
                    _self.addTreeNode(pItem, item);
                });
            });
            return heightLevelNode;
        },
        addTreeNode: function(treeNode, leafNode) {
            let _self = this;
            if (!treeNode.hasOwnProperty("children")) {
                treeNode["children"] = [];
            }
            if (leafNode.pid == treeNode.id) {
                treeNode.children.push(leafNode);
                return;
            }
            treeNode.children.forEach(item => {
                _self.addTreeNode(item, leafNode);
            });
        },
        handleCheckChange() {
            this.adCodes = [];
            let nodes = this.$refs.jigou_tree.getCheckedNodes();
            nodes.forEach(item => {
                this.adCodes.push(item.id);
            });
        },
        treeNodeClickHandler: function(data, node, tree) {
            this.currentNodeId = data.id;
        },
        provTreeSelectChangeHandler: function(params) {
            this.currentAdCode = params.likeCode;
            this.getSkDataList();
        },
        formatGateType: function(row, column) {
            return row.gateType == "1"
                ? "分(泄)洪闸"
                : row.gateType == "2"
                ? "节制闸"
                : row.gateType == "3"
                ? "排(退)水闸"
                : row.gateType == "4"
                ? "引(进)水闸"
                : row.gateType == "5"
                ? "挡潮闸"
                : row.gateType == "6"
                ? "船闸"
                : "其他";
        },
        formatEngScal: function(row, column) {
            return row.engScal == "1"
                ? "大型"
                : row.engScal == "2"
                ? "中型"
                : row.engScal == "3"
                ? "小型"
                : "其他";
        },
        getSkDataList: function() {
            this.getSKList_xsk();
        },
        onSubmit() {
            if(this.adCodes.length){
                this.getSkDataList();
            }
        },
        cancelHandler() {
            this.showShuiZhaTianBao = false;
        },
        addShuiKuSuccess() {
            this.getSkDataList();
            // this.showShuiZhaTianBao = false;
        },
        pageIndexChange(val) {
            this.pageIndex = val;
            this.getSkDataList();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getSkDataList();
        },
        // 下载填报模板
        downloadTemplate() {
            // this.downIcon = 'el-icon-loading'
            this.expLoading = true;
            //Promise.all().then(()=>{
            let href =
                "/api/dc/impExcel/downloadTemplate/sk?userId=" +
                this.persId +
                "&id=" +
                this.currentNodeId;
            const a = document.createElement("a"); // 创建a标签
            a.setAttribute("download", "水闸填报模板.xls"); // download属性
            a.setAttribute("href", href); // href链接
            console.log(a.href);
            a.click(); // 自执行点击事件
            // }).then(()=>{
            this.disabled = false;
            this.expLoading = false;
            //})

            // this.downIcon = 'el-icon-download'
        },
        showPlDialog() {
            this.showShuiZhaTianBaoPl = true;
        },
        closePlDialog(val) {
            this.showShuiZhaTianBaoPl = false;
        },
        getSKList_xsk() {
            let data = {
                // type: "rsvr",
                presId: this.persId,
                // pType: "6",
                pageSize: this.pageSize,
                pageNum: this.pageIndex,
                rsName: this.nm,
                state: this.dcType,
                adName: this.adName,
                sttm: this.dateRange && this.dateRange.length > 1 ? this.dateRange[0]: null,
                entm: this.dateRange && this.dateRange.length > 1 ? this.dateRange[1]: null,
                riverId: this.orgName,
                engScal: this.engScale,
                groupId: this.groupId,
                adCodes: this.adCodes.toString()
            };
            request
                .post(this.baseurl + "/att/waga/rgstr/list/page", data)
                .then(res => {
                    res.data.list.forEach(item => {
                        if (item.intm) {
                            item.intm1 = dateFormat(item.intm, "yyyy-MM-dd");
                        }
                    });
                    this.skDataList = res.data.list;
                    this.total = res.data.total;
                });
        },
        sZInfo(row, info) {
            this.currentDuchaTpe = true;
            this.showSzDuChaInfo = true;
            this.currentObjectRgstrId = row.rgstrId;
            this.currentResCode = row.code;
            this.currentGroupId = row.groupId;
            this.currentObjectId = row.objId;
            this.currentResName = row.nm
        },
        szCancelHandler() {
            this.showSzDuChaInfo = false;
        }
    }
};
</script>

<style>
#dcdxHeader {
    padding: 15px 20px;
}
#dxdcFooter {
    text-align: center;
}
#dxdcAside {
    border: 1px solid #d5d5ff;
}
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>