<template>
|
<div class="container">
|
<div class="person-box" style="position: relative;">
|
<div class="box">
|
<div class="title">
|
<div class="title-tab">
|
<span :class="{ choosed: peopletype == 0 }">现有人员</span>
|
</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)"
|
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 class="tab-title-small">
|
{{
|
personAll.total ? personAll.total : 0
|
}}人
|
</div>
|
</div>
|
<div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
|
<div class="tab-title-small">重点人员:</div>
|
<div class="tab-title-small">
|
{{
|
personAll.emphasisNum ? personAll.emphasisNum : 0
|
}}人
|
</div>
|
</div>
|
</div>
|
|
<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>
|
</div>
|
|
<svg class="border-svg">
|
<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" fill="transparent" />
|
<radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
|
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
|
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
</radialGradient>
|
<mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
|
<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"
|
rotate="auto" repeatCount="indefinite" />
|
</circle>
|
</mask>
|
</defs>
|
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite" />
|
</use>
|
</svg>
|
</div>
|
<div class="house-box" style="position: relative;">
|
<div class="box">
|
<div class="title">现有住宅</div>
|
<el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
|
<div class="sub-tab">
|
<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
|
<div class="tab-title-small">实有楼栋:</div>
|
<div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
|
</div>
|
<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
|
<div class="tab-title-small">关注场所:</div>
|
<div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
|
</div>
|
</div>
|
<div id="houseEcharts" class="echarts-box"></div>
|
</el-main>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite" />
|
</use>
|
</svg>
|
</div>
|
<div class="land-box" style="position: relative;">
|
<div class="box">
|
<div class="title">现有小区</div>
|
<el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
|
<div class="sub-tab" v-show="isAllPoliceStation">
|
<div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
|
<div class="tab-title-small">小区:</div>
|
<div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
|
</div>
|
<div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
|
<div class="tab-title-small">责任区:</div>
|
<div class="tab-title-small">{{ areaNum ? areaNum : 0 }}个</div>
|
</div>
|
</div>
|
<div class="sub-tab" v-show="!isAllPoliceStation">
|
<div class="tab1 select-on-tab">
|
<div class="tab-title-small">小区:</div>
|
<div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
|
</div>
|
</div>
|
<div id="landEcharts" class="echarts-box"></div>
|
</el-main>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite" />
|
</use>
|
</svg>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { fontSize } from '@/utils/fontSize.js'
|
import { getAreaStatisticInfo } from "@/api/home/index.js"
|
import { schoolJSON } from '../homeleft/school'
|
import { hospitalJSON } from '../homeleft/hospital'
|
import { hotelJSON } from '../homeleft/hotel'
|
import { digitalJSON } from '../homeleft/digital'
|
import { housingJSON } from '../homeleft/housing'
|
import { wholesaleJSON } from '../homeleft/wholesale'
|
import { retailJSON } from '../homeleft/retail'
|
import { antiTerroristJSON } from '../homeleft/antiTerrorist'
|
import { dExplosionJSON } from '../homeleft/dExplosion'
|
import { serviceObjJSON } from '../homeleft/serviceObj'
|
|
import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"
|
|
let homePersonmyChart = null
|
let keyPersonmyChart = null
|
let houseMyChart
|
let landMyChart
|
let timer
|
let curSubofficeData
|
|
let leftTiming = null
|
let keyPeopleDataLength = 0
|
|
let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']
|
|
const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
|
|
export default {
|
inject: ['userInfo'],
|
|
data () {
|
return {
|
tabType: 0,
|
personEchartsLoading: false,
|
houseEchartsLoading: false,
|
landEchartsLoading: false,
|
peopletype: 0,
|
tabTypeTwo: 0,
|
tabTypeThree: 0,
|
peopleTitle: '',
|
peopleVisible: false,
|
dataDeep: 1,
|
keyPersonOption: {},
|
keyPersonSelectSaveArr: [],
|
areaNum: '',
|
villageNum: '',
|
policeVillageNum: '',
|
policeStationPersonInfo: {},
|
villagePersonStatisticInfoList: [],
|
showBack: true,
|
isAllPoliceStation: true,
|
realHouseNum: '',
|
keyPlaceNum: '',
|
personAll: '',
|
// 记录当前选中派出所的ID
|
policeStaionID: '',
|
peopleLoading: false,
|
personEchartsHeight: '100%'
|
}
|
},
|
|
created () {
|
},
|
|
mounted () {
|
// 获取所有数据并加载
|
this.getHomeAllData()
|
|
if (this.userInfo.dept_id != '1123598813738675201') {
|
// console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
|
this.showBack = false
|
this.isAllPoliceStation = false
|
}
|
|
this.$nextTick(() => {
|
window.addEventListener("resize", this.echartsResize)
|
})
|
},
|
|
methods: {
|
// 设备饼图轮播
|
keyPeopleEchartsCarousel () {
|
let curIndex = 0
|
if (timer) {
|
clearInterval(timer)
|
}
|
|
timer = setInterval(() => {
|
keyPersonmyChart.dispatchAction({
|
type: "downplay",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
curIndex = (curIndex + 1) % keyPeopleDataLength
|
keyPersonmyChart.dispatchAction({
|
type: "highlight",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
keyPersonmyChart.dispatchAction({
|
type: "showTip",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
}, 1000)
|
|
keyPersonmyChart.on("mouseover", function (param) {
|
clearInterval(timer)
|
keyPersonmyChart.dispatchAction({
|
type: "downplay",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
keyPersonmyChart.dispatchAction({
|
type: "highlight",
|
seriesIndex: 0,
|
dataIndex: param.dataIndex,
|
})
|
keyPersonmyChart.dispatchAction({
|
type: "showTip",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
curIndex = param.dataIndex
|
})
|
|
keyPersonmyChart.on("mouseout", function (param) {
|
curIndex = param.dataIndex
|
if (timer) {
|
clearInterval(timer)
|
}
|
timer = setInterval(() => {
|
keyPersonmyChart.dispatchAction({
|
type: "downplay",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
curIndex = (curIndex + 1) % keyPeopleDataLength
|
keyPersonmyChart.dispatchAction({
|
type: "highlight",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
keyPersonmyChart.dispatchAction({
|
type: "showTip",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
}, 1000)
|
})
|
},
|
|
/**
|
* @description: 获取首页的所有数据
|
* @return {*}
|
*/
|
getHomeAllData (id = '') {
|
this.policeStaionID = id
|
|
if (id != '') {
|
this.showBack = false
|
this.isAllPoliceStation = false
|
|
this.tabTypeThree = 0
|
} else {
|
this.showBack = true
|
this.isAllPoliceStation = true
|
}
|
|
this.personTabClick(this.tabType)
|
|
this.houseTabClick(this.tabTypeTwo)
|
|
this.landTabClick(this.tabTypeThree)
|
|
if (leftTiming != null) {
|
clearInterval(leftTiming)
|
leftTiming = null
|
}
|
|
leftTiming = setInterval(async () => {
|
this.personTabClick(this.tabType)
|
|
this.houseTabClick(this.tabTypeTwo)
|
|
this.landTabClick(this.tabTypeThree)
|
}, 600000)
|
},
|
|
/**
|
* @description: 户籍人口和重点人员切换
|
* @param {*} type
|
* @return {*}
|
*/
|
personTabClick (type) {
|
this.tabType = type
|
this.dataDeep = 1
|
this.personEchartsLoading = true
|
|
this.disposeEchart()
|
|
if (type == 0) {
|
this.personEchartsHeight = '100%'
|
|
if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {
|
|
this.getPoliceStationInfo()
|
|
} else {
|
this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
|
}
|
|
} else if (type == 1) {
|
this.initkeyPersonEcharts()
|
}
|
},
|
|
/**
|
* @description: 获取分局户籍人口数据
|
* @return {*}
|
*/
|
getPoliceStationInfo () {
|
getVillagePersonStatisticInfo().then(res => {
|
if (res.data.code == 200) {
|
this.disposeEchart()
|
curSubofficeData = res.data.data
|
this.personAll = res.data.data
|
console.log('getPoliceStationInfo', res.data.data)
|
this.policeStationPersonInfo = res.data.data
|
//异步，因此放进接口方法内部
|
this.initPersonEcharts()
|
this.clickPeopleChart()
|
setTimeout(() => {
|
this.personEchartsLoading = false
|
}, 500)
|
}
|
}).catch(res => {
|
setTimeout(() => {
|
this.personEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
/**
|
* @description: 获取派出所户籍人口数据
|
* @param {*} policeStationId
|
* @param {*} name
|
* @return {*}
|
*/
|
getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
|
getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
|
if (res.data.code == 200) {
|
console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
|
this.disposeEchart()
|
var chartDom = document.getElementById('PersonEcharts')
|
homePersonmyChart = this.$echarts.init(chartDom)
|
this.personAll = res.data.data
|
|
if (this.userInfo.dept_id == '1596020515064381442') {
|
this.personAll.emphasisNum = 23
|
}
|
|
|
this.villagePersonStatisticInfoList = res.data.data
|
var xDate = [], yDate1 = [], yDate2 = [], colors1 = ['#f1ce0d', '#eea827', '#e87a4a'], colors2 = ['#8ce070', '#4fd690', '#1bcdaf']
|
|
if (this.villagePersonStatisticInfoList.data.length > 0) {
|
this.villagePersonStatisticInfoList.data.forEach(e => {
|
xDate.push(e.name.replace('居民委员会', ''))
|
yDate1.push({
|
value: e.hjnum,
|
name: e.name,
|
id: e.id
|
})
|
yDate2.push({
|
value: e.synum,
|
name: e.name,
|
id: e.id
|
})
|
})
|
}
|
|
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, colors1, colors2), true)
|
this.clickPeopleChart()
|
|
setTimeout(() => {
|
this.dataDeep = 2
|
this.personEchartsLoading = false
|
}, 1000)
|
|
}
|
}).catch(res => {
|
setTimeout(() => {
|
this.personEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
/**
|
* @description: 初始化现有人图表
|
* @return {*}
|
*/
|
initPersonEcharts () {
|
var chartDom = document.getElementById('PersonEcharts')
|
homePersonmyChart = this.$echarts.init(chartDom)
|
|
var xDate = [], yDate1 = [], yDate2 = []
|
//传入x,y轴数据
|
|
if (this.policeStationPersonInfo.data.length > 0) {
|
this.policeStationPersonInfo.data.forEach(e => {
|
xDate.push(e.name.replace('派出', ''))
|
yDate1.push({
|
value: e.hjnum,
|
id: e.id,
|
type: 'policeStation',
|
name: e.name
|
})
|
yDate2.push({
|
value: e.synum,
|
id: e.id,
|
type: 'policeStation',
|
name: e.name
|
})
|
})
|
}
|
|
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, ['#53eefe'], ['#8b25c1', '#b81fee', '#421784']))
|
},
|
|
/**
|
* @description: 图表数据处理
|
* @param {*} xDate
|
* @param {*} yDate
|
* @param {*} colors
|
* @return {*}
|
*/
|
initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
|
let options
|
|
if (xDate.length == 0) {
|
options = {
|
title: {
|
text: '暂无数据1',
|
x: 'center',
|
y: 'center',
|
textStyle: {
|
color: '#fff',
|
fontWeight: 'normal',
|
fontSize: fontSize(14)
|
}
|
}
|
}
|
} else {
|
options = {
|
tooltip: {
|
trigger: 'item',
|
formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
|
backgroundColor: 'rgba(8, 56, 185, 0.9)',
|
borderColor: 'rgba(8, 56, 185, 0.9)',
|
textStyle: {
|
color: '#fff',
|
fontSize: fontSize(12)
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: xDate,
|
|
axisLabel: {
|
color: "#fff",
|
interval: 0,
|
rotate: 45,
|
fontSize: fontSize(10)
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff"
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
minInterval: 1,
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(12)
|
}
|
},
|
legend: {
|
itemWidth: 15,
|
itemHeight: 15,
|
data: ['户籍人口', '实有人口'],
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
series: [
|
{
|
name: '户籍人口',
|
data: yDate1,
|
type: 'bar',
|
barWidth: '40%',
|
stack: true,
|
emphasis: {
|
disabled: true,
|
focus: 'none'
|
},
|
itemStyle: {
|
normal: {
|
color: colors1[0]
|
// color: function (params) {
|
// return new global.echarts.graphic.LinearGradient(
|
// 0, 0, 0, 1,
|
// [
|
// { offset: 0, color: colors1[0] },
|
// { offset: 0.5, color: colors1[1] },
|
// { offset: 1, color: colors1[2] },
|
// ]
|
// )
|
// }
|
},
|
emphasis: {
|
color: colors1[0]
|
// color: function (params) {
|
// return new global.echarts.graphic.LinearGradient(
|
// 0, 0, 0, 1,
|
// [
|
// { offset: 0, color: colors1[2] },
|
// { offset: 0.7, color: colors1[1] },
|
// { offset: 1, color: colors1[0] }
|
// ]
|
// )
|
// }
|
}
|
},
|
},
|
{
|
name: '实有人口',
|
data: yDate2,
|
type: 'bar',
|
barWidth: '40%',
|
stack: true,
|
emphasis: {
|
disabled: true,
|
focus: 'none'
|
},
|
itemStyle: {
|
normal: {
|
color: colors2[0]
|
// color: function (params) {
|
// return new global.echarts.graphic.LinearGradient(
|
// 0, 0, 0, 1,
|
// [
|
// { offset: 0, color: colors2[2] },
|
// { offset: 0.5, color: colors2[1] },
|
// { offset: 1, color: colors2[0] },
|
// ]
|
// )
|
// }
|
},
|
emphasis: {
|
color: colors2[0]
|
// color: function (params) {
|
// return new global.echarts.graphic.LinearGradient(
|
// 0, 0, 0, 1,
|
// [
|
// { offset: 0, color: colors2[0] },
|
// { offset: 0.7, color: colors2[1] },
|
// { offset: 1, color: colors2[2] }
|
// ]
|
// )
|
// }
|
}
|
},
|
},
|
|
],
|
grid: {
|
top: '4%',
|
left: '2%',
|
right: '2%',
|
bottom: '1%',
|
containLabel: true
|
},
|
}
|
}
|
|
return options
|
|
},
|
|
/**
|
* @description: 现有人图表中的返回按钮
|
* @return {*}
|
*/
|
backBegin () {
|
this.personAll = curSubofficeData
|
this.dataDeep = 1
|
this.initPersonEcharts()
|
this.$parent.getAllPoliceStationCenter()
|
},
|
|
/**
|
* @description: 获取现有住宅信息
|
* @param {*} deptld
|
* @param {*} isFollow
|
* @return {*}
|
*/
|
getHouseStatisticInfo (isFollow) {
|
getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
|
this.disposeHouseEchart()
|
|
let xDate = []
|
let yDate = []
|
if (isFollow == 1) {
|
this.keyPlaceNum = res.data.data.count
|
} else {
|
this.realHouseNum = res.data.data.count
|
}
|
res.data.data.data.forEach(item => {
|
xDate.push(item.name)
|
yDate.push(item.num)
|
})
|
if (this.userInfo.dept_id == '1596020515064381442') {
|
this.keyPlaceNum = 28
|
this.realHouseNum = 205
|
if (isFollow == 2) {
|
xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
|
yDate = [34, 2, 33, 11, 22, 30, 14]
|
this.inithouseEcharts(xDate, yDate)
|
} else {
|
xDate = ['反恐重点目标', '危爆品', '重点服务对象']
|
yDate = [14, 13, 10]
|
this.inithouseEcharts(xDate, yDate)
|
}
|
|
this.clickHouseChart()
|
} else {
|
this.inithouseEcharts(xDate, yDate)
|
}
|
setTimeout(() => {
|
this.houseEchartsLoading = false
|
}, 500)
|
}).catch(res => {
|
setTimeout(() => {
|
this.houseEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
inithouseEcharts (xDate, yDate) {
|
var chartDom = document.getElementById('houseEcharts')
|
houseMyChart = this.$echarts.init(chartDom)
|
houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
|
},
|
|
initHouseOptions (xDate, y1Date, y2Date) {
|
const that = this
|
return {
|
tooltip: {
|
trigger: 'item',
|
formatter: params => {
|
let msg
|
if (params.value > 10000) {
|
msg = (params.value / 10000).toFixed(2) + '万栋'
|
} else {
|
msg = params.value + '栋'
|
}
|
|
msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
|
return msg
|
},
|
backgroundColor: 'rgba(8, 56, 185, 0.9)',
|
borderColor: 'rgba(8, 56, 185, 0.9)',
|
textStyle: {
|
color: '#fff',
|
fontSize: fontSize(12)
|
}
|
},
|
color: myColor,
|
xAxis: {
|
type: 'value',
|
splitLine: {
|
show: false
|
},
|
axisLine: {
|
show: false
|
},
|
axisLabel: {
|
show: false,
|
},
|
axisTick: {
|
show: false
|
},
|
},
|
yAxis: {
|
type: 'category',
|
data: xDate,
|
axisLine: {
|
show: false
|
},
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(14)
|
},
|
axisTick: {
|
show: false
|
},
|
},
|
series: [
|
{
|
data: y1Date,
|
type: 'bar',
|
// barWidth: '10%',
|
barCategoryGap: '80%',
|
zlevel: 2,
|
cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
|
itemStyle: {
|
normal: {
|
// barBorderRadius: [0, 30, 30, 0],
|
// color: function (params) {
|
// var num = myColor.length
|
// return myColor[params.dataIndex % num]
|
// },
|
color: '#ed7c2f',
|
label: {
|
show: true, //开启显示
|
position: 'right', //在上方显示
|
textStyle: { //数值样式
|
color: '#ed7c2f',
|
fontSize: 10
|
}
|
}
|
}
|
},
|
},
|
// {
|
// data: y2Date,
|
// show: true,
|
// type: 'bar',
|
// barGap: '-100%',
|
// barWidth: '35%', //统计条宽度
|
// itemStyle: {
|
// normal: {
|
// color: 'rgba(102, 102, 102,0.5)'
|
// },
|
// },
|
// z: 1,
|
// }
|
],
|
grid: {
|
top: '2%',
|
left: '2%',
|
// right: '-1%',
|
right: '10%',
|
bottom: '2%',
|
containLabel: true
|
},
|
// dataZoom: [
|
// {
|
// type: "inside",
|
// startValue: 0,
|
// endValue: 8,
|
// minValueSpan: 2,
|
// maxValueSpan: 2,
|
// yAxisIndex: [0],
|
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
// moveOnMouseWheel: true, // 开启滚轮平移
|
// moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
|
// },
|
// {
|
// type: 'slider',
|
// realtime: true,
|
// startValue: 0,
|
// endValue: 8,
|
// width: '3.5',
|
// height: '80%',
|
// yAxisIndex: [0], // 控制y轴滚动
|
// fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
// borderColor: "rgba(17, 100, 210, 0.12)",
|
// backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
|
// handleSize: 0, // 两边手柄尺寸
|
// showDataShadow: false,//是否显示数据阴影 默认auto
|
// showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
// top: '1%',
|
// right: '5',
|
// }
|
|
// ]
|
}
|
},
|
|
houseTabClick (type) {
|
this.tabTypeTwo = type
|
|
this.houseEchartsLoading = true
|
|
this.disposeHouseEchart()
|
if (type == 0) {
|
this.getHouseStatisticInfo(2)
|
} else {
|
this.getHouseStatisticInfo(1)
|
}
|
},
|
|
initLandOptions (xDate, yDate) {
|
return {
|
color: ['#0532ff'],
|
grid: {
|
top: '4%',
|
left: '12%',
|
right: '4%',
|
bottom: '28%'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: params => {
|
return `${params.marker} ${params.name}: ${params.value} 个`
|
},
|
backgroundColor: 'rgba(8, 56, 185, 0.9)',
|
borderColor: 'rgba(8, 56, 185, 0.9)',
|
textStyle: {
|
color: '#fff',
|
fontSize: fontSize(12)
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: xDate,
|
axisLabel: {
|
color: "#fff",
|
interval: 0,
|
rotate: 45,
|
fontSize: fontSize(10)
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff"
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
minInterval: 1,
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(12)
|
}
|
},
|
series: [
|
{
|
data: yDate,
|
type: 'bar',
|
barWidth: '24%',
|
itemStyle: {
|
normal: {
|
barBorderRadius: [30, 30, 0, 0],
|
// color: function (params) {
|
// var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
|
// return myLandColors[params.dataIndex % num]
|
// },
|
}
|
},
|
}
|
],
|
// zoomData: [ // 有滚动条 平移
|
// dataZoom: [ // 有滚动条 平移
|
// {
|
// type: 'slider',
|
// show: true,
|
// realtime: true,
|
// start: 0,
|
// end: 40, // 初始展示40%
|
// height: 4,
|
// backgroundColor: 'rgba(47,69,84,0.2)',
|
// fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
|
// borderColor: "rgba(17, 100, 210, 0.12)",
|
// handleSize: 0, // 两边手柄尺寸
|
// showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
// top: '96%',
|
// },
|
// {
|
// type: "inside", // 支持内部鼠标滚动平移
|
// start: 0,
|
// end: 40,
|
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
// moveOnMouseWheel: true, // 开启滚轮平移
|
// moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
|
// }
|
// ]
|
}
|
},
|
|
clickPeopleChart () {
|
homePersonmyChart.on('click', params => {
|
if (params.data.type == 'policeStation') {
|
const center = this.$parent.getPoliceStationCenter(params.data.id)
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'carLayers',
|
siteJd: center[0],
|
siteWd: center[1]
|
})
|
this.personEchartsLoading = true
|
this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
|
} else {
|
this.$emit('showpeopledetail', params.data.id, params.data.name)
|
}
|
})
|
},
|
|
clickHouseChart () {
|
houseMyChart.on('click', params => {
|
this.$parent.architectureTitle = params.name
|
|
if (params.name == '学校') {
|
this.$parent.xxPopupShow = true
|
this.$parent.houseArr = []
|
this.$parent.houseLoading = true
|
setTimeout(() => {
|
this.$parent.houseLoading = false
|
this.$parent.houseArr = schoolJSON
|
}, 1000)
|
} else {
|
this.$parent.architectureShow = true
|
this.$parent.architectureTable = []
|
this.$parent.architectureLoad = true
|
|
if (params.name == '医院') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = hospitalJSON
|
}, 1000)
|
}
|
|
if (params.name == '宾馆酒店') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = hotelJSON
|
}, 1000)
|
}
|
|
if (params.name == '数字经济') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = digitalJSON
|
}, 1000)
|
}
|
|
if (params.name == '房屋建筑业') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = housingJSON
|
}, 1000)
|
}
|
|
if (params.name == '批发业') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = wholesaleJSON
|
}, 1000)
|
}
|
|
if (params.name == '零售业') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = retailJSON
|
}, 1000)
|
}
|
|
if (params.name == '反恐重点目标') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = antiTerroristJSON
|
}, 1000)
|
}
|
|
if (params.name == '危爆品') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = dExplosionJSON
|
}, 1000)
|
}
|
|
if (params.name == '重点服务对象') {
|
setTimeout(() => {
|
this.$parent.architectureLoad = false
|
this.$parent.architectureTable = serviceObjJSON
|
}, 1000)
|
}
|
|
}
|
|
|
})
|
},
|
|
/**
|
* @description: 初始化重点人员饼状图
|
* @return {*}
|
*/
|
async initkeyPersonEcharts () {
|
this.disposeEchart()
|
|
let personInfo = await this.getPersonInfo()
|
|
keyPeopleDataLength = personInfo.length
|
if (this.userInfo.dept_id == '1596020515064381442') {
|
personInfo = [
|
{ count: 3, name: '非涉法涉诉重点个访人员', value: 7 },
|
{ count: 1, name: '楼盘业主维权群体', value: 1 },
|
{ count: 1, name: '欠薪讨债群体', value: 1 },
|
{ count: 4, name: '涉法涉诉重点个访人员', value: 4 },
|
{ count: 11, name: '征地拆迁群体', value: 11 },
|
]
|
}
|
|
const high = this.$refs.REFPERSONECHARTS.offsetHeight
|
|
if (personInfo.length * (high / 7) > high) {
|
this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
|
} else {
|
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)
|
},
|
|
/**
|
* @description: 调用接口获取重点人员数据
|
* @return {*}
|
*/
|
getPersonInfo () {
|
const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
|
res.data = res.data.map(item => {
|
item = {
|
...item,
|
name: item.zdryxl,
|
value: item.count
|
}
|
|
return item
|
})
|
|
return res.data
|
})
|
|
return data
|
},
|
|
/**
|
* @description: 重点人员饼状图渲染的options
|
* @param {*} dataArr
|
* @return {*}
|
*/
|
initkeyPersonOption (dataArr) {
|
let options
|
|
if (dataArr.length == 0) {
|
options = {
|
title: {
|
text: '暂无重点人员数据',
|
x: 'center',
|
y: 'center',
|
textStyle: {
|
color: '#fff',
|
fontWeight: 'normal',
|
fontSize: fontSize(14)
|
}
|
}
|
}
|
} else {
|
options = {
|
tooltip: {
|
trigger: 'item',
|
formatter: params => {
|
let msg
|
if (params.value > 10000) {
|
msg = (params.value / 10000).toFixed(2) + '万人'
|
} else {
|
msg = params.value + '人'
|
}
|
msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
|
return msg
|
},
|
backgroundColor: "rgba(8, 56, 185, 0.9)",
|
borderColor: "rgba(8, 56, 185, 0.9)",
|
textStyle: {
|
fontSize: fontSize(12)
|
},
|
confine: true
|
},
|
legend: {
|
orient: 'vertical',
|
top: 'middle',
|
right: '2%',
|
y: '1%',
|
itemGap: 15,
|
textStyle: {
|
color: '#fff'
|
},
|
align: 'left',
|
formatter: function (name) {
|
let data = dataArr
|
let tarValue
|
for (let i = 0; i < data.length; i++) {
|
if (data[i].name == name) {
|
tarValue = data[i].value
|
}
|
}
|
let v = tarValue
|
return `${name} ${v} 人 `
|
},
|
},
|
series: [
|
{
|
top: 110,
|
left: 60,
|
type: 'pie',
|
radius: [20, 50],
|
center: [0, 0],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
labelLine: {
|
show: false
|
},
|
data: dataArr
|
}
|
],
|
grid: {
|
x: 10,
|
y: 10,
|
x2: 10,
|
y2: 20
|
},
|
}
|
}
|
|
return options
|
},
|
|
/**
|
* @description: 重点人员饼状图的点击事件
|
* @return {*}
|
*/
|
async clickkeyPersonChart () {
|
keyPersonmyChart.on('click', async params => {
|
this.$emit('showkeypersondetail', params.name)
|
})
|
},
|
|
/**
|
* @description: 现有小区切换
|
* @param {*} type
|
* @return {*}
|
*/
|
landTabClick (type) {
|
this.tabTypeThree = type
|
this.landEchartsLoading = true
|
|
this.disposeLandEchart()
|
if (type == 0) {
|
this.getAreaStatisticInfo(2)
|
} else if (type == 1) {
|
this.getAreaStatisticInfo(1)
|
}
|
},
|
|
/**
|
* @description: 获取现有小区数据
|
* @param {*} type
|
* @param {*} deptId
|
* @return {*}
|
*/
|
getAreaStatisticInfo (type) {
|
getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
|
this.disposeLandEchart()
|
|
let landData = []
|
if (type == 2) {
|
this.areaNum = res.data.data.areaNum
|
this.villageNum = res.data.data.villageNum
|
let nameArr = []
|
let countArr = []
|
res.data.data.data.forEach(item => {
|
nameArr.push(item.name.replace('派出', '').replace('居民委员会', ''))
|
countArr.push({ value: item.count, id: item.id })
|
})
|
landData = [nameArr, countArr]
|
} else if (type == 1) {
|
// this.areaNum = res.data.data.areaNum
|
// this.villageNum = res.data.data.villageNum
|
let nameArr = []
|
let countArr = []
|
res.data.data.data.forEach(item => {
|
nameArr.push(item.name.replace('派出', ''))
|
countArr.push({ value: item.count, id: item.id })
|
})
|
landData = [nameArr, countArr]
|
}
|
setTimeout(() => {
|
this.landEchartsLoading = false
|
}, 500)
|
|
this.initLandEcharts(landData)
|
}).catch(res => {
|
setTimeout(() => {
|
this.landEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
/**
|
* @description: 现有小区图表渲染
|
* @param {*} landData
|
* @return {*}
|
*/
|
initLandEcharts (landData) {
|
this.disposeLandEchart()
|
var chartDom = document.getElementById('landEcharts')
|
|
landMyChart = this.$echarts.init(chartDom)
|
|
landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
|
|
this.clickLandChart()
|
},
|
|
/**
|
* @description: 现有小区图表点击事件
|
* @return {*}
|
*/
|
clickLandChart () {
|
landMyChart.on('click', params => {
|
console.log('clickLandChart')
|
if (this.tabTypeThree == 0) {
|
this.$emit('showlanddetail', params.name, 2, params.data.id)
|
} else {
|
this.$emit('showlanddetail', params.name, 1, params.data.id)
|
}
|
})
|
},
|
|
/**
|
* @description: 视图窗口改变时，echarts图表重置
|
* @return {*}
|
*/
|
echartsResize () {
|
homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
|
landMyChart && landMyChart != null && landMyChart.resize()
|
keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
|
houseMyChart && houseMyChart != null && houseMyChart.resize()
|
},
|
|
/**
|
* @description: 销毁所有echarts实例，解绑点击事件
|
* @return {*}
|
*/
|
disposeEchart () {
|
if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
|
homePersonmyChart.dispose()
|
homePersonmyChart.off('click')
|
}
|
|
if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
|
keyPersonmyChart.dispose()
|
keyPersonmyChart.off('click')
|
}
|
},
|
|
/**
|
* @description: 销毁所有echarts实例，解绑点击事件
|
* @return {*}
|
*/
|
disposeHouseEchart () {
|
if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
|
houseMyChart.dispose()
|
houseMyChart.off('click')
|
}
|
},
|
|
/**
|
* @description: 销毁所有echarts实例，解绑点击事件
|
* @return {*}
|
*/
|
disposeLandEchart () {
|
if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
|
landMyChart.dispose()
|
landMyChart.off('click')
|
}
|
},
|
|
|
},
|
|
destroyed () {
|
window.removeEventListener("resize", this.echartsResize)
|
|
this.disposeEchart()
|
this.disposeHouseEchart()
|
this.disposeLandEchart()
|
|
if (leftTiming != null) {
|
clearInterval(leftTiming)
|
leftTiming = null
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
display: flex;
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.person-box {
|
.word {
|
color: #fff;
|
font-size: 14px;
|
}
|
|
.before {
|
margin-left: 108px;
|
}
|
|
.back {
|
color: #fff;
|
position: absolute;
|
top: 96px;
|
right: 16px;
|
width: 20px;
|
height: 20px;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
|
.back:hover {
|
color: #43bafe;
|
}
|
|
.back::after {
|
font-family: element-icons;
|
content: '\e6ea';
|
}
|
}
|
|
.person-box,
|
.house-box,
|
.land-box {
|
margin: 8px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
// background: $bg-color;
|
|
background-image: url(/img/box/box-bg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
.box {
|
display: flex;
|
position: absolute;
|
flex-direction: column;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
padding: 0 18px 0 18px;
|
position: relative;
|
font-size: 16px;
|
|
font-weight: bold;
|
font-style: oblique;
|
letter-spacing: 2px;
|
color: #fff;
|
|
.title-tab {
|
span {
|
color: #99cccc;
|
cursor: pointer;
|
}
|
|
span.choosed {
|
color: #fff;
|
}
|
}
|
|
.title-num {
|
color: #fff;
|
|
span {
|
color: #99cccc;
|
}
|
|
span.choosed {
|
color: #fff;
|
}
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
|
&>div:nth-of-type(2) {
|
font-size: 14px;
|
}
|
}
|
|
// .sub-title {
|
// display: flex;
|
// justify-content: space-between;
|
// height: 36px;
|
// }
|
|
.sub-tab {
|
padding: 10px;
|
display: flex;
|
color: #99cccc;
|
|
.tab,
|
.tab3 {
|
margin: 0 10px;
|
flex: 1;
|
background: $sub-tab-bg-color;
|
border-radius: 8px;
|
cursor: pointer;
|
height: 22px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&>div {
|
height: 22px;
|
line-height: 22px;
|
white-space: nowrap;
|
}
|
}
|
|
.tab {
|
display: flex;
|
justify-content: center;
|
}
|
|
.tab1 {
|
width: 50%;
|
margin-left: 25% !important;
|
display: flex;
|
justify-content: center;
|
margin: 0 10px;
|
background: $sub-tab-bg-color;
|
border-radius: 8px;
|
cursor: pointer;
|
height: 22px;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
:deep(.el-main) {
|
padding: 0;
|
}
|
|
.echarts-box {
|
padding: 12px;
|
padding-top: 0;
|
flex: 1;
|
width: 100%;
|
// height: 100%;
|
}
|
}
|
|
.house-box {
|
margin-top: 0;
|
margin-bottom: 0;
|
|
.title {
|
height: 54px;
|
line-height: 54px;
|
}
|
}
|
|
:deep(.el-table__body-wrapper) {
|
overflow-x: hidden !important;
|
}
|
}
|
|
.border-svg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
|
.mypath {
|
stroke: rgba(33, 150, 243, 1);
|
stroke-width: 2;
|
stroke-dasharray: 888;
|
// stroke-dashoffset: 888;
|
fill: none;
|
animation: go 6s linear infinite forwards;
|
}
|
|
@keyframes go {
|
0% {
|
stroke-dashoffset: 0;
|
}
|
|
100% {
|
stroke-dashoffset: 888;
|
}
|
}
|
</style>
|
