SH-Arbitrate/Arbitrate-FrontendH5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'页面优化'

Browse Source
This commit is contained in:
gyj
2024-04-18 14:59:15 +08:00
parent e09b87b053
commit 38ac830a62
8 changed files with 1393 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+4
View File
@@ -22,3 +22,7 @@ pnpm-debug.log*
*.njsproj
*.sln
*.sw?
node_modules
node_modules
node_modules
node_modules
package-lock.json
Generated
+41 -43
View File
@@ -2044,49 +2044,6 @@
"webpack-merge": "^5.7.3",
"webpack-virtual-modules": "^0.4.2",
"whatwg-fetch": "^3.6.2"
},
"dependencies": {
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.11.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
"integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
}
}
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/cli-shared-utils": {
@@ -2251,6 +2208,47 @@
}
}
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.11.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
"integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/web-component-wrapper": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
src/api/room.js
+1 -1
View File
@@ -1,6 +1,6 @@
import axios from "@/utils/request";
let baseUrlZC = 'https://api.xayunmei.com/zhongcaiapi';
let baseUrl = 'https://api.xayunmei.com/tiaojieapitest';
let baseUrl = 'https://api.xayunmei.com/tiaojieapi';
// let baseUrl = 'http://121.40.189.20:6001';
// 开始云端录制
export function startVideo(data) {
src/router/index.js
+21 -9
View File
@@ -6,7 +6,7 @@ const routes = [
{
path: "/",
component: () => import("../views/home.vue"),
redirect:'home'
redirect: 'home'
},
{
path: "/home",
@@ -16,16 +16,28 @@ const routes = [
},
{
path:"/room",
name:"Room",
component:()=>import("../views/room.vue"),
meta:{title:"房间"}
path: "/room",
name: "Room",
component: () => import("../views/room.vue"),
meta: { title: "房间" }
},
{
path:"/onlyOffice",
name:"onlyOffice",
component:()=>import("../views/onlyOffice.vue"),
meta:{title:"在线文档"}
path: "/onlyOffice",
name: "onlyOffice",
component: () => import("../views/onlyOffice.vue"),
meta: { title: "在线文档" }
},
{
path: "/test",
name: "test",
component: () => import("../views/test.vue"),
meta: { title: "test" }
},
{
path: "/testRoom",
name: "testRoom",
component: () => import("../views/testRoom.vue"),
meta: { title: "testRoom" }
}
]
src/views/components/roomFooter.vue
+99 -71
View File
@@ -1,106 +1,134 @@
<template>
<div class="roomFooter">
<div class="outRoom">
<el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
<el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
<el-button type="danger" @click="exitRoom" v-if="!roleFlag"
>退出房间</el-button
>
<el-button type="danger" @click="exitRoom" v-if="roleFlag"
>解散房间</el-button
>
</div>
<div class="operation">
<div class="mic">
<img class="micImg" src="@/assets/mic_on.png" alt="" v-if="micFlag" @click="micClickOn">
<img class="micImg" src="@/assets/mic_off.png" alt="" v-else @click="micClickOff">
<img
class="micImg"
src="@/assets/mic_on.png"
alt=""
v-if="micFlag"
@click="micClickOn"
/>
<img
class="micImg"
src="@/assets/mic_off.png"
alt=""
v-else
@click="micClickOff"
/>
</div>
<div class="video">
<img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn">
<img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff">
<img
class="videoImg"
src="@/assets/video_on.png"
alt=""
v-if="videoFlag"
@click="videoClickOn"
/>
<img
class="videoImg"
src="@/assets/video_off.png"
alt=""
v-else
@click="videoClickOff"
/>
</div>
<div class="sharing">
<img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn">
<img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff">
<img
class="sharImg"
src="@/assets/screenShare_on.png"
alt=""
v-if="sharFlag"
@click="sharClickOn"
/>
<img
class="sharImg"
src="@/assets/screenShare_off.png"
alt=""
v-else
@click="sharClickOff"
/>
</div>
</div>
</div>
</template>
</template>
<script>
import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
export default {
name: 'Footer',
// props: [
// "roomId"
// ],
components: {
},
import { startVideo, stopVideo, destructionRoom } from "@/api/room.js";
export default {
name: "Footer",
props: ["micFlag","videoFlag","sharFlag"],
components: {},
data() {
return {
roomId: null,
taskId: null,
roleFlag: true,
caseId: "",
micFlag: true,
videoFlag: true,
sharFlag: true,
};
},
methods: {
// 解散房间
destructionRoomFn(data) {
destructionRoom(data).then(res => {
destructionRoom(data).then((res) => {
console.log(res, "解散房间");
})
});
},
/**开启麦克风 */
micClickOn() {
this.micFlag = false;
this.$emit('micClickOn');
this.$emit("micClickOn");
},
/**关闭麦克风 */
micClickOff() {
this.micFlag = true;
this.$emit('micClickOff');
this.$emit("micClickOff");
},
/**开启摄像头 */
videoClickOn() {
this.videoFlag = false;
this.$emit('videoClickOn');
this.$emit("videoClickOn");
},
/**关闭摄像头 */
videoClickOff() {
this.videoFlag = true;
this.$emit('videoClickOff');
this.$emit("videoClickOff");
},
/**共享屏幕 */
sharClickOn(){
this.sharFlag = false;
this.$emit('sharClickOn');
sharClickOn() {
this.$emit("sharClickOn");
},
/**关闭共享屏幕 */
sharClickOff(){
sharClickOff() {
this.sharFlag = true;
this.$emit('sharClickOff');
this.$emit("sharClickOff");
},
exitRoom() {
if (this.roleFlag) {
this.stopVideoFn();
this.destructionRoomFn({ roomId: this.roomId })
this.$emit('exitRoom');
this.destructionRoomFn({ roomId: this.roomId });
this.$emit("exitRoom");
} else {
this.$emit('exitRoom');
this.$emit("exitRoom");
}
},
async startVideoFn() {
await startVideo({
caseId: this.caseId,
roomId: this.roomId
}).then(res => {
this.taskId = res.data.taskId
roomId: this.roomId,
}).then((res) => {
this.taskId = res.data.taskId;
console.log(res.data.taskId, "pppppp");
})
});
},
stopVideoFn() {
stopVideo(this.taskId).then(res => {
stopVideo(this.taskId).then((res) => {
console.log(res, "KKKKKK");
})
});
},
},
async mounted() {
@@ -115,62 +143,62 @@
// console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
// });
},
};
</script>
};
</script>
<style scoped>
.roomFooter {
.roomFooter {
width: 100%;
height: 100%;
display: flex;
flex-direction: row-reverse;
}
}
.mic,
.video,
.sharing,
.outRoom {
.mic,
.video,
.sharing,
.outRoom {
cursor: pointer;
width: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.operation {
.operation {
width: 90%;
height: 100%;
display: flex;
align-items: center;
}
}
.iconImg {
.iconImg {
width: 30%;
height: 60%;
}
}
.title {
.title {
color: aliceblue;
}
}
.empty {
.empty {
width: 60%;
height: 100%;
}
}
.mic,
.video,
.sharing {
.mic,
.video,
.sharing {
width: 60px;
height: 60px;
margin-left: 20px;
}
}
.micImg,
.videoImg,
.sharImg {
.micImg,
.videoImg,
.sharImg {
width: 40px;
height: 40px;
}
</style>
}
</style>
src/views/room.vue
+157 -76
View File
@@ -2,38 +2,42 @@
<div class="page">
<div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
<div class="txtContent">
<el-tag type="danger" @click="txtContent">会议内容</el-tag>
<el-tag type="danger" @click="txtContent" v-if="modileFlag"
>会议内容</el-tag
>
</div>
<div :class="userClass" :style="{ height: userHeight }" id="localStream">
<div class="content">
<div class="screenShare" v-if="screenShareFlag"></div>
<div :class="videoList">
<div :class="videoClass" id="localStream">
<div class="userName">{{ userId }}</div>
</div>
<div :class="userClass" :style="{ height: userHeight }" v-for="(item, index) in userList" :key="index"
:id="item">
<div
:class="videoClass"
v-for="(item, index) in userList"
:key="index"
:id="item"
>
<div class="userName">{{ item }}</div>
</div>
<div class="footer">
<roomFooter @exitRoom="exitRoom" :roomId="roomId"></roomFooter>
</div>
</div>
<div class="roomPhone" v-if="!modileFlag">
<div class="header">
<roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
<div class="footerList">
<roomFooter
@exitRoom="exitRoom"
@micClickOn="micClickOn"
@micClickOff="micClickOff"
@videoClickOn="videoClickOn"
@videoClickOff="videoClickOff"
@sharClickOn="sharClickOn"
@sharClickOff="sharClickOff"
:roomId="roomId"
:micFlag="micFlag"
:videoFlag="videoFlag"
:sharFlag="sharFlag"
></roomFooter>
</div>
<div class="bodyVideo">
<div :class="userClassPhone" id="localStream">
<div class="userNamePhone">{{ userId }}</div>
</div>
<div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
<div class="userNamePhone">{{ item }}</div>
</div>
</div>
</div>
<!-- 语音转文字弹窗 -->
<el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
<quill-editor ref="myQuillEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)"
@focus="onEditorFocus($event)" @ready="onEditorReady($event)"></quill-editor>
<el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button>
</el-drawer>
</div>
<div class="roomPhone" v-if="!modileFlag">
<div class="header">
@@ -118,7 +122,7 @@
style="color: #104fad; cursor: pointer"
v-for="(item, index) in applicantFile"
:key="index"
@click="preview(item,0)"
@click="preview(item, 0)"
>
{{ item.annexName }}
</div>
@@ -129,7 +133,7 @@
style="color: #104fad; cursor: pointer"
v-for="(item, index) in resFile"
:key="index"
@click="preview(item,0)"
@click="preview(item, 0)"
>
{{ item.annexName }}
</div>
@@ -140,7 +144,7 @@
style="color: #104fad; cursor: pointer"
v-for="(item, index) in mediateFile"
:key="index"
@click="preview(item,1)"
@click="preview(item, 1)"
>
{{ item.annexName }}
</div>
@@ -163,6 +167,7 @@
>确认修改内容</el-button
>
</el-drawer>
</div>
</template>
<script>
@@ -193,9 +198,10 @@ export default {
},
data() {
return {
videoList: "videoList",
videoClass: "videoItem",
resFlag: null,
appFlag: null,
userClass: "userVideo5",
userClassPhone: "userVideoPhone",
userList: [],
userHeight: "100%",
@@ -209,6 +215,7 @@ export default {
localStreamAsr: null,
contentValue: "",
textVisible: false,
screenShareFlag: false,
editorOption: {
// Some Quill options...
},
@@ -217,7 +224,7 @@ export default {
token: "",
applicantFile: [],
resFile: [],
mediateFile:[],
mediateFile: [],
headers: {
// Authorization: "Bearer " + token,
Authorization: "",
@@ -249,13 +256,73 @@ export default {
},
fileList3: [],
editFlag: false,
micFlag: true,
videoFlag: true,
sharFlag: true,
};
},
methods: {
/**点击开启麦克风图标，关闭麦克风 */
micClickOn() {
trtc.updateLocalAudio({ mute: true }).then(() => {
this.micFlag = false;
this.$message({
message: "麦克风关闭",
type: "success",
});
});
},
/**点击关闭麦克风图标，开启麦克风 */
micClickOff() {
trtc.updateLocalAudio({ mute: false }).then(() => {
this.micFlag = true;
this.$message({
message: "麦克风开启",
type: "success",
});
});
},
/**点击开启摄像头图标，关闭摄像头 */
videoClickOn() {
trtc.updateLocalVideo({ mute: true }).then(() => {
this.videoFlag = false;
this.$message({
message: "摄像头已关闭",
type: "success",
});
});
},
/**点击关闭摄像头图标，开启摄像头 */
videoClickOff() {
trtc.updateLocalVideo({ mute: false }).then(() => {
this.videoFlag = true;
this.$message({
message: "摄像头已开启",
type: "success",
});
});
},
/**共享屏幕 */
sharClickOn() {
this.sharFlag = false;
this.videoList = "videoList1";
this.videoClass = "videoItem2";
this.screenShareFlag = true;
},
/**关闭共享屏幕 */
sharClickOff() {
this.sharFlag = true;
this.videoList = "videoList";
this.screenShareFlag = false;
if(this.userList.length >= 1){
this.videoClass = "videoItem1";
}else{
this.videoClass = "videoItem";
}
},
/**获取当前用户操作权限 */
getMenuPermsByUserFn() {
getMenuPermsByUser().then((res) => {
// console.log(res.perms, "KKKKKKKKKKKKKKKKKKKKKKKKKKKKKK");
this.editFlag = res.perms.includes("caseManagement:list:editOffice");
});
},
@@ -306,11 +373,11 @@ export default {
this.$refs.upload3.clearFiles();
this.selectByIdFn(this.caseId);
},
preview(item,flag) {
preview(item, flag) {
if (item.onlyOfficeFileId) {
this.$router.push({
path: "/onlyoffice",
query: { id: item.onlyOfficeFileId,flag:flag },
query: { id: item.onlyOfficeFileId, flag: flag },
});
} else {
window.open(
@@ -378,8 +445,8 @@ export default {
this.applicantFile.push(item);
} else if (item.annexType == 12) {
this.resFile.push(item);
}else if (item.annexType == 7){
this.mediateFile.push(item)
} else if (item.annexType == 7) {
this.mediateFile.push(item);
}
});
});
@@ -444,13 +511,6 @@ export default {
`<span>${res.result.voice_text_str}</span>`;
};
}, 2000);
if (this.modileFlag) {
this.userClass = getWidth(this.userList);
this.userHeight = getHeight(this.userList);
} else {
this.userClassPhone = getWidthPhone(this.userList);
}
setTimeout(() => {
trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
});
@@ -476,7 +536,6 @@ export default {
this.userList.splice(deleteIndex, 1);
}
if (this.modileFlag) {
this.userClass = getWidth(this.userList);
this.userHeight = getHeight(this.userList);
} else {
this.userClassPhone = getWidthPhone(this.userList);
@@ -517,6 +576,11 @@ export default {
},
},
async mounted() {
if (this.userList.length == 1) {
this.videoClass = "videoItem";
} else if (this.userList.length > 1) {
this.videoClass = "videoItem1";
}
// 判断设备类型
this.modileFlag = getModile();
let roomId = this.$route.query.roomId;
@@ -608,13 +672,34 @@ export default {
.roompage {
width: 100%;
height: 100vh;
}
.content {
width: 100%;
height: 90%;
display: flex;
}
.videoList {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
margin-bottom: 20px;
position: relative;
}
.videoList1 {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
margin-bottom: 20px;
position: relative;
}
.txtContent {
width: 100px;
height: 50px;
@@ -625,39 +710,27 @@ export default {
cursor: pointer;
}
.userVideo,
.userVideo1,
.userVideo2,
.userVideo3,
.userVideo4,
.userVideo5 {
.videoItem {
width: 100%;
height: 100%;
background: red;
border-radius: 20px;
}
.videoItem1 {
width: 32%;
height: 32%;
background: red;
border-radius: 20px;
}
.videoItem2 {
width: 90%;
height: 25%;
background: red;
border-radius: 20px;
margin-bottom: 20px;
position: relative;
}
.userVideo5 {
width: 100%;
}
.userVideo {
width: 48%;
}
.userVideo1 {
width: 33%;
}
.userVideo2 {
width: 33%;
}
.userVideo3 {
width: 33%;
}
.userVideo4 {
width: 100%;
}
.footer {
width: 100%;
height: 10%;
@@ -666,7 +739,11 @@ export default {
bottom: 0;
z-index: 10;
}
.screenShare {
width: 80%;
height: 100%;
background: yellow;
}
.userName {
border-radius: 10px;
width: 90px;
@@ -680,7 +757,11 @@ export default {
z-index: 9;
color: #ffffff;
}
.footerList {
width: 100%;
height: 10%;
background: green;
}
.userNamePhone {
border-radius: 10px;
min-width: 20%;
src/views/test.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<div class="page">
<div class="content">
<div class="screenShare" v-if="screenShareFlag"></div>
<div :class="videoList">
<div :class="videoClass" v-for="(item, index) in vivdeoList"></div>
</div>
</div>
<div class="footerList">
<button @click="screenShare">分享</button>
<button @click="screenShareQ">取消分享</button>
</div>
</div>
</template>
<script>
export default {
props: [],
data() {
return {
vivdeoList: [1],
videoClass: "videoItem",
videoList: "videoList",
screenShareFlag: false,
};
},
methods: {
screenShare() {
this.videoList = "videoList1";
this.screenShareFlag = true;
this.videoClass = "videoItem2";
},
screenShareQ(){
this.videoList = "videoList";
if(this.vivdeoList.length > 1){
this.videoClass = "videoItem1";
}else{
this.videoClass = "videoItem";
}
this.screenShareFlag = false;
}
},
mounted() {
if (this.vivdeoList.length == 1) {
this.videoClass = "videoItem";
} else if(this.vivdeoList.length > 1){
this.videoClass = "videoItem1";
}
},
watch: {},
};
</script>
<style scoped>
.page {
width: 100%;
height: 100vh;
}
.content {
width: 100%;
height: 90%;
display: flex;
}
.videoList {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
margin-bottom: 20px;
}
.videoList1 {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
margin-bottom: 20px;
}
.screenShare {
width: 80%;
height: 90%;
background: yellow;
}
.footerList {
width: 100%;
height: 10%;
background: green;
}
.videoItem {
width: 100%;
height: 100%;
background: red;
border-radius: 20px;
}
.videoItem1 {
width: 32%;
height: 32%;
background: red;
border-radius: 20px;
}
.videoItem2 {
width: 90%;
height: 25%;
background: red;
border-radius: 20px;
margin-bottom: 20px;
}
</style>
src/views/testRoom.vue
+854
View File
@@ -0,0 +1,854 @@
<template>
<div class="page">
<div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
<div class="txtContent">
<el-tag type="danger" @click="txtContent" v-if="modileFlag"
>会议内容</el-tag
>
</div>
<div class="content">
<div class="screenShare" v-if="screenShareFlag"></div>
<div :class="videoList">
<div :class="videoClass" id="localStream">
<div class="userName">{{ userId }}</div>
</div>
<div
:class="videoClass"
v-for="(item, index) in userList"
:key="index"
:id="item"
>
<div class="userName">{{ item }}</div>
</div>
</div>
</div>
<div class="footerList">
<roomFooter
@exitRoom="exitRoom"
@micClickOn="micClickOn"
@micClickOff="micClickOff"
@videoClickOn="videoClickOn"
@videoClickOff="videoClickOff"
@sharClickOn="sharClickOn"
@sharClickOff="sharClickOff"
:roomId="roomId"
:micFlag="micFlag"
:videoFlag="videoFlag"
:sharFlag="sharFlag"
></roomFooter>
</div>
</div>
<div class="roomPhone" v-if="!modileFlag">
<div class="header">
<roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
</div>
<div class="bodyVideo">
<div :class="userClassPhone" id="localStream">
<div class="userNamePhone">{{ userId }}</div>
</div>
<div
:class="userClassPhone"
v-for="(item, index) in userList"
:key="index"
:id="item"
>
<div class="userNamePhone">{{ item }}</div>
</div>
</div>
</div>
<!-- 语音转文字弹窗 -->
<el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
<div style="margin-left: 20px; margin-bottom: 10px">
<div
style="
width: 100%;
display: flex;
justify-content: space-around;
margin-bottom: 10px;
"
>
<el-upload
ref="upload"
:limit="1"
action="https://api.xayunmei.com/tiaojieapi/video/upload"
:headers="headers"
:data="filedata"
:on-change="beforeUpload"
:on-success="handlSuccess"
:file-list="fileList"
v-if="appFlag"
>
<el-button slot="trigger" size="small" type="primary"
>申请人上传证据</el-button
>
</el-upload>
<el-upload
v-if="resFlag"
ref="upload1"
:limit="1"
action="https://api.xayunmei.com/tiaojieapi/video/upload"
:headers="headers1"
:data="filedata1"
:on-change="beforeUpload1"
:on-success="handlSuccess1"
:file-list="fileList1"
>
<el-button slot="trigger" size="small" type="primary"
>被申请人上传证据</el-button
>
</el-upload>
<el-upload
v-if="editFlag"
ref="upload3"
:limit="1"
action="https://api.xayunmei.com/tiaojieapi/video/upload"
:headers="headers3"
:data="filedata3"
:on-change="beforeUpload3"
:on-success="handlSuccess3"
:file-list="fileList3"
accept=".doc,.docx"
>
<el-button slot="trigger" size="small" type="primary"
>上传调解书</el-button
>
</el-upload>
</div>
<div class="list">
<div class="applicant" v-if="applicantFile.length > 0">
<div>申请人证据</div>
<div
style="color: #104fad; cursor: pointer"
v-for="(item, index) in applicantFile"
:key="index"
@click="preview(item, 0)"
>
{{ item.annexName }}
</div>
</div>
<div class="res" v-if="resFile.length > 0">
<div>被申请人证据</div>
<div
style="color: #104fad; cursor: pointer"
v-for="(item, index) in resFile"
:key="index"
@click="preview(item, 0)"
>
{{ item.annexName }}
</div>
</div>
<div class="mediate" v-if="mediateFile.length > 0">
<div>调解书</div>
<div
style="color: #104fad; cursor: pointer"
v-for="(item, index) in mediateFile"
:key="index"
@click="preview(item, 1)"
>
{{ item.annexName }}
</div>
</div>
</div>
</div>
<quill-editor
ref="myQuillEditor"
v-model="contentValue"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
></quill-editor>
<el-button
class="updataBtn"
@click="updataClick"
type="primary"
:disabled="!updataFlag"
>确认修改内容</el-button
>
</el-drawer>
</div>
</template>
<script>
import { getUsersig, reserveConferenceList } from "@/api/home";
import {
secretaryRoleByUserId,
htmlToPDF,
selectById,
selectRoleMenuByCaseId,
getMenuPermsByUser,
} from "@/api/room";
import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils";
import roomFooter from "./components/roomFooter.vue";
import roomFooterPhone from "./components/footerPhone.vue";
import ASR from "../utils/asr.esm.js";
import TRTC from "trtc-sdk-v5";
let trtc = null;
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
name: "App",
components: {
roomFooter,
roomFooterPhone,
quillEditor,
},
data() {
return {
videoList: "videoList",
videoClass: "videoItem",
resFlag: null,
appFlag: null,
userClassPhone: "userVideoPhone",
userList: [],
userHeight: "100%",
userPhoneHeight: "92%",
userSign: "",
roomId: "",
userId: null,
id: null,
showFlag: false,
modileFlag: false,
localStreamAsr: null,
contentValue: "",
textVisible: false,
screenShareFlag: false,
editorOption: {
// Some Quill options...
},
asrList: {},
updataFlag: true,
token: "",
applicantFile: [],
resFile: [],
mediateFile: [],
headers: {
// Authorization: "Bearer " + token,
Authorization: "",
},
filedata: {
annexType: 2,
officeFlag: 0,
caseId: null,
},
fileList: [],
headers1: {
// Authorization: "Bearer " + token,
Authorization: "",
},
filedata1: {
annexType: 12,
officeFlag: 0,
caseId: null,
},
fileList1: [],
headers3: {
// Authorization: "Bearer " + token,
Authorization: "",
},
filedata3: {
annexType: 7,
officeFlag: 0,
caseId: null,
},
fileList3: [],
editFlag: false,
micFlag: true,
videoFlag: true,
sharFlag: true,
};
},
methods: {
/**点击开启麦克风图标，关闭麦克风 */
micClickOn() {
trtc.updateLocalAudio({ mute: true }).then(() => {
this.micFlag = false;
this.$message({
message: "麦克风关闭",
type: "success",
});
});
},
/**点击关闭麦克风图标，开启麦克风 */
micClickOff() {
trtc.updateLocalAudio({ mute: false }).then(() => {
this.micFlag = true;
this.$message({
message: "麦克风开启",
type: "success",
});
});
},
/**点击开启摄像头图标，关闭摄像头 */
videoClickOn() {
trtc.updateLocalVideo({ mute: true }).then(() => {
this.videoFlag = false;
this.$message({
message: "摄像头已关闭",
type: "success",
});
});
},
/**点击关闭摄像头图标，开启摄像头 */
videoClickOff() {
trtc.updateLocalVideo({ mute: false }).then(() => {
this.videoFlag = true;
this.$message({
message: "摄像头已开启",
type: "success",
});
});
},
/**共享屏幕 */
sharClickOn() {
this.sharFlag = false;
this.videoList = "videoList1";
this.videoClass = "videoItem2";
this.screenShareFlag = true;
},
/**关闭共享屏幕 */
sharClickOff() {
this.sharFlag = true;
this.videoList = "videoList";
this.screenShareFlag = false;
if(this.userList.length >= 1){
this.videoClass = "videoItem1";
}else{
this.videoClass = "videoItem";
}
},
/**获取当前用户操作权限 */
getMenuPermsByUserFn() {
getMenuPermsByUser().then((res) => {
this.editFlag = res.perms.includes("caseManagement:list:editOffice");
});
},
beforeUpload(file, fileList) {
this.fileList = fileList;
if (file.name.indexOf("docx") == -1) {
this.filedata.officeFlag = 0;
} else {
this.filedata.officeFlag = 1;
}
},
// 文件上传成功
handlSuccess(res, file) {
this.$message({
message: "上传成功",
type: "success",
});
this.$refs.upload.clearFiles();
this.selectByIdFn(this.caseId);
},
beforeUpload1(file, fileList) {
this.fileList1 = fileList;
if (file.name.indexOf("docx") == -1) {
this.filedata1.officeFlag = 0;
} else {
this.filedata1.officeFlag = 1;
}
},
// 文件上传成功
handlSuccess1(res, file) {
this.$message({
message: "上传成功",
type: "success",
});
this.$refs.upload1.clearFiles();
this.selectByIdFn(this.caseId);
},
beforeUpload3(file, fileList) {
this.fileList3 = fileList;
this.filedata3.officeFlag = 1;
},
// 文件上传成功
handlSuccess3(res, file) {
this.$message({
message: "上传成功",
type: "success",
});
this.$refs.upload3.clearFiles();
this.selectByIdFn(this.caseId);
},
preview(item, flag) {
if (item.onlyOfficeFileId) {
this.$router.push({
path: "/onlyoffice",
query: { id: item.onlyOfficeFileId, flag: flag },
});
} else {
window.open(
"https://api.xayunmei.com/tiaojieapi" + item.annexPath,
"_black"
);
}
},
// 点击提交修改后的内容
updataClick() {
this.contentValue = this.contentValue.replace(/<br>/g, "");
htmlToPDF({
caseId: this.caseId,
htmlContent: this.contentValue,
}).then((res) => {
if (res.code == 200) {
this.$message({
message: "提交修改成功",
type: "success",
});
} else {
this.$message({
message: res.msg,
type: "error",
});
}
});
},
onEditorBlur(quill) {
console.log("editor blur!", this.content, quill);
},
onEditorFocus(quill) {
if (!this.updataFlag) {
quill.enable(false);
} else {
quill.enable(true);
}
console.log("editor focus!", quill);
},
onEditorReady(quill) {
console.log("editor ready!", quill);
},
onEditorChange({ quill, html, text }) {
console.log("editor change!", quill, html, text);
this.content = html;
},
// 点击显示修改的文本框
txtContent() {
this.textVisible = true;
setInterval(() => {
this.selectByIdFn(this.caseId);
}, 8000);
this.selectRoleMenuByCaseIdFn(this.caseId);
this.getMenuPermsByUserFn();
},
/** 获取证据列表 */
selectByIdFn(id) {
selectById(id).then((res) => {
this.applicantFile = [];
this.resFile = [];
this.mediateFile = [];
let fileList = res.data.caseAttachList;
fileList.forEach((item) => {
if (item.annexType == 2) {
this.applicantFile.push(item);
} else if (item.annexType == 12) {
this.resFile.push(item);
} else if (item.annexType == 7) {
this.mediateFile.push(item);
}
});
});
},
// 鼠标滑过显示操作栏
mouseHover() {
this.showFlag = true;
setTimeout(() => {
this.showFlag = false;
}, 4000);
},
async exitRoom() {
// // 关闭识别
Object.keys(this.asrList).forEach((key) => {
this.asrList[key].stop();
});
this.localStreamAsr.stop();
await trtc.exitRoom();
await trtc.updateLocalVideo({ publish: false });
await trtc.updateLocalAudio({ publish: false });
await trtc.destroy();
this.$router.push({
name: "Home",
});
},
// 获取拉流信息
getPushVideo() {
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => {
const userId = event.userId;
const streamType = event.streamType;
this.userList.push(userId);
setTimeout(() => {
let aoido = trtc.getAudioTrack(userId);
this.asrList[this.userList[this.userList.length - 1]] = new ASR({
secretKey: "INDrIXcT8YmomZBcsy0oNirnU0LTN4X7",
secretId: "AKID3xfHgroY4MQHvLXUXMwIQL1UjmbBX1Tv",
appId: 1304001529,
engine_model_type: "16k_zh",
voice_format: 1,
needvad: 1,
audioTrack: aoido,
});
this.asrList[this.userList[this.userList.length - 1]].start();
// 开始识别
this.asrList[
this.userList[this.userList.length - 1]
].OnRecognitionStart = (res) => {
console.log("远端流：开始识别", res);
};
this.asrList[this.userList[this.userList.length - 1]].OnError = (
res
) => {
console.log("远端流：识别失败", res);
};
// 一句话结束
this.asrList[this.userList[this.userList.length - 1]].OnSentenceEnd =
(res) => {
console.log("远端流：一句话结束", res);
this.contentValue =
this.contentValue +
`<h2>${userId}</h2>` +
`<span>${res.result.voice_text_str}</span>`;
};
}, 2000);
if (this.modileFlag) {
this.userHeight = getHeight(this.userList);
} else {
this.userClassPhone = getWidthPhone(this.userList);
}
setTimeout(() => {
trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
});
// })
});
},
// 删除退出会议人员列表
deletePushVideo() {
trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
const userId = event.userId;
if (this.hostId == userId) {
alert("主持人已经解散会议");
this.$router.push({
name: "Home",
});
this.userList = [];
return;
}
let deleteIndex = this.userList.indexOf(userId);
this.userList = this.userList.filter((item) => item !== userId);
if (deleteIndex !== -1) {
this.userList.splice(deleteIndex, 1);
}
if (this.modileFlag) {
this.userHeight = getHeight(this.userList);
} else {
this.userClassPhone = getWidthPhone(this.userList);
}
Object.keys(this.asrList).forEach((key) => {
this.asrList[userId].stop();
});
});
},
// 根据caseId查询房间相关信息
reserveConferenceListFn(data) {
reserveConferenceList(data).then((res) => {
this.hostId = res.data[0].userName;
});
},
// 根据userid查询是否是秘书角色
secretaryRoleByUserIdFn(data, data1) {
secretaryRoleByUserId(data, data1).then((res) => {
this.updataFlag = res.data.isSecretaryRole;
});
},
/**获取申请人被申请人权限 */
selectRoleMenuByCaseIdFn(caseId) {
selectRoleMenuByCaseId(caseId).then((res) => {
if (res.appFlag && res.appFlag == "1") {
this.appFlag = true;
this.resFlag = false;
} else if (res.resFlag && res.resFlag == "1") {
this.resFlag = true;
this.appFlag = false;
}
});
},
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
async mounted() {
if (this.userList.length == 1) {
this.videoClass = "videoItem";
} else if (this.userList.length > 1) {
this.videoClass = "videoItem1";
}
// 判断设备类型
this.modileFlag = getModile();
let roomId = this.$route.query.roomId;
this.roomId = this.$route.query.roomId;
let userId = this.$route.query.userId;
this.userId = this.$route.query.userId;
this.caseId = this.$route.query.caseId;
this.id = this.$route.query.id;
this.token = this.$route.query.token;
this.headers.Authorization = "Bearer " + this.token;
this.headers1.Authorization = "Bearer " + this.token;
this.headers3.Authorization = "Bearer " + this.token;
this.filedata.caseId = this.caseId;
this.filedata1.caseId = this.caseId;
this.filedata3.caseId = this.caseId;
window.sessionStorage.setItem("token", this.token);
window.sessionStorage.setItem("userId", this.id);
this.secretaryRoleByUserIdFn(this.id, this.caseId);
// 获取主持人的userId
this.reserveConferenceListFn(this.caseId);
const sdkAppId = 1600011167;
// 获取usersign
await getUsersig(userId).then((res) => {
this.userSign = res.msg;
});
this.getPushVideo();
this.deletePushVideo();
try {
await trtc.enterRoom({
roomId: Number(roomId),
scene: "rtc",
sdkAppId,
userId,
userSig: this.userSign,
});
await trtc.startLocalVideo({
view: document.getElementById("localStream"), // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。
});
await trtc.startLocalAudio();
console.log("进房成功");
this.$message({
message: "进房成功",
type: "success",
});
} catch (error) {
console.error("进房失败 " + error);
this.$message({
message: "进房失败",
type: "error",
});
// this.$router.push({
// name: 'Home'
// })
}
this.localStreamAsr = new ASR({
secretKey: "INDrIXcT8YmomZBcsy0oNirnU0LTN4X7",
secretId: "AKID3xfHgroY4MQHvLXUXMwIQL1UjmbBX1Tv",
appId: 1304001529,
engine_model_type: "16k_zh",
voice_format: 1,
needvad: 1,
audioTrack: trtc.getAudioTrack(),
});
this.localStreamAsr.start();
// 开始识别
this.localStreamAsr.OnRecognitionStart = (res) => {
console.log("本地流：开始识别", res);
};
this.localStreamAsr.OnError = (res) => {
console.log("本地流：识别失败", res);
};
// 一句话结束
this.localStreamAsr.OnSentenceEnd = (res) => {
console.log("本地流：一句话结束", res);
// this.contentValue = `<h2>${this.userId}</h2>` + `<span>${res.result.voice_text_str}</span>`;
this.contentValue =
this.contentValue +
`<h2>${this.userId}</h2>` +
`<span>${res.result.voice_text_str}</span>`;
};
},
created() {
trtc = TRTC.create();
},
};
</script>
<style scoped>
.roompage {
width: 100%;
height: 100vh;
}
.content {
width: 100%;
height: 90%;
display: flex;
}
.videoList {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
margin-bottom: 20px;
position: relative;
}
.videoList1 {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
margin-bottom: 20px;
position: relative;
}
.txtContent {
width: 100px;
height: 50px;
position: absolute;
right: 5px;
top: 20px;
z-index: 10;
cursor: pointer;
}
.videoItem {
width: 100%;
height: 100%;
background: red;
border-radius: 20px;
}
.videoItem1 {
width: 32%;
height: 32%;
background: red;
border-radius: 20px;
}
.videoItem2 {
width: 90%;
height: 25%;
background: red;
border-radius: 20px;
margin-bottom: 20px;
position: relative;
}
.footer {
width: 100%;
height: 10%;
background: rgb(46 43 43 / 90%);
position: absolute;
bottom: 0;
z-index: 10;
}
.screenShare {
width: 80%;
height: 100%;
background: yellow;
}
.userName {
border-radius: 10px;
width: 90px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: black;
position: absolute;
right: 0;
bottom: 0;
z-index: 9;
color: #ffffff;
}
.footerList {
width: 100%;
height: 10%;
background: green;
}
.userNamePhone {
border-radius: 10px;
min-width: 20%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: black;
font-size: 12px;
position: absolute;
right: 0;
bottom: 0;
z-index: 9;
color: #ffffff;
}
.header {
width: 100%;
height: 8%;
background-color: #716c6c;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.roomPhone {
width: 100%;
height: 100vh;
}
.bodyVideo {
width: 100%;
height: 92%;
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */
}
.userVideoPhone {
width: 100%;
height: 100%;
background-color: yellow;
position: relative;
}
.userVideoPhone1 {
width: 50%;
flex-basis: calc(33.333% - 3px);
max-width: calc(33.333% - 3px);
height: 200px;
/* height: 0; */
/* padding-bottom: calc(33.333% - 3px); */
margin-bottom: 3px;
position: relative;
}
.quill-editor {
height: 70%;
}
.updataBtn {
width: 100%;
position: absolute;
bottom: 8px;
}
.fileList {
/* max-height: 300px; */
/* overflow-y: scroll; */
}
.list {
display: flex;
flex-wrap: wrap;
}
.applicant,
.res,
.mediate {
width: 100%;
margin-left: 20px;
margin-bottom: 10px;
color: #38393b;
}
</style>