diff --git a/Frontend/_historyData2.html b/Frontend/_historyData2.html
new file mode 100644
index 0000000..7c36816
--- /dev/null
+++ b/Frontend/_historyData2.html
@@ -0,0 +1,800 @@
+<main id="js-page-content" role="main" class="page-content">
+  <h1 class="p-2 mb-0">歷史資料</h1>
+
+  <div class="row">
+    <div class="col-sm-12 col-xl-2">
+      <div class="rounded border border-white">
+        <div class="d-flex position-relative py-3 px-4">
+          <i
+            class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"
+          ></i>
+          <input
+            type="text"
+            id="js_nested_list_filter"
+            class="form-control shadow-inset-1 pl-6 border-success"
+            placeholder="輸入兩字以上"
+          />
+        </div>
+        <!-- nav-menu-reset will reset the font colors -->
+        <form id="device_list_form" class="w-100">
+          <!-- <ul id="js_nested_list"
+            class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
+            data-nav-accordion="true"></ul> -->
+          <div id="accordion" class="js_nested_list"></div>
+        </form>
+        <div
+          class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"
+        ></div>
+      </div>
+    </div>
+    <div class="col-sm-12 col-xl-10">
+      <div class="row bg-dark p-2">
+        <!-- 改放小類 -->
+        <div class="py-2 col-12" id="his_building">
+          <div
+            class="item btn-group btn-group-toggle"
+            data-toggle="buttons"
+          ></div>
+        </div>
+        <div class="col-12 mt-2">
+          <div id="devPointsList" class="btn-group"></div>
+        </div>
+      </div>
+      <div class="row bg-dark p-2 mb-5 align-items-center">
+        <div class="col-auto">
+          <div class="btn-group">
+            <button
+              type="button"
+              onclick="setDateType(1, this)"
+              class="btn btn-secondary waves-effect waves-themed active"
+            >
+              日期
+            </button>
+            <button
+              type="button"
+              onclick="setDateType(2, this)"
+              class="btn btn-secondary waves-effect waves-themed"
+            >
+              時間
+            </button>
+          </div>
+        </div>
+
+        <div class="col-auto">
+          <form id="search_time_form" class="form-group d-flex">
+            <div class="d-flex">
+              <input
+                class="form-control flatpickr flatpickr-input selectDate mr-1"
+                id="his_startdate"
+                data-val=""
+                type="date"
+                name="Start_date"
+                value=""
+              />
+
+              <input
+                class="form-control flatpickr flatpickr-input selectTime"
+                id="his_startTime"
+                data-val=""
+                type="text"
+                name="Start_time"
+                value=""
+              />
+            </div>
+            <div class="d-flex ml-4">
+              <input
+                class="form-control flatpickr flatpickr-input selectDate mr-1"
+                id="his_enddate"
+                type="date"
+                data-val=""
+                name="End_date"
+                value=""
+              />
+              <input
+                class="form-control flatpickr flatpickr-input selectTime"
+                id="his_endTime"
+                data-val=""
+                type="text"
+                name="End_time"
+                value=""
+              />
+            </div>
+          </form>
+        </div>
+        <div class="col-auto d-flex">
+          <a href="#" onclick="getData()" class="btn btn-info mr-2">查詢</a>
+          <a
+            href="#"
+            onclick="exportExcel()"
+            class="btn btn-info waves-effect waves-themed mr-2"
+          >
+            <span class="fal fa-file-excel mr-1"></span>
+            匯出
+          </a>
+          <div class="dropdown">
+            <button
+              class="btn btn-info waves-effect waves-themed dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+              id="favoriteDropdownMenu"
+            >
+              常用組合
+            </button>
+            <div
+              class="dropdown-menu favorite_dropdown"
+              aria-labelledby="favoriteDropdownMenu"
+            >
+
+         
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div class="frame-wrap">
+          <table
+            id="historyTable2"
+            class="table table-bordered table-striped text-center m-0 w-100"
+          ></table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 常用清單 -->
+  <div
+    class="modal fade"
+    id="favoriteModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="favoriteModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="favoriteModalLabel">新增/編輯常用清單</h5>
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <form id="favoriteForm">
+            <div class="form-group">
+              <label for="favoriteName">名稱</label>
+              <input
+                type="text"
+                class="form-control"
+                id="favoriteName"
+                name="favoriteName"
+                placeholder="名稱"
+              />
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            關閉
+          </button>
+          <button type="button" class="btn btn-primary confirm_modal_btn" >確認</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+<style>
+  .flatpickr-monthDropdown-month {
+    color: black !important;
+  }
+</style>
+
+<script
+  src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
+  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  var historyTable2 = null;
+  var buildingTag = null;
+  pageAct.hisBuiName = "";
+  hisFirst = true;
+  var device_list = [];
+  $(function () {
+    console.log();
+    flatpickr(".selectDate", {
+      locale: "zh_tw",
+      dateFormat: "Y-m-d",
+    });
+
+    flatpickr(".selectTime", {
+      locale: "zh_tw",
+      enableTime: true,
+      noCalendar: true,
+      dateFormat: "H:i",
+      time_24hr: true,
+    });
+
+    setDateType(1, $(`[onclick="setDateType(1, this)"]`));
+    initList();
+    getFavorite();
+
+    loadTable(null);
+  });
+
+  function initList() {
+    let sendData = {
+      building_tag: pageAct.buiTag,
+    };
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetMainSub";
+    function success(res) {
+      let strHtml = ``;
+      let i1 = null,
+        i2 = null,
+        first = true;
+
+      let buiHtml = "";
+      $.each(res.data.history_Main_Systems, function (index, val) {
+        $.each(val.history_Sub_systems, function (index2, val2) {
+          i2 = val2.device != null && i2 == null ? index2 : null;
+
+          buiHtml += `<label class="btn btn-secondary">
+                        <input type="radio" name="subRadio" id="radio-${val2.sub_system_tag}" value="${val2.sub_system_tag}" onchange="selectSub(this, '${val2.sub_system_tag}')"> ${val2.full_name}
+                          </label>`;
+        });
+      });
+
+      $("#his_building").find(".item").empty();
+      $("#his_building").find(".item").append(buiHtml);
+      if ($("#his_building .item label").first())
+        $("#his_building .item input[type='radio']").first().click();
+    }
+    $(loadEle).Loading("close");
+    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+  }
+
+  // 取得sub
+  async function selectSub(e, sub) {
+    console.log("selected sub", sub);
+    let result = false;
+    let subRadios = $("[name=subRadio]:checked");
+    subTag = null;
+    if (subRadios && subRadios.length > 0) {
+      $("[name=subRadio]").parent().removeClass("btn-info");
+      $("[name=subRadio]").parent().addClass("btn-secondary");
+      $("[name=subRadio]:checked").parent().removeClass("btn-secondary");
+      $("[name=subRadio]:checked").parent().addClass("btn-info");
+      subTag = subRadios.val(); //sub tag
+      if (pageAct.selectedSub !== subTag) {
+        pageAct.selectedSub = subTag;
+        await getSidebar(subTag);
+      }
+
+      result = true;
+    }
+    return result;
+  }
+
+  
+  function selectAllBuildingDevice(e){    
+    if(e.target.name==='bui_selected'){
+      let curData = device_list.find(({building_tag})=> e.target.dataset.building ===building_tag) 
+      const curBuisDev = curData.device_list.map(({device_number})=> device_number)
+
+      const form = $("#device_list_form")[0];
+      const formData = new FormData(form);    
+      let list = formData.getAll("Device_list")
+
+        if(e.target.checked){
+          
+          list = [...list, ...curBuisDev];
+        }else{
+          
+          list = list.filter((dev)=> !curBuisDev.includes(dev))
+        }
+
+        $('[name="Device_list"]').each((i, e)=>{
+         if( list.includes(e.dataset.device)){
+          e.checked = true;
+         }else{
+          e.checked = false;
+         }
+        })
+    }
+  }
+  document.querySelector(".js_nested_list").addEventListener("change",selectAllBuildingDevice)
+  
+  // 取得右側sidebar
+  function getSidebar(subTag) {
+    // let subTag = $("[name=subRadio]:checked").val()
+    let sendData = {
+      sub_system_tag: subTag,
+    };
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetDeviceInfo";
+    function stop(e) {
+      e.stopPropagation();
+    }
+    function success(res) {
+      let strHtml = ``;
+      let i1 = null,
+        i2 = null,
+        first = true;
+      device_list = res.data;
+      $.each(res.data, function (index, building) {
+        let innerHtml = "";
+        $.each(building.device_list, function (index2, val2) {
+          innerHtml += ` <li class="card-header px-5 list-group-item">
+      <input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="Device_list" data-device="${val2.device_number}" value="${val2.device_number}" id="dev_${val2.device_number}">
+      <p class="h6 mb-0">
+        ${val2.device_name}
+      </p>
+     </li>`;
+        });
+
+        strHtml += ` <div class="card">
+    <div class="card-header px-5" id="bui_${building.building_tag}">
+      <input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="bui_selected" data-building="${building.building_tag}"  value="${building.building_tag}" id="bui_${building.building_tag}">
+      <p class="h6 mb-0" data-toggle="collapse" data-target="#collapse_${building.building_tag}" aria-expanded="false" aria-controls="collapse_${building.building_tag}">
+        ${building.building_name}
+      </p>
+    </div>
+
+    <div id="collapse_${building.building_tag}" class="collapse" aria-labelledby="heading_${building.building_tag}" data-parent="#accordion">
+      <div class="card-body">        
+        <ul class="list-group">
+        ${innerHtml}
+        </ul>
+      </div>
+    </div>
+  </div>`;
+      });
+
+      $(".js_nested_list").html(strHtml);
+      $(`[name="Device_list"]`).first().click();
+      devPointsList();
+    }
+    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+  }
+
+  function devPointsList() {
+    // 從form取得目前的設備列表
+    const form = $("#device_list_form")[0];
+    const formData = new FormData(form);
+
+    console.log(formData.get("Device_list"));
+
+    let sendData = {
+      Device_list:
+        typeof formData.get("Device_list") == "string"
+          ? [formData.get("Device_list")]
+          : formData.get("Device_list"),
+    };
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetAllDevPoi";
+    function success(res) {
+      let strHtml = ``;
+
+      $.each(res.data, function (index, val) {
+        if (index == 0) {
+          strHtml += `<button onClick="setValue(null, null, '${
+            val.points
+          }', this)" type="button" class="btn btn-info waves-effect waves-themed" data-point="${
+            val.points
+          }">${val.full_name || val.points}</button>`;
+          pageAct.devicePoiName = [val.points];
+        } else {
+          strHtml += `<button onClick="setValue(null, null, '${
+            val.points
+          }', this)" type="button" class="btn btn-secondary waves-effect waves-themed"  data-point="${
+            val.points
+          }">${val.full_name || val.points}</button>`;
+        }
+      });
+      // $("[data-point]").first().click();
+      $("#devPointsList").html(strHtml);
+      $("[name='Start_date']").val(moment().format("YYYY-MM-DD"));
+      $("[name='Start_time']").val(
+        moment().set("hour", 0).set("minute", 0).format("HH:mm")
+      );
+      $("[name='End_date']").val(moment().format("YYYY-MM-DD"));
+      $("[name='End_time']").val(
+        moment().set("hour", 23).set("minute", 59).format("HH:mm")
+      );
+      if (hisFirst) {
+        getData();
+      }
+    }
+    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+  }
+
+  function getData(e) {
+    e?.preventDefault();
+    // $(loadEle)?.Loading?.("start");
+    let sendData = {
+      Type: pageAct.dateType,
+      Points: pageAct.devicePoiName,
+    };
+    const timeForm = $("#search_time_form")[0];
+    const seaerchFormData = new FormData(timeForm);
+    for (let [key, value] of seaerchFormData) {
+      console.log(1, key, value);
+      sendData[key] = value;
+    }
+
+    const form = $("#device_list_form")[0];
+    const formData = new FormData(form);
+
+    sendData["Device_list"] =formData.getAll("Device_list")
+
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetHistoryData";
+    ytAjax = new YourTeam.Ajax(
+      url,
+      objSendData,
+      function (res) {
+        console.log(res);
+        if (res && res.code == "0000") {
+          loadTable(res.data.items);
+        }
+      },
+      function (res) {
+        $(loadEle).Loading("close");
+      },
+      "POST",
+      true
+    ).send();
+  }
+
+  function setValue(deviceNumber, deviceName, devPoi, elem) {
+    const elems = $("[data-point]");
+    if (pageAct.devicePoiName.includes(devPoi)) {
+      pageAct.devicePoiName = pageAct.devicePoiName.filter((p) => p !== devPoi);
+    } else {
+      pageAct.devicePoiName = [...pageAct.devicePoiName, devPoi];
+    }
+    elems.each((i, e) => {
+      let pointName = e.dataset.point;
+      if (pageAct.devicePoiName.includes(pointName)) {
+        $(e).removeClass("btn-secondary").addClass("btn-info");
+      } else {
+        $(e).removeClass("btn-info").addClass("btn-secondary");
+      }
+    });
+  }
+
+  function setDateType(type, elem) {
+    console.log(type);
+    pageAct.dateType = type;
+    $(elem).parent().children().removeClass("btn-info active");
+    $(elem).addClass("btn-info active");
+
+    if (type === 1) {
+      $(".selectTime").css("display", "none");
+    } else if (type === 2) {
+      $(".selectTime").css("display", "block");
+    }
+  }
+
+  function loadTable(data) {
+    if (historyTable2) {
+      historyTable2.clear().draw();
+      historyTable2.destroy();
+      $("#historyTable2").empty();
+    }
+    console.log("2", data);
+    if (data) {
+      let tag = "#historyTable2";
+
+      let column_defs = [
+        { targets: [0], width: "20%", sortable: true },
+        { targets: [1], width: "20%", sortable: true },
+        { targets: [2], width: "20%", sortable: true },
+        { targets: [3], width: "20%", sortable: true },
+        { targets: [4], width: "20%", sortable: true },
+      ];
+
+      let columns = [
+        {
+          title: "廠區",
+          data: "building_name",
+        },
+
+        {
+          title: "設備名稱",
+          data: "device_name",
+        },
+        {
+          title: "類別",
+          data: "points",
+        },
+        {
+          title: "數值",
+          data: "value",
+        },
+        {
+          title: "紀錄時間",
+          data: "timestamp",
+        },
+      ];
+
+      historyTable2 = new YourTeam.JqDataTables.getTableByStatic(
+        tag,
+        data,
+        columns,
+        column_defs,
+        null,
+        null,
+        null,
+        null,
+        "tpi"
+      );
+
+      $(tag).DataTable().order([4, "desc"]);
+      $(loadEle)?.Loading?.("close");
+    }
+  }
+
+  function exportExcel() {
+    $(loadEle).Loading("start");
+    let token = cookies.get("JWT-Authorization");
+    let url = baseApiUrl + "/api/ExportHistoryExcel";
+    let sendData = {
+      Type: pageAct.dateType,
+      Points: pageAct.devicePoiName,
+    };
+    const timeForm = $("#search_time_form")[0];
+    const seaerchFormData = new FormData(timeForm);
+    for (let [key, value] of seaerchFormData) {
+      console.log(1, key, value);
+      sendData[key] = value;
+    }
+
+    const form = $("#device_list_form")[0];
+    const formData = new FormData(form);
+    sendData["Device_list"] =formData.getAll("Device_list")
+    objSendData.Data = sendData;
+
+    $.ajax({
+      type: "POST",
+      url: url,
+      data: JSON.stringify(objSendData.Data),
+      aysnc: true,
+      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);
+        }
+        $(loadEle).Loading("close");
+      },
+      error: function () {
+        $(loadEle).Loading("close");
+      },
+      complete: (xhr) => {
+        setLoading(false);
+      },
+    });
+    // ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
+    //     $(loadEle).Loading("close");
+    // }, function (rel) {
+    //     if (rel) {
+    //        downloadByBlob(xhr, rel);
+    //     }
+
+    //     $(loadEle).Loading("close");
+    // }, "POST",true).send();
+  }
+
+
+  var editGuid = "";  
+  var favorite_setting = [];
+  function openModal(favorite_guid) {
+    console.log(favorite_guid);
+    editGuid = "";
+    if(favorite_guid){     
+      $("#favoriteName").val(favorite_setting.find((d)=>d.favorite_guid===favorite_guid).favorite_name);
+      editGuid = favorite_guid;
+    }
+    $('#favoriteModal').modal('show');
+  }
+
+  function closeModal(){
+    $('#favoriteModal').modal('hide');
+  }
+
+  async function addFavorite() {
+    let token = cookies.get("JWT-Authorization");
+    const form = $("#device_list_form")[0];
+    const formData = new FormData(form);
+    Device_list = formData.getAll("Device_list");
+
+    const favoriteForm = $("#favoriteForm")[0];
+    const favoriteFormData = new FormData(favoriteForm);
+
+    const json = await fetch(baseApiUrl + "/api/History/SaveHistoryFavorite", {
+      method: "POST",
+      headers: {
+        Authorization: "Bearer " + token,
+        "Content-Type": 'application/json'
+      },
+      body: JSON.stringify({
+        favorite_name: favoriteFormData.get("favoriteName"),
+        device_name_tag: $("[name=subRadio]:checked").val(),
+        Type: pageAct.dateType,
+        Points: pageAct.devicePoiName,
+        Device_list,
+      }),
+    });
+
+    const res = await json.json();
+    if(res&&res.code=="0000"){
+      getFavorite()
+    }
+  }
+
+  async function editFavorite(favorite_guid) {
+    let token = cookies.get("JWT-Authorization");
+    const favoriteForm = $("#favoriteForm")[0];
+    const favoriteFormData = new FormData(favoriteForm);
+
+    const json = await fetch(baseApiUrl + "/api/History/EditHistoryFavorite", {
+      method: "POST",
+      headers: {
+        Authorization: "Bearer " + token,
+        "Content-Type": 'application/json'
+      },
+      body: JSON.stringify({
+        favorite_name: favoriteFormData.get("favoriteName"),
+        favorite_guid,
+      }),
+    });
+    const res = await json.json();
+    if(res&&res.code=="0000"){
+      getFavorite()
+    }
+  }
+
+  async function delFavorite(favorite_guid = "") {
+    let token = cookies.get("JWT-Authorization");
+    const json = await fetch(
+      baseApiUrl + "/api/History/DeleteHistoryFavorite",
+      {
+        method: "POST",
+        headers: {
+          Authorization: "Bearer " + token,
+          "Content-Type": 'application/json'
+        },
+        body: JSON.stringify({
+          favorite_guid,
+        }),
+      }
+    );
+    const res = await json.json();
+    if(res&&res.code=="0000"){
+      getFavorite()
+    }
+  }
+
+  async function confirmModal(){
+    console.log(editGuid)
+    if(editGuid){
+      editFavorite(editGuid)
+    }
+    else{
+      addFavorite()
+    }
+    closeModal()
+  }
+
+  document.querySelector(".confirm_modal_btn").addEventListener("click", confirmModal)
+
+  async function getFavorite() {
+    let token = cookies.get("JWT-Authorization");
+    const json = await fetch(baseApiUrl + "/api/History/GetHistoryFavorite", {
+      method: "POST",
+      headers: {
+        Authorization: "Bearer " + token,
+        "Content-Type": 'application/json'
+      },
+    });
+    const res = await json.json();
+
+    let str = "";
+    if (res && res.code == "0000") {
+      favorite_setting =  res.data;
+      res.data.forEach(
+        (d) => {
+          str += `
+        <div class="d-flex justify-content-between align-items-center px-2" >
+                <button class="dropdown-item p-2" data-function="show" data-favorite="${d.favorite_guid}" style="width: 150px">${d.favorite_name}</button>
+                <span class="d-flex">
+                  <button class="btn btn-link px-2" data-favorite="${d.favorite_guid}">
+                    <i class="fas fa-pencil-alt text-info mr-1" data-function="edit" data-favorite="${d.favorite_guid}"></i>
+                  </button>
+                <button  class="btn btn-link px-2" data-favorite="${d.favorite_guid}">
+                  <i class="fas fa-times text-danger"  data-function="del" data-favorite="${d.favorite_guid}"></i>
+                  </button>
+                </span>
+              </div>
+        `;
+        }
+      );
+      str+=`     <div class="dropdown-divider"></div>
+              <div
+                class="dropdown-item d-flex justify-content-between align-items-center px-2"
+              >
+                <button
+                  class="text-center btn btn-info btn-block"
+                  type="button"
+                  data-toggle="modal"
+                  data-target="#favoriteModal"
+                >
+                  新增
+                </button>
+              </div>`
+      
+     $(".favorite_dropdown").html(str);
+    }
+  }
+
+  function getDataFromFavorite(data){
+    const dev = data.device_list.map(d=>d.split("_")[1]);
+    const checkBui = device_list.map(({device_list, building_tag})=>({
+      building_tag,
+      builing_check: dev.filter(b=>b===building_tag).length === device_list.length
+    }))
+
+    checkBui.forEach(({building_tag, builing_check})=>{
+      if(builing_check){
+        $(`[name="bui_selected"][data-building="${building_tag}"]`)[0].checked = true
+      }else{
+        $(`[name="bui_selected"][data-building="${building_tag}"]`)[0].checked = false
+      }
+    })
+
+    $('[name="Device_list"]').each((i, e)=>{
+      if(data.device_list.includes(e.dataset.device)){
+      e.checked = true;
+      }else{
+      e.checked = false;
+      }
+    })
+    pageAct.devicePoiName = data.points;
+    pageAct.Type = data.type;
+    selectSub(_, data.device_name_tag)
+    const elems = $("[data-point]");
+    elems.each((i, e) => {
+      let pointName = e.dataset.point;
+      if (pageAct.devicePoiName.includes(pointName)) {
+        $(e).removeClass("btn-secondary").addClass("btn-info");
+      } else {
+        $(e).removeClass("btn-info").addClass("btn-secondary");
+      }
+    });
+  }
+
+  document.querySelector(".favorite_dropdown").addEventListener("click",(e)=>{
+    console.log(e.target, e.target.dataset)
+    if(e.target.dataset.function == 'edit'){
+      openModal(e.target.dataset.favorite)
+    }else if(e.target.dataset.function == 'del') {
+      delFavorite(e.target.dataset.favorite)
+    }else if(e.target.dataset.function == 'show'){
+      getDataFromFavorite(favorite_setting.find((d)=>d.favorite_guid===e.target.dataset.favorite))
+    }
+  })
+</script>