elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改人房信息统计

master
dai 3 years ago
parent
f77c2ec99b
commit
aee54a87be
3 changed files with 1195 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1017
      src/views/modules/visual/basicinfo/basicInfoMain-备份.vue
  2. 91
      src/views/modules/visual/basicinfo/basicInfoMain.vue
  3. 232
      src/views/modules/visual/basicinfo/cpts/grid-map.vue

1017
src/views/modules/visual/basicinfo/basicInfoMain-备份.vue
View File

File diff suppressed because it is too large

91
src/views/modules/visual/basicinfo/basicInfoMain.vue
View File

@ -34,7 +34,11 @@
v-show="orgLevel !== 'people' && orgLevel !== 'neighborHood'"
class="div_map"
>
<grid-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">
@ -76,21 +80,6 @@
</div>
<div class="div_data">
<!-- <div @click="handleSearch"
class="div_search">
<div class="div_search_left">
<i slot="prefix"
class="icon">
<img src="../../../../assets/img/modules/visual/sousuo.png"
alt />
</i>
<span>请输入姓名</span>
</div>
<div class="btn">搜索</div>
</div> -->
<div class="div_info">
<el-scrollbar style="height: 98%">
<div class="info_tip">
@ -203,7 +192,7 @@ export default {
async mounted() {
//加载组织数据
// await this.loadOrgData();
await this.loadOrgData();
await this.loadList();
},
@ -223,6 +212,30 @@ export default {
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;
@ -268,6 +281,38 @@ export default {
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 = {
@ -304,10 +349,6 @@ export default {
return false;
}
this.runNum++;
this.orgData.center = map.getView().getCenter();
this.orgData.zoom = map.getView().getZoom();
console.log("center", map.getView().getCenter());
console.log("zoom", map.getView().getZoom());
this.runAgencyArray.push(this.orgData);
@ -334,6 +375,14 @@ export default {
}
},
//刷新地图
async refreshMap(isRefreshView) {
//加载组织数据
await this.loadOrgData();
await this.loadList();
},
//开启加载动画
startLoading() {
loading = Loading.service({

232
src/views/modules/visual/basicinfo/cpts/grid-map.vue
View File

@ -9,91 +9,32 @@ import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import nextTick from "dai-js/tools/nextTick";
import dateFormat from "dai-js/tools/dateFormat";
import {
Scene,
PointLayer,
PolygonLayer,
LineLayer,
CityBuildingLayer,
RasterLayer,
Popup,
} from "@antv/l7";
import { Scene, PolygonLayer, LineLayer } from "@antv/l7";
import { GaodeMap, Map } from "@antv/l7-maps";
// import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
import { spliceIntoChunks } from "@/utils/index";
let scene;
// window._AMapSecurityConfig = {
// securityJsCode: "您申请的安全密钥",
// };
let polygonLayer;
let lineLayer;
let textLayer;
let posLayer;
let circleLayer;
export default {
name: "l7",
data() {
return {
srcMapData: [],
dotData: [],
iconUrlArray: {
anzhibangjiao: require("@/assets/img/shuju/fiveLayer/anzhibangjiao.png"),
buliangqingshaonian: require("@/assets/img/shuju/fiveLayer/buliangqingshaonian.png"),
shequjiaozheng: require("@/assets/img/shuju/fiveLayer/shequjiaozheng.png"),
resi_xfry: require("@/assets/img/shuju/fiveLayer/resi_xfry.png"),
xidurenyuan: require("@/assets/img/shuju/fiveLayer/xidurenyuan.png"),
xiejiaorenyuan: require("@/assets/img/shuju/fiveLayer/xiejiaorenyuan.png"),
zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png"),
yjdw: require("@/assets/img/shuju/fiveLayer/yjdw.png"),
sr_gy: require("@/assets/img/shuju/fiveLayer/sr_gy.png"),
sr_gc: require("@/assets/img/shuju/fiveLayer/sr_gc.png"),
whdw: require("@/assets/img/shuju/fiveLayer/whdw.png"),
sr_ggld: require("@/assets/img/shuju/fiveLayer/sr_ggld.png"),
lwh: require("@/assets/img/shuju/fiveLayer/lwh.png"),
sr_tyc: require("@/assets/img/shuju/fiveLayer/sr_tyc.png"),
lyjlb: require("@/assets/img/shuju/fiveLayer/lyjlb.png"),
sr_yjy: require("@/assets/img/shuju/fiveLayer/sr_yjy.png"),
zaxld: require("@/assets/img/shuju/fiveLayer/zaxld.png"),
other: require("@/assets/img/shuju/fiveLayer/other.png"),
sr_jzz: require("@/assets/img/shuju/fiveLayer/sr_jzz.png"),
sr_djc: require("@/assets/img/shuju/fiveLayer/sr_djc.png"),
sr_rfqck: require("@/assets/img/shuju/fiveLayer/sr_rfqck.png"),
ep_lg: require("@/assets/img/shuju/fiveLayer/ep_lg.png"),
sr_xfz: require("@/assets/img/shuju/fiveLayer/sr_xfz.png"),
pu_jgzsbm: require("@/assets/img/shuju/fiveLayer/pu_jgzsbm.png"),
ep_qt: require("@/assets/img/shuju/fiveLayer/ep_qt.png"),
gr_czw: require("@/assets/img/shuju/fiveLayer/gr_czw.png"),
ep_cycs: require("@/assets/img/shuju/fiveLayer/ep_cycs.png"),
dc_jyz: require("@/assets/img/shuju/fiveLayer/dc_jyz.png"),
ep_gwylcs: require("@/assets/img/shuju/fiveLayer/ep_gwylcs.png"),
dc_jqz: require("@/assets/img/shuju/fiveLayer/dc_jqz.png"),
dc_whpdw: require("@/assets/img/shuju/fiveLayer/dc_whpdw.png"),
ep_wb: require("@/assets/img/shuju/fiveLayer/ep_wb.png"),
ep_mrxycs: require("@/assets/img/shuju/fiveLayer/ep_mrxycs.png"),
dc_yqhjz: require("@/assets/img/shuju/fiveLayer/dc_yqhjz.png"),
dc_jzgd: require("@/assets/img/shuju/fiveLayer/dc_jzgd.png"),
ep_scjgqy: require("@/assets/img/shuju/fiveLayer/ep_scjgqy.png"),
cm_nmsc: require("@/assets/img/shuju/fiveLayer/cm_nmsc.png"),
event_tdnd: require("@/assets/img/shuju/fiveLayer/event_tdnd.png"),
cm_bhsc: require("@/assets/img/shuju/fiveLayer/cm_bhsc.png"),
cm_cjsc: require("@/assets/img/shuju/fiveLayer/cm_cjsc.png"),
ep_lssd: require("@/assets/img/shuju/fiveLayer/ep_lssd.png"),
resi_szry: require("@/assets/img/shuju/fiveLayer/resi_szry.png"),
ps_lyy: require("@/assets/img/shuju/fiveLayer/ps_lyy.png"),
resi_snry: require("@/assets/img/shuju/fiveLayer/resi_snry.png"),
ps_mzb: require("@/assets/img/shuju/fiveLayer/ps_mzb.png"),
ps_zs: require("@/assets/img/shuju/fiveLayer/ps_zs.png"),
ps_wss: require("@/assets/img/shuju/fiveLayer/ps_wss.png"),
ps_jjz: require("@/assets/img/shuju/fiveLayer/ps_jjz.png"),
ep_xx: require("@/assets/img/shuju/fiveLayer/ep_xx.png"),
ep_yy: require("@/assets/img/shuju/fiveLayer/ep_yy.png"),
},
// srcGridData: {},
};
},
props: {},
props: {
srcGridData: {
type: Object,
default: null,
},
},
computed: {},
@ -105,63 +46,94 @@ export default {
watch: {},
async mounted() {
await this.getMapData();
// 临时这么用吧
window._AMapSecurityConfig = {
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
};
// await this.getMapData();
this.iniMap();
await this.getDotData();
this.updateMap();
},
computed: {
polygonData() {
const { srcGridData } = this;
if (
!srcGridData ||
!srcGridData.children ||
!Array.isArray(srcGridData.children)
) {
return { type: "FeatureCollection", features: [] };
}
const polygon = [
...srcGridData.children
.filter((item) => item.coordinates.length > 0)
.map((item) => ({
type: "Feature",
properties: {
// id: item.id,
// name: item.name,
// level: item.level,
center: [item.longitude, item.latitude],
...item,
},
geometry: {
type: "Polygon",
coordinates: [
spliceIntoChunks(
item.coordinates.split(",").map((item) => parseFloat(item)),
2
),
],
},
})),
];
return { type: "FeatureCollection", features: polygon };
},
},
watch: {
srcGridData(val, oldValue) {
if (oldValue == null) {
this.iniMap();
} else {
this.updateMap();
}
},
},
methods: {
iniMap() {
// 临时这么用吧
window._AMapSecurityConfig = {
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
};
const { srcGridData, polygonData } = this;
if (!srcGridData) return false;
const { srcMapData } = this;
scene = new Scene({
id: "map",
logoVisible: false,
map: new GaodeMap({
// viewMode: "3D",
pitch: 35.210526315789465,
pitch: 60,
// style: "dark",
style: "light",
center: [srcMapData.longitude, srcMapData.latitude],
// style: "grey",
style: "amap://styles/blue",
center: [
srcGridData.longitude || this.$store.state.user.longitude,
srcGridData.latitude || this.$store.state.user.latitude,
],
token: "fc14b42e0ca18387866d68ebd4f150c1",
zoom: 18,
minZoom: 10,
isHotspot: false,
resizeEnable: true,
doubleClickZoom: false,
}),
});
scene.on("loaded", () => {
const polygon = [
...srcMapData.children
.filter((item) => item.coordinates.length > 0)
.map((item) => ({
type: "Feature",
properties: {
name: item.name,
center: [item.longitude, item.latitude],
},
geometry: {
type: "Polygon",
coordinates: [
spliceIntoChunks(
item.coordinates.split(",").map((item) => parseFloat(item)),
2
),
],
},
})),
];
console.log(polygon);
const polygonLayer = new PolygonLayer({
polygonLayer = new PolygonLayer({
autoFit: true,
})
// .size(1000)
.source({ type: "FeatureCollection", features: polygon })
.source(polygonData)
.color("name", [
"rgba(255, 100, 60, 0.5)",
"rgba(43, 231, 253, 0.35)",
@ -184,11 +156,11 @@ export default {
scene.addLayer(polygonLayer);
const linelayer = new LineLayer({
lineLayer = new LineLayer({
zIndex: 2,
name: "line2",
})
.source({ type: "FeatureCollection", features: polygon })
.source(polygonData)
.shape("line")
.size(1)
.color("name", [
@ -204,12 +176,12 @@ export default {
duration: 2, // 持续时间，延时
trailLength: 2, // 流线长度
});
scene.addLayer(linelayer);
scene.addLayer(lineLayer);
const circleLayer = new PolygonLayer({
circleLayer = new PolygonLayer({
zIndex: 3,
})
.source({ type: "FeatureCollection", features: polygon })
.source(polygonData)
.color("name", [
"rgba(255, 50, 50, 0.99)",
"rgba(43, 231, 253, 0.99)",
@ -237,10 +209,10 @@ export default {
"pos-yellow",
require("@/assets/img/shuju/grid/pos-yellow.png")
);
const posLayer = new PolygonLayer({
posLayer = new PolygonLayer({
zIndex: 4,
})
.source({ type: "FeatureCollection", features: polygon })
.source(polygonData)
.shape("name", ["pos-red", "pos-green", "pos-yellow"])
.size(12)
.style({
@ -250,10 +222,10 @@ export default {
});
scene.addLayer(posLayer);
const textLayer = new PolygonLayer({
textLayer = new PolygonLayer({
zIndex: 10,
})
.source({ type: "FeatureCollection", features: polygon })
.source(polygonData)
.color("name", [
"rgba(255, 100, 60, 0.99)",
"rgba(43, 231, 253, 0.99)",
@ -273,17 +245,18 @@ export default {
.active(true);
scene.addLayer(textLayer);
textLayer.on("mousemove", (e) => {
textLayer.style({
polygonLayer.on("mousemove", (e) => {
polygonLayer.style({
raisingHeight: 0,
});
});
textLayer.on("click", (e) => {
console.log(e.feature.properties.name);
polygonLayer.on("click", (e) => {
console.log(e.feature.properties);
this.$emit("clickAgency", e.feature.properties);
});
textLayer.on("unmousemove", (e) => {
polygonLayer.on("unmousemove", (e) => {
polygonLayer.style({
raisingHeight: 0,
});
@ -291,13 +264,24 @@ export default {
});
},
updateMap() {
const { polygonData } = this;
if (polygonLayer) {
polygonLayer.setData(polygonData);
lineLayer.setData(polygonData);
textLayer.setData(polygonData);
posLayer.setData(polygonData);
circleLayer.setData(polygonData);
}
},
async getMapData() {
const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
level: "",
orgId: "",
});
if (msg === "success" && code === 0) {
this.srcMapData = data;
this.srcGridData = data;
}
},
},

Write Preview
Loading…
Cancel
Save