forked from srs-police-affairs
src/views/home/components/leftContainer.vue
@@ -6,61 +6,58 @@ <div class="title-tab"> <span :class="{ choosed: peopletype == 0 }">现有人员</span> </div> <!-- <div class="title-num"> 共 <span :class="{ choosed: peopletype == 0 }">100</span>人 <span :class="{ choosed: peopletype == 1 }">1</span>人 </div>--> </div> <div class="sub-tab" v-show="peopletype == 0"> <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> <div class="tab-title-small">户籍人口:</div> <div class="tab-title-small"> {{ personAll.total ? personAll.total : 0 }}人 <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> <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"> {{ personAll.total ? personAll.total : 0 }}人 </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"> {{ personAll.emphasisNum ? personAll.emphasisNum : 0 }}人 </div> </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"> {{ personAll.emphasisNum ? personAll.emphasisNum : 0 }}人 </div> <div id="PersonEcharts" class="echarts-box"> </div> <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)"> <div class="num">91995人</div> <div class="type">境外人口</div> </div>--> </el-main> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin"> </div> <div id="PersonEcharts" class="echarts-box"></div> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin"></div> </div> <svg class="border-svg"> <defs> <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5 c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" /> <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%"> c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" /> <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fff" stop-opacity="1" /> <stop offset="100%" stop-color="#fff" stop-opacity="0" /> </radialGradient> <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c"> <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"> <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" 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" /> </circle> </mask> @@ -76,17 +73,20 @@ <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">{{ realHouseNum?realHouseNum: 0 }}栋</div> <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> <div class="tab-title-small">实有楼栋:</div> <div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)"> <div class="tab-title-small">关注场所:</div> <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div> </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">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div> </div> </div> <div id="houseEcharts" class="echarts-box"></div> <div id="houseEcharts" class="echarts-box"></div> </el-main> </div> <svg class="border-svg"> @@ -99,25 +99,27 @@ </div> <div class="land-box" style="position: relative;"> <div class="box"> <div class="title">现有地</div> <div class="sub-tab" v-show="isAllPoliceStation"> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div> <div class="title">现有小区</div> <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> <div class="sub-tab" v-show="isAllPoliceStation"> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)"> <div class="tab-title-small">责任区:</div> <div class="tab-title-small">{{ areaNum ? areaNum : 0 }}个</div> </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">{{ areaNum?areaNum: 0 }}个</div> <div class="sub-tab" v-show="!isAllPoliceStation"> <div class="tab1 select-on-tab"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div> </div> </div> </div> <div class="sub-tab" v-show="!isAllPoliceStation"> <div class="tab1 select-on-tab"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div> </div> </div> <div id="landEcharts" class="echarts-box"></div> <div id="landEcharts" class="echarts-box"></div> </el-main> </div> <svg class="border-svg"> @@ -134,14 +136,17 @@ <script> import { fontSize } from '@/utils/fontSize.js' import { getAreaStatisticInfo } from "@/api/home/index.js" import { schoolJSON } from '../homeleft/school' import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept" let homePersonmyChart = null let keyPersonmyChart = null let houseMyChart let landMyChart let timer let leftTiming = null let keyPeopleDataLength = 0 let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62'] @@ -153,107 +158,16 @@ data () { return { tabType: 0, personEchartsLoading: false, houseEchartsLoading: false, landEchartsLoading: false, peopletype: 0, tabTypeTwo: 0, tabTypeThree: 0, peopleArr: [ { 'name': '黄XX', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' }, { 'name': '李某某', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' }, { 'name': '刘AA', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' }, { 'name': '张三', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' } ], peopleTitle: '', peopleVisible: false, 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': '重点上访人员' } ], 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': '重点上访人员' } ], keyPersonSelectSaveArr: [], areaNum: '', villageNum: '', @@ -266,7 +180,8 @@ keyPlaceNum: '', personAll: '', // 记录当前选中派出所的ID policeStaionID: '' policeStaionID: '', peopleLoading: false, } }, @@ -278,6 +193,7 @@ this.getHomeAllData() if (this.userInfo.dept_id != '1123598813738675201') { // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442); this.showBack = false this.isAllPoliceStation = false } @@ -286,7 +202,80 @@ window.addEventListener("resize", this.echartsResize) }) }, methods: { // 设备饼图轮播 keyPeopleEchartsCarousel () { let curIndex = 0 if (timer) { clearInterval(timer) } timer = setInterval(() => { keyPersonmyChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: curIndex, }) curIndex = (curIndex + 1) % keyPeopleDataLength keyPersonmyChart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: curIndex, }) keyPersonmyChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: curIndex, }) }, 1000) keyPersonmyChart.on("mouseover", function (param) { clearInterval(timer) keyPersonmyChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: curIndex, }) keyPersonmyChart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: param.dataIndex, }) keyPersonmyChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: curIndex, }) curIndex = param.dataIndex }) keyPersonmyChart.on("mouseout", function (param) { curIndex = param.dataIndex if (timer) { clearInterval(timer) } timer = setInterval(() => { keyPersonmyChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: curIndex, }) curIndex = (curIndex + 1) % keyPeopleDataLength keyPersonmyChart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: curIndex, }) keyPersonmyChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: curIndex, }) }, 1000) }) }, /** * @description: 获取首页的所有数据 * @return {*} @@ -332,20 +321,24 @@ personTabClick (type) { this.tabType = type this.dataDeep = 1 this.personEchartsLoading = true this.disposeEchart() if (type == 0) { if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') { this.getPoliceStationInfo() } else { this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id) } } else if (type == 1) { this.initkeyPersonEcharts() this.initkeyPersonEcharts() } }, @@ -359,14 +352,21 @@ this.disposeEchart() this.personAll = res.data.data this.policeStationPersonInfo = res.data.data //异步，因此放进接口方法内部 this.initPersonEcharts() this.clickPeopleChart() setTimeout(() => { this.personEchartsLoading = false }, 500) } }).catch(res => { setTimeout(() => { this.personEchartsLoading = false }, 500) }) }, /** * @description: 获取派出所户籍人口数据 @@ -378,10 +378,14 @@ getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => { if (res.data.code == 200) { this.disposeEchart() var chartDom = document.getElementById('PersonEcharts') homePersonmyChart = this.$echarts.init(chartDom) this.personAll = res.data.data if (this.userInfo.dept_id == '1596020515064381442') { this.personAll.emphasisNum = 20 } this.villagePersonStatisticInfoList = res.data.data var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e'] @@ -399,7 +403,17 @@ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) this.clickPeopleChart() setTimeout(() => { this.dataDeep = 2, this.personEchartsLoading = false }, 1000) } }).catch(res => { setTimeout(() => { this.personEchartsLoading = false }, 500) }) }, @@ -442,13 +456,13 @@ if (xDate.length == 0) { options = { title: { text: '暂无数据', text: '暂无数据1', x: 'center', y: 'center', textStyle: { color: "#fff", fontSize: fontSize(14), color: '#fff', fontWeight: 'normal', fontSize: fontSize(14) } } } @@ -461,7 +475,7 @@ borderColor: 'rgba(8, 56, 185, 0.9)', textStyle: { color: '#fff', fontSize: fontSize(14) fontSize: fontSize(12) } }, xAxis: { @@ -472,7 +486,7 @@ color: "#fff", interval: 0, rotate: 45, fontSize: fontSize(12) fontSize: fontSize(10) }, axisLine: { lineStyle: { @@ -488,7 +502,7 @@ }, axisLabel: { color: "#fff", fontSize: fontSize(14) fontSize: fontSize(12) } }, series: [ @@ -532,7 +546,7 @@ top: '4%', left: '2%', right: '2%', bottom: '4%', bottom: '1%', containLabel: true }, } @@ -549,21 +563,7 @@ backBegin () { this.dataDeep = 1 this.initPersonEcharts() // let xDate, yDate, colors // if (this.tabType == 0) { // xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'] // yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232] // colors = ['#06B5D7', '#44C0C1', '#71C8B1'] // } else if (this.tabType == 1) { // xDate = ['湖北', '上海', '北京', '广东', '浙江'] // yDate = [6414, 4231, 2211, 1231, 881] // colors = ['#ef9faa', '#f7bfc6', '#fedade'] // } else if (this.tabType == 2) { // xDate = ['日本', '美国', '俄罗斯', '英国', '印度'] // yDate = [881, 1231, 2211, 4321, 6414] // colors = ['#7d65c0', '#a47db4', '#e0a8c5'] // } // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) this.$parent.getAllPoliceStationCenter() }, /** @@ -587,8 +587,30 @@ xDate.push(item.name) yDate.push(item.num) }) if (this.userInfo.dept_id == '1596020515064381442') { this.keyPlaceNum = 28 this.realHouseNum = 205 if (isFollow == 2) { xDate = ['学校', '医院', '党政机关', '宾馆酒店', '零售业', '数字经济', '批发业', '装修及建筑业', '租赁业', '房地产业', '商务服务业', '餐饮业'] yDate = [36, 1, 3, 34, 16, 25, 30, 33, 2, 7, 6, 2] this.inithouseEcharts(xDate, yDate) } else { xDate = ['反恐重点目标', '危爆品单位'] yDate = [14, 14] this.inithouseEcharts(xDate, yDate) } this.inithouseEcharts(xDate, yDate) this.clickHouseChart() } else { this.inithouseEcharts(xDate, yDate) } setTimeout(() => { this.houseEchartsLoading = false }, 500) }).catch(res => { setTimeout(() => { this.houseEchartsLoading = false }, 500) }) }, @@ -599,6 +621,7 @@ }, initHouseOptions (xDate, y1Date, y2Date) { const that = this return { tooltip: { trigger: 'item', @@ -617,7 +640,7 @@ borderColor: 'rgba(8, 56, 185, 0.9)', textStyle: { color: '#fff', fontSize: fontSize(14) fontSize: fontSize(12) } }, color: myColor, @@ -654,16 +677,26 @@ { data: y1Date, type: 'bar', barWidth: '24%', // barWidth: '10%', barCategoryGap: '80%', zlevel: 2, cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer', itemStyle: { normal: { barBorderRadius: [0, 30, 30, 0], // barBorderRadius: [0, 30, 30, 0], // color: function (params) { // var num = myColor.length // return myColor[params.dataIndex % num] // }, color: '#ed7c2f' // var num = myColor.length // return myColor[params.dataIndex % num] // }, color: '#ed7c2f', label: { show: true, //开启显示 position: 'right', //在上方显示 textStyle: { //数值样式 color: '#ed7c2f', fontSize: 10 } } } }, }, @@ -684,15 +717,49 @@ grid: { top: '2%', left: '2%', right: '-1%', // right: '-1%', right: '10%', bottom: '2%', containLabel: true }, // dataZoom: [ // { // type: "inside", // startValue: 0, // endValue: 8, // minValueSpan: 2, // maxValueSpan: 2, // yAxisIndex: [0], // zoomOnMouseWheel: false, // 关闭滚轮缩放 // moveOnMouseWheel: true, // 开启滚轮平移 // moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 // }, // { // type: 'slider', // realtime: true, // startValue: 0, // endValue: 8, // width: '3.5', // height: '80%', // yAxisIndex: [0], // 控制y轴滚动 // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色 // borderColor: "rgba(17, 100, 210, 0.12)", // backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色 // handleSize: 0, // 两边手柄尺寸 // showDataShadow: false,//是否显示数据阴影 默认auto // showDetail: false, // 拖拽时是否展示滚动条两侧的文字 // top: '1%', // right: '5', // } // ] } }, houseTabClick (type) { this.tabTypeTwo = type this.houseEchartsLoading = true this.disposeHouseEchart() if (type == 0) { @@ -704,6 +771,7 @@ initLandOptions (xDate, yDate) { return { color: ['#0532ff'], grid: { top: '4%', left: '12%', @@ -719,18 +787,17 @@ borderColor: 'rgba(8, 56, 185, 0.9)', textStyle: { color: '#fff', fontSize: fontSize(14) fontSize: fontSize(12) } }, xAxis: { type: 'category', data: xDate, axisLabel: { color: "#fff", interval: 0, rotate: 45, fontSize: fontSize(12) fontSize: fontSize(10) }, axisLine: { lineStyle: { @@ -746,7 +813,7 @@ }, axisLabel: { color: "#fff", fontSize: fontSize(14) fontSize: fontSize(12) } }, series: [ @@ -795,11 +862,31 @@ clickPeopleChart () { homePersonmyChart.on('click', params => { this.dataDeep = 2 if (params.data.type == 'policeStation') { const center = this.$parent.getPoliceStationCenter(params.data.id) this.$EventBus.$emit('toPosition', { layerName: 'carLayers', siteJd: center[0], siteWd: center[1] }) this.personEchartsLoading = true this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id) } else { this.$emit('showpeopledetail', params.data.id, params.data.name) } }) }, clickHouseChart () { houseMyChart.on('click', params => { if (params.name == '学校') { this.$parent.xxPopupShow = true this.$parent.houseArr = [] this.$parent.houseLoading = true setTimeout(() => { this.$parent.houseLoading = false this.$parent.houseArr = schoolJSON }, 1000) } }) }, @@ -815,11 +902,31 @@ keyPersonmyChart = this.$echarts.init(chartDom) let personInfo = await this.getPersonInfo() keyPeopleDataLength = personInfo.length if (this.userInfo.dept_id == '1596020515064381442') { personInfo = [ { count: 11, name: '征地拆迁群体', value: 11 }, { count: 3, name: '非涉法涉诉重点个访人员', value: 3 }, { count: 4, name: '涉法涉诉重点个访人员', value: 4 }, { count: 1, name: '楼盘业主维权群体', value: 1 }, { count: 1, name: '欠薪讨债群体', value: 1 }] } keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo)) this.clickkeyPersonChart() if (personInfo.length > 1) { this.keyPeopleEchartsCarousel() } else { clearInterval(timer) keyPersonmyChart.off("mouseover") keyPersonmyChart.off("mouseout") } setTimeout(() => { this.personEchartsLoading = false }, 500) }, /** * @description: 调用接口获取重点人员数据 * @return {*} @@ -849,16 +956,17 @@ */ initkeyPersonOption (dataArr) { let options if (dataArr.length == 0) { options = { title: { text: '暂无数据', text: '暂无重点人员数据', x: 'center', y: 'center', textStyle: { color: "#fff", fontSize: fontSize(14), color: '#fff', fontWeight: 'normal', fontSize: fontSize(14) } } } @@ -873,10 +981,15 @@ } else { msg = params.value + '人' } msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>` msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>` return msg } }, backgroundColor: "rgba(8, 56, 185, 0.9)", borderColor: "rgba(8, 56, 185, 0.9)", textStyle: { fontSize: fontSize(12) }, confine: true }, legend: { type: 'scroll', @@ -884,7 +997,7 @@ top: 'middle', left: '45%', y: '1%', itemGap: 20, itemGap: 15, textStyle: { color: '#fff' }, @@ -897,7 +1010,7 @@ } } let v = tarValue return `${name} ${v} 人 ` return `${name} ${v} 人 ` }, }, series: [ @@ -940,12 +1053,13 @@ }, /** * @description: 现有地切换 * @description: 现有小区切换 * @param {*} type * @return {*} */ landTabClick (type) { this.tabTypeThree = type this.landEchartsLoading = true this.disposeLandEchart() if (type == 0) { @@ -956,7 +1070,7 @@ }, /** * @description: 获取现有地数据 * @description: 获取现有小区数据 * @param {*} type * @param {*} deptId * @return {*} @@ -972,7 +1086,7 @@ let nameArr = [] let countArr = [] res.data.data.data.forEach(item => { nameArr.push(item.name.replace('派出', '')) nameArr.push(item.name.replace('派出', '').replace('居民委员会', '')) countArr.push({ value: item.count, id: item.id }) }) landData = [nameArr, countArr] @@ -987,17 +1101,25 @@ }) landData = [nameArr, countArr] } setTimeout(() => { this.landEchartsLoading = false }, 500) this.initLandEcharts(landData) }).catch(res => { setTimeout(() => { this.landEchartsLoading = false }, 500) }) }, /** * @description: 现有地图表渲染 * @description: 现有小区图表渲染 * @param {*} landData * @return {*} */ initLandEcharts (landData) { this.disposeLandEchart() var chartDom = document.getElementById('landEcharts') landMyChart = this.$echarts.init(chartDom) @@ -1008,11 +1130,12 @@ }, /** * @description: 现有地图表点击事件 * @description: 现有小区图表点击事件 * @return {*} */ clickLandChart () { landMyChart.on('click', params => { console.log('clickLandChart') if (this.tabTypeThree == 0) { this.$emit('showlanddetail', params.name, 2, params.data.id) } else { @@ -1068,7 +1191,9 @@ landMyChart.dispose() landMyChart.off('click') } } }, }, destroyed () { @@ -1194,11 +1319,11 @@ } } .sub-title { display: flex; justify-content: space-between; height: 36px; } // .sub-title { // display: flex; // justify-content: space-between; // height: 36px; // } .sub-tab { padding: 10px; @@ -1244,11 +1369,16 @@ } } :deep(.el-main) { padding: 0; } .echarts-box { padding: 12px; padding-top: 0; flex: 1; width: 100%; // height: 100%; } }
