feat: update QingAn dashboard units and camera views

src/views/qingAn.vue

@@ -51,45 +51,51 @@
             <span class="left-title-text">线体任务联动状态</span>
           </div>
           <div class="qa-panel-body line-monitor-body">
-            <div v-for="row in lineMonitorRows" :key="row.name" class="monitor-card">
-              <div class="monitor-head">
-                <div class="monitor-title">
-                  <strong>{{ row.name }}</strong>
-                  <span>{{ row.taskNo }}</span>
-                </div>
-                <span class="line-status" :class="`line-status--${row.type}`">{{ row.status }}</span>
-              </div>
+            <div class="line-monitor-scroll-box">
+              <scroll class="line-monitor-scroll" :data="lineMonitorScrollList" :class-option="lineMonitorScrollOption">
+                <div class="line-monitor-content">
+                  <div v-for="(row, index) in lineMonitorScrollList" :key="row.name + index" class="monitor-card">
+                    <div class="monitor-head">
+                      <div class="monitor-title">
+                        <strong>{{ row.name }}</strong>
+                        <span>{{ row.taskNo }}</span>
+                      </div>
+                      <span class="line-status" :class="`line-status--${row.type}`">{{ row.status }}</span>
+                    </div>
 
-              <div class="task-summary">
-                <div class="task-route">
-                  <span>起止位置</span>
-                  <strong>{{ row.startPos }} -> {{ row.endPos }}</strong>
-                </div>
-                <div v-for="item in row.taskInfo" :key="item.label" class="task-field">
-                  <span>{{ item.label }}</span>
-                  <strong>{{ item.value }}</strong>
-                </div>
-              </div>
+                    <div class="task-summary">
+                      <div class="task-route">
+                        <span>起止位置</span>
+                        <strong>{{ row.startPos }} -> {{ row.endPos }}</strong>
+                      </div>
+                      <div v-for="item in row.taskInfo" :key="item.label" class="task-field">
+                        <span>{{ item.label }}</span>
+                        <strong>{{ item.value }}</strong>
+                      </div>
+                    </div>
 
-              <div class="signal-section">
-                <span class="signal-section__title">线体状态</span>
-                <div class="signal-grid signal-grid--line">
-                  <div v-for="signal in row.lineSignals" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
-                    <i></i>
-                    <span>{{ signal.label }}</span>
+                    <div class="signal-section">
+                      <span class="signal-section__title">线体状态</span>
+                      <div class="signal-grid signal-grid--line">
+                        <div v-for="signal in row.lineSignals" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
+                          <i></i>
+                          <span>{{ signal.label }}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="signal-section">
+                      <span class="signal-section__title">任务握手</span>
+                      <div class="signal-grid signal-grid--handshake">
+                        <div v-for="signal in row.handshakes" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
+                          <i></i>
+                          <span>{{ signal.label }}</span>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-
-              <div class="signal-section">
-                <span class="signal-section__title">任务握手</span>
-                <div class="signal-grid signal-grid--handshake">
-                  <div v-for="signal in row.handshakes" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
-                    <i></i>
-                    <span>{{ signal.label }}</span>
-                  </div>
-                </div>
-              </div>
+              </scroll>
             </div>
           </div>
         </section>
@@ -279,36 +285,42 @@ export default {
       alarmPieChart: null,
       activeView: 'longRail',
       viewButtons: [
-        { label: '长地轨视角', value: 'longRail' },
-        { label: '短地轨视角', value: 'shortRail' },
-        { label: '关节视角', value: 'joint' },
-        { label: '磨床视角', value: 'grinder' }
+        { label: '加工中心单元视角', value: 'longRail' },
+        { label: '车床加工单元视角', value: 'shortRail' },
+        { label: '插齿机单元视角', value: 'joint' },
+        { label: '磨床加工单元视角', value: 'grinder' },
+        { label: '全揽视角', value: 'overview' }
       ],
       cameraViews: {
         longRail: {
           target: { x: -5.725619423653396, y: 1.559219531820475, z: -5.23360272959924 },
-          position: { x: -15.805974184853365, y: 1.6199255013441012, z: 10.689003987116454 },
+          position: { x: -18.7530206850084, y: 1.6376732214652037, z: 15.344064598520557 },
           zoom0: 1
         },
         shortRail: {
           target: { x: -5.814177085428968, y: 16.255194514605996, z: -5.3456965650308055 },
-          position: { x: -15.390514108568938, y: 16.312865185653482, z: 9.780779815848938 },
+          position: { x: -17.571406723801864, y: 16.32599896951042, z: 13.22564819859711 },
           zoom0: 1
         },
         joint: {
-          target: { x: 2.7622940494890424, y: 15.83905572715569, z: 0.08552052688719107 },
-          position: { x: -3.2731867066688367, y: 15.875402633541817, z: 9.618973337149745 },
+          target: { x: 2.7622940494890424, y: 15.83905572715569, z: 0.08552052688719117 },
+          position: { x: -4.6476929900921515, y: 15.883680193065107, z: 11.790099601955712 },
           zoom0: 1
         },
         grinder: {
           target: { x: -10.128808700176803, y: -15.480679803858136, z: 1.9651555238025413 },
-          position: { x: -18.876923526978523, y: -15.520222640141816, z: 9.998726005761771 },
+          position: { x: -21.43448244172167, y: -15.531783203240701, z: 12.347383997813267 },
+          zoom0: 1
+        },
+        overview: {
+          target: { x: -2.4540886878602937, y: -1.7690793306726371, z: -0.104103172990748 },
+          position: { x: -44.67609815729721, y: -1.5148097061598855, z: 38.669527626788486 },
           zoom0: 1
         }
       },
       lineMonitorRows: [
         {
-          name: '长地轨',
+          name: '加工中心单元',
           status: '执行中',
           type: 'on',
           taskNo: 'TASK 1001',
@@ -333,7 +345,7 @@ export default {
           ]
         },
         {
-          name: '短地轨',
+          name: '车床加工单元',
           status: '准备就绪',
           type: 'ok',
           taskNo: 'TASK 1002',
@@ -358,7 +370,7 @@ export default {
           ]
         },
         {
-          name: '关节',
+          name: '插齿机单元',
           status: '异常中断',
           type: 'alarm',
           taskNo: 'TASK 1003',
@@ -381,6 +393,31 @@ export default {
             { label: '错误', state: 'alarm' },
             { label: '完成', state: 'off' }
           ]
+        },
+        {
+          name: '磨床加工单元',
+          status: '预制待命',
+          type: 'ok',
+          taskNo: 'TASK 1004',
+          startPos: '05',
+          endPos: '10',
+          taskInfo: [
+            { label: '配方号', value: 'RCP-18' },
+            { label: '托盘', value: 'Pallet-D' }
+          ],
+          lineSignals: [
+            { label: 'PCS运行', state: 'on' },
+            { label: '允许接收', state: 'on' },
+            { label: '自动模式', state: 'warn' },
+            { label: '急停', state: 'off' }
+          ],
+          handshakes: [
+            { label: '启动', state: 'off' },
+            { label: '准备好', state: 'on' },
+            { label: '忙碌', state: 'off' },
+            { label: '错误', state: 'off' },
+            { label: '完成', state: 'on' }
+          ]
         }
       ],
       equipmentList: [
@@ -389,49 +426,57 @@ export default {
         { name: 'L2100SY', target: '3301 件', actual: '3298 件', status: '运行中', type: 'on', tags: [{ text: '上料完成', type: 'ok' }, { text: '下料完成', type: 'ok' }] },
         { name: '新日', target: '4108 件', actual: '4108 件', status: '运行中', type: 'on', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }] },
         { name: 'MAZAK', target: '-', actual: '-', status: '报警', type: 'alarm', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }] },
+        { name: '磨床单元', target: '860 件', actual: '856 件', status: '待机', type: 'idle', tags: [{ text: '上料就绪', type: 'ok' }, { text: '砂轮就绪', type: 'ok' }] },
         { name: 'YKD5132H', target: '5104 件', actual: '5104 件', status: '待机', type: 'idle', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }] }
       ],
       assistList: [
-        { name: '长地轨打标机', status: '待机', type: 'idle', tags: [{ text: '待机中', type: 'idle' }] },
-        { name: '短地轨打标机', status: '打标中', type: 'on', tags: [{ text: '开机中', type: 'ok' }, { text: '打标中', type: 'on' }] },
-        { name: '关节打标机', status: '待机', type: 'idle', tags: [{ text: '开机中', type: 'ok' }, { text: '待机中', type: 'idle' }] },
+        { name: '加工中心单元打标机', status: '待机', type: 'idle', tags: [{ text: '待机中', type: 'idle' }] },
+        { name: '车床加工单元打标机', status: '打标中', type: 'on', tags: [{ text: '开机中', type: 'ok' }, { text: '打标中', type: 'on' }] },
+        { name: '插齿机单元打标机', status: '待机', type: 'idle', tags: [{ text: '开机中', type: 'ok' }, { text: '待机中', type: 'idle' }] },
         { name: '清洗机', status: '运行中', type: 'on', tags: [{ text: '上料就绪', type: 'ok' }, { text: '运行中', type: 'on' }] },
         { name: '测量仪', status: '报警', type: 'alarm', tags: [{ text: '错误', type: 'alarm' }, { text: '下料就绪', type: 'ok' }] }
       ],
       storageGroups: [
         {
-          name: '长地轨库区',
+          name: '加工中心单元库区',
           total: 9,
           filled: 6,
           slots: this.createSlots(['S1', 'S2', 'S4', 'S6', 'S7', 'S9'], 9)
         },
         {
-          name: '短地轨库区',
+          name: '车床加工单元库区',
           total: 9,
           filled: 6,
           slots: this.createSlots(['S1', 'S3', 'S4', 'S6', 'S8', 'S9'], 9)
         },
         {
-          name: '关节库区',
+          name: '插齿机单元库区',
           total: 6,
           filled: 4,
           slots: this.createSlots(['S1', 'S3', 'S5', 'S6'], 6)
+        },
+        {
+          name: '磨床加工单元库区',
+          total: 6,
+          filled: 3,
+          slots: this.createSlots(['S2', 'S4', 'S6'], 6)
         }
       ],
       alarmEvents: [
         { time: '10:26', device: 'MAZAK', level: '严重', type: 'alarm', message: 'ALARM=1，建议定位机床侧运行条件。' },
         { time: '10:22', device: '测量仪', level: '严重', type: 'alarm', message: '测量流程中断，等待复测确认。' },
         { time: '10:18', device: 'L2100SY', level: '警告', type: 'warn', message: '目标程序与实际程序不一致。' },
-        { time: '10:12', device: '关节机器人', level: '警告', type: 'warn', message: '自动模式待恢复，需要人工确认。' },
+        { time: '10:12', device: '插齿机单元机器人', level: '警告', type: 'warn', message: '自动模式待恢复，需要人工确认。' },
         { time: '10:08', device: '清洗机', level: '警告', type: 'warn', message: '下料等待时间超过设定阈值。' },
-        { time: '10:03', device: '短地轨', level: '提示', type: 'idle', message: '任务已接收，等待上游放行。' }
+        { time: '10:03', device: '车床加工单元', level: '提示', type: 'idle', message: '任务已接收，等待上游放行。' },
+        { time: '09:58', device: '磨床加工单元', level: '提示', type: 'idle', message: '预制单元待接入，当前按模拟节拍展示。' }
       ],
       alarmFrequencyTop5: [
         { name: 'MAZAK', value: 12 },
         { name: '测量仪', value: 9 },
-        { name: '关节机器人', value: 7 },
+        { name: '插齿机单元', value: 7 },
         { name: 'L2100SY', value: 5 },
-        { name: '清洗机', value: 4 }
+        { name: '磨床加工单元', value: 4 }
       ],
       historyTicks: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
       historyLegend: [
@@ -441,9 +486,10 @@ export default {
         { label: '报警', type: 'alarm' }
       ],
       deviceHistoryList: [
-        { name: '长地轨机器人', segments: [{ label: '待机', type: 'standby', start: 0, end: 3.4 }, { label: '运行', type: 'run', start: 3.4, end: 10.8 }, { label: '待机', type: 'standby', start: 10.8, end: 12.1 }, { label: '运行', type: 'run', start: 12.1, end: 20.4 }, { label: '关机', type: 'off', start: 20.4, end: 24 }] },
-        { name: '短地轨机器人', segments: [{ label: '运行', type: 'run', start: 0, end: 5.2 }, { label: '待机', type: 'standby', start: 5.2, end: 8.8 }, { label: '运行', type: 'run', start: 8.8, end: 17.6 }, { label: '待机', type: 'standby', start: 17.6, end: 18.7 }, { label: '运行', type: 'run', start: 18.7, end: 24 }] },
-        { name: '关节机器人', segments: [{ label: '关机', type: 'off', start: 0, end: 2.5 }, { label: '运行', type: 'run', start: 2.5, end: 9.4 }, { label: '报警', type: 'alarm', start: 9.4, end: 10.3 }, { label: '待机', type: 'standby', start: 10.3, end: 13.1 }, { label: '运行', type: 'run', start: 13.1, end: 24 }] },
+        { name: '加工中心单元机器人', segments: [{ label: '待机', type: 'standby', start: 0, end: 3.4 }, { label: '运行', type: 'run', start: 3.4, end: 10.8 }, { label: '待机', type: 'standby', start: 10.8, end: 12.1 }, { label: '运行', type: 'run', start: 12.1, end: 20.4 }, { label: '关机', type: 'off', start: 20.4, end: 24 }] },
+        { name: '车床加工单元机器人', segments: [{ label: '运行', type: 'run', start: 0, end: 5.2 }, { label: '待机', type: 'standby', start: 5.2, end: 8.8 }, { label: '运行', type: 'run', start: 8.8, end: 17.6 }, { label: '待机', type: 'standby', start: 17.6, end: 18.7 }, { label: '运行', type: 'run', start: 18.7, end: 24 }] },
+        { name: '插齿机单元机器人', segments: [{ label: '关机', type: 'off', start: 0, end: 2.5 }, { label: '运行', type: 'run', start: 2.5, end: 9.4 }, { label: '报警', type: 'alarm', start: 9.4, end: 10.3 }, { label: '待机', type: 'standby', start: 10.3, end: 13.1 }, { label: '运行', type: 'run', start: 13.1, end: 24 }] },
+        { name: '磨床加工单元', segments: [{ label: '关机', type: 'off', start: 0, end: 3.2 }, { label: '待机', type: 'standby', start: 3.2, end: 6.4 }, { label: '运行', type: 'run', start: 6.4, end: 15.8 }, { label: '待机', type: 'standby', start: 15.8, end: 17.2 }, { label: '运行', type: 'run', start: 17.2, end: 24 }] },
         { name: 'F500', segments: [{ label: '运行', type: 'run', start: 0, end: 7.8 }, { label: '待机', type: 'standby', start: 7.8, end: 9.2 }, { label: '运行', type: 'run', start: 9.2, end: 18.6 }, { label: '待机', type: 'standby', start: 18.6, end: 19.4 }, { label: '运行', type: 'run', start: 19.4, end: 24 }] },
         { name: 'L2100SY', segments: [{ label: '关机', type: 'off', start: 0, end: 4.1 }, { label: '运行', type: 'run', start: 4.1, end: 11.6 }, { label: '报警', type: 'alarm', start: 11.6, end: 12.8 }, { label: '运行', type: 'run', start: 12.8, end: 24 }] },
         { name: 'L2000LSY', segments: [{ label: '运行', type: 'run', start: 0, end: 6.6 }, { label: '待机', type: 'standby', start: 6.6, end: 7.8 }, { label: '运行', type: 'run', start: 7.8, end: 16.2 }, { label: '待机', type: 'standby', start: 16.2, end: 17.1 }, { label: '运行', type: 'run', start: 17.1, end: 24 }] },
@@ -452,13 +498,16 @@ export default {
         { name: 'YKD5132H', segments: [{ label: '关机', type: 'off', start: 0, end: 2.8 }, { label: '运行', type: 'run', start: 2.8, end: 12.2 }, { label: '待机', type: 'standby', start: 12.2, end: 13.5 }, { label: '运行', type: 'run', start: 13.5, end: 24 }] },
         { name: '清洗机', segments: [{ label: '关机', type: 'off', start: 0, end: 4.4 }, { label: '运行', type: 'run', start: 4.4, end: 9.7 }, { label: '待机', type: 'standby', start: 9.7, end: 13.6 }, { label: '运行', type: 'run', start: 13.6, end: 18.8 }, { label: '关机', type: 'off', start: 18.8, end: 24 }] },
         { name: '测量仪', segments: [{ label: '待机', type: 'standby', start: 0, end: 5.1 }, { label: '运行', type: 'run', start: 5.1, end: 13.3 }, { label: '待机', type: 'standby', start: 13.3, end: 14.2 }, { label: '运行', type: 'run', start: 14.2, end: 24 }] },
-        { name: '长地轨打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 6.5 }, { label: '运行', type: 'run', start: 6.5, end: 11.2 }, { label: '待机', type: 'standby', start: 11.2, end: 15.8 }, { label: '运行', type: 'run', start: 15.8, end: 24 }] },
-        { name: '短地轨打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 4.9 }, { label: '运行', type: 'run', start: 4.9, end: 12.6 }, { label: '待机', type: 'standby', start: 12.6, end: 13.4 }, { label: '运行', type: 'run', start: 13.4, end: 24 }] },
-        { name: '关节打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 7.1 }, { label: '运行', type: 'run', start: 7.1, end: 10.9 }, { label: '待机', type: 'standby', start: 10.9, end: 16.5 }, { label: '运行', type: 'run', start: 16.5, end: 24 }] }
+        { name: '加工中心单元打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 6.5 }, { label: '运行', type: 'run', start: 6.5, end: 11.2 }, { label: '待机', type: 'standby', start: 11.2, end: 15.8 }, { label: '运行', type: 'run', start: 15.8, end: 24 }] },
+        { name: '车床加工单元打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 4.9 }, { label: '运行', type: 'run', start: 4.9, end: 12.6 }, { label: '待机', type: 'standby', start: 12.6, end: 13.4 }, { label: '运行', type: 'run', start: 13.4, end: 24 }] },
+        { name: '插齿机单元打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 7.1 }, { label: '运行', type: 'run', start: 7.1, end: 10.9 }, { label: '待机', type: 'standby', start: 10.9, end: 16.5 }, { label: '运行', type: 'run', start: 16.5, end: 24 }] }
       ]
     }
   },
   computed: {
+    lineMonitorScrollList() {
+      return [...this.lineMonitorRows, ...this.lineMonitorRows]
+    },
     equipmentScrollList() {
       return [...this.equipmentList, ...this.equipmentList]
     },
@@ -468,6 +517,18 @@ export default {
     deviceHistoryScrollList() {
       return [...this.deviceHistoryList, ...this.deviceHistoryList]
     },
+    lineMonitorScrollOption() {
+      return {
+        step: 0.38,
+        limitMoveNum: 3,
+        hoverStop: true,
+        direction: 1,
+        openTouch: false,
+        singleHeight: 168,
+        waitTime: 1200,
+        autoPlay: true
+      }
+    },
     equipmentScrollOption() {
       return {
         step: 0.45,
@@ -838,7 +899,6 @@ body,
   z-index: 0;
   background:
     radial-gradient(circle at 50% 48%, rgba(44, 143, 255, 0.14), transparent 34%);
-  mix-blend-mode: screen;
   opacity: 0.42;
   pointer-events: none;
 }
@@ -857,12 +917,12 @@ body,
   pointer-events: none;
   display: flex;
   justify-content: center;
-  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
 }
 
 .view-switch {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 6px;
   pointer-events: auto;
 }
@@ -880,7 +940,7 @@ body,
     inset 0 -10px 18px rgba(0, 0, 0, 0.18),
     0 6px 14px rgba(0, 0, 0, 0.28);
   font-family: inherit;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   line-height: 28px;
   white-space: nowrap;
@@ -978,10 +1038,19 @@ body,
   display: block;
   width: 300px;
   height: 50px;
+  box-sizing: border-box;
+  padding: 6px 12px;
   object-fit: contain;
   object-position: left center;
   pointer-events: none;
-  filter: drop-shadow(0 0 10px rgba(114, 232, 255, 0.28));
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(231, 242, 248, 0.9)),
+    rgba(255, 255, 255, 0.92);
+  box-shadow:
+    inset 0 0 0 1px rgba(114, 206, 255, 0.14),
+    0 0 16px rgba(114, 232, 255, 0.18),
+    0 8px 20px rgba(0, 0, 0, 0.18);
 }
 
 .mode-button-group {
@@ -1061,7 +1130,7 @@ body,
 .left-control-bar,
 .right-control-bar {
   position: absolute;
-  width: 300px;
+  width: 520px;
   z-index: 20;
   pointer-events: auto;
 }
@@ -1093,7 +1162,7 @@ body,
 }
 
 .right-control-bar .view-switch {
-  width: 300px;
+  width: 520px;
   justify-self: end;
 }
 
@@ -1171,15 +1240,30 @@ body,
 }
 
 .line-monitor-body {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
   padding: 8px 12px;
   overflow: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
+.line-monitor-scroll-box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.line-monitor-scroll,
+.line-monitor-content {
+  min-height: 100%;
+  overflow: hidden;
+}
+
+.line-monitor-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .right-box .qa-panel:first-child {
   flex: 1;
   min-height: 0;
@@ -1453,8 +1537,8 @@ body,
 }
 
 .monitor-card {
-  flex: 1;
-  min-height: 0;
+  flex: 0 0 168px;
+  min-height: 168px;
   margin-bottom: 0;
   padding: 8px 12px;
   display: flex;
@@ -1780,7 +1864,7 @@ body,
 .assist-head,
 .assist-status-row {
   display: grid;
-  grid-template-columns: 86px minmax(138px, 1fr) 50px;
+  grid-template-columns: 118px minmax(108px, 1fr) 50px;
   align-items: center;
   gap: 8px;
 }
@@ -1843,7 +1927,7 @@ body,
 
 .storage-groups {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
   align-items: stretch;
   width: 100%;
@@ -2015,7 +2099,7 @@ body,
 .history-head,
 .history-row {
   display: grid;
-  grid-template-columns: 92px 1fr;
+  grid-template-columns: 132px 1fr;
   align-items: center;
   gap: 10px;
   box-sizing: border-box;