jiangyy
3 years ago
4 changed files with 1568 additions and 19 deletions
@ -0,0 +1,309 @@ |
|||||
|
<template> |
||||
|
<div class="m-menu"> |
||||
|
<div class="list"> |
||||
|
<div |
||||
|
class="item" |
||||
|
:key="'menu1' + item.coverageType" |
||||
|
v-for="item in menuList.slice(0, 2)" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': item.selected }" |
||||
|
@click="selectAll(item)" |
||||
|
> |
||||
|
<div class="name"> |
||||
|
{{ item.coverageName }} |
||||
|
<i v-if="item.quantity">({{ item.quantity }})</i> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="i-arrow" |
||||
|
:class="{ 'z-unfold': !item.folded }" |
||||
|
@click.stop="item.folded = !item.folded" |
||||
|
> |
||||
|
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-show="!item.folded" |
||||
|
class="granditem" |
||||
|
:key="'menu3' + granditem.categoryKey" |
||||
|
v-for="granditem in item.categories" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': granditem.selected }" |
||||
|
@click="granditem.selected = !granditem.selected" |
||||
|
> |
||||
|
<div class="i-ico"> |
||||
|
<img |
||||
|
v-if="grandIcoList[granditem.categoryKey]" |
||||
|
:src="grandIcoList[granditem.categoryKey]" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="name"> |
||||
|
{{ granditem.categoryName }} |
||||
|
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-show="!item.folded" |
||||
|
class="subitem" |
||||
|
:key="'menu2' + subitem.placeType" |
||||
|
v-for="subitem in item.placeTypesInAnalysis" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': subitem.selected }" |
||||
|
@click="selectAll(subitem)" |
||||
|
> |
||||
|
<div class="i-ico"> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'xxxxx'" |
||||
|
src="@/assets/img/shuju/command/fuwusheshi.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'enterprise_patrol'" |
||||
|
src="@/assets/img/shuju/command/qishiyedanweixuncha.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'group_rent'" |
||||
|
src="@/assets/img/shuju/command/qunzufang.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'community_org'" |
||||
|
src="@/assets/img/shuju/command/shequzizhuzi.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'superior_resource'" |
||||
|
src="@/assets/img/shuju/command/youshiziyuan.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'volunteer'" |
||||
|
src="@/assets/img/shuju/command/zhiyuanzhe.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'dangerous_chemicals'" |
||||
|
src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'party_unit'" |
||||
|
src="@/assets/img/shuju/command/lianjiandanwei.png" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="name"> |
||||
|
{{ subitem.placeTypeName }} |
||||
|
<i v-if="subitem.quantity">({{ subitem.quantity }})</i> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="i-arrow" |
||||
|
:class="{ 'z-unfold': !subitem.folded }" |
||||
|
@click.stop="subitem.folded = !subitem.folded" |
||||
|
> |
||||
|
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-show="!subitem.folded" |
||||
|
class="granditem" |
||||
|
:key="'menu3' + granditem.categoryKey" |
||||
|
v-for="granditem in subitem.categories" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': granditem.selected }" |
||||
|
@click="granditem.selected = !granditem.selected" |
||||
|
> |
||||
|
<div class="i-ico"> |
||||
|
<img |
||||
|
v-if="grandIcoList[granditem.categoryKey]" |
||||
|
:src="grandIcoList[granditem.categoryKey]" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="name"> |
||||
|
{{ granditem.categoryName }} |
||||
|
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
name: "sidemenu", |
||||
|
|
||||
|
props: { |
||||
|
grandIcoList: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
orgId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
menuList: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
menuList: { |
||||
|
handler(newValue, oldValue) { |
||||
|
// console.log("菜单改变拉------------------------------------", newValue); |
||||
|
if (oldValue.length != 0) { |
||||
|
this.$emit("change", newValue); |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
// immediate: true |
||||
|
}, |
||||
|
orgId() { |
||||
|
this.requestList(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.requestList(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
selectAll(item) { |
||||
|
item.selected = !item.selected; |
||||
|
item.categories.forEach((subitem) => { |
||||
|
subitem.selected = item.selected; |
||||
|
}); |
||||
|
if (item.placeTypesInAnalysis) { |
||||
|
item.placeTypesInAnalysis.forEach((subitem) => { |
||||
|
subitem.selected = item.selected; |
||||
|
subitem.categories.forEach((subitem2) => { |
||||
|
subitem2.selected = item.selected; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
//加载组织数据 |
||||
|
async requestList() { |
||||
|
const url = "/data/aggregator/coverage/analysis/resourceCategories"; |
||||
|
let params = { |
||||
|
agencyId: this.orgId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.menuList = data.map((item) => { |
||||
|
item.selected = false; |
||||
|
item.folded = true; |
||||
|
item.categories.forEach((subitem) => { |
||||
|
subitem.selected = false; |
||||
|
}); |
||||
|
item.placeTypesInAnalysis.forEach((subitem) => { |
||||
|
subitem.selected = false; |
||||
|
subitem.folded = true; |
||||
|
subitem.categories.forEach((granditem) => { |
||||
|
granditem.selected = false; |
||||
|
}); |
||||
|
}); |
||||
|
return item; |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.m-menu { |
||||
|
padding-top: 10px; |
||||
|
|
||||
|
.list { |
||||
|
.item { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
line-height: 60px; |
||||
|
color: rgba(#fff, 0.8); |
||||
|
|
||||
|
.z-on { |
||||
|
color: #ffffff; |
||||
|
background-color: #041267; |
||||
|
font-weight: bold; |
||||
|
box-shadow: 0 0 30px 5px inset #22f; |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
position: relative; |
||||
|
font-size: 18px; |
||||
|
width: 100%; |
||||
|
padding-left: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.i-ico { |
||||
|
position: relative; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
margin-right: 4px; |
||||
|
|
||||
|
img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 2px; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.i-arrow { |
||||
|
margin-left: auto; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
&.z-unfold { |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
box-shadow: 0 0 30px 5px inset #22f; |
||||
|
background-color: darken(#104ba4, 12); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.subitem, |
||||
|
.granditem { |
||||
|
> .info { |
||||
|
padding-left: 20px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.granditem { |
||||
|
> .info { |
||||
|
padding-left: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,309 @@ |
|||||
|
<template> |
||||
|
<div class="m-menu"> |
||||
|
<div class="list"> |
||||
|
<div |
||||
|
class="item" |
||||
|
:key="'menu1' + item.coverageType" |
||||
|
v-for="item in menuList.slice(2)" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': item.selected }" |
||||
|
@click="selectAll(item)" |
||||
|
> |
||||
|
<div class="name"> |
||||
|
{{ item.coverageName }} |
||||
|
<i v-if="item.quantity">({{ item.quantity }})</i> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="i-arrow" |
||||
|
:class="{ 'z-unfold': !item.folded }" |
||||
|
@click.stop="item.folded = !item.folded" |
||||
|
> |
||||
|
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-show="!item.folded" |
||||
|
class="granditem" |
||||
|
:key="'menu3' + granditem.categoryKey" |
||||
|
v-for="granditem in item.categories" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': granditem.selected }" |
||||
|
@click="granditem.selected = !granditem.selected" |
||||
|
> |
||||
|
<div class="i-ico"> |
||||
|
<img |
||||
|
v-if="grandIcoList[granditem.categoryKey]" |
||||
|
:src="grandIcoList[granditem.categoryKey]" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="name"> |
||||
|
{{ granditem.categoryName }} |
||||
|
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-show="!item.folded" |
||||
|
class="subitem" |
||||
|
:key="'menu2' + subitem.placeType" |
||||
|
v-for="subitem in item.placeTypesInAnalysis" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': subitem.selected }" |
||||
|
@click="selectAll(subitem)" |
||||
|
> |
||||
|
<div class="i-ico"> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'xxxxx'" |
||||
|
src="@/assets/img/shuju/command/fuwusheshi.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'enterprise_patrol'" |
||||
|
src="@/assets/img/shuju/command/qishiyedanweixuncha.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'group_rent'" |
||||
|
src="@/assets/img/shuju/command/qunzufang.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'community_org'" |
||||
|
src="@/assets/img/shuju/command/shequzizhuzi.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'superior_resource'" |
||||
|
src="@/assets/img/shuju/command/youshiziyuan.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'volunteer'" |
||||
|
src="@/assets/img/shuju/command/zhiyuanzhe.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'dangerous_chemicals'" |
||||
|
src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png" |
||||
|
/> |
||||
|
<img |
||||
|
v-if="subitem.placeType == 'party_unit'" |
||||
|
src="@/assets/img/shuju/command/lianjiandanwei.png" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="name"> |
||||
|
{{ subitem.placeTypeName }} |
||||
|
<i v-if="subitem.quantity">({{ subitem.quantity }})</i> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="i-arrow" |
||||
|
:class="{ 'z-unfold': !subitem.folded }" |
||||
|
@click.stop="subitem.folded = !subitem.folded" |
||||
|
> |
||||
|
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-show="!subitem.folded" |
||||
|
class="granditem" |
||||
|
:key="'menu3' + granditem.categoryKey" |
||||
|
v-for="granditem in subitem.categories" |
||||
|
> |
||||
|
<div |
||||
|
class="info" |
||||
|
:class="{ 'z-on': granditem.selected }" |
||||
|
@click="granditem.selected = !granditem.selected" |
||||
|
> |
||||
|
<div class="i-ico"> |
||||
|
<img |
||||
|
v-if="grandIcoList[granditem.categoryKey]" |
||||
|
:src="grandIcoList[granditem.categoryKey]" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="name"> |
||||
|
{{ granditem.categoryName }} |
||||
|
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
name: "sidemenu", |
||||
|
|
||||
|
props: { |
||||
|
grandIcoList: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
orgId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
menuList: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
menuList: { |
||||
|
handler(newValue, oldValue) { |
||||
|
// console.log("菜单改变拉------------------------------------", newValue); |
||||
|
if (oldValue.length != 0) { |
||||
|
this.$emit("change", newValue); |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
// immediate: true |
||||
|
}, |
||||
|
orgId() { |
||||
|
this.requestList(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.requestList(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
selectAll(item) { |
||||
|
item.selected = !item.selected; |
||||
|
item.categories.forEach((subitem) => { |
||||
|
subitem.selected = item.selected; |
||||
|
}); |
||||
|
if (item.placeTypesInAnalysis) { |
||||
|
item.placeTypesInAnalysis.forEach((subitem) => { |
||||
|
subitem.selected = item.selected; |
||||
|
subitem.categories.forEach((subitem2) => { |
||||
|
subitem2.selected = item.selected; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
//加载组织数据 |
||||
|
async requestList() { |
||||
|
const url = "/data/aggregator/coverage/analysis/resourceCategories"; |
||||
|
let params = { |
||||
|
agencyId: this.orgId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.menuList = data.map((item) => { |
||||
|
item.selected = false; |
||||
|
item.folded = true; |
||||
|
item.categories.forEach((subitem) => { |
||||
|
subitem.selected = false; |
||||
|
}); |
||||
|
item.placeTypesInAnalysis.forEach((subitem) => { |
||||
|
subitem.selected = false; |
||||
|
subitem.folded = true; |
||||
|
subitem.categories.forEach((granditem) => { |
||||
|
granditem.selected = false; |
||||
|
}); |
||||
|
}); |
||||
|
return item; |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.m-menu { |
||||
|
padding-top: 10px; |
||||
|
|
||||
|
.list { |
||||
|
.item { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
line-height: 60px; |
||||
|
color: rgba(#fff, 0.8); |
||||
|
|
||||
|
.z-on { |
||||
|
color: #ffffff; |
||||
|
background-color: #041267; |
||||
|
font-weight: bold; |
||||
|
box-shadow: 0 0 30px 5px inset #22f; |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
position: relative; |
||||
|
font-size: 18px; |
||||
|
width: 100%; |
||||
|
padding-left: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.i-ico { |
||||
|
position: relative; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
margin-right: 4px; |
||||
|
|
||||
|
img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 2px; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.i-arrow { |
||||
|
margin-left: auto; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
&.z-unfold { |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
box-shadow: 0 0 30px 5px inset #22f; |
||||
|
background-color: darken(#104ba4, 12); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.subitem, |
||||
|
.granditem { |
||||
|
> .info { |
||||
|
padding-left: 20px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.granditem { |
||||
|
> .info { |
||||
|
padding-left: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,881 @@ |
|||||
|
<template> |
||||
|
<div style="position: relative"> |
||||
|
<!-- 组织路由 --> |
||||
|
<div class="m-crumb"> |
||||
|
<div class="router_line"></div> |
||||
|
<div class="div_router"> |
||||
|
<span |
||||
|
class="router_parents" |
||||
|
v-for="(item, index) in runAgencyArray" |
||||
|
@click="handleClickAgency(index)" |
||||
|
:key="index" |
||||
|
>{{ item.name }}<span class="arrow">></span></span |
||||
|
> |
||||
|
|
||||
|
<span class="router_child">{{ orgData.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="g-cnt"> |
||||
|
<div class="m-map" @click="handleClickMapBox"> |
||||
|
<grid-map |
||||
|
ref="map" |
||||
|
v-if="orgData.id" |
||||
|
@clickAgency="clickAgencyItem" |
||||
|
@clickDotBtn="handleClickDotBtn" |
||||
|
:srcGridData="orgData" |
||||
|
:dotList="dotList" |
||||
|
:dotIcoList="dotIcoList" |
||||
|
:dotList2="dotList2" |
||||
|
:dotIcoList2="dotIcoList2" |
||||
|
:gridCountData="gridCountData" |
||||
|
:pitch="0" |
||||
|
/> |
||||
|
|
||||
|
<div class="m-mapmenu"> |
||||
|
<sidemenu-left |
||||
|
:orgId="orgId" |
||||
|
@change="handleChangeMenuLeft" |
||||
|
></sidemenu-left> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-search"> |
||||
|
<div class="input"> |
||||
|
<img class="i-search" src="@/assets/img/shuju/command/search.png" /> |
||||
|
<input |
||||
|
type="text" |
||||
|
placeholder="请输入" |
||||
|
@keyup.enter="handleSearch" |
||||
|
v-model="searchName" |
||||
|
/> |
||||
|
<img |
||||
|
v-show="searchName" |
||||
|
class="i-close" |
||||
|
@click="clearSearch" |
||||
|
src="@/assets/img/shuju/command/close.png" |
||||
|
/> |
||||
|
<div class="btn" @click="handleSearch">搜索</div> |
||||
|
</div> |
||||
|
<div class="result" v-if="showedSearchResult"> |
||||
|
<template v-for="item in searchResult"> |
||||
|
<div |
||||
|
:key="'searchResult' + item.type" |
||||
|
class="result-item" |
||||
|
v-show="item.list.length > 0" |
||||
|
> |
||||
|
<div class="result-type">{{ item.title }}</div> |
||||
|
<div |
||||
|
class="result-more" |
||||
|
@click.stop="handleClickSearchResultMore(item)" |
||||
|
v-show="item.allList.length > 2" |
||||
|
> |
||||
|
更多 |
||||
|
</div> |
||||
|
<div class="result-ul"> |
||||
|
<div |
||||
|
class="result-li z-toe" |
||||
|
:key="item.type + 'li' + index" |
||||
|
v-for="(li, index) in item.list" |
||||
|
@click.stop="handleClickSearchLi(li, item)" |
||||
|
> |
||||
|
<span v-if="item.type == 'position'">{{ |
||||
|
li.name + " " + li.address |
||||
|
}}</span> |
||||
|
<span v-if="item.type == 'resi'">{{ |
||||
|
li.name + "（" + li.idCard + "）" |
||||
|
}}</span> |
||||
|
<span v-if="item.type == 'event'">{{ |
||||
|
li.eventContent |
||||
|
}}</span> |
||||
|
<span v-if="item.type == 'resource'">{{ li.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="result-panel" v-show="item.showedMore"> |
||||
|
<div class="result-type">{{ item.title }}</div> |
||||
|
<div class="result-ul"> |
||||
|
<div |
||||
|
class="result-li z-toe" |
||||
|
:key="item.type + 'li2_' + index" |
||||
|
v-for="(li, index) in item.allList" |
||||
|
@click.stop="handleClickSearchLi(li, item)" |
||||
|
> |
||||
|
<span v-if="item.type == 'position'">{{ |
||||
|
li.name + " " + li.address |
||||
|
}}</span> |
||||
|
<span v-if="item.type == 'resi'">{{ |
||||
|
li.name + "（" + li.idCard + "）" |
||||
|
}}</span> |
||||
|
<span v-if="item.type == 'event'">{{ |
||||
|
li.eventContent |
||||
|
}}</span> |
||||
|
<span v-if="item.type == 'resource'">{{ li.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-sidebar" v-show="false"> |
||||
|
<div class="wrap" :class="[{ 'wrap-hidden': !showAgencyList }]"> |
||||
|
<div @click="hideAgencyList" class="arrow_tip"> |
||||
|
<img src="@/assets/img/modules/visual/popup.png" alt /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_agency_list"> |
||||
|
<div class="agency_main"> |
||||
|
<el-scrollbar |
||||
|
style="height: 98%" |
||||
|
wrap-style="overflow-x:hidden" |
||||
|
> |
||||
|
<div v-if="subAgencyArray.length > 0" class="agency_list"> |
||||
|
<div |
||||
|
v-for="(item, index) in subAgencyArray" |
||||
|
:key="index" |
||||
|
@click="clickAgencyItem(item, index)" |
||||
|
:class="[ |
||||
|
'agency_item', |
||||
|
{ agency_item_on: index % 2 == 0 }, |
||||
|
]" |
||||
|
> |
||||
|
<div class="agency_item_name">{{ item.name }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<img |
||||
|
src="@/assets/img/modules/visual/noData.png" |
||||
|
alt="" |
||||
|
srcset="" |
||||
|
class="no-data-img" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-sidemenu"> |
||||
|
<cpt-card> |
||||
|
<div class="title"> |
||||
|
<img src="@/assets/img/shuju/title-tip.png" /> |
||||
|
<span>指挥调度</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="list"> |
||||
|
<sidemenu |
||||
|
:orgId="orgId" |
||||
|
@change="handleChangeMenu" |
||||
|
:grandIcoList="dotIcoList" |
||||
|
></sidemenu> |
||||
|
</div> |
||||
|
</cpt-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<event-info |
||||
|
v-if="pageType === 'watch-event'" |
||||
|
ref="ref_event" |
||||
|
:eventId="eventId" |
||||
|
@handleClose="handleClose" |
||||
|
/> |
||||
|
|
||||
|
<service-info |
||||
|
v-if="pageType === 'create-service'" |
||||
|
ref="ref_service" |
||||
|
:default-data="serviceDefaultData" |
||||
|
@handleClose="handleClose" |
||||
|
/> |
||||
|
|
||||
|
<demand-info |
||||
|
v-if="pageType === 'create-demand'" |
||||
|
ref="ref_demand" |
||||
|
:icResiUserId="icResiUserId" |
||||
|
:selGridId="selGridId" |
||||
|
@handleClose="handleClose" |
||||
|
/> |
||||
|
|
||||
|
<qsydw |
||||
|
v-if="pageType === 'watch-xuncha'" |
||||
|
ref="ref_xuncha" |
||||
|
:enterpriseId="enterpriseId" |
||||
|
@handleClose="handleClose" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import { Loading } from "element-ui"; //引入Loading服务 |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import People from "@/views/modules/visual/basicinfo/people"; |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import gridMap from "@/views/modules/visual/command/cpts/map"; |
||||
|
import sidemenu from "@/views/modules/visual/command/cpts/sidemenu"; |
||||
|
import sidemenuLeft from "@/views/modules/visual/command/cpts/sidemenu-left"; |
||||
|
import ScreenLoading from "@/views/modules/visual/cpts/loading"; |
||||
|
|
||||
|
import eventInfo from "@/views/modules/visual/command/cpts/eventInfo"; |
||||
|
import serviceInfo from "@/views/modules/visual/command/cpts/serviceInfo"; |
||||
|
import demandInfo from "@/views/modules/visual/command/cpts/demandInfo"; |
||||
|
import qsydw from "@/views/modules/visual/command/cpts/qsydw"; |
||||
|
|
||||
|
let loading; //加载动画 |
||||
|
|
||||
|
function iniSearchResult() { |
||||
|
return [ |
||||
|
{ |
||||
|
type: "position", |
||||
|
title: "地点", |
||||
|
showedMore: false, |
||||
|
list: [], |
||||
|
allList: [], |
||||
|
}, |
||||
|
{ |
||||
|
type: "resi", |
||||
|
title: "居民", |
||||
|
showedMore: false, |
||||
|
list: [], |
||||
|
allList: [], |
||||
|
}, |
||||
|
{ |
||||
|
type: "event", |
||||
|
title: "事件", |
||||
|
showedMore: false, |
||||
|
list: [], |
||||
|
allList: [], |
||||
|
}, |
||||
|
{ |
||||
|
type: "resource", |
||||
|
title: "资源", |
||||
|
showedMore: false, |
||||
|
list: [], |
||||
|
allList: [], |
||||
|
}, |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: "HomeMap", |
||||
|
|
||||
|
components: { |
||||
|
People, |
||||
|
cptCard, |
||||
|
ScreenLoading, |
||||
|
gridMap, |
||||
|
sidemenu, |
||||
|
sidemenuLeft, |
||||
|
eventInfo, |
||||
|
serviceInfo, |
||||
|
demandInfo, |
||||
|
qsydw, |
||||
|
}, |
||||
|
|
||||
|
props: {}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters(["clientHeight"]), |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
showAgencyList: false, |
||||
|
|
||||
|
orgData: {}, //当前组织对象 |
||||
|
orgId: "", |
||||
|
orgLevel: "", |
||||
|
|
||||
|
subAgencyArray: [], //下拉框数据 |
||||
|
|
||||
|
//下钻层级记录 |
||||
|
runNum: 0, |
||||
|
runAgencyArray: [], |
||||
|
selUserId: "", |
||||
|
|
||||
|
dotList: [], |
||||
|
categoryKeys: [], |
||||
|
coverageTypes: [], |
||||
|
|
||||
|
dotIcoList: { |
||||
|
anzhibangjiao: require("@/assets/img/shuju/command/ico/anzhibangjiao.png"), |
||||
|
buliangqingshaonian: require("@/assets/img/shuju/command/ico/buliangqingshaonian.png"), |
||||
|
shequjiaozheng: require("@/assets/img/shuju/command/ico/shequjiaozheng.png"), |
||||
|
resi_xfry: require("@/assets/img/shuju/command/ico/resi_xfry.png"), |
||||
|
xidurenyuan: require("@/assets/img/shuju/command/ico/xidurenyuan.png"), |
||||
|
xiejiaorenyuan: require("@/assets/img/shuju/command/ico/xiejiaorenyuan.png"), |
||||
|
zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/command/ico/zhaoshizhaohuojingshenbing.png"), |
||||
|
|
||||
|
enterprise_patrol_unqualified: require("@/assets/img/shuju/command/ico/enterprise_patrol_unqualified.png"), |
||||
|
|
||||
|
yjdw: require("@/assets/img/shuju/command/ico/yjdw.png"), |
||||
|
sr_gy: require("@/assets/img/shuju/command/ico/sr_gy.png"), |
||||
|
sr_gc: require("@/assets/img/shuju/command/ico/sr_gc.png"), |
||||
|
whdw: require("@/assets/img/shuju/command/ico/whdw.png"), |
||||
|
sr_ggld: require("@/assets/img/shuju/command/ico/sr_ggld.png"), |
||||
|
lwh: require("@/assets/img/shuju/command/ico/lwh.png"), |
||||
|
sr_tyc: require("@/assets/img/shuju/command/ico/sr_tyc.png"), |
||||
|
lyjlb: require("@/assets/img/shuju/command/ico/lyjlb.png"), |
||||
|
sr_yjy: require("@/assets/img/shuju/command/ico/sr_yjy.png"), |
||||
|
zaxld: require("@/assets/img/shuju/command/ico/zaxld.png"), |
||||
|
other: require("@/assets/img/shuju/command/ico/other.png"), |
||||
|
sr_jzz: require("@/assets/img/shuju/command/ico/sr_jzz.png"), |
||||
|
sr_djc: require("@/assets/img/shuju/command/ico/sr_djc.png"), |
||||
|
sr_rfqck: require("@/assets/img/shuju/command/ico/sr_rfqck.png"), |
||||
|
ep_lg: require("@/assets/img/shuju/command/ico/ep_lg.png"), |
||||
|
sr_xfz: require("@/assets/img/shuju/command/ico/sr_xfz.png"), |
||||
|
pu_jgzsbm: require("@/assets/img/shuju/command/ico/pu_jgzsbm.png"), |
||||
|
ep_qt: require("@/assets/img/shuju/command/ico/ep_qt.png"), |
||||
|
|
||||
|
sr_others: require("@/assets/img/shuju/command/ico/sr_others.png"), |
||||
|
cm_others: require("@/assets/img/shuju/command/ico/cm_others.png"), |
||||
|
ps_others: require("@/assets/img/shuju/command/ico/ps_others.png"), |
||||
|
ps_nat: require("@/assets/img/shuju/command/ico/ps_nat.png"), |
||||
|
ps_vaccine: require("@/assets/img/shuju/command/ico/ps_vaccine.png"), |
||||
|
|
||||
|
gr_czw: require("@/assets/img/shuju/command/ico/gr_czw.png"), |
||||
|
ep_cycs: require("@/assets/img/shuju/command/ico/ep_cycs.png"), |
||||
|
dc_jyz: require("@/assets/img/shuju/command/ico/dc_jyz.png"), |
||||
|
ep_gwylcs: require("@/assets/img/shuju/command/ico/ep_gwylcs.png"), |
||||
|
dc_jqz: require("@/assets/img/shuju/command/ico/dc_jqz.png"), |
||||
|
dc_whpdw: require("@/assets/img/shuju/command/ico/dc_whpdw.png"), |
||||
|
ep_wb: require("@/assets/img/shuju/command/ico/ep_wb.png"), |
||||
|
ep_mrxycs: require("@/assets/img/shuju/command/ico/ep_mrxycs.png"), |
||||
|
dc_yqhjz: require("@/assets/img/shuju/command/ico/dc_yqhjz.png"), |
||||
|
dc_jzgd: require("@/assets/img/shuju/command/ico/dc_jzgd.png"), |
||||
|
ep_scjgqy: require("@/assets/img/shuju/command/ico/ep_scjgqy.png"), |
||||
|
|
||||
|
cm_nmsc: require("@/assets/img/shuju/command/ico/cm_nmsc.png"), |
||||
|
event_tdnd: require("@/assets/img/shuju/command/ico/event_tdnd.png"), |
||||
|
cm_bhsc: require("@/assets/img/shuju/command/ico/cm_bhsc.png"), |
||||
|
cm_cjsc: require("@/assets/img/shuju/command/ico/cm_cjsc.png"), |
||||
|
ep_lssd: require("@/assets/img/shuju/command/ico/ep_lssd.png"), |
||||
|
|
||||
|
resi_szry: require("@/assets/img/shuju/command/ico/resi_szry.png"), |
||||
|
ps_lyy: require("@/assets/img/shuju/command/ico/ps_lyy.png"), |
||||
|
resi_snry: require("@/assets/img/shuju/command/ico/resi_snry.png"), |
||||
|
ps_mzb: require("@/assets/img/shuju/command/ico/ps_mzb.png"), |
||||
|
ps_zs: require("@/assets/img/shuju/command/ico/ps_zs.png"), |
||||
|
ps_wss: require("@/assets/img/shuju/command/ico/ps_wss.png"), |
||||
|
ps_jjz: require("@/assets/img/shuju/command/ico/ps_jjz.png"), |
||||
|
ep_xx: require("@/assets/img/shuju/command/ico/ep_xx.png"), |
||||
|
ep_yy: require("@/assets/img/shuju/command/ico/ep_yy.png"), |
||||
|
|
||||
|
volunteer_nengrendaren: require("@/assets/img/shuju/command/ico/volunteer_nengrendaren.png"), |
||||
|
volunteer_daibanyuan: require("@/assets/img/shuju/command/ico/volunteer_daibanyuan.png"), |
||||
|
volunteer_tiaojieyuan: require("@/assets/img/shuju/command/ico/volunteer_tiaojieyuan.png"), |
||||
|
volunteer_caijiyuan: require("@/assets/img/shuju/command/ico/volunteer_caijiyuan.png"), |
||||
|
volunteer_zhianxunluo: require("@/assets/img/shuju/command/ico/volunteer_zhianxunluo.png"), |
||||
|
volunteer_others: require("@/assets/img/shuju/command/ico/volunteer_others.png"), |
||||
|
volunteer_dangyuanzhongxinhu: require("@/assets/img/shuju/command/ico/volunteer_dangyuanzhongxinhu.png"), |
||||
|
|
||||
|
pu_0: require("@/assets/img/shuju/command/ico/pu_0.png"), |
||||
|
pu_1: require("@/assets/img/shuju/command/ico/pu_1.png"), |
||||
|
pu_2: require("@/assets/img/shuju/command/ico/pu_2.png"), |
||||
|
pu_3: require("@/assets/img/shuju/command/ico/pu_3.png"), |
||||
|
pu_4: require("@/assets/img/shuju/command/ico/pu_4.png"), |
||||
|
pu_5: require("@/assets/img/shuju/command/ico/pu_5.png"), |
||||
|
pu_6: require("@/assets/img/shuju/command/ico/pu_6.png"), |
||||
|
pu_7: require("@/assets/img/shuju/command/ico/pu_7.png"), |
||||
|
}, |
||||
|
|
||||
|
gridCountData: [], |
||||
|
dotList2: [], |
||||
|
categoryKeys2: [], |
||||
|
coverageTypes2: [], |
||||
|
categoryNames2: [], |
||||
|
dotIcoList2: { |
||||
|
event_tdnd: require("@/assets/img/shuju/command/ico3/event_tdnd.png"), |
||||
|
enterprise_patrol_unqualified: require("@/assets/img/shuju/command/ico3/enterprise_patrol_unqualified.png"), |
||||
|
resi_xfry: require("@/assets/img/shuju/command/ico3/resi_xfry.png"), |
||||
|
xiejiaorenyuan: require("@/assets/img/shuju/command/ico3/xiejiaorenyuan.png"), |
||||
|
zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/command/ico3/zhaoshizhaohuojingshenbing.png"), |
||||
|
buliangqingshaonian: require("@/assets/img/shuju/command/ico3/buliangqingshaonian.png"), |
||||
|
shequjiaozheng: require("@/assets/img/shuju/command/ico3/shequjiaozheng.png"), |
||||
|
xidurenyuan: require("@/assets/img/shuju/command/ico3/xidurenyuan.png"), |
||||
|
IS_DBH: require("@/assets/img/shuju/command/ico3/IS_DBH.png"), |
||||
|
IS_YLFN: require("@/assets/img/shuju/command/ico3/IS_YLFN.png"), |
||||
|
IS_OLD_PEOPLE: require("@/assets/img/shuju/command/ico3/IS_OLD_PEOPLE.png"), |
||||
|
IS_UNEMPLOYED: require("@/assets/img/shuju/command/ico3/IS_UNEMPLOYED.png"), |
||||
|
IS_DB: require("@/assets/img/shuju/command/ico3/IS_DB.png"), |
||||
|
IS_MB: require("@/assets/img/shuju/command/ico3/IS_MB.png"), |
||||
|
anzhibangjiao: require("@/assets/img/shuju/command/ico3/anzhibangjiao.png"), |
||||
|
IS_KC: require("@/assets/img/shuju/command/ico3/IS_KC.png"), |
||||
|
IS_XFRY: require("@/assets/img/shuju/command/ico3/IS_XFRY.png"), |
||||
|
IS_SD: require("@/assets/img/shuju/command/ico3/IS_SD.png"), |
||||
|
IS_SN: require("@/assets/img/shuju/command/ico3/IS_SN.png"), |
||||
|
IS_SZ: require("@/assets/img/shuju/command/ico3/IS_SZ.png"), |
||||
|
IS_SPECIAL: require("@/assets/img/shuju/command/ico3/IS_SPECIAL.png"), |
||||
|
IS_UNITED_FRONT: require("@/assets/img/shuju/command/ico3/IS_UNITED_FRONT.png"), |
||||
|
IS_VOLUNTEER: require("@/assets/img/shuju/command/ico3/IS_VOLUNTEER.png"), |
||||
|
IS_VETERANS: require("@/assets/img/shuju/command/ico3/IS_VETERANS.png"), |
||||
|
IS_ENSURE_HOUSE: require("@/assets/img/shuju/command/ico3/IS_ENSURE_HOUSE.png"), |
||||
|
IS_CJ: require("@/assets/img/shuju/command/ico3/IS_CJ.png"), |
||||
|
IS_PARTY: require("@/assets/img/shuju/command/ico3/IS_PARTY.png"), |
||||
|
IS_XJC: require("@/assets/img/shuju/command/ico3/IS_XJC.png"), |
||||
|
}, |
||||
|
|
||||
|
searchName: "", |
||||
|
showedSearchResult: false, |
||||
|
searchResult: iniSearchResult(), |
||||
|
|
||||
|
pageType: "", |
||||
|
icResiUserId: "", |
||||
|
selGridId: "", |
||||
|
eventId: "", |
||||
|
enterpriseId: "", |
||||
|
serviceDefaultData: null, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
categoryKeys() { |
||||
|
this.requestMapDot(); |
||||
|
}, |
||||
|
categoryKeys2() { |
||||
|
this.requestMapDot2(); |
||||
|
}, |
||||
|
searchName(val) { |
||||
|
this.showedSearchResult = false; |
||||
|
this.searchResult = iniSearchResult(); |
||||
|
if (val == "") { |
||||
|
this.$refs.map.removeDotMarker(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
async mounted() { |
||||
|
//加载组织数据 |
||||
|
await this.loadOrgData(); |
||||
|
await this.requestMapDot(); |
||||
|
await this.requestMapDot2(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClickDotBtn(type, info) { |
||||
|
if (type == "create-service") { |
||||
|
// 点击网格发起服务 |
||||
|
if ( |
||||
|
info.placeType == "volunteer" || |
||||
|
info.placeType == "community_org" || |
||||
|
info.placeType == "party_unit" |
||||
|
) { |
||||
|
this.serviceDefaultData = { |
||||
|
serviceOrgType: |
||||
|
info.placeType == "volunteer" |
||||
|
? "ic_user_volunteer" |
||||
|
: info.placeType, |
||||
|
serviceOrgId: info.id, |
||||
|
}; |
||||
|
} else if (info.placeType == "grid") { |
||||
|
this.serviceDefaultData = { |
||||
|
scopeIdArray: [info.id], |
||||
|
}; |
||||
|
} |
||||
|
} else if (type == "watch-resi") { |
||||
|
// this.toSubAgency("people", info.icResiUserId); |
||||
|
this.icResiUserId = info.icResiUserId; |
||||
|
this.$router.push({ |
||||
|
path: `/main-shuju/visual-basicinfo-people/${info.icResiUserId}`, |
||||
|
}); |
||||
|
// 查看居民详情 |
||||
|
} else if (type == "watch-event") { |
||||
|
// 查看事件 |
||||
|
this.eventId = info.icEventId; |
||||
|
} else if (type == "create-demand") { |
||||
|
// 发起需求 |
||||
|
this.icResiUserId = info.icResiUserId; |
||||
|
this.selGridId = info.gridId; |
||||
|
} else if (type == "watch-xuncha") { |
||||
|
this.enterpriseId = info.enterpriseId; |
||||
|
} |
||||
|
this.pageType = type; |
||||
|
}, |
||||
|
|
||||
|
handleClose() { |
||||
|
this.pageType = ""; |
||||
|
}, |
||||
|
|
||||
|
handleClickMapBox() { |
||||
|
this.showedSearchResult = false; |
||||
|
}, |
||||
|
|
||||
|
handleTo(item) { |
||||
|
this.$router.push({ |
||||
|
path: `/main-shuju/visual-basicinfo-people-list`, |
||||
|
query: { |
||||
|
columnName: item.columnName, |
||||
|
label: item.label, |
||||
|
id: this.orgId, |
||||
|
level: this.orgLevel, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
hideAgencyList() { |
||||
|
this.showAgencyList = !this.showAgencyList; |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
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; |
||||
|
if (data.children && data.children.length > 0) { |
||||
|
this.subAgencyArray = data.children; |
||||
|
} else { |
||||
|
this.subAgencyArray = []; |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleChangeMenuLeft(obj) { |
||||
|
this.coverageTypes2 = [obj.coverageType]; |
||||
|
this.categoryKeys2 = [obj.categoryKey]; |
||||
|
this.placeType2 = obj.placeType; |
||||
|
this.categoryNames2 = [obj.categoryName]; |
||||
|
console.log(obj); |
||||
|
}, |
||||
|
|
||||
|
handleChangeMenu(list) { |
||||
|
console.log("handleChangeMenu", list); |
||||
|
let categoryKeys = []; |
||||
|
let coverageTypes = []; |
||||
|
list.forEach((item) => { |
||||
|
if (item.selected) { |
||||
|
coverageTypes.push(item.coverageType); |
||||
|
} |
||||
|
item.categories.forEach((subitem) => { |
||||
|
if (subitem.selected) { |
||||
|
coverageTypes.push(item.coverageType); |
||||
|
categoryKeys.push(subitem.categoryKey); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
item.placeTypesInAnalysis.forEach((subitem) => { |
||||
|
subitem.categories.forEach((subitem2) => { |
||||
|
if (subitem2.selected) { |
||||
|
categoryKeys.push(subitem2.categoryKey); |
||||
|
coverageTypes.push(subitem2.coverageType); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
this.categoryKeys = [...new Set(categoryKeys)]; |
||||
|
this.coverageTypes = [...new Set(coverageTypes)]; |
||||
|
this.requestMapDot(); |
||||
|
}, |
||||
|
|
||||
|
async requestMapDot() { |
||||
|
if (!this.orgId) return; |
||||
|
const url = "/data/aggregator/coverage/dataList"; |
||||
|
let params = { |
||||
|
orgId: this.orgId, |
||||
|
orgType: "agency", |
||||
|
coverageTypes: this.coverageTypes, |
||||
|
categoryKeys: this.categoryKeys, |
||||
|
isPage: false, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.dotList = data.list; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async requestMapDot2() { |
||||
|
if (!this.orgId) return; |
||||
|
this.requestMapDot2Count(); |
||||
|
const url = "/data/aggregator/coverage/dataList-left"; |
||||
|
let params = { |
||||
|
orgId: this.orgId, |
||||
|
orgType: "agency", |
||||
|
coverageTypes: this.coverageTypes2, |
||||
|
categoryKeys: this.categoryKeys2, |
||||
|
isPage: false, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.dotList2 = data.list.map((item) => { |
||||
|
item.categoryKey = this.categoryKeys2[0]; |
||||
|
return item; |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async requestMapDot2Count() { |
||||
|
if (!this.placeType2) { |
||||
|
return (this.gridCountData = []); |
||||
|
} |
||||
|
const url = "/data/aggregator/coverage/dataList-left-subtotal"; |
||||
|
let params = { |
||||
|
orgId: this.orgId, |
||||
|
orgType: "agency", |
||||
|
coverageType: this.coverageTypes2[0], |
||||
|
categoryKey: this.categoryKeys2[0], |
||||
|
placeType: this.placeType2, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.gridCountData = [ |
||||
|
...data.map((item) => ({ |
||||
|
...item, |
||||
|
categoryName: this.categoryNames2[0], |
||||
|
})), |
||||
|
]; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//子组件点击房间，刷新右侧list |
||||
|
refreshInfoList(selId, type) { |
||||
|
this.orgId = selId; |
||||
|
this.level = ""; |
||||
|
}, |
||||
|
|
||||
|
//返回所选组织 |
||||
|
handleClickAgency(index) { |
||||
|
//如果是从小区返回，清空一下小区的人员显示列表 |
||||
|
if (this.orgLevel === "neighborHood") { |
||||
|
this.$nextTick(() => { |
||||
|
// 小区id，小区名称 |
||||
|
this.$refs.ref_community.handleCloseAllUser(); |
||||
|
}); |
||||
|
} |
||||
|
const cutNum = this.runAgencyArray.length - index; //要减去的长度 |
||||
|
this.runNum = this.runNum - cutNum; |
||||
|
|
||||
|
this.orgData = this.runAgencyArray[index]; |
||||
|
|
||||
|
for (let i = 0; i < cutNum; i++) { |
||||
|
this.runAgencyArray.pop(); |
||||
|
} |
||||
|
|
||||
|
this.orgId = this.orgData.id; |
||||
|
this.orgLevel = this.orgData.level; |
||||
|
|
||||
|
if (this.orgLevel === "people") { |
||||
|
} else if (this.orgLevel === "neighborHood") { |
||||
|
//显示小区 |
||||
|
} else { |
||||
|
this.$nextTick(() => { |
||||
|
this.refreshMap(true); |
||||
|
this.$forceUpdate(); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//点击组织列表数据 |
||||
|
clickAgencyItem(item, index) { |
||||
|
console.log(item); |
||||
|
if (item.level == "grid") { |
||||
|
} else { |
||||
|
let e = { |
||||
|
selected: [], |
||||
|
}; |
||||
|
let one = { |
||||
|
values_: item, |
||||
|
}; |
||||
|
e.selected.push(one); |
||||
|
|
||||
|
this.toSubAgency("polygon", e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区） people 点击详情 |
||||
|
async toSubAgency(type, e) { |
||||
|
//点击小区neighborHood显示楼栋，点击非小区，进入下一级地图 |
||||
|
if (type === "people") { |
||||
|
this.runNum++; |
||||
|
this.runAgencyArray.push(this.orgData); |
||||
|
this.orgLevel = "people"; |
||||
|
this.selUserId = e; |
||||
|
this.orgId = ""; |
||||
|
this.orgData = { |
||||
|
id: "", |
||||
|
level: "people", |
||||
|
name: "人员档案", |
||||
|
}; |
||||
|
} else { |
||||
|
if (!e) { |
||||
|
return false; |
||||
|
} |
||||
|
if (!e.selected[0]) { |
||||
|
return false; |
||||
|
} |
||||
|
this.runNum++; |
||||
|
|
||||
|
this.runAgencyArray.push(this.orgData); |
||||
|
|
||||
|
this.subAgencyArray.forEach((item) => { |
||||
|
if (item.id === e.selected[0].values_.id) { |
||||
|
this.orgId = item.id; |
||||
|
this.orgLevel = item.level; |
||||
|
this.orgData = item; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (this.orgLevel === "neighborHood") { |
||||
|
this.requestMapDot(); |
||||
|
this.$nextTick(() => { |
||||
|
// 小区id，小区名称 |
||||
|
this.$refs.ref_community.initData( |
||||
|
this.orgData.id, |
||||
|
this.orgData.name |
||||
|
); |
||||
|
}); |
||||
|
} else { |
||||
|
this.refreshMap(true); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//刷新地图 |
||||
|
async refreshMap(isRefreshView) { |
||||
|
//加载组织数据 |
||||
|
await this.loadOrgData(); |
||||
|
|
||||
|
await this.requestMapDot(); |
||||
|
await this.requestMapDot2(); |
||||
|
}, |
||||
|
|
||||
|
async handleSearch() { |
||||
|
const { searchName } = this; |
||||
|
if (!searchName) { |
||||
|
return this.$message.error("请输入搜索内容"); |
||||
|
} |
||||
|
|
||||
|
await this.searchPos(); |
||||
|
|
||||
|
const url = "/data/aggregator/coverage/search"; |
||||
|
let params = { |
||||
|
name: searchName, |
||||
|
pageSize: 10, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
data.userInfos.forEach((item) => { |
||||
|
item.placeType = "resi"; |
||||
|
item.id = item.icUserId; |
||||
|
}); |
||||
|
data.eventInfos.forEach((item) => { |
||||
|
item.placeType = "event"; |
||||
|
item.id = item.eventId; |
||||
|
}); |
||||
|
data.resourceInfos.forEach((item) => { |
||||
|
item.placeType = item.resourceType; |
||||
|
item.id = item.resourceId; |
||||
|
}); |
||||
|
this.searchResult[1].list = data.userInfos.slice(0, 2); |
||||
|
this.searchResult[1].allList = data.userInfos; |
||||
|
this.searchResult[2].list = data.eventInfos.slice(0, 2); |
||||
|
this.searchResult[2].allList = data.eventInfos; |
||||
|
this.searchResult[3].list = data.resourceInfos.slice(0, 2); |
||||
|
this.searchResult[3].allList = data.resourceInfos; |
||||
|
console.log("检索", this.searchResult); |
||||
|
if (this.searchResult.every((item) => item.list.length == 0)) { |
||||
|
this.$message.error("未检索到相关内容"); |
||||
|
} else { |
||||
|
this.showedSearchResult = true; |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
clearSearch() { |
||||
|
this.searchName = ""; |
||||
|
this.$refs.map.removeDotMarker(); |
||||
|
}, |
||||
|
|
||||
|
async searchPos() { |
||||
|
let data = await this.$refs.map.searchPos(this.searchName); |
||||
|
|
||||
|
console.log("检索位置", data); |
||||
|
|
||||
|
if ( |
||||
|
data && |
||||
|
data.poiList && |
||||
|
Array.isArray(data.poiList.pois) && |
||||
|
data.poiList.pois.length > 0 |
||||
|
) { |
||||
|
let list = data.poiList.pois.map((item) => { |
||||
|
item.longitude = item.location.lng; |
||||
|
item.latitude = item.location.lat; |
||||
|
return item; |
||||
|
}); |
||||
|
this.searchResult[0].list = list.slice(0, 2); |
||||
|
this.searchResult[0].allList = list; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleClickSearchLi(li) { |
||||
|
console.log("handleClickSearchLi", li); |
||||
|
if (!li.longitude) { |
||||
|
return this.$message.error("请先设置坐标"); |
||||
|
} |
||||
|
this.$refs.map.setDotMarker(li, [ |
||||
|
parseFloat(li.longitude), |
||||
|
parseFloat(li.latitude), |
||||
|
]); |
||||
|
this.showedSearchResult = false; |
||||
|
}, |
||||
|
|
||||
|
handleClickSearchResultMore(item) { |
||||
|
console.log(item); |
||||
|
let res = !item.showedMore; |
||||
|
if (res) { |
||||
|
this.searchResult.forEach((item) => (item.showedMore = false)); |
||||
|
} |
||||
|
item.showedMore = !item.showedMore; |
||||
|
}, |
||||
|
//开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, //是否锁定 |
||||
|
text: "正在加载……", //加载中需要显示的文字 |
||||
|
background: "rgba(0,0,0,.7)", //背景颜色 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//结束加载动画 |
||||
|
endLoading() { |
||||
|
//clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/command.scss" |
||||
|
scoped |
||||
|
></style> |
||||
Loading…
Reference in new issue