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