You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
14 KiB
413 lines
14 KiB
3 years ago
|
<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>
|
||
|
|
|
||
|
|
<people v-if="orgLevel === 'people'" :uid="selUserId" />
|
||
|
|
|
||
|
|
<div v-show="orgLevel !== 'people'" class="g-cnt">
|
||
|
|
<div class="m-map">
|
||
|
|
<grid-map
|
||
|
|
v-if="orgData.id"
|
||
|
|
@clickAgency="clickAgencyItem"
|
||
|
|
:srcGridData="orgData"
|
||
|
|
:dotList="dotList"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div class="m-sidebar">
|
||
|
|
<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 :grandIcoList="dotIcoList"></sidemenu>
|
||
|
|
</div>
|
||
|
|
</cpt-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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/basicinfo/cpts/grid-map";
|
||
|
|
import sidemenu from "@/views/modules/visual/command/cpts/sidemenu";
|
||
|
|
import ScreenLoading from "@/views/modules/visual/cpts/loading";
|
||
|
|
|
||
|
|
let loading; //加载动画
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "HomeMap",
|
||
|
|
|
||
|
|
components: { People, cptCard, ScreenLoading, gridMap, sidemenu },
|
||
|
|
|
||
|
|
props: {},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
...mapGetters(["clientHeight"]),
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showAgencyList: false,
|
||
|
|
|
||
|
|
orgData: {}, //当前组织对象
|
||
|
|
orgId: "",
|
||
|
|
orgLevel: "",
|
||
|
|
|
||
|
|
subAgencyArray: [], //下拉框数据
|
||
|
|
|
||
|
|
//下钻层级记录
|
||
|
|
runNum: 0,
|
||
|
|
runAgencyArray: [],
|
||
|
|
selUserId: "",
|
||
|
|
|
||
|
|
dotList: [],
|
||
|
|
categoryKeys: [],
|
||
|
|
|
||
|
|
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"),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
categoryKeys() {
|
||
|
|
this.requestMapDot();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
async mounted() {
|
||
|
|
//加载组织数据
|
||
|
|
await this.loadOrgData();
|
||
|
|
await this.requestMapDot();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async requestMapDot() {
|
||
|
|
const url = "/data/aggregator/coverage/dataList";
|
||
|
|
let params = {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
//子组件点击房间，刷新右侧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) {
|
||
|
|
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();
|
||
|
|
},
|
||
|
|
|
||
|
|
//开启加载动画
|
||
|
|
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>
|