elink-star
/
ShibeiWorkPlatform_Frontend
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

五大图层可视化

shibei_master
jiangyy 4 years ago
parent
4f4a6b9032
commit
ebf25e0004
3 changed files with 195 additions and 272 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/assets/scss/modules/visual/fiveLayerMap.scss
  2. 199
      src/views/modules/communityService/ninePlaces/places/places.vue
  3. 266
      src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

2
src/assets/scss/modules/visual/fiveLayerMap.scss
View File

@ -210,7 +210,7 @@
.tb { .tb {
height: calc(88vh - 302px - 10px - 90px); height: calc(88vh - 302px - 10px - 150px);
overflow-y: auto; overflow-y: auto;
@include scrollBar; @include scrollBar;
margin-top:20px; margin-top:20px;

199
src/views/modules/communityService/ninePlaces/places/places.vue
View File

@ -5,88 +5,85 @@
:model="formData" :model="formData"
ref="ref_searchform" ref="ref_searchform"
:label-width="'100px'"> :label-width="'100px'">
<div>
<el-form-item label="场所名称"
<el-form-item label="场所名称" prop="placeOrgName">
prop="placeOrgName"> <el-input v-model="formData.placeOrgName"
<el-input v-model="formData.placeOrgName" size="small"
size="small" class="item_width_1"
class="item_width_1" clearable
clearable placeholder="请输入九小场所名称">
placeholder="请输入九小场所名称"> </el-input>
</el-input>
</el-form-item>
</el-form-item>
<el-form-item label="联系电话"
<el-form-item label="联系电话" prop="mobile">
prop="mobile"> <el-input v-model="formData.mobile"
<el-input v-model="formData.mobile" size="small"
size="small" class="item_width_1"
class="item_width_1" clearable
clearable placeholder="请输入电话">
placeholder="请输入电话"> </el-input>
</el-input>
</el-form-item>
</el-form-item>
<el-form-item label="场所区域"
<el-form-item label="场所区域" prop="gridId">
prop="gridId"> <el-select class="item_width_1"
<el-select class="item_width_1" v-model="formData.gridId"
v-model="formData.gridId" size="small"
size="small" placeholder="全部"
placeholder="全部" clearable>
clearable> <el-option v-for="item in gridList"
<el-option v-for="item in gridList" :key="item.value"
:key="item.value" :label="item.label"
:label="item.label" :value="item.value">
:value="item.value"> </el-option>
</el-option> </el-select>
</el-select>
</el-form-item>
</el-form-item>
<el-form-item label="规模"
</div> prop="scale">
<div> <el-select class="item_width_1"
<el-form-item label="规模"
prop="scale">
<el-select class="item_width_1"
size="small"
v-model="formData.scale"
placeholder="请选择"
clearable>
<el-option v-for="item in scaleList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="场所类型"
prop="ninePlaceVal">
<el-select class="item_width_1"
size="small"
v-model="formData.ninePlaceVal"
placeholder="请选择"
clearable>
<el-option v-for="item in placeTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-button style="margin-left:30px"
size="small" size="small"
class="diy-button--search" v-model="formData.scale"
@click="handleSearch">查询</el-button> placeholder="请选择"
<el-button style="margin-left:10px" clearable>
<el-option v-for="item in scaleList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="场所类型"
prop="ninePlaceVal">
<el-select class="item_width_1"
size="small" size="small"
class="diy-button--reset" v-model="formData.ninePlaceVal"
@click="resetSearch">重置</el-button> placeholder="请选择"
</div> clearable>
<el-option v-for="item in placeTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-button style="margin-left:30px"
size="small"
class="diy-button--search"
@click="handleSearch">查询</el-button>
<el-button style="margin-left:10px"
size="small"
class="diy-button--reset"
@click="resetSearch">重置</el-button>
</el-form> </el-form>
</div> </div>
<div class="div_table"> <div class="div_table">
@ -464,7 +461,7 @@ export default {
computed: { computed: {
tableHeight () { tableHeight () {
return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight : this.clientHeight - 300 return this.$store.state.inIframe ? this.clientHeight - 400 + this.iframeHeight : this.clientHeight - 400
}, },
@ -478,42 +475,8 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped >
.div_main {
width: 100%;
}
.div_search { <style lang="scss" scoped >
background: #ffffff; @import "@/assets/scss/modules/management/list-main.scss";
border-radius: 4px;
padding: 30px 20px 5px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.item_width_1 {
width: 260px;
}
.div_table {
background: #ffffff;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 15px;
padding: 23px 30px 10px;
.table {
margin-top: 20px;
}
}
.div_btn {
}
.el-row {
/* margin-bottom: 20px; */
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-right: 50px;
}
</style> </style>

266
src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
View File

@ -115,7 +115,7 @@
<div id="popup-content" <div id="popup-content"
class="popup-content"> class="popup-content">
<div v-show="selPlaceType==='resi'|| selPlaceType === 'specil_resi'"> <div v-show="selPlaceType==='resi'|| selPlaceType === 'special_resi'">
<div class="popTitle">居民信息</div> <div class="popTitle">居民信息</div>
<div class="popContentTitle">所属网格： <div class="popContentTitle">所属网格：
<span>{{ selInfo.gridName }}</span> <span>{{ selInfo.gridName }}</span>
@ -201,71 +201,59 @@
</div> </div>
</div> </div>
<div v-show="selPlaceType==='event'"> <div v-show="selPlaceType==='event'">
<div class="popTitle">难点痛点</div>
<div class="popContentTitle">所属网格：
<span>{{ selInfo.gridName }}</span>
</div>
<div class="popContentTitle">发生时间：
<span>{{ selInfo.happenTime }}</span>
</div>
<div class="popContentTitle">事件内容：
<span>{{ selInfo.eventContent }}</span>
</div>
<div class="m-info"> <div v-if="selInfo.imageList&&selInfo.imageList.length>0"
<div class="info-prop"> class="info-prop">
<span>所属网格：</span> <span>图片：</span>
<span>{{ selInfo.gridName }}</span> <div class="info-pics">
</div> <img :src="src"
<div class="info-prop"> :key="src"
<span>发生时间：</span> style="width:100px;height:100px;padding-right:10px"
<span>{{ selInfo.happenTime }}</span> v-for="src in eventInfo.imageList"
</div> @click="watchImg(src)" />
<div class="info-prop">
<span>事件内容：</span>
<span>{{ selInfo.eventContent }}</span>
</div>
<div v-if="selInfo.imageList&&selInfo.imageList.length>0"
class="info-prop">
<span>图片：</span>
<div class="info-pics">
<img :src="src"
:key="src"
style="width:100px;height:100px;padding-right:10px"
v-for="src in eventInfo.imageList"
@click="watchImg(src)" />
</div>
</div> </div>
</div>
<div v-if="selInfo.voiceList&&selInfo.voiceList.length>0" <div v-if="selInfo.voiceList&&selInfo.voiceList.length>0"
class="info-prop"> class="info-prop">
<span>音频：</span> <span>音频：</span>
<div class="info-pics"> <div class="info-pics">
<audio controls> <audio controls>
<source :src="item.url" <source :src="item.url"
type="" type=""
:key="item.url" :key="item.url"
v-for="item in eventInfo.voiceList" /> v-for="item in eventInfo.voiceList" />
</audio> </audio>
</div>
</div> </div>
<div class="info-prop">
<span>反映渠道：</span>
<span>{{ selInfo.sourceTypeName || "--" }}</span>
</div>
<div class="info-prop">
<span>地址：</span>
<span>{{ selInfo.address || "--" }}</span>
</div>
<div class="info-prop">
<span>报事人：</span>
<span>{{ selInfo.name || "--" }}</span>
</div>
<div class="info-prop">
<span>手机号：</span>
<span>{{ selInfo.mobile || "--" }}</span>
</div>
<div class="info-prop">
<span>身份证号：</span>
<span>{{ selInfo.idCard || "--" }}</span>
</div>
</div> </div>
<div class="popContentTitle">反映渠道：
<span>{{ selInfo.sourceTypeName|| "--" }}</span>
</div>
<div class="popContentTitle">地址：
<span>{{ selInfo.address || "--" }}</span>
</div>
<div class="popContentTitle">报事人：
<span>{{selInfo.name || "--" }}</span>
</div>
<div class="popContentTitle">手机号：
<span>{{ selInfo.mobile || "--" }}</span>
</div>
<div class="popContentTitle">身份证号：
<span>{{ selInfo.idCard || "--" }}</span>
</div>
</div> </div>
<div v-show="selPlaceType==='community_org'"> <div v-show="selPlaceType==='community_org'">
@ -581,19 +569,23 @@ const vueGis = {
demand: { demand: {
loading: false, loading: false,
colList: [ colList: [
{
align: "center",
width: "15%",
},
{ {
align: "center", align: "center",
width: "25%", width: "25%",
}, },
{ {
align: "center", align: "center",
width: "75%", width: "60%",
}, },
], ],
header: ["分类", "名称"], header: ["图例", "分类", "名称"],
list: [], list: [],
pageSize: 10, pageSize: 50,
pageNo: 1, pageNo: 1,
total: 0, total: 0,
}, },
@ -763,9 +755,13 @@ const vueGis = {
if (!info.id) { if (!info.id) {
return false return false
} }
if (!info.latitude || !info.longitude) {
this.$message.warning("请先完善坐标位置")
return false
}
this.selPlaceType = info.placeType this.selPlaceType = info.placeType
if (info.placeType === 'resi' || info.placeType === 'specil_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员 if (info.placeType === 'resi' || info.placeType === 'special_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员
info.id = "dd0bd55db0ca4b629c40bc914a08368e" // info.id = "dd0bd55db0ca4b629c40bc914a08368e"
this.selUserId = info.id this.selUserId = info.id
this.loadResi(info) this.loadResi(info)
} }
@ -844,8 +840,8 @@ const vueGis = {
}, },
async loadPublicService (info) { async loadPublicService (info) {
// const url = "/gov/org/icPublicService/detail" const url = "/gov/org/icPublicService/detail"
const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail" // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail"
let params = { let params = {
icPublicServiceId: info.id icPublicServiceId: info.id
@ -876,7 +872,7 @@ const vueGis = {
//const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId; //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId;
const { data, code, msg } = await requestPost(url, { const { data, code, msg } = await requestPost(url, {
icEventId: this.eventId, icEventId: info.id,
}); });
if (code === 0) { if (code === 0) {
@ -893,8 +889,8 @@ const vueGis = {
}, },
async loadDangerousChemicals (info) { async loadDangerousChemicals (info) {
// const url = "/gov/org/icDangerousChemicals/detail" const url = "/gov/org/icDangerousChemicals/detail"
const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icDangerousChemicals/detail" // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icDangerousChemicals/detail"
let params = { let params = {
icSuperiorResourceId: info.id icSuperiorResourceId: info.id
@ -924,8 +920,8 @@ const vueGis = {
}, },
async loadCityManagement (info) { async loadCityManagement (info) {
// const url = "/gov/org/icCityManagement/detail" const url = "/gov/org/icCityManagement/detail"
const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icCityManagement/detail" // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icCityManagement/detail"
let params = { let params = {
icCityManagementId: info.id icCityManagementId: info.id
@ -980,8 +976,8 @@ const vueGis = {
}, },
async loadSuperiorResource (info) { async loadSuperiorResource (info) {
// const url = "/gov/org/icSuperiorResource/detail" const url = "/gov/org/icSuperiorResource/detail"
const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icSuperiorResource/detail" // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icSuperiorResource/detail"
let params = { let params = {
icSuperiorResourceId: info.id icSuperiorResourceId: info.id
@ -1008,8 +1004,8 @@ const vueGis = {
}, },
async loadEnterprisePartrol (info) { async loadEnterprisePartrol (info) {
// const url = "/gov/org/enterprise/detail" const url = "/gov/org/enterprise/detail"
const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail" // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail"
const { data, code, msg } = await requestGet(url) const { data, code, msg } = await requestGet(url)
@ -1018,7 +1014,7 @@ const vueGis = {
let coordinate = [info.longitude, info.latitude] let coordinate = [info.longitude, info.latitude]
this.selInfo = JSON.parse(JSON.stringify(data)) this.selInfo = JSON.parse(JSON.stringify(data))
this.handleShowPopup(coordinate)
} else { } else {
this.$message.error(msg) this.$message.error(msg)
} }
@ -1033,7 +1029,7 @@ const vueGis = {
let coordinate = [info.longitude, info.latitude] let coordinate = [info.longitude, info.latitude]
this.selInfo = JSON.parse(JSON.stringify(data)) this.selInfo = JSON.parse(JSON.stringify(data))
this.handleShowPopup(coordinate)
} else { } else {
this.$message.error(msg) this.$message.error(msg)
} }
@ -1056,6 +1052,7 @@ const vueGis = {
} }
this.selInfo = JSON.parse(JSON.stringify(data)) this.selInfo = JSON.parse(JSON.stringify(data))
this.handleShowPopup(coordinate)
} else { } else {
this.$message.error(msg) this.$message.error(msg)
} }
@ -1083,6 +1080,7 @@ const vueGis = {
//点击图层 //点击图层
async handleClickCoverage (index) { async handleClickCoverage (index) {
this.demand.pageNo = 1
this.coverageTypesList[index].select = !this.coverageTypesList[index].select this.coverageTypesList[index].select = !this.coverageTypesList[index].select
let item = this.coverageTypesList[index] let item = this.coverageTypesList[index]
@ -1103,7 +1101,7 @@ const vueGis = {
//点击类别 //点击类别
async handleClickCategory (index, colIndex) { async handleClickCategory (index, colIndex) {
this.demand.pageNo = 1
this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel
// this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel // this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel
@ -1134,6 +1132,7 @@ const vueGis = {
let selData = this.tableList[index] let selData = this.tableList[index]
mapView.setCenter([selData.longitude, selData.latitude]); mapView.setCenter([selData.longitude, selData.latitude]);
this.clickMapVolunteer(selData) this.clickMapVolunteer(selData)
// alert(index) // alert(index)
}, },
@ -1185,10 +1184,10 @@ const vueGis = {
}, },
//加载组织数据 //加载组织数据
async getTable (isPage) { async getTable () {
// this.demand.loading = true this.demand.loading = true
// const url = "/data/aggregator/coverage/dataList"; const url = "/data/aggregator/coverage/dataList";
const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"; // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
let params = { let params = {
coverageTypes: this.coverageTypes, coverageTypes: this.coverageTypes,
categoryKeys: this.categoryKeys, categoryKeys: this.categoryKeys,
@ -1199,46 +1198,12 @@ const vueGis = {
}; };
const { data, code, msg } = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
// this.demand.loading = false; this.demand.loading = false;
if (code === 0) { if (code === 0) {
this.demand.total = data.total; this.demand.total = data.total;
data.list = [
{
categoryKey: "resi_xfry",
content: "信访人员",
id: "123",
latitude: "36.082230",
longitude: "120.3868167667315",
placeType: 'resi'
},
{
categoryKey: "sr_gy",
content: "公园",
id: "123",
latitude: "36.062227",
longitude: "120.389455",
placeType: 'public_service'
},
{
categoryKey: "ep_scjgqy",
content: "生产加工企业",
id: "123",
latitude: "36.072214",
longitude: "120.389455",
placeType: 'dangerous_chemicals'
},
{
categoryKey: "ps_wss",
content: "卫生所（室）",
id: "123",
latitude: "36.07394505338441",
longitude: "120.3868167667315",
placeType: 'city_management'
}
]
this.tableList = data.list this.tableList = data.list
this.demand.list = data.list this.demand.list = data.list
this.demand.list.forEach(item => { this.demand.list.forEach(item => {
@ -1254,6 +1219,7 @@ const vueGis = {
// item.categoryKey ? item.categoryKey : '--', // item.categoryKey ? item.categoryKey : '--',
item.imgObj, item.imgObj,
item.categoryName,
item.content ? item.content : '', item.content ? item.content : '',
]; ];
@ -1266,8 +1232,8 @@ const vueGis = {
//加载组织数据 //加载组织数据
async getMapTable () { async getMapTable () {
// const url = "/data/aggregator/coverage/dataList"; const url = "/data/aggregator/coverage/dataList";
const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"; // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
let params = { let params = {
coverageTypes: this.coverageTypes, coverageTypes: this.coverageTypes,
categoryKeys: this.categoryKeys, categoryKeys: this.categoryKeys,
@ -1279,43 +1245,12 @@ const vueGis = {
const { data, code, msg } = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.demand.total = data.total;
this.iconArrays = data.list this.iconArrays = data.list
this.iconArrays = [
{
categoryKey: "resi_xfry",
content: "信访人员",
id: "123",
latitude: "36.082230",
longitude: "120.3868167667315",
placeType: 'resi'
},
{
categoryKey: "sr_gy",
content: "公园",
id: "123",
latitude: "36.062227",
longitude: "120.389455",
placeType: 'public_service'
},
{
categoryKey: "ep_scjgqy",
content: "生产加工企业",
id: "123",
latitude: "36.072214",
longitude: "120.389455",
placeType: 'dangerous_chemicals'
},
{
categoryKey: "ps_wss",
content: "卫生所（室）",
id: "123",
latitude: "36.07394505338441",
longitude: "120.3868167667315",
placeType: 'city_management'
}
]
this.iconArrays.forEach((item, index) => {
this.iconArrays.forEach((item, index) => {
item.url = this.iconUrlArray[item.categoryKey] item.url = this.iconUrlArray[item.categoryKey]
}); });
@ -1888,6 +1823,31 @@ export default vueGis;
padding-bottom: 5px; padding-bottom: 5px;
} }
.info-prop {
position: relative;
margin: 10px 0;
display: flex;
padding-left: 15px;
font-size: 12px;
.info-pics {
display: flex;
margin: 10px 0;
img {
display: block;
width: 32%;
height: 90px;
margin-right: 9px;
object-fit: cover;
}
}
> span,
> div {
display: block;
max-width: 300px;
}
}
.popContentTitle { .popContentTitle {
font-size: 12px; font-size: 12px;
color: #ffffff; color: #ffffff;

Write Preview
Loading…
Cancel
Save