forked from srs-police-affairs
src/views/home/components/leftContainer.vue
@@ -6,36 +6,32 @@ <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>--> </div> <div id="PersonEcharts" class="echarts-box"> </div> </el-main> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin"> </div> @@ -45,10 +41,10 @@ <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" 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" /> @@ -58,10 +54,10 @@ <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> @@ -77,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"> @@ -101,24 +100,26 @@ <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> <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"> @@ -142,8 +143,10 @@ 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'] @@ -155,6 +158,9 @@ data () { return { tabType: 0, personEchartsLoading: false, houseEchartsLoading: false, landEchartsLoading: false, peopletype: 0, tabTypeTwo: 0, tabTypeThree: 0, @@ -198,6 +204,78 @@ }, 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 {*} @@ -243,6 +321,7 @@ personTabClick (type) { this.tabType = type this.dataDeep = 1 this.personEchartsLoading = true this.disposeEchart() @@ -252,18 +331,15 @@ this.getPoliceStationInfo() } else { this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id) } } else if (type == 1) { this.initkeyPersonEcharts() } }, /** @@ -277,15 +353,18 @@ this.personAll = res.data.data if (this.userInfo.dept_id == '1596020515064381442') { this.personAll.emphasisNum = 17 } this.policeStationPersonInfo = res.data.data //异步，因此放进接口方法内部 this.initPersonEcharts() this.clickPeopleChart() setTimeout(() => { this.personEchartsLoading = false }, 500) } }).catch(res => { setTimeout(() => { this.personEchartsLoading = false }, 500) }) }, @@ -302,6 +381,12 @@ 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'] @@ -316,22 +401,19 @@ }) } homePersonmyChart.showLoading({ text: '拼命加载中', color: '#c23531', textColor: '#FFF', maskColor: 'rgba(0, 0, 0, 0.2)', zlevel: 0, }) setTimeout(() => { homePersonmyChart.hideLoading() homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) }, 500) homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) this.clickPeopleChart() setTimeout(() => { this.dataDeep = 2 }, 1000) setTimeout(() => { this.dataDeep = 2, this.personEchartsLoading = false }, 1000) } }).catch(res => { setTimeout(() => { this.personEchartsLoading = false }, 500) }) }, @@ -358,17 +440,7 @@ }) } homePersonmyChart.showLoading({ text: '拼命加载中', color: '#c23531', textColor: '#FFF', maskColor: 'rgba(0, 0, 0, 0.2)', zlevel: 0, }) setTimeout(() => { homePersonmyChart.hideLoading() homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1'])) }, 500) homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1'])) }, /** @@ -384,7 +456,7 @@ if (xDate.length == 0) { options = { title: { text: '暂无数据', text: '暂无数据1', x: 'center', y: 'center', textStyle: { @@ -527,30 +599,29 @@ yDate = [14, 14] this.inithouseEcharts(xDate, yDate) } this.clickHouseChart() } else { this.inithouseEcharts(xDate, yDate) } this.clickHouseChart() setTimeout(() => { this.houseEchartsLoading = false }, 500) }).catch(res => { setTimeout(() => { this.houseEchartsLoading = false }, 500) }) }, inithouseEcharts (xDate, yDate) { var chartDom = document.getElementById('houseEcharts') houseMyChart = this.$echarts.init(chartDom) houseMyChart.showLoading({ text: '拼命加载中', color: '#c23531', textColor: '#FFF', maskColor: 'rgba(0, 0, 0, 0.2)', zlevel: 0, }) setTimeout(() => { houseMyChart.hideLoading() houseMyChart.setOption(this.initHouseOptions(xDate, yDate)) }, 500) houseMyChart.setOption(this.initHouseOptions(xDate, yDate)) }, initHouseOptions (xDate, y1Date, y2Date) { const that = this return { tooltip: { trigger: 'item', @@ -609,7 +680,7 @@ // barWidth: '10%', barCategoryGap: '80%', zlevel: 2, cursor: this.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer', cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer', itemStyle: { normal: { // barBorderRadius: [0, 30, 30, 0], @@ -687,6 +758,8 @@ houseTabClick (type) { this.tabTypeTwo = type this.houseEchartsLoading = true this.disposeHouseEchart() if (type == 0) { @@ -796,6 +869,7 @@ siteJd: center[0], siteWd: center[1] }) this.personEchartsLoading = true this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id) } else { this.$emit('showpeopledetail', params.data.id, params.data.name) @@ -805,7 +879,6 @@ clickHouseChart () { houseMyChart.on('click', params => { console.log('clickHouseChart', params) if (params.name == '学校') { this.$parent.xxPopupShow = true this.$parent.houseArr = [] @@ -829,25 +902,29 @@ keyPersonmyChart = this.$echarts.init(chartDom) let personInfo = await this.getPersonInfo() keyPeopleDataLength = personInfo.length if (this.userInfo.dept_id == '1596020515064381442') { personInfo = [{ count: 8, name: '征地拆迁群体', value: 8 }, { count: 4, name: '非涉法涉诉重点个访人员', value: 4 }, { count: 4, name: '涉法涉诉重点个访人员', value: 4 }, { count: 1, name: '楼盘业主维权群体', value: 1 }] 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.showLoading({ text: '拼命加载中', color: '#c23531', textColor: '#FFF', maskColor: 'rgba(0, 0, 0, 0.2)', zlevel: 0, }) setTimeout(() => { keyPersonmyChart.hideLoading() keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo)) }, 500) 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) }, /** @@ -883,7 +960,7 @@ if (dataArr.length == 0) { options = { title: { text: '暂无数据', text: '暂无重点人员数据', x: 'center', y: 'center', textStyle: { @@ -904,12 +981,12 @@ } else { msg = params.value + '人' } msg = `<div style="color: #000;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>` 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: { color: '#fff', fontSize: fontSize(12) }, confine: true @@ -920,7 +997,7 @@ top: 'middle', left: '45%', y: '1%', itemGap: 20, itemGap: 15, textStyle: { color: '#fff' }, @@ -933,7 +1010,7 @@ } } let v = tarValue return `${name} ${v} 人 ` return `${name} ${v} 人 ` }, }, series: [ @@ -982,6 +1059,7 @@ */ landTabClick (type) { this.tabTypeThree = type this.landEchartsLoading = true this.disposeLandEchart() if (type == 0) { @@ -1023,8 +1101,15 @@ }) landData = [nameArr, countArr] } setTimeout(() => { this.landEchartsLoading = false }, 500) this.initLandEcharts(landData) }).catch(res => { setTimeout(() => { this.landEchartsLoading = false }, 500) }) }, @@ -1039,17 +1124,7 @@ landMyChart = this.$echarts.init(chartDom) landMyChart.showLoading({ text: '拼命加载中', color: '#c23531', textColor: '#FFF', maskColor: 'rgba(0, 0, 0, 0.2)', zlevel: 0, }) setTimeout(() => { landMyChart.hideLoading() landMyChart.setOption(this.initLandOptions(landData[0], landData[1])) }, 500) landMyChart.setOption(this.initLandOptions(landData[0], landData[1])) this.clickLandChart() }, @@ -1244,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; @@ -1294,11 +1369,16 @@ } } :deep(.el-main) { padding: 0; } .echarts-box { padding: 12px; padding-top: 0; flex: 1; width: 100%; // height: 100%; } }
