<main id="js-page-content" role="main" class="page-content"> <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> <div class="col-sm-12 col-xl-4"> <div class="row"> <div class="col-sm-6 col-xl-6"> <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g"> <div class=""> <h3 class="display-4 d-block l-h-n m-0 fw-500"> <span id="todayUseElec"></span> <small class="m-0 l-h-n">今日用電量 kWH</small> </h3> </div> <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i> </div> </div> <div class="col-sm-6 col-xl-6"> <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g"> <div class=""> <h3 class="display-4 d-block l-h-n m-0 fw-500"> <span id="yesUseElec"></span> <small class="m-0 l-h-n">昨日用電量</small> </h3> </div> <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i> </div> </div> <div class="col-lg-12"> <div id="panel-2" class="panel" data-panel-sortable data-panel-collapsed data-panel-close> <div class="panel-hdr"> <h2> 昨日/今日用電比較 </h2> </div> <div class="panel-container show"> <div class="panel-content poisition-relative"> <div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center"> <!--<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down"> <div class="text-right fw-500 l-h-n d-flex flex-column"> <div class="h3 m-0 d-flex align-items-center justify-content-end"> <div class='icon-stack mr-2'> <i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i> <i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i> <i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i> </div> $44.34 / GE </div> <span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span> </div> </div> <div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5"> <div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff"> <div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div> </div> </div>--> </div> <div style="width:100%; min-height:300px;"> <canvas class="chart" id="eveDayElecChart"></canvas> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm-12 col-xl-4"> <div class="row"> <div class="col-sm-6 col-xl-6"> <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g"> <div class=""> <h3 class="display-4 d-block l-h-n m-0 fw-500"> <span id="insPower"></span> <small class="m-0 l-h-n">即時功率</small> </h3> </div> <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i> </div> </div> <div class="col-sm-6 col-xl-6"> <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"> <div class=""> <h3 class="display-4 d-block l-h-n m-0 fw-500"> 8,846 <small class="m-0 l-h-n">即時契約容量占比 kWH</small> </h3> </div> <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i> </div> </div> <div class="col-lg-12"> <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close> <div class="panel-hdr"> <h2> 本週/上週用電比較 </h2> </div> <div class="panel-container show"> <div class="panel-content poisition-relative"> <!--<div class="pb-5 pt-3"> <div class="row"> <div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="p-2 mr-3 bg-info-200 rounded"> <span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,5,8,2</span> </div> <div> <label class="fs-sm mb-0">Bounce Rate</label> <h4 class="font-weight-bold mb-0">37.56%</h4> </div> </div> <div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="p-2 mr-3 bg-info-300 rounded"> <span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">5,3,1,7,9</span> </div> <div> <label class="fs-sm mb-0">Sessions</label> <h4 class="font-weight-bold mb-0">759</h4> </div> </div> <div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="p-2 mr-3 bg-success-300 rounded"> <span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,3,5,5</span> </div> <div> <label class="fs-sm mb-0">New Sessions</label> <h4 class="font-weight-bold mb-0">12.17%</h4> </div> </div> <div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="p-2 mr-3 bg-success-500 rounded"> <span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">6,4,7,5,6</span> </div> <div> <label class="fs-sm mb-0">Clickthrough</label> <h4 class="font-weight-bold mb-0">19.77%</h4> </div> </div> </div> </div>--> <div style="width:100%; min-height:300px;"> <canvas class="chart" id="eveWeekElecChart"></canvas> </div> </div> </div> </div> </div> </div> </div> </div> <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"> <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close> <div class="panel-hdr"> <h2> 異常狀態 </h2> </div> <div class="panel-container show"> <div class="panel-content poisition-relative p-0"> <!--<div class="pb-5 pt-3"> <div class="d-flex mr-4"> <div class="mr-2"> <span class="peity-donut" data-peity="{ "fill": ["#967bbd", "#ccbfdf"], "innerRadius": 14, "radius": 20 }">7/10</span> </div> <div> <label class="fs-sm mb-0 mt-2 mt-md-0">New Sessions</label> <h4 class="font-weight-bold mb-0">70.60%</h4> </div> </div> </div>--> <div class="col-12 mb-2 position-relative row m-0 justify-content-center"> <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> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close> <div class="panel-hdr"> <h2> 工單進度 </h2> </div> <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="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;"> <span class="text-center position-absolute t-white" style="top:51%;left:58%;">未完成<br>8</span> </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:43%;left:26%;">未派工<br>5</span> <img src="img/u43.png" class="mt-2 mb-1" style="width:51%;"> <span class="text-center position-absolute t-white" style="top:42%;left:58%;">派工中<br>9</span> </div> </div> </div> </div> </div> </div> </div> </div> </main> <script> var tarElePath = ''; var sysSubList = []; $(document).ready(function () { show3DModel(); getSubList(); getFirstEletric(); }); // 從數字週數轉為中文週數 function dayToChiDay(num) { let chiDay = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"]; return chiDay[num]; } // 取得現在或前後時間,輸出單位依據 type function getTimeByType(type = null, cal = 0) { let now = new Date(); return strToDate(now, type, cal); } // 取得某當下時間或前後時間,輸出單位依據 type function strToDate(text, type = null,cal = 0) { let calDay = function (_d, _cal) { return new Date(_d.getTime() + (cal * 24 * 60 * 60 * 1000)); } let tarDate = new Date(text); let result = 0; if (type == "year") { result = calDay(tarDate, cal).getFullYear(); } else if (type == "month") { result = calDay(tarDate, cal).getMonth(); } else if (type == "date") { result = calDay(tarDate, cal).getDate(); } else if (type == "day") { result = calDay(tarDate, cal).getDay(); } else { result = calDay(tarDate, cal); } return result; } //取得 左下方 各系統小類 function getSubList() { let url = baseApiUrl + "/api/Device/GetMainSub"; let sendData = { building_tag: pageAct.buiTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let strHtml = ``; 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) { sysSubList.push({ sysMainTag: mainSysObj.main_system_tag, sysSubTag: subSysObj.sub_system_tag }); } strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}"> <button type="button" class="btn btn-secondary col-4"><i class="fal fa-lightbulb-on fa-2x py-2"></i></button> <button type="button" class="btn btn-secondary">${subSysObj.full_name}</button> </div>`; }) }) $("#sysSubBtnList").html(strHtml); getAlarmSub(); } }, null, "POST").send(); } //取得第一筆電錶 function getFirstEletric() { let url = baseApiUrl + "/api/Device/GetDeviceList"; let sendData = { sub_system_tag: "E4", building_tag: pageAct.buiTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { $.each(res.data, (index, floObj) => { $.each(floObj.device_list, (index2, devObj) => { tarElePath = devObj.device_number; }) }) getElectricBaja(); } }, null, "POST").send(); } //從 baja 取得電表用電量 function getElectricBaja() { let devNum = tarElePath.split("_").slice(0, 8).join("_"); let devPath = tarElePath.split("_").slice(0, 8).join("/"); let today = displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00"; 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"; 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); 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")); let yesData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year", -1) && x.timestamp.$date.$month == getTimeByType("month", -1) && x.timestamp.$date.$day == getTimeByType("date", -1)); chartEveDaysElec(todayData, yesData); chkBajaLoaded(); }) // 昨日用電量 getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, today, (data) => { $("#yesUseElec").text(data?.data[0]?.sum || 0); 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)); let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - 7 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 0 - 7) >= strToDate(x.timestamp.$cEncStr)); chartEveWeeksElec(curWeekData, prevWeekData) chkBajaLoaded(); }) //// 電表即時功率 getElectricMeterNoweDataByBaja(devPath, (data) => { console.log(data) data = data.data; $("#insPower").text(data.filter(x => x.name == "P")[0]?.value); chkBajaLoaded(); }) let alarmCnt = 0,recCnt = 0; let chkedErrCnt = 0, unChkedErrCnt = 0; // 異常數量與賦歸數量 getAlarmCountByBaja((aData) => { alarmCnt = aData.count; chkBajaLoaded(); }) getRecoverCountByBaja((rData) => { recCnt = rData.count; chkBajaLoaded(); }) // 異常數量與賦歸數量 getCheckedAckedCountByBaja((data) => { chkedErrCnt = data.count; chkBajaLoaded(); }) getUnCheckedAckedCountByBaja((uData) => { unChkedErrCnt = uData.count; chkBajaLoaded(); }) function chkBajaLoaded() { loadedCnt++; if (loadedCnt == 9) { chartErrRec(["異常數量", "賦歸數量"], [alarmCnt, recCnt]); chartErrChk(["已確認異常", "未確認異常"], [chkedErrCnt, unChkedErrCnt]); endPageLoading(); } } } // 圖表 - 今天與昨天用電量 (折線圖) 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); yesData.data = yesData.filter(x => x.timestamp.$time.$hour < curHour); let eveDayElecChartData = { labels: todayData?.data.map(x => x.timestamp.$time.$hour), datasets: [ { id:"today", type: "bar", label: '今日用電量', fill: false, backgroundColor: color.success._500, borderColor: color.success._500, pointColor: color.success._500, pointBackgroundColor: color.main1, data: todayData?.data.map(x => x.sum || YT.Math.Random(100, 1000)), order: 1, }, { id: "yesterday", type: "bar", label: '昨日用電量', fill: false, backgroundColor: color.info._100, borderColor: color.info._100, pointColor: color.info._100, pointBackgroundColor: color.info._100, data: yesData?.data.map(x => x.sum || YT.Math.Random(100, 1000)), order: 2, } ] } let eveDayElecChartOptions = { maintainAspectRatio: false, responsive: true, legend: { display: true, }, scales: { xAxes: [{ offset: true, gridLines: { color: color.fusion._500 }, ticks: { callback: function (value, index, ticks) { return value } }, }], yAxes: [{ ticks: { min:0, beginAtZero: true }, }] }, tooltips: { callbacks: { label: function (tooltipItem) { let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "昨日" : "今日"; return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH"; }, title: function (tooltipItem) { let result = tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00"; return result; } } }, } // This will get the first returned node in the jQuery collection. eveDayElecChart = new Chart(eveDayElecChartCanvas, { data: eveDayElecChartData, options: eveDayElecChartOptions }) } // 圖表 - 這週與上週用電量 (折線圖) function chartEveWeeksElec(curWeekData, prevWeekData) { let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d'); let eveWeekElecChartData = { labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))), datasets: [ { id: "today", type: "bar", label: '本週用電量', fill: false, backgroundColor: color.success._500, borderColor: color.success._500, pointColor: color.success._500, pointBackgroundColor: color.success._500, data: curWeekData.map(x => x.sum || YT.Math.Random(100, 1000)), order: 1, }, { id: "yesterday", type: "bar", label: '上週用電量', fill: false, backgroundColor: color.info._100, borderColor: color.info._100, pointColor: color.info._100, pointBackgroundColor: color.info._100, data: prevWeekData.map(x => x.sum || YT.Math.Random(100,1000)), order: 2, } ] } let eveWeekElecChartOptions = { maintainAspectRatio: false, responsive: true, legend: { display: true, }, scales: { xAxes: [{ offset: true, gridLines: { color: color.fusion._500 }, ticks: { callback: function (value, index, ticks) { return value } }, }], yAxes: [{ ticks: { min: 0, beginAtZero: true }, }] }, tooltips: { callbacks: { label: function (tooltipItem) { let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週"; return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH"; }, title: function (tooltipItem) { let result = tooltipItem[0].xLabel.toString(); return result; } } }, } // This will get the first returned node in the jQuery collection. eveWeekElecChart = new Chart(eveWeekElecChartCanvas, { data: eveWeekElecChartData, options: eveWeekElecChartOptions }) } // 圖表 - 異常與賦歸圖表 (圓餅圖) function chartErrRec(labels,datas) { let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d'); let errRecChartData = { labels: labels, datasets: [ { label: '數量', unit: '個', fill: true, backgroundColor: [color.danger._500, color.info._300], //data: errRecArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))), data: datas, } ] } let errRecChartOptions = { //maintainAspectRatio: false, responsive: true, legend: { display: true, }, tooltips: { enabled: true, }, } // This will get the first returned node in the jQuery collection. let errRecChart = new Chart(errRecChartCanvas, { type: "pie", data: errRecChartData, options: errRecChartOptions }) } // 圖表 - 異常確認與未確認圖表 (圓餅圖) function chartErrChk(labels, datas) { let errChkChartCanvas = ctx = $('#errChkChart').get(0).getContext('2d'); let errChkChartData = { labels: labels, datasets: [ { label: '數量', unit: '個', fill: true, backgroundColor: [color.danger._500, color.info._300], //data: errChkArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))), data: datas, } ] } let errChkChartOptions = { //maintainAspectRatio: false, responsive: true, legend: { display: true, }, tooltips: { enabled: true, }, } // This will get the first returned node in the jQuery collection. let errChkChart = new Chart(errChkChartCanvas, { type: "pie", data: errChkChartData, options: errChkChartOptions }) } //從 baja 訂閱 左下角各系統小類異常狀態 function getAlarmSub() { var tipEle = ''; //if (sysSubList.length != 0) { // tipEle = YT.Alert.Tip("資料讀取中...","show"); //} $(`.data-group i.fa-lightbulb-on`).removeClass("blink"); //debugger $.each(sysSubList, (idx, sysSubObj) => { //let myBaja = new subscriptionAlarms(); //let ordPath = { // "building_tag": pageAct.buiTag, // "system_tag": sysSubObj.sysMainTag, // "name_tag": sysSubObj.sysSubTag, //}; //console.log("ordPath",ordPath) //myBaja.setSubscribeAlarmsByBql(ordPath); //myBaja.setSubscribeAlarmsCallBack((data) => { // if (data.sourceState == "Offnormal") { // let devNum = data.system.replaceAll("_", "/"); // $(`.dev-group[data-id*='${devNum}'] i.fa-lightbulb-on`).addClass("blink"); // } //}) //myBaja.setSubscribeAlarmEndCallBack((data) => { // console.log(idx,sysSubList.length) // if (idx == sysSubList.length - 1) { // $(tipEle.ele).YTAlert().hide(); // } //}) }) //$(".dev-group").each((idx, ele) => { // let path = $(ele).data("id"); // let start = (new Date()).getTime(); // console.log("path enter baja:", path); // getOneSystemStateByBaja(path, (data) => { // let end = (new Date()).getTime(); // console.log("執行時間 :" + (end - start) / 1000 + " 秒","path : " + path, "輸出結果 :"+ data) // }) //}) } function show3DModel() { launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk'); } </script>