|
@@ -12,9 +12,156 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { request, enPassword } from "@/utils/request";
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { useProjectStore } from '@/store/project'
|
|
|
|
|
|
+const projectStore = useProjectStore()
|
|
|
+
|
|
|
+const pid = computed(()=> projectStore.pid)
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ type: {
|
|
|
+ type: Number,
|
|
|
+ default:0
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
const logContent = ref("")
|
|
|
+const arrobj = ref([])
|
|
|
+let websock = ref(null);
|
|
|
+let times = ref({
|
|
|
+ lockReconnect: false, //是否真正建立连接
|
|
|
+ timeout: 28 * 1000, //30秒一次心跳
|
|
|
+ timeoutObj: null, //心跳倒计时
|
|
|
+ serverTimeoutObj: null, //
|
|
|
+ timeoutnum: null, //断开重连倒计时
|
|
|
+})
|
|
|
+
|
|
|
+//websockct的连接
|
|
|
+function initWebSocket() {
|
|
|
+ //初始化weosocket
|
|
|
+ const wsurl = import.meta.env.VITE_WEBSOCKET_URL + pid.value
|
|
|
+ websock = new WebSocket(wsurl)
|
|
|
+ websock.onopen = websocketonopen
|
|
|
+ websock.onmessage = websocketonmessage
|
|
|
+ websock.onerror = websocketonerror
|
|
|
+ websock.onclose = websocketclose
|
|
|
+}
|
|
|
+
|
|
|
+// Websoket连接成功事件
|
|
|
+const websocketonopen = (res) => {
|
|
|
+ console.log("WebSocket连接成功", res)
|
|
|
+ start()
|
|
|
+}
|
|
|
+
|
|
|
+// Websoket接收消息事件
|
|
|
+const websocketonmessage = (res) => {
|
|
|
+ console.log('websocket接受消息:',res.data)
|
|
|
+ if (res.data.indexOf("{") !== -1) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if (res.data.indexOf("——开始") !== -1) {
|
|
|
+ arrobj.value = [] // 清空数据点数组
|
|
|
+ }
|
|
|
+ if (res.data.indexOf("——成功") !== -1) {
|
|
|
+
|
|
|
+ const timer = setTimeout(function () {
|
|
|
+ console.log("关闭定时器")
|
|
|
+ }, 10000)
|
|
|
+ }
|
|
|
+ if (res.data.indexOf("msg=heartChec") == -1) {
|
|
|
+ // 去除空行
|
|
|
+ const cleanedLog = res.data
|
|
|
+ .split("\n")
|
|
|
+ .filter((line) => line.trim() !== "")
|
|
|
+ .join("\n")
|
|
|
+ logContent.value = logContent.value + "\n" + cleanedLog
|
|
|
+ let textarea = document.getElementById("textarea_id")
|
|
|
+ textarea.scrollTop = textarea.scrollHeight
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log('arrobjvalue',arrobj.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ reset()
|
|
|
+}
|
|
|
+
|
|
|
+// Websoket连接错误事件
|
|
|
+const websocketonerror = (res) => {
|
|
|
+ console.log("连接错误", res);
|
|
|
+ websock.close();
|
|
|
+ reconnect();
|
|
|
+};
|
|
|
+// Websoket断开事件
|
|
|
+const websocketclose = (res) => {
|
|
|
+ console.log("断开连接", res);
|
|
|
+};
|
|
|
+
|
|
|
+// 心跳包
|
|
|
+const reconnect = () => {
|
|
|
+ if (times.value.lockReconnect) return;
|
|
|
+ times.value.lockReconnect = true;
|
|
|
+ //没连接上会一直重连,设置延迟避免请求过多
|
|
|
+ times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
|
|
|
+ times.value.timeoutnum = setTimeout(function () {
|
|
|
+ //新连接
|
|
|
+ initWebSocket();
|
|
|
+ times.value.lockReconnect = false;
|
|
|
+ }, 10000);
|
|
|
+}
|
|
|
+const reset = () => {
|
|
|
+ //重置心跳
|
|
|
+ clearTimeout(times.value.timeoutObj);
|
|
|
+ clearTimeout(times.value.serverTimeoutObj);
|
|
|
+ start();
|
|
|
+}
|
|
|
+const start = () => {
|
|
|
+ //开启心跳
|
|
|
+ times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
|
|
|
+ times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
|
|
|
+ times.value.timeoutObj = setTimeout(function () {
|
|
|
+ //这里发送一个心跳,后端收到后,返回一个心跳消息
|
|
|
+ if (websock.readyState == 1) {
|
|
|
+ //如果连接正常
|
|
|
+ websock.send("heartCheck");
|
|
|
+ } else {
|
|
|
+ //否则重连
|
|
|
+ reconnect();
|
|
|
+ }
|
|
|
+ times.value.serverTimeoutObj = setTimeout(function () {
|
|
|
+ // 超时关闭
|
|
|
+ websock.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
|
|
|
+ }, times.value.timeout);
|
|
|
+ }, times.value.timeout);
|
|
|
+}
|
|
|
+
|
|
|
+const getlogs = () => {
|
|
|
+ const params = {
|
|
|
+ transCode: "AC00008",
|
|
|
+ pid: pid.value,
|
|
|
+ type:props.type
|
|
|
+ }
|
|
|
+ request(params)
|
|
|
+ .then((res) => {
|
|
|
+ // console.log("获取日志成功", res)
|
|
|
+ logContent.value = res.logs.split('\n').filter(line => line.trim() !== '').join('\n');
|
|
|
+ // 自动滚动日志到底部
|
|
|
+ let textarea = document.getElementById("textarea_id")
|
|
|
+ textarea.scrollTop = textarea.scrollHeight
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error("获取日志失败", err)
|
|
|
+ ElMessage.error("获取日志失败")
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ setTimeout(function () {
|
|
|
+ initWebSocket();
|
|
|
+ getlogs();
|
|
|
+ }, 1500);
|
|
|
+})
|
|
|
|
|
|
</script>
|
|
|
|