550 lines
22 KiB
HTML
550 lines
22 KiB
HTML
<style>
|
||
</style>
|
||
|
||
<div class="row">
|
||
<div id="leftDiv" class="col-sm-12 col-xl-6">
|
||
|
||
</div>
|
||
<div id="rightDiv" class="col-sm-12 col-xl-6">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal center Add -->
|
||
<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||
<div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">
|
||
燈控排程
|
||
</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true"><i class="fal fa-times"></i></span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||
</table>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
|
||
<button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var allDevList = []; //全設備清單
|
||
var subDeviceData = [];
|
||
var heatMap = null;
|
||
var buildMenuData = {};
|
||
|
||
$(function () {
|
||
getBuildMenu((arr, data) => {
|
||
buildMenuData = data;
|
||
if (arr.indexOf(4) != -1) {
|
||
getFloDevList(arr[0] == 4 ? "left" :"right");
|
||
setLightColor();
|
||
}
|
||
if (arr.indexOf(3) != -1) {
|
||
getLightPoint();
|
||
getHotspotPoint(() => {
|
||
show3DModel(data.urn_3D);
|
||
});
|
||
}
|
||
});
|
||
})
|
||
|
||
// 依據 drawing type 決定呈現畫面
|
||
function getHtmlByType(type = 0, data = {}) {
|
||
let strHtml = ``;
|
||
switch (type) {
|
||
case 2:
|
||
strHtml = `<div style="height:85vh">
|
||
<iframe src="${data.system_url}" width="100%" height="100%"></iframe>
|
||
</div>`;
|
||
break;
|
||
case 4:
|
||
strHtml = `<div class="d-flex mb-4" style="gap:15px">
|
||
${setTopLight()}
|
||
</div>
|
||
|
||
<div class="col-12 p-0" id="floDevList">
|
||
|
||
</div>`;
|
||
break;
|
||
case 3:
|
||
strHtml = `<div class="d-flex mb-4" style="gap:15px">
|
||
${setTopHeatBar()}
|
||
</div>
|
||
<div name="forgeViewer" style="height:85vh;"></div>`;
|
||
break;
|
||
}
|
||
|
||
return strHtml;
|
||
}
|
||
//baja 訂閱設備
|
||
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);
|
||
myBaja.setSubscribeDevicesCallBack(function (data) {
|
||
console.log(data)
|
||
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
|
||
if (!matchDevice) {
|
||
return false;
|
||
}
|
||
console.log(data)
|
||
//將訂閱值塞入 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 == "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");
|
||
}
|
||
|
||
setLightColor();
|
||
setForgeHotSpotColor(matchDevice);
|
||
lightDevForgeSpotLig(matchDevice)
|
||
// 從設備訂閱更新每個設備卡片即時點位
|
||
setDevItemPoiValBySub(data);
|
||
});
|
||
|
||
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||
endPageLoading();
|
||
});
|
||
|
||
}
|
||
|
||
function lightDevForgeSpotLig(devObj) {
|
||
|
||
|
||
}
|
||
|
||
// 從設備訂閱更新每個設備卡片即時點位
|
||
function setDevItemPoiValBySub(data) {
|
||
|
||
let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
|
||
if (pointSpan && pointSpan.data("point") == data.point_name) {
|
||
console.log(data)
|
||
pointSpan.text(data.value);
|
||
}
|
||
}
|
||
|
||
function setLightColor() {
|
||
$("[data-light-type]").each((index, ele) => {
|
||
let type = $(ele).data("light-type");
|
||
let isFlashing = false;
|
||
let color = "#000";
|
||
switch (type) {
|
||
case "normal":
|
||
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
|
||
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
|
||
break;
|
||
case "close":
|
||
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
|
||
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;
|
||
}
|
||
$(ele).css("background-color", color);
|
||
//是否閃爍
|
||
if (isFlashing) {
|
||
$(ele).parents(".card.device-wrap").addClass("light-flash");
|
||
}
|
||
})
|
||
}
|
||
|
||
// 設置昇位圖上方 燈號
|
||
function setTopLight() {
|
||
let sysSubObj = pageAct.sysSubObj;
|
||
let strHtml = ``;
|
||
if (sysSubObj.device_normal_point_name != null && sysSubObj.device_normal_point_value != null) {
|
||
strHtml += ` <div class="row m-0 align-items-center">
|
||
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
|
||
<label class="mb-0">${sysSubObj.device_normal_text}</label>
|
||
</div>`;
|
||
}
|
||
if (sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_value != null) {
|
||
strHtml += ` <div class="row m-0 align-items-center">
|
||
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
|
||
<label class="mb-0">${sysSubObj.device_close_text}</label>
|
||
</div>`;
|
||
}
|
||
if (sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_value != null) {
|
||
strHtml += ` <div class="row m-0 align-items-center">
|
||
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
|
||
<label class="mb-0">${sysSubObj.device_error_text}</label>
|
||
</div>`;
|
||
}
|
||
|
||
return strHtml;
|
||
}
|
||
|
||
// 設置 Forge 3D 溫度條
|
||
function setTopHeatBar() {
|
||
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
|
||
return strHtml;
|
||
}
|
||
|
||
// forge 3D 異常點位變紅色
|
||
function setForgeHotSpotColor(device) {
|
||
let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
|
||
if (subData && subData[device.device_error_point_name] == device.device_error_point_value && !isNaN(parseInt(device.spriteDbid))) {
|
||
changeColorForHotspot(parseInt(device.spriteDbid), "error");
|
||
}
|
||
}
|
||
|
||
// 取得昇位圖點位 (deviceItem)
|
||
function getRiserPoiObj() {
|
||
let tarDevItem = pageAct.devItems?.filter(x => x.is_show_riserDiagram == 1);
|
||
if (tarDevItem && tarDevItem[0]) {
|
||
return tarDevItem[0];
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// 取得設備列表 並繪製卡片
|
||
function getFloDevList(position = "left") {
|
||
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 {
|
||
let strHtml = ``;
|
||
$.each(res.data, (index, floObj) => {
|
||
strHtml += `<div class='d-flex justify-content-start mb-5 ' style="">`
|
||
strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`
|
||
strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
|
||
$.each(floObj.device_list, (index2, devObj) => {
|
||
allDevList.push(devObj);
|
||
let devItem = getRiserPoiObj();
|
||
strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}" data-position="${position}">
|
||
<div class="card-body p-2">
|
||
<div class="d-flex mb-2">
|
||
<div class="mr-5 cur-poi">
|
||
<span class="d-inline-block mr-3">
|
||
<img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
|
||
</span>
|
||
<a href="javascript:;">${devObj.full_name}</a>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex mb-0 mt-2 align-items-center">
|
||
<span id="${devObj.device_number}_status" class="circle-light"></span>
|
||
<span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</span>
|
||
<a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
})
|
||
strHtml += "</div></div>";
|
||
})
|
||
// Niagara 產生 file 開頭字串問題
|
||
strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
|
||
if (!res.data || res.data.length == 0) {
|
||
endPageLoading();
|
||
} else {
|
||
subDevice();
|
||
}
|
||
$("#floDevList").append(strHtml);
|
||
initPopover();
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
function getBuildMenu(callback = null) {
|
||
let url = baseApiUrl + "/api/Device/GetBuildMenu";
|
||
let sendData = {
|
||
main_system_tag: pageAct.sysMainTag,
|
||
sub_system_tag: pageAct.sysSubTag,
|
||
building_tag: pageAct.buiTag,
|
||
};
|
||
objSendData.Data = sendData;
|
||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
let leftData = {}, rightData = {};
|
||
|
||
for (var key in res.data) {
|
||
if (key.startsWith("left")) {
|
||
leftData[key.split("left_")[1]] = res.data[key];
|
||
} else if (key.startsWith("right")) {
|
||
rightData[key.split("right_")[1]] = res.data[key];
|
||
}
|
||
}
|
||
|
||
if (res.data.left_drawing != null) {
|
||
$("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
|
||
} else {
|
||
$("#leftDiv").html(getHtmlByType(0, leftData));
|
||
}
|
||
if (res.data.right_drawing != null) {
|
||
$("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
|
||
} else {
|
||
$("#rightDiv").html(getHtmlByType(0, rightData));
|
||
}
|
||
|
||
callback ? callback([res.data.left_drawing, res.data.right_drawing], res.data) : "";
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
// Card 即時狀態
|
||
function drawStateTabBlo(devNum) {
|
||
let devPath = devNum.replaceAll("_", "/");
|
||
let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position");
|
||
let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
|
||
let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
|
||
let strHtml = `<div style="height:100%;width:100%">
|
||
<iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};min-height:100px;"></iframe>
|
||
</div>`
|
||
return strHtml;
|
||
}
|
||
|
||
function iframeResize(obj) {
|
||
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
|
||
}
|
||
|
||
function show3DModel(urn) {
|
||
$(loadEle).Loading("start");
|
||
//getLightData(allDevList);
|
||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||
showHeat("[name=forgeHeatBar]");
|
||
let devDbIds = allDevList.map(x => x.forge_dbid);
|
||
/*hideAllObjects(devDbIds);*/
|
||
|
||
setTransparentBuilding(0, devDbIds);
|
||
$(loadEle).Loading("close");
|
||
|
||
let devices = allDevList.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(allDevList, (idx, dev) => {
|
||
heatMap.changeTemp(dev.device_number, dev._temp || 0);
|
||
})
|
||
}
|
||
|
||
let elevOption = {
|
||
selector: "[name=forgeViewer]",
|
||
viewer: viewer,
|
||
ordPath: {
|
||
"area_tag": pageAct.AreaTag,
|
||
"building_tag": pageAct.buiTag,
|
||
},
|
||
}
|
||
|
||
// 電梯移動訂閱程序載入
|
||
let forge3DElev = new Forge3DElevFull(elevOption);
|
||
forge3DElev.bajaEndCallback = function () {
|
||
endPageLoading();
|
||
}
|
||
forge3DElev.init();
|
||
|
||
|
||
if (subDeviceData.length != 0) {
|
||
let stSubArr = subDeviceData.map(x => Object.keys(x).filter(y => y == "ST").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);
|
||
}
|
||
}
|
||
}
|
||
|
||
getWaterNodeId();
|
||
}, () => {
|
||
$(loadEle).Loading("close");
|
||
}, "[name=forgeViewer]");
|
||
}
|
||
|
||
// 供水系統 - 取得欲染色 dbid
|
||
function getWaterNodeId() {
|
||
let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
|
||
let sendData = { forgeNodeKey: "water_wupply" };
|
||
objSendData.Data = sendData;
|
||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
if (!isNaN(parseInt(res.data[0]?.system_value))) {
|
||
changeColor(parseInt(res.data[0]?.system_value))
|
||
}
|
||
console.log(res.data)
|
||
}
|
||
}, null, "POST").send();
|
||
|
||
}
|
||
|
||
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,
|
||
};
|
||
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) => {
|
||
let item = {};
|
||
item.position = {};
|
||
if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
|
||
item.position = JSON.parse(data.device_coordinate_3d);
|
||
}
|
||
$.extend(item, data);
|
||
myDataList.push(item);
|
||
})
|
||
|
||
console.log("1", myDataList)
|
||
setHotspotPoint(myDataList);
|
||
callback ? callback() : "";
|
||
}
|
||
}, null, "POST").send();
|
||
|
||
}
|
||
|
||
async function getLightPoint(callback = null) {
|
||
let url = baseApiUrl + "/api/GetDevNodeForCor";
|
||
let sendData = {
|
||
"device_area_tag": pageAct.AreaTag,
|
||
"device_building_tag": pageAct.buiTag,
|
||
"device_system_tag": pageAct.sysMainTag,
|
||
"device_name_tag": pageAct.sysSubTag,
|
||
};
|
||
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) => {
|
||
let item = {};
|
||
item.position = {};
|
||
if (data.device_node_coordinate_3d != null && isJSON(data.device_node_coordinate_3d)) {
|
||
item.position = JSON.parse(data.device_node_coordinate_3d);
|
||
}
|
||
$.extend(item, data);
|
||
myDataList.push(item);
|
||
})
|
||
|
||
console.log("2", myDataList)
|
||
setLightPoint(myDataList);
|
||
callback ? callback() : "";
|
||
}
|
||
}, null, "POST").send();
|
||
|
||
}
|
||
|
||
function setHotspotPoint(myDataList = []) {
|
||
console.log(myDataList)
|
||
getHopspotPoint(myDataList);
|
||
}
|
||
|
||
async function setLightPoint(myDataList = []) {
|
||
console.log(myDataList)
|
||
getLightData(myDataList);
|
||
}
|
||
|
||
var parentEle = "";
|
||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
|
||
forgeUnFocusAll();
|
||
let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
|
||
let devObj = obj.myData;
|
||
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
|
||
devObj.full_name = name;
|
||
parentEle = crePosPopover(position, devObj);
|
||
|
||
$(parentEle).click();
|
||
})
|
||
|
||
onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
|
||
$(parentEle).YTTooltip("hide");
|
||
})
|
||
|
||
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
|
||
|
||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||
let devNum = $(ele).data("number");
|
||
let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
|
||
allDevList.forEach((dev, idx) => {
|
||
if (dev.device_number == devNum) {
|
||
dev.spriteDbid = dbid;
|
||
setForgeHotSpotColor(dev);
|
||
}
|
||
})
|
||
$(ele).data("dbId", dbid);
|
||
|
||
})
|
||
})
|
||
|
||
onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
|
||
forgeUnFocusAll();
|
||
})
|
||
|
||
function forgeUnFocusAll() {
|
||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||
controlFocusHotspot($(ele).data("dbId"), false);
|
||
})
|
||
}
|
||
</script> |