269 lines
11 KiB
HTML
269 lines
11 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>
|
|
|
|
<script>
|
|
var allDevList = []; //全設備清單
|
|
let devicePointList = [];
|
|
|
|
$(function () {
|
|
getBuildMenu((arr,data) => {
|
|
if (arr.indexOf(4) != -1) {
|
|
getFloDevList();
|
|
setLightColor();
|
|
}
|
|
if (arr.indexOf(5) != -1) {
|
|
setHotspotPoint();
|
|
show3DModel(data.urn_3D);
|
|
console.log("start ---------");
|
|
|
|
}
|
|
});
|
|
|
|
|
|
})
|
|
|
|
// 從資料庫取得 drawing type 決定呈現畫面
|
|
function getHtmlByType(type = 4, data = {}) {
|
|
let strHtml = ``;
|
|
switch (type) {
|
|
case 2:
|
|
strHtml = `<div>
|
|
<iframe src="${data.system_url}" width="100%" height="100%"></iframe>
|
|
</div>`;
|
|
break;
|
|
case 4:
|
|
strHtml = `<div class="d-flex mb-4" style="gap:15px">
|
|
<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">正常</label>
|
|
</div>
|
|
<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">關機</label>
|
|
</div>
|
|
<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">異常</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 p-0" id="floDevList">
|
|
|
|
</div>`;
|
|
break;
|
|
case 5:
|
|
strHtml = `<div name="forgeViewer" style="height:85vh;"></div>`;
|
|
break;
|
|
}
|
|
|
|
return strHtml;
|
|
}
|
|
|
|
//baja 訂閱設備
|
|
function subDevice() {
|
|
if (myBaja == null) {
|
|
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) {
|
|
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
|
|
if (!matchDevice) {
|
|
return false;
|
|
}
|
|
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) {
|
|
//顯示正常燈號
|
|
$(`#${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();
|
|
});
|
|
|
|
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
|
endPageLoading();
|
|
});
|
|
}
|
|
}
|
|
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
|
|
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 getFloDevList() {
|
|
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) => {
|
|
console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
|
|
allDevList.push(devObj);
|
|
|
|
strHtml += `<div class="card m-1 border device-wrap">
|
|
<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 + varPathImg + devObj.device_master_icon}" 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="d-none">即時功率：</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>";
|
|
})
|
|
if (!res.data || res.data.length == 0) {
|
|
endPageLoading();
|
|
} else {
|
|
subDevice();
|
|
}
|
|
$("#floDevList").append(strHtml);
|
|
initPopover();
|
|
}
|
|
}, null, "POST").send();
|
|
}
|
|
|
|
// Card 即時狀態
|
|
function drawStateTabBlo() {
|
|
let strHtml = `<div style="height:15rem">
|
|
<iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
|
|
</div>`
|
|
return strHtml;
|
|
}
|
|
|
|
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 = {};
|
|
debugger
|
|
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(4, leftData));
|
|
}
|
|
if (res.data.right_drawing != null) {
|
|
$("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
|
|
} else {
|
|
$("#rightDiv").html(getHtmlByType(4, rightData));
|
|
}
|
|
|
|
callback ? callback([res.data.left_drawing, res.data.right_drawing],res.data) : "";
|
|
}
|
|
}, null, "POST").send();
|
|
}
|
|
|
|
function show3DModel(urn) {
|
|
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
|
|
|
},"[name=forgeViewer]");
|
|
}
|
|
|
|
function getHotspotPoint() {
|
|
let url = baseApiUrl + "/api/GetDevForCor";
|
|
let sendData = {
|
|
"area_tag": pageAct.AreaTag,
|
|
"building_tag": pageAct.buiTag,
|
|
"system_tag": pageAct.sysMainTag,
|
|
"name_tag": pageAct.sysSubTag,
|
|
};
|
|
objSendData.Data = sendData;
|
|
$.post(url, sendData, function (rel) {
|
|
if (rel.code == "9999") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
devicePointList.push(rel.data.device_coordinate_3d);
|
|
}, 'json');
|
|
}
|
|
|
|
function setHotspotPoint() {
|
|
//先假設有抓到點位的座標 之後api改input後再接
|
|
const mydatalist = [{ position: { x: -21.95, y: 8.92, z: 63.27 } },
|
|
{ position: { x: -21.95, y: 7.61, z: 63.27 } },
|
|
{ position: { x: -21.95, y: 6.43, z: 63.27 } },
|
|
{ position: { x: -21.95, y: 5.31, z: 63.27 } }
|
|
];
|
|
getHopspotPoint(mydatalist);
|
|
}
|
|
|
|
|
|
</script> |