[Frontend] [系統監控] 熱點顯示 popover | [全域功能] YT-Tooltip 根據絕對座標顯示 popover 程序建置 | [儀表板] demo用系統小類Card程序建置
This commit is contained in:
parent
71c2240e68
commit
3f9aca1e4e
@ -264,6 +264,25 @@
|
||||
{ mainSys: "ME", subSys: "M10", iconClass: "fal fa-wind" },
|
||||
{ mainSys: "ME", subSys: "M12", iconClass: "fal fa-snowflake" },
|
||||
{ mainSys: "ELEV", subSys: "EL", iconClass: "fal fa-door-open" },
|
||||
{ mainSys: "FE", subSys: "F1", iconClass: "fal fa-fire-extinguisher" },
|
||||
{ mainSys: "FE", subSys: "F2", iconClass: "fal fa-smog" },
|
||||
{ mainSys: "WP", subSys: "W1", iconClass: "fal fa-stopwatch" },
|
||||
{ mainSys: "S", subSys: "R", iconClass: "fal fa-user-shield" },
|
||||
];
|
||||
|
||||
var tempSysSubText = [
|
||||
{ text: "高壓配電盤" ,mainSys: "EE", subSys: "E1", },
|
||||
{ text: "低壓配電盤" ,mainSys: "EE", subSys: "E2", },
|
||||
{ text: "緊急發電機" ,mainSys: "EE", subSys: "E3", },
|
||||
{ text: "電錶系統" ,mainSys: "EE", subSys: "E4", },
|
||||
{ text: "二線式照明系統" ,mainSys: "LT", subSys: "L1", },
|
||||
{ text: "小型送風機" ,mainSys: "ME", subSys: "M10", },
|
||||
{ text: "環境感測設備" ,mainSys: "ME", subSys: "M12", },
|
||||
{ text: "電梯設備" ,mainSys: "ELEV", subSys: "EL", },
|
||||
{ text: "消防設備" ,mainSys: "FE", subSys: "F1", },
|
||||
{ text: "排煙系統" ,mainSys: "FE", subSys: "F2", },
|
||||
{ text: "電子水錶" ,mainSys: "WP", subSys: "W1", },
|
||||
{ text: "門禁安全系統" ,mainSys: "S", subSys: "R", }
|
||||
];
|
||||
|
||||
$(document).ready(function () {
|
||||
@ -275,6 +294,21 @@
|
||||
timeOutGetData();
|
||||
});
|
||||
|
||||
function demoSubList() {
|
||||
let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]").toArray().map(x => $(x).text());
|
||||
let strHtml = ``;
|
||||
$.each(tempSysSubText, (idx, obj) => {
|
||||
if (isExiNames.indexOf(obj.text) == -1) {
|
||||
let iconObj = sysIconList.filter(x => x.mainSys == obj.mainSys && x.subSys == obj.subSys)[0];
|
||||
strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
|
||||
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"><i class="${iconObj.iconClass || "fal fa-hdd"} fa-2x py-2"></i></button>
|
||||
<button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}">${obj.text}</button>
|
||||
</div>`;
|
||||
}
|
||||
})
|
||||
$("#sysSubBtnList").append(strHtml);
|
||||
}
|
||||
|
||||
//取得 左下方 各系統小類
|
||||
function getSubList() {
|
||||
let url = baseApiUrl + "/api/Device/GetMainSub";
|
||||
@ -301,6 +335,7 @@
|
||||
})
|
||||
})
|
||||
$("#sysSubBtnList").html(strHtml);
|
||||
demoSubList();
|
||||
|
||||
}
|
||||
}, null, "POST").send();
|
||||
|
||||
@ -273,7 +273,19 @@
|
||||
if (!res || res.code != "0000" || !res.data) {
|
||||
|
||||
} else {
|
||||
let myDataList = res.data?.filter(x => x.device_coordinate_3d != null && isJSON(x.device_coordinate_3d)).map(x => { return { position: JSON.parse(x.device_coordinate_3d) } });
|
||||
debugger
|
||||
let myDataList = [];
|
||||
$.each(res.data, (idx, data) => {
|
||||
let item = {};
|
||||
item.position = {};
|
||||
if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) {
|
||||
item.position = JSON.parse(x.device_coordinate_3d);
|
||||
}
|
||||
$.extend(item, data);
|
||||
myDataList.push(item);
|
||||
})
|
||||
|
||||
console.log("1", myDataList)
|
||||
setHotspotPoint(myDataList);
|
||||
callback ? callback() : "";
|
||||
}
|
||||
@ -286,8 +298,16 @@
|
||||
getHopspotPoint(myDataList);
|
||||
}
|
||||
|
||||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
|
||||
console.log(e, obj)
|
||||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj,dbObj) {
|
||||
let position = {};
|
||||
position.tpLeft = obj.target.toolController.lastClickX;
|
||||
position.tpTop = obj.target.toolController.lastClickY;
|
||||
position.tpOffHeight = 24;
|
||||
console.log(position)
|
||||
console.log(obj)
|
||||
console.log(dbObj)
|
||||
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, "[name=forgeViewer]");
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -1978,6 +1978,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
|
||||
<!-- END Messenger -->
|
||||
<!-- BEGIN Page Settings -->
|
||||
<!-- END Page Settings -->
|
||||
@ -2254,6 +2256,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
}
|
||||
})
|
||||
|
||||
onEvent("click", "#testsysbtn", function () {
|
||||
|
||||
})
|
||||
|
||||
$(window).on("timeout:3s", function () {
|
||||
getSystemAlarmByBaja((data) => {
|
||||
if (typeof getAlarmSub != "undefined" && getAlarmSub) {
|
||||
@ -2357,13 +2363,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
}
|
||||
|
||||
// Card 呈現初始化
|
||||
function initPopover(type = null) {
|
||||
$("[name=devItem]").each((index, ele) => {
|
||||
function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
|
||||
$(selector).each((index, ele) => {
|
||||
let devNum = $(ele).data("number"); //設備編號
|
||||
let devGuid = $(ele).data("id"); //guid
|
||||
let devName = $(ele).data("name"); //full_name
|
||||
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>` : "";
|
||||
$(ele).YTTooltip({
|
||||
let option = {
|
||||
html: `<div class="card m-1 border device-wrap">
|
||||
|
||||
<div class="card-header p-3">
|
||||
@ -2405,7 +2411,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
|
||||
typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
$.extend(option, extOption);
|
||||
|
||||
$(ele).YTTooltip(option);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -640,7 +640,7 @@ async function addHotPoint(data) {
|
||||
const dbId = 10 + index;
|
||||
const myPosition = myData.position;
|
||||
const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
|
||||
|
||||
myData._dbId = dbId;
|
||||
viewableData.addViewable(viewable);
|
||||
});
|
||||
|
||||
@ -653,7 +653,8 @@ async function addHotPoint(data) {
|
||||
if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
|
||||
console.log(`Sprite clicked: ${event.dbId}`);
|
||||
openHotspotModal();
|
||||
$(selector).trigger("autodesk:click:sprite", event);
|
||||
let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
|
||||
$(selector).trigger("autodesk:click:sprite", event, myData);
|
||||
}
|
||||
|
||||
if (event.clickInfo != null) {
|
||||
|
||||
@ -31,6 +31,12 @@ $.fn.YTTooltip = function (option) {
|
||||
hideTooltipEvent: hideTooltipEvent,
|
||||
onShow: option.onShow || null,
|
||||
group: option.group || null,
|
||||
targetPosition: {
|
||||
left: option.tpLeft || null,
|
||||
top: option.tpTop || null,
|
||||
offsetWidth: option.tpOffWidth || null,
|
||||
offsetHeight: option.tpOffHeight || null,
|
||||
}
|
||||
};
|
||||
|
||||
if (obj.toggle == "hover") {
|
||||
@ -49,10 +55,21 @@ $.fn.YTTooltip = function (option) {
|
||||
let bodyHeight = $("body")[0].offsetHeight;
|
||||
//計算引用元素 offset
|
||||
let offset = $(this).offset();
|
||||
if (obj.targetPosition.left != null) {
|
||||
offset.left = obj.targetPosition.left;
|
||||
}
|
||||
if (obj.targetPosition.top != null) {
|
||||
offset.top = obj.targetPosition.top;
|
||||
}
|
||||
//引用元素 高寬
|
||||
let width = $(this)[0].offsetWidth;
|
||||
if (obj.targetPosition.offsetWidth != null) {
|
||||
width = obj.targetPosition.offsetWidth;
|
||||
}
|
||||
let height = $(this)[0].offsetHeight;
|
||||
|
||||
if (obj.targetPosition.offsetHeight != null) {
|
||||
height = obj.targetPosition.offsetHeight;
|
||||
}
|
||||
$(this).data("yttooltipid", ranId);
|
||||
$(clone).attr("id", "yt_tooltip_" + ranId);
|
||||
if (obj.group) {
|
||||
@ -85,15 +102,17 @@ $.fn.YTTooltip = function (option) {
|
||||
} else if (obj.direction == "right") {
|
||||
left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left + width + 10;
|
||||
} else if (obj.direction == "bottom") {
|
||||
left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left;
|
||||
top = offset.top + toolHeight + height > bodyHeight ? offset.top + height + 10 : offset.top + height + 10;
|
||||
} else if (obj.direction == "top") {
|
||||
left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left;
|
||||
top = offset.top < toolHeight ? offset.top + height + 5 : offset.top - toolHeight - 10;
|
||||
}
|
||||
|
||||
if (obj.direction == "left" || obj.direction == "right") {
|
||||
$(clone).css({ left: left, top: offset.top });
|
||||
} else if (obj.direction == "top" || obj.direction == "bottom"){
|
||||
$(clone).css({ left: offset.left, top: top});
|
||||
$(clone).css({ left: left, top: top});
|
||||
}
|
||||
setTimeout(function () {
|
||||
obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user