1

shuishen

2022-10-31 628d3b4f2ddb24bfcaddf89a1da15010d3199870

 src/views/home/components/leftContainer.vue

@@ -3,34 +3,26 @@
        <div class="person-box">
            <div class="title">
                <i></i>
                <span
                    class="peopleTap"
                    :class="{choosed:peopletype == 0}"
                    @click="peopleTabClick(0)"
                >现有人员</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                <span>/</span>
                <span
                    class="peopleTap"
                    :class="{choosed:peopletype == 1}"
                    @click="peopleTabClick(1)"
                >重点人员</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                <span class="word before">共</span>
                <span class="peopleNum" :class="{choosed:peopletype == 0}">100</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
                <span class="word">/</span>
                <span class="peopleNum" :class="{choosed:peopletype == 1}">1</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>
                <span class="word">人</span>
            </div>

            <div class="sub-tab" v-show="peopletype == 0">
                <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)">
                <div class="tab" :class="{ on: tabType == 0 }" @click="personTabClick(0)">
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div class="tab" :class="{on:tabType==1}" @click="personTabClick(1)">
                <div class="tab" :class="{ on: tabType == 1 }" @click="personTabClick(1)">
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div class="tab" :class="{on:tabType==2}" @click="personTabClick(2)">
                <div class="tab" :class="{ on: tabType == 2 }" @click="personTabClick(2)">
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
@@ -38,14 +30,12 @@

            <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            <div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >


            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin">
                <i class="el-icon-back"></i>
            </div>

        </div>
        <div class="house-box">
            <div class="title">
@@ -53,11 +43,11 @@
            </div>

            <div class="sub-tab">
                <div class="tab" :class="{on:tabTypeTwo==0}" @click="houseTabClick(0)">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">1822603户</div>
                    <div class="num">实有房屋</div>
                </div>
                <div class="tab" :class="{on:tabTypeTwo==1}" @click="houseTabClick(1)">
                <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
                    <div class="num">634个</div>
                    <div class="num">关注场所</div>
                </div>
@@ -70,11 +60,11 @@
                <i></i> 现有地
            </div>
            <div class="sub-tab">
                <div class="tab" :class="{on:tabTypeThree==0}" @click="landTabClick(0)">
                <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div class="num">634个</div>
                    <div class="num">小区</div>
                </div>
                <div class="tab" :class="{on:tabTypeThree==1}" @click="landTabClick(1)">
                <div class="tab" :class="{ on: tabTypeThree == 1 }" @click="landTabClick(1)">
                    <div class="num">634个</div>
                    <div class="num">责任区</div>
                </div>
@@ -741,6 +731,31 @@
            this.initkeyPersonEcharts()
        }

    },

    destroyed () {
        if (!homePersonmyChart) {
            return
        }
        if (!houseMyChart) {
            return
        }
        if (!landMyChart) {
            return
        }
        if (!keyPersonmyChart) {
            return
        }

        homePersonmyChart.dispose()
        houseMyChart.dispose()
        landMyChart.dispose()
        keyPersonmyChart.dispose()

        homePersonmyChart = null
        houseMyChart = null
        landMyChart = null
        keyPersonmyChart = null
    }
}
</script>
@@ -753,33 +768,41 @@

    .person-box {
        height: 35%;

        .peopleTap {
            color: rgb(98, 95, 95);
            cursor: pointer;
        }

        .peopleTap:hover {
            text-decoration: underline;
        }

        .choosed {
            color: #fff;
        }

        .peopleNum {
            color: rgb(98, 95, 95);
            font-size: 14px;
        }

        .word {
            color: #fff;
            font-size: 14px;
        }

        .before {
            margin-left: 108px;
        }

        .peopleTable {
            height: calc(100% - 40px);
            height: 250px;
            width: 400px;
            overflow: hidden;
        }

        .back {
            color: #fff;
            position: absolute;
@@ -790,10 +813,12 @@
            font-size: 20px;
            cursor: pointer;
        }

        .back:hover {
            color: #43bafe;
        }
    }

    .house-box {
        height: 30%;
    }
@@ -801,6 +826,7 @@
    .land-box {
        height: 35%;
    }

    .person-box,
    .house-box,
    .land-box {
@@ -822,6 +848,7 @@
                background: #43bafe;
                box-shadow: 0px 0px 8px 2px #43bafe;
            }

            .choosed {
                color: #fff;
            }
@@ -843,7 +870,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -860,10 +887,11 @@
            height: calc(100% - 104px);
        }

        .sub-tab + .echarts-box {
        .sub-tab+.echarts-box {
            margin-top: 10px;
        }
    }

    :deep(.el-table__body-wrapper) {
        overflow-x: hidden !important;
    }