ibms-dome/Frontend/_sysMonFloor.html

1814 lines
76 KiB
HTML
Raw Normal View History

<style>
[id^="yt_tooltip"] {
min-width: 520px;
}
</style>
<!-- <div class="row m-0 mb-3">
<button id="resChartZoom" class="btn btn-info">圖檔重置</button>
</div> -->
<div id="topLight" class="d-flex mb-4" style="gap: 15px"></div>
<!-- <div class="row">
<div id="floChart" style="height : 80vh!important;width:100%"></div>
</div> -->
<!-- <div class="row">
<div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
</div> -->
<div class="d-flex">
<div class="col-6 my-3">
<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%">
<div id="forgeHeatBarDiv" class="d-flex mb-4 position-absolute" style="gap:15px">
</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>
</div>
</div>
<!--<script src="lib/echarts.min.js"></script>-->
<script>
var floChart = null;
var currentData = [];
var heatMap = null;
var allDeviceRowData = []; //所有設備原始資料
var global_emergency_alarm_device_number = [];
var lightControl = "device"; // device 群控 node 燈控
var zoomToggle = 1.3;
$(function () {
$(loadEle).Loading("start");
alarmDbIdList = [];
$("#topLight").html(setTopLight());
setLightColor();
initChart();
getFloData();
drawHeatBar();
getHotspotPoint(() => {
show3DModel(pageAct.urn);
});
});
onEvent("click", "#resChartZoom", function () {
floChart.setOption({
geo: {
center: null,
zoom: 1.2,
},
});
resetData();
});
function getFloData() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
sub_system_tag: pageAct.sysSubTag,
building_tag: pageAct.buiTag,
floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(
url,
objSendData,
function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
lightControl = res.module;
chartHandler(
`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`
);
if (pageAct.sysSubTag === "L1") {
let nodes = [];
res.data[0].device_list.forEach((d) => {
nodes = [...nodes, ...d.device_nodes];
});
getDevice([...nodes, ...res.data[0].device_list]);
} else {
getDevice(res.data[0].device_list);
}
}
},
null,
"POST"
).send();
}
function getDevice(devList) {
let selected_floor = devList[0];
//let selected_floor_objs = devList.filter(function (item) {
// return item.floor_guid == selected_floor.floor_guid;
//});
//currentData = selected_floor_objs[0].device;
currentData = $.map(devList, function (item) {
//資料處理
if (
selected_floor.device_number != undefined &&
selected_floor.device_number != null &&
selected_floor.device_number != "" &&
selected_floor.device_number == item.device_number
) {
item.selected = true;
} else {
item.selected = false;
}
if (
item.device_coordinate != undefined &&
item.device_coordinate != null
) {
var coordinate = item.device_coordinate.split(",");
item.value = [parseFloat(coordinate[0]), parseFloat(coordinate[1])];
}
if (
item.device_nodes != undefined &&
item.device_nodes != null &&
item.device_nodes.length > 0
) {
if (item.device_master_number == selected_floor.device_master) {
//var datatable_data = {
// device_full_name: item.full_name,
// device_number: item.device_number,
// device_master: item.device_master_number
//}
//datatable_data_list.push(datatable_data);
$.map(item.device_nodes, function (item_node) {
item_node.selected = false;
if (
item_node.device_node_coordinate != undefined &&
item_node.device_node_coordinate != null
) {
var node_coordinate = item_node.device_node_coordinate.split(",");
item_node.value = [
parseFloat(node_coordinate[0]),
parseFloat(node_coordinate[1]),
];
}
});
} else {
//var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
//if (index < 0) {
// var datatable_data = {
// device_number: item.device_number,
// device_master: item.device_master_number
// }
// datatable_data_list.push(datatable_data);
//}
$.map(item.device_nodes, function (item_node) {
item_node.selected = false;
if (
item_node.device_node_coordinate != undefined &&
item_node.device_node_coordinate != null
) {
var node_coordinate = item_node.device_node_coordinate.split(",");
item_node.value = [
parseFloat(node_coordinate[0]),
parseFloat(node_coordinate[1]),
];
}
});
}
}
return item;
});
if (currentData == null || currentData.length == 0) {
currentData = [];
}
// myBaja.setPrepareSubscribeDevices(currentData);
// myBaja.setCallBack(mySubscribeDevices);
//if (datatable_data_list.length > 0) {
// $("#datatablediv").show();
// dataTableDraw();
//} else {
// $("#datatablediv").hide();
//}
}
function initChart() {
let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: "auto" });
}
function chartHandler(url) {
floChart.clear();
$.get(url, function (svg) {
if (svg == undefined || svg == null) {
return;
}
echarts.registerMap("floor_svg", { svg: svg });
option = {
// animationDurationUpdate: 1500,
tooltip: {
formatter: function (params) {
if (
params.data.device_node_guid != undefined &&
params.data.device_node_guid != null &&
params.data.device_node_guid != ""
) {
return `<div >
名稱:${params.data.device_node_full_name}<br>
Guid${params.data.device_node_guid}
</div>`;
} else {
return `<div >名稱:${params.data.full_name}<br>
Guid${params.data.device_guid}</div>`;
}
},
},
toolbox: {
//工具欄
show: false,
},
geo: {
map: "floor_svg",
roam: true,
scaleLimit: {
//限制放大縮小倍數
max: 2,
min: 1,
},
layoutSize: "100%",
layoutCenter: [],
zoom: 1.1,
silent: true,
},
series: [
{
//不管有無被選擇(圓點)
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
symbol: "circle",
symbolSize: 20,
symbolOffset: [10, 10],
label: {
show: false,
},
/*data: currentData,*/
z: 2,
},
{
//未選擇的設備(icon)
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
symbolSize: 50,
label: {
formatter: "{b}",
position: "bottom",
show: true,
backgroundColor: "orange",
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
color: "yellow",
},
},
selectedMode: "single",
data: null,
z: 1,
},
{
//被選擇的設備(icon)
type: "effectScatter",
coordinateSystem: "geo",
geoIndex: 0,
showEffectOn: "render",
symbolSize: 50,
label: {
formatter: "{b}",
position: "bottom",
show: true,
backgroundColor: "orange",
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
color: "yellow",
},
},
selectedMode: "single",
data: null,
z: 1,
},
{
//編輯模式底下的設備(圓點,只會有一個)
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
symbol: "circle",
symbolSize: 20,
symbolOffset: [10, 10],
label: {
show: false,
},
/*data: currentData,*/
z: 2,
},
{
//編輯模式底下的設備(icon只會有一個)
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
symbolSize: 50,
label: {
formatter: "{b}",
position: "bottom",
show: true,
backgroundColor: "orange",
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
color: "yellow",
},
},
data: null,
z: 1,
},
],
};
floChart.setOption(option);
if (
currentData != undefined &&
currentData != null &&
currentData.length > 0
) {
resetData();
}
var ordPath = {
building_tag: pageAct.buiTag,
system_tag: pageAct.sysMainTag,
};
//myBaja.setSubscribeDevicesByBql(ordPath);
//myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
let parentEle = null;
floChart.on("click", function (params) {
forgeUnFocusAll();
chartUnFocusAll();
if (params.componentType == "series") {
let data = params.data;
let rect = $("#floChart")[0].getBoundingClientRect();
let position = [
rect.left + rect.width / 2,
rect.top + rect.height / 4,
];
// console.log(position)
// let position = [params.event.event.clientX+100, params.event.event.clientY-300];
data._dbId = data._dbId ?? "";
// currentData.find(
// (cData) => cData.device_number === data.device_number
// ).forge_dbid;
parentEle = crePosPopover(position, data);
$(parentEle).click();
} else {
$(parentEle).YTTooltip("hide");
}
});
floChart.getZr().on("click", function (params) {
/*console.log("click", params);*/
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
if (!(params?.target?.shape?.symbolType == "circle")) {
$(parentEle).YTTooltip("hide");
}
//temp_device_on_floor_map = [{
// device_guid: selected_temp_device.device_guid,
// device_full_name: selected_temp_device.device_full_name,
// device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
// device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
// status: selected_temp_device.status,
// value: dataPoint
//}];
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option);
});
onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
console.log("Current", obj.myDataList);
let option = floChart.getOption();
option.series.forEach(function (series) {
(series.data ?? []).forEach(function (point) {
let dbid = obj.myDataList.filter(
(x) => x.device_number == point.device_number
)[0]?._dbId;
point._dbId = dbid;
// currentData.forEach(function (cData) {
// console.log(cData.device_node_guid=== point.device_node_guid)
// if (lightControl === "node" && pageAct.sysSubTag === "L1" && cData.device_node_guid == point.device_node_guid) {
// cData._dbId = dbid;
// cData.spriteDbid = dbid;
// setForgeHotSpotColor(cData);
// }
// else if (cData.device_guid == point.device_guid) {
// cData._dbId = dbid;
// cData.spriteDbid = dbid;
// setForgeHotSpotColor(cData);
// }
// });
const cData = currentData.find((cur) => {
if (lightControl === "node" && pageAct.sysSubTag === "L1") {
if (cur.device_node_guid == point.device_node_guid) return cur;
} else if (cur.device_guid == point.device_guid) {
return cur;
}
});
cData._dbId = dbid;
cData.spriteDbid = dbid;
// setForgeHotSpotColor(cData);
});
});
floChart.setOption(option);
subDevice();
});
//floChart.on('selectchanged', function (params) {
// console.log("selectchanged", params);
// // currentData.push([dataPoint[0], dataPoint[1], 1]);
// // floChart.setOption(option);
// currentData = $.map(currentData, function (item) {
// item.selected = false;
// return item;
// });
// if (params.selected.length > 0) {
// currentData[params.selected[0].seriesIndex - 1].selected = true;
// }
//});
// floChart.getZr().on('mousewheel', function (params) {
// console.log(params)
// })
floChart.on("georoam", function (params) {
var zoom = floChart.getOption().geo[0].zoom;
const option = floChart.getOption();
console.log("georoam", zoom);
if (zoom <= 1.5) {
/*ResetFloorMap();*/
floChart.setOption({
geo: {
roam: "scale",
},
});
} else {
floChart.setOption({
geo: {
roam: true,
},
});
}
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("查無該樓層地圖");
floChart.clear();
});
}
//baja 訂閱設備
function subDevice() {
console.log("subDevice 開始");
let option = floChart.getOption();
let floMyBaja = new subscriptionDevices();
var ordPath = {
area_tag: pageAct.AreaTag,
building_tag: pageAct.buiTag,
system_tag: pageAct.sysMainTag,
name_tag: pageAct.sysSubTag,
flo_tag: pageAct.floTag,
};
floMyBaja.setSubscribeDevicesByBql(ordPath);
// 燈熱點用
let lightOnHotColorArr = [];
let lightOffHotColorArr = [];
// 燈光圈用
let deviceScatterNormalArr = [];
let deviceScatterCloseArr = [];
let deviceScatterErrorArr = [];
floMyBaja.setSubscribeDevicesCallBack(function (data) {
let matchDevice = currentData.filter(
(x) => x.device_number == data.device_number_full
)[0];
if (!matchDevice) {
$(loadEle).Loading("close");
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 norDevPoiName = matchDevice.device_normal_point_name;
let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name;
if (data.point_name == "Temp" || data.point_name == "TEMP") {
heatMap?.changeTemp(
data.device_number_full,
!isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
);
let devIdx = currentData.findIndex(
(x) => x.device_number == data.device_number_full
);
currentData[devIdx]._temp = !isNaN(parseInt(data.value))
? parseInt(data.value)
: 0;
}
if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
const lightOn = data.value.includes("true");
setLightOpenOrClose(lightOn, matchDevice.device_guid);
if (lightOn && matchDevice.spriteDbid) {
// setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
// changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
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 if (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 == 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 &&
!deviceScatterNormalArr.some(
({ device_number }) => data.device_number_full === device_number
)
) {
//顯示正常燈號
$(`#${matchDevice.device_number}_status`)
.attr("data-light-type", "normal")
.data("light-type", "normal");
deviceScatterNormalArr.push(matchDevice);
deviceScatterCloseArr = deviceScatterCloseArr.filter(
(device) => device.spriteDbid !== matchDevice.spriteDbid
);
} else if (
data.point_name == cloDevPoiName &&
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
);
}
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
);
}
2023-04-26 10:49:37 +08:00
if (
deviceScatterCloseArr.length + deviceScatterNormalArr.length ===
option.series[0].data.length ||
deviceScatterCloseArr.length +
deviceScatterNormalArr.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
);
const normalColor = currentData.find(
({ device_number }) => device_number === device.device_number
).device_normal_color;
if (cur) {
cur.itemStyle = { color: normalColor };
}
});
2023-04-26 10:49:37 +08:00
changeColorForHotspot(
deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid),
null,
true
);
2023-04-26 10:49:37 +08:00
deviceScatterCloseArr.length &&
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;
if (cur) {
cur.itemStyle = { color: closeColor };
}
});
2023-04-26 10:49:37 +08:00
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;
if (cur) {
cur.itemStyle = { color: errColor };
}
});
changeColorForHotspot(
alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
"error",
false
);
2023-04-26 10:49:37 +08:00
floChart.setOption(option);
$(loadEle).Loading("close");
}
});
2023-04-26 10:49:37 +08:00
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
if (
pageAct.sysSubTag !== "M12" &&
data.findIndex(
(x) => x.point_name == "Temp" || x.point_name == "TEMP"
) != -1
) {
// 顯示溫度條
showHeat("[name=forgeHeatBar]");
}
2023-04-26 10:49:37 +08:00
});
}
2023-04-26 10:49:37 +08:00
function drawHeatBar() {
$("#forgeHeatBarDiv").html(setTopHeatBar());
}
// 電梯 3D 位置呈現
function set3DElevPos(viewer) {
let nodeIds = allElevDevList
.filter((x) => !isNaN(parseInt(x.forge_dbid)))
.map((x) => {
return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
});
$.each(nodeIds, (idx, item) => {
elev3DBind[item.devNum] = item.nodeId;
});
nodeIds = nodeIds.map((x) => x.nodeId);
$.each(nodeIds, function (idx, node) {
let options = {
element: $("#forgeViewer"),
viewer: viewer,
nodeId: node,
floorHeight: elev3DOption.floorHeight ?? [],
inited: function () { },
};
let elevator3DObj = new elevator3D(options);
let devNum = Object.keys(elev3DBind).filter(
(x) => elev3DBind[x] == node
)[0];
let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
if (elev3DObj.filter((x) => x.nodeId == node).length == 0) {
elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
}
if (subData) {
let elevObj = elev3DObj.filter((x) => x.nodeId == node)[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
elevObj.obj.init(function () {
let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
frags.forEach((fragProxy) => {
fragProxy.frag.position.z =
elev3DOption.floorHeight.filter(
(x) => x.floor == subData["CP"]
)[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform();
});
elevObj.obj.viewer.impl.sceneUpdated(true);
});
}
});
}
// 電梯 3D Option 設置
function set3DElevOpt(data) {
let devNumArr = data
.map((x) => {
return {
devNum: x.device_number_full,
priority: allElevDevList.filter(
(y) => y.device_number == x.device_number_full
)[0]?.priority,
};
})
.DistinctBy("devNum");
devNumArr = devNumArr.oSort("priority");
$.each(devNumArr, (idx, devObj) => {
devNum = devObj.devNum;
let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
if (subData) {
//// 左側 3D 電梯 nodeID 與 device_number match
//if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
// elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
//}
// 左側 3D 電梯 Viewer Option 設置
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
elev3DOption.nodeId = elev3DBind[devNum];
elev3DOption.floorHeight = floList.map((x) => {
return { floor: x };
});
elev3DOption.floorHeight.forEach((floObj, idx) => {
if (floObj.floor.startsWith("B")) {
let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
floObj.height = floor * -13;
} else {
let floor = parseInt(floObj.floor.split("F")[0]);
if (floor == 1) {
floObj.height = 0;
} else if (floor == 2) {
floObj.height = 14.75;
} else {
floObj.height = 14.75 + (floor - 2) * 9.75;
}
}
});
if (elev3DObj.length != 0) {
let elevObj = elev3DObj.filter(
(x) => x.nodeId == elev3DBind[devNum]
)[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
elevObj.obj.init(function () {
let frags = elevObj.obj.fragProxys.filter(
(x) => x.nodeId == elev3DBind[devNum]
);
frags.forEach((fragProxy) => {
fragProxy.frag.position.z =
elev3DOption.floorHeight.filter(
(x) => x.floor == subData["CP"]
)[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform();
});
elevObj.obj.viewer.impl.sceneUpdated(true);
});
}
}
});
}
// //訂閱設備的回傳值,並塞到全域變數
// function subscribeCallBack(change_device, is_need_reset = false) {
// if (change_device != undefined && change_device != null) {
// var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
// if (target_device == undefined || target_device == null) {
// //新增
// obj = {
// device_number: change_device.device_number,
// points: [{
// name: change_device.point_name,
// value: change_device.value
// }]
// };
// allDeviceRowData.push(obj);
// }
// else {
// selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
// if (selected_device_point != null) {
// selected_device_point.value = change_device.value;
// }
// else {
// obj = {
// name: change_device.point_name,
// value: change_device.value
// }
// target_device.points.push(obj);
// }
// }
// if (is_need_reset) {
// resetData();
// }
// }
// }
// 重設平面圖設備資料
function resetData() {
const scatter_symbol_convertData = function (data, zoom) {
//正常、關閉排除CCVT(圓點)
let res = [],
temp = [];
data.forEach(function (item, index) {
if (
global_emergency_alarm_device_number != undefined &&
global_emergency_alarm_device_number != null
) {
if (
global_emergency_alarm_device_number.findIndex(
(x) => x.device_number == item.device_number
) < 0 &&
item.device_system_category_layer3 != "C"
) {
//如果有子節點,則只針對子節點操作
if (
lightControl === "node" &&
item.device_nodes != undefined &&
item.device_nodes != null &&
item.device_nodes.length > 0
) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 =
item.device_system_category_layer3;
item_node.device_normal_color = item.device_normal_color;
item_node.device_close_color = item.device_close_color;
//判斷父節點狀態
var device_index = allDeviceRowData.findIndex(
(x) => x.device_number == item.device_number
);
var temp_point_value;
if (device_index > -1) {
if (
item.device_normal_point_name != null ||
item.device_close_point_name != null
) {
//當其中point name 不為null的情況
if (item.device_normal_point_name != null) {
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_normal_point_name
);
temp_point_value =
allDeviceRowData[device_index].points[
item.device_normal_point_name
];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
}
}
if (item.device_close_point_name != null) {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_close_point_name
];
if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
}
}
} else {
if (item.device_normal_point_name == "ER") {
temp_point_value =
allDeviceRowData[device_index].points[
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
];
if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
}
}
} else if (item.device_close_point_name == "ER") {
temp_point_value =
allDeviceRowData[device_index].points[
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
];
if (
temp_point_value == item.device_normal_point_value
) {
item_node.device_color = item.device_normal_color;
}
}
} else {
temp_point_value =
allDeviceRowData[device_index].points[
item.device_normal_point_name
];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
} else if (
temp_point_value == item.device_close_point_value
) {
item_node.device_color = item.device_close_color;
}
}
}
}
// temp.push(item_node);
});
} else {
var device_index = allDeviceRowData.findIndex(
(x) => x.device_number == item.device_number
);
if (device_index > -1) {
if (
item.device_normal_point_name != null ||
item.device_close_point_name != null
) {
//當其中point name 有為null的情況
if (item.device_normal_point_name != null) {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_normal_point_name
).value;
if (temp_point_value == item.device_normal_point_value) {
item.device_color = item.device_normal_color;
}
}
if (item.device_close_point_name != null) {
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_close_point_name
).value;
if (temp_point_value == item.device_close_point_value) {
item.device_color = item.device_close_color;
}
}
} else {
if (item.device_normal_point_name == "ER") {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_normal_point_name
).value;
if (temp_point_value == "true") {
item.device_color = item.device_normal_color;
} else {
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_close_point_name
).value;
if (temp_point_value == item.device_close_point_value) {
item.device_color = item.device_close_color;
}
}
} else if (item.device_close_point_name == "ER") {
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_close_point_name
).value;
if (temp_point_value == "true") {
item.device_color = item.device_close_color;
} else {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_normal_point_name
).value;
if (temp_point_value == item.device_normal_point_value) {
item.device_color = item.device_normal_color;
}
}
} else {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[
device_index
].points.find(
(x) => x.name == item.device_normal_point_name
).value;
if (temp_point_value == item.device_normal_point_value) {
item.device_color = item.device_normal_color;
} else if (
temp_point_value == item.device_close_point_value
) {
item.device_color = item.device_close_color;
}
}
}
}
item.zoom = zoom;
temp.push(item);
}
2022-11-17 15:22:45 +08:00
}
}
});
// let temp = data.filter(function (item, index) {
// if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
// return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
// } else {
// return [];
// }
// });
let option = floChart.getOption();
temp.forEach(function (tempData) {
let oldTarObj = option.series[0]?.data?.filter(
(x) => x.device_number == tempData.device_number
)[0];
if (oldTarObj) {
tempData = Object.assign(tempData, oldTarObj);
}
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid
? item.device_node_guid
: null,
device_node_full_name: item.device_node_full_name
? item.device_node_full_name
: null,
device_system_category_layer3: item.device_system_category_layer3
? item.device_system_category_layer3
: null,
status: item.status,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL,
_dbId: item._dbId ?? null,
};
obj.itemStyle = {
color: item.device_color || item.device_close_color,
};
res.push(obj);
});
return res;
};
const scatter_icon_convertData = function (data) {
//正常、關閉(icon)
let res = [],
temp = [];
data.forEach(function (item, index) {
if (
global_emergency_alarm_device_number != undefined &&
global_emergency_alarm_device_number != null
) {
if (
global_emergency_alarm_device_number.findIndex(
(x) => x.device_number == item.device_number
) < 0 &&
item.device_system_category_layer3 != "C"
) {
//如果有子節點,則只針對子節點操作
if (
lightControl === "node" &&
item.device_nodes != undefined &&
item.device_nodes != null &&
item.device_nodes.length > 0
) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 =
item.device_system_category_layer3;
item_node.device_normal_color = item.device_normal_color;
item_node.device_image = item.device_image;
temp.push(item_node);
});
} else {
temp.push(item);
}
}
}
});
temp = data.filter(function (item, index) {
if (
global_emergency_alarm_device_number != undefined &&
global_emergency_alarm_device_number != null
) {
return (
global_emergency_alarm_device_number.findIndex(
(x) => x.device_number == item.device_number
) < 0 && item.device_system_category_layer3 != "C"
);
} else {
return [];
}
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid
? item.device_node_guid
: null,
device_node_full_name: item.device_node_full_name
? item.device_node_full_name
: null,
device_system_category_layer3: item.device_system_category_layer3
? item.device_system_category_layer3
: null,
status: item.status,
symbol:
"image://" +
baseImgUrl +
"/upload/device_icon/" +
item.device_image,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL,
};
if (item.selected) {
obj.symbolSize = 50;
}
obj.itemStyle = {
color: item.device_colse_color,
};
res.push(obj);
});
return res;
};
const scatter_error_convertData = function (data) {
//異常(圓點)
let res = [],
temp = [];
data.forEach(function (item, index) {
if (
global_emergency_alarm_device_number != undefined &&
global_emergency_alarm_device_number != null
) {
if (
global_emergency_alarm_device_number.findIndex(
(x) => x.device_number == item.device_number
) > -1 &&
item.device_system_category_layer3 != "C"
) {
//如果有子節點,則只針對子節點操作
if (
lightControl === "node" &&
item.device_nodes != undefined &&
item.device_nodes != null &&
item.device_nodes.length > 0
) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 =
item.device_system_category_layer3;
item_node.device_error_color = item.device_error_color;
temp.push(item_node);
});
} else {
temp.push(item);
}
}
}
});
// if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
// temp = data.filter(function (item, index) {
// return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
// });
// }
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid
? item.device_node_guid
: null,
device_node_full_name: item.device_node_full_name
? item.device_node_full_name
: null,
device_system_category_layer3: item.device_system_category_layer3
? item.device_system_category_layer3
: null,
status: item.status,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL,
};
console.log("異常", item.device_color);
obj.itemStyle = { color: item.device_error_color };
res.push(obj);
});
2022-11-17 15:22:45 +08:00
return res;
2023-04-26 10:49:37 +08:00
};
const scatter_error_icon_convertData = function (data) {
//異常(icon)
let res = [],
temp = [];
data.forEach(function (item, index) {
if (
global_emergency_alarm_device_number != undefined &&
global_emergency_alarm_device_number != null
) {
if (
global_emergency_alarm_device_number.findIndex(
(x) => x.device_number == item.device_number
) > -1 &&
item.device_system_category_layer3 != "C"
) {
//如果有子節點,則只針對子節點操作
if (
lightControl === "node" &&
item.device_nodes != undefined &&
item.device_nodes != null &&
item.device_nodes.length > 0
) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 =
item.device_system_category_layer3;
item_node.device_error_color = item.device_error_color;
item_node.device_image = item.device_image;
temp.push(item_node);
});
} else {
temp.push(item);
}
}
}
});
if (
global_emergency_alarm_device_number != undefined &&
global_emergency_alarm_device_number != null
) {
temp = data.filter(function (item, index) {
return (
global_emergency_alarm_device_number.findIndex(
(x) => x.device_number == item.device_number
) > -1 && item.device_system_category_layer3 != "C"
);
});
}
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid
? item.device_node_guid
: null,
device_node_full_name: item.device_node_full_name
? item.device_node_full_name
: null,
device_system_category_layer3: item.device_system_category_layer3
? item.device_system_category_layer3
: null,
status: item.status,
symbol:
"image://" +
baseImgUrl +
"/upload/device_icon/" +
item.device_image,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL,
};
res.push(obj);
});
return res;
};
const scatter_cctv_convertData = function (data) {
//CCTV
let res = [];
let temp = data.filter(function (item, index) {
return item.device_system_category_layer3 == "C";
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name,
device_system_category_layer3: item.device_system_category_layer3,
device_ip: item.device_ip,
device_port: item.device_port,
status: item.status,
symbol:
"image://" +
str_location_url +
"/upload/device_icon/" +
item.device_image,
value: item.value,
};
res.push(obj);
});
return res;
};
if (!floChart.getOption()) {
return;
}
var zoom = 0;
if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
zoom = floChart.getOption().geo[0].zoom;
}
if (zoom <= zoomToggle) {
floChart.setOption({
series: [
{
symbolOffset: [0, 0],
data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
},
{
data: [], //正常、關閉(icon)
},
{
symbolOffset: [0, 0],
data: scatter_error_convertData(currentData), //異常(圓點)
},
{
data: [], //異常(icon)
},
{
data: scatter_cctv_convertData(currentData), //CCTV
},
],
});
} else {
floChart.setOption({
series: [
{
symbolOffset: [10, 10],
data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
},
{
data: scatter_icon_convertData(currentData), //正常、關閉(icon)
},
{
symbolOffset: [10, 10],
data: scatter_error_convertData(currentData), //異常(圓點)
},
{
data: scatter_error_icon_convertData(currentData), //異常(icon)
},
{
data: scatter_cctv_convertData(currentData), //CCTV
},
],
});
}
}
function getNextFloor(floGuid = null) {
let url = baseApiUrl + "/api/Device/GetNextFloor";
objSendData.Data = { floor_guid: floGuid, building_tag: pageAct.buiTag };
let result = "";
ytAjax = new YourTeam.Ajax(
url,
objSendData,
function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
result = res.data?.full_name;
}
},
null,
"POST"
).send();
return result;
}
// show 3D 模型
function show3DModel(urn) {
launchViewerForHotspot(urn, (viewer, nodeIds) => {
// 隱藏 toolbar
document.querySelector("#guiviewer3d-toolbar").style.display = "none";
let nextFloor = getNextFloor(pageAct.floGuid);
let curFloTag = pageAct.floTag;
if (!nextFloor) {
toast_warning("超出樓層範圍");
return;
}
if (curFloTag?.startsWith("U")) {
curFloTag = curFloTag.split("U")[1];
}
if (nextFloor?.startsWith("U")) {
nextFloor = nextFloor.split("U")[1];
}
getLevelsData(curFloTag, nextFloor, function () {
viewer.model.search(
"天花板",
(nodeIds) => {
// console.log("2",nodeIds)
viewer.hide(nodeIds);
},
(e) => {
console.log(e);
}
);
});
setHeatMap();
if (
(pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
elevatorShow
) {
2023-05-23 11:40:09 +08:00
let elevOption = {
viewer: viewer,
ordPath: {
area_tag: pageAct.AreaTag,
building_tag: pageAct.buiTag,
},
2023-05-23 11:40:09 +08:00
};
// 電梯移動訂閱程序載入
let forge3DElev = new Forge3DElevFull(elevOption);
forge3DElev.bajaEndCallback = function () {
endPageLoading();
2023-05-23 11:40:09 +08:00
};
forge3DElev.init();
}
});
}
function setHeatMap() {
if (pageAct.sysSubTag !== "M12") {
devices = currentData.map((x) => {
return {
roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
id: x.device_number,
position: isJSON(x.device_coordinate_3d)
? JSON.parse(x.device_coordinate_3d)
: {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
sensorTypes: ["temperature", "humidity"],
};
});
let option = {
devices: devices,
};
heatMap = new ADHeatMaps(option);
heatMap.onComplete = () => {
$.each(currentData, (idx, dev) => {
heatMap.changeTemp(dev.device_number, dev._temp || 0);
});
};
}
if (pageAct.sysSubTag === "M12" && !elevatorShow) {
let sensorObjs = [];
addHotPoint(viewer);
Forge3DSensor.sensorTimes = 0;
sensorObjs = currentData.map((device) => {
Forge3DSensor.sensorTimes++;
return new Forge3DSensor({
viewer: viewer,
ordPath: {
area_tag: pageAct.AreaTag,
building_tag: pageAct.buiTag,
},
selector: "#forgeViewer",
elevCb: elevatorShow
? () => {
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();
}
: null,
curDevice: {
...device,
roomDbId: !isNaN(parseInt(device.room_dbid))
? parseInt(device.room_dbid)
: -1,
id: device.device_number,
position: isJSON(device.device_coordinate_3d)
? JSON.parse(device.device_coordinate_3d)
: {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
temp: 25,
forge_dbid: parseInt(device.forge_dbid),
},
deviceList: currentData.map((d) => ({
...d,
roomDbId: !isNaN(parseInt(d.room_dbid))
? parseInt(d.room_dbid)
: -1,
id: d.device_number,
position: isJSON(d.device_coordinate_3d)
? JSON.parse(d.device_coordinate_3d)
: {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
temp: 25,
forge_dbid: parseInt(d.forge_dbid),
})),
});
});
}
}
function getHotspotPoint(callback = null) {
let url = baseApiUrl + "/api/GetDevForCor";
let sendData = {
device_area_tag: pageAct.AreaTag,
device_building_tag: pageAct.buiTag,
device_system_tag: pageAct.sysMainTag,
device_name_tag: pageAct.sysSubTag,
device_floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(
url,
objSendData,
function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let myDataList = [];
$.each(res.data, (idx, data) => {
if (lightControl == "node" && data.device_nodes.length > 0) {
data.device_nodes.forEach((node) => {
if (
node.device_node_coordinate_3D != null &&
isJSON(node.device_node_coordinate_3D)
) {
myDataList.push({
...node,
position: JSON.parse(node.device_node_coordinate_3D),
});
}
});
} else if (
data.device_coordinate_3d != null &&
isJSON(data.device_coordinate_3d)
) {
myDataList.push({
...data,
position: JSON.parse(data.device_coordinate_3d),
});
}
});
getLightData(myDataList);
setHotspotPoint(myDataList);
callback ? callback() : "";
}
},
null,
"POST"
).send();
}
function setHotspotPoint(myDataList = []) {
getHopspotPoint(myDataList);
}
onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
forgeUnFocusAll();
chartUnFocusAll();
let rect = $("#forgeViewer")[0].getBoundingClientRect();
let position = [rect.left + rect.width / 2, rect.top + rect.height / 4];
// console.log(position)
// let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
let devObj = obj.myData;
let name =
lightControl === "node" && pageAct.sysSubTag === "L1"
? currentData.filter(
(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;
devObj.full_name = name;
parentEle = crePosPopover(position, devObj);
$(parentEle).click();
let option = floChart.getOption();
option.series.forEach(function (series) {
series.data.forEach(function (point) {
if (pageAct.sysSubTag === "L1") {
if (point.device_node_guid == devObj.device_node_guid) {
point.symbolSize = 50;
}
} else {
if (point.device_guid == devObj.device_guid) {
point.symbolSize = 50;
}
}
});
});
floChart.setOption(option);
});
onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
$(parentEle).YTTooltip("hide");
});
function forgeUnFocusAll() {
$.each(currentData, (idx, cData) => {
const eleDbId = cData._dbId;
if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
changeScaleForHotspot(eleDbId, false);
return;
} else {
// 3D 熱點解除
controlFocusHotspot(eleDbId, false);
}
});
}
function chartUnFocusAll() {
let option = floChart.getOption();
option.series.forEach(function (series) {
series.data.forEach(function (point) {
point.symbolSize = 20;
});
});
floChart.setOption(option);
}
// 解除 series 聚焦
function chartUnFocus(ele) {
let devGuid = $(ele).data("id");
let option = floChart.getOption();
option.series.forEach(function (series) {
series.data.forEach(function (point) {
if (point.device_guid == devGuid) {
point.symbolSize = 20;
}
});
});
floChart.setOption(option);
}
</script>