diff --git a/.gitignore b/.gitignore index fc004645..25932e2d 100644 --- a/.gitignore +++ b/.gitignore @@ -21,4 +21,6 @@ pnpm-debug.log* *.ntvs* *.njsproj *.sln -*.sw? \ No newline at end of file +*.sw? +node_modules +/dist diff --git a/package-lock.json b/package-lock.json index 4a2c8e5e..0183e793 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/src/api/room.js b/src/api/room.js index ce3717bd..4fb4a2f5 100644 --- a/src/api/room.js +++ b/src/api/room.js @@ -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) { diff --git a/src/router/index.js b/src/router/index.js index e155eb75..89aca555 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,7 +6,7 @@ const routes = [ { path: "/", component: () => import("../views/home.vue"), - redirect:'home' + redirect: 'home' }, { path: "/home", @@ -16,10 +16,10 @@ 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", diff --git a/src/views/components/roomFooter.vue b/src/views/components/roomFooter.vue index 8618ad2d..70a09402 100644 --- a/src/views/components/roomFooter.vue +++ b/src/views/components/roomFooter.vue @@ -1,176 +1,204 @@ + + + async startVideoFn() { + await startVideo({ + caseId: this.caseId, + roomId: this.roomId, + }).then((res) => { + this.taskId = res.data.taskId; + console.log(res.data.taskId, "pppppp"); + }); + }, + stopVideoFn() { + stopVideo(this.taskId).then((res) => { + console.log(res, "KKKKKK"); + }); + }, + }, + async mounted() { + this.roomId = this.$route.query.roomId; + this.caseId = this.$route.query.caseId; + let roleFlag = this.$route.query.flag; + this.roleFlag = roleFlag; + if (roleFlag) { + await this.startVideoFn(); + } + // setTimeout(() => { + // console.log(this.roomId, "房间号房间哈房间号房间哈房间号"); + // }); + }, +}; + \ No newline at end of file +.roomFooter { + width: 100%; + height: 100%; + display: flex; + flex-direction: row-reverse; +} + +.mic, +.video, +.sharing, +.outRoom { + cursor: pointer; + width: 10%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.operation { + width: 90%; + height: 100%; + display: flex; + align-items: center; +} + +.iconImg { + width: 30%; + height: 60%; +} + +.title { + color: aliceblue; +} + +.empty { + width: 60%; + height: 100%; +} + +.mic, +.video, +.sharing { + width: 60px; + height: 60px; + margin-left: 20px; +} + +.micImg, +.videoImg, +.sharImg { + width: 40px; + height: 40px; +} + \ No newline at end of file diff --git a/src/views/room.vue b/src/views/room.vue index 4156327f..4627f64d 100644 --- a/src/views/room.vue +++ b/src/views/room.vue @@ -2,16 +2,41 @@
- 会议内容 + 会议内容
-
-
{{ userId }}
+
+
+ +
+
+
{{ userId }}
+
+
+
{{ item }}
+
+
-
-
{{ item }}
-
-
- +
+
@@ -55,22 +80,34 @@
申请人证据
-
+
{{ item.annexName }}
被申请人证据
-
+
{{ item.annexName }}
调解书
-
+
{{ item.annexName }}
@@ -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 { `${res.result.voice_text_str}`; }; }, 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%; diff --git a/src/views/test.vue b/src/views/test.vue new file mode 100644 index 00000000..3b6f1169 --- /dev/null +++ b/src/views/test.vue @@ -0,0 +1,112 @@ + + + + \ No newline at end of file diff --git a/src/views/testRoom.vue b/src/views/testRoom.vue new file mode 100644 index 00000000..5ada3469 --- /dev/null +++ b/src/views/testRoom.vue @@ -0,0 +1,854 @@ + + + + + + + + \ No newline at end of file