<template>
  <div class="workshop-board">
    <div class="board-header">
      <div class="header-cell">
        <div class="header-label">看板编号</div>
        <div class="header-value">HY-CJKB-001</div>
      </div>
      <div class="header-cell">
        <div class="header-label">管理责任人</div>
        <div class="header-value">张主管</div>
      </div>
      <div class="header-cell">
        <div class="header-label">更新时间</div>
        <div class="header-value">{{ updateTime }}</div>
      </div>
    </div>

    <div class="board-body">
      <section class="board-main">
        <div class="board-stats">
          <div class="stats-title">设备列表</div>
          <div class="stats-item">设备总数： <span class="stats-value">{{ summary.total }}</span></div>
          <div class="stats-item">在线数量： <span class="stats-value">{{ summary.online }}</span></div>
          <div class="stats-item">运行数量： <span class="stats-value">{{ summary.running }}</span></div>
          <div class="stats-item">停止数量： <span class="stats-value">{{ summary.stop }}</span></div>
          <div class="stats-item">开机率： <span class="stats-value">{{ summary.startRate }}</span></div>
        </div>

        <div class="machine-grid">
          <article
            v-for="item in orderedMachineList"
            :key="item.id"
            class="machine-card"
            @click="openDetail(item)"
          >
            <span
              v-if="item.id === 5 || item.id === 6"
              class="fold-mark fold-mark--card"
              aria-hidden="true"
            />
            <div class="machine-card__title">
              <span class="status-dot" :class="item.statusClass" />
              <span>（{{ item.statusText }}）</span>
              <span class="machine-no">{{ item.name }}</span>
              <span>{{ item.model }}</span>
              <span>{{ item.mode }}模式</span>
            </div>

            <div class="machine-sections">
              <section class="machine-panel machine-panel--primary">
                <div class="machine-fields machine-fields--primary">
                  <div class="machine-field machine-field--accent">
                    <span class="machine-field__label">今日<br/>开机时间</span>
                    <span class="machine-field__value">{{ item.runtime }}</span>
                  </div>
                  <div class="machine-field machine-field--accent">
                    <span class="machine-field__label">今日<br/>计件数</span>
                    <span class="machine-field__value">{{ item.output }}</span>
                  </div>
                  <div class="machine-field machine-field--accent">
                    <span class="machine-field__label">任务<br/>进度</span>
                    <span class="machine-field__value">{{ item.progress }}</span>
                  </div>
                </div>
              </section>

              <section class="machine-panel machine-panel--secondary">
                <div class="machine-fields machine-fields--secondary">
                  <div class="machine-field">
                    <span class="machine-field__label">工单日期</span>
                    <span class="machine-field__value">{{ item.workDate }}</span>
                  </div>
                  <div class="machine-field">
                    <span class="machine-field__label">批次号</span>
                    <span class="machine-field__value">{{ item.batchNo }}</span>
                  </div>
                  <div class="machine-field">
                    <span class="machine-field__label">计划产量</span>
                    <span class="machine-field__value">{{ item.planQty }}</span>
                  </div>
                  <div class="machine-field">
                    <span class="machine-field__label">型号</span>
                    <span class="machine-field__value">{{ item.productModel }}</span>
                  </div>
                  <div class="machine-field">
                    <span class="machine-field__label">颜色</span>
                    <span class="machine-field__value">{{ item.color }}</span>
                  </div>
                  <div class="machine-field">
                    <span class="machine-field__label">备注</span>
                    <span class="machine-field__value">{{ item.remark }}</span>
                  </div>

                </div>
              </section>
            </div>
          </article>
        </div>
      </section>

      <aside class="board-side">
        <section class="side-panel fault-panel">
          <span class="fold-mark fold-mark--panel" aria-hidden="true" />
          <div class="side-panel__title">今日故障记录：</div>
          <table class="side-table">
            <colgroup>
              <col style="width: 16%">
              <col style="width: 17%">
              <col style="width: 27%">
              <col style="width: 14%">
              <col style="width: 26%">
            </colgroup>
            <thead>
              <tr>
                <th>设备<br/>编号</th>
                <th>故障<br/>时间</th>
                <th>故障<br/>描述</th>
                <th>责任<br/>人</th>
                <th>预计<br/>恢复时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in faultList" :key="item.deviceNo + item.faultTime">
                <td>{{ item.deviceNo }}</td>
                <td>{{ item.faultTime }}</td>
                <td>{{ item.faultDesc }}</td>
                <td>{{ item.owner }}</td>
                <td>{{ item.recoverTime }}</td>
              </tr>
              <tr v-for="index in Math.max(0, faultTableRows - faultList.length)" :key="'fault-empty-' + index" class="is-empty">
                <td>&nbsp;</td>
                <td />
                <td />
                <td />
                <td />
              </tr>
            </tbody>
          </table>
          <div class="side-panel__time">更新时间： {{ updateTime }}</div>
        </section>

        <section class="side-panel plan-panel">
          <span class="fold-mark fold-mark--panel" aria-hidden="true" />
          <div class="side-panel__title">设备维护计划：</div>
          <table class="side-table">
            <colgroup>
              <col style="width: 18%">
              <col style="width: 30%">
              <col style="width: 32%">
              <col style="width: 20%">
            </colgroup>
            <thead>
              <tr>
                <th>设备<br/>编号</th>
                <th>维护<br/>项目</th>
                <th>计划<br/>时间</th>
                <th>维护<br/>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in maintenanceList" :key="item.deviceNo + item.planTime">
                <td>{{ item.deviceNo }}</td>
                <td>{{ item.project }}</td>
                <td>{{ item.planTime }}</td>
                <td>{{ item.status }}</td>
              </tr>
              <tr v-for="index in Math.max(0, planTableRows - maintenanceList.length)" :key="'plan-empty-' + index" class="is-empty">
                <td>&nbsp;</td>
                <td />
                <td />
                <td />
              </tr>
            </tbody>
          </table>
          <div class="side-panel__time">更新时间： {{ updateTime }}</div>
        </section>
      </aside>
    </div>

    <el-dialog
      :visible.sync="detailVisible"
      width="88%"
      top="4vh"
      custom-class="board-dialog"
      :append-to-body="true"
    >
      <template slot="title">
        <div class="dialog-title">
          <span>{{ activeMachine.name }} 详细信息</span>
          <span class="dialog-subtitle">实时数据 / 设定参数 / 生产参数</span>
        </div>
      </template>

      <div class="dialog-body">
        <section class="dialog-section">
          <div class="section-head">
            <span>实时数据（定时发送）</span>
            <span>更新时间：{{ updateTime }}</span>
          </div>
          <div class="detail-table-wrap">
            <table class="detail-table">
              <thead>
                <tr>
                  <th>点位名称</th>
                  <th>实时数据</th>
                  <th>更新时间</th>
                  <th>设定值</th>
                  <th>设定时间</th>
                  <th>工单给定值</th>
                  <th>工单时间</th>
                  <th>历史曲线</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in detailRealtime" :key="item.name">
                  <td>{{ item.name }}</td>
                  <td>{{ item.current }}</td>
                  <td>{{ item.currentTime }}</td>
                  <td>{{ item.target }}</td>
                  <td>{{ item.targetTime }}</td>
                  <td>{{ item.orderValue }}</td>
                  <td>{{ item.orderTime }}</td>
                  <td><span class="curve-tag">一图三曲线</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="dialog-grid">
          <div class="dialog-section">
            <div class="section-head">
              <span>全部设定参数（变化上报）</span>
            </div>
            <div class="detail-table-wrap small">
              <table class="detail-table">
                <thead>
                  <tr>
                    <th>点位名称</th>
                    <th>设定数据</th>
                    <th>设定时间</th>
                    <th>工单给定值</th>
                    <th>工单时间</th>
                    <th>历史曲线</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in detailSetting" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td>{{ item.setting }}</td>
                    <td>{{ item.settingTime }}</td>
                    <td>{{ item.orderValue }}</td>
                    <td>{{ item.orderTime }}</td>
                    <td><span class="curve-tag">趋势</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="dialog-section">
            <div class="section-head">
              <span>生产参数（一模一次）</span>
            </div>
            <div class="detail-table-wrap small">
              <table class="detail-table">
                <thead>
                  <tr>
                    <th>点位名称</th>
                    <th>数据值</th>
                    <th>采集时间</th>
                    <th>历史曲线</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in detailProduction" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td>{{ item.value }}</td>
                    <td>{{ item.collectTime }}</td>
                    <td><span class="curve-tag">趋势</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>
      </div>
    </el-dialog>
  </div>
</template>

<script>
function createMachine(id, name, model, statusText, statusClass, mode, runtime, output, workDate, batchNo, planQty, progress, productModel, color, remark, nextModel) {
  return {
    id,
    name,
    model,
    statusText,
    statusClass,
    mode,
    runtime,
    output,
    workDate,
    batchNo,
    planQty,
    progress,
    productModel,
    color,
    remark,
    nextModel
  }
}

export default {
  name: 'WorkshopBoard',
  computed: {
    orderedMachineList() {
      return [...this.machineList].sort((a, b) => a.id - b.id)
    }
  },
  data() {
    return {
      detailVisible: false,
      updateTime: '',
      clockTimer: null,
      previousTitle: '',
      activeMachine: {},
      faultTableRows: 8,
      planTableRows: 8,
      summary: {
        total: 17,
        online: 15,
        running: 15,
        stop: 2,
        startRate: '88.2%'
      },
      faultList: [
        { deviceNo: '8#', faultTime: '09:25', faultDesc: '模温异常', owner: '李工', recoverTime: '10:10' },
        { deviceNo: '16#', faultTime: '11:40', faultDesc: '液压压力波动', owner: '王工', recoverTime: '13:00' },
        { deviceNo: '5#', faultTime: '13:18', faultDesc: '送料传感器告警', owner: '赵工', recoverTime: '13:45' }
      ],
      maintenanceList: [
        { deviceNo: '2#', project: '保养润滑系统', planTime: '2026-03-23 16:00', status: '待执行' },
        { deviceNo: '11#', project: '校验温控模块', planTime: '2026-03-23 18:00', status: '待执行' },
        { deviceNo: '14#', project: '更换过滤组件', planTime: '2026-03-24 09:00', status: '已排期' }
      ],
      machineList: [
        createMachine(6, '6#', 'MA2500/1000G', '状态', 'is-running', '运行', '13小时', '600个', '2026.3.16-3.18', '25110914', '5000个', '30%', '23W 中间盖', '7037C 灰', '重点订单', '159BB'),
        createMachine(12, '12#', 'MA1600/540G', '状态', 'is-running', '运行', '8小时', '305个', '2026.3.23-3.25', '25110953', '2800个', '27%', '中盖件', '灰色', '正常生产', 'J20R'),
        createMachine(5, '5#', 'MA2500 2S/1000', '状态', 'is-running', '运行', '6小时', '210个', '2026.3.22-3.24', '25110937', '3600个', '19%', '卡扣件', '7035 灰', '待维修', '32QR'),
        createMachine(11, '11#', 'MA3600/2250G', '状态', 'is-running', '运行', '15小时', '720个', '2026.3.23-3.25', '25110950', '6500个', '33%', '大型壳体', '深蓝', '计划保养', 'LT9X'),
        createMachine(17, '17#', 'MA1600/540G', '状态', 'is-running', '运行', '12小时', '510个', '2026.3.23-3.25', '25110961', '3600个', '53%', '面框件', '冷白', '正常生产', 'AA17'),
        createMachine(4, '4#', 'MA2500/1000G', '状态', 'is-running', '运行', '10小时', '488个', '2026.3.21-3.22', '25110931', '4500个', '61%', '28W 外壳', '米白', '正常生产', '26WA'),
        createMachine(10, '10#', 'MA2500/1000G', '状态', 'is-running', '运行', '13小时', '610个', '2026.3.23-3.24', '25110946', '5100个', '44%', '挡板件', '黑色', '正常生产', 'M22A'),
        createMachine(16, '16#', '570', '状态', 'is-running', '运行', '5小时', '190个', '2026.3.23-3.25', '25110959', '2400个', '18%', '小型卡件', '浅灰', '液压检修', 'Q30E'),
        createMachine(3, '3#', 'MA2500/1000G', '状态', 'is-running', '运行', '8小时', '360个', '2026.3.20-3.22', '25110925', '3000个', '58%', '17W 支架', '银色', '等待换模', '90KT'),
        createMachine(9, '9#', 'MA2500/1000G', '状态', 'is-running', '运行', '14小时', '680个', '2026.3.23-3.24', '25110945', '5400个', '52%', '导流板', '银灰', '正常生产', 'C88L'),
        createMachine(15, '15#', 'MA1600/540G', '状态', 'is-running', '运行', '11小时', '460个', '2026.3.23-3.25', '25110957', '3500个', '41%', '转接件', '深灰', '正常生产', 'UV06'),
        createMachine(2, '2#', 'MA2500/1000G', '状态', 'is-running', '运行', '11小时', '520个', '2026.3.18-3.20', '25110918', '4200个', '42%', '26W 面板', '黑色', '夜班优先', '188AX'),
        createMachine(8, '8#', 'MA2500/1000G', '状态', 'is-running', '运行', '9小时', '430个', '2026.3.22-3.24', '25110941', '4600个', '36%', '封边件', '白色', '温控波动', 'B71S'),
        createMachine(14, '14#', 'MA1600/540G', '状态', 'is-running', '运行', '10小时', '395个', '2026.3.23-3.25', '25110955', '3200个', '38%', '扣合件', '亮黑', '正常生产', 'R81N'),
        createMachine(1, '1#', 'MA2500/1000G', '状态', 'is-running', '运行', '13小时', '600个', '2026.3.16-3.18', '25110914', '5000个', '30%', '23W 中间盖', '7037C 灰', '重点订单', '159BB'),
        createMachine(7, '7#', 'MA2500/1000G', '状态', 'is-running', '运行', '4小时', '120个', '2026.3.22-3.24', '25110940', '3000个', '12%', '结构件', '深灰', '人工调试', 'X09M'),
        createMachine(13, '13#', 'MA1600/540G', '状态', 'is-running', '运行', '7小时', '280个', '2026.3.23-3.25', '25110954', '2600个', '31%', '面罩件', '暖白', '待料', 'PK11')
      ],
      detailRealtime: [
        { name: '温度一段（A15）', current: '186℃', currentTime: '14:20:15', target: '185℃', targetTime: '14:05:00', orderValue: '188℃', orderTime: '08:30:00' },
        { name: '温度二段（A16）', current: '192℃', currentTime: '14:20:15', target: '190℃', targetTime: '14:05:00', orderValue: '192℃', orderTime: '08:30:00' },
        { name: '射胶压力（A243）', current: '12.3MPa', currentTime: '14:20:10', target: '12.0MPa', targetTime: '14:00:00', orderValue: '12.5MPa', orderTime: '08:30:00' }
      ],
      detailSetting: [
        { name: '开模行程（A060）', setting: '320mm', settingTime: '13:15:00', orderValue: '325mm', orderTime: '08:30:00' },
        { name: '锁模压力（A061）', setting: '86%', settingTime: '13:15:00', orderValue: '85%', orderTime: '08:30:00' },
        { name: '保压时间（A062）', setting: '4.5s', settingTime: '13:15:00', orderValue: '4.8s', orderTime: '08:30:00' }
      ],
      detailProduction: [
        { name: '上模循环时（A37）', value: '28.6s', collectTime: '14:20:11' },
        { name: '一模产出数', value: '2', collectTime: '14:20:11' },
        { name: '累计良品数', value: '598', collectTime: '14:20:11' }
      ]
    }
  },
  created() {
    this.refreshClock()
    this.clockTimer = setInterval(this.refreshClock, 1000)
    this.activeMachine = this.machineList[0]
  },
  mounted() {
    this.applyDisplayTitle()
    this.tryEnterFullscreen()
  },
  beforeDestroy() {
    if (this.clockTimer) {
      clearInterval(this.clockTimer)
      this.clockTimer = null
    }
    this.restoreTitle()
  },
  methods: {
    applyDisplayTitle() {
      const mode = this.$route && this.$route.query ? this.$route.query.displayMode : ''
      if (mode !== 'fullscreen') {
        return
      }
      this.previousTitle = document.title
      document.title = ''
    },
    restoreTitle() {
      if (this.previousTitle !== '') {
        document.title = this.previousTitle
      }
    },
    async tryEnterFullscreen() {
      const mode = this.$route && this.$route.query ? this.$route.query.displayMode : ''
      if (mode !== 'fullscreen') {
        return
      }

      const element = document.documentElement

      try {
        if (element.requestFullscreen) {
          await element.requestFullscreen()
        } else if (element.webkitRequestFullscreen) {
          await element.webkitRequestFullscreen()
        } else if (element.msRequestFullscreen) {
          await element.msRequestFullscreen()
        }
      } catch (error) {
        // 全屏能力受浏览器安全策略限制，失败时保留铺满窗口的展示模式。
      }

      if (window.outerWidth < window.screen.availWidth || window.outerHeight < window.screen.availHeight) {
        try {
          window.moveTo(0, 0)
          window.resizeTo(window.screen.availWidth, window.screen.availHeight)
        } catch (error) {
          // 某些浏览器会阻止脚本调整窗口尺寸，忽略即可。
        }
      }
    },
    refreshClock() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const date = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      this.updateTime = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
    },
    openDetail(machine) {
      this.activeMachine = machine
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.workshop-board {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  padding: 8px;
  background:
    radial-gradient(circle at top left, rgba(60, 160, 255, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(0, 214, 170, 0.07), transparent 18%),
    linear-gradient(180deg, #050a12 0%, #0a111a 48%, #060d15 100%);
  color: #e8edf5;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.workshop-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(111, 223, 255, 0.9), transparent);
  box-shadow: 0 0 12px rgba(83, 207, 255, 0.45);
  animation: topScanner 7s linear infinite;
  pointer-events: none;
  z-index: 3;
}

.board-header {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #2d6e97;
  background:
    linear-gradient(180deg, rgba(11, 24, 38, 0.97), rgba(8, 18, 30, 0.98)),
    linear-gradient(90deg, rgba(91, 217, 255, 0.06), transparent 36%, rgba(41, 99, 181, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(124, 208, 255, 0.06),
    0 0 18px rgba(37, 125, 191, 0.18);
}

.board-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(92, 208, 255, 0.08), transparent);
  pointer-events: none;
}

.fold-mark {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
}

.fold-mark::before,
.fold-mark::after {
  content: '';
  position: absolute;
}

.header-cell {
  min-height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  white-space: nowrap;
}

.header-label {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: #dff6ff;
  text-shadow: 0 0 10px rgba(84, 194, 255, 0.18);
}

.header-value {
  min-width: 0;
  font-size: 13px;
  color: #7fd4ff;
  font-family: "DIN Alternate", "Bahnschrift", "Consolas", monospace;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(76, 196, 255, 0.22);
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  height: calc(100vh - 58px);
  margin-top: 6px;
  background: linear-gradient(180deg, rgba(6, 13, 22, 0.99), rgba(4, 10, 17, 0.99));
}

.board-main {
  position: relative;
  border: 0;
  padding: 0 6px 6px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 16, 26, 0.97), rgba(6, 13, 22, 0.98)),
    linear-gradient(90deg, rgba(70, 183, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(70, 183, 255, 0.03) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  box-shadow: none;
}

.board-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82, 208, 255, 0.5), transparent);
  pointer-events: none;
}

.board-stats {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  align-items: center;
  min-height: 34px;
  font-size: 15px;
  font-weight: 700;
  column-gap: 12px;
  color: #d8f1ff;
  text-shadow: 0 0 10px rgba(56, 150, 255, 0.12);
}

.stats-title,
.stats-item {
  white-space: nowrap;
}

.stats-value {
  display: inline-block;
  min-width: 28px;
  margin-left: 2px;
  padding: 0 4px;
  border: 1px solid rgba(85, 191, 255, 0.28);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(20, 69, 107, 0.55), rgba(10, 35, 58, 0.5));
  color: #8ee5ff;
  font-family: "DIN Alternate", "Bahnschrift", "Consolas", monospace;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(91, 218, 255, 0.28);
  box-shadow: inset 0 0 8px rgba(70, 173, 255, 0.08);
  text-align: center;
}

.machine-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px 8px;
  align-content: start;
  height: calc(100% - 36px);
  overflow: auto;
  padding-right: 2px;
}

.machine-card {
  position: relative;
  border: 1px solid rgba(117, 205, 255, 0.42);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(12, 37, 59, 0.98), rgba(6, 17, 30, 0.99)),
    linear-gradient(135deg, rgba(121, 220, 255, 0.05), transparent 55%);
  padding: 8px 8px 10px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(204, 240, 255, 0.08),
    0 10px 24px rgba(5, 17, 30, 0.28),
    0 0 0 1px rgba(67, 150, 201, 0.14);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.machine-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(154, 232, 255, 0.12), transparent 34%);
  pointer-events: none;
}

.machine-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  border: 1px solid rgba(135, 219, 255, 0.1);
  pointer-events: none;
}

.fold-mark--card {
  right: 1px;
  bottom: 1px;
  width: 66px;
  height: 48px;
}

.fold-mark--card::before {
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 22px solid rgba(216, 0, 11, 0.52);
  border-left: 22px solid transparent;
  border-bottom-right-radius: 14px;
  filter: drop-shadow(0 0 12px rgba(216, 0, 11, 0.62));
}

.fold-mark--card::after {
  display: none;
}

.machine-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(204, 240, 255, 0.1),
    0 16px 28px rgba(5, 17, 30, 0.34),
    0 0 0 1px rgba(93, 190, 244, 0.22);
  border-color: rgba(131, 216, 255, 0.58);
  transform: translateY(-2px);
}

.machine-card__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  color: #dff7ff;
  text-shadow: 0 0 6px rgba(102, 215, 255, 0.12);
}

.machine-no {
  margin-left: 2px;
  color: #8ce9ff;
  font-size: 14px;
}

.machine-sections {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.machine-panel {
  position: relative;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.machine-panel--primary {
  background: transparent;
}

.machine-fields {
  display: grid;
  gap: 5px;
}

.machine-fields--primary {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.82fr);
}

.machine-fields--secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid rgba(104, 159, 193, 0.52);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(6, 22, 35, 0.86), rgba(4, 15, 26, 0.92));
  font-size: 10px;
  line-height: 1.2;
}

.machine-field__label {
  width: 100%;
  color: #89c8ec;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.machine-field__value {
  width: 100%;
  min-width: 0;
  color: #f4fbff;
  font-size: 12px;
  font-weight: 700;
  font-family: "DIN Alternate", "Bahnschrift", "Consolas", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(128, 225, 255, 0.16);
}

.machine-field--accent {
  border-color: rgba(84, 220, 255, 0.5);
  background: linear-gradient(180deg, rgba(12, 78, 102, 0.68), rgba(5, 35, 54, 0.94));
}

.machine-field--accent .machine-field__label {
  color: #b8f2ff;
}

.machine-field--accent .machine-field__value {
  color: #fff3a6;
  font-size: 13px;
  text-shadow: 0 0 12px rgba(255, 218, 109, 0.22);
}

.status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  border: 1px solid #52d88d;
  background: radial-gradient(circle at 35% 35%, #7df3a6, #1fb36e 70%);
  box-shadow: 0 0 6px rgba(63, 228, 132, 0.45);
  animation: statusPulseGreen 2.4s ease-in-out infinite;
}

.status-dot.is-stop {
  background: radial-gradient(circle at 35% 35%, #ffe18d, #d0a33d 72%);
  border-color: #e6bf66;
  box-shadow: 0 0 6px rgba(240, 191, 83, 0.35);
  animation-name: statusPulseYellow;
}

.status-dot.is-standby {
  background: radial-gradient(circle at 35% 35%, #8fd2ff, #3b86da 72%);
  border-color: #7db4f0;
  box-shadow: 0 0 6px rgba(90, 176, 255, 0.35);
  animation-name: statusPulseBlue;
}

.status-dot.is-fault {
  background: radial-gradient(circle at 35% 35%, #ff9f9f, #ce5b5b 72%);
  border-color: #e48c8c;
  box-shadow: 0 0 6px rgba(232, 106, 106, 0.35);
  animation-name: statusPulseRed;
}

.status-dot.is-offline {
  background: radial-gradient(circle at 35% 35%, #b9c1cc, #74808e 72%);
  border-color: #aab2bd;
  box-shadow: 0 0 5px rgba(149, 160, 175, 0.25);
  animation-name: statusPulseGray;
}

.side-table,
.detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.side-table th,
.side-table td,
.detail-table th,
.detail-table td {
  border: 1px solid rgba(104, 159, 193, 0.8);
  padding: 1px 4px;
  line-height: 1.08;
  word-break: break-all;
}

.board-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding-left: 10px;
  background: linear-gradient(180deg, rgba(6, 13, 22, 0.99), rgba(4, 10, 17, 0.99));
}

.side-panel {
  position: relative;
  padding: 8px 8px 6px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background:
    linear-gradient(180deg, rgba(10, 21, 34, 0.97), rgba(7, 15, 25, 0.98)),
    linear-gradient(90deg, rgba(104, 211, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(104, 211, 255, 0.02) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
  border: 0;
  box-shadow: none;
}

.fold-mark--panel {
  right: 4px;
  bottom: 2px;
  width: 84px;
  height: 62px;
}

.fold-mark--panel::before {
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 32px solid rgba(216, 0, 11, 0.44);
  border-left: 32px solid transparent;
  filter: drop-shadow(0 0 14px rgba(216, 0, 11, 0.52));
}

.fold-mark--panel::after {
  display: none;
}

.side-panel__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #dff7ff;
  text-shadow: 0 0 8px rgba(88, 207, 255, 0.12);
}

.side-table th,
.side-table td {
  font-size: 12px;
  text-align: center;
  height: 28px;
  color: #cae5f6;
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-table tbody tr.is-empty td {
  color: rgba(202, 229, 246, 0.28);
}

.side-table th {
  color: #dff7ff;
  background: rgba(36, 93, 129, 0.28);
}

.side-panel__time {
  align-self: end;
  font-size: 14px;
  font-weight: 700;
  padding-top: 6px;
  color: #82cfff;
  font-family: "DIN Alternate", "Bahnschrift", "Consolas", monospace;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(76, 196, 255, 0.18);
}

.fault-panel .side-table {
  margin-bottom: 8px;
}

.plan-panel .side-table {
  margin-top: 8px;
}

.dialog-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 700;
}

.dialog-subtitle {
  color: #666666;
  font-size: 12px;
  font-weight: 400;
}

.dialog-body {
  display: grid;
  gap: 16px;
}

.dialog-section {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.detail-table-wrap {
  overflow: auto;
}

.detail-table th,
.detail-table td {
  border: 1px solid #dcdfe6;
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
}

.curve-tag {
  color: #409eff;
}

@keyframes statusPulseGreen {
  0%, 100% {
    box-shadow: 0 0 4px rgba(63, 228, 132, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px rgba(63, 228, 132, 0.48);
    transform: scale(1.06);
  }
}

@keyframes topScanner {
  0% {
    left: -30%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes statusPulseYellow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(240, 191, 83, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px rgba(240, 191, 83, 0.42);
    transform: scale(1.06);
  }
}

@keyframes statusPulseBlue {
  0%, 100% {
    box-shadow: 0 0 4px rgba(90, 176, 255, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px rgba(90, 176, 255, 0.42);
    transform: scale(1.06);
  }
}

@keyframes statusPulseRed {
  0%, 100% {
    box-shadow: 0 0 4px rgba(232, 106, 106, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px rgba(232, 106, 106, 0.42);
    transform: scale(1.06);
  }
}

@keyframes statusPulseGray {
  0%, 100% {
    box-shadow: 0 0 3px rgba(149, 160, 175, 0.15);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 6px rgba(149, 160, 175, 0.3);
    transform: scale(1.05);
  }
}

::v-deep .board-dialog {
  border-radius: 12px;
}

@media (max-width: 1600px) {
  .board-body {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .board-stats {
    grid-template-columns: 1.2fr repeat(5, 1fr);
    font-size: 13px;
  }

  .machine-card__title {
    font-size: 11px;
  }

  .machine-no {
    font-size: 13px;
  }
}
</style>
