fix:修改socket

ZhangXianQiang

2024-07-03 9c71d96bad37e81ece769f8eb9a4c3c766393b3c

fix:修改socket

 src/hooks/useWebScoket.js

@@ -54,7 +54,7 @@
      status.value = SocketStatus.Connected;
      error.value = null;
      startHeartBeat();
      if(connectCallBack) {
      if (connectCallBack) {
        connectCallBack();
      }
    };
@@ -172,11 +172,12 @@
  };

  onBeforeUnmount(() => {
    if (status.value === SocketStatus.Connected || status.value === SocketStatus.Connecting) {
      disconnect();
    }
    disconnect();
  });

  window.addEventListener('unload', () => {
    disconnect();
  });
  return {
    status,
    message,

 src/views/folder/index.vue

@@ -65,26 +65,37 @@
    </div>

    <!-- image查看 -->
     <div class="image-container" v-show="imageViewer">
    <div class="image-container" v-show="imageViewer">
      <el-image-viewer :url-list="imageList" @close="closeViewer"></el-image-viewer>
     </div>
    </div>

     <!-- 视频查看 -->
     <div class="video-container">
    <!-- 视频查看 -->
    <div class="video-container">

     </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { Close } from '@element-plus/icons-vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
import { Search } from '@element-plus/icons-vue';
import { getFileList } from '@/api/modules/file.js';

import PDFViewer from '@/components/PDFViewer/index.vue';
import { useUserStore } from '@/store/index.js';
import useWebScoket from '@/hooks/useWebScoket.js';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { status, message, error, connect, disconnect, sendMessage } = useWebScoket({
  url: 'ws://192.168.3.64:8000/websocket/' + userInfo.value.id,
  heartBeatData: 'ping'
});


const fileType = {
  'img': {
@@ -92,12 +103,14 @@
    handle: (item) => {
      console.log(item);
      imageViewer.value = true;
      sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
    }
  },
  'video': {
    iconPath: '/static/icons/file_type_video.png',
    handle: (item) => {
      console.log(item);
      sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
    }
  },
  'pdf': {
@@ -105,6 +118,7 @@
    handle: (item) => {
      console.log(item);
      pdfViewer.value = true;
      sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
    }
  },
};
@@ -151,13 +165,15 @@

const checkRow = (item) => {
  fileType[item.type] && fileType[item.type].handle(item);

};

const closeViewer = () => {
  pdfViewer.value = false;
  imageViewer.value = false;
  videoViewer.value = false;
}
  sendMessage({ id: userInfo.value.id, command: 'endRecordTime' });
};

const getData = () => {
  getFileList().then(res => {
@@ -166,6 +182,11 @@
};
getData();

// -----------------------------------生命周期
onMounted(() => {
  // 连接webscoket
  connect();
});
</script>

<style lang="scss" scoped>
@@ -191,11 +212,13 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .close-btn {
    position: absolute;
    top: 2px;
    right: 30px;
    z-index: 9999999;

    :deep(.el-button) {
      width: fit-content;
      height: fit-content;