From e24f70ababdee2b4fdce71c6b80a9bc928fa0331 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 08 May 2023 14:45:08 +0800
Subject: [PATCH] 警情排行调整
---
src/views/home/components/leftContainer.vue | 618 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 430 insertions(+), 188 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index e1117b3..ba47308 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -6,36 +6,33 @@
<div class="title-tab">
<span :class="{ choosed: peopletype == 0 }">现有人员</span>
</div>
- <!-- <div class="title-num">
- 共
- <span :class="{ choosed: peopletype == 0 }">100</span>人
- <span :class="{ choosed: peopletype == 1 }">1</span>人
- </div>-->
</div>
- <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
- }}人
+ <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="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 class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
+ <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
</div>
- <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
- <div class="num">91995人</div>
- <div class="type">境外人口</div>
- </div>-->
- </div>
- <div id="PersonEcharts" class="echarts-box">
- </div>
+ </el-main>
<div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
</div>
@@ -45,11 +42,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"
- fill="transparent" />
+ 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" />
@@ -58,10 +54,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>
@@ -77,17 +73,20 @@
<div class="house-box" style="position: relative;">
<div class="box">
<div class="title">现有住宅</div>
- <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>
+ <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 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>
+ <div id="houseEcharts" class="echarts-box"></div>
+ </el-main>
</div>
<svg class="border-svg">
@@ -101,24 +100,26 @@
<div class="land-box" style="position: relative;">
<div class="box">
<div class="title">现有小区</div>
- <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>
+ <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="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 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>
- <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>
+ <div id="landEcharts" class="echarts-box"></div>
+ </el-main>
</div>
<svg class="border-svg">
@@ -136,14 +137,27 @@
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']
@@ -155,6 +169,9 @@
data () {
return {
tabType: 0,
+ personEchartsLoading: false,
+ houseEchartsLoading: false,
+ landEchartsLoading: false,
peopletype: 0,
tabTypeTwo: 0,
tabTypeThree: 0,
@@ -176,6 +193,7 @@
// 记录当前选中派出所的ID
policeStaionID: '',
peopleLoading: false,
+ personEchartsHeight: '100%'
}
},
@@ -198,6 +216,78 @@
},
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 {*}
@@ -243,27 +333,24 @@
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()
-
}
-
-
},
/**
@@ -274,18 +361,21 @@
getVillagePersonStatisticInfo().then(res => {
if (res.data.code == 200) {
this.disposeEchart()
-
+ curSubofficeData = res.data.data
this.personAll = res.data.data
-
- if (this.userInfo.dept_id == '1596020515064381442') {
- this.personAll.emphasisNum = 17
- }
-
+ 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)
})
},
@@ -298,40 +388,49 @@
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 = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
+ 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('居民委员会', ''))
- yDate.push({
- value: e.num,
+ yDate1.push({
+ value: e.hjnum,
+ name: e.name,
+ id: e.id
+ })
+ yDate2.push({
+ value: e.synum,
name: e.name,
id: e.id
})
})
}
- 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, yDate1, yDate2, colors1, colors2), true)
this.clickPeopleChart()
- setTimeout(() => { this.dataDeep = 2 }, 1000)
+ setTimeout(() => {
+ this.dataDeep = 2
+ this.personEchartsLoading = false
+ }, 1000)
}
+ }).catch(res => {
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
})
},
@@ -343,14 +442,20 @@
var chartDom = document.getElementById('PersonEcharts')
homePersonmyChart = this.$echarts.init(chartDom)
- var xDate = [], yDate = []
+ var xDate = [], yDate1 = [], yDate2 = []
//传入x,y轴数据
if (this.policeStationPersonInfo.data.length > 0) {
this.policeStationPersonInfo.data.forEach(e => {
xDate.push(e.name.replace('派出', ''))
- yDate.push({
- value: e.num,
+ 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
@@ -358,17 +463,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, yDate1, yDate2, ['#53eefe'], ['#8b25c1', '#b81fee', '#421784']))
},
/**
@@ -378,13 +473,13 @@
* @param {*} colors
* @return {*}
*/
- initPersonOptions (xDate, yDate, colors) {
+ initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
let options
if (xDate.length == 0) {
options = {
title: {
- text: '暂无数据',
+ text: '暂无数据1',
x: 'center',
y: 'center',
textStyle: {
@@ -433,42 +528,94 @@
fontSize: fontSize(12)
}
},
+ legend: {
+ itemWidth: 15,
+ itemHeight: 15,
+ data: ['户籍人口', '实有人口'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
series: [
{
- data: yDate,
+ name: '户籍人口',
+ data: yDate1,
type: 'bar',
barWidth: '40%',
+ stack: true,
emphasis: {
disabled: true,
focus: 'none'
},
itemStyle: {
normal: {
- color: function (params) {
- return new global.echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- { offset: 0, color: colors[0] },
- { offset: 0.5, color: colors[1] },
- { offset: 1, color: colors[2] },
- ]
- )
- }
+ 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: function (params) {
- return new global.echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- { offset: 0, color: colors[2] },
- { offset: 0.7, color: colors[1] },
- { offset: 1, color: colors[0] }
- ]
- )
- }
+ 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%',
@@ -489,6 +636,7 @@
* @return {*}
*/
backBegin () {
+ this.personAll = curSubofficeData
this.dataDeep = 1
this.initPersonEcharts()
this.$parent.getAllPoliceStationCenter()
@@ -519,38 +667,37 @@
this.keyPlaceNum = 28
this.realHouseNum = 205
if (isFollow == 2) {
- xDate = ['学校', '医院', '党政机关', '宾馆酒店', '零售业', '数字经济', '批发业', '装修及建筑业', '租赁业', '房地产业', '商务服务业', '餐饮业']
- yDate = [36, 1, 3, 34, 16, 25, 30, 33, 2, 7, 6, 2]
+ xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
+ yDate = [34, 2, 33, 11, 22, 30, 14]
this.inithouseEcharts(xDate, yDate)
} else {
- xDate = ['反恐重点目标', '危爆品单位']
- yDate = [14, 14]
+ xDate = ['反恐重点目标', '危爆品', '重点服务对象']
+ yDate = [14, 13, 10]
this.inithouseEcharts(xDate, yDate)
}
+
+ this.clickHouseChart()
} else {
this.inithouseEcharts(xDate, yDate)
}
- this.clickHouseChart()
+ 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.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) {
+ const that = this
return {
tooltip: {
trigger: 'item',
@@ -609,7 +756,7 @@
// barWidth: '10%',
barCategoryGap: '80%',
zlevel: 2,
- cursor: this.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
+ cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
itemStyle: {
normal: {
// barBorderRadius: [0, 30, 30, 0],
@@ -687,6 +834,8 @@
houseTabClick (type) {
this.tabTypeTwo = type
+
+ this.houseEchartsLoading = true
this.disposeHouseEchart()
if (type == 0) {
@@ -796,6 +945,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)
@@ -805,7 +955,8 @@
clickHouseChart () {
houseMyChart.on('click', params => {
- console.log('clickHouseChart', params)
+ this.$parent.architectureTitle = params.name
+
if (params.name == '学校') {
this.$parent.xxPopupShow = true
this.$parent.houseArr = []
@@ -814,7 +965,77 @@
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)
+ }
+
}
+
+
})
},
@@ -825,29 +1046,46 @@
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: 8, name: '征地拆迁群体', value: 8 }, { count: 4, name: '非涉法涉诉重点个访人员', value: 4 }, { count: 4, name: '涉法涉诉重点个访人员', value: 4 }, { count: 1, name: '楼盘业主维权群体', value: 1 }]
-
+ 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 },
+ ]
}
- 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)
+ const high = this.$refs.REFPERSONECHARTS.offsetHeight
- this.clickkeyPersonChart()
+ 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)
},
/**
@@ -883,7 +1121,7 @@
if (dataArr.length == 0) {
options = {
title: {
- text: '暂无数据',
+ text: '暂无重点人员数据',
x: 'center',
y: 'center',
textStyle: {
@@ -904,26 +1142,26 @@
} else {
msg = params.value + '人'
}
-
- msg = `<div style="color: #000;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
+ 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: {
- color: '#fff',
fontSize: fontSize(12)
},
confine: true
},
legend: {
- type: 'scroll',
orient: 'vertical',
top: 'middle',
- left: '45%',
+ right: '2%',
y: '1%',
- itemGap: 20,
+ itemGap: 15,
textStyle: {
color: '#fff'
},
+ align: 'left',
formatter: function (name) {
let data = dataArr
let tarValue
@@ -933,15 +1171,16 @@
}
}
let v = tarValue
- return `${name} ${v} 人 `
+ return `${name} ${v} 人 `
},
},
series: [
{
- name: '',
+ top: 110,
+ left: 60,
type: 'pie',
- radius: ['30%', '60%'],
- center: ['22%', '55%'],
+ radius: [20, 50],
+ center: [0, 0],
avoidLabelOverlap: false,
label: {
show: false,
@@ -982,6 +1221,7 @@
*/
landTabClick (type) {
this.tabTypeThree = type
+ this.landEchartsLoading = true
this.disposeLandEchart()
if (type == 0) {
@@ -1023,8 +1263,15 @@
})
landData = [nameArr, countArr]
}
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
this.initLandEcharts(landData)
+ }).catch(res => {
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
})
},
@@ -1039,17 +1286,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()
},
@@ -1244,11 +1481,11 @@
}
}
- .sub-title {
- display: flex;
- justify-content: space-between;
- height: 36px;
- }
+ // .sub-title {
+ // display: flex;
+ // justify-content: space-between;
+ // height: 36px;
+ // }
.sub-tab {
padding: 10px;
@@ -1294,11 +1531,16 @@
}
}
+ :deep(.el-main) {
+ padding: 0;
+ }
+
.echarts-box {
padding: 12px;
padding-top: 0;
flex: 1;
width: 100%;
+ // height: 100%;
}
}
--
Gitblit v1.9.3