[Frontend]報表查詢介面增加總盤分盤比較
This commit is contained in:
parent
d70320b27e
commit
47c9bd16b6
@ -9,8 +9,8 @@
|
||||
</div>
|
||||
|
||||
<!-- <video playsInline autoPlay muted>
|
||||
<source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
|
||||
</video> -->
|
||||
<source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
|
||||
</video> -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-4">
|
||||
<div class="row">
|
||||
@ -51,23 +51,23 @@
|
||||
<div class="panel-content poisition-relative">
|
||||
<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">
|
||||
<!--<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="h3 m-0 d-flex align-items-center justify-content-end">
|
||||
<div class='icon-stack mr-2'>
|
||||
<i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
|
||||
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
|
||||
<i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
|
||||
</div>
|
||||
$44.34 / GE
|
||||
</div>
|
||||
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
|
||||
<div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
|
||||
<div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<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='icon-stack mr-2'>
|
||||
<i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
|
||||
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
|
||||
<i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
|
||||
</div>
|
||||
$44.34 / GE
|
||||
</div>
|
||||
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
|
||||
<div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
|
||||
<div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div style="width: 100%; min-height: 300px">
|
||||
<canvas class="chart" id="eveDayElecChart"></canvas>
|
||||
@ -116,45 +116,45 @@
|
||||
<div class="panel-container show">
|
||||
<div class="panel-content poisition-relative">
|
||||
<!--<div class="pb-5 pt-3">
|
||||
<div class="row">
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-info-200 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,5,8,2</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">Bounce Rate</label>
|
||||
<h4 class="font-weight-bold mb-0">37.56%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-info-300 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">5,3,1,7,9</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">Sessions</label>
|
||||
<h4 class="font-weight-bold mb-0">759</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-success-300 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,3,5,5</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">New Sessions</label>
|
||||
<h4 class="font-weight-bold mb-0">12.17%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-success-500 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">6,4,7,5,6</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">Clickthrough</label>
|
||||
<h4 class="font-weight-bold mb-0">19.77%</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="row">
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-info-200 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,5,8,2</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">Bounce Rate</label>
|
||||
<h4 class="font-weight-bold mb-0">37.56%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-info-300 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">5,3,1,7,9</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">Sessions</label>
|
||||
<h4 class="font-weight-bold mb-0">759</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-success-300 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,3,5,5</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">New Sessions</label>
|
||||
<h4 class="font-weight-bold mb-0">12.17%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
||||
<div class="p-2 mr-3 bg-success-500 rounded">
|
||||
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">6,4,7,5,6</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="fs-sm mb-0">Clickthrough</label>
|
||||
<h4 class="font-weight-bold mb-0">19.77%</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div style="width: 100%; min-height: 300px">
|
||||
<canvas class="chart" id="eveWeekElecChart"></canvas>
|
||||
</div>
|
||||
@ -184,7 +184,7 @@
|
||||
</div>
|
||||
<div class="panel-container show h-100">
|
||||
<div class="panel-content poisition-relative h-100">
|
||||
<div style="width: 100%; min-height: 450px">
|
||||
<div class="mt-5" style="width: 100%; height: 400px">
|
||||
<canvas class="chart" id="eveMonElecChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@ -201,7 +201,7 @@
|
||||
<h2>即時契約容量占比 - 第一校區</h2>
|
||||
</div>
|
||||
<div class="panel-container show h-100">
|
||||
<div class="h-100 py-2" id="contractValueChart"></div>
|
||||
<div id="contractValueChart" style="height: 240px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,10 +210,10 @@
|
||||
class="panel"
|
||||
style="height: calc(100% - 1.5rem)">
|
||||
<div class="panel-hdr">
|
||||
<h2>即時契約容量占比 - 第一校區</h2>
|
||||
<h2>即時契約容量占比 - 第二校區</h2>
|
||||
</div>
|
||||
<div class="panel-container h-100 show">
|
||||
<div class="h-100 py-2" id="contractValueChart2"></div>
|
||||
<div id="contractValueChart2" style="height: 240px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -222,55 +222,55 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-sm-12 col-lg-4">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-6">
|
||||
<div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
|
||||
<div class="panel-hdr">
|
||||
<h2>異常狀態</h2>
|
||||
</div>
|
||||
<div class="panel-container h-100 show">
|
||||
<div class="panel-content poisition-relative p-0 row p-0 h-100">
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="errRecChart"></canvas>
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-6">
|
||||
<div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
|
||||
<div class="panel-hdr">
|
||||
<h2>異常狀態</h2>
|
||||
</div>
|
||||
<div class="panel-container h-100 show">
|
||||
<div class="panel-content poisition-relative p-0 row p-0 h-100">
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="errRecChart"></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="errChkChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="errChkChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
|
||||
<div class="panel-hdr">
|
||||
<h2>工單進度</h2>
|
||||
</div>
|
||||
<div class="panel-container h-100 show">
|
||||
<div class="panel-content poisition-relative row p-0 h-100 p-0">
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="worOrdErrChart"></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="worOrdFinChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
|
||||
<div class="panel-hdr">
|
||||
<h2>工單進度</h2>
|
||||
</div>
|
||||
<div class="panel-container h-100 show">
|
||||
<div class="panel-content poisition-relative row p-0 h-100 p-0">
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="worOrdErrChart"></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 mb-2 position-relative row m-0 justify-content-center"
|
||||
style="max-height: 150px"
|
||||
>
|
||||
<canvas class="chart" id="worOrdFinChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div> -->
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
@ -320,11 +320,11 @@
|
||||
(x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
|
||||
)[0];
|
||||
strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group">
|
||||
<button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
|
||||
<img src="${iconObj.iconClass}" class="w-100"></img>
|
||||
</button>
|
||||
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
|
||||
</div>`;
|
||||
<button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
|
||||
<img src="${iconObj.iconClass}" class="w-100"></img>
|
||||
</button>
|
||||
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
|
||||
</div>`;
|
||||
$("#sysSubBtnList").append(strHtml);
|
||||
}
|
||||
});
|
||||
@ -361,21 +361,21 @@
|
||||
strHtml += `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group" data-id="/${pageAct.AreaTag
|
||||
}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag
|
||||
}">
|
||||
<button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4" data-subSysobj=${JSON.stringify(
|
||||
<button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4" data-subSysobj=${JSON.stringify(
|
||||
{
|
||||
...subSysObj,
|
||||
main_system_tag: mainSysObj.main_system_tag,
|
||||
}
|
||||
)}>
|
||||
<img src="${iconClass}" class="w-100 "></img>
|
||||
</button>
|
||||
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag
|
||||
<img src="${iconClass}" class="w-100 "></img>
|
||||
</button>
|
||||
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag
|
||||
}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag
|
||||
}" data-subSysObj=${JSON.stringify({
|
||||
...subSysObj,
|
||||
main_system_tag: mainSysObj.main_system_tag,
|
||||
})} style="font-size: 20px">${subSysObj.full_name}</button>
|
||||
</div>`;
|
||||
</div>`;
|
||||
});
|
||||
});
|
||||
$("#sysSubBtnList").html(strHtml);
|
||||
@ -399,8 +399,8 @@
|
||||
} else {
|
||||
contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
|
||||
getFirstEletric();
|
||||
getContractValueChange("Arean1");
|
||||
getContractValueChange("Arean2");
|
||||
getContractValueChange("Area1");
|
||||
getContractValueChange("Area2");
|
||||
}
|
||||
},
|
||||
null,
|
||||
@ -433,7 +433,7 @@
|
||||
}
|
||||
|
||||
function getSubBaja() {
|
||||
let devPath = tarElePath.split("/")[1].split("_").slice(0, 8).join("/");
|
||||
let devPath = tarElePath.split("/")[1]?.split("_").slice(0, 8).join("/");
|
||||
let tempOrdPath = { devicePath: devPath };
|
||||
let myBaja = new subscriptionElectricmeter();
|
||||
|
||||
@ -454,9 +454,11 @@
|
||||
function getContractValueChange(compus) {
|
||||
let devPath = `Data/${compus}`;
|
||||
BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
|
||||
let value = data.find(({ point_name }) => point_name === "P")?.value;
|
||||
let value = data
|
||||
.find(({ point_name }) => point_name === "P")
|
||||
?.value.replaceAll(",", "");
|
||||
|
||||
if (compus === "Arean1") {
|
||||
if (value && compus === "Area1") {
|
||||
if (data.some(({ point_name }) => point_name === "Capacity")) {
|
||||
contractCapacityForchart1 = data.find(
|
||||
({ point_name }) => point_name === "Capacity"
|
||||
@ -464,9 +466,9 @@
|
||||
}
|
||||
chartContractValue(
|
||||
"contractValueChart",
|
||||
(value / contractCapacityForchart1).roundDecimal(2) * 100
|
||||
((value / contractCapacityForchart1) * 100).roundDecimal(2)
|
||||
);
|
||||
} else {
|
||||
} else if (value && compus === "Area2") {
|
||||
if (data.some(({ point_name }) => point_name === "Capacity")) {
|
||||
contractCapacityForchart2 = data.find(
|
||||
({ point_name }) => point_name === "Capacity"
|
||||
@ -474,7 +476,7 @@
|
||||
}
|
||||
chartContractValue(
|
||||
"contractValueChart2",
|
||||
(value / contractCapacityForchart2).roundDecimal(2) * 100
|
||||
((value / contractCapacityForchart1) * 100).roundDecimal(2)
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1166,7 +1168,7 @@
|
||||
valueAnimation: true,
|
||||
formatter: "{value} %",
|
||||
color: "inherit",
|
||||
fontSize: 28,
|
||||
fontSize: 20,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
|
||||
@ -33,6 +33,16 @@
|
||||
<span class="nav-link-text"> 電錶 - 同期比較 </span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a name="reportTypeRadio"
|
||||
href="javascript:;"
|
||||
data-value="day"
|
||||
data-type="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>
|
||||
@ -40,12 +50,12 @@
|
||||
<div class="col-12 col-xl-10">
|
||||
<div class="panel-hdr" style="min-height: auto">
|
||||
<h2 class="py-2" id="xx">
|
||||
<div class="col-auto">
|
||||
<div class="col-auto price">
|
||||
<span class="report-type-name"></span>費每度單價
|
||||
</div>
|
||||
<input type="text"
|
||||
id="elecPriceDegree"
|
||||
class="form-control col-1" />
|
||||
class="form-control col-1 price" />
|
||||
<div id="compareTypeBtnsDiv"
|
||||
class="item btn-group btn-group-toggle offset-1"
|
||||
data-toggle="buttons"
|
||||
@ -66,6 +76,28 @@
|
||||
月份同日比較
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="compareAreaBtnsDiv"
|
||||
class="item btn-group btn-group-toggle"
|
||||
data-toggle="buttons"
|
||||
style="display: none">
|
||||
<label class="btn btn-outline-success waves-effect active waves-themed">
|
||||
<input type="radio"
|
||||
name="compareEleRadio"
|
||||
id="compareAll"
|
||||
value="0"
|
||||
checked />
|
||||
總計含分盤資料
|
||||
</label>
|
||||
<label class="btn btn-outline-success waves-effect waves-themed">
|
||||
<input type="radio"
|
||||
name="compareEleRadio"
|
||||
id="compareSeperate"
|
||||
value="1" />
|
||||
總計不含分盤資料
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-auto offset-1">
|
||||
選擇<span id="elecTimeText">單一月份</span>
|
||||
</div>
|
||||
@ -129,29 +161,29 @@
|
||||
</div>
|
||||
<div class="panel-hdr" style="min-height: auto">
|
||||
<!-- <h2 class="py-2 col-12" id="floors">
|
||||
<div class="col-1">樓層</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
|
||||
onclick="allFloor()"
|
||||
style="display: none"
|
||||
>
|
||||
全選
|
||||
</button>
|
||||
<div
|
||||
class="item btn-group btn-group-toggle row m-0"
|
||||
data-toggle="buttons"
|
||||
style="row-gap: 5px"
|
||||
></div>
|
||||
<span
|
||||
class="text-notice notice-noSelectedBuilding"
|
||||
style="display: none"
|
||||
>請選擇棟別</span
|
||||
>
|
||||
<span class="text-notice notice-noBuilding" style="display: none"
|
||||
>該棟別沒有樓層</span
|
||||
>
|
||||
</h2> -->
|
||||
<div class="col-1">樓層</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
|
||||
onclick="allFloor()"
|
||||
style="display: none"
|
||||
>
|
||||
全選
|
||||
</button>
|
||||
<div
|
||||
class="item btn-group btn-group-toggle row m-0"
|
||||
data-toggle="buttons"
|
||||
style="row-gap: 5px"
|
||||
></div>
|
||||
<span
|
||||
class="text-notice notice-noSelectedBuilding"
|
||||
style="display: none"
|
||||
>請選擇棟別</span
|
||||
>
|
||||
<span class="text-notice notice-noBuilding" style="display: none"
|
||||
>該棟別沒有樓層</span
|
||||
>
|
||||
</h2> -->
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button type="button"
|
||||
@ -175,8 +207,8 @@
|
||||
<span id="tableLoadingText">列表讀取中</span>
|
||||
</div>
|
||||
<!-- <button type="button" class="btn btn-primary" onclick="SaveRealTimeCombination()">儲存常用組合</button>
|
||||
<button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
|
||||
<button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
|
||||
<button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
|
||||
<button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
|
||||
</div>
|
||||
<span class="d-flex justify-content-end">單位：kWh </span>
|
||||
<table id="report_table"
|
||||
@ -209,6 +241,7 @@
|
||||
name: "Electric",
|
||||
chiName: "電",
|
||||
listApiUrl: "ElectricList",
|
||||
listApiUrlForTotal: "ElectricListEachTotal",
|
||||
exportListApiUrl: {
|
||||
day: "ExportElectricList",
|
||||
month: "ExportElectricList",
|
||||
@ -421,10 +454,24 @@
|
||||
"#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
|
||||
).hide();
|
||||
$("#compareTypeBtnsDiv").hide();
|
||||
$("#compareAreaBtnsDiv").hide();
|
||||
|
||||
const value = $(this).data("value");
|
||||
const type = $(this).data("type");
|
||||
const curDate = $("#elecDate").val();
|
||||
if (value === "day") {
|
||||
|
||||
$("#school_zone").show();
|
||||
$("#building").show();
|
||||
$(".price").show();
|
||||
|
||||
if (type === "compare") {
|
||||
$("#elecTimeText").text("月份");
|
||||
$("#elecMonthDate").show();
|
||||
$("#compareAreaBtnsDiv").show();
|
||||
$("#school_zone").hide();
|
||||
$("#building").hide();
|
||||
$(".price").hide();
|
||||
} else if (value === "day") {
|
||||
$("#elecTimeText").text("月份");
|
||||
$("#elecMonthDate").show();
|
||||
} else if (value == "month") {
|
||||
@ -455,7 +502,8 @@
|
||||
$("[name=reportTypeRadio]")
|
||||
.parent("li")
|
||||
.on("click", function () {
|
||||
$("[name=reportTypeRadio]").parent("li").removeClass("active");
|
||||
$("[name=reportTypeRadio]").parent("li.active").removeClass("active");
|
||||
// $("[name=compareTypeRadio]").parent("label").removeClass("active");
|
||||
const oldVal = $("li.active [name=reportTypeRadio]").data("value");
|
||||
$(this).addClass("active");
|
||||
const newVal = $("li.active [name=reportTypeRadio]").data("value");
|
||||
@ -476,6 +524,18 @@
|
||||
}
|
||||
});
|
||||
|
||||
$("[name=compareEleRadio]")
|
||||
.parent("label")
|
||||
.on("click", function () {
|
||||
$("[name=compareEleRadio]").parent("label").removeClass("active");
|
||||
const oldVal = $("label.active [name=compareEleRadio]").val();
|
||||
$(this).addClass("active");
|
||||
const newVal = $("label.active [name=compareEleRadio]").val();
|
||||
if (oldVal !== newVal) {
|
||||
$("label.active [name=compareEleRadio]").trigger("change");
|
||||
}
|
||||
});
|
||||
|
||||
$("[name=floorCheckbox]")
|
||||
.parent(".btn")
|
||||
.off("click")
|
||||
@ -503,6 +563,10 @@
|
||||
function getListSendData() {
|
||||
const tableType = $("li.active [name=reportTypeRadio]").data("value");
|
||||
const compareType = $("label.active [name=compareTypeRadio]").val();
|
||||
const Mode =
|
||||
$("li.active [name=reportTypeRadio]").data("type") == "compare"
|
||||
? $("label.active [name=compareEleRadio]").val()
|
||||
: null; // 總盤、分盤
|
||||
const startTime =
|
||||
tableType == "day"
|
||||
? $("#elecMonthDate").val()
|
||||
@ -538,21 +602,35 @@
|
||||
return;
|
||||
}
|
||||
|
||||
let sent_data = {
|
||||
tableType:
|
||||
$("li.active [name=reportTypeRadio]").data("value") == "compare"
|
||||
? $("[name=compareTypeRadio]:checked").val()
|
||||
: $("li.active [name=reportTypeRadio]").data("value"),
|
||||
building_tag: SelectBuildings.join(","),
|
||||
floor_tag: $("[name=floorCheckbox]:checked")
|
||||
.map((i, e) => $(e).val())
|
||||
.toArray(),
|
||||
startTime: startTime,
|
||||
endTime: endTime,
|
||||
price: $("#elecPriceDegree").val()
|
||||
? parseFloat($("#elecPriceDegree").val())
|
||||
: null,
|
||||
};
|
||||
let sent_data = Mode
|
||||
? {
|
||||
tableType: "month",
|
||||
building_tag: "",
|
||||
floor_tag: $("[name=floorCheckbox]:checked")
|
||||
.map((i, e) => $(e).val())
|
||||
.toArray(),
|
||||
startTime: startTime,
|
||||
endTime: endTime,
|
||||
price: $("#elecPriceDegree").val()
|
||||
? parseFloat($("#elecPriceDegree").val())
|
||||
: null,
|
||||
Mode: parseInt(Mode),
|
||||
}
|
||||
: {
|
||||
tableType:
|
||||
$("li.active [name=reportTypeRadio]").data("value") == "compare"
|
||||
? $("[name=compareTypeRadio]:checked").val()
|
||||
: $("li.active [name=reportTypeRadio]").data("value"),
|
||||
building_tag: SelectBuildings.join(","),
|
||||
floor_tag: $("[name=floorCheckbox]:checked")
|
||||
.map((i, e) => $(e).val())
|
||||
.toArray(),
|
||||
startTime: startTime,
|
||||
endTime: endTime,
|
||||
price: $("#elecPriceDegree").val()
|
||||
? parseFloat($("#elecPriceDegree").val())
|
||||
: null,
|
||||
};
|
||||
|
||||
if (Array.isArray(startTime)) {
|
||||
sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)];
|
||||
@ -572,7 +650,11 @@
|
||||
if (!Array.isArray(sent_data)) {
|
||||
sent_data = [sent_data];
|
||||
}
|
||||
if (!sent_data.some((s) => s.building_tag)) {
|
||||
|
||||
if (
|
||||
!sent_data[0]?.Mode?.toString() &&
|
||||
!sent_data.some((s) => s.building_tag)
|
||||
) {
|
||||
toast_error("請選擇棟別");
|
||||
return;
|
||||
}
|
||||
@ -580,7 +662,13 @@
|
||||
toast_error("請選擇樓層");
|
||||
return;
|
||||
}
|
||||
var url = baseApiUrl + "/api/" + reportTypeDict["RElec"]["listApiUrl"];
|
||||
var url =
|
||||
baseApiUrl +
|
||||
"/api/" +
|
||||
`${sent_data[0]?.Mode?.toString()
|
||||
? reportTypeDict["RElec"]["listApiUrlForTotal"]
|
||||
: reportTypeDict["RElec"]["listApiUrl"]
|
||||
}`;
|
||||
|
||||
setLoading(true);
|
||||
sent_data.forEach((sdata, i) => {
|
||||
@ -787,7 +875,45 @@
|
||||
datatable.destroy();
|
||||
$("#report_table").empty();
|
||||
}
|
||||
datesColumns = setTableColumns();
|
||||
|
||||
const ElecEachTotal =
|
||||
$("li.active [name=reportTypeRadio]").data("type") === "compare";
|
||||
if (ElecEachTotal) {
|
||||
const [year, month] = $("#elecMonthDate").val().split("-");
|
||||
datesColumns = [
|
||||
{
|
||||
label: "選擇月份 <br>" + `${year}${month}` + "(A)",
|
||||
value: $("#elecMonthDate").val(),
|
||||
},
|
||||
{
|
||||
label:
|
||||
"前一月份 <br>" +
|
||||
`${year}${month - 1 > 10 ? month - 1 : `0${month - 1}`}` +
|
||||
"(B)",
|
||||
value: `${year}-${month - 1 > 10 ? month - 1 : `0${month - 1}`}`,
|
||||
},
|
||||
{
|
||||
label:
|
||||
"差異比較 <br>" +
|
||||
`${year}${month}(A)-${year}${month - 1 > 10 ? month - 1 : `0${month - 1}`
|
||||
}(B)`,
|
||||
value: "last month different",
|
||||
},
|
||||
{
|
||||
label: "去年同期 <br>" + `${year - 1}${month}` + "(C)",
|
||||
value: `${year - 1}-${month}`,
|
||||
},
|
||||
{
|
||||
label: "同期差異 <br>" + `${year - 1}${month}(A)-${year}${month}(C)`,
|
||||
value: "last year different",
|
||||
},
|
||||
].map((dc) => {
|
||||
return { title: dc.label, data: dc.value, sWidth: "120px" };
|
||||
});
|
||||
} else {
|
||||
datesColumns = setTableColumns();
|
||||
}
|
||||
|
||||
const compareType = $("label.active [name=compareTypeRadio]").val();
|
||||
datas.forEach((td) => {
|
||||
td.rawData.forEach((rd) => {
|
||||
@ -862,6 +988,7 @@
|
||||
title: "棟別",
|
||||
data: "building_name",
|
||||
className: "text-nowrap",
|
||||
sWidth: "100px",
|
||||
},
|
||||
{
|
||||
title: "樓層",
|
||||
@ -875,7 +1002,7 @@
|
||||
sWidth: "100px",
|
||||
},
|
||||
...datesColumns,
|
||||
...totalColumns,
|
||||
...(ElecEachTotal ? [] : totalColumns),
|
||||
],
|
||||
});
|
||||
}
|
||||
@ -1017,8 +1144,8 @@
|
||||
var html = "";
|
||||
for (let floor of floors) {
|
||||
html += `<label class="btn btn-outline-success waves-effect waves-themed" style="flex:0 0 auto">
|
||||
<input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
|
||||
</label>`;
|
||||
<input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
|
||||
</label>`;
|
||||
}
|
||||
|
||||
$("#floors").find(".item").empty();
|
||||
@ -1051,12 +1178,12 @@
|
||||
let htmlStr = "";
|
||||
rel.data.forEach(({ system_key, system_value }) => {
|
||||
htmlStr += `
|
||||
<label
|
||||
class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : ""
|
||||
<label
|
||||
class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : ""
|
||||
}"
|
||||
>
|
||||
<input type="radio" name="buildingRadio" value=${system_key} />${system_value}
|
||||
</label>`;
|
||||
>
|
||||
<input type="radio" name="buildingRadio" value=${system_key} />${system_value}
|
||||
</label>`;
|
||||
});
|
||||
$("#school_zone>.btn-group").append(htmlStr);
|
||||
}
|
||||
@ -1066,10 +1193,13 @@
|
||||
|
||||
$("#school_zone").on("click", function (event) {
|
||||
event.stopPropagation();
|
||||
if (event.target.tagName !== "INPUT" && !$(event.target).hasClass("active")) {
|
||||
if (
|
||||
event.target.tagName !== "INPUT" &&
|
||||
!$(event.target).hasClass("active")
|
||||
) {
|
||||
$("#school_zone label.active").removeClass("active");
|
||||
$(event.target).addClass("active");
|
||||
SelectBuildings = []
|
||||
SelectBuildings = [];
|
||||
} else if (event.target.tagName === "INPUT") {
|
||||
school_zone = event.target.value;
|
||||
getbuildings(school_zone);
|
||||
@ -1082,11 +1212,11 @@
|
||||
({ school_zone }) => school_zone === value
|
||||
)) {
|
||||
html += `<label class="btn btn-outline-success waves-effect waves-themed">
|
||||
<input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
|
||||
</label>`;
|
||||
<input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
|
||||
</label>`;
|
||||
}
|
||||
$("#building").find(".item").empty();
|
||||
$("#building").find(".item").append(html);
|
||||
SelectBuildings = []
|
||||
SelectBuildings = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user