zhongrj
2023-04-01 fb4b4d0780117701a4f4d07ee0eea12f79cd22f9
src/views/home/components/leftContainer.vue
@@ -34,8 +34,12 @@
                        <div class="type">境外人口</div>
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box">
                </div>
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div id="PersonEcharts" class="echarts-box">
                    </div>
                </el-main>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                </div>
@@ -45,10 +49,10 @@
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                                                                                                                                                                                                                                                                                                                                            c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                            c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                            c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                            c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
@@ -58,10 +62,10 @@
                        <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                                                                                                                                                                                   c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                   c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                   c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                   c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                                                                                                                                                                                                                                                                                                                                                       c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                                       c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                                       c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                                       c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
@@ -87,7 +91,10 @@
                        <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                    </div>
                </div>
                <div id="houseEcharts" class="echarts-box"></div>
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div id="houseEcharts" class="echarts-box"></div>
                </el-main>
            </div>
            <svg class="border-svg">
@@ -118,7 +125,10 @@
                    </div>
                </div>
                <div id="landEcharts" class="echarts-box"></div>
                <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div id="landEcharts" class="echarts-box"></div>
                </el-main>
            </div>
            <svg class="border-svg">
@@ -155,6 +165,9 @@
    data () {
        return {
            tabType: 0,
            personEchartsLoading: false,
            houseEchartsLoading: false,
            landEchartsLoading: false,
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
@@ -243,6 +256,7 @@
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            this.personEchartsLoading = true
            this.disposeEchart()
@@ -252,18 +266,14 @@
                    this.getPoliceStationInfo()
                } else {
                    this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
                }
            } else if (type == 1) {
                this.initkeyPersonEcharts()
            }
        },
        /**
@@ -285,7 +295,14 @@
                    //异步,因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                    setTimeout(() => {
                        this.personEchartsLoading = false
                    }, 500)
                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },
@@ -316,22 +333,19 @@
                        })
                    }
                    homePersonmyChart.showLoading({
                        text: '拼命加载中',
                        color: '#c23531',
                        textColor: '#FFF',
                        maskColor: 'rgba(0, 0, 0, 0.2)',
                        zlevel: 0,
                    })
                    setTimeout(() => {
                        homePersonmyChart.hideLoading()
                        homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    }, 500)
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    this.clickPeopleChart()
                    setTimeout(() => { this.dataDeep = 2 }, 1000)
                    setTimeout(() => {
                        this.dataDeep = 2,
                            this.personEchartsLoading = false
                    }, 1000)
                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },
@@ -358,17 +372,7 @@
                })
            }
            homePersonmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                homePersonmyChart.hideLoading()
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
            }, 500)
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
        },
        /**
@@ -530,24 +534,21 @@
                } else {
                    this.inithouseEcharts(xDate, yDate)
                }
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
                this.clickHouseChart()
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },
        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                houseMyChart.hideLoading()
                houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
            }, 500)
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
        },
        initHouseOptions (xDate, y1Date, y2Date) {
@@ -688,6 +689,8 @@
        houseTabClick (type) {
            this.tabTypeTwo = type
            this.houseEchartsLoading = true
            this.disposeHouseEchart()
            if (type == 0) {
                this.getHouseStatisticInfo(2)
@@ -796,6 +799,7 @@
                        siteJd: center[0],
                        siteWd: center[1]
                    })
                    this.personEchartsLoading = true
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                } else {
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
@@ -832,22 +836,14 @@
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [{ count: 8, name: '征地拆迁群体', value: 8 }, { count: 4, name: '非涉法涉诉重点个访人员', value: 4 }, { count: 4, name: '涉法涉诉重点个访人员', value: 4 }, { count: 1, name: '楼盘业主维权群体', value: 1 }]
            }
            keyPersonmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                keyPersonmyChart.hideLoading()
                keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
            }, 500)
            keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
            this.clickkeyPersonChart()
            setTimeout(() => {
                this.personEchartsLoading = false
            }, 500)
        },
        /**
@@ -982,6 +978,7 @@
         */
        landTabClick (type) {
            this.tabTypeThree = type
            this.landEchartsLoading = true
            this.disposeLandEchart()
            if (type == 0) {
@@ -1023,8 +1020,15 @@
                    })
                    landData = [nameArr, countArr]
                }
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)
                this.initLandEcharts(landData)
            }).catch(res => {
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)
            })
        },
@@ -1039,17 +1043,7 @@
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                landMyChart.hideLoading()
                landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
            }, 500)
            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
            this.clickLandChart()
        },
@@ -1294,11 +1288,16 @@
            }
        }
        :deep(.el-main) {
            padding: 0;
        }
        .echarts-box {
            padding: 12px;
            padding-top: 0;
            flex: 1;
            width: 100%;
            height: 100%;
        }
    }