From de2010a6eba11be443a5d875fde07214a25fbfb3 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 30 Jan 2023 15:58:30 +0800
Subject: [PATCH] 首页相关更改
---
src/views/home/components/leftContainer.vue | 247 +++++++++++++++++++------------------------------
1 files changed, 95 insertions(+), 152 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 8eacebe..1e090c2 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -14,21 +14,13 @@
</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" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
<div class="tab-title-small">户籍人口:</div>
- <div class="tab-title-small">{{policeStationPersonInfo.total}}人</div>
+ <div class="tab-title-small">{{ policeStationPersonInfo.total }}人</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">{{policeStationPersonInfo.emphasisNum}}人</div>
+ <div class="tab-title-small">{{ policeStationPersonInfo.emphasisNum }}人</div>
</div>
<!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
<div class="num">91995人</div>
@@ -36,68 +28,40 @@
</div>-->
</div>
<div id="PersonEcharts" class="echarts-box"></div>
- <div
- class="back"
- title="返回上一级"
- v-show="dataDeep == 2 && peopletype == 0"
- @click="backBegin"
- ></div>
+ <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @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>
@@ -105,19 +69,11 @@
<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" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
<div class="tab-title-small">实有房屋:</div>
<div class="tab-title-small">182万户</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">634个</div>
</div>
@@ -126,19 +82,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>
@@ -146,40 +93,23 @@
<div class="box">
<div class="title">现有地</div>
<div class="sub-tab">
- <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}}个</div>
+ <div class="tab-title-small">{{ villageNum }}个</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}}个</div>
+ <div class="tab-title-small">{{ areaNum }}个</div>
</div>
</div>
<div id="landEcharts" class="echarts-box"></div>
</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>
@@ -189,7 +119,7 @@
<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
-import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId } from "@/api/dept"
+import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage } from "@/api/dept"
let homePersonmyChart
let houseMyChart
@@ -201,6 +131,8 @@
const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
export default {
+ inject: ['userInfo'],
+
data () {
return {
tabType: 0,
@@ -325,6 +257,11 @@
this.getPoliceStationInfo()
this.inithouseEcharts()
this.clickLandChart()
+
+ setTimeout(() => {
+ console.log(this.userInfo.dept_id, 98999)
+
+ }, 5000)
this.$nextTick(() => {
window.addEventListener("resize", this.echartsResize)
@@ -728,25 +665,45 @@
})
},
- clickkeyPersonChart () {
- keyPersonmyChart.on('click', params => {
- let keyPersonDetailNewArr = []
- this.keyPersonSelectArr.some((item) => {
- if (item.type == params.name) {
- keyPersonDetailNewArr.push(item)
- }
- })
- this.$emit('showkeypersondetail', params.name, keyPersonDetailNewArr)
- })
- },
-
- initkeyPersonEcharts () {
+ /**
+ * @description: 初始化重点人员饼状图
+ * @return {*}
+ */
+ async initkeyPersonEcharts () {
var chartDom = document.getElementById('PersonEcharts')
keyPersonmyChart = this.$echarts.init(chartDom)
- let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
- keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))
+
+ let personInfo = await this.getPersonInfo()
+
+ keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
+ },
+ /**
+ * @description: 调用接口获取重点人员数据
+ * @return {*}
+ */
+ getPersonInfo () {
+ const data = getPersonInfo({ deptId: 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) {
return {
tooltip: {
@@ -758,11 +715,14 @@
} else {
msg = params.value + '人'
}
- msg = ` <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
+
+ msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
return msg
}
},
legend: {
+ type: 'scroll',
+ orient: 'vertical',
left: '45%',
y: '1%',
itemGap: 20,
@@ -805,6 +765,20 @@
y2: 20
},
}
+ },
+
+ /**
+ * @description: 重点人员饼状图的点击事件
+ * @return {*}
+ */
+ async clickkeyPersonChart () {
+ keyPersonmyChart.on('click', async params => {
+ this.$emit('showkeypersondetail', params.name)
+ })
+ /**
+ * @description:
+ * @return {*}
+ */
},
selectPoliceChangeData (name) {
@@ -883,37 +857,6 @@
// colors = ['#7d65c0', '#a47db4', '#e0a8c5']
// }
// homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- },
-
- getKeyPersonCount (arr) {
- let valueArr = [0, 0, 0, 0, 0, 0, 0]
- arr.some(item => {
- if (item.type == '涉恐人员') {
- valueArr[0] = Number(valueArr[0]) + 1
- } else if (item.type == '涉稳人员') {
- valueArr[1] = Number(valueArr[1]) + 1
- } else if (item.type == '涉毒人员') {
- valueArr[2] = Number(valueArr[2]) + 1
- } else if (item.type == '在逃人员') {
- valueArr[3] = Number(valueArr[3]) + 1
- } else if (item.type == '重大刑事犯罪前科人员') {
- valueArr[4] = Number(valueArr[4]) + 1
- } else if (item.type == '肇事肇祸精神病人') {
- valueArr[5] = Number(valueArr[5]) + 1
- } else if (item.type == '重点上访人员') {
- valueArr[6] = Number(valueArr[6]) + 1
- }
- })
- let KeyPersonDataArr = [
- { value: valueArr[0], name: '涉恐人员' },
- { value: valueArr[1], name: '涉稳人员' },
- { value: valueArr[2], name: '涉毒人员' },
- { value: valueArr[3], name: '在逃人员' },
- { value: valueArr[4], name: '重大刑事犯罪前科人员' },
- { value: valueArr[5], name: '肇事肇祸精神病人' },
- { value: valueArr[6], name: '重点上访人员' }
- ]
- return KeyPersonDataArr
},
selectAreaChangeData (name) {
@@ -1043,7 +986,7 @@
.back {
color: #fff;
position: absolute;
- top: 120px;
+ top: 96px;
right: 16px;
width: 20px;
height: 20px;
@@ -1126,7 +1069,7 @@
color: #fff;
}
- & > div:nth-of-type(2) {
+ &>div:nth-of-type(2) {
font-size: 14px;
}
}
@@ -1154,7 +1097,7 @@
align-items: center;
justify-content: center;
- & > div {
+ &>div {
height: 22px;
line-height: 22px;
}
--
Gitblit v1.9.3