zxc
3 years ago
18 changed files with 3580 additions and 147 deletions
@ -0,0 +1,320 @@ |
|||
@import "../../c/config"; |
|||
@import "../../c/function"; |
|||
@import "./c/common"; |
|||
|
|||
.m-crumb { |
|||
margin-left: 10px; |
|||
height: 40px; |
|||
line-height: 35px; |
|||
.router_line { |
|||
width: 212px; |
|||
height: 1px; |
|||
border: 1px solid #ffffff; |
|||
opacity: 0.09; |
|||
/* opacity: 0.09; */ |
|||
} |
|||
.div_router { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
|
|||
.router_parents { |
|||
color: #a0c3d9; |
|||
|
|||
.arrow { |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
.router_parents:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.router_child { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.g-cnt { |
|||
display: flex; |
|||
|
|||
/deep/ .ol-viewport { |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/deep/ .ol-overlaycontainer-stopevent { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.m-map { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: calc(825px - 15px); |
|||
color: #fff; |
|||
position: relative; |
|||
} |
|||
|
|||
.m-mapmenu { |
|||
position: absolute; |
|||
z-index: 100; |
|||
left: 20px; |
|||
top: 20px; |
|||
} |
|||
|
|||
.m-search { |
|||
position: absolute; |
|||
z-index: 4; |
|||
left: 0; |
|||
right: 0; |
|||
top: 30px; |
|||
width: 630px; |
|||
margin: 0 auto; |
|||
|
|||
.input { |
|||
width: 100%; |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
border: 1px solid #5aafff; |
|||
box-shadow: 0px 4px 8px 0px rgba(147, 147, 147, 0.26); |
|||
|
|||
> input { |
|||
width: 400px; |
|||
border: none; |
|||
line-height: 45px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
} |
|||
|
|||
.i-search { |
|||
margin: 0 16px; |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.i-close { |
|||
margin-left: 15px; |
|||
opacity: 0.2; |
|||
width: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.btn { |
|||
margin-left: auto; |
|||
width: 120px; |
|||
height: 53px; |
|||
line-height: 53px; |
|||
background: #0082fb; |
|||
border-radius: 0px 8px 8px 0px; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.result { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
padding: 0 15px; |
|||
width: 509px; |
|||
background: rgba(#020340, 0.58); |
|||
border-radius: 8px; |
|||
.result-item { |
|||
position: relative; |
|||
padding: 12px 0; |
|||
border-bottom: 1px solid rgba(#fff, 0.2); |
|||
|
|||
.result-panel { |
|||
position: absolute; |
|||
box-sizing: border-box; |
|||
padding: 15px; |
|||
left: 509px - 10px; |
|||
top: 0; |
|||
width: 500px; |
|||
background: rgba(#020340, 0.58); |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.result-type { |
|||
margin-bottom: 10px; |
|||
font-size: 20px; |
|||
line-height: 30px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #00f0ff; |
|||
} |
|||
|
|||
.result-more { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 20px; |
|||
width: 50px; |
|||
height: 22px; |
|||
text-align: center; |
|||
line-height: 22px; |
|||
background: #dd8d02; |
|||
border-radius: 2px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.result-li { |
|||
line-height: 28px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
cursor: pointer; |
|||
@include toe; |
|||
i { |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-sidemenu { |
|||
margin-left: 20px; |
|||
width: 360px; |
|||
height: calc(825px - 15px); |
|||
|
|||
.title { |
|||
margin-bottom: 10px; |
|||
padding: 4px 0; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
margin-right: -8px; |
|||
height: calc(825px - 120px); |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
@include scrollBar; |
|||
} |
|||
} |
|||
|
|||
.m-sidebar { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50px; |
|||
z-index: 1000; |
|||
width: 370px; |
|||
height: 470px; |
|||
overflow: hidden; |
|||
pointer-events: none; |
|||
|
|||
.wrap { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
background-color: rgba(rgb(173, 173, 173), 0); |
|||
transform: translateX(-5px); |
|||
transition: all ease 1s; |
|||
border-radius: 4px; |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.wrap-hidden { |
|||
transform: translateX(339px); |
|||
} |
|||
|
|||
.div_agency_list { |
|||
width: 320px; |
|||
height: 470px; |
|||
color: #fff; |
|||
background: url("../../../img/modules/visual/box-2.png") no-repeat center; |
|||
background-size: 100% 100%; |
|||
padding: 45px 20px 35px 20px; |
|||
|
|||
.agency_main { |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.agency_main { |
|||
/deep/ .el-scrollbar__wrap { |
|||
overflow-x: hidden !important; |
|||
} |
|||
} |
|||
|
|||
.no-data-img { |
|||
text-align: center; |
|||
margin-top: 50px; |
|||
margin-left: 15px; |
|||
} |
|||
.agency_list { |
|||
.agency_item { |
|||
// height: 60px; |
|||
padding: 15px 0; |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
// line-height: 50px; |
|||
padding-left: 12px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// padding-top: 15px; |
|||
|
|||
.agency_item_name { |
|||
// line-height: 20px; |
|||
} |
|||
} |
|||
|
|||
.agency_item_on { |
|||
background: #08216c; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.agency_item:hover { |
|||
cursor: pointer; |
|||
background-color: #011168; |
|||
border-radius: 4px 0 0 4px; |
|||
border: none; |
|||
box-shadow: 0 0 10px inset #1a5afd; |
|||
border-radius: 2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.arrow_tip { |
|||
margin-right: -2px; |
|||
margin-left: 10px; |
|||
> img { |
|||
width: 22px; |
|||
height: 176px; |
|||
} |
|||
} |
|||
.arrow_tip:hover { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
@ -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,931 @@ |
|||
<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="wrap"> |
|||
<div class="menu"> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>指挥调度</span> |
|||
</div> |
|||
|
|||
<div class="list"> |
|||
<sidemenu1 |
|||
:orgId="orgId" |
|||
@change="handleChangeMenu1" |
|||
:grandIcoList="dotIcoList" |
|||
></sidemenu1> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="menu"> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>15分钟生活圈</span> |
|||
</div> |
|||
|
|||
<div class="list"> |
|||
<sidemenu2 |
|||
:orgId="orgId" |
|||
@change="handleChangeMenu2" |
|||
:grandIcoList="dotIcoList" |
|||
></sidemenu2> |
|||
</div> |
|||
</div> |
|||
</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 sidemenu1 from "@/views/modules/visual/command/cpts/yantai-sidemenu1"; |
|||
import sidemenu2 from "@/views/modules/visual/command/cpts/yantai-sidemenu2"; |
|||
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, |
|||
sidemenu1, |
|||
sidemenu2, |
|||
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); |
|||
}, |
|||
|
|||
handleChangeMenu1(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[0] = [...new Set(categoryKeys)]; |
|||
this.coverageTypes[0] = [...new Set(coverageTypes)]; |
|||
this.requestMapDot(); |
|||
}, |
|||
|
|||
handleChangeMenu2(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[1] = [...new Set(categoryKeys)]; |
|||
this.coverageTypes[1] = [...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[0], ...this.coverageTypes[1]], |
|||
categoryKeys: [...this.categoryKeys[0], ...this.categoryKeys[1]], |
|||
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> |
|||
@ -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> |
|||
@ -0,0 +1,425 @@ |
|||
<template> |
|||
|
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>党员信息</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" |
|||
@click="handleCancle"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="m-top"> |
|||
|
|||
<div class="m-info-left"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span>所属党组织：</span> |
|||
<span>{{ form.orgName }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>姓名：</span> |
|||
<span>{{ form.name }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>手机号：</span> |
|||
<span>{{ form.mobile }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>身份证：</span> |
|||
<span>{{ form.idCard }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>地址：</span> |
|||
<span>{{ form.address|| "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>流动党员：</span> |
|||
<span>{{ form.isLd==='1'?'是':'否' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span>备注：</span> |
|||
<span>{{ form.remark || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-info-right"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span>党员中心户：</span> |
|||
<span>{{ form.isDyzxh==='1'?'是':'否' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>免学习：</span> |
|||
<span>{{ form.isMxx==='1'?'是':'否' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span>职务：</span> |
|||
<span>{{ form.postName|| "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span>文化程度：</span> |
|||
<span>{{ form.cultureName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>入党时间：</span> |
|||
<span>{{ form.rdsj || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>党员流动号：</span> |
|||
<span>{{ form.ldzh || "--" }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="m-btn"> |
|||
<div style="margin-top: 20px; text-align: center;"> |
|||
<el-button size="small" |
|||
:disabled="false" |
|||
@click="handleCancle">取消</el-button> |
|||
<el-button v-if="form.icResiUser != null && form.icResiUser != ''" |
|||
type="primary" |
|||
:disabled="false" |
|||
size="small" |
|||
@click="jump(form.icResiUser)">查看更多</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { isCard, isMobile } from '@/utils/validate' |
|||
import { computedCard } from '@/utils/index' |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
|
|||
export default { |
|||
components: { |
|||
cptCard |
|||
}, |
|||
props: { |
|||
partyList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
info: { |
|||
type: Object, |
|||
default: () => { } |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data () { |
|||
let checkMObile = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入手机号')) |
|||
} else { |
|||
if (!isMobile(value)) { |
|||
callback(new Error('手机号格式不正确')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
let checkIdCard = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入身份证')) |
|||
} else { |
|||
if (!isCard(value)) { |
|||
callback(new Error('身份证号格式不正确')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
return { |
|||
activesName: 'first', |
|||
isAuto: false, |
|||
formItemWd: '100%', |
|||
partymenberid: '', |
|||
partyProps: { |
|||
label: 'partyOrgName', |
|||
value: 'id', |
|||
emitPath: false |
|||
}, |
|||
zwList: [ |
|||
{ |
|||
label: '普通党员', |
|||
value: '0' |
|||
}, |
|||
{ |
|||
label: '支部书记', |
|||
value: '1' |
|||
}, |
|||
{ |
|||
label: '支部委员', |
|||
value: '2' |
|||
}, |
|||
{ |
|||
label: '党委委员', |
|||
value: '3' |
|||
}, |
|||
], |
|||
form: { |
|||
icResiUser: '', |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
address: '', |
|||
rdsj: '', |
|||
sszb: '', |
|||
isLd: '0', |
|||
ldzh: '', |
|||
partyZw: '0', |
|||
isDyzxh: '0', |
|||
isMxx: '0', |
|||
culture: '', |
|||
remark: '' |
|||
}, |
|||
eduList: [], |
|||
rules: { |
|||
sszb: [{ required: true, message: '所属党组织不能为空', trigger: 'blur' }], |
|||
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }], |
|||
mobile: [{ required: true, validator: checkMObile, trigger: 'blur' }], |
|||
idCard: [{ required: true, validator: checkIdCard, trigger: 'blur' }], |
|||
}, |
|||
partyOrgs: [] |
|||
} |
|||
}, |
|||
watch: { |
|||
info: { |
|||
handler (val) { |
|||
if (Object.keys(val).length > 0) { |
|||
this.form = { ...val } |
|||
if (val.icResiUserId || val.icResiUser) this.isAuto = true |
|||
console.log('val----------in', val) |
|||
console.log('isAuto----------in', this.isAuto) |
|||
this.partyOrgs = val.orgPids.split(':') |
|||
console.log('partyOrgs-----', this.partyOrgs) |
|||
this.partymenberid = val.id |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
created () { |
|||
this.getEduList() |
|||
console.log('partyList', this.partyList) |
|||
}, |
|||
mounted () { |
|||
// const w = document.getElementsByClassName('dialog-h-content')[0] |
|||
// this.formItemWd = w.clientWidth + 'px' |
|||
}, |
|||
destroyed () { |
|||
// this.$refs['ruleForm'].resetFields() |
|||
}, |
|||
methods: { |
|||
|
|||
|
|||
handleCancle () { |
|||
// this.$refs['ruleForm'].resetFields() |
|||
this.$emit('cancle') |
|||
}, |
|||
|
|||
handleValidBlur (n) { |
|||
if (!isCard(this.form.idCard)) return |
|||
const { age } = computedCard(this.form.idCard) |
|||
this.form.isMxx = age >= 70 ? '1' : '0' |
|||
this.validateResi() |
|||
}, |
|||
async getEduList () { |
|||
await this.$http |
|||
.post('/sys/dict/data/education') |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.eduList = res.data |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.log('err', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async validateResi () { |
|||
const params = { |
|||
idCard: this.form.idCard, |
|||
agencyId: this.$store.state.user.agencyId |
|||
} |
|||
await this.$http |
|||
.post('/epmetuser/icresiuser/getUserByIdCard', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
const { address, icResiUserId } = res.data |
|||
if (icResiUserId) { |
|||
this.form.address = address |
|||
this.isAuto = true |
|||
} else { |
|||
this.form.address = '' |
|||
this.isAuto = false |
|||
} |
|||
|
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.log('err', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
hadnleSubmitbase () { |
|||
this.$refs['ruleForm'].validate((valid) => { |
|||
if (valid) { |
|||
if (Object.keys(this.info).length > 0) this.editBase() |
|||
else this.saveBase() |
|||
} else { |
|||
console.log('error submit!!'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
handleSavePoints (data) { |
|||
|
|||
const _data = { ...data } |
|||
const params = { |
|||
..._data, |
|||
baseOptions: data.baseOptions.length > 0 ? data.baseOptions.toString() : '', |
|||
reviewOptions: data.reviewOptions.length > 0 ? data.reviewOptions.toString() : '', |
|||
inspireOptions: data.inspireOptions.length > 0 ? data.inspireOptions.toString() : '', |
|||
warnOptions: data.warnOptions.length > 0 ? data.warnOptions.toString() : '' |
|||
} |
|||
this.savePoints(params) |
|||
}, |
|||
async jump (icResiUserId) { |
|||
this.$emit('saveBase', icResiUserId) |
|||
}, |
|||
async saveBase () { |
|||
const params = { |
|||
...this.form |
|||
} |
|||
await this.$http |
|||
.post('/resi/partymember/icPartyMember/save', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('保存成功') |
|||
this.partymenberid = res.data |
|||
this.$emit('saveBase', true) |
|||
|
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.log('err', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async editBase () { |
|||
const params = { |
|||
...this.form |
|||
} |
|||
await this.$http |
|||
.post('/resi/partymember/icPartyMember/update', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('保存成功') |
|||
this.partymenberid = res.data |
|||
this.$emit('saveBase', true) |
|||
|
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.log('err', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async savePoints (form) { |
|||
const params = { |
|||
...form, |
|||
partyMemberId: this.partymenberid |
|||
} |
|||
let url = '' |
|||
if (form.id) url = '/resi/partymember/icPartyMemberPoint/update' |
|||
else url = '/resi/partymember/icPartyMemberPoint/save' |
|||
await this.$http |
|||
.post(url, params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('保存成功') |
|||
|
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.log('err', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async saveRecord (form) { |
|||
const params = { |
|||
...form, |
|||
partyMemberId: this.partymenberid |
|||
} |
|||
await this.$http |
|||
.post('/resi/partymember/icPartyMemberPoint/save', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('保存成功') |
|||
|
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.log('err', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.input-width-textarea { |
|||
width: 400px; |
|||
} |
|||
.input-width { |
|||
width: 220px; |
|||
} |
|||
.flex-div { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
} |
|||
.wd50 { |
|||
width: 50%; |
|||
} |
|||
.pdl40 { |
|||
padding-left: 40px; |
|||
} |
|||
.pd0 { |
|||
padding: 0 !important; |
|||
} |
|||
</style> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/incident-info.scss" |
|||
scoped |
|||
></style> |
|||
Loading…
Reference in new issue