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

小程序共享屏幕，小程序页面优化，开关麦克风以及视频

Browse Source
This commit is contained in:
yunmei
2024-05-10 15:12:55 +08:00
parent 4df7b5356b
commit a31c92f3a5
6 changed files with 11467 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
.gitignore
-6
View File
@@ -23,10 +23,4 @@ pnpm-debug.log*
*.sln
*.sw?
node_modules
<<<<<<< HEAD
node_modules
node_modules
node_modules
=======
>>>>>>> ce7123d0f78fb925333f45cb0f43791061dc0431
/dist
package-lock.json
Generated
+11344 -26
View File
File diff suppressed because it is too large Load Diff
src/views/components/footerPhone.vue
+36 -4
View File
@@ -10,11 +10,11 @@
<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">
<!-- <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> -->
<div class="mediationPop">
<el-button type="warning" @click="mediationPop">调解</el-button>
</div>
@@ -29,6 +29,7 @@
import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
export default {
name: 'FooterPhone',
props: ["micFlag", "videoFlag", "sharFlag"],
components: {
},
@@ -36,7 +37,8 @@ export default {
return {
roomId: null,
taskId: null,
roleFlag: false
roleFlag: false,
caseId:""
};
},
methods: {
@@ -46,6 +48,35 @@ export default {
console.log(res, "解散房间");
})
},
/**开启麦克风 */
micClickOn() {
this.$emit("micClickOn");
},
/**关闭麦克风 */
micClickOff() {
this.$emit("micClickOff");
},
/**开启摄像头 */
videoClickOn() {
this.$emit("videoClickOn");
},
/**关闭摄像头 */
videoClickOff() {
this.$emit("videoClickOff");
},
/**共享屏幕 */
sharClickOn() {
this.$emit("sharClickOn");
},
/**关闭共享屏幕 */
sharClickOff() {
this.sharFlag = true;
this.$emit("sharClickOff");
},
// 弹出调解内容
mediationPop() {
this.$emit("mediationPop");
},
exitRoom() {
if (this.roleFlag) {
this.stopVideoFn();
@@ -57,7 +88,7 @@ export default {
},
async startVideoFn() {
await startVideo({
caseId: 12865,
caseId: this.caseId,
roomId: this.roomId
}).then(res => {
this.taskId = res.data.taskId
@@ -73,6 +104,7 @@ export default {
async mounted() {
this.roomId = this.$route.query.roomId;
let roleFlag = this.$route.query.flag;
this.caseId = this.$route.query.caseId;
this.roleFlag = roleFlag || false;
if (roleFlag) {
await this.startVideoFn();
src/views/components/roomFooter.vue
+1 -1
View File
@@ -103,7 +103,7 @@ export default {
this.roomId = this.$route.query.roomId;
this.caseId = this.$route.query.caseId;
let roleFlag = this.$route.query.flag;
this.roleFlag = roleFlag;
this.roleFlag = roleFlag || false;
if (roleFlag) {
await this.startVideoFn();
}
src/views/room.vue
+86 -45
View File
@@ -1,6 +1,6 @@
<template>
<div class="page">
<div class="iconImg" v-if="!modileFlag && rightType" @click="checkList(1)">
<div class="iconImg" v-if="!modileFlag && rightType && rightTypeall" @click="checkList(1)">
<i class="el-icon-d-arrow-left" style="font-size: 30px;color: aqua;"></i>
<!-- <i class="el-icon-d-arrow-right"></i> -->
</div>
@@ -21,15 +21,15 @@
</div>
</div>
<div class="footerList">
<roomFooter @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff"
@videoClickOn="videoClickOn" @videoClickOff="videoClickOff" @sharClickOn="sharClickOn"
@sharClickOff="sharClickOff" @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag"
:videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooter>
<roomFooter @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff" @videoClickOn="videoClickOn"
@videoClickOff="videoClickOff" @sharClickOn="sharClickOn" @sharClickOff="sharClickOff"
@mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag" :videoFlag="videoFlag" :sharFlag="sharFlag">
</roomFooter>
</div>
</div>
<div class="roomPhone">
<div class="videoPage">
<div :class="sharingType">
<div :class="sharingType" id="screenShare">
</div>
<div :class="bodyPhoneType">
<div :class="userClassPhone" id="localStream">
@@ -38,10 +38,16 @@
<div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
<div class="userNamePhone">{{ item }}</div>
</div>
<i class="el-icon-d-arrow-right" style="font-size: 30px;color: aqua;" @click="checkList(2)" v-if="!rightType"></i>
<i class="el-icon-d-arrow-right" style="font-size: 30px;color: aqua;" @click="checkList(2)"
v-if="!rightType && rightTypeall"></i>
<!-- <i class="el-icon-d-arrow-left" style="font-size: 30px;color: aqua;" @click="checkList(2)"
v-if="!rightType && !rightTypeall"></i> -->
</div>
<div class="footerPhone">
<roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
<roomFooterPhone @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff"
@videoClickOn="videoClickOn" @videoClickOff="videoClickOff" @sharClickOn="sharClickOn"
@sharClickOff="sharClickOff" @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag"
:videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooterPhone>
</div>
</div>
<!-- <div class="header">
@@ -63,7 +69,7 @@
<el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button>
</el-drawer>
<!-- 调解 -->
<el-drawer :visible.sync="drawerMediatio" direction="ltr" title="调解内容">
<el-drawer :visible.sync="drawerMediatio" direction="ltr" title="调解内容" :size="drawerSize">
<div style="
width: 100%;
display: flex;
@@ -87,28 +93,28 @@
</div>
<div class="list">
<div class="applicant" v-if="applicantFile.length > 0">
<div>申请人证据</div>
<div style="font-size: 20px;margin-bottom: 10PX;">申请人证据:</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="font-size: 20px;margin-bottom: 10PX;">被申请人证据:</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="font-size: 20px;margin-bottom: 10PX;">调解书:</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>
<div v-if="modileFlag && updataFlag">
<el-form label-width="100px">
<el-col :span="24">
<el-form-item label="调解结果:">
@@ -121,7 +127,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="24" v-if="formData.mediaResult == 1">
<el-form-item label="是否用印申请:">
<el-radio-group v-model="formData.sealFlag">
<el-radio :label="1">是</el-radio>
@@ -131,7 +137,7 @@
</el-col>
</el-form>
</div>
<div>
<div v-if="modileFlag && updataFlag">
<el-button style="width:100%;" type="primary" @click="determineMeeting" :disabled="!updataFlag">确定</el-button>
</div>
</el-drawer>
@@ -167,7 +173,9 @@ export default {
},
data() {
return {
rightType:true,
drawerSize: "30%",
rightType: false,
rightTypeall: false,
sharingType: "sharing",
bodyPhoneType: "bodyPhone",
videoList: "videoList",
@@ -175,7 +183,7 @@ export default {
resFlag: null,
appFlag: null,
userClassPhone: "userVideoPhone",
userList: [1, 2],
userList: [],
userHeight: "100%",
userPhoneHeight: "92%",
userSign: "",
@@ -253,11 +261,12 @@ export default {
this.sharingType = "sharing1";
this.bodyPhoneType = "bodyPhone1";
this.rightType = false;
// console.log(this.rightType,this.rightTypeall,"Pppppppppp");
} else if (data == 2) {
console.log("UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUu");
this.sharingType = "sharing1";
this.bodyPhoneType = "bodyPhone2";
this.rightType = true;
console.log(this.rightType, this.rightTypeall, "Pppppppppp");
}
},
/**点击开启麦克风图标，关闭麦克风 */
@@ -382,28 +391,32 @@ export default {
this.selectByIdFn(this.caseId);
},
preview(item, type) {
if (item.onlyOfficeFileId) {
debugger
// this.$router.push({
// path: "/onlyoffice",
// query: { id: item.onlyOfficeFileId, flag: flag },
// });
let flag = 1;
if (this.editFlag && type != 0) {
flag = 1;
if (this.modileFlag) {
if (item.onlyOfficeFileId) {
// this.$router.push({
// path: "/onlyoffice",
// query: { id: item.onlyOfficeFileId, flag: flag },
// });
let flag = 1;
if (this.editFlag && type != 0) {
flag = 1;
} else {
flag = 0;
}
let token = sessionStorage.getItem("token");
window.open(
`http://121.40.189.20:9002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
"_black"
// `http://localhost:81/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
// "_black"
);
} else {
flag = 0;
window.open(window.location.origin + '/tjformal' + item.annexPath, "_black");
}
let token = sessionStorage.getItem("token");
window.open(
`http://121.40.189.20:9002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
"_black"
// `http://localhost:81/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
// "_black"
);
} else {
window.open(window.location.origin + '/tiaojie' + item.annexPath, "_black");
}else{
window.open(window.location.origin + '/tjformal' + item.annexPath, "_black");
}
},
// 点击提交修改后的内容
updataClick() {
@@ -455,6 +468,7 @@ export default {
/** 获取证据列表 */
selectByIdFn(id) {
selectById(id).then((res) => {
this.formData.mediaResult = res.data.mediaResult || 1;
this.caseFlowId = res.data.caseFlowId;
this.applicantFile = [];
this.resFile = [];
@@ -511,6 +525,11 @@ export default {
.then(() => {
this.videoList = "videoList1";
this.videoClass = "videoItem2";
this.userClassPhone = "userVideoPhone2"
this.sharingType = "sharing1";
this.bodyPhoneType = "bodyPhone1";
this.rightType = false;
this.rightTypeall = true;
});
});
this.screenShareFlag = true;
@@ -578,14 +597,20 @@ export default {
});
} else if (streamType == "sub") {
this.sharFlag = true;
this.rightTypeall = false;
this.videoList = "videoList";
this.screenShareFlag = false;
if (this.userList.length > 1) {
this.bodyPhoneType = 'bodyPhone';
this.sharingType = "sharing"
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";
} else if (this.userList.length == 1) {
this.videoClass = "videoItem3";
this.userClassPhone = "userVideoPhone";
}
}
});
@@ -655,14 +680,26 @@ export default {
},
watch: {
userList(value) {
if (value.length == 1) {
if (this.userList.length == 1) {
this.videoClass = "videoItem3";
} else if (value.length > 1) {
this.userClassPhone = "userVideoPhone1";
} else if (this.userList.length > 1) {
this.videoClass = "videoItem1";
} else if (value.length < 1) {
this.userClassPhone = "userVideoPhone2";
} else if (this.userList.length < 1) {
this.videoClass = "videoItem";
this.userClassPhone = "userVideoPhone";
}
},
drawerMediatio(val) {
if (val) {
if (this.modileFlag) {
this.drawerSize = "30%"
} else {
this.drawerSize = "75%"
}
}
}
},
async mounted() {
if (this.userList.length == 1) {
@@ -939,8 +976,10 @@ export default {
flex-wrap: wrap;
align-items: center;
overflow-y: scroll;
background: #353643ba;
}
.bodyPhone2{
.bodyPhone2 {
width: 0;
height: 0;
position: absolute;
@@ -952,6 +991,7 @@ export default {
align-items: center;
overflow-y: scroll;
}
/* 移动端样式 */
.bodyVideo {
@@ -1028,7 +1068,8 @@ export default {
height: 0;
}
.el-icon-d-arrow-right {
.el-icon-d-arrow-right,
.el-icon-d-arrow-left {
position: absolute;
left: 0;
top: 45%;