jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

平面圖原點訂閱及顏色變化

Browse Source
This commit is contained in:
Celeste 2023-04-26 10:49:37 +08:00
parent 1847a7c2f2
commit 605f3f8f87
1 changed files with 174 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
Frontend/_sysMonFloor.html
View File

@ -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"
class="d-flex mb-4 position-absolute"
style="gap: 15px"
></div>
<div id="forgeHeatBarDiv"
class="d-flex mb-4 position-absolute"
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) {
@ -645,7 +756,7 @@
viewer: viewer,
nodeId: node,
floorHeight: elev3DOption.floorHeight ?? [],
inited: function () {},
inited: function () { },
};
let elevator3DObj = new elevator3D(options);
let devNum = Object.keys(elev3DBind).filter(
@ -837,7 +948,7 @@
);
temp_point_value =
allDeviceRowData[device_index].points[
item.device_normal_point_name
item.device_normal_point_name
];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
@ -846,7 +957,7 @@
if (item.device_close_point_name != null) {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_close_point_name
item.device_close_point_name
];
if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
@ -856,14 +967,14 @@
if (item.device_normal_point_name == "ER") {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_normal_point_name
item.device_normal_point_name
];
if (temp_point_value == "true") {
item_node.device_color = item.device_normal_color;
} else {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_close_point_name
item.device_close_point_name
];
if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
@ -872,14 +983,14 @@
} else if (item.device_close_point_name == "ER") {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_close_point_name
item.device_close_point_name
];
if (temp_point_value == "true") {
item_node.device_color = item.device_close_color;
} else {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_normal_point_name
item.device_normal_point_name
];
if (
temp_point_value == item.device_normal_point_value
@ -890,7 +1001,7 @@
} else {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_normal_point_name
item.device_normal_point_name
];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
@ -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() {
@ -1494,23 +1604,23 @@
selector: "#forgeViewer",
elevCb: elevatorShow
? () => {
let elevOption = {
selector: "#forgeViewer",
viewer: viewer,
ordPath: {
area_tag: pageAct.AreaTag,
building_tag: pageAct.buiTag,
},
sensorObjs,
};
let elevOption = {
selector: "#forgeViewer",
viewer: viewer,
ordPath: {
area_tag: pageAct.AreaTag,
building_tag: pageAct.buiTag,
},
sensorObjs,
};
// 電梯移動訂閱程序載入
let forge3DElev = new Forge3DElevFull(elevOption);
forge3DElev.bajaEndCallback = function () {
endPageLoading();
};
forge3DElev.init();
}
// 電梯移動訂閱程序載入
let forge3DElev = new Forge3DElevFull(elevOption);
forge3DElev.bajaEndCallback = function () {
endPageLoading();
};
forge3DElev.init();
}
: null,
curDevice: {
...device,
@ -1607,10 +1717,10 @@
let name =
lightControl === "node" && pageAct.sysSubTag === "L1"
? currentData.filter(
(x) => x.device_node_guid == devObj.device_node_guid
)[0]?.device_node_full_name
(x) => x.device_node_guid == devObj.device_node_guid
)[0]?.device_node_full_name
: currentData.filter((x) => x.device_guid == devObj.device_guid)[0]
?.full_name;
?.full_name;
devObj.full_name = name;
parentEle = crePosPopover(position, devObj);
$(parentEle).click();