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

[Frontend] echart 套件匯入 | yt-tab yt-tooltip 程序調整 | 登入串接 | localstorage 紀錄token | [系統監控] 樓層與總覽畫面拆出

Browse Source
This commit is contained in:
dev01 2022-11-15 18:47:16 +08:00
parent 4e8a05fb2d
commit 3e101d3be1
11 changed files with 745 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
Frontend/_sysMonAll.html Normal file
View File

@ -0,0 +1,252 @@
<style>
[id^=yt_tooltip] {
width: 450px;
}
</style>
<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 cur-poi">
<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>
<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>

243
Frontend/_sysMonFloor.html Normal file
View File

@ -0,0 +1,243 @@
<style>
[id^=yt_tooltip] {
width: 450px;
}
</style>
<div class="row">
<div id="floChart"></div>
</div>
<script src="lib/echarts.min.js"></script>
<script>
var floChart = null;
$(function () {
initChart();
chartHandler();
})
function initChart() {
let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: 'auto' });
}
function getSvg() {
"/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg"
}
function chartHandler() {
floChart.clear();
$.get(`${baseImgUrl}/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {
if (svg == undefined || svg == null) {
return;
}
echarts.registerMap('floor_svg', { svg: svg });
option = {
// animationDurationUpdate: 1500,
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}`
}
else {
return `名稱：${params.data.device_full_name}<br>
Guid：${params.data.device_guid}`
}
}
},
toolbox: { //工具欄
show: false
},
geo: {
map: 'floor_svg',
roam: true,
scaleLimit: { //限制放大縮小倍數
max: 32,
min: 2.5
},
layoutSize: '100%',
layoutCenter: ['50%', '50%'],
zoom: 2.5,
silent: true
},
series: [
{ //不管有無被選擇(圓點)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //未選擇的設備(icon)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //被選擇的設備(icon)
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
showEffectOn: 'render',
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //編輯模式底下的設備(圓點，只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //編輯模式底下的設備(icon，只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
data: null,
z: 1
},
],
};
floChart.setOption(option);
floChart.getZr().on('click', function (params) {
console.log("click", params);
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
if (floor_map_mode == "edit") {
temp_device_on_floor_map = [{
device_guid: selected_temp_device.device_guid,
device_full_name: selected_temp_device.device_full_name,
device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
status: selected_temp_device.status,
value: dataPoint
}];
}
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option);
});
floChart.on('selectchanged', function (params) {
console.log("selectchanged", params);
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option);
currentData = $.map(currentData, function (item) {
item.selected = false;
return item;
});
if (params.selected.length > 0) {
currentData[params.selected[0].seriesIndex - 1].selected = true;
}
});
// floChart.getZr().on('mousewheel', function (params) {
// console.log(params)
// })
floChart.on('georoam', function (params) {
var zoom = floChart.getOption().geo[0].zoom;
if (zoom <= 2.5) {
ResetFloorMap();
floChart.setOption({
geo: {
roam: 'scale'
},
});
} else {
floChart.setOption({
geo: {
roam: true
},
});
}
});
})
.fail(function () {
toast_warning("查無該樓層地圖")
floChart.clear();
});
}
</script>

255
Frontend/_systemMonitor.html
View File

@ -7,259 +7,32 @@
<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>
<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="all">總覽</button>
<button name="floBtn" data-id="19" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="19">19 F</button>
<button name="floBtn" data-id="21" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="21">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>
$("#js-page-content").load("_sysMonAll.html",loadCallback);
$(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();
onEvent("click", "[name=floBtn]", function () {
if ($(this).data("id") == "all") {
$("#js-page-content").load("_sysMonAll.html", loadCallback);
} else {
$("#js-page-content").load("_sysMonFloor.html", loadCallback);
}
})
})
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>

124
Frontend/css/site.css Normal file
View File

@ -0,0 +1,124 @@

.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header {
background: rgba(0, 0, 0, 0.03);
}
/* ================================================================ */
/* 單一方法 */
/* ================================================================ */
:root {
--yt-main-gray: #c2c7d0;
--yt-main-black: #212529;
--yt-main-gray-hover: #c2c7d0;
--yt-gray: #505050;
--yt-gray-hover: #3c3c3c;
--yt-gray-2: #8f8c8c;
--yt-gray-2-hover: #646060;
--yt-gray-3: #ededed;
--yt-gray-4: #dddddd;
--yt-pink: #ff95d0;
--yt-pink-hover: #ef84c0;
--yt-red-2:#d34949;
--yt-yellow-1:#ffc902;
}
/* cursor */
.cur-def { cursor:default !important;}
.cur-poi { cursor:pointer !important;}
/*left 距離*/
.left-05 { left: 0.5rem !important; }
.left-04 { left: 0.4rem !important; }
.left-03 { left: 0.3rem !important; }
.left-02 { left: 0.2rem !important; }
.left-01 { left: 0.1rem !important; }
/*right 距離*/
.right-05 { right: 0.5rem !important; }
.right-04 { right: 0.4rem !important; }
.right-03 { right: 0.3rem !important; }
.right-02 { right: 0.2rem !important; }
.right-01 { right: 0.1rem !important; }
/*bottom 0.5rem*/
.bm-05 { bottom: 0.5rem !important; }
.bm-04 { bottom: 0.4rem !important; }
.bm-03 { bottom: 0.3rem !important; }
.bm-02 { bottom: 0.2rem !important; }
.bm-01 { bottom: 0.1rem !important; }
/*top 0.5rem*/
.tp-05 { top: 0.5rem !important; }
.tp-04 { top: 0.4rem !important; }
.tp-03 { top: 0.3rem !important; }
.tp-02 { top: 0.2rem !important; }
.tp-01 { top: 0.1rem !important; }
/* font-weight */
.fw-1 { font-weight: 100; }
.fw-2 { font-weight: 200; }
.fw-3 { font-weight: 300; }
.fw-4 { font-weight: 400; }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }
.fw-9 { font-weight: 900; }
/* font-size */
.fs-05 { font-size: 0.5rem; }
.fs-075 { font-size: 0.75rem; }
.fs-09 { font-size: 0.9rem; }
.fs-1-05 { font-size: 1.05rem; }
.fs-1-1 { font-size: 1.1rem; }
.fs-1-2 { font-size: 1.2rem; }
.fs-1-3 { font-size: 1.3rem; }
.fs-1-5 { font-size: 1.5rem; }
.fs-2 { font-size: 2rem; }
.fs-2-5 { font-size: 2.5rem; }
/* border width */
.bd-0 { border-width: 0px; }
.bd-1 { border-width: 1px; }
.bd-2 { border-width: 2px; }
/* border direction */
.bd-l { border-left-style:solid;}
.bd-r { border-right-style:solid;}
.bd-t { border-top-style:solid;}
.bd-b { border-bottom-style:solid;}
/* border radius */
.br-1 { border-radius: 1px; }
.br-2 { border-radius: 2px; }
.br-3 { border-radius: 3px; }
.br-4 { border-radius: 4px; }
.br-5 { border-radius: 5px; }
/* flex-gap */
.gap-1 { gap: 1px;}
.gap-2 { gap: 2px;}
.gap-3 { gap: 3px;}
.gap-4 { gap: 4px;}
.gap-5 { gap: 5px;}
/* vertical-align */
.va-t {vertical-align: top;}
.va-m {vertical-align: middle;}
.va-b {vertical-align: bottom;}
/* text color */
.t-main-purple { color: #623c80 !important; }
.t-black { color: #000 !important; }
.t-white { color:#fff !important;}
.t-fb-blue { color: #466ac2 !important; }
.t-line-green { color: #54C814 !important; }
.t-red { color: #db0000 !important;}
.t-red-2 { color:var(--yt-red-2) !important;}
.t-gray { color:var(--yt-gray); }
.t-main-gray { color: var(--yt-main-gray); }
.t-gray-2 { color: var(--yt-gray-2) !important; }
.t-gray-3 { color: var(--yt-gray-3); }
.t-yellow { color: var(--yt-yellow-1);}

27
Frontend/index.html
View File

@ -32,6 +32,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!-- Font Awesome -->
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" media="screen, print" href="lib/datagrid/datatables/datatables.bundle.css">
<link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
</head>
<!-- BEGIN Body -->
@ -1125,14 +1126,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<div class="ml-auto d-flex">
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a href="javascript:;" name="dasBoaBtn" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁
</a>
<div class="dropdown-menu">
<!--<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>-->
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -2063,13 +2064,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<script src="js/main.js"></script>
<script src="js/init.js"></script>
<script>
let user = localStorage.getItem("JWT-Authorization");
$("#app").load("_dashboard.html");
if (user) {
$("#app").load("_dashboard.html", loadCallback);
} else {
location.href = "login.html";
}
$("body").on("click", "button[name^=sysMonBtn]", function () {
$("#app").load("_systemMonitor.html");
onEvent("click", "button[name^=sysMonBtn]", function () {
$("#app").load("_systemMonitor.html", loadCallback);
})
onEvent("click", "button[name=dasBoaBtn]", function () {
$("#app").load("_dashboard.html", loadCallback);
})
function loadCallback() {
initTabsByEle();
resetYTTooltip();
}
</script>
</body>
<!-- END Body -->

4
Frontend/js/init.js
View File

@ -1,4 +1,6 @@
var ytAjax = new YourTeam.Ajax(); //公用AJAX初始化
var ytAjax = typeof YourTeam !== "undefined" ? new YourTeam.Ajax() : null; //公用AJAX初始化
var baseApiUrl = "http://localhost:3604";
var baseImgUrl = "https://localhost:44376";
var varRegApiUrl = "/reg/api/"; //註冊API路徑
var varApiUrl = "/api/"; //API路徑
var varPathImg = "/Upload/Images/";

4
Frontend/js/style.js
View File

@ -1338,6 +1338,10 @@ async function download(url, filename) {
}
function onEvent(type,selector,callback) {
$("body").on(type, selector, callback)
}
/**
* element array sort
* @param {any} selector

17
Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
View File

@ -12,14 +12,18 @@ var YT = YT || {};
var _ytTabInited = []
$(function () {
$("[data-tabname][data-target]:not([data-tabrole='child'])").each(function (index, value) {
})
function initTabsByEle() {
$("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
let tabName = $(value).data("tabname");
if (_ytTabInited.indexOf(tabName) == -1) {
var ytTab = new YTTab({ tabName: tabName })
if (_ytTabInited.indexOf(tabName) == -1) {
var ytTab = new YT.Tab({ tabName: tabName })
_ytTabInited.push(tabName);
}
})
})
}
class YourTeamTab {
constructor(option = {}) {
@ -28,10 +32,9 @@ class YourTeamTab {
}
init = function() {
$(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
$(`[data-tabname=${this.tabName}][data-tabrole=child]`).first().show();
console.log("inited")
this.event();
$(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
$(`[data-tabname=${this.tabName}][data-target]`).first().click();
}
event = function () {

5
Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
View File

@ -117,10 +117,15 @@ $.fn.YTTooltip = function (option) {
}, 100)
}
eleArr.push(obj);
})
let result = eleArr.filter(x => this.toArray().findIndex(y => y == x.ele) != -1)[0];
return result;
}
function resetYTTooltip() {
$("[id^=yt_tooltip_]").remove();
}

45
Frontend/lib/echarts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

47
Frontend/login.html
View File

@ -8,13 +8,13 @@
<!-- base css -->
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="css/themes/cust-theme-15.css">
<link id="myskin" rel="stylesheet" media="screen, print" href="css/skins/skin-master.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="lib/themes/cust-theme-15.css">
<link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
<!-- Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="css/page-login-alt.css">
<link rel="stylesheet" media="screen, print" href="lib/page-login-alt.css">
<!-- Font Awesome -->
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
@ -55,7 +55,7 @@
<label class="custom-control-label" for="rememberme"> 記住我</label>
</div>
</div>
<button type="button" class="btn btn-default float-right" onclick="Login()">登入</button>
<button type="submit" class="btn btn-default float-right" onclick="Login(event)">登入</button>
</form>
</div>
<div class="blankpage-footer text-center">
@ -78,6 +78,7 @@
<script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>
<script src="lib/notifications/toastr/toastr.js"></script>
<script src="js/toast.js"></script>
<script src="js/init.js"></script>
</body>
</html>
@ -127,7 +128,6 @@
</script>
<script type="text/javascript">
var baseApiUrl = '@ViewBag.BaseApiUrl';
//#region 登入表單驗證
var loginValidate = $("#login-form").validate({
rules: {
@ -160,9 +160,10 @@
}, "不可填入空白");
//#endregion
function Login() {
function Login(e) {
e.preventDefault();
if ($("#login-form").valid()) {
var url = "http://210.61.91.43:10054/api/Login/";
var url = baseApiUrl + "/api/Login/";
var send_data = {
account: "admin",
password: "123456"
@ -170,26 +171,28 @@
$.ajax({
method: "post",
url: url,
data: send_data,
data: JSON.stringify(send_data),
async: false,
contentType:"application/json; charset=UTF-8",
dataType: 'json',
success: function (rel) {
console.log(rel)
//rel = JSON.stringify(rel);
//if (rel.code != "0000") {
// if (rel.code == "9999") {
// toast_error(rel.msg);
// }
// else {
// toast_ok(rel.msg);
// }
// return;
//}
//else {
// localStorage.setItem('JWT-Authorization', rel.data.token);
// location.href = "/Home";
// return;
//}
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_ok(rel.msg);
}
return;
}
else {
localStorage.setItem('JWT-Authorization', rel.data.token);
location.href = "index.html";
return;
}
},
error: function (xhr, textStatus, thrownError) {
alert(textStatus);