/* ============ 异常风险预测页（机台分布）专属样式 ============ */ /* ============ 机台分布页面 ============ */ #page-machine .md-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-machine .md-anomaly-btn { background-color: #f5b50a; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(245,181,10,.4); transition: background-color .25s, transform .15s, opacity .25s; font-family: inherit; } #page-machine .md-anomaly-btn:hover { background-color: #e5a705; transform: translateY(-1px); } #page-machine .md-anomaly-btn:active { transform: translateY(0); } #page-machine .md-anomaly-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } #page-machine { position: relative; } #page-machine .factory-layout { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-right: 290px; } /* 异常预测侧栏：绝对定位到右侧，不参与机台布局流，避免破坏原有机台布局 */ #page-machine .md-sidebar { position: absolute; top: 60px; right: 60px; width: 250px; padding: 16px; background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; box-shadow: 0 2px 10px rgba(50,60,120,.06); box-sizing: border-box; } #page-machine .md-sidebar-title { font-size: 16px; font-weight: 700; color: #2b3345; margin-bottom: 6px; } #page-machine .md-sidebar-tip { font-size: 12px; color: #8a93a6; margin-bottom: 14px; line-height: 1.5; } #page-machine .md-filter-item { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } #page-machine .md-filter-item .report-filter-label { font-size: 13px; font-weight: 600; color: #5b6577; } #page-machine .md-filter-item .multi-select { min-width: 0; width: 100%; max-width: none; flex: none; box-sizing: border-box; } #page-machine .md-filter-item .multi-select-panel { max-width: 250px; } #page-machine .md-sidebar .md-anomaly-btn { width: 100%; margin-top: 4px; } #page-machine .layout-row { display: flex; gap: 12px; align-items: stretch; } #page-machine .left-section { display: flex; flex-direction: column; gap: 4px; } #page-machine .top-machines { display: flex; gap: 4px; } #page-machine .md-rooms { display: flex; flex-direction: column; gap: 4px; width: 192px; flex: 1; } #page-machine .md-room { background: #fff; border: 2px solid #dde3ee; border-radius: 8px; padding: 8px 12px; text-align: center; font-weight: 600; color: #5b6577; flex: 1; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; cursor: pointer; transition: .3s; font-family: inherit; } #page-machine .md-room:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(50,60,120,.1); } #page-machine .md-room:active { transform: scale(.98); } #page-machine .md-room-qujing { height: 108px; flex: none; } #page-machine .machine-area { display: flex; flex-direction: column; gap: 4px; flex: 1; } #page-machine .machine-row { display: flex; gap: 4px; align-items: center; } #page-machine .machine-group { display: flex; gap: 4px; } #page-machine .machine-group + .machine-group { margin-left: 12px; } #page-machine .right-column { display: flex; flex-direction: column; gap: 8px; margin-left: 8px; } #page-machine .door-area { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: #5b6577; width: 188px; margin-left: 336px; } #page-machine .door-arrow { font-size: 18px; } #page-machine .aisle-gap { height: 24px; width: 100%; } #page-machine .machine-cell { width: 60px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; border: 2px solid transparent; cursor: default; flex-shrink: 0; background: none; font-family: inherit; color: inherit; transition: transform .3s, box-shadow .3s; } #page-machine .machine-cell:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(50,60,120,.12); } #page-machine .status-normal { background: rgba(46,158,91,.15); border-color: #2e9e5b; color: #2e9e5b; } #page-machine .status-notice { background: rgba(124,179,66,.16); border-color: #7cb342; color: #557f1f; } #page-machine .status-warn { background: rgba(212,160,23,.18); border-color: #d4a017; color: #9a7100; } #page-machine .status-error { background: rgba(201,31,58,.16); border-color: #c91f3a; color: #a6112b; } #page-machine .status-aux, #page-machine .status-research { background: rgba(138,147,166,.15); border-color: #8a93a6; color: #8a93a6; opacity: 1; } /* 点击"异常预测"后，削弱辅助/研发机台可见性，减少对生产机台的干扰 */ #page-machine.analyzed .status-aux, #page-machine.analyzed .status-research { background: rgba(138,147,166,.10); border-color: #c6cbd6; color: #aab0bd; opacity: .6; } #page-machine .machine-cell.status-aux, #page-machine .machine-cell.status-research { cursor: default; } #page-machine .machine-cell.status-normal, #page-machine .machine-cell.status-notice, #page-machine .machine-cell.status-warn, #page-machine .machine-cell.status-error { cursor: pointer; } /* 机台判分详情弹层 */ #page-machine .md-detail { display: none; position: fixed; left: auto; top: auto; right: auto; z-index: 1500; width: 420px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border: 1px solid #dde3ee; border-radius: 12px; box-shadow: 0 8px 30px rgba(50,60,120,.18); font-family: inherit; } #page-machine .md-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eef1f6; } #page-machine .md-detail-title { font-size: 15px; font-weight: 700; color: #2b3345; display: flex; align-items: center; gap: 8px; } #page-machine .md-detail-level { font-style: normal; font-size: 12px; color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: 600; } #page-machine .md-detail-close { font-size: 20px; line-height: 1; color: #8a93a6; cursor: pointer; padding: 0 4px; } #page-machine .md-detail-updated { font-size: 12px; color: #b4bcc8; font-weight: 400; margin-left: auto; margin-right: 24px; white-space: nowrap; } #page-machine .md-detail-close:hover { color: #d64545; } #page-machine .md-detail-body { padding: 12px 16px; } #page-machine .md-detail-sum { font-size: 14px; color: #2b3345; margin-bottom: 8px; } #page-machine .md-detail-note { font-size: 12px; color: #d1491b; background: rgba(226,88,34,.08); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; } #page-machine .md-detail-note.md-veto { color: #d64545; background: rgba(214,69,69,.10); } #page-machine .md-detail-empty { color: #8a93a6; font-size: 13px; padding: 8px 0; } #page-machine .md-detail-section { font-size: 13px; font-weight: 600; color: #5b6577; margin: 10px 0 6px; } #page-machine .md-detail-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } #page-machine .md-detail-tbl th, #page-machine .md-detail-tbl td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #f0f3f8; } #page-machine .md-detail-tbl th { color: #8a93a6; font-weight: 600; } #page-machine .md-detail-tbl td.md-num { text-align: right; font-variant-numeric: tabular-nums; } #page-machine .md-detail-tbl td.md-num.md-inc { color: #d1491b; font-weight: 700; } #page-machine .md-legend { display: flex; gap: 20px; margin-top: 16px; justify-content: center; flex-wrap: wrap; margin-right: 336px; } #page-machine .md-legend-item { display: flex; align-items: center; gap: 4px; font-size: 14px; } #page-machine .md-legend-dot { width: 14px !important; height: 14px !important; border-radius: 50% !important; } /* 图例颜色小球：用 class + !important 兜底，避免 WebView2 桌面版对部分样式不生效导致小球不可见（网页版视觉不变） */ #page-machine .md-legend-dot.md-ok { background: #2e9e5b !important; } #page-machine .md-legend-dot.md-notice { background: #7cb342 !important; } #page-machine .md-legend-dot.md-warn { background: #d4a017 !important; } #page-machine .md-legend-dot.md-error { background: #c91f3a !important; } #page-machine .md-legend-dot.md-aux { background: #8a93a6 !important; } #page-machine .md-legend-dot.md-research{ background: #8a93a6 !important; } @media(max-width:1200px){ #page-machine .machine-cell { width:54px; height:46px; font-size:12px; } #page-machine .md-rooms { width:168px; } #page-machine .door-area { margin-left:290px; } } @media(max-width:768px){ #page-machine .md-sidebar { position: relative; top: auto; right: auto; width: auto; margin-bottom: 12px; } #page-machine .factory-layout { margin-right: 0; } #page-machine .md-legend { margin-right: 0; } #page-machine .layout-row { flex-direction:column; } #page-machine .md-rooms { flex-direction:row; width:auto; } #page-machine .md-room { writing-mode:horizontal-tb; min-height:60px; } #page-machine .machine-cell { width:100%; min-height:44px; height:auto; } }