jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[前台] 告警系統 異常類別顯示修正 | 維修新增編輯錯誤修正 | 監控系統(電梯) 小卡片內容修改 | 監控系統 forgeViewer 高度控制

Browse Source
This commit is contained in:
Celeste 2023-03-10 15:43:43 +08:00
parent bd65e50f85
commit f528ab8737
6 changed files with 1962 additions and 1874 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Frontend/_alert.html
View File

@ -6,17 +6,25 @@
<div class="col-auto">
<div class="btn-group">
<button id="returnFalse" onclick="setReturn(false)" type="button"
class="btn btn-secondary waves-effect waves-themed">未復歸</button>
class="btn btn-secondary waves-effect waves-themed">
未復歸
</button>
<button id="returnTrue" onclick="setReturn(true)" type="button"
class="btn btn-secondary waves-effect waves-themed">已復歸</button>
class="btn btn-secondary waves-effect waves-themed">
已復歸
</button>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button id="unconfirmed" onclick="setConfirm(false)" type="button"
class="btn btn-secondary waves-effect waves-themed">未確認</button>
class="btn btn-secondary waves-effect waves-themed">
未確認
</button>
<button id="confirmed" onclick="setConfirm(true)" type="button"
class="btn btn-secondary waves-effect waves-themed">已確認</button>
class="btn btn-secondary waves-effect waves-themed">
已確認
</button>
</div>
</div>
<div class="col-auto">
@ -702,7 +710,7 @@
"title": "異常類別",
"data": "alarmClass",
"render": function (data) {
return data.split('_')[0] + "-" + data.split('_')[1];
return data.includes("_") ? data.split('_')[0] + "-" + data.split('_')[1] : data;
}
},
{

16
Frontend/_dashboard.html
View File

@ -43,8 +43,7 @@
</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="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">
@ -462,7 +461,7 @@
}
}).then(res => res.json())
.then(data => {
console.log(allAlarmCount)
// console.log(allAlarmCount)
const { finish, notfinish } = data.data
chartWorOrdFin([finish, notfinish]); // 已完成 未完成
chartWorOrdErr([allAlarmCount - (finish + notfinish), finish + notfinish]);
@ -561,10 +560,12 @@
}
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) {
@ -865,9 +866,10 @@
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) {
img[length - 1] = 'gif';
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");
}
}
@ -879,7 +881,7 @@
if (alaDevPath.indexOf(sysPath) == -1) {
const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.');
if (img?.length) {
img[length - 1] = 'png';
img[img.length - 1] = 'png';
$(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src = img.join('.')
$(ele).removeClass("blink");
}
@ -901,11 +903,13 @@
}
// 電梯移動訂閱程序載入
if (elevatorShow) {
let forge3DElev = new Forge3DElevFull(elevOption);
forge3DElev.bajaEndCallback = function () {
endPageLoading();
}
forge3DElev.init();
}
});
}

76
Frontend/_operation.html
View File

@ -8,13 +8,22 @@
<div class="btn-group">
<button type="button" onclick="setType(2)" class="btn btn-secondary waves-effect waves-themed">維修</button>
<button type="button" onclick="setType(1)" class="btn btn-secondary waves-effect waves-themed">保養記錄</button>
<button type="button" onclick="setType(null)" class="btn btn-secondary waves-effect waves-themed">廠商資料</button>
<button type="button" onclick="setType(null)"
class="btn btn-secondary waves-effect waves-themed">
廠商資料
</button>
</div>
</div>
<div id="setDate" class="col-auto">
<div class="btn-group">
<button onclick="setDate('tdy')" type="button" class="btn btn-secondary waves-effect waves-themed">今天</button>
<button onclick="setDate('ytd')" type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button>
<button onclick="setDate('tdy')" type="button"
class="btn btn-secondary waves-effect waves-themed">
今天
</button>
<button onclick="setDate('ytd')" type="button"
class="btn btn-secondary waves-effect waves-themed">
昨天
</button>
</div>
</div>
<div class="col-auto">
@ -60,7 +69,7 @@
<a href="#" id="newForm" class="btn btn-success" data-toggle="modal" data-target="#opeFirmModal">新增</a>
<a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
<span class="fal fa-file-excel mr-1"></span>
匯出
<span>匯出</span>
</a>
</div>
<table id="opeFirmTable" class="table table-bordered table-striped text-center m-0 w-100">
@ -76,7 +85,8 @@
</main>
<!-- Modal center 廠商資料 -->
<div class="modal fade" id="opeFirmModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal fade" id="opeFirmModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -152,7 +162,8 @@
</div>
<!-- Modal center 維修-->
<div class="modal fade" id="opeRecModal_2" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal fade" id="opeRecModal_2" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -222,12 +233,14 @@
<div class="form-control" id="inpStatus_2">
<div class="row container">
<div class="">
<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_0" value="0" data-value="0" checked>
<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_0" value="0"
data-value="0" checked>
<label class="form-label" for="inpSta_0">未完成</label>
</div>
<div class="px-4">
<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_1" value="1" data-value="1">
<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_1" value="1"
data-value="1">
<label class="form-label" for="inpSta_1">完成</label>
</div>
</div>
@ -251,7 +264,8 @@
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="inpDescription_2">結果描述</label>
<textarea class="form-control" type="text" id="inpDescription_2" name="inpDescription_2" rows="7"></textarea>
<textarea class="form-control" type="text" id="inpDescription_2" name="inpDescription_2"
rows="7"></textarea>
</div>
</div>
<div class="col-md-12">
@ -288,7 +302,8 @@
</div>
<!-- Modal center 保養 -->
<div class="modal fade" id="opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal fade" id="opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -350,12 +365,14 @@
<div class="form-control" id="inpStatus">
<div class="row container">
<div class="">
<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" data-value="0" value="0" checked>
<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" data-value="0"
value="0" checked>
<label class="form-label" for="inpSta_0">未完成</label>
</div>
<div class="px-4">
<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" data-value="1" value="1">
<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" data-value="1"
value="1">
<label class="form-label" for="inpSta_1">完成</label>
</div>
</div>
@ -379,7 +396,8 @@
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="inpDescription">結果描述</label>
<textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea>
<textarea class="form-control" type="text" id="inpDescription" name="inpDescription"
rows="7"></textarea>
</div>
</div>
<div class="col-md-12">
@ -416,7 +434,8 @@
</div>
<!-- Modal center 刪除 -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -633,7 +652,7 @@
{
"title": "異常代號",
"data": "error_code",
render:(data)=>{
render: (data) => {
return data?.split('-')[0] || '';
}
},
@ -751,7 +770,7 @@
{
"title": "異常代號",
"data": "error_code",
render:(data)=>{
render: (data) => {
return data?.split('-')[0] || '';
}
},
@ -979,7 +998,8 @@
loadOpeRecTable();
}
function exportExcel() {
function exportExcel(e) {
console.log("export", e)
let url = baseApiUrl + "/operation/OpeExportExcel";
objSendData.Data = {
@ -987,7 +1007,7 @@
startdate: pageAct.startdate == undefined ? null : pageAct.startdate,
enddate: pageAct.enddate == undefined ? null : pageAct.enddate,
};
console.log("data", objSendData.Data)
ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
if (rel.code == "0000")
location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
@ -1355,12 +1375,18 @@
if (!res || res.code != "0000" || !res.data) {
} else {
pageAct.sysMain = res.data.device_system_category_layer2;
pageAct.sysSub = res.data.device_system_category_layer3;
pageAct.number = res.data.fix_do_code;
selOpeFir();
errCodeList();
callbackForErr(JSON.stringify({
count: [res.data].length,
data: [{ uuid: res.data.error_code }]
}));
$(pageAct.work_type == "1" ? '#inpNumber' : '#inpNumber_2').val(res.data.formId);
$(pageAct.work_type == "1" ? '#inpWorTyp' : '#inpWorTyp_2').val(res.data.work_type);
$(pageAct.work_type == "1" ? '#inpErrCode' : '#inpErrCode_2').val(res.data.error_code);
$(pageAct.work_type == "1" ? '#inpFixDo' : '#inpFixDo_2').val(res.data.fix_do);
$(pageAct.work_type == "1" ? '#inpFixDoCode' : '#inpFixDoCode_2').val(res.data.fix_do_code);
$(pageAct.work_type == "1" ? '#inpFixFirm' : '#inpFixFirm_2').val(res.data.fix_firm);
@ -1369,6 +1395,9 @@
$(pageAct.work_type == "1" ? '#inpStaTime' : '#inpStaTime_2').val(displayDate(res.data.start_time, 'date').replaceAll('/', '-'));
$(pageAct.work_type == "1" ? '#inpNotice' : '#inpNotice_2').val(res.data.notice);
$(pageAct.work_type == "1" ? '#inpDescription' : '#inpDescription_2').val(res.data.description);
let elemSel = $(pageAct.work_type == "1" ? '#inpFixDoCode' : '#inpFixDoCode_2').find('option:selected');;
pageAct.number = elemSel.val();
selOpeFir();
ope_imgHtml = null;
$.each(res.data.lorf, function (i, v) {
@ -1464,17 +1493,18 @@
}
function callbackForErr(res) {
res = JSON.parse(res);
res = JSON.parse(res) || res;
console.log(res)
strHtml = ``;
$.each(res.data, function (i, v) {
msg = v.msgText != null ? ($.trim(v.msgText.toString()).length > 0 ? v.msgText.split(':')[0] : '') : '';
strHtml += `<option value=${v.uuid}>${v.uuid}</option>`;
});
if (res.count > 0)
$(pageAct.work_type == '1' ? '#inpErrCode' : '#inpErrCode_2').html(strHtml);
else
$(pageAct.work_type == '1' ? '#inpErrCode' : '#inpErrCode_2').html("");
$(loadEle).Loading("close");
}

67
Frontend/_sysElevator.html
View File

@ -1,25 +1,61 @@
<style>
.elevator { background-color: #fff; min-height: 520px; }
.elevator {
background-color: #fff;
min-height: 520px;
}
.elevator-table-wrapper { padding: 0.8rem; }
.elevator-table-wrapper {
padding: 0.8rem;
}
table.elevator-build { /*border: 1px double #000;*/ }
table.elevator-build { /*border: 1px double #000;*/
}
table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; }
table.elevator-build td {
padding: 0.2rem 0.5rem;
height: 50px;
width: 45px;
border: 1px solid #000;
}
elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; }
elevator .elevator-body, elevator .elevator-header {
padding: 0.7rem;
}
.elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; }
.elevator-item {
position: absolute;
width: 43px;
height: 47px;
border: 4px solid orange;
}
.elevator-item-toup { border: 4px solid rgba(255,255,255,0); position: absolute; border-bottom: 0; z-index: 2; }
.elevator-item-toup {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-bottom: 0;
z-index: 2;
}
.elevator-item-todown { border: 4px solid rgba(255,255,255,0); position: absolute; border-top: 0; z-index: 2; }
.elevator-item-todown {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-top: 0;
z-index: 2;
}
.table-compact td { padding: 0.2rem 0.3rem; }
.table-compact td {
padding: 0.2rem 0.3rem;
}
#emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; }
#emerTurn tr td:nth-child(2) {
width: 50%;
text-align: center;
justify-content: center;
}
#emerTurn tr td:nth-child(1) { width: 35%; }
#emerTurn tr td:nth-child(1) {
width: 35%;
}
</style>
<div class="d-flex">
@ -1211,12 +1247,12 @@
// Card 即時狀態 - 左側 table
function drawImdStaBlock(devNum) {
let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0" style="min-width: 200px">`);
let tbody = tabEle.append("<tbody>");
let rows =
[
{ id: "devName", text: "號機" },
{ id: "devNum", text: "Tag Name" },
// { id: "devNum", text: "Tag Name" },
{ id: "status", text: "狀態" },
{ id: "group", text: "組別" },
{ id: "weight", text: "載重" },
@ -1266,7 +1302,7 @@
// Card 即時狀態 - 右側 table
function drawOpeModBlock(devNum) {
let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0" style="min-width: 200px">`);
let tbody = tabEle.append("<tbody>");
let rows =
[
@ -2403,8 +2439,7 @@
//載入3D模型
function load3DModel() {
launchViewer(pageAct.urn, (viewer) => {
document.querySelector("#guiviewer3d-toolbar").style.display = "none";
let elevOption = {
selector: "#forgeViewer",
viewer: viewer,

27
Frontend/_sysMonAll.html
View File

@ -48,7 +48,7 @@
$(function () {
getBuildMenu((arr, data) => {
// console.log(arr)
console.log("系統監控",arr, data)
buildMenuData = data;
if (arr.indexOf(4) != -1) {
getFloDevList(arr[0] == 4 ? "left" : "right");
@ -82,10 +82,12 @@
</div>`;
break;
case 3:
strHtml = `<div class="d-flex mb-4" style="gap:15px">
strHtml = `<div class="d-flex mb-4" style="position: relative; gap:15px">
<div name="forgeViewer" style="position: absolute;width: 100%;height:85vh;">
${setTopHeatBar()}
</div>
<div name="forgeViewer" style="height:85vh;"></div>`;
</div>
`;
break;
}
@ -138,6 +140,7 @@
}
if (data.point_name == "Temp") {
console.log("Temp",data.device_number_full, parseInt(data.value))
heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
@ -383,10 +386,17 @@
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="width:${width};height:${height};">
let strHtml
if(pageAct.sysSubTag == "C") {
strHtml = `<div style="width:${width};height:${height};">
<iframe src="./px/CCTV/TEST_RENDER.mp4" style="width:${width};height:${height};"></iframe>
</div>`
} else {
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;
}
@ -405,7 +415,7 @@
allDevList.forEach(({ device_nodes }) => {
subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
})
console.log(devDbIds, subDevDbId)
// console.log(devDbIds, subDevDbId)
// 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
if (forgeInvType) {
setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
@ -462,11 +472,12 @@
id: x.device_number,
position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
sensorTypes: ["temperature", "humidity"],
temp: 0,
temp: 30,
forgeDbId: parseInt(x.forge_dbid)
}
})
if (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") {
if ((pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") && elevatorShow) {
let elevOption = {
selector: "[name=forgeViewer]",
viewer: viewer,

2
Frontend/index.html
View File

@ -1511,7 +1511,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// 設置 Forge 3D 溫度條
function setTopHeatBar() {
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
return strHtml;
}