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

Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS

Browse Source
This commit is contained in:
dev02 2023-05-30 17:17:36 +08:00
commit d541e72dd6
5 changed files with 3249 additions and 3298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
Frontend/_sysMonAll.html
View File

@ -55,7 +55,6 @@
$(function () { $(function () {
$(loadEle).Loading("start"); $(loadEle).Loading("start");
getBuildMenu((arr, data) => { getBuildMenu((arr, data) => {
console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@", arr, data);
buildMenuData = data; buildMenuData = data;
if (arr.indexOf(4) != -1) { if (arr.indexOf(4) != -1) {
getFloDevList(arr[0] == 4 ? "left" : "right"); getFloDevList(arr[0] == 4 ? "left" : "right");
@ -119,7 +118,7 @@
let deviceCloseArr = []; let deviceCloseArr = [];
myBaja.setSubscribeDevicesCallBack(function (data) { myBaja.setSubscribeDevicesCallBack(function (data) {
// console.log(data) console.log("subDevice 開始");
let matchDevice = allDevList.filter( let matchDevice = allDevList.filter(
(x) => x.device_number == data.device_number_full (x) => x.device_number == data.device_number_full
)[0]; )[0];
@ -237,15 +236,10 @@
(device) => device.device_number === matchDevice.device_number (device) => device.device_number === matchDevice.device_number
) )
) { ) {
if (pageAct.sysSubTag === "L1") {
$(`#${matchDevice.device_number}_status`) $(`#${matchDevice.device_number}_status`)
.attr("data-light-error-type", "error") .attr("data-light-error-type", "error")
.data("light-error-type", "error"); .data("light-error-type", "error");
} else {
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "error")
.data("light-type", "error");
}
alarmDbIdList.push(matchDevice); alarmDbIdList.push(matchDevice);
} else if ( } else if (
data.point_name == errDevPoiName && data.point_name == errDevPoiName &&
@ -260,8 +254,21 @@
} }
if ( if (
deviceCloseArr.length === 0 &&
alarmDbIdList.some(
(device) => device.device_number === matchDevice.device_number
)
) {
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "error")
.data("light-type", "error");
}
if (
(!pageAct.floTag &&
allDevList.length === allDevList.length ===
deviceNormalArr.length + deviceCloseArr.length + alarmDbIdList.length deviceNormalArr.length + deviceCloseArr.length) ||
allDevList.length === deviceNormalArr.length + alarmDbIdList.length
) { ) {
changeColorForHotspot( changeColorForHotspot(
deviceNormalArr.map(({ spriteDbid }) => spriteDbid), deviceNormalArr.map(({ spriteDbid }) => spriteDbid),
@ -292,166 +299,12 @@
if (data.findIndex((x) => x.point_name == "CO2") != -1) { if (data.findIndex((x) => x.point_name == "CO2") != -1) {
// 顯示溫度條 // 顯示溫度條
showHeatCO2("[name=forgeHeatBar]"); showHeatCO2("[name=forgeHeatBar]");
} else if (data.findIndex((x) => x.point_name == "Temp") != -1) { } else if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
// 顯示溫度條 // 顯示溫度條
showHeat("[name=forgeHeatBar]"); showHeat("[name=forgeHeatBar]");
} }
}); });
} }
// function subDevice() {
// let myBaja = new subscriptionDevices();
// var ordPath = {
// area_tag: pageAct.AreaTag,
// building_tag: pageAct.buiTag,
// system_tag: pageAct.sysMainTag,
// name_tag: pageAct.sysSubTag,
// };
// myBaja.setSubscribeDevicesByBql(ordPath);
// // 燈熱點用
// let lightOnHotColorArr = [];
// let lightOffHotColorArr = [];
// // 燈光圈用
// let lightOnGuidArr = [];
// let lightOffGuidArr = [];
// myBaja.setSubscribeDevicesCallBack(function (data) {
// // console.log(data)
// let matchDevice = allDevList.filter(
// (x) => x.device_number == data.device_number_full
// )[0];
// if (!matchDevice) {
// return false;
// }
// //將訂閱值塞入 subDeviceData
// if (
// subDeviceData.findIndex(
// (x) => x.device_number == matchDevice.device_number
// ) == -1
// ) {
// let obj = {};
// obj.device_number = matchDevice.device_number;
// obj.dbid = matchDevice.forge_dbid;
// subDeviceData.push(obj);
// }
// let subData = subDeviceData.filter(
// (x) => x.device_number == matchDevice.device_number
// )[0];
// if (subData) {
// subData[data.point_name] = data.value;
// }
// let norDevPoiName = matchDevice.device_normal_point_name;
// let cloDevPoiName = matchDevice.device_close_point_name;
// let errDevPoiName = matchDevice.device_error_point_name;
// if (data.point_name == "ONOFF" && pageAct.sysSubTag === "L1") {
// const lightOn = data.value.includes("true");
// setLightOpenOrClose(lightOn, matchDevice.device_guid);
// if (lightOn) {
// setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
// // changeColorForHotspot(matchDevice.spriteDbid, null, true)
// if (
// !lightOnHotColorArr.some(
// ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
// )
// ) {
// lightOnHotColorArr.push(matchDevice);
// }
// lightOffHotColorArr = lightOffHotColorArr.filter(
// (light) => light.spriteDbid !== matchDevice.spriteDbid
// );
// heatMap?.changeTemp(matchDevice.device_number, 40);
// } else {
// setLightValues(matchDevice.device_guid, 0, 0xffffff);
// // changeColorForHotspot(matchDevice.spriteDbid)
// if (
// !lightOffHotColorArr.some(
// ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
// )
// ) {
// lightOffHotColorArr.push(matchDevice);
// }
// lightOnHotColorArr = lightOnHotColorArr.filter(
// (light) => light.spriteDbid !== matchDevice.spriteDbid
// );
// heatMap?.changeTemp(matchDevice.device_number, 0);
// }
// }
// if (data.point_name == "Temp") {
// heatMap?.changeTemp(
// data.device_number_full,
// !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
// );
// let devIdx = allDevList.findIndex(
// (x) => x.device_number == data.device_number_full
// );
// allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
// ? parseInt(data.value)
// : 0;
// }
// if (
// data.point_name == norDevPoiName &&
// data.value == matchDevice.device_normal_point_value
// ) {
// //顯示正常燈號
// $(`#${matchDevice.device_number}_status`)
// .attr("data-light-type", "normal")
// .data("light-type", "normal");
// } else if (
// data.point_name == cloDevPoiName &&
// data.value == matchDevice.device_close_point_value
// ) {
// $(`#${matchDevice.device_number}_status`)
// .attr("data-light-type", "close")
// .data("light-type", "close");
// } else if (
// data.point_name == errDevPoiName &&
// data.value == matchDevice.device_error_point_value
// ) {
// $(`#${matchDevice.device_number}_status`)
// .attr("data-light-type", "error")
// .data("light-type", "error");
// }
// if (
// allDevList.length ===
// lightOnHotColorArr.length + lightOffHotColorArr.length
// ) {
// changeColorForHotspot(
// lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
// null,
// true
// );
// changeColorForHotspot(
// lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
// null,
// false
// );
// }
// $(loadEle).Loading("close");
// setLightColor();
// setForgeHotSpotColor(matchDevice);
// lightDevForgeSpotLig(matchDevice);
// // 從設備訂閱更新每個設備卡片即時點位
// setDevItemPoiValBySub(data);
// });
// myBaja.setSubscribeDeviceEndCallBack(function (data) {
// endPageLoading();
// if (data.findIndex((x) => x.point_name == "Temp") != -1) {
// // 顯示溫度條
// showHeat("[name=forgeHeatBar]");
// }
// });
// }
function lightDevForgeSpotLig(devObj) { } function lightDevForgeSpotLig(devObj) { }
@ -605,9 +458,9 @@
endPageLoading(); endPageLoading();
} else { } else {
// 訂閱 baja 設備 // 訂閱 baja 設備
if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") { // if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
subDevice(); // subDevice();
} // }
} }
// 繪製 html // 繪製 html
@ -865,14 +718,14 @@
.map((y) => x) .map((y) => x)
); );
for (let sub of stSubArr) { // for (let sub of stSubArr) {
let matchDevice = allDevList.filter( // let matchDevice = allDevList.filter(
(x) => x.device_number == sub[0]?.device_number // (x) => x.device_number == sub[0]?.device_number
)[0]; // )[0];
if (matchDevice) { // if (matchDevice) {
setForgeHotSpotColor(matchDevice); // setForgeHotSpotColor(matchDevice);
} // }
} // }
} }
if (pageAct.sysSubTag == "W2") { if (pageAct.sysSubTag == "W2") {
// console.log("@@",pageAct, pageAct.sub_system_tag) // console.log("@@",pageAct, pageAct.sub_system_tag)
@ -1036,11 +889,14 @@
allDevList.forEach((dev, idx) => { allDevList.forEach((dev, idx) => {
if (dev.device_number == devNum) { if (dev.device_number == devNum) {
dev.spriteDbid = dbid; dev.spriteDbid = dbid;
setForgeHotSpotColor(dev); // setForgeHotSpotColor(dev);
} }
}); });
$(ele).data("dbId", dbid); $(ele).data("dbId", dbid);
}); });
if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
subDevice();
}
}); });
onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) { onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {

163
Frontend/_sysMonFloor.html
View File

@ -43,6 +43,7 @@
var zoomToggle = 1.3; var zoomToggle = 1.3;
$(function () { $(function () {
$(loadEle).Loading("start"); $(loadEle).Loading("start");
alarmDbIdList = [];
$("#topLight").html(setTopLight()); $("#topLight").html(setTopLight());
setLightColor(); setLightColor();
initChart(); initChart();
@ -442,7 +443,7 @@
}); });
cData._dbId = dbid; cData._dbId = dbid;
cData.spriteDbid = dbid; cData.spriteDbid = dbid;
setForgeHotSpotColor(cData); // setForgeHotSpotColor(cData);
}); });
}); });
floChart.setOption(option); floChart.setOption(option);
@ -597,9 +598,36 @@
heatMap?.changeTemp(matchDevice.device_number, 0); heatMap?.changeTemp(matchDevice.device_number, 0);
} }
} }
if (
data.point_name == errDevPoiName &&
data.value !== matchDevice.device_error_point_value &&
alarmDbIdList.some(
({ device_number }) => matchDevice.device_number === device_number
)
) {
alarmDbIdList = alarmDbIdList.filter(
({ device_number }) => matchDevice.device_number === device_number
);
} else if (
data.point_name == errDevPoiName &&
data.value == matchDevice.device_error_point_value &&
!alarmDbIdList.some(
({ device_number }) => matchDevice.device_number === device_number
)
) {
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "error")
.data("light-type", "error");
alarmDbIdList.push(matchDevice);
}
if ( if (
data.point_name == norDevPoiName && data.point_name == norDevPoiName &&
data.value == matchDevice.device_normal_point_value data.value == matchDevice.device_normal_point_value &&
!deviceScatterNormalArr.some(
({ device_number }) => data.device_number_full === device_number
)
) { ) {
//顯示正常燈號 //顯示正常燈號
$(`#${matchDevice.device_number}_status`) $(`#${matchDevice.device_number}_status`)
@ -609,86 +637,56 @@
deviceScatterCloseArr = deviceScatterCloseArr.filter( deviceScatterCloseArr = deviceScatterCloseArr.filter(
(device) => device.spriteDbid !== matchDevice.spriteDbid (device) => device.spriteDbid !== matchDevice.spriteDbid
); );
deviceScatterErrorArr = deviceScatterErrorArr.filter(
(device) => device.spriteDbid !== matchDevice.spriteDbid
);
} else if ( } else if (
data.point_name == cloDevPoiName && data.point_name == cloDevPoiName &&
data.value == matchDevice.device_close_point_value data.value == matchDevice.device_close_point_value &&
!deviceScatterCloseArr.some(
({ device_number }) => data.device_number_full === device_number
)
) { ) {
$(`#${matchDevice.device_number}_status`) $(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "close") .attr("data-light-type", "close")
.data("light-type", "close"); .data("light-type", "close");
deviceScatterCloseArr.push(matchDevice); deviceScatterCloseArr.push(matchDevice);
deviceScatterNormalArr = deviceScatterNormalArr.filter( deviceScatterNormalArr = deviceScatterNormalArr.filter(
(device) => device.spriteDbid !== matchDevice.spriteDbid (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
) {
$(`#${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
);
} }
console.log(deviceScatterCloseArr.length,
deviceScatterNormalArr.length, if (pageAct.sysSubTag === "L1" && lightControl === "node") {
deviceScatterErrorArr.length) alarmDbIdList = alarmDbIdList.filter(
({ device_node_guid }) =>
device_node_guid !== undefined && device_node_guid !== null
);
deviceScatterNormalArr = deviceScatterNormalArr.filter(
({ device_node_guid }) =>
device_node_guid !== undefined && device_node_guid !== null
);
deviceScatterCloseArr = deviceScatterCloseArr.filter(
({ device_node_guid }) =>
device_node_guid !== undefined && device_node_guid !== null
);
lightOnHotColorArr = lightOnHotColorArr.filter(
({ device_node_guid }) =>
device_node_guid !== undefined && device_node_guid !== null
);
lightOffHotColorArr = lightOffHotColorArr.filter(
({ device_node_guid }) =>
device_node_guid !== undefined && device_node_guid !== null
);
}
if ( if (
option.series[0].data.length === deviceScatterCloseArr.length + deviceScatterNormalArr.length ===
lightOnHotColorArr.length + lightOffHotColorArr.length option.series[0].data.length ||
) {
lightOnHotColorArr.forEach((light) => {
const cur = option.series[0].data.find(
({ device_number }) => device_number === light.device_number
);
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 + deviceScatterCloseArr.length +
deviceScatterNormalArr.length + deviceScatterNormalArr.length +
deviceScatterErrorArr.length === alarmDbIdList.length ===
option.series[0].data.length option.series[0].data.length
) { ) {
deviceScatterNormalArr.length &&
deviceScatterNormalArr.forEach((device) => { deviceScatterNormalArr.forEach((device) => {
const cur = option.series[0].data.find( const cur = option.series[0].data.find(
({ device_number }) => device_number === device.device_number ({ device_number }) => device_number === device.device_number
@ -697,9 +695,18 @@
const normalColor = currentData.find( const normalColor = currentData.find(
({ device_number }) => device_number === device.device_number ({ device_number }) => device_number === device.device_number
).device_normal_color; ).device_normal_color;
if (cur) {
cur.itemStyle = { color: normalColor }; cur.itemStyle = { color: normalColor };
}
}); });
changeColorForHotspot(
deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid),
null,
true
);
deviceScatterCloseArr.length &&
deviceScatterCloseArr.forEach((device) => { deviceScatterCloseArr.forEach((device) => {
const cur = option.series[0].data.find( const cur = option.series[0].data.find(
({ device_number }) => device_number === device.device_number ({ device_number }) => device_number === device.device_number
@ -707,22 +714,37 @@
const closeColor = currentData.find( const closeColor = currentData.find(
({ device_number }) => device_number === device.device_number ({ device_number }) => device_number === device.device_number
).device_close_color; ).device_close_color;
if (cur) {
cur.itemStyle = { color: closeColor }; cur.itemStyle = { color: closeColor };
}
}); });
deviceScatterErrorArr.forEach((device) => { changeColorForHotspot(
deviceScatterCloseArr.map(({ spriteDbid }) => spriteDbid),
null,
false
);
alarmDbIdList.length &&
alarmDbIdList.forEach((device) => {
const cur = option.series[0].data.find( const cur = option.series[0].data.find(
({ device_number }) => device_number === device.device_number ({ device_number }) => device_number === device.device_number
); );
const errColor = currentData.find( const errColor = currentData.find(
({ device_number }) => device_number === device.device_number ({ device_number }) => device_number === device.device_number
).device_error_color; )?.device_error_color;
if (cur) {
cur.itemStyle = { color: errColor }; cur.itemStyle = { color: errColor };
}
}); });
changeColorForHotspot(
alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
"error",
false
);
floChart.setOption(option); floChart.setOption(option);
setForgeHotSpotColor(matchDevice);
$(loadEle).Loading("close"); $(loadEle).Loading("close");
} }
}); });
@ -1595,7 +1617,6 @@
}); });
}; };
} }
if (pageAct.sysSubTag === "M12" && !elevatorShow) { if (pageAct.sysSubTag === "M12" && !elevatorShow) {
let sensorObjs = []; let sensorObjs = [];
addHotPoint(viewer); addHotPoint(viewer);

19
Frontend/index.html
View File

@ -1559,12 +1559,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
function controlFocusHotspot(dbId, open = true) { function controlFocusHotspot(dbId, open = true) {
pageAct.sysSubTag !== "L1" &&
pageAct.sysSubTag !== "M12" &&
console.log("dbId", dbId);
pageAct.sysSubTag !== "L1" &&
pageAct.sysSubTag !== "M12" &&
changeColorForHotspot(dbId, open ? "focus" : null);
changeScaleForHotspot(dbId, open); changeScaleForHotspot(dbId, open);
} }
@ -1630,11 +1624,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
"<'scrolledTable'tpi>" "<'scrolledTable'tpi>"
); );
} }
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設) //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
function setLightColor() { function setLightColor() {
$("[data-light-type]").each((index, ele) => { $("[data-light-type]").each((index, ele) => {
let type = $(ele).data("light-type"); let type = $(ele).data("light-type");
let errType = $(ele).data("light-error-type");
let isFlashing = false; let isFlashing = false;
let color = "#000"; let color = "#000";
switch (type) { switch (type) {
@ -1651,11 +1645,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
isFlashing = pageAct.sysSubObj.device_close_flashing == "1"; isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
break; break;
case "error": case "error":
color =
pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
// isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
break;
}
if (errType === "error") {
color = color =
pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)"; pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
isFlashing = pageAct.sysSubObj.device_error_flashing == "1"; isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
break;
} }
$(ele).css("background-color", color); $(ele).css("background-color", color);
//是否閃爍 //是否閃爍
if (isFlashing) { if (isFlashing) {
@ -1738,6 +1740,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag; pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
pageAct.sysSubName = $(obj).data("subSysObj").full_name; pageAct.sysSubName = $(obj).data("subSysObj").full_name;
pageAct.sysSubObj = $(obj).data("subSysObj"); pageAct.sysSubObj = $(obj).data("subSysObj");
console.log(" pageAct.sysSubObj", pageAct.sysSubObj)
getDevItem(); getDevItem();
} }

50
Frontend/js/forge/forgemodel.js
View File

@ -922,9 +922,9 @@ async function addHotPoint(data) {
return; return;
} else { } else {
spriteColor = new THREE.Color(0xffffff); spriteColor = new THREE.Color(0xffffff);
spriteIcon = "/file/img/forge/hotspot.svg"; spriteIcon = "/file/img/forge/sensor_circle.svg";
if (location.href.indexOf("localhost:5966") != -1) { if (location.href.indexOf("localhost:5966") != -1) {
spriteIcon = "/img/forge/hotspot.svg"; spriteIcon = "/img/forge/sensor_circle.svg";
} }
} }
@ -973,7 +973,7 @@ async function addHotPoint(data) {
// console.log(`Sprite clicked: ${event.dbId}`); // console.log(`Sprite clicked: ${event.dbId}`);
for (let i = dbIdStart; i <= myDataList.length + 10; i++) { for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
!alarmDbIdList.some((dbId) => dbId == i) && !alarmDbIdList.some(({ spriteDbid }) => spriteDbid == i) &&
pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "L1" &&
changeColorForHotspot(i); changeColorForHotspot(i);
changeScaleForHotspot(i, true); changeScaleForHotspot(i, true);
@ -990,7 +990,7 @@ async function addHotPoint(data) {
} }
$(selector).trigger("autodesk:click:sprite", { event, myData }); $(selector).trigger("autodesk:click:sprite", { event, myData });
} else { } else {
!alarmDbIdList.some((dbId) => dbId == i) && !alarmDbIdList.some(({ spriteDbid }) => spriteDbid == event.dbId) &&
pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "L1" &&
changeColorForHotspot(event.dbId, null); changeColorForHotspot(event.dbId, null);
changeScaleForHotspot(event.dbId, false); changeScaleForHotspot(event.dbId, false);
@ -1038,25 +1038,47 @@ async function addHotPoint(data) {
//} //}
} }
//hex -> rgbsensor_circle
function hexToRgb(hex) {
return (
"rgb(" +
parseInt("0x" + hex.slice(1, 3)) +
"," +
parseInt("0x" + hex.slice(3, 5)) +
"," +
parseInt("0x" + hex.slice(5, 7)) +
")"
);
}
// 熱點 更換顏色 // 熱點 更換顏色
async function changeColorForHotspot(dbId, type = null, lightOn = false) { async function changeColorForHotspot(dbId, type = null, OnOff = false) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
let spriteColorFocus = new THREE.Color(0xffffff); let spriteColorFocus = new THREE.Color(0xffffff);
if (pageAct.sysSubTag == "L1") {
spriteColorFocus = lightOn spriteColorFocus = OnOff
? new THREE.Color(0xffd524) ? pageAct.sysSubObj.device_normal_color
: new THREE.Color(0x40525e); ? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_normal_color))
if (lightOn) { : new THREE.Color(0xffffff)
console.log(dbId); : pageAct.sysSubObj.device_close_color
} ? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_close_color))
} else if (type == "focus" && pageAct.sysSubTag !== "M12") { : new THREE.Color(0xffffff);
if (type == "focus") {
spriteColorFocus = new THREE.Color(0x00ffe1); spriteColorFocus = new THREE.Color(0x00ffe1);
} else if (type == "error") { } else if (type == "error") {
spriteColorFocus = new THREE.Color(0xff0000); spriteColorFocus = new THREE.Color(
hexToRgb(pageAct.sysSubObj.device_error_color)
);
spriteErrIcon = baseForgeApiUrl + "/file/img/forge/sensor_circle.svg";
if (location.href.indexOf("localhost:5966") != -1) {
spriteErrIcon = baseForgeApiUrl + "/img/forge/sensor_circle.svg";
}
} }
const viewablesToUpdate = dbId; const viewablesToUpdate = dbId;
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => { dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return { return {
url: "/file/img/forge/sensor_circle.svg",
color: spriteColorFocus, color: spriteColorFocus,
}; };
}); });

307
Frontend/js/site.js
View File

@ -954,26 +954,24 @@ class Forge3DSensor {
this.DataVizCore = null; this.DataVizCore = null;
this.tempVal = 20; this.tempVal = 20;
this.curDevice = option.curDevice ?? null; this.curDevice = option.curDevice ?? null;
this.deviceList = option.deviceList ?? null;
this.selector = option.selector ?? "#forgeViewer"; this.selector = option.selector ?? "#forgeViewer";
this.elevCb = option.elevCb ?? null; this.elevCb = option.elevCb ?? null;
this.deviceList = option.deviceList ?? null;
this.#init(); this.#init();
} }
static sensorTimes = 0;
#init = async function () { #init = async function () {
// 系統大類、小類固定 // 系統大類、小類固定
this.ordPath.system_tag = this.sysMainTag; this.ordPath.system_tag = this.sysMainTag;
this.ordPath.name_tag = this.sysSubTag; this.ordPath.name_tag = this.sysSubTag;
// this.dataVizExtn = await this.viewer.loadExtension( this.dataVizExtn = await this.viewer.loadExtension(
// "Autodesk.DataVisualization" "Autodesk.DataVisualization"
// ); );
// this.DataVizCore = Autodesk.DataVisualization.Core; this.DataVizCore = Autodesk.DataVisualization.Core;
await this.registerHotPoint(); await this.registerHotPoint();
this.addSensorHotspotList(this.curDevice.forge_dbid, 35); this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35);
this.subSensorDevice();
this.elevCb && this.elevCb(); this.elevCb && this.elevCb();
this.subSensorDevice();
}; };
// // 建立熱點 // // 建立熱點
@ -986,30 +984,29 @@ class Forge3DSensor {
// } // }
async registerHotPoint(color = "") { async registerHotPoint(color = "") {
if (Forge3DSensor.sensorTimes === 1) {
var viewer = this.viewer; var viewer = this.viewer;
const dataVizExtn = await viewer.loadExtension( const viewableType = this.DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
"Autodesk.DataVisualization"
);
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0xff8c00); const spriteColor = new THREE.Color(0xff8c00);
// const highlightedColor = new THREE.Color(0xe0e0ff); // const highlightedColor = new THREE.Color(0xe0e0ff);
let spriteIcon = "/file/img/forge/sensor_circle.svg"; let spriteIcon = "/file/img/forge/sensor_circle.svg";
if (location.href.indexOf("localhost:5966") != -1) { if (location.href.indexOf("localhost:5966") != -1) {
spriteIcon = "/img/forge/sensor_circle.svg"; spriteIcon = "/img/forge/sensor_circle.svg";
} }
const style = new DataVizCore.ViewableStyle( const style = new this.DataVizCore.ViewableStyle(
viewableType, viewableType,
spriteColor, spriteColor,
spriteIcon spriteIcon
); );
const viewableData = new DataVizCore.ViewableData();
const viewableData = new this.DataVizCore.ViewableData();
viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
this.deviceList.forEach((myData, index) => { // console.log(this.curDevice, [this.curDevice])
[this.curDevice].forEach((myData, index) => {
// console.log(myData)
const dbId = myData.forge_dbid; const dbId = myData.forge_dbid;
const myPosition = myData.position; const myPosition = myData.position;
const viewable = new DataVizCore.SpriteViewable( const viewable = new this.DataVizCore.SpriteViewable(
myPosition, myPosition,
style, style,
dbId dbId
@ -1017,26 +1014,28 @@ class Forge3DSensor {
myData._dbId = dbId; myData._dbId = dbId;
viewableData.addViewable(viewable); viewableData.addViewable(viewable);
}); });
// console.log(viewableData)
await viewableData.finish(); await viewableData.finish();
dataVizExtn.addViewables(viewableData); this.dataVizExtn.addViewables(viewableData);
// console.log("1",this.dataVizExtn)
viewer.addEventListener( viewer.addEventListener(
DataVizCore.MOUSE_CLICK, this.DataVizCore.MOUSE_CLICK,
this.onSpriteClicked.bind(this) this.onSpriteClicked.bind(this)
); // SPRITE_SELECTED ); // SPRITE_SELECTED
// viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this)); // viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
} }
}
// ---------------- 熱點點擊事件 -------------------- // ---------------- 熱點點擊事件 --------------------
onSpriteClicked(event) { onSpriteClicked(event) {
console.log(event);
event.hasStopped = true; event.hasStopped = true;
const dbIdStart = 10; const dbIdStart = 10;
if (event != undefined && event != null) { if (event != undefined && event != null) {
if (event.dbId >= dbIdStart) { if (event.dbId >= dbIdStart) {
let myData = this.deviceList.find((x) => x.forge_dbid == event.dbId); let myData = [this.curDevice].filter(
console.log("site", myData); (x) => x.forge_dbid == event.dbId
// this.changeColorForSensorHotspot(event.dbId, this.tempVal); )[0];
myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備 this.changeColorForSensorHotspot(event.dbId, this.tempVal);
myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備
$(this.selector).trigger("autodesk:click:sprite", { event, myData }); $(this.selector).trigger("autodesk:click:sprite", { event, myData });
} else { } else {
$(this.selector).trigger("autodesk:clickOut:sprite", { event }); $(this.selector).trigger("autodesk:clickOut:sprite", { event });
@ -1046,10 +1045,8 @@ class Forge3DSensor {
// 改變熱點位置 // 改變熱點位置
async changePos(dbId, positionZ) { async changePos(dbId, positionZ) {
const dataVizExtn = await viewer.loadExtension( // const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization") || this.dataVizExtn;
"Autodesk.DataVisualization" this.dataVizExtn?.invalidateViewables(dbId, (viewable) => {
);
dataVizExtn?.invalidateViewables(dbId, (viewable) => {
// console.log(viewable._position) // console.log(viewable._position)
const z = viewable._position.z + positionZ; const z = viewable._position.z + positionZ;
const newPos = { ...viewable._position, z }; const newPos = { ...viewable._position, z };
@ -1060,99 +1057,68 @@ class Forge3DSensor {
}); });
} }
// 溫度感測器 sprite 隨溫度變化 // 熱點 更換顏色---環境感知器
static lowerTempForSensor = []; async changeColorForSensorHotspot(dbId, temp, type = "") {
static normalTempForSensor = []; // const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
static highTempForSensor = [];
static highestTempForSensor = [];
async addSensorHotspotList(dbid, temp) {
let index = Math.floor(temp / 10) - 1 || 0;
// 清空資料
Forge3DSensor.lowerTempForSensor = Forge3DSensor.lowerTempForSensor.filter(
(point) => point !== dbid
);
Forge3DSensor.normalTempForSensor =
Forge3DSensor.normalTempForSensor.filter((point) => point !== dbid);
Forge3DSensor.highTempForSensor = Forge3DSensor.highTempForSensor.filter(
(point) => point !== dbid
);
Forge3DSensor.highestTempForSensor =
Forge3DSensor.highestTempForSensor.filter((point) => point !== dbid);
const temps = [ const temps = [
new THREE.Color(0x00009c), new THREE.Color(0x00009c),
new THREE.Color(0xffff31), new THREE.Color(0xffff31),
new THREE.Color(0xff8c00), new THREE.Color(0xff8c00),
new THREE.Color(0xff0000), new THREE.Color(0xff0000),
]; ];
let index = Math.floor(temp / 10) - 1 || 0;
switch (index) { if (index > 3) {
case -1: index = 3;
Forge3DSensor.lowerTempForSensor.push(dbid);
break;
case 0:
Forge3DSensor.lowerTempForSensor.push(dbid);
break;
case 1:
Forge3DSensor.normalTempForSensor.push(dbid);
break;
case 2:
Forge3DSensor.highTempForSensor.push(dbid);
break;
case 3:
Forge3DSensor.highestTempForSensor.push(dbid);
break;
default:
Forge3DSensor.highTempForSensor.push(dbid);
break;
} }
if ( const viewablesToUpdate = dbId;
(Forge3DSensor.lowerTempForSensor.length, let color = temps[index];
Forge3DSensor.normalTempForSensor.length, // debugger
Forge3DSensor.highTempForSensor.length, // this.registerHotPoint(color)
Forge3DSensor.highestTempForSensor.length, // const _this=this
allDevList.length) // setInterval(() => {
) { // _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
await this.changeColorForSensorHotspot( // return { color: color };
Forge3DSensor.lowerTempForSensor, // });
temps[0] // // sceneUpdated(true)
); // }, 1000);
await this.changeColorForSensorHotspot( if (type == "error") {
Forge3DSensor.normalTempForSensor, color = new THREE.Color(0xff0000);
temps[1]
);
await this.changeColorForSensorHotspot(
Forge3DSensor.highTempForSensor,
temps[2]
);
await this.changeColorForSensorHotspot(
Forge3DSensor.highestTempForSensor,
temps[3]
);
} }
} this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
async changeColorForSensorHotspot(viewablesToUpdate, color) {
const dataVizExtn = await viewer.loadExtension(
"Autodesk.DataVisualization"
);
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return { return {
color: color, color: color,
}; };
}); });
// debugger
// console.log("3", this.dataVizExtn)
} }
static deviceScatterNormalArr = [];
static deviceScatterCloseArr = [];
static deviceScatterErrorArr = [];
static deviceNormalArr = [];
static deviceCloseArr = [];
// 訂閱sensor設備 // 訂閱sensor設備
subSensorDevice() { subSensorDevice() {
// console.log("sensor 訂閱")
// require(["baja!"], (baja)=>{
// const sub = new baja.subscriber();
// sub.attach("changed",function(){
// console.log(this)
// })
// baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ME/M12/U1F/NA/TH/N1/TEMP").get({subscribe: sub})
// })
let myBaja = new subscriptionDevices(); let myBaja = new subscriptionDevices();
myBaja.setSubscribeDevicesByBql(this.ordPath); myBaja.setSubscribeDevicesByBql(this.ordPath);
myBaja.setSubscribeDevicesCallBack((data) => { myBaja.setSubscribeDevicesCallBack((data) => {
// console.log(data)
this.bajaChaCallback ? this.bajaChaCallback(data) : ""; this.bajaChaCallback ? this.bajaChaCallback(data) : "";
if (this.curDevice == null) { if (this.curDevice == null) {
$(loadEle).Loading("close");
return false; return false;
} }
@ -1170,64 +1136,147 @@ class Forge3DSensor {
this.subDeviceData.push(obj); this.subDeviceData.push(obj);
} }
let subData = this.subDeviceData.find( let subData = this.subDeviceData.find(
(x) => x.device_number == this.curDevice.id (x) =>
x.device_number == this.curDevice.id ||
x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
); );
if (subData) { if (subData) {
subData = { ...subData, [data.point_name]: data.value }; subData[data.point_name] = data.value;
} }
let norDevPoiName = this.curDevice.device_normal_point_name;
let cloDevPoiName = this.curDevice.device_close_point_name || "";
let errDevPoiName = this.curDevice.device_error_point_name;
if (data.point_name == "Temp" || data.point_name == "TEMP") { if (data.point_name == "Temp" || data.point_name == "TEMP") {
this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0; this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
this.curDevice = { // this.heatMap?.changeTemp(
...this.curDevice, // this.curDevice.id,
temp: !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0, // !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
}; // );
this.curDevice.temp = this.tempVal;
if (data.device_number_full === this.curDevice.id) { if (
this.addSensorHotspotList( subData &&
subData[this.curDevice.device_error_point_name] ==
this.curDevice.device_error_point_value
) {
this.changeColorForSensorHotspot(
this.curDevice.forge_dbid, this.curDevice.forge_dbid,
this.curDevice.temp this.curDevice.temp,
"error"
);
} else {
this.changeColorForSensorHotspot(
this.curDevice.forge_dbid,
parseInt(data.value)
); );
} }
// changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
} }
let matchDevice = allDevList.find(
(x) => x.device_number == data.device_number_full
);
let norDevPoiName = matchDevice.device_normal_point_name;
let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name;
if ( if (
data.point_name == norDevPoiName && data.point_name == norDevPoiName &&
data.value == matchDevice.device_normal_point_value data.value == this.curDevice.device_normal_point_value &&
!Forge3DSensor.deviceNormalArr.some(
({ device_number }) => device_number === this.curDevice.device_number
)
) { ) {
//顯示正常燈號 //顯示正常燈號
$(`#${matchDevice.device_number}_status`) $(`#${this.curDevice.device_number}_status`)
.attr("data-light-type", "normal") .attr("data-light-type", "normal")
.data("light-type", "normal"); .data("light-type", "normal");
Forge3DSensor.deviceNormalArr.push(this.curDevice);
Forge3DSensor.deviceCloseArr = Forge3DSensor.deviceCloseArr.filter(
(device) => device.spriteDbid !== this.curDevice.spriteDbid
);
} else if ( } else if (
data.point_name == cloDevPoiName && data.point_name == cloDevPoiName &&
data.value == matchDevice.device_close_point_value data.value == this.curDevice.device_close_point_value &&
!Forge3DSensor.deviceCloseArr.some(
({ device_number }) => device_number === this.curDevice.device_number
)
) { ) {
$(`#${this.curDevice.device_number}_status`)
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "close") .attr("data-light-type", "close")
.data("light-type", "close"); .data("light-type", "close");
Forge3DSensor.deviceCloseArr.push(this.curDevice);
Forge3DSensor.deviceNormalArr = Forge3DSensor.deviceNormalArr.filter(
(device) => device.spriteDbid !== this.curDevice.spriteDbid
);
}
if (
data.point_name == errDevPoiName &&
data.value == this.curDevice.device_error_point_value &&
!alarmDbIdList.some(
(device) => device.device_number === this.curDevice.device_number
)
) {
$(`#${this.curDevice.device_number}_status`)
.attr("data-light-error-type", "error")
.data("light-error-type", "error");
alarmDbIdList.push(this.curDevice);
} else if ( } else if (
data.point_name == errDevPoiName && data.point_name == errDevPoiName &&
data.value == matchDevice.device_error_point_value data.value !== this.curDevice.device_error_point_value
) { ) {
$(`#${matchDevice.device_number}_status`) $(`#${this.curDevice.device_number}_status`)
.attr("data-light-error-type", "")
.data("light-error-type", "");
alarmDbIdList = alarmDbIdList.filter(
(device) => device.device_number !== this.curDevice.device_number
);
}
if (
Forge3DSensor.deviceCloseArr.length === 0 &&
alarmDbIdList.some(
(device) => device.device_number === this.curDevice.device_number
)
) {
$(`#${this.curDevice.device_number}_status`)
.attr("data-light-type", "error") .attr("data-light-type", "error")
.data("light-type", "error"); .data("light-type", "error");
} }
setLightColor(); setLightColor();
setDevItemPoiValBySub(data);
if (pageAct.floTag) {
const option = floChart.getOption();
if (!alarmDbIdList.some(a => a.device_number === this.curDevice.device_number)) {
this.deviceList.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;
if (cur) {
cur.itemStyle = { color: normalColor };
}
});
} else {
alarmDbIdList.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;
if (cur) {
cur.itemStyle = { color: errColor };
}
});
}
floChart.setOption(option);
}
$(loadEle).Loading("close"); $(loadEle).Loading("close");
setDevItemPoiValBySub(data);
}); });
myBaja.setSubscribeDeviceEndCallBack((data) => { myBaja.setSubscribeDeviceEndCallBack((data) => {