wangxianzhang
3 years ago
5 changed files with 1213 additions and 5 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,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