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
src/views/room.vue
+167 -86
View File
@@ -1,39 +1,43 @@
<template>
<div class="page">
<div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
<div class="txtContent">
<el-tag type="danger" @click="txtContent">会议内容</el-tag>
</div>
<div :class="userClass" :style="{ height: userHeight }" 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="userName">{{ item }}</div>
</div>
<div class="footer">
<roomFooter @exitRoom="exitRoom" :roomId="roomId"></roomFooter>
</div>
<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 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">
<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="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">
@@ -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%;