|
|
@@ -0,0 +1,284 @@
|
|
|
+<script setup>
|
|
|
+import { user } from '~/store/index';
|
|
|
+import downLoadFile1 from '@/utils/download'
|
|
|
+const props = defineProps({
|
|
|
+ id: String,
|
|
|
+ homework: String,
|
|
|
+ file: String,
|
|
|
+ dxa: String,
|
|
|
+ user_id: String,
|
|
|
+})
|
|
|
+const chatBox = ref()
|
|
|
+const ws = new WebSocket("wss://socket.txhlwxx.com")
|
|
|
+const emits = defineEmits(['filePre', 'edit', 'download', 'enter'])
|
|
|
+// let userList = ref(undefined)
|
|
|
+const msgList = ref([])
|
|
|
+
|
|
|
+let visiable = $ref(false);
|
|
|
+let title = $ref('')
|
|
|
+let filecontent = $ref('');
|
|
|
+let ban_id = $ref([]);
|
|
|
+let isBanned = $ref(false)
|
|
|
+let ban_me = $ref(false);
|
|
|
+let login_data = $ref({});
|
|
|
+let login_id = $ref([]);
|
|
|
+ws.addEventListener('message', (e) => {
|
|
|
+ if (e.data) {
|
|
|
+ try {
|
|
|
+ const data = JSON.parse(e.data)
|
|
|
+ // console.log(data,'data');
|
|
|
+ if (data.type !== 'ping') {
|
|
|
+ // console.log('ws message :>> ', data);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.type === 'login') {
|
|
|
+ const [id, name, banned] = data.client_name.split('|');
|
|
|
+ // console.log(noSayId);
|
|
|
+ login_data = {
|
|
|
+ id, name, banned
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data.type === 'say') {
|
|
|
+ const [id, name,] = data.from_client_name.split('|')
|
|
|
+ const fileType = data.content.split("|")[1];
|
|
|
+ const fileContent = data.content.split("|")[0];
|
|
|
+ console.log(fileContent, visiable);
|
|
|
+ console.log(fileType, 123);
|
|
|
+ if (fileType) {
|
|
|
+ visiable = true;
|
|
|
+ filecontent = fileContent
|
|
|
+ console.log(filecontent, 'kankan');
|
|
|
+ switch (fileType) {
|
|
|
+ case 'home':
|
|
|
+ title = '作业';
|
|
|
+ break
|
|
|
+ case 'file':
|
|
|
+ title = '文件';
|
|
|
+ break
|
|
|
+ case 'dxa':
|
|
|
+ title = '课时导学案';
|
|
|
+ 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) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+ws.addEventListener('error', (err) => {
|
|
|
+ console.error('ws error :>> ', err);
|
|
|
+})
|
|
|
+
|
|
|
+ws.addEventListener('open', (e) => {
|
|
|
+ ws.send(JSON.stringify({
|
|
|
+ "type": "login",
|
|
|
+ // "client_id": user.user_id,
|
|
|
+ "client_name": user.value.user_id + '|' + user.value.user_realname,
|
|
|
+ "room_id": 'zbkc' + props.id
|
|
|
+ }))
|
|
|
+})
|
|
|
+
|
|
|
+const msg = ref('')
|
|
|
+
|
|
|
+const chatItemBox = ref()
|
|
|
+
|
|
|
+function handleSendClick(item, name) {
|
|
|
+ ws.send(JSON.stringify({
|
|
|
+ type: "say",
|
|
|
+ to_client_id: 'all',
|
|
|
+ to_client_name: '所有人',
|
|
|
+ content: item + '|' + name,
|
|
|
+ }))
|
|
|
+ msg.value = ''
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+let noSayId = [];
|
|
|
+
|
|
|
+
|
|
|
+function filePre(item) {
|
|
|
+ emits('filePre', item)
|
|
|
+}
|
|
|
+
|
|
|
+function download(item) {
|
|
|
+ // window.open(getFullUrl(item), '_blank');
|
|
|
+ const ext = item.split(';')[2].split('.').at(-1).toLowerCase()
|
|
|
+ downLoadFile1(getFullUrl(item.split(';')[2]), `${item.split(';')[0]}.${ext}`)
|
|
|
+}
|
|
|
+</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 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">
|
|
|
+ {{ props?.dxa.split(';')[0] }}
|
|
|
+ </p>
|
|
|
+ </el-tooltip>
|
|
|
+ <button class="button" @click="filePre(props?.dxa.split(';')[2])">查看</button>
|
|
|
+ <button class="button" @click="handleSendClick(props?.dxa.split(';')[2], 'dxa')">下发</button>
|
|
|
+ </li>
|
|
|
+ <li v-if="props?.homework" class="chat_li flex justify-between items-center px-15px">
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="props?.homework.split(';')[0]"
|
|
|
+ placement="top-start">
|
|
|
+ <p class="w-129px truncate text-14px py-4px">
|
|
|
+ {{ props?.homework.split(';')[0] }}
|
|
|
+ </p>
|
|
|
+ </el-tooltip>
|
|
|
+ <button class="button" @click="filePre(props?.homework.split(';')[2])">查看</button>
|
|
|
+ <button class="button" @click="handleSendClick(props?.homework.split(';')[2], 'home')">下发</button>
|
|
|
+ </li>
|
|
|
+ <li v-if="props?.file" class="chat_li flex justify-between items-center px-15px">
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="props?.file.split(';')[0]" placement="top-start">
|
|
|
+ <p class="w-129px truncate text-14px py-4px">
|
|
|
+ {{ props?.file.split(';')[0] }}
|
|
|
+ </p>
|
|
|
+ </el-tooltip>
|
|
|
+ <button class="button" @click="filePre(props?.file.split(';')[2])">查看</button>
|
|
|
+ <button class="button" @click="handleSendClick(props?.file.split(';')[2], 'file')">下发</button>
|
|
|
+ </li>
|
|
|
+ <!-- <li v-show="item.content" v-for="item in msgList"
|
|
|
+ class="mb-5px px-10px py-5px chat_li rounded-10px relative" :key="item.id">
|
|
|
+ <div class="flex flex-col flex-auto">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <span class="text-14px mb-5px font-bold">{{ item.name }}</span>
|
|
|
+ <div v-if="user.user_role_id === '75'" class="">
|
|
|
+ <img v-if="!item.bannedN" @click="banText(item)" :src="text" alt="">
|
|
|
+ <img v-else :src="notext" @click="JCText(item)" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mb-3 rounded-md min-h-20px box-content">
|
|
|
+ <p class="word_wrap text-16px" v-html="item.content"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ </ul>
|
|
|
+ </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="props?.file.split(';')[0]" placement="top-start">
|
|
|
+ <p class="min-w-100px truncate text-14px py-4px">
|
|
|
+ {{ props?.file.split(';')[0] }}
|
|
|
+ </p>
|
|
|
+ </el-tooltip>
|
|
|
+ <div>
|
|
|
+ <button class="button" @click="filePre(props?.file.split(';')[2])">查看</button>
|
|
|
+ <button class="button" @click="download(props?.file)">下载</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </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> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$color: #1259A1;
|
|
|
+
|
|
|
+.chat_li {
|
|
|
+ // background-color: rgba($color: #000000, $alpha: .4);
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.button {
|
|
|
+ border: 1px solid $color;
|
|
|
+ border-radius: 15px;
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ margin-right: 5px;
|
|
|
+ // padding: 3px 18px;
|
|
|
+ color: $color;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+// :deep(.box-content){
|
|
|
+.word_wrap {
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+// }
|
|
|
+::v-deep .input {
|
|
|
+ width: 380px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba($color: #fff, $alpha: 0.3) !important;
|
|
|
+
|
|
|
+ .el-input__wrapper {
|
|
|
+ width: 380px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba($color: #fff, $alpha: 0.7) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-button {
|
|
|
+ width: 111px !important;
|
|
|
+ height: 32px;
|
|
|
+ opacity: 0.7;
|
|
|
+ background: linear-gradient(90deg, #2586e9 1%, #57c6d8 100%);
|
|
|
+ border-radius: 38px;
|
|
|
+ padding: 5px 40px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.home_scroll::-webkit-scrollbar {
|
|
|
+ width: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.home_scroll::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: $color;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 122, 204);
|
|
|
+}
|
|
|
+
|
|
|
+.home_scroll::-webkit-scrollbar-track {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #ededed;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
|
|
|
+}
|
|
|
+
|
|
|
+.home_scroll {
|
|
|
+ scrollbar-width: 2px;
|
|
|
+ scrollbar-color: $color #fff;
|
|
|
+}
|
|
|
+</style>
|
ZhaoJing