Browse Source

Merge branch 'dev_pli_power_axis' of http://121.42.41.42:7070/r/epmet-oper-gov into dev_pli_power_axis

shibei_master
YUJT 3 years ago
parent
commit
ee433428d1
  1. 11
      src/router/index.js
  2. 69
      src/views/modules/visual/plugin/power/components/geojson.js
  3. 162
      src/views/modules/visual/plugin/power/components/house-dialog.vue
  4. 2
      src/views/modules/visual/plugin/power/components/info-dialog.vue
  5. 164
      src/views/modules/visual/plugin/power/components/screen-org-map.vue
  6. 20
      src/views/modules/visual/plugin/power/components/screen-org-tree.vue
  7. 124
      src/views/modules/visual/plugin/power/organization.vue

11
src/router/index.js

@ -224,7 +224,11 @@ router.beforeEach((to, from, next) => {
// });
window.SITE_CONFIG["menuShujuList"] = [
{
icon: "icon-setting",
url: "/visual/plugin/power/organization",
name: "组织架构",
id: "5feawfwaefwa577",
},
{
id: "22213213",
name: "基础信息",
// url: "visual/basicinfo/basicInfoMain",
@ -259,11 +263,6 @@ router.beforeEach((to, from, next) => {
name: "社区党建",
// url: "visual/basicinfo/basicInfoMain",
children: [
{
url: "/visual/plugin/power/organization",
name: "组织架构",
id: "5feawfwaefwa577",
},
{
url: "/visual/communityParty/party",
name: "党员信息统计",

69
src/views/modules/visual/plugin/power/components/geojson.js

@ -1,69 +0,0 @@
export function getPolygonGeoJSON () {
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[120.34641692835909, 36.089631138388036],
[120.3610683961656, 36.07743361100231],
[120.41981862563858, 36.094178143435734],
[120.40240403504704, 36.11798699226542],
[120.34534806364974, 36.11752870787426],
[120.34191095693906, 36.117070430475906],
[120.34641692835909, 36.089631138388036]
]
]
}
}
]
}
}
export function getGridGeoJSON () {
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
name: '第一网格',
index: 0
},
geometry: {
type: 'Polygon',
coordinates: [
[
[120.36042111463216, 36.123630243850776],
[120.37646657270601, 36.11574122696447],
[120.36427923644065, 36.105102846593255],
[120.34074589793231, 36.10363201293648],
[120.36042111463216, 36.123630243850776]
]
]
}
},
{
type: 'Feature',
properties: {
name: '第二网格',
index: 1
},
geometry: {
type: 'Polygon',
coordinates: [
[
[120.35623852355958, 36.0892643916626],
[120.37271801574708, 36.0903801906128],
[120.36894146545411, 36.08102464556885],
[120.35795513732911, 36.07767724871827],
[120.35623852355958, 36.0892643916626]
]
]
}
}
]
}
}

162
src/views/modules/visual/plugin/power/components/house-dialog.vue

@ -0,0 +1,162 @@
<template>
<div class="dialog-bg">
<div class="info-dialog">
<img src="../../../../../../assets/img/plugins/close.png" class="info-dialog-close" @click="closeDialog">
<div class="card-title">
<img class="title-icon" src="../../../../../../assets/img/shuju/title-tip.png" />
<div class="title-label">更多信息</div>
</div>
<div class="info-dialog-content">
<screen-table :headerStyle="headerStyle"
:headerList="headerList"
:tableContentStyle="headerStyle"
:tableData="tableData"
:visibleLoading="visibleLoading"
:operate="false"
@look="handleLook"></screen-table>
</div>
</div>
</div>
</template>
<script>
import screenTable from "../../../components/screen-table/index"
import { requestPost } from "@/js/dai/request"
export default {
name: 'info-dialog',
props: {
houseId: {
type: String,
default: ''
}
},
watch: {
houseId (newVal, oldVal) {
this.getInfo()
}
},
components: {
screenTable
},
data () {
return {
headerList: [
{ title: "序号", coulmn: 'index' },
{ title: "家庭成员", coulmn: 'name' },
{ title: "与户主关系", coulmn: 'yhzgx' },
{ title: "性别", coulmn: 'gender' },
{ title: "是否党员", coulmn: 'isParty' },
{ title: "身份证号", coulmn: 'idCard' },
{ title: "手机号", coulmn: 'mobile' }
],
headerStyle: [
{ width: '80px' },
{ width: '180px' },
{ width: '200px' },
{ width: '120px' },
{ width: '120px' },
{ width: '300px' },
{ width: '240px' }
],
tableData: [],
visibleLoading: true
}
},
created () {
this.getInfo()
},
methods: {
closeDialog () {
this.$emit('close')
},
async handleLook (val) {
console.log(val)
},
async getInfo () {
this.visibleLoading = true
// console.log(this.axisStructId, this.leaderId)
const url = `/epmetuser/icresiuser/listhomeuserbrief/${this.houseId}`
const { data, code, msg } = await requestPost(url)
if (code === 0) {
this.tableData = data.map((item, index) => {
return {
...item,
index: index + 1,
gender: item.gender == '1' ? '男' : item.gender == '2' ? '女' : '未知',
isParty: item.isParty == '1' ? '是' : '否'
}
})
} else {
this.$message.error(msg)
}
this.visibleLoading = false
}
}
}
</script>
<style lang="scss" scoped>
.card-title {
display: flex;
align-items: center;
margin: 27px 20px;
cursor: pointer;
.title-icon {
display: block;
width: 46px;
height: 34px;
box-sizing: border-box;
margin-right: 6px;
}
.title-label {
font-size: 20px;
font-weight: 800;
::v-deep .el-input {
width: 180px;
.el-input__inner {
font-size: 18px;
color: #fff;
background: #06186d;
border: 1px solid #1a64cc;
}
.el-icon-arrow-down::before {
content: "\e790";
}
}
}
}
.dialog-bg {
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: 9999;
background-color: rgba($color: #000000, $alpha: 0.8);
.info-dialog {
width: 960px;
height: auto;
max-height: 800px;
background: url('../../../../../../assets/img/modules/visual/warning-box.png') no-repeat;
background-size: 100% 100%;
position: absolute;
left: 30%;
top: 25%;
z-index: 999;
&-close {
position: absolute;
right: -15px;
top: -10px;
}
&-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0 20px 20px 20px;
box-sizing: border-box;
}
}
}
</style>

2
src/views/modules/visual/plugin/power/components/info-dialog.vue

@ -14,7 +14,7 @@
<div class="info-dialog-content-item-info-mobile">类别{{infoDetail.categoryName}}</div>
</div>
</div>
<div class="info-dialog-content-intro" style="margin-top: 30px;">简介{{infoDetail.introduction}}</div>
<div class="info-dialog-content-intro" style="margin-top: 30px;">简介{{infoDetail.interoduction}}</div>
</div>
</div>
</template>

164
src/views/modules/visual/plugin/power/components/screen-org-map.vue

@ -23,15 +23,12 @@ import { createStringXY } from 'ol/coordinate'
import { defaults as defaultControls } from 'ol/control'
import { mapGetters } from "vuex"
import { Loading } from 'element-ui'
import { getPolygonGeoJSON, getGridGeoJSON } from './geojson.js'
let map
let mapView
let gaodeMapLayer //
let gridLayer //
let gridSource //
let pointsLayer //
let pointsSource //
let markerSource
let markerLayer
const iconArray = [
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
@ -43,68 +40,38 @@ const textColorArray = [
'rgba(0, 146, 238, 0.75)',
'rgba(238, 151, 0, 0.8)'
]
const polygonColorArray = [
'rgba(210, 2, 2, 0.24)',
'rgba(43, 231, 253, 0.25)',
'rgba(183, 185, 0, 0.16)'
]
var createTextStyle = function (feature) {
return new Text({
textAlign: undefined,
font: "18px Arial",
//fontFamily: "Courier New, monospace",
// fontWeight: "bold",
text: feature.values_.name,
text: feature.values_.properties.name,
backgroundFill: new Fill({
// color: 'rgba(0, 146, 238, 0.75)'
color: textColorArray[feature.values_.index]
color: textColorArray[0]
}),
padding: [4, 10, 4, 10],
//text: "",
fill: new Fill({ color: "#ffffff" }),
// stroke: new Stroke({ color: "#ffffff", width: 3 }),
offsetY: -30,
offsetX: -50,
overflow: true,
})
}
var polygonStyleFunction = (function () {
return function (feature) {
return new Style({
fill: new Fill({
// color: [255, 255, 255, 0.3]
color: polygonColorArray[feature.values_.index]
}),
stroke: new Stroke({
color: polygonColorArray[feature.values_.index],
width: 3
}),
text: createTextStyle(feature)
})
}
})()
export default {
name: "screen-org-map",
components: {
},
data() {
return {
centerPoint: [120.38945519, 36.0722275], //
zoom: 12, // 14
zoom: 15, // 14
minZoom: 1, //
}
},
mounted() {
this.initMap()
this.addAreaLayer()
this.addGridLayer()
},
methods: {
initMap () {
gaodeMapLayer = new TileLayer({
title: "地图",
source: new XYZ({
//url
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
wrapX: true // xfalse
}),
@ -112,142 +79,77 @@ export default {
})
mapView = new View({
//
center: this.centerPoint,
// projection: 'EPSG:3857',
projection: 'EPSG:4326',
zoom: this.zoom,
minZoom: this.minZoom
})
//map
//
map = new Map({
layers: [gaodeMapLayer],
//
view: mapView,
target: 'map'
//map
})
map.on('singleclick', function (e) {
// console.log(e.coordinate)
// console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
})
//
const dblClickInteraction = map
.getInteractions()
.getArray()
.find(interaction => {
return interaction instanceof DoubleClickZoom
})
map.removeInteraction(dblClickInteraction)
},
//
addAreaLayer () {
let feature = new GeoJSON().readFeatures(getPolygonGeoJSON())
gridSource = new VectorSource({
features: feature
addMarker (list, icon=iconArray[0], scale=1) {
markerSource = new VectorSource({
// features: new GeoJSON().readFeatures(geojsonObject)
})
// gridSource.clear() //
// let features = new GeoJSON().readFeatures(getPolygonGeoJSON())
// gridSource.addFeatures(features)
gridLayer = new VectorLayer({
source: gridSource,
style: new Style({
stroke: new Stroke({
color: 'blue',
width: 2
}),
// fill: new Fill({
// color: 'rgba(255, 255, 0, 0.4)'
// })
}),
markerLayer = new VectorLayer({
source: markerSource,
zIndex: 50
})
map.addLayer(gridLayer)
},
//
addGridLayer () {
let feature = new GeoJSON().readFeatures(getGridGeoJSON())
pointsSource = new VectorSource({
features: feature
let features = []
list.forEach((item, index) => {
const point = [parseFloat(item.longitude), parseFloat(item.latitude)]
let marker = new Feature({
geometry: new Point(point),
properties: {
...item
}
})
pointsLayer = new VectorLayer({
source: pointsSource,
style: polygonStyleFunction,
zIndex: 70
let iconStyle = new Style({
image: new Icon({
scale: scale,
src: icon
})
})
marker.setStyle(iconStyle)
features.push(marker)
})
//
var overlayStyle = (function () {
return function (feature) {
var styles = {}
styles['Polygon'] = [
styles['Point'] = [
new Style({
stroke: new Stroke({
color: '#ec9000',
width: 2
})
}),
new Style({
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
image: new Icon({
scale: scale,
src: iconArray[0] // feature.values_.properties.index
})
}),
new Style({
text: createTextStyle(feature)
})
]
styles['MultiPolygon'] = styles['Polygon']
return styles[feature.getGeometry().getType()]
}
})()
let select = new Select({
style: overlayStyle
})
this.addGridMarker(feature)
map.addLayer(pointsLayer)
map.addInteraction(select)
select.on('select', e => {
if (e.selected.length > 0) {
console.log(e.selected[0].values_.name)
console.log('------', e.selected[0].values_.properties.id)
}
})
markerSource.addFeatures(features)
map.addLayer(markerLayer)
},
//
addGridMarker (feature) {
let iconFeatures = []
feature.forEach((oneIcon, index) => {
var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]) //[minx,miny,maxx,maxy]
// var center = getCenter(extent) //
//
let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
// icon
let pointIcon = new Feature({
geometry: new Point([x, y]),
properties: {
type: "icon",
name: oneIcon.values_.name
}
})
let iconStyle = new Style({
image: new Icon({
// anchor: [0.5, 0.5],
// imgSize: [32, 32],
scale: 0.5,
src: iconArray[index]
})
})
pointIcon.setStyle(iconStyle)
iconFeatures.push(pointIcon)
})
pointsSource.addFeatures(iconFeatures)
}
},
}
</script>

20
src/views/modules/visual/plugin/power/components/screen-org-tree.vue

@ -1,5 +1,13 @@
<template>
<div class="screen-org-tree">
<div class="no-data" v-if="list.length == 0">
<img
src="../../../../../../assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img"
/>
</div>
<div class="level-row" v-for="(level1, index1) in list" :key="index1">
<div class="level-1-row">
<div class="level-1-row-item">
@ -382,5 +390,17 @@ export default {
}
}
}
//
.no-data {
width: 100%;
height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
&-img {
width: 249px;
height: 172px;
}
}
}
</style>

124
src/views/modules/visual/plugin/power/organization.vue

@ -31,6 +31,9 @@
:total="total">
</el-pagination>
</div>
<house-dialog v-if="showHouse"
:houseId="houseId"
@close="showHouse = false"></house-dialog>
</div>
</div>
<div class="card-right">
@ -47,7 +50,7 @@
</div>
</div>
<div class="card-right-bottom">
<screen-org-map></screen-org-map>
<screen-org-map ref="orgMap"></screen-org-map>
<div class="legend">
<div class="legend-item">
<img src="../../../../../assets/img/plugins/danghui.png" class="legend-item-icon">
@ -77,8 +80,13 @@ import screenTable from "../../components/screen-table/index"
import screenOrgMap from './components/screen-org-map.vue'
import screenOrgTree from './components/screen-org-tree.vue'
import screenTopCount from './components/screen-top-count.vue'
import houseDialog from './components/house-dialog.vue'
import { requestPost } from "@/js/dai/request"
import dhIcon from '@/assets/img/plugins/danghui.png'
import lyxzIcon from '@/assets/img/plugins/louyuanxiaozu.png'
import dyzxhIcon from '@/assets/img/plugins/dangyuanzhongxinhu.png'
export default {
name: "warning-box",
components: {
@ -87,7 +95,8 @@ export default {
screenMap,
screenOrgMap,
screenOrgTree,
screenTopCount
screenTopCount,
houseDialog
},
data() {
return {
@ -106,7 +115,7 @@ export default {
],
agencyId: '',
noInit: false,
visibleLoading: true,
visibleLoading: false,
pageNo: 1,
pageSize: 5,
total: 0,
@ -117,9 +126,14 @@ export default {
kernelHouseHoldNum: { index: 2, title: '党员中心户', value: '0' },
partyMemberNum: { index: 3, title: '党员数', value: '0' },
serviceStationNum: { index: 4, title: '网格党群服务站实体阵地数', value: '0' },
volunteerTeamNum: { index: 5, title: '志愿者队伍', value: '0' }
volunteerTeamNum: { index: 5, title: '社区服务队伍数', value: '0' }
},
axisStructId: '', //
showHouse: false, // house-dialog
houseId: '', // ID
dangqunList: [], //
xiaozuList: [], //
zhongxinhuList: [], //
}
},
async mounted() {
@ -127,8 +141,8 @@ export default {
// const { user } = this.$store.state
// this.agencyId = user.agencyId
// console.log('agencyId-------', this.agencyId)
this.agencyId = '1495655378069753857'
this.axisStructId = '1517389077596463106'
this.agencyId = '50140d770c578100328792121aa7b3c5'
this.axisStructId = '1518062548749725697'
await nextTick(100)
this.getStructTree()
this.getCount()
@ -140,7 +154,8 @@ export default {
this.getList()
},
async handleLook (val) {
console.log(val.id)
this.houseId = val.houseId
this.showHouse = true
},
pageSizeChangeHandleNew (val) {
this.pageNo = 1
@ -181,8 +196,41 @@ export default {
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
Object.keys(this.countList).forEach(item => {
if (item != 'partyMemberNum' && item != 'volunteerTeamNum') {
this.countList[item].value = data[item]
}
})
this.getPartyNumber() //
this.getVolunteerTeamNum() //
} else {
this.$message.error(msg)
}
},
async getPartyNumber () {
const url = "/epmetuser/icresiuser/partymemberagestatistics"
let params = {
orgId: this.agencyId,
orgType: 'agency'
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
let count = 0
data.forEach(item => {
count += parseInt(item.value)
})
this.countList.partyMemberNum.value = count
} else {
this.$message.error(msg)
}
},
async getVolunteerTeamNum () {
const url = "/heart/userdemand/servicelist"
let params = {
serviceType: 'community_org'
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.countList.volunteerTeamNum.value = data.length || 0
} else {
this.$message.error(msg)
}
@ -195,20 +243,74 @@ export default {
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.list = data
if (data.length > 0) {
this.axisStructId = this.list[0].id
this.getList()
}
} else {
this.$message.error(msg)
}
},
getMapData() {
let params = {
const params1 = {
axisStructId: this.axisStructId,
limit: 99
}
const url = "/pli/power/data/kernelHousehold/listPosition"
this.$http.post(url, params).then(res => {
console.log(res.data.data)
//
this.$http.post(`/pli/power/data/serviceStation/listPosition`, params1).then(res => {
res.data.data.forEach((item, index) => {
let ob = {
index: index,
id: item.stationId,
name: item.address,
latitude: item.latitude,
longitude: item.longitude
}
this.dangqunList.push(ob)
})
this.$nextTick(() => {
this.$refs.orgMap.addMarker(this.dangqunList, dhIcon)
})
}).catch(err => {
this.$message.error(err)
})
//
const params2 = {
agencyId: this.agencyId
}
const structLevel = '2'
this.$http.post(`/pli/power/data/axis/${structLevel}/listPosition`, params2).then(res => {
res.data.data.forEach((item, index) => {
let ob = {
index: index,
id: item.axisStructId,
name: item.axisStructName,
latitude: item.latitude,
longitude: item.longitude
}
this.xiaozuList.push(ob)
})
this.$nextTick(() => {
this.$refs.orgMap.addMarker(this.xiaozuList, lyxzIcon)
})
}).catch(err => {
this.$message.error(err)
})
//
this.$http.post(`/pli/power/data/kernelHousehold/listPosition`, params1).then(res => {
res.data.data.forEach((item, index) => {
let ob = {
index: index,
id: item.houseId,
name: item.address,
latitude: item.latitude,
longitude: item.longitude
}
this.zhongxinhuList.push(ob)
})
this.$nextTick(() => {
this.$refs.orgMap.addMarker(this.zhongxinhuList, dyzxhIcon)
})
}).catch(err => {
this.$message.error(err)
})

Loading…
Cancel
Save