<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 class="position-absolute index-img" style="width: 96%; height: 96%"> <img src="img/backgrounds/bg_w.png" style="width: 100%" /> </div> <!-- <video playsInline autoPlay muted> <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" /> </video> --> </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">昨日用電量 kWH</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>昨日/今日用電比較 (kWh)</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">即時功率 kW</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"> <span id="insPowerPer">--</span> <small class="m-0 l-h-n">即時契約容量占比 %</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>本週/上週用電比較 (kWh)</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-4"> <div class="row" id="sysSubBtnList"></div> </div> <div class="col-sm-12 col-lg-4"> <div class="row"></div> </div> <div class="col-sm-12 col-lg-4"> <div class="row h-100"> <div class="col-lg-6"> <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)"> <div class="panel-hdr"> <h2>異常狀態</h2> </div> <div class="panel-container h-100 show"> <div class="panel-content poisition-relative p-0 row p-0 h-100"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height: 150px" > <canvas class="chart" id="errRecChart"></canvas> </div> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height: 150px" > <canvas class="chart" id="errChkChart"></canvas> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)"> <div class="panel-hdr"> <h2>工單進度</h2> </div> <div class="panel-container h-100 show"> <div class="panel-content poisition-relative row p-0 h-100 p-0"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height: 150px" > <canvas class="chart" id="worOrdErrChart"></canvas> </div> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height: 150px" > <canvas class="chart" id="worOrdFinChart"></canvas> </div> </div> </div> </div> </div> </div> </div> </div> </main> <script> var tarElePath = ""; var sysSubList = []; var viewer3DNodeIds = []; var eveDayElecChart = null; var eveWeekElecChart = null; var worOrdErrChart = null; var worOrdFinChart = null; var errRecChart = null; var errChkChart = null; var loadedCnt = 0; var chartDataCnt = { alarmCnt: 0, recCnt: 0, chkedErrCnt: 0, unChkedErrCnt: 0, }; var contractCapacity = 0; var sysIconList = [ { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" }, { mainSys: "EE", subSys: "E2", iconClass: "./gif/E2_white.png" }, { mainSys: "EE", subSys: "E3", iconClass: "./gif/E3_white.png" }, { mainSys: "EE", subSys: "E4", iconClass: "./gif/E4-1_white.png" }, // 電表 { mainSys: "LT", subSys: "L1", iconClass: "./gif/L1_white.png" }, { mainSys: "LT", subSys: "L2", iconClass: "./gif/L2_white.png" }, // 景觀照明 0131目前沒有 { mainSys: "ME", subSys: "M1", iconClass: "./gif/M1_white.png" }, // 儲冰 0131目前沒有 { mainSys: "ME", subSys: "M5", iconClass: "./gif/M5-2_white.png" }, // 送排風 { mainSys: "ME", subSys: "M8", iconClass: "./gif/M8_white.png" }, // 排油煙0131目前沒有 { mainSys: "ME", subSys: "M10", iconClass: "./gif/M10_white.png" }, { mainSys: "ME", subSys: "M12", iconClass: "./gif/M12_white.png" }, { mainSys: "ELEV", subSys: "EL", iconClass: "./gif/EL_white.png" }, { mainSys: "FE", subSys: "F1", iconClass: "./gif/F1_white.png" }, { mainSys: "FE", subSys: "F2", iconClass: "./gif/lamp_white.png" }, // 排煙 0131目前沒有 { mainSys: "WP", subSys: "W1", iconClass: "./gif/W1_white.png" }, // 電子水表0131目前沒有 { mainSys: "WP", subSys: "W2", iconClass: "./gif/W2_white.png" }, { mainSys: "WP", subSys: "P1", iconClass: "./gif/P1_white.png" }, { mainSys: "S", subSys: "C", iconClass: "./gif/C_white.png" }, // CCTV { mainSys: "S", subSys: "P", iconClass: "./gif/P_white.png" }, // 緊急求救 { mainSys: "S", subSys: "R", iconClass: "./gif/R_white.png" }, // 門禁 { mainSys: "P", subSys: "PSC", iconClass: "./gif/PSC_white.png" }, // 停管 { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有 ]; var tempSysSubText = [ { text: "水錶系統", mainSys: "WP", subSys: "W1" }, { text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2 { text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3 { text: "CCTV系統", mainSys: "S", subSys: "C" }, //12 { text: "太陽能管理", mainSys: "S", subSys: "C" }, //12 { text: "冰水主機", mainSys: "WP", subSys: "W2" }, // 6 { text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10 { text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1 { text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4 { text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5 { text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7 { text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8 { text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9 { text: "消防設備", mainSys: "FE", subSys: "F1" }, //11 { text: "門禁系統", mainSys: "S", subSys: "R" }, //13 { text: "停管系統", mainSys: "P", subSys: "PSC" }, //14 { text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15 { text: "送排風系統", mainSys: "ME", subSys: "M5" }, //16 //{ text: "景觀照明系統", mainSys: "LT", subSys: "L2", }, //{ text: "儲冰系統", mainSys: "ME", subSys: "M1", }, // { text: "排油煙設備", mainSys: "ME", subSys: "M8", }, //{ text: "排煙系統", mainSys: "FE", subSys: "F2", }, //{ text: "電子水錶", mainSys: "WP", subSys: "W1", }, // { text: "熱水系統", mainSys: "W3", subSys: "W1", }, ]; $(document).ready(function () { $(loadEle).Loading("start"); $(loadEle).Loading("close"); show3DModel(); getSubList(); getAutDemVal(); }); function demoSubList() { let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]") .toArray() .map((x) => $(x).text()); let strHtml = ``; $.each(tempSysSubText, (idx, obj) => { if ( isExiNames.indexOf(obj.text) == -1 && $("#sysSubBtnList .dev-group").length < 8 ) { let iconObj = sysIconList.filter( (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys )[0]; strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group"> <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center"> <img src="${iconObj.iconClass}" class="w-100"></img> </button> <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button> </div>`; $("#sysSubBtnList").append(strHtml); } }); } //取得 左下方 各系統小類 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, }); } let iconClass = sysIconList.filter( (x) => x.mainSys == mainSysObj.main_system_tag && x.subSys == subSysObj.sub_system_tag )[0]?.iconClass; strHtml += `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}"> <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"> <img src="${iconClass}" class="w-100 "></img> </button> <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag}" style="font-size: 20px">${subSysObj.full_name}</button> </div>`; }); }); $("#sysSubBtnList").html(strHtml); demoSubList(); } }, null, "POST" ).send(); } // 取得 自動須量 function getAutDemVal() { let url = baseApiUrl + "/api/Energe/GetAutDemVal"; 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 setKeyValue = {}; $.each(res.data || [], (idx, data) => { setKeyValue[data.system_key] = data.system_value || 0; }) contractCapacity = setKeyValue["contract_capacity"]; getFirstEletric() } }, null, "POST" ).send(); } //取得第一筆電錶 function getFirstEletric() { let url = baseApiUrl + "/api/Dashboard/GetTotalElec"; ytAjax = new YourTeam.Ajax( url, null, function (res) { if (!res || res.code != "0000" || !res.data) { } else { subSysElecList = res.data; tarElePath = subSysElecList.filter((x) => x.building_tag == pageAct.buiTag)[0] ?.device_number ?? ""; getSubBaja(); getElectricBaja(); } }, null, "POST" ).send(); } function getSubBaja() { let devPath = tarElePath.split("/")[1].split("_").slice(0, 8).join("/"); let tempOrdPath = { devicePath: devPath }; let myBaja = new subscriptionElectricmeter(); myBaja.setSubscribeElectricmeterByBql(tempOrdPath); myBaja.setSubscribeElectricmeterCallBack(function (data) { if (data.point_name == "P") { let value = parseFloat(data.value).roundDecimal(2); $("#insPower").text(value); // $("#insPowerPer").text((value / 4).roundDecimal(2)); $("#insPowerPer").text((value / contractCapacity).roundDecimal(2)); } }); myBaja.setSubscribeElectricmeterEndCallBack(function () { chkBajaLoaded(); }); } //從 baja 取得電表用電量 function getElectricBaja() { let devNum = tarElePath.split("/")[0] + "/" + tarElePath.split("/")[1].split("_").slice(0, 8).join("_"); let devPath = tarElePath.split("/")[0] + "/" + tarElePath.split("/")[1].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"; // 今日用電量 getElectricMeterDayDataByBaja( devNum + "_KWH", n4Sup, today, tomorrow, (data) => { let result = data?.data[0]?.sum; result = result ? parseFloat(result).toFixed(2) : 0; $("#todayUseElec").text(result); chkBajaLoaded(); } ); // 今日用電量 (每小時) getElectricMeterHourDataByBaja( devNum + "_KWH", n4Sup, 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", n4Sup, yesterday, today, (data) => { let result = data?.data[0]?.sum; result = result ? parseFloat(result).toFixed(2) : 0; $("#yesUseElec").text(result); chkBajaLoaded(); } ); // 本週與上週用電量 (每天) getElectricMeterDayDataByBaja( devNum + "_KWH", n4Sup, 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, 1 - 7) <= strToDate(x.timestamp.$cEncStr) ); let prevWeekData = data.data.filter( (x) => strToDate(displayDate(new Date(), "date"), null, 1 - 14) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 1 - 7) >= strToDate(x.timestamp.$cEncStr) ); chartEveWeeksElec(curWeekData, prevWeekData); chkBajaLoaded(); } ); // 異常數量與復歸數量 getAlarmCountByBaja((aData) => { chartDataCnt.alarmCnt = aData.count; chkBajaLoaded(); }); getRecoverCountByBaja((rData) => { chartDataCnt.recCnt = rData.count; chkBajaLoaded(); }); // 異常數量與復歸數量 getCheckedAckedCountByBaja((data) => { chartDataCnt.chkedErrCnt = data.count; chkBajaLoaded(); }); getUnCheckedAckedCountByBaja((uData) => { chartDataCnt.unChkedErrCnt = uData.count; chkBajaLoaded(); }); // 獲取所有異常數量 getAlarmForChartDataByBaja((allAlarmCount) => { // 呼叫 api 找出所有有維修單的資料 (已派工) // 所有異常數量 - 維修單數量(已派工) = 未派工 let url = baseApiUrl + "/operation/OpeRecListAllTime"; const token = cookies.get("JWT-Authorization"); fetch(url, { method: "POST", body: { data: "{}", }, headers: { "Content-Type": "application/json", Authorization: `bearer ${token}`, }, }) .then((res) => res.json()) .then((data) => { // console.log(allAlarmCount) const { finish, notfinish } = data.data; chartWorOrdFin([finish, notfinish]); // 已完成 未完成 chartWorOrdErr([ allAlarmCount - (finish + notfinish), finish + notfinish, ]); }); }); } function chkBajaLoaded() { loadedCnt++; if (loadedCnt == 9) { const ErrRecLabel = () => { const normal = `異常 ${chartDataCnt.alarmCnt}`; const offnormal = `復歸 ${chartDataCnt.recCnt}`; return [normal, offnormal]; }; const ErrChkLabel = () => { const acked = `已確認 ${chartDataCnt.chkedErrCnt}`; const unacked = `未確認 ${chartDataCnt.unChkedErrCnt}`; return [acked, unacked]; }; chartErrRec(ErrRecLabel, [chartDataCnt.alarmCnt, chartDataCnt.recCnt]); chartErrChk(ErrChkLabel, [ chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt, ]); $(loadEle).Loading("close"); } } // 圖表 - 今天與昨天用電量 (長條圖) 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), order: 2, }, { 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), order: 1, }, ], }; let eveDayElecChartOptions = { maintainAspectRatio: false, responsive: true, legend: { display: true, }, scales: { x: { offset: true, grid: { color: color.fusion._500 }, }, y: { beginAtZero: true, ticks: { min: 0, }, }, }, 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; }, }, }, }; if (eveDayElecChart == null) { // console.log(eveDayElecChart) eveDayElecChart = new Chart(eveDayElecChartCanvas, { data: eveDayElecChartData, options: eveDayElecChartOptions, }); // console.log(eveDayElecChart) } else { eveDayElecChart.data.datasets.forEach((dataset) => { if (dataset.order == 1) { dataset.data = todayData?.data.map((x) => x.sum); } else { dataset.data = yesData?.data.map((x) => x.sum); } }); } } // 圖表 - 這週與上週用電量 (長條圖) function chartEveWeeksElec(curWeekData, prevWeekData) { // console.log(curWeekData.map(x => x.sum),prevWeekData.map(x => x.sum)) 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), order: 2, }, { 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), order: 1, }, ], }; // console.log(eveWeekElecChartData) let eveWeekElecChartOptions = { maintainAspectRatio: false, responsive: true, legend: { display: true, }, scales: { x: { offset: true, grid: { color: color.fusion._500 }, }, y: { beginAtZero: true, ticks: { min: 0, }, }, }, tooltips: { callbacks: { label: function (tooltipItem) { let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週"; return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH"; }, title: function (tooltipItem) { // console.log(tooltipItem) let result = tooltipItem[0]?.xLabel.toString(); return result; }, }, }, }; // console.log(eveWeekElecChartOptions) if (eveWeekElecChart == null) { eveWeekElecChart = new Chart(eveWeekElecChartCanvas, { data: eveWeekElecChartData, options: eveWeekElecChartOptions, }); // console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions) } else { eveWeekElecChart.data.datasets.forEach((dataset) => { if (dataset.order == 1) { dataset.data = curWeekData.map((x) => x.sum); } else { dataset.data = prevWeekData.map((x) => x.sum); } }); } } // 圖表 - 異常與復歸圖表 (圓餅圖) function chartErrRec(labelsFn, datas) { let errRecChartCanvas = (ctx = $("#errRecChart").get(0).getContext("2d")); let errRecChartData = { labels: labelsFn(), datasets: [ { label: "數量", unit: "個", fill: true, backgroundColor: [color.danger._500, color.info._300], data: datas, }, ], }; let errRecChartOptions = { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: true, labels: { color: "#fff", }, }, }, tooltips: { enabled: true, }, }; // This will get the first returned node in the jQuery collection. if (errRecChart == null) { errRecChart = new Chart(errRecChartCanvas, { type: "pie", data: errRecChartData, options: errRecChartOptions, }); } else { errRecChart.data.datasets.forEach((dataset) => { dataset.data = datas; }); } } // 圖表 - 異常確認與未確認圖表 (圓餅圖) function chartErrChk(labelsFn, datas) { let errChkChartCanvas = (ctx = $("#errChkChart").get(0).getContext("2d")); let errChkChartData = { labels: labelsFn(), datasets: [ { label: "數量", unit: "個", fill: true, backgroundColor: [color.danger._500, color.info._300], data: datas, }, ], }; let errChkChartOptions = { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: true, labels: { color: "#fff", }, }, }, tooltips: { enabled: true, }, }; if (errChkChart == null) { errChkChart = new Chart(errChkChartCanvas, { type: "pie", data: errChkChartData, options: errChkChartOptions, }); } else { errChkChart.data.datasets.forEach((dataset) => { dataset.data = datas; }); } } // 圖表 - 異常未派工與異常已派工 (圓環圖) function chartWorOrdErr(datas) { let labels = [`未派工 ${datas[0]}`, `已派工 ${datas[1]}`]; let worOrdErrChartCanvas = (ctx = $("#worOrdErrChart") .get(0) .getContext("2d")); let worOrdErrChartData = { labels: labels, datasets: [ { label: "數量", unit: "個", fill: true, backgroundColor: [color.danger._500, color.info._300], data: datas, }, ], }; let worOrdErrChartOptions = { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: true, labels: { color: "#fff", }, }, }, tooltips: { enabled: true, }, }; if (worOrdErrChart == null) { worOrdErrChart = new Chart(worOrdErrChartCanvas, { type: "doughnut", data: worOrdErrChartData, options: worOrdErrChartOptions, }); } else { worOrdErrChart.data.datasets.forEach((dataset) => { dataset.data = datas; }); } } // 圖表 - 工單已完成與工單未完成 (圓環圖) function chartWorOrdFin(datas) { let labels = [`已完成 ${datas[0]}`, `未完成 ${datas[1]}`]; let worOrdFinChartCanvas = (ctx = $("#worOrdFinChart") .get(0) .getContext("2d")); let worOrdFinChartData = { labels: labels, datasets: [ { label: "數量", unit: "個", fill: true, backgroundColor: [color.danger._500, color.info._300], data: datas, }, ], }; let worOrdFinChartOptions = { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: true, labels: { color: "#fff", }, }, }, tooltips: { enabled: true, }, }; if (worOrdFinChart == null) { worOrdFinChart = new Chart(worOrdFinChartCanvas, { type: "doughnut", data: worOrdFinChartData, options: worOrdFinChartOptions, }); } else { worOrdFinChart.data.datasets.forEach((dataset) => { dataset.data = datas; }); } } // 從 baja 訂閱 左下角各系統小類異常狀態 function getAlarmSub(data) { $.each(data.data, (idx, alaObj) => { if (alaObj.alarmClass.indexOf("_") != -1) { let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/"); const img = $( `.btn-group.dev-group[data-id*='${mainSubSys}'] img` )[0]?.src.split("."); if (img?.length > 0) { img[img.length - 1] = "gif"; $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src = img.join("."); // console.log($(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src) $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass( "blink" ); } } }); $(`.dev-group img.blink`).each((idx, ele) => { let devPath = $(ele).parents(".dev-group").data("id"); let sysPath = devPath.split("/").slice(3, 5).join("/"); let alaDevPath = data.data.map((x) => x.alarmClass?.split("_").slice(0, 2).join("/") ); if (alaDevPath.indexOf(sysPath) == -1) { const img = $( `.btn-group.dev-group[data-id*='${sysPath}'] img` )[0]?.src.split("."); if (img?.length) { img[img.length - 1] = "png"; $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src = img.join("."); $(ele).removeClass("blink"); } } }); } function show3DModel() { launchViewerNoTools( pageAct.urn, (viewer) => { let elevOption = { selector: "#forgeViewer", viewer: viewer, ordPath: { area_tag: pageAct.AreaTag, building_tag: pageAct.buiTag, }, }; // 電梯移動訂閱程序載入 if (elevatorShow) { let forge3DElev = new Forge3DElevFull(elevOption); forge3DElev.bajaEndCallback = function () { endPageLoading(); }; forge3DElev.init(); } }, () => { endPageLoading(); } ); } $(window).on("timeout:5m", function () { console.log("五分鐘更新"); getElectricBaja(); }); onEvent("click", "button[id^=sysSubCardBtn]", function () { let subSysTag = $(this).data("id"); $(`#subSysBtn${subSysTag}`).click(); }); </script>