Browse Source

Merge branch 'dev_shequzhili'

shibei_master
jiangyy 3 years ago
parent
commit
467f97617e
  1. 24
      src/assets/scss/modules/visual/search_1.scss
  2. 57
      src/views/modules/visual/basicinfo/personCategory/index.vue
  3. 55
      src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue
  4. 5
      src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue
  5. 117
      src/views/modules/visual/components/screen-map/index.vue

24
src/assets/scss/modules/visual/search_1.scss

@ -81,6 +81,30 @@
}
}
}
.range-data2 {
::v-deep .el-date-editor {
width: 360px;
position: relative;
.el-range-input {
color: #fff;
background: #06186d;
margin-left: 10px;
}
.el-range-separator {
color: #fff;
}
.el-range__icon {
position: absolute;
right: 5px;
// float: right;
}
.el-input__prefix {
left: unset;
right: 5px;
}
}
}
.one-date{
::v-deep .el-date-editor {

57
src/views/modules/visual/basicinfo/personCategory/index.vue

@ -22,29 +22,31 @@
<img src="@/assets/img/shuju/title-tip.png" />
<span>人员类别分析</span>
<div class="second-select cascader">
<el-cascader class="customer_cascader"
ref="myCascader"
v-model="agencyIdArray"
:key="iscascaderShow"
:options="casOptions"
:props="optionProps"
:show-all-levels="false"
@change="handleChangeAgency"></el-cascader>
</div>
<div class="second-select ">
<el-date-picker v-model="dateIdShow"
type="date"
:clearable="false"
@change="handleChangeDate"
:picker-options="pickerOptions"
prefix-icon="el-icon-caret-bottom"
placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
<div class="search">
<div class="second-select cascader">
<el-cascader class="customer_cascader"
ref="myCascader"
v-model="agencyIdArray"
:key="iscascaderShow"
:options="casOptions"
:props="optionProps"
:show-all-levels="false"
@change="handleChangeAgency"></el-cascader>
</div>
<div class="second-select range-data2">
<el-date-picker v-model="dateIdShow"
type="date"
:clearable="false"
@change="handleChangeDate"
:picker-options="pickerOptions"
prefix-icon="el-icon-caret-bottom"
placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</div>
</div>
<el-scrollbar style="width: 100%">
@ -255,7 +257,7 @@ export default {
async handleChangeAgency (value) {
let arr = this.$refs["myCascader"].getCheckedNodes();
if(!Array.isArray(arr) || arr.length==0) return;
if (!Array.isArray(arr) || arr.length == 0) return;
let selAgency = arr[0].data
// this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
this.agencyName = selAgency.name
@ -268,7 +270,7 @@ export default {
// type:polygon / people
async toSubAgency (userId) {
return this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${userId}` });
// this.selUserId = userId
// this.orgLevel = 'people'
@ -308,3 +310,10 @@ export default {
scoped
></style>
<style
lang="scss"
src="@/assets/scss/modules/visual/search_1.scss"
scoped
></style>

55
src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue

@ -36,11 +36,11 @@
</div>
<div class="m-pagination">
<el-pagination :current-page="demand.pageNo"
:page-size="demand.pageSize"
:total="demand.total"
background
layout="prev, pager, next,total"
@current-change="handlePageNoChange_demand">
:page-size="demand.pageSize"
:total="demand.total"
background
layout="prev, pager, next,total"
@current-change="handlePageNoChange_demand">
</el-pagination>
</div>
</div>
@ -82,8 +82,8 @@
</div>
</div>
<duoyuan-dialog v-if="showInfoDialog"
:orgId="orgId"
@close="showInfoDialog = false" />
:orgId="orgId"
@close="showInfoDialog = false" />
</cpt-card>
</template>
@ -103,8 +103,8 @@ import { pieOption } from './pieOption.js'
import nextTick from 'dai-js/tools/nextTick'
const transparent = 'rgba(2, 2, 2, 0)'
const polygonColorArray = [ '#f59701', '#0067b6', '#e70014', '#8fc41e', '#00a1be' ]
const colorArray = [ '#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00']
const polygonColorArray = ['#f59701', '#0067b6', '#e70014', '#8fc41e', '#00a1be']
const colorArray = ['#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00']
const legendList = [
{ name: '#e70014', icon: require('../../../../../assets/img/shuju/volunteer4.png') },
{ name: '#f59701', icon: require('../../../../../assets/img/shuju/volunteer5.png') },
@ -349,7 +349,7 @@ export default {
return item.name == name
})
},
async loadOrgData (level='', orgId='') {
async loadOrgData (level = '', orgId = '') {
const url = "/gov/org/agency/maporg"
let params = {
orgId: orgId,
@ -363,7 +363,7 @@ export default {
if (!this.isRepeatItem(item.name)) {
let colorIndex = index < polygonColorArray.length ? index : 0
item.fillColor = transparent,
item.color = polygonColorArray[colorIndex]
item.color = polygonColorArray[colorIndex]
subPolygonList.push(item)
}
}
@ -375,7 +375,7 @@ export default {
// color: polygonColorArray[1]
// }
// polygonList.push(polygonData)
this.polygonList = [ ...this.polygonList, ...subPolygonList ]
this.polygonList = [...this.polygonList, ...subPolygonList]
} else {
this.$message.error(msg)
}
@ -447,11 +447,11 @@ export default {
//
loadMap () {
if (this.isfirstInit) {
this.agencyInfo.level = 'agency'
// this.agencyInfo.level = 'agency'
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null)
} else {
this.$refs.map.refreshMap(this.polygonList, this.distributionsList)
this.$refs.map.refreshMap(this.agencyInfo, this.polygonList, this.distributionsList, false)
}
},
@ -478,7 +478,7 @@ export default {
data.organizationPersonnel.forEach(item => {
organizationPersonnel = `${organizationPersonnel}${item.personName}(${item.personPhone})、`
})
organizationPersonnel = organizationPersonnel.substring(0, organizationPersonnel.length-1)
organizationPersonnel = organizationPersonnel.substring(0, organizationPersonnel.length - 1)
} else {
organizationPersonnel = '--'
}
@ -540,18 +540,18 @@ export default {
// data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '' : '' : '--'
// data.genderShow = data.gender ? data.gender === '0' ? '' : '' : '--'
// let categoriesArray = []
// let categoriesArray = []
// for (let key in data.volunteerCategories) {
// categoriesArray.push(data.volunteerCategories[key])
// for (let key in data.volunteerCategories) {
// categoriesArray.push(data.volunteerCategories[key])
// }
// }
// if (categoriesArray.length > 0) {
// data.categories = categoriesArray.join(',')
// } else {
// data.categories = '--'
// }
// if (categoriesArray.length > 0) {
// data.categories = categoriesArray.join(',')
// } else {
// data.categories = '--'
// }
// let showData = `
// <div style='font-size:16px; color:#FFFFFF;'></div>
@ -613,6 +613,9 @@ export default {
if (!this.agencyInfo.level) {
this.agencyInfo.level = 'street'
}
if (!this.agencyInfo.agencyLevel) {
this.agencyInfo.agencyLevel = 'street'
}
} else {
this.$message.error(msg);
}
@ -705,7 +708,7 @@ export default {
color: #fff;
}
.card-left-title::after {
content: '';
content: "";
position: absolute;
top: 50%;
left: 20px;
@ -713,7 +716,7 @@ export default {
height: 12px;
box-sizing: border-box;
margin-top: -6px;
background: #2865FA;
background: #2865fa;
border-radius: 50%;
}
.card-wr-map {

5
src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue

@ -635,11 +635,10 @@ export default {
}
};
element.selected = !element.selected
isSelected = element.selected
// element.selected = !element.selected
// isSelected = element.selected
} else {
element.selected = false
element.label = {
show: false,

117
src/views/modules/visual/components/screen-map/index.vue

@ -32,7 +32,7 @@
class="ol-popup-closer"></a>
<div id="popup-content"
class="popup-content"></div>
<a href="#"
<a href="#"
id="popup-goMore"
class="popup-goMore">更多>>>></a>
</div>
@ -107,9 +107,9 @@ let polygonColorArray = [
'rgba(183, 185, 0, 0.16)'
];
//icon
//icon
let createTextStyle = function (feature) {
if (iconTextsStyle) {
let iconTextsStyles = { ...iconTextsStyle }
iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name
@ -200,7 +200,9 @@ const vueGis = {
distanceMax: null,//
input_lat: null,
input_lon: null
input_lon: null,
isChangeCenter: true,//
}
},
async mounted () {
@ -224,11 +226,10 @@ const vueGis = {
// iconArrays.forEach(item => {
// console.log(item.type, item.urlIndex, item.latitude, item.longitude)
// });
//
this.initMap()
if (this.showPolIconLayer) {
console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer)
//
@ -242,7 +243,7 @@ const vueGis = {
//
this.loadPolygon()
}
if (this.showIconLayer) {
//icon
@ -259,17 +260,24 @@ const vueGis = {
},
//
async refreshMap (mapInfo, polygonArray, iconArrays) {
//:
async refreshMap (mapInfo, polygonArray, iconArrays, isChangeCenter) {
this.mapInfo = mapInfo
this.polygonArray = []
this.polygonArray = []
this.polygonArray = polygonArray
this.iconArrays = iconArrays
iconSource.clear()
polygonSource.clear()
polIconSource.clear()
this.isChangeCenter = isChangeCenter
if (iconSource) {
iconSource.clear()
}
if (polygonSource) {
polygonSource.clear()
}
if (polIconSource) {
polIconSource.clear()
}
this.initPolIconLayer()
if (this.showPolygonLayer) {
this.initPolygonLayer()
//
@ -287,7 +295,6 @@ const vueGis = {
}
this.setMapLocation()
// gaodeMapLayer.getSource().changed()
},
//
@ -305,7 +312,7 @@ const vueGis = {
oneData = {
type: 'Feature',
properties: { ...polygonItem },
geometry: {
type: 'Polygon',
@ -345,7 +352,7 @@ const vueGis = {
if (this.showPolIconLayer) {
this.loadPolIcon(feature)
}
}
@ -530,6 +537,53 @@ const vueGis = {
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);
}
if (!this.isChangeCenter) {
return false
}
// debugger
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'
this.centerPoint.push(this.mapInfo.longitude)
this.centerPoint.push(this.mapInfo.latitude)
} 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]
@ -549,9 +603,8 @@ const vueGis = {
}
mapView.setZoom(this.zoom);
},
firstCentermap() {
firstCentermap () {
if (this.mapInfo.longitude && this.mapInfo.latitude) {
this.centerPoint = []
this.centerPoint.push(this.mapInfo.longitude)
@ -608,7 +661,7 @@ const vueGis = {
})
}),
new Style({
// text: createTextStyle(feature) // zty 2022.05.19
// text: createTextStyle(feature) // zhaotongyao 2022.05.19
})
];
styles['MultiPolygon'] = styles['Polygon'];
@ -616,13 +669,13 @@ const vueGis = {
};
})();
select = new Select({
style: overlayStyle
});
// select = new Select({
// style: overlayStyle
// });
// BUG iconicon使icon ---zhaotongyao 2022.06.01
map.addLayer(polygonLayer)
map.addInteraction(select);
// map.addInteraction(select);
},
@ -743,14 +796,14 @@ const vueGis = {
this.overlay.getElement().parentNode.parentNode.style.display = 'block'
content.innerHTML = showData;
this.overlay.setPosition(coordinate);
// overlay x,y
// overlay x,y
},
//
handleClosePopup() {
this.overlay.setPosition(undefined);
document.getElementById("popup-closer").blur();
return false;
handleClosePopup () {
this.overlay.setPosition(undefined);
document.getElementById("popup-closer").blur();
return false;
},
//
@ -895,7 +948,7 @@ export default vueGis;
.popup-content {
width: 300px;
}
.popup-goMore{
.popup-goMore {
margin: 20px 0;
}
.ol-popup-closer:after {

Loading…
Cancel
Save