[前台] 新增環境感測器頁面
This commit is contained in:
parent
3f718bb228
commit
05cee2fd87
555
Frontend/_sysSensor.html
Normal file
555
Frontend/_sysSensor.html
Normal file
@ -0,0 +1,555 @@
|
||||
<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 subDeviceData = [];
|
||||
var heatMap = null;
|
||||
var buildMenuData = {};
|
||||
var forgeInvType = null;
|
||||
var forgeInvTypeDef = null;
|
||||
|
||||
$(function () {
|
||||
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="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) {
|
||||
|
||||
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
|
||||
if (!matchDevice) {
|
||||
return false;
|
||||
}
|
||||
|
||||
//將訂閱值塞入 subDeviceData
|
||||
if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
|
||||
let obj = {};
|
||||
obj.device_number = matchDevice.device_number;
|
||||
obj.dbid = matchDevice.forge_dbid;
|
||||
subDeviceData.push(obj)
|
||||
}
|
||||
|
||||
let subData = subDeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
|
||||
|
||||
if (subData) {
|
||||
subData[data.point_name] = data.value;
|
||||
}
|
||||
|
||||
let norDevPoiName = matchDevice.device_normal_point_name;
|
||||
let cloDevPoiName = matchDevice.device_close_point_name;
|
||||
let errDevPoiName = matchDevice.device_error_point_name;
|
||||
|
||||
if (data.point_name == "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();
|
||||
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 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;
|
||||
}
|
||||
|
||||
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))) {
|
||||
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 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 ">詳細資料</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 設備
|
||||
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");
|
||||
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");
|
||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||
addHotPoint(viewer)
|
||||
let devDbIds = allDevList.map(x => x.forge_dbid);
|
||||
|
||||
const devices = allDevList.forEach((device) => {
|
||||
const sensorObj = new Forge3DSensor({
|
||||
viewer: viewer,
|
||||
ordPath: {
|
||||
"area_tag": pageAct.AreaTag,
|
||||
"building_tag": pageAct.buiTag,
|
||||
},
|
||||
curDevice: {
|
||||
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)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
|
||||
if (forgeInvType) {
|
||||
setInviForge(forgeInvType, devDbIds);
|
||||
} else {
|
||||
setInviForge(forgeInvTypeDef, devDbIds);
|
||||
}
|
||||
|
||||
$(loadEle).Loading("close");
|
||||
|
||||
|
||||
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]");
|
||||
}
|
||||
|
||||
|
||||
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 = []) {
|
||||
console.log(myDataList)
|
||||
getHopspotPoint(myDataList);
|
||||
}
|
||||
|
||||
function setLightPoint(myDataList = []) {
|
||||
console.log(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) {
|
||||
console.log("devDbIds",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 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>
|
||||
@ -198,7 +198,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
<div class="dropdown">
|
||||
<a href="javascript:;" id="toggleNoticeBtn" class="d-flex align-items-center justify-content-center ml-2">
|
||||
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
||||
alt="Dr. Codex Lantern">-->
|
||||
alt="Dr. Codex Lantern">-->
|
||||
<!--you can also add username next to the avatar with the codes below:-->
|
||||
<div class="row m-0 justify-content-center userblock">
|
||||
<i id="noticeConIcon" class=" fs-1-5 w-100 text-center"></i>
|
||||
@ -212,7 +212,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
<div class="dropdown">
|
||||
<a href="#" data-toggle="dropdown" data-target="logoutList" class="d-flex align-items-center justify-content-center ml-2">
|
||||
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
||||
alt="Dr. Codex Lantern">-->
|
||||
alt="Dr. Codex Lantern">-->
|
||||
<!--you can also add username next to the avatar with the codes below:-->
|
||||
<div class="row m-0 justify-content-center userblock">
|
||||
<i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
|
||||
@ -733,7 +733,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
</script>
|
||||
<script src="js/n4js/bajatest.js"></script>
|
||||
<script src="js/n4js/electricmeterbaja.js"></script>
|
||||
<script src="js/n4js/elevatorbaja.js"></script>
|
||||
<script src="js/n4js/elevatorbaja.js"></script>
|
||||
<script src="js/bajascript/require.config.js"></script>
|
||||
<script src="js/FileSaver.js"></script>
|
||||
|
||||
@ -870,7 +870,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
if (isJSON(sessionStorage.getItem("pageAct"))) {
|
||||
lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
|
||||
}
|
||||
if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator") {
|
||||
if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator" || lastPage == "sysSensor") {
|
||||
$(`#subSysBtn${lastPageAct.sysSubTag}`).click();
|
||||
$("#sysMonTopBtn").YTTab("set");
|
||||
} else {
|
||||
@ -946,7 +946,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
if (!page) {
|
||||
return;
|
||||
}
|
||||
if (page != "systemMonitor" && page != "sysElevator") {
|
||||
if (page != "systemMonitor" && page != "sysElevator" && page != "sysSenesor") {
|
||||
$("#sysMonBtnList [name=topFunBtn]").removeClass("active");
|
||||
pageAct.sysMainTag = null;
|
||||
pageAct.sysSubTag = null;
|
||||
@ -1022,7 +1022,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
onEvent("click", "button[id^=noticeChkBtn]", function () { /**button[id^=bajaAckBtn] */
|
||||
let uuid = $(this).data("uuid");
|
||||
let url = window.location.origin + "/obix/alarm/"+uuid+"/ack";
|
||||
let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
|
||||
let myBaja = new MyBaja();
|
||||
myBaja.setMyUserAccount((data) => {
|
||||
let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
|
||||
@ -1130,7 +1130,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
function drawErrRecTabBlo() {
|
||||
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`
|
||||
</table>`
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
@ -1138,7 +1138,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
function drawOpeRecTabBlo() {
|
||||
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`
|
||||
</table>`
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
@ -1155,35 +1155,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
|
||||
let option = {
|
||||
html: `<div class="card m-1 border device-wrap" data-number="${devNum}">
|
||||
<div class="card-header p-3">
|
||||
<div class="card-header p-3">
|
||||
|
||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||||
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
|
||||
${lightHtml}
|
||||
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
|
||||
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
|
||||
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
|
||||
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||||
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
|
||||
${lightHtml}
|
||||
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
|
||||
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
|
||||
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
|
||||
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2 tab-content">
|
||||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
|
||||
${drawStateTabBlo(devNum)}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
<div class="card-body p-2 tab-content">
|
||||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
|
||||
${drawStateTabBlo(devNum)}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
|
||||
</div>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
</div>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
</div>`,
|
||||
group: "device",
|
||||
// 在 _sysElevator.html 及 _sysMonAll.html 會用到
|
||||
onShow: function (tooltipEle, oriEle) {
|
||||
@ -1567,35 +1567,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
} else {
|
||||
let strHtml = `<div class="btn-group mx-4">
|
||||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
|
||||
<i class="fal fa-home fa-2x"></i><br>首頁
|
||||
</a>
|
||||
<!--<div class="dropdown-menu">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>-->
|
||||
</div>`;
|
||||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
|
||||
<i class="fal fa-home fa-2x"></i><br>首頁
|
||||
</a>
|
||||
<!--<div class="dropdown-menu">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>-->
|
||||
</div>`;
|
||||
|
||||
$.each(res.data, function (i, v) {
|
||||
if (v.authCode == 'PF1') {
|
||||
strHtml += `<div class="btn-group mx-4" >
|
||||
<a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
<a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
|
||||
</div>`;
|
||||
</div>`;
|
||||
|
||||
hasMonitor = true;
|
||||
}
|
||||
else {
|
||||
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
|
||||
strHtml += `<div class="btn-group mx-4">
|
||||
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||||
data-page="${v.showView}">
|
||||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
</div>`;
|
||||
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||||
data-page="${v.showView}">
|
||||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
});
|
||||
@ -1626,6 +1626,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
if (subSysObj.sub_system_tag == "EL") {
|
||||
page = "sysElevator";
|
||||
}
|
||||
console.log(subSysObj.sub_system_tag)
|
||||
if (subSysObj.sub_system_tag == "M12") {
|
||||
page = "sysSensor";
|
||||
}
|
||||
|
||||
let li = creEle("li");
|
||||
let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn");
|
||||
@ -1671,7 +1675,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
|
||||
}
|
||||
}, null, "POST",true).send();
|
||||
}, null, "POST", true).send();
|
||||
}
|
||||
|
||||
function getAlarm() {
|
||||
@ -1696,7 +1700,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name;
|
||||
|
||||
let div1 = creDiv(["col-12"]);
|
||||
let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], {uuid:data.uuid});
|
||||
let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], { uuid: data.uuid });
|
||||
let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
|
||||
btnDiv.append(button);
|
||||
// 繪製 每行告警資訊
|
||||
|
||||
@ -301,8 +301,9 @@ body:not(.mod-skin-light):not(.mod-skin-dark) #skin-default:before {
|
||||
color: #bdbdbd; }
|
||||
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.card-title):not([class*="fc-"]):not([class*="text-"]):not(.btn-search-close),
|
||||
.mod-skin-dark:not(.mod-skin-light) .modal-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title) {
|
||||
color: #ffffff;
|
||||
/*color: var(--theme-primary-200);*/ }
|
||||
/*color: #ffffff;*/
|
||||
color: var(--theme-primary-200);
|
||||
}
|
||||
.mod-skin-dark:not(.mod-skin-light) .text-success {
|
||||
color: var(--theme-success-300) !important; }
|
||||
.mod-skin-dark:not(.mod-skin-light) .text-danger {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user