优化：websocket 链接

修复：删除文件后，画矩形选取的问题

src/components/ShowFile/ShowFile.vue

@@ -588,8 +588,6 @@ import '@/utils/directives.js'
 
 import 'pl-table/themes/index.css';
 import {PlTable, PlTableColumn} from 'pl-table';
-
-import ws from '@/websocket/websocket_config';
 import fileConfig from '@/utils/file-config'
 
 var rowStyleExecuting = false
@@ -942,17 +940,7 @@ export default {
     // 画矩形选区
     this.darwRectangle()
 
-    // 监听websocket
-    if (ws.isConnected) {
-      this.onmessage()
-    } else {
-      const that = this
-      setTimeout(function () {
-        if (ws.isConnected) {
-          that.onmessage()
-        }
-      }, 3000)
-    }
+    Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
   },
   destroyed() {
     window.removeEventListener('popstate', this.goBack, false);
@@ -990,32 +978,29 @@ export default {
     }
   },
   methods: {
-    onmessage() {
-      // 订阅消息
-      this.stompClient = ws.stompClient.subscribe('/user/queue/update', (msg) => {
-        let fileDoc = JSON.parse(msg.body)
-        const url = msg.headers.url
-        let index = this.fileList.findIndex(file => file.id === fileDoc.id)
-        if ('updateFile' === url) {
-          if (index > -1) {
-            this.fileList[index].size = fileDoc.size
-            this.fileList[index].agoTime = 1
-          }
+    onmessage(msg) {
+      let fileDoc = JSON.parse(msg.body)
+      const url = msg.headers.url
+      let index = this.fileList.findIndex(file => file.id === fileDoc.id)
+      if ('updateFile' === url) {
+        if (index > -1) {
+          this.fileList[index].size = fileDoc.size
+          this.fileList[index].agoTime = 1
         }
-        if ('deleteFile' === url) {
-          if (index > -1) {
-            this.fileList.splice(index, 1)
-          }
+      }
+      if ('deleteFile' === url) {
+        if (index > -1) {
+          this.fileList.splice(index, 1)
         }
-        if ('createFile' === url) {
-          if (!this.path) {
-            this.path = ''
-          }
-          if (this.path + '/' === fileDoc.$set.path) {
-            this.getFileList()
-          }
+      }
+      if ('createFile' === url) {
+        if (!this.path) {
+          this.path = ''
         }
-      }, ws.headers);
+        if (this.path + '/' === fileDoc.$set.path) {
+          this.getFileList()
+        }
+      }
     },
     load() {
       this.getFileList(true)
@@ -2849,6 +2834,8 @@ export default {
         for (let i = 0; i < removeFileIndexList.length; i++) {
           that.fileList.splice(removeFileIndexList[i], 1)
         }
+        // 改变拖拽目标
+        that.rowDrop()
       }, 300)
     },
     // 预览压缩文件

src/layout/components/Sidebar/index.vue

@@ -16,7 +16,7 @@
       </el-menu>
     </el-scrollbar>
     <div class="quota-space">
-      <el-progress :class="{'collapse': isCollapse}" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
+      <el-progress v-show="percentage > 0" :class="{'collapse': isCollapse}" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
     </div>
     <div class="webdav">
       <div :class="{'normal': true, 'collapse': isCollapse}" @mousemove="showCopyBtn = true" @mouseleave="showCopyBtn = false">
@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import Bus from '@/assets/js/bus'
 import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
@@ -52,7 +53,8 @@ export default {
         {color: '#1989fa', percentage: 40},
         {color: '#6f7ad3', percentage: 20}
       ],
-      showCopyBtn: false
+      showCopyBtn: false,
+      takeUpSpace: 0,
     }
   },
   computed: {
@@ -102,10 +104,20 @@ export default {
   },
   watch: {
     isCollapse(val){
-      this.progressFormat()
     }
   },
+  mounted() {
+    Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
+  },
   methods: {
+    onmessage(msg) {
+      const takeUpSpace = msg.headers.space
+      if (takeUpSpace) {
+        this.takeUpSpace = takeUpSpace
+        const space = takeUpSpace/1024/1024/1024
+        this.percentage = Number((space/this.userInfo.quota * 100).toFixed(1))
+      }
+    },
     copyWebDAVLink(className) {
       let clipboard = new Clipboard(className)
       clipboard.on('success', e => {
@@ -120,23 +132,24 @@ export default {
       })
     },
     mouseleave() {
-      console.log('mouseleave')
     },
     onmousemove() {
-      console.log('onmousemove')
     },
     progressFormat() {
-      const space = this.userInfo.takeUpSpace/1024/1024/1024
+      if (this.takeUpSpace === 0) {
+        this.takeUpSpace = this.userInfo.takeUpSpace
+      }
       const quota = this.userInfo.quota
+      const space = this.takeUpSpace/1024/1024/1024
       if(space && quota > 0){
         this.percentage = Number((space/quota * 100).toFixed(1))
         if(this.isCollapse){
-          return `${formatSize(this.userInfo.takeUpSpace)}`
+          return `${formatSize(this.takeUpSpace)}`
         } else {
-          return `${formatSize(this.userInfo.takeUpSpace)}/${quota}GB`
+          return `${formatSize(this.takeUpSpace)}/${quota}GB`
         }
       }
-    },
+    }
   }
 }
 </script>

src/websocket/sockJS.js

@@ -1,6 +1,7 @@
 import SockJS from  'sockjs-client';
 import  Stomp from './stomp-index';
 import ws from './websocket_config';
+import Bus from '@/assets/js/bus'
 
 export function toConnection(username,token) {
   connect(username,token);
@@ -30,10 +31,13 @@ function connect(username,token){
   // 向服务器发起websocket连接
   ws.stompClient.connect(ws.headers,() => {
     ws.isConnected = true;
+    // 订阅消息
+    ws.stompClient.subscribe('/user/queue/update', (msg) => {
+      Bus.$emit('msg/file/change', msg)
+    }, ws.headers);
   }, (err) => {
     ws.isConnected = false;
     // 连接发生错误时的处理函数
-    console.log(err);
   });
 
 }