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

解决冲突

Browse Source
This commit is contained in:
hanchaobo
2024-04-19 16:10:45 +08:00
parent 433af74d6f 38ac830a62
commit 8900efef80
8 changed files with 1378 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/room.vue
+171 -58
View File
@@ -2,16 +2,41 @@
<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="userName">{{ userId }}</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="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 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">
@@ -55,22 +80,34 @@
<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)">
<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)">
<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)">
<div
style="color: #104fad; cursor: pointer"
v-for="(item, index) in mediateFile"
:key="index"
@click="preview(item, 1)"
>
{{ item.annexName }}
</div>
</div>
@@ -111,9 +148,10 @@ export default {
},
data() {
return {
videoList: "videoList",
videoClass: "videoItem",
resFlag: null,
appFlag: null,
userClass: "userVideo5",
userClassPhone: "userVideoPhone",
userList: [],
userHeight: "100%",
@@ -127,6 +165,7 @@ export default {
localStreamAsr: null,
contentValue: "",
textVisible: false,
screenShareFlag: false,
editorOption: {
// Some Quill options...
},
@@ -167,13 +206,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");
});
},
@@ -362,13 +461,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}` });
});
@@ -394,7 +486,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);
@@ -435,6 +526,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;
@@ -526,13 +622,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;
@@ -543,39 +660,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%;
@@ -584,7 +689,11 @@ export default {
bottom: 0;
z-index: 10;
}
.screenShare {
width: 80%;
height: 100%;
background: yellow;
}
.userName {
border-radius: 10px;
width: 90px;
@@ -598,7 +707,11 @@ export default {
z-index: 9;
color: #ffffff;
}
.footerList {
width: 100%;
height: 10%;
background: green;
}
.userNamePhone {
border-radius: 10px;
min-width: 20%;