fj-dc-ui/.svn/pristine/ea/ea0680039cc3f6225e41b6754aaee73c49652ea0.svn-base

<template>
<div id="duchawentiContainer">
    <el-aside width="250px" style="border-right:2px solid #d5d5ff;float:left">
        <!-- <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">
            <i class="el-icon-share"></i>行政区划
        </p>
        <provTreeList rootCode :style="{'max-height':tableHeight+'px','height':tableHeight+'px'}" @provTreeSelectChange="provTreeSelectChangeHandler"></provTreeList> -->

        <div style="height:100%;text-align: center;" :style="{'height':containerHeight+'px'}">
            <el-row style="height:80px;margin-bottom:5px;margin-top:10px;">
                <el-col :span="4" style="height:100%;width: 100%;">
                    <div @click=" active= 'xiaoShuiKu'">
                        <div class="xiaoshuiku" :class="{active: isshow}" @click="getcolor('xsk')">
                            <div class="xiaoshuiku_img">
                                <img src="./images/shuiku.png" alt>
                                </div>
                                <div class="xiaoshuiku_xhk">
                                    <p>小水库</p>
                                    <P style="">{{totalXiaoShuiKu}}个</P>
                                </div>
                            </div>
                        </div>
                </el-col>
            </el-row>
            <!-- <el-row style="height:80px;margin-bottom:5px;">
                    <el-col :span="4" style="height:100%;width: 100%;">
                        <div @click=" active= 'xingZhengCun'">
                            <div class="xiaoshuiku" :class="{active: isshow3}" @click="getcolor('xingzhengcun')">
                                <div class="xingZhengCun_img">
                                    <img src="./images/cun.png" alt>
                              </div>
                                    <div class="nongyin_ny">
                                        <p>行政村</p>
                                        <P style="">{{totalXingZhengCun}}个</P>
                                    </div>
                                </div>
                            </div>
                    </el-col>
                </el-row>
                <el-row style="height:80px;margin-bottom:5px;">
                    <el-col :span="4" style="height:100%;width: 100%;">
                        <div @click=" active= 'shuiYuanDi'">
                            <div class="nongyin" :class="{active: isshow4}" @click="getcolor('shuiYuanDi')">
                                <div class="shuiyuandi_img">
                                    <img src="./images/shuiyuandi.png" alt>
                            </div>
                                    <div class="nongyin_ny">
                                        <p>水源地</p>
                                        <P style="float:right;">{{totalShuiYuanDi}}个</P>
                                    </div>
                                </div>
                            </div>
                    </el-col>
                </el-row> -->
            <el-row style="height:80px;margin-bottom:5px;">
                <el-col :span="4" style="height:100%; width: 100%;">
                    <div @click=" active= 'yinShuiGongCheng'">
                        <div class="nongyin" :class="{active: isshow1}" @click="getcolor('yinShuiGongCheng')">
                            <div class="shuiyuandi_img">
                                <img src="./images/yinshui.png" alt>
                            </div>
                                <div class="nongyin_ny">
                                    <p>人饮工程</p>
                                    <P style="float:right;">{{totalYinShuiGongCheng+totalShuiYuanDi+totalXingZhengCun}}个</P>
                                </div>
                            </div>
                        </div>
                </el-col>
            </el-row>
            <el-row style="height:80px;margin-bottom:5px;">
                <el-col :span="4" style="height:100%;width: 100%;">
                    <div @click=" active='shuiHuiGongCheng'">
                        <div class="shuihui" :class="{active: isshow2}" @click="getcolor('shuihui')">
                            <div class="shuihui_img">
                                <img src="./images/shuihui.png" alt>
                            </div>
                                <div class="shuihui_sh">
                                    <p>水毁工程</p>
                                    <P style="float:right;">{{totalShuiHui}}个</P>
                                </div>
                            </div>
                        </div>
                </el-col>
            </el-row>
            <el-row style="height:80px;">
                <el-col :span="4" style="height:100%;width: 100%;">
                    <div @click=" active='tongYong'">
                        <div class="tongyong" :class="{active: isshow5}" @click="getcolor('tongyong')">
                            <div class="tongyong_img">
                                <img src="./images/tongyong.png" alt>
                                </div>
                                <div class="tongyong_ty">
                                    <p>通 用</p>
                                    <P style="float:right;">{{totalTongYong}}个</P>
                                </div>
                            </div>
                        </div>
                </el-col>
            </el-row>

        </div>

    </el-aside>
    <el-main style="padding:0px;">
        <div :style="{'height':containerHeight+'px'}">
            <component :is="active" :codeId="xingzhengCode" @problemCount="problemCount"></component>
        </div>
    </el-main>
</div>
</template>

<script>
import {
    findPageInfo,
    findPageCount,
    findTongYongCount
} from "../../api/duChaAPI.js";
import provTreeList from "../../widgets/provTreeListAndChina.vue";
import shuiYuanDi from "./duChaWenTi_shuiyuandi.vue";
import xingZhengCun from "./duChaWenTi_xingzhengcun.vue";
import yinShuiGongCheng from "./duChaWenTi_renyinNew.vue";
import xiaoShuiKu from "./duChaWenTi_xiaoshuikuNew.vue";
import shuiHuiGongCheng from "./duChaWenTi_shuihuiNew.vue";
import tongYong from "./duChaWenTi_tongyong.vue";
export default {
    components: {
        provTreeList,
        shuiYuanDi,
        xiaoShuiKu,
        xingZhengCun,
        yinShuiGongCheng,
        shuiHuiGongCheng,
        tongYong
    },
    data() {
        return {
            active: "xiaoShuiKu",
            height: window.innerHeight - 80,
            tableHeight: window.innerHeight - 150,
            totalXiaoShuiKu: 0,
            totalXingZhengCun: 0,
            totalShuiHui: 0,
            totalTongYong: 0,
            totalYinShuiGongCheng: 0,
            totalShuiYuanDi: 0,
            isshow: true,
            isshow1: false,
            isshow2: false,
            isshow3: false,
            isshow4: false,
            isshow5: false,
            persId: localStorage.getItem('userid'),
            xingzhengCode: null,
            containerHeight: 0,
        };
    },
    mounted() {
        //统计问题数量
        this.containerHeight = document.getElementById('viewsItemBar').offsetHeight;
        console.log('containerHeight' + this.containerHeight);
        var _self = this;
        this.getPageInfoCount()
        this.tongYongCount()

    },
    watch: {
        xingzhengCode: {
            handler: function (val, oldVal) {
                console.log(val, oldVal)
                this.getPageInfoCount()
            },
            deep: true
        },
    },
    methods: {
        provTreeSelectChangeHandler: function (params) {
            console.log("bala" + params);
            if (params.likeCode == "" || params.likeCode == "000000000000" || params.likeCode == "00") {
                this.xingzhengCode = null;
            } else {
                this.xingzhengCode = params.likeCode;
            }
        },
        problemCount() {
            this.getPageInfoCount();
            this.tongYongCount()
        },
        tongYongCount() {
            findTongYongCount({}).then((res) => {
                if (res.success) {
                    console.log("通用数量"+res.data)
                    this.totalTongYong = res.data;
                }
            })
        },

        getPageInfoCount() {
            findPageCount(this.persId, this.xingzhengCode).then(res => {
                // console.log(res.data)
                if (res.success) {
                    this.totalXiaoShuiKu = 0;
                    this.totalXingZhengCun = 0;
                    this.totalShuiYuanDi = 0;
                    this.totalYinShuiGongCheng = 0;
                    this.totalShuiHui = 0;
                    res.data.forEach((ele) => {
                        if (ele.name == '小水库') {
                            this.totalXiaoShuiKu = ele.count;
                        } else if (ele.name == '行政村') {
                            this.totalXingZhengCun = ele.count;
                        } else if (ele.name == '水源地') {
                            this.totalShuiYuanDi = ele.count;
                        } else if (ele.name == '饮水工程') {
                            this.totalYinShuiGongCheng = ele.count;
                        } else if (ele.name == '水毁') {
                            this.totalShuiHui = ele.count;
                        }
                    });

                }

            });
        },
        getcolor(val) {
            if (val == 'xsk') {
                this.isshow = true;
                this.isshow1 = false;
                this.isshow2 = false;
                this.isshow3 = false;
                this.isshow4 = false;
                this.isshow5 = false;
            } else if (val == 'yinShuiGongCheng') {
                this.isshow = false;
                this.isshow1 = true;
                this.isshow2 = false;
                this.isshow3 = false;
                this.isshow4 = false;
                this.isshow5 = false;
            } else if (val == 'shuihui') {
                this.isshow = false;
                this.isshow1 = false;
                this.isshow2 = true;
                this.isshow3 = false;
                this.isshow4 = false;
                this.isshow5 = false;
            } else if (val == 'xingzhengcun') {
                this.isshow = false;
                this.isshow1 = false;
                this.isshow2 = false;
                this.isshow3 = true;
                this.isshow4 = false;
                this.isshow5 = false;
            } else if (val == 'shuiYuanDi') {
                this.isshow = false;
                this.isshow1 = false;
                this.isshow2 = false;
                this.isshow3 = false;
                this.isshow5 = false;
                this.isshow4 = true;
            } else {
                this.isshow = false;
                this.isshow1 = false;
                this.isshow2 = false;
                this.isshow3 = false;
                this.isshow4 = false;
                this.isshow5 = true;
            }
        },
    }

};
</script>

<style scoped>
.active {
    background-color: rgba(0, 103, 213, 0.09) !important;
    position: relative;
}

.active1 {
    color: aliceblue
}

img {
    width: 100%;
    height: 100%;
}

.xiaoshuiku,
.shuihui,
.nongyin,
.tongyong {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 5%;
    box-shadow: 1px 4px 13px #DCDADA;
}

.xiaoshuiku_img,
.xingZhengCun_img,
.shuiyuandi_img,
.nongyin_img,
.shuihui_img,
.tongyong_img {
    padding: 5px;
    height: 35px;
    width: 35px;
    margin-left: 10px;
    border-radius: 50%;
}

.xiaoshuiku_img {
    background-color: #008FFF;
}

.xingZhengCun_img {
    background-color: #F5574B;
}

.shuiyuandi_img {
    background-color: #F6AD44;
}

.nongyin_img {
    background-color: #008FFF;
}

.tongyong_img {
    background-color: #F6AD44;
}

.shuihui_img {
    background-color: #F5574B;
}

.xiaoshuiku_xhk,
.nongyin_ny,
.shuihui_sh,
.tongyong_ty {
    font-size: 18px;
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    margin: 5px 0 10px 10px;
    margin-right: 30px;
    color: #1E1E1E;
}
</style>