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

[前台] forge 突擊平面圖原點配合點位顏色

Browse Source
This commit is contained in:
Celeste 2023-05-30 16:01:26 +08:00
parent 7a6b2068bd
commit 7169c33dc3
5 changed files with 5656 additions and 5661 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
Frontend/_sysMonAll.html
View File

@ -114,15 +114,16 @@
let lightOnHotColorArr = [];
let lightOffHotColorArr = [];
// 燈光圈用
let lightOnGuidArr = [];
let lightOffGuidArr = [];
let deviceNormalArr = [];
let deviceCloseArr = [];
myBaja.setSubscribeDevicesCallBack(function (data) {
// console.log(data)
console.log("subDevice 開始");
let matchDevice = allDevList.filter(
(x) => x.device_number == data.device_number_full
)[0];
if (!matchDevice) {
$(loadEle).Loading("close");
return false;
}
@ -146,43 +147,39 @@
subData[data.point_name] = data.value;
}
// setForgeHotSpotColor(matchDevice);
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 == "SSC" && 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)
setLightOpenOrClose(lightOn, matchDevice);
if (lightOn && matchDevice.spriteDbid) {
if (
!lightOnHotColorArr.some(
({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
)
) {
setLightValues(matchDevice.device_node_guid, 200, 0xe1cf18);
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)
} else if (matchDevice.spriteDbid) {
if (
!lightOffHotColorArr.some(
({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
)
) {
setLightValues(matchDevice.device_node_guid, 0, 0xffffff);
lightOffHotColorArr.push(matchDevice);
}
lightOnHotColorArr = lightOnHotColorArr.filter(
(light) => light.spriteDbid !== matchDevice.spriteDbid
);
heatMap?.changeTemp(matchDevice.device_number, 0);
}
}
@ -198,49 +195,100 @@
? parseInt(data.value)
: 0;
}
if (
data.point_name == norDevPoiName &&
data.value == matchDevice.device_normal_point_value
data.value == matchDevice.device_normal_point_value &&
!deviceNormalArr.some(
({ device_number }) => device_number === matchDevice.device_number
)
) {
//顯示正常燈號
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "normal")
.data("light-type", "normal");
deviceNormalArr.push(matchDevice);
deviceCloseArr = deviceCloseArr.filter(
(device) => device.spriteDbid !== matchDevice.spriteDbid
);
} else if (
data.point_name == cloDevPoiName &&
data.value == matchDevice.device_close_point_value
data.value == matchDevice.device_close_point_value &&
!deviceCloseArr.some(
({ device_number }) => device_number === matchDevice.device_number
)
) {
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "close")
.data("light-type", "close");
deviceCloseArr.push(matchDevice);
deviceNormalArr = deviceNormalArr.filter(
(device) => device.spriteDbid !== matchDevice.spriteDbid
);
}
if (
data.point_name == errDevPoiName &&
data.value == matchDevice.device_error_point_value &&
!alarmDbIdList.some(
(device) => device.device_number === matchDevice.device_number
)
) {
$(`#${matchDevice.device_number}_status`)
.attr("data-light-error-type", "error")
.data("light-error-type", "error");
alarmDbIdList.push(matchDevice);
} else if (
data.point_name == errDevPoiName &&
data.value == matchDevice.device_error_point_value
data.value !== matchDevice.device_error_point_value
) {
$(`#${matchDevice.device_number}_status`)
.attr("data-light-error-type", "")
.data("light-error-type", "");
alarmDbIdList = alarmDbIdList.filter(
(device) => device.device_number !== matchDevice.device_number
);
}
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 ===
lightOnHotColorArr.length + lightOffHotColorArr.length
deviceNormalArr.length + deviceCloseArr.length) ||
allDevList.length === deviceNormalArr.length + alarmDbIdList.length
) {
changeColorForHotspot(
lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
deviceNormalArr.map(({ spriteDbid }) => spriteDbid),
null,
true
);
changeColorForHotspot(
lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
deviceCloseArr.map(({ spriteDbid }) => spriteDbid),
null,
false
);
}
changeColorForHotspot(
alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
"error",
false
);
$(loadEle).Loading("close");
setLightColor();
setForgeHotSpotColor(matchDevice);
lightDevForgeSpotLig(matchDevice);
// 從設備訂閱更新每個設備卡片即時點位
setDevItemPoiValBySub(data);
@ -248,166 +296,15 @@
myBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
if (data.findIndex((x) => x.point_name == "Temp") != -1) {
if (data.findIndex((x) => x.point_name == "CO2") != -1) {
// 顯示溫度條
showHeatCO2("[name=forgeHeatBar]");
} else if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
// 顯示溫度條
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) { }
@ -561,9 +458,9 @@
endPageLoading();
} else {
// 訂閱 baja 設備
if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
subDevice();
}
// if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
// subDevice();
// }
}
// 繪製 html
@ -821,14 +718,14 @@
.map((y) => x)
);
for (let sub of stSubArr) {
let matchDevice = allDevList.filter(
(x) => x.device_number == sub[0]?.device_number
)[0];
if (matchDevice) {
setForgeHotSpotColor(matchDevice);
}
}
// for (let sub of stSubArr) {
// let matchDevice = allDevList.filter(
// (x) => x.device_number == sub[0]?.device_number
// )[0];
// if (matchDevice) {
// setForgeHotSpotColor(matchDevice);
// }
// }
}
if (pageAct.sysSubTag == "W2") {
// console.log("@@",pageAct, pageAct.sub_system_tag)
@ -992,11 +889,14 @@
allDevList.forEach((dev, idx) => {
if (dev.device_number == devNum) {
dev.spriteDbid = dbid;
setForgeHotSpotColor(dev);
// setForgeHotSpotColor(dev);
}
});
$(ele).data("dbId", dbid);
});
if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
subDevice();
}
});
onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {

173
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"
<div id="forgeHeatBarDiv"
class="d-flex mb-4 position-absolute"
style="gap: 15px"
></div>
style="gap: 15px"></div>
</div>
</div>
</div>
@ -47,6 +43,7 @@
var zoomToggle = 1.3;
$(function () {
$(loadEle).Loading("start");
alarmDbIdList = [];
$("#topLight").html(setTopLight());
setLightColor();
initChart();
@ -446,7 +443,7 @@
});
cData._dbId = dbid;
cData.spriteDbid = dbid;
setForgeHotSpotColor(cData);
// setForgeHotSpotColor(cData);
});
});
floChart.setOption(option);
@ -540,6 +537,7 @@
(x) => x.device_number == data.device_number_full
)[0];
if (!matchDevice) {
$(loadEle).Loading("close");
return false;
}
//將訂閱值塞入 subDeviceData
@ -600,9 +598,36 @@
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 (
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`)
@ -612,83 +637,56 @@
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
data.value == matchDevice.device_close_point_value &&
!deviceScatterCloseArr.some(
({ device_number }) => data.device_number_full === device_number
)
) {
$(`#${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
) {
$(`#${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
);
}
if (pageAct.sysSubTag === "L1" && lightControl === "node") {
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 (
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
);
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 ===
option.series[0].data.length ||
deviceScatterCloseArr.length +
deviceScatterNormalArr.length +
deviceScatterErrorArr.length ===
alarmDbIdList.length ===
option.series[0].data.length
) {
deviceScatterNormalArr.length &&
deviceScatterNormalArr.forEach((device) => {
const cur = option.series[0].data.find(
({ device_number }) => device_number === device.device_number
@ -697,9 +695,18 @@
const normalColor = currentData.find(
({ device_number }) => device_number === device.device_number
).device_normal_color;
if (cur) {
cur.itemStyle = { color: normalColor };
}
});
changeColorForHotspot(
deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid),
null,
true
);
deviceScatterCloseArr.length &&
deviceScatterCloseArr.forEach((device) => {
const cur = option.series[0].data.find(
({ device_number }) => device_number === device.device_number
@ -707,22 +714,37 @@
const closeColor = currentData.find(
({ device_number }) => device_number === device.device_number
).device_close_color;
if (cur) {
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(
({ device_number }) => device_number === device.device_number
);
const errColor = currentData.find(
({ device_number }) => device_number === device.device_number
).device_error_color;
)?.device_error_color;
if (cur) {
cur.itemStyle = { color: errColor };
}
});
changeColorForHotspot(
alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
"error",
false
);
floChart.setOption(option);
setForgeHotSpotColor(matchDevice);
$(loadEle).Loading("close");
}
});
@ -1595,7 +1617,6 @@
});
};
}
if (pageAct.sysSubTag === "M12" && !elevatorShow) {
let sensorObjs = [];
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) {
pageAct.sysSubTag !== "L1" &&
pageAct.sysSubTag !== "M12" &&
console.log("dbId", dbId);
pageAct.sysSubTag !== "L1" &&
pageAct.sysSubTag !== "M12" &&
changeColorForHotspot(dbId, open ? "focus" : null);
changeScaleForHotspot(dbId, open);
}
@ -1630,11 +1624,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
"<'scrolledTable'tpi>"
);
}
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
function setLightColor() {
$("[data-light-type]").each((index, ele) => {
let type = $(ele).data("light-type");
let errType = $(ele).data("light-error-type");
let isFlashing = false;
let color = "#000";
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";
break;
case "error":
color =
pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
// isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
break;
}
if (errType === "error") {
color =
pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
break;
}
$(ele).css("background-color", color);
//是否閃爍
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.sysSubName = $(obj).data("subSysObj").full_name;
pageAct.sysSubObj = $(obj).data("subSysObj");
console.log(" pageAct.sysSubObj", pageAct.sysSubObj)
getDevItem();
}

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

@ -922,9 +922,9 @@ async function addHotPoint(data) {
return;
} else {
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) {
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}`);
for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
!alarmDbIdList.some((dbId) => dbId == i) &&
!alarmDbIdList.some(({ spriteDbid }) => spriteDbid == i) &&
pageAct.sysSubTag !== "L1" &&
changeColorForHotspot(i);
changeScaleForHotspot(i, true);
@ -990,7 +990,7 @@ async function addHotPoint(data) {
}
$(selector).trigger("autodesk:click:sprite", { event, myData });
} else {
!alarmDbIdList.some((dbId) => dbId == i) &&
!alarmDbIdList.some(({ spriteDbid }) => spriteDbid == event.dbId) &&
pageAct.sysSubTag !== "L1" &&
changeColorForHotspot(event.dbId, null);
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");
let spriteColorFocus = new THREE.Color(0xffffff);
if (pageAct.sysSubTag == "L1") {
spriteColorFocus = lightOn
? new THREE.Color(0xffd524)
: new THREE.Color(0x40525e);
if (lightOn) {
console.log(dbId);
}
} else if (type == "focus" && pageAct.sysSubTag !== "M12") {
spriteColorFocus = OnOff
? pageAct.sysSubObj.device_normal_color
? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_normal_color))
: new THREE.Color(0xffffff)
: pageAct.sysSubObj.device_close_color
? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_close_color))
: new THREE.Color(0xffffff);
if (type == "focus") {
spriteColorFocus = new THREE.Color(0x00ffe1);
} 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;
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
url: "/file/img/forge/sensor_circle.svg",
color: spriteColorFocus,
};
});

307
Frontend/js/site.js
View File

@ -954,26 +954,24 @@ class Forge3DSensor {
this.DataVizCore = null;
this.tempVal = 20;
this.curDevice = option.curDevice ?? null;
this.deviceList = option.deviceList ?? null;
this.selector = option.selector ?? "#forgeViewer";
this.elevCb = option.elevCb ?? null;
this.deviceList = option.deviceList ?? null;
this.#init();
}
static sensorTimes = 0;
#init = async function () {
// 系統大類、小類固定
this.ordPath.system_tag = this.sysMainTag;
this.ordPath.name_tag = this.sysSubTag;
// this.dataVizExtn = await this.viewer.loadExtension(
// "Autodesk.DataVisualization"
// );
// this.DataVizCore = Autodesk.DataVisualization.Core;
this.dataVizExtn = await this.viewer.loadExtension(
"Autodesk.DataVisualization"
);
this.DataVizCore = Autodesk.DataVisualization.Core;
await this.registerHotPoint();
this.addSensorHotspotList(this.curDevice.forge_dbid, 35);
this.subSensorDevice();
this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35);
this.elevCb && this.elevCb();
this.subSensorDevice();
};
// // 建立熱點
@ -986,30 +984,29 @@ class Forge3DSensor {
// }
async registerHotPoint(color = "") {
if (Forge3DSensor.sensorTimes === 1) {
var viewer = this.viewer;
const dataVizExtn = await viewer.loadExtension(
"Autodesk.DataVisualization"
);
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
const viewableType = this.DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0xff8c00);
// const highlightedColor = new THREE.Color(0xe0e0ff);
let spriteIcon = "/file/img/forge/sensor_circle.svg";
if (location.href.indexOf("localhost:5966") != -1) {
spriteIcon = "/img/forge/sensor_circle.svg";
}
const style = new DataVizCore.ViewableStyle(
const style = new this.DataVizCore.ViewableStyle(
viewableType,
spriteColor,
spriteIcon
);
const viewableData = new DataVizCore.ViewableData();
const viewableData = new this.DataVizCore.ViewableData();
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 myPosition = myData.position;
const viewable = new DataVizCore.SpriteViewable(
const viewable = new this.DataVizCore.SpriteViewable(
myPosition,
style,
dbId
@ -1017,26 +1014,28 @@ class Forge3DSensor {
myData._dbId = dbId;
viewableData.addViewable(viewable);
});
// console.log(viewableData)
await viewableData.finish();
dataVizExtn.addViewables(viewableData);
this.dataVizExtn.addViewables(viewableData);
// console.log("1",this.dataVizExtn)
viewer.addEventListener(
DataVizCore.MOUSE_CLICK,
this.DataVizCore.MOUSE_CLICK,
this.onSpriteClicked.bind(this)
); // SPRITE_SELECTED
// viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
}
}
// ---------------- 熱點點擊事件 --------------------
onSpriteClicked(event) {
console.log(event);
event.hasStopped = true;
const dbIdStart = 10;
if (event != undefined && event != null) {
if (event.dbId >= dbIdStart) {
let myData = this.deviceList.find((x) => x.forge_dbid == event.dbId);
console.log("site", myData);
// this.changeColorForSensorHotspot(event.dbId, this.tempVal);
myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備
myData &&
let myData = [this.curDevice].filter(
(x) => x.forge_dbid == event.dbId
)[0];
this.changeColorForSensorHotspot(event.dbId, this.tempVal);
moveViewToDevice(myData.forge_dbid); //移動視角至該設備
$(this.selector).trigger("autodesk:click:sprite", { event, myData });
} else {
$(this.selector).trigger("autodesk:clickOut:sprite", { event });
@ -1046,10 +1045,8 @@ class Forge3DSensor {
// 改變熱點位置
async changePos(dbId, positionZ) {
const dataVizExtn = await viewer.loadExtension(
"Autodesk.DataVisualization"
);
dataVizExtn?.invalidateViewables(dbId, (viewable) => {
// const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization") || this.dataVizExtn;
this.dataVizExtn?.invalidateViewables(dbId, (viewable) => {
// console.log(viewable._position)
const z = viewable._position.z + positionZ;
const newPos = { ...viewable._position, z };
@ -1060,99 +1057,68 @@ class Forge3DSensor {
});
}
// 溫度感測器 sprite 隨溫度變化
static lowerTempForSensor = [];
static normalTempForSensor = [];
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);
// 熱點 更換顏色---環境感知器
async changeColorForSensorHotspot(dbId, temp, type = "") {
// const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const temps = [
new THREE.Color(0x00009c),
new THREE.Color(0xffff31),
new THREE.Color(0xff8c00),
new THREE.Color(0xff0000),
];
switch (index) {
case -1:
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;
let index = Math.floor(temp / 10) - 1 || 0;
if (index > 3) {
index = 3;
}
if (
(Forge3DSensor.lowerTempForSensor.length,
Forge3DSensor.normalTempForSensor.length,
Forge3DSensor.highTempForSensor.length,
Forge3DSensor.highestTempForSensor.length,
allDevList.length)
) {
await this.changeColorForSensorHotspot(
Forge3DSensor.lowerTempForSensor,
temps[0]
);
await this.changeColorForSensorHotspot(
Forge3DSensor.normalTempForSensor,
temps[1]
);
await this.changeColorForSensorHotspot(
Forge3DSensor.highTempForSensor,
temps[2]
);
await this.changeColorForSensorHotspot(
Forge3DSensor.highestTempForSensor,
temps[3]
);
const viewablesToUpdate = dbId;
let color = temps[index];
// debugger
// this.registerHotPoint(color)
// const _this=this
// setInterval(() => {
// _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
// return { color: color };
// });
// // sceneUpdated(true)
// }, 1000);
if (type == "error") {
color = new THREE.Color(0xff0000);
}
}
async changeColorForSensorHotspot(viewablesToUpdate, color) {
const dataVizExtn = await viewer.loadExtension(
"Autodesk.DataVisualization"
);
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: color,
};
});
// debugger
// console.log("3", this.dataVizExtn)
}
static deviceScatterNormalArr = [];
static deviceScatterCloseArr = [];
static deviceScatterErrorArr = [];
static deviceNormalArr = [];
static deviceCloseArr = [];
// 訂閱sensor設備
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();
myBaja.setSubscribeDevicesByBql(this.ordPath);
myBaja.setSubscribeDevicesCallBack((data) => {
// console.log(data)
this.bajaChaCallback ? this.bajaChaCallback(data) : "";
if (this.curDevice == null) {
$(loadEle).Loading("close");
return false;
}
@ -1170,64 +1136,147 @@ class Forge3DSensor {
this.subDeviceData.push(obj);
}
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) {
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") {
this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
this.curDevice = {
...this.curDevice,
temp: !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
};
if (data.device_number_full === this.curDevice.id) {
this.addSensorHotspotList(
// this.heatMap?.changeTemp(
// this.curDevice.id,
// !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
// );
this.curDevice.temp = this.tempVal;
if (
subData &&
subData[this.curDevice.device_error_point_name] ==
this.curDevice.device_error_point_value
) {
this.changeColorForSensorHotspot(
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 (
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")
.data("light-type", "normal");
Forge3DSensor.deviceNormalArr.push(this.curDevice);
Forge3DSensor.deviceCloseArr = Forge3DSensor.deviceCloseArr.filter(
(device) => device.spriteDbid !== this.curDevice.spriteDbid
);
} else if (
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
)
) {
$(`#${matchDevice.device_number}_status`)
$(`#${this.curDevice.device_number}_status`)
.attr("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 (
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")
.data("light-type", "error");
}
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");
setDevItemPoiValBySub(data);
});
myBaja.setSubscribeDeviceEndCallBack((data) => {