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

Merge branch 'hcb' of SH-Arbitrate/Arbitrate-FrontendH5 into master

Browse Source
This commit was merged in pull request #6.
This commit is contained in:
hanchaobo
2024-05-06 15:44:39 +08:00
committed by Gitea
parent 0933481d89 8e6917caf9
commit 334aafec31
2 changed files with 105 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/components/footerPhone.vue
+45 -9
View File
@@ -1,10 +1,30 @@
<template>
<div class="roomFooter">
<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 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" />
</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" />
</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" />
</div>
<div class="mediationPop">
<el-button type="warning" @click="mediationPop">调解</el-button>
</div>
<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>
</div>
</div>
</template>
<script>
import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
export default {
@@ -60,16 +80,32 @@ export default {
},
};
</script>
<style scoped>
.roomFooter {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
</style>
.mic,
.video,
.sharing
{
cursor: pointer;
width: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.micImg,
.videoImg,
.sharImg {
width: 40px;
height: 40px;
}
</style>
src/views/room.vue
+60 -122
View File
@@ -1,5 +1,9 @@
<template>
<div class="page">
<div class="iconImg">
<i class="el-icon-d-arrow-left"></i>
<!-- <i class="el-icon-d-arrow-right"></i> -->
</div>
<div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
<div class="txtContent">
<el-tag type="danger" @click="txtContent" v-if="modileFlag">会议内容</el-tag>
@@ -24,7 +28,18 @@
</div>
</div>
<div class="roomPhone" v-if="!modileFlag">
<div class="header">
<div class="bodyPhone">
<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 class="footerPhone">
<roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
</div>
<!-- <div class="header">
<roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
</div>
<div class="bodyVideo">
@@ -34,102 +49,10 @@
<div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
<div class="userNamePhone">{{ item }}</div>
</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="UploadUrl()"
: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="UploadUrl()"
: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="updataFlag"
ref="upload3"
:limit="1"
:action="UploadUrl()"
: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>
@@ -244,7 +167,7 @@ export default {
resFlag: null,
appFlag: null,
userClassPhone: "userVideoPhone",
userList: [],
userList: [1,2,3,4,5],
userHeight: "100%",
userPhoneHeight: "92%",
userSign: "",
@@ -299,7 +222,7 @@ export default {
filedata3: {
annexType: 7,
officeFlag: 0,
isMediaBook:1,
isMediaBook: 1,
caseId: null,
},
fileList3: [],
@@ -311,7 +234,7 @@ export default {
},
methods: {
UploadUrl() {
return window.location.origin + "/tiaojie/video/upload";
return window.location.origin + "/tjformal/video/upload";
},
/**点击开启麦克风图标，关闭麦克风 */
micClickOn() {
@@ -621,24 +544,11 @@ export default {
const streamType = event.streamType;
const userId = event.userId;
if (streamType == "main") {
// 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();
});
@@ -733,10 +643,13 @@ export default {
async mounted() {
if (this.userList.length == 1) {
this.videoClass = "videoItem3";
this.userClassPhone = "userVideoPhone1";
} else if (this.userList.length > 1) {
this.videoClass = "videoItem1";
this.userClassPhone = "userVideoPhone2";
} else if (this.userList.length < 1) {
this.videoClass = "videoItem";
this.userClassPhone = "userVideoPhone";
}
// 判断设备类型
this.modileFlag = getModile();
@@ -827,6 +740,13 @@ export default {
</script>
<style scoped>
.iconImg{
position: fixed;
top: 50%;
height: 40px;
width: 40px;
/* right: 10px; */
}
.roompage {
width: 100%;
height: 100vh;
@@ -952,19 +872,36 @@ export default {
color: #ffffff;
}
.header {
/* .header {
width: 100%;
height: 8%;
background-color: #716c6c;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
} */
/* 移动端样式 */
.roomPhone {
width: 100%;
height: 100vh;
background-color: yellow;
}
.footerPhone{
width: 100%;
height: 8%;
background-color: greenyellow;
}
.bodyPhone{
width: 100%;
height: 92%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
background-color: rebeccapurple;
}
/* 移动端样式 */
.bodyVideo {
width: 100%;
@@ -980,15 +917,16 @@ export default {
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;
.userVideoPhone1{
width: 100%;
height: 49%;
background-color: rgb(43, 0, 255);
position: relative;
}
.userVideoPhone2{
width: 150px;
height: 150px;
background-color: rgb(43, 0, 255);
position: relative;
}