[Frontend] 修改系統監控為下拉選單 | 系統監控側邊選單改固定且為小類|校園總覽及電表塗改為滿版
This commit is contained in:
parent
6e3bf25510
commit
8eed17987b
@ -902,7 +902,7 @@
|
|||||||
"title": "Ack 確認",
|
"title": "Ack 確認",
|
||||||
"data": "ackState",
|
"data": "ackState",
|
||||||
"render": function (data, type, row, meta) {
|
"render": function (data, type, row, meta) {
|
||||||
let confirm = data == "1" ? "未確認" : "確認";
|
let confirm = data == "1" ? "待確認" : "確認";
|
||||||
let btnCol = data == "1" ? "warning" : "info";
|
let btnCol = data == "1" ? "warning" : "info";
|
||||||
return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
|
return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
|
||||||
`<td><span>${new Date(row.ackedTime
|
`<td><span>${new Date(row.ackedTime
|
||||||
|
|||||||
@ -15,53 +15,41 @@
|
|||||||
<div class="col-sm-12 col-xl-4">
|
<div class="col-sm-12 col-xl-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 col-xl-6">
|
<div class="col-sm-6 col-xl-6">
|
||||||
<div
|
<div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
|
||||||
class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g"
|
|
||||||
>
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
||||||
<span id="todayUseElec">--</span>
|
<span id="todayUseElec">--</span>
|
||||||
<small class="m-0 l-h-n">今日用電量 kWH</small>
|
<small class="m-0 l-h-n">今日用電量 kWH</small>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
|
||||||
class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
|
style="font-size: 6rem"></i>
|
||||||
style="font-size: 6rem"
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-xl-6">
|
<div class="col-sm-6 col-xl-6">
|
||||||
<div
|
<div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
|
||||||
class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g"
|
|
||||||
>
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
||||||
<span id="yesUseElec">--</span>
|
<span id="yesUseElec">--</span>
|
||||||
<small class="m-0 l-h-n">昨日用電量 kWH</small>
|
<small class="m-0 l-h-n">昨日用電量 kWH</small>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
|
||||||
class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
|
style="font-size: 6rem"></i>
|
||||||
style="font-size: 6rem"
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<div
|
<div id="panel-2"
|
||||||
id="panel-2"
|
|
||||||
class="panel"
|
class="panel"
|
||||||
data-panel-sortable
|
data-panel-sortable
|
||||||
data-panel-collapsed
|
data-panel-collapsed
|
||||||
data-panel-close
|
data-panel-close>
|
||||||
>
|
|
||||||
<div class="panel-hdr">
|
<div class="panel-hdr">
|
||||||
<h2>昨日／今日用電比較 (kWh)</h2>
|
<h2>昨日／今日用電比較 (kWh)</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-container show">
|
<div class="panel-container show">
|
||||||
<div class="panel-content poisition-relative">
|
<div class="panel-content poisition-relative">
|
||||||
<div
|
<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">
|
||||||
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="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="text-right fw-500 l-h-n d-flex flex-column">
|
||||||
<div class="h3 m-0 d-flex align-items-center justify-content-end">
|
<div class="h3 m-0 d-flex align-items-center justify-content-end">
|
||||||
@ -93,45 +81,35 @@
|
|||||||
<div class="col-sm-12 col-xl-4">
|
<div class="col-sm-12 col-xl-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 col-xl-6">
|
<div class="col-sm-6 col-xl-6">
|
||||||
<div
|
<div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
|
||||||
class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g"
|
|
||||||
>
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
||||||
<span id="insPower">--</span>
|
<span id="insPower">--</span>
|
||||||
<small class="m-0 l-h-n">即時功率 kW</small>
|
<small class="m-0 l-h-n">即時功率 kW</small>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
|
||||||
class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
|
style="font-size: 8rem"></i>
|
||||||
style="font-size: 8rem"
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-xl-6">
|
<div class="col-sm-6 col-xl-6">
|
||||||
<div
|
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
|
||||||
class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"
|
|
||||||
>
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
||||||
<span id="insPowerPer">--</span>
|
<span id="insPowerPer">--</span>
|
||||||
<small class="m-0 l-h-n">即時契約容量占比 %</small>
|
<small class="m-0 l-h-n">即時契約容量占比 %</small>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
|
||||||
class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
|
style="font-size: 6rem"></i>
|
||||||
style="font-size: 6rem"
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<div
|
<div id="panel-3"
|
||||||
id="panel-3"
|
|
||||||
class="panel"
|
class="panel"
|
||||||
data-panel-sortable
|
data-panel-sortable
|
||||||
data-panel-collapsed
|
data-panel-collapsed
|
||||||
data-panel-close
|
data-panel-close>
|
||||||
>
|
|
||||||
<div class="panel-hdr">
|
<div class="panel-hdr">
|
||||||
<h2>本週／上週用電比較 (kWh)</h2>
|
<h2>本週／上週用電比較 (kWh)</h2>
|
||||||
</div>
|
</div>
|
||||||
@ -204,16 +182,12 @@
|
|||||||
</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
|
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
style="max-height: 150px">
|
||||||
style="max-height: 150px"
|
|
||||||
>
|
|
||||||
<canvas class="chart" id="errRecChart"></canvas>
|
<canvas class="chart" id="errRecChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
style="max-height: 150px">
|
||||||
style="max-height: 150px"
|
|
||||||
>
|
|
||||||
<canvas class="chart" id="errChkChart"></canvas>
|
<canvas class="chart" id="errChkChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -227,16 +201,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<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
|
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
style="max-height: 150px">
|
||||||
style="max-height: 150px"
|
|
||||||
>
|
|
||||||
<canvas class="chart" id="worOrdErrChart"></canvas>
|
<canvas class="chart" id="worOrdErrChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
style="max-height: 150px">
|
||||||
style="max-height: 150px"
|
|
||||||
>
|
|
||||||
<canvas class="chart" id="worOrdFinChart"></canvas>
|
<canvas class="chart" id="worOrdFinChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -267,8 +237,6 @@
|
|||||||
};
|
};
|
||||||
var contractCapacity = 0;
|
var contractCapacity = 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$(loadEle).Loading("start");
|
$(loadEle).Loading("start");
|
||||||
$(loadEle).Loading("close");
|
$(loadEle).Loading("close");
|
||||||
@ -292,10 +260,10 @@
|
|||||||
(x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
|
(x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
|
||||||
)[0];
|
)[0];
|
||||||
strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group">
|
strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group">
|
||||||
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center">
|
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
|
||||||
<img src="${iconObj.iconClass}" class="w-100"></img>
|
<img src="${iconObj.iconClass}" class="w-100"></img>
|
||||||
</button>
|
</button>
|
||||||
<button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
|
<button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
|
||||||
</div>`;
|
</div>`;
|
||||||
$("#sysSubBtnList").append(strHtml);
|
$("#sysSubBtnList").append(strHtml);
|
||||||
}
|
}
|
||||||
@ -349,7 +317,7 @@
|
|||||||
// 取得 自動須量
|
// 取得 自動須量
|
||||||
function getAutDemVal() {
|
function getAutDemVal() {
|
||||||
let url = baseApiUrl + "/api/Dashboard/GetContractValue";
|
let url = baseApiUrl + "/api/Dashboard/GetContractValue";
|
||||||
let sendData = pageAct.buiTag
|
let sendData = pageAct.buiTag;
|
||||||
objSendData.Data = sendData;
|
objSendData.Data = sendData;
|
||||||
ytAjax = new YourTeam.Ajax(
|
ytAjax = new YourTeam.Ajax(
|
||||||
url,
|
url,
|
||||||
@ -358,7 +326,7 @@
|
|||||||
if (!res || res.code != "0000" || !res.data) {
|
if (!res || res.code != "0000" || !res.data) {
|
||||||
} else {
|
} else {
|
||||||
contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
|
contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
|
||||||
getFirstEletric()
|
getFirstEletric();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
@ -432,18 +400,12 @@
|
|||||||
"T00:00:00";
|
"T00:00:00";
|
||||||
|
|
||||||
// 今日用電量
|
// 今日用電量
|
||||||
getElectricMeterDayDataByBaja(
|
getElectricMeterDayDataByBaja(devNum, n4Sup, today, tomorrow, (data) => {
|
||||||
devNum,
|
|
||||||
n4Sup,
|
|
||||||
today,
|
|
||||||
tomorrow,
|
|
||||||
(data) => {
|
|
||||||
let result = data?.data[0]?.sum;
|
let result = data?.data[0]?.sum;
|
||||||
result = result ? parseFloat(result).toFixed(2) : 0;
|
result = result ? parseFloat(result).toFixed(2) : 0;
|
||||||
$("#todayUseElec").text(result);
|
$("#todayUseElec").text(result);
|
||||||
chkBajaLoaded();
|
chkBajaLoaded();
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
|
||||||
// 今日用電量 (每小時)
|
// 今日用電量 (每小時)
|
||||||
getElectricMeterHourDataByBaja(
|
getElectricMeterHourDataByBaja(
|
||||||
@ -470,18 +432,12 @@
|
|||||||
);
|
);
|
||||||
|
|
||||||
// 昨日用電量
|
// 昨日用電量
|
||||||
getElectricMeterDayDataByBaja(
|
getElectricMeterDayDataByBaja(devNum, n4Sup, yesterday, today, (data) => {
|
||||||
devNum,
|
|
||||||
n4Sup,
|
|
||||||
yesterday,
|
|
||||||
today,
|
|
||||||
(data) => {
|
|
||||||
let result = data?.data[0]?.sum;
|
let result = data?.data[0]?.sum;
|
||||||
result = result ? parseFloat(result).toFixed(2) : 0;
|
result = result ? parseFloat(result).toFixed(2) : 0;
|
||||||
$("#yesUseElec").text(result);
|
$("#yesUseElec").text(result);
|
||||||
chkBajaLoaded();
|
chkBajaLoaded();
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
|
||||||
// 本週與上週用電量 (每天)
|
// 本週與上週用電量 (每天)
|
||||||
getElectricMeterDayDataByBaja(
|
getElectricMeterDayDataByBaja(
|
||||||
@ -511,7 +467,7 @@
|
|||||||
|
|
||||||
// 異常數量與復歸數量
|
// 異常數量與復歸數量
|
||||||
getAlarmCountByBaja((aData) => {
|
getAlarmCountByBaja((aData) => {
|
||||||
console.log("aData",aData)
|
console.log("aData", aData);
|
||||||
chartDataCnt.alarmCnt = aData;
|
chartDataCnt.alarmCnt = aData;
|
||||||
chkBajaLoaded();
|
chkBajaLoaded();
|
||||||
});
|
});
|
||||||
@ -1024,6 +980,10 @@
|
|||||||
|
|
||||||
onEvent("click", "button[id^=sysSubCardBtn]", function () {
|
onEvent("click", "button[id^=sysSubCardBtn]", function () {
|
||||||
let subSysTag = $(this).data("id");
|
let subSysTag = $(this).data("id");
|
||||||
$(`#subSysBtn${subSysTag}[data-building-tag='${buildingTagOnJquery(pageAct.buiTag)}']`).click();
|
$(
|
||||||
|
`#subSysBtn${subSysTag}[data-building-tag='${buildingTagOnJquery(
|
||||||
|
pageAct.buiTag
|
||||||
|
)}']`
|
||||||
|
).click();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row bg-dark align-items-center">
|
<div class="row bg-dark align-items-center">
|
||||||
<label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
|
<label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
|
||||||
<div style="height:85vh" class="col-12 p-0">
|
<div style="height:91vh" class="col-12 p-0">
|
||||||
<iframe src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%" style="zoom:0.1"></iframe>
|
<iframe id="homeIframe" src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%" style="zoom:0.1"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -28,7 +28,7 @@
|
|||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
|
<button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
|
||||||
<button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">日區間</button>
|
<button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">區間</button>
|
||||||
<button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
|
<button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
|
<style></style>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row bg-dark align-items-center">
|
<div class="row bg-dark align-items-center">
|
||||||
<label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
|
<label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
|
||||||
<div style="height:85vh" class="col-12">
|
<div style="height: 90vh" class="col-12">
|
||||||
<iframe src="/ord?file:^px/Home.px|view:?fullScreen=true" width="100%" height="100%"></iframe>
|
<iframe src="/ord?file:^px/Home.px|view:?fullScreen=true"
|
||||||
|
width="100%"
|
||||||
|
height="100%"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1,30 +1,38 @@
|
|||||||
|
<div class="container-fluid px-0">
|
||||||
|
<div class="row no-gutters" style="min-height: 90vh;">
|
||||||
|
<div class="col-1">
|
||||||
|
<aside id="sysMonNavbar" class="w-100 yt-navbar yt-left-navbar h-100 mt-0">
|
||||||
|
<div class="yt-navbar-content">
|
||||||
|
<ul id="sysMonBtnList"></ul>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
<div class="col-11">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row bg-dark align-items-center">
|
<div class="row bg-dark align-items-center">
|
||||||
<label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
|
<label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
|
||||||
<div class="btn-group my-1" id="floList">
|
<div class="btn-group my-1" id="floList"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<main id="js-page-content" role="main" class="page-content"></main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<main id="js-page-content" role="main" class="page-content">
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var floList = [];
|
var floList = [];
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
$("#sysSubText").text(pageAct.buiName + "/" + pageAct.sysSubName);
|
$("#sysSubText").text(pageAct.buiName + "/" + pageAct.sysSubName);
|
||||||
|
getSysMonBtnList();
|
||||||
getFloList();
|
getFloList();
|
||||||
})
|
});
|
||||||
|
|
||||||
onEvent("yt:tab:change", "[name=floBtn]", function () {
|
onEvent("yt:tab:change", "[name=floBtn]", function () {
|
||||||
$.each(tolSubList, (idx, sub) => {
|
$.each(tolSubList, (idx, sub) => {
|
||||||
sub.unsubscribeAll();
|
sub.unsubscribeAll();
|
||||||
sub.detach();
|
sub.detach();
|
||||||
})
|
});
|
||||||
tolSubList = [];
|
tolSubList = [];
|
||||||
pageAct.floTag = $(this).data("id");
|
pageAct.floTag = $(this).data("id");
|
||||||
pageAct.floGuid = $(this).data("guid");
|
pageAct.floGuid = $(this).data("guid");
|
||||||
@ -35,31 +43,37 @@
|
|||||||
} else {
|
} else {
|
||||||
$("#js-page-content").load("_sysMonFloor.html", loadCallback);
|
$("#js-page-content").load("_sysMonFloor.html", loadCallback);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
onEvent("change", "#buiList", function (e, actEle) {
|
onEvent("change", "#buiList", function (e, actEle) {
|
||||||
getFloList();
|
getFloList();
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
||||||
function getFloList() {
|
function getFloList() {
|
||||||
let url = baseApiUrl + "/api/Device/GetFloor";
|
let url = baseApiUrl + "/api/Device/GetFloor";
|
||||||
let sendData = { building_tag: pageAct.buiTag, sub_system_tag: pageAct.sysSubTag };
|
let sendData = {
|
||||||
|
building_tag: pageAct.buiTag,
|
||||||
|
sub_system_tag: pageAct.sysSubTag,
|
||||||
|
};
|
||||||
objSendData.Data = sendData;
|
objSendData.Data = sendData;
|
||||||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
ytAjax = new YourTeam.Ajax(
|
||||||
|
url,
|
||||||
|
objSendData,
|
||||||
|
function (res) {
|
||||||
if (!res || res.code != "0000" || !res.data) {
|
if (!res || res.code != "0000" || !res.data) {
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
|
let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
|
||||||
$.each(res.data, (index, floObj) => {
|
$.each(res.data, (index, floObj) => {
|
||||||
strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
|
strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
|
||||||
})
|
});
|
||||||
$("#floList").html(strHtml);
|
$("#floList").html(strHtml);
|
||||||
floList = res.data;
|
floList = res.data;
|
||||||
|
|
||||||
var ytTab = new YT.Tab({ tabName: "floor" })
|
var ytTab = new YT.Tab({ tabName: "floor" });
|
||||||
}
|
}
|
||||||
}, null, "POST").send();
|
},
|
||||||
|
null,
|
||||||
|
"POST"
|
||||||
|
).send();
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -13,104 +13,70 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
<title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
|
<title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
|
||||||
<meta name="description" content="Marketing Dashboard" />
|
<meta name="description" content="Marketing Dashboard" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta
|
<meta name="viewport"
|
||||||
name="viewport"
|
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui" />
|
||||||
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui"
|
|
||||||
/>
|
|
||||||
<!-- Call App Mode on ios devices -->
|
<!-- Call App Mode on ios devices -->
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<!-- Remove Tap Highlight on Windows Phone IE -->
|
<!-- Remove Tap Highlight on Windows Phone IE -->
|
||||||
<meta name="msapplication-tap-highlight" content="no" />
|
<meta name="msapplication-tap-highlight" content="no" />
|
||||||
<!-- base css -->
|
<!-- base css -->
|
||||||
<link
|
<link id="vendorsbundle"
|
||||||
id="vendorsbundle"
|
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
media="screen, print"
|
media="screen, print"
|
||||||
href="lib/vendors.bundle.css"
|
href="lib/vendors.bundle.css" />
|
||||||
/>
|
<link id="appbundle"
|
||||||
<link
|
|
||||||
id="appbundle"
|
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
media="screen, print"
|
media="screen, print"
|
||||||
href="lib/app.bundle.css"
|
href="lib/app.bundle.css" />
|
||||||
/>
|
|
||||||
<link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
|
<link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
|
||||||
<link
|
<link id="myskin"
|
||||||
id="myskin"
|
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
media="screen, print"
|
media="screen, print"
|
||||||
href="lib/skins/skin-master.css"
|
href="lib/skins/skin-master.css" />
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
|
<link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
|
||||||
<link rel="stylesheet" href="lib/dropzone/dropzone.css" />
|
<link rel="stylesheet" href="lib/dropzone/dropzone.css" />
|
||||||
<!-- Place favicon.ico in the root directory -->
|
<!-- Place favicon.ico in the root directory -->
|
||||||
<link
|
<link rel="apple-touch-icon"
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="180x180"
|
sizes="180x180"
|
||||||
href="img/favicon/apple-touch-icon.png"
|
href="img/favicon/apple-touch-icon.png" />
|
||||||
/>
|
<link rel="icon"
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
type="image/png"
|
||||||
sizes="32x32"
|
sizes="32x32"
|
||||||
href="img/favicon/favicon-32x32.png"
|
href="img/favicon/favicon-32x32.png" />
|
||||||
/>
|
<link rel="mask-icon"
|
||||||
<link
|
|
||||||
rel="mask-icon"
|
|
||||||
href="img/favicon/safari-pinned-tab.svg"
|
href="img/favicon/safari-pinned-tab.svg"
|
||||||
color="#5bbad5"
|
color="#5bbad5" />
|
||||||
/>
|
|
||||||
<!-- 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 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/chart.js/Chart.min.css" rel="stylesheet" />-->
|
||||||
<link
|
<link href="lib/jstree-master/themes/default/style.min.css"
|
||||||
href="lib/jstree-master/themes/default/style.min.css"
|
rel="stylesheet" />
|
||||||
rel="stylesheet"
|
<link href="lib/jstree-master/themes/default-dark/style.min.css"
|
||||||
/>
|
rel="stylesheet" />
|
||||||
<link
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
href="lib/jstree-master/themes/default-dark/style.min.css"
|
rel="stylesheet" />
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
|
<!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
|
||||||
<link
|
<link rel="stylesheet"
|
||||||
rel="stylesheet"
|
|
||||||
media="screen, print"
|
media="screen, print"
|
||||||
href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"
|
href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="css/site.css" />
|
<link rel="stylesheet" href="css/site.css" />
|
||||||
<link
|
<link rel="stylesheet"
|
||||||
rel="stylesheet"
|
href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
|
||||||
href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css"
|
<link rel="stylesheet"
|
||||||
/>
|
href="css/yourteam/plugins/yt-notice/yt-notice.css" />
|
||||||
<link
|
<link rel="stylesheet"
|
||||||
rel="stylesheet"
|
href="css/yourteam/plugins/yt-navbar/yt-navbar.css" />
|
||||||
href="css/yourteam/plugins/yt-notice/yt-notice.css"
|
<link rel="stylesheet"
|
||||||
/>
|
href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
|
||||||
<link
|
<link rel="stylesheet"
|
||||||
rel="stylesheet"
|
|
||||||
href="css/yourteam/plugins/yt-navbar/yt-navbar.css"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="css/yourteam/plugins/yt-alert/ytpop-alert.css"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
|
href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
|
||||||
type="text/css"
|
type="text/css" />
|
||||||
/>
|
|
||||||
|
|
||||||
<link
|
<link rel="stylesheet"
|
||||||
rel="stylesheet"
|
|
||||||
href="lib\bootstrap-datepicker\bootstrap-datepicker.min.css"
|
href="lib\bootstrap-datepicker\bootstrap-datepicker.min.css"
|
||||||
type="text/css"
|
type="text/css" />
|
||||||
/>
|
|
||||||
</head>
|
</head>
|
||||||
<!-- BEGIN Body -->
|
<!-- BEGIN Body -->
|
||||||
<!-- Possible Classes
|
<!-- Possible Classes
|
||||||
@ -138,9 +104,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
>>> more settings are described inside documentation page >>>
|
>>> more settings are described inside documentation page >>>
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<body
|
<body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
|
||||||
class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur"
|
|
||||||
>
|
|
||||||
<!-- DOC: script to save and load page settings -->
|
<!-- DOC: script to save and load page settings -->
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
@ -213,18 +177,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
<header class="page-header" role="banner">
|
<header class="page-header" role="banner">
|
||||||
<!--we need this logo when user switches to nav-function-top-->
|
<!--we need this logo when user switches to nav-function-top-->
|
||||||
<div class="page-logo">
|
<div class="page-logo">
|
||||||
<a
|
<a href="javascript:;"
|
||||||
href="javascript:;"
|
|
||||||
name="topFunBtn"
|
name="topFunBtn"
|
||||||
data-page="dashboard"
|
data-page="dashboard"
|
||||||
class="page-logo-link press-scale-down d-flex align-items-center position-relative"
|
class="page-logo-link press-scale-down d-flex align-items-center position-relative">
|
||||||
>
|
<img src="img/logo.png"
|
||||||
<img
|
|
||||||
src="img/logo.png"
|
|
||||||
alt="SmartAdmin WebApp"
|
alt="SmartAdmin WebApp"
|
||||||
aria-roledescription="logo"
|
aria-roledescription="logo"
|
||||||
style="height: 36px"
|
style="height: 36px" />
|
||||||
/>
|
|
||||||
|
|
||||||
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
|
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
|
||||||
<!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
|
<!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
|
||||||
@ -233,35 +193,29 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</div>
|
</div>
|
||||||
<!--DOC: nav menu layout change shortcut-->
|
<!--DOC: nav menu layout change shortcut-->
|
||||||
<div class="hidden-md-down dropdown-icon-menu position-relative">
|
<div class="hidden-md-down dropdown-icon-menu position-relative">
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="header-btn btn js-waves-off"
|
class="header-btn btn js-waves-off"
|
||||||
data-action="toggle"
|
data-action="toggle"
|
||||||
data-class="nav-function-hidden"
|
data-class="nav-function-hidden"
|
||||||
title="Hide Navigation"
|
title="Hide Navigation">
|
||||||
>
|
|
||||||
<i class="ni ni-menu"></i>
|
<i class="ni ni-menu"></i>
|
||||||
</a>
|
</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="btn js-waves-off"
|
class="btn js-waves-off"
|
||||||
data-action="toggle"
|
data-action="toggle"
|
||||||
data-class="nav-function-minify"
|
data-class="nav-function-minify"
|
||||||
title="Minify Navigation"
|
title="Minify Navigation">
|
||||||
>
|
|
||||||
<i class="ni ni-minify-nav"></i>
|
<i class="ni ni-minify-nav"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="btn js-waves-off"
|
class="btn js-waves-off"
|
||||||
data-action="toggle"
|
data-action="toggle"
|
||||||
data-class="nav-function-fixed"
|
data-class="nav-function-fixed"
|
||||||
title="Lock Navigation"
|
title="Lock Navigation">
|
||||||
>
|
|
||||||
<i class="ni ni-lock-nav"></i>
|
<i class="ni ni-lock-nav"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -269,17 +223,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</div>
|
</div>
|
||||||
<!--DOC: mobile button appears during mobile width-->
|
<!--DOC: mobile button appears during mobile width-->
|
||||||
<div class="hidden-lg-up">
|
<div class="hidden-lg-up">
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="header-btn btn press-scale-down"
|
class="header-btn btn press-scale-down"
|
||||||
data-action="toggle"
|
data-action="toggle"
|
||||||
data-class="mobile-nav-on"
|
data-class="mobile-nav-on">
|
||||||
>
|
|
||||||
<i class="ni ni-menu"></i>
|
<i class="ni ni-menu"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dropdown">
|
<!-- <div class="dropdown">
|
||||||
<a
|
<a
|
||||||
class="dropdown-toggle fs-1"
|
class="dropdown-toggle fs-1"
|
||||||
href="javascript:;"
|
href="javascript:;"
|
||||||
@ -294,58 +246,46 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
id="buiList"
|
id="buiList"
|
||||||
class="dropdown-menu dropdown-select-menu js-auto-close"
|
class="dropdown-menu dropdown-select-menu js-auto-close"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="ml-auto d-flex" id="froLisPage"></div>
|
<div class="ml-auto d-flex" id="froLisPage"></div>
|
||||||
<div class="ml-auto d-flex mr-3">
|
<div class="ml-auto d-flex mr-3">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<a
|
<a href="javascript:;"
|
||||||
href="javascript:;"
|
|
||||||
id="toggleNoticeBtn"
|
id="toggleNoticeBtn"
|
||||||
class="d-flex align-items-center justify-content-center ml-2"
|
class="d-flex align-items-center justify-content-center ml-2">
|
||||||
>
|
|
||||||
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
||||||
alt="Dr. Codex Lantern">-->
|
alt="Dr. Codex Lantern">-->
|
||||||
<!--you can also add username next to the avatar with the codes below:-->
|
<!--you can also add username next to the avatar with the codes below:-->
|
||||||
<div class="row m-0 justify-content-center userblock">
|
<div class="row m-0 justify-content-center userblock">
|
||||||
<i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
|
<i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
|
||||||
<span
|
<span id="noticeConText"
|
||||||
id="noticeConText"
|
|
||||||
class="text-truncate text-truncate-header hidden-xs-down"
|
class="text-truncate text-truncate-header hidden-xs-down"
|
||||||
data-hide="隱藏警告"
|
data-hide="隱藏警告"
|
||||||
data-show="顯示警告"
|
data-show="顯示警告"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<!--app user menu-->
|
<!--app user menu-->
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
data-toggle="dropdown"
|
data-toggle="dropdown"
|
||||||
data-target="logoutList"
|
data-target="logoutList"
|
||||||
class="d-flex align-items-center justify-content-center ml-2"
|
class="d-flex align-items-center justify-content-center ml-2">
|
||||||
>
|
|
||||||
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
||||||
alt="Dr. Codex Lantern">-->
|
alt="Dr. Codex Lantern">-->
|
||||||
<!--you can also add username next to the avatar with the codes below:-->
|
<!--you can also add username next to the avatar with the codes below:-->
|
||||||
<div class="row m-0 justify-content-center userblock">
|
<div class="row m-0 justify-content-center userblock">
|
||||||
<i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
|
<i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
|
||||||
<span
|
<span id="usrName"
|
||||||
id="usrName"
|
class="text-truncate text-truncate-header hidden-xs-down"></span>
|
||||||
class="text-truncate text-truncate-header hidden-xs-down"
|
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div
|
<div id="logoutList"
|
||||||
id="logoutList"
|
class="dropdown-menu dropdown-menu-right dropdown-lg">
|
||||||
class="dropdown-menu dropdown-menu-right dropdown-lg"
|
<a id="logout"
|
||||||
>
|
|
||||||
<a
|
|
||||||
id="logout"
|
|
||||||
href="javascript:;"
|
href="javascript:;"
|
||||||
class="dropdown-item fw-500 pt-3 pb-3"
|
class="dropdown-item fw-500 pt-3 pb-3">
|
||||||
>
|
|
||||||
<span>登出</span>
|
<span>登出</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -367,17 +307,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
||||||
<!-- this overlay is activated only when mobile menu is triggered -->
|
<!-- this overlay is activated only when mobile menu is triggered -->
|
||||||
<div
|
<div class="page-content-overlay"
|
||||||
class="page-content-overlay"
|
|
||||||
data-action="toggle"
|
data-action="toggle"
|
||||||
data-class="mobile-nav-on"
|
data-class="mobile-nav-on"></div>
|
||||||
></div>
|
|
||||||
|
|
||||||
<div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
|
<!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
|
||||||
<div class="yt-navbar-content">
|
<div class="yt-navbar-content">
|
||||||
<ul id="sysMonBtnList"></ul>
|
<ul id="sysMonBtnList"></ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- END Page Content -->
|
<!-- END Page Content -->
|
||||||
<!-- BEGIN Page Footer -->
|
<!-- BEGIN Page Footer -->
|
||||||
<!--<footer class="page-footer" role="contentinfo">
|
<!--<footer class="page-footer" role="contentinfo">
|
||||||
@ -467,106 +405,76 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</div>
|
</div>
|
||||||
<!-- END Page Wrapper -->
|
<!-- END Page Wrapper -->
|
||||||
<!-- BEGIN Messenger -->
|
<!-- BEGIN Messenger -->
|
||||||
<div
|
<div class="modal fade js-modal-messenger modal-backdrop-transparent"
|
||||||
class="modal fade js-modal-messenger modal-backdrop-transparent"
|
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-hidden="true"
|
aria-hidden="true">
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-dialog-right">
|
<div class="modal-dialog modal-dialog-right">
|
||||||
<div class="modal-content h-100">
|
<div class="modal-content h-100">
|
||||||
<div
|
<div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
|
||||||
class="dropdown-header bg-trans-gradient d-flex align-items-center w-100"
|
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="d-flex flex-row align-items-center mt-1 mb-1 color-white"
|
|
||||||
>
|
|
||||||
<span class="mr-2">
|
<span class="mr-2">
|
||||||
<span
|
<span class="rounded-circle profile-image d-block"
|
||||||
class="rounded-circle profile-image d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-d.png');
|
background-image: url('img/demo/avatars/avatar-d.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</span>
|
</span>
|
||||||
<div class="info-card-text">
|
<div class="info-card-text">
|
||||||
<a
|
<a href="javascript:void(0);"
|
||||||
href="javascript:void(0);"
|
|
||||||
class="fs-lg text-truncate text-truncate-lg text-white"
|
class="fs-lg text-truncate text-truncate-lg text-white"
|
||||||
data-toggle="dropdown"
|
data-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false">
|
||||||
>
|
|
||||||
Tracey Chang
|
Tracey Chang
|
||||||
<i
|
<i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
|
||||||
class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"
|
|
||||||
></i>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<a class="dropdown-item" href="#">Send Email</a>
|
<a class="dropdown-item" href="#">Send Email</a>
|
||||||
<a class="dropdown-item" href="#">Create Appointment</a>
|
<a class="dropdown-item" href="#">Create Appointment</a>
|
||||||
<a class="dropdown-item" href="#">Block User</a>
|
<a class="dropdown-item" href="#">Block User</a>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-truncate text-truncate-md opacity-80"
|
<span class="text-truncate text-truncate-md opacity-80">IT Director</span>
|
||||||
>IT Director</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button type="button"
|
||||||
type="button"
|
|
||||||
class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
|
class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
|
||||||
data-dismiss="modal"
|
data-dismiss="modal"
|
||||||
aria-label="Close"
|
aria-label="Close">
|
||||||
>
|
|
||||||
<span aria-hidden="true"><i class="fal fa-times"></i></span>
|
<span aria-hidden="true"><i class="fal fa-times"></i></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body p-0 h-100 d-flex">
|
<div class="modal-body p-0 h-100 d-flex">
|
||||||
<!-- BEGIN msgr-list -->
|
<!-- BEGIN msgr-list -->
|
||||||
<div
|
<div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
|
||||||
class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom"
|
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
|
||||||
class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2"
|
|
||||||
>
|
|
||||||
<i class="fal fa-search"></i>
|
<i class="fal fa-search"></i>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input type="text"
|
||||||
type="text"
|
|
||||||
class="form-control bg-white"
|
class="form-control bg-white"
|
||||||
id="msgr_listfilter_input"
|
id="msgr_listfilter_input"
|
||||||
placeholder="Filter contacts"
|
placeholder="Filter contacts"
|
||||||
aria-label="FriendSearch"
|
aria-label="FriendSearch"
|
||||||
data-listfilter="#js-msgr-listfilter"
|
data-listfilter="#js-msgr-listfilter" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 h-100 custom-scroll">
|
<div class="flex-1 h-100 custom-scroll">
|
||||||
<div class="w-100">
|
<div class="w-100">
|
||||||
<ul id="js-msgr-listfilter" class="list-unstyled m-0">
|
<ul id="js-msgr-listfilter" class="list-unstyled m-0">
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="tracey chang online"
|
data-filter-tags="tracey chang online">
|
||||||
>
|
<div class="d-table-cell align-middle status status-success status-sm">
|
||||||
<div
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="d-table-cell align-middle status status-success status-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-d.png');
|
background-image: url('img/demo/avatars/avatar-d.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
Tracey Chang
|
Tracey Chang
|
||||||
<small
|
<small class="d-block font-italic text-success fs-xs">
|
||||||
class="d-block font-italic text-success fs-xs"
|
|
||||||
>
|
|
||||||
Online
|
Online
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@ -574,28 +482,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="oliver kopyuv online"
|
data-filter-tags="oliver kopyuv online">
|
||||||
>
|
<div class="d-table-cell align-middle status status-success status-sm">
|
||||||
<div
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="d-table-cell align-middle status status-success status-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-b.png');
|
background-image: url('img/demo/avatars/avatar-b.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
Oliver Kopyuv
|
Oliver Kopyuv
|
||||||
<small
|
<small class="d-block font-italic text-success fs-xs">
|
||||||
class="d-block font-italic text-success fs-xs"
|
|
||||||
>
|
|
||||||
Online
|
Online
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@ -603,21 +503,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="dr john cook phd away"
|
data-filter-tags="dr john cook phd away">
|
||||||
>
|
<div class="d-table-cell align-middle status status-warning status-sm">
|
||||||
<div
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="d-table-cell align-middle status status-warning status-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-e.png');
|
background-image: url('img/demo/avatars/avatar-e.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
@ -630,28 +524,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="ali amdaney online"
|
data-filter-tags="ali amdaney online">
|
||||||
>
|
<div class="d-table-cell align-middle status status-success status-sm">
|
||||||
<div
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="d-table-cell align-middle status status-success status-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-g.png');
|
background-image: url('img/demo/avatars/avatar-g.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
Ali Amdaney
|
Ali Amdaney
|
||||||
<small
|
<small class="d-block font-italic fs-xs text-success">
|
||||||
class="d-block font-italic fs-xs text-success"
|
|
||||||
>
|
|
||||||
Online
|
Online
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@ -659,28 +545,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="sarah mcbrook online"
|
data-filter-tags="sarah mcbrook online">
|
||||||
>
|
<div class="d-table-cell align-middle status status-success status-sm">
|
||||||
<div
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="d-table-cell align-middle status status-success status-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-h.png');
|
background-image: url('img/demo/avatars/avatar-h.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
Sarah McBrook
|
Sarah McBrook
|
||||||
<small
|
<small class="d-block font-italic fs-xs text-success">
|
||||||
class="d-block font-italic fs-xs text-success"
|
|
||||||
>
|
|
||||||
Online
|
Online
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@ -688,19 +566,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="ali amdaney offline"
|
data-filter-tags="ali amdaney offline">
|
||||||
>
|
|
||||||
<div class="d-table-cell align-middle status status-sm">
|
<div class="d-table-cell align-middle status status-sm">
|
||||||
<span
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-a.png');
|
background-image: url('img/demo/avatars/avatar-a.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
@ -713,28 +587,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="ali amdaney busy"
|
data-filter-tags="ali amdaney busy">
|
||||||
>
|
<div class="d-table-cell align-middle status status-danger status-sm">
|
||||||
<div
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="d-table-cell align-middle status status-danger status-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-j.png');
|
background-image: url('img/demo/avatars/avatar-j.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
oliver.kopyuv@gotbootstrap.com
|
oliver.kopyuv@gotbootstrap.com
|
||||||
<small
|
<small class="d-block font-italic fs-xs text-danger">
|
||||||
class="d-block font-italic fs-xs text-danger"
|
|
||||||
>
|
|
||||||
Busy
|
Busy
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@ -742,19 +608,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="ali amdaney offline"
|
data-filter-tags="ali amdaney offline">
|
||||||
>
|
|
||||||
<div class="d-table-cell align-middle status status-sm">
|
<div class="d-table-cell align-middle status status-sm">
|
||||||
<span
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-c.png');
|
background-image: url('img/demo/avatars/avatar-c.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
@ -767,19 +629,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#"
|
||||||
href="#"
|
|
||||||
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||||||
data-filter-tags="ali amdaney inactive"
|
data-filter-tags="ali amdaney inactive">
|
||||||
>
|
|
||||||
<div class="d-table-cell align-middle">
|
<div class="d-table-cell align-middle">
|
||||||
<span
|
<span class="profile-image-md rounded-circle d-block"
|
||||||
class="profile-image-md rounded-circle d-block"
|
|
||||||
style="
|
style="
|
||||||
background-image: url('img/demo/avatars/avatar-m.png');
|
background-image: url('img/demo/avatars/avatar-m.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
"
|
"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||||||
<div class="text-truncate text-truncate-md">
|
<div class="text-truncate text-truncate-md">
|
||||||
@ -888,46 +746,34 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
<!-- END custom-scroll -->
|
<!-- END custom-scroll -->
|
||||||
<!-- BEGIN msgr__chatinput -->
|
<!-- BEGIN msgr__chatinput -->
|
||||||
<div class="d-flex flex-column">
|
<div class="d-flex flex-column">
|
||||||
<div
|
<div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
|
||||||
class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top"
|
|
||||||
>
|
|
||||||
<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
|
<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
|
||||||
<div
|
<div id="msgr_input"
|
||||||
id="msgr_input"
|
|
||||||
contenteditable="true"
|
contenteditable="true"
|
||||||
data-placeholder="Type your message here..."
|
data-placeholder="Type your message here..."
|
||||||
class="height-10 form-content-editable"
|
class="height-10 form-content-editable"></div>
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
|
||||||
class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0"
|
<a href="javascript:void(0);"
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="javascript:void(0);"
|
|
||||||
class="btn btn-icon fs-xl width-1 mr-1"
|
class="btn btn-icon fs-xl width-1 mr-1"
|
||||||
data-toggle="tooltip"
|
data-toggle="tooltip"
|
||||||
data-original-title="More options"
|
data-original-title="More options"
|
||||||
data-placement="top"
|
data-placement="top">
|
||||||
>
|
|
||||||
<i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
|
<i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a href="javascript:void(0);"
|
||||||
href="javascript:void(0);"
|
|
||||||
class="btn btn-icon fs-xl mr-1"
|
class="btn btn-icon fs-xl mr-1"
|
||||||
data-toggle="tooltip"
|
data-toggle="tooltip"
|
||||||
data-original-title="Attach files"
|
data-original-title="Attach files"
|
||||||
data-placement="top"
|
data-placement="top">
|
||||||
>
|
|
||||||
<i class="fal fa-paperclip color-fusion-300"></i>
|
<i class="fal fa-paperclip color-fusion-300"></i>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a href="javascript:void(0);"
|
||||||
href="javascript:void(0);"
|
|
||||||
class="btn btn-icon fs-xl mr-1"
|
class="btn btn-icon fs-xl mr-1"
|
||||||
data-toggle="tooltip"
|
data-toggle="tooltip"
|
||||||
data-original-title="Insert photo"
|
data-original-title="Insert photo"
|
||||||
data-placement="top"
|
data-placement="top">
|
||||||
>
|
|
||||||
<i class="fal fa-camera color-fusion-300"></i>
|
<i class="fal fa-camera color-fusion-300"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="ml-auto">
|
<div class="ml-auto">
|
||||||
@ -943,8 +789,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div id="noticeBlock"
|
||||||
id="noticeBlock"
|
|
||||||
style="
|
style="
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
@ -953,8 +798,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
z-index: 50000;
|
z-index: 50000;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
"
|
"></div>
|
||||||
></div>
|
|
||||||
|
|
||||||
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
|
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
|
||||||
<!-- END Messenger -->
|
<!-- END Messenger -->
|
||||||
@ -1101,7 +945,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
// - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
|
// - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
|
||||||
// - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
|
// - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
|
||||||
// (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
|
// (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
|
||||||
require.undef('baja!');
|
require.undef("baja!");
|
||||||
require(["jquery"], loadedBasePack);
|
require(["jquery"], loadedBasePack);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1178,11 +1022,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
* */
|
* */
|
||||||
async function isValidLogin() {
|
async function isValidLogin() {
|
||||||
getUserInfo();
|
getUserInfo();
|
||||||
iniFroList();
|
await iniFroList();
|
||||||
await isShowBuildingInMenu();
|
await isShowBuildingInMenu();
|
||||||
showMainSys();
|
showMainSys();
|
||||||
getBuiList();
|
await getBuiList();
|
||||||
getSysMonBtnList();
|
await getSysMonBtnList();
|
||||||
checkDevState();
|
checkDevState();
|
||||||
loadNoticeConSta();
|
loadNoticeConSta();
|
||||||
|
|
||||||
@ -1203,11 +1047,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
} else {
|
} else {
|
||||||
let strHtml = ``;
|
let strHtml = ``;
|
||||||
$.each(res.data, (index, buiObj) => {
|
$.each(res.data, (index, buiObj) => {
|
||||||
strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
|
// strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
|
||||||
|
|
||||||
|
strHtml += `<a href="javascript:;" id="buiBtn${buiObj.building_tag}" data-target="#sysMonNavbar" data-page="systemMonitor" class="text-center dropdown-item" name="topFunBtn">${buiObj.full_name}</a>`;
|
||||||
});
|
});
|
||||||
pageAct.buildList = res.data;
|
pageAct.buildList = res.data;
|
||||||
|
pageAct.buiTag = res.data[0].building_tag;
|
||||||
|
pageAct.buiName = res.data[0].full_name;
|
||||||
|
|
||||||
//$("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
|
$(".sys_building_dropdown_menu").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
@ -1277,7 +1125,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
} else {
|
} else {
|
||||||
setSysTagForPageAct(this);
|
setSysTagForPageAct(this);
|
||||||
$("#sysMonTopBtn").YTTab("set");
|
$("#sysMonTopBtn").YTTab("set");
|
||||||
$(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
|
if ($(`#subSysBtn${pageAct.sysSubTag}`).length) {
|
||||||
|
$(`#subSysBtn${pageAct.sysSubTag}`)?.YTTab("set");
|
||||||
|
}
|
||||||
|
|
||||||
if (pageAct.isShowBuildingInMenu) {
|
if (pageAct.isShowBuildingInMenu) {
|
||||||
let building_tag = $(this).data("building-tag");
|
let building_tag = $(this).data("building-tag");
|
||||||
@ -1313,6 +1163,24 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
location.href = "/logout";
|
location.href = "/logout";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 紀錄目前被點選的棟別
|
||||||
|
onEvent("click", ".sys_building_dropdown_menu", function (e, actEle) {
|
||||||
|
const target = e.target;
|
||||||
|
const element = e.target.dataset.target;
|
||||||
|
if (element === "#sysMonNavbar") {
|
||||||
|
$(".sys_building_dropdown_menu > .active").removeClass("active");
|
||||||
|
pageAct.buiTag = $(target).prop("id").split("buiBtn")[1];
|
||||||
|
pageAct.buiName = $(target).text();
|
||||||
|
pageAct.urn = $(target).data("urn");
|
||||||
|
$(target).addClass("active");
|
||||||
|
|
||||||
|
clearTimeout(refreshPageTimer);
|
||||||
|
refreshPageTimer = setTimeout(() => {
|
||||||
|
refreshSubPage();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
onEvent("active:change", "#buiList", function (e, actEle) {
|
onEvent("active:change", "#buiList", function (e, actEle) {
|
||||||
if (actEle) {
|
if (actEle) {
|
||||||
pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
|
pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
|
||||||
@ -1331,12 +1199,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
"yt:tab:change",
|
"yt:tab:change",
|
||||||
"[data-tabname=buildTab]",
|
"[data-tabname=buildTab]",
|
||||||
function (e, arg) {
|
function (e, arg) {
|
||||||
pageAct.buiTag = buildingTagOnProcess($(this).prop("id").split("buildTab")[1]);
|
pageAct.buiTag = buildingTagOnProcess(
|
||||||
|
$(this).prop("id").split("buildTab")[1]
|
||||||
|
);
|
||||||
pageAct.buiName = $(this).text();
|
pageAct.buiName = $(this).text();
|
||||||
pageAct.urn = $(this).data("urn");
|
pageAct.urn = $(this).data("urn");
|
||||||
$(this).parents("ul").find("a").removeClass("active");
|
$(this).parents("ul").find("a").removeClass("active");
|
||||||
$(this).parent("a").addClass("active");
|
$(this).parent("a").addClass("active");
|
||||||
console.log(e, arg);
|
|
||||||
|
|
||||||
clearTimeout(refreshPageTimer);
|
clearTimeout(refreshPageTimer);
|
||||||
refreshPageTimer = setTimeout(() => {
|
refreshPageTimer = setTimeout(() => {
|
||||||
@ -1465,7 +1334,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
if (lastPage) {
|
if (lastPage) {
|
||||||
let lastPageAct = {};
|
let lastPageAct = {};
|
||||||
|
|
||||||
if (sessionStorage.getItem("pageAct") && isJSON(sessionStorage.getItem("pageAct"))) {
|
if (
|
||||||
|
sessionStorage.getItem("pageAct") &&
|
||||||
|
isJSON(sessionStorage.getItem("pageAct"))
|
||||||
|
) {
|
||||||
lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
|
lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1479,7 +1351,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
$(`#subSysBtn${lastPageAct.sysSubTag}`).click();
|
$(`#subSysBtn${lastPageAct.sysSubTag}`).click();
|
||||||
} else {
|
} else {
|
||||||
$(
|
$(
|
||||||
`#subSysBtn${lastPageAct.sysSubTag}[data-building-tag=${buildingTagOnJquery(pageAct.buiTag)}]`
|
`#subSysBtn${lastPageAct.sysSubTag
|
||||||
|
}[data-building-tag=${buildingTagOnJquery(pageAct.buiTag)}]`
|
||||||
).click();
|
).click();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@ -1575,7 +1448,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
: "";
|
: "";
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(devNum)}" data-position="left">
|
html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(
|
||||||
|
devNum
|
||||||
|
)}" data-position="left">
|
||||||
<div class="card-header p-3">
|
<div class="card-header p-3">
|
||||||
|
|
||||||
<div class="position-absolute mr-5" style="word-break: break-all;">
|
<div class="position-absolute mr-5" style="word-break: break-all;">
|
||||||
@ -1706,9 +1581,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
function devItemNameEvent() {
|
function devItemNameEvent() {
|
||||||
onEvent("click", "[name=devItemName]", function () {
|
onEvent("click", "[name=devItemName]", function () {
|
||||||
let devNum = $(this).data("number");
|
let devNum = $(this).data("number");
|
||||||
let devObj = $(`[name=devItem][data-number=${deviceNumber(devNum)}]`).data(
|
let devObj = $(
|
||||||
"devobj"
|
`[name=devItem][data-number=${deviceNumber(devNum)}]`
|
||||||
);
|
).data("devobj");
|
||||||
if (devObj) {
|
if (devObj) {
|
||||||
moveViewToDevice(devObj.forge_dbid);
|
moveViewToDevice(devObj.forge_dbid);
|
||||||
}
|
}
|
||||||
@ -2032,10 +1907,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setSysTagForPageAct(obj) {
|
function setSysTagForPageAct(obj) {
|
||||||
pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
|
pageAct.sysMainTag =
|
||||||
pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
|
$(obj).data("subSysObj")?.main_system_tag ||
|
||||||
pageAct.sysSubName = $(obj).data("subSysObj").full_name;
|
pageAct.sysSubObj.main_system_tag;
|
||||||
pageAct.sysSubObj = $(obj).data("subSysObj");
|
pageAct.sysSubTag =
|
||||||
|
$(obj).data("subSysObj")?.sub_system_tag ||
|
||||||
|
pageAct.sysSubObj.sub_system_tag;
|
||||||
|
pageAct.sysSubName =
|
||||||
|
$(obj).data("subSysObj")?.full_name || pageAct.sysSubName;
|
||||||
|
pageAct.sysSubObj = $(obj).data("subSysObj") || pageAct.sysSubObj;
|
||||||
getDevItem();
|
getDevItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2101,7 +1981,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
function (res) {
|
function (res) {
|
||||||
if (!res || res.code != "0000") {
|
if (!res || res.code != "0000") {
|
||||||
} else {
|
} else {
|
||||||
pageAct.mainStatus = res.data;
|
// pageAct.mainStatus = res.data;
|
||||||
|
pageAct.mainStatus = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
@ -2118,7 +1999,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
function (res) {
|
function (res) {
|
||||||
if (!res || res.code != "0000") {
|
if (!res || res.code != "0000") {
|
||||||
} else {
|
} else {
|
||||||
pageAct.isShowBuildingInMenu = res.data;
|
// pageAct.isShowBuildingInMenu = res.data;
|
||||||
|
pageAct.isShowBuildingInMenu = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
@ -2163,11 +2045,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
$.each(res.data, function (i, v) {
|
$.each(res.data, function (i, v) {
|
||||||
if (v.authCode == "PF1") {
|
if (v.authCode == "PF1") {
|
||||||
strHtml += `<div class="btn-group mx-4" >
|
strHtml += `<div class="btn-group mx-4" >
|
||||||
<a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" aria-haspopup="true" aria-expanded="false">
|
<a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
|
||||||
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
||||||
</a>
|
</a>
|
||||||
|
<div style="transform: translateY(55px)">
|
||||||
</div>`;
|
<div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
hasMonitor = true;
|
hasMonitor = true;
|
||||||
} else {
|
} else {
|
||||||
@ -2234,7 +2120,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
""
|
""
|
||||||
);
|
);
|
||||||
a.html(
|
a.html(
|
||||||
`<span id="buildTab${buildingTagOnJquery(building.building_tag)}" data-tabname="buildTab" data-urn="${building.urn_3D}">${building.building_name}</span>`
|
`<span id="buildTab${buildingTagOnJquery(
|
||||||
|
building.building_tag
|
||||||
|
)}" data-tabname="buildTab" data-urn="${building.urn_3D}">${building.building_name
|
||||||
|
}</span>`
|
||||||
);
|
);
|
||||||
li.append(a);
|
li.append(a);
|
||||||
let ul = creEle("ul", null, null, null, [
|
let ul = creEle("ul", null, null, null, [
|
||||||
@ -2262,7 +2151,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
{
|
{
|
||||||
page: page,
|
page: page,
|
||||||
tabname: "systemMonitor",
|
tabname: "systemMonitor",
|
||||||
"building-tag": buildingTagOnJquery(building.building_tag),
|
"building-tag": buildingTagOnJquery(
|
||||||
|
building.building_tag
|
||||||
|
),
|
||||||
},
|
},
|
||||||
"topFunBtn"
|
"topFunBtn"
|
||||||
);
|
);
|
||||||
@ -2293,13 +2184,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
ul.append(li2);
|
ul.append(li2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
li.append(ul);
|
li.append(ul);
|
||||||
$("#sysMonBtnList").append(li);
|
$("#sysMonBtnList").append(li);
|
||||||
});
|
});
|
||||||
$("#sysMonTopBtn").YTNavbar("init", { onlyOneOpen: true });
|
$("#sysMonTopBtn").YTNavbar("init", { onlyOneOpen: true });
|
||||||
|
|
||||||
$("span[id^=buildTab]").first().YTTab("setAndClick",{triggerType:"first"});
|
$("span[id^=buildTab]")
|
||||||
|
.first()
|
||||||
|
.YTTab("setAndClick", { triggerType: "first" });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
@ -2346,6 +2238,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
a.data("subSysObj", subSysObj);
|
a.data("subSysObj", subSysObj);
|
||||||
subSysObj.main_system_tag = mainSysObj.main_system_tag;
|
subSysObj.main_system_tag = mainSysObj.main_system_tag;
|
||||||
$("#sysMonBtnList").append(li);
|
$("#sysMonBtnList").append(li);
|
||||||
|
if (index === 0 && index2 === 0) {
|
||||||
|
pageAct.sysMainTag = mainSysObj.main_system_tag;
|
||||||
|
pageAct.sysSubName = subSysObj.full_name;
|
||||||
|
pageAct.sysSubObj = subSysObj;
|
||||||
|
pageAct.sysSubTag = subSysObj.sub_system_tag;
|
||||||
|
$(`#subSysBtn${subSysObj.sub_system_tag}`).addClass(
|
||||||
|
"active"
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -95,7 +95,10 @@ function setDropdownItem(menuEle) {
|
|||||||
|
|
||||||
let actText = $(menuEle).find(".dropdown-item.active").first().text();
|
let actText = $(menuEle).find(".dropdown-item.active").first().text();
|
||||||
let actEleId = $(menuEle).prop("id");
|
let actEleId = $(menuEle).prop("id");
|
||||||
|
if (actEleId) {
|
||||||
$(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
|
$(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
|
/*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
|
||||||
$(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
|
$(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
|
||||||
@ -1287,3 +1290,23 @@ function deviceNumberOnProcess(devNum){
|
|||||||
return devNum;
|
return devNum;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function convertToBase64(imagePath, callback) {
|
||||||
|
// 創建一個新的 FileReader 物件
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
// 當 FileReader 讀取完成時的處理函數
|
||||||
|
reader.onloadend = () => {
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
// 從 result 中獲取 base64 編碼的圖像數據
|
||||||
|
const base64String = reader.result.split(',')[1];
|
||||||
|
callback(base64String);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 讀取圖像文件
|
||||||
|
fetch(imagePath)
|
||||||
|
.then((response) => response.blob())
|
||||||
|
.then((blob) => reader.readAsDataURL(blob))
|
||||||
|
.catch((error) => console.error('Error:', error));
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user