From 85fb13abbeadc1765d2c0056ba99c6c19aa35dfd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sun, 09 Apr 2023 03:44:49 +0800
Subject: [PATCH] 电子沙盘的调整
---
src/views/home/components/leftContainer.vue | 366 +++++++++++++++++++++++++++++++--------------------
1 files changed, 223 insertions(+), 143 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index e1117b3..a8dbeb4 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -6,36 +6,32 @@
<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)">
+ <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 id="PersonEcharts" class="echarts-box">
</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,10 +41,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 +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">
@@ -142,8 +143,10 @@
let keyPersonmyChart = null
let houseMyChart
let landMyChart
+let timer
let leftTiming = null
+let keyPeopleDataLength = 0
let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']
@@ -155,6 +158,9 @@
data () {
return {
tabType: 0,
+ personEchartsLoading: false,
+ houseEchartsLoading: false,
+ landEchartsLoading: false,
peopletype: 0,
tabTypeTwo: 0,
tabTypeThree: 0,
@@ -198,6 +204,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,6 +321,7 @@
personTabClick (type) {
this.tabType = type
this.dataDeep = 1
+ this.personEchartsLoading = true
this.disposeEchart()
@@ -252,18 +331,15 @@
this.getPoliceStationInfo()
} else {
+
this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
-
}
-
} else if (type == 1) {
+
this.initkeyPersonEcharts()
-
}
-
-
},
/**
@@ -277,15 +353,18 @@
this.personAll = res.data.data
- if (this.userInfo.dept_id == '1596020515064381442') {
- this.personAll.emphasisNum = 17
- }
-
this.policeStationPersonInfo = res.data.data
//异步，因此放进接口方法内部
this.initPersonEcharts()
this.clickPeopleChart()
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
}
+ }).catch(res => {
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
})
},
@@ -302,6 +381,12 @@
var chartDom = document.getElementById('PersonEcharts')
homePersonmyChart = this.$echarts.init(chartDom)
this.personAll = res.data.data
+
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ this.personAll.emphasisNum = 20
+ }
+
+
this.villagePersonStatisticInfoList = res.data.data
var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
@@ -316,22 +401,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 +440,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']))
},
/**
@@ -384,7 +456,7 @@
if (xDate.length == 0) {
options = {
title: {
- text: '暂无数据',
+ text: '暂无数据1',
x: 'center',
y: 'center',
textStyle: {
@@ -527,30 +599,29 @@
yDate = [14, 14]
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 +680,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 +758,8 @@
houseTabClick (type) {
this.tabTypeTwo = type
+
+ this.houseEchartsLoading = true
this.disposeHouseEchart()
if (type == 0) {
@@ -796,6 +869,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 +879,6 @@
clickHouseChart () {
houseMyChart.on('click', params => {
- console.log('clickHouseChart', params)
if (params.name == '学校') {
this.$parent.xxPopupShow = true
this.$parent.houseArr = []
@@ -829,25 +902,29 @@
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: 11, name: '征地拆迁群体', value: 11 },
+ { count: 3, name: '非涉法涉诉重点个访人员', value: 3 },
+ { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
+ { count: 1, name: '楼盘业主维权群体', value: 1 },
+ { 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()
+ if (personInfo.length > 1) {
+ this.keyPeopleEchartsCarousel()
+ } else {
+ clearInterval(timer)
+ keyPersonmyChart.off("mouseover")
+ keyPersonmyChart.off("mouseout")
+ }
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
},
/**
@@ -883,7 +960,7 @@
if (dataArr.length == 0) {
options = {
title: {
- text: '暂无数据',
+ text: '暂无重点人员数据',
x: 'center',
y: 'center',
textStyle: {
@@ -904,12 +981,12 @@
} 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
@@ -920,7 +997,7 @@
top: 'middle',
left: '45%',
y: '1%',
- itemGap: 20,
+ itemGap: 15,
textStyle: {
color: '#fff'
},
@@ -933,7 +1010,7 @@
}
}
let v = tarValue
- return `${name} ${v} 人 `
+ return `${name} ${v} 人 `
},
},
series: [
@@ -982,6 +1059,7 @@
*/
landTabClick (type) {
this.tabTypeThree = type
+ this.landEchartsLoading = true
this.disposeLandEchart()
if (type == 0) {
@@ -1023,8 +1101,15 @@
})
landData = [nameArr, countArr]
}
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
this.initLandEcharts(landData)
+ }).catch(res => {
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
})
},
@@ -1039,17 +1124,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 +1319,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 +1369,16 @@
}
}
+ :deep(.el-main) {
+ padding: 0;
+ }
+
.echarts-box {
padding: 12px;
padding-top: 0;
flex: 1;
width: 100%;
+ // height: 100%;
}
}
--
Gitblit v1.9.3