|  | @@ -12,9 +12,156 @@
 | 
											
												
													
														|  |  </template>
 |  |  </template>
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |  <script setup>
 |  |  <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 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>
 |  |  </script>
 | 
											
												
													
														|  |  
 |  |  
 |