更新

Reviewed-on: #443

src/views/base/dataBoard/components/LeftBottom.vue

@@ -37,7 +37,9 @@ export default {
         this.outputData.push(item.outputNum)
         this.goodRateData.push(item.goodRate)
       })
+      this.$nextTick(()=>{
       this.initChart();
+      })
     }
   },
   data() {

src/views/base/dataBoard/index.vue

@@ -1,17 +1,20 @@
 <template>
-	<div ref='dataBoardBoxB' class='dataBoardBoxB'>
+	<div ref="dataBoardBoxB" class="dataBoardBoxB">
-		<div id="dataBoardBox" class='dataBoardBox' style="width: 1920px;height: 1080px;" :style="{ transform: 'scale(' + scaleNum + ')' }">
+		<div
+			id="dataBoardBox"
+			class="dataBoardBox"
+			style="width: 1920px; height: 1080px"
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
 			<DataBoardHeader
 				:is-full-screen="isFullScreen"
-				@screenfullChange="screenfullChange"
+				@screenfullChange="screenfullChange" />
-			/>
+			<LeftTop :dataObj="dataObj" />
-			<LeftTop :dataObj='dataObj'/>
+			<LeftBottom :dataObj="dataObj" />
-			<LeftBottom :dataObj='dataObj'/>
+			<CenterTop :scaleNum="scaleNum" :dataObj="dataObj" />
-			<CenterTop :scaleNum='scaleNum' :dataObj='dataObj'/>
+			<CenterBottomL :dataObj="dataObj" />
-			<CenterBottomL :dataObj='dataObj'/>
+			<CenterBottomR :dataObj="dataObj" />
-			<CenterBottomR :dataObj='dataObj'/>
+			<RightTop :dataObj="dataObj" />
-			<RightTop :dataObj='dataObj'/>
+			<RightBottom :dataObj="dataObj" />
-			<RightBottom :dataObj='dataObj'/>
 		</div>
 	</div>
 </template>
@@ -28,212 +31,249 @@ import RightBottom from './components/RightBottom.vue';
 import { debounce } from '@/utils/debounce';
 import screenfull from 'screenfull';
 import { getAccessToken } from '@/utils/auth';
-import store from "@/store";
+import store from '@/store';
 export default {
 	name: 'DataBoard',
-	components: { DataBoardHeader,LeftTop,LeftBottom,CenterTop,CenterBottomL,CenterBottomR,RightTop,RightBottom },
+	components: {
+		DataBoardHeader,
+		LeftTop,
+		LeftBottom,
+		CenterTop,
+		CenterBottomL,
+		CenterBottomR,
+		RightTop,
+		RightBottom,
+	},
 	props: {},
 	data() {
 		return {
 			isFullScreen: false,
 			scaleNum: 0.8,
-			dataObj:{},
+			dataObj: {},
-			sseReader: null,        // 保存流读取器
+			sseReader: null, // 保存流读取器
-      abortController: null,  // 用于中止 fetch 请求
+			abortController: null, // 用于中止 fetch 请求
-      retryCount: 0,          // 当前重试次数
+			retryCount: 0, // 当前重试次数
-      isDestroyed: false      // 标记组件是否已销毁
+			isDestroyed: false, // 标记组件是否已销毁
 		};
 	},
 	created() {
-    this.init()
+		this.init();
-  },
+	},
 	mounted() {
-	  this.boxReset = debounce(() => {
+		this.boxReset = debounce(() => {
-      this.resetSize()
+			this.resetSize();
-    }, 300)
+		}, 300);
-    this.boxReset()
+		this.boxReset();
-    window.addEventListener('resize', () => {
+		window.addEventListener('resize', () => {
-      this.boxReset()
+			this.boxReset();
-    })
+		});
-		this.getData()
+		this.getData();
 	},
 	beforeDestroy() {
-    this.closeSSE();
+		this.closeSSE();
-  },
+	},
-  destroyed() {
+	destroyed() {
-    window.removeEventListener('resize', this.boxReset);
+		window.removeEventListener('resize', this.boxReset);
-  },
+	},
 	computed: {
 		sidebarOpened() {
-			return this.$store.state.app.sidebar.opened
+			return this.$store.state.app.sidebar.opened;
-		}
+		},
 	},
 	watch: {
 		sidebarOpened(newVal, oldVal) {
-			this.boxReset()
+			this.boxReset();
-		}
+		},
 	},
 	methods: {
 		async getData() {
 			let _this = this;
 			if (_this.isDestroyed) return;
-			const url = process.env.VUE_APP_BASE_API+'/admin-api/monitoring/message/subscribe/'+store.getters.userId+'-'+Date.now();
+			const url =
-			const token = getAccessToken()
+				process.env.VUE_APP_BASE_API +
+				'/admin-api/monitoring/message/subscribe/' +
+				store.getters.userId +
+				'-' +
+				Date.now();
+			const token = getAccessToken();
 			const headers = new Headers({
-        'Authorization': `Bearer ${token}`,
+				Authorization: `Bearer ${token}`,
-        'Content-Type': 'text/event-stream'
+				'Content-Type': 'text/event-stream',
-      });
+			});
 			try {
-        // 创建中止控制器
+				// 创建中止控制器
-        this.abortController = new AbortController();
+				this.abortController = new AbortController();
-        // 发起 fetch 请求（替换为你的接口地址）
+				// 发起 fetch 请求（替换为你的接口地址）
-        const response = await fetch(url, {
+				const response = await fetch(url, {
-          method: 'GET',
+					method: 'GET',
-          headers: headers,
+					headers: headers,
-          signal: _this.abortController.signal // 绑定中止信号
+					signal: _this.abortController.signal, // 绑定中止信号
-        });
+				});
 
-        // 获取流读取器
+				// 获取流读取器
-        _this.sseReader = response.body.getReader();
+				_this.sseReader = response.body.getReader();
-        const decoder = new TextDecoder();
+				const decoder = new TextDecoder();
+				let buffer = '';
+				let receivedBytes = 0;
 
-        // 持续读取流数据
+				// 持续读取流数据
-        while (true) {
+				while (true) {
-          const { done, value } = await _this.sseReader.read();
+					const { done, value } = await _this.sseReader.read();
-          if (done) {
+					if (done) {
-            console.log('SSE 连接正常关闭');
+						console.log('SSE 连接正常关闭');
-            _this.handleReconnect(); // 触发重连
+						_this.handleReconnect(); // 触发重连
-            break;
+						break;
-          }
-          // 处理 SSE 事件数据
-          const data = decoder.decode(value);
-          console.log('收到消息:', data);
-					if (_this.isValidData(data)){
-						_this.upDateMsg(data);
 					}
-        }
+					// const data = decoder.decode(value);
-      } catch (error) {
+					// console.log('收到消息:', data);
-        // 主动中止的请求不报错
+
-        if (error.name === 'AbortError') return;
+					receivedBytes += value.length;
-        console.error('SSE 连接异常:', error);
+					console.log(
-        _this.handleReconnect(); // 触发重连
+						`收到数据块: ${value.length} 字节, 累计: ${receivedBytes} 字节`
-      }
+					);
+					const chunk = decoder.decode(value, { stream: true });
+					buffer += chunk;
+
+					// 处理完整的消息
+					const messages = buffer.split('\n\n'); // SSE 消息以双换行分隔
+					buffer = messages.pop() || ''; // 保留最后一个不完整的消息
+
+					for (const message of messages) {
+						if (_this.isValidData(message)) {
+							// console.log('完整 SSE 消息:', message);
+								_this.upDateMsg(message);
+						}
+					}
+
+					// 处理 SSE 事件数据
+					// const data = decoder.decode(value);
+					// console.log('收到消息:', data);
+					// if (_this.isValidData(data)){
+					// 	_this.upDateMsg(data);
+					// }
+				}
+			} catch (error) {
+				// 主动中止的请求不报错
+				if (error.name === 'AbortError') return;
+				console.error('SSE 连接异常:', error);
+				_this.handleReconnect(); // 触发重连
+			}
 		},
 		closeSSE() {
-      this.isDestroyed = true; // 标记销毁
+			this.isDestroyed = true; // 标记销毁
-      if (this.abortController) {
+			if (this.abortController) {
-        this.abortController.abort(); // 中止 fetch 请求
+				this.abortController.abort(); // 中止 fetch 请求
-      }
+			}
-      if (this.sseReader) {
+			if (this.sseReader) {
-        this.sseReader.cancel();      // 关闭流读取器
+				this.sseReader.cancel(); // 关闭流读取器
-        this.sseReader = null;
+				this.sseReader = null;
-      }
+			}
-      console.log('SSE 连接已强制关闭');
+			console.log('SSE 连接已强制关闭');
-    },
+		},
 		handleReconnect() {
-      if (this.isDestroyed) return;
+			if (this.isDestroyed) return;
-      // 指数退避策略（最大重试 5 次）
+			// 指数退避策略（最大重试 5 次）
-      const maxRetries = 5;
+			const maxRetries = 5;
-      if (this.retryCount < maxRetries) {
+			if (this.retryCount < maxRetries) {
-        const delay = Math.pow(2, this.retryCount) * 1000;
+				const delay = Math.pow(2, this.retryCount) * 1000;
-        setTimeout(() => {
+				setTimeout(() => {
-          this.retryCount++;
+					this.retryCount++;
-          this.initSSE();
+					this.initSSE();
-        }, delay);
+				}, delay);
-      } else {
+			} else {
-        console.error('SSE 重连次数已达上限');
+				console.error('SSE 重连次数已达上限');
-      }
+			}
-    },
+		},
-		isValidData (data) {
+		isValidData(data) {
-		  return data.trim().startsWith('data:{') && !data.includes('heartbeat');
+			return data.trim().startsWith('data:{') && !data.includes('heartbeat');
 		},
 		upDateMsg(data) {
-      const jsonStr = data.replace(/^data:/, '').trim();
+			const jsonStr = data.replace(/^data:/, '').trim();
-      console.log('jsonStr', jsonStr);
+			console.log('jsonStr', jsonStr);
 
 			try {
 				const dataObj = JSON.parse(jsonStr);
-				this.dataObj = dataObj
+				this.dataObj = dataObj;
-				console.log('dataObj',this.dataObj)
+				console.log('dataObj', this.dataObj);
 			} catch (e) {
 				console.error('JSON 解析失败:', e);
 			}
 		},
 		change() {
-      this.isFullScreen = screenfull.isFullscreen
+			this.isFullScreen = screenfull.isFullscreen;
-    },
+		},
 		init() {
-      if (!screenfull.isEnabled) {
+			if (!screenfull.isEnabled) {
-        this.$message({
+				this.$message({
-          message: 'you browser can not work',
+					message: 'you browser can not work',
-          type: 'warning'
+					type: 'warning',
-        })
+				});
-        return false
+				return false;
-      }
+			}
-      screenfull.on('change', this.change)
+			screenfull.on('change', this.change);
-    },
+		},
-    destroy() {
+		destroy() {
-      if (!screenfull.isEnabled) {
+			if (!screenfull.isEnabled) {
-        this.$message({
+				this.$message({
-          message: 'you browser can not work',
+					message: 'you browser can not work',
-          type: 'warning'
+					type: 'warning',
-        })
+				});
-        return false
+				return false;
-      }
+			}
-      screenfull.off('change', this.change)
+			screenfull.off('change', this.change);
-    },
+		},
 		// 全屏
-    screenfullChange() {
+		screenfullChange() {
-      if (!screenfull.isEnabled) {
+			if (!screenfull.isEnabled) {
-        this.$message({
+				this.$message({
-          message: 'you browser can not work',
+					message: 'you browser can not work',
-          type: 'warning'
+					type: 'warning',
-        })
+				});
-        return false
+				return false;
-      }
+			}
-      screenfull.toggle(this.$refs.dataBoardBoxB)
+			screenfull.toggle(this.$refs.dataBoardBoxB);
-    },
+		},
 		resetSize() {
-      const dataBoardBox = document.getElementById('dataBoardBox')
+			const dataBoardBox = document.getElementById('dataBoardBox');
-      const rw = parseFloat(window.innerWidth)
+			const rw = parseFloat(window.innerWidth);
-			const rh = parseFloat(window.innerHeight)
+			const rh = parseFloat(window.innerHeight);
-      const bw = parseFloat(dataBoardBox.style.width)
+			const bw = parseFloat(dataBoardBox.style.width);
-      const bh = parseFloat(dataBoardBox.style.height)
+			const bh = parseFloat(dataBoardBox.style.height);
-      let wx = 0
+			let wx = 0;
-			let hy = 0
+			let hy = 0;
-      if (screenfull.isFullscreen) {
+			if (screenfull.isFullscreen) {
-        wx = rw / bw
+				wx = rw / bw;
-				hy = rh / bh
+				hy = rh / bh;
-      } else {
+			} else {
-        if (this.$store.state.app.sidebar.opened) {
+				if (this.$store.state.app.sidebar.opened) {
-          wx = (rw - 283) / bw
+					wx = (rw - 283) / bw;
-        } else {
+				} else {
-          wx = (rw - 88) / bw
+					wx = (rw - 88) / bw;
-        }
+				}
-				hy = (rh - 150) / bh
+				hy = (rh - 150) / bh;
-      }
+			}
-      this.scaleNum = wx < hy ? wx : hy
+			this.scaleNum = wx < hy ? wx : hy;
-    },
+		},
 	},
 };
 </script>
 
 <style scoped lang="scss">
-	.dataBoardBoxB {
+.dataBoardBoxB {
-		width: 100%;
+	width: 100%;
-		height: calc(100vh - 150px);
+	height: calc(100vh - 150px);
-		position: relative;
+	position: relative;
+	overflow: auto;
+	.dataBoardBox {
+		position: absolute;
+		transform-origin: 16px 8px;
+		font-size: 16px;
+		top: 0px;
+		left: 0px;
+		background: url('../../../assets/images/dataBoard/background.png') no-repeat;
+		background-size: cover;
+		background-position: 0 0;
 		overflow: auto;
-		.dataBoardBox {
-			position: absolute;
-			transform-origin: 16px 8px;
-			font-size: 16px;
-			top: 0px;
-			left: 0px;
-			background: url('../../../assets/images/dataBoard/background.png') no-repeat;
-			background-size: cover;
-			background-position: 0 0;
-			overflow: auto;
-		}
 	}
+}
 </style>