From de0c892382c2977310244b9a2393aeda5ba75524 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 10 Dec 2021 11:06:54 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=A4=9A=E5=85=83=E5=8C=96=E5=9C=B0?= =?UTF-8?q?=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 3f2728f29..8850c5402 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%; + } + } +} From 07741c17d0047be6fadd7887f3ba8d92926e2c61 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 10 Dec 2021 15:10:34 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=86=E5=B8=83?= =?UTF-8?q?=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/visual/distributionAnalyze.scss | 181 +++---- src/router/index.js | 2 +- .../communityGovern/distributionAnalyze.vue | 469 ++++++++---------- .../communityGovern/distributionLineOption.js | 44 +- 4 files changed, 340 insertions(+), 356 deletions(-) diff --git a/src/assets/scss/modules/visual/distributionAnalyze.scss b/src/assets/scss/modules/visual/distributionAnalyze.scss index a5c3918e1..5962bd080 100644 --- a/src/assets/scss/modules/visual/distributionAnalyze.scss +++ b/src/assets/scss/modules/visual/distributionAnalyze.scss @@ -8,44 +8,94 @@ font-family: PingFang SC; font-weight: 800; color: #ffffff; - display: flex; - align-items: center; + position: relative; - img { - display: block; - margin-right: 5px; - } - span { - display: block; - } + .card-title { + display: flex; + align-items: center; - .second-select { - margin: 0 10px 0 40px; + img { + display: block; + margin-right: 5px; + } + span { + display: block; + } + } - ::v-deep .el-input { - width: 140px; - height: 36px; - .el-input__inner { - height: 100%; - padding: 0 10px; - color: #fff; - line-height: 36px; + .second-title { + display: block; + display: flex; + align-items: center; + margin-top: 20px; + .second-title-label { + position: relative; + padding-left: 40px; + font-size: 16px; + font-weight: 500; + color: #fff; + } + .second-title-label::after { + content: ''; + position: absolute; + top: 50%; + left: 20px; + width: 12px; + height: 12px; + box-sizing: border-box; + margin-top: -6px; + background: #2865fa; + border-radius: 50%; + } + .second-select { + margin: 0 10px 0 40px; + ::v-deep .el-input { + width: 180px; + height: 36px; + .el-input__inner { + height: 100%; + padding: 0 10px; + color: #fff; + line-height: 36px; + background: #06186d; + border: 1px solid #1a64cc; + } + + .el-icon-arrow-up:before { + content: '\e78f'; + } + // .el-select__caret:before { + // content: '\E790' + // } + } + ::v-deep .el-date-editor { + width: 360px; + position: relative; background: #06186d; border: 1px solid #1a64cc; - } - .el-icon-arrow-up:before { - content: '\e78f'; + .el-range-input { + color: #fff; + background: #06186d; + } + .el-range-separator { + color: #fff; + } + .el-range__icon { + position: absolute; + right: 5px; + // float: right; + } + .el-input__prefix { + left: unset; + right: 5px; + } } } - ::v-deep .el-date-editor { - .el-input__prefix { - left: unset; - right: 5px; - } + .second-select:last-child { + margin-left: 0; } } - .cascader { ::v-deep .el-input { width: 220px; @@ -66,70 +116,29 @@ flex-direction: row; // flex-wrap: wrap; // justify-content: center; - height: calc(100vh - 130px); + height: calc(100vh - 230px); .g-l { - flex-shrink: 0; - width: 600px; - height: calc(100vh - 190px); - } - - .g-r { - text-align: center; - margin: 40px 19px 20px; - width: calc(100vw - 60px - 600px); - height: calc(100vh - 140px - 20px); - } -} - -.g-r { - .tb { - position: relative; - height: calc(100vh - 220px); - overflow-y: auto; - @include scrollBar; - - .m-pagination { - position: absolute; - box-sizing: border-box; - right: 0; - bottom: 0; - + width: 50%; + height: calc(100vh - 290px); + + .echart-line { + margin-left: 30px; + // margin-top: 100px; + text-align: center; + position: relative; width: 100%; - height: 40px; - display: flex; - justify-content: flex-end; - - /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { - background: #0266d1; - color: #000d3f; - } - - /deep/ .el-pagination .el-pager li { - background: #002e74; - } - - /deep/ .el-pagination .btn-prev { - background: #002e74; - } - - /deep/ .el-pagination .btn-next { - background: #002e74; + height: 100%; + box-sizing: border-box; + .echart-org { + width: 100%; + height: 90%; } } } -} -.echart-wr { - margin-left: 30px; - // margin-top: 100px; - text-align: center; - position: relative; - width: 500px; - height: 100%; - box-sizing: border-box; - .echart-org { - width: 100%; - height: 90%; + .g-r { + width: 50%; + height: calc(100vh - 290px); } } diff --git a/src/router/index.js b/src/router/index.js index fff616d17..bc43c78a3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -274,7 +274,7 @@ router.beforeEach((to, from, next) => { }, { url: "/visual/communityGovern/distributionAnalyze", - name: "事件分类分析", + name: "项目分布分析", id: "distributionAnalyze", }, ], diff --git a/src/views/modules/visual/communityGovern/distributionAnalyze.vue b/src/views/modules/visual/communityGovern/distributionAnalyze.vue index c4e04f5ca..f75fa2f6c 100644 --- a/src/views/modules/visual/communityGovern/distributionAnalyze.vue +++ b/src/views/modules/visual/communityGovern/distributionAnalyze.vue @@ -1,62 +1,50 @@