diff --git a/Frontend/_reportManagement.html b/Frontend/_reportManagement.html
new file mode 100644
index 0000000..385e67f
--- /dev/null
+++ b/Frontend/_reportManagement.html
@@ -0,0 +1,1055 @@
+<main id="js-page-content" role="main" class="page-content">
+  <div class="row">
+    <div class="col-sm-12 col-xl-12">
+      <h1 class="p-2 mb-0">報表管理</h1>
+
+      <div class="row">
+        <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"
+            >
+              <li class="active">
+                <a name="reportTypeRadio" href="javascript:;" data-value="day">
+                  <span class="nav-link-text"> 電錶 - 日報表 </span>
+                </a>
+              </li>
+              <li>
+                <a
+                  name="reportTypeRadio"
+                  href="javascript:;"
+                  data-value="month"
+                >
+                  <span class="nav-link-text"> 電錶 - 月報表 </span>
+                </a>
+              </li>
+              <li>
+                <a name="reportTypeRadio" href="javascript:;" data-value="year">
+                  <span class="nav-link-text"> 電錶 - 年報表 </span>
+                </a>
+              </li>
+              <li>
+                <a
+                  name="reportTypeRadio"
+                  href="javascript:;"
+                  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>
+        </div>
+        <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">
+                <span class="report-type-name"></span>費每度單價
+              </div>
+              <input
+                type="text"
+                id="elecPriceDegree"
+                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"
+                    name="compareTypeRadio"
+                    id="compareMonth"
+                    value="month"
+                    checked
+                  />
+                  年度同月比較
+                </label>
+                <label
+                  class="btn btn-outline-success waves-effect waves-themed"
+                >
+                  <input
+                    type="radio"
+                    name="compareTypeRadio"
+                    id="compareDay"
+                    value="day"
+                  />
+                  月份同日比較
+                </label>
+              </div>
+              <div class="col-auto offset-1">
+                選擇<span id="elecTimeText">單一月份</span>
+              </div>
+              <input
+                type="text"
+                id="elecMonthDate"
+                class="form-control col-2"
+              />
+              <input
+                type="text"
+                id="elecYearDate"
+                class="form-control col-2"
+                style="display: none"
+              />
+              <div
+                id="elecStartEndDiv"
+                class="row m-0 align-items-center"
+                style="display: none"
+              >
+                <input
+                  type="text"
+                  id="elecSYearDate"
+                  class="form-control col-4"
+                />
+                <span class="px-2">~</span>
+                <input
+                  type="text"
+                  id="elecEYearDate"
+                  class="form-control col-4"
+                />
+              </div>
+              <div
+                id="elecCompareDiv"
+                class="row m-0 align-items-center"
+                style="display: none"
+              >
+                <div id="elecComYearDiv" class="row m-0 align-items-center">
+                  <input
+                    type="text"
+                    id="elecCom1YearDate"
+                    class="form-control col-4"
+                  />
+                  <span class="px-2">、</span>
+                  <input
+                    type="text"
+                    id="elecCom2YearDate"
+                    class="form-control col-4"
+                  />
+                </div>
+                <div
+                  id="elecComMonthDiv"
+                  class="row m-0 align-items-center"
+                  style="display: none"
+                >
+                  <input
+                    type="text"
+                    id="elecCom1MonthDate"
+                    class="form-control col-4"
+                  />
+                  <span class="px-2">、</span>
+                  <input
+                    type="text"
+                    id="elecCom2MonthDate"
+                    class="form-control col-4"
+                  />
+                </div>
+              </div>
+            </h2>
+          </div>
+          <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>
+            </h2>
+          </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>
+          <div class="d-flex my-2">
+            <button
+              type="button"
+              class="btn btn-primary"
+              onclick="getMeterData()"
+            >
+              查詢
+            </button>
+            <button
+              type="button"
+              class="btn btn-danger ml-2"
+              onclick="setExportList()"
+            >
+              匯出
+            </button>
+            <div
+              id="tableLoading"
+              class="row m-0 align-items-center"
+              style="display: none"
+            >
+              <div
+                class="spinner-border text-info mx-2"
+                role="status"
+                style="width: 1.2rem; height: 1.2rem"
+              >
+                <span class="sr-only">Loading...</span>
+              </div>
+              <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> -->
+          </div>
+
+          <table
+            id="report_table"
+            class="table table-bordered table-striped text-center m-0"
+          ></table>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script>
+  var default_building = localStorage.getItem("default_building");
+  var Building; //取得所有棟別
+  var SelectBuildings = new Array(0); //選擇的區域
+  var datatable;
+  var datepickerOptions = {
+    autoclose: true,
+    minViewMode: 1,
+    language: "zh-TW",
+    format: "yyyy-mm",
+  };
+  var reportTypeDict = {
+    RWater: {
+      name: "Water",
+      chiName: "水",
+      listApiUrl: "WaterList",
+      exportListApiUrl: "ExportWaterList",
+    },
+    RElec: {
+      name: "Electric",
+      chiName: "電",
+      listApiUrl: "ElectricList",
+      exportListApiUrl: {
+        day:"ExportElectricList",
+        month:"ExportElectricList",
+        year:"ExportElectricList",
+        compare:"ExportElectricCompareList",
+      }
+    },
+  };
+  var token = cookies.get("JWT-Authorization");
+
+  $(function () {
+    console.log("即時趨勢進入點");
+    setNameByType();
+    initDatePicker();
+    eventsInit();
+    getPrice();
+    setReportTable([]);
+    $("#elecSYearDate")
+      .val(moment().subtract(5, "years").format("YYYY"))
+      .trigger("change");
+    $("#elecEYearDate").val(moment().format("YYYY")).trigger("change");
+    $("#elecCom1YearDate").val(moment().subtract(1, "years").format("YYYY"));
+    $("#elecCom2YearDate").val(moment().format("YYYY"));
+    $("#elecCom1MonthDate").val(
+      moment().subtract(1, "months").format("YYYY-MM")
+    );
+    $("#elecCom2MonthDate").val(moment().format("YYYY-MM"));
+    //調整畫面
+    $("#js-page-content").removeClass("mt-0");
+
+    var html = "";
+    for (let building of pageAct.buildList) {
+      html += `<label class="btn btn-outline-success waves-effect waves-themed">
+                    <input type="radio" 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);
+
+    checkIsSelectedBuilding();
+  });
+
+  function setNameByType() {
+    $(".report-type-name").text(reportTypeDict["RElec"]["chiName"]);
+  }
+
+  function initDatePicker(name = null, otherParam = {}) {
+    const datepickerMonthOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 1,
+          format: "yyyy-mm",
+        },
+        otherParam
+      )
+    );
+    const datepickerYearOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerSYearOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerEYearOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerComYear1Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerComYear2Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerComMonth1Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 1,
+          format: "yyyy-mm",
+        },
+        otherParam
+      )
+    );
+    const datepickerComMonth2Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 1,
+          format: "yyyy-mm",
+        },
+        otherParam
+      )
+    );
+    if (name == null || name == "Month") {
+      $("#elecMonthDate")
+        .datepicker("destroy")
+        .datepicker(datepickerMonthOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        })
+        .datepicker("update", new Date());
+    }
+    if (name == null || name == "Year") {
+      $("#elecYearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerYearOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        })
+        .datepicker("update", new Date());
+    }
+    if (name == null || name == "SYear") {
+      $("#elecSYearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerSYearOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "EYear") {
+      $("#elecEYearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerEYearOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComYear1") {
+      $("#elecCom1YearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComYear1Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComYear2") {
+      $("#elecCom2YearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComYear2Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComMonth1") {
+      $("#elecCom1MonthDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComMonth1Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComMonth2") {
+      $("#elecCom2MonthDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComMonth2Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+  }
+
+  function eventsInit() {
+    $("body").on("change", "[name=reportTypeRadio]", function () {
+      $(
+        "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
+      ).hide();
+      $("#compareTypeBtnsDiv").hide();
+
+      const value = $(this).data("value");
+      const curDate = $("#elecDate").val();
+      if (value === "day") {
+        $("#elecTimeText").text("月份");
+        $("#elecMonthDate").show();
+      } else if (value == "month") {
+        $("#elecTimeText").text("年份");
+        $("#elecYearDate").show();
+      } else if (value == "year") {
+        $("#elecTimeText").text("年份範圍");
+        $("#elecStartEndDiv").show();
+      } else if (value == "compare") {
+        $("#elecTimeText").text("年份");
+        $("#elecCompareDiv").show();
+        $("#compareTypeBtnsDiv").show();
+      }
+    });
+
+    $("body").on("change", "[name=compareTypeRadio]", function () {
+      $("#elecComYearDiv, #elecComMonthDiv").hide();
+      const value = $(this).val();
+      if (value === "month") {
+        $("#elecTimeText").text("年份");
+        $("#elecComYearDiv").show();
+      } else if (value == "day") {
+        $("#elecTimeText").text("月份");
+        $("#elecComMonthDiv").show();
+      }
+    });
+
+    $("[name=reportTypeRadio]")
+      .parent("li")
+      .on("click", function () {
+        $("[name=reportTypeRadio]").parent("li").removeClass("active");
+        const oldVal = $("li.active [name=reportTypeRadio]").data("value");
+        $(this).addClass("active");
+        const newVal = $("li.active [name=reportTypeRadio]").data("value");
+        if (oldVal !== newVal) {
+          $("li.active [name=reportTypeRadio]").trigger("change");
+        }
+      });
+
+    $("[name=compareTypeRadio]")
+      .parent("label")
+      .on("click", function () {
+        debugger;
+        $("[name=compareTypeRadio]").parent("label").removeClass("active");
+        const oldVal = $("label.active [name=compareTypeRadio]").val();
+        $(this).addClass("active");
+        const newVal = $("label.active [name=compareTypeRadio]").val();
+        if (oldVal !== newVal) {
+          $("label.active [name=compareTypeRadio]").trigger("change");
+        }
+      });
+
+    $("[name=floorCheckbox]")
+      .parent(".btn")
+      .off("click")
+      .on("click", function () {
+        const oldVal = $("[name=floorCheckbox]:checked").val();
+        $(this).find("input[name=floorCheckbox]").prop("checked", true);
+        const newVal = $("[name=floorCheckbox]:checked").val();
+        if (oldVal !== newVal) {
+          $("[name=floorCheckbox]:checked").trigger("change");
+        }
+      });
+
+    $("body").on("change", "#elecSYearDate", function () {
+      initDatePicker("EYear", {
+        startDate: moment($(this).val()).startOf("year").toDate(),
+      });
+    });
+    $("body").on("change", "#elecEYearDate", function () {
+      initDatePicker("SYear", {
+        endDate: moment($(this).val()).endOf("year").toDate(),
+      });
+    });
+  }
+
+  function getListSendData() {
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+    const compareType = $("label.active [name=compareTypeRadio]").val();
+    const startTime =
+      tableType == "day"
+        ? $("#elecMonthDate").val()
+        : tableType == "month"
+        ? $("#elecYearDate").val()
+        : tableType == "year"
+        ? $("#elecSYearDate").val()
+        : tableType == "compare"
+        ? compareType == "month"
+          ? !$("#elecCom1YearDate").val() || !$("#elecCom2YearDate").val()
+            ? null
+            : [$("#elecCom1YearDate").val(), $("#elecCom2YearDate").val()]
+          : compareType == "day"
+          ? !$("#elecCom1MonthDate").val() || !$("#elecCom2MonthDate").val()
+            ? null
+            : [$("#elecCom1MonthDate").val(), $("#elecCom2MonthDate").val()]
+          : null
+        : null;
+
+    if (!startTime) {
+      toast_error("請選擇日期");
+      return;
+    }
+
+    if (Array.isArray(startTime) && startTime.length < 2) {
+      toast_error("請選擇比較日期");
+      return;
+    }
+
+    const endTime = tableType == "year" ? $("#elecEYearDate").val() : null;
+    if (!endTime && tableType == "year") {
+      toast_error("請選擇結束日期");
+      return;
+    }
+
+    let sent_data = {
+      tableType:
+        $("li.active [name=reportTypeRadio]").data("value") == "compare"
+          ? $("[name=compareTypeRadio]:checked").val()
+          : $("li.active [name=reportTypeRadio]").data("value"),
+      building_tag: $("[name=buildingRadio]:checked").val(),
+      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)];
+      startTime.forEach((sTime, i) => {
+        const compareType = $("[name=compareTypeRadio]:checked").val();
+        sent_data[i].startTime = sTime;
+        sent_data[i].endTime = null;
+      });
+    }
+
+    return sent_data;
+  }
+
+  function getMeterData() {
+    let result = [];
+    var sent_data = getListSendData();
+    if (!Array.isArray(sent_data)) {
+      sent_data = [sent_data];
+    }
+
+    if (!sent_data.some((s) => s.building_tag)) {
+      toast_error("請選擇棟別");
+      return;
+    }
+    if (!sent_data.some((s) => s.floor_tag)) {
+      toast_error("請選擇樓層");
+      return;
+    }
+    var url = baseApiUrl + "/api/" + reportTypeDict["RElec"]["listApiUrl"];
+
+    setLoading(true);
+    sent_data.forEach((sdata, i) => {
+      $.ajax({
+        type: "POST",
+        headers: {
+          Authorization: "Bearer " + token,
+        },
+        url: url,
+        async: false,
+        data: JSON.stringify(sdata),
+        contentType: "application/json; charset=utf-8",
+        success: function (rel) {
+          if (rel.code != "0000") {
+            if (rel.code == "9999") {
+              toast_error(rel.msg);
+            } else {
+              toast_warning(rel.msg);
+            }
+            return;
+          }
+          if (i == 0) {
+            result = result.concat(rel.data);
+            result.forEach(r => {
+              r._compare_price = null;
+              r._compare_total = null;
+              r._compare_total_price = null;
+            })
+          } else {
+            rel.data.forEach((r) => {
+              let target =
+                result.find(
+                  (d) =>
+                    d.building_tag == r.building_tag &&
+                    d.device_serial_tag == r.device_serial_tag &&
+                    d.floor_tag == r.floor_tag
+                ) ?? null;
+              let _target = {};
+              // if(!target){
+              //   result.push(target);
+              //   target = {};
+              // }
+              _target.rawData = (target?.rawData ?? []).concat(r.rawData);
+              _target._compare_price = r.price;
+              _target._compare_total = r.total;
+              _target._compare_total_price = r.total_price;
+
+              if (!target) {
+                _target = Object.assign(_target, r);
+                _target.price = null;
+                _target.total = null;
+                _target.total_price = null;
+                result.push(_target);
+                return;
+              }
+              target = Object.assign(target, _target);
+            });
+          }
+        },
+        complete: () => {
+          if (sent_data.length - 1 == i) {
+            setLoading(false);
+          }
+        },
+      });
+    });
+    debugger;
+    setReportTable(result);
+  }
+
+  function getPrice() {
+    debugger;
+    var sentdata = {
+      type: reportTypeDict["RElec"]["name"],
+    };
+
+    var url = baseApiUrl + "/api/HydroMeterPrice";
+
+    $.ajax({
+      type: "POST",
+      url: url,
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      data: JSON.stringify(sentdata),
+      contentType: "application/json; charset=UTF-8;",
+      success: function (rel) {
+        if (rel.code != "0000") {
+          if (rel.code == "9999") {
+            toast_error(rel.msg);
+          } else {
+            toast_warning(rel.msg);
+          }
+          return;
+        }
+        $("#elecPriceDegree").val(rel.data);
+      },
+    });
+  }
+
+  function getDayByMonth(month) {
+    const firstDayOfMonth = moment(month).startOf("month");
+    const lastDayOfMonth = moment(month).endOf("month");
+    const datesOfMonth = [];
+    let currentDay = moment(firstDayOfMonth);
+    while (currentDay.isSameOrBefore(lastDayOfMonth)) {
+      datesOfMonth.push(currentDay.format("YYYY-MM-DD"));
+      currentDay = currentDay.add(1, "day");
+    }
+    return datesOfMonth;
+  }
+
+  function getMonthByYear(year) {
+    const firstMonthOfYear = moment(year).startOf("year").month();
+    const lastMonthOfYear = moment(year).endOf("year").month();
+    const monthOfYear = [];
+    for (let i = firstMonthOfYear; i <= lastMonthOfYear; i++) {
+      monthOfYear.push(moment(year).month(i).format("YYYY-MM"));
+    }
+    return monthOfYear;
+  }
+
+  function getStartEndYear(sYear, eYear) {
+    const years = [];
+    for (let i = sYear; i <= eYear; i++) {
+      years.push(moment().year(i).format("YYYY"));
+    }
+    return years;
+  }
+
+  function setTableColumns() {
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+    const compareType = $("label.active [name=compareTypeRadio]").val();
+    let columns = [];
+    switch (tableType) {
+      case "day":
+        columns = getDayByMonth($("#elecMonthDate").val()).map((dc) => {
+          return { title: dc, data: dc };
+        });
+        break;
+      case "month":
+        columns = getMonthByYear($("#elecYearDate").val()).map((dc) => {
+          return { title: dc, data: dc };
+        });
+        break;
+      case "year":
+        columns = getStartEndYear(
+          $("#elecSYearDate").val(),
+          $("#elecEYearDate").val()
+        ).map((dc) => {
+          return { title: dc, data: dc };
+        });
+        break;
+      case "compare":
+        let compareResult = [];
+        switch (compareType) {
+          case "month":
+            columns1 = getMonthByYear($("#elecCom1YearDate").val());
+            columns2 = getMonthByYear($("#elecCom2YearDate").val());
+            columns1.forEach((c1, index) => {
+              compareResult.push(c1);
+              if (columns2[index]) {
+                compareResult.push({
+                  value: columns2[index],
+                  _isCompared: true,
+                });
+              }
+            });
+            break;
+          case "day":
+            columns1 = getDayByMonth($("#elecCom1MonthDate").val());
+            columns2 = getDayByMonth($("#elecCom2MonthDate").val());
+            columns1.forEach((c1, index) => {
+              compareResult.push(c1);
+              if (columns2[index]) {
+                compareResult.push({
+                  value: columns2[index],
+                  _isCompared: true,
+                });
+              }
+            });
+            break;
+        }
+
+        return compareResult.map((dc) => {
+          if (dc._isCompared) {
+            return { title: dc.value, data: dc.value, sClass: "compare" };
+          }
+          return { title: dc, data: dc };
+        });
+
+        break;
+    }
+    return columns;
+  }
+
+  function setReportTable(datas = []) {
+    if (datatable) {
+      datatable.clear().draw();
+      datatable.destroy();
+      $("#report_table").empty();
+    }
+    datesColumns = setTableColumns();
+    const compareType = $("label.active [name=compareTypeRadio]").val();
+    datas.forEach((td) => {
+      td.rawData.forEach((rd) => {
+        td[rd.timeStamp] = rd.avg_rawdata;
+      });
+      datesColumns.forEach((dc) => {
+        td[dc.data] = td[dc.data] === undefined ? null : td[dc.data];
+      });
+    });
+
+    let totalColumns = [
+      {
+        title: "小計",
+        data: "total",
+      },
+      {
+        title: "單價",
+        data: "price",
+      },
+      {
+        title: "金額總計",
+        data: "total_price",
+      },
+    ];
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+
+    if (tableType == "compare") {
+      const com1Time =
+        compareType == "month"
+          ? $("#elecCom1YearDate").val()
+          : $("#elecCom1MonthDate").val();
+      const com2Time =
+        compareType == "month"
+          ? $("#elecCom2YearDate").val()
+          : $("#elecCom2MonthDate").val();
+
+      for (var i = 0; i < totalColumns.length; i++) {
+        let c = totalColumns[i];
+        if (["total", "price", "total_price"].includes(c.data)) {
+          totalColumns.splice(i + 1, 0, {
+            title: com2Time + c.title,
+            data: "_compare_" + c.data,
+            sWidth: "60px",
+            sClass: "compare",
+          });
+          c.title = com1Time + c.title;
+          c.sWidth = "60px";
+        }
+      }
+    }
+    console.log("datas",datas)
+    console.log("totalColumns",totalColumns)
+    datatable = $("#report_table").DataTable({
+      data: datas,
+      destroy: true,
+      sDom: '<"toolbar">tipl',
+      fixedColumns: { left: 3, right: tableType == "compare" ? 2 : 3 },
+      scrollX: "auto",
+      scrollCollapse: true,
+      autoWidth: true,
+      language: { url: "/file/BajascriptTest/js/dataTables/zh-HANT.json" },
+      columns: [
+        {
+          title: "棟別",
+          data: "building_name",
+          className: "text-nowrap",
+        },
+        {
+          title: "樓層",
+          data: "floor_tag",
+          width: "8%",
+        },
+        {
+          title: "設備",
+          data: "device_serial_tag",
+          width: "8%",
+        },
+        ...datesColumns,
+        ...totalColumns,
+      ],
+    });
+  }
+
+  function setExportList() {
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+    var sent_data = getListSendData();
+    if (!Array.isArray(sent_data)) {
+      sent_data = [sent_data];
+    }
+    if (!sent_data.some((s) => s.building_tag)) {
+      toast_error("請選擇棟別");
+      return;
+    }
+    if (!sent_data.some((s) => s.floor_tag)) {
+      toast_error("請選擇樓層");
+      return;
+    }
+    debugger
+    var url =
+      baseApiUrl + "/api/" + reportTypeDict["RElec"]["exportListApiUrl"][tableType];
+
+    setLoading(true, "匯出中");
+    $.ajax({
+      type: "POST",
+      url: url,
+      data: tableType == "compare" ? JSON.stringify(sent_data) : JSON.stringify(sent_data[0]),
+      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);
+        }
+      },
+      complete: (xhr) => {
+        setLoading(false);
+      },
+    });
+  }
+
+  function setLoading(type = true, text = "列表讀取中") {
+    if (type) {
+      $("#tableLoading").fadeIn(200);
+      $("#tableLoadingText").html(text);
+    } else {
+      $("#tableLoading").fadeOut(200);
+    }
+  }
+
+  //選擇棟別
+  function SelectBuild(e, building_tag) {
+    checkIsSelectedBuilding();
+    GetFloors(building_tag);
+  }
+
+  //取得樓層
+  function GetFloors(building_tag) {
+    var sentdata = {
+      building_tag: building_tag,
+    };
+
+    var url = baseApiUrl + "/api/GetAllfloor";
+    $.ajax({
+      type: "POST",
+      url: url,
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      data: sentdata,
+      success: function (rel) {
+        if (rel.code != "0000") {
+          if (rel.code == "9999") {
+            toast_error(rel.msg);
+          } else {
+            toast_warning(rel.msg);
+          }
+          return;
+        }
+        if (rel.data && rel.data.length > 0) {
+          $(".allbtn").show();
+        }
+        drawFloorsBtn(rel.data);
+        checkIsHasFloorByBuilding();
+        //   JudgeCurrentDeviceData();
+        //   RedrawDataTable();
+      },
+    });
+  }
+
+  function allFloor() {
+    $("[name=floorCheckbox]").prop("checked", true);
+    $("[name=floorCheckbox]").parent(".btn").addClass("active");
+  }
+
+  function checkIsSelectedBuilding() {
+    let result = false;
+    let buildingRadios = $("[name=buildingRadio]:checked");
+    if (buildingRadios && buildingRadios.length > 0) {
+      $("#floors .text-notice.notice-noSelectedBuilding").hide();
+      result = true;
+    } else {
+      $("#floors .text-notice.notice-noSelectedBuilding").show();
+      $(".allbtn").hide();
+    }
+    return result;
+  }
+
+  function checkIsHasFloorByBuilding() {
+    let result = false;
+    let floorCheckboxs = $("[name=floorCheckbox]");
+    if (!checkIsSelectedBuilding()) {
+      return null;
+    }
+    if (floorCheckboxs && floorCheckboxs.length > 0) {
+      $("#floors .text-notice.notice-noBuilding").hide();
+      result = true;
+    } else {
+      $("#floors .text-notice.notice-noBuilding").show();
+      $(".allbtn").hide();
+    }
+    return result;
+  }
+
+  function drawFloorsBtn(floors) {
+    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>`;
+    }
+
+    $("#floors").find(".item").empty();
+    $("#floors").find(".item").append(html);
+  }
+
+  function SelectFloor(e, floor_guid) {
+    // getMeterData();
+  }
+</script>