1268 lines
51 KiB
HTML
1268 lines
51 KiB
HTML
<main id="js-page-content" role="main" class="page-content">
|
|
<div class="top-building-text-container"></div>
|
|
|
|
<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 h-100">
|
|
<div class="col-sm-12 col-lg-4">
|
|
<div class="row" id="sysSubBtnList"></div>
|
|
</div>
|
|
<div class="col-sm-12 col-lg-8">
|
|
<div class="row h-100">
|
|
<div class="col-8 h-100">
|
|
<div id="panel-3"
|
|
class="panel"
|
|
data-panel-sortable
|
|
data-panel-collapsed
|
|
data-panel-close
|
|
style="height: calc(100% - 1.5rem)">
|
|
<div class="panel-hdr">
|
|
<h2>本月／上月用電比較 (kWh)</h2>
|
|
</div>
|
|
<div class="panel-container show h-100">
|
|
<div class="panel-content poisition-relative h-100">
|
|
<div style="width: 100%; min-height: 450px">
|
|
<canvas class="chart" id="eveMonElecChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="row h-100">
|
|
<div class="col-12 h-50">
|
|
<div id="panel-3"
|
|
class="panel"
|
|
style="height: calc(100% - 1.5rem)">
|
|
<div class="panel-hdr">
|
|
<h2>即時契約容量占比 - 第一校區</h2>
|
|
</div>
|
|
<div class="panel-container show h-100">
|
|
<div class="h-100 py-2" id="contractValueChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 h-50">
|
|
<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="h-100 py-2" id="contractValueChart2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 eveMonElecChart = null;
|
|
var worOrdErrChart = null;
|
|
var worOrdFinChart = null;
|
|
var errRecChart = null;
|
|
var errChkChart = null;
|
|
var contractValueChart = null;
|
|
var contractValueChart2 = null;
|
|
var loadedCnt = 0;
|
|
var chartDataCnt = {
|
|
alarmCnt: 0,
|
|
recCnt: 0,
|
|
chkedErrCnt: 0,
|
|
unChkedErrCnt: 0,
|
|
};
|
|
var contractCapacity = 0;
|
|
var contractCapacityForchart1, contractCapacityForchart2;
|
|
|
|
$(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="systemMonitor" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
|
|
<img src="${iconObj.iconClass}" class="w-100"></img>
|
|
</button>
|
|
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled 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="systemMonitor" type="button" class="btn btn-secondary col-4" >
|
|
<img src="${iconClass}" class="w-100 "></img>
|
|
</button>
|
|
<button name="topFunBtn" data-page="systemMonitor" 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/Dashboard/GetContractValue";
|
|
let sendData = pageAct.buiTag;
|
|
objSendData.Data = sendData;
|
|
ytAjax = new YourTeam.Ajax(
|
|
url,
|
|
objSendData,
|
|
function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
} else {
|
|
contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
|
|
getFirstEletric();
|
|
getContractValueChange("Arean1");
|
|
getContractValueChange("Arean2");
|
|
}
|
|
},
|
|
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();
|
|
});
|
|
}
|
|
|
|
function getContractValueChange(compus) {
|
|
let devPath = `Data/${compus}`;
|
|
BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
|
|
let value = data.find(({ point_name }) => point_name === "P")?.value;
|
|
|
|
if (compus === "Arean1") {
|
|
if (data.some(({ point_name }) => point_name === "Capacity")) {
|
|
contractCapacityForchart1 = data.find(
|
|
({ point_name }) => point_name === "Capacity"
|
|
)?.value;
|
|
}
|
|
chartContractValue(
|
|
"contractValueChart",
|
|
(value / contractCapacityForchart1).roundDecimal(2) * 100
|
|
);
|
|
} else {
|
|
if (data.some(({ point_name }) => point_name === "Capacity")) {
|
|
contractCapacityForchart2 = data.find(
|
|
({ point_name }) => point_name === "Capacity"
|
|
)?.value;
|
|
}
|
|
chartContractValue(
|
|
"contractValueChart2",
|
|
(value / contractCapacityForchart2).roundDecimal(2) * 100
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
//從 baja 取得電表用電量
|
|
function getElectricBaja() {
|
|
let devNum =
|
|
tarElePath.split("/")[0] +
|
|
"/" +
|
|
tarElePath.split("/")[1].split("_").slice(0, 9).join("_");
|
|
let devPath =
|
|
tarElePath.split("/")[0] +
|
|
"/" +
|
|
tarElePath.split("/")[1].split("_").slice(0, 9).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, n4Sup, today, tomorrow, (data) => {
|
|
let result = data?.data[0]?.sum;
|
|
result = result ? parseFloat(result).toFixed(2) : 0;
|
|
$("#todayUseElec").text(result);
|
|
chkBajaLoaded();
|
|
});
|
|
|
|
// 今日用電量 (每小時)
|
|
getElectricMeterHourDataByBaja(
|
|
devNum,
|
|
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, n4Sup, yesterday, today, (data) => {
|
|
let result = data?.data[0]?.sum;
|
|
result = result ? parseFloat(result).toFixed(2) : 0;
|
|
$("#yesUseElec").text(result);
|
|
chkBajaLoaded();
|
|
});
|
|
|
|
// 本週與上週用電量 (每天)
|
|
getElectricMeterDayDataByBaja(
|
|
devNum,
|
|
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();
|
|
}
|
|
);
|
|
|
|
// 本月及上月用電
|
|
const prevMonth = `${new Date().getFullYear()}-${new Date().getMonth() < 10 ? "0" : ""
|
|
}${new Date().getMonth()}-01T00:00:00`;
|
|
const thisMonth = `${new Date().getFullYear()}-${new Date().getMonth() < 10 ? "0" : ""
|
|
}${new Date().getMonth() + 2}-01T00:00:00`;
|
|
getElectricMeterDayDataByBaja(
|
|
devNum,
|
|
n4Sup,
|
|
prevMonth,
|
|
thisMonth,
|
|
(data) => {
|
|
const cur = new Date().getMonth();
|
|
const pre = new Date().getMonth() - 1;
|
|
let curMonthData = data.data.filter(
|
|
(x) => x.timestamp.$date.$month === cur
|
|
);
|
|
let prevMonthData = data.data.filter(
|
|
(x) => x.timestamp.$date.$month === pre
|
|
);
|
|
chartEveMonsElec(curMonthData, prevMonthData);
|
|
// chkBajaLoaded();
|
|
}
|
|
);
|
|
|
|
// 異常數量與復歸數量
|
|
// getAlarmCountByBaja((aData) => {
|
|
// chartDataCnt.alarmCnt = aData;
|
|
// chkBajaLoaded();
|
|
// });
|
|
// getRecoverCountByBaja((rData) => {
|
|
// chartDataCnt.recCnt = rData;
|
|
// chkBajaLoaded();
|
|
// });
|
|
// // 異常數量與復歸數量
|
|
// getCheckedAckedCountByBaja((data) => {
|
|
// chartDataCnt.chkedErrCnt = data;
|
|
// chkBajaLoaded();
|
|
// });
|
|
|
|
// getUnCheckedAckedCountByBaja((uData) => {
|
|
// chartDataCnt.unChkedErrCnt = uData;
|
|
// 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 chartEveMonsElec(curMonData, prevMonData) {
|
|
let eveMonElecChartCanvas = $("#eveMonElecChart").get(0).getContext("2d");
|
|
|
|
let eveMonElecChartData = {
|
|
labels: curMonData.map((x) => x.timestamp.$date.$day),
|
|
datasets: [
|
|
{
|
|
id: "curMon",
|
|
type: "bar",
|
|
label: "本月用電量",
|
|
fill: false,
|
|
backgroundColor: color.success._500,
|
|
borderColor: color.success._500,
|
|
pointColor: color.success._500,
|
|
pointBackgroundColor: color.success._500,
|
|
data: curMonData.map((x) => x.sum),
|
|
order: 2,
|
|
},
|
|
{
|
|
id: "preMon",
|
|
type: "bar",
|
|
label: "上月用電量",
|
|
fill: false,
|
|
backgroundColor: color.info._100,
|
|
borderColor: color.info._100,
|
|
pointColor: color.info._100,
|
|
pointBackgroundColor: color.info._100,
|
|
data: prevMonData.map((x) => x.sum),
|
|
order: 1,
|
|
},
|
|
],
|
|
};
|
|
// console.log(eveWeekElecChartData)
|
|
let eveMonElecChartOptions = {
|
|
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 (eveMonElecChart == null) {
|
|
eveMonElecChart = new Chart(eveMonElecChartCanvas, {
|
|
data: eveMonElecChartData,
|
|
options: eveMonElecChartOptions,
|
|
});
|
|
// console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions)
|
|
} else {
|
|
eveMonElecChart.data.datasets.forEach((dataset) => {
|
|
if (dataset.order == 1) {
|
|
dataset.data = curMonData.map((x) => x.sum);
|
|
} else {
|
|
dataset.data = prevMonData.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;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 圖表 - 取得契約容量
|
|
function chartContractValue(ele, value) {
|
|
var chartDom = document.getElementById(ele);
|
|
contractValueChart = echarts.init(chartDom, null, {
|
|
renderer: "canvas",
|
|
useDirtyRect: false,
|
|
});
|
|
|
|
let option = {
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 30,
|
|
color: [
|
|
[0.3, "#008000"],
|
|
[0.7, "#FFA500"],
|
|
[1, "#FF0000"],
|
|
],
|
|
},
|
|
},
|
|
pointer: {
|
|
width: 10,
|
|
itemStyle: {
|
|
color: "auto",
|
|
},
|
|
},
|
|
axisTick: {
|
|
distance: -30,
|
|
length: 8,
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 2,
|
|
},
|
|
},
|
|
splitLine: {
|
|
distance: -30,
|
|
length: 30,
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 4,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "inherit",
|
|
distance: -30,
|
|
fontSize: 20,
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
formatter: "{value} %",
|
|
color: "inherit",
|
|
fontSize: 28,
|
|
},
|
|
data: [
|
|
{
|
|
value,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
option && contractValueChart.setOption(option);
|
|
}
|
|
|
|
function changeContractValueChart(value) {
|
|
contractValueChart.setOption({
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
value,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
// 從 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() {
|
|
if (typeof launchViewerNoTools != "undefined") {
|
|
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}[data-building-tag='${buildingTagOnJquery(
|
|
pageAct.buiTag
|
|
)}']`
|
|
).click();
|
|
});
|
|
</script>
|