提交一下

1

src/assets/icon/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2559792 */
+  src: url('iconfont.woff2?t=1621478134964') format('woff2'),
+       url('iconfont.woff?t=1621478134964') format('woff'),
+       url('iconfont.ttf?t=1621478134964') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fullscreen:before {
+  content: "\e623";
+}
+
+.icon-tubiao-huanyuan:before {
+  content: "\e60c";
+}
+

src/assets/icon/iconfont.json

@@ -0,0 +1,23 @@
+{
+  "id": "2559792",
+  "name": "daya-admin-master",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "9512566",
+      "name": "全屏",
+      "font_class": "fullscreen",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "11700988",
+      "name": "还原",
+      "font_class": "tubiao-huanyuan",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    }
+  ]
+}

src/layout/components/instructions.vue

@@ -25,10 +25,13 @@
       @dragstop="resizestop"
       :preventActiveBehavior="true"
     >
+
       <div class="wall"></div>
       <div class="showBtnList">
         <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
         <i class="el-icon-minus minus" @click="showInstructions"></i>
+        <i class="icon-fullscreen"></i>
+         <i class="icon-tubiao-huanyuan"></i>
       </div>
       <div class="iframeDiv" v-show="isResizing"></div>
       <iframe
@@ -42,6 +45,28 @@
       >
       </iframe>
     </vue-drag-resize>
+    <vue-drag-resize
+      v-if="showVideo"
+      :w="videoW"
+      :h="videoH"
+      :y="videoY"
+      :x="videoX"
+      class="videoWrap"
+    >
+       <div class="videowall"></div>
+      <div class="showBtnList">
+        <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
+        <i class="el-icon-close" @click="showVideo=false"></i>
+      </div>
+      <video
+        id="video"
+        :src="src"
+        width="640px"
+        controls
+        playsinline
+        loop
+      ></video>
+    </vue-drag-resize>
   </div>
 </template>
 <script>
@@ -62,6 +87,12 @@ export default {
       x: "",
       docY: "",
       isResizing: false,
+      showVideo: false,
+      src: "",
+      videoX: "",
+      videoY: "",
+      videoW: 640,
+      videoH: 390,
     };
   },
   mounted() {
@@ -72,6 +103,8 @@ export default {
     this.docY =
       document.documentElement.clientHeight || document.body.clientHeight;
     this.h = this.docY - this.y;
+    this.videoX = (clientWidth - 640) / 2;
+    this.videoY = (this.docY - 320) / 2;
   },
   beforeDestroy() {},
   methods: {
@@ -101,8 +134,8 @@ export default {
             let rightFrame = outFrameWindow.document.querySelector(
               "#mainFrame"
             );
-            console.log(rightFrame, "rightFrame");            rightFrame.contentWindow.document.addEventListener("click", (e) => {
-              let path = (e.composedPath && e.composedPath()) ||e.path || [];
+            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("selectiongroup")) {
@@ -110,12 +143,13 @@ export default {
                       "打开视频链接",
                       e.path[i].getAttribute("selectiongroup")
                     );
+                    this.src = e.path[i].getAttribute("selectiongroup");
+                    this.showVideo = true;
                     break;
                   }
-                  //  console.log(e.path[i].getAttribute('selectiongroup'))
                 }
-              }else{
-                this.$message.error('该浏览器不支持,请更换或升级chrome浏览器')
+              } else {
+                this.$message.error("该浏览器不支持,请更换或升级chrome浏览器");
               }
 
               // let document
@@ -127,18 +161,30 @@ export default {
     showFullPage() {},
   },
   computed: {
-    key() {
-      console.log(this.$route);
-      this.isShow = false;
-      return this.$route.path;
-    },
+    // key() {
+    //   console.log(this.$route);
+    //   this.isShow = false;
+    //   return this.$route.path;
+    // },
     iframeWidth() {
       return this.w + "px";
     },
     iframeHeight() {
-      console.log(this.h);
       return this.h - 30 + "px";
     },
+    VideoWidth() {
+      return this.videoW+ "px"
+    },
+    VideoHeight() {
+
+        return this.videoH - 30 + "px";
+    },
+  },
+  watch: {
+    $route(to, from) {
+      this.isShow = false;
+      console.log(to);
+    },
   },
 };
 </script>
@@ -167,7 +213,14 @@ export default {
 #instructions {
   background-color: #fff;
   position: fixed;
-  z-index: 9999;
+  z-index: 9998;
+  border: 1px solid #ccc;
+}
+.videoWrap {
+  z-index: 9999 !important;
+  background-color: #fff;
+  position: fixed;
+
   border: 1px solid #ccc;
 }
 .content-container {
@@ -184,4 +237,8 @@ export default {
   background-color: #ccc;
   cursor: pointer;
 }
+.videowall{
+  height: 30px;
+   background-color: #ccc;
+}
 </style>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
-
+import './assets/icon/iconfont.css'
 import dayjs from 'dayjs'
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'