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

[Frontend][全域功能] chart.js 套件版本更新 | 所有 chart 圖表程序依版本微調 | index.html 部分註解補上 | [儀錶板] 圓餅圖大小調整 | 圖表格線樣式調整 | [電梯系統] 取得 nodeid 程序調整

Browse Source
This commit is contained in:
dev01 2023-01-17 15:35:31 +08:00
parent 1d73920363
commit 97a1caa3ec
3 changed files with 61 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
Frontend/_dashboard.html
View File

@ -171,10 +171,10 @@
</div> </div>
<div class="panel-container h-100 show"> <div class="panel-container h-100 show">
<div class="panel-content poisition-relative p-0 row p-0 h-100"> <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"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height: 150px;">
<canvas class="chart" id="errRecChart"></canvas> <canvas class="chart" id="errRecChart"></canvas>
</div> </div>
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height: 150px;">
<canvas class="chart" id="errChkChart"></canvas> <canvas class="chart" id="errChkChart"></canvas>
</div> </div>
</div> </div>
@ -191,10 +191,10 @@
<div class="panel-container h-100 show"> <div class="panel-container h-100 show">
<div class="panel-content poisition-relative row p-0 h-100 p-0"> <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"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height:150px;">
<canvas class="chart" id="worOrdErrChart"></canvas> <canvas class="chart" id="worOrdErrChart"></canvas>
</div> </div>
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center" style="max-height:150px;">
<canvas class="chart" id="worOrdFinChart"></canvas> <canvas class="chart" id="worOrdFinChart"></canvas>
</div> </div>
</div> </div>
@ -480,22 +480,21 @@
display: true, display: true,
}, },
scales: { scales: {
xAxes: [{ x: {
offset: true, offset: true,
gridLines: { color: color.fusion._500 }, grid: { color: color.fusion._500 },
ticks: { ticks: {
callback: function (value, index, ticks) { callback: function (value, index, ticks) {
return value return value
} }
}, },
}], },
yAxes: [{ y: {
beginAtZero: true,
ticks: { ticks: {
min: 0, min: 0,
beginAtZero: true
}, },
}] }
}, },
tooltips: { tooltips: {
callbacks: { callbacks: {
@ -570,22 +569,21 @@
display: true, display: true,
}, },
scales: { scales: {
xAxes: [{ x: {
offset: true, offset: true,
gridLines: { color: color.fusion._500 }, grid: { color: color.fusion._500 },
ticks: { ticks: {
callback: function (value, index, ticks) { callback: function (value, index, ticks) {
return value return value
} }
}, },
}], },
yAxes: [{ y: {
beginAtZero: true,
ticks: { ticks: {
min: 0, min: 0,
beginAtZero: true
}, },
}] }
}, },
tooltips: { tooltips: {
callbacks: { callbacks: {
@ -630,14 +628,13 @@
unit: '個', unit: '個',
fill: true, fill: true,
backgroundColor: [color.danger._500, color.info._300], backgroundColor: [color.danger._500, color.info._300],
//data: errRecArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
data: datas, data: datas,
} }
] ]
} }
let errRecChartOptions = { let errRecChartOptions = {
//maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
legend: { legend: {
display: true, display: true,
@ -645,8 +642,6 @@
tooltips: { tooltips: {
enabled: true, enabled: true,
}, },
} }
// This will get the first returned node in the jQuery collection. // This will get the first returned node in the jQuery collection.
@ -676,14 +671,13 @@
unit: '個', unit: '個',
fill: true, fill: true,
backgroundColor: [color.danger._500, color.info._300], backgroundColor: [color.danger._500, color.info._300],
//data: errChkArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
data: datas, data: datas,
} }
] ]
} }
let errChkChartOptions = { let errChkChartOptions = {
//maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
legend: { legend: {
display: true, display: true,
@ -691,8 +685,6 @@
tooltips: { tooltips: {
enabled: true, enabled: true,
}, },
} }
if (errChkChart == null) { if (errChkChart == null) {
@ -723,14 +715,13 @@
unit: '個', unit: '個',
fill: true, fill: true,
backgroundColor: [color.danger._500, color.info._300], backgroundColor: [color.danger._500, color.info._300],
//data: worOrdErrArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
data: datas, data: datas,
} }
] ]
} }
let worOrdErrChartOptions = { let worOrdErrChartOptions = {
//maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
legend: { legend: {
display: true, display: true,
@ -770,14 +761,13 @@
unit: '個', unit: '個',
fill: true, fill: true,
backgroundColor: [color.danger._500, color.info._300], backgroundColor: [color.danger._500, color.info._300],
//data: worOrdFinArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
data: datas, data: datas,
} }
] ]
} }
let worOrdFinChartOptions = { let worOrdFinChartOptions = {
//maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
legend: { legend: {
display: true, display: true,
@ -822,15 +812,7 @@
}) })
} }
//function timeOutGetData() {
// let timeOut3s = setInterval(() => {
// getAlarmSub();
// }, 3000)
// let timeOut5m = setInterval(() => {
// getElectricBaja();
// }, 5 * 60 * 1000)
// timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
//}
function show3DModel() { function show3DModel() {
launchViewerNoTools(pageAct.urn, (viewer) => { launchViewerNoTools(pageAct.urn, (viewer) => {

5
Frontend/_sysElevator.html
View File

@ -2415,10 +2415,11 @@
forge3DElev.bajaEndCallback = function () { forge3DElev.bajaEndCallback = function () {
// 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型 // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
if (forgeInvType) { if (forgeInvType) {
setInviForge(forgeInvType, this.getNodeIds); setInviForge(forgeInvType, this.getNodeIds());
} else { } else {
setInviForge(forgeInvTypeDef, this.getNodeIds); setInviForge(forgeInvTypeDef, this.getNodeIds());
} }
setTransparentBuilding(0); setTransparentBuilding(0);
endPageLoading(); endPageLoading();
} }

70
Frontend/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- <!--
Template Name: SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4 Template Name: SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
Version: 4.5.1 Version: 4.5.1
@ -36,7 +36,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" /> <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />
<link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" /> <link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" />
<link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" /> <link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@ -733,6 +732,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</script> </script>
<script src="js/n4js/bajatest.js"></script> <script src="js/n4js/bajatest.js"></script>
<script src="js/n4js/electricmeterbaja.js"></script> <script src="js/n4js/electricmeterbaja.js"></script>
<script src="js/n4js/elevatorbaja.js"></script>
<script src="js/bajascript/require.config.js"></script> <script src="js/bajascript/require.config.js"></script>
<script src="js/FileSaver.js"></script> <script src="js/FileSaver.js"></script>
@ -799,7 +799,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
/*"lib/jquery-validation/dist/additional-methods.min",*/ /* 會影響 messages_zh_TW 文字呈現 */ /*"lib/jquery-validation/dist/additional-methods.min",*/ /* 會影響 messages_zh_TW 文字呈現 */
"lib/jquery-validation/dist/localization/messages_zh_TW", "lib/jquery-validation/dist/localization/messages_zh_TW",
"lib/jquery-ui/jquery-ui.min", "lib/jquery-ui/jquery-ui.min",
"lib/chart.js/Chart.min", "lib/chart.js_4.1.2/chart.umd",
"lib/dropzone/dropzone-min", "lib/dropzone/dropzone-min",
"lib/jstree-master/jstree.min", "lib/jstree-master/jstree.min",
"lib/notifications/sweetalert2/sweetalert2.bundle", "lib/notifications/sweetalert2/sweetalert2.bundle",
@ -1153,39 +1153,41 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
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" 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 option = { 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}">
<div class="card-header p-3"> <div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;"> <div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label> <label class="m-0 mt-2">${devName}</label>
</div> </div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button> <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
${lightHtml} ${lightHtml}
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button> <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button> <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button> <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button> <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div> </div>
</div> </div>
<div class="card-body p-2 tab-content"> <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 id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
${drawStateTabBlo(devNum)} ${drawStateTabBlo(devNum)}
</div> </div>
<div id="info" data-tabname="cardTab" data-tabrole="child"> <div id="info" data-tabname="cardTab" data-tabrole="child">
</div> </div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child"> <div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()} ${drawErrRecTabBlo()}
</div> </div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child"> <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()} ${drawOpeRecTabBlo()}
</div> </div>
</div> </div>
</div>`, </div>`,
group: "device", group: "device",
// 在 _sysElevator.html 及 _sysMonAll.html 會用到
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
// 執行 pop 視窗上方 Tab 類別 // 執行 pop 視窗上方 Tab 類別
new YT.Tab({ tabName: "cardTab" }) new YT.Tab({ tabName: "cardTab" });
// 系統監控才會有 data-devobj 屬性
let devObj = $(oriEle).data("devobj"); let devObj = $(oriEle).data("devobj");
// 讀取運維列表 // 讀取運維列表
loadOpeRecTable(devGuid); loadOpeRecTable(devGuid);
@ -1198,7 +1200,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
controlFocusHotspot($(oriEle).data("dbId")); controlFocusHotspot($(oriEle).data("dbId"));
} }
// 3D 視角 ZOOM IN 聚焦 // 3D 視角 ZOOM IN 聚焦
moveViewToDevice(devObj?.forge_dbid); if (devObj) {
moveViewToDevice(devObj?.forge_dbid);
}
// pop 視窗卡片可拖移功能初始化 // pop 視窗卡片可拖移功能初始化
$(tooltipEle).draggable({ $(tooltipEle).draggable({
cursor: "move", cursor: "move",
@ -1559,7 +1563,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} else { } else {
let strHtml = `<div class="btn-group mx-4"> let strHtml = `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center active"> <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁 <i class="fal fa-home fa-2x"></i><br>首頁
</a> </a>
<!--<div class="dropdown-menu"> <!--<div class="dropdown-menu">