[Frontend] 修改側邊卡片欄異常消失後正常消失
This commit is contained in:
		
							parent
							
								
									bb3f1c0c8f
								
							
						
					
					
						commit
						bdb439a0ec
					
				@ -1999,7 +1999,7 @@
 | 
			
		||||
														res.data.work_type
 | 
			
		||||
												);
 | 
			
		||||
												$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").val(
 | 
			
		||||
														res.data.error_code
 | 
			
		||||
														res.data.error_code?.split("-")[0] || ""
 | 
			
		||||
												);
 | 
			
		||||
												$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val(
 | 
			
		||||
														res.data.fix_do
 | 
			
		||||
 | 
			
		||||
@ -2356,9 +2356,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
        let titleHtml = `異常通知`;
 | 
			
		||||
        let notices = [];
 | 
			
		||||
        // 遍歷每個告警資料
 | 
			
		||||
        if (datas.length === 0) {
 | 
			
		||||
          $("#noticeBlock").innerHTML = "";
 | 
			
		||||
        } else {
 | 
			
		||||
        $.each(datas ?? [], (idx, data) => {
 | 
			
		||||
          if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
 | 
			
		||||
            // 針對該告警對象的設備,從 allDevices 找出設備名稱
 | 
			
		||||
@ -2368,9 +2365,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
            )?.full_name;
 | 
			
		||||
 | 
			
		||||
            datas[idx].full_name =
 | 
			
		||||
                allDevices.filter(
 | 
			
		||||
                  (x) => x.device_number == data.devicePath
 | 
			
		||||
                )[0]?.full_name ||
 | 
			
		||||
              allDevices.filter((x) => x.device_number == data.devicePath)[0]
 | 
			
		||||
                ?.full_name ||
 | 
			
		||||
              (data.alarmClass === "Sys_Con_AlarmClass"
 | 
			
		||||
                ? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
 | 
			
		||||
                : "");
 | 
			
		||||
@ -2411,13 +2407,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
            notices.push(main);
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
          if (notices.length != 0) {
 | 
			
		||||
            $("#noticeBlock").YTNotice(
 | 
			
		||||
              "add_many",
 | 
			
		||||
              notices.oSort("id").reverse()
 | 
			
		||||
            );
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        $("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse());
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -11,7 +11,6 @@
 | 
			
		||||
 * </script>
 | 
			
		||||
 * */
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
class YTNotice {
 | 
			
		||||
  constructor(option = {}) {
 | 
			
		||||
    this.id = option.id ?? null;
 | 
			
		||||
@ -47,16 +46,17 @@ class YTNotice {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    $(this.container)[0]._ytNotice = this;
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setNoticeId = function () {
 | 
			
		||||
    if (this.id == null) {
 | 
			
		||||
      this.id = YT.Math.Random(10000000, 99999999);
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setContainer = function () {
 | 
			
		||||
        this.container = $(`<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false"> 
 | 
			
		||||
    this.container =
 | 
			
		||||
      $(`<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false"> 
 | 
			
		||||
                                          <div class="toast-header">
 | 
			
		||||
                                              
 | 
			
		||||
                                          </div>
 | 
			
		||||
@ -68,7 +68,9 @@ class YTNotice {
 | 
			
		||||
    this.setIcon(this.iconClass);
 | 
			
		||||
    this.eTitle = $(`<strong class="mr-auto notice-title"></strong>`);
 | 
			
		||||
    this.eTimeAgo = $(`<small class="text-muted notice-ago ml-4"></small>`);
 | 
			
		||||
        this.eCloseBtn = $(`<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button>`);
 | 
			
		||||
    this.eCloseBtn = $(
 | 
			
		||||
      `<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button>`
 | 
			
		||||
    );
 | 
			
		||||
    this.eContent = $(`<div class="notice-content"></div>`);
 | 
			
		||||
    if (this.type != null) {
 | 
			
		||||
      this.container.find(".toast-header").append(this.eIcon);
 | 
			
		||||
@ -80,7 +82,7 @@ class YTNotice {
 | 
			
		||||
      this.container.find(".toast-header").append(this.eCloseBtn);
 | 
			
		||||
    }
 | 
			
		||||
    this.container.find(".toast-body").append(this.eContent);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setIconClass = function () {
 | 
			
		||||
    if (this.type == "success") {
 | 
			
		||||
@ -90,25 +92,24 @@ class YTNotice {
 | 
			
		||||
    } else if (this.type == "danger") {
 | 
			
		||||
      this.iconClass = `fas fa-times`;
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setIcon = function (iconClass) {
 | 
			
		||||
    this.eIcon = $(`<i class="mr-2"></i>`);
 | 
			
		||||
    this.eIcon.addClass(iconClass);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setTitle = function (title = "") {
 | 
			
		||||
    this.eTitle.html(title);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setTimeAgo = function (timeAgo = "") {
 | 
			
		||||
    this.eTimeAgo.text(timeAgo);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setContent = function (content = "") {
 | 
			
		||||
    this.eContent.html(content);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
class YTNoticeBlock {
 | 
			
		||||
@ -134,7 +135,7 @@ class YTNoticeBlock {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    this.updEleObj();
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  drawInitScroll = function () {
 | 
			
		||||
    if (this.scrollY) {
 | 
			
		||||
@ -142,13 +143,13 @@ class YTNoticeBlock {
 | 
			
		||||
      $(this.eScroll).css("overflow-y", "auto");
 | 
			
		||||
      $(this.element).append(this.eScroll);
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  drawElement = function () {
 | 
			
		||||
    $(this.element).addClass("yt-notice-block");
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
    showOneNotice = function (obj = null,append = "prepend") {
 | 
			
		||||
  showOneNotice = function (obj = null, append = "prepend") {
 | 
			
		||||
    if (obj) {
 | 
			
		||||
      if (append == "prepend") {
 | 
			
		||||
        $(this.noticeContainer).prepend(obj.container);
 | 
			
		||||
@ -157,7 +158,7 @@ class YTNoticeBlock {
 | 
			
		||||
      }
 | 
			
		||||
      $(obj.container).toast("show");
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  hideOneNotice = function (obj = null) {
 | 
			
		||||
    if (obj) {
 | 
			
		||||
@ -168,27 +169,30 @@ class YTNoticeBlock {
 | 
			
		||||
        toast = obj.container;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
            $(toast).toast('dispose');
 | 
			
		||||
      $(toast).toast("dispose");
 | 
			
		||||
 | 
			
		||||
      setTimeout(() => {
 | 
			
		||||
        $(toast).remove();
 | 
			
		||||
 | 
			
		||||
                let tarNoticeId = $(toast)[0]._ytNotice.id
 | 
			
		||||
                let tarNoticeIdx = this.noticeArr.findIndex(x => x.obj.id == tarNoticeId);
 | 
			
		||||
        let tarNoticeId = $(toast)[0]._ytNotice.id;
 | 
			
		||||
        let tarNoticeIdx = this.noticeArr.findIndex(
 | 
			
		||||
          (x) => x.obj.id == tarNoticeId
 | 
			
		||||
        );
 | 
			
		||||
        if (tarNoticeIdx != -1) {
 | 
			
		||||
          this.noticeArr[tarNoticeIdx].canShow = false;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        this.showNotices();
 | 
			
		||||
            }, 100)
 | 
			
		||||
 | 
			
		||||
            
 | 
			
		||||
      }, 100);
 | 
			
		||||
    }
 | 
			
		||||
    this.updEleObj();
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  checkCanShow = function (notice = null) {
 | 
			
		||||
        let lastNoticeOffset = $(this.noticeContainer).find(".toast").last().offset();
 | 
			
		||||
    let lastNoticeOffset = $(this.noticeContainer)
 | 
			
		||||
      .find(".toast")
 | 
			
		||||
      .last()
 | 
			
		||||
      .offset();
 | 
			
		||||
    if ($(this.noticeContainer).find(".toast").last().length == 0) {
 | 
			
		||||
      return notice.canShow;
 | 
			
		||||
    }
 | 
			
		||||
@ -206,28 +210,36 @@ class YTNoticeBlock {
 | 
			
		||||
    } else {
 | 
			
		||||
      return true;
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  showNotices = function () {
 | 
			
		||||
    if (this.noticeArr.length === 0) {
 | 
			
		||||
      $(this.noticeContainer).empty();
 | 
			
		||||
    } else {
 | 
			
		||||
      $.each(this.noticeArr, (idx, notice) => {
 | 
			
		||||
        if (this.checkCanShow(notice)) {
 | 
			
		||||
                this.showOneNotice(notice.obj,"append");
 | 
			
		||||
          this.showOneNotice(notice.obj, "append");
 | 
			
		||||
        }
 | 
			
		||||
        })
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  pushNotice = function (option = {}) {
 | 
			
		||||
        if (this.noticeArr.findIndex(x => x.obj.id == option.id) == -1) {
 | 
			
		||||
    if (this.noticeArr.findIndex((x) => x.obj.id == option.id) == -1) {
 | 
			
		||||
      let notice = new YTNotice(option);
 | 
			
		||||
            this.noticeArr.push({ obj: notice, time: (new Date()).getTime(), canShow: true });
 | 
			
		||||
      this.noticeArr.push({
 | 
			
		||||
        obj: notice,
 | 
			
		||||
        time: new Date().getTime(),
 | 
			
		||||
        canShow: true,
 | 
			
		||||
      });
 | 
			
		||||
      this.setEvent(notice);
 | 
			
		||||
    }
 | 
			
		||||
    this.updEleObj();
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  updEleObj = function () {
 | 
			
		||||
    $(this.element)[0]._noticeBlock = this;
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  setEvent = function (notice) {
 | 
			
		||||
    let _this = this;
 | 
			
		||||
@ -235,16 +247,17 @@ class YTNoticeBlock {
 | 
			
		||||
      setTimeout(() => {
 | 
			
		||||
        $(notice.container).remove();
 | 
			
		||||
 | 
			
		||||
                let tarNoticeId = $(notice.container)[0]._ytNotice.id
 | 
			
		||||
                let tarNoticeIdx = _this.noticeArr.findIndex(x => x.obj.id == tarNoticeId);
 | 
			
		||||
        let tarNoticeId = $(notice.container)[0]._ytNotice.id;
 | 
			
		||||
        let tarNoticeIdx = _this.noticeArr.findIndex(
 | 
			
		||||
          (x) => x.obj.id == tarNoticeId
 | 
			
		||||
        );
 | 
			
		||||
        if (tarNoticeIdx != -1) {
 | 
			
		||||
          _this.noticeArr[tarNoticeIdx].canShow = false;
 | 
			
		||||
        }
 | 
			
		||||
        _this.showNotices();
 | 
			
		||||
            }, 100)
 | 
			
		||||
        })
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
      }, 100);
 | 
			
		||||
    });
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
$.fn.YTNotice = function (method = "init", ...args) {
 | 
			
		||||
@ -261,16 +274,13 @@ $.fn.YTNotice = function (method = "init", ...args) {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  if (method == "add") {
 | 
			
		||||
       
 | 
			
		||||
    noticeBlock.pushNotice(args[0] ?? {});
 | 
			
		||||
    noticeBlock.showNotices();
 | 
			
		||||
 | 
			
		||||
  } else if (method == "add_many") {
 | 
			
		||||
       
 | 
			
		||||
    noticeBlock.noticeArr = [];
 | 
			
		||||
    args[0].forEach((arg, idx) => {
 | 
			
		||||
      noticeBlock.pushNotice(arg);
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
    });
 | 
			
		||||
    noticeBlock.showNotices();
 | 
			
		||||
  } else if (method == "hide") {
 | 
			
		||||
    if (args.length == 0) {
 | 
			
		||||
@ -284,5 +294,4 @@ $.fn.YTNotice = function (method = "init", ...args) {
 | 
			
		||||
    option.element = _this;
 | 
			
		||||
    let noticeBlock = new YTNoticeBlock(option);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user