Merge branch 'zhaoj'

src/pages/jsd/wdkc/zbkc/live.vue

@@ -79,7 +79,7 @@
                     <span>相关文档</span>
                     <i></i>
                 </div>
-            	<homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file" :file="chapter_info.tzk_files_json" :user_id="chapter_info.tzk_zjr_user_id" @filePre="filePre"></homeworkBlock>
+            	<homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file" :file="chapter_info.tzk_files_json" :zjr="chapter_info.tzk_zjr_user_id" @filePre="filePre"></homeworkBlock>
             </div>
    		 </div>
   </div>

src/pages/zbkc/detailIsLive.vue

@@ -11,8 +11,8 @@
         </div>
     </div>
     <div class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px">
-        <div class="flex justify-between">
-            <div class="w-800px relative">
+        <div class="content_nav">
+            <div ref="liveBox" class="w-800px relative left-box">
                 <div class="flex justify-between items-center">
                     <h3 class="nav-title flex-1">
                         <span>{{ course_title }}</span>
@@ -58,22 +58,22 @@
                 <ChatBlock :id="tzk_id" />
             </div>
             <!-- v-if="user.user_role_id ==75" -->
-            <div class="w-300px mt-46px right-box pt-30px relative">
+            <div ref="fileBox" class="300px mt-46px right-box pt-30px">
                 <div v-if="user.user_role_id === '75'" class="right-nav ml-20px">
                     <span>相关章节</span>
                     <i></i>
                 </div>
-                <homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file" :file="chapter_info.tzk_files_json" @filePre="filePre"></homeworkBlock> 
+                <homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file"
+                    :file="chapter_info.tzk_files_json" :zjr="chapter_info.tzk_zjr_user_id" @filePre="filePre">
+                </homeworkBlock>
             </div>
         </div>
         <el-dialog v-model="dialogVisible" :title="title" width="80%">
             <filePreview style="width: 100%; height: 700px; overflow-y: auto" :url="previewUrl"></filePreview>
             <template #footer>
-            <div class="text-center">
-                <el-button size="large" type="primary" @click="dialogVisible = false"
-                >确定</el-button
-                >
-            </div>
+                <div class="text-center">
+                    <el-button size="large" type="primary" @click="dialogVisible = false">确定</el-button>
+                </div>
             </template>
         </el-dialog>
     </div>
@@ -86,6 +86,7 @@ import ChatBlock from "./chat.vue";
 import homeworkBlock from "./homework.vue";
 import { useRoute, useRouter } from "vue-router";
 import { user } from '../../store/index';
+import mammoth from 'mammoth/mammoth.browser';
 import {
     chapter_detail,
     chapter_list,
@@ -94,9 +95,13 @@ import {
     jf_list,
 } from "./api";
 import QrcodeVue from "qrcode.vue";
-console.log(user.value);
 const router = useRouter();
 const route = useRoute();
+
+const liveBox = ref(null);
+const fileBox = ref(null);
+
+
 let course_title = $ref("");
 let tz_id = $ref('');
 let tzk_id = $ref("");
@@ -112,7 +117,6 @@ let previewUrl = $ref("");
 const linkBack = () => {
     router.back()
 };
-
 function getChapterDetail() {
     let data = {
         tzk_id: tzk_id,
@@ -121,7 +125,10 @@ function getChapterDetail() {
         if (res.code === "1") {
             chapter_info = res.data.one_info;
             course_title = res.data.one_info.tzk_ksmc;
-
+            if (user.value.user_id ==='100') {
+                let width = liveBox.value.parentElement.offsetWidth;
+                liveBox.value.style.width = width + 'px';
+            }
             var player = new Aliplayer(
                 {
                     id: "player-con",
@@ -235,13 +242,17 @@ function changeChapter(item) {
     });
 }
 
-if (route.params.tz_id && route.params.tzk_id) {
-    tzk_id = route.params.tzk_id;
-    tz_id = route.params.tz_id;
-    shareLink = window.location.href;
-    getChapterDetail();
-    // getChapterList();
-}
+
+
+onMounted(() => {
+    if (route.params.tz_id && route.params.tzk_id) {
+        tzk_id = route.params.tzk_id;
+        tz_id = route.params.tz_id;
+        shareLink = window.location.href;
+        getChapterDetail();
+    }
+});
+
 watch(
     () => route.path,
     () => {
@@ -297,12 +308,30 @@ async function copyLink() {
     ElMessage.success("已复制");
     jfData();
 }
+let wordText = $ref();
 let dialogVisible = $ref(false);
 let title = $ref('资源预览')
 function filePre(item) {
     console.log(item, 111111);
     dialogVisible = true;
-    previewUrl = getFullUrl(item);
+    previewUrl = item;
+    getWordText(getFullUrl(item))
+}
+function getWordText(url) {
+    console.log(url);
+    const xhr = new XMLHttpRequest();
+    xhr.open("get", url, true);
+    xhr.responseType = "arraybuffer";
+    xhr.onload = () => {
+        if (xhr.status == 200) {
+            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
+                nextTick(() => {
+                    wordText = resultObject.value;
+                });
+            });
+        }
+    };
+    xhr.send();
 }
 </script>
 
@@ -346,6 +375,19 @@ $color: #1259a1;
         color: #fff;
     }
 }
+:deep(.el-dialog){
+    z-index: 10000 !important;
+}
+.content_nav{
+    // width: 1200px;
+    position: relative;
+}
+
+.content_nav::after{
+    content:"";
+    display:block;
+    clear:both;    
+}
 
 .search-box {
     width: 300px;
@@ -375,63 +417,6 @@ $color: #1259a1;
     }
 }
 
-.course-list {
-    display: flex;
-    flex-wrap: wrap;
-
-    li {
-        min-width: 0;
-        width: 268px;
-        background: #fff;
-        border-radius: 10px;
-        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
-        margin-right: 19px;
-        margin-bottom: 15px;
-        cursor: pointer;
-
-        &:nth-child(4n) {
-            margin-right: 0;
-        }
-
-        .course-img {
-            width: 100%;
-            height: 151px;
-            border-radius: 10px 10px 0 0;
-            overflow: hidden;
-
-            img {
-                width: 100%;
-            }
-
-            .info-bottom {
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                z-index: 30;
-                width: 152px;
-                height: 27px;
-                background: rgba(0, 0, 0, 0.5);
-                border-radius: 0 10px 0 0;
-                display: flex;
-
-                .icon-view {
-                    width: 24px;
-                    height: 16px;
-                    background: url("/images/icon/view.png") center no-repeat;
-                    background-size: 24px 16px;
-                }
-
-                .icon-thumb {
-                    width: 17px;
-                    height: 16px;
-                    background: url("/images/icon/thumb.png") center no-repeat;
-                    background-size: 17px 16px;
-                }
-            }
-        }
-    }
-}
-
 .thumb {
     display: inline-block;
     font-size: 16px;
@@ -521,11 +506,14 @@ $color: #1259a1;
         }
     }
 }
-
+.left-box{
+    float: left;
+}
 .right-box {
-    height: 460px;
+    // height: 460px;
     background: #ffffff;
     border-radius: 12px;
+    float: right;
     box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);
 
     .right-nav {
@@ -582,112 +570,16 @@ $color: #1259a1;
     }
 }
 
-.res-box {
-    width: 100%;
-    height: 317px;
-    background: #ffffff;
-    border-radius: 12px;
-    box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);
-
-    .res-nav {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        li {
-            position: relative;
-            padding: 0 5px;
-            cursor: pointer;
-
-            &.selected {
-                span {
-                    color: #1259a1;
-                }
-            }
-
-            &+li {
-                margin-left: 60px;
-            }
-
-            span {
-                position: relative;
-                display: block;
-                font-size: 16px;
-                color: #9fa9b4;
-                text-align: center;
-            }
-
-            i {
-                position: absolute;
-                left: 0;
-                bottom: 2px;
-                width: 100%;
-                height: 6px;
-                opacity: 0.2;
-                background: #1259a1;
-                border-radius: 3px;
-            }
-        }
-    }
-
-    .res-list {
-        width: 100%;
-        padding: 0 20px 0 30px;
-        height: 200px;
-        overflow-y: auto;
-
-        li {
-            display: flex;
-            padding: 20px;
-            align-items: center;
-
-            &+li {
-                border-top: 1px dashed rgba(110, 88, 197, 0.5);
-            }
-
-            .file-type {
-                min-width: 0;
-                width: 26px;
-                height: 26px;
-
-                &.word {
-                    background: url("/images/word.png") center no-repeat;
-                }
-
-                &.excel {
-                    background: url("/images/excel.png") center no-repeat;
-                }
-
-                &.ppt {
-                    background: url("/images/ppt.png") center no-repeat;
-                }
-
-                &.pdf {
-                    background: url("/images/pdf.png") center no-repeat;
-                }
-            }
-
-            .file-btn {
-                width: 58px;
-                height: 24px;
-                border: 1px solid #1259a1;
-                border-radius: 12px;
-                font-size: 12px;
-                color: #1259a1;
-                text-align: center;
-            }
-        }
-    }
-}
 
 ::v-deep .el-dialog__footer {
     text-align: center;
 }
 
-:deep(.chat){
+:deep(.chat) {
     // background-color: rgba($color:#fff, $alpha: .7);
     position: absolute;
-    bottom: 0;
-    z-index: 100;
+    top: 60px;
+    right: 10px;
+
 }
 </style>

src/pages/zbkc/homework.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { user } from '~/store/index';
 import downLoadFile1 from '@/utils/download'
+import mammoth from 'mammoth/mammoth.browser';
 const props = defineProps({
     id: String,
     homework: String,
     file: String,
     dxa: String,
     user_id: String,
+    zjr: String,
 })
 const chatBox = ref()
 const ws = new WebSocket("wss://socket.txhlwxx.com")
@@ -15,6 +17,7 @@ const emits = defineEmits(['filePre', 'edit', 'download', 'enter'])
 const msgList = ref([])
 
 let visiable = $ref(false);
+let wordVisiable = $ref(false);
 let title = $ref('')
 let filecontent = $ref('');
 let fileName = $ref('');
@@ -24,6 +27,24 @@ let isBanned = $ref(false)
 let ban_me = $ref(false);
 let login_data = $ref({});
 let login_id = $ref([]);
+let wordText = $ref();
+function getWordText(url) {
+    console.log(url);
+    const xhr = new XMLHttpRequest();
+    xhr.open("get", url, true);
+    xhr.responseType = "arraybuffer";
+    xhr.onload = () => {
+        if (xhr.status == 200) {
+            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
+                console.log(resultObject, 'rej');
+                nextTick(() => {
+                    wordText = resultObject.value;
+                });
+            });
+        }
+    };
+    xhr.send();
+}
 ws.addEventListener('message', (e) => {
     if (e.data) {
         try {
@@ -44,49 +65,27 @@ ws.addEventListener('message', (e) => {
                 const [id, name] = data.from_client_name.split('|')
                 const fileType = data.content?.split(";")[2]?.split('|')[1];
                 fileName = data.content.split(";")[0];
-                filecontent = data.content?.split(";")[2]?.split('|')[0];
-                if (fileType && user.value.user_role_id == '76') {
-                    visiable = true;
-                    downItem= data.content
+                filecontent = data.content?.split(";")[2].split('|')[0];
+                if (fileType && user.value.user_id !== props?.zjr) {
+
+                    downItem = data.content
                     switch (fileType) {
                         case 'home':
                             title = '作业';
+                            wordVisiable = true;
+                            let url = getFullUrl(filecontent)
+                            getWordText(url)
                             break
                         case 'file':
                             title = '文件';
+                            visiable = true;
                             break
                         case 'dxa':
                             title = '课时导学案';
+                            visiable = true;
                             break
                     }
                 }
-
-                // msgList.value.push({
-                //     id,
-                //     name,
-                //     time: data.time,
-                //     content: data.content,
-                //     // bannedN: false,
-                // })
-
-                // msgList.value.forEach((el, index, array) => {
-                //     el.bannedN = false;
-                //     if (noSayId.includes(el.id)) {
-                //         el.bannedN = true;
-                //     }
-                // })
-                // nextTick(() => {
-                //     chatBox.value.scrollTo({
-                //         top: (chatItemBox.value.getBoundingClientRect()).height,
-                //         left: 0,
-                //         behavior: "smooth"
-                //     })
-                // })
-
-            }
-            if (data.type === 'file') {
-                console.log(data);
-                console.log(1111111111);
             }
 
         } catch (error) {
@@ -128,22 +127,24 @@ let noSayId = [];
 
 
 function filePre(item) {
-    console.log(item,'预览查看');
+    console.log(item, '预览查看');
     emits('filePre', item)
 }
 
 function download(item) {
-    // window.open(getFullUrl(item), '_blank');
-    const arr = item.split(';')[2].split('.');
-    const ext = arr[arr.length - 1].toLowerCase()
     downLoadFile1(getFullUrl(item.split(';')[2].split('|')[0]), `${item.split(';')[0]}`)
 }
 </script>
 
 <template>
     <div class="w-300px h-400px flex flex-col shadow chat">
-        <div class="h-100 overflow-hidden overflow-y-auto flex-auto home_scroll" ref="chatBox">
-            <ul v-if="user.user_role_id === '75'" ref="chatItemBox">
+        <!--  v-if="user.user_id === props?.zjr" -->
+        <div v-if="user.user_id ==='1'" class="h-100 overflow-hidden overflow-y-auto flex-auto home_scroll" ref="chatBox">
+            <div class="right-nav ml-20px">
+                <span>相关章节</span>
+                <i></i>
+            </div>
+            <ul ref="chatItemBox">
                 <li v-if="props?.dxa" class="chat_li flex justify-between items-center px-15px">
                     <el-tooltip class="box-item" effect="dark" :content="props?.dxa.split(';')[0]" placement="top-start">
                         <p class="w-129px truncate text-14px py-4px">
@@ -189,6 +190,7 @@ function download(item) {
                 </li> -->
             </ul>
         </div>
+        <!-- <div v-else class="w-0 h-0"></div> -->
         <el-dialog v-model="visiable" :title="title">
             <div class="chat_li flex justify-between items-center pl-15px pr-65px">
                 <el-tooltip class="box-item" effect="dark" :content="fileName" placement="top-start">
@@ -203,10 +205,9 @@ function download(item) {
 
             </div>
         </el-dialog>
-        <!-- <div v-if="user.user_role_id >= '3'" class="flex flex-none p-3">
-            <el-input class="input" v-model="msg"></el-input>
-            <el-button rounded type="primary" @click="handleSendClick" class="ml-4 button">发送</el-button>
-        </div> -->
+        <el-dialog  v-model="wordVisiable" :title="title">
+            <div id="wordView" v-html="wordText"></div>
+        </el-dialog>
     </div>
 </template>
 
@@ -283,4 +284,29 @@ $color: #1259A1;
     scrollbar-width: 2px;
     scrollbar-color: $color #fff;
 }
+
+.right-nav {
+    position: relative;
+    width: 72px;
+
+    span {
+        position: relative;
+        display: block;
+        z-index: 30;
+        font-size: 16px;
+        color: #222;
+        text-align: center;
+        line-height: 30px;
+    }
+
+    i {
+        position: absolute;
+        left: 0;
+        bottom: 3px;
+        width: 100%;
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(108, 93, 211, 0.2);
+    }
+}
 </style>