From f6af695bcfd8cb316633049a3027173a70aef8c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com> Date: Thu, 29 Aug 2024 13:09:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=9B=91=E5=90=ACvuex?= =?UTF-8?q?=E5=AF=BC=E8=87=B4buidingid=E4=B8=8EdeptId=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E5=AE=9E=E6=97=B6=E5=93=8D=E5=BA=94=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/xiaoqu.js | 39 ++++- src/views/components/xiaoqu/bottomList.vue | 6 +- src/views/components/xiaoqu/map/index.vue | 170 +++++++++------------ 3 files changed, 111 insertions(+), 104 deletions(-) diff --git a/src/store/modules/xiaoqu.js b/src/store/modules/xiaoqu.js index 93cb356..42ad72f 100644 --- a/src/store/modules/xiaoqu.js +++ b/src/store/modules/xiaoqu.js @@ -1,3 +1,5 @@ +import { listDept } from "@/api/system/dept.js"; +import { listBuilding } from "@/api/taicangpop/building.js"; const xiaoqu = { state: { //页面接口参数 @@ -21,10 +23,10 @@ const xiaoqu = { state.queryParmas[key] = query[key]; } - if (query.buildingid) { - state.panel.bottomPanel = true; - return; - } + // if (query.buildingid) { + // state.panel.bottomPanel = true; + // return; + // } if ( query.color || query.type || @@ -68,9 +70,36 @@ const xiaoqu = { isx: undefined, isj: undefined, }; + console.log(state.queryParmas); + }, + }, + actions: { + async GetBuildingId({ commit, state }, queryParams) { + let deptData = await getDeptId({ + xiaoquId: state.queryParmas.xiaoquId, + deptName: queryParams.deptName, + }); + let buildingData = await getBuildingId({ + name: queryParams.name, + deptId: deptData.deptId, + }); + commit("CHANGE_QUERY", { + buildingid: buildingData.id, + deptId: deptData.deptId, + }); }, }, - actions: {}, }; +// 获取苑id +async function getDeptId(query) { + let res = await listDept(query); + return res.data[0]; +} +//获取楼栋id +async function getBuildingId(query) { + let res = await listBuilding(query); + return res.rows[0]; +} + export default xiaoqu; diff --git a/src/views/components/xiaoqu/bottomList.vue b/src/views/components/xiaoqu/bottomList.vue index a0f8729..2fc9181 100644 --- a/src/views/components/xiaoqu/bottomList.vue +++ b/src/views/components/xiaoqu/bottomList.vue @@ -134,10 +134,12 @@ export default { }, methods: { handleChange(newValue) { + console.log("sssss"); this.reset(); - delete this.queryParamsXiaoqu.buildingid; - delete this.queryParamsXiaoqu.deptId; + this.queryParams = { ...this.queryParams, ...this.queryParamsXiaoqu }; + this.queryParams.buildingid = undefined; + this.queryParams.deptId = undefined; this.disabled = false; this.load(); }, diff --git a/src/views/components/xiaoqu/map/index.vue b/src/views/components/xiaoqu/map/index.vue index fb972c2..57f31f1 100644 --- a/src/views/components/xiaoqu/map/index.vue +++ b/src/views/components/xiaoqu/map/index.vue @@ -9,8 +9,7 @@ import configJson from "./map-config.json"; import { mapGetters } from "vuex"; import garden from "./garden.json"; import MarsMap from "@/components/mars-map"; -import { listDept } from "@/api/system/dept.js"; -import { listBuilding } from "@/api/taicangpop/building.js"; + export default { props: { xiaoquId: { @@ -296,100 +295,88 @@ export default { return { yuanName, buildingNumber, buildingColor, image }; }, //平面 + 图标 - addbuildingLayer() { + async addbuildingLayer() { let _this = this; - mars3d.Util.fetchJson({ + let res = await mars3d.Util.fetchJson({ url: this.configUrl + `lib/geoJson/xiaoqu/building${this.xiaoquId}.json`, - }).then((res) => { - const arr = mars3d.Util.geoJsonToGraphics(res); - arr.map((item, index) => { - const { yuanName, buildingNumber, buildingColor, image } = - this.pointFilter(item.attr); - const polygon = new mars3d.graphic.PolygonEntity({ - id: item.attr["幢号"], - positions: item.positions, - style: { - color: "transparent", - opacity: 0, - outline: false, - outlineColor: "transparent", - outlineWidth: 0, - }, - }); - this.mapLayer.plane.addGraphic(polygon); + }); + const arr = mars3d.Util.geoJsonToGraphics(res); + arr.map((item, index) => { + const { yuanName, buildingNumber, buildingColor, image } = + this.pointFilter(item.attr); + const polygon = new mars3d.graphic.PolygonEntity({ + id: item.attr["幢号"], + positions: item.positions, + style: { + color: "transparent", + opacity: 0, + outline: false, + outlineColor: "transparent", + outlineWidth: 0, + }, + }); + this.mapLayer.plane.addGraphic(polygon); - const point = new mars3d.graphic.BillboardEntity({ - id: item.attr["幢号"], - position: polygon.centerPoint, - style: { - image: image, + const point = new mars3d.graphic.BillboardEntity({ + id: item.attr["幢号"], + position: polygon.centerPoint, + style: { + image: image, + scale: 1, + width: 46, + height: 42, + visibleDepth: false, + clampToGround: true, //贴地 + label: { + clampToGround: true, //贴地 + pixelOffsetY: -3, scale: 1, - width: 46, - height: 42, + text: buildingNumber, + height: 0, + opacity: 1, + font_size: 12, + font_weight: "bold", + color: buildingColor, + font_family: "微软雅黑", + outline: true, + outlineColor: "#0C212C", + outlineWidth: 2, + outlineOpacity: 1, visibleDepth: false, - clampToGround: true, //贴地 - label: { - clampToGround: true, //贴地 - pixelOffsetY: -3, - scale: 1, - text: buildingNumber, - height: 0, - opacity: 1, - font_size: 12, - font_weight: "bold", - color: buildingColor, - font_family: "微软雅黑", - outline: true, - outlineColor: "#0C212C", - outlineWidth: 2, - outlineOpacity: 1, - visibleDepth: false, - }, }, - attr: { - id: index, - yuanName: yuanName, - buildingNumber: buildingNumber, - floorNum: item.attr["层数"], - }, - }); - point.on(mars3d.EventType.click, async function (e) { - let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id); - if ( - _this.mapLayer.tiles3dLayer && - _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, - }); - } - 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, + }, + attr: { + id: index, + yuanName: yuanName, + buildingNumber: buildingNumber, + floorNum: item.attr["层数"], + }, + }); + point.on(mars3d.EventType.click, function (e) { + let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id); + if (_this.mapLayer.tiles3dLayer && _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, }); - - _this.$store.commit("CHANGE_QUERY", { - buildingid: buildingData.id, - deptId: deptData.deptId, - }); //存储全局参数 + } + // _this.$store.commit("CHANGE_QUERY", { + // buildingid: 20, + // deptId: 30, + // }); + _this.$store.dispatch("GetBuildingId", { + deptName: e.target.attr.yuanName, + name: e.target.attr.buildingNumber + "幢", }); - this.mapLayer.planePoint.addGraphic(point); }); + this.mapLayer.planePoint.addGraphic(point); }); }, @@ -515,17 +502,6 @@ export default { this.map.addLayer(this.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();