dy-admin-manager/src/layout/components/instructions.vue

<template>
  <div class="instructionWrap">
    <!-- :w="w" -->
    <vue-drag-resize
      v-if="isShow"
      :snapToGrid="false"
      :isActive="true"
      :parentH="docY"
      :h="h"
      :z="1999"
      :w="w"
      :y="y"
      :x="x"
      id="instructions"
      @resizestop="resizestop"
      @resizing="onResizing"
      @dragging="onResizing"
      @dragstop="resizestop"
      :preventActiveBehavior="true"
    >
      <div class="wall"  ></div>
      <div class="showBtnList">
        <el-popover placement="bottom" trigger="hover">
          <div class="popover-container" style="text-align: center">
            新窗口打开
          </div>
          <i
            slot="reference"
            class="icon iconfont icon-jia add"
            @click="gotoIns"
            @mouseenter="enter($event)"
            @mouseleave="leave($event)"
          ></i>
        </el-popover>
        <el-popover placement="bottom" trigger="hover" v-if="!fullscreen">
          <div class="popover-container" style="text-align: center">最大化</div>
          <i
            slot="reference"
            class="icon iconfont icon-fullscreen fullscreen"
            @click="fullPageBook"
          ></i>
        </el-popover>
        <el-popover placement="bottom" trigger="hover" v-else>
          <div class="popover-container" style="text-align: center">还原</div>
          <i
            slot="reference"
            class="icon iconfont icon-huanyuan huanyuan"
            @click="resetBook"
          ></i>
        </el-popover>
        <el-popover placement="bottom" trigger="hover">
          <div class="popover-container" style="text-align: center">关闭</div>
          <i
            slot="reference"
            class="icon el-icon-close"
            @click="showInstructions"
          ></i>
        </el-popover>

        <!--  -->
        <!-- <i class="iconfont icon-tubiao-huanyuan"></i> -->
      </div>
      <div class="iframeDiv" v-show="isResizing"></div>
      <iframe
        id="iframeId"
        ref="iframe"
        :src="url"
        frameborder="0"
        class="pc iframe"
        :width="iframeWidth"
        :height="iframeHeight"
        seamless
        allowfullscreen="true"
      >
      </iframe>
    </vue-drag-resize>
    <videoView
      v-if="showVideo"
      :docY="docY"
      @isResizing="
        (val) => {
          this.isResizing = val;
        }
      "
      @closeVideo="showVideo = false"
      :videoSrc="src"
    ></videoView>
  </div>
</template>
<script>
import screenfull from "screenfull";
import VueDragResize from "vue-drag-resize";
import { instructionList, keyOfValue } from "@/constant/instructionList";
import { operationLog } from "./api";
import videoView from "./insVideo";
const defaultSettings = require("@/settings.js");

export default {
  components: {
    "vue-drag-resize": VueDragResize,
    videoView,
  },
  data() {
    return {
      url: "/html/index.html" + "#g=1&p=新建乐团",
      isShow: false,
      w: "",
      y: 135,
      h: "",
      x: "",
      docY: "",
      isResizing: false,
      showVideo: false,
      src: "",
      isShowBtn: false,
    };
  },
  mounted() {
    this.initSize();
    this.setBtnStatus(this.$route);
    // document.onfullscreenchange = this.resizeI;
    window.addEventListener("resize", this.resizeWindow);
  },
  beforeDestroy() {},
  methods: {
    enter($event) {
      $event.currentTarget.className =
        "icon iconfont icon-jia-tianchong addPuls";
    },
    leave($event) {
      $event.currentTarget.className = "icon iconfont icon-jia add";
    },
    resizeWindow() {
      if (this.isShow) {
        this.isShow = false;
        this.initSize();
        this.$nextTick((res) => {
          this.isShow = true;
        });
      }
    },
    initSize() {
      let clientWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      this.w = 500;
      this.x = clientWidth - (this.w + 10);
      this.y = 135;
      this.docY =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.h = this.docY - this.y;
    },
    resizestop(e) {
      if (!this.fullscreen) {
        this.h = Math.abs(e.height);
        this.w = Math.abs(e.width);
      }
      setTimeout(() => {
        this.isResizing = false;
      }, 500);
    },

    onResizing(e) {
      // console.log(e)
      this.isResizing = true;
      this.x = e.left
      this.y = e.top
      if (e.top < 135) {
        // console.log('来了')
        this.y = 135;
        // document.documentElement.querySelector("#instructions").style.top =
        //   "135px";
      }
    },

    resetBook() {
      this.isShow = false;
      this.$nextTick((res) => {
        let clientWidth =
          document.documentElement.clientWidth || document.body.clientWidth;
        this.docY =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.w = 500;
        this.h = this.docY - this.y;
        this.y = 135;
        this.x = clientWidth - (this.w + 10);
        this.isShow = true;
      });
    },
    fullPageBook() {
      this.isShow = false;
      this.$nextTick((res) => {
        const bodyEle = document.querySelector(".app-main");
        this.h = this.docY - this.y;
        // document.querySelector('#instructions .content-container').style.width = this.w+'px'
        this.w = bodyEle.clientWidth;
        this.x = 210;
        this.y = 135;
        this.isShow = true;
      });
    },
    async showInstructions() {
      this.initSize();
      if (!this.isShow) {
        // 埋点
        try {
          const res = await operationLog({
            operateName: this.str,
            interfaceUrl: this.$route.path,
          });
        } catch (e) {}
        // console.log("埋点");
      }
      this.isShow = !this.isShow;
    },
    setBtnStatus(to) {
      this.str = "";
      if (instructionList.hasOwnProperty(to.path)) {
        this.isShowBtn = true;
        // this.$emit('checkShow',this.isShowBtn)
        // console.log(Object.prototype.toString.call(instructionList[to.path]),instructionList[to.path])
        if (
          Object.prototype.toString.call(instructionList[to.path]) ===
          "[object Object]"
        ) {
          // 对象 肯定是详情页
          // console.log('状态',to.query[keyOfValue[to.path]])
          let obj = {};
          if (instructionList[to.path][to.query[keyOfValue[to.path]]]) {
            let parameter = to.query[keyOfValue[to.path]];
            obj = { ...instructionList[to.path][parameter] };
          } else {
            obj = instructionList[to.path];
          }

          if (!to.query.tabrouter) {
            let some = Object.keys(obj)[0];
            this.url = `/html/index.html#g=1&p=${obj[some]}&c=1`;
            this.str = obj[some];
          } else {
            this.str = obj[to.query.tabrouter];
            // if (
            //   to.path == "/business/resetTeaming" &&
            //   to.query.tabrouter == "11"
            // ) {
            //   to.query.team_status == "APPLY"
            //     ? (this.str = "乐团报名")
            //     : (this.str = "乐团缴费");
            // }
            // if (
            //   to.path == "/business/resetTeaming" &&
            //   (to.query.tabrouter == "3" || to.query.tabrouter == "6") &&
            //   to.query.team_status == "PROGRESS"
            // ) {
            //   this.str = "缴费项目创建";
            // }

            if (obj[to.query.tabrouter]) {
              this.url = `/html/index.html#g=1&p=${this.str}&c=1`;

              // 判断一下  如果是乐团详情  就判断
            } else {
              this.isShowBtn = false;
            }
          }
        } else {
          // 字符串
          this.url = `/html/index.html#g=1&p=${instructionList[to.path]}&c=1`;
          this.str = instructionList[to.path];
        }
      } else {
        this.isShowBtn = false;
      }
      console.log(this.isShowBtn);
      this.$emit("checkShow", this.isShowBtn);
    },
    showFullPage() {},
    resetVideo() {},
    gotoIns() {
      let str = this.url.replace("&c=1", "");
      this.$router.push({
        path: "/instructions/instructions",
        query: { url: str },
      });
    },
  },
  computed: {
    // key() {
    //   console.log(this.$route);
    //   this.isShow = false;
    //   return this.$route.path;
    // },
    iframeWidth() {
      return this.w + "px";
    },
    iframeHeight() {
      return this.h - 30 + "px";
    },

    fullscreen() {
      const bodyEle = document.querySelector(".app-main");
      // this.h = this.docY - this.y;
      return (
        this.h == this.docY - this.y &&
        this.w == bodyEle.clientWidth &&
        this.x == 210 &&
        this.y == 135
      );
    },
    // fullscreenVideo() {
    //   const bodyEle = document.querySelector(".app-main");
    //   return (
    //     this.videoH == this.docY - this.y &&
    //     this.videoW == bodyEle.clientWidth &&
    //     this.x == 210 &&
    //     this.y == 130
    //   );
    // },
  },
  watch: {
    $route(to, from) {
      this.isShow = false;
      this.setBtnStatus(to);
    },
    isShow(val) {
      if (val) {
        this.$nextTick((res) => {
          let outFrame = this.$refs.iframe;
          let outFrameWindow = this.$refs.iframe.contentWindow;
          setTimeout((res) => {
            let rightFrame = outFrameWindow.document.querySelector(
              "#mainFrame"
            );
            rightFrame.contentWindow.document.addEventListener(
              "click",
              (e) => {
                let path = (e.composedPath && e.composedPath()) || e.path || [];
                if (path.length > 0) {
                  for (let i in path) {
                    if (path[i]?.getAttribute("title")) {
                      console.log(
                        "打开视频链接",
                        e.path[i].getAttribute("title")
                      );
                      this.src = e.path[i].getAttribute("title");
                      this.showVideo = true;
                      this.$nextTick((res) => {
                        this.isShow = false;
                      });

                      // this.isShow = false;
                      break;
                    }
                  }
                } else {
                  this.$message.error(
                    "该浏览器不支持,请更换或升级chrome浏览器"
                  );
                }

                // let document
              },
              true
            );
          }, 500);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2000;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
  /*display: none;*/
}

.content-container {
  .showBtnList {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 20px;
    position: absolute;
    right: 5px;
    top: 0;
    background-color: #ccc;
    height: 30px;
    z-index: 2000;
    .icon {
      line-height: 30px;
    }
  }
}
.wall {
  height: 30px;
  background-color: #ccc;
  cursor: pointer;
}
.videowall {
  height: 30px;
  background-color: #ccc;
}
.fullscreen {
  padding: 0 5px;
  font-size: 20px;
}
.add {
  padding: 0 5px;
  font-size: 20px;
  font-weight: bold;
  color: #707070;
}
.addPuls {
  padding: 0 5px;
  font-size: 20px;
  color: #707070;
}
.huanyuan {
  padding: 0 5px;
  font-size: 22px;
}
.newPageBtn {
  font-size: 14px;
  line-height: 30px;
  color: #14928a;
  height: 30px;
  display: inline-block;
}
</style>
<style lang="scss">
// .instructionWrap{
//   position: absolute;
//   z-index: 2000;
// }
.instructionBtn {
  position: fixed;
  right: 30px;
  top: 200px;
  z-index: 2000;
}
.iframeId {
  width: 100%;
}
#instructions {
  background-color: #fff;
  position: fixed;
  z-index: 9998 !important;
  border: 1px solid #ccc;
}
.vdr-stick {
  opacity: 0;
}
.vdr-stick-tm,
.vdr-stick-bm {
  width: 99% !important;
  width: calc(100% - 8px) !important;
  margin-left: 0 !important;
  left: 4px;
  // margin-left: -50%!important;
}
.vdr-stick-mr,
.vdr-stick-ml {
  height: 99% !important;
  height: calc(100% - 8px) !important;
  margin-top: 0 !important;
  top: 4px !important;
}
.vdr {
  &:before {
    outline: 0px dashed #d6d6d6 !important;
  }
}
.icon {
  cursor: pointer;
  color: #707070;
}
</style>