no message

src/views/conveyorLine/WcsMonitor.vue

@@ -37,7 +37,7 @@
         <div class="scan-content">
           <div class="scan-code">{{ scanData.stockCode }}</div>
           <button class="pallet-btn">
-            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none">
+            <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none">
               <path
                 d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
               ></path>
@@ -48,6 +48,7 @@
       </section>
 
       <section class="info-grid">
+        <!-- 任务类型 -->
         <div class="info-card type-card">
           <div class="card-label">
             <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -61,6 +62,7 @@
           <div class="card-value value-purple">{{ scanData.taskType }}</div>
         </div>
 
+        <!-- 工作站 -->
         <div class="info-card dest-card">
           <div class="card-label">
             <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -71,6 +73,17 @@
           </div>
           <div class="card-value value-pink">{{ scanData.endCode }}</div>
         </div>
+
+        <!-- 任务数 - 新增卡片 -->
+        <div class="info-card task-count-card">
+          <div class="card-label">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M4 8h16M4 12h16M4 16h16"></path>
+            </svg>
+            <span>任务数 TOTAL TASKS</span>
+          </div>
+          <div class="card-value value-blue">{{ totalTasks }}</div>
+        </div>
       </section>
 
       <section class="remark-section">
@@ -91,17 +104,24 @@
 <script setup>
   import { ref, onMounted, onUnmounted, computed } from 'vue';
   import dayjs from 'dayjs';
-  import { showConveyorLine } from '@/views/conveyorLine/ConveyorLine.api';
+  import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useUserStore } from '/@/store/modules/user';
+  const userStore = useUserStore();
+  let userInfo = userStore.getUserInfo;
 
   // 模拟数据 (您可以替换为真实 Props 或 API 数据)
   const scanData = ref({
     stockCode: '',
     taskType: '',
-    endCode: '',
+    endCode: userInfo.username,
     izAll: '',
-    description: '',
+    description: '无任务'
   });
 
+  // 新增：总任务数
+  const totalTasks = ref(0);
+
   // 时间处理
   const now = ref(dayjs());
   const updateTime = () => {
@@ -122,24 +142,33 @@
     clearInterval(timer);
   });
 
-  async function queryData() {
+  const glob = useGlobSetting();
-    const conveyorLine = '3F-F1-ELE-02L-L';//3F-F1-ELE-01L-L
+  function initWebSocket() {
-    const res = await showConveyorLine(conveyorLine);
+    //let userName = '3F-F1-ELE-01L-L';
-        scanData.value = {
+    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-          stockCode: res.stockCode,
+    const url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userInfo.username;
-          taskType: res.taskType,
+    connectWebSocket(url);
-          endCode: res.endCode,
+    onWebSocket(onWebSocketMessage);
-          izAll: res.izAll,
-          description: res.description,
-        };
-    console.log('数据：' , res);
   }
 
-  // 定时更新查询数据
+  function onWebSocketMessage(data) {
-  setInterval(() => {
+    if(data.cmd==="conveyorLineData"){
-    console.log('更新数据');
+      scanData.value = {
-    queryData();
+        stockCode: data.data.stockCode,
-  }, 3000);
+        taskType: data.data.taskType,
+        endCode: data.data.endCode,
+        izAll: data.data.izAll,
+        description: data.data.description
+      };
+    }else if(data.cmd==="conveyorLineCount"){
+      totalTasks.value=data.totalTasks
+    }
+  }
+
+  onMounted(() => {
+    initWebSocket();
+  });
+
 </script>
 
 <style scoped>
@@ -329,7 +358,7 @@
     color: #536dfe;
     padding: 10px 24px;
     border-radius: 30px;
-    font-size: 16px;
+    font-size: 30px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
@@ -344,10 +373,10 @@
     color: #fff;
   }
 
-  /* 任务卡片栅格 */
+  /* 任务卡片栅格 - 三列布局 */
   .info-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr; /* 三列等宽布局 */
     gap: 24px;
   }
 
@@ -364,14 +393,6 @@
     overflow: hidden;
   }
 
-  /*  !* 增加一点微弱的渐变光晕背景 *!
-    .type-card {
-      background: radial-gradient(circle at 100% 0%, rgba(111, 66, 193, 0.1) 0%, transparent 50%), #11111a;
-    }
-    .dest-card {
-      background: radial-gradient(circle at 100% 0%, rgba(232, 62, 140, 0.1) 0%, transparent 50%), #11111a;
-    }*/
-
   .card-label {
     display: flex;
     align-items: center;
@@ -394,7 +415,6 @@
   }
 
   /* 高亮颜色 */
-
   .value-purple {
     color: #00d2ff;
     text-shadow: 0 0 15px rgba(0, 210, 255, 0.15);
@@ -406,6 +426,11 @@
     font-family: 'Roboto Mono', monospace;
   }
 
+  .value-blue {
+    color: #0088cc; /* 蓝色 */
+    text-shadow: 0 0 15px rgba(0, 136, 204, 0.15);
+  }
+
   /* 底部备注 */
   .remark-section {
     background-color: rgba(255, 255, 255, 0.02);