Merge branch 'MCUT' of https://gitea.mjm-staging.developers-homelab.net/mjm-group/ibms into MCUT
This commit is contained in:
commit
7c3e699a79
797
Frontend/_historyData2.html
Normal file
797
Frontend/_historyData2.html
Normal file
@ -0,0 +1,797 @@
|
||||
<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="名稱"
|
||||
/>
|
||||
</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
|
||||
src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
|
||||
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script>
|
||||
var historyTable2 = null;
|
||||
var buildingTag = null;
|
||||
pageAct.hisBuiName = "";
|
||||
hisFirst = true;
|
||||
var 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;
|
||||
await getSidebar(subTag);
|
||||
|
||||
result = true;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
function selectAllBuildingDevice(e){
|
||||
if(e.target.name==='bui_selected'){
|
||||
let curData = device_list.find(({building_tag})=> e.target.dataset.building ===building_tag)
|
||||
const 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))
|
||||
}
|
||||
|
||||
$('[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) {
|
||||
let strHtml = ``;
|
||||
let i1 = null,
|
||||
i2 = null,
|
||||
first = true;
|
||||
device_list = res.data;
|
||||
$.each(res.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-5" id="bui_${building.building_tag}">
|
||||
<input class="custom-control-input opacity-100 mx-2" 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" 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>`;
|
||||
});
|
||||
|
||||
$(".js_nested_list").html(strHtml);
|
||||
$(`[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);
|
||||
|
||||
console.log(formData.get("Device_list"));
|
||||
|
||||
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) {
|
||||
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")
|
||||
|
||||
objSendData.Data = sendData;
|
||||
let url = baseApiUrl + "/api/History/GetHistoryData";
|
||||
ytAjax = new YourTeam.Ajax(
|
||||
url,
|
||||
objSendData,
|
||||
function (res) {
|
||||
console.log(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")
|
||||
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) {
|
||||
console.log(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(){
|
||||
$('#favoriteModal').modal('hide');
|
||||
}
|
||||
|
||||
async function addFavorite() {
|
||||
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 json = await fetch(baseApiUrl + "/api/History/SaveHistoryFavorite", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: "Bearer " + token,
|
||||
"Content-Type": 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
favorite_name: favoriteFormData.get("favoriteName"),
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
async function editFavorite(favorite_guid) {
|
||||
let token = cookies.get("JWT-Authorization");
|
||||
const favoriteForm = $("#favoriteForm")[0];
|
||||
const favoriteFormData = new FormData(favoriteForm);
|
||||
|
||||
const json = await fetch(baseApiUrl + "/api/History/EditHistoryFavorite", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: "Bearer " + token,
|
||||
"Content-Type": 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
favorite_name: favoriteFormData.get("favoriteName"),
|
||||
favorite_guid,
|
||||
}),
|
||||
});
|
||||
const res = await json.json();
|
||||
if(res&&res.code=="0000"){
|
||||
getFavorite()
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
closeModal()
|
||||
}
|
||||
|
||||
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){
|
||||
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(_, 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'){
|
||||
getDataFromFavorite(favorite_setting.find((d)=>d.favorite_guid===e.target.dataset.favorite))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user