diff --git a/src/assets/images/ui/panel_bottom.png b/src/assets/images/ui/panel_bottom.png new file mode 100644 index 0000000..6520084 Binary files /dev/null and b/src/assets/images/ui/panel_bottom.png differ diff --git a/src/components/NavigationBar/index.vue b/src/components/NavigationBar/index.vue index 7e85e46..2034436 100644 --- a/src/components/NavigationBar/index.vue +++ b/src/components/NavigationBar/index.vue @@ -1,45 +1,46 @@ @@ -116,12 +117,16 @@ export default { diff --git a/src/views/components/foldpanelLeft/index.vue b/src/views/components/foldpanelLeft/index.vue index 7609876..66c6bb5 100644 --- a/src/views/components/foldpanelLeft/index.vue +++ b/src/views/components/foldpanelLeft/index.vue @@ -1,10 +1,7 @@ + + + + diff --git a/src/views/components/xiaoqu/leftData/networkInfo.vue b/src/views/components/xiaoqu/leftData/networkInfo.vue new file mode 100644 index 0000000..85f1b06 --- /dev/null +++ b/src/views/components/xiaoqu/leftData/networkInfo.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/components/xiaoqu/leftData/xiaoquInfo.vue b/src/views/components/xiaoqu/leftData/xiaoquInfo.vue new file mode 100644 index 0000000..c5483f7 --- /dev/null +++ b/src/views/components/xiaoqu/leftData/xiaoquInfo.vue @@ -0,0 +1,248 @@ + + + + + diff --git a/src/views/components/xiaoqu/map/index.vue b/src/views/components/xiaoqu/map/index.vue index c0f38c0..a2e42b5 100644 --- a/src/views/components/xiaoqu/map/index.vue +++ b/src/views/components/xiaoqu/map/index.vue @@ -8,7 +8,8 @@ import configJson from "./map-config.json"; import garden from "./garden.json"; import MarsMap from "@/components/mars-map"; -import stylus from "highlight.js/lib/languages/stylus"; +import { listDept } from "@/api/system/dept.js"; +import { listBuilding } from "@/api/taicangpop/building.js"; export default { props: { xiaoquId: { @@ -65,9 +66,9 @@ export default { }, }); map.on(mars3d.EventType.click, function (e) { - if (!e.id) { - map.getLayerById("dth").clear(); //清除单体化 - } + // if (!e.id ) { + // map.getLayerById("dth").clear(); //清除单体化 + // } }); }, //图层组 @@ -100,9 +101,9 @@ export default { // this.addNetworkLayer(); this.addbuildingLayer(); - this.add3DXiaoqu(); + // this.add3DXiaoqu(); - this.addDTH(); + // this.addDTH(); }, //商铺面 addshop() { @@ -299,6 +300,14 @@ export default { }, }); this.mapLayer.plane.addGraphic(polygon); + + polygon.on(mars3d.EventType.highlightClose, function (e) { + _this.$store.commit("CHANGE_QUERY", { + buildingid: undefined, + deptId: undefined, + }); //存储全局参数 + }); + const point = new mars3d.graphic.BillboardEntity({ id: item.attr["幢号"], position: polygon.centerPoint, @@ -328,30 +337,49 @@ export default { }, }, attr: { - ...item.attr, - ...{ - id: index, - yuanName: yuanName, - buildingNumber: buildingNumber, - }, + id: index, + yuanName: yuanName, + buildingNumber: buildingNumber, + floorNum: item.attr["层数"], }, }); - point.on(mars3d.EventType.click, function (e) { + point.on(mars3d.EventType.click, async function (e) { let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id); - if (_this.mapLayer.tiles3dLayer.show) { - const geojson = buildingItem.toGeoJSON(); - _this.map - .getLayerById("dth") - .loadGeoJSON(geojson, { clear: true }); - } else { - buildingItem.openHighlight({ - color: "#FFA200", - opacity: 0.3, - outline: true, - outlineColor: "#F5DC02", - outlineWidth: 2, - }); - } + // if (_this.mapLayer.tiles3dLayer.show) { + // const geojson = buildingItem.toGeoJSON(); + // _this.map + // .getLayerById("dth") + // .loadGeoJSON(geojson, { clear: true }); + // } else { + // buildingItem.openHighlight({ + // color: "#FFA200", + // opacity: 0.3, + // outline: true, + // outlineColor: "#F5DC02", + // outlineWidth: 2, + // }); + // } + buildingItem.openHighlight({ + color: "#FFA200", + opacity: 0.3, + outline: true, + outlineColor: "#F5DC02", + outlineWidth: 2, + }); + let deptData = await _this.getDeptId({ + xiaoquId: _this.xiaoquId, + deptName: e.target.attr.yuanName, + }); + + let buildingData = await _this.getBuildingId({ + name: e.target.attr.buildingNumber + "幢", + deptId: deptData.deptId, + }); + + _this.$store.commit("CHANGE_QUERY", { + buildingid: buildingData.id, + deptId: deptData.deptId, + }); //存储全局参数 }); this.mapLayer.planePoint.addGraphic(point); }); @@ -418,7 +446,7 @@ export default { this.mapLayer.planePoint.eachGraphic((graphic) => { let attr = graphic.attr; var centerPoint = graphic.centerPoint; - centerPoint.alt = Number(attr["层数"]) * 3 + 10; + centerPoint.alt = Number(attr.floorNum) * 3 + 10; graphic.setOptions({ position: centerPoint, style: { @@ -457,6 +485,17 @@ export default { this.map.addLayer(geoJsonLayerDTH); }, + // 获取苑id + async getDeptId(query) { + let res = await listDept(query); + return res.data[0]; + }, + //获取楼栋id + async getBuildingId(query) { + let res = await listBuilding(query); + return res.rows[0]; + }, + // handlezs() { // // this.mapLayer.zhengsheLayer.show = true; // this.addZhengsheLayer(); diff --git a/src/views/xiaoqu.vue b/src/views/xiaoqu.vue index d89d5a3..4a5d2d4 100644 --- a/src/views/xiaoqu.vue +++ b/src/views/xiaoqu.vue @@ -4,11 +4,25 @@ :mainTitle="xiaoquIntroduce.deptName + '人口数据管理系统'" :showStreet="false" > - - + + + + + + + + +
-
@@ -17,6 +31,14 @@ import { mapGetters } from "vuex"; import NavigationBar from "@/components/NavigationBar/index.vue"; import MarsMap from "@/views/components/xiaoqu/map/index.vue"; +import { + foldpanelLeft, + foldpanelRight, + foldPaneBottom, + xiaoquInfo, + networkInfo, + buildingStatistics, +} from "@/views/components/index.js"; export default { data() { return {}; @@ -24,27 +46,39 @@ export default { components: { MarsMap, NavigationBar, + foldpanelLeft, + foldpanelRight, + foldPaneBottom, + xiaoquInfo, + networkInfo, + buildingStatistics, }, computed: { - ...mapGetters(["xiaoquIntroduce", "queryParamsIndex"]), + ...mapGetters(["xiaoquIntroduce", "queryParamsXiaoqu"]), }, created() { + this.$store.commit("RESET_QUERY"); //重置参数 let id = this.$route.query.xiaoquId; + this.$store.commit("CHANGE_QUERY", { xiaoquId: parseInt(id) }); //存储全局参数 this.$store.commit("SET_QUERY_PARAMS", { xiaoquId: parseInt(id), }); - this.$store.dispatch("GetXiaoquInfo", id); this.$store.dispatch("GetYjtotal", { xiaoquId: id, - }); + }); //预警总数 }, methods: { + filterTitle() { + return !this.queryParamsXiaoqu.parentid && + !this.queryParamsXiaoqu.buildingid + ? "小区简介" + : this.queryParamsXiaoqu.parentid + ? "网格简介" + : "统计分析"; + }, handle3D() { this.$refs.map.handle3dPoint(); }, - handlezs() { - this.$refs.map.handlezs(); - }, }, };