jay.chang/ibms-MCUT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'MCUT' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS into MCUT

Browse Source
This commit is contained in:
keke 2023-08-29 13:27:25 +08:00
commit 69d564c167
2 changed files with 316 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
Frontend/_dashboard.html
View File

@ -9,8 +9,8 @@
</div> </div>
<!-- <video playsInline autoPlay muted> <!-- <video playsInline autoPlay muted>
<source src="./media/video/TEST_RENDER.mp4" type="video/mp4" /> <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
</video> --> </video> -->
</div> </div>
<div class="col-sm-12 col-xl-4"> <div class="col-sm-12 col-xl-4">
<div class="row"> <div class="row">
@ -51,23 +51,23 @@
<div class="panel-content poisition-relative"> <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="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="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="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="h3 m-0 d-flex align-items-center justify-content-end">
<div class='icon-stack mr-2'> <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-3x opacity-100 color-success-600"></i>
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></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> <i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
</div> </div>
$44.34 / GE $44.34 / GE
</div> </div>
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span> <span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
</div> </div>
</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-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="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 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>-->
</div> </div>
<div style="width: 100%; min-height: 300px"> <div style="width: 100%; min-height: 300px">
<canvas class="chart" id="eveDayElecChart"></canvas> <canvas class="chart" id="eveDayElecChart"></canvas>
@ -116,45 +116,45 @@
<div class="panel-container show"> <div class="panel-container show">
<div class="panel-content poisition-relative"> <div class="panel-content poisition-relative">
<!--<div class="pb-5 pt-3"> <!--<div class="pb-5 pt-3">
<div class="row"> <div class="row">
<div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-200 rounded"> <div class="p-2 mr-3 bg-info-200 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span> <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
</div> </div>
<div> <div>
<label class="fs-sm mb-0">Bounce Rate</label> <label class="fs-sm mb-0">Bounce Rate</label>
<h4 class="font-weight-bold mb-0">37.56%</h4> <h4 class="font-weight-bold mb-0">37.56%</h4>
</div> </div>
</div> </div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-300 rounded"> <div class="p-2 mr-3 bg-info-300 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span> <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
</div> </div>
<div> <div>
<label class="fs-sm mb-0">Sessions</label> <label class="fs-sm mb-0">Sessions</label>
<h4 class="font-weight-bold mb-0">759</h4> <h4 class="font-weight-bold mb-0">759</h4>
</div> </div>
</div> </div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-300 rounded"> <div class="p-2 mr-3 bg-success-300 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span> <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
</div> </div>
<div> <div>
<label class="fs-sm mb-0">New Sessions</label> <label class="fs-sm mb-0">New Sessions</label>
<h4 class="font-weight-bold mb-0">12.17%</h4> <h4 class="font-weight-bold mb-0">12.17%</h4>
</div> </div>
</div> </div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center"> <div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-500 rounded"> <div class="p-2 mr-3 bg-success-500 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span> <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
</div> </div>
<div> <div>
<label class="fs-sm mb-0">Clickthrough</label> <label class="fs-sm mb-0">Clickthrough</label>
<h4 class="font-weight-bold mb-0">19.77%</h4> <h4 class="font-weight-bold mb-0">19.77%</h4>
</div> </div>
</div> </div>
</div> </div>
</div>--> </div>-->
<div style="width: 100%; min-height: 300px"> <div style="width: 100%; min-height: 300px">
<canvas class="chart" id="eveWeekElecChart"></canvas> <canvas class="chart" id="eveWeekElecChart"></canvas>
</div> </div>
@ -184,7 +184,7 @@
</div> </div>
<div class="panel-container show h-100"> <div class="panel-container show h-100">
<div class="panel-content poisition-relative 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> <canvas class="chart" id="eveMonElecChart"></canvas>
</div> </div>
</div> </div>
@ -201,7 +201,7 @@
<h2>即時契約容量占比 - 第一校區</h2> <h2>即時契約容量占比 - 第一校區</h2>
</div> </div>
<div class="panel-container show h-100"> <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> </div>
</div> </div>
@ -210,10 +210,10 @@
class="panel" class="panel"
style="height: calc(100% - 1.5rem)"> style="height: calc(100% - 1.5rem)">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>即時契約容量占比 - 第一校區</h2> <h2>即時契約容量占比 - 第二校區</h2>
</div> </div>
<div class="panel-container h-100 show"> <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> </div>
</div> </div>
@ -222,55 +222,55 @@
</div> </div>
</div> </div>
<!-- <div class="col-sm-12 col-lg-4"> <!-- <div class="col-sm-12 col-lg-4">
<div class="row h-100"> <div class="row h-100">
<div class="col-lg-6"> <div class="col-lg-6">
<div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)"> <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>異常狀態</h2> <h2>異常狀態</h2>
</div> </div>
<div class="panel-container h-100 show"> <div class="panel-container h-100 show">
<div class="panel-content poisition-relative p-0 row p-0 h-100"> <div class="panel-content poisition-relative p-0 row p-0 h-100">
<div <div
class="col-12 mb-2 position-relative row m-0 justify-content-center" class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px" style="max-height: 150px"
> >
<canvas class="chart" id="errRecChart"></canvas> <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>
<div </div>
class="col-12 mb-2 position-relative row m-0 justify-content-center" </div>
style="max-height: 150px" </div>
> <div class="col-lg-6">
<canvas class="chart" id="errChkChart"></canvas> <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>
</div> </div>
<div class="col-lg-6"> </div> -->
<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> </main>
<script> <script>
@ -320,11 +320,11 @@
(x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
)[0]; )[0];
strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group"> 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> <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> <img src="${iconObj.iconClass}" class="w-100"></img>
</button> </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> <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>`; </div>`;
$("#sysSubBtnList").append(strHtml); $("#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 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 }/${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, ...subSysObj,
main_system_tag: mainSysObj.main_system_tag, main_system_tag: mainSysObj.main_system_tag,
} }
)}> )}>
<img src="${iconClass}" class="w-100 "></img> <img src="${iconClass}" class="w-100 "></img>
</button> </button>
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag <button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag
}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag }" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag
}" data-subSysObj=${JSON.stringify({ }" data-subSysObj=${JSON.stringify({
...subSysObj, ...subSysObj,
main_system_tag: mainSysObj.main_system_tag, main_system_tag: mainSysObj.main_system_tag,
})} style="font-size: 20px">${subSysObj.full_name}</button> })} style="font-size: 20px">${subSysObj.full_name}</button>
</div>`; </div>`;
}); });
}); });
$("#sysSubBtnList").html(strHtml); $("#sysSubBtnList").html(strHtml);
@ -399,8 +399,8 @@
} else { } else {
contractCapacity = (res.data || [])[0]?.contract_value ?? 0; contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
getFirstEletric(); getFirstEletric();
getContractValueChange("Arean1"); getContractValueChange("Area1");
getContractValueChange("Arean2"); getContractValueChange("Area2");
} }
}, },
null, null,
@ -433,7 +433,7 @@
} }
function getSubBaja() { 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 tempOrdPath = { devicePath: devPath };
let myBaja = new subscriptionElectricmeter(); let myBaja = new subscriptionElectricmeter();
@ -454,9 +454,11 @@
function getContractValueChange(compus) { function getContractValueChange(compus) {
let devPath = `Data/${compus}`; let devPath = `Data/${compus}`;
BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => { 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")) { if (data.some(({ point_name }) => point_name === "Capacity")) {
contractCapacityForchart1 = data.find( contractCapacityForchart1 = data.find(
({ point_name }) => point_name === "Capacity" ({ point_name }) => point_name === "Capacity"
@ -464,9 +466,9 @@
} }
chartContractValue( chartContractValue(
"contractValueChart", "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")) { if (data.some(({ point_name }) => point_name === "Capacity")) {
contractCapacityForchart2 = data.find( contractCapacityForchart2 = data.find(
({ point_name }) => point_name === "Capacity" ({ point_name }) => point_name === "Capacity"
@ -474,7 +476,7 @@
} }
chartContractValue( chartContractValue(
"contractValueChart2", "contractValueChart2",
(value / contractCapacityForchart2).roundDecimal(2) * 100 ((value / contractCapacityForchart1) * 100).roundDecimal(2)
); );
} }
}); });
@ -1166,7 +1168,7 @@
valueAnimation: true, valueAnimation: true,
formatter: "{value} %", formatter: "{value} %",
color: "inherit", color: "inherit",
fontSize: 28, fontSize: 20,
}, },
data: [ data: [
{ {

250
Frontend/_reportManagement.html
View File

@ -33,6 +33,16 @@
<span class="nav-link-text"> 電錶 - 同期比較 </span> <span class="nav-link-text"> 電錶 - 同期比較 </span>
</a> </a>
</li> </li>
<li>
<a name="reportTypeRadio"
href="javascript:;"
data-value="day"
data-type="compare">
<span class="nav-link-text">
電錶 - 總盤與分盤 - 月份比較
</span>
</a>
</li>
</ul> </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>
@ -40,12 +50,12 @@
<div class="col-12 col-xl-10"> <div class="col-12 col-xl-10">
<div class="panel-hdr" style="min-height: auto"> <div class="panel-hdr" style="min-height: auto">
<h2 class="py-2" id="xx"> <h2 class="py-2" id="xx">
<div class="col-auto"> <div class="col-auto price">
<span class="report-type-name"></span>費每度單價 <span class="report-type-name"></span>費每度單價
</div> </div>
<input type="text" <input type="text"
id="elecPriceDegree" id="elecPriceDegree"
class="form-control col-1" /> class="form-control col-1 price" />
<div id="compareTypeBtnsDiv" <div id="compareTypeBtnsDiv"
class="item btn-group btn-group-toggle offset-1" class="item btn-group btn-group-toggle offset-1"
data-toggle="buttons" data-toggle="buttons"
@ -66,6 +76,28 @@
月份同日比較 月份同日比較
</label> </label>
</div> </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"> <div class="col-auto offset-1">
選擇<span id="elecTimeText">單一月份</span> 選擇<span id="elecTimeText">單一月份</span>
</div> </div>
@ -129,29 +161,29 @@
</div> </div>
<div class="panel-hdr" style="min-height: auto"> <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> <div class="col-1">樓層</div>
<button <button
type="button" type="button"
class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center" class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
onclick="allFloor()" onclick="allFloor()"
style="display: none" style="display: none"
> >
全選 全選
</button> </button>
<div <div
class="item btn-group btn-group-toggle row m-0" class="item btn-group btn-group-toggle row m-0"
data-toggle="buttons" data-toggle="buttons"
style="row-gap: 5px" style="row-gap: 5px"
></div> ></div>
<span <span
class="text-notice notice-noSelectedBuilding" class="text-notice notice-noSelectedBuilding"
style="display: none" style="display: none"
>請選擇棟別</span >請選擇棟別</span
> >
<span class="text-notice notice-noBuilding" style="display: none" <span class="text-notice notice-noBuilding" style="display: none"
>該棟別沒有樓層</span >該棟別沒有樓層</span
> >
</h2> --> </h2> -->
</div> </div>
<div class="d-flex my-2"> <div class="d-flex my-2">
<button type="button" <button type="button"
@ -175,8 +207,8 @@
<span id="tableLoadingText">列表讀取中</span> <span id="tableLoadingText">列表讀取中</span>
</div> </div>
<!-- <button type="button" class="btn btn-primary" onclick="SaveRealTimeCombination()">儲存常用組合</button> <!-- <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-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-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
</div> </div>
<span class="d-flex justify-content-end">單位：kWh </span> <span class="d-flex justify-content-end">單位：kWh </span>
<table id="report_table" <table id="report_table"
@ -209,6 +241,7 @@
name: "Electric", name: "Electric",
chiName: "電", chiName: "電",
listApiUrl: "ElectricList", listApiUrl: "ElectricList",
listApiUrlForTotal: "ElectricListEachTotal",
exportListApiUrl: { exportListApiUrl: {
day: "ExportElectricList", day: "ExportElectricList",
month: "ExportElectricList", month: "ExportElectricList",
@ -421,10 +454,24 @@
"#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv" "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
).hide(); ).hide();
$("#compareTypeBtnsDiv").hide(); $("#compareTypeBtnsDiv").hide();
$("#compareAreaBtnsDiv").hide();
const value = $(this).data("value"); const value = $(this).data("value");
const type = $(this).data("type");
const curDate = $("#elecDate").val(); 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("月份"); $("#elecTimeText").text("月份");
$("#elecMonthDate").show(); $("#elecMonthDate").show();
} else if (value == "month") { } else if (value == "month") {
@ -455,7 +502,8 @@
$("[name=reportTypeRadio]") $("[name=reportTypeRadio]")
.parent("li") .parent("li")
.on("click", function () { .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"); const oldVal = $("li.active [name=reportTypeRadio]").data("value");
$(this).addClass("active"); $(this).addClass("active");
const newVal = $("li.active [name=reportTypeRadio]").data("value"); 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]") $("[name=floorCheckbox]")
.parent(".btn") .parent(".btn")
.off("click") .off("click")
@ -503,6 +563,10 @@
function getListSendData() { function getListSendData() {
const tableType = $("li.active [name=reportTypeRadio]").data("value"); const tableType = $("li.active [name=reportTypeRadio]").data("value");
const compareType = $("label.active [name=compareTypeRadio]").val(); const compareType = $("label.active [name=compareTypeRadio]").val();
const Mode =
$("li.active [name=reportTypeRadio]").data("type") == "compare"
? $("label.active [name=compareEleRadio]").val()
: null; // 總盤、分盤
const startTime = const startTime =
tableType == "day" tableType == "day"
? $("#elecMonthDate").val() ? $("#elecMonthDate").val()
@ -538,21 +602,35 @@
return; return;
} }
let sent_data = { let sent_data = Mode
tableType: ? {
$("li.active [name=reportTypeRadio]").data("value") == "compare" tableType: "month",
? $("[name=compareTypeRadio]:checked").val() building_tag: "",
: $("li.active [name=reportTypeRadio]").data("value"), floor_tag: $("[name=floorCheckbox]:checked")
building_tag: SelectBuildings.join(","), .map((i, e) => $(e).val())
floor_tag: $("[name=floorCheckbox]:checked") .toArray(),
.map((i, e) => $(e).val()) startTime: startTime,
.toArray(), endTime: endTime,
startTime: startTime, price: $("#elecPriceDegree").val()
endTime: endTime, ? parseFloat($("#elecPriceDegree").val())
price: $("#elecPriceDegree").val() : null,
? parseFloat($("#elecPriceDegree").val()) Mode: parseInt(Mode),
: null, }
}; : {
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)) { if (Array.isArray(startTime)) {
sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)]; sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)];
@ -572,7 +650,11 @@
if (!Array.isArray(sent_data)) { if (!Array.isArray(sent_data)) {
sent_data = [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("請選擇棟別"); toast_error("請選擇棟別");
return; return;
} }
@ -580,7 +662,13 @@
toast_error("請選擇樓層"); toast_error("請選擇樓層");
return; 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); setLoading(true);
sent_data.forEach((sdata, i) => { sent_data.forEach((sdata, i) => {
@ -787,7 +875,45 @@
datatable.destroy(); datatable.destroy();
$("#report_table").empty(); $("#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(); const compareType = $("label.active [name=compareTypeRadio]").val();
datas.forEach((td) => { datas.forEach((td) => {
td.rawData.forEach((rd) => { td.rawData.forEach((rd) => {
@ -862,6 +988,7 @@
title: "棟別", title: "棟別",
data: "building_name", data: "building_name",
className: "text-nowrap", className: "text-nowrap",
sWidth: "100px",
}, },
{ {
title: "樓層", title: "樓層",
@ -875,7 +1002,7 @@
sWidth: "100px", sWidth: "100px",
}, },
...datesColumns, ...datesColumns,
...totalColumns, ...(ElecEachTotal ? [] : totalColumns),
], ],
}); });
} }
@ -1017,8 +1144,8 @@
var html = ""; var html = "";
for (let floor of floors) { for (let floor of floors) {
html += `<label class="btn btn-outline-success waves-effect waves-themed" style="flex:0 0 auto"> 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} <input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
</label>`; </label>`;
} }
$("#floors").find(".item").empty(); $("#floors").find(".item").empty();
@ -1051,12 +1178,12 @@
let htmlStr = ""; let htmlStr = "";
rel.data.forEach(({ system_key, system_value }) => { rel.data.forEach(({ system_key, system_value }) => {
htmlStr += ` htmlStr += `
<label <label
class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : "" class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : ""
}" }"
> >
<input type="radio" name="buildingRadio" value=${system_key} />${system_value} <input type="radio" name="buildingRadio" value=${system_key} />${system_value}
</label>`; </label>`;
}); });
$("#school_zone>.btn-group").append(htmlStr); $("#school_zone>.btn-group").append(htmlStr);
} }
@ -1066,10 +1193,13 @@
$("#school_zone").on("click", function (event) { $("#school_zone").on("click", function (event) {
event.stopPropagation(); 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"); $("#school_zone label.active").removeClass("active");
$(event.target).addClass("active"); $(event.target).addClass("active");
SelectBuildings = [] SelectBuildings = [];
} else if (event.target.tagName === "INPUT") { } else if (event.target.tagName === "INPUT") {
school_zone = event.target.value; school_zone = event.target.value;
getbuildings(school_zone); getbuildings(school_zone);
@ -1082,11 +1212,11 @@
({ school_zone }) => school_zone === value ({ school_zone }) => school_zone === value
)) { )) {
html += `<label class="btn btn-outline-success waves-effect waves-themed"> 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} <input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
</label>`; </label>`;
} }
$("#building").find(".item").empty(); $("#building").find(".item").empty();
$("#building").find(".item").append(html); $("#building").find(".item").append(html);
SelectBuildings = [] SelectBuildings = [];
} }
</script> </script>