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 = {
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;

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

@ -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();
},

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 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();

Write Preview
Loading…
Cancel
Save