实验面板拖拽

src/components/TestPanel.vue

@@ -2,7 +2,7 @@
   <div :class="['panel', {active: pannelVisible}]"
        id="panel">
     <el-container class="scrollbar"
-                  v-if="pannelVisible">
+                  v-show="pannelVisible">
       <el-header id="header">
         <div class="panel-header">
           <div class="project">
@@ -194,8 +194,10 @@
       </el-container>
     </el-container>
 
-    <div :class="['toggle-panel', {active: pannelVisible}]">
-      <div @click="togglePannel">
+    <div :class="['toggle-panel', {active: pannelVisible}]"
+         id="toggle">
+      <!-- <div @click="togglePannel"> -->
+      <div>
         <img :src="require(`@/assets/images/system/${$config.defaultSystem}/left.png`)"
              alt
              class="c-p"
@@ -919,26 +921,68 @@ export default {
       const el = document.querySelector('#panel')
       let gap = 10 // 缝隙：小于缝隙时，则吸附
       let parent = document.body
-      document.querySelector('#header').onmousedown = e => {
-        console.log("🚀 ~ file: TestPanel.vue:746 ~ document.querySelector ~ e:", e)
-        var x = e.clientX - el.offsetLeft
-        var y = e.clientY - el.offsetTop
-        var left = 0
-        var top = 0
+      const drag = e => {
+        e.stopPropagation && e.stopPropagation()
+        e.preventDefault && e.preventDefault()
+        e.cancelBubble = true
+        e.returnValue = false
+        let x = e.clientX - el.offsetLeft
+        let y = e.clientY - el.offsetTop
+        let left = 0
+        let top = 0
 
         document.onmousemove = function (eve) {
           left = eve.clientX - x
           top = eve.clientY - y
-          // 左
-          if (left <= gap) {
-            left = 0
-          }
+          // // 左
+          // if (left <= gap) {
+          //   left = 0
+          // }
 
-          if (left >= parent.offsetWidth - el.offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
-            left = parent.offsetWidth - el.offsetWidth - 35
+          // if (left >= parent.offsetWidth - el.offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
+          //   left = parent.offsetWidth - el.offsetWidth - 35
+          // }
+          // // 上
+          // if (top <= gap) top = 0
+          el.style.left = left + 'px'
+          el.style.top = top + 'px'
+        }
+        document.onmouseup = e => {
+          document.onmousemove = null
+          document.onmouseup = null
         }
+      }
+      document.querySelector('#header').onmousedown = drag
+
+
+      const toggle = document.querySelector('#toggle')
+      const drag1 = e => {
+        e.stopPropagation && e.stopPropagation()
+        e.preventDefault && e.preventDefault()
+        e.cancelBubble = true
+        e.returnValue = false
+
+        let timer = setTimeout(this.togglePannel, 200)
+
+        let x = e.clientX - el.offsetLeft
+        let y = e.clientY - el.offsetTop
+
+        let left = 0
+        let top = 0
+
+        document.onmousemove = function (eve) {
+          clearTimeout(timer)
+          left = eve.clientX - x
+          top = eve.clientY - y
+          // 左
+          // if (left <= gap) left = 0
+          // const offsetWidth = this.pannelVisible ? el.offsetWidth : 0
+          // if (left >= parent.offsetWidth - offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
+          //   left = parent.offsetWidth - offsetWidth - 35
+          // }
+
           // 上
-          if (top <= gap) top = 0
+          // if (top <= gap) top = 0
           el.style.left = left + 'px'
           el.style.top = top + 'px'
         }
@@ -947,6 +991,7 @@ export default {
           document.onmouseup = null
         }
       }
+      document.querySelector('#toggle').onmousedown = drag1
     }
   }
 };
@@ -1158,7 +1203,7 @@ export default {
   top: 200px;
   bottom: 20px;
   left: 0;
-  width: 85%;
+  width: 0;
   height: 0;
   .toggle-panel {
     position: absolute;
@@ -1172,6 +1217,7 @@ export default {
   }
   &.active {
     position: fixed;
+    width: 85%;
     height: 70%;
     .toggle-panel {
       top: 38%;

src/config/index.js

@@ -5,7 +5,7 @@ const isDev = process.env.NODE_ENV === 'development' //是否本地
 const isHh = url.includes('10.196.131.73') //是否是河海版本
 const isPro = url.includes('occupationlab.com') //是否职站生产
 const isZxy = url.includes('izhixinyun.com') //是否智信云
-
+let vscodeUrl = 'https://vscode.izhixinyun.com'
 let host = location.origin + '/'
 let bankPath = `${location.origin}/banksystem` // 银行系统
 // 121.37.12.51 | 192.168.31.151
@@ -15,9 +15,11 @@ if (isDev) {
   host = 'http://121.37.12.51:9000/'
   // host = 'https://occupationlab.com/'
   bankPath = `http://${location.hostname}:8093`
+	vscodeUrl = 'http://121.37.12.51:8088/?folder=/home/coder'
 } else if (isPro) {
   host = 'https://occupationlab.com/'
   bankPath = `https://www.huorantech.cn/banksystem`
+	vscodeUrl = 'https://vscode.occupationlab.com/'
 }
 const systemId = Cookie.get('admin-systemId')
 export default {
@@ -50,6 +52,10 @@ export default {
      * 银行系统
      **/
     bankPath,
+    /**
+     * vscode地址
+     **/
+    vscodeUrl,
     /**
      * @description 长时间未操作，自动退出登录时间
      */

src/views/Home.vue

@@ -62,7 +62,7 @@
                       @cache="leavePage"></codemirror>
           <iframe v-else
                   class="vscode"
-                  :src="Config.isPro ? 'https://vscode.occupationlab.com/' : 'http://121.37.12.51:8088/?folder=/home/coder'"
+                  :src="Config.vscodeUrl"
                   frameborder="0"
                   width="100%"></iframe>
         </el-tab-pane>