diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html index 9761439..b0a07c3 100644 --- a/Frontend/_dashboard.html +++ b/Frontend/_dashboard.html @@ -12,7 +12,7 @@

- + -- 今日用電量 kWH

@@ -23,7 +23,7 @@

- + -- 昨日用電量

@@ -74,7 +74,7 @@

- + -- 即時功率

@@ -347,13 +347,15 @@ let loadedCnt = 0; /* let batch = new baja.comm.Batch();*/ startPageLoading(); - //// 今日用電量 + // 今日用電量 getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => { - $("#todayUseElec").text(data?.data[0]?.sum || 0); + let result = data?.data[0]?.sum; + result = result ? parseFloat(result).toFixed(2) : 0; + $("#todayUseElec").text(result); chkBajaLoaded(); }) - //// 今日用電量 (每小時) + // 今日用電量 (每小時) getElectricMeterHourDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, tomorrow, (data) => { let todayData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year") && x.timestamp.$date.$month == getTimeByType("month") && x.timestamp.$date.$day == getTimeByType("date")); @@ -364,11 +366,13 @@ // 昨日用電量 getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, today, (data) => { - $("#yesUseElec").text(data?.data[0]?.sum || 0); + let result = data?.data[0]?.sum; + result = result ? parseFloat(result).toFixed(2) : 0; + $("#yesUseElec").text(result); chkBajaLoaded(); }) - //// 本週與上週用電量 (每天) + // 本週與上週用電量 (每天) getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", prevTwoWeek, tomorrow, (data) => { let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay(); let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr)); @@ -378,11 +382,12 @@ chkBajaLoaded(); }) - //// 電表即時功率 + // 電表即時功率 getElectricMeterNoweDataByBaja(devPath, (data) => { - console.log(data) data = data.data; - $("#insPower").text(data.filter(x => x.name == "P")[0]?.value); + let result = data.filter(x => x.name == "P")[0]?.value; + result = result ? parseFloat(result).toFixed(2) : 0; + $("#insPower").text(result); chkBajaLoaded(); }) @@ -436,7 +441,7 @@ borderColor: color.success._500, pointColor: color.success._500, pointBackgroundColor: color.main1, - data: todayData?.data.map(x => x.sum || YT.Math.Random(100, 1000)), + data: todayData?.data.map(x => x.sum), order: 1, }, { @@ -448,7 +453,7 @@ borderColor: color.info._100, pointColor: color.info._100, pointBackgroundColor: color.info._100, - data: yesData?.data.map(x => x.sum || YT.Math.Random(100, 1000)), + data: yesData?.data.map(x => x.sum), order: 2, } ] @@ -514,7 +519,7 @@ borderColor: color.success._500, pointColor: color.success._500, pointBackgroundColor: color.success._500, - data: curWeekData.map(x => x.sum || YT.Math.Random(100, 1000)), + data: curWeekData.map(x => x.sum), order: 1, }, { @@ -526,7 +531,7 @@ borderColor: color.info._100, pointColor: color.info._100, pointBackgroundColor: color.info._100, - data: prevWeekData.map(x => x.sum || YT.Math.Random(100,1000)), + data: prevWeekData.map(x => x.sum), order: 2, } ] @@ -705,6 +710,8 @@ function show3DModel() { - launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk'); + launchViewer(pageAct.urn, (viewer, nodeIds) => { + console.log("nodeIds",nodeIds) + }); } \ No newline at end of file diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html index d376b32..c51bd78 100644 --- a/Frontend/_sysElevator.html +++ b/Frontend/_sysElevator.html @@ -861,7 +861,7 @@ var subSeviceData = []; //每個設備訂閱點位值 var floList = []; //每個樓層 var elevObj = null; //左側 2D 電梯物件 - var viewer3DNodeIds = [12115, 12109, 12103]; + var viewer3DNodeIds = []; var elev3DBind = {}; var elev3DOption = {}; var elev3DObj = []; @@ -992,10 +992,10 @@ let subData = subSeviceData.filter(x => x.device_number == devNum)[0]; if (subData) { - // 左側 3D 電梯 nodeID 與 device_number match - if (Object.keys(elev3DBind).indexOf(devNum) == -1) { - elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length]; - } + //// 左側 3D 電梯 nodeID 與 device_number match + //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) { + // elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length]; + //} // 左側 3D 電梯 Viewer Option 設置 /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/ elev3DOption.nodeId = elev3DBind[devNum]; @@ -1015,7 +1015,7 @@ } } }) - + debugger if (isFirstLoad3D == false && elev3DObj.length != 0) { let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0]; if (!elevObj.id) { @@ -2403,9 +2403,13 @@ //載入3D模型 function load3DModel() { - - launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q', (viewer) => { - $.each(viewer3DNodeIds, function (idx, node) { + launchViewer(pageAct.urn, (viewer, nodeIds) => { + nodeIds = Array.from(nodeIds); + $.each(nodeIds, (idx, item) => { + elev3DBind[item[0]] = item[1]; + }) + nodeIds = nodeIds.map(x => x[1]); + $.each(nodeIds, function (idx, node) { let options = { element: $("#forgeViewer"), viewer: viewer, diff --git a/Frontend/css/site.css b/Frontend/css/site.css index 16e1f90..4fbff64 100644 --- a/Frontend/css/site.css +++ b/Frontend/css/site.css @@ -63,53 +63,99 @@ label[id$='-error'].error { /* checkbox switch */ input.toggle:checked::before { - content: ''; - position: absolute; - top: 2px; - left: 24px; - display: block; - border-radius: 25px; - width: 20px; - height: 20px; - background: #3f8635; + content: ''; + position: absolute; + top: 2px; + left: 24px; + display: block; + border-radius: 25px; + width: 20px; + height: 20px; + background: #3f8635; } + input.toggle::before { - content: ''; - position: absolute; - top: 2px; - left: 3px; - display: block; - border-radius: 25px; - width: 20px; - height: 20px; - background: #656565; - transition: 0.2s; + content: ''; + position: absolute; + top: 2px; + left: 3px; + display: block; + border-radius: 25px; + width: 20px; + height: 20px; + background: #656565; + transition: 0.2s; } input.toggle { - cursor:pointer; - appearance: none; - position:relative; - width: 48px; - height: 24px; - background: #464646; - border-radius: 50px; - align-content: center; + cursor: pointer; + appearance: none; + position: relative; + width: 48px; + height: 24px; + background: #464646; + border-radius: 50px; + align-content: center; } + input.toggle:checked { - background: #97c193; + background: #97c193; } .loading-bg { background: #0000009c; background-repeat: no-repeat; - opacity:0; + opacity: 0; width: 100%; height: 100vh; position: fixed; z-index: 2000; } +.lds-ring { + display: inline-block; + position: relative; + width: 25px; + height: 25px; + margin-right:0.8rem; +} + +.lds-ring div { + top: -4px; + box-sizing: border-box; + display: block; + position: absolute; + width: 25px; + height: 25px; + margin: 6px; + border: 6px solid #fff; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: #fff transparent transparent transparent; +} + +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} + +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} + +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} + +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + @keyframes flashing-c { 0% { color: var(--flash-color-1); @@ -437,7 +483,7 @@ input.toggle:checked { } .bg-orange { - background-color:#ffa100; + background-color: #ffa100; } /* text color */ @@ -488,13 +534,3 @@ input.toggle:checked { .t-yellow { color: var(--yt-yellow-1); } - -.custom-select-ri { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; -} - -.custom-radio-input { - vertical-align: middle; -} \ No newline at end of file diff --git a/Frontend/index.html b/Frontend/index.html index a2baf8e..81900a5 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -2167,7 +2167,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li } else { isValidLogin(); } - showMainSys(); + $(loadEle).Loading("close"); } @@ -2177,6 +2177,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li function isValidLogin() { $("#app").load("_dashboard.html", loadCallback); + showMainSys(); getBuiList(); getSysMonBtnList(); checkDevState(); @@ -2216,7 +2217,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li } else { let strHtml = ``; $.each(res.data, (index, buiObj) => { - strHtml += `${buiObj.full_name}`; + strHtml += `${buiObj.full_name}`; }) $("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active } @@ -2299,6 +2300,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li onEvent("active:change", "#buiList", function (e, actEle) { if (actEle) { pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1]; + pageAct.urn = $(actEle).data("urn"); } }) diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index b6726e8..5b3f854 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -63,8 +63,8 @@ function launchViewer(urn, callback) { Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure); - $("#forgeViewer").on("autodesk:loaded", function () { - callback ? callback(viewer) : ""; + $("#forgeViewer").on("autodesk:loaded", function (e,nodeIds) { + callback ? callback(viewer, nodeIds) : ""; }) @@ -140,22 +140,11 @@ class elevator3D { setTreeFrag = function (callback) { let tree = this.viewer.model.getData().instanceTree; let nodeId = this.nodeId; - //tree.enumNodeChildren(nodeId, (node) => { - // nodeId = node; - // tree.enumNodeFragments(nodeId, (frag) => { - // this.fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag); - // this.fragProxy.getAnimTransform(); - // let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26 - - // this.fragProxy.position = fragPosition - - // this.fragProxy.updateAnimTransform() - // }); - //}) if (nodeId) { let childCnt = tree.getChildCount(nodeId); let curIdx = 1; + this.fragProxys.filter(x => x.nodeId == nodeId).forEach((x) => { let idx = this.fragProxys.indexOf(x); this.fragProxys.splice(idx,1); @@ -207,16 +196,28 @@ class elevator3D { if (!fragProxy) { return; } + changeColor(nodeId); + + console.log("movStatus:" + movStatus, "fragProxy.position.z:" + fragProxy.position.z.roundDecimal(2), "targetFloorZ:" + this.targetFloorZ.roundDecimal(2)) + //if ((movStatus == 2 && fragProxy.position.z.roundDecimal(2) < this.targetFloorZ.roundDecimal(2)) || + // (movStatus == 1 && fragProxy.position.z.roundDecimal(2) > this.targetFloorZ.roundDecimal(2)) || + // fragProxy.position.z.roundDecimal(2) == this.targetFloorZ.roundDecimal(2)) { + // this.movStatus = 0; + // recoverTransparentBuilding(); + // hideColor(nodeId); + // return; + //} - if (fragProxy.position.z > this.targetFloorZ) { - movStatus = 2 - } - else if (fragProxy.position.z < this.targetFloorZ) { - movStatus = 1 - } + //if (movStatus == 0) { + // recoverTransparentBuilding(); + // return; + //} - if (movStatus == 0) { - return; + if (fragProxy.position.z.roundDecimal(2) > this.targetFloorZ.roundDecimal(2)) { + this.movStatus = 2; + } + else if (fragProxy.position.z.roundDecimal(2) < this.targetFloorZ.roundDecimal(2)) { + this.movStatus = 1; } tree.enumNodeFragments(nodeId, (frag) => { @@ -236,12 +237,23 @@ class elevator3D { }, true); this.viewer.impl.sceneUpdated(true); + setTransparentBuilding(); + let movElevator = $(this.ele)[0]._elevator3D.filter(x => x.nodeId == this.nodeId)[0]?.obj.movElevator.bind(this); + console.log("fragProxyZ:" + fragProxyZ, "targetFloorZ:" + this.targetFloorZ) + + + if (movStatus == 2) { if (fragProxyZ >= this.targetFloorZ) { requestAnimationFrame(() => { movElevator(); }); + } else { + this.movStatus = 0; + recoverTransparentBuilding(); + hideColor(nodeId); + return; } } else if (movStatus == 1) { @@ -249,9 +261,14 @@ class elevator3D { requestAnimationFrame(() => { movElevator(); }); + } else { + this.movStatus = 0; + recoverTransparentBuilding(); + hideColor(nodeId); + return; } } - + //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26 @@ -276,49 +293,69 @@ function onDocumentLoadSuccess(doc, eleOption) { // }); viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { - //var instanceTree = viewer.model.getData().instanceTree; - //var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); - //var domElem = document.getElementById('all_id'); - //domElem.innerText = allDbIdsStr; - //let nodes = eleOption.nodes ?? []; - //let element = eleOption.element ?? ""; - //$(element)[0]._elevator3D = []; - //$.each(nodes, function (idx, node) { - // let options = { - // element: $(element), - // viewer: viewer, - // nodeId: node, - // floorHeight: eleOption.floorHeight ?? [], - // inited: function () { - // if (idx == nodes.length - 1) { - // $(element).trigger("autodesk:loaded"); - // } - // } - // } - // let elevator3DObj = new elevator3D(options); - - //}) - $("#forgeViewer").trigger("autodesk:loaded"); - //let tree = viewer.model.getData().instanceTree; - //let nodeId = 10952; - //console.log("tree", tree) - //tree.enumNodeFragments(nodeId, function (frag) { - // fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); - // fragProxy.getAnimTransform(); - // let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26 - - // fragProxy.position = fragPosition - - // fragProxy.updateAnimTransform() - //}); - //viewer.impl.sceneUpdated(true); - //$("#forgeViewer").trigger("autodesk:loaded"); - + let instanceTree = viewer.model.getData().instanceTree; + console.log(instanceTree.nodeAccess) + allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); + getNodeIdByDbIds(allDbIdsStr, (nodeIds) => { + $("#forgeViewer").trigger("autodesk:loaded", nodeIds ); + }); + + + }); } +function getNodeIdByDbIds(allDbIdsStr,callback) { + let curDbId = 0; + let tagId = 0; + let _parentId = 0; + let _childId = 0; + let evelMap = new Map(); + let finTimeout = null; + + allDbIdsStr.forEach((dbId) => { + curDbId = parseInt(dbId); + viewer.getProperties(curDbId, function (e) { + e.properties.forEach(function (item, idx) { + if (item.displayName == "tag_id" && e.name == "【電梯】") { + + tagId = e.dbId; + viewer.getProperties(tagId, function (e2) { + e2.properties.forEach(function (item2, idx2) { + if (item2.displayName == "child") { + _parentId = item2.displayValue; + + viewer.getProperties(_parentId, function (e3) { + //var childIdArr = new Array(); + /*childIdArr.push(_parentId)*/ + //e3.properties.forEach(function (item3, idx3) { + // if (item3.displayName == "child") { + // _childId = item3.displayValue; + // childIdArr.push(_childId); + // } + //}); + evelMap.set(item.displayValue, e3.dbId) + console.log("map: " + evelMap); + clearTimeout(finTimeout) + finTimeout = setTimeout(() => { + callback ? callback(evelMap) : ""; + }, 10) + + }) + + } + }); + }) + } + }); + }) + + }) + return evelMap; +} + function setElevatorFloor(floor) { if (floor == 0) targetFloorZ = 0; @@ -471,3 +508,64 @@ async function loadHeatmaps(model) { const floorName = "01 - Entry Level"; dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue); } + +function setTransparentBuilding() { + //allDbIdsStr.forEach((dbId) => { + // setTransparency(dbId, 0.2); + //}) + + for (var i = 0; i < allDbIdsStr.length; i++) { + setTransparency(parseInt(allDbIdsStr[i]), 0.2); + } + +} + +function recoverTransparentBuilding() { + //allDbIdsStr.forEach((dbId) => { + // setTransparency(dbId, 1); + //}) + + for (var i = 0; i < allDbIdsStr.length; i++) { + setTransparency(parseInt(allDbIdsStr[i]), 1); + } +} +//設定模型 透明度 +function setTransparency(nodeId, opacity) { + var model = viewer.model; + //var nodeId = 1633; + + var fragList = viewer.model.getFragmentList(); + + var fragIds = [] + + model.getData().instanceTree.enumNodeFragments( + nodeId, (fragId) => { + fragIds.push(fragId) + }); + + fragIds.forEach((fragId) => { + //获取材质 + var material = fragList.getMaterial(fragId); + + if (material) { + //设置透明度 + material.opacity = opacity;//0.5; + material.transparent = true; + //标记更新 + material.needsUpdate = true; + } + }) + + //更新viewer + viewer.impl.invalidate(true, true, true); +} + +function changeColor(nodeId) {//電梯變綠色 + var color = new THREE.Vector4(0, 1, 0, 1); + viewer.setThemingColor(nodeId, color); +} + +function hideColor(nodeId) {//顏色改成透明 + var color = new THREE.Vector4(0, 1, 0, 0); + viewer.setThemingColor(nodeId, color); +} \ No newline at end of file diff --git a/Frontend/js/style.js b/Frontend/js/style.js index bbaeaa5..c7218b7 100644 --- a/Frontend/js/style.js +++ b/Frontend/js/style.js @@ -29,6 +29,10 @@ $.fn.SetDropDown = function (eleObj, divObj) { $("#" + eleObj.dropdownId).find(".dropdown-item-checkbox input:checked").trigger("click", "init"); } +Number.prototype.roundDecimal = function (precision) { + return Math.round(Math.round(this * Math.pow(10, (precision || 0) + 1)) / 10) / Math.pow(10, (precision || 0)); +} + Array.prototype.Distinct = function () { return this.filter((value, index, self) => { return self.indexOf(value) === index; }); } diff --git a/Frontend/js/yourteam/plugins/yt-alert/ytpop-alert.js b/Frontend/js/yourteam/plugins/yt-alert/ytpop-alert.js index 6a99500..6a86be9 100644 --- a/Frontend/js/yourteam/plugins/yt-alert/ytpop-alert.js +++ b/Frontend/js/yourteam/plugins/yt-alert/ytpop-alert.js @@ -55,10 +55,16 @@ YT.Alert.Error = function (text) { } -YT.Alert.Tip = function (text, type = null, color = null) { +YT.Alert.Tip = function (text, type = null,isLoading = true, color = null) { let ranId = Math.floor(Math.random() * 100000); + let iconHtml = ""; + if (isLoading) { + iconHtml = `
`; + } else { + iconHtml = `error`; + } $("body").append(``) + ${iconHtml}${text}
`) alertIdArray.push("tip-alert-" + ranId); alertIdArray.length > 2 ? alertIdArray.shift() : ""