<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">昨日用電量 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>
昨日／今日用電比較
</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>
本週／上週用電比較
</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 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 sysIconList = [
{ mainSys: "EE", subSys: "E1", iconClass: "SVG/fuse-box_white.svg" },
{ mainSys: "EE", subSys: "E2", iconClass: "SVG/electricity_white.svg" },
{ mainSys: "EE", subSys: "E3", iconClass: "SVG/generator_white.svg" },
{ mainSys: "EE", subSys: "E4", iconClass: "SVG/electric-meter_white.svg" }, // 電表
{ mainSys: "LT", subSys: "L1", iconClass: "SVG/creative_white.svg" },
{ mainSys: "ME", subSys: "M5", iconClass: "SVG/air-flow_white.svg" }, // 送排風
{ mainSys: "ME", subSys: "M10", iconClass: "SVG/ice-crystal_white.svg" },
{ mainSys: "ME", subSys: "M12", iconClass: "SVG/leaf_white.svg" },
{ mainSys: "ELEV", subSys: "EL", iconClass: "SVG/lift-sign_white.svg" },
{ mainSys: "FE", subSys: "F1", iconClass: "SVG/fire-hydrant_white.svg" },
{ mainSys: "FE", subSys: "F2", iconClass: "SVG/lamp_white.svg" },// 排煙 0131目前沒有
{ mainSys: "WP", subSys: "W1", iconClass: "SVG/lamp_white.svg" },// 電子水表0131目前沒有
{ mainSys: "WP", subSys: "W2", iconClass: "SVG/gear_white.svg" },
{ mainSys: "WP", subSys: "P1", iconClass: "SVG/water-pollution_white.svg" },
{ mainSys: "S", subSys: "C", iconClass: "SVG/security-camera_white.svg" }, // CCTV
{ mainSys: "S", subSys: "P", iconClass: "SVG/sos_white.svg" }, // 緊急求救
{ mainSys: "S", subSys: "R", iconClass: "SVG/key-card_white.svg" }, // 門禁
{ mainSys: "P", subSys: "PSC", iconClass: "SVG/parking_white.svg" }, // 停管
{ mainSys: "LT", subSys: "L2", iconClass: "SVG/lamp_white.svg" },// 景觀照明 0131目前沒有
{ mainSys: "ME", subSys: "M1", iconClass: "SVG/lamp_white.svg" },// 儲冰 0131目前沒有
{ mainSys: "ME", subSys: "M8", iconClass: "SVG/lamp_white.svg" },// 排油煙0131目前沒有
{ mainSys: "W3", subSys: "W1", iconClass: "SVG/lamp_white.svg" },// 0131目前沒有
];
var tempSysSubText = [
{ text: "電梯系統", mainSys: "ELEV", subSys: "EL", }, // 1
{ text: "空調系統", mainSys: "ME", subSys: "M10", }, // 2
{ text: "照明系統", mainSys: "LT", subSys: "L1", }, // 3
{ text: "環境感測設備", mainSys: "ME", subSys: "M12", }, // 4
{ text: "電錶系統", mainSys: "EE", subSys: "E4", }, // 5
{ text: "供水系統", mainSys: "WP", subSys: "W2", }, // 6
{ text: "高壓配電盤", mainSys: "EE", subSys: "E1", }, // 7
{ text: "汙廢水設備", mainSys: "WP", subSys: "P1", }, // 8
{ text: "低壓配電盤", mainSys: "EE", subSys: "E2", }, //9
{ text: "緊急發電機", mainSys: "EE", subSys: "E3", },//10
{ text: "消防設備", mainSys: "FE", subSys: "F1", }, //11
{ text: "CCTV系統", mainSys: "S", subSys: "C", }, //12
{ text: "緊急求救系統", mainSys: "S", subSys: "P", }, //13
{ text: "門禁系統", mainSys: "S", subSys: "R", }, //14
{ text: "停管系統", mainSys: "P", subSys: "PSC", }, //15
{ text: "送排風系統", mainSys: "ME", subSys: "M5", }, // 2 //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");
show3DModel();
getSubList();
getFirstEletric();
});
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 < 16) {
let iconObj = sysIconList.filter(x => x.mainSys == obj.mainSys && x.subSys == obj.subSys)[0];
strHtml = `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"><img src="${iconObj.iconClass}" class="w-100"></img></button>
<button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}">${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-3 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}">${subSysObj.full_name}</button>
</div>`;
})
})
$("#sysSubBtnList").html(strHtml);
demoSubList();
}
}, null, "POST").send();
}
//取得第一筆電錶
function getFirstEletric() {
let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
subSysElecList = res.data;
tarElePath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag ?? "";
getSubBaja();
getElectricBaja();
}
}, null, "POST").send();
}
function getSubBaja() {
let devPath = tarElePath.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));
}
})
myBaja.setSubscribeElectricmeterEndCallBack(function () {
chkBajaLoaded();
})
}
//從 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";
// 今日用電量
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();
})
}
function chkBajaLoaded() {
loadedCnt++;
if (loadedCnt == 9) {
chartErrRec(["異常數量", "復歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]);
chartWorOrdErr();
chartWorOrdFin();
$(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: 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),
order: 2,
}
]
}
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) {
eveDayElecChart = new Chart(eveDayElecChartCanvas, {
data: eveDayElecChartData,
options: eveDayElecChartOptions
})
} 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) {
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: 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),
order: 2,
}
]
}
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) {
let result = tooltipItem[0]?.xLabel.toString();
return result;
}
}
},
}
if (eveWeekElecChart == null) {
eveWeekElecChart = new Chart(eveWeekElecChartCanvas, {
data: eveWeekElecChartData,
options: 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(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: datas,
}
]
}
let errRecChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
},
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(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: datas,
}
]
}
let errChkChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
},
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(labels, datas) {
labels = ["異常未派工", "異常已派工"]
datas = [5, 9]
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,
legend: {
display: true,
},
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(labels, datas) {
labels = ["工單已完成", "工單未完成"]
datas = [5, 9]
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,
legend: {
display: true,
},
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("/");
$(`.btn-group.dev-group[data-id*='${mainSubSys}'] i`).addClass("blink");
}
})
$(`.dev-group i.fa-lightbulb-on.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) {
$(ele).removeClass("blink");
}
})
}
function show3DModel() {
launchViewerNoTools(pageAct.urn, (viewer) => {
let elevOption = {
selector: "#forgeViewer",
viewer: viewer,
ordPath: {
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
},
}
// 電梯移動訂閱程序載入
let forge3DElev = new Forge3DElevFull(elevOption);
forge3DElev.bajaEndCallback = function () {
endPageLoading();
}
forge3DElev.init();
});
}
$(window).on("timeout:5m", function () {
console.log("五分鐘更新")
getElectricBaja();
})
onEvent("click", "button[id^=sysSubCardBtn]", function () {
let subSysTag = $(this).data("id");
$(`#subSysBtn${subSysTag}`).click();
})
</script>