This commit is contained in:
hanchaobo
2024-04-22 17:33:02 +08:00
+41 -31
View File
@@ -1,13 +1,14 @@
<template> <template>
<div style="width: 100%;height: 100%;"> <div style="width: 100%; height: 100%">
<div id="placeholder"></div> <div id="placeholder"></div>
</div> </div>
</template> </template>
<script> <script>
import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice" import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice";
import store from "@/store" import { setToken } from "@/utils/auth";
import axios from 'axios' import store from "@/store";
import axios from "axios";
export default { export default {
props: [], props: [],
data() { data() {
@@ -15,46 +16,50 @@ export default {
config: {}, config: {},
flag: 0, flag: 0,
userId: store.getters.userId, userId: store.getters.userId,
websock: null websock: null,
}; };
}, },
destroyed() { destroyed() {
//页面销毁时关闭ws连接 //页面销毁时关闭ws连接
if (this.websock) { if (this.websock) {
this.websock.close() // 关闭websocket this.websock.close(); // 关闭websocket
} }
}, },
methods: { methods: {
getConfig(id) { getConfig(id) {
let edit = "edit"; let edit = "edit";
if (this.flag == 0) { if (this.flag == 0) {
edit = 'view'; edit = "view";
} else { } else {
edit = 'edit'; edit = "edit";
} }
axios.get(`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`).then(res => { axios
.get(
`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`
)
.then((res) => {
this.config = res.data; this.config = res.data;
// this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`; // this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
console.log(res.data, "OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO"); console.log(res.data, "OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO");
var docEditor = new DocsAPI.DocEditor("placeholder", this.config); var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
}) });
}, },
//初始化weosocket //初始化weosocket
initWebSocket() { initWebSocket() {
if (typeof (WebSocket) === "undefined") { if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持WebSocket") alert("您的浏览器不支持WebSocket");
return false return false;
} }
const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}` // websocket地址 const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}`; // websocket地址
this.websock = new WebSocket(wsuri) this.websock = new WebSocket(wsuri);
this.websock.onopen = this.websocketonopen this.websock.onopen = this.websocketonopen;
this.websock.onmessage = this.websocketonmessage this.websock.onmessage = this.websocketonmessage;
this.websock.onerror = this.websocketonerror this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose this.websock.onclose = this.websocketclose;
}, },
//连接成功 //连接成功
websocketonopen() { websocketonopen() {
console.log('WebSocket连接成功') console.log("WebSocket连接成功");
}, },
//接收后端返回的数据 //接收后端返回的数据
websocketonmessage(e) { websocketonmessage(e) {
@@ -67,32 +72,37 @@ export default {
caseAppliId: Number(dataJson.caseId), caseAppliId: Number(dataJson.caseId),
annexName: dataJson.fileName, annexName: dataJson.fileName,
annexPath: dataJson.filePath, annexPath: dataJson.filePath,
onlyOfficeFileId: dataJson.fileId onlyOfficeFileId: dataJson.fileId,
}).then(res => { }).then((res) => {
this.websock.send() this.websock.send();
}) });
} }
// 在这里使用后端返回的数据,对数据进行处理渲染 // 在这里使用后端返回的数据,对数据进行处理渲染
}, },
//连接建立失败重连 //连接建立失败重连
websocketonerror(e) { websocketonerror(e) {
console.log(`连接失败的信息:`, e) console.log(`连接失败的信息:`, e);
this.initWebSocket() // 连接失败后尝试重新连接 this.initWebSocket(); // 连接失败后尝试重新连接
}, },
//关闭连接 //关闭连接
websocketclose(e) { websocketclose(e) {
console.log('断开连接', e) console.log("断开连接", e);
},
/**是否从视频会议跳转,是处理token */
async getToken() {
setToken(this.$route.query.token);
}, },
}, },
mounted() { async mounted() {
if (this.$route.query.token) {
await this.getToken();
}
let id = this.$route.query.id; let id = this.$route.query.id;
this.flag = this.$route.query.flag; this.flag = this.$route.query.flag;
this.getConfig(id); this.getConfig(id);
this.initWebSocket(); this.initWebSocket();
}, },
watch: { watch: {},
}
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>