diff --git a/Frontend/solarEnergyItem.html b/Frontend/solarEnergyItem.html
deleted file mode 100644
index fa40791..0000000
--- a/Frontend/solarEnergyItem.html
+++ /dev/null
@@ -1,814 +0,0 @@
-
- <!-- jquery -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/css/bootstrap-datepicker3.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-<!-- font-awesome -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<!-- flatpickr -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
-<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
-<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-<script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/zh-tw.js"></script>
-<!-- chart.js -->
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<!-- apexcharts -->
-<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-<div class="container-fluid">
-<div class="row px-2 py-3">
-  <div class="col-12 mb-3">
-    <div class="d-flex align-items-center">
-      <i class="fa fa-check-circle text-success fs-1-1 ml-3 " aria-hidden="true"></i>
-      <label id="curLevText" class="text-light fs-1 ml-2 mb-0"></label>
-    </div>
-  </div>
-  <div class="col-12 ">
-    <ul class="nav nav-tabs w-100" role="tablist">
-      <li class="nav-item">
-        <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1"
-        role="tab"><i class="fa fa-file-o mr-1" aria-hidden="true"></i> 即時資訊</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2"
-        role="tab"><i class="fa fa-area-chart mr-1"></i> 基本資料</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-3"
-        role="tab"><i class="fa fa-bar-chart mr-1"></i> 逆變器監控</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-4"
-        role="tab"><i class="fa fa-line-chart mr-1"></i> 逆變器分析</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-5"
-        role="tab"><i class="fa fa-list-alt mr-1"></i> 歷史資料</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-6"
-        role="tab"><i class="fa fa-file-text mr-1"></i> 異常紀錄</a>
-      </li>
-    </ul>
-    <div class="tab-content border-0 shadow-lg w-100">
-      <div class="tab-pane fade  show active" id="tab_borders_icons-1" role="tabpanel" data-id="realTimeInfo">
-        
-      </div>
-      <div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel" data-id="basicInfo">
-        
-      </div>
-      <div class="tab-pane fade" id="tab_borders_icons-3" role="tabpanel" data-id="invrMon">
-        
-      </div>
-      <div class="tab-pane fade" id="tab_borders_icons-4" role="tabpanel" data-id="invrAnal">
-        <div class="row p-3">
-          <div class="col-auto">
-            <div class="btn-group">
-              <button
-                onclick="setInvrAnalDate('tdy')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >
-                今天
-              </button>
-              <button
-                onclick="setInvrAnalDate('ytd')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >
-                昨天
-              </button>
-            </div>
-          </div>
-          <div class="col-auto">
-            <div class="form-group">
-              <input
-              class="form-control"
-              id="invrAnalDate"
-              type="text"
-              />
-            </div>
-          </div>
-          <div class="col-auto">
-            <a
-              href="#"
-              for="serial_number"
-              onclick="invrAnalSearch()"
-              class="btn btn-info"
-              >查詢</a>
-          </div>
-          <div class="col-12 border-bottom pb-4 mb-4">
-            <div id="heatMapChart"></div>
-          </div>
-          
-          <div class="col-auto">
-            <div class="btn-group">
-              <button
-                onclick="invrPowerDate('tdy')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >日</button>
-              <button
-                onclick="invrPowerDate('month')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >月</button>
-              <button
-                onclick="invrPowerDate('quarter')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >季</button>
-              <button
-                onclick="invrPowerDate('year')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >年</button>
-            </div>
-          </div>
-          <div class="col-auto">
-            <div class="form-group">
-              <input
-                class="form-control"
-                id="invrPowerDate"
-                type="text"
-              />
-            </div>
-          </div>
-          <div class="col-auto">
-            <div class="form-group" >
-              <select class="form-control" id="quarterSelectors" style="display: none;">
-                <option value="1">1-3 月</option>
-                <option value="2">4-6 月</option>
-                <option value="3">7-9 月</option>
-                <option value="4">10-12 月</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-auto">
-            <a
-              href="#"
-              for="serial_number"
-              onclick="invrPowerSearch()"
-              class="btn btn-info"
-            >查詢</a>
-          </div>
-          <div class="col-12 pt-5">
-            <canvas id="invrPowerChart" width="1000" height="350"></canvas>
-          </div>
-        </div>
-      </div>
-      <div class="tab-pane fade" id="tab_borders_icons-5" role="tabpanel" data-id="HistData">
-        <div class="row p-3">
-          <div class="col-auto">
-            <div class="btn-group">
-              <button
-                onclick="setHistDateType('day')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >
-                日
-              </button>
-              <button
-                onclick="setHistDateType('month')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >
-                月
-              </button>
-              <button
-                onclick="setHistDateType('year')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >
-                年
-              </button>
-              <button
-                onclick="setHistDateType('all')"
-                type="button"
-                class="btn btn-secondary waves-effect waves-themed"
-              >
-                歷年
-              </button>
-            </div>
-          </div>
-          <div class="col-auto">  
-            <div class="btn-group" id="histDateBtns">
-            </div>
-          </div>
-          <div class="col-auto"> 
-            <div class="form-group">
-              <input class="form-control"
-                    id="histDateVal"
-                    type="text"
-              />
-            </div>
-          </div>
-          <div class="col-auto"> 
-            <a
-              href="#"
-              for="serial_number"
-              onclick="histSearch()"
-              class="btn btn-info"
-              >查詢</a>
-          </div>
-          <div class="col-12">
-            <table id="histSumTable"
-              class="table table-bordered table-striped text-center m-0 w-100">
-            </table>
-          </div>
-          <div class="col-12">
-              <!-- 發電量及累績日照量 -->
-          </div>
-          <div class="col-12">
-              <!-- 詳細資料table -->
-          </div>
-        </div>
-      </div>
-      <div class="tab-pane fade" id="tab_borders_icons-6" role="tabpanel" data-id="abnRec">
-         6
-      </div>
-    </div>
-  </div>
-  </div>
-</div>
-</div>
-<script>
-  var today = new Date();
-  var yesterday = new Date(today);
-  var siteId = sessionStorage.getItem('siteId'); 
-  yesterday.setDate(today.getDate() - 1);
-
-
-  $(function () {
-    initializePage();
-    setTimeout(() => {
-      changeTabs();
-      renderHeatmapChart();
-      renderPowerChart();
-    }, 100); 
-  })
-  
-  // 回上一頁
-  function goback() {
-    sessionStorage.removeItem('solar');
-    $("#app").load(`_solarEnergy.html`);
-  }
-
-  // 切換tabs
-  function changeTabs() {
-    var currentSiteId = sessionStorage.getItem('siteId');
-    // 加載第一個
-    $('#tab_borders_icons-1').html(`
-        <iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Realtime.px"
-            width="100%"
-            height="800"
-            class="border-0">
-        </iframe>
-    `);
-
-    // 監聽切換事件
-    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-        $('#tab_borders_icons-1').html(""); 
-        $('#tab_borders_icons-2').html(""); 
-        $('#tab_borders_icons-3').html(""); 
-        $('#tab_borders_icons-6').html(""); 
-
-        var targetTab = $(e.target).attr("href"); 
-        if (targetTab === "#tab_borders_icons-1") {
-            $('#tab_borders_icons-1').html(`
-                <iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Realtime.px"
-                    width="100%"
-                    height="800"
-                    class="border-0">
-                </iframe>
-            `);
-        } else if (targetTab === "#tab_borders_icons-2") {
-            $('#tab_borders_icons-2').html(`
-                <iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Info.px"
-                    width="100%"
-                    height="800"
-                    class="border-0">
-                </iframe>
-            `);
-        } else if (targetTab === "#tab_borders_icons-3") {
-            $('#tab_borders_icons-3').html(`
-                <iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Inverter.px"
-                    width="100%"
-                    height="800"
-                    class="border-0">
-                </iframe>
-            `);
-        } 
-    });
-  }
-  
-  // 初始化畫面
-  function initializePage() {
-    const siteId = sessionStorage.getItem('siteId');
-    // 使用這些數據更新頁面
-    $("#curLevText").text(siteId);
-  }
-  
-  // 設置日期按鈕功能
-  function setInvrAnalDate(type) {
-    const invrAnalDateInput = $('#invrAnalDate');
-    invrAnalDateInput.datepicker('destroy'); 
-    invrAnalDateInput.datepicker({
-        format: 'yyyy/mm/dd',
-        autoclose: true
-    });
-  
-    if (type === 'tdy') {
-        invrAnalDateInput.datepicker('setDate', new Date()); // 設置為今天的日期
-    } else if (type === 'ytd') {
-        invrAnalDateInput.datepicker('setDate', yesterday); // 設置為昨天的日期
-    }
-  }
-  
-  // 查詢熱圖
-  function invrAnalSearch() {
-    const invrAnalDate = $('#invrAnalDate').val();
-  
-    // 假设 API 请求是一个 GET 请求，且返回的数据格式适用于直接渲染热图
-    fetch(`http://your-api-endpoint?date=${invrAnalDate}`)
-      .then(response => response.json())
-      .then(data => {
-        // 调用渲染热图函数，传入从 API 返回的数据
-         renderHeatmapChart(data);
-      })
-      .catch(error => {
-        console.error('API请求失敗:', error);
-      }
-    );
-  
-  }
-  
-  // HeatmapChart
-  function generateData(count, yrange) {
-    var i = 0;
-    var series = [];
-    while (i < count) {
-      var x = (i + 1).toString();
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-  
-      series.push({
-        x: x,
-        y: y
-      });
-      i++;
-    }
-    return series;
-  }
-  function getRandomValue() {
-    return parseFloat(Math.random().toFixed(16)); // 生成 0-1 之間的小數點後最多 16 位的隨機數值
-  }
-  function renderHeatmapChart(data) {
-    var options = {
-    title: {
-      text: '各逆變器當日日均發電度數',
-    },
-    chart: {
-      height: 500,
-      type: "heatmap",
-      foreColor: '#fff',
-    },
-    plotOptions: {
-      heatmap: {
-        shadeIntensity: 0.5, // 透明陰影效果
-        radius: 0,
-        useFillColorAsStroke: true,  // 使用填充顏色作為邊框顏色
-        colorScale: {
-        ranges: [
-          { from: 0, to: 0.1249999999999999, color: '#0000ff' },
-          { from: 0.125, to: 0.2499999999999999, color: '#5541b5' },
-          { from: 0.25, to: 0.3749999999999999, color: '#ab836b' },
-          { from: 0.375, to: 0.4999999999999999, color: '#dba841' },
-          { from: 0.5, to: 0.6249999999999999, color: '#eda42f' },
-          { from: 0.625, to: 0.7499999999999999, color: '#f4621c' },
-          { from: 0.75, to: 0.8749999999999999, color: '#f65017' },
-          { from: 0.875, to: 1, color: '#fb2109' }
-        ]},
-        min: 0,
-        max: 1
-      }
-    },
-    legend: {
-      show: true,
-      position: 'bottom',
-      horizontalAlign: 'center',
-      markers: {
-        shape:'circle',
-        fillColors: [
-          '#0000ff',  
-          '#5541b5',  
-          '#ab836b',  
-          '#dba841',  
-          '#eda42f',  
-          '#f4621c',  
-          '#f65017',  
-          '#fb2109'   
-        ],
-      },
-      onItemClick: {
-        toggleDataSeries: true
-      },
-       onItemHover: {
-        highlightDataSeries: true
-      },
-    },
-    dataLabels: {
-      enabled: false, //不在每格上顯示數據
-    },
-    series: [
-      {
-        name: '001',
-        data: [
-          { x: '03:00', y: getRandomValue() },
-          { x: '03:15', y: getRandomValue() },
-          { x: '03:30', y: getRandomValue() },
-          { x: '03:45', y: getRandomValue() },
-          { x: '04:00', y: getRandomValue() },
-          { x: '04:15', y: getRandomValue() },
-          { x: '04:30', y: getRandomValue() },
-          { x: '04:45', y: getRandomValue() },
-          { x: '05:00', y: getRandomValue() },
-          { x: '05:15', y: getRandomValue() },
-          { x: '05:30', y: getRandomValue() },
-          { x: '05:45', y: getRandomValue() },
-          { x: '06:00', y: getRandomValue() },
-          { x: '06:15', y: getRandomValue() },
-          { x: '06:30', y: getRandomValue() },
-          { x: '06:45', y: getRandomValue() },
-          { x: '07:00', y: getRandomValue() },
-          { x: '07:15', y: getRandomValue() },
-          { x: '07:30', y: getRandomValue() },
-          { x: '07:45', y: getRandomValue() },
-          { x: '08:00', y: getRandomValue() },
-          { x: '08:15', y: getRandomValue() },
-          { x: '08:30', y: getRandomValue() },
-          { x: '08:45', y: getRandomValue() },
-          { x: '09:00', y: getRandomValue() },
-          { x: '09:15', y: getRandomValue() },
-          { x: '09:30', y: getRandomValue() },
-          { x: '09:45', y: getRandomValue() },
-          { x: '10:00', y: getRandomValue() },
-          { x: '10:15', y: getRandomValue() },
-          { x: '10:30', y: getRandomValue() },
-          { x: '10:45', y: getRandomValue() },
-          { x: '11:00', y: getRandomValue() },
-          { x: '11:15', y: getRandomValue() },
-          { x: '11:30', y: getRandomValue() },
-          { x: '11:45', y: getRandomValue() },
-          { x: '12:00', y: getRandomValue() },
-          { x: '12:15', y: getRandomValue() },
-          { x: '12:30', y: getRandomValue() },
-          { x: '12:45', y: getRandomValue() },
-          { x: '13:00', y: getRandomValue() },
-          { x: '13:15', y: getRandomValue() },
-          { x: '13:30', y: getRandomValue() },
-          { x: '13:45', y: getRandomValue() },
-          { x: '14:00', y: getRandomValue() },
-        ]
-      },
-      {
-        name: '002',
-        data: [
-          { x: '03:00', y: getRandomValue() },
-          { x: '03:15', y: getRandomValue() },
-          { x: '03:30', y: getRandomValue() },
-          { x: '03:45', y: getRandomValue() },
-          { x: '04:00', y: getRandomValue() },
-          { x: '04:15', y: getRandomValue() },
-          { x: '04:30', y: getRandomValue() },
-          { x: '04:45', y: getRandomValue() },
-          { x: '05:00', y: getRandomValue() },
-          { x: '05:15', y: getRandomValue() },
-          { x: '05:30', y: getRandomValue() },
-          { x: '05:45', y: getRandomValue() },
-          { x: '06:00', y: getRandomValue() },
-          { x: '06:15', y: getRandomValue() },
-          { x: '06:30', y: getRandomValue() },
-          { x: '06:45', y: getRandomValue() },
-          { x: '07:00', y: getRandomValue() },
-          { x: '07:15', y: getRandomValue() },
-          { x: '07:30', y: getRandomValue() },
-          { x: '07:45', y: getRandomValue() },
-          { x: '08:00', y: getRandomValue() },
-          { x: '08:15', y: getRandomValue() },
-          { x: '08:30', y: getRandomValue() },
-          { x: '08:45', y: getRandomValue() },
-          { x: '09:00', y: getRandomValue() },
-          { x: '09:15', y: getRandomValue() },
-          { x: '09:30', y: getRandomValue() },
-          { x: '09:45', y: getRandomValue() },
-          { x: '10:00', y: getRandomValue() },
-          { x: '10:15', y: getRandomValue() },
-          { x: '10:30', y: getRandomValue() },
-          { x: '10:45', y: getRandomValue() },
-          { x: '11:00', y: getRandomValue() },
-          { x: '11:15', y: getRandomValue() },
-          { x: '11:30', y: getRandomValue() },
-          { x: '11:45', y: getRandomValue() },
-          { x: '12:00', y: getRandomValue() },
-          { x: '12:15', y: getRandomValue() },
-          { x: '12:30', y: getRandomValue() },
-          { x: '12:45', y: getRandomValue() },
-          { x: '13:00', y: getRandomValue() },
-          { x: '13:15', y: getRandomValue() },
-          { x: '13:30', y: getRandomValue() },
-          { x: '13:45', y: getRandomValue() },
-          { x: '14:00', y: getRandomValue() },
-        ]
-      },
-      {
-        name: '003',
-        data: [
-          { x: '03:00', y: getRandomValue() },
-          { x: '03:15', y: getRandomValue() },
-          { x: '03:30', y: getRandomValue() },
-          { x: '03:45', y: getRandomValue() },
-          { x: '04:00', y: getRandomValue() },
-          { x: '04:15', y: getRandomValue() },
-          { x: '04:30', y: getRandomValue() },
-          { x: '04:45', y: getRandomValue() },
-          { x: '05:00', y: getRandomValue() },
-          { x: '05:15', y: getRandomValue() },
-          { x: '05:30', y: getRandomValue() },
-          { x: '05:45', y: getRandomValue() },
-          { x: '06:00', y: getRandomValue() },
-          { x: '06:15', y: getRandomValue() },
-          { x: '06:30', y: getRandomValue() },
-          { x: '06:45', y: getRandomValue() },
-          { x: '07:00', y: getRandomValue() },
-          { x: '07:15', y: getRandomValue() },
-          { x: '07:30', y: getRandomValue() },
-          { x: '07:45', y: getRandomValue() },
-          { x: '08:00', y: getRandomValue() },
-          { x: '08:15', y: getRandomValue() },
-          { x: '08:30', y: getRandomValue() },
-          { x: '08:45', y: getRandomValue() },
-          { x: '09:00', y: getRandomValue() },
-          { x: '09:15', y: getRandomValue() },
-          { x: '09:30', y: getRandomValue() },
-          { x: '09:45', y: getRandomValue() },
-          { x: '10:00', y: getRandomValue() },
-          { x: '10:15', y: getRandomValue() },
-          { x: '10:30', y: getRandomValue() },
-          { x: '10:45', y: getRandomValue() },
-          { x: '11:00', y: getRandomValue() },
-          { x: '11:15', y: getRandomValue() },
-          { x: '11:30', y: getRandomValue() },
-          { x: '11:45', y: getRandomValue() },
-          { x: '12:00', y: getRandomValue() },
-          { x: '12:15', y: getRandomValue() },
-          { x: '12:30', y: getRandomValue() },
-          { x: '12:45', y: getRandomValue() },
-          { x: '13:00', y: getRandomValue() },
-          { x: '13:15', y: getRandomValue() },
-          { x: '13:30', y: getRandomValue() },
-          { x: '13:45', y: getRandomValue() },
-          { x: '14:00', y: getRandomValue() },
-        ]
-      }
-    ],
-    tooltip: {
-      custom: function({ series, seriesIndex, dataPointIndex, w }) {
-        var value = series[seriesIndex][dataPointIndex];
-        return `<div>編號: ${w.globals.seriesNames[seriesIndex]}<br>時間: ${w.globals.labels[dataPointIndex]}<br>度數: ${value} kWh</div>`;
-      }
-    }
-  };
-  
-    var chart = new ApexCharts(document.querySelector("#heatMapChart"), options);
-  
-    chart.render();
-  }
-  
-  
-  // 日期選擇器邏輯
-  function invrPowerDate(type) {
-      const startDateInput = $('#invrPowerDate');
-      $('#quarterSelectors').hide();
-  
-      startDateInput.datepicker('destroy');
-  
-      if (type === 'tdy') {
-        // 設定今天日期
-        startDateInput.datepicker({
-          format: 'yyyy/mm/dd',
-          autoclose: true
-        }).datepicker('setDate', new Date());
-      } else if (type === 'month') {
-        startDateInput.datepicker({
-          format: 'yyyy/mm',
-          startView: 1,
-          minViewMode: 1,
-          autoclose: true
-        }).datepicker('setDate', new Date());
-      } else if (type === 'quarter') {
-        startDateInput.datepicker({
-          format: 'yyyy',
-          minViewMode: 2,
-          autoclose: true
-        }).datepicker('setDate', new Date());
-        $('#quarterSelectors').show();
-      } else if (type === 'year') {
-        startDateInput.datepicker({
-          format: 'yyyy',
-          startView: 2,
-          minViewMode: 2,
-          autoclose: true
-        }).datepicker('setDate', new Date());;
-      }else {
-        startDateInput.datepicker("destroy");
-      }
-  }
-  
-  // 查詢逆變器發電量
-  function invrPowerSearch() {
-    const selectedDate = $('#invrPowerDate').val();
-      const quarter = $('#quarterSelectors').val(); // 獲取選中的季度
-      
-      // 假設 API 請求 URL 是 http://your-api-endpoint，根據你的情況修改 API 請求
-      const apiUrl = `http://your-api-endpoint?date=${selectedDate}&quarter=${quarter}`;
-  
-      fetch(apiUrl)
-          .then(response => response.json())
-          .then(data => {
-              renderPowerChart(data); // 使用返回的數據渲染圖表
-          })
-          .catch(error => {
-              console.error('API請求失敗:', error);
-          });
-  }
-  
-  function renderPowerChart() {
-    const Powerdata = {
-      time: ["10:00", "11:00", "12:00"],
-      plants: {
-        plant1: [5, 10, 15],
-        plant2: [6, 11, 14],
-        plant3: [5, 10, 14]
-      }
-    };
-  
-    let ctx = $("#invrPowerChart").get(0).getContext("2d");
-    
-    const labels = Powerdata.time;
-    const datasets = [
-      {
-        label: '001',
-        data: Powerdata.plants.plant1,
-        backgroundColor: 'rgba(255, 99, 132, 0.6)',
-        borderColor: 'rgba(255, 99, 132, 1)',
-        borderWidth: 1
-      },
-      {
-        label: '002',
-        data: Powerdata.plants.plant2,
-        backgroundColor: 'rgba(54, 162, 235, 0.6)',
-        borderColor: 'rgba(54, 162, 235, 1)',
-        borderWidth: 1
-      },
-      {
-        label: '003',
-        data: Powerdata.plants.plant3,
-        backgroundColor: 'rgba(75, 192, 192, 0.6)',
-        borderColor: 'rgba(75, 192, 192, 1)',
-        borderWidth: 1
-      }
-    ];
-  
-    new Chart(ctx, {
-      type: 'bar',
-      data: {
-        labels: labels,
-        datasets: datasets
-      },
-      options: {
-        scales: {
-          x: {
-            title: {
-              display: true,
-              text: '時間',
-              color: '#fff'
-            },
-            ticks: {
-              color: '#fff'
-            },
-            grid: {
-              color: 'rgba(255, 255, 255, 0.2)'
-            }
-          },
-          y: {
-            title: {
-              display: true,
-              text: '發電量 (kWh)',
-              color: '#fff'
-            },
-            ticks: {
-              color: '#fff'
-            },
-            grid: {
-              color: 'rgba(255, 255, 255, 0.2)'
-            }
-          }
-        },
-        plugins: {
-          legend: {
-            labels: {
-              color: '#fff'
-            }
-          },
-          title: {
-            display: true,
-            text: '逆變器發電量',
-            color: '#fff'
-          }
-        }
-      }
-    });
-  }
-  
-  // 歷史資料日期選擇
-  function setHistDateType(type){
-    
-    const histDateBtns = $('#histDateBtns');
-    histDateBtns.empty();
-    let buttonConfig;
-  
-    const histDateVal = $('#histDateVal');
-    histDateVal.datepicker('destroy'); // 取消之前的 datepicker 綁定
-  
-    histDateBtns.show();
-    histDateVal.show();
-  
-    if (type === 'day') {
-      buttonConfig = [
-        { text: '今日', value: 'tdy' },
-        { text: '昨日', value: 'ytd' }
-      ];
-      histDateVal.datepicker({
-        format: 'yyyy/mm/dd',
-        autoclose: true
-      }).datepicker('setDate', new Date());
-    }else if(type === 'month') {
-      buttonConfig = [
-        { text: '本月', value: 'currentMonth' },
-        { text: '上個月', value: 'lastMonth' }
-      ];
-      histDateVal.datepicker({
-        format: 'yyyy/mm',
-        startView: 1,
-        minViewMode: 1,
-        autoclose: true
-      }).datepicker('setDate', new Date());
-    }else if(type === 'year'){
-      buttonConfig = [
-        { text: '今年', value: 'currentYear' },
-        { text: '去年', value: 'lastYear' }
-      ];
-      histDateVal.datepicker({
-        format: 'yyyy',
-        startView: 2,
-        minViewMode: 2,
-        autoclose: true
-      }).datepicker('setDate', new Date());
-    }else if(type === 'all'){
-      histDateBtns.hide();
-      histDateVal.hide();
-    }
-  
-    $.each(buttonConfig, function(index, config) {
-      const button = $('<button>')
-        .addClass('btn btn-secondary waves-effect waves-themed')
-        .text(config.text)
-        .attr('onclick', `setHisDate('${config.value}')`);
-  
-      histDateBtns.append(button);
-    });
-  }
-  
-  function setHisDate(value) {
-    const histDateVal = $('#histDateVal');
-      if (value === 'tdy') {
-        histDateVal.datepicker('setDate', new Date());
-      } else if (value === 'ytd') {
-        histDateVal.datepicker('setDate', yesterday);
-      } else if (value === 'currentMonth') {
-        histDateVal.datepicker('setDate', new Date(today.getFullYear(), today.getMonth(), 1));
-      } else if (value === 'lastMonth') {
-        histDateVal.datepicker('setDate', new Date(today.getFullYear(), today.getMonth() - 1, 1));
-      } else if (value === 'currentYear') {
-        histDateVal.datepicker('setDate', new Date(today.getFullYear(), 0, 1));
-      } else if (value === 'lastYear') {
-        histDateVal.datepicker('setDate', new Date(today.getFullYear() - 1, 0, 1));
-      }
-  }
-  
-  
-  </script>
-       
\ No newline at end of file