From dbd6d2ca8cb996d49593c19f2e07eb54f31d1d1a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 06 Jan 2023 17:49:16 +0800
Subject: [PATCH] 警情
---
src/views/home/components/leftContainer.vue | 715 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 446 insertions(+), 269 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index dbee1aa..4f0dde2 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -1,74 +1,138 @@
<template>
<div class="container">
- <div class="person-box">
- <div class="title">
- <div>
- <span class="peopleTap" :class="{ choosed: peopletype == 0 }"
- @click="peopleTabClick(0)">现有人员</span>/
- <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
+ <div class="person-box" style="position: relative;">
+ <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> -->
+ </div>
+ <!-- <div class="title-num">
+ 共
+ <span :class="{ choosed: peopletype == 0 }">100</span>人
+ <span :class="{ choosed: peopletype == 1 }">1</span>人
+ </div> -->
</div>
- <div>
- 共
- <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>/
- <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>人
+ <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">164.57万人</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">1人</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>
+ <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
</div>
- <div class="sub-tab" v-show="peopletype == 0">
- <div class="tab" :class="{ on: tabType == 0 }" @click="personTabClick(0)">
- <div class="num">164.57万人</div>
- <div class="type">户籍人口</div>
- </div>
- <div class="tab" :class="{ on: tabType == 1 }" @click="personTabClick(1)">
- <div class="num">17.52万人</div>
- <div class="type">流动人口</div>
- </div>
- <div class="tab" :class="{ on: tabType == 2 }" @click="personTabClick(2)">
- <div class="num">91995人</div>
- <div class="type">境外人口</div>
- </div>
- </div>
- <div id="PersonEcharts" class="echarts-box"></div>
- <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
+
+ <svg class="border-svg">
+ <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">
+ </path>
+ <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
+ r="50%">
+ <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
+ <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
+ </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"
+ 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"></animateMotion>
+ </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">
+ </animate>
+ </use>
+ </svg>
</div>
- <div class="house-box">
- <div class="title">现有房屋</div>
- <div class="sub-tab">
- <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
- <div class="num">182万户</div>
- <div class="num">实有房屋</div>
+ <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">182万户</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">634个</div>
+ </div>
</div>
- <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
- <div class="num">634个</div>
- <div class="num">关注场所</div>
- </div>
+ <div id="houseEcharts" class="echarts-box"></div>
</div>
- <div id="houseEcharts" class="echarts-box"></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">
+ </animate>
+ </use>
+ </svg>
</div>
- <div class="land-box">
- <div class="title">现有地</div>
- <div class="sub-tab">
- <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
- <div class="num">634个</div>
- <div class="num">小区</div>
+ <div class="land-box" style="position: relative;">
+ <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-title-small">小区:</div>
+ <div class="tab-title-small">634个</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">634个</div>
+ </div>
</div>
- <div class="tab" :class="{ on: tabTypeThree == 1 }" @click="landTabClick(1)">
- <div class="num">634个</div>
- <div class="num">责任区</div>
- </div>
+ <div id="landEcharts" class="echarts-box"></div>
</div>
- <div id="landEcharts" class="echarts-box"></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">
+ </animate>
+ </use>
+ </svg>
</div>
</div>
</template>
<script>
+import { fontSize } from '@/utils/fontSize.js'
let homePersonmyChart
let houseMyChart
let landMyChart
let keyPersonmyChart
+let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']
+
+const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
+
export default {
- data () {
+ data() {
return {
tabType: 0,
peopletype: 0,
@@ -97,99 +161,99 @@
{ 'housingEastate': '责任区5', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' },
],
keyPersonDetailArr: [
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
- { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
- { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4', 'type': '在逃人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
- { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
- { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
- { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
- { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
- { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '在逃人员' },
- { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
- { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
- { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2', 'type': '在逃人员' },
- { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
- { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
- { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
- { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4', 'type': '在逃人员' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
- { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
- { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2', 'type': '在逃人员' },
- { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
- { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
- { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
- { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
- { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1', 'type': '在逃人员' },
- { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
- { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
- { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
+ { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
+ { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
+ { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
+ { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '在逃人员' },
+ { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
+ { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
+ { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
+ { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
+ { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
+ { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
+ { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '在逃人员' },
+ { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
+ { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
+ { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
+ { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
+ { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
+ { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
+ { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '在逃人员' },
+ { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
+ { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
+ { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
+ { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
+ { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
+ { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
+ { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '在逃人员' },
+ { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
+ { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
+ { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
+ { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
+ { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
+ { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
+ { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '在逃人员' },
+ { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
+ { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
+ { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
+ { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
+ { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
+ { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
+ { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
+ { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
+ { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
+ { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
],
dataDeep: 1,
keyPersonOption: {},
keyPersonSelectArr: [
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
- { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
- { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4', 'type': '在逃人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
- { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
- { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
- { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
- { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
- { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '在逃人员' },
- { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
- { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
- { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2', 'type': '在逃人员' },
- { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
- { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
- { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
- { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4', 'type': '在逃人员' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
- { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
- { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2', 'type': '在逃人员' },
- { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
- { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
- { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
- { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
- { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1', 'type': '在逃人员' },
- { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
- { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
- { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
+ { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
+ { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
+ { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
+ { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '在逃人员' },
+ { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
+ { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
+ { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
+ { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
+ { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
+ { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
+ { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '在逃人员' },
+ { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
+ { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
+ { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
+ { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
+ { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
+ { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
+ { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '在逃人员' },
+ { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
+ { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
+ { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
+ { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
+ { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
+ { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
+ { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '在逃人员' },
+ { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
+ { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
+ { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
+ { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
+ { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
+ { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
+ { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '在逃人员' },
+ { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
+ { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
+ { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
+ { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
+ { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
+ { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
+ { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
+ { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
+ { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
+ { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
],
keyPersonSelectSaveArr: [],
}
},
- mounted () {
+ mounted() {
this.initLandEcharts()
this.initPersonEcharts()
this.inithouseEcharts()
@@ -201,24 +265,27 @@
})
},
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']))
+ homePersonmyChart.setOption(this.initPersonOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所'], [881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
},
- initPersonOptions (xDate, yDate, colors) {
+ initPersonOptions(xDate, yDate, colors) {
return {
tooltip: {
trigger: 'item',
- formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>'
+ formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
+ textStyle: {
+ fontSize: fontSize(14)
+ }
},
xAxis: {
type: 'category',
@@ -227,6 +294,7 @@
axisLabel: {
color: "#fff",
interval: 0,
+ fontSize: fontSize(14)
},
axisLine: {
lineStyle: {
@@ -240,7 +308,8 @@
show: false
},
axisLabel: {
- color: "#fff"
+ color: "#fff",
+ fontSize: fontSize(14)
}
},
series: [
@@ -277,46 +346,60 @@
}
],
grid: {
- x: 40,
- y: 10,
- x2: 20,
- y2: 20
+ top: '4%',
+ left: '2%',
+ right: '2%',
+ bottom: '4%',
+ containLabel: true
},
}
},
- personTabClick (type) {
+ personTabClick(type) {
this.tabType = type
this.dataDeep = 1
let xDate, yDate, colors
if (type == 0) {
- xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ 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 = ['#2495b3', '#49b5d0', '#63cde5']
+ 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',
+ formatter: params => {
+ let msg
+ if (params.value > 10000) {
+ msg = (params.value / 10000).toFixed(2) + '万人'
+ } else {
+ msg = params.value + '人'
+ }
+
+ msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>'`
+ return msg
+ },
+ textStyle: {
+ fontSize: fontSize(14)
+ }
},
- color: ['#2967c4', '#112d54'],
+ color: myColor,
xAxis: {
type: 'value',
splitLine: {
@@ -340,7 +423,8 @@
show: false
},
axisLabel: {
- color: "#fff"
+ color: "#fff",
+ fontSize: fontSize(14)
},
axisTick: {
show: false
@@ -351,42 +435,42 @@
data: y1Date,
type: 'bar',
zlevel: 2,
- tooltip: {
- trigger: 'item',
- formatter: params => {
- let msg
- if (params.value > 10000) {
- msg = (params.value / 10000).toFixed(2) + '万人'
- } else {
- msg = params.value + '人'
- }
- msg = ` <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #2d71d7;"></span> ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
- return msg
+ itemStyle: {
+ normal: {
+ barBorderRadius: [0, 30, 30, 0],
+ color: function (params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ },
}
},
},
{
data: y2Date,
+ show: true,
type: 'bar',
barGap: '-100%',
- tooltip: {
- trigger: 'item',
- show: false
-
- }
+ barWidth: '35%', //统计条宽度
+ itemStyle: {
+ normal: {
+ color: 'rgba(102, 102, 102,0.5)'
+ },
+ },
+ z: 1,
}
],
grid: {
top: '2%',
- left: '70',
- right: '-10',
- bottom: '2%'
+ left: '2%',
+ right: '-1%',
+ bottom: '2%',
+ containLabel: true
},
}
},
- houseTabClick (type) {
+ houseTabClick(type) {
this.tabTypeTwo = type
let xDate, y1Date, y2Date
@@ -403,17 +487,28 @@
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]))
+ landMyChart.setOption(this.initLandOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]))
},
- initLandOptions (xDate, yDate) {
+ initLandOptions(xDate, yDate) {
return {
+ grid: {
+ top: '4%',
+ left: '12%',
+ right: '4%',
+ bottom: '18%'
+ },
tooltip: {
trigger: 'item',
- formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}个</strong>'
+ formatter: params => {
+ return `${params.marker} ${params.name}: ${params.value} 个`
+ },
+ textStyle: {
+ fontSize: fontSize(14)
+ }
},
xAxis: {
type: 'category',
@@ -422,6 +517,7 @@
axisLabel: {
color: "#fff",
interval: 0,
+ fontSize: fontSize(14)
},
axisLine: {
lineStyle: {
@@ -435,41 +531,71 @@
show: false
},
axisLabel: {
- color: "#fff"
+ color: "#fff",
+ fontSize: fontSize(14)
}
},
series: [
{
data: yDate,
type: 'bar',
+ barWidth: '24%',
+ itemStyle: {
+ normal: {
+ barBorderRadius: [30, 30, 0, 0],
+ color: function (params) {
+ var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
+ return myLandColors[params.dataIndex % num]
+ },
+ }
+ },
}
],
- grid: {
- x: 40,
- y: 10,
- x2: 20,
- y2: 20
- },
+ // zoomData: [ // 有滚动条 平移
+ dataZoom: [ // 有滚动条 平移
+ {
+ type: 'slider',
+ show: true,
+ realtime: true,
+ start: 0,
+ end: 40, // 初始展示40%
+ height: 4,
+ backgroundColor: 'rgba(47,69,84,0.2)',
+ fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
+ borderColor: "rgba(17, 100, 210, 0.12)",
+ handleSize: 0, // 两边手柄尺寸
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ top: '96%',
+ },
+ {
+ type: "inside", // 支持内部鼠标滚动平移
+ start: 0,
+ end: 40,
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
+ moveOnMouseWheel: true, // 开启滚轮平移
+ moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
+ }
+ ]
}
},
- landTabClick (type) {
+ landTabClick(type) {
this.tabTypeThree = type
let xDate, yDate
if (type == 0) {
- xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
yDate = [6414, 2211, 4321, 1232, 881]
} else if (type == 1) {
- xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
yDate = [881, 2211, 6414, 4321, 1232]
}
- landMyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ landMyChart.setOption(this.initLandOptions(xDate, yDate), true)
},
- peopleTabClick (type) {
- this.peopletype = type
+ peopleTabClick(type) {
+ // this.peopletype = type
homePersonmyChart.dispose()
this.$nextTick(() => {
if (type == 0) {
@@ -485,31 +611,31 @@
})
},
- clickPeopleChart () {
+ clickPeopleChart() {
homePersonmyChart.on('click', params => {
let xDate, yDate, colors
this.dataDeep = 2
- if (params.name == '车站派出所') {
+ if (params.name == '车站所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [88, 221, 641, 432, 123]
colors = ['#ccf9d0', '#f9d888', '#f7857e']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '沙溪派出所') {
+ } else if (params.name == '沙溪所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [641, 423, 221, 123, 88]
colors = ['#102129', '#1f3942', '#2a4f5f']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '灵溪派出所') {
+ } else if (params.name == '灵溪所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [111, 531, 211, 431, 64]
colors = ['#23b9e9', '#c76ee0', '#f05265']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '北门派出所') {
+ } else if (params.name == '北门所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [887, 234, 452, 321, 154]
colors = ['#b22d2b', '#614976', '#4c3042']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '江光派出所') {
+ } else if (params.name == '江光所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [400, 500, 200, 450, 245]
colors = ['#3089bf', '#77d8f9', '#f4fcfe']
@@ -570,7 +696,7 @@
})
},
- clickLandChart () {
+ clickLandChart() {
landMyChart.on('click', params => {
this.landVisible = true
this.landTitle = params.name
@@ -582,7 +708,7 @@
})
},
- clickkeyPersonChart () {
+ clickkeyPersonChart() {
keyPersonmyChart.on('click', params => {
let keyPersonDetailNewArr = []
this.keyPersonSelectArr.some((item) => {
@@ -594,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',
@@ -617,8 +743,8 @@
}
},
legend: {
- left: '48%',
- y: '10%',
+ left: '45%',
+ y: '1%',
itemGap: 20,
textStyle: {
color: '#fff'
@@ -639,8 +765,8 @@
{
name: '',
type: 'pie',
- radius: ['40%', '70%'],
- center: ['24%', '57%'],
+ radius: ['30%', '60%'],
+ center: ['22%', '55%'],
avoidLabelOverlap: false,
label: {
show: false,
@@ -661,34 +787,34 @@
}
},
- selectPoliceChangeData (name) {
+ selectPoliceChangeData(name) {
if (this.peopletype == 0 && this.tabType == 0) {
let xDate, yDate, colors
- if (name == '车站派出所') {
+ if (name == '车站所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [88, 221, 641, 432, 123]
colors = ['#0f97f2', '#7d629d', '#e1344f']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (name == '沙溪派出所') {
+ } else if (name == '沙溪所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [641, 423, 221, 123, 88]
colors = ['#584d7b', '#9b836a', '#f8ce52']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (name == '灵溪派出所') {
+ } else if (name == '灵溪所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [111, 531, 211, 431, 64]
colors = ['#7d65c0', '#a47db4', '#e0a8c5']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (name == '北门派出所') {
+ } else if (name == '北门所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [887, 234, 452, 321, 154]
colors = ['#6e978f', '#ad885a', '#e97b27']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (name == '江光派出所') {
+ } else if (name == '江光所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [400, 500, 200, 450, 245]
@@ -696,7 +822,7 @@
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (name == '全部') {
this.dataDeep = 1
- xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
yDate = [881, 2211, 6414, 4321, 1232]
colors = ['#f750c2', '#d6369a', '#bc1f76']
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
@@ -719,26 +845,26 @@
},
- backBegin () {
+ backBegin() {
this.dataDeep = 1
let xDate, yDate, colors
if (this.tabType == 0) {
- xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
yDate = [881, 2211, 6414, 4321, 1232]
- colors = ['#2c9b00', '#fdef00', '#fd3200']
+ colors = ['#06B5D7', '#44C0C1', '#71C8B1']
} else if (this.tabType == 1) {
xDate = ['湖北', '上海', '北京', '广东', '浙江']
yDate = [6414, 4231, 2211, 1231, 881]
- colors = ['#63b783', '#9b83d7', '#6430c4']
+ colors = ['#ef9faa', '#f7bfc6', '#fedade']
} else if (this.tabType == 2) {
xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
yDate = [881, 1231, 2211, 4321, 6414]
- colors = ['#085fa9', '#83aec6', '#dfe9dc']
+ colors = ['#7d65c0', '#a47db4', '#e0a8c5']
}
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 == '涉恐人员') {
@@ -769,7 +895,7 @@
return KeyPersonDataArr
},
- selectAreaChangeData (name) {
+ selectAreaChangeData(name) {
if (this.peopletype == 1) {
if (this.peopletype == 1 && name != '全部') {
let arr = []
@@ -793,7 +919,7 @@
},
- destroyed () {
+ destroyed() {
window.removeEventListener("resize", this.echartsResize)
if (homePersonmyChart) {
@@ -818,27 +944,12 @@
<style scoped lang="scss">
.container {
+ display: flex;
position: relative;
width: 100%;
height: 100%;
.person-box {
- height: 300px;
-
- .peopleTap {
- color: rgb(98, 95, 95);
- cursor: pointer;
- }
-
- .choosed {
- color: #fff;
- }
-
- .peopleNum {
- color: rgb(98, 95, 95);
- font-size: 14px;
- }
-
.word {
color: #fff;
font-size: 14px;
@@ -851,8 +962,8 @@
.back {
color: #fff;
position: absolute;
- top: 104px;
- left: 374px;
+ top: 120px;
+ right: 16px;
width: 20px;
height: 20px;
font-size: 20px;
@@ -869,41 +980,67 @@
}
}
- .land-box {
- height: 300px;
- }
-
.person-box,
.house-box,
.land-box {
margin: 8px;
+ flex: 1;
display: flex;
flex-direction: column;
- background: $bg-color;
+ // background: $bg-color;
- .title::after {
- content: '';
+ background-image: url(/img/box/box-bg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+
+
+ .box {
+ display: flex;
position: absolute;
- top: 15px;
+ flex-direction: column;
+ top: 0;
left: 0;
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background: #43bafe;
- box-shadow: 0px 0px 8px 2px #43bafe;
- margin-left: 8px;
+ width: 100%;
+ height: 100%;
+ z-index: 11;
}
.title {
- padding: 0 18px 0 25px;
+ padding: 0 18px 0 18px;
position: relative;
text-align: left;
- height: 40px;
- line-height: 40px;
+ height: 54px;
+ line-height: 54px;
font-size: 16px;
display: flex;
justify-content: space-between;
- background-image: linear-gradient(to right, #2e4aba, #010d3e);
+ font-weight: bold;
+ font-style: oblique;
+ letter-spacing: 2px;
+ color: #fff;
+
+ .title-tab {
+ span {
+ color: #99cccc;
+ cursor: pointer;
+ }
+
+ span.choosed {
+ color: #fff;
+ }
+ }
+
+ .title-num {
+ color: #fff;
+
+ span {
+ color: #99cccc;
+ }
+
+ span.choosed {
+ color: #fff;
+ }
+ }
.choosed {
color: #fff;
@@ -923,40 +1060,80 @@
.sub-tab {
padding: 10px;
display: flex;
+ color: #99cccc;
- .tab {
+ .tab,
+ .tab3 {
margin: 0 10px;
flex: 1;
- background: rgba(29, 38, 105, 1);
- border: 1px solid rgba(20, 50, 123, 1);
+ background: $sub-tab-bg-color;
+ border-radius: 8px;
cursor: pointer;
+ height: 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
&>div {
- height: 26px;
- line-height: 26px;
+ height: 22px;
+ line-height: 22px;
}
}
- .tab.on {
- border: 1px solid rgb(3, 108, 255);
+ .tab {
+ display: flex;
+ justify-content: space-around;
}
}
.echarts-box {
- padding: 10px;
+ padding: 12px;
+ padding-top: 0;
flex: 1;
width: 100%;
}
}
.house-box {
- flex: 1;
margin-top: 0;
margin-bottom: 0;
+
+ .title {
+ height: 54px;
+ line-height: 54px;
+ }
}
:deep(.el-table__body-wrapper) {
overflow-x: hidden !important;
}
}
+
+.border-svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+.mypath {
+ stroke: rgba(33, 150, 243, 1);
+ stroke-width: 2;
+ stroke-dasharray: 888;
+ // stroke-dashoffset: 888;
+ fill: none;
+ animation: go 6s linear infinite forwards;
+}
+
+@keyframes go {
+ 0% {
+ stroke-dashoffset: 0;
+ }
+
+ 100% {
+ stroke-dashoffset: 888;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3