[前端] 更新修改部分
This commit is contained in:
parent
8dbfa4938a
commit
008e10c439
@ -16,7 +16,17 @@
|
||||
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-10">
|
||||
<div class="row bg-dark p-2 mb-5">
|
||||
<div class="row bg-dark p-2">
|
||||
<div>
|
||||
<div class="py-2 col-12" id="his_building">
|
||||
<div
|
||||
class="item btn-group btn-group-toggle"
|
||||
data-toggle="buttons"
|
||||
></div>
|
||||
</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('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
|
||||
@ -70,9 +80,20 @@
|
||||
|
||||
<script>
|
||||
var historyTable = null;
|
||||
var buildingTag = null;
|
||||
$(function () {
|
||||
initList();
|
||||
let html = "";
|
||||
for (let building of pageAct.buildList) {
|
||||
html += `<label class="btn btn-secondary">
|
||||
<input type="radio" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
|
||||
</label>`;
|
||||
}
|
||||
$("#his_building").find(".item").empty();
|
||||
$("#his_building").find(".item").append(html);
|
||||
if ($("#his_building .item label").first())
|
||||
$("#his_building .item label").first().click()
|
||||
|
||||
initList();
|
||||
// default list filter
|
||||
initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
|
||||
// custom response message
|
||||
@ -161,11 +182,13 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function initList() {
|
||||
$(loadEle).Loading("start");
|
||||
let sendData = {
|
||||
building_tag: pageAct.buiTag
|
||||
building_tag: buildingTag
|
||||
}
|
||||
objSendData.Data = sendData;
|
||||
let url = baseApiUrl + "/api/History/GetMainSub";
|
||||
@ -232,6 +255,7 @@
|
||||
$('#js_nested_list').html(strHtml);
|
||||
$(`[data-tabname="hisListItem"]`).YTTab();
|
||||
}
|
||||
$(loadEle).Loading("close");
|
||||
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
|
||||
}
|
||||
|
||||
@ -266,7 +290,6 @@
|
||||
var edt = new Date(new Date().setDate(sdt.getDate() + 1));
|
||||
start = start ?? sdt.toLocaleDateString();
|
||||
end = end ?? edt.toLocaleDateString();
|
||||
$(loadEle).Loading("start");
|
||||
callBackFromHistory()
|
||||
getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
|
||||
new Date(start).getTime(),
|
||||
@ -277,9 +300,7 @@
|
||||
}
|
||||
|
||||
function callBackFromHistory(res = '{"count":0,"data":[]}') {
|
||||
// console.log("@H1",res)
|
||||
res = JSON.parse(res);
|
||||
// console.log("@history",res.data)
|
||||
loadTable(res.data);
|
||||
if (historyTable != null) {
|
||||
let t = $('#historyTable').dataTable();
|
||||
@ -288,7 +309,6 @@
|
||||
if (res.data.length > 0)
|
||||
t.fnAddData(res.data);
|
||||
}
|
||||
$(loadEle).Loading("close");
|
||||
}
|
||||
|
||||
function setValue(deviceNumber, deviceName, deviceItem, elem) {
|
||||
@ -388,9 +408,10 @@
|
||||
}
|
||||
|
||||
function loadTable(data) {
|
||||
$(loadEle).Loading("start");
|
||||
|
||||
if (data) {
|
||||
$.each(data, function (i, v) {
|
||||
// console.log("loadTable",pageAct.devicePoiName.split(" ")[0])
|
||||
v.type = pageAct.devicePoiName.split(" ")[0];
|
||||
});
|
||||
|
||||
@ -425,7 +446,6 @@
|
||||
"title": "紀錄時間",
|
||||
"data": "timestamp",
|
||||
"render": function (data) {
|
||||
// console.log(data)
|
||||
return displayDate(data, "datetime");
|
||||
}
|
||||
}
|
||||
@ -433,6 +453,7 @@
|
||||
|
||||
historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
|
||||
}
|
||||
$(loadEle).Loading("close");
|
||||
}
|
||||
|
||||
function exportExcel() {
|
||||
@ -450,4 +471,26 @@
|
||||
location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
|
||||
}, null, "POST").send();
|
||||
}
|
||||
|
||||
//選擇棟別
|
||||
function SelectBuild(e, building_tag) {
|
||||
checkIsSelectedBuilding();
|
||||
}
|
||||
|
||||
function checkIsSelectedBuilding() {
|
||||
let result = false;
|
||||
let buildingRadios = $("[name=buildingRadio]:checked");
|
||||
buildingTag = null;
|
||||
if (buildingRadios && buildingRadios.length > 0) {
|
||||
$("[name=buildingRadio]").parent().removeClass("btn-info");
|
||||
$("[name=buildingRadio]").parent().addClass("btn-secondary");
|
||||
$("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
|
||||
$("[name=buildingRadio]:checked").parent().addClass("btn-info");
|
||||
buildingTag = buildingRadios.prop("id").split("_")[1]; //building tag
|
||||
initList();
|
||||
result = true;
|
||||
} else {
|
||||
}
|
||||
return result;
|
||||
}
|
||||
</script>
|
||||
@ -7,21 +7,17 @@
|
||||
<div class="col-sm-12 col-xl-2">
|
||||
<div class="rounded border border-white">
|
||||
<!-- nav-menu-reset will reset the font colors -->
|
||||
<ul
|
||||
class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
|
||||
data-nav-accordion="true"
|
||||
>
|
||||
<ul class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
|
||||
data-nav-accordion="true">
|
||||
<li class="active">
|
||||
<a name="reportTypeRadio" href="javascript:;" data-value="day">
|
||||
<span class="nav-link-text"> 電錶 - 日報表 </span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
name="reportTypeRadio"
|
||||
<a name="reportTypeRadio"
|
||||
href="javascript:;"
|
||||
data-value="month"
|
||||
>
|
||||
data-value="month">
|
||||
<span class="nav-link-text"> 電錶 - 月報表 </span>
|
||||
</a>
|
||||
</li>
|
||||
@ -31,18 +27,14 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
name="reportTypeRadio"
|
||||
<a name="reportTypeRadio"
|
||||
href="javascript:;"
|
||||
data-value="compare"
|
||||
>
|
||||
data-value="compare">
|
||||
<span class="nav-link-text"> 電錶 - 同期比較 </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"
|
||||
></div>
|
||||
<div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-10">
|
||||
@ -51,106 +43,72 @@
|
||||
<div class="col-auto">
|
||||
<span class="report-type-name"></span>費每度單價
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
id="elecPriceDegree"
|
||||
class="form-control col-1"
|
||||
/>
|
||||
<div
|
||||
id="compareTypeBtnsDiv"
|
||||
class="form-control col-1" />
|
||||
<div id="compareTypeBtnsDiv"
|
||||
class="item btn-group btn-group-toggle offset-1"
|
||||
data-toggle="buttons"
|
||||
style="display: none"
|
||||
>
|
||||
<label
|
||||
class="btn btn-outline-success waves-effect active waves-themed"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
style="display: none">
|
||||
<label class="btn btn-outline-success waves-effect active waves-themed">
|
||||
<input type="radio"
|
||||
name="compareTypeRadio"
|
||||
id="compareMonth"
|
||||
value="month"
|
||||
checked
|
||||
/>
|
||||
checked />
|
||||
年度同月比較
|
||||
</label>
|
||||
<label
|
||||
class="btn btn-outline-success waves-effect waves-themed"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
<label class="btn btn-outline-success waves-effect waves-themed">
|
||||
<input type="radio"
|
||||
name="compareTypeRadio"
|
||||
id="compareDay"
|
||||
value="day"
|
||||
/>
|
||||
value="day" />
|
||||
月份同日比較
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto offset-1">
|
||||
選擇<span id="elecTimeText">單一月份</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
id="elecMonthDate"
|
||||
class="form-control col-2"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control col-2" />
|
||||
<input type="text"
|
||||
id="elecYearDate"
|
||||
class="form-control col-2"
|
||||
style="display: none"
|
||||
/>
|
||||
<div
|
||||
id="elecStartEndDiv"
|
||||
style="display: none" />
|
||||
<div id="elecStartEndDiv"
|
||||
class="row m-0 align-items-center"
|
||||
style="display: none"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style="display: none">
|
||||
<input type="text"
|
||||
id="elecSYearDate"
|
||||
class="form-control col-4"
|
||||
/>
|
||||
class="form-control col-4" />
|
||||
<span class="px-2">~</span>
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
id="elecEYearDate"
|
||||
class="form-control col-4"
|
||||
/>
|
||||
class="form-control col-4" />
|
||||
</div>
|
||||
<div
|
||||
id="elecCompareDiv"
|
||||
<div id="elecCompareDiv"
|
||||
class="row m-0 align-items-center"
|
||||
style="display: none"
|
||||
>
|
||||
style="display: none">
|
||||
<div id="elecComYearDiv" class="row m-0 align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
id="elecCom1YearDate"
|
||||
class="form-control col-4"
|
||||
/>
|
||||
class="form-control col-4" />
|
||||
<span class="px-2">、</span>
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
id="elecCom2YearDate"
|
||||
class="form-control col-4"
|
||||
/>
|
||||
class="form-control col-4" />
|
||||
</div>
|
||||
<div
|
||||
id="elecComMonthDiv"
|
||||
<div id="elecComMonthDiv"
|
||||
class="row m-0 align-items-center"
|
||||
style="display: none"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style="display: none">
|
||||
<input type="text"
|
||||
id="elecCom1MonthDate"
|
||||
class="form-control col-4"
|
||||
/>
|
||||
class="form-control col-4" />
|
||||
<span class="px-2">、</span>
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
id="elecCom2MonthDate"
|
||||
class="form-control col-4"
|
||||
/>
|
||||
class="form-control col-4" />
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
@ -158,14 +116,12 @@
|
||||
<div class="panel-hdr" style="min-height: auto">
|
||||
<h2 class="py-2 col-12" id="building">
|
||||
<div class="col-1">棟別</div>
|
||||
<div
|
||||
class="item btn-group btn-group-toggle"
|
||||
data-toggle="buttons"
|
||||
></div>
|
||||
<div class="item btn-group btn-group-toggle"
|
||||
data-toggle="buttons"></div>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="panel-hdr" style="min-height: auto">
|
||||
<h2 class="py-2 col-12" id="floors">
|
||||
<!-- <h2 class="py-2 col-12" id="floors">
|
||||
<div class="col-1">樓層</div>
|
||||
<button
|
||||
type="button"
|
||||
@ -188,33 +144,25 @@
|
||||
<span class="text-notice notice-noBuilding" style="display: none"
|
||||
>該棟別沒有樓層</span
|
||||
>
|
||||
</h2>
|
||||
</h2> -->
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button
|
||||
type="button"
|
||||
<button type="button"
|
||||
class="btn btn-primary"
|
||||
onclick="getMeterData()"
|
||||
>
|
||||
onclick="getMeterData()">
|
||||
查詢
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
<button type="button"
|
||||
class="btn btn-danger ml-2"
|
||||
onclick="setExportList()"
|
||||
>
|
||||
onclick="setExportList()">
|
||||
匯出
|
||||
</button>
|
||||
<div
|
||||
id="tableLoading"
|
||||
<div id="tableLoading"
|
||||
class="row m-0 align-items-center"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="spinner-border text-info mx-2"
|
||||
style="display: none">
|
||||
<div class="spinner-border text-info mx-2"
|
||||
role="status"
|
||||
style="width: 1.2rem; height: 1.2rem"
|
||||
>
|
||||
style="width: 1.2rem; height: 1.2rem">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<span id="tableLoadingText">列表讀取中</span>
|
||||
@ -224,10 +172,8 @@
|
||||
<button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
|
||||
</div>
|
||||
|
||||
<table
|
||||
id="report_table"
|
||||
class="table table-bordered table-striped text-center m-0"
|
||||
></table>
|
||||
<table id="report_table"
|
||||
class="table table-bordered table-striped text-center m-0"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -257,10 +203,10 @@
|
||||
chiName: "電",
|
||||
listApiUrl: "ElectricList",
|
||||
exportListApiUrl: {
|
||||
day:"ExportElectricList",
|
||||
month:"ExportElectricList",
|
||||
year:"ExportElectricList",
|
||||
compare:"ExportElectricCompareList",
|
||||
day: "ExportElectricList",
|
||||
month: "ExportElectricList",
|
||||
year: "ExportElectricList",
|
||||
compare: "ExportElectricCompareList",
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -765,12 +711,12 @@
|
||||
switch (tableType) {
|
||||
case "day":
|
||||
columns = getDayByMonth($("#elecMonthDate").val()).map((dc) => {
|
||||
return { title: dc, data: dc,sWidth:columnWidth };
|
||||
return { title: dc, data: dc, sWidth: columnWidth };
|
||||
});
|
||||
break;
|
||||
case "month":
|
||||
columns = getMonthByYear($("#elecYearDate").val()).map((dc) => {
|
||||
return { title: dc, data: dc,sWidth:columnWidth };
|
||||
return { title: dc, data: dc, sWidth: columnWidth };
|
||||
});
|
||||
break;
|
||||
case "year":
|
||||
@ -778,7 +724,7 @@
|
||||
$("#elecSYearDate").val(),
|
||||
$("#elecEYearDate").val()
|
||||
).map((dc) => {
|
||||
return { title: dc, data: dc,sWidth:columnWidth };
|
||||
return { title: dc, data: dc, sWidth: columnWidth };
|
||||
});
|
||||
break;
|
||||
case "compare":
|
||||
@ -814,9 +760,9 @@
|
||||
|
||||
return compareResult.map((dc) => {
|
||||
if (dc._isCompared) {
|
||||
return { title: dc.value, data: dc.value, sClass: "compare",sWidth:columnWidth };
|
||||
return { title: dc.value, data: dc.value, sClass: "compare", sWidth: columnWidth };
|
||||
}
|
||||
return { title: dc, data: dc,sWidth:columnWidth};
|
||||
return { title: dc, data: dc, sWidth: columnWidth };
|
||||
});
|
||||
|
||||
break;
|
||||
@ -845,17 +791,17 @@
|
||||
{
|
||||
title: "小計",
|
||||
data: "total",
|
||||
sWidth:"70px",
|
||||
sWidth: "70px",
|
||||
},
|
||||
{
|
||||
title: "單價",
|
||||
data: "price",
|
||||
sWidth:"45px",
|
||||
sWidth: "45px",
|
||||
},
|
||||
{
|
||||
title: "金額總計",
|
||||
data: "total_price",
|
||||
sWidth:"70px",
|
||||
sWidth: "70px",
|
||||
},
|
||||
];
|
||||
const tableType = $("li.active [name=reportTypeRadio]").data("value");
|
||||
@ -884,8 +830,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("datas",datas)
|
||||
console.log("totalColumns",totalColumns)
|
||||
console.log("datas", datas)
|
||||
console.log("totalColumns", totalColumns)
|
||||
datatable = $("#report_table").DataTable({
|
||||
data: datas,
|
||||
destroy: true,
|
||||
@ -970,7 +916,7 @@
|
||||
//選擇棟別
|
||||
function SelectBuild(e, building_tag) {
|
||||
checkIsSelectedBuilding();
|
||||
GetFloors(building_tag);
|
||||
// GetFloors(building_tag);
|
||||
}
|
||||
|
||||
//取得樓層
|
||||
|
||||
Loading…
Reference in New Issue
Block a user