| | |
| | | </div> |
| | | </div> |
| | | <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中" |
| | | element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> |
| | | element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)" |
| | | style="height: calc(100% - 17.6%);"> |
| | | <div class="sub-tab" v-show="peopletype == 0"> |
| | | <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> |
| | | <div class="tab-title-small">户籍人口:</div> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div id="PersonEcharts" class="echarts-box"> |
| | | <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS"> |
| | | |
| | | <div id="PersonEcharts" :style="{ height: personEchartsHeight }"> |
| | | |
| | | </div> |
| | | |
| | | </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> |
| | |
| | | // 记录当前选中派出所的ID |
| | | policeStaionID: '', |
| | | peopleLoading: false, |
| | | personEchartsHeight: '100%' |
| | | } |
| | | }, |
| | | |
| | |
| | | this.disposeEchart() |
| | | |
| | | if (type == 0) { |
| | | this.personEchartsHeight = '100%' |
| | | |
| | | if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') { |
| | | |
| | | this.getPoliceStationInfo() |
| | |
| | | } |
| | | |
| | | } else if (type == 1) { |
| | | |
| | | |
| | | this.initkeyPersonEcharts() |
| | | } |
| | | }, |
| | |
| | | async initkeyPersonEcharts () { |
| | | this.disposeEchart() |
| | | |
| | | var chartDom = document.getElementById('PersonEcharts') |
| | | keyPersonmyChart = this.$echarts.init(chartDom) |
| | | |
| | | let personInfo = await this.getPersonInfo() |
| | | |
| | | keyPeopleDataLength = personInfo.length |
| | | if (this.userInfo.dept_id == '1596020515064381442') { |
| | | personInfo = [ |
| | |
| | | { count: 1, name: '欠薪讨债群体', value: 1 }] |
| | | } |
| | | |
| | | keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo)) |
| | | const high = this.$refs.REFPERSONECHARTS.offsetHeight |
| | | |
| | | this.clickkeyPersonChart() |
| | | if (personInfo.length > 1) { |
| | | this.keyPeopleEchartsCarousel() |
| | | if (personInfo.length * (high / 7) > high) { |
| | | this.personEchartsHeight = personInfo.length * (high / 7) + 'px' |
| | | } else { |
| | | clearInterval(timer) |
| | | keyPersonmyChart.off("mouseover") |
| | | keyPersonmyChart.off("mouseout") |
| | | this.personEchartsHeight = '100%' |
| | | } |
| | | |
| | | this.$nextTick(() => { |
| | | var chartDom = document.getElementById('PersonEcharts') |
| | | keyPersonmyChart = this.$echarts.init(chartDom) |
| | | keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo)) |
| | | |
| | | this.clickkeyPersonChart() |
| | | if (personInfo.length > 1) { |
| | | this.keyPeopleEchartsCarousel() |
| | | } else { |
| | | clearInterval(timer) |
| | | keyPersonmyChart.off("mouseover") |
| | | keyPersonmyChart.off("mouseout") |
| | | } |
| | | }) |
| | | |
| | | |
| | | setTimeout(() => { |
| | | this.personEchartsLoading = false |
| | | }, 500) |
| | |
| | | confine: true |
| | | }, |
| | | legend: { |
| | | type: 'scroll', |
| | | orient: 'vertical', |
| | | top: 'middle', |
| | | left: '45%', |
| | | right: '5%', |
| | | y: '1%', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: '#fff' |
| | | }, |
| | | align: 'left', |
| | | formatter: function (name) { |
| | | let data = dataArr |
| | | let tarValue |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '', |
| | | top: 140, |
| | | left: 90, |
| | | type: 'pie', |
| | | radius: ['30%', '60%'], |
| | | center: ['22%', '55%'], |
| | | radius: [30, 60], |
| | | center: [0, 0], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false, |