[前台] 首頁 系統大類異常樣式修正 | 系統監控 樓層小卡片大小修正
This commit is contained in:
parent
887fcef66a
commit
aecb795124
@ -798,14 +798,15 @@
|
||||
|
||||
// 從 baja 訂閱 左下角各系統小類異常狀態
|
||||
function getAlarmSub(data) {
|
||||
console.log(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('.')
|
||||
const img = $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0]?.src.split('.')
|
||||
const { length } = img
|
||||
img[length - 1] = 'gif'
|
||||
$(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src = img.join('.')
|
||||
// $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass("blink");
|
||||
$(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass("blink");
|
||||
}
|
||||
})
|
||||
$(`.dev-group img.blink`).each((idx, ele) => {
|
||||
@ -813,11 +814,867 @@
|
||||
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*='${mainSubSys}'] img`)[0].src.split('.')
|
||||
const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.')
|
||||
const { 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,
|
||||
},
|
||||
}
|
||||
|
||||
// 電梯移動訂閱程序載入
|
||||
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><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: "./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: "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: "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();
|
||||
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 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}">${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) {
|
||||
// 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: 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) {
|
||||
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(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) {
|
||||
console.log(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('.')
|
||||
const { length } = img
|
||||
img[length - 1] = 'gif'
|
||||
$(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src = img.join('.')
|
||||
// $(ele).removeClass("blink");
|
||||
$(`.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('.')
|
||||
const { length } = img
|
||||
img[length - 1] = 'png'
|
||||
$(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src = img.join('.')
|
||||
$(ele).removeClass("blink");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
$(function () {
|
||||
getBuildMenu((arr, data) => {
|
||||
console.log(arr)
|
||||
// console.log(arr)
|
||||
buildMenuData = data;
|
||||
if (arr.indexOf(4) != -1) {
|
||||
getFloDevList(arr[0] == 4 ? "left" : "right");
|
||||
@ -267,7 +267,7 @@
|
||||
} else {
|
||||
let strHtml = ``;
|
||||
$.each(res.data, (index, floObj) => {
|
||||
strHtml += `<div class='d-flex justify-content-start mb-5 ' style="">`
|
||||
strHtml += `<div class='d-flex justify-content-start mb-5'>`
|
||||
strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`
|
||||
strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
|
||||
$.each(floObj.device_list, (index2, devObj) => {
|
||||
@ -362,11 +362,12 @@
|
||||
// Card 即時狀態
|
||||
function drawStateTabBlo(devNum) {
|
||||
let devPath = devNum.replaceAll("_", "/");
|
||||
let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position");
|
||||
let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position") || "left";
|
||||
let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
|
||||
let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
|
||||
let strHtml = `<div style="height:100%;width:100%">
|
||||
<iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};min-height:100px;"></iframe>
|
||||
|
||||
let strHtml = `<div style="width:${width};height:${height};">
|
||||
<iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
|
||||
</div>`
|
||||
return strHtml;
|
||||
}
|
||||
@ -538,12 +539,12 @@
|
||||
}
|
||||
|
||||
function setHotspotPoint(myDataList = []) {
|
||||
console.log(myDataList)
|
||||
// console.log(myDataList)
|
||||
getHopspotPoint(myDataList);
|
||||
}
|
||||
|
||||
function setLightPoint(myDataList = []) {
|
||||
console.log(myDataList)
|
||||
// console.log(myDataList)
|
||||
getLightData(myDataList);
|
||||
}
|
||||
|
||||
@ -580,7 +581,6 @@
|
||||
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
|
||||
devObj.full_name = name;
|
||||
parentEle = crePosPopover(position, devObj);
|
||||
|
||||
$(parentEle).click();
|
||||
})
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<style>
|
||||
[id^=yt_tooltip] {
|
||||
width: 450px;
|
||||
min-width: 520px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div> -->
|
||||
<div class="d-flex">
|
||||
<div class="col-6 my-3">
|
||||
<div id="floChart" style="height : 80vh!important;width:100%"></div>
|
||||
<div id="floChart" style="height:80vh!important;width:100%"></div>
|
||||
</div>
|
||||
<div class="col-6 my-3">
|
||||
<div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px">
|
||||
@ -35,12 +35,14 @@
|
||||
var global_emergency_alarm_device_number = [];
|
||||
var zoomToggle = 3;
|
||||
$(function () {
|
||||
console.log("floor")
|
||||
drawHeatBar();
|
||||
getHotspotPoint(() => {
|
||||
show3DModel(pageAct.urn);
|
||||
});
|
||||
initChart();
|
||||
getFloData();
|
||||
|
||||
subDevice();
|
||||
})
|
||||
|
||||
@ -164,7 +166,7 @@
|
||||
|
||||
function initChart() {
|
||||
let chartDom = $("#floChart")[0];
|
||||
floChart = echarts.init(chartDom, null, { width: 'auto'});
|
||||
floChart = echarts.init(chartDom, null, { width: 'auto' });
|
||||
}
|
||||
|
||||
function chartHandler(url) {
|
||||
@ -182,12 +184,14 @@
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
|
||||
return `名稱：${params.data.device_node_full_name}<br>
|
||||
Guid：${params.data.device_node_guid}`
|
||||
return `<div >
|
||||
名稱：${params.data.device_node_full_name}<br>
|
||||
Guid：${params.data.device_node_guid}
|
||||
</div>`
|
||||
}
|
||||
else {
|
||||
return `名稱：${params.data.full_name}<br>
|
||||
Guid：${params.data.device_guid}`
|
||||
return `<div >名稱：${params.data.full_name}<br>
|
||||
Guid：${params.data.device_guid}</div>`
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -327,7 +331,6 @@
|
||||
let position = [params.event.event.clientX, params.event.event.clientY];
|
||||
data._dbId = data._dbId ?? null;
|
||||
parentEle = crePosPopover(position, data);
|
||||
|
||||
$(parentEle).click();
|
||||
} else {
|
||||
$(parentEle).YTTooltip("hide");
|
||||
@ -623,7 +626,7 @@
|
||||
// 重設平面圖設備資料
|
||||
function resetData() {
|
||||
|
||||
const scatter_symbol_convertData = function (data,zoom) { //正常、關閉排除CCVT(圓點)
|
||||
const scatter_symbol_convertData = function (data, zoom) { //正常、關閉排除CCVT(圓點)
|
||||
let res = [], temp = [];
|
||||
data.forEach(function (item, index) {
|
||||
if (global_emergency_alarm_device_number != undefined
|
||||
@ -1085,7 +1088,7 @@
|
||||
}
|
||||
|
||||
function setHeatMap() {
|
||||
console.log("currentData", currentData)
|
||||
if (pageAct.sysMainTag !== "LT") {
|
||||
let devices = currentData.map(x => {
|
||||
return {
|
||||
roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
|
||||
@ -1099,9 +1102,9 @@
|
||||
devices: devices,
|
||||
}
|
||||
|
||||
if (pageAct.sysMainTag !== "LT") {
|
||||
heatMap = new ADHeatMaps(option);
|
||||
heatMap.onComplete = () => {
|
||||
|
||||
$.each(currentData, (idx, dev) => {
|
||||
heatMap.changeTemp(dev.device_number, dev._temp || 0);
|
||||
})
|
||||
|
||||
@ -47,6 +47,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
<link rel="stylesheet" href="css/yourteam/plugins/yt-notice/yt-notice.css" />
|
||||
<link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
|
||||
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
|
||||
|
||||
|
||||
</head>
|
||||
<!-- BEGIN Body -->
|
||||
<!-- Possible Classes
|
||||
@ -1026,7 +1028,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
onEvent("click", "button[id^=noticeChkBtn]", function () { /**button[id^=bajaAckBtn] */
|
||||
let uuid = $(this).data("uuid");
|
||||
let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
|
||||
let url = window.location.origin + "/obix/alarm/"+uuid+"/ack";
|
||||
let myBaja = new MyBaja();
|
||||
myBaja.setMyUserAccount((data) => {
|
||||
let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
|
||||
@ -1156,12 +1158,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
let devNum = $(ele).data("number"); //設備編號
|
||||
let devGuid = $(ele).data("id"); //guid
|
||||
let devName = $(ele).data("name"); //full_name
|
||||
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
|
||||
let lightHtml = type == "light" ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>` : "";
|
||||
|
||||
let option = {
|
||||
html: `<div class="card m-1 border device-wrap" data-number="${devNum}">
|
||||
html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
|
||||
<div class="card-header p-3">
|
||||
|
||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||
<div class="position-absolute mr-5" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||||
@ -1183,8 +1186,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2 tab-content">
|
||||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
|
||||
<div class="card-body p-2 tab-content w-100">
|
||||
<div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
|
||||
${drawStateTabBlo(devNum)}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
@ -1229,24 +1232,24 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
scroll: true
|
||||
});
|
||||
// pop 視窗卡片可縮放功能初始化
|
||||
$(tooltipEle).resizable({
|
||||
resize: function (event, ui) {
|
||||
let iframe = $(ui.element).find("iframe");
|
||||
if (iframe.length != 0) {
|
||||
if (ui.size.width != ui.originalSize.width) {
|
||||
iframe.css("width", "100%");
|
||||
} else if (ui.size.height != ui.originalSize.height) {
|
||||
iframe.css("height", "100%");
|
||||
}
|
||||
}
|
||||
let cardBodyHeight = $(ui.element).find(".card-body").css("height");
|
||||
$(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
|
||||
// $(tooltipEle).resizable({
|
||||
// // resize: function (event, ui) {
|
||||
// // let iframe = $(ui.element).find("iframe");
|
||||
// // if (iframe.length != 0) {
|
||||
// // if (ui.size.width != ui.originalSize.width) {
|
||||
// // iframe.css("width", "100%");
|
||||
// // } else if (ui.size.height != ui.originalSize.height) {
|
||||
// // iframe.css("height", "100%");
|
||||
// // }
|
||||
// // }
|
||||
// // let cardBodyHeight = $(ui.element).find(".card-body").css("height");
|
||||
// // $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
|
||||
|
||||
errRecTable.draw(false)
|
||||
},
|
||||
minWidth: 200,
|
||||
minHeight: 150,
|
||||
});
|
||||
// // errRecTable.draw(false)
|
||||
// // },
|
||||
// // minWidth: 200,
|
||||
// // minHeight: 150,
|
||||
// });
|
||||
// 電梯管理 - Card table 更新
|
||||
typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||
},
|
||||
@ -1393,7 +1396,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
// Card - 異常紀錄 Table
|
||||
function callbackForErr(result) {
|
||||
console.log("@@@", result)
|
||||
console.log("@@@",result)
|
||||
if (errRecTable) {
|
||||
errRecTable.destroy();
|
||||
}
|
||||
@ -1690,7 +1693,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
|
||||
}
|
||||
}, null, "POST", true).send();
|
||||
}, null, "POST",true).send();
|
||||
}
|
||||
|
||||
function getAlarm() {
|
||||
@ -1704,7 +1707,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
{ title: "異常訊息", data: "msgText" },
|
||||
];
|
||||
// 向 niagara 取得告警資料
|
||||
getAllDeviceAlarmByBaja(null, now, false, false, function (bajaDatas) {
|
||||
getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
|
||||
let datas = bajaDatas.data;
|
||||
let titleHtml = `異常通知`;
|
||||
let notices = [];
|
||||
@ -1715,7 +1718,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name;
|
||||
|
||||
let div1 = creDiv(["col-12"]);
|
||||
let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], { uuid: data.uuid });
|
||||
let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], {uuid:data.uuid});
|
||||
let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
|
||||
btnDiv.append(button);
|
||||
// 繪製 每行告警資訊
|
||||
|
||||
@ -93,7 +93,7 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
|
||||
var _index = 0;
|
||||
var _recoverState = isRecover ? "!= null" : "= null";
|
||||
var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
|
||||
console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc")
|
||||
//console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc")
|
||||
require(['baja!'], function (baja) {
|
||||
baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc").get()
|
||||
.then(function (table) {
|
||||
@ -569,7 +569,7 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
|
||||
if (startDate_millisecond) {
|
||||
startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
|
||||
}
|
||||
console.log("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
|
||||
//console.log("告警", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
|
||||
require(['baja!'], function (baja) {
|
||||
|
||||
baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user