From 514d2eb5f8c9c4ee1da272e0819580a2dd49ecf1 Mon Sep 17 00:00:00 2001
From: 钟日健 <arsn163@163.com>
Date: Fri, 06 Jan 2023 14:49:51 +0800
Subject: [PATCH] 首页现有人员样式调整，去除境外人员统计展示
---
src/views/home/components/leftContainer.vue | 100 +++++++++++++++++++++++++------------------------
1 files changed, 51 insertions(+), 49 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 9771eae..4f0dde2 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -4,28 +4,28 @@
<div class="box">
<div class="title">
<div class="title-tab">
- <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/
- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
+ <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
+ <!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> -->
</div>
- <div class="title-num">
+ <!-- <div class="title-num">
共
- <span :class="{ choosed: peopletype == 0 }">100</span>/
+ <span :class="{ choosed: peopletype == 0 }">100</span>人
<span :class="{ choosed: peopletype == 1 }">1</span>人
- </div>
+ </div> -->
</div>
<div class="sub-tab" v-show="peopletype == 0">
- <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
- <div class="num">164.57万人</div>
- <div class="type">户籍人口</div>
+ <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
+ <div class="tab-title-small">户籍人口:</div>
+ <div class="tab-title-small">164.57万人</div>
</div>
- <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
- <div class="num">17.52万人</div>
- <div class="type">流动人口</div>
+ <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
+ <div class="tab-title-small">重点人员:</div>
+ <div class="tab-title-small">1人</div>
</div>
- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
+ <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
<div class="num">91995人</div>
<div class="type">境外人口</div>
- </div>
+ </div> -->
</div>
<div id="PersonEcharts" class="echarts-box"></div>
<div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
@@ -132,7 +132,7 @@
const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
export default {
- data () {
+ data() {
return {
tabType: 0,
peopletype: 0,
@@ -253,7 +253,7 @@
keyPersonSelectSaveArr: [],
}
},
- mounted () {
+ mounted() {
this.initLandEcharts()
this.initPersonEcharts()
this.inithouseEcharts()
@@ -265,20 +265,20 @@
})
},
methods: {
- echartsResize () {
+ echartsResize() {
homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
landMyChart && landMyChart != null && landMyChart.resize()
keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
houseMyChart && houseMyChart != null && houseMyChart.resize()
},
- initPersonEcharts () {
+ initPersonEcharts() {
var chartDom = document.getElementById('PersonEcharts')
homePersonmyChart = this.$echarts.init(chartDom)
homePersonmyChart.setOption(this.initPersonOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所'], [881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
},
- initPersonOptions (xDate, yDate, colors) {
+ initPersonOptions(xDate, yDate, colors) {
return {
tooltip: {
trigger: 'item',
@@ -355,34 +355,32 @@
}
},
- personTabClick (type) {
+ personTabClick(type) {
this.tabType = type
this.dataDeep = 1
let xDate, yDate, colors
if (type == 0) {
+ homePersonmyChart.dispose()
+ this.initPersonEcharts()
+ homePersonmyChart.off('click')
+ this.clickPeopleChart()
xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
yDate = [881, 2211, 6414, 4321, 1232]
colors = ['#06B5D7', '#44C0C1', '#71C8B1']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (type == 1) {
- xDate = ['湖北', '上海', '北京', '广东', '浙江']
- yDate = [6414, 4231, 2211, 1231, 881]
- colors = ['#ef9faa', '#f7bfc6', '#fedade']
- } else if (type == 2) {
- xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
- yDate = [881, 1231, 2211, 4321, 6414]
- colors = ['#7d65c0', '#a47db4', '#e0a8c5']
+ this.peopleTabClick(type);
}
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
},
- inithouseEcharts () {
+ inithouseEcharts() {
var chartDom = document.getElementById('houseEcharts')
houseMyChart = this.$echarts.init(chartDom)
houseMyChart.setOption(this.initHouseOptions(['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'], [88188, 1222211, 464104, 43201, 12302], [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]))
},
- initHouseOptions (xDate, y1Date, y2Date) {
+ initHouseOptions(xDate, y1Date, y2Date) {
return {
tooltip: {
trigger: 'item',
@@ -472,7 +470,7 @@
}
},
- houseTabClick (type) {
+ houseTabClick(type) {
this.tabTypeTwo = type
let xDate, y1Date, y2Date
@@ -489,13 +487,13 @@
houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true)
},
- initLandEcharts () {
+ initLandEcharts() {
var chartDom = document.getElementById('landEcharts')
landMyChart = this.$echarts.init(chartDom)
landMyChart.setOption(this.initLandOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]))
},
- initLandOptions (xDate, yDate) {
+ initLandOptions(xDate, yDate) {
return {
grid: {
top: '4%',
@@ -581,7 +579,7 @@
}
},
- landTabClick (type) {
+ landTabClick(type) {
this.tabTypeThree = type
let xDate, yDate
@@ -596,8 +594,8 @@
landMyChart.setOption(this.initLandOptions(xDate, yDate), true)
},
- peopleTabClick (type) {
- this.peopletype = type
+ peopleTabClick(type) {
+ // this.peopletype = type
homePersonmyChart.dispose()
this.$nextTick(() => {
if (type == 0) {
@@ -613,7 +611,7 @@
})
},
- clickPeopleChart () {
+ clickPeopleChart() {
homePersonmyChart.on('click', params => {
let xDate, yDate, colors
this.dataDeep = 2
@@ -698,7 +696,7 @@
})
},
- clickLandChart () {
+ clickLandChart() {
landMyChart.on('click', params => {
this.landVisible = true
this.landTitle = params.name
@@ -710,7 +708,7 @@
})
},
- clickkeyPersonChart () {
+ clickkeyPersonChart() {
keyPersonmyChart.on('click', params => {
let keyPersonDetailNewArr = []
this.keyPersonSelectArr.some((item) => {
@@ -722,14 +720,14 @@
})
},
- initkeyPersonEcharts () {
+ initkeyPersonEcharts() {
var chartDom = document.getElementById('PersonEcharts')
keyPersonmyChart = this.$echarts.init(chartDom)
let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))
},
- initkeyPersonOption (dataArr) {
+ initkeyPersonOption(dataArr) {
return {
tooltip: {
trigger: 'item',
@@ -745,8 +743,8 @@
}
},
legend: {
- left: '48%',
- y: '10%',
+ left: '45%',
+ y: '1%',
itemGap: 20,
textStyle: {
color: '#fff'
@@ -767,8 +765,8 @@
{
name: '',
type: 'pie',
- radius: ['40%', '70%'],
- center: ['24%', '57%'],
+ radius: ['30%', '60%'],
+ center: ['22%', '55%'],
avoidLabelOverlap: false,
label: {
show: false,
@@ -789,7 +787,7 @@
}
},
- selectPoliceChangeData (name) {
+ selectPoliceChangeData(name) {
if (this.peopletype == 0 && this.tabType == 0) {
let xDate, yDate, colors
if (name == '车站所') {
@@ -847,7 +845,7 @@
},
- backBegin () {
+ backBegin() {
this.dataDeep = 1
let xDate, yDate, colors
if (this.tabType == 0) {
@@ -866,7 +864,7 @@
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
},
- getKeyPersonCount (arr) {
+ getKeyPersonCount(arr) {
let valueArr = [0, 0, 0, 0, 0, 0, 0]
arr.some(item => {
if (item.type == '涉恐人员') {
@@ -897,7 +895,7 @@
return KeyPersonDataArr
},
- selectAreaChangeData (name) {
+ selectAreaChangeData(name) {
if (this.peopletype == 1) {
if (this.peopletype == 1 && name != '全部') {
let arr = []
@@ -921,7 +919,7 @@
},
- destroyed () {
+ destroyed() {
window.removeEventListener("resize", this.echartsResize)
if (homePersonmyChart) {
@@ -1071,6 +1069,10 @@
background: $sub-tab-bg-color;
border-radius: 8px;
cursor: pointer;
+ height: 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
&>div {
height: 22px;
--
Gitblit v1.9.3