yvan-window/src/component/Desktop/Shortcut/ResizablePinned/index.vue

<template>
  <!-- 菜单弹窗 -->
  <div>
    <div
      class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
      style="
        position: absolute;
        visibility: visible;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
      "
      :style="{
        width: detailMessage.width,
        height: detailMessage.height,
        minHeight: detailMessage.minHeight,
        display: detailMessage.display,
        zIndex: detailMessage.zIndex,
      }"
      :class="detailMessage.cls"
      v-for="(
        detailMessage, detailMessageIndex
      ) in resizablePinnedDetail.detailMessageList"
      :key="detailMessage.id"
      @click="
        changeDialogWindow(detailMessage.titleImgUrl, detailMessageIndex)
      "
    >
      <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
      <div class="x-window-tl" @click="moveWindowPosition">
        <div class="x-window-tr">
          <div class="x-window-tc">
            <div
              class="x-window-header x-panel-icon x-window-draggable"
              :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
            >
              <div class="x-window-toolCt" role="listbox">
                <div
                  class="x-tool x-tool-close"
                  role="option"
                  @click.stop="closeWindow(detailMessageIndex)"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-restore"
                  role="option"
                  :style="{ display: `${detailMessage.iconRestore}` }"
                  @click.stop="restoreMizeWindow(detailMessageIndex)"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-maximize"
                  role="option"
                  @click.stop="maxMizeWindow(detailMessageIndex)"
                  :style="{ display: `${detailMessage.iconMaximize}` }"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-minimize"
                  role="option"
                  @click.stop="minMizeWindow(detailMessageIndex)"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-help"
                  role="option"
                  @click.stop="openDSMWindow()"
                >
                  &nbsp;
                </div>
              </div>
              <span class="x-window-header-text">{{
                detailMessage.title
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="x-window-bwrap">
        <div class="x-window-ml">
          <div class="x-window-mr">
            <div class="x-window-mc">
              <div class="x-window-tbar" style="width: 100%">
                <div
                  class="
                    x-toolbar x-small-editor
                    synopkg-toolbar
                    syno-ux-toolbar
                    x-toolbar-layout-ct
                  "
                  style="height: 40px; width: 1230px"
                >
                  <table cellspacing="0" class="x-toolbar-ct">
                    <tbody>
                      <tr>
                        <td class="x-toolbar-left" align="left">
                          <!-- 
                                                    <table cellspacing="0">
                                                        <tbody>
                                                            <tr class="x-toolbar-left-row">
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn synopkg-toolbar-back-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
                                                                        style="margin-left: 0px; height: 28px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-back-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn synopkg-toolbar-next-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
                                                                        style="margin-left: 0px; height: 28px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-next-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-icon"
                                                                        style="margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-refresh-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell syno-ux-textfilter">
                                                                    <div class="x-form-field-wrap x-form-field-trigger-wrap"
                                                                        style="width: 100%;">
                                                                        <input type="text" size="16"
                                                                            autocomplete="off"
                                                                            class="x-form-text x-form-field syno-ux-textfilter-text x-form-empty-field"
                                                                            placeholder="搜索"
                                                                            style="width: calc((100% - 30px) - 3px);"><button
                                                                            type="button"
                                                                            class="x-form-trigger syno-ux-textfilter-trigger"
                                                                            style="visibility: hidden;"></button>
                                                                    </div>
                                                                    <div role="presentation"
                                                                        class="x-form-hidden-error-msg"></div>
                                                                </td>
                                                                <td class="x-toolbar-cell">
                                                                    <div class="x-form-display-field"
                                                                        style="width: 16px;">
                                                                    </div>
                                                                    <div role="presentation"
                                                                        class="x-form-hidden-error-msg"></div>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
                                                                        style="width: auto; margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text">手动安装</button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
                                                                        style="width: auto; margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button" 
                                                                                class=" x-btn-text">设置</button></em></span>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    -->
                        </td>
                        <td class="x-toolbar-right" align="right">
                          <!-- 
                                                    <table cellspacing="0" class="x-toolbar-right-ct">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <table cellspacing="0">
                                                                        <tbody>
                                                                            <tr class="x-toolbar-right-row">
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                                <td>
                                                                    <table cellspacing="0">
                                                                        <tbody>
                                                                            <tr class="x-toolbar-extras-row">
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    -->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="x-window-body x-border-layout-ct"
                style="width: 100%; height: 484px"
              ></div>
            </div>
          </div>
        </div>
        <div class="x-window-bl x-panel-nofooter">
          <div class="x-window-br">
            <div class="x-window-bc"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["defaultZIndex"],
  data() {
    return {
      resizablePinnedDetail: {
        detailMessageList: [
          {
            id: "0",
            width: "1254px",
            height: "calc(100vh - 80px)",
            minHeight: "560px",
            title: "套件中心",
            spacialCls: "tjCenter",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/tjCenter.png",
            display: "none",
            zIndex: 9053,
            iconRestore: "none",
            iconMaximize: "block",
          },
          {
            id: "1",
            width: "1150px",
            height: "calc(100vh - 120px)",
            minHeight: "520px",
            title: "控制中心",
            spacialCls: "controlCenter",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/controlCenter.png",
            display: "none",
            zIndex: 9053,
            iconRestore: "none",
            iconMaximize: "block",
          },
          {
            id: "2",
            width: "1010px",
            height: "calc(100vh - 200px)",
            minHeight: "440px",
            title: "File Station",
            spacialCls: "file",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/file.png",
            display: "none",
            zIndex: 9053,
            iconRestore: "none",
            iconMaximize: "block",
          },
          {
            id: "3",
            width: "1010px",
            height: "calc(100vh - 220px)",
            minHeight: "420px",
            title: "DSM 说明",
            spacialCls: "question",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/question.png",
            display: "none",
            zIndex: 9053,
            iconRestore: "none",
            iconMaximize: "block",
          },
        ],
      },
      lastCheckIndex: -1,
      openWindowNum: 0,
      detailMessageWidthList: [
        {
          width: "1254px",
        },
        {
          width: "1150px",
        },
        {
          width: "1010px",
        },
        {
          width: "1010px",
        },
      ],
      fixWindowZIndedxIsMax: false,
    };
  },
  mounted() {
    this.$bus.on("clickShortcutItem", this.clickShortcutItem);
    this.$bus.on("clickMenuItem", this.clickMenuItem);
    // this.$bus.on("fixWindowZIndexMax", this.fixWindowZIndexMax);
    // this.$bus.on(
    //   "changeMinDefaultZindexWindowCls",
    //   this.changeMinDefaultZindexWindowCls
    // );
  },
  methods: {
    // 点击大菜单图标
    clickShortcutItem(obj) {
      let { detailMessageIndex } = obj;
      this.openDialogWindow(detailMessageIndex);
    },
    // 点击小菜单图标
    clickMenuItem(imgUrl) {
      let detailMessageIndex =
        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
          return item.titleImgUrl == imgUrl;
        });
      this.openDialogWindow(detailMessageIndex);
    },
    // 打开弹出窗口
    openDialogWindow(detailMessageIndex) {
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
        "block";
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
        "active-win";
      this.$bus.emit("changeFixWindowZIndex");

      if (
        this.lastCheckIndex == detailMessageIndex &&
        this.zIndex >= this.defaultZIndex
      ) {
        return;
      }
      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
        item.cls = "deactive-win";
      });
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
        "active-win";
      let defaultZIndex = this.defaultZIndex + 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      // this.defaultZIndex = this.defaultZIndex + 10
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
        defaultZIndex;
      this.lastCheckIndex = detailMessageIndex;
      this.$bus.emit(
          "changeDialogWindow",
          this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
        );
      // this.changeZIndexMaxMenuItemCls()
      // this.$bus.emit('dialogWindowZIndexIsMax',true)
      // this.$bus.emit("fixWindowZIndexMax", false);
    },
    // 切换弹出窗口
    changeDialogWindow(imgUrl, menuIndex) {
      // let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
      //     return item.display == 'block'
      // })
      // detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
      // if(this.resizablePinnedDetail.detailMessageList[menuIndex].title == detailMessageList[detailMessageList.length-1].title){
      //     return
      // }
      this.$bus.emit("changeDialogWindow", imgUrl);
      this.openDialogWindow(menuIndex);

      // this.$bus.emit("fixWindowZIndexMax", false);
      // this.changeZIndexMaxMenuItemCls()
    },
    // 打开DSM 说明
    openDSMWindow() {
      let detailMessageIndex =
        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
          return item.title === "DSM 说明";
        });
      this.openDialogWindow(detailMessageIndex);
      let imgUrl =
        this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
          .titleImgUrl;
      let spacialCls =
        this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
          .spacialCls;
      let obj = { imgUrl, spacialCls };
      // this.$bus.emit("changeDialogWindow", obj);
    },
    // 最小化弹出框口
    minMizeWindow(detailMessageIndex) {
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
        "none";
      this.countOpenWindowNum();
      let detailMessageList =
        this.resizablePinnedDetail.detailMessageList.filter((item) => {
          return item.display == "block";
        });
      if (detailMessageList.length) {
        detailMessageList = JSON.parse(
          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
        );
        this.resizablePinnedDetail.detailMessageList[
          detailMessageIndex
        ].zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
          return item.title === detailMessageList[detailMessageList.length - 1].title
        })
        if(index != -1){
          this.openDialogWindow(index);
        }
      }
    },
    //最大化弹出窗口
    maxMizeWindow(detailMessageIndex) {
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
        "100%";
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconRestore = "block";
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconMaximize = "none";
      this.openDialogWindow(detailMessageIndex);

      //  let detailMessageList =
      //   this.resizablePinnedDetail.detailMessageList.filter((item) => {
      //     return item.display == "block";
      //   });
      // if (detailMessageList.length) {
      //   detailMessageList = JSON.parse(
      //     JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
      //   );
      // // let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
      // //   return item.title === detailMessageList[detailMessageList.length - 1].title
      // // })
      // // if(index != -1){
      // //   }
      // }
    },
    //恢复弹出窗口宽度
    restoreMizeWindow(detailMessageIndex) {
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
        this.detailMessageWidthList[detailMessageIndex].width;
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconRestore = "none";
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconMaximize = "block"; 
      this.countOpenWindowNum();
      this.openDialogWindow(detailMessageIndex);
    },
    //关闭弹出窗口
    closeWindow(detailMessageIndex) {
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
        "none";
      let imgUrl =
        this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
          .titleImgUrl;
      this.$bus.emit("closeDialogWindow", imgUrl);
      let detailMessageList =
        this.resizablePinnedDetail.detailMessageList.filter((item) => {
          return item.display === "block";
        });
      if (detailMessageList.length) {
        detailMessageList = JSON.parse(
          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
        );
        this.resizablePinnedDetail.detailMessageList[
          detailMessageIndex
        ].zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        // this.$bus.emit(
        //   "changeDialogWindow",
        //   detailMessageList[detailMessageList.length - 1].titleImgUrl
        // );
         let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
          return item.title === detailMessageList[detailMessageList.length - 1].title
        })
        if(index != -1){
          this.openDialogWindow(index);
        }
      }
      this.countOpenWindowNum();
    },
    //统计打开的弹出窗口
    countOpenWindowNum() {
      this.openWindowNum = 0;
      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
        if (item.display === "block") {
          this.openWindowNum++;
        }
      });
      if (this.openWindowNum == 0) {
        // this.$bus.emit('dialogWindowZIndexIsMax',false)
        // this.$bus.emit("fixWindowZIndexMax", true);
        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
          item.zIndex = 9053;
        });

        this.$bus.emit("changeDefaultZIndex", 9053);
        // this.defaultZIndex = 9053
      }
    },
    // 按z-index 给menuItem排序
    arraySort(array, key) {
      return array.sort(function (a, b) {
        var x = a[key]; //如果要从大到小,把x,y互换就好
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
      });
    },
    // 移动弹出框窗口位置
    moveWindowPosition(e) {
      // var x = e.pageX;
      // var y = e.pageY;
    },
    //如果固定窗口的zindex是最大的
    // fixWindowZIndexMax(bol) {
    //   this.fixWindowZIndedxIsMax = bol;
    // },
    //修改zIndex小于defaultZindex(公共z-index)窗口的类名使其变淡
    changeMinDefaultZindexWindowCls() {
      // this.changeZIndexMaxMenuItemCls()
      //   this.resizablePinnedDetail.detailMessageList.forEach((item) => {
      //     if (item.zIndex < this.defaultZIndex) {
      //       item.cls = "deactive-win";
      //     }
      //   });
      //   if (!this.fixWindowZIndedxIsMax) {
      //     // 找有menuItem 等于 defaultZIndex的下标
      //     let maxZIndexMenuItemIndex =
      //       this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
      //         return item.zIndex >= this.defaultZIndex;
      //       });
      //     if (maxZIndexMenuItemIndex != -1) {
      //       let detailMessageList =
      //         this.resizablePinnedDetail.detailMessageList.filter((item) => {
      //           return item.display == "block";
      //         });
      //       if (detailMessageList.length) {
      //         detailMessageList = JSON.parse(
      //           JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
      //         );
      //         this.changeFoundMenuItemCls(
      //           detailMessageList[detailMessageList.length - 1].title
      //         );
      //       }
      //     }
      //   }
    },
    // 修改对应标题的menuItem的类名
    changeFoundMenuItemCls(title) {
      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
        if (item.title === title) {
          item.cls = "active-win";
        } else {
          item.cls = "deactive-win";
        }
      });
    },
    //修改zIndex最大及其他的menuItem的类名
    changeZIndexMenuItemCls() {
      // if (this.dialogZIndexMaxIndex == -1) {
      //   this.resizablePinnedDetail.detailMessageList.forEach((item) => {
      //     item.cls = "deactive-win";
      //   });
      // } else {
      //   let maxZIndexMenuItemIndex =
      //     this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
      //       return item.zIndex >= this.defaultZIndex;
      //     });
      //   if (maxZIndexMenuItemIndex != -1) {
      //     let detailMessageList =
      //       this.resizablePinnedDetail.detailMessageList.filter((item) => {
      //         return item.display == "block";
      //       });
      //     if (detailMessageList.length) {
      //       detailMessageList = JSON.parse(
      //         JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
      //       );
      //       this.changeFoundMenuItemCls(
      //         detailMessageList[detailMessageList.length - 1].title
      //       );
      //     }
      //   }
      // }
    },
    //
  },

  watch: {
    defaultZIndex() {
      this.dialogZIndexMaxIndex =
        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
          return item.zIndex >= this.defaultZIndex && item.display === "block";
        });
      if (
        this.dialogZIndexMaxIndex != -1 &&
        this.dialogZIndexMaxIndex != undefined
      ) {
        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
          if (item.cls === "active-win") {
            item.cls = "deactive-win";
          }
        });
        this.resizablePinnedDetail.detailMessageList[
          this.dialogZIndexMaxIndex
        ].cls = "active-win";
      } else {
        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
          if (item.cls === "active-win") {
            item.cls = "deactive-win";
          }
        });
      }
    },
  },
  beforeDestroy() {
    this.$bus.off("clickShortcutItem", this.clickShortcutItem);
    this.$bus.off("clickMenuItem", this.clickMenuItem);
  },
  components: {},
  name: "ResizablePinned",
};
</script>
<style scope>
</style>