| | |
| | | <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> |
| | |
| | | <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" /> |
| | |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | </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"> |
| | |
| | | data () { |
| | | return { |
| | | tabType: 0, |
| | | personEchartsLoading: false, |
| | | houseEchartsLoading: false, |
| | | landEchartsLoading: false, |
| | | peopletype: 0, |
| | | tabTypeTwo: 0, |
| | | tabTypeThree: 0, |
| | |
| | | personTabClick (type) { |
| | | this.tabType = type |
| | | this.dataDeep = 1 |
| | | this.personEchartsLoading = true |
| | | |
| | | this.disposeEchart() |
| | | |
| | |
| | | this.getPoliceStationInfo() |
| | | |
| | | } else { |
| | | |
| | | this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id) |
| | | |
| | | } |
| | | |
| | | |
| | | } else if (type == 1) { |
| | | |
| | | this.initkeyPersonEcharts() |
| | | |
| | | } |
| | | |
| | | |
| | | }, |
| | | |
| | | /** |
| | |
| | | //异步,因此放进接口方法内部 |
| | | this.initPersonEcharts() |
| | | this.clickPeopleChart() |
| | | setTimeout(() => { |
| | | this.personEchartsLoading = false |
| | | }, 500) |
| | | } |
| | | }).catch(res => { |
| | | setTimeout(() => { |
| | | this.personEchartsLoading = false |
| | | }, 500) |
| | | }) |
| | | }, |
| | | |
| | |
| | | }) |
| | | } |
| | | |
| | | 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) |
| | | }) |
| | | }, |
| | | |
| | |
| | | }) |
| | | } |
| | | |
| | | 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'])) |
| | | }, |
| | | |
| | | /** |
| | |
| | | } 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) { |
| | |
| | | houseTabClick (type) { |
| | | this.tabTypeTwo = type |
| | | |
| | | this.houseEchartsLoading = true |
| | | |
| | | this.disposeHouseEchart() |
| | | if (type == 0) { |
| | | this.getHouseStatisticInfo(2) |
| | |
| | | siteJd: center[0], |
| | | siteWd: center[1] |
| | | }) |
| | | this.personEchartsLoading = true |
| | | this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id) |
| | | } else { |
| | | this.$emit('showpeopledetail', params.data.id, params.data.name) |
| | |
| | | |
| | | 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) |
| | | }, |
| | | |
| | | /** |
| | |
| | | */ |
| | | landTabClick (type) { |
| | | this.tabTypeThree = type |
| | | this.landEchartsLoading = true |
| | | |
| | | this.disposeLandEchart() |
| | | if (type == 0) { |
| | |
| | | }) |
| | | landData = [nameArr, countArr] |
| | | } |
| | | setTimeout(() => { |
| | | this.landEchartsLoading = false |
| | | }, 500) |
| | | |
| | | this.initLandEcharts(landData) |
| | | }).catch(res => { |
| | | setTimeout(() => { |
| | | this.landEchartsLoading = false |
| | | }, 500) |
| | | }) |
| | | }, |
| | | |
| | |
| | | |
| | | 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() |
| | | }, |
| | |
| | | } |
| | | } |
| | | |
| | | :deep(.el-main) { |
| | | padding: 0; |
| | | } |
| | | |
| | | .echarts-box { |
| | | padding: 12px; |
| | | padding-top: 0; |
| | | flex: 1; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |