<style>
[id^=yt_tooltip] {
width: 450px;
}
</style>
<div class="container-fluid">
<div class="row bg-dark">
<h1 class="p-2 mx-5 mb-0">電錶系統</h1>
<div class="btn-group my-2">
<button type="button" class="btn btn-secondary waves-effect waves-themed">總覽</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">19 F</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">21 F</button>
</div>
</div>
</div>
<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-sm-12 col-xl-5">
<div class="d-flex justify-content-start mb-6">
<button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
<div id="floor19" class="mr-5">
<span class="status status-success d-inline-block">
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
</span> 19F 門口東
</div>
<div class="mr-5">
<span class="status status-danger d-inline-block">
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
</span> 19F 戶外門口中間
</div>
</div>
<div class="d-flex justify-content-start mb-6">
<button type="button" class="btn btn-primary waves-effect waves-themed mr-5">21 F</button>
<div class=" mr-5">
<span class="status status-success d-inline-block">
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
</span> 21F 電錶01
</div>
<div class="mr-5">
<span class="status status-danger d-inline-block">
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
</span> 21F 電錶02
</div>
</div>
</div>
<div class="col-sm-12 col-xl-7">
<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
<!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
<span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
</div>
</div>
</main>
<script>
$(function () {
initPopover();
})
function drawStateTabBlo() {
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
<tbody>
<tr>
<td>電壓 V</td>
<td>113</td>
</tr>
<tr>
<td>電流 A</td>
<td>8</td>
</tr>
<tr>
<td>功率 W</td>
<td>203</td>
</tr>
<tr>
<td>今日用電 kWh</td>
<td>58</td>
</tr>
</tbody>
</table>`
return strHtml;
}
function drawInfoTabBlo() {
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
<tbody>
<tr>
<td>設備編號</td>
<td>B01-B2-19F-CR-001</td>
<td>3D 座標</td>
<td>113</td>
</tr>
<tr>
<td>設備名稱</td>
<td>A區迴路001</td>
<td>forge dbid</td>
<td>101</td>
</tr>
<tr>
<td>廠牌</td>
<td>飛利浦 Philip</td>
<td>IP</td>
<td>192.168.1.105</td>
</tr>
<tr>
<td>型號</td>
<td>BH065</td>
<td></td>
<td></td>
</tr>
<tr>
<td>原廠文件</td>
<td><a href="#">2022使用手冊.pdf</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>型號</td>
<td>BH065</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>`
return strHtml;
}
function drawErrRecTabBlo() {
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
<tbody>
<tr>
<td>設備編號</td>
<td>B01-B2-19F-CR-001</td>
<td>3D 座標</td>
<td>113</td>
</tr>
<tr>
<td>設備名稱</td>
<td>A區迴路001</td>
<td>forge dbid</td>
<td>101</td>
</tr>
<tr>
<td>廠牌</td>
<td>飛利浦 Philip</td>
<td>IP</td>
<td>192.168.1.105</td>
</tr>
<tr>
<td>型號</td>
<td>BH065</td>
<td></td>
<td></td>
</tr>
<tr>
<td>原廠文件</td>
<td><a href="#">2022使用手冊.pdf</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>型號</td>
<td>BH065</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>`
return strHtml;
}
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function initPopover() {
$("#floor19").YTTooltip({
html: `<div class="card m-1 border device-wrap">
<div class="card-header p-2 px-3">
<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="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="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo() }
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
${drawInfoTabBlo() }
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo() }
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo() }
</div>
</div>
</div>`,
onShow: function () {
var tab = new YT.Tab({ tabName: "cardTab" })
loadOpeRecTable();
}
})
function loadOpeRecTable() {
let url = "https://api.npoint.io/31e717774a0f5822cc7b";
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "7%", "sortable": true},
{ "targets": [3], "width": "7%", "sortable": true},
];
let columns = [
{
"title": "異常ID",
"data": "errId",
},
{
"title": "異常原因",
"data": "errReason",
},
{
"title": "ACK確認",
"data": "ackCheck",
},
{
"title": "發生/賦歸時間",
"data": "time",
},
];
let callback = function () {
$('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody，會導致thead跑掉
let api = this.api();
api.columns.adjust();
}
opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, callback, null, null, null, null, null, "tpi");
}
}
</script>