guanqb
2022-12-14 233a43c53a69e31deeeaf5b9edb1815c9393f487
src/views/home/components/leftContainer.vue
@@ -1,6 +1,6 @@
<template>
    <div class="container">
        <div class="person-box">
        <div class="person-box" style="position: relative;">
            <div class="title">
                <div class="title-tab">
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/
@@ -28,8 +28,19 @@
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
            <svg viewBox="0 0 412 318" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                <path class="mypath" d="M405.09,274c5.12,7.31,5,9.67,5,9c0.08,11.9,0.04,11.37,0,28c-0.4,3.71-3.02,6.38-7,7
   c-8.96,0.04-8.98,0.02-17,0c-13,0-6,0-19,0c-2.94-1.33-7.88-6.6-9-10c-22,0-46,0-68,0c-0.88,4.03-4.72,8.32-8,10
   c-62.33,0-126.67,0-189,0c-30.33,0-28.67,0-59,0c-9.38,0,0,0-26,0c-4.46,0.38-8.33-3.92-8-8c0-14,0-14,0-28
   c0.01-6.31,0.03-6.11,0-17c-0.15-11.16-0.08-0.09,0-11c-0.09-1.9,5.85-7.66,7-7c0.01-30.52,0.03-49.4,0-68
   c-0.03-20.37,0.05-18.8,0-28c-2.73-2.26-4.43-3.86-7-7c0-3.33,0-5.67,0-9c0-9.33,0-9.67,0-19c0-35.33,0-76.67,0-112
   c0.23-1.72,1.53-4,3-4c129.17-0.01,110.27,0,167,0c3.91,0.82,10.18,7.27,11,10c16.67,0,33.34,0,50,0c57.66,0,114.34,0,172,0
   c3.71,0.55,5.63,2.19,7,6c0.16,21.48,0,49.56,0,71c0,43,0.08,90.17,0,133c0.08,6.67,0-4.75,0,7c-0.33,0-0.42,5.75-5,7
   c0.04,13.79-0.08,10.66,0,19C405.09,266.07,405.11,261,405.09,274" />
            </svg>
        </div>
        <div class="house-box">
        <div class="house-box" style="position: relative;">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
@@ -42,8 +53,18 @@
                </div>
            </div>
            <div id="houseEcharts" class="echarts-box"></div>
            <svg viewBox="0 0 412 318" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                <path class="mypath" d="M405.09,274c5.12,7.31,5,9.67,5,9c0.08,11.9,0.04,11.37,0,28c-0.4,3.71-3.02,6.38-7,7
   c-8.96,0.04-8.98,0.02-17,0c-13,0-6,0-19,0c-2.94-1.33-7.88-6.6-9-10c-22,0-46,0-68,0c-0.88,4.03-4.72,8.32-8,10
   c-62.33,0-126.67,0-189,0c-30.33,0-28.67,0-59,0c-9.38,0,0,0-26,0c-4.46,0.38-8.33-3.92-8-8c0-14,0-14,0-28
   c0.01-6.31,0.03-6.11,0-17c-0.15-11.16-0.08-0.09,0-11c-0.09-1.9,5.85-7.66,7-7c0.01-30.52,0.03-49.4,0-68
   c-0.03-20.37,0.05-18.8,0-28c-2.73-2.26-4.43-3.86-7-7c0-3.33,0-5.67,0-9c0-9.33,0-9.67,0-19c0-35.33,0-76.67,0-112
   c0.23-1.72,1.53-4,3-4c129.17-0.01,110.27,0,167,0c3.91,0.82,10.18,7.27,11,10c16.67,0,33.34,0,50,0c57.66,0,114.34,0,172,0
   c3.71,0.55,5.63,2.19,7,6c0.16,21.48,0,49.56,0,71c0,43,0.08,90.17,0,133c0.08,6.67,0-4.75,0,7c-0.33,0-0.42,5.75-5,7
   c0.04,13.79-0.08,10.66,0,19C405.09,266.07,405.11,261,405.09,274" />
            </svg>
        </div>
        <div class="land-box">
        <div class="land-box" style="position: relative;">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
@@ -56,6 +77,16 @@
                </div>
            </div>
            <div id="landEcharts" class="echarts-box"></div>
            <svg viewBox="0 0 412 318" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                <path class="mypath" d="M405.09,274c5.12,7.31,5,9.67,5,9c0.08,11.9,0.04,11.37,0,28c-0.4,3.71-3.02,6.38-7,7
   c-8.96,0.04-8.98,0.02-17,0c-13,0-6,0-19,0c-2.94-1.33-7.88-6.6-9-10c-22,0-46,0-68,0c-0.88,4.03-4.72,8.32-8,10
   c-62.33,0-126.67,0-189,0c-30.33,0-28.67,0-59,0c-9.38,0,0,0-26,0c-4.46,0.38-8.33-3.92-8-8c0-14,0-14,0-28
   c0.01-6.31,0.03-6.11,0-17c-0.15-11.16-0.08-0.09,0-11c-0.09-1.9,5.85-7.66,7-7c0.01-30.52,0.03-49.4,0-68
   c-0.03-20.37,0.05-18.8,0-28c-2.73-2.26-4.43-3.86-7-7c0-3.33,0-5.67,0-9c0-9.33,0-9.67,0-19c0-35.33,0-76.67,0-112
   c0.23-1.72,1.53-4,3-4c129.17-0.01,110.27,0,167,0c3.91,0.82,10.18,7.27,11,10c16.67,0,33.34,0,50,0c57.66,0,114.34,0,172,0
   c3.71,0.55,5.63,2.19,7,6c0.16,21.48,0,49.56,0,71c0,43,0.08,90.17,0,133c0.08,6.67,0-4.75,0,7c-0.33,0-0.42,5.75-5,7
   c0.04,13.79-0.08,10.66,0,19C405.09,266.07,405.11,261,405.09,274" />
            </svg>
        </div>
    </div>
</template>
@@ -198,6 +229,7 @@
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()
        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
@@ -1022,4 +1054,23 @@
        overflow-x: hidden !important;
    }
}
.mypath {
    stroke: #05D380;
    stroke-width: 2;
    stroke-dasharray: 666;
    stroke-dashoffset: 666;
    fill: none;
    animation: go 4s linear infinite forwards;
}
@keyframes go {
    0% {
        stroke-dashoffset: 666;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
</style>