生产管理

src/views/home/index.vue

@@ -1,32 +1,25 @@
 <template>
   <div class='home-box'>
-    <div
-      id="homeComtainerB"
-      ref="homeComtainerB"
-    >
-      <div
-        class='home-comtainer'
-        id="homeComtainer"
-        style="width: 1920px; height: 1080px"
-        :style="{ transform: 'scale(' + scaleNum + ')' }"
-      >
-        <HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange"/>
+    <div id="homeComtainerB" ref="homeComtainerB">
+      <div class='home-comtainer' id="homeComtainer" style="width: 1920px; height: 1080px"
+        :style="{ transform: 'scale(' + scaleNum + ')' }">
+        <HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange" />
         <div class='line-one'>
-          <LossSum style='margin-right: 16px;'/>
-          <EqAlarm style='margin-right: 16px;'/>
-          <Count />
+          <LossSum style='margin-right: 16px;' :dataObj="dataObj.workShopData" />
+          <EqAlarm style='margin-right: 16px;' :dataObj="dataObj.alarmData" />
+          <Count :dataObj="dataObj.downLoadNum" />
         </div>
         <div class='line-two'>
           <div>
-            <SectionInputAndOutput style='margin-bottom: 16px;'/>
-            <LineRate />
+            <SectionInputAndOutput style='margin-bottom: 16px;' :dataObj="dataObj.workShopData" />
+            <LineRate  :dataObj="dataObj.lineHours"/>
           </div>
-          <LineInpurAndOutput style='margin-left: 16px;'/>
+          <LineInpurAndOutput :dataObj="dataObj.productionLineData" style='margin-left: 16px;' />
         </div>
       </div>
     </div>
   </div>
-  
+
 </template>
 <script>
 import HomeHeader from './components/HomeHeader.vue';
@@ -38,6 +31,8 @@ import LineRate from './components/LineRate.vue';
 import LineInpurAndOutput from './components/LineInpurAndOutput.vue';
 import { debounce } from '@/utils/debounce';
 import screenfull from 'screenfull';
+import { getAccessToken } from '@/utils/auth';
+import store from "@/store";
 export default {
   name: 'Home',
   components: {
@@ -52,15 +47,29 @@ export default {
   data() {
     return {
       isFullScreen: false,
-      scaleNum: 1
+      scaleNum: 1,
+      dataObj: {},
+      sseReader: null,        // 保存流读取器
+      abortController: null,  // 用于中止 fetch 请求
+      retryCount: 0,          // 当前重试次数
+      isDestroyed: false      // 标记组件是否已销毁
     };
   },
   created() {
-		this.init();
+    this.init();
+    this.getData()
 	},
   mounted() {
 		this.boxReset();
-		window.addEventListener('resize', this.boxReset);
+    window.addEventListener('resize', this.boxReset);
+    // this.boxReset = debounce(() => {
+    //   this.resetSize()
+    // }, 300)
+    // this.boxReset()
+    // window.addEventListener('resize', () => {
+    //   this.boxReset()
+    // })
+    this.getData()
 	},
 	destroyed() {
 		window.removeEventListener('resize', this.boxReset);
@@ -70,7 +79,92 @@ export default {
 			debounce(() => {
 				this.resetSize();
 			}, 300)();
-		},
+    },
+    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 token = getAccessToken()
+      const headers = new Headers({
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'text/event-stream'
+      });
+      try {
+        // 创建中止控制器
+        this.abortController = new AbortController();
+        // 发起 fetch 请求（替换为你的接口地址）
+        const response = await fetch(url, {
+          method: 'GET',
+          headers: headers,
+          signal: _this.abortController.signal // 绑定中止信号
+        });
+
+        // 获取流读取器
+        _this.sseReader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        // 持续读取流数据
+        while (true) {
+          const { done, value } = await _this.sseReader.read();
+          if (done) {
+            console.log('SSE 连接正常关闭');
+            _this.handleReconnect(); // 触发重连
+            break;
+          }
+          // 处理 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; // 标记销毁
+      if (this.abortController) {
+        this.abortController.abort(); // 中止 fetch 请求
+      }
+      if (this.sseReader) {
+        this.sseReader.cancel();      // 关闭流读取器
+        this.sseReader = null;
+      }
+      console.log('SSE 连接已强制关闭');
+    },
+    handleReconnect() {
+      if (this.isDestroyed) return;
+      // 指数退避策略（最大重试 5 次）
+      const maxRetries = 5;
+      if (this.retryCount < maxRetries) {
+        const delay = Math.pow(2, this.retryCount) * 1000;
+        setTimeout(() => {
+          this.retryCount++;
+          this.initSSE();
+        }, delay);
+      } else {
+        console.error('SSE 重连次数已达上限');
+      }
+    },
+    isValidData(data) {
+      return data.trim().startsWith('data:{') && !data.includes('heartbeat');
+    },
+    upDateMsg(data) {
+      const jsonStr = data.replace(/^data:/, '').trim();
+      console.log('jsonStr', jsonStr);
+
+      try {
+        const dataObj = JSON.parse(jsonStr);
+        this.dataObj = dataObj
+        console.log('dataObj', this.dataObj)
+      } catch (e) {
+        console.error('JSON 解析失败:', e);
+      }
+    },
 		change() {
 			this.isFullScreen = screenfull.isFullscreen;
 		},
@@ -152,4 +246,4 @@ export default {
     margin-top: 16px;
   }
 }
-</style>
+</style>