Skip to content

S
standalone-anyremote
Commit 3804a457 by pangchong
Options

feat: 聊天优化

parent f647ec63
Showing with 243 additions and 75 deletions
src/api/alova-instance.ts
...@@ -41,7 +41,6 @@ export const alova = createAlova({ ...@@ -41,7 +41,6 @@ export const alova = createAlova({
// 设置请求头application/json;charset=UTF-8 // 设置请求头application/json;charset=UTF-8
// @ts-ignore // @ts-ignore
const isUpload = method.config?.meta?.isUpload const isUpload = method.config?.meta?.isUpload
console.log('the upload here', isUpload, method)
if (isUpload && method.data) { if (isUpload && method.data) {
method.data = Object.entries(method.data).reduce(function (q, w) { method.data = Object.entries(method.data).reduce(function (q, w) {
if (!(w[1] instanceof File)) { if (!(w[1] instanceof File)) {
......
src/assets/icons/focus.svg 0 → 100644
<svg t="1715069371818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2164" width="200" height="200"><path d="M554.666667 42.666667l0.042666 130.645333c154.368 19.264 276.736 141.653333 295.978667 296.021333H981.333333v85.333334l-130.645333 0.042666c-19.264 154.368-141.610667 276.693333-295.978667 295.978667L554.666667 981.333333h-85.333334v-130.645333c-154.389333-19.242667-276.757333-141.610667-296.021333-295.978667L42.666667 554.666667v-85.333334h130.645333C192.554667 314.944 314.944 192.554667 469.333333 173.312V42.666667h85.333334z m-42.666667 213.333333c-141.376 0-256 114.624-256 256s114.624 256 256 256 256-114.624 256-256-114.624-256-256-256z m0 170.666667a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666z" p-id="2165"></path></svg>
\ No newline at end of file
src/views/layout/gMenu.vue
...@@ -32,9 +32,11 @@ const goRoute = (name: string) => { ...@@ -32,9 +32,11 @@ const goRoute = (name: string) => {
color: var(--color-text-2); color: var(--color-text-2);
&.arco-menu-selected { &.arco-menu-selected {
color: rgb(var(--primary-6)); color: rgb(var(--primary-6));
background: var(--color-fill-2);
} }
&:hover { &:hover {
color: rgb(var(--primary-6)); color: rgb(var(--primary-6));
background: var(--color-fill-2);
} }
} }
:deep(.arco-menu-inline-header.arco-menu-selected) { :deep(.arco-menu-inline-header.arco-menu-selected) {
......
src/views/remote/contacts/constants/data.config.ts
...@@ -31,6 +31,12 @@ export const columns: TableColumnData[] = [ ...@@ -31,6 +31,12 @@ export const columns: TableColumnData[] = [
title: '会议时间', title: '会议时间',
dataIndex: 'createdTime', dataIndex: 'createdTime',
slotName: 'createdTime' slotName: 'createdTime'
},
{
title: '操作',
align: 'center',
dataIndex: 'operation',
slotName: 'operation'
} }
// { // {
// title: '结束时间', // title: '结束时间',
...@@ -45,25 +51,3 @@ export const columns: TableColumnData[] = [ ...@@ -45,25 +51,3 @@ export const columns: TableColumnData[] = [
// dataIndex: 'attachment' // dataIndex: 'attachment'
// } // }
] ]
export const tableData = reactive([
{
key: '1',
eventName: '2024-02-17 10:22:23远程协助事件',
initiator: '李豫卓',
position: '标签',
startTime: '2024-02-17 04:56:46',
endTime: '2024-02-14 22:33:11',
duration: '09:22',
attachment: '无附件'
},
{
key: '2',
eventName: '2024-02-17 10:22:23远程协助事件',
initiator: '李豫卓',
position: '标签',
startTime: '2024-02-17 04:56:46',
endTime: '2024-02-14 22:33:11',
duration: '09:22',
attachment: '无附件'
}
])
src/views/remote/contacts/eventDetails.vue 0 → 100644
<template>
<div class="g-block ml-4 px-4">
<div class="flex justify-between">
<div class="flex items-center space-x-8">
<icon-left :size="20" />
<span>2023-10-26 10:15:54通话事件</span>
</div>
<a-radio-group v-model="active">
<template v-for="(item, i) in tabs" :key="i">
<a-radio :value="i">
<template #radio="{ checked }">
<a-tag size="large" :checked="checked" checkable>{{ item.label }}</a-tag>
</template>
</a-radio>
</template>
</a-radio-group>
</div>
<div class="flex items-center py-8">
<a-avatar-group :size="40">
<global-avatar :icon-size="15"></global-avatar>
<global-avatar :icon-size="15"></global-avatar>
</a-avatar-group>
<span class="ml-2">专家1,维修1 参与过该事件</span>
</div>
</div>
</template>
<script setup lang="ts">
import { IconLeft } from '@arco-design/web-vue/es/icon'
const details = {
total: '3',
pageIndex: '1',
pageSize: '10',
list: [
{
_id: '6539d2f6561a4d043c508871',
channelId: '2_1698288370581',
closeTime: '1970-01-01T08:00:00',
companyId: '1',
content: 'https://video.anyremote.cn:444/89169459-01e2-4594-a01a-cbbca9dd5bab/0_20231026024612670.mp4',
createdTime: 1698288374814,
fileMd5: '',
fileName: '0_20231026024612670.mp4',
fileSize: '351399',
fileSizeTxt: '',
fileType: 'video',
fileUploadId: '1717372034058698754',
fileUrl: 'https://video.anyremote.cn:444/89169459-01e2-4594-a01a-cbbca9dd5bab/0_20231026024612670.mp4',
fromId: '2',
isDel: '0',
isTop: '0',
msgId: '',
quoteId: '',
readUid: '2',
receiveUid: ',7,',
status: '',
toId: '-2',
updatedTime: 1698288374814,
videoDuration: '1',
videoDurationTxt: ''
},
{
_id: '6539d2f2561a4d043c508870',
channelId: '2_1698288370581',
closeTime: '1970-01-01T08:00:00',
companyId: '1',
content: '专家1加入了通话',
createdTime: 1698288370706,
fileMd5: '',
fileName: '',
fileSize: '0',
fileSizeTxt: '',
fileType: 'txt',
fileUploadId: '0',
fileUrl: '',
fromId: '2',
isDel: '0',
isTop: '0',
msgId: '',
quoteId: '',
readUid: '2',
receiveUid: ',7,',
status: '',
toId: '',
updatedTime: 1698288370706,
videoDuration: '0',
videoDurationTxt: ''
},
{
_id: '6539d2f2561a4d043c50886f',
channelId: '2_1698288370581',
closeTime: '1970-01-01T08:00:00',
companyId: '1',
content: '维修1加入了通话',
createdTime: 1698288370696,
fileMd5: '',
fileName: '',
fileSize: '0',
fileSizeTxt: '',
fileType: 'txt',
fileUploadId: '0',
fileUrl: '',
fromId: '7',
isDel: '0',
isTop: '0',
msgId: '',
quoteId: '',
readUid: '7',
receiveUid: ',7,',
status: '',
toId: '',
updatedTime: 1698288370696,
videoDuration: '0',
videoDurationTxt: ''
}
]
}
const active = ref(0)
const tabs = ref([
{ value: 0, label: '全部' },
{ value: 1, label: '图片' },
{ value: 2, label: '文档' },
{ value: 3, label: '视频' }
])
</script>
<style lang="less" scoped>
.arco-tag {
padding: 5px 16px;
&.arco-tag-checked,
&:hover {
background: var(--color-fill-2);
border-radius: 10px;
color: rgb(var(--primary-6));
}
}
.arco-radio-group .arco-radio {
margin-right: 12px;
}
</style>
src/views/remote/contacts/eventInfo.vue 0 → 100644
<template>
<!-- 事件列表 -->
<event-list></event-list>
<!-- 事件详情 -->
<!-- <event-details></event-details> -->
</template>
<script setup lang="ts">
import EventList from './eventList.vue'
import EventDetails from './eventDetails.vue'
</script>
<style lang="less" scoped></style>
src/views/remote/contacts/eventList.vue
...@@ -28,6 +28,9 @@ ...@@ -28,6 +28,9 @@
<template #createdTime="{ record }"> <template #createdTime="{ record }">
{{ Day(parseInt(record.createdTime)).format('YYYY-MM-DD HH:mm:ss') }} {{ Day(parseInt(record.createdTime)).format('YYYY-MM-DD HH:mm:ss') }}
</template> </template>
<template #operation="{ record }">
<a-button type="text" @click="showDetails(record.channelId)">查看详情</a-button>
</template>
</a-table> </a-table>
</div> </div>
<div class="px-4"> <div class="px-4">
...@@ -43,6 +46,7 @@ import { alova } from '@/api/alova-instance' ...@@ -43,6 +46,7 @@ import { alova } from '@/api/alova-instance'
import useContactsStore from '@/store/contacts/index' import useContactsStore from '@/store/contacts/index'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import Day from '@/utils/dayjs' import Day from '@/utils/dayjs'
import { Message } from '@arco-design/web-vue'
const beginTime = ref('') const beginTime = ref('')
const endTime = ref('') const endTime = ref('')
...@@ -118,6 +122,20 @@ const getInitiatorName = (record: any) => { ...@@ -118,6 +122,20 @@ const getInitiatorName = (record: any) => {
const getParticipantsName = (userList: any[]) => { const getParticipantsName = (userList: any[]) => {
return userList.map((item) => item.nickname).join(',') return userList.map((item) => item.nickname).join(',')
} }
//显示详情
const showDetails = async (channelId: string) => {
const params = {
uid: 2,
projectName: 'mu',
channelId
}
const res = await alova.Post<any>('/call/getChatRoomMsgList', params, { meta: { loading: true } })
if (res.code == 200) {
console.log(res.data)
} else {
Message.error(res.message)
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.arco-table-th) { :deep(.arco-table-th) {
......
src/views/remote/contacts/index.vue
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
</a-col> </a-col>
<a-col :flex="13" class="h-full"> <a-col :flex="13" class="h-full">
<!-- 事件列表 --> <!-- 事件列表 -->
<event-list></event-list> <event-info></event-info>
</a-col> </a-col>
</a-row> </a-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import ContactsInfo from './contactsInfo.vue' import ContactsInfo from './contactsInfo.vue'
import EventList from './eventList.vue' import EventInfo from './eventInfo.vue'
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>
src/views/remote/videoCall/chatDetails.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<global-icon icon="file"></global-icon> <global-icon icon="file"></global-icon>
<span class="ml-3">{{ data.fileName || '' }}</span> <span class="ml-3">{{ data.fileName || '' }}</span>
</div> </div>
<global-icon icon="download" class="cursor-pointer"></global-icon> <a :href="data.src" download target="_blank"><global-icon icon="download" class="cursor-pointer"></global-icon></a>
</div> </div>
</template> </template>
<template v-else> <template v-else>
...@@ -42,6 +42,5 @@ const ps = withDefaults(defineProps<Props>(), { ...@@ -42,6 +42,5 @@ const ps = withDefaults(defineProps<Props>(), {
type: 'txt', type: 'txt',
data: () => {} data: () => {}
}) })
console.log('pass-in-p', ps);
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>
src/views/remote/videoCall/videoChat.vue
...@@ -34,27 +34,33 @@ ...@@ -34,27 +34,33 @@
</div> </div>
<div class="px-4 py-2"> <div class="px-4 py-2">
<a-space size="medium"> <a-space size="medium">
<a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*"> <a-tooltip content="发送图片">
<template #upload-button> <a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*">
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1"> <template #upload-button>
<global-icon :size="15" icon="image"></global-icon> <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
</div> <global-icon :size="15" icon="image"></global-icon>
</template> </div>
</a-upload> </template>
<a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :show-file-list="false" accept=".pdf"> </a-upload>
<template #upload-button> </a-tooltip>
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1"> <a-tooltip content="发送pdf">
<global-icon :size="15" icon="pdf"></global-icon> <a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :show-file-list="false" accept=".pdf">
</div> <template #upload-button>
</template> <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
</a-upload> <global-icon :size="15" icon="pdf"></global-icon>
<a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*"> </div>
<template #upload-button> </template>
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1"> </a-upload>
<global-icon :size="15" icon="video"></global-icon> </a-tooltip>
</div> <a-tooltip content="发送视频">
</template> <a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*">
</a-upload> <template #upload-button>
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
<global-icon :size="15" icon="video"></global-icon>
</div>
</template>
</a-upload>
</a-tooltip>
</a-space> </a-space>
<a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入" @keydown.enter="sendMessageText" /> <a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入" @keydown.enter="sendMessageText" />
</div> </div>
...@@ -92,35 +98,37 @@ const uploadMuFile = (option: any, type: string) => { ...@@ -92,35 +98,37 @@ const uploadMuFile = (option: any, type: string) => {
requestFrom: 6, requestFrom: 6,
uid: 4 uid: 4
} }
return alova return (
// @ts-ignore alova
.Post<any>('/admin/uploadMuFile', params, { meta: { isUpload: true } }) // @ts-ignore
.then((res) => { .Post<any>('/admin/uploadMuFile', params, { meta: { isUpload: true } })
if (res.code == 200) { .then((res) => {
console.log('发送内容', res) if (res.code == 200) {
const dataFormed = { console.log('发送内容', res)
fileUrl: res.data.url, const dataFormed = {
fileName: res.data.name, fileUrl: res.data.url,
fileSize: Number.parseInt(res.data.size), fileName: res.data.name,
fileType: type fileSize: Number.parseInt(res.data.size),
} fileType: type
if (type === 'pdf') { }
AnyR?.agora.sendFile(dataFormed) if (type === 'pdf') {
} else if (type === 'image') { AnyR?.agora.sendFile(dataFormed)
AnyR?.agora.sendImage(dataFormed) } else if (type === 'image') {
AnyR?.agora.sendImage(dataFormed)
} else {
AnyR?.agora.sendVideo(dataFormed)
}
Message.success('发送成功')
} else { } else {
AnyR?.agora.sendVideo(dataFormed) onError(new Error('Upload failed'))
Message.error('发送失败')
} }
Message.success('发送成功') })
} else { .catch((error) => {
onError(new Error('Upload failed')) console.log('出现错误', error)
Message.error('发送失败') onError(error)
} }) as any
}) )
.catch((error) => {
console.log('出现错误', error)
onError(error)
}) as any
} }
const mapChatMessageQueue = computed(function () { const mapChatMessageQueue = computed(function () {
......
src/views/remote/videoCall/videoTools.vue
...@@ -52,6 +52,10 @@ ...@@ -52,6 +52,10 @@
<global-icon icon="mic-off" :size="21"></global-icon> <global-icon icon="mic-off" :size="21"></global-icon>
<span class="mt-1 color-text-2">全体静音</span> <span class="mt-1 color-text-2">全体静音</span>
</div> </div>
<div class="w-[120px] h-[72px] item">
<global-icon icon="focus" :size="21"></global-icon>
<span class="mt-1 color-text-2">动态标注</span>
</div>
</div> </div>
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment