From 9c71d96bad37e81ece769f8eb9a4c3c766393b3c Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 03 七月 2024 17:45:11 +0800
Subject: [PATCH] fix:修改socket
---
src/views/folder/index.vue | 106 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 98 insertions(+), 8 deletions(-)
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index d74a7fe..d0b4d08 100644
--- a/src/views/folder/index.vue
+++ b/src/views/folder/index.vue
@@ -49,13 +49,52 @@
</div>
</div>
</div>
+
+ <!-- pdf鏌ョ湅 -->
+ <div class="pdf-container" v-show="pdfViewer">
+ <PDFViewer :pdfUrl="'/test.pdf'"></PDFViewer>
+ <div class="close-btn">
+ <el-button type="danger" size="large" circle @click="closeViewer">
+ <template #icon>
+ <el-icon :size="18">
+ <Close />
+ </el-icon>
+ </template>
+ </el-button>
+ </div>
+ </div>
+
+ <!-- image鏌ョ湅 -->
+ <div class="image-container" v-show="imageViewer">
+ <el-image-viewer :url-list="imageList" @close="closeViewer"></el-image-viewer>
+ </div>
+
+ <!-- 瑙嗛鏌ョ湅 -->
+ <div class="video-container">
+
+ </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 = {
@@ -63,32 +102,41 @@
iconPath: '/static/icons/file_type_image.png',
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': {
- iconPath: '/static/icons/file_type_image.png',
+ iconPath: '/static/icons/file_type_pdf.png',
handle: (item) => {
console.log(item);
-
+ pdfViewer.value = true;
+ sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
}
},
};
-
const searchText = ref('');
+const loading = ref(false);
+
+const pdfViewer = ref(false);
+const imageViewer = ref(false);
+const videoViewer = ref(false);
+
+const imageList = ref([]);
const fileList = ref([
{
id: 1,
name: '娴嬭瘯娴嬭瘯娴嬭瘯',
- url: '',
+ url: '/test_question.png',
date: '2024-12-12',
class: 'test',
subject: '娴嬭瘯',
@@ -106,7 +154,7 @@
{
id: 3,
name: '娴嬭瘯娴嬭瘯娴嬭瘯',
- url: '',
+ url: '/test.pdf',
date: '2024-12-12',
class: 'test',
subject: '娴嬭瘯',
@@ -114,12 +162,31 @@
}
]);
-const loading = ref(false);
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 => {
+
+ });
+};
+getData();
+
+// -----------------------------------鐢熷懡鍛ㄦ湡
+onMounted(() => {
+ // 杩炴帴webscoket
+ connect();
+});
</script>
<style lang="scss" scoped>
@@ -136,4 +203,27 @@
margin-right: 20px;
}
}
+
+.pdf-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 99999;
+ 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;
+ padding: 5px !important;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0