[Frontend] [系統監控] 熱點顯示 popover | [全域功能] YT-Tooltip 根據絕對座標顯示 popover 程序建置 | [儀表板] demo用系統小類Card程序建置
This commit is contained in:
parent
71c2240e68
commit
3f9aca1e4e
@ -2,9 +2,9 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-xl-4 poisition-relative">
|
||||
<!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->
|
||||
|
||||
<div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
|
||||
|
||||
|
||||
<div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-4">
|
||||
<div class="row">
|
||||
@ -144,7 +144,7 @@
|
||||
<div style="width:100%; min-height:300px;">
|
||||
<canvas class="chart" id="eveWeekElecChart"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -156,10 +156,10 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-8">
|
||||
<div class="row" id="sysSubBtnList">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-12 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
@ -183,7 +183,7 @@
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="col-12 mb-2 position-relative row m-0 justify-content-center">
|
||||
<canvas class="chart" id="errRecChart"></canvas>
|
||||
<canvas class="chart" id="errRecChart"></canvas>
|
||||
</div>
|
||||
<div class="col-12 mb-2 position-relative row m-0 justify-content-center">
|
||||
<canvas class="chart" id="errChkChart"></canvas>
|
||||
@ -202,16 +202,16 @@
|
||||
<div class="panel-container show">
|
||||
<div class="panel-content poisition-relative p-0">
|
||||
<!--<div class="pb-5 pt-3">
|
||||
<div class="d-flex mr-0">
|
||||
<div class="mr-2">
|
||||
<span class="peity-donut" data-peity="{ "fill": ["#2196F3", "#9acffa"], "innerRadius": 14, "radius": 20 }">3/10</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
|
||||
<h4 class="font-weight-bold mb-0">14,134</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="d-flex mr-0">
|
||||
<div class="mr-2">
|
||||
<span class="peity-donut" data-peity="{ "fill": ["#2196F3", "#9acffa"], "innerRadius": 14, "radius": 20 }">3/10</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
|
||||
<h4 class="font-weight-bold mb-0">14,134</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="col-12 mb-2 position-relative row m-0 justify-content-center">
|
||||
<span class="text-center position-absolute t-white" style="top:25%;left:27%;">已完成<br>6</span>
|
||||
<img src="img/u40.png" class="" style="width:75%;margin-left:0px;left:-22px;">
|
||||
@ -237,7 +237,7 @@
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
var tarElePath = '';
|
||||
var sysSubList = [];
|
||||
var floList = []; //每個樓層
|
||||
@ -253,7 +253,7 @@
|
||||
var errRecChart = null;
|
||||
var errChkChart = null;
|
||||
var loadedCnt = 0;
|
||||
var chartDataCnt = { alarmCnt:0, recCnt:0, chkedErrCnt:0, unChkedErrCnt:0 };
|
||||
var chartDataCnt = { alarmCnt: 0, recCnt: 0, chkedErrCnt: 0, unChkedErrCnt: 0 };
|
||||
|
||||
var sysIconList = [
|
||||
{ mainSys: "EE", subSys: "E1", iconClass: "fal fa-grip-vertical" },
|
||||
@ -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";
|
||||
@ -290,7 +324,7 @@
|
||||
let contest = ["E4", "EL", "L1", "M10", "M12"]
|
||||
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
|
||||
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
|
||||
if (contest.indexOf(subSysObj.sub_system_tag) != -1) {
|
||||
if (contest.indexOf(subSysObj.sub_system_tag) != -1) {
|
||||
sysSubList.push({ sysMainTag: mainSysObj.main_system_tag, sysSubTag: subSysObj.sub_system_tag });
|
||||
}
|
||||
let iconClass = sysIconList.filter(x => x.mainSys == mainSysObj.main_system_tag && x.subSys == subSysObj.sub_system_tag)[0]?.iconClass;
|
||||
@ -301,7 +335,8 @@
|
||||
})
|
||||
})
|
||||
$("#sysSubBtnList").html(strHtml);
|
||||
|
||||
demoSubList();
|
||||
|
||||
}
|
||||
}, null, "POST").send();
|
||||
}
|
||||
@ -350,9 +385,9 @@
|
||||
let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00";
|
||||
let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
|
||||
let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 今日用電量
|
||||
getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, today, tomorrow, (data) => {
|
||||
let result = data?.data[0]?.sum;
|
||||
@ -411,7 +446,7 @@
|
||||
|
||||
function chkBajaLoaded() {
|
||||
loadedCnt++;
|
||||
|
||||
|
||||
if (loadedCnt == 9) {
|
||||
chartErrRec(["異常數量", "賦歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
|
||||
chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]);
|
||||
@ -422,7 +457,7 @@
|
||||
|
||||
// 圖表 - 今天與昨天用電量 (長條圖)
|
||||
function chartEveDaysElec(todayData, yesData) {
|
||||
|
||||
|
||||
let eveDayElecChartCanvas = $('#eveDayElecChart').get(0).getContext('2d');
|
||||
let curHour = (new Date()).getHours();
|
||||
todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
|
||||
@ -431,7 +466,7 @@
|
||||
labels: todayData?.data.map(x => x.timestamp.$time.$hour),
|
||||
datasets: [
|
||||
{
|
||||
id:"today",
|
||||
id: "today",
|
||||
type: "bar",
|
||||
label: '今日用電量',
|
||||
fill: false,
|
||||
@ -474,9 +509,9 @@
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
|
||||
|
||||
ticks: {
|
||||
min:0,
|
||||
min: 0,
|
||||
beginAtZero: true
|
||||
},
|
||||
}]
|
||||
@ -510,12 +545,12 @@
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 圖表 - 這週與上週用電量 (長條圖)
|
||||
function chartEveWeeksElec(curWeekData, prevWeekData) {
|
||||
|
||||
|
||||
let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d');
|
||||
let eveWeekElecChartData = {
|
||||
labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
|
||||
@ -602,7 +637,7 @@
|
||||
}
|
||||
|
||||
// 圖表 - 異常與賦歸圖表 (圓餅圖)
|
||||
function chartErrRec(labels,datas) {
|
||||
function chartErrRec(labels, datas) {
|
||||
|
||||
let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d');
|
||||
|
||||
@ -732,7 +767,7 @@
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}, null, "POST").send();
|
||||
}
|
||||
@ -857,9 +892,9 @@
|
||||
//}
|
||||
// 左側 3D 電梯 Viewer Option 設置
|
||||
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
|
||||
|
||||
|
||||
floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
|
||||
|
||||
|
||||
elev3DOption.nodeId = elev3DBind[devNum];
|
||||
elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
|
||||
elev3DOption.floorHeight.forEach((floObj, idx) => {
|
||||
@ -877,7 +912,7 @@
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
if (elev3DObj.length != 0) {
|
||||
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
|
||||
if (!elevObj.id) {
|
||||
@ -904,7 +939,7 @@
|
||||
console.log("五分鐘更新")
|
||||
getElectricBaja();
|
||||
})
|
||||
|
||||
|
||||
onEvent("click", "button[id^=sysSubCardBtn]", function () {
|
||||
let subSysTag = $(this).data("id");
|
||||
$(`#subSysBtn${subSysTag}`).click();
|
||||
|
||||
@ -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 -->
|
||||
@ -2253,6 +2255,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
$("#lightSchModal").modal("show");
|
||||
}
|
||||
})
|
||||
|
||||
onEvent("click", "#testsysbtn", function () {
|
||||
|
||||
})
|
||||
|
||||
$(window).on("timeout:3s", function () {
|
||||
getSystemAlarmByBaja((data) => {
|
||||
@ -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">
|
||||
@ -2402,10 +2408,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
//loadErrRecTable2($(oriEle).data("number"));
|
||||
//loadErrRecTable();
|
||||
loadErr($(oriEle).data("number"));
|
||||
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined"? drawInfoTabBlo(devGuid) : "");
|
||||
typeof subDeviceSetTable != "undefined "? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||
$(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