From fa05abb4ccb468db395b0683ff36f2ad419064e5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 06 May 2023 11:19:59 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs
---
src/views/home/components/leftContainer.vue | 293 +++++++++++++++++++++++++++-------------------------------
1 files changed, 136 insertions(+), 157 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 938f937..c0b7737 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -7,35 +7,23 @@
<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%);"
- >
+ <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" :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
+ personAll.total ? personAll.total : 0
}}人
</div>
</div>
- <div
- class="tab"
- :class="{ 'select-on-tab': tabType == 1 }"
- @click="personTabClick(1)"
- >
+ <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
+ personAll.emphasisNum ? personAll.emphasisNum : 0
}}人
</div>
</div>
@@ -46,94 +34,53 @@
</div>
</el-main>
- <div
- class="back"
- title="返回上一级"
- v-show="dataDeep == 2 && peopletype == 0 && showBack"
- @click="backBegin"
- ></div>
+ <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"
+ <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%"
- >
+ 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"
+ <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"
- />
+ 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 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)"
- >
+ <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" :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" :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>
@@ -143,45 +90,24 @@
</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 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)"
- >
+ <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" :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" :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>
@@ -197,19 +123,10 @@
</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 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>
@@ -428,7 +345,6 @@
this.getPoliceStationInfo()
} else {
-
this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
}
@@ -447,7 +363,7 @@
this.disposeEchart()
curSubofficeData = res.data.data
this.personAll = res.data.data
-
+ console.log('getPoliceStationInfo', res.data.data)
this.policeStationPersonInfo = res.data.data
//异步，因此放进接口方法内部
this.initPersonEcharts()
@@ -472,7 +388,7 @@
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)
@@ -484,25 +400,30 @@
this.villagePersonStatisticInfoList = res.data.data
- var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
+ var xDate = [], yDate1 = [], yDate2 = [], colors1 = ['#ccf9d0', '#f9d888', '#f7857e'], colors2 = ['#FF6666', '#FFFF00', '#0066CC']
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.setOption(this.initPersonOptions(xDate, yDate, colors), true)
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, colors1, colors2), true)
this.clickPeopleChart()
setTimeout(() => {
- this.dataDeep = 2,
- this.personEchartsLoading = false
+ this.dataDeep = 2
+ this.personEchartsLoading = false
}, 1000)
}
@@ -521,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
@@ -536,7 +463,7 @@
})
}
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, ['#06B5D7', '#44C0C1', '#71C8B1'], ['#FF6666', '#9a76dc', '#602ac2']))
},
/**
@@ -546,7 +473,7 @@
* @param {*} colors
* @return {*}
*/
- initPersonOptions (xDate, yDate, colors) {
+ initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
let options
if (xDate.length == 0) {
@@ -601,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%',
@@ -1497,7 +1476,7 @@
color: #fff;
}
- & > div:nth-of-type(2) {
+ &>div:nth-of-type(2) {
font-size: 14px;
}
}
@@ -1525,7 +1504,7 @@
align-items: center;
justify-content: center;
- & > div {
+ &>div {
height: 22px;
line-height: 22px;
white-space: nowrap;
--
Gitblit v1.9.3