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.
434 lines
11 KiB
434 lines
11 KiB
<template>
|
|
<div style="position: relative">
|
|
<!-- 组织路由 -->
|
|
<div class="div_top">
|
|
<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"
|
|
ref="ref_people"
|
|
></people>
|
|
|
|
<div v-show="orgLevel !== 'people'" class="div_content">
|
|
<basic-info-community
|
|
v-show="orgLevel === 'neighborHood'"
|
|
@toSubAgency="toSubAgency"
|
|
ref="ref_community"
|
|
@refreshInfoList="refreshInfoList"
|
|
></basic-info-community>
|
|
|
|
<div
|
|
v-show="orgLevel !== 'people' && orgLevel !== 'neighborHood'"
|
|
class="div_map"
|
|
>
|
|
<grid-map
|
|
v-if="orgData.id"
|
|
@clickAgency="clickAgencyItem"
|
|
:srcGridData="orgData"
|
|
/>
|
|
<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="div_data">
|
|
<div class="div_info">
|
|
<el-scrollbar style="height: 98%">
|
|
<div class="info_tip">
|
|
<img src="../../../../assets/img/shuju/title-tip.png" alt />
|
|
<div class="tip_title">分类列表</div>
|
|
</div>
|
|
|
|
<div class="info_loading" v-if="infoLoading">
|
|
<screen-loading>加载中</screen-loading>
|
|
</div>
|
|
|
|
<div v-if="!infoLoading" class="info_list">
|
|
<div
|
|
v-for="(item, index) in listDatashow"
|
|
:key="index"
|
|
class="item"
|
|
>
|
|
<div class="list_item">
|
|
<div
|
|
v-for="(colItem, colIndex) in item"
|
|
:key="colIndex"
|
|
class="list_item_col"
|
|
@click="handleTo(colItem)"
|
|
>
|
|
<img :src="colItem.dataIcon" alt />
|
|
<div class="item_content">
|
|
<div class="item_label">{{ colItem.label }}</div>
|
|
<div class="item_count">{{ colItem.count }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'item_line',
|
|
{ last_line: index == listDatashow.length - 1 },
|
|
]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</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 BasicInfoCommunity from "./basicInfoCommunity";
|
|
|
|
import People from "./people";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import gridMap from "@/views/modules/visual/cpts/map/index";
|
|
import ScreenLoading from "@/views/modules/visual/cpts/loading";
|
|
import getQueryPara from "dai-js/modules/getQueryPara";
|
|
|
|
|
|
let loading; //加载动画
|
|
|
|
export default {
|
|
name: "HomeMap",
|
|
|
|
components: { BasicInfoCommunity, People, cptCard, ScreenLoading, gridMap },
|
|
|
|
props: {
|
|
// vueFlag: {
|
|
// type: String,
|
|
// default: "alarm"
|
|
// }
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(["clientHeight"]),
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showAgencyList: false,
|
|
agencyFadeIn: true,
|
|
|
|
orgData: {}, //当前组织对象
|
|
orgId: "",
|
|
orgLevel: "",
|
|
|
|
subAgencyArray: [], //下拉框数据
|
|
iconCoordinators: [],
|
|
currentCoordinate: null,
|
|
overlay: null,
|
|
|
|
//右侧搜索
|
|
searchName: "",
|
|
|
|
//右侧列表
|
|
infoLoading: true,
|
|
listData: [], //得到的数据
|
|
listDatashow: [], //处理成一行两列的数据
|
|
|
|
//下钻层级记录
|
|
runNum: 0,
|
|
runAgencyArray: [],
|
|
selUserId: "",
|
|
center: [],
|
|
zoom: null,
|
|
parentPolygon: [],
|
|
|
|
centerFlag: "point", //定义中心点的flag point点 fit 自适应
|
|
};
|
|
},
|
|
|
|
async mounted() {
|
|
const queryOrgId = getQueryPara("orgId");
|
|
const queryOrgLevel = getQueryPara("orgLevel");
|
|
console.log("orgId", queryOrgId);
|
|
if(queryOrgId){
|
|
this.orgId = queryOrgId
|
|
this.orgLevel = queryOrgLevel || ''
|
|
}
|
|
|
|
|
|
//加载组织数据
|
|
await this.loadOrgData();
|
|
await this.loadList();
|
|
},
|
|
|
|
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);
|
|
}
|
|
},
|
|
|
|
//获取右侧infolist数据
|
|
async loadList() {
|
|
this.infoLoading = true;
|
|
const url = "/epmetuser/statsresiwarn/list";
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list"
|
|
let params = {
|
|
id: this.orgId,
|
|
level: this.orgLevel,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
this.infoLoading = false;
|
|
if (code === 0) {
|
|
this.listData = data;
|
|
// this.listData = this.listData1
|
|
this.listDatashow = [];
|
|
let itemArray = [];
|
|
this.listData.forEach((item, index) => {
|
|
if (!item.dataIcon) {
|
|
item.dataIcon = require("../../../../assets/img/modules/visual/dibao.png");
|
|
}
|
|
|
|
if (index % 2 === 0) {
|
|
//偶数
|
|
itemArray.push(item);
|
|
if (index + 1 === this.listData.length) {
|
|
this.listDatashow.push(itemArray);
|
|
}
|
|
} else {
|
|
itemArray.push(item);
|
|
this.listDatashow.push(itemArray);
|
|
itemArray = [];
|
|
}
|
|
});
|
|
} 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, searchName) {
|
|
//点击小区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: "人员档案",
|
|
};
|
|
this.searchName = searchName;
|
|
} 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.loadList();
|
|
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.loadList();
|
|
},
|
|
|
|
//开启加载动画
|
|
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/basicInfoMain.scss"
|
|
scoped
|
|
></style>
|
|
|
|
<style lang="scss">
|
|
.div_content {
|
|
.ol-viewport {
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
.ol-overlaycontainer-stopevent {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped></style>
|
|
|