From 47f59dd6d2e98ef7c8eddf432a23f1bcfa4fefce Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 18 Dec 2024 18:20:57 +0800
Subject: [PATCH] 首页左侧文字调整
---
src/views/home/components/leftContainer.vue | 3789 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 1,893 insertions(+), 1,896 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 7a8cbd1..fc3e239 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -1,148 +1,144 @@
<template>
- <div class="container">
- <div class="person-box" style="position: relative;">
- <div class="box">
- <div class="title">
- <div class="title-tab">
- <span :class="{ choosed: peopletype == 0 }">现有人员</span>
- </div>
- </div>
- <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
- style="height: calc(100% - 17.6%);">
- <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="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
- <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
- </div>
- </el-main>
-
- <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
- </div>
+ <div class="container">
+ <div class="person-box" style="position: relative;">
+ <div class="box">
+ <div class="title">
+ <div class="title-tab">
+ <span :class="{ choosed: peopletype == 0 }">现有人员</span>
+ </div>
+ </div>
+ <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
+ <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>
- <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
+ <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
+ <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
+ </div>
+ </el-main>
+
+ <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%">
- <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)">
- <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
+ <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)">
+ <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" />
- </circle>
- </mask>
- </defs>
+ rotate="auto" repeatCount="indefinite" />
+ </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" />
- </use>
- </svg>
- </div>
- <div class="house-box" style="position: relative;">
- <div class="box">
- <div class="title">九小场所</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">{{ placeNum }}</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">{{ dangerNum }}</div>
- </div>
- </div>
- <div id="houseEcharts" class="echarts-box"></div>
- </el-main>
- </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" />
- </use>
- </svg>
- </div>
- <div class="land-box" style="position: relative;">
- <div class="box">
- <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="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>
- </el-main>
- </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" />
- </use>
- </svg>
- </div>
+ <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" />
+ </use>
+ </svg>
</div>
+ <div class="house-box" style="position: relative;">
+ <div class="box">
+ <div class="title">重点场所</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">{{ placeNum }}</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">{{ dangerNum }}</div>
+ </div>
+ </div>
+ <div id="houseEcharts" class="echarts-box"></div>
+ </el-main>
+ </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" />
+ </use>
+ </svg>
+ </div>
+ <div class="land-box" style="position: relative;">
+ <div class="box">
+ <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="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>
+ </el-main>
+ </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" />
+ </use>
+ </svg>
+ </div>
+ </div>
</template>
<script>
import { fontSize } from '@/utils/fontSize.js'
import {
- getAreaStatisticInfo,
- getVillageStatisticData,
- getVillageStatisticDetail,
- getPlaceOfConcernStatisticData,
- getPlaceOfConcernStatisticDetail,
- getVillageDetailAndPlaceStatisticNumber,
- getNineStatistics
+ getAreaStatisticInfo,
+ getVillageStatisticData,
+ getVillageStatisticDetail,
+ getPlaceOfConcernStatisticData,
+ getPlaceOfConcernStatisticDetail,
+ getVillageDetailAndPlaceStatisticNumber,
+ getNineStatistics
} from "@/api/home/index.js"
import { schoolJSON } from '../homeleft/school'
import { hospitalJSON } from '../homeleft/hospital'
@@ -176,1829 +172,1830 @@
const peopleColor2 = '#f26390'
export default {
- inject: ['userInfo'],
+ inject: ['userInfo'],
- data () {
- return {
- placeNum: 0,
- dangerNum: 0,
- tabType: 0,
- personEchartsLoading: false,
- houseEchartsLoading: false,
- landEchartsLoading: false,
- peopletype: 0,
- tabTypeTwo: 0,
- tabTypeThree: 0,
- peopleTitle: '',
- peopleVisible: false,
- dataDeep: 1,
- keyPersonOption: {},
- keyPersonSelectSaveArr: [],
- areaNum: '',
- villageNum: '',
- policeVillageNum: '',
- policeStationPersonInfo: {},
- villagePersonStatisticInfoList: [],
- showBack: true,
- isAllPoliceStation: true,
- realHouseNum: '',
- keyPlaceNum: '',
- personAll: '',
- // 记录当前选中派出所的ID
- policeStaionID: '',
- peopleLoading: false,
- personEchartsHeight: '100%',
- syldBigType: '',
- syldName: '',
- gzcsType: '',
- gzcsUnitName: '',
- gzcsPerson: '',
- gzcsPhone: '',
- isFirstMounted: true,
- clickPoliceStationId: '',
- areaId:null,
- }
+ data () {
+ return {
+ placeNum: 0,
+ dangerNum: 0,
+ tabType: 0,
+ personEchartsLoading: false,
+ houseEchartsLoading: false,
+ landEchartsLoading: false,
+ peopletype: 0,
+ tabTypeTwo: 0,
+ tabTypeThree: 0,
+ peopleTitle: '',
+ peopleVisible: false,
+ dataDeep: 1,
+ keyPersonOption: {},
+ keyPersonSelectSaveArr: [],
+ areaNum: '',
+ villageNum: '',
+ policeVillageNum: '',
+ policeStationPersonInfo: {},
+ villagePersonStatisticInfoList: [],
+ showBack: true,
+ isAllPoliceStation: true,
+ realHouseNum: '',
+ keyPlaceNum: '',
+ personAll: '',
+ // 记录当前选中派出所的ID
+ policeStaionID: '',
+ peopleLoading: false,
+ personEchartsHeight: '100%',
+ syldBigType: '',
+ syldName: '',
+ gzcsType: '',
+ gzcsUnitName: '',
+ gzcsPerson: '',
+ gzcsPhone: '',
+ isFirstMounted: true,
+ clickPoliceStationId: '',
+ areaId: null,
+ }
+ },
+
+ mounted () {
+ // 获取所有数据并加载
+ this.getHomeAllData()
+
+ if (this.userInfo.dept_id != '1123598813738675201') {
+ // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
+ this.showBack = false
+ this.isAllPoliceStation = false
+ }
+
+ this.$nextTick(() => {
+ window.addEventListener("resize", this.echartsResize)
+ })
+
+ // this.getVillageDetailAndPlaceStatisticNumber({ deptId: this.userInfo.dept_id })
+ },
+
+ methods: {
+ // 酒店列表
+ getHotelList () {
+ getHotelList({ deptId: this.$parent.areaChangeValue, orderName: 'hotel_name', hotelName: this.$parent.zhuSuName, orderRule: 'asc', size: this.$parent.zhuSuPage.pageSize, current: this.$parent.zhuSuPage.currentPage }).then(res => {
+ console.log(res.data.data.records, 'getHotelList-1234')
+ this.$parent.zhuSuPage.total = res.data.data.total
+ this.$parent.zhuSuArr = res.data.data.records
+ setTimeout(() => {
+ this.$parent.zhuSuLoading = false
+ }, 500)
+ })
},
- mounted () {
- // 获取所有数据并加载
- this.getHomeAllData()
+ // 设备饼图轮播
+ keyPeopleEchartsCarousel () {
+ let curIndex = 0
+ if (timer) {
+ clearInterval(timer)
+ }
- if (this.userInfo.dept_id != '1123598813738675201') {
- // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
- this.showBack = false
- this.isAllPoliceStation = false
+ 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)
+ })
+ },
+ /**
+ * 责任区查询
+ * @param {*} areaId
+ */
+ getHomeAllDataByAreaId (policeStationId, areaId) {
+ // if(areaId){
+ this.policeStaionID = policeStationId
+ this.areaId = areaId
+ this.getNineStatistics(true)
+ // }
+ },
+
+ /**
+ * @description: 获取首页的所有数据
+ * @return {*}
+ */
+ getHomeAllData (id = '') {
+ this.areaId = null
+ this.policeStaionID = id
+ this.clickPoliceStationId = id
+
+ this.isFirstMounted = true
+ if (id != '') {
+ this.showBack = false
+ this.isAllPoliceStation = false
+
+ this.tabTypeThree = 0
+ } else {
+ this.showBack = true
+ this.isAllPoliceStation = true
+ }
+ this.tabType = 0//解决下拉选择派出所重点人员显示bug
+ this.personTabClick(this.tabType)
+
+ this.getNineStatistics(true)
+ this.houseTabClick(this.tabTypeTwo)
+
+ this.landTabClick(this.tabTypeThree)
+
+ if (leftTiming != null) {
+ clearInterval(leftTiming)
+ leftTiming = null
+ }
+
+ leftTiming = setInterval(async () => {
+ this.houseTabClick(this.tabTypeTwo)
+
+ this.landTabClick(this.tabTypeThree)
+ }, 600000)
+ },
+
+ /**
+ * @description: 户籍人口和重点人员切换
+ * @param {*} type
+ * @return {*}
+ */
+ personTabClick (type) {
+ console.log('type', type, 'this.tabType', this.tabType, 'this.isFirstMounted', this.isFirstMounted)
+ if (type == 0) {
+ if (this.tabType == 0 && !this.isFirstMounted) {
+ console.log('再次点击人口总数', this.isFirstMounted)
+ this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
+ return
+ }
+ this.isFirstMounted = false
+ this.dataDeep = 1
+ this.disposeEchart()
+ this.personEchartsLoading = true
+ this.personEchartsHeight = '100%'
+ if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {
+
+ this.getPoliceStationInfo()
+
+ } else {
+ this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
}
- this.$nextTick(() => {
- window.addEventListener("resize", this.echartsResize)
+ } else if (type == 1) {
+ if (this.tabType == 1 && !this.isFirstMounted) {
+ console.log('再次点击重点人口')
+ this.$emit('showpeopledetail', this.clickPoliceStationId, '重点人员列表', 'onlyKeypeople')
+ return
+ }
+ this.dataDeep = 1
+ this.disposeEchart()
+ this.personEchartsLoading = true
+ this.initkeyPersonEcharts()
+ }
+ this.tabType = type
+ },
+
+ /**
+ * @description: 获取分局户籍人口数据
+ * @return {*}
+ */
+ getPoliceStationInfo () {
+ getVillagePersonStatisticInfo().then(res => {
+ if (res.data.code == 200) {
+ this.disposeEchart()
+ curSubofficeData = res.data.data
+ this.personAll = res.data.data
+ console.log('getPoliceStationInfo', 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: 获取派出所户籍人口数据
+ * @param {*} policeStationId
+ * @param {*} name
+ * @return {*}
+ */
+ getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
+ getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
+ if (res.data.code == 200) {
+ console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
+ this.disposeEchart()
+ var chartDom = document.getElementById('PersonEcharts')
+ homePersonmyChart = this.$echarts.init(chartDom)
+ this.personAll = res.data.data
+ console.log('this.personAll', this.personAll)
+
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ this.personAll.emphasisNum = 23
+ }
+
+ this.villagePersonStatisticInfoList = res.data.data
+ var xDate = [], yDate1 = [], yDate2 = []
+
+ if (this.villagePersonStatisticInfoList.data.length > 0) {
+ this.villagePersonStatisticInfoList.data.forEach(e => {
+ xDate.push(e.name.replace('居民委员会', ''))
+ yDate1.push({
+ value: e.hjnum,
+ name: e.name,
+ id: e.id
+ })
+ yDate2.push({
+ value: e.synum,
+ name: e.name,
+ id: e.id
+ })
+ })
+ }
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
+ this.clickPeopleChart()
+
+ setTimeout(() => {
+ this.dataDeep = 2
+ this.personEchartsLoading = false
+ }, 1000)
+
+ }
+ }).catch(res => {
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
+ })
+ },
+
+ /**
+ * @description: 初始化现有人图表
+ * @return {*}
+ */
+ initPersonEcharts () {
+ var chartDom = document.getElementById('PersonEcharts')
+ homePersonmyChart = this.$echarts.init(chartDom)
+
+ var xDate = [], yDate1 = [], yDate2 = []
+ //传入x,y轴数据
+
+ if (this.policeStationPersonInfo.data.length > 0) {
+ this.policeStationPersonInfo.data.forEach(e => {
+ xDate.push(e.name.replace('派出', ''))
+ yDate1.push({
+ value: e.hjnum,
+ id: e.id,
+ type: 'policeStation',
+ name: e.name
+ })
+ yDate2.push({
+ value: e.synum,
+ id: e.id,
+ type: 'policeStation',
+ name: e.name
+ })
+ })
+ }
+
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2))
+ },
+
+ /**
+ * @description: 图表数据处理
+ * @param {*} xDate
+ * @param {*} yDate
+ * @param {*} colors
+ * @return {*}
+ */
+ initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
+ let options
+
+ if (xDate.length == 0) {
+ options = {
+ title: {
+ text: '暂无数据1',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ color: '#fff',
+ fontWeight: 'normal',
+ fontSize: fontSize(14)
+ }
+ }
+ }
+ } else {
+ options = {
+ 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>',
+ backgroundColor: 'rgba(8, 56, 185, 0.9)',
+ borderColor: 'rgba(8, 56, 185, 0.9)',
+ textStyle: {
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xDate,
+
+ axisLabel: {
+ color: "#fff",
+ interval: 0,
+ rotate: 45,
+ fontSize: fontSize(10)
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#fff"
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ minInterval: 1,
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: fontSize(12)
+ }
+ },
+ legend: {
+ itemWidth: 15,
+ itemHeight: 15,
+ data: ['户籍人口', '实有人口'],
+ textStyle: {
+ color: '#fff'
+ },
+ formatter: function (name) {
+ var data = []
+ if (name == '户籍人口') {
+ data = options.series[0].data
+ } else {
+ data = options.series[1].data
+ }
+ var total = 0
+ for (var i = 0; i < data.length; i++) {
+ total += data[i].value
+ }
+ return `${name} (${total}人)`
+ }
+ },
+ series: [
+ {
+ name: '户籍人口',
+ data: yDate1,
+ type: 'bar',
+ barWidth: '40%',
+ stack: true,
+ emphasis: {
+ disabled: true,
+ focus: 'none'
+ },
+ itemStyle: {
+ normal: {
+ color: colors1
+ // color: function (params) {
+ // return new global.echarts.graphic.LinearGradient(
+ // 0, 0, 0, 1,
+ // [
+ // { offset: 0, color: colors1[0] },
+ // { offset: 0.5, color: colors1[1] },
+ // { offset: 1, color: colors1[2] },
+ // ]
+ // )
+ // }
+ },
+ emphasis: {
+ color: colors1
+ // color: function (params) {
+ // return new global.echarts.graphic.LinearGradient(
+ // 0, 0, 0, 1,
+ // [
+ // { offset: 0, color: colors1[2] },
+ // { offset: 0.7, color: colors1[1] },
+ // { offset: 1, color: colors1[0] }
+ // ]
+ // )
+ // }
+ }
+ },
+ },
+ {
+ name: '实有人口',
+ data: yDate2,
+ type: 'bar',
+ barWidth: '40%',
+ stack: true,
+ emphasis: {
+ disabled: true,
+ focus: 'none'
+ },
+ itemStyle: {
+ normal: {
+ color: colors2
+ // color: function (params) {
+ // return new global.echarts.graphic.LinearGradient(
+ // 0, 0, 0, 1,
+ // [
+ // { offset: 0, color: colors2[2] },
+ // { offset: 0.5, color: colors2[1] },
+ // { offset: 1, color: colors2[0] },
+ // ]
+ // )
+ // }
+ },
+ emphasis: {
+ color: colors2
+ // color: function (params) {
+ // return new global.echarts.graphic.LinearGradient(
+ // 0, 0, 0, 1,
+ // [
+ // { offset: 0, color: colors2[0] },
+ // { offset: 0.7, color: colors2[1] },
+ // { offset: 1, color: colors2[2] }
+ // ]
+ // )
+ // }
+ }
+ },
+ },
+
+ ],
+ grid: {
+ top: '4%',
+ left: '2%',
+ right: '2%',
+ bottom: '1%',
+ containLabel: true
+ },
+ }
+ }
+
+ return options
+
+ },
+
+ /**
+ * @description: 现有人图表中的返回按钮
+ * @return {*}
+ */
+ backBegin () {
+ this.clickPoliceStationId = this.userInfo.dept_id
+ this.personAll = curSubofficeData
+ this.dataDeep = 1
+ this.initPersonEcharts()
+ this.$parent.getAllPoliceStationCenter()
+ },
+
+ // 现有住宅和关注场所统计总数
+ getVillageDetailAndPlaceStatisticNumber (params) {
+ getVillageDetailAndPlaceStatisticNumber(params).then(res => {
+ if (res.data.data.length > 0) {
+ res.data.data.forEach(item => {
+ if (item.typeName == 'gzcs') {
+ this.keyPlaceNum = item.number
+ } else if (item.typeName == 'syld') {
+ this.realHouseNum = item.number
+ }
+ })
+ }
+ // 茅家岭单独判断
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ this.keyPlaceNum = 54
+ this.realHouseNum = 205
+ }
+ })
+ },
+
+ // 实有住宅统计
+ getVillageStatisticData (params) {
+ getVillageStatisticData(params).then(res => {
+ this.disposeHouseEchart()
+ let xDate = []
+ let yDate = []
+ res.data.data.forEach(item => {
+ xDate.push(item.typeName)
+ yDate.push(item.number)
+ })
+ // 茅家岭单独判断
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
+ yDate = [34, 2, 33, 11, 22, 30, 14]
+ }
+
+ this.inithouseEcharts(xDate, yDate)
+ // 点击事件
+ this.clickHouseChart('实有住宅')
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ }).catch(res => {
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ })
+ },
+
+ // 实有住宅详情
+ getVillageStatisticDetail () {
+ getVillageStatisticDetail({ deptId: this.userInfo.dept_id, bigType: this.syldBigType, name: this.syldName, current: this.$parent.syldPage.currentPage, size: this.$parent.syldPage.pageSize }).then(res => {
+ console.log('getVillageStatisticDetail', res, res.data.data.records)
+ this.$parent.syldPage.total = res.data.data.total
+ this.$parent.syldArr = res.data.data.records
+ setTimeout(() => {
+ this.$parent.syldLoading = false
+ }, 500)
+ })
+ },
+
+ // 关注场所统计
+ getPlaceOfConcernStatisticData (params) {
+ getPlaceOfConcernStatisticData(params).then(res => {
+ this.disposeHouseEchart()
+ let xDate = []
+ let yDate = []
+ res.data.data.forEach(item => {
+ xDate.push(item.typeName)
+ yDate.push(item.number)
})
- // this.getVillageDetailAndPlaceStatisticNumber({ deptId: this.userInfo.dept_id })
+ // 茅家岭单独判断
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
+ yDate = [14, 13, 10, 17]
+ }
+
+ this.inithouseEcharts(xDate, yDate)
+ // 点击事件
+ this.clickHouseChart('关注场所')
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ }).catch(res => {
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ })
},
- methods: {
- // 酒店列表
- getHotelList () {
- getHotelList({ deptId: this.$parent.areaChangeValue, orderName: 'hotel_name', hotelName: this.$parent.zhuSuName, orderRule: 'asc', size: this.$parent.zhuSuPage.pageSize, current: this.$parent.zhuSuPage.currentPage }).then(res => {
- console.log(res.data.data.records, 'getHotelList-1234')
- this.$parent.zhuSuPage.total = res.data.data.total
- this.$parent.zhuSuArr = res.data.data.records
- setTimeout(() => {
- this.$parent.zhuSuLoading = false
- }, 500)
- })
- },
-
- // 设备饼图轮播
- 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)
- })
- },
- /**
- * 责任区查询
- * @param {*} areaId
- */
- getHomeAllDataByAreaId(policeStationId,areaId){
- // if(areaId){
- this.policeStaionID = policeStationId
- this.areaId = areaId
- this.getNineStatistics(true)
- // }
- },
-
- /**
- * @description: 获取首页的所有数据
- * @return {*}
- */
- getHomeAllData (id = '') {
- this.areaId = null
- this.policeStaionID = id
- this.clickPoliceStationId = id
-
- this.isFirstMounted = true
- if (id != '') {
- this.showBack = false
- this.isAllPoliceStation = false
-
- this.tabTypeThree = 0
+ // 关注场所详情
+ getPlaceOfConcernStatisticDetail () {
+ getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
+ console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
+ this.$parent.gzcsPage.total = res.data.data.total
+ this.$parent.gzcsArr = res.data.data.records
+ setTimeout(() => {
+ this.$parent.gzcsLoading = false
+ }, 500)
+ })
+ },
+ // 九小场所echarts
+ initPlaceEcharts (xDate, yDate, type) {
+ var chartDom = document.getElementById('houseEcharts')
+ houseMyChart = this.$echarts.init(chartDom)
+ houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
+ // 圆柱点击事件
+ this.clickPlaceChart(type)
+ },
+ // 场所图表点击事件
+ clickPlaceChart (type) {
+ this.tabTypeThree = type
+ this.houseEchartsLoading = true
+ houseMyChart.on('click', params => {
+ this.$emit('showplacedetail', type, '九小场所列表', params.name, this.areaId)
+ })
+ },
+ // 九小场所
+ initPlaceOptions (xDate, y1Date) {
+ const that = this
+ return {
+ tooltip: {
+ trigger: 'item',
+ formatter: params => {
+ let msg
+ if (params.value > 10000) {
+ msg = (params.value / 10000).toFixed(2)
} else {
- this.showBack = true
- this.isAllPoliceStation = true
- }
- this.tabType = 0//解决下拉选择派出所重点人员显示bug
- this.personTabClick(this.tabType)
-
- this.getNineStatistics(true)
- this.houseTabClick(this.tabTypeTwo)
-
- this.landTabClick(this.tabTypeThree)
-
- if (leftTiming != null) {
- clearInterval(leftTiming)
- leftTiming = null
+ msg = params.value
}
- leftTiming = setInterval(async () => {
- this.houseTabClick(this.tabTypeTwo)
-
- this.landTabClick(this.tabTypeThree)
- }, 600000)
+ msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
+ return msg
+ },
+ backgroundColor: 'rgba(8, 56, 185, 0.9)',
+ borderColor: 'rgba(8, 56, 185, 0.9)',
+ textStyle: {
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
},
-
- /**
- * @description: 户籍人口和重点人员切换
- * @param {*} type
- * @return {*}
- */
- personTabClick (type) {
- console.log('type', type, 'this.tabType', this.tabType, 'this.isFirstMounted', this.isFirstMounted)
- if (type == 0) {
- if (this.tabType == 0 && !this.isFirstMounted) {
- console.log('再次点击人口总数', this.isFirstMounted)
- this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
- return
+ color: myColor,
+ xAxis: {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ yAxis: {
+ type: 'category',
+ data: xDate,
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: fontSize(14)
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ series: [
+ {
+ data: y1Date,
+ type: 'bar',
+ barWidth: '50%',
+ barCategoryGap: '80%',
+ zlevel: 2,
+ cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
+ itemStyle: {
+ normal: {
+ color: '#ed7c2f',
+ label: {
+ show: true, //开启显示
+ position: 'right', //在上方显示
+ textStyle: { //数值样式
+ color: '#ed7c2f',
+ fontSize: 10
+ }
}
- this.isFirstMounted = false
- this.dataDeep = 1
- this.disposeEchart()
- this.personEchartsLoading = true
- this.personEchartsHeight = '100%'
- 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) {
- if (this.tabType == 1 && !this.isFirstMounted) {
- console.log('再次点击重点人口')
- this.$emit('showpeopledetail', this.clickPoliceStationId, '重点人员列表', 'onlyKeypeople')
- return
- }
- this.dataDeep = 1
- this.disposeEchart()
- this.personEchartsLoading = true
- this.initkeyPersonEcharts()
- }
- this.tabType = type
+ }
+ },
+ },
+ ],
+ grid: {
+ top: '2%',
+ left: '2%',
+ // right: '-1%',
+ right: '10%',
+ bottom: '2%',
+ containLabel: true
},
+ dataZoom: [
+ {
+ type: "inside",
+ startValue: 0,
+ endValue: 4,
+ minValueSpan: 8,
+ maxValueSpan: 8,
+ yAxisIndex: [0],
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
+ moveOnMouseWheel: true, // 开启滚轮平移
+ moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
+ },
+ {
+ type: 'slider',
+ realtime: true,
+ startValue: 0,
+ endValue: 4,
+ width: '3.5',
+ height: '90%',
+ yAxisIndex: [0], // 控制y轴滚动
+ // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+ fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
+ borderColor: "rgba(17, 100, 210, 0.12)",
+ backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
+ handleSize: 0, // 两边手柄尺寸
+ showDataShadow: false,//是否显示数据阴影 默认auto
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ top: '1%',
+ right: '5',
+ }
- /**
- * @description: 获取分局户籍人口数据
- * @return {*}
- */
- getPoliceStationInfo () {
- getVillagePersonStatisticInfo().then(res => {
- if (res.data.code == 200) {
- this.disposeEchart()
- curSubofficeData = res.data.data
- this.personAll = res.data.data
- console.log('getPoliceStationInfo', 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: 获取派出所户籍人口数据
- * @param {*} policeStationId
- * @param {*} name
- * @return {*}
- */
- getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
- getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
- if (res.data.code == 200) {
- console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
- this.disposeEchart()
- var chartDom = document.getElementById('PersonEcharts')
- homePersonmyChart = this.$echarts.init(chartDom)
- this.personAll = res.data.data
- console.log('this.personAll', this.personAll)
-
- if (this.userInfo.dept_id == '1596020515064381442') {
- this.personAll.emphasisNum = 23
- }
-
- this.villagePersonStatisticInfoList = res.data.data
- var xDate = [], yDate1 = [], yDate2 = []
-
- if (this.villagePersonStatisticInfoList.data.length > 0) {
- this.villagePersonStatisticInfoList.data.forEach(e => {
- xDate.push(e.name.replace('居民委员会', ''))
- yDate1.push({
- value: e.hjnum,
- name: e.name,
- id: e.id
- })
- yDate2.push({
- value: e.synum,
- name: e.name,
- id: e.id
- })
- })
- }
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
- this.clickPeopleChart()
-
- setTimeout(() => {
- this.dataDeep = 2
- this.personEchartsLoading = false
- }, 1000)
-
- }
- }).catch(res => {
- setTimeout(() => {
- this.personEchartsLoading = false
- }, 500)
- })
- },
-
- /**
- * @description: 初始化现有人图表
- * @return {*}
- */
- initPersonEcharts () {
- var chartDom = document.getElementById('PersonEcharts')
- homePersonmyChart = this.$echarts.init(chartDom)
-
- var xDate = [], yDate1 = [], yDate2 = []
- //传入x,y轴数据
-
- if (this.policeStationPersonInfo.data.length > 0) {
- this.policeStationPersonInfo.data.forEach(e => {
- xDate.push(e.name.replace('派出', ''))
- yDate1.push({
- value: e.hjnum,
- id: e.id,
- type: 'policeStation',
- name: e.name
- })
- yDate2.push({
- value: e.synum,
- id: e.id,
- type: 'policeStation',
- name: e.name
- })
- })
- }
-
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2))
- },
-
- /**
- * @description: 图表数据处理
- * @param {*} xDate
- * @param {*} yDate
- * @param {*} colors
- * @return {*}
- */
- initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
- let options
-
- if (xDate.length == 0) {
- options = {
- title: {
- text: '暂无数据1',
- x: 'center',
- y: 'center',
- textStyle: {
- color: '#fff',
- fontWeight: 'normal',
- fontSize: fontSize(14)
- }
- }
- }
- } else {
- options = {
- 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>',
- backgroundColor: 'rgba(8, 56, 185, 0.9)',
- borderColor: 'rgba(8, 56, 185, 0.9)',
- textStyle: {
- color: '#fff',
- fontSize: fontSize(12)
- }
- },
- xAxis: {
- type: 'category',
- data: xDate,
-
- axisLabel: {
- color: "#fff",
- interval: 0,
- rotate: 45,
- fontSize: fontSize(10)
- },
- axisLine: {
- lineStyle: {
- color: "#fff"
- }
- }
- },
- yAxis: {
- type: 'value',
- minInterval: 1,
- splitLine: {
- show: false
- },
- axisLabel: {
- color: "#fff",
- fontSize: fontSize(12)
- }
- },
- legend: {
- itemWidth: 15,
- itemHeight: 15,
- data: ['户籍人口', '实有人口'],
- textStyle: {
- color: '#fff'
- },
- formatter: function (name) {
- var data = []
- if (name == '户籍人口') {
- data = options.series[0].data
- } else {
- data = options.series[1].data
- }
- var total = 0
- for (var i = 0; i < data.length; i++) {
- total += data[i].value
- }
- return `${name} (${total}人)`
- }
- },
- series: [
- {
- name: '户籍人口',
- data: yDate1,
- type: 'bar',
- barWidth: '40%',
- stack: true,
- emphasis: {
- disabled: true,
- focus: 'none'
- },
- itemStyle: {
- normal: {
- color: colors1
- // color: function (params) {
- // return new global.echarts.graphic.LinearGradient(
- // 0, 0, 0, 1,
- // [
- // { offset: 0, color: colors1[0] },
- // { offset: 0.5, color: colors1[1] },
- // { offset: 1, color: colors1[2] },
- // ]
- // )
- // }
- },
- emphasis: {
- color: colors1
- // color: function (params) {
- // return new global.echarts.graphic.LinearGradient(
- // 0, 0, 0, 1,
- // [
- // { offset: 0, color: colors1[2] },
- // { offset: 0.7, color: colors1[1] },
- // { offset: 1, color: colors1[0] }
- // ]
- // )
- // }
- }
- },
- },
- {
- name: '实有人口',
- data: yDate2,
- type: 'bar',
- barWidth: '40%',
- stack: true,
- emphasis: {
- disabled: true,
- focus: 'none'
- },
- itemStyle: {
- normal: {
- color: colors2
- // color: function (params) {
- // return new global.echarts.graphic.LinearGradient(
- // 0, 0, 0, 1,
- // [
- // { offset: 0, color: colors2[2] },
- // { offset: 0.5, color: colors2[1] },
- // { offset: 1, color: colors2[0] },
- // ]
- // )
- // }
- },
- emphasis: {
- color: colors2
- // color: function (params) {
- // return new global.echarts.graphic.LinearGradient(
- // 0, 0, 0, 1,
- // [
- // { offset: 0, color: colors2[0] },
- // { offset: 0.7, color: colors2[1] },
- // { offset: 1, color: colors2[2] }
- // ]
- // )
- // }
- }
- },
- },
-
- ],
- grid: {
- top: '4%',
- left: '2%',
- right: '2%',
- bottom: '1%',
- containLabel: true
- },
- }
- }
-
- return options
-
- },
-
- /**
- * @description: 现有人图表中的返回按钮
- * @return {*}
- */
- backBegin () {
- this.clickPoliceStationId = this.userInfo.dept_id
- this.personAll = curSubofficeData
- this.dataDeep = 1
- this.initPersonEcharts()
- this.$parent.getAllPoliceStationCenter()
- },
-
- // 现有住宅和关注场所统计总数
- getVillageDetailAndPlaceStatisticNumber (params) {
- getVillageDetailAndPlaceStatisticNumber(params).then(res => {
- if (res.data.data.length > 0) {
- res.data.data.forEach(item => {
- if (item.typeName == 'gzcs') {
- this.keyPlaceNum = item.number
- } else if (item.typeName == 'syld') {
- this.realHouseNum = item.number
- }
- })
- }
- // 茅家岭单独判断
- if (this.userInfo.dept_id == '1596020515064381442') {
- this.keyPlaceNum = 54
- this.realHouseNum = 205
- }
- })
- },
-
- // 实有住宅统计
- getVillageStatisticData (params) {
- getVillageStatisticData(params).then(res => {
- this.disposeHouseEchart()
- let xDate = []
- let yDate = []
- res.data.data.forEach(item => {
- xDate.push(item.typeName)
- yDate.push(item.number)
- })
- // 茅家岭单独判断
- if (this.userInfo.dept_id == '1596020515064381442') {
- xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
- yDate = [34, 2, 33, 11, 22, 30, 14]
- }
-
- this.inithouseEcharts(xDate, yDate)
- // 点击事件
- this.clickHouseChart('实有住宅')
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- }).catch(res => {
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- })
- },
-
- // 实有住宅详情
- getVillageStatisticDetail () {
- getVillageStatisticDetail({ deptId: this.userInfo.dept_id, bigType: this.syldBigType, name: this.syldName, current: this.$parent.syldPage.currentPage, size: this.$parent.syldPage.pageSize }).then(res => {
- console.log('getVillageStatisticDetail', res, res.data.data.records)
- this.$parent.syldPage.total = res.data.data.total
- this.$parent.syldArr = res.data.data.records
- setTimeout(() => {
- this.$parent.syldLoading = false
- }, 500)
- })
- },
-
- // 关注场所统计
- getPlaceOfConcernStatisticData (params) {
- getPlaceOfConcernStatisticData(params).then(res => {
- this.disposeHouseEchart()
- let xDate = []
- let yDate = []
- res.data.data.forEach(item => {
- xDate.push(item.typeName)
- yDate.push(item.number)
- })
-
- // 茅家岭单独判断
- if (this.userInfo.dept_id == '1596020515064381442') {
- xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
- yDate = [14, 13, 10, 17]
- }
-
- this.inithouseEcharts(xDate, yDate)
- // 点击事件
- this.clickHouseChart('关注场所')
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- }).catch(res => {
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- })
- },
-
- // 关注场所详情
- getPlaceOfConcernStatisticDetail () {
- getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
- console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
- this.$parent.gzcsPage.total = res.data.data.total
- this.$parent.gzcsArr = res.data.data.records
- setTimeout(() => {
- this.$parent.gzcsLoading = false
- }, 500)
- })
- },
- // 九小场所echarts
- initPlaceEcharts(xDate, yDate,type){
- var chartDom = document.getElementById('houseEcharts')
- houseMyChart = this.$echarts.init(chartDom)
- houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
- // 圆柱点击事件
- this.clickPlaceChart(type)
- },
- // 场所图表点击事件
- clickPlaceChart(type){
- this.tabTypeThree = type
- this.houseEchartsLoading = true
- houseMyChart.on('click', params => {
- this.$emit('showplacedetail', type, '九小场所列表', params.name,this.areaId)
- })
- },
- // 九小场所
- initPlaceOptions (xDate, y1Date) {
- const that = this
- 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
- },
- backgroundColor: 'rgba(8, 56, 185, 0.9)',
- borderColor: 'rgba(8, 56, 185, 0.9)',
- textStyle: {
- color: '#fff',
- fontSize: fontSize(12)
- }
- },
- color: myColor,
- xAxis: {
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false
- },
- },
- yAxis: {
- type: 'category',
- data: xDate,
- axisLine: {
- show: false
- },
- axisLabel: {
- color: "#fff",
- fontSize: fontSize(14)
- },
- axisTick: {
- show: false
- },
- },
- series: [
- {
- data: y1Date,
- type: 'bar',
- barWidth: '50%',
- barCategoryGap: '80%',
- zlevel: 2,
- cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
- itemStyle: {
- normal: {
- color: '#ed7c2f',
- label: {
- show: true, //开启显示
- position: 'right', //在上方显示
- textStyle: { //数值样式
- color: '#ed7c2f',
- fontSize: 10
- }
- }
- }
- },
- },
- ],
- grid: {
- top: '2%',
- left: '2%',
- // right: '-1%',
- right: '10%',
- bottom: '2%',
- containLabel: true
- },
- dataZoom: [
- {
- type: "inside",
- startValue: 0,
- endValue: 4,
- minValueSpan: 8,
- maxValueSpan: 8,
- yAxisIndex: [0],
- zoomOnMouseWheel: false, // 关闭滚轮缩放
- moveOnMouseWheel: true, // 开启滚轮平移
- moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
- },
- {
- type: 'slider',
- realtime: true,
- startValue: 0,
- endValue: 4,
- width: '3.5',
- height: '90%',
- yAxisIndex: [0], // 控制y轴滚动
- // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
- fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
- borderColor: "rgba(17, 100, 210, 0.12)",
- backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
- handleSize: 0, // 两边手柄尺寸
- showDataShadow: false,//是否显示数据阴影 默认auto
- showDetail: false, // 拖拽时是否展示滚动条两侧的文字
- top: '1%',
- right: '5',
- }
-
- ]
- }
- },
- // 房屋
- inithouseEcharts (xDate, yDate) {
- var chartDom = document.getElementById('houseEcharts')
- houseMyChart = this.$echarts.init(chartDom)
- houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
- },
-
- initHouseOptions (xDate, y1Date, y2Date) {
- const that = this
- 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
- },
- backgroundColor: 'rgba(8, 56, 185, 0.9)',
- borderColor: 'rgba(8, 56, 185, 0.9)',
- textStyle: {
- color: '#fff',
- fontSize: fontSize(12)
- }
- },
- color: myColor,
- xAxis: {
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false
- },
- },
- yAxis: {
- type: 'category',
- data: xDate,
- axisLine: {
- show: false
- },
- axisLabel: {
- color: "#fff",
- fontSize: fontSize(14)
- },
- axisTick: {
- show: false
- },
- },
- series: [
- {
- data: y1Date,
- type: 'bar',
- barWidth: '50%',
- barCategoryGap: '80%',
- zlevel: 2,
- cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
- itemStyle: {
- normal: {
- // barBorderRadius: [0, 30, 30, 0],
- // color: function (params) {
- // var num = myColor.length
- // return myColor[params.dataIndex % num]
- // },
- color: '#ed7c2f',
- label: {
- show: true, //开启显示
- position: 'right', //在上方显示
- textStyle: { //数值样式
- color: '#ed7c2f',
- fontSize: 10
- }
- }
- }
- },
- },
- // {
- // data: y2Date,
- // show: true,
- // type: 'bar',
- // barGap: '-100%',
- // barWidth: '35%', //统计条宽度
- // itemStyle: {
- // normal: {
- // color: 'rgba(102, 102, 102,0.5)'
- // },
- // },
- // z: 1,
- // }
- ],
- grid: {
- top: '2%',
- left: '2%',
- // right: '-1%',
- right: '10%',
- bottom: '2%',
- containLabel: true
- },
- dataZoom: [
- {
- type: "inside",
- startValue: 0,
- endValue: 4,
- minValueSpan: 8,
- maxValueSpan: 8,
- yAxisIndex: [0],
- zoomOnMouseWheel: false, // 关闭滚轮缩放
- moveOnMouseWheel: true, // 开启滚轮平移
- moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
- },
- {
- type: 'slider',
- realtime: true,
- startValue: 0,
- endValue: 4,
- width: '3.5',
- height: '90%',
- yAxisIndex: [0], // 控制y轴滚动
- // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
- fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
- borderColor: "rgba(17, 100, 210, 0.12)",
- backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
- handleSize: 0, // 两边手柄尺寸
- showDataShadow: false,//是否显示数据阴影 默认auto
- showDetail: false, // 拖拽时是否展示滚动条两侧的文字
- top: '1%',
- right: '5',
- }
-
- ]
- }
- },
-
- houseTabClick (type) {
- this.tabTypeTwo = type
-
- this.houseEchartsLoading = true
-
- this.disposeHouseEchart()
-
- this.getNineStatistics()
-
- // 隐患数量
- // this.getHouseStatisticInfo(2)
-
- // 场所数量
- // this.getHouseStatisticInfo(1)
- },
-
- getNineStatistics (flag = false) {
- getNineStatistics({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
- areaId:this.areaId
- }).then(res => {
- let xDate = []
- let yDate = []
-
- this.realHouseNum = res.data.data.count
-
- let dangerList = res.data.data.dangerList.reverse()
- let placeList = res.data.data.placeList.reverse()
- if (flag) {
- this.placeNum = placeList.reduce((pre, cur) => {
- return pre + cur.num
- }, 0)
- this.dangerNum = dangerList.reduce((pre, cur) => {
- return pre + cur.num
- }, 0)
-
- // return
- }
-
- if (this.tabTypeTwo == 1) {
- dangerList.forEach(item => {
- xDate.push(item.nineTypeName)
- yDate.push(item.num)
- })
- } else {
- placeList.forEach(item => {
- xDate.push(item.nineTypeName)
- yDate.push(item.num)
- })
- }
-
- this.initPlaceEcharts(xDate, yDate,this.tabTypeTwo)
-
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- })
- },
-
- /**
- * @description: 获取现有住宅信息
- * @param {*} deptld
- * @param {*} isFollow
- * @return {*}
- */
- getHouseStatisticInfo (isFollow) {
- getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
- this.disposeHouseEchart()
-
- let xDate = []
- let yDate = []
- if (isFollow == 1) {
- this.keyPlaceNum = res.data.data.count
- } else {
- this.realHouseNum = res.data.data.count
- }
- res.data.data.data.forEach(item => {
- 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 = [34, 2, 33, 11, 22, 30, 14]
- this.inithouseEcharts(xDate, yDate)
- } else {
- xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
- yDate = [14, 13, 10, 17]
- this.inithouseEcharts(xDate, yDate)
- }
-
- this.clickHouseChart()
- } else {
- this.inithouseEcharts(xDate, yDate)
- }
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- }).catch(res => {
- setTimeout(() => {
- this.houseEchartsLoading = false
- }, 500)
- })
- },
-
- initLandOptions (xDate, yDate) {
- return {
- color: ['#0532ff'],
- grid: {
- top: '4%',
- left: '12%',
- right: '4%',
- bottom: '28%'
- },
- tooltip: {
- trigger: 'item',
- formatter: params => {
- return `${params.marker} ${params.name}: ${params.value} 个`
- },
- backgroundColor: 'rgba(8, 56, 185, 0.9)',
- borderColor: 'rgba(8, 56, 185, 0.9)',
- textStyle: {
- color: '#fff',
- fontSize: fontSize(12)
- }
- },
- xAxis: {
- type: 'category',
- data: xDate,
- axisLabel: {
- color: "#fff",
- interval: 0,
- rotate: 45,
- fontSize: fontSize(10)
- },
- axisLine: {
- lineStyle: {
- color: "#fff"
- }
- }
- },
- yAxis: {
- type: 'value',
- minInterval: 1,
- splitLine: {
- show: false
- },
- axisLabel: {
- color: "#fff",
- fontSize: fontSize(12)
- }
- },
- 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]
- // },
- }
- },
- }
- ],
- // 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 // 鼠标移动能触发数据窗口平移
- // }
- // ]
- }
- },
-
- clickPeopleChart () {
- homePersonmyChart.on('click', params => {
- 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)
- this.clickPoliceStationId = params.data.id
- } else {
- this.$emit('showpeopledetail', params.data.id, params.data.name)
- }
- })
- },
-
- clickHouseChart (type) {
- houseMyChart.on('click', params => {
- console.log(params, 'clickHouseChart')
- // 茅家岭单独判断
- if (this.userInfo.dept_id == '1596020515064381442') {
- this.mjlClick(params)
- return
- }
-
- if (type == '实有住宅') {
- if (params.name == '住宿服务') {
- this.$parent.zhuSuPage.currentPage = 1
- this.$parent.zhuSuPopupShow = true
- this.$parent.zhuSuLoading = true
- this.getHotelList()
-
- } else {
- this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
- this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
- layerName: "jiudianLayer",
- type: "VectorLayer",
- })
- this.$parent.syldPage.currentPage = 1
- this.$parent.syldPopupTitle = params.name
- this.syldBigType = params.name
- this.syldName = ''
- this.$parent.syldArr = []
- this.$parent.syldPopupShow = true
- this.$parent.syldLoading = true
- this.getVillageStatisticDetail()
- }
-
- } else {
- console.log('关注场所')
- this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
- this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
- layerName: "jiudianLayer",
- type: "VectorLayer",
- })
- this.$parent.gzcsPage.currentPage = 1
- this.gzcsType = params.name
- this.gzcsUnitName = ''
- this.gzcsPerson = ''
- this.gzcsPhone = ''
- this.$parent.gzcsArr = []
- this.$parent.gzcsPopupShow = true
- this.$parent.gzcsLoading = true
- this.getPlaceOfConcernStatisticDetail()
- }
- })
- },
-
- // 茅家岭账号点击现有住宅
- mjlClick (params) {
- console.log('params', params)
- this.$parent.architectureTitle = params.name
- if (params.name == '学校') {
- this.$parent.xxPopupShow = true
- this.$parent.houseArr = []
- this.$parent.houseLoading = true
- setTimeout(() => {
- this.$parent.houseLoading = false
- this.$parent.houseArr = schoolJSON
- }, 1000)
- } else {
- this.$parent.architectureShow = true
- this.$parent.architectureTable = []
- this.$parent.architectureLoad = true
-
- if (params.name == '医院') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = hospitalJSON
- }, 1000)
- }
-
- if (params.name == '宾馆酒店') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = hotelJSON
- }, 1000)
- }
-
- if (params.name == '数字经济') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = digitalJSON
- }, 1000)
- }
-
- if (params.name == '房屋建筑业') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = housingJSON
- }, 1000)
- }
-
- if (params.name == '批发业') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = wholesaleJSON
- }, 1000)
- }
-
- if (params.name == '零售业') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = retailJSON
- }, 1000)
- }
-
- if (params.name == '反恐重点目标') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = antiTerroristJSON
- }, 1000)
- }
-
- if (params.name == '危爆品') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = dExplosionJSON
- }, 1000)
- }
-
- if (params.name == '重点服务对象') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = serviceObjJSON
- }, 1000)
- }
-
- if (params.name == '困难儿童') {
- setTimeout(() => {
- this.$parent.architectureLoad = false
- this.$parent.architectureTable = difficultyJSON
- }, 1000)
- }
- }
- },
-
- /**
- * @description: 初始化重点人员饼状图
- * @return {*}
- */
- async initkeyPersonEcharts () {
- this.disposeEchart()
-
- let personInfo = await this.getPersonInfo()
- console.log('personInfo', personInfo)
- keyPeopleDataLength = personInfo.length
- if (this.userInfo.dept_id == '1596020515064381442') {
- personInfo = [
- { count: 3, name: '非涉法涉诉重点个访人员', value: 7 },
- { count: 1, name: '楼盘业主维权群体', value: 1 },
- { count: 1, name: '欠薪讨债群体', value: 1 },
- { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
- { count: 11, name: '征地拆迁群体', value: 11 },
- ]
- }
-
- const high = this.$refs.REFPERSONECHARTS.offsetHeight
-
- if (personInfo.length * (high / 7) > high) {
- this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
- } else {
- this.personEchartsHeight = '100%'
- }
-
- this.$nextTick(() => {
- var chartDom = document.getElementById('PersonEcharts')
- keyPersonmyChart = this.$echarts.init(chartDom)
- 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 {*}
- */
- getPersonInfo () {
- const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
- console.log('getPersonInfo', { deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id })
-
- res.data = res.data.map(item => {
- item = {
- ...item,
- name: item.zdryxl,
- value: item.count
- }
-
- return item
- })
-
- return res.data
- })
-
- return data
- },
-
- /**
- * @description: 重点人员饼状图渲染的options
- * @param {*} dataArr
- * @return {*}
- */
- initkeyPersonOption (dataArr) {
- let options
-
- if (dataArr.length == 0) {
- options = {
- title: {
- text: '暂无重点人员数据',
- x: 'center',
- y: 'center',
- textStyle: {
- color: '#fff',
- fontWeight: 'normal',
- fontSize: fontSize(14)
- }
- }
- }
- } else {
- options = {
- tooltip: {
- trigger: 'item',
- formatter: params => {
- let msg
- if (params.value > 10000) {
- msg = (params.value / 10000).toFixed(2) + '万人'
- } else {
- msg = params.value + '人'
- }
- 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: {
- orient: 'vertical',
- top: 'middle',
- right: '2%',
- y: '1%',
- itemGap: 15,
- textStyle: {
- color: '#fff'
- },
- align: 'left',
- formatter: function (name) {
- let data = dataArr
- let tarValue
- for (let i = 0; i < data.length; i++) {
- if (data[i].name == name) {
- tarValue = data[i].value
- }
- }
- let v = tarValue
- return `${name} ${v} 人 `
- },
- },
- series: [
- {
- top: 110,
- left: 60,
- type: 'pie',
- radius: [20, 50],
- center: [0, 0],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- labelLine: {
- show: false
- },
- data: dataArr
- }
- ],
- grid: {
- x: 10,
- y: 10,
- x2: 10,
- y2: 20
- },
- }
- }
-
- return options
- },
-
- /**
- * @description: 重点人员饼状图的点击事件
- * @return {*}
- */
- async clickkeyPersonChart () {
- keyPersonmyChart.on('click', async params => {
- this.$emit('showkeypersondetail', params.name)
- })
- },
-
- /**
- * @description: 现有小区切换
- * @param {*} type
- * @return {*}
- */
- landTabClick (type) {
- this.tabTypeThree = type
- this.landEchartsLoading = true
-
- this.disposeLandEchart()
- if (type == 0) {
- this.getAreaStatisticInfo(2)
- } else if (type == 1) {
- this.getAreaStatisticInfo(1)
- }
- },
-
- /**
- * @description: 获取现有小区数据
- * @param {*} type
- * @param {*} deptId
- * @return {*}
- */
- getAreaStatisticInfo (type) {
- getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
- this.disposeLandEchart()
-
- let landData = []
- if (type == 2) {
- this.areaNum = res.data.data.areaNum
- this.villageNum = res.data.data.villageNum
- let nameArr = []
- let countArr = []
- res.data.data.data.forEach(item => {
- nameArr.push(item.name.replace('派出', '').replace('居民委员会', ''))
- countArr.push({ value: item.count, id: item.id })
- })
- landData = [nameArr, countArr]
- } else if (type == 1) {
- // this.areaNum = res.data.data.areaNum
- // this.villageNum = res.data.data.villageNum
- let nameArr = []
- let countArr = []
- res.data.data.data.forEach(item => {
- nameArr.push(item.name.replace('派出', ''))
- countArr.push({ value: item.count, id: item.id })
- })
- landData = [nameArr, countArr]
- }
- setTimeout(() => {
- this.landEchartsLoading = false
- }, 500)
-
- this.initLandEcharts(landData)
- }).catch(res => {
- setTimeout(() => {
- this.landEchartsLoading = false
- }, 500)
- })
- },
-
- /**
- * @description: 现有小区图表渲染
- * @param {*} landData
- * @return {*}
- */
- initLandEcharts (landData) {
- this.disposeLandEchart()
- var chartDom = document.getElementById('landEcharts')
-
- landMyChart = this.$echarts.init(chartDom)
-
- landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
-
- this.clickLandChart()
- },
-
- /**
- * @description: 现有小区图表点击事件
- * @return {*}
- */
- clickLandChart () {
- landMyChart.on('click', params => {
- console.log('clickLandChart')
- if (this.tabTypeThree == 0) {
- this.$emit('showlanddetail', params.name, 2, params.data.id)
- } else {
- this.$emit('showlanddetail', params.name, 1, params.data.id)
- }
- })
- },
-
- /**
- * @description: 视图窗口改变时，echarts图表重置
- * @return {*}
- */
- echartsResize () {
- homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
- landMyChart && landMyChart != null && landMyChart.resize()
- keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
- houseMyChart && houseMyChart != null && houseMyChart.resize()
- },
-
- /**
- * @description: 销毁所有echarts实例，解绑点击事件
- * @return {*}
- */
- disposeEchart () {
- if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
- homePersonmyChart.dispose()
- homePersonmyChart.off('click')
- }
-
- if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
- keyPersonmyChart.dispose()
- keyPersonmyChart.off('click')
- }
- },
-
- /**
- * @description: 销毁所有echarts实例，解绑点击事件
- * @return {*}
- */
- disposeHouseEchart () {
- if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
- houseMyChart.clear()
- houseMyChart.dispose()
- houseMyChart.off('click')
- }
- },
-
- /**
- * @description: 销毁所有echarts实例，解绑点击事件
- * @return {*}
- */
- disposeLandEchart () {
- if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
- landMyChart.dispose()
- landMyChart.off('click')
- }
- },
-
-
+ ]
+ }
+ },
+ // 房屋
+ inithouseEcharts (xDate, yDate) {
+ var chartDom = document.getElementById('houseEcharts')
+ houseMyChart = this.$echarts.init(chartDom)
+ houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
},
- destroyed () {
- window.removeEventListener("resize", this.echartsResize)
- this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
- this.disposeEchart()
+ initHouseOptions (xDate, y1Date, y2Date) {
+ const that = this
+ 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
+ },
+ backgroundColor: 'rgba(8, 56, 185, 0.9)',
+ borderColor: 'rgba(8, 56, 185, 0.9)',
+ textStyle: {
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ color: myColor,
+ xAxis: {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ yAxis: {
+ type: 'category',
+ data: xDate,
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: fontSize(14)
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ series: [
+ {
+ data: y1Date,
+ type: 'bar',
+ barWidth: '50%',
+ barCategoryGap: '80%',
+ zlevel: 2,
+ cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
+ itemStyle: {
+ normal: {
+ // barBorderRadius: [0, 30, 30, 0],
+ // color: function (params) {
+ // var num = myColor.length
+ // return myColor[params.dataIndex % num]
+ // },
+ color: '#ed7c2f',
+ label: {
+ show: true, //开启显示
+ position: 'right', //在上方显示
+ textStyle: { //数值样式
+ color: '#ed7c2f',
+ fontSize: 10
+ }
+ }
+ }
+ },
+ },
+ // {
+ // data: y2Date,
+ // show: true,
+ // type: 'bar',
+ // barGap: '-100%',
+ // barWidth: '35%', //统计条宽度
+ // itemStyle: {
+ // normal: {
+ // color: 'rgba(102, 102, 102,0.5)'
+ // },
+ // },
+ // z: 1,
+ // }
+ ],
+ grid: {
+ top: '2%',
+ left: '2%',
+ // right: '-1%',
+ right: '10%',
+ bottom: '2%',
+ containLabel: true
+ },
+ dataZoom: [
+ {
+ type: "inside",
+ startValue: 0,
+ endValue: 4,
+ minValueSpan: 8,
+ maxValueSpan: 8,
+ yAxisIndex: [0],
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
+ moveOnMouseWheel: true, // 开启滚轮平移
+ moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
+ },
+ {
+ type: 'slider',
+ realtime: true,
+ startValue: 0,
+ endValue: 4,
+ width: '3.5',
+ height: '90%',
+ yAxisIndex: [0], // 控制y轴滚动
+ // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+ fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
+ borderColor: "rgba(17, 100, 210, 0.12)",
+ backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
+ handleSize: 0, // 两边手柄尺寸
+ showDataShadow: false,//是否显示数据阴影 默认auto
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ top: '1%',
+ right: '5',
+ }
+
+ ]
+ }
+ },
+
+ houseTabClick (type) {
+ this.tabTypeTwo = type
+
+ this.houseEchartsLoading = true
+
+ this.disposeHouseEchart()
+
+ this.getNineStatistics()
+
+ // 隐患数量
+ // this.getHouseStatisticInfo(2)
+
+ // 场所数量
+ // this.getHouseStatisticInfo(1)
+ },
+
+ getNineStatistics (flag = false) {
+ getNineStatistics({
+ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
+ areaId: this.areaId
+ }).then(res => {
+ let xDate = []
+ let yDate = []
+
+ this.realHouseNum = res.data.data.count
+
+ let dangerList = res.data.data.dangerList.reverse()
+ let placeList = res.data.data.placeList.reverse()
+ if (flag) {
+ this.placeNum = placeList.reduce((pre, cur) => {
+ return pre + cur.num
+ }, 0)
+ this.dangerNum = dangerList.reduce((pre, cur) => {
+ return pre + cur.num
+ }, 0)
+
+ // return
+ }
+
+ if (this.tabTypeTwo == 1) {
+ dangerList.forEach(item => {
+ xDate.push(item.nineTypeName)
+ yDate.push(item.num)
+ })
+ } else {
+ placeList.forEach(item => {
+ xDate.push(item.nineTypeName)
+ yDate.push(item.num)
+ })
+ }
+
+ this.initPlaceEcharts(xDate, yDate, this.tabTypeTwo)
+
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ })
+ },
+
+ /**
+ * @description: 获取现有住宅信息
+ * @param {*} deptld
+ * @param {*} isFollow
+ * @return {*}
+ */
+ getHouseStatisticInfo (isFollow) {
+ getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
this.disposeHouseEchart()
+
+ let xDate = []
+ let yDate = []
+ if (isFollow == 1) {
+ this.keyPlaceNum = res.data.data.count
+ } else {
+ this.realHouseNum = res.data.data.count
+ }
+ res.data.data.data.forEach(item => {
+ 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 = [34, 2, 33, 11, 22, 30, 14]
+ this.inithouseEcharts(xDate, yDate)
+ } else {
+ xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
+ yDate = [14, 13, 10, 17]
+ this.inithouseEcharts(xDate, yDate)
+ }
+
+ this.clickHouseChart()
+ } else {
+ this.inithouseEcharts(xDate, yDate)
+ }
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ }).catch(res => {
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ })
+ },
+
+ initLandOptions (xDate, yDate) {
+ return {
+ color: ['#0532ff'],
+ grid: {
+ top: '4%',
+ left: '12%',
+ right: '4%',
+ bottom: '28%'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: params => {
+ return `${params.marker} ${params.name}: ${params.value} 个`
+ },
+ backgroundColor: 'rgba(8, 56, 185, 0.9)',
+ borderColor: 'rgba(8, 56, 185, 0.9)',
+ textStyle: {
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xDate,
+ axisLabel: {
+ color: "#fff",
+ interval: 0,
+ rotate: 45,
+ fontSize: fontSize(10)
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#fff"
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ minInterval: 1,
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: fontSize(12)
+ }
+ },
+ 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]
+ // },
+ }
+ },
+ }
+ ],
+ // 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 // 鼠标移动能触发数据窗口平移
+ // }
+ // ]
+ }
+ },
+
+ clickPeopleChart () {
+ homePersonmyChart.on('click', params => {
+ 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)
+ this.clickPoliceStationId = params.data.id
+ } else {
+ this.$emit('showpeopledetail', params.data.id, params.data.name)
+ }
+ })
+ },
+
+ clickHouseChart (type) {
+ houseMyChart.on('click', params => {
+ console.log(params, 'clickHouseChart')
+ // 茅家岭单独判断
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ this.mjlClick(params)
+ return
+ }
+
+ if (type == '实有住宅') {
+ if (params.name == '住宿服务') {
+ this.$parent.zhuSuPage.currentPage = 1
+ this.$parent.zhuSuPopupShow = true
+ this.$parent.zhuSuLoading = true
+ this.getHotelList()
+
+ } else {
+ this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
+ this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
+ layerName: "jiudianLayer",
+ type: "VectorLayer",
+ })
+ this.$parent.syldPage.currentPage = 1
+ this.$parent.syldPopupTitle = params.name
+ this.syldBigType = params.name
+ this.syldName = ''
+ this.$parent.syldArr = []
+ this.$parent.syldPopupShow = true
+ this.$parent.syldLoading = true
+ this.getVillageStatisticDetail()
+ }
+
+ } else {
+ console.log('关注场所')
+ this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
+ this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
+ layerName: "jiudianLayer",
+ type: "VectorLayer",
+ })
+ this.$parent.gzcsPage.currentPage = 1
+ this.gzcsType = params.name
+ this.gzcsUnitName = ''
+ this.gzcsPerson = ''
+ this.gzcsPhone = ''
+ this.$parent.gzcsArr = []
+ this.$parent.gzcsPopupShow = true
+ this.$parent.gzcsLoading = true
+ this.getPlaceOfConcernStatisticDetail()
+ }
+ })
+ },
+
+ // 茅家岭账号点击现有住宅
+ mjlClick (params) {
+ console.log('params', params)
+ this.$parent.architectureTitle = params.name
+ if (params.name == '学校') {
+ this.$parent.xxPopupShow = true
+ this.$parent.houseArr = []
+ this.$parent.houseLoading = true
+ setTimeout(() => {
+ this.$parent.houseLoading = false
+ this.$parent.houseArr = schoolJSON
+ }, 1000)
+ } else {
+ this.$parent.architectureShow = true
+ this.$parent.architectureTable = []
+ this.$parent.architectureLoad = true
+
+ if (params.name == '医院') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = hospitalJSON
+ }, 1000)
+ }
+
+ if (params.name == '宾馆酒店') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = hotelJSON
+ }, 1000)
+ }
+
+ if (params.name == '数字经济') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = digitalJSON
+ }, 1000)
+ }
+
+ if (params.name == '房屋建筑业') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = housingJSON
+ }, 1000)
+ }
+
+ if (params.name == '批发业') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = wholesaleJSON
+ }, 1000)
+ }
+
+ if (params.name == '零售业') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = retailJSON
+ }, 1000)
+ }
+
+ if (params.name == '反恐重点目标') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = antiTerroristJSON
+ }, 1000)
+ }
+
+ if (params.name == '危爆品') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = dExplosionJSON
+ }, 1000)
+ }
+
+ if (params.name == '重点服务对象') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = serviceObjJSON
+ }, 1000)
+ }
+
+ if (params.name == '困难儿童') {
+ setTimeout(() => {
+ this.$parent.architectureLoad = false
+ this.$parent.architectureTable = difficultyJSON
+ }, 1000)
+ }
+ }
+ },
+
+ /**
+ * @description: 初始化重点人员饼状图
+ * @return {*}
+ */
+ async initkeyPersonEcharts () {
+ this.disposeEchart()
+
+ let personInfo = await this.getPersonInfo()
+ console.log('personInfo', personInfo)
+ keyPeopleDataLength = personInfo.length
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ personInfo = [
+ { count: 3, name: '非涉法涉诉重点个访人员', value: 7 },
+ { count: 1, name: '楼盘业主维权群体', value: 1 },
+ { count: 1, name: '欠薪讨债群体', value: 1 },
+ { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
+ { count: 11, name: '征地拆迁群体', value: 11 },
+ ]
+ }
+
+ const high = this.$refs.REFPERSONECHARTS.offsetHeight
+
+ if (personInfo.length * (high / 7) > high) {
+ this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
+ } else {
+ this.personEchartsHeight = '100%'
+ }
+
+ this.$nextTick(() => {
+ var chartDom = document.getElementById('PersonEcharts')
+ keyPersonmyChart = this.$echarts.init(chartDom)
+ 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 {*}
+ */
+ getPersonInfo () {
+ const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
+ console.log('getPersonInfo', { deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id })
+
+ res.data = res.data.map(item => {
+ item = {
+ ...item,
+ name: item.zdryxl,
+ value: item.count
+ }
+
+ return item
+ })
+
+ return res.data
+ })
+
+ return data
+ },
+
+ /**
+ * @description: 重点人员饼状图渲染的options
+ * @param {*} dataArr
+ * @return {*}
+ */
+ initkeyPersonOption (dataArr) {
+ let options
+
+ if (dataArr.length == 0) {
+ options = {
+ title: {
+ text: '暂无重点人员数据',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ color: '#fff',
+ fontWeight: 'normal',
+ fontSize: fontSize(14)
+ }
+ }
+ }
+ } else {
+ options = {
+ tooltip: {
+ trigger: 'item',
+ formatter: params => {
+ let msg
+ if (params.value > 10000) {
+ msg = (params.value / 10000).toFixed(2) + '万人'
+ } else {
+ msg = params.value + '人'
+ }
+ 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: {
+ orient: 'vertical',
+ top: 'middle',
+ right: '2%',
+ y: '1%',
+ itemGap: 15,
+ textStyle: {
+ color: '#fff'
+ },
+ align: 'left',
+ formatter: function (name) {
+ let data = dataArr
+ let tarValue
+ for (let i = 0; i < data.length; i++) {
+ if (data[i].name == name) {
+ tarValue = data[i].value
+ }
+ }
+ let v = tarValue
+ return `${name} ${v} 人 `
+ },
+ },
+ series: [
+ {
+ top: 110,
+ left: 60,
+ type: 'pie',
+ radius: [20, 50],
+ center: [0, 0],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ labelLine: {
+ show: false
+ },
+ data: dataArr
+ }
+ ],
+ grid: {
+ x: 10,
+ y: 10,
+ x2: 10,
+ y2: 20
+ },
+ }
+ }
+
+ return options
+ },
+
+ /**
+ * @description: 重点人员饼状图的点击事件
+ * @return {*}
+ */
+ async clickkeyPersonChart () {
+ keyPersonmyChart.on('click', async params => {
+ this.$emit('showkeypersondetail', params.name)
+ })
+ },
+
+ /**
+ * @description: 现有小区切换
+ * @param {*} type
+ * @return {*}
+ */
+ landTabClick (type) {
+ this.tabTypeThree = type
+ this.landEchartsLoading = true
+
+ this.disposeLandEchart()
+ if (type == 0) {
+ this.getAreaStatisticInfo(2)
+ } else if (type == 1) {
+ this.getAreaStatisticInfo(1)
+ }
+ },
+
+ /**
+ * @description: 获取现有小区数据
+ * @param {*} type
+ * @param {*} deptId
+ * @return {*}
+ */
+ getAreaStatisticInfo (type) {
+ getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
this.disposeLandEchart()
- if (leftTiming != null) {
- clearInterval(leftTiming)
- leftTiming = null
+ let landData = []
+ if (type == 2) {
+ this.areaNum = res.data.data.areaNum
+ this.villageNum = res.data.data.villageNum
+ let nameArr = []
+ let countArr = []
+ res.data.data.data.forEach(item => {
+ nameArr.push(item.name.replace('派出', '').replace('居民委员会', ''))
+ countArr.push({ value: item.count, id: item.id })
+ })
+ landData = [nameArr, countArr]
+ } else if (type == 1) {
+ // this.areaNum = res.data.data.areaNum
+ // this.villageNum = res.data.data.villageNum
+ let nameArr = []
+ let countArr = []
+ res.data.data.data.forEach(item => {
+ nameArr.push(item.name.replace('派出', ''))
+ countArr.push({ value: item.count, id: item.id })
+ })
+ landData = [nameArr, countArr]
}
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
+
+ this.initLandEcharts(landData)
+ }).catch(res => {
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
+ })
+ },
+
+ /**
+ * @description: 现有小区图表渲染
+ * @param {*} landData
+ * @return {*}
+ */
+ initLandEcharts (landData) {
+ this.disposeLandEchart()
+ var chartDom = document.getElementById('landEcharts')
+
+ landMyChart = this.$echarts.init(chartDom)
+
+ landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
+
+ this.clickLandChart()
+ },
+
+ /**
+ * @description: 现有小区图表点击事件
+ * @return {*}
+ */
+ clickLandChart () {
+ landMyChart.on('click', params => {
+ console.log('clickLandChart')
+ if (this.tabTypeThree == 0) {
+ this.$emit('showlanddetail', params.name, 2, params.data.id)
+ } else {
+ this.$emit('showlanddetail', params.name, 1, params.data.id)
+ }
+ })
+ },
+
+ /**
+ * @description: 视图窗口改变时，echarts图表重置
+ * @return {*}
+ */
+ echartsResize () {
+ homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
+ landMyChart && landMyChart != null && landMyChart.resize()
+ keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
+ houseMyChart && houseMyChart != null && houseMyChart.resize()
+ },
+
+ /**
+ * @description: 销毁所有echarts实例，解绑点击事件
+ * @return {*}
+ */
+ disposeEchart () {
+ if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
+ homePersonmyChart.dispose()
+ homePersonmyChart.off('click')
+ }
+
+ if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
+ keyPersonmyChart.dispose()
+ keyPersonmyChart.off('click')
+ }
+ },
+
+ /**
+ * @description: 销毁所有echarts实例，解绑点击事件
+ * @return {*}
+ */
+ disposeHouseEchart () {
+ if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
+ houseMyChart.clear()
+ houseMyChart.dispose()
+ houseMyChart.off('click')
+ }
+ },
+
+ /**
+ * @description: 销毁所有echarts实例，解绑点击事件
+ * @return {*}
+ */
+ disposeLandEchart () {
+ if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
+ landMyChart.dispose()
+ landMyChart.off('click')
+ }
+ },
+
+
+ },
+
+ destroyed () {
+ window.removeEventListener("resize", this.echartsResize)
+ this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
+ this.disposeEchart()
+ this.disposeHouseEchart()
+ this.disposeLandEchart()
+
+ if (leftTiming != null) {
+ clearInterval(leftTiming)
+ leftTiming = null
}
+ }
}
</script>
<style scoped lang="scss">
.container {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .person-box {
+ .word {
+ color: #fff;
+ font-size: 14px;
+ }
+
+ .before {
+ margin-left: 108px;
+ }
+
+ .back {
+ color: #fff;
+ position: absolute;
+ top: 96px;
+ right: 16px;
+ width: 20px;
+ height: 20px;
+ font-size: 20px;
+ cursor: pointer;
+ }
+
+ .back:hover {
+ color: #43bafe;
+ }
+
+ .back::after {
+ font-family: element-icons;
+ content: '\e6ea';
+ }
+ }
+
+ .person-box,
+ .house-box,
+ .land-box {
+ margin: 8px;
+ flex: 1;
display: flex;
- position: relative;
- width: 100%;
- height: 100%;
+ flex-direction: column;
+ // background: $bg-color;
- .person-box {
- .word {
- color: #fff;
- font-size: 14px;
- }
+ background-image: url(/img/box/box-bg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
- .before {
- margin-left: 108px;
- }
-
- .back {
- color: #fff;
- position: absolute;
- top: 96px;
- right: 16px;
- width: 20px;
- height: 20px;
- font-size: 20px;
- cursor: pointer;
- }
-
- .back:hover {
- color: #43bafe;
- }
-
- .back::after {
- font-family: element-icons;
- content: '\e6ea';
- }
+ .box {
+ display: flex;
+ position: absolute;
+ flex-direction: column;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 11;
}
- .person-box,
- .house-box,
- .land-box {
- margin: 8px;
+ .title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ padding: 0 18px 0 18px;
+ position: relative;
+ font-size: 16px;
+
+ 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;
+ }
+
+ &>div:nth-of-type(2) {
+ font-size: 14px;
+ }
+ }
+
+ // .sub-title {
+ // display: flex;
+ // justify-content: space-between;
+ // height: 36px;
+ // }
+
+ .sub-tab {
+ padding: 10px;
+ display: flex;
+ color: #99cccc;
+
+ .tab,
+ .tab3 {
+ margin: 0 10px;
flex: 1;
+ background: $sub-tab-bg-color;
+ border-radius: 8px;
+ cursor: pointer;
+ height: 22px;
display: flex;
- flex-direction: column;
- // background: $bg-color;
+ align-items: center;
+ justify-content: center;
- background-image: url(/img/box/box-bg.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
-
- .box {
- display: flex;
- position: absolute;
- flex-direction: column;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 11;
+ &>div {
+ height: 22px;
+ line-height: 22px;
+ white-space: nowrap;
}
+ }
- .title {
- display: flex;
- align-items: center;
- justify-content: space-between;
+ .tab {
+ display: flex;
+ justify-content: center;
+ }
- padding: 0 18px 0 18px;
- position: relative;
- font-size: 16px;
-
- 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;
- }
-
- &>div:nth-of-type(2) {
- font-size: 14px;
- }
- }
-
- // .sub-title {
- // display: flex;
- // justify-content: space-between;
- // height: 36px;
- // }
-
- .sub-tab {
- padding: 10px;
- display: flex;
- color: #99cccc;
-
- .tab,
- .tab3 {
- margin: 0 10px;
- flex: 1;
- background: $sub-tab-bg-color;
- border-radius: 8px;
- cursor: pointer;
- height: 22px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &>div {
- height: 22px;
- line-height: 22px;
- white-space: nowrap;
- }
- }
-
- .tab {
- display: flex;
- justify-content: center;
- }
-
- .tab1 {
- width: 50%;
- margin-left: 25% !important;
- display: flex;
- justify-content: center;
- margin: 0 10px;
- background: $sub-tab-bg-color;
- border-radius: 8px;
- cursor: pointer;
- height: 22px;
- display: flex;
- align-items: center;
- }
- }
-
- :deep(.el-main) {
- padding: 0;
- }
-
- .echarts-box {
- padding: 12px;
- padding-top: 0;
- flex: 1;
- width: 100%;
- // height: 100%;
- }
+ .tab1 {
+ width: 50%;
+ margin-left: 25% !important;
+ display: flex;
+ justify-content: center;
+ margin: 0 10px;
+ background: $sub-tab-bg-color;
+ border-radius: 8px;
+ cursor: pointer;
+ height: 22px;
+ display: flex;
+ align-items: center;
+ }
}
- .house-box {
- margin-top: 0;
- margin-bottom: 0;
-
- .title {
- height: 54px;
- line-height: 54px;
- }
+ :deep(.el-main) {
+ padding: 0;
}
- :deep(.el-table__body-wrapper) {
- overflow-x: hidden !important;
+ .echarts-box {
+ padding: 12px;
+ padding-top: 0;
+ flex: 1;
+ width: 100%;
+ // height: 100%;
}
+ }
+
+ .house-box {
+ 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;
+ 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;
+ 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;
- }
+ 0% {
+ stroke-dashoffset: 0;
+ }
- 100% {
- stroke-dashoffset: 888;
- }
+ 100% {
+ stroke-dashoffset: 888;
+ }
}
</style>
--
Gitblit v1.9.3