[前台] 系統監控 開關燈 | 告警 縮短異常編號 | 能源管理 文字修正 | 歷史資料 邊提文字位置修正

Frontend/_alert.html

@@ -228,7 +228,7 @@
 
 		$('input[type=checkbox][data-type=sub]').on('click', function () {
 			if (!pageAct.selAllSysSub) {
-				console.log(this);
+				// console.log(this);
 				pageAct.selAllSysSub = true;
 
 				$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
@@ -646,6 +646,7 @@
 		let tag = "#alertTable";
 
 		$.each(data, function (i, v) {
+			// console.log(v.uuid.$val, v.uuid)
 			v.formId = AlertList(v.uuid.$val || v.uuid);
 		});
 
@@ -669,6 +670,9 @@
 			{
 				"title": "異常ID",
 				"data": "uuid",
+				render: (data) => {
+					return data.split("-")[0]
+				}
 			},
 			{
 				"title": "異常類別",
@@ -788,7 +792,7 @@
 	function selOpeFir() {
 		let url = baseApiUrl + "/operation/OpeFirSel";
 		objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
-		console.log(objSendData.Data)
+		// console.log(objSendData.Data)
 		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
 			if (!res || res.code != "0000" || !res.data) {
 

Frontend/_energyManagement.html

@@ -1,4 +1,5 @@
 <main id="js-page-content" role="main" class="page-content">
+    <h1 class="p-2 mb-0">運維管理</h1>
     <div class="row">
         <div class="col-12">
             <div class="btn-group mb-3">
@@ -23,7 +24,7 @@
                         <div class="panel-container show">
                             <div class="row">
                                 <div class="col-sm-12 col-lg-6 d-flex flex-column">
-                  <h4 class="p-3">今日耗電量 kWh</h4>
+                                    <h4 class="p-3 todayElecNoDataTitle text-center">今日耗電量 (kWh)</h4>
                                     <div class="panel-content poisition-relative" style="min-height: 346.84px;">
                                         <div id="todayElecNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
                                             <h4>無資料</h4>
@@ -34,7 +35,7 @@
                                     </div>
                                 </div>
                                 <div class="col-sm-12 col-lg-6 d-flex flex-column">
-                  <h4 class="py-3">用電比較</h4>
+                                    <h4 class="py-3 elecCompNoDataTitle text-center">用電比較</h4>
                                     <div id="elecCompNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
                                         <h4>無資料</h4>
                                     </div>
@@ -53,12 +54,12 @@
                     <div class="card">
                         <div class="card-body">
                             <div class="d-flex justify-content-between align-items-center mb-3">
-                <h4 class="mb-0"><i class="fal fa-server"></i> 自動需量管理</h4>
+                                <h4 class="mb-0"><i class="fal fa-server mr-1"></i>自動需量管理</h4>
 
                                 <button id="ediAutDemBtn" class="btn btn-success"><i class="fal fa-pencil"></i> 編輯</button>
                             </div>
                             <div class="row align-items-center justify-content-between d-flex flex-column">
-                <div class="col d-flex">
+                                <!-- <div class="col d-flex">
                                   <p class="card-text color-white d-flex justify-content-between mr-3">
                                     <span>契約容量</span>
                                     <span><span data-id="contract_capacity"></span> kW</span>
@@ -71,7 +72,7 @@
                                     <span>復歸值</span>
                                     <span><span data-id="resetting_value"></span> kW</span>
                                   </p>
-                </div>
+                                </div> -->
                                 <div class="col" style=" min-height:250px;">
                                     <canvas class="chart" id="autDemChart"></canvas>
                                 </div>
@@ -273,9 +274,11 @@
                 } else {
                     let strHtml = "";
                     $.each(res.data, (index, mainSysObj) => {
-            if ((type == 0 || (type == 3 && mainSysObj.mainSubTag == "ELEV_EL"))
+                        if (type == 0)
                         //  && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1
-            ) {
+                        {
+                            document.querySelector(".elecCompNoDataTitle").textContent = "用電比較";
+                            document.querySelector(".todayElecNoDataTitle").textContent = "今日耗電量 (kWh)";
                             const full_name = mainSysObj.system_remark.split("-")[1];
                             strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                 <div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
@@ -291,6 +294,27 @@
                         </p>
                     </div>
                 </div>
+            </div>`;
+                        } else if (type == 3 && mainSysObj.mainSubTag == "ELEV_EL") {
+                            document.querySelector(".elecCompNoDataTitle").textContent = "供電比較";
+                            document.querySelector(".todayElecNoDataTitle").textContent = "今日供電量 (kWh)";
+
+
+                            const full_name = mainSysObj.system_remark.split("-")[1];
+                            strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
+                <div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
+                    <div class="card-body">
+                        <h4 class="card-title color-white">${full_name}供電</h4>
+                        <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
+                            <span>${elecCardConText[type]?.text1}</span>
+                            <span id="insPow${mainSysObj.mainSubTag}"></span>
+                        </p>
+                        <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
+                            <span>${elecCardConText[type]?.text2}</span>
+                            <span id="insPowPer${mainSysObj.mainSubTag}"></span>
+                        </p>
+                    </div>
+                </div>
             </div>`;
                         }
                     });
@@ -298,7 +322,7 @@
                         strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                     <div class="card elecCard cur-poi">
                         <div class="card-body">
-                            <h4 class="card-title color-white">太陽能設備用電</h4>
+                            <h4 class="card-title color-white">太陽能設備供電</h4>
                             <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                 <span>${elecCardConText[type]?.text1}</span>
                                 <span id="insPow">---</span>
@@ -480,10 +504,10 @@
 
             // 空調系統 今日與30日內平均用電比較
             getElectricMeterDayDataByBaja(tarDevNum + "_KWH", n4Sup, prevThirtyDay, tomorrow, (data) => {
-        let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
+                // let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
+                let curDay = 7;
                 let eveWeek = [];
                 let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
-
                 for (let i = 1; i <= curDay; i++) {
                     let tarDayData = data.data.filter(x => strToDate(x.timestamp.$cEncStr, "day") == i);
                     let tarDayElecs = tarDayData.map(x => x.sum);
@@ -619,10 +643,11 @@
 
     // 圖表 - 今日與30日內平均用電量比較 (長條圖)
     function chartEveWeeksElec(curWeekData, avgData) {
+        const labels = curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day")))
         elecCompChart?.destroy()
         let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d');
         let elecCompChartData = {
-      labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
+            labels,
             datasets: [
                 {
                     id: "today",
@@ -662,13 +687,13 @@
                     offset: true,
                     grid: { color: color.fusion._500 },
                     ticks: {
-            callback: function (value, index, ticks) {
+                        // callback: function (value, index, ticks) {
-              return value
+                        //   console.log("@@@@圖表的",value)
-            }
+                        //   return value
+                        // }
                     },
                 },
                 y: {
-
                     ticks: {
                         min: 0,
                         beginAtZero: true
@@ -691,6 +716,7 @@
 
         // This will get the first returned node in the jQuery collection.
         elecCompChart = new Chart(elecCompChartCanvas, {
+            type: "bar",
             data: elecCompChartData,
             options: elecCompChartOptions
         })
@@ -709,7 +735,7 @@
             resCapData = [resCapVal];
 
             let autDemChartData = {
-        labels: labels,
+                labels,
                 datasets: [
                     {
                         id: "conCap",
@@ -779,15 +805,21 @@
                         display: true,
                         fullSize: true,
                         labels: {
+                            font: {
+                                size: 16,
+                                lineHeight: "40px",
+                            },
                             usePointStyle: true,
                             generateLabels: (chart) => {
                                 if (!chart.data) return [];
                                 return chart.data.datasets.map(
                                     (dataset, index) => ({
+
                                         datasetIndex: index,
-                    text: dataset.label,
+                                        text: `${dataset.label} ${dataset.data[0]} KW`,
                                         fontColor: color.fusion._100,
                                         lineDash: dataset.borderDash ? [5, 5] : [],
+                                        lineWidth: 5,
                                         fillStyle: dataset.backgroundColor,
                                         strokeStyle: dataset.borderColor,
                                         pointStyle: "line",
@@ -834,7 +866,14 @@
 
             autDemChart = new Chart(autDemChartCanvas, {
                 data: autDemChartData,
-        options: autDemChartOptions
+                options: autDemChartOptions,
+                plugins: [{
+                    beforeInit: function (chart, args, options) {
+                        chart.legend.afterFit = function () {
+                            this.height = this.height + 50;
+                        };
+                    }
+                }]
             })
         } else {
             autDemChart.data.datasets[0].data.forEach((x, i) => autDemChart.data.datasets[0].data[i] = conCapVal);

Frontend/_historyData.html

@@ -1,4 +1,6 @@
 <main id="js-page-content" role="main" class="page-content">
+    <h1 class="p-2 mb-0">歷史資料</h1>
+
     <div class="row">
         <div class="col-sm-12 col-xl-2">
             <div class="rounded border border-white">
@@ -14,7 +16,6 @@
 
         </div>
         <div class="col-sm-12 col-xl-10">
-      <h1 class="p-2 mb-0">歷史資料瀏覽</h1>
             <div class="row bg-dark p-2 mb-5">
                 <div class="col-auto">
                     <div class="btn-group">
@@ -93,7 +94,6 @@
 
             if (pageAct.dateType == 'range') {
                 if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
-          console.log('aaaa');
                     $('#his_startdate').val($('#his_startdate').data('val'));
                     toast_error('不可選擇大於結束時間');
                 }
@@ -137,7 +137,6 @@
             let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
 
             if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
-        console.log('bbbb');
                 $('#his_enddate input').val($('#his_enddate input').data('val'));
                 toast_error('不可選擇大於結束時間');
             }

Frontend/_operation.html

@@ -504,7 +504,7 @@
 			setDate(null, startdate, enddate);
 		});
 
-		$(`[onclick="setType(null)"]`).click();
+		$(`[onclick="setType(2)"]`).click();
 
 		initDate();
 		event();

Frontend/_sysMonAll.html

@@ -102,7 +102,7 @@
         }
         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;
@@ -126,6 +126,16 @@
             let cloDevPoiName = matchDevice.device_close_point_name;
             let errDevPoiName = matchDevice.device_error_point_name;
 
+            if (data.point_name == "SSC") {
+                const lightOn = data.value.includes("true")
+                setLightOpenOrClose(lightOn, matchDevice.device_guid);
+                if (lightOn) {
+                    setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
+                } else {
+                    setLightValues(matchDevice.device_guid, 0, 0xe1cf18);
+                }
+            }
+
             if (data.point_name == "Temp") {
                 heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
                 let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
@@ -406,7 +416,9 @@
                             "area_tag": pageAct.AreaTag,
                             "building_tag": pageAct.buiTag,
                         },
+                        selector: "[name=forgeViewer]",
                         curDevice: {
+                            ...device,
                             roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
                             id: device.device_number,
                             position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
@@ -576,7 +588,7 @@
     var parentEle = "";
     onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
         forgeUnFocusAll();
-        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
+        let position = [obj.event.target.toolController.lastClickX - 100, obj.event.target.toolController.lastClickY - 100];
         let devObj = obj.myData;
         let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
         devObj.full_name = name;
@@ -589,7 +601,6 @@
     })
 
     onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
-
         $("#floDevList a[name=devItem]").each((idx, ele) => {
             let devNum = $(ele).data("number");
             let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;

Frontend/_sysMonFloor.html

@@ -459,6 +459,17 @@
                 currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
             }
 
+
+            if (data.point_name == "SSC") {
+                const lightOn = data.value.includes("true")
+                setLightOpenOrClose(lightOn, matchDevice.device_guid);
+                if (lightOn) {
+                    setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
+                } else {
+                    setLightValues(matchDevice.device_guid, 0, 0xffffff);
+                }
+            }
+
             if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
                 //顯示正常燈號
                 $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");

Frontend/js/forge/forgemodel.js

@@ -748,7 +748,7 @@ async function testNewLight(dataList) {
     dataList.forEach((myData, index) => {
         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(0xff0000, 200, 20, 0.6, 0.5, 10) });
+            lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xe1cf18, 200, 20, 0.6, 0.5, 10) });
         }
 
         lightList[index].lightObject.position.set(position.x, position.y, position.z);
@@ -795,7 +795,7 @@ async function addHotPoint(data) {
 
     //熱點 點擊事件註冊
     viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
-
+    // viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClickedOut);
     //viewer.addEventListener(
     //    Autodesk.Viewing.SELECTION_CHANGED_EVENT,
     //    onSelectionChange
@@ -820,25 +820,13 @@ async function addHotPoint(data) {
     //---------------- 熱點點擊事件 --------------------
     function onSpriteClicked(event) {
         event.hasStopped = true;
-        if (pageAct.sysSubTag === "M12" && event != undefined && event != null) {
-            if (event.dbId >= dbIdStart) {
-                changeColorForHotspot(event.dbId);
-                changeScaleForHotspot(event.dbId, false);
-                let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
-                moveViewToDevice(myData.forge_dbid);//移動視角至該設備
-
-                $(selector).trigger("autodesk:click:sprite", { event, myData });
-            } else {
-                $(selector).trigger("autodesk:clickOut:sprite", { event });
-            }
-        }
         if (event != undefined && event != null) {
             if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19
                 // console.log(`Sprite clicked: ${event.dbId}`);
 
                 for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
                     changeColorForHotspot(i);
-                    changeScaleForHotspot(i, false);
+                    changeScaleForHotspot(i, true);
                 }
                 let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
                 if (lightList != undefined && lightList != null && lightList.length > 0) {
@@ -848,6 +836,8 @@ async function addHotPoint(data) {
                 }
                 $(selector).trigger("autodesk:click:sprite", { event, myData });
             } else {
+                changeColorForHotspot(event.dbId, null);
+                changeScaleForHotspot(event.dbId, false);
                 $(selector).trigger("autodesk:clickOut:sprite", { event });
             }
 
@@ -860,6 +850,21 @@ async function addHotPoint(data) {
         }
     }
 
+    //   function onSpriteClickedOut(event){
+    //     event.hasStopped = true;
+    //     if (event != undefined && event != null) {
+    //         if (event.dbId >= dbIdStart) {
+    //           for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
+    //             changeColorForHotspot(event.dbId);
+    //             changeScaleForHotspot(event.dbId, false);
+    //           }
+    //           let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
+    //             debugger
+    //             $(selector).trigger("autodesk:clickOut:sprite", { event });
+    //         }
+    //     }
+    // }
+
     //function onSelectionChange(event) {
     //    if (event != undefined && event != null) {
     //        const dbIds = event.dbIdArray;
@@ -881,7 +886,7 @@ async function addHotPoint(data) {
 // 熱點 更換顏色
 async function changeColorForHotspot(dbId, type = null) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    // console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
+    console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
     let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff);
     if (type == "focus" && pageAct.sysSubTag !== "M12") {
         spriteColorFocus = new THREE.Color(0x00ffe1);
@@ -897,26 +902,6 @@ async function changeColorForHotspot(dbId, type = null) {
 }
 
 
-// 熱點 更換顏色---環境感知器
-async function changeColorForSensorHotspot(dbId, temp) {
-    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    const temps = [new THREE.Color(0x0000ff), new THREE.Color(0x00ff00), new THREE.Color(0xffff00), new THREE.Color(0xff0000)]
-    let index = Math.floor(temp / 10);
-    if (index > 3) {
-        index = 3
-    }
-    const viewablesToUpdate = dbId;
-    const color = temps[index]
-
-    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
-        return {
-            color: color,
-        };
-    });
-    console.log(dataVizExtn)
-}
-
-
 // 熱點 更換大小
 async function changeScaleForHotspot(dbId, type = true) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");