|
|
@@ -1,98 +1,108 @@
|
|
1
|
1
|
<template>
|
|
2
|
|
- <div style="width: 100%;height: 100%;">
|
|
3
|
|
- <div id="placeholder"></div>
|
|
4
|
|
- </div>
|
|
|
2
|
+ <div style="width: 100%; height: 100%">
|
|
|
3
|
+ <div id="placeholder"></div>
|
|
|
4
|
+ </div>
|
|
5
|
5
|
</template>
|
|
6
|
6
|
|
|
7
|
7
|
<script>
|
|
8
|
|
-import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice"
|
|
9
|
|
-import store from "@/store"
|
|
10
|
|
-import axios from 'axios'
|
|
|
8
|
+import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice";
|
|
|
9
|
+import { setToken } from "@/utils/auth";
|
|
|
10
|
+import store from "@/store";
|
|
|
11
|
+import axios from "axios";
|
|
11
|
12
|
export default {
|
|
12
|
|
- props: [],
|
|
13
|
|
- data() {
|
|
14
|
|
- return {
|
|
15
|
|
- config: {},
|
|
16
|
|
- flag: 0,
|
|
17
|
|
- userId: store.getters.userId,
|
|
18
|
|
- websock: null
|
|
19
|
|
- };
|
|
|
13
|
+ props: [],
|
|
|
14
|
+ data() {
|
|
|
15
|
+ return {
|
|
|
16
|
+ config: {},
|
|
|
17
|
+ flag: 0,
|
|
|
18
|
+ userId: store.getters.userId,
|
|
|
19
|
+ websock: null,
|
|
|
20
|
+ };
|
|
|
21
|
+ },
|
|
|
22
|
+ destroyed() {
|
|
|
23
|
+ //页面销毁时关闭ws连接
|
|
|
24
|
+ if (this.websock) {
|
|
|
25
|
+ this.websock.close(); // 关闭websocket
|
|
|
26
|
+ }
|
|
|
27
|
+ },
|
|
|
28
|
+ methods: {
|
|
|
29
|
+ getConfig(id) {
|
|
|
30
|
+ let edit = "edit";
|
|
|
31
|
+ if (this.flag == 0) {
|
|
|
32
|
+ edit = "view";
|
|
|
33
|
+ } else {
|
|
|
34
|
+ edit = "edit";
|
|
|
35
|
+ }
|
|
|
36
|
+ axios
|
|
|
37
|
+ .get(
|
|
|
38
|
+ `http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`
|
|
|
39
|
+ )
|
|
|
40
|
+ .then((res) => {
|
|
|
41
|
+ this.config = res.data;
|
|
|
42
|
+ // this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
|
|
|
43
|
+ console.log(res.data, "OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO");
|
|
|
44
|
+ var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
|
|
|
45
|
+ });
|
|
20
|
46
|
},
|
|
21
|
|
- destroyed() {
|
|
22
|
|
- //页面销毁时关闭ws连接
|
|
23
|
|
- if (this.websock) {
|
|
24
|
|
- this.websock.close() // 关闭websocket
|
|
25
|
|
- }
|
|
|
47
|
+ //初始化weosocket
|
|
|
48
|
+ initWebSocket() {
|
|
|
49
|
+ if (typeof WebSocket === "undefined") {
|
|
|
50
|
+ alert("您的浏览器不支持WebSocket");
|
|
|
51
|
+ return false;
|
|
|
52
|
+ }
|
|
|
53
|
+ const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}`; // websocket地址
|
|
|
54
|
+ this.websock = new WebSocket(wsuri);
|
|
|
55
|
+ this.websock.onopen = this.websocketonopen;
|
|
|
56
|
+ this.websock.onmessage = this.websocketonmessage;
|
|
|
57
|
+ this.websock.onerror = this.websocketonerror;
|
|
|
58
|
+ this.websock.onclose = this.websocketclose;
|
|
26
|
59
|
},
|
|
27
|
|
- methods: {
|
|
28
|
|
- getConfig(id) {
|
|
29
|
|
- let edit = "edit";
|
|
30
|
|
- if (this.flag == 0) {
|
|
31
|
|
- edit = 'view';
|
|
32
|
|
- } else {
|
|
33
|
|
- edit = 'edit';
|
|
34
|
|
- }
|
|
35
|
|
- axios.get(`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`).then(res => {
|
|
36
|
|
- this.config = res.data;
|
|
37
|
|
- // this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
|
|
38
|
|
- console.log(res.data,"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO");
|
|
39
|
|
- var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
|
|
40
|
|
- })
|
|
41
|
|
- },
|
|
42
|
|
- //初始化weosocket
|
|
43
|
|
- initWebSocket() {
|
|
44
|
|
- if (typeof (WebSocket) === "undefined") {
|
|
45
|
|
- alert("您的浏览器不支持WebSocket")
|
|
46
|
|
- return false
|
|
47
|
|
- }
|
|
48
|
|
- const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}` // websocket地址
|
|
49
|
|
- this.websock = new WebSocket(wsuri)
|
|
50
|
|
- this.websock.onopen = this.websocketonopen
|
|
51
|
|
- this.websock.onmessage = this.websocketonmessage
|
|
52
|
|
- this.websock.onerror = this.websocketonerror
|
|
53
|
|
- this.websock.onclose = this.websocketclose
|
|
54
|
|
- },
|
|
55
|
|
- //连接成功
|
|
56
|
|
- websocketonopen() {
|
|
57
|
|
- console.log('WebSocket连接成功')
|
|
58
|
|
- },
|
|
59
|
|
- //接收后端返回的数据
|
|
60
|
|
- websocketonmessage(e) {
|
|
61
|
|
- let dataJson = e.data;
|
|
62
|
|
- if (dataJson != "conn_success") {
|
|
63
|
|
- dataJson = JSON.parse(dataJson);
|
|
64
|
|
- }
|
|
65
|
|
- if (dataJson.caseId) {
|
|
66
|
|
- saveOnlyOfficeFile({
|
|
67
|
|
- caseAppliId: Number(dataJson.caseId),
|
|
68
|
|
- annexName: dataJson.fileName,
|
|
69
|
|
- annexPath: dataJson.filePath,
|
|
70
|
|
- onlyOfficeFileId: dataJson.fileId
|
|
71
|
|
- }).then(res => {
|
|
72
|
|
- this.websock.send()
|
|
73
|
|
- })
|
|
74
|
|
- }
|
|
75
|
|
- // 在这里使用后端返回的数据,对数据进行处理渲染
|
|
76
|
|
- },
|
|
77
|
|
- //连接建立失败重连
|
|
78
|
|
- websocketonerror(e) {
|
|
79
|
|
- console.log(`连接失败的信息:`, e)
|
|
80
|
|
- this.initWebSocket() // 连接失败后尝试重新连接
|
|
81
|
|
- },
|
|
82
|
|
- //关闭连接
|
|
83
|
|
- websocketclose(e) {
|
|
84
|
|
- console.log('断开连接', e)
|
|
85
|
|
- },
|
|
|
60
|
+ //连接成功
|
|
|
61
|
+ websocketonopen() {
|
|
|
62
|
+ console.log("WebSocket连接成功");
|
|
86
|
63
|
},
|
|
87
|
|
- mounted() {
|
|
88
|
|
- let id = this.$route.query.id;
|
|
89
|
|
- this.flag = this.$route.query.flag;
|
|
90
|
|
- this.getConfig(id);
|
|
91
|
|
- this.initWebSocket();
|
|
|
64
|
+ //接收后端返回的数据
|
|
|
65
|
+ websocketonmessage(e) {
|
|
|
66
|
+ let dataJson = e.data;
|
|
|
67
|
+ if (dataJson != "conn_success") {
|
|
|
68
|
+ dataJson = JSON.parse(dataJson);
|
|
|
69
|
+ }
|
|
|
70
|
+ if (dataJson.caseId) {
|
|
|
71
|
+ saveOnlyOfficeFile({
|
|
|
72
|
+ caseAppliId: Number(dataJson.caseId),
|
|
|
73
|
+ annexName: dataJson.fileName,
|
|
|
74
|
+ annexPath: dataJson.filePath,
|
|
|
75
|
+ onlyOfficeFileId: dataJson.fileId,
|
|
|
76
|
+ }).then((res) => {
|
|
|
77
|
+ this.websock.send();
|
|
|
78
|
+ });
|
|
|
79
|
+ }
|
|
|
80
|
+ // 在这里使用后端返回的数据,对数据进行处理渲染
|
|
92
|
81
|
},
|
|
93
|
|
- watch: {
|
|
94
|
|
-
|
|
|
82
|
+ //连接建立失败重连
|
|
|
83
|
+ websocketonerror(e) {
|
|
|
84
|
+ console.log(`连接失败的信息:`, e);
|
|
|
85
|
+ this.initWebSocket(); // 连接失败后尝试重新连接
|
|
|
86
|
+ },
|
|
|
87
|
+ //关闭连接
|
|
|
88
|
+ websocketclose(e) {
|
|
|
89
|
+ console.log("断开连接", e);
|
|
|
90
|
+ },
|
|
|
91
|
+ /**是否从视频会议跳转,是处理token */
|
|
|
92
|
+ async getToken() {
|
|
|
93
|
+ setToken(this.$route.query.token);
|
|
|
94
|
+ },
|
|
|
95
|
+ },
|
|
|
96
|
+ async mounted() {
|
|
|
97
|
+ if (this.$route.query.token) {
|
|
|
98
|
+ await this.getToken();
|
|
95
|
99
|
}
|
|
|
100
|
+ let id = this.$route.query.id;
|
|
|
101
|
+ this.flag = this.$route.query.flag;
|
|
|
102
|
+ this.getConfig(id);
|
|
|
103
|
+ this.initWebSocket();
|
|
|
104
|
+ },
|
|
|
105
|
+ watch: {},
|
|
96
|
106
|
};
|
|
97
|
107
|
</script>
|
|
98
|
108
|
<style lang="scss" scoped></style>
|