yvan-window/src/component/Container/Desktop/FixWindow/index.vue

<template>
  <!-- 右侧固定栏 -->
  <div
    class="v-widget-window syno-sds-widget v-window"
    style="
      position: absolute;
      width: 344px;
      height: 466px;
      min-height: 165px !important;
    "
    :style="{
      zIndex: fixWindowMessage.zIndex,
      display: fixWindowMessage.display,
      top: top ? top : '',
      bottom: bottom ? bottom : '',
      left: left ? left : '',
      right: right ? right : '',
    }"
    :class="fixWindowMessage.cls"
    @click.capture="clickFixWindow"
  >
    <div
      class="v-window-header-wrapper draggable"
      @mousedown="mousedownWidgetHeader"
    >
      <div class="v-widget-header">
        <div class="v-widget-header-left">
          <button
            type="button"
            class="v-btn v-btn-styleless v-btn-grey v-btn-dropdown"
          >
            <span>
              <div
                class="v-widget-header-tool-icon add"
                @click.capture="selectWidgetItem"
              ></div>
            </span>
          </button>
        </div>
        <div class="v-widget-header-right">
          <div
            class="v-widget-header-tool-icon minimize"
            @click.capture="minimizeFixWndow"
          ></div>
          <div
            class="v-widget-header-tool-icon pin"
            @click.capture="pinFixWndow"
          ></div>
          <button
            type="button"
            class="v-btn v-btn-styleless v-btn-grey v-btn-dropdown"
          >
            <span>
              <div
                class="v-widget-header-tool-icon dock"
                @click.capture="selectWidgetPosition"
              ></div>
            </span>
          </button>
        </div>
      </div>
    </div>

    <div tabindex="-1" class="v-window-body">
      <div tabindex="0" class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div
          tabindex="0"
          role="application"
          class="v-trap-focus-indicator"
        ></div>
        <div class="v-widget-items-wrapper">
          <div
            class="v-ps show ps--active-y"
            @scroll="scrollList"
            style="overflow: scroll"
          >
            <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
            <div class="v-widget-list">
              <RunningState></RunningState>
              <ResourceMonitor></ResourceMonitor>
              <Storage></Storage>
              <ConnectedUser></ConnectedUser>
              <ScheduledTask></ScheduledTask>
              <ChangeLog></ChangeLog>
              <NewLog></NewLog>
              <Copy></Copy>

              <!-- 当打开窗口个数为零时显示 -->
              <!-- <div class="v-widget-list-empty" :style="{display: selectedNum ? 'none':'flex'}"> -->
              <div class="v-widget-list-empty" v-show="!selectedNum">
                <div class="v-widget-list-empty-img"></div>
                <div class="v-widget-list-empty-content">
                  单击 + 按钮可添加小工具。
                </div>
              </div>
            </div>
            <div class="ps__rail-x" style="left: 0px; bottom: 0px">
              <div
                class="ps__thumb-x"
                tabindex="0"
                style="left: 0px; width: 0px"
              ></div>
            </div>
            <div class="ps__rail-y" style="top: 0px; right: 0px; height: 424px">
              <div
                class="ps__thumb-y"
                tabindex="0"
                style="top: 0px"
                :style="{ height: thumbYHeight, display: thumbYDisplay }"
                @mousedown="mousedownProgress"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div tabindex="0" class="v-trap-focus-indicator"></div>
    </div>
    <div class="v-window-resizable">
      <div class="handler v-window-resizable-n"></div>
      <div class="handler v-window-resizable-s"></div>
    </div>
    <!-- 弹出小窗口选择框 -->
    <PortalSelectDialogWindow></PortalSelectDialogWindow>
    <!-- 弹出位置选择框 -->
    <PortaSelectPosition></PortaSelectPosition>
  </div>
</template>

<script>
import RunningState from "./RunningState";
import ResourceMonitor from "./ResourceMonitor";
import Storage from "./Storage";
import ConnectedUser from "./ConnectedUser";
import ScheduledTask from "./ScheduledTask";
import ChangeLog from "./ChangeLog";
import NewLog from "./NewLog";
import Copy from "./Copy";

// 弹出小窗口选择框
import PortalSelectDialogWindow from "../PortalSelectDialogWindow";
// 弹出位置选择框
import PortaSelectPosition from "../PortaSelectPosition";
export default {
  props: ["defaultZIndex", "fixWindowData"],
  data() {
    return {
      fixWindowMessage: {
        zIndex: 9050,
        display: "block",
        cls: "deactive-win",
      },
      selectedNum: 2,
      display: "block",
      top: 0,
      bottom: '10px',
      right: 0,
      left: '220px',
      // widgetZindexIsMax: false,
      progrecssFirstClick: {
        lastY: 0,
        clickY: 0,
        clientY: 0,
        moveY: 0,
        thumbStyletop: 0,
      },
      widgetFirstClick: {
        layerX: 0,
        layerY: 0,
        screenX: 0,
        screenY: 0,
      },
      widgetListIsBottom: false,
      thumbYHeight: "424px",
      thumbYDisplay: "none",
      portalDetail: {
        display: "none",
        detailMessageList: [
          {
            id: 0,
            title: "系统状况",
            cls: "v-menu-item-select-selected selected active",
          },
          {
            id: 1,
            title: "资源监控",
            cls: "v-menu-item-select-selected selected",
          },
          {
            id: 2,
            title: "存储",
            cls: "",
          },
          {
            id: 3,
            title: "已连接用户",
            cls: "",
          },
          {
            id: 4,
            title: "计划的任务",
            cls: "",
          },
          {
            id: 5,
            title: "文件更改日志",
            cls: "",
          },
          {
            id: 6,
            title: "最新日志",
            cls: "",
          },
          {
            id: 7,
            title: "备份",
            cls: "",
          },
        ],
      },
      portalDetail1: {
        display: "none",
        detailMessageList: [
          {
            id: 0,
            title: "右上角",
            cls: "active",
            top: "47px",
            bottom: 0,
            left: 0,
            right: "10px",
          },
          {
            id: 1,
            title: "右下角",
            cls: "v-menu-item-select-selected selected",
            top: 0,
            bottom: "10px",
            left: 0,
            right: "10px",
          },
          {
            id: 2,
            title: "左上角",
            top: "47px",
            bottom: 0,
            right: 0,
            left: "10px",
            cls: "",
          },
          {
            id: 3,
            title: "左下角",
            top: 0,
            bottom: "10px",
            left: "10px",
            right: 0,
            cls: "",
          },
        ],
      },
    };
  },
  components: {
    RunningState,
    ResourceMonitor,
    Storage,
    ConnectedUser,
    ScheduledTask,
    ChangeLog,
    NewLog,
    Copy,

    // 弹出小窗口选择框
    PortalSelectDialogWindow,
    // 弹出位置选择框
    PortaSelectPosition,
  },
  mounted() {
    this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
    this.$bus.on("changeThumbHeight", this.changeThumbHeight);
    this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
    this.$bus.on("changeWidgetPosition", this.changeWidgetPosition);
    this.$bus.on('closeWidgetItem',this.closeWidgetItem)
    this.fixWindowMessage = this.fixWindowData;
    let el = document.querySelector(".v-widget-window .ps__thumb-y");
    let el1 = document.querySelector(
      ".v-widget-window .v-window-header-wrapper"
    );
    el.addEventListener("mouseup", this.mouseupProgress);
    el1.addEventListener("mouseup", this.mouseupWidgetHeader);
    let el2 = document.querySelector(".v-widget-window .v-widget-list");
    let el3 = document.querySelector(".v-widget-window .ps__rail-y");
    let el4 = document.querySelector(".v-widget-window");
    if (el2.offsetHeight > el3.offsetHeight) {
      this.top = 0;
      this.bottom = 0;
      this.thumbYDisplay = "block";
      this.thumbYHeight = "calc((100vh - 52px) / 2)";
    }
    setTimeout(()=>{
      this.left = 0 
      this.right = '10px'
    },400)
    window.addEventListener("resize", (e) => {
      if (el2.offsetHeight > el3.offsetHeight) {
        this.thumbYDisplay = "block";
        this.thumbYHeight = "calc((100vh - 52px) / 2)";
      } else {
        this.thumbYDisplay = "none";
      }
      let left = document.documentElement.clientWidth - el4.offsetWidth
      if(left >= 0 && left < el4.offsetWidth){
        this.left = left + 'px'
      }else if(left < 0) {
        this.left = 0
      }
    });
  },
  methods: {
    //点击固定窗口
    clickFixWindow() {
      if (this.fixWindowMessage.cls !== "active-win") {
        this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.$bus.emit("fixWindowZIndexMax", true);
      }
    },
    //点击进度条
    mousedownProgress(e) {
      let el = document.querySelector(".v-widget-window .ps__thumb-y");
      let el1 = document.querySelector(".v-widget-window");
      el.addEventListener("mousemove", this.moveProgress);
      if (el.style.top && el.style.top.includes("px")) {
        let top = parseInt(el.style.top.replace("px", ""));
        this.progrecssFirstClick.thumbStyletop = top;
      }
      this.progrecssFirstClick.lastY = el1.offsetTop + 31;
      this.progrecssFirstClick.clickY = e.offsetY;
    },
    //移动进度条
    moveProgress(e) {
      let el = document.querySelector(".v-widget-window .ps__thumb-y");
      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
      let el2 = document.querySelector(".v-widget-window .v-widget-list");
      let moveY;
      if (e.clientY >= this.progrecssFirstClick.clientY) {
        moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
        if (this.progrecssFirstClick.thumbStyletop) {
          moveY = this.progrecssFirstClick.thumbStyletop + 1;
          this.progrecssFirstClick.thumbStyletop = 0;
        }
      } else {
        moveY = this.moveY + (e.clientY - this.progrecssFirstClick.clientY);
        if (this.progrecssFirstClick.thumbStyletop) {
          moveY = this.progrecssFirstClick.thumbStyletop + 1;
          this.progrecssFirstClick.thumbStyletop = 0;
        }
      }
      if (moveY < 0) {
        moveY = 0;
      } else if (moveY > el1.offsetHeight - el.offsetHeight) {
        moveY = el1.offsetHeight - el.offsetHeight;
        this.widgetListIsBottom = true;
      }
      let moveY2 =
        -(
          (el2.offsetHeight - el1.offsetHeight) /
          (el1.offsetHeight - el.offsetHeight)
        ) * moveY;
      console.log(moveY)
      el.style.top = moveY + "px";
      el2.style.top = moveY2 + "px";
      el.addEventListener("mouseup", this.mouseupProgress);
      el1.addEventListener("mouseleave", this.mouseupProgress);
      this.progrecssFirstClick.clientY = e.clientY;
      this.moveY = moveY;
    },
    // 进度条鼠标抬起/离开
    mouseupProgress() {
      let el = document.querySelector(".v-widget-window .ps__thumb-y");
      el.removeEventListener("mousemove", this.moveProgress);
    },
    // 滚动窗口列表
    scrollList(e) {
      let el = document.querySelector(".v-widget-window .ps__thumb-y");
      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
      let el2 = document.querySelector(".v-widget-window .ps--active-y");
      let moveY =
        ((el1.offsetHeight - el.offsetHeight) /
          (e.target.scrollHeight - el2.offsetHeight)) *
        e.target.scrollTop;
      el.style.top = moveY + e.target.scrollTop + "px";
      console.log(moveY,el.style.top)
    },
    // 点击勾选小窗口的加号
    selectWidgetItem() {
      this.$bus.emit("showOrHiddenSelectWidgetItem", this.portalDetail);
    },
    // 点击小窗口选择框的每一项
    showOrHiddenWidgetItem(obj) {
      this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
      this.portalDetail.detailMessageList.forEach((item, index) => {
        if (item.cls && item.cls.includes("active") && index !== 0) {
          item.cls = item.cls.replace("active", "");
        }
      });
    },
    // 跟随可视小窗口的个数改变进度条高度
    changeThumbHeight(selectedNum) {
      let el1 = document.querySelector(".v-widget-window .v-widget-list");
      let el2 = document.querySelector(".v-widget-window .ps__rail-y");
      this.$nextTick(()=>{
        this.$nextTick(()=>{
        if (el1.offsetHeight > el2.offsetHeight) {
        if (selectedNum >= 6) {
          selectedNum = 6;
        }
        this.thumbYDisplay = "block";
        if(el2.offsetHeight > (7 - selectedNum) * 70){
          this.thumbYHeight = (7 - selectedNum) * 70 + "px";
        }else{
          this.thumbYHeight = "calc((100vh - 52px) / 2)";
        }
      } else {
        this.thumbYDisplay = "none";
      }
        this.selectedNum = selectedNum;
        })
      })
      
    },
    //点击固定窗口头部
    mousedownWidgetHeader(e) {
      let el = document.querySelector(
        ".v-widget-window .v-window-header-wrapper"
      );
      this.widgetFirstClick.layerX = e.layerX;
      this.widgetFirstClick.screenX = document.documentElement.clientWidth;
      this.widgetFirstClick.layerY = e.layerY;
      this.widgetFirstClick.screenY = document.documentElement.clientHeight;
      document.addEventListener("mousemove", this.mousemoveWidgetHeader);
      document.addEventListener("mouseup", this.mouseupWidgetHeader);
    },
    //移动固定窗口头部
    mousemoveWidgetHeader(e) {
      let el = document.querySelector(
        ".v-widget-window .v-window-header-wrapper"
      );
      let el1 = document.querySelector(".v-widget-window");
      let el2 = document.querySelector(".v-widget-window .v-widget-list");
      el2.style.display = "none";
      // X轴
      let moveX = e.pageX - this.widgetFirstClick.layerX;
      if (moveX > this.widgetFirstClick.screenX - el1.offsetWidth) {
        moveX = this.widgetFirstClick.screenX - el1.offsetWidth;
      }
      if (moveX < 0) {
        moveX = 0;
      }
      // Y轴
      let moveY = e.pageY - this.widgetFirstClick.layerY;
      if (moveY > this.widgetFirstClick.screenY - el1.offsetHeight) {
        moveY = this.widgetFirstClick.screenY - el1.offsetHeight;
      }
      if (moveY < 0) {
        moveY = 0;
      }

      this.left = moveX + "px";
      this.top = moveY + "px";
      if (!el1.className.includes(" move")) {
        el1.className = el1.className + " move";
      } 
      if (!el1.className.includes(" ghost")) {
        el1.className = el1.className + " ghost";
      }
    },
    //鼠标抬起固定窗口头部停止移动
    mouseupWidgetHeader() {
      let el = document.querySelector(
        ".v-widget-window .v-window-header-wrapper"
      );
      let el1 = document.querySelector(".v-widget-window .v-widget-list");
      let el2 = document.querySelector(".v-widget-window");
      document.removeEventListener("mousemove", this.mousemoveWidgetHeader);
      document.removeEventListener("mouseup", this.mouseupWidgetHeader);
      // document.addEventListener("mouseleave", this.mouseupWidgetHeader);
      el1.style.display = "flex";
      el2.className = el2.className.replace(" move", "");
      el2.className = el2.className.replace(" ghost", "");
    },
    //显示或隐藏固定窗口
    showOrHiddenWidget(e) {
      let el = document.querySelector(
        ".v-widget-window .v-widget-header-tool-icon.pin"
      );
      if (this.fixWindowMessage.display === "block") {
        if (e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className.replace(
            " pressed",
            ""
          );
        }
        if (
          this.fixWindowMessage.zIndex >= this.defaultZIndex &&
          this.fixWindowMessage.cls === "active-win"
        ) {
          this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
          this.$bus.emit("fixWindowZIndexMax", false);
        }
        this.fixWindowMessage.display = "none";
      } else {
        this.fixWindowMessage.display = "block";
        this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.$bus.emit("fixWindowZIndexMax", true);
        if (!e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className + " pressed";
        }
      }
    },
    //最小化固定窗口
    minimizeFixWndow() {
      this.fixWindowMessage.display = "none";
      this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      this.$bus.emit("fixWindowZIndexMax", false);
      let el = document.querySelector(".tray-item.widget-button");
      if (el.className && el.className.includes(" pressed")) {
        el.className = el.className.replace(" pressed", "");
      }
    },
    // 显示或隐藏位置选择框
    selectWidgetPosition() {
      this.$bus.emit("showOrHiddenSelectWidgetPosition", this.portalDetail1);
    },
    //改变固定弹出框的位置
    changeWidgetPosition(obj) {
      this.portalDetail1.detailMessageList = obj.detailMessageList;
      let detailMessageItem = this.portalDetail1.detailMessageList[obj.index];
      this.top = detailMessageItem.top;
      this.bottom = detailMessageItem.bottom;
      this.left = detailMessageItem.left;
      this.right = detailMessageItem.right;
      let el = document.querySelector(
        ".v-widget-window .v-widget-header-tool-icon.dock"
      );
      el.className = el.className + " active";
    },
    //点击小钉子
    pinFixWndow() {
      let el = document.querySelector(
        ".v-widget-window .v-widget-header-tool-icon.pin"
      );
      if (el.className.includes("active")) {
        el.className = el.className.replace(" active", "");
        this.$bus.emit("fixWindowZIndexMax", false);
        this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      } else {
        el.className = el.className + " active";
        this.fixWindowMessage.zIndex = 999999999;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.$bus.emit("fixWindowZIndexMax", true);
      }
    },
     // 关闭widgetItem
    closeWidgetItem(title){
      this.portalDetail.detailMessageList.forEach(item=>{
        if(item.title === title){
          item.cls = item.cls.replace('v-menu-item-select-selected selected','')
        }
      })
    },
    //节流函数
    throttle(fn, time, e) {
      var lastTime = 0;
      return function () {
        var nowTime = Date.now();
        if (nowTime - lastTime > time) {
          fn.call(this, e);
          lastTime = nowTime;
        }
      };
    },
  },
  beforeDestroy() {},
  name: "FixWindow",
};
</script>
<style scoped lang="css">
.v-widget-window .v-ps.show::-webkit-scrollbar {
  display: none;
}
.v-ps {
  height: 424px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #fff !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #fff !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #fff !important;
}
</style>