diff --git a/src/components/table-tree-column/index.vue b/src/components/table-tree-column/index.vue new file mode 100644 index 000000000..7185635ef --- /dev/null +++ b/src/components/table-tree-column/index.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/main.js b/src/main.js index 296c9448f..90e2269f2 100644 --- a/src/main.js +++ b/src/main.js @@ -70,6 +70,22 @@ Vue.use(Element, { i18n: (key, value) => i18n.t(key, value), }); +// 弹窗底部滚动问题 弹窗需配合v-if使用 +Vue.directive('fixed', { + inserted() { + let scrollTop = document.body.scrollTop || document.documentElement.scrollTop + document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;' + }, + unbind () { + let body = document.body + body.style.position = '' + let top = body.style.top + document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top) + body.style.top = '' + } +}) + + // 挂载全局 Vue.prototype.$http = http; // Vue.prototype.$getDictLabel = getDictLabel diff --git a/src/router/index.js b/src/router/index.js index f96f01b64..4617a3804 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -268,6 +268,11 @@ router.beforeEach((to, from, next) => { name: "社区党建", // url: "visual/basicinfo/basicInfoMain", children: [ + { + url: "/visual/communityParty/gridParty", + name: "网格党建平面图", + id: "5feawfwaefwa579", + }, { url: "/visual/communityParty/party", name: "党员信息统计", diff --git a/src/utils/request.js b/src/utils/request.js index c03d1ae4a..7de9ad4cb 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -21,7 +21,7 @@ http.interceptors.request.use(config => { // 默认参数 var defaults = {} // 防止缓存，GET请求默认带_t参数 - if (config.method === 'get') { + if (config.method == 'get') { config.params = { ...config.params, ...{ '_t': new Date().getTime() } diff --git a/src/views/main-shuju/main.vue b/src/views/main-shuju/main.vue index af3746eb0..8d4f0bc2c 100644 --- a/src/views/main-shuju/main.vue +++ b/src/views/main-shuju/main.vue @@ -118,6 +118,7 @@ export default { localStorage.setItem("customerId", data.customerId); localStorage.setItem("staffId", data.id); localStorage.setItem("agencyId", data.agencyId); + localStorage.setItem("level", data.level); if (!localStorage.getItem("customerName")) { localStorage.setItem("customerName", data.customerName || ""); } @@ -130,3 +131,35 @@ export default { + diff --git a/src/views/main.vue b/src/views/main.vue index 479c782f7..f12112f35 100644 --- a/src/views/main.vue +++ b/src/views/main.vue @@ -154,6 +154,7 @@ export default { localStorage.setItem("customerId", data.customerId); localStorage.setItem("staffId", data.id); localStorage.setItem("agencyId", data.agencyId); + localStorage.setItem("level", data.level); if (!localStorage.getItem("customerName")) { localStorage.setItem("customerName", data.customerName || ""); } diff --git a/src/views/modules/communityParty/members/cpts/points.vue b/src/views/modules/communityParty/members/cpts/points.vue new file mode 100644 index 000000000..11ee93f53 --- /dev/null +++ b/src/views/modules/communityParty/members/cpts/points.vue @@ -0,0 +1,344 @@ + + + + + \ No newline at end of file diff --git a/src/views/modules/communityParty/members/cpts/record.vue b/src/views/modules/communityParty/members/cpts/record.vue new file mode 100644 index 000000000..bfc176bd1 --- /dev/null +++ b/src/views/modules/communityParty/members/cpts/record.vue @@ -0,0 +1,305 @@ + + + + + \ No newline at end of file diff --git a/src/views/modules/communityParty/members/crateForm.vue b/src/views/modules/communityParty/members/crateForm.vue new file mode 100644 index 000000000..81543a215 --- /dev/null +++ b/src/views/modules/communityParty/members/crateForm.vue @@ -0,0 +1,449 @@ + + + + + \ No newline at end of file diff --git a/src/views/modules/communityParty/members/index.vue b/src/views/modules/communityParty/members/index.vue new file mode 100644 index 000000000..7652d0fd9 --- /dev/null +++ b/src/views/modules/communityParty/members/index.vue @@ -0,0 +1,945 @@ + + + + + + + diff --git a/src/views/modules/communityParty/regionalParty/activitysDetail.vue b/src/views/modules/communityParty/regionalParty/activitysDetail.vue index 70efa7af3..d40e4accf 100644 --- a/src/views/modules/communityParty/regionalParty/activitysDetail.vue +++ b/src/views/modules/communityParty/regionalParty/activitysDetail.vue @@ -98,7 +98,7 @@ - diff --git a/src/views/modules/communityParty/regionalParty/activitysForm.vue b/src/views/modules/communityParty/regionalParty/activitysForm.vue index 8bc70b9f8..8cb2862af 100644 --- a/src/views/modules/communityParty/regionalParty/activitysForm.vue +++ b/src/views/modules/communityParty/regionalParty/activitysForm.vue @@ -188,7 +188,7 @@ - diff --git a/src/views/modules/partymember/icpartymemberpayrecord-add-or-update.vue b/src/views/modules/partymember/icpartymemberpayrecord-add-or-update.vue new file mode 100644 index 000000000..ef39f37e8 --- /dev/null +++ b/src/views/modules/partymember/icpartymemberpayrecord-add-or-update.vue @@ -0,0 +1,160 @@ + + + diff --git a/src/views/modules/partymember/icpartymemberpayrecord.vue b/src/views/modules/partymember/icpartymemberpayrecord.vue new file mode 100644 index 000000000..94ea3b089 --- /dev/null +++ b/src/views/modules/partymember/icpartymemberpayrecord.vue @@ -0,0 +1,78 @@ + + + diff --git a/src/views/modules/partymember/icpartymemberpayrecorddetail-add-or-update.vue b/src/views/modules/partymember/icpartymemberpayrecorddetail-add-or-update.vue new file mode 100644 index 000000000..dcc0a8e5f --- /dev/null +++ b/src/views/modules/partymember/icpartymemberpayrecorddetail-add-or-update.vue @@ -0,0 +1,160 @@ + + + diff --git a/src/views/modules/partymember/icpartymemberpayrecorddetail.vue b/src/views/modules/partymember/icpartymemberpayrecorddetail.vue new file mode 100644 index 000000000..f6893f475 --- /dev/null +++ b/src/views/modules/partymember/icpartymemberpayrecorddetail.vue @@ -0,0 +1,284 @@ + + + + diff --git a/src/views/modules/partymember/icpartymemberpoint.vue b/src/views/modules/partymember/icpartymemberpoint.vue new file mode 100644 index 000000000..65896a7ab --- /dev/null +++ b/src/views/modules/partymember/icpartymemberpoint.vue @@ -0,0 +1,228 @@ + + + + diff --git a/src/views/modules/partymember/icpartyorg-add-or-update.vue b/src/views/modules/partymember/icpartyorg-add-or-update.vue new file mode 100644 index 000000000..be97ec4a4 --- /dev/null +++ b/src/views/modules/partymember/icpartyorg-add-or-update.vue @@ -0,0 +1,496 @@ + + + + + + diff --git a/src/views/modules/partymember/icpartyorg.vue b/src/views/modules/partymember/icpartyorg.vue new file mode 100644 index 000000000..158ef6662 --- /dev/null +++ b/src/views/modules/partymember/icpartyorg.vue @@ -0,0 +1,84 @@ + + + diff --git a/src/views/modules/partymember/icpartyorgtree.vue b/src/views/modules/partymember/icpartyorgtree.vue new file mode 100644 index 000000000..ea30b4400 --- /dev/null +++ b/src/views/modules/partymember/icpartyorgtree.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/src/views/modules/partymember/lookMember.vue b/src/views/modules/partymember/lookMember.vue new file mode 100644 index 000000000..96cbe4faf --- /dev/null +++ b/src/views/modules/partymember/lookMember.vue @@ -0,0 +1,95 @@ + + + + + + + + diff --git a/src/views/modules/plugins/rent/rentcontractinfo-add-or-update.vue b/src/views/modules/plugins/rent/rentcontractinfo-add-or-update.vue index 624586e2c..8175db9b2 100644 --- a/src/views/modules/plugins/rent/rentcontractinfo-add-or-update.vue +++ b/src/views/modules/plugins/rent/rentcontractinfo-add-or-update.vue @@ -258,17 +258,27 @@ export default { if (res.code !== 0) { return this.$message.error(res.msg) } - this.$message({ - message: this.$t('prompt.success'), - type: 'success', - duration: 500, - onClose: () => { - this.visible = false - this.$emit('refreshDataList') - } - }) + // 调用文件下发权限接口 + this.fileJurisdiction(params) }).catch(() => {}) }, + // 文件下发权限接口 + fileJurisdiction (params) { + this.$http.post('/pli/power/rentContractInfo/send', params).then(({ data: res }) => { + if (res.code !== 0) { + return this.$message.error(res.msg) + } + this.$message({ + message: this.$t('prompt.success'), + type: 'success', + duration: 500, + onClose: () => { + this.visible = false + this.$emit('refreshDataList') + } + }) + }).catch(() => {}) + }, // 表单提交 dataFormSubmitHandle: debounce(function () { this.$refs['dataForm'].validate((valid) => { diff --git a/src/views/modules/visual/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue index 4ca3c39e0..73af5c970 100644 --- a/src/views/modules/visual/communityParty/community.vue +++ b/src/views/modules/visual/communityParty/community.vue @@ -15,7 +15,7 @@ -
+
+
-
联建活动分类统计
+
联建单位分布
+
+
+
+ +
+ +
+ +
+ + +
+ +
+
+
+ +
+ +
+
+ +
+
+
联建活动分类统计
+ +
+
+ + + + +
+
+ + +
+
-
-
联建单位分布
-
- -
-
-
-
{{ item.label }}
-
{{ item.value }}
-
- -
-
-
- -
-
-
-
- -
-
{{ item.label }}
-
-
-
-
- +
@@ -127,7 +193,10 @@ import screenTable from "../components/screen-table/index"; import cptCard from "@/views/modules/visual/cpts/card"; import nextTick from "dai-js/tools/nextTick"; import dialogInfo from './dialogInfo.vue' +import unitInfo from './unitInfo.vue' import screenMap from "@/views/modules/visual/components/screen-map"; +import screenEchartsFrame from "../components/screen-echarts-frame"; +import { pieOption } from './options' export default { name: "warning-box", @@ -135,14 +204,33 @@ export default { cptCard, screenTable, dialogInfo, - screenMap + unitInfo, + screenMap, + screenEchartsFrame }, data () { return { showedMoreInfo: false, + showedUnitMoreInfo: false, tableLoading: false, warningList: [], + headerTypeList: [ + { title: "序号", coulmn: 'index' }, + { title: "单位名称", coulmn: 'unitName' }, + { title: "单位类型", coulmn: 'type' }, + ], + headerStyle: [ + { + 'width': '60px' + }, + { + 'min-width': '160px' + }, + { + 'width': '160px' + } + ], headerList: [ { title: "序号", coulmn: 'index' }, { title: "活动标题", coulmn: 'title' }, @@ -156,6 +244,7 @@ export default { // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], ], detailId: '', + unitdetailId: '', agencyId: '', value2: '', timeRange: '', @@ -164,10 +253,15 @@ export default { pageNo: 1, pageSize: 10, total: 0, + unitpageNo: 1, + unitpageSize: 10, + unitTotal: 0, + unitTableData: [], activeIndex: 0, activeLevel: "1", selectAgency: '', unitList: [], + unitType: '', propTree: [], partyItem: [], cateInfo: [], @@ -176,7 +270,20 @@ export default { agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level unitMapList: [], - detailInfo: {} + detailInfo: {}, + unitdetailInfo: {}, + pieEduChartSs: null, + pieEduOptions: null, + eduList: [], + partyCode: '', + totalCount: 0, + noInit: false, + orgData: [], + orgId: '', + orgLevel: '', + parentPolygon: [], + unitAclist: [], + showMap: false }; }, async mounted () { @@ -186,13 +293,16 @@ export default { this.initTime() await nextTick(100); await this.getAgencyList() + await this.loadOrgData() + await this.getCateType(this.agencyId) this.loadUnit() this.getList(this.agencyId) + this.getUnitList(this.agencyId) this.getCateCount(this.agencyId) - this.getCateType(this.agencyId) + await this.getWorkUserInfo() - await this.getMapUnitList(this.agencyId) + // await this.getMapUnitList(this.agencyId) }, watch: { timeRange (val) { @@ -202,6 +312,119 @@ export default { } }, methods: { + pieInitOks (dom) { + console.log('pies准备好了', dom) + this.pieEduChartS = dom + // this.pieInitState = true + + }, + initEduCharts() { + // const eId = document.getElementById('echartOrg') + // let _charts = echarts.init(eId) + let option = { + + } + let legend = { + show: true, + orient: 'vertical', + top: '20%', + right: 0, + textStyle: { + width: 90, + color: '#fff', + rich: { + a: { + width: 90 + } + } + }, + formatter: name => { + for (let a = 0; a < this.partyItem.length; a++) { + // this.data 这个数据中有名称和次数 + if (this.partyItem[a].name === name) { + //两个名称进行对比，取出对应的次数 + let params1 = name + "\n"; //然后return你需要的legend格式即可 + console.log(params1); + let tmp = params1.split("\n"); + let res = "" + params1; + for (let i in tmp) { + res = res.replace(tmp[i], ""); + } + return res + params1; + } + } + } + } + this.pieEduOptions = pieOption(this.pieEduChartS) + this.pieEduOptions.legend = { ...legend } + // this.pieEduOptions.series[1].width = 400 + this.clickEduPie(0) + let fun = params => { + this.clickEduPie(params.dataIndex) + } + this.$refs.eduChart.handleClick(fun) + // this.noInit = true + // option && this.$refs.pieChart.setOption(option); + + }, + clickEduPie (seriesIndex) { + let _code = '' + let isClick = false + this.partyItem.forEach((element, index) => { + if (index === seriesIndex) { + _code = element.code + + if (!this.noInit) isClick = false + else { + element.isClick = !element.isClick + isClick = element.isClick + } + + element.label = { + show: true, + + }; + element.labelLine = { + show: true, + lineStyle: { + opacity: 1, + } + + }; + console.log('zlcm') + } else { + element.isClick = false + element.label = { + show: false, + + }; + element.labelLine = { + show: false, + lineStyle: { + opacity: 0, + color: 'rgba(255,255,255,0)' + } + + }; + + } + }); + this.unitType = isClick && _code || '' + this.pieEduOptions.title.text = this.totalCount + this.pieEduOptions.series[1].data = this.partyItem + // this.$refs.pieChart.hideLoading() + this.$refs.eduChart.setOption(this.pieEduOptions) + if (this.noInit) { + const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') + const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' + this.unitpageNo = 1 + this.getUnitList(_arr[0]) + // this.getCateType(_arr[0], isClick && _code || '') + } + this.noInit = true + + + }, handleTimeChange (time) { if (time) { const startTimeArray = util.dateFormatter(time[0], 'date').split('-') @@ -218,7 +441,35 @@ export default { this.getList(this.agencyId); this.getCateCount(this.agencyId) }, - //具体人员列表 + // 根据单位获取活动类表 + async getAcList (agencyId, unitId) { + + const url = "/heart/icpartyactivity/activitylist" + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list" + let params = { + pageNo: 1, + pageSize: 9999, + agencyId, + unitId + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + this.unitAclist = data.list && data.list.map((item, index) => { + return { + ...item, + index: index + 1 + } + }) + if (this.unitAclist.length > 0) this.showedUnitMoreInfo = true + else this.$message.warning('该单位还没有活动') + + } else { + this.$message.error(msg) + } + }, + //具体活动列表 async getList (agencyId) { this.visibleLoading = true @@ -248,6 +499,47 @@ export default { } this.visibleLoading = false }, + // 获取联建单位 + async getUnitList (agencyId) { + this.visibleLoading = true + // this.showMap = false + const url = "/heart/icpartyunit/listbrief" + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list" + let params = { + agencyId, + pageSize: this.unitpageSize, + pageNo: this.unitpageNo, + type: this.unitType + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + this.showMap = false + this.unitTotal = data.total + this.unitTableData = data.list.map((item, index) => { + return { + ...item, + index: index + 1 + } + }) + const url = require('../../../../assets/img/shuju/measure/other.png') + this.iconUrlArray = [url] + + this.showMap = true + //第一次加载完置为false + this.$nextTick(() => { + + this.loadMap() + this.$forceUpdate() + this.isfirstInit = false + }) + // this.isfirstInit = false + } else { + this.$message.error(msg) + } + this.visibleLoading = false + }, async getAgencyList () { // const url = "/gov/org/customeragency/staffinagencylist"; // const url = '/gov/org/customeragency/agencygridtree' @@ -269,6 +561,35 @@ export default { this.$message.error(msg) } }, + async loadOrgData () { + + const url = "/gov/org/agency/maporg" + let params = { + orgId: this.orgId, + level: this.orgLevel + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + + this.orgData = data + this.orgId = this.orgData.id + this.orgLevel = this.orgData.level + this.parentPolygon = [] + this.parentPolygon = data.children.map(item => { + return { + ...item, + color: "#00E5ED", + fillColor: "rgba(0, 229, 237, 0.16)" + } + }) + + } else { + this.$message.error(msg) + } + + }, getTreeData (data) { if (!Array.isArray(data)) return [] let arr = data.map(item => { @@ -369,9 +690,16 @@ export default { this.partyItem = data.map((item, index) => { return { ...item, - ...colorItem[index] + ...colorItem[index], + name: item.label, + isClick: false } }) + this.totalCount = 0 + data.forEach(item => { + this.totalCount += Number(item.value) + }) + this.initEduCharts() } else { this.$message.error(msg) } @@ -393,16 +721,24 @@ export default { this.$message.error(msg) } }, - handleCascader (val) { + async handleCascader (val) { console.log('val-vvv', val) if (val.length > 0) { const _arr = val[val.length - 1].split('-') const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid' this.agencyId = _arr[0] + this.orgId = _arr[0] + this.orgLevel = orgType + this.unitType = '' this.getList(_arr[0]) - this.getMapUnitList(_arr[0]) + await this.getCateType(_arr[0]) + await this.loadOrgData() + this.agencyInfo = { ...this.orgData } + console.log('agencyInfo-----', this.agencyInfo) + this.getUnitList(_arr[0]) + // this.getMapUnitList(_arr[0]) this.getCateCount(_arr[0]) - this.getCateType(_arr[0]) + } }, @@ -533,18 +869,18 @@ export default { item.urlIndex = 7 } }); - - - this.iconUrlArray = [ - require('../../../../assets/img/shuju/measure/lxdj.png'),//楼宇党建 - require('../../../../assets/img/shuju/measure/lxzz.png'),//两新组织 - require('../../../../assets/img/shuju/measure/qydw.png'),//区域单位党建 - require('../../../../assets/img/shuju/measure/jgzs.png'),//机关直属部门 - require('../../../../assets/img/shuju/measure/qita.png'),//社会团体 - require('../../../../assets/img/shuju/measure/minban.png'),//民办 - require('../../../../assets/img/shuju/measure/jijin.png'),//基金 - require('../../../../assets/img/shuju/measure/other.png')//其他 - ] + const url = require('../../../../assets/img/shuju/measure/other.png') + // this.iconUrlArray = [ + // require('../../../../assets/img/shuju/measure/lxdj.png'),//楼宇党建 + // require('../../../../assets/img/shuju/measure/lxzz.png'),//两新组织 + // require('../../../../assets/img/shuju/measure/qydw.png'),//区域单位党建 + // require('../../../../assets/img/shuju/measure/jgzs.png'),//机关直属部门 + // require('../../../../assets/img/shuju/measure/qita.png'),//社会团体 + // require('../../../../assets/img/shuju/measure/minban.png'),//民办 + // require('../../../../assets/img/shuju/measure/jijin.png'),//基金 + // require('../../../../assets/img/shuju/measure/other.png')//其他 + // ] + this.iconUrlArray = [url, url, url, url, url, url, url, url] //第一次加载完置为false @@ -563,16 +899,81 @@ export default { loadMap () { if (this.isfirstInit) { //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray - this.$refs.map.loadMap(this.agencyInfo, null, null, this.unitMapList, this.iconUrlArray, null) + + const polIconUrlArray = [ + 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png' + ] + console.log('this.unitTableData', this.unitTableData) + this.$refs.cmap.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitTableData, this.iconUrlArray, null) } else { - this.$refs.map.refreshMap(null, this.unitMapList) + this.$refs.cmap.refreshMap(this.agencyInfo, this.parentPolygon, this.unitTableData) } }, //点击项目 - clickProject (feature) { + async clickProject (feature) { console.log('标注信息', feature.values_.properties) + if (!feature.values_.properties.info.id) { + return false + } + const info = feature.values_.properties.info + const url = "/heart/icpartyunit/detail" + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution" + + let params = { + id: info.id + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + console.log('data-------', data) + let _info = { + unitName: '', + type: '', + contact: '', + contactMobile: '', + memberCount: '', + remark: '', + address: '' + } + let coordinate = [info.longitude, info.latitude] + for(const n in _info) { + _info[n] = data[n] && data[n] || '--' + } + _info.type = info.type + + + let showData = ` +
单位信息
+
单位名称： + `+ _info.unitName + ` +
+
单位类型： + `+ _info.type + ` +
+
联系人： + `+ _info.contact + ` +
+
联系电话： + `+ _info.contactMobile + ` +
+
在职党员： + `+ _info.memberCount + ` +
+
备注： + `+ _info.remark + ` +
+
地址： + `+ _info.address + ` +
+ ` + this.$refs.cmap.handleShowPopup(showData, coordinate) + + } else { + this.$message.error(msg) + } }, async handleLook (val) { @@ -580,6 +981,16 @@ export default { await this.getDetail(val.id) this.showedMoreInfo = true }, + async handleUnitLook(val) { + this.unitdetailId = val.id + // await this.getDetail(val.id) + // this.showedUnitMoreInfo = true + await this.getAcList(this.agencyId, val.id) + this.$nextTick(() => { + console.log('this.$refs', this.$refs['unitdetailInfo']) + this.$refs['unitdetailInfo'].getDetail(this.unitAclist[0].id) + }) + }, handleSelectChange (val) { this.getList(this.agencyId); @@ -594,6 +1005,14 @@ export default { this.pageNo = val; this.getList(this.agencyId); }, + pageCurrentHandle(val) { + this.unitpageNo = val + this.getUnitList(this.agencyId) + }, + pageSizeHandle(val) { + this.unitpageSize = val + this.getUnitList(this.agencyId) + }, }, }; @@ -767,12 +1186,13 @@ export default { } .box-right { flex: 1; + height: 100%; overflow: hidden; .pagination { margin-top: 0; } .box-map { - height: 400px; + height: 100%; // border: 1px solid #2865fa; .map { @@ -792,6 +1212,9 @@ export default { } } } +.flex-column { + flex-direction: column; +} .box-wr-400 { height: 400px; .box-left { @@ -804,7 +1227,42 @@ export default { } } } - +.echart-wr { + position: relative; + flex-shrink: 0; + width: 90%; + height: 320px; + box-sizing: border-box; + .echart-org { + width: 100%; + height: 100%; + } + .echart-cicle { + position: absolute; + top: 50%; + left: 50%; + width: 240px; + height: 240px; + box-sizing: border-box; + margin-top: -120px; + margin-left: -120px; + border: 1px dashed rgba(0, 96, 240, 1); + border-radius: 50%; + } + .echart-cicle0 { + left: 80px; + margin-left: 0; + } +} +.table-h { + height: 360px; +} +.calc-h { + height: calc(100vh - 240px); +} +.wd50 { + width: 50%; +} .map-tips { width: 100%; display: flex; @@ -836,4 +1294,10 @@ export default { } } } +.mt0 { + margin: 0; +} +.mt20 { + margin-top: 20px; +} diff --git a/src/views/modules/visual/communityParty/dialogInfo.vue b/src/views/modules/visual/communityParty/dialogInfo.vue index 60db4c68c..f50facc00 100644 --- a/src/views/modules/visual/communityParty/dialogInfo.vue +++ b/src/views/modules/visual/communityParty/dialogInfo.vue @@ -11,7 +11,7 @@ -
+
+
+
+ +
+
+
+ + +
+
+
+ +
+
+ + + +
+ + + + + + + diff --git a/src/views/modules/visual/communityParty/memberInfo.vue b/src/views/modules/visual/communityParty/memberInfo.vue new file mode 100644 index 000000000..55041b781 --- /dev/null +++ b/src/views/modules/visual/communityParty/memberInfo.vue @@ -0,0 +1,251 @@ + + + + + + diff --git a/src/views/modules/visual/communityParty/party.vue b/src/views/modules/visual/communityParty/party.vue index be0c958c1..6b40e92c4 100644 --- a/src/views/modules/visual/communityParty/party.vue +++ b/src/views/modules/visual/communityParty/party.vue @@ -5,13 +5,24 @@
党员信息统计   - + --> +
@@ -124,7 +135,7 @@ + + + diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index e39e9d6f2..2b6c77953 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -21,8 +21,8 @@ -->
+ :id="mapId" + :ref="mapId">
@@ -79,6 +81,24 @@ let iconSource; // icon let select;//选中标注 +let iconTextsStyle = { + textAlign: undefined, + font: "18px Arial", + //fontFamily: "Courier New, monospace", + // fontWeight: "bold", + text: '', + backgroundFill: new Fill({ + color: 'rgba(0, 146, 238, 0.75)' + // color: textColorArray[feature.values_.colorIndex] + }), + padding: [4, 10, 4, 10], + //text: "变电站名称", + fill: new Fill({ color: "#ffffff" }), + // stroke: new Stroke({ color: "#ffffff", width: 3 }), + offsetY: -30, + offsetX: -50, + overflow: true, +} let polygonColorArray = [ 'rgba(210, 2, 2, 0.24)', @@ -86,7 +106,19 @@ let polygonColorArray = [ 'rgba(183, 185, 0, 0.16)' ]; + //icon文字样式 +let createTextStyle = function (feature) { + + if (iconTextsStyle) { + let iconTextsStyles = { ...iconTextsStyle } + iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name + return new Text({ ...iconTextsStyles }) + } else { + return null + } + +} //多边形标注样式 var polygonStyleFunction = (function () { return function (feature) { @@ -105,6 +137,8 @@ var polygonStyleFunction = (function () { }; })() + + const vueGis = { name: 'HomeMap', data () { @@ -151,7 +185,7 @@ const vueGis = { iconArrays: [ ], - iconTextStyle: {}, + // iconTextStyle: {}, //policon图标样式 polIconUrlArray: [ @@ -170,7 +204,6 @@ const vueGis = { }, async mounted () { - }, methods: { showPosition () { @@ -181,33 +214,34 @@ const vueGis = { loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle, distanceMax) { this.mapInfo = mapInfo this.polygonArray = polygonArray - this.polIconUrlArray = polIconUrlArray + this.polIconUrlArray = polIconUrlArray || [] this.iconArrays = iconArrays this.iconUrlArray = iconUrlArray - this.iconTextStyle = iconTextStyle + iconTextsStyle = iconTextStyle || iconTextsStyle this.distanceMax = distanceMax // iconArrays.forEach(item => { // console.log(item.type, item.urlIndex, item.latitude, item.longitude) // }); - + //初始化地图 this.initMap() - - if (this.showPolygonLayer) { + + if (this.showPolIconLayer) { + console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer) //初始化多边形标注图层 - this.initPolygonLayer() + this.initPolIconLayer() //加载当前园区的标注 - this.loadPolygon() + // this.loadPolIcon() } - if (this.showPolIconLayer) { - + if (this.showPolygonLayer) { //初始化多边形标注图层 this.initPolygonLayer() //加载当前园区的标注 - this.loadPolIcon() + this.loadPolygon() } + if (this.showIconLayer) { //初始化icon图层 @@ -220,41 +254,45 @@ const vueGis = { this.addOverlay() } - this.addMapClick() }, //刷新地图 - async refreshMap (polygonArray, iconArrays) { - + async refreshMap (mapInfo, polygonArray, iconArrays) { + this.mapInfo = mapInfo + this.polygonArray = [] this.polygonArray = polygonArray this.iconArrays = iconArrays - + iconSource.clear() + polygonSource.clear() + polIconSource.clear() + this.initPolIconLayer() + if (this.showPolygonLayer) { - + this.initPolygonLayer() //加载当前园区的标注 this.loadPolygon() } if (this.showPolIconLayer) { - + this.initIconLayer() //加载当前园区的标注 - this.loadPolIcon() + // this.loadPolIcon() } if (this.showIconLayer) { this.loadIcon() } - - + this.setMapLocation() + // gaodeMapLayer.getSource().changed() + }, - //加载多边形 + //加载区域多边形 loadPolygon () { - polygonSource.clear()//清空多边形标注 - + // iconSource.clear() let featureData = []//多边形数据数据 if (this.polygonArray && this.polygonArray.length > 0) {//判断是否存在下级标注 @@ -266,7 +304,7 @@ const vueGis = { oneData = { type: 'Feature', - + properties: { ...polygonItem }, geometry: { type: 'Polygon', @@ -306,14 +344,17 @@ const vueGis = { if (this.showPolIconLayer) { this.loadPolIcon(feature) } + } }, - //加载多边形的icon + //加载区域多边形的icon loadPolIcon (feature) { + polIconSource.clear() let polyIconFeatures = []; + console.log('feature-----', feature) feature.forEach(oneIcon => { var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy] @@ -330,28 +371,27 @@ const vueGis = { id: oneIcon.id_ } }); - + // console.log('oneIcon----', oneIcon) let polyIconStyle = new Style({ image: new Icon({ // anchor: [0.5, 0.5], // imgSize: [32, 32], - scale: 0.5, - src: polIconUrlArray[oneIcon.values_.index - 1] - }) + scale: this.areaScale, + src: this.polIconUrlArray[0] + }), + text: createTextStyle(oneIcon) }); polyIcon.setStyle(polyIconStyle); polyIconFeatures.push(polyIcon); }); - polIconSource.addFeatures(polyIconFeatures); }, //加载icon图标 loadIcon () { iconSource.clear()//清空多边形标注 - if (this.iconArrays && this.iconArrays.length > 0) { let iconFeatures = []; @@ -367,15 +407,14 @@ const vueGis = { info: { ...oneIcon } } }); - let iconStyle = new Style({ image: new Icon({ // anchor: [0.5, 0.5], // imgSize: [32, 32], // scale: 0.5, - src: this.iconUrlArray[oneIcon.urlIndex] + src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] }), - text: this.createTextStyle(oneIcon) + // text: createTextStyle(oneIcon) }); iconItem.setStyle(iconStyle); @@ -397,18 +436,6 @@ const vueGis = { } }, - //icon文字样式 - createTextStyle (feature) { - if (this.iconTextStyle) { - let iconTextStyle = { ...this.iconTextStyle } - iconTextStyle.text = feature.values_.name - return new Text({ ...iconTextStyle }) - } else { - return null - } - - - }, //计算和中心点距离 computedDistance (lon, lat, max) { @@ -425,7 +452,7 @@ const vueGis = { //初始化地图 initMap () { - this.setMapLocation() + this.firstCentermap() gaodeMapLayer = new TileLayer({ title: "地图", source: new XYZ({ @@ -452,7 +479,7 @@ const vueGis = { layers: [gaodeMapLayer], //加载瓦片图层数据 view: mapView, - target: 'map' + target: this.mapId //目标加载到map中 }) @@ -478,8 +505,52 @@ const vueGis = { }, //设置地图定位的中心点和缩放级别 setMapLocation () { + if (!this.zoom) { + this.setZoom(this.mapInfo.agencyLevel) + } + this.centerPoint = [] + + + //如果存在中心点（返回时赋值） + if (this.center && this.center.length > 0) { + this.centerPoint = this.center + this.centerFlag = 'point' + this.center = [] + + } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织 + this.centerFlag = 'flag_polygon' + + } else if (this.mapInfo.longitude && this.mapInfo.latitude) { + this.centerPoint.push(this.mapInfo.longitude) + this.centerPoint.push(this.mapInfo.latitude) + this.centerFlag = 'point' + + } else { + this.centerPoint = centerPointGlobal + this.centerFlag = 'point' + } + // debugger + if (this.centerFlag === 'flag_parent') { + let parentFeatures = parentLayer.getSource().getFeatures()[0] + let polygon = parentFeatures.getGeometry(); + map.getView().fit(polygon, map.getSize()); + this.zoom = map.getView().getZoom() - 1 + + } else if (this.centerFlag === 'flag_polygon') { + let polygonFeatures = polygonLayer.getSource().getFeatures()[0] + let polygon = polygonFeatures.getGeometry(); + map.getView().fit(polygon, map.getSize()); + this.zoom = map.getView().getZoom() - 1 + } else { + mapView.setCenter(this.centerPoint); + } + mapView.setZoom(this.zoom); + + + }, + firstCentermap() { if (this.mapInfo.longitude && this.mapInfo.latitude) { this.centerPoint = [] this.centerPoint.push(this.mapInfo.longitude) @@ -489,7 +560,7 @@ const vueGis = { this.centerPoint = centerPointGlobal } - this.setZoom(this.mapInfo.level) + this.setZoom(this.mapInfo.agencyLevel) }, //根据组织层级设置缩放级别 @@ -507,7 +578,8 @@ const vueGis = { //初始化多边形标注图层 initPolygonLayer () { polygonSource = new VectorSource({ - //features: (new GeoJSON()).readFeatures(geojsonObject) + // features: (new GeoJSON()).readFeatures(geojsonObject) + wrapX: false }); polygonLayer = new VectorLayer({ @@ -515,7 +587,7 @@ const vueGis = { style: polygonStyleFunction, zIndex: 50 }); - + let that = this //选中多边形后的样式 var overlayStyle = (function () { @@ -558,6 +630,7 @@ const vueGis = { initPolIconLayer () { polIconSource = new VectorSource({ //features: (new GeoJSON()).readFeatures(geojsonObject) + wrapX: false }); polIconLayer = new VectorLayer({ @@ -571,9 +644,9 @@ const vueGis = { //初始化icon图层 initIconLayer () { - iconSource = new VectorSource({ //features: (new GeoJSON()).readFeatures(geojsonObject) + wrapX: false }); iconLayer = new VectorLayer({ @@ -597,6 +670,7 @@ const vueGis = { var container = document.getElementById("popup"); var closer = document.getElementById("popup-closer"); var content = document.getElementById("popup-content"); + var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null // 创建一个弹窗 Overlay 对象 this.overlay = new Overlay({ @@ -619,6 +693,11 @@ const vueGis = { closer.blur(); return false; }; + if (goMore) { + goMore.onclick = function () { + _that.$emit('lookMore') + }; + } }, //注册地图点击事件 @@ -650,15 +729,21 @@ const vueGis = { }); }, - handleShowPopup (showData, coordinate) { + handleShowPopup (showData, coordinate, isShowMore) { + if (isShowMore) { + document.getElementById("popup-goMore").style.display = 'block' + } else { + document.getElementById("popup-goMore").style.display = 'none' + } console.log(this.overlay.getElement()) + let content = document.getElementById("popup-content"); this.overlay.getElement().style.display = 'block' this.overlay.getElement().parentNode.style.display = 'block' this.overlay.getElement().parentNode.parentNode.style.display = 'block' - var content = document.getElementById("popup-content"); - content.innerHTML = showData; - this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标 + this.overlay.setPosition(coordinate); + //把 overlay 显示到指定的 x,y坐标 + }, //取随机数 @@ -685,6 +770,10 @@ const vueGis = { }, }, props: { + mapId: { + type: String, + default: 'map' + }, //是否显示多边形图层 showPolygonLayer: { type: Boolean, @@ -711,6 +800,10 @@ const vueGis = { clickType: { type: String, default: 'back' + }, + areaScale: { + type: Number, + default: 0.5 } }, @@ -797,6 +890,7 @@ export default vueGis; } .ol-popup-closer:after { content: "✖"; - color: rgba(1, 17, 104, 1); + // color: rgba(1, 17, 104, 1); + color: #fff; } \ No newline at end of file