[Frontend] Forge 3D 顯示燈光程序調整 | 溫度條四種顏色程序調整 | [系統監控] 溫度條只有含有 Temp 的點位才會出現 | 計時器程序調整 | 顯示警告 toast |

This commit is contained in:
dev01 2023-01-10 18:39:07 +08:00
parent 92b6fd6de9
commit f0af802f0d
6 changed files with 160 additions and 89 deletions

View File

@ -216,7 +216,7 @@
var tarElePath = '';
var sysSubList = [];
var viewer3DNodeIds = [];
var timeOuters = [];
var eveDayElecChart = null;
var eveWeekElecChart = null;
var worOrdErrChart = null;
@ -269,7 +269,7 @@
show3DModel();
getSubList();
getFirstEletric();
timeOutGetData();
});
function demoSubList() {

View File

@ -48,7 +48,6 @@
setLightColor();
}
if (arr.indexOf(3) != -1) {
getLightPoint();
getHotspotPoint(() => {
show3DModel(data.urn_3D);
});
@ -96,12 +95,12 @@
}
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(function (data) {
console.log(data)
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
if (!matchDevice) {
return false;
}
console.log(data)
//將訂閱值塞入 subDeviceData
if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
let obj = {};
@ -144,6 +143,10 @@
myBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
if (data.findIndex(x => x.point_name == "Temp") != -1) {
// 顯示溫度條
showHeat("[name=forgeHeatBar]");
}
});
}
@ -267,7 +270,7 @@
<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 href="javascript:;">${devObj.full_name}</a>
<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">
@ -282,13 +285,28 @@
})
// 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();
}
@ -349,9 +367,10 @@
function show3DModel(urn) {
$(loadEle).Loading("start");
//getLightData(allDevList);
if (pageAct.sysMainTag == "LT") {
setLightPoint(allDevList);
}
launchViewerForHotspot(urn, (viewer, nodeIds) => {
showHeat("[name=forgeHeatBar]");
let devDbIds = allDevList.map(x => x.forge_dbid);
/*hideAllObjects(devDbIds);*/
@ -454,8 +473,7 @@
$.extend(item, data);
myDataList.push(item);
})
console.log("1", myDataList)
setHotspotPoint(myDataList);
callback ? callback() : "";
}
@ -463,45 +481,12 @@
}
async function getLightPoint(callback = null) {
let url = baseApiUrl + "/api/GetDevNodeForCor";
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_node_coordinate_3d != null && isJSON(data.device_node_coordinate_3d)) {
item.position = JSON.parse(data.device_node_coordinate_3d);
}
$.extend(item, data);
myDataList.push(item);
})
console.log("2", myDataList)
setLightPoint(myDataList);
callback ? callback() : "";
}
}, null, "POST").send();
}
function setHotspotPoint(myDataList = []) {
console.log(myDataList)
getHopspotPoint(myDataList);
}
async function setLightPoint(myDataList = []) {
function setLightPoint(myDataList = []) {
console.log(myDataList)
getLightData(myDataList);
}

View File

@ -93,6 +93,9 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
.device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
.scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
#toast-container > div {
width:330px !important;
}
/*a[data-tabname="topFunBtn"] { color: #fff }
a[data-tabname="topFunBtn"].active { color: #886ab5 }
@ -103,7 +106,7 @@ a[data-tabname="topFunBtn"]:hover { color: var(--theme-primary-50); }
}
.userblock:hover { color: var(--theme-primary-50); }
.dropdown.show .userblock { color: var(--theme-primary-50) !important; }*/
.page-header a {color:#fff !important;}
.page-header a { color: #fff !important; }
.page-header a:hover { color: var(--theme-primary-50) !important; }
.page-header a.active { color: var(--theme-primary-500) !important; }
.dropdown.show a { color: var(--theme-primary-50) !important; }

View File

@ -725,6 +725,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
var jwt = null;
var loadingTip = '';
var pageAct = {}; //記錄全頁面已選擇項目
var timeOuters = [];
pageAct.AreaTag = "";
if (location.href.indexOf("ord") != -1) {
location.href = "/file/index.html"
@ -837,6 +838,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
getBuiList();
getSysMonBtnList();
checkDevState();
if (lastPage) {
let lastPageAct = {};
@ -855,6 +857,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$("#app").load("_dashboard.html", loadCallback);
}
timeOutGetData();
function getBuiList() {
let url = baseApiUrl + "/api/Device/GetBuild";
@ -935,7 +938,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
endPageLoading();
$(".yt-alert").YTAlert().hide();
if (typeof timeOuters != "undefined") {
if (typeof timeOuters != "undefined" && timeOuters) {
$.each(timeOuters, (idx, timeOut) => {
clearInterval(timeOut);
})
@ -989,6 +992,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
})
$(window).on("timeout:3s", function () {
debugger
getSystemAlarmByBaja((data) => {
if (typeof getAlarmSub != "undefined" && getAlarmSub) {
getAlarmSub(data);
@ -996,6 +1000,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
alarmIconBlink();
})
showWarToast();
})
}
@ -1103,52 +1108,60 @@ 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">
<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>
<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="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 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>`,
</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>`,
group: "device",
onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" })
// 執行 pop 視窗上方 Tab 類別
new YT.Tab({ tabName: "cardTab" })
let devObj = $(oriEle).data("devobj");
// 讀取運維列表
loadOpeRecTable(devGuid);
// 讀取異常列表
loadErr($(oriEle).data("number"));
// 讀取設備基本資料列表
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
// 聚焦熱點
if ($(oriEle).data("dbId")) {
controlFocusHotspot($(oriEle).data("dbId"));
}
// 3D 視角 ZOOM IN 聚焦
moveViewToDevice(devObj?.forge_dbid);
// pop 視窗卡片可拖移功能初始化
$(tooltipEle).draggable({
cursor: "move",
handle: ".card-header", // 只能通过卡片的标题栏拖拽
containment: "document",
scroll: true
});
// pop 視窗卡片可縮放功能初始化
$(tooltipEle).resizable({
resize: function (event,ui) {
let iframe = $(ui.element).find("iframe");
@ -1167,9 +1180,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
minWidth: 200,
minHeight:150,
});
// 電梯管理 - Card table 更新
typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
},
onHide: function (tooltipEle, oriEle) {
// 3D 熱點解除
controlFocusHotspot($(oriEle).data("dbId"), false);
// sysMonFloor Echart 解除 focus
typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
@ -1182,6 +1197,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
})
}
// 卡片設備名稱點擊事件
function devItemNameEvent() {
onEvent("click", "[name=devItemName]", function () {
let devNum = $(this).data("number");
let devObj = $(`[name=devItem][data-number=${devNum}]`).data("devobj");
moveViewToDevice(devObj.forge_dbid);
})
}
// Card - 運維紀錄 Table
function loadOpeRecTable(devGuid) {
if (opeRecTable) {
@ -1433,6 +1457,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function timeOutGetData() {
let timeOut3s = null, timeOut5m = null;
let events = $._data($(window)[0], "events");
if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
timeOut3s = setInterval(() => {
$(window).trigger("timeout:3s");
@ -1531,7 +1556,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
console.log(res);
if (!res || res.code != "0000" || !res.data) {
} else {
@ -1576,6 +1600,56 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
}
}, null, "POST").send();
}
function showWarToast() {
let options = {
"closeButton": false,
"debug": false,
"newestOnTop": true,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": 0,
"extendedTimeOut": 0,
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
"tapToDismiss": false
}
if ($("#toast-container .toast").length < 2) {
let strConHtml = `<div class="col-12">
<div class="row m-0">
<span class="m-0">異常編號:<span>001</span></span>
</div>
<div class="row m-0">
<span class="m-0">異常等級:<span>2</span></span>
</div>
<div class="row m-0">
<span class="m-0">異常類別:<span>S01</span></span>
</div>
<div class="row m-0">
<span class="m-0">設備名稱:<span>電表01</span></span>
</div>
<div class="row m-0">
<span class="m-0">異常訊息:<span>壞掉</span></span>
</div>
</div>`;
let titleHtml = `<div class="col-12">
<div class="row m-0">
<span class="fs-1">異常通知</span>
<span class="ml-auto">2023/01/01 12:00:00</span>
</div>
</div>`
toastr.warning(strConHtml, titleHtml, options)
}
}
</script>
</body>

View File

@ -596,7 +596,7 @@ class ADHeatMaps {
await dataVizExtn.setupSurfaceShading(this.model, heatmapData);
// 對 "temperature" 的溫度設定兩種顏色:紅色和藍色
dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0xff0000]);
dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
this.dataVizExtn = dataVizExtn;
@ -622,9 +622,9 @@ class ADHeatMaps {
dev.temp = temp;
}
})
this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
$.each(this.roomDbIds, (idx, rDbid) => {
this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
})
//if (rDbid != null) {
// // 取得新的溫度值
// let getSensorValue = (device, sensorType) => {
@ -720,13 +720,16 @@ function hideColor(nodeId) {//顏色改成透明
//紀錄燈具座標
async function getLightData(data) {
lightList = [];
lightDataList = data;
}
async function testNewLight(dataList) {
dataList.forEach((myData, index) => {
const position = JSON.parse(myData.device_node_coordinate_3d);
lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10) });
const position = JSON.parse(myData.device_coordinate_3d);
if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) {
lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10) });
}
lightList[index].lightObject.position.set(position.x, position.y, position.z);
lightList[index].lightObject.castShadow = true;
@ -928,8 +931,8 @@ async function loadHeatmaps(model) {
// Setup surface shading
await dataVizExtn.setupSurfaceShading(model, heatmapData);
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];//0 ~ 1 藍綠黃紅
dataVizExtn.registerSurfaceShadingColors("temperature", sensorColors);
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
function getSensorValue(device, sensorType) {
return sensorVals[parseInt(device.id.slice(-1)) - 1];
@ -1170,10 +1173,10 @@ function createHeatmapRect(labels, colorStops, selector) {
}
const context = $(selector)[0].getContext('2d');
let i, len;
context.clearRect(0, 0, 300, 50);
context.clearRect(0, 0, 200, 50);
context.fillStyle = 'back';//white
for (i = 0, len = labels.length; i < len; i++) {
let x = 10 + 280 * i / (len - 1);
let x = 10 + 180 * i / (len - 1);
if (i === len - 1) {
x -= context.measureText(labels[i]).width;
}
@ -1182,12 +1185,12 @@ function createHeatmapRect(labels, colorStops, selector) {
}
context.fillText(labels[i], x, 10);
}
const gradient = context.createLinearGradient(0, 0, 300, 0);
const gradient = context.createLinearGradient(0, 0, 200, 0);
for (i = 0, len = colorStops.length; i < len; i++) {
gradient.addColorStop(i / (len - 1), colorStops[i]);
}
context.fillStyle = gradient;
context.fillRect(10, 20, 280, 20);
context.fillRect(10, 20, 200, 25);
}
//======================== 外部呼叫function ===========================

View File

@ -407,6 +407,12 @@ function strToDate(text, type = null, cal = 0, unit = "d") {
return result;
}
// 將只有時間(Hms) 格式轉換為當日的時間
function fullTime(time) {
let nowDate = displayDate(new Date(), "date");
return new Date(nowDate + " " + time);
}
function dateRanCutPart(start, end, cutNum) {
let sTime = (new Date(start)).getTime();
let eTime = (new Date(end)).getTime();