style(scada): 格式化代码并优化布局结构

- 标准化缩进和代码格式 - 修复表格结构中的缩进问题 - 调整CSS样式以改善响应式布局 - 优化组件模板结构提升可读性 - 统一代码风格提高维护性 - 改进HTML标签嵌套结构
2026-03-27 16:53:06 +08:00
parent 3c0b29333c
commit adc41d5918
1 changed files with 1218 additions and 967 deletions
--- a/src/views/scada/picture/screen.vue
+++ b/src/views/scada/picture/screen.vue
@@ -247,49 +247,289 @@ export default {
      maintenanceItemsPerPage: 5,
      maintenanceData: [
        // 维修完成情况数据（20条）
-                { workOrderId: 'GZ20241106001', workOrderName: '片剂生产', deviceName: '压片机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106002', workOrderName: '胶囊填充', deviceName: '胶囊充填机', priority: '中', status: 'warning' },
-                { workOrderId: 'GZ20241106003', workOrderName: '药品包装', deviceName: '包装机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106004', workOrderName: '原料灭菌', deviceName: '灭菌器', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106005', workOrderName: '冻干处理', deviceName: '冻干机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106006', workOrderName: '配料准备', deviceName: '配料系统', priority: '中', status: 'running' },
-                { workOrderId: 'GZ20241106007', workOrderName: '贴标处理', deviceName: '贴标机', priority: '低', status: 'running' },
-                { workOrderId: 'GZ20241106008', workOrderName: '烘干处理', deviceName: '灭菌烘箱', priority: '高', status: 'error' },
-                { workOrderId: 'GZ20241106009', workOrderName: '颗粒包装', deviceName: '颗粒包装机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106010', workOrderName: '粉末包装', deviceName: '粉末包装机', priority: '中', status: 'running' },
-                { workOrderId: 'GZ20241106011', workOrderName: '液体灌装', deviceName: '液体灌装机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106012', workOrderName: '西林瓶灌装', deviceName: '西林瓶灌装机', priority: '中', status: 'warning' },
-                { workOrderId: 'GZ20241106013', workOrderName: '安瓿瓶灌装', deviceName: '安瓿瓶灌装机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106014', workOrderName: '口服液灌装', deviceName: '口服液灌装机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106015', workOrderName: '软膏灌装', deviceName: '软膏灌装机', priority: '高', status: 'error' },
-                { workOrderId: 'GZ20241106016', workOrderName: '栓剂成型', deviceName: '栓剂成型机', priority: '中', status: 'running' },
-                { workOrderId: 'GZ20241106017', workOrderName: '软胶囊生产', deviceName: '软胶囊机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106018', workOrderName: '硬胶囊生产', deviceName: '硬胶囊机', priority: '中', status: 'warning' },
-                { workOrderId: 'GZ20241106019', workOrderName: '丸剂成型', deviceName: '丸剂成型机', priority: '高', status: 'running' },
-                { workOrderId: 'GZ20241106020', workOrderName: '片剂包衣', deviceName: '片剂包衣机', priority: '高', status: 'running' }
+        {
+          workOrderId: 'GZ20241106001',
+          workOrderName: '片剂生产',
+          deviceName: '压片机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106002',
+          workOrderName: '胶囊填充',
+          deviceName: '胶囊充填机',
+          priority: '中',
+          status: 'warning'
+        },
+        {
+          workOrderId: 'GZ20241106003',
+          workOrderName: '药品包装',
+          deviceName: '包装机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106004',
+          workOrderName: '原料灭菌',
+          deviceName: '灭菌器',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106005',
+          workOrderName: '冻干处理',
+          deviceName: '冻干机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106006',
+          workOrderName: '配料准备',
+          deviceName: '配料系统',
+          priority: '中',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106007',
+          workOrderName: '贴标处理',
+          deviceName: '贴标机',
+          priority: '低',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106008',
+          workOrderName: '烘干处理',
+          deviceName: '灭菌烘箱',
+          priority: '高',
+          status: 'error'
+        },
+        {
+          workOrderId: 'GZ20241106009',
+          workOrderName: '颗粒包装',
+          deviceName: '颗粒包装机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106010',
+          workOrderName: '粉末包装',
+          deviceName: '粉末包装机',
+          priority: '中',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106011',
+          workOrderName: '液体灌装',
+          deviceName: '液体灌装机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106012',
+          workOrderName: '西林瓶灌装',
+          deviceName: '西林瓶灌装机',
+          priority: '中',
+          status: 'warning'
+        },
+        {
+          workOrderId: 'GZ20241106013',
+          workOrderName: '安瓿瓶灌装',
+          deviceName: '安瓿瓶灌装机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106014',
+          workOrderName: '口服液灌装',
+          deviceName: '口服液灌装机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106015',
+          workOrderName: '软膏灌装',
+          deviceName: '软膏灌装机',
+          priority: '高',
+          status: 'error'
+        },
+        {
+          workOrderId: 'GZ20241106016',
+          workOrderName: '栓剂成型',
+          deviceName: '栓剂成型机',
+          priority: '中',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106017',
+          workOrderName: '软胶囊生产',
+          deviceName: '软胶囊机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106018',
+          workOrderName: '硬胶囊生产',
+          deviceName: '硬胶囊机',
+          priority: '中',
+          status: 'warning'
+        },
+        {
+          workOrderId: 'GZ20241106019',
+          workOrderName: '丸剂成型',
+          deviceName: '丸剂成型机',
+          priority: '高',
+          status: 'running'
+        },
+        {
+          workOrderId: 'GZ20241106020',
+          workOrderName: '片剂包衣',
+          deviceName: '片剂包衣机',
+          priority: '高',
+          status: 'running'
+        }
      ],
      maintenanceStats: [
        // 保养统计数据（20条）
-                { maintenanceId: 'BY20241106001', maintenanceName: '季度保养', deviceName: '压片机', maintenanceCycle: '3个月', status: '已完成' },
-                { maintenanceId: 'BY20241106002', maintenanceName: '月度保养', deviceName: '胶囊充填机', maintenanceCycle: '1个月', status: '待开始' },
-                { maintenanceId: 'BY20241106003', maintenanceName: '年度保养', deviceName: '包装机', maintenanceCycle: '12个月', status: '已完成' },
-                { maintenanceId: 'BY20241106004', maintenanceName: '季度保养', deviceName: '灭菌器', maintenanceCycle: '3个月', status: '已完成' },
-                { maintenanceId: 'BY20241106005', maintenanceName: '月度保养', deviceName: '冻干机', maintenanceCycle: '1个月', status: '已完成' },
-                { maintenanceId: 'BY20241106006', maintenanceName: '季度保养', deviceName: '配料系统', maintenanceCycle: '3个月', status: '已完成' },
-                { maintenanceId: 'BY20241106007', maintenanceName: '月度保养', deviceName: '贴标机', maintenanceCycle: '1个月', status: '已完成' },
-                { maintenanceId: 'BY20241106008', maintenanceName: '年度保养', deviceName: '灭菌烘箱', maintenanceCycle: '12个月', status: '故障' },
-                { maintenanceId: 'BY20241106009', maintenanceName: '季度保养', deviceName: '颗粒包装机', maintenanceCycle: '3个月', status: '已完成' },
-                { maintenanceId: 'BY20241106010', maintenanceName: '月度保养', deviceName: '粉末包装机', maintenanceCycle: '1个月', status: '待开始' },
-                { maintenanceId: 'BY20241106011', maintenanceName: '年度保养', deviceName: '液体灌装机', maintenanceCycle: '12个月', status: '已完成' },
-                { maintenanceId: 'BY20241106012', maintenanceName: '季度保养', deviceName: '西林瓶灌装机', maintenanceCycle: '3个月', status: '待开始' },
-                { maintenanceId: 'BY20241106013', maintenanceName: '月度保养', deviceName: '安瓿瓶灌装机', maintenanceCycle: '1个月', status: '已完成' },
-                { maintenanceId: 'BY20241106014', maintenanceName: '年度保养', deviceName: '口服液灌装机', maintenanceCycle: '12个月', status: '已完成' },
-                { maintenanceId: 'BY20241106015', maintenanceName: '季度保养', deviceName: '软膏灌装机', maintenanceCycle: '3个月', status: '故障' },
-                { maintenanceId: 'BY20241106016', maintenanceName: '月度保养', deviceName: '栓剂成型机', maintenanceCycle: '1个月', status: '已完成' },
-                { maintenanceId: 'BY20241106017', maintenanceName: '年度保养', deviceName: '软胶囊机', maintenanceCycle: '12个月', status: '已完成' },
-                { maintenanceId: 'BY20241106018', maintenanceName: '季度保养', deviceName: '硬胶囊机', maintenanceCycle: '3个月', status: '待开始' },
-                { maintenanceId: 'BY20241106019', maintenanceName: '月度保养', deviceName: '丸剂成型机', maintenanceCycle: '1个月', status: '已完成' },
-                { maintenanceId: 'BY20241106020', maintenanceName: '年度保养', deviceName: '片剂包衣机', maintenanceCycle: '12个月', status: '已完成' }
+        {
+          maintenanceId: 'BY20241106001',
+          maintenanceName: '季度保养',
+          deviceName: '压片机',
+          maintenanceCycle: '3个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106002',
+          maintenanceName: '月度保养',
+          deviceName: '胶囊充填机',
+          maintenanceCycle: '1个月',
+          status: '待开始'
+        },
+        {
+          maintenanceId: 'BY20241106003',
+          maintenanceName: '年度保养',
+          deviceName: '包装机',
+          maintenanceCycle: '12个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106004',
+          maintenanceName: '季度保养',
+          deviceName: '灭菌器',
+          maintenanceCycle: '3个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106005',
+          maintenanceName: '月度保养',
+          deviceName: '冻干机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106006',
+          maintenanceName: '季度保养',
+          deviceName: '配料系统',
+          maintenanceCycle: '3个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106007',
+          maintenanceName: '月度保养',
+          deviceName: '贴标机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106008',
+          maintenanceName: '年度保养',
+          deviceName: '灭菌烘箱',
+          maintenanceCycle: '12个月',
+          status: '故障'
+        },
+        {
+          maintenanceId: 'BY20241106009',
+          maintenanceName: '季度保养',
+          deviceName: '颗粒包装机',
+          maintenanceCycle: '3个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106010',
+          maintenanceName: '月度保养',
+          deviceName: '粉末包装机',
+          maintenanceCycle: '1个月',
+          status: '待开始'
+        },
+        {
+          maintenanceId: 'BY20241106011',
+          maintenanceName: '年度保养',
+          deviceName: '液体灌装机',
+          maintenanceCycle: '12个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106012',
+          maintenanceName: '季度保养',
+          deviceName: '西林瓶灌装机',
+          maintenanceCycle: '3个月',
+          status: '待开始'
+        },
+        {
+          maintenanceId: 'BY20241106013',
+          maintenanceName: '月度保养',
+          deviceName: '安瓿瓶灌装机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106014',
+          maintenanceName: '年度保养',
+          deviceName: '口服液灌装机',
+          maintenanceCycle: '12个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106015',
+          maintenanceName: '季度保养',
+          deviceName: '软膏灌装机',
+          maintenanceCycle: '3个月',
+          status: '故障'
+        },
+        {
+          maintenanceId: 'BY20241106016',
+          maintenanceName: '月度保养',
+          deviceName: '栓剂成型机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106017',
+          maintenanceName: '年度保养',
+          deviceName: '软胶囊机',
+          maintenanceCycle: '12个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106018',
+          maintenanceName: '季度保养',
+          deviceName: '硬胶囊机',
+          maintenanceCycle: '3个月',
+          status: '待开始'
+        },
+        {
+          maintenanceId: 'BY20241106019',
+          maintenanceName: '月度保养',
+          deviceName: '丸剂成型机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
+        },
+        {
+          maintenanceId: 'BY20241106020',
+          maintenanceName: '年度保养',
+          deviceName: '片剂包衣机',
+          maintenanceCycle: '12个月',
+          status: '已完成'
+        }
      ]
    };
  },
@@ -323,18 +563,26 @@ export default {
    },
    getStatusClass(status) {
      switch (status) {
-                case 'running': return 'status-running';
-                case 'warning': return 'status-warning';
-                case 'error': return 'status-error';
-                default: return '';
+        case 'running':
+          return 'status-running';
+        case 'warning':
+          return 'status-warning';
+        case 'error':
+          return 'status-error';
+        default:
+          return '';
      }
    },
    getStatusText(status) {
      switch (status) {
-                case 'running': return '运行中';
-                case 'warning': return '预警';
-                case 'error': return '故障';
-                default: return '未知';
+        case 'running':
+          return '运行中';
+        case 'warning':
+          return '预警';
+        case 'error':
+          return '故障';
+        default:
+          return '未知';
      }
    },
    goToPreviousPage() {
@@ -772,6 +1020,7 @@ export default {
  /* top: 10vh;
  left: 64vw; */
 }
+
 .marker-15 {
  transform: scale(1.5);
  top: 55%; /* 相对于父元素高度的百分比 */
@@ -856,6 +1105,7 @@ export default {
  /* top: 10vh;
  left: 64vw; */
 }
+
 .marker-17 {
  transform: scale(1.5);
  top: 68%; /* 相对于父元素高度的百分比 */
@@ -873,6 +1123,7 @@ export default {
  left: 64vw; */

 }
+
 .chart-container {
  padding: 15px;
  display: flex;