908 lines
27 KiB
HTML
908 lines
27 KiB
HTML
<main id="js-page-content" role="main" class="page-content">
|
|
<h1 class="p-2 mb-0">歷史資料</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-xl-2">
|
|
<div class="rounded border border-white">
|
|
<div class="d-flex position-relative py-3 px-4">
|
|
<i
|
|
class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"
|
|
></i>
|
|
<input
|
|
type="text"
|
|
id="js_nested_list_filter"
|
|
class="form-control shadow-inset-1 pl-6 border-success"
|
|
placeholder="輸入兩字以上"
|
|
/>
|
|
</div>
|
|
<!-- nav-menu-reset will reset the font colors -->
|
|
<form id="device_list_form" class="w-100">
|
|
<!-- <ul id="js_nested_list"
|
|
class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
|
|
data-nav-accordion="true"></ul> -->
|
|
<div id="accordion" class="js_nested_list"></div>
|
|
</form>
|
|
<div
|
|
class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-xl-10">
|
|
<div class="row bg-dark p-2">
|
|
<!-- 改放小類 -->
|
|
<div class="py-2 col-12" id="his_building">
|
|
<div
|
|
class="item btn-group btn-group-toggle"
|
|
data-toggle="buttons"
|
|
></div>
|
|
</div>
|
|
<div class="col-12 mt-2">
|
|
<div id="devPointsList" class="btn-group"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row bg-dark p-2 mb-5 align-items-center">
|
|
<div class="col-auto">
|
|
<div class="btn-group">
|
|
<button
|
|
type="button"
|
|
onclick="setDateType(1, this)"
|
|
class="btn btn-secondary waves-effect waves-themed active"
|
|
>
|
|
日期
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick="setDateType(2, this)"
|
|
class="btn btn-secondary waves-effect waves-themed"
|
|
>
|
|
時間
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<form id="search_time_form" class="form-group d-flex">
|
|
<div class="d-flex">
|
|
<input
|
|
class="form-control flatpickr flatpickr-input selectDate mr-1"
|
|
id="his_startdate"
|
|
data-val=""
|
|
type="date"
|
|
name="Start_date"
|
|
value=""
|
|
/>
|
|
|
|
<input
|
|
class="form-control flatpickr flatpickr-input selectTime"
|
|
id="his_startTime"
|
|
data-val=""
|
|
type="text"
|
|
name="Start_time"
|
|
value=""
|
|
/>
|
|
</div>
|
|
<div class="d-flex ml-4">
|
|
<input
|
|
class="form-control flatpickr flatpickr-input selectDate mr-1"
|
|
id="his_enddate"
|
|
type="date"
|
|
data-val=""
|
|
name="End_date"
|
|
value=""
|
|
/>
|
|
<input
|
|
class="form-control flatpickr flatpickr-input selectTime"
|
|
id="his_endTime"
|
|
data-val=""
|
|
type="text"
|
|
name="End_time"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<a href="#" onclick="getData()" class="btn btn-info mr-2">查詢</a>
|
|
<a
|
|
href="#"
|
|
onclick="exportExcel()"
|
|
class="btn btn-info waves-effect waves-themed mr-2"
|
|
>
|
|
<span class="fal fa-file-excel mr-1"></span>
|
|
匯出
|
|
</a>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-info waves-effect waves-themed dropdown-toggle"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
id="favoriteDropdownMenu"
|
|
>
|
|
常用組合
|
|
</button>
|
|
<div
|
|
class="dropdown-menu favorite_dropdown"
|
|
aria-labelledby="favoriteDropdownMenu"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="frame-wrap">
|
|
<table
|
|
id="historyTable2"
|
|
class="table table-bordered table-striped text-center m-0 w-100"
|
|
></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 常用清單 -->
|
|
<div
|
|
class="modal fade"
|
|
id="favoriteModal"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="favoriteModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="favoriteModalLabel">新增/編輯常用清單</h5>
|
|
<button
|
|
type="button"
|
|
class="close"
|
|
data-dismiss="modal"
|
|
aria-label="Close"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="favoriteForm">
|
|
<div class="form-group">
|
|
<label for="favoriteName">名稱</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="favoriteName"
|
|
name="favoriteName"
|
|
placeholder="名稱"
|
|
/>
|
|
<small class="input_error_text text-danger"></small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
|
關閉
|
|
</button>
|
|
<button type="button" class="btn btn-primary confirm_modal_btn">
|
|
確認
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<style>
|
|
.flatpickr-monthDropdown-month {
|
|
color: black !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var historyTable2 = null;
|
|
var buildingTag = null;
|
|
pageAct.hisBuiName = "";
|
|
hisFirst = true;
|
|
var device_list = [];
|
|
var temp_device_list = []; // 用來儲存搜尋資料的值
|
|
$(function () {
|
|
flatpickr(".selectDate", {
|
|
locale: "zh_tw",
|
|
dateFormat: "Y-m-d",
|
|
});
|
|
|
|
flatpickr(".selectTime", {
|
|
locale: "zh_tw",
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: "H:i",
|
|
time_24hr: true,
|
|
});
|
|
|
|
setDateType(1, $(`[onclick="setDateType(1, this)"]`));
|
|
initList();
|
|
getFavorite();
|
|
loadTable(null);
|
|
});
|
|
|
|
function initList() {
|
|
let sendData = {
|
|
building_tag: pageAct.buiTag,
|
|
};
|
|
objSendData.Data = sendData;
|
|
let url = baseApiUrl + "/api/History/GetMainSub";
|
|
function success(res) {
|
|
let strHtml = ``;
|
|
let i1 = null,
|
|
i2 = null,
|
|
first = true;
|
|
|
|
let buiHtml = "";
|
|
$.each(res.data.history_Main_Systems, function (index, val) {
|
|
$.each(val.history_Sub_systems, function (index2, val2) {
|
|
i2 = val2.device != null && i2 == null ? index2 : null;
|
|
|
|
buiHtml += `<label class="btn btn-secondary">
|
|
<input type="radio" name="subRadio" id="radio-${val2.sub_system_tag}" value="${val2.sub_system_tag}" onchange="selectSub(this, '${val2.sub_system_tag}')"> ${val2.full_name}
|
|
</label>`;
|
|
});
|
|
});
|
|
|
|
$("#his_building").find(".item").empty();
|
|
$("#his_building").find(".item").append(buiHtml);
|
|
if ($("#his_building .item label").first())
|
|
$("#his_building .item input[type='radio']").first().click();
|
|
}
|
|
$(loadEle).Loading("close");
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
|
|
}
|
|
|
|
// 取得sub
|
|
async function selectSub(e, sub) {
|
|
console.log("selected sub", sub);
|
|
let result = false;
|
|
let subRadios = $("[name=subRadio]:checked");
|
|
subTag = null;
|
|
if (subRadios && subRadios.length > 0) {
|
|
$("[name=subRadio]").parent().removeClass("btn-info");
|
|
$("[name=subRadio]").parent().addClass("btn-secondary");
|
|
$("[name=subRadio]:checked").parent().removeClass("btn-secondary");
|
|
$("[name=subRadio]:checked").parent().addClass("btn-info");
|
|
subTag = subRadios.val(); //sub tag
|
|
pageAct.selectedSub = subTag;
|
|
if (e) {
|
|
await getSidebar(subTag);
|
|
}
|
|
|
|
result = true;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function showDeviceList(data) {
|
|
temp_device_list = data;
|
|
let strHtml = "";
|
|
let i1 = null,
|
|
i2 = null,
|
|
first = true;
|
|
$.each(data, function (index, building) {
|
|
let innerHtml = "";
|
|
$.each(building.device_list, function (index2, val2) {
|
|
innerHtml += ` <li class="card-header px-5 list-group-item">
|
|
<input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="Device_list" data-device="${val2.device_number}" value="${val2.device_number}" id="dev_${val2.device_number}">
|
|
<p class="h6 mb-0">
|
|
${val2.device_name}
|
|
</p>
|
|
</li>`;
|
|
});
|
|
|
|
strHtml += ` <div class="card">
|
|
<div class="card-header px-3">
|
|
<input class="custom-control-input opacity-100" style="z-index: 0" type="checkbox" name="bui_selected" data-building="${building.building_tag}" value="${building.building_tag}" id="bui_${building.building_tag}">
|
|
<p class="h6 mb-0 ml-2"
|
|
style="cursor:pointer;"
|
|
data-toggle="collapse" data-target="#collapse_${building.building_tag}" aria-expanded="false" aria-controls="collapse_${building.building_tag}">
|
|
${building.building_name}
|
|
</p>
|
|
</div>
|
|
|
|
<div id="collapse_${building.building_tag}" class="collapse" aria-labelledby="heading_${building.building_tag}" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
${innerHtml}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
let wholeContent = `
|
|
<div class="card">
|
|
<div class="card-header px-3">
|
|
<input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="bui_selected" data-building="all" value="all" id="bui_all">
|
|
<p class="h6 mb-0 ml-3">全選</p>
|
|
<div class="card-body">${strHtml}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
$(".js_nested_list").html(wholeContent);
|
|
$(`[data-toggle="collapse"]`).first().click();
|
|
}
|
|
|
|
document
|
|
.querySelector("#js_nested_list_filter")
|
|
.addEventListener("keyup", (e) => {
|
|
if (e.key === "Enter") {
|
|
let searchDev = [];
|
|
device_list.forEach((d) => {
|
|
const devs = d.device_list.filter(({ device_name }) =>
|
|
device_name.includes(e.target.value)
|
|
);
|
|
if (devs.length > 0) {
|
|
searchDev = [
|
|
...searchDev,
|
|
{
|
|
...d,
|
|
device_list: devs,
|
|
},
|
|
];
|
|
}
|
|
});
|
|
|
|
showDeviceList(searchDev);
|
|
}
|
|
});
|
|
|
|
function selectAllBuildingDevice(e) {
|
|
let curData = [],
|
|
curBuisDev = [],
|
|
checkBui = [];
|
|
if (e.target.name === "bui_selected") {
|
|
if (e.target.dataset.building == "all") {
|
|
temp_device_list.forEach(({ device_list }) => {
|
|
curData = [...curData, ...device_list];
|
|
});
|
|
curBuisDev = curData.map(({ device_number }) => device_number);
|
|
if (e.target.checked) {
|
|
checkBui = temp_device_list.map(({ device_list, building_tag }) => ({
|
|
building_tag,
|
|
builing_check: true,
|
|
}));
|
|
} else {
|
|
checkBui = temp_device_list.map(({ device_list, building_tag }) => ({
|
|
building_tag,
|
|
builing_check: false,
|
|
}));
|
|
}
|
|
} else {
|
|
curData = temp_device_list.find(
|
|
({ building_tag }) => e.target.dataset.building === building_tag
|
|
);
|
|
curBuisDev = curData.device_list.map(
|
|
({ device_number }) => device_number
|
|
);
|
|
}
|
|
|
|
const form = $("#device_list_form")[0];
|
|
const formData = new FormData(form);
|
|
let list = formData.getAll("Device_list");
|
|
|
|
if (e.target.checked) {
|
|
list = [...list, ...curBuisDev];
|
|
} else {
|
|
list = list.filter((dev) => !curBuisDev.includes(dev));
|
|
}
|
|
|
|
checkBui.forEach(({ building_tag, builing_check }) => {
|
|
if (builing_check) {
|
|
$(
|
|
`[name="bui_selected"][data-building="${building_tag}"]`
|
|
)[0].checked = true;
|
|
} else {
|
|
$(
|
|
`[name="bui_selected"][data-building="${building_tag}"]`
|
|
)[0].checked = false;
|
|
}
|
|
});
|
|
|
|
$('[name="Device_list"]').each((i, e) => {
|
|
if (list.includes(e.dataset.device)) {
|
|
e.checked = true;
|
|
} else {
|
|
e.checked = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
document
|
|
.querySelector(".js_nested_list")
|
|
.addEventListener("change", selectAllBuildingDevice);
|
|
|
|
// 取得右側sidebar
|
|
function getSidebar(subTag) {
|
|
// let subTag = $("[name=subRadio]:checked").val()
|
|
let sendData = {
|
|
sub_system_tag: subTag,
|
|
};
|
|
objSendData.Data = sendData;
|
|
let url = baseApiUrl + "/api/History/GetDeviceInfo";
|
|
function stop(e) {
|
|
e.stopPropagation();
|
|
}
|
|
function success(res) {
|
|
device_list = res.data;
|
|
temp_device_list = res.data;
|
|
showDeviceList(res.data);
|
|
$(`[name="Device_list"]`).first().click();
|
|
devPointsList();
|
|
}
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
|
|
}
|
|
|
|
function devPointsList() {
|
|
// 從form取得目前的設備列表
|
|
const form = $("#device_list_form")[0];
|
|
const formData = new FormData(form);
|
|
|
|
let sendData = {
|
|
Device_list:
|
|
typeof formData.get("Device_list") == "string"
|
|
? [formData.get("Device_list")]
|
|
: formData.get("Device_list"),
|
|
};
|
|
objSendData.Data = sendData;
|
|
let url = baseApiUrl + "/api/History/GetAllDevPoi";
|
|
function success(res) {
|
|
let strHtml = ``;
|
|
|
|
$.each(res.data, function (index, val) {
|
|
if (index == 0) {
|
|
strHtml += `<button onClick="setValue(null, null, '${
|
|
val.points
|
|
}', this)" type="button" class="btn btn-info waves-effect waves-themed" data-point="${
|
|
val.points
|
|
}">${val.full_name || val.points}</button>`;
|
|
pageAct.devicePoiName = [val.points];
|
|
} else {
|
|
strHtml += `<button onClick="setValue(null, null, '${
|
|
val.points
|
|
}', this)" type="button" class="btn btn-secondary waves-effect waves-themed" data-point="${
|
|
val.points
|
|
}">${val.full_name || val.points}</button>`;
|
|
}
|
|
});
|
|
// $("[data-point]").first().click();
|
|
$("#devPointsList").html(strHtml);
|
|
$("[name='Start_date']").val(moment().format("YYYY-MM-DD"));
|
|
$("[name='Start_time']").val(
|
|
moment().set("hour", 0).set("minute", 0).format("HH:mm")
|
|
);
|
|
$("[name='End_date']").val(moment().format("YYYY-MM-DD"));
|
|
$("[name='End_time']").val(
|
|
moment().set("hour", 23).set("minute", 59).format("HH:mm")
|
|
);
|
|
if (hisFirst) {
|
|
getData();
|
|
}
|
|
}
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
|
|
}
|
|
|
|
function getData(e) {
|
|
e?.preventDefault();
|
|
$(loadEle)?.Loading?.("start");
|
|
let sendData = {
|
|
Type: pageAct.dateType,
|
|
Points: pageAct.devicePoiName,
|
|
};
|
|
const timeForm = $("#search_time_form")[0];
|
|
const seaerchFormData = new FormData(timeForm);
|
|
for (let [key, value] of seaerchFormData) {
|
|
sendData[key] = value;
|
|
}
|
|
|
|
const form = $("#device_list_form")[0];
|
|
const formData = new FormData(form);
|
|
|
|
sendData["Device_list"] = formData.getAll("Device_list");
|
|
|
|
objSendData.Data = sendData;
|
|
let url = baseApiUrl + "/api/History/GetHistoryData";
|
|
ytAjax = new YourTeam.Ajax(
|
|
url,
|
|
objSendData,
|
|
function (res) {
|
|
if (res && res.code == "0000") {
|
|
loadTable(res.data.items);
|
|
}
|
|
},
|
|
function (res) {
|
|
$(loadEle).Loading("close");
|
|
},
|
|
"POST",
|
|
true
|
|
).send();
|
|
}
|
|
|
|
function setValue(deviceNumber, deviceName, devPoi, elem) {
|
|
const elems = $("[data-point]");
|
|
if (pageAct.devicePoiName.includes(devPoi)) {
|
|
pageAct.devicePoiName = pageAct.devicePoiName.filter((p) => p !== devPoi);
|
|
} else {
|
|
pageAct.devicePoiName = [...pageAct.devicePoiName, devPoi];
|
|
}
|
|
elems.each((i, e) => {
|
|
let pointName = e.dataset.point;
|
|
if (pageAct.devicePoiName.includes(pointName)) {
|
|
$(e).removeClass("btn-secondary").addClass("btn-info");
|
|
} else {
|
|
$(e).removeClass("btn-info").addClass("btn-secondary");
|
|
}
|
|
});
|
|
}
|
|
|
|
function setDateType(type, elem) {
|
|
console.log(type);
|
|
pageAct.dateType = type;
|
|
$(elem).parent().children().removeClass("btn-info active");
|
|
$(elem).addClass("btn-info active");
|
|
|
|
if (type === 1) {
|
|
$(".selectTime").css("display", "none");
|
|
} else if (type === 2) {
|
|
$(".selectTime").css("display", "block");
|
|
}
|
|
}
|
|
|
|
function loadTable(data) {
|
|
if (historyTable2) {
|
|
historyTable2.clear().draw();
|
|
historyTable2.destroy();
|
|
$("#historyTable2").empty();
|
|
}
|
|
console.log("2", data);
|
|
if (data) {
|
|
let tag = "#historyTable2";
|
|
|
|
let column_defs = [
|
|
{ targets: [0], width: "20%", sortable: true },
|
|
{ targets: [1], width: "20%", sortable: true },
|
|
{ targets: [2], width: "20%", sortable: true },
|
|
{ targets: [3], width: "20%", sortable: true },
|
|
{ targets: [4], width: "20%", sortable: true },
|
|
];
|
|
|
|
let columns = [
|
|
{
|
|
title: "廠區",
|
|
data: "building_name",
|
|
},
|
|
|
|
{
|
|
title: "設備名稱",
|
|
data: "device_name",
|
|
},
|
|
{
|
|
title: "類別",
|
|
data: "points",
|
|
},
|
|
{
|
|
title: "數值",
|
|
data: "value",
|
|
},
|
|
{
|
|
title: "紀錄時間",
|
|
data: "timestamp",
|
|
},
|
|
];
|
|
|
|
historyTable2 = new YourTeam.JqDataTables.getTableByStatic(
|
|
tag,
|
|
data,
|
|
columns,
|
|
column_defs,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
"tpi"
|
|
);
|
|
|
|
$(tag).DataTable().order([4, "desc"]);
|
|
$(loadEle)?.Loading?.("close");
|
|
}
|
|
}
|
|
|
|
function exportExcel() {
|
|
$(loadEle).Loading("start");
|
|
let token = cookies.get("JWT-Authorization");
|
|
let url = baseApiUrl + "/api/ExportHistoryExcel";
|
|
let sendData = {
|
|
Type: pageAct.dateType,
|
|
Points: pageAct.devicePoiName,
|
|
};
|
|
const timeForm = $("#search_time_form")[0];
|
|
const seaerchFormData = new FormData(timeForm);
|
|
for (let [key, value] of seaerchFormData) {
|
|
console.log(1, key, value);
|
|
sendData[key] = value;
|
|
}
|
|
|
|
const form = $("#device_list_form")[0];
|
|
const formData = new FormData(form);
|
|
sendData["Device_list"] = formData.getAll("Device_list");
|
|
(sendData["Building_tag_list"] = [
|
|
...new Set(sendData["Device_list"].map((d) => d.split("_")[1])),
|
|
]),
|
|
(objSendData.Data = sendData);
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url,
|
|
data: JSON.stringify(objSendData.Data),
|
|
aysnc: true,
|
|
headers: {
|
|
Authorization: "Bearer " + token,
|
|
},
|
|
contentType: "application/json; charset=utf-8",
|
|
xhrFields: {
|
|
responseType: "blob", // to avoid binary data being mangled on charset conversion
|
|
},
|
|
success: function (rel, text, xhr) {
|
|
if (rel) {
|
|
downloadByBlob(xhr, rel);
|
|
}
|
|
$(loadEle).Loading("close");
|
|
},
|
|
error: function () {
|
|
$(loadEle).Loading("close");
|
|
},
|
|
complete: (xhr) => {
|
|
setLoading(false);
|
|
},
|
|
});
|
|
// ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
|
|
// $(loadEle).Loading("close");
|
|
// }, function (rel) {
|
|
// if (rel) {
|
|
// downloadByBlob(xhr, rel);
|
|
// }
|
|
|
|
// $(loadEle).Loading("close");
|
|
// }, "POST",true).send();
|
|
}
|
|
|
|
var editGuid = "";
|
|
var favorite_setting = [];
|
|
function openModal(favorite_guid) {
|
|
editGuid = "";
|
|
if (favorite_guid) {
|
|
$("#favoriteName").val(
|
|
favorite_setting.find((d) => d.favorite_guid === favorite_guid)
|
|
.favorite_name
|
|
);
|
|
editGuid = favorite_guid;
|
|
}
|
|
$("#favoriteModal").modal("show");
|
|
}
|
|
|
|
function closeModal() {
|
|
$("#favoriteName").val("");
|
|
$("#favoriteModal").modal("hide");
|
|
}
|
|
|
|
async function addFavorite() {
|
|
$(".input_error_text").text("");
|
|
let token = cookies.get("JWT-Authorization");
|
|
const form = $("#device_list_form")[0];
|
|
const formData = new FormData(form);
|
|
Device_list = formData.getAll("Device_list");
|
|
|
|
const favoriteForm = $("#favoriteForm")[0];
|
|
const favoriteFormData = new FormData(favoriteForm);
|
|
const favorite_name = favoriteFormData.get("favoriteName");
|
|
|
|
if (favorite_name) {
|
|
const json = await fetch(
|
|
baseApiUrl + "/api/History/SaveHistoryFavorite",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: "Bearer " + token,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
favorite_name,
|
|
device_name_tag: $("[name=subRadio]:checked").val(),
|
|
Type: pageAct.dateType,
|
|
Points: pageAct.devicePoiName,
|
|
Device_list,
|
|
}),
|
|
}
|
|
);
|
|
|
|
const res = await json.json();
|
|
if (res && res.code == "0000") {
|
|
getFavorite();
|
|
closeModal();
|
|
} else {
|
|
toast_error(res.msg || common.SysErr);
|
|
}
|
|
} else {
|
|
$(".input_error_text").text("請輸入名稱");
|
|
}
|
|
}
|
|
|
|
async function editFavorite(favorite_guid) {
|
|
let token = cookies.get("JWT-Authorization");
|
|
const favoriteForm = $("#favoriteForm")[0];
|
|
const favoriteFormData = new FormData(favoriteForm);
|
|
const favorite_name = favoriteFormData.get("favoriteName");
|
|
|
|
if (favorite_name) {
|
|
const json = await fetch(
|
|
baseApiUrl + "/api/History/EditHistoryFavorite",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: "Bearer " + token,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
favorite_name,
|
|
favorite_guid,
|
|
}),
|
|
}
|
|
);
|
|
const res = await json.json();
|
|
if (res && res.code == "0000") {
|
|
getFavorite();
|
|
closeModal();
|
|
} else {
|
|
toast_error(res.msg || common.SysErr);
|
|
}
|
|
} else {
|
|
$(".input_error_text").text("請輸入名稱");
|
|
}
|
|
}
|
|
|
|
async function delFavorite(favorite_guid = "") {
|
|
let token = cookies.get("JWT-Authorization");
|
|
const json = await fetch(
|
|
baseApiUrl + "/api/History/DeleteHistoryFavorite",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: "Bearer " + token,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
favorite_guid,
|
|
}),
|
|
}
|
|
);
|
|
const res = await json.json();
|
|
if (res && res.code == "0000") {
|
|
getFavorite();
|
|
}
|
|
}
|
|
|
|
async function confirmModal() {
|
|
console.log(editGuid);
|
|
if (editGuid) {
|
|
editFavorite(editGuid);
|
|
} else {
|
|
addFavorite();
|
|
}
|
|
}
|
|
|
|
document
|
|
.querySelector(".confirm_modal_btn")
|
|
.addEventListener("click", confirmModal);
|
|
|
|
async function getFavorite() {
|
|
let token = cookies.get("JWT-Authorization");
|
|
const json = await fetch(baseApiUrl + "/api/History/GetHistoryFavorite", {
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: "Bearer " + token,
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
const res = await json.json();
|
|
|
|
let str = "";
|
|
if (res && res.code == "0000") {
|
|
favorite_setting = res.data;
|
|
res.data.forEach((d) => {
|
|
str += `
|
|
<div class="d-flex justify-content-between align-items-center px-2" >
|
|
<button class="dropdown-item p-2" data-function="show" data-favorite="${d.favorite_guid}" style="width: 150px">${d.favorite_name}</button>
|
|
<span class="d-flex">
|
|
<button class="btn btn-link px-2" data-favorite="${d.favorite_guid}">
|
|
<i class="fas fa-pencil-alt text-info mr-1" data-function="edit" data-favorite="${d.favorite_guid}"></i>
|
|
</button>
|
|
<button class="btn btn-link px-2" data-favorite="${d.favorite_guid}">
|
|
<i class="fas fa-times text-danger" data-function="del" data-favorite="${d.favorite_guid}"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
`;
|
|
});
|
|
str += ` <div class="dropdown-divider"></div>
|
|
<div
|
|
class="dropdown-item d-flex justify-content-between align-items-center px-2"
|
|
>
|
|
<button
|
|
class="text-center btn btn-info btn-block"
|
|
type="button"
|
|
data-toggle="modal"
|
|
data-target="#favoriteModal"
|
|
>
|
|
新增
|
|
</button>
|
|
</div>`;
|
|
|
|
$(".favorite_dropdown").html(str);
|
|
}
|
|
}
|
|
|
|
function getDataFromFavorite(data) {
|
|
console.log(data);
|
|
const dev = data.device_list.map((d) => d.split("_")[1]);
|
|
const checkBui = device_list.map(({ device_list, building_tag }) => ({
|
|
building_tag,
|
|
builing_check:
|
|
dev.filter((b) => b === building_tag).length === device_list.length,
|
|
}));
|
|
|
|
checkBui.forEach(({ building_tag, builing_check }) => {
|
|
if (builing_check) {
|
|
$(
|
|
`[name="bui_selected"][data-building="${building_tag}"]`
|
|
)[0].checked = true;
|
|
} else {
|
|
$(
|
|
`[name="bui_selected"][data-building="${building_tag}"]`
|
|
)[0].checked = false;
|
|
}
|
|
});
|
|
|
|
$('[name="Device_list"]').each((i, e) => {
|
|
if (data.device_list.includes(e.dataset.device)) {
|
|
e.checked = true;
|
|
} else {
|
|
e.checked = false;
|
|
}
|
|
});
|
|
pageAct.devicePoiName = data.points;
|
|
pageAct.Type = data.type;
|
|
selectSub(null, data.device_name_tag);
|
|
const elems = $("[data-point]");
|
|
elems.each((i, e) => {
|
|
let pointName = e.dataset.point;
|
|
if (pageAct.devicePoiName.includes(pointName)) {
|
|
$(e).removeClass("btn-secondary").addClass("btn-info");
|
|
} else {
|
|
$(e).removeClass("btn-info").addClass("btn-secondary");
|
|
}
|
|
});
|
|
}
|
|
|
|
document
|
|
.querySelector(".favorite_dropdown")
|
|
.addEventListener("click", (e) => {
|
|
console.log(e.target, e.target.dataset);
|
|
if (e.target.dataset.function == "edit") {
|
|
openModal(e.target.dataset.favorite);
|
|
} else if (e.target.dataset.function == "del") {
|
|
delFavorite(e.target.dataset.favorite);
|
|
} else if (e.target.dataset.function == "show") {
|
|
console.log(favorite_setting);
|
|
getDataFromFavorite(
|
|
favorite_setting.find(
|
|
(d) => d.favorite_guid === e.target.dataset.favorite
|
|
)
|
|
);
|
|
}
|
|
});
|
|
</script>
|