From de0c892382c2977310244b9a2393aeda5ba75524 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 10 Dec 2021 11:06:54 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E5=85=83=E5=8C=96=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/visual/measure/volunteer.vue | 255 ++++++++++++++---- 1 file changed, 210 insertions(+), 45 deletions(-) diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue index 3f2728f2..8850c540 100644 --- a/src/views/modules/visual/measure/volunteer.vue +++ b/src/views/modules/visual/measure/volunteer.vue @@ -2,7 +2,8 @@
- +
志愿者服务情况
@@ -26,11 +27,12 @@
-
+
- +
- +
@@ -51,17 +53,19 @@
-
+
- + - + - +
- +
多元化治理平面图
@@ -91,7 +95,10 @@
- 这里是地图容器 +
@@ -103,6 +110,7 @@ import { requestPost } from "@/js/dai/request"; import screenTable from "../components/screen-table/index"; import cptCard from "@/views/modules/visual/cpts/card"; import nextTick from "dai-js/tools/nextTick"; +import screenMap from "@/views/modules/visual/components/screen-map"; import * as echarts from 'echarts'; export default { @@ -110,8 +118,9 @@ export default { components: { cptCard, screenTable, + screenMap }, - data() { + data () { return { warningList: [], headerList: [ @@ -135,16 +144,62 @@ export default { total: 0, activeIndex: 0, activeLevel: "1", + + //地图相关数据 + isfirstInit: true,//记录是否是首次加载地图 + agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level + unitMapList: [], + unitMapList1: [ + { + type: '党建楼宇', + name: '建联单位1', + latitude: 36.062227, + longitude: 120.389455, + }, + { + type: '党建楼宇', + name: '建联单位2', + latitude: 36.082227, + longitude: 120.389455, + }, + { + type: '机关直属部门', + name: '建联单位3', + latitude: 36.062227, + longitude: 120.379455, + }, + { + type: '两新党建', + name: '建联单位4', + latitude: 36.082227, + longitude: 120.379455, + }, + { + type: '辖区单位', + name: '建联单位5', + latitude: 36.092227, + longitude: 120.379455, + }, + { + type: '其他', + name: '建联单位6', + latitude: 36.102227, + longitude: 120.379455, + } + ], }; }, - async mounted() { + async mounted () { await nextTick(100); this.initCharts() this.initCount() this.getBuildingwarnlist(); + + await this.getWorkUserInfo() + await this.getMapUnitList() }, methods: { - initCharts() { + initCharts () { const eId = document.getElementById('echartService') let _charts = echarts.init(eId) let option = { @@ -192,21 +247,21 @@ export default { fontWeight: 'bold' } }, - + data: [ - { - value: 104, - name: '党员', + { + value: 104, + name: '党员', itemStyle: { color: 'rgba(26, 178, 255, 1)' - } + } }, - { - value: 735, - name: '居民', + { + value: 735, + name: '居民', itemStyle: { color: 'rgba(250, 193, 38, 1)' - } + } } ] } @@ -215,7 +270,7 @@ export default { option && _charts.setOption(option); }, - initCount() { + initCount () { const eId = document.getElementById('echartCount') let _charts = echarts.init(eId) let option = { @@ -266,21 +321,21 @@ export default { fontWeight: 'bold' } }, - + data: [ - { - value: 1048, - name: '党员', + { + value: 1048, + name: '党员', itemStyle: { color: 'rgba(26, 178, 255, 1)' - } + } }, - { - value: 735, - name: '居民', + { + value: 735, + name: '居民', itemStyle: { color: 'rgba(250, 193, 38, 1)' - } + } } ] } @@ -289,15 +344,15 @@ export default { option && _charts.setOption(option); }, - - onClickList(index, level) { + + onClickList (index, level) { this.activeIndex = index; this.activeLevel = level; this.pageNo = 1; this.getUserwarnlist(); }, //具体人员列表 - async getUserwarnlist() { + async getUserwarnlist () { const { activeIndex, activeLevel, warningList } = this; const reqItem = warningList[activeIndex]; let tableData = []; @@ -323,7 +378,7 @@ export default { } }, // 【人员预警】 楼宇预警数量列表 - async getBuildingwarnlist() { + async getBuildingwarnlist () { const url = "/epmetuser/statsresiwarn/buildingwarnlist"; let params = { agencyId: this.$store.state.user.agencyId, @@ -336,14 +391,109 @@ export default { } else { } }, - pageSizeChangeHandleNew(val) { + pageSizeChangeHandleNew (val) { this.pageNo = 1; this.pageSize = val; }, - pageCurrentChangeHandleNew(val) { + pageCurrentChangeHandleNew (val) { this.pageNo = val; this.getUserwarnlist(); }, + + // 获取当前管理员信息 + getWorkUserInfo () { + const url = '/epmetuser/customerstaff/staffbasicinfo' + let params = {} + window.app.ajax.post( + url, + params, + (data, rspMsg) => { + this.agencyInfo = data + if (!data.latitude) { + this.agencyInfo.latitude = 36.072227 + } + if (!data.longitude) { + this.agencyInfo.longitude = 120.389455 + } + if (!data.level) { + this.agencyInfo.level = 'street' + } + + }, + (rspMsg, data) => { + this.$message.error(rspMsg) + } + ) + + }, + + //获取联建单位分布图 + async getMapUnitList () { + // const url = "/heart/icpartyunit/distribution" + const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution" + + let params = { + agencyId: this.$store.state.user.agencyId + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + // this.unitMapList = data + this.unitMapList = this.unitMapList1 + + this.unitMapList.forEach(item => { + + if (item.type === '党建楼宇') { + item.urlIndex = 0 + } else if (item.type === '两新党建') { + item.urlIndex = 1 + } else if (item.type === '辖区单位') { + item.urlIndex = 2 + } else if (item.type === '机关直属部门') { + item.urlIndex = 3 + } else if (item.type === '其他') { + item.urlIndex = 4 + } + }); + + + this.iconUrlArray = [ + require('../../../../assets/img/shuju/measure/ly@2x.png'),//未处理 + require('../../../../assets/img/shuju/measure/jgzs@2x.png'),//已处理 + require('../../../../assets/img/shuju/measure/lxdj@2x.png'),//已处理 + require('../../../../assets/img/shuju/measure/xq@2x.png'),//已处理 + require('../../../../assets/img/shuju/measure/qita.png')//已处理 + ] + + + //第一次加载完置为false + this.loadMap() + + this.isfirstInit = false + + } else { + this.$message.error(msg) + } + + }, + + + //加载地图数据 + loadMap () { + if (this.isfirstInit) { + //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray + this.$refs.map.loadMap(this.agencyInfo, null, null, this.unitMapList, this.iconUrlArray, null) + } else { + this.$refs.map.refreshMap(null, this.unitMapList) + + } + }, + + //点击项目 + clickProject (feature) { + console.log('标注信息', feature.values_.properties) + }, }, }; @@ -383,12 +533,11 @@ export default { color: #fff; font-weight: 800; } - } .card-echart { display: flex; margin-top: 40px; - + .card-left { position: relative; flex: 1; @@ -432,7 +581,8 @@ export default { box-sizing: border-box; margin-top: 20px; // padding-left: 192px; - background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat; + background: url("../../../../assets/img/shuju/measure/dangyuan.png") center + no-repeat; background-size: cover; .card-count-content { position: relative; @@ -447,14 +597,14 @@ export default { .card-count-label { margin-top: 6px; font-size: 16px; - color: rgba(255, 255, 255, .72); + color: rgba(255, 255, 255, 0.72); } } .card-count-content::after { position: absolute; top: 50%; left: 0; - content: ''; + content: ""; width: 1px; height: 50px; margin-top: -25px; @@ -462,7 +612,8 @@ export default { } } .card-count-item:last-child { - background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat; + background: url("../../../../assets/img/shuju/measure/jumin.png") center + no-repeat; } } @@ -472,6 +623,7 @@ export default { flex-wrap: wrap; padding-top: 10px; padding-bottom: 20px; + .map-tips-item { display: flex; align-items: center; @@ -482,7 +634,7 @@ export default { height: 10px; box-sizing: border-box; margin-right: 10px; - background: #DD2719; + background: #dd2719; border-radius: 2px; } .map-tips-label { @@ -492,4 +644,17 @@ export default { } } +.card-wr-map { + height: calc(100vh - 110px); + + .card-map { + width: 100%; + height: calc(100vh - 255px); + + .map { + width: 100%; + height: 100%; + } + } +}