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

<template>
  <!-- 右侧固定栏 -->
  <div
    class="v-widget-window syno-sds-widget v-window"
    style="
      position: absolute;
      width: 344px;
      height: 466px;
      min-height: 164px !important;
    "
    :style="{
      zIndex: zIndex,
      display: display,
      top: top ? top : '',
      bottom: bottom ? bottom : '',
      left: left ? left : '',
      right: right ? right : '',
    }"
    :class="cls"
    @click="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.stop="selectWidgetItem"
              ></div>
            </span>
          </button>
        </div>
        <div class="v-widget-header-right">
          <div
            class="v-widget-header-tool-icon minimize"
            @click.stop="minimizeFixWndow"
          ></div>
          <div
            class="v-widget-header-tool-icon pin"
            @click.stop="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.stop="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"],
  data() {
    return {
      zIndex: 9040,
      cls: "",
      selectedNum: 2,
      display: "block",
      top: 0,
      bottom: "10px",
      right: "10px",
      left: 0,
      progrecssFirstClick: {
        lastY: 0,
        clickY: 0,
        clientY: 0,
        moveY: 0,
        thumbStyletop: 0,
      },
      widgetFirstClick: {
        lastX: 0,
        lastY: 0,
        clickX: 0,
        clickY: 0,
        clientX: 0,
        clientY: 0,
        offsetX: 0,
        offsetY: 0,
        screenX: 0,
        screenY: 0,
        moveX: 0,
        moveY: 0,
      },
      widgetListIsBottom: false,
      thumbYHeight: '104px',
      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("changeFixWindowZIndex", this.changeFixWindowZIndex);
    this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
    this.$bus.on("changeThumbHeight", this.changeThumbHeight);
    this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
    this.$bus.on(
      "changeOrHiddenWidgetPosition",
      this.changeOrHiddenWidgetPosition
    );
    this.$bus.on("dialogWindowZIndexIsMax", this.dialogWindowZIndexIsMax);
    let el = document.querySelector(".ps__thumb-y");
    let el1 = document.querySelector(".v-window-header-wrapper");
    el.addEventListener("mouseup", this.mouseupProgress);
    el1.addEventListener("mouseup", this.mouseupWidgetHeader);
    let el2 = document.querySelector(".v-widget-list");
    let el3 = document.querySelector(".ps__rail-y");
    if(el2.offsetHeight > el3.offsetHeight){
        this.thumbYDisplay = 'block'
        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
    }
    window.onresize = ()=>{
      if(el2.offsetHeight > el3.offsetHeight){
        this.thumbYDisplay = 'block'
        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
      }
    }
  },
  methods: {
    //点击固定窗口
    clickFixWindow() {
      if (this.zIndex < this.defaultZIndex) {
        this.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.$bus.emit("changeMinDefaultZindexWindowCls");
        this.$bus.emit("fixWindowZIndexMax", true);
      }
      this.dialogWindowZIndexIsMax(false);
    },
    // 修改changeFixWindow
    changeFixWindowZIndex() {
      if (this.zIndex != 999999999) {
        this.zIndex = 9040;
      }
      if (this.cls != "") this.cls = "";
      this.dialogWindowZIndexIsMax(true);
    },
    //点击进度条
    mousedownProgress(e) {
      let el = document.querySelector(".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;
      console.log(el.style.top,e.offsetY,this.progrecssFirstClick.lastY,e.clientY)
    },
    //移动进度条
    moveProgress(e) {
      let el = document.querySelector(".ps__thumb-y");
      let el1 = document.querySelector(".ps__rail-y");
      let el2 = document.querySelector(".v-widget-list");
      let moveY;
      console.log(this.progrecssFirstClick.clientY)
      if (e.clientY >= this.progrecssFirstClick.clientY) {
        moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
        if(this.progrecssFirstClick.thumbStyletop){
          console.log(moveY)
          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;
      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;
      console.log('moveY',moveY)
    },
    // 进度条鼠标抬起/离开
    mouseupProgress() {
      let el = document.querySelector(".ps__thumb-y");
      let el1 = document.querySelector(".ps__rail-y");
      let el2 = document.querySelector(".v-widget-list");
      el.removeEventListener("mousemove", this.moveProgress);
      if(el2.offsetHeight > el1.offsetHeight){
        console.log('')
        this.thumbYDisplay = 'block'
        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
      }
      // this.clearProgressMArk();
    },
    // 滚动窗口列表
    scrollList(e) {
      console.log(e, e.target.scrollTop);
      let el = document.querySelector(".ps__thumb-y");
      let el1 = document.querySelector(".ps__rail-y");
      let el2 = document.querySelector(".ps--active-y");
      console.log(e.target.scrollTop)
      // if(! this.widgetListIsBottom){
        let moveY =
          ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop

        console.log( ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop
        );
        el.style.top = moveY + e.target.scrollTop + 'px'
      // }
    },
    // 点击勾选小窗口的加号
    selectWidgetItem() {
      this.$bus.emit("showOrHiddenSelectWidgetItem", this.portalDetail);
      window.onclick = (e) => {
        e.stopPropagation();
        this.$bus.emit("showOrHiddenSelectWidgetItem", "none");
      };
    },
    // 点击小窗口选择框的每一项
    showOrHiddenWidgetItem(obj) {
      let widgetItemArray = document.querySelectorAll(".v-widget-item");
      Array.from(widgetItemArray)[obj.index].className = obj.cls;
      this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
      this.portalDetail.detailMessageList.forEach((item) => {
        if (item.cls && item.cls.includes(" active")) {
          item.cls = item.cls.replace(" active");
        } else if (item.cls && item.cls.includes("active")) {
          item.cls = item.cls.replace("active");
        }
      });
      let cls = this.portalDetail.detailMessageList[0].cls;
      if (cls && !cls.includes("active")) {
        this.portalDetail.detailMessageList[0].cls = cls + " active";
      }
    },
    // 跟随可视小窗口的个数改变进度条高度
    changeThumbHeight(selectedNum) {
      if (selectedNum > 2) {
        if (selectedNum >= 6) {
          selectedNum = 6;
        }
        this.thumbYDisplay = "block";
        this.thumbYHeight = (7 - selectedNum) * 70 + "px";
      } else {
        console.log('none')
        this.thumbYDisplay = "none";
      }
      if(window.screenY <= 250){
        this.bottom = '0'
        this.thumbYDisplay = 'block'
        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
      }
      this.selectedNum = selectedNum;
    },
    // 将记住的进度条坐标重置
    // clearProgressMArk() {
    //   this.progrecssFirstClick.clientY = 0
    //   this.moveY = 0
    //     this.progrecssFirstClick = {
    //       lastY: 0,
    //       clickY: 0,
    //     };
    // },
    //点击固定窗口头部
    mousedownWidgetHeader(e) {
      let el = document.querySelector(".v-window-header-wrapper");
      let el1 = document.querySelector(".v-widget-window");
      this.widgetFirstClick.clientX = e.clientX;
      this.widgetFirstClick.offsetX = e.offsetX;
      this.widgetFirstClick.screenX = document.documentElement.clientWidth;
      this.widgetFirstClick.clientY = e.clientY;
      this.widgetFirstClick.offsetY = e.offsetY;
      this.widgetFirstClick.screenY = document.documentElement.clientHeight;
      el.addEventListener("mousemove", this.mousemoveWidgetHeader);
      console.dir(el1);
    },
    //移动固定窗口头部
    mousemoveWidgetHeader(e) {
      let el = document.querySelector(".v-window-header-wrapper");
      let el1 = document.querySelector(".v-widget-window");
      let el2 = document.querySelector(".v-widget-list");
      el2.style.display = "none";
      // X轴
      let moveX = 0;
      moveX = e.clientX - this.widgetFirstClick.offsetX;
      if (moveX < 0) {
        moveX = 0;
      }
      if (moveX > this.widgetFirstClick.screenX - el1.offsetWidth) {
        moveX = this.widgetFirstClick.screenX - el1.offsetWidth;
      }

      // Y轴
      let moveY = 0;
      moveY = e.clientY - this.widgetFirstClick.offsetY;
      if (moveY < 0) {
        moveY = 0;
      }
      if (moveY > this.widgetFirstClick.screenY - el1.offsetHeight) {
        moveY = this.widgetFirstClick.screenY - el1.offsetHeight;
      }
      el1.style.left = moveX + "px";
      el1.style.top = moveY + "px";
      if(!el1.className.includes(' active')){
        el1.className = el1.className + " active";
      }
      el.addEventListener("mouseleave", this.mouseupWidgetHeader);
    },
    //鼠标抬起固定窗口头部
    mouseupWidgetHeader() {
      let el = document.querySelector(".v-window-header-wrapper");
      let el1 = document.querySelector(".v-widget-list");
      let el2 = document.querySelector(".v-widget-window");
      el.removeEventListener("mousemove", this.mousemoveWidgetHeader);
      el1.style.display = "flex";
      el2.className = "v-widget-window syno-sds-widget v-window";
    },
    //显示或隐藏固定窗口
    showOrHiddenWidget() {
      let el = document.querySelector(".v-widget-header-tool-icon.pin");
      if (this.display === "block") {
        this.display = "none";
        this.zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        this.$bus.emit("fixWindowZIndexMax", false);
      } else {
        this.display = "block";
        this.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.$bus.emit("fixWindowZIndexMax", true);
      }
    },
    //最小化固定窗口
    minimizeFixWndow() {
      this.display = "none";
      console.log("this.defaultZIndex", this.defaultZIndex);
      this.zIndex = this.defaultZIndex - 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      this.$bus.emit("fixWindowZIndexMax", false);
    },
    // 显示或隐藏位置选择框
    selectWidgetPosition() {
      this.$bus.emit("showOrHiddenSelectWidgetPosition", this.portalDetail1);
      window.onclick = (e) => {
        e.stopPropagation();
        this.$bus.emit("showOrHiddenSelectWidgetPosition", "none");
      };
    },
    //改变固定弹出框的位置
    changeOrHiddenWidgetPosition(obj) {
      this.portalDetail1.detailMessageList = obj.detailMessageList;
      this.portalDetail1.detailMessageList.forEach((item) => {
        if (item.cls && item.cls.includes("active")) {
          item.cls.replace("active", "");
        }
      });
      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-header-tool-icon.dock");
      el.className = el.className + " active";
      console.log(el.className);
      let cls = this.portalDetail1.detailMessageList[0].cls;
      if (cls && !cls.includes("active")) {
        this.portalDetail1.detailMessageList[0].cls = cls + " active";
      }
      // sds-desktop .v-widget-window .v-widget-items-wrapper{
      //   height: calc(100vh - 42px) !important;
      // }
      // #sds-desktop .v-widget-window{
      //     height: calc(100vh - 10px) !important;
      // }
      console.log(obj.index);
      if (obj.index == 0) {
        let el1 = document.querySelector(".v-widget-window");
        let el2 = document.querySelector(".v-widget-items-wrapper");
        el1.style.height = "calc(100vh - 47px) !important";
        el2.style.height = "calc(100vh - 120px) !important";
      }
    },
    //点击小钉子
    pinFixWndow() {
      let el = document.querySelector(".v-widget-header-tool-icon.pin");
      if (el.className.includes("active")) {
        el.className = el.className.replace(" active", "");
        this.$bus.emit("fixWindowZIndexMax", false);
        this.zIndex = this.defaultZIndex;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        this.$bus.emit("fixWindowZIndexMax", true);
      } else {
        el.className = el.className + " active";
        this.zIndex = 999999999;
        // this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        this.$bus.emit("fixWindowZIndexMax", true);
      }
    },
    //判断弹出窗ZIndex是不是比较大
    dialogWindowZIndexIsMax(bol) {
      console.log(bol);
      if (bol) {
        this.cls = "deactive-win";
      } else {
        this.cls = "active-win";
      }
    },

    //节流函数
    throttle(fn, time, e) {
      var lastTime = 0;
      console.log("throttle");
      return function () {
        var nowTime = Date.now();
        if (nowTime - lastTime > time) {
          fn.call(this, e);
          lastTime = nowTime;
        }
      };
    },
  },
  beforeDestroy() {
    this.$bus.off("changeFixWindowZIndex", this.changeFixWindowZIndex);
  },
  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>