suzhou-jichuang-lanhai
/
taicangPopulation2
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复监听vuex导致buidingid与deptId无法实时响应问题

Browse Source
master
许宏杰 3 weeks ago
parent 4b460bbca8
commit f6af695bcf
3 changed files with 111 additions and 104 deletions
Show Stats Download Patch File Download Diff File

39
src/store/modules/xiaoqu.js
Unescape View File

@ -1,3 +1,5 @@
import { listDept } from "@/api/system/dept.js";
import { listBuilding } from "@/api/taicangpop/building.js";
const xiaoqu = { const xiaoqu = {
state: { state: {
//页面接口参数 //页面接口参数
@ -21,10 +23,10 @@ const xiaoqu = {
state.queryParmas[key] = query[key]; state.queryParmas[key] = query[key];
} }
if (query.buildingid) { // if (query.buildingid) {
state.panel.bottomPanel = true; // state.panel.bottomPanel = true;
return; // return;
} // }
if ( if (
query.color || query.color ||
query.type || query.type ||
@ -68,9 +70,36 @@ const xiaoqu = {
isx: undefined, isx: undefined,
isj: 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; export default xiaoqu;

6
src/views/components/xiaoqu/bottomList.vue
Unescape View File

@ -134,10 +134,12 @@ export default {
}, },
methods: { methods: {
handleChange(newValue) { handleChange(newValue) {
console.log("sssss");
this.reset(); this.reset();
delete this.queryParamsXiaoqu.buildingid;
delete this.queryParamsXiaoqu.deptId;
this.queryParams = { ...this.queryParams, ...this.queryParamsXiaoqu }; this.queryParams = { ...this.queryParams, ...this.queryParamsXiaoqu };
this.queryParams.buildingid = undefined;
this.queryParams.deptId = undefined;
this.disabled = false; this.disabled = false;
this.load(); this.load();
}, },

170
src/views/components/xiaoqu/map/index.vue
Unescape View File

@ -9,8 +9,7 @@ import configJson from "./map-config.json";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import garden from "./garden.json"; import garden from "./garden.json";
import MarsMap from "@/components/mars-map"; import MarsMap from "@/components/mars-map";
import { listDept } from "@/api/system/dept.js";
import { listBuilding } from "@/api/taicangpop/building.js";
export default { export default {
props: { props: {
xiaoquId: { xiaoquId: {
@ -296,100 +295,88 @@ export default {
return { yuanName, buildingNumber, buildingColor, image }; return { yuanName, buildingNumber, buildingColor, image };
}, },
//平面 + 图标 //平面 + 图标
addbuildingLayer() { async addbuildingLayer() {
let _this = this; let _this = this;
mars3d.Util.fetchJson({ let res = await mars3d.Util.fetchJson({
url: url:
this.configUrl + `lib/geoJson/xiaoqu/building${this.xiaoquId}.json`, this.configUrl + `lib/geoJson/xiaoqu/building${this.xiaoquId}.json`,
}).then((res) => { });
const arr = mars3d.Util.geoJsonToGraphics(res); const arr = mars3d.Util.geoJsonToGraphics(res);
arr.map((item, index) => { arr.map((item, index) => {
const { yuanName, buildingNumber, buildingColor, image } = const { yuanName, buildingNumber, buildingColor, image } =
this.pointFilter(item.attr); this.pointFilter(item.attr);
const polygon = new mars3d.graphic.PolygonEntity({ const polygon = new mars3d.graphic.PolygonEntity({
id: item.attr["幢号"], id: item.attr["幢号"],
positions: item.positions, positions: item.positions,
style: { style: {
color: "transparent", color: "transparent",
opacity: 0, opacity: 0,
outline: false, outline: false,
outlineColor: "transparent", outlineColor: "transparent",
outlineWidth: 0, outlineWidth: 0,
}, },
}); });
this.mapLayer.plane.addGraphic(polygon); this.mapLayer.plane.addGraphic(polygon);
const point = new mars3d.graphic.BillboardEntity({ const point = new mars3d.graphic.BillboardEntity({
id: item.attr["幢号"], id: item.attr["幢号"],
position: polygon.centerPoint, position: polygon.centerPoint,
style: { style: {
image: image, image: image,
scale: 1,
width: 46,
height: 42,
visibleDepth: false,
clampToGround: true, //贴地
label: {
clampToGround: true, //贴地
pixelOffsetY: -3,
scale: 1, scale: 1,
width: 46, text: buildingNumber,
height: 42, height: 0,
opacity: 1,
font_size: 12,
font_weight: "bold",
color: buildingColor,
font_family: "微软雅黑",
outline: true,
outlineColor: "#0C212C",
outlineWidth: 2,
outlineOpacity: 1,
visibleDepth: false, 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, attr: {
yuanName: yuanName, id: index,
buildingNumber: buildingNumber, yuanName: yuanName,
floorNum: item.attr["层数"], buildingNumber: buildingNumber,
}, floorNum: item.attr["层数"],
}); },
point.on(mars3d.EventType.click, async function (e) { });
let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id); point.on(mars3d.EventType.click, function (e) {
if ( let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id);
_this.mapLayer.tiles3dLayer && if (_this.mapLayer.tiles3dLayer && _this.mapLayer.tiles3dLayer.show) {
_this.mapLayer.tiles3dLayer.show const geojson = buildingItem.toGeoJSON();
) { _this.map.getLayerById("dth").loadGeoJSON(geojson, { clear: true });
const geojson = buildingItem.toGeoJSON(); } else {
_this.map buildingItem.openHighlight({
.getLayerById("dth") color: "#FFA200",
.loadGeoJSON(geojson, { clear: true }); opacity: 0.3,
} else { outline: true,
buildingItem.openHighlight({ outlineColor: "#F5DC02",
color: "#FFA200", outlineWidth: 2,
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", { // _this.$store.commit("CHANGE_QUERY", {
buildingid: buildingData.id, // buildingid: 20,
deptId: deptData.deptId, // 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); 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() { // handlezs() {
// // this.mapLayer.zhengsheLayer.show = true; // // this.mapLayer.zhengsheLayer.show = true;
// this.addZhengsheLayer(); // this.addZhengsheLayer();

Write Preview
Loading…
Cancel
Save