992 lines
38 KiB
HTML
992 lines
38 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 id="lightSchBlock" style="height: 60vh"></div>
|
||
</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 alarmDbIdList = []; // 紀錄異常 forge 圓點，避免點擊與異常顏色衝突
|
||
var subDeviceData = [];
|
||
var heatMap = null;
|
||
var buildMenuData = {};
|
||
var forgeInvType = null;
|
||
var forgeInvTypeDef = null;
|
||
|
||
$(function () {
|
||
$(loadEle).Loading("start");
|
||
getBuildMenu((arr, data) => {
|
||
buildMenuData = data;
|
||
if (arr.indexOf(4) != -1) {
|
||
getFloDevList(arr[0] == 4 ? "left" : "right");
|
||
setLightColor();
|
||
}
|
||
if (arr.indexOf(3) != -1) {
|
||
getHotspotPoint(() => {
|
||
show3DModel(data.urn_3D);
|
||
getInviForge();
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 依據 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="position: relative; gap:15px">
|
||
<div name="forgeViewer" style="position: absolute;width: 100%;height:85vh;">
|
||
${setTopHeatBar()}
|
||
</div>
|
||
</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);
|
||
|
||
// 燈熱點用
|
||
let lightOnHotColorArr = [];
|
||
let lightOffHotColorArr = [];
|
||
// 燈光圈用
|
||
let deviceNormalArr = [];
|
||
let deviceCloseArr = [];
|
||
|
||
myBaja.setSubscribeDevicesCallBack(function (data) {
|
||
console.log("subDevice 開始");
|
||
let matchDevice = allDevList.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 subData = subDeviceData.filter(
|
||
(x) => x.device_number == matchDevice.device_number
|
||
)[0];
|
||
|
||
if (subData) {
|
||
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);
|
||
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
|
||
);
|
||
} 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
|
||
);
|
||
}
|
||
}
|
||
|
||
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 &&
|
||
!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 &&
|
||
!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
|
||
) {
|
||
$(`#${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 ===
|
||
deviceNormalArr.length + deviceCloseArr.length) ||
|
||
allDevList.length === deviceNormalArr.length + alarmDbIdList.length
|
||
) {
|
||
changeColorForHotspot(
|
||
deviceNormalArr.map(({ spriteDbid }) => spriteDbid),
|
||
null,
|
||
true
|
||
);
|
||
changeColorForHotspot(
|
||
deviceCloseArr.map(({ spriteDbid }) => spriteDbid),
|
||
null,
|
||
false
|
||
);
|
||
}
|
||
changeColorForHotspot(
|
||
alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
|
||
"error",
|
||
false
|
||
);
|
||
$(loadEle).Loading("close");
|
||
|
||
setLightColor();
|
||
lightDevForgeSpotLig(matchDevice);
|
||
// 從設備訂閱更新每個設備卡片即時點位
|
||
setDevItemPoiValBySub(data);
|
||
});
|
||
|
||
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||
endPageLoading();
|
||
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]");
|
||
}
|
||
});
|
||
}
|
||
|
||
// heatMap?.changeTemp(matchDevice.device_number, 0);
|
||
// }
|
||
// }
|
||
|
||
// if (data.point_name == "Temp") {
|
||
// heatMap?.changeTemp(
|
||
// data.device_number_full,
|
||
// !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
|
||
// );
|
||
// let devIdx = allDevList.findIndex(
|
||
// (x) => x.device_number == data.device_number_full
|
||
// );
|
||
// allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
|
||
// ? parseInt(data.value)
|
||
// : 0;
|
||
// }
|
||
// if (
|
||
// data.point_name == norDevPoiName &&
|
||
// data.value == matchDevice.device_normal_point_value
|
||
// ) {
|
||
// //顯示正常燈號
|
||
// $(`#${matchDevice.device_number}_status`)
|
||
// .attr("data-light-type", "normal")
|
||
// .data("light-type", "normal");
|
||
// } else if (
|
||
// data.point_name == cloDevPoiName &&
|
||
// data.value == matchDevice.device_close_point_value
|
||
// ) {
|
||
// $(`#${matchDevice.device_number}_status`)
|
||
// .attr("data-light-type", "close")
|
||
// .data("light-type", "close");
|
||
// } else if (
|
||
// data.point_name == errDevPoiName &&
|
||
// data.value == matchDevice.device_error_point_value
|
||
// ) {
|
||
// $(`#${matchDevice.device_number}_status`)
|
||
// .attr("data-light-type", "error")
|
||
// .data("light-type", "error");
|
||
// }
|
||
// if (
|
||
// allDevList.length ===
|
||
// lightOnHotColorArr.length + lightOffHotColorArr.length
|
||
// ) {
|
||
// changeColorForHotspot(
|
||
// lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
|
||
// null,
|
||
// true
|
||
// );
|
||
// changeColorForHotspot(
|
||
// lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
|
||
// null,
|
||
// false
|
||
// );
|
||
|
||
// }
|
||
// $(loadEle).Loading("close");
|
||
|
||
// setLightColor();
|
||
// setForgeHotSpotColor(matchDevice);
|
||
// lightDevForgeSpotLig(matchDevice);
|
||
// // 從設備訂閱更新每個設備卡片即時點位
|
||
// setDevItemPoiValBySub(data);
|
||
// });
|
||
|
||
// myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||
// endPageLoading();
|
||
// if (data.findIndex((x) => x.point_name == "Temp") != -1) {
|
||
// // 顯示溫度條
|
||
// showHeat("[name=forgeHeatBar]");
|
||
// }
|
||
// });
|
||
// }
|
||
|
||
function lightDevForgeSpotLig(devObj) { }
|
||
|
||
// 從設備訂閱更新每個設備卡片即時點位
|
||
function 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");
|
||
} else {
|
||
$(ele).parents(".card.device-wrap").removeClass("light-flash");
|
||
}
|
||
});
|
||
} */
|
||
|
||
function setLightSchBlcok(obj) {
|
||
let devNum = $(obj).parents(".device-wrap").data("number");
|
||
let devPath = devNum.replaceAll("_", "/");
|
||
let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`;
|
||
$("#lightSchBlock").html(iframe);
|
||
}
|
||
|
||
// 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)) || !isNaN(parseInt(device._dbId)))
|
||
) {
|
||
const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
|
||
alarmDbIdList = [...alarmDbIdList, _dbId];
|
||
// console.log("異常", _dbId)
|
||
changeColorForHotspot(_dbId, "error");
|
||
} else if (
|
||
subData &&
|
||
subData[device.device_error_point_name] !==
|
||
device.device_error_point_value &&
|
||
(!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
|
||
) {
|
||
const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
|
||
let index = alarmDbIdList.findIndex((dbId) => dbId == _dbId);
|
||
index !== -1 && alarmDbIdList.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
// 取得昇位圖點位 (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'>`;
|
||
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 name="devItemName" data-number="${devObj.device_number
|
||
}" 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 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
});
|
||
strHtml += "</div></div>";
|
||
});
|
||
// Niagara 產生 file 開頭字串問題
|
||
strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
|
||
|
||
if (!res.data || res.data.length == 0) {
|
||
endPageLoading();
|
||
} else {
|
||
// 訂閱 baja 設備
|
||
// if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
|
||
// subDevice();
|
||
// }
|
||
}
|
||
|
||
// 繪製 html
|
||
$("#floDevList").append(strHtml);
|
||
|
||
// 存入 device 基本資料至元素 data 屬性
|
||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||
if (
|
||
allDevList.findIndex(
|
||
(x) => x.device_number == $(ele).data("number")
|
||
) != -1
|
||
) {
|
||
$(ele).data(
|
||
"devobj",
|
||
allDevList.filter(
|
||
(x) => x.device_number == $(ele).data("number")
|
||
)[0]
|
||
);
|
||
}
|
||
});
|
||
|
||
// 初始化 pop 視窗
|
||
initPopover();
|
||
// 卡片設備名稱點擊事件
|
||
devItemNameEvent();
|
||
}
|
||
},
|
||
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") || "left";
|
||
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;
|
||
if (pageAct.sysSubTag == "C") {
|
||
strHtml = `<div style="width:${width};height:${height};">
|
||
<iframe src="./px/CCTV/TEST_RENDER.mp4" style="width:${width};height:${height};"></iframe>
|
||
</div>`;
|
||
} else {
|
||
strHtml = `<div style="width:${width};height:${height};">
|
||
<iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
|
||
</div>`;
|
||
}
|
||
|
||
return strHtml;
|
||
}
|
||
|
||
function iframeResize(obj) {
|
||
obj.style.height =
|
||
obj.contentWindow.document.documentElement.scrollHeight + "px";
|
||
}
|
||
|
||
function show3DModel(urn) {
|
||
launchViewerForHotspot(
|
||
urn,
|
||
(viewer, nodeIds) => {
|
||
// 隱藏 toolbar
|
||
document.querySelector("#guiviewer3d-toolbar").style.display = "none";
|
||
let devDbIds = allDevList.map((x) => x.forge_dbid);
|
||
// 大類
|
||
let subDevDbId = [];
|
||
allDevList.forEach(({ device_nodes }) => {
|
||
subDevDbId = [
|
||
...subDevDbId,
|
||
...device_nodes.map((n) => n.forge_dbid),
|
||
];
|
||
});
|
||
// console.log(devDbIds, subDevDbId)
|
||
// 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
|
||
if (forgeInvType) {
|
||
setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
|
||
} else {
|
||
setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
|
||
}
|
||
|
||
let sensorObjs = [];
|
||
let devices = [];
|
||
if (pageAct.sysSubTag === "M12") {
|
||
addHotPoint(viewer);
|
||
Forge3DSensor.sensorTimes = 0;
|
||
allDevList.forEach((device) => {
|
||
Forge3DSensor.sensorTimes++;
|
||
const sensorObj = new Forge3DSensor({
|
||
viewer: viewer,
|
||
ordPath: {
|
||
area_tag: pageAct.AreaTag,
|
||
building_tag: pageAct.buiTag,
|
||
},
|
||
selector: "[name=forgeViewer]",
|
||
elevCb: elevatorShow
|
||
? () => {
|
||
let elevOption = {
|
||
selector: "[name=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: allDevList.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),
|
||
})),
|
||
});
|
||
sensorObjs.push(sensorObj);
|
||
});
|
||
} else {
|
||
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"],
|
||
temp: 30,
|
||
forgeDbId: parseInt(x.forge_dbid),
|
||
};
|
||
});
|
||
|
||
if (
|
||
(pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
|
||
elevatorShow
|
||
) {
|
||
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();
|
||
}
|
||
}
|
||
|
||
let option = {
|
||
devices: devices,
|
||
};
|
||
|
||
if (pageAct.sysSubTag !== "M12") {
|
||
// console.log(pageAct.sysSubTag, option)
|
||
heatMap = new ADHeatMaps(option);
|
||
heatMap.onComplete = () => {
|
||
$.each(allDevList, (idx, dev) => {
|
||
heatMap.changeTemp(dev.device_number, dev._temp || 0);
|
||
});
|
||
subDevice();
|
||
};
|
||
}
|
||
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);
|
||
// }
|
||
// }
|
||
}
|
||
if (pageAct.sysSubTag == "W2") {
|
||
// console.log("@@",pageAct, pageAct.sub_system_tag)
|
||
getWaterNodeId(viewer);
|
||
} else if (pageAct.sysSubTag == "E1") {
|
||
getE1NodeId(viewer);
|
||
}
|
||
},
|
||
() => { },
|
||
"[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();
|
||
// console.log("1",viewer.model)
|
||
viewer.model.search(
|
||
"給水",
|
||
(nodeIds) => {
|
||
// console.log("2",nodeIds)
|
||
viewer.show(nodeIds);
|
||
},
|
||
(e) => {
|
||
console.log(e);
|
||
}
|
||
);
|
||
}
|
||
|
||
// 高壓配電盤染色
|
||
function getE1NodeId() {
|
||
viewer.model.search(
|
||
"高壓電力",
|
||
(nodeIds) => {
|
||
viewer.show(nodeIds);
|
||
},
|
||
(e) => {
|
||
console.log(e);
|
||
}
|
||
);
|
||
}
|
||
|
||
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);
|
||
});
|
||
setHotspotPoint(myDataList);
|
||
if (pageAct.sysMainTag == "LT") {
|
||
setLightPoint(myDataList);
|
||
}
|
||
callback ? callback() : "";
|
||
}
|
||
},
|
||
null,
|
||
"POST"
|
||
).send();
|
||
}
|
||
|
||
function setHotspotPoint(myDataList = []) {
|
||
getHopspotPoint(myDataList);
|
||
}
|
||
|
||
function setLightPoint(myDataList = []) {
|
||
getLightData(myDataList);
|
||
}
|
||
|
||
// 取得 不可視 3D 模型類型
|
||
function getInviForge() {
|
||
let url = baseApiUrl + "/api/Device/GetForgeInvType";
|
||
|
||
ytAjax = new YourTeam.Ajax(
|
||
url,
|
||
null,
|
||
function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
} else {
|
||
let datas = res.data;
|
||
|
||
forgeInvType = datas.filter(
|
||
(x) => x.sub_system_tag == pageAct.sysSubTag
|
||
)[0]?.invisible_value;
|
||
forgeInvTypeDef = datas.filter(
|
||
(x) => x.invisible_type == "default_value"
|
||
)[0]?.invisible_value;
|
||
}
|
||
},
|
||
null,
|
||
"POST"
|
||
).send();
|
||
}
|
||
|
||
// 設置 模型隱藏或透明
|
||
function setInviForge(type, devDbIds) {
|
||
if (type == "Hide") {
|
||
hideAllObjects(devDbIds);
|
||
} else if (type == "Opacity") {
|
||
setTransparentBuilding(0, devDbIds);
|
||
}
|
||
}
|
||
|
||
var parentEle = "";
|
||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
|
||
forgeUnFocusAll();
|
||
let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
|
||
let position = [rect.left + rect.width / 2, rect.top + rect.height / 3];
|
||
// let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
|
||
let devObj = obj.myData;
|
||
let name =
|
||
allDevList.filter((x) => x.device_guid == devObj.device_guid)[0]
|
||
?.full_name || devObj.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);
|
||
});
|
||
if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
|
||
subDevice();
|
||
}
|
||
});
|
||
|
||
onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
|
||
forgeUnFocusAll();
|
||
});
|
||
|
||
function forgeUnFocusAll() {
|
||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||
const eleDbId = $(ele).data("dbId");
|
||
if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
|
||
changeScaleForHotspot(eleDbId, false);
|
||
return;
|
||
} else {
|
||
// 3D 熱點解除
|
||
controlFocusHotspot(eleDbId, false);
|
||
}
|
||
});
|
||
}
|
||
</script>
|