From f0af802f0d0f69f966b0493efb30a688ecadcfa5 Mon Sep 17 00:00:00 2001 From: dev01 Date: Tue, 10 Jan 2023 18:39:07 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend]=20Forge=203D=20=E9=A1=AF=E7=A4=BA?= =?UTF-8?q?=E7=87=88=E5=85=89=E7=A8=8B=E5=BA=8F=E8=AA=BF=E6=95=B4=20|=20?= =?UTF-8?q?=E6=BA=AB=E5=BA=A6=E6=A2=9D=E5=9B=9B=E7=A8=AE=E9=A1=8F=E8=89=B2?= =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E8=AA=BF=E6=95=B4=20|=20[=E7=B3=BB=E7=B5=B1?= =?UTF-8?q?=E7=9B=A3=E6=8E=A7]=20=E6=BA=AB=E5=BA=A6=E6=A2=9D=E5=8F=AA?= =?UTF-8?q?=E6=9C=89=E5=90=AB=E6=9C=89=20Temp=20=E7=9A=84=E9=BB=9E?= =?UTF-8?q?=E4=BD=8D=E6=89=8D=E6=9C=83=E5=87=BA=E7=8F=BE=20|=20=E8=A8=88?= =?UTF-8?q?=E6=99=82=E5=99=A8=E7=A8=8B=E5=BA=8F=E8=AA=BF=E6=95=B4=20|=20?= =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E8=AD=A6=E5=91=8A=20toast=20|?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_dashboard.html | 4 +- Frontend/_sysMonAll.html | 69 +++++++--------- Frontend/css/site.css | 5 +- Frontend/index.html | 138 ++++++++++++++++++++++++-------- Frontend/js/forge/forgemodel.js | 27 ++++--- Frontend/js/site.js | 6 ++ 6 files changed, 160 insertions(+), 89 deletions(-) diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html index 5d5460b..3dfeeb0 100644 --- a/Frontend/_dashboard.html +++ b/Frontend/_dashboard.html @@ -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() { diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index 2c16524..f9e15b1 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -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 @@ ... - ${devObj.full_name} + ${devObj.full_name}
@@ -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); } diff --git a/Frontend/css/site.css b/Frontend/css/site.css index a878acc..7c0e702 100644 --- a/Frontend/css/site.css +++ b/Frontend/css/site.css @@ -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; } diff --git a/Frontend/index.html b/Frontend/index.html index f3eeba6..0095295 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -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" ? `` : ""; let option = { html: `
+
-
+
+ +
+
+ + ${lightHtml} + + + + +
+
+
+
+ ${drawStateTabBlo(devNum)} +
+
-
- -
-
- - ${lightHtml} - - - - -
-
-
-
- ${drawStateTabBlo(devNum)} -
-
- -
-
- ${drawErrRecTabBlo()} -
-
- ${drawOpeRecTabBlo()} -
-
-
`, +
+
+ ${drawErrRecTabBlo()} +
+
+ ${drawOpeRecTabBlo()} +
+
+
`, 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 = `
+
+ 異常編號：001 +
+
+ 異常等級：2 +
+
+ 異常類別：S01 +
+
+ 設備名稱：電表01 +
+
+ 異常訊息：壞掉 +
+ +
`; + let titleHtml = `
+
+ 異常通知 + 2023/01/01 12:00:00 +
+
` + toastr.warning(strConHtml, titleHtml, options) + } + + } diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index 011c753..bf6cef7 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -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 =========================== diff --git a/Frontend/js/site.js b/Frontend/js/site.js index c2b6413..532e847 100644 --- a/Frontend/js/site.js +++ b/Frontend/js/site.js @@ -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();