平面圖原點訂閱及顏色變化
This commit is contained in:
parent
1847a7c2f2
commit
605f3f8f87
@ -16,10 +16,8 @@
|
||||
</div> -->
|
||||
<div class="d-flex">
|
||||
<div class="col-6 my-3">
|
||||
<div
|
||||
id="floChart"
|
||||
style="height: 100%; width: 100%; background-color: #fff"
|
||||
></div>
|
||||
<div id="floChart"
|
||||
style="height: 100%; width: 100%; background-color: #fff"></div>
|
||||
</div>
|
||||
<div class="col-6 my-3">
|
||||
<!-- <div id="forgeViewer" class="position-relative" style="height:100%">
|
||||
@ -27,11 +25,9 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<div id="forgeViewer" class="position-relative" style="height: 80vh">
|
||||
<div
|
||||
id="forgeHeatBarDiv"
|
||||
<div id="forgeHeatBarDiv"
|
||||
class="d-flex mb-4 position-absolute"
|
||||
style="gap: 15px"
|
||||
></div>
|
||||
style="gap: 15px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,8 +40,9 @@
|
||||
var allDeviceRowData = []; //所有設備原始資料
|
||||
var global_emergency_alarm_device_number = [];
|
||||
var lightControl = "device"; // device 群控 node 燈控
|
||||
var zoomToggle = 3;
|
||||
var zoomToggle = 1.3;
|
||||
$(function () {
|
||||
$(loadEle).Loading("start");
|
||||
initChart();
|
||||
getFloData();
|
||||
drawHeatBar();
|
||||
@ -196,7 +193,6 @@
|
||||
//} else {
|
||||
// $("#datatablediv").hide();
|
||||
//}
|
||||
resetData();
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
@ -242,12 +238,12 @@
|
||||
roam: true,
|
||||
scaleLimit: {
|
||||
//限制放大縮小倍數
|
||||
max: 16,
|
||||
max: 2,
|
||||
min: 1,
|
||||
},
|
||||
layoutSize: "100%",
|
||||
layoutCenter: [],
|
||||
zoom: 1.2,
|
||||
zoom: 1.1,
|
||||
silent: true,
|
||||
},
|
||||
series: [
|
||||
@ -362,6 +358,7 @@
|
||||
currentData.length > 0
|
||||
) {
|
||||
resetData();
|
||||
subDevice();
|
||||
}
|
||||
|
||||
var ordPath = {
|
||||
@ -372,7 +369,6 @@
|
||||
//myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
|
||||
let parentEle = null;
|
||||
floChart.on("click", function (params) {
|
||||
console.log("Click1", params);
|
||||
forgeUnFocusAll();
|
||||
chartUnFocusAll();
|
||||
if (params.componentType == "series") {
|
||||
@ -418,7 +414,6 @@
|
||||
});
|
||||
|
||||
onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
|
||||
console.log(obj.myDataList);
|
||||
let option = floChart.getOption();
|
||||
|
||||
option.series.forEach(function (series) {
|
||||
@ -476,8 +471,10 @@
|
||||
// })
|
||||
floChart.on("georoam", function (params) {
|
||||
var zoom = floChart.getOption().geo[0].zoom;
|
||||
const option = floChart.getOption();
|
||||
console.log("georoam", zoom);
|
||||
|
||||
if (zoom <= 2.5) {
|
||||
if (zoom <= 1.5) {
|
||||
/*ResetFloorMap();*/
|
||||
floChart.setOption({
|
||||
geo: {
|
||||
@ -491,8 +488,20 @@
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
resetData();
|
||||
if (zoom > zoomToggle) {
|
||||
const currentImage = currentData.find(
|
||||
({ device_image }) => device_image
|
||||
).device_image;
|
||||
option.series[1].data = option.series[0].data.map((d) => ({
|
||||
...d,
|
||||
symbol:
|
||||
"image://" + baseImgUrl + "/upload/device_icon/" + currentImage,
|
||||
}));
|
||||
} else {
|
||||
option.series[1].data = [];
|
||||
}
|
||||
floChart.setOption(option);
|
||||
// resetData();
|
||||
});
|
||||
}).fail(function () {
|
||||
toast_warning("查無該樓層地圖");
|
||||
@ -503,6 +512,8 @@
|
||||
//baja 訂閱設備
|
||||
function subDevice() {
|
||||
console.log("subDevice 開始");
|
||||
|
||||
let option = floChart.getOption();
|
||||
let floMyBaja = new subscriptionDevices();
|
||||
var ordPath = {
|
||||
area_tag: pageAct.AreaTag,
|
||||
@ -517,8 +528,9 @@
|
||||
let lightOnHotColorArr = [];
|
||||
let lightOffHotColorArr = [];
|
||||
// 燈光圈用
|
||||
let lightOnGuidArr = [];
|
||||
let lightOffGuidArr = [];
|
||||
let deviceScatterNormalArr = [];
|
||||
let deviceScatterCloseArr = [];
|
||||
let deviceScatterErrorArr = [];
|
||||
floMyBaja.setSubscribeDevicesCallBack(function (data) {
|
||||
let matchDevice = currentData.filter(
|
||||
(x) => x.device_number == data.device_number_full
|
||||
@ -559,12 +571,11 @@
|
||||
setLightOpenOrClose(lightOn, matchDevice.device_guid);
|
||||
// console.log("Forge 渲染",data.point_name,lightOn)
|
||||
if (lightOn && matchDevice.spriteDbid) {
|
||||
console.log(lightOn, matchDevice, matchDevice.spriteDbid);
|
||||
// setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
|
||||
// changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
|
||||
lightOnHotColorArr.push(matchDevice.spriteDbid);
|
||||
lightOnHotColorArr.push(matchDevice);
|
||||
lightOffHotColorArr = lightOffHotColorArr.filter(
|
||||
(light) => light !== matchDevice.spriteDbid
|
||||
(light) => light.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
heatMap?.changeTemp(matchDevice.device_number, 40);
|
||||
} else if (matchDevice.spriteDbid) {
|
||||
@ -572,9 +583,9 @@
|
||||
// setLightValues(matchDevice.device_guid, 0, 0xffffff);
|
||||
// changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
|
||||
lightOnHotColorArr = lightOnHotColorArr.filter(
|
||||
(light) => light !== matchDevice.spriteDbid
|
||||
(light) => light.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
lightOffHotColorArr.push(matchDevice.spriteDbid);
|
||||
lightOffHotColorArr.push(matchDevice);
|
||||
heatMap?.changeTemp(matchDevice.device_number, 0);
|
||||
}
|
||||
}
|
||||
@ -587,6 +598,13 @@
|
||||
$(`#${matchDevice.device_number}_status`)
|
||||
.attr("data-light-type", "normal")
|
||||
.data("light-type", "normal");
|
||||
deviceScatterNormalArr.push(matchDevice);
|
||||
deviceScatterCloseArr = deviceScatterCloseArr.filter(
|
||||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
deviceScatterErrorArr = deviceScatterErrorArr.filter(
|
||||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
} else if (
|
||||
data.point_name == cloDevPoiName &&
|
||||
data.value == matchDevice.device_close_point_value
|
||||
@ -594,6 +612,14 @@
|
||||
$(`#${matchDevice.device_number}_status`)
|
||||
.attr("data-light-type", "close")
|
||||
.data("light-type", "close");
|
||||
deviceScatterCloseArr.push(matchDevice);
|
||||
|
||||
deviceScatterNormalArr = deviceScatterNormalArr.filter(
|
||||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
deviceScatterErrorArr = deviceScatterErrorArr.filter(
|
||||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
} else if (
|
||||
data.point_name == errDevPoiName &&
|
||||
data.value == matchDevice.device_error_point_value
|
||||
@ -601,12 +627,97 @@
|
||||
$(`#${matchDevice.device_number}_status`)
|
||||
.attr("data-light-type", "error")
|
||||
.data("light-type", "error");
|
||||
deviceScatterErrorArr.push(matchDevice);
|
||||
deviceScatterNormalArr = deviceScatterNormalArr.filter(
|
||||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
deviceScatterCloseArr = deviceScatterCloseArr.filter(
|
||||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||||
);
|
||||
}
|
||||
setForgeHotSpotColor(matchDevice);
|
||||
if (
|
||||
option.series[0].data.length ===
|
||||
lightOnHotColorArr.length + lightOffHotColorArr.length
|
||||
) {
|
||||
lightOnHotColorArr.forEach((light) => {
|
||||
const cur = option.series[0].data.find(
|
||||
({ device_number }) => device_number === light.device_number
|
||||
);
|
||||
|
||||
console.log(lightOnHotColorArr, lightOffHotColorArr);
|
||||
changeColorForHotspot(lightOnHotColorArr, null, true);
|
||||
changeColorForHotspot(lightOffHotColorArr, null, false);
|
||||
const onColor = currentData.find(
|
||||
({ device_number }) => device_number === light.device_number
|
||||
).device_normal_color;
|
||||
cur.itemStyle = { color: onColor };
|
||||
});
|
||||
|
||||
lightOffHotColorArr.forEach((light) => {
|
||||
const cur = option.series[0].data.find(
|
||||
({ device_number }) => device_number === light.device_number
|
||||
);
|
||||
const offColor = currentData.find(
|
||||
({ device_number }) => device_number === light.device_number
|
||||
).device_close_color;
|
||||
cur.itemStyle = { color: offColor };
|
||||
});
|
||||
|
||||
floChart.setOption(option);
|
||||
|
||||
changeColorForHotspot(
|
||||
lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
|
||||
null,
|
||||
true
|
||||
);
|
||||
changeColorForHotspot(
|
||||
lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
|
||||
null,
|
||||
false
|
||||
);
|
||||
|
||||
$(loadEle).Loading("close");
|
||||
} else if (
|
||||
deviceScatterCloseArr.length +
|
||||
deviceScatterNormalArr.length +
|
||||
deviceScatterErrorArr.length ===
|
||||
option.series[0].data.length
|
||||
) {
|
||||
console.log("deviceScatterNormalArr", deviceScatterNormalArr)
|
||||
deviceScatterNormalArr.forEach((device) => {
|
||||
const cur = option.series[0].data.find(
|
||||
({ device_number }) => device_number === device.device_number
|
||||
);
|
||||
|
||||
const normalColor = currentData.find(
|
||||
({ device_number }) => device_number === device.device_number
|
||||
).device_normal_color;
|
||||
cur.itemStyle = { color: normalColor };
|
||||
});
|
||||
|
||||
|
||||
deviceScatterCloseArr.forEach((device) => {
|
||||
const cur = option.series[0].data.find(
|
||||
({ device_number }) => device_number === device.device_number
|
||||
);
|
||||
const closeColor = currentData.find(
|
||||
({ device_number }) => device_number === device.device_number
|
||||
).device_close_color;
|
||||
cur.itemStyle = { color: closeColor };
|
||||
});
|
||||
|
||||
deviceScatterErrorArr.forEach((device) => {
|
||||
const cur = option.series[0].data.find(
|
||||
({ device_number }) => device_number === device.device_number
|
||||
);
|
||||
|
||||
const errColor = currentData.find(
|
||||
({ device_number }) => device_number === device.device_number
|
||||
).device_error_color;
|
||||
cur.itemStyle = { color: errColor };
|
||||
});
|
||||
|
||||
floChart.setOption(option);
|
||||
$(loadEle).Loading("close");
|
||||
}
|
||||
});
|
||||
|
||||
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||||
@ -902,7 +1013,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
temp.push(item_node);
|
||||
// temp.push(item_node);
|
||||
});
|
||||
} else {
|
||||
var device_index = allDeviceRowData.findIndex(
|
||||
@ -1038,7 +1149,9 @@
|
||||
_dbId: item._dbId ?? null,
|
||||
};
|
||||
|
||||
obj.itemStyle = { color: item.device_color };
|
||||
obj.itemStyle = {
|
||||
color: item.device_color || item.device_normal_color,
|
||||
};
|
||||
|
||||
res.push(obj);
|
||||
});
|
||||
@ -1127,7 +1240,9 @@
|
||||
if (item.selected) {
|
||||
obj.symbolSize = 50;
|
||||
}
|
||||
|
||||
obj.itemStyle = {
|
||||
color: item.device_colse_color,
|
||||
};
|
||||
res.push(obj);
|
||||
});
|
||||
|
||||
@ -1196,7 +1311,7 @@
|
||||
deviceItems: item.deviceItems,
|
||||
deviceURL: item.deviceURL,
|
||||
};
|
||||
|
||||
console.log("異常", item.device_color);
|
||||
obj.itemStyle = { color: item.device_error_color };
|
||||
|
||||
res.push(obj);
|
||||
@ -1325,7 +1440,6 @@
|
||||
if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
|
||||
zoom = floChart.getOption().geo[0].zoom;
|
||||
}
|
||||
|
||||
if (zoom <= zoomToggle) {
|
||||
floChart.setOption({
|
||||
series: [
|
||||
@ -1396,7 +1510,6 @@
|
||||
|
||||
// show 3D 模型
|
||||
function show3DModel(urn) {
|
||||
$(loadEle).Loading("start");
|
||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||
// 隱藏 toolbar
|
||||
document.querySelector("#guiviewer3d-toolbar").style.display = "none";
|
||||
@ -1426,7 +1539,6 @@
|
||||
console.log(e);
|
||||
}
|
||||
);
|
||||
$(loadEle).Loading("close");
|
||||
});
|
||||
|
||||
setHeatMap();
|
||||
@ -1450,8 +1562,6 @@
|
||||
forge3DElev.init();
|
||||
}
|
||||
});
|
||||
|
||||
subDevice();
|
||||
}
|
||||
|
||||
function setHeatMap() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user