[Frontend] echart 套件匯入 | yt-tab yt-tooltip 程序調整 | 登入串接 | localstorage 紀錄token | [系統監控] 樓層與總覽畫面拆出
This commit is contained in:
parent
4e8a05fb2d
commit
3e101d3be1
252
Frontend/_sysMonAll.html
Normal file
252
Frontend/_sysMonAll.html
Normal 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
243
Frontend/_sysMonFloor.html
Normal 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>
|
||||||
@ -7,259 +7,32 @@
|
|||||||
<div class="row bg-dark">
|
<div class="row bg-dark">
|
||||||
<h1 class="p-2 mx-5 mb-0">電錶系統</h1>
|
<h1 class="p-2 mx-5 mb-0">電錶系統</h1>
|
||||||
<div class="btn-group my-2">
|
<div class="btn-group my-2">
|
||||||
<button type="button" class="btn btn-secondary waves-effect waves-themed">總覽</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 type="button" class="btn btn-secondary waves-effect waves-themed">19 F</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 type="button" class="btn btn-secondary waves-effect waves-themed">21 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<main id="js-page-content" role="main" class="page-content">
|
<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>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
$("#js-page-content").load("_sysMonAll.html",loadCallback);
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
initPopover();
|
|
||||||
})
|
|
||||||
|
|
||||||
function drawStateTabBlo() {
|
onEvent("click", "[name=floBtn]", function () {
|
||||||
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
|
if ($(this).data("id") == "all") {
|
||||||
<tbody>
|
$("#js-page-content").load("_sysMonAll.html", loadCallback);
|
||||||
<tr>
|
} else {
|
||||||
<td>電壓 V</td>
|
$("#js-page-content").load("_sysMonFloor.html", loadCallback);
|
||||||
<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>
|
</script>
|
||||||
124
Frontend/css/site.css
Normal file
124
Frontend/css/site.css
Normal 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);}
|
||||||
@ -32,6 +32,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
<!-- Font Awesome -->
|
<!-- Font Awesome -->
|
||||||
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
<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" 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" />
|
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
|
||||||
</head>
|
</head>
|
||||||
<!-- BEGIN Body -->
|
<!-- 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="ml-auto d-flex">
|
||||||
<div class="btn-group mx-4">
|
<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>首頁
|
<i class="fal fa-home fa-2x"></i><br>首頁
|
||||||
</a>
|
</a>
|
||||||
<div class="dropdown-menu">
|
<!--<div class="dropdown-menu">
|
||||||
<button class="dropdown-item" type="button">Action</button>
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
<button class="dropdown-item" type="button">Another action</button>
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
<button class="dropdown-item" type="button">Something else here</button>
|
<button class="dropdown-item" type="button">Something else here</button>
|
||||||
</div>
|
</div>-->
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group mx-4">
|
<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:;" 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/main.js"></script>
|
||||||
<script src="js/init.js"></script>
|
<script src="js/init.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
let user = localStorage.getItem("JWT-Authorization");
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
$("#app").load("_dashboard.html", loadCallback);
|
||||||
|
} else {
|
||||||
|
location.href = "login.html";
|
||||||
|
}
|
||||||
|
|
||||||
$("#app").load("_dashboard.html");
|
onEvent("click", "button[name^=sysMonBtn]", function () {
|
||||||
|
$("#app").load("_systemMonitor.html", loadCallback);
|
||||||
$("body").on("click", "button[name^=sysMonBtn]", function () {
|
|
||||||
$("#app").load("_systemMonitor.html");
|
|
||||||
})
|
})
|
||||||
|
onEvent("click", "button[name=dasBoaBtn]", function () {
|
||||||
|
$("#app").load("_dashboard.html", loadCallback);
|
||||||
|
})
|
||||||
|
|
||||||
|
function loadCallback() {
|
||||||
|
initTabsByEle();
|
||||||
|
resetYTTooltip();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
<!-- END Body -->
|
<!-- END Body -->
|
||||||
|
|||||||
@ -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 varRegApiUrl = "/reg/api/"; //註冊API路徑
|
||||||
var varApiUrl = "/api/"; //API路徑
|
var varApiUrl = "/api/"; //API路徑
|
||||||
var varPathImg = "/Upload/Images/";
|
var varPathImg = "/Upload/Images/";
|
||||||
|
|||||||
@ -1338,6 +1338,10 @@ async function download(url, filename) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onEvent(type,selector,callback) {
|
||||||
|
$("body").on(type, selector, callback)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* element array sort
|
* element array sort
|
||||||
* @param {any} selector
|
* @param {any} selector
|
||||||
|
|||||||
@ -12,14 +12,18 @@ var YT = YT || {};
|
|||||||
|
|
||||||
var _ytTabInited = []
|
var _ytTabInited = []
|
||||||
$(function () {
|
$(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");
|
let tabName = $(value).data("tabname");
|
||||||
if (_ytTabInited.indexOf(tabName) == -1) {
|
if (_ytTabInited.indexOf(tabName) == -1) {
|
||||||
var ytTab = new YTTab({ tabName: tabName })
|
var ytTab = new YT.Tab({ tabName: tabName })
|
||||||
_ytTabInited.push(tabName);
|
_ytTabInited.push(tabName);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
}
|
||||||
|
|
||||||
class YourTeamTab {
|
class YourTeamTab {
|
||||||
constructor(option = {}) {
|
constructor(option = {}) {
|
||||||
@ -28,10 +32,9 @@ class YourTeamTab {
|
|||||||
}
|
}
|
||||||
|
|
||||||
init = function() {
|
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();
|
this.event();
|
||||||
|
$(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
|
||||||
|
$(`[data-tabname=${this.tabName}][data-target]`).first().click();
|
||||||
}
|
}
|
||||||
|
|
||||||
event = function () {
|
event = function () {
|
||||||
|
|||||||
@ -117,6 +117,7 @@ $.fn.YTTooltip = function (option) {
|
|||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
eleArr.push(obj);
|
eleArr.push(obj);
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -124,3 +125,7 @@ $.fn.YTTooltip = function (option) {
|
|||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetYTTooltip() {
|
||||||
|
$("[id^=yt_tooltip_]").remove();
|
||||||
|
}
|
||||||
45
Frontend/lib/echarts.min.js
vendored
Normal file
45
Frontend/lib/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -8,13 +8,13 @@
|
|||||||
<!-- base css -->
|
<!-- base css -->
|
||||||
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.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="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="mytheme" rel="stylesheet" media="screen, print" href="lib/themes/cust-theme-15.css">
|
||||||
<link id="myskin" rel="stylesheet" media="screen, print" href="css/skins/skin-master.css">
|
<link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
|
||||||
<!-- Place favicon.ico in the root directory -->
|
<!-- Place favicon.ico in the root directory -->
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
|
<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="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="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 -->
|
<!-- Font Awesome -->
|
||||||
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||||||
@ -55,7 +55,7 @@
|
|||||||
<label class="custom-control-label" for="rememberme"> 記住我</label>
|
<label class="custom-control-label" for="rememberme"> 記住我</label>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="blankpage-footer text-center">
|
<div class="blankpage-footer text-center">
|
||||||
@ -78,6 +78,7 @@
|
|||||||
<script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>
|
<script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>
|
||||||
<script src="lib/notifications/toastr/toastr.js"></script>
|
<script src="lib/notifications/toastr/toastr.js"></script>
|
||||||
<script src="js/toast.js"></script>
|
<script src="js/toast.js"></script>
|
||||||
|
<script src="js/init.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
@ -127,7 +128,6 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var baseApiUrl = '@ViewBag.BaseApiUrl';
|
|
||||||
//#region 登入表單驗證
|
//#region 登入表單驗證
|
||||||
var loginValidate = $("#login-form").validate({
|
var loginValidate = $("#login-form").validate({
|
||||||
rules: {
|
rules: {
|
||||||
@ -160,9 +160,10 @@
|
|||||||
}, "不可填入空白");
|
}, "不可填入空白");
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
function Login() {
|
function Login(e) {
|
||||||
|
e.preventDefault();
|
||||||
if ($("#login-form").valid()) {
|
if ($("#login-form").valid()) {
|
||||||
var url = "http://210.61.91.43:10054/api/Login/";
|
var url = baseApiUrl + "/api/Login/";
|
||||||
var send_data = {
|
var send_data = {
|
||||||
account: "admin",
|
account: "admin",
|
||||||
password: "123456"
|
password: "123456"
|
||||||
@ -170,26 +171,28 @@
|
|||||||
$.ajax({
|
$.ajax({
|
||||||
method: "post",
|
method: "post",
|
||||||
url: url,
|
url: url,
|
||||||
data: send_data,
|
data: JSON.stringify(send_data),
|
||||||
async: false,
|
async: false,
|
||||||
|
contentType:"application/json; charset=UTF-8",
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
success: function (rel) {
|
success: function (rel) {
|
||||||
console.log(rel)
|
console.log(rel)
|
||||||
|
|
||||||
//rel = JSON.stringify(rel);
|
//rel = JSON.stringify(rel);
|
||||||
//if (rel.code != "0000") {
|
if (rel.code != "0000") {
|
||||||
// if (rel.code == "9999") {
|
if (rel.code == "9999") {
|
||||||
// toast_error(rel.msg);
|
toast_error(rel.msg);
|
||||||
// }
|
}
|
||||||
// else {
|
else {
|
||||||
// toast_ok(rel.msg);
|
toast_ok(rel.msg);
|
||||||
// }
|
}
|
||||||
// return;
|
return;
|
||||||
//}
|
}
|
||||||
//else {
|
else {
|
||||||
// localStorage.setItem('JWT-Authorization', rel.data.token);
|
localStorage.setItem('JWT-Authorization', rel.data.token);
|
||||||
// location.href = "/Home";
|
location.href = "index.html";
|
||||||
// return;
|
return;
|
||||||
//}
|
}
|
||||||
},
|
},
|
||||||
error: function (xhr, textStatus, thrownError) {
|
error: function (xhr, textStatus, thrownError) {
|
||||||
alert(textStatus);
|
alert(textStatus);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user