forked from srs-police-affairs
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>
