dtScreen/src/components/ui/DetectorTable.vue

<template>
  <div class="detector-monitor-table">
    <div class="table-header">
      <div class="header-left">
        <span v-for="tick in timeTicks" :key="tick" class="tick-item">{{ tick }}</span>
      </div>
      <div class="header-right">
        <div class="th-cell">编号</div>
        <div class="th-cell">名称</div>
        <div class="th-cell">流量</div>
        <div class="th-cell">占有率</div>
      </div>
    </div>

    <div class="table-body">
      <div class="table-row" v-for="item in tableData" :key="item.id">
        <div class="row-left">
          <!-- 留白：未来放每个检测器的时序曲线 -->
        </div>

        <div class="row-right">
          <div class="td-cell id-cell">{{ item.id }}</div>
          <div class="td-cell name-cell">{{ item.name }}</div>
          <div class="td-cell num-cell flow">{{ item.flow }}</div>
          <div class="td-cell num-cell occ">{{ item.occupancy }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiGetDetectorMonitorData } from '@/api';

export default {
  name: "DetectorMonitorTable",
  props: {
    intersectionId: { type: String, default: '' },
    pollIntervalMs: { type: Number, default: 5000 },
  },
  data() {
    return {
      timeTicks: [180, 150, 120, 90, 60, 30],
      tableData: [],
    };
  },
  mounted() {
    // pollTimer 直接挂在实例上（不进 data 避免无谓的响应式开销）
    this.pollTimer = null;
    this.fetchData();
    this.pollTimer = setInterval(this.fetchData, this.pollIntervalMs);
  },
  beforeDestroy() {
    if (this.pollTimer) {
      clearInterval(this.pollTimer);
      this.pollTimer = null;
    }
  },
  methods: {
    async fetchData() {
      try {
        const res = await apiGetDetectorMonitorData(this.intersectionId);
        if (res) {
          if (Array.isArray(res.tableData)) this.tableData = res.tableData;
          if (Array.isArray(res.timeTicks)) this.timeTicks = res.timeTicks;
        }
      } catch (e) {
        console.warn('[DetectorTable] fetchData failed:', e);
      }
    },
  },
};
</script>

<style scoped>
.detector-monitor-table {
  width: 100%;
  height: 100%;
  padding: clamp(2px, 0.5cqw, 4px);
  background: rgba(5, 22, 45, 0.9);
  color: #fff;
  font-family: inherit;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 容器不够宽时，由根节点接管横向滚动；纵向滚动仍由 .table-body 内部处理 */
  overflow-x: auto;
  overflow-y: hidden;
  container-type: inline-size;
}

.detector-monitor-table::-webkit-scrollbar { height: 6px; }
.detector-monitor-table::-webkit-scrollbar-thumb {
  background: rgba(30, 77, 142, 0.6);
  border-radius: 3px;
}
.detector-monitor-table::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 表头 ---------------- */
.table-header {
  display: flex;
  height: clamp(26px, 7cqw, 34px);
  background: linear-gradient(180deg, rgba(58, 127, 209, 0.28) 0%, rgba(58, 127, 209, 0.12) 100%);
  border: 1px solid rgba(127, 182, 255, 0.4);
  border-radius: 3px;
  flex-shrink: 0;
  /* 与 .table-row 同一最小宽度，保证横向滚动时表头与表体对齐 */
  min-width: 460px;
}

.header-left {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(6px, 2cqw, 16px);
  border-right: 1px solid rgba(127, 182, 255, 0.35);
  min-width: 180px;
}

.tick-item {
  font-size: clamp(10px, 2.4cqw, 13px);
  font-weight: 600;
  color: rgba(127, 182, 255, 0.9);
  font-family: 'Consolas', 'Courier New', monospace;
  letter-spacing: 0.5px;
}

.header-right {
  display: flex;
  width: clamp(280px, 55%, 360px);
  flex-shrink: 0;
}

.th-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.4cqw, 13px);
  font-weight: 600;
  color: rgba(127, 182, 255, 0.95);
  border-right: 1px solid rgba(127, 182, 255, 0.25);
  min-width: 0;
  padding: 0 clamp(2px, 0.5cqw, 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.th-cell:last-child {
  border-right: none;
}

/* "名称" 列（第 2 列）需要承载最长文本，给它两倍宽度 */
.header-right .th-cell:nth-child(2) {
  flex: 2;
}

/* ---------------- 表体 ---------------- */
.table-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  overflow-y: auto;
  overflow-x: visible; /* 横向溢出由 .detector-monitor-table 接管 */
  /* 与 .table-header 同一最小宽度，让 row 与 header 一起被外层水平滚动 */
  min-width: 460px;
}

.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(30, 77, 142, 0.6);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-track {
  background: transparent;
}

/* flex:1 0 28px → 容器够大则平分多余高度填满（不留白），不够时锁 28px 触发滚动 */
.table-row {
  display: flex;
  flex: 1 0 28px;
  min-height: 28px;
  border-bottom: 1px dashed rgba(30, 77, 142, 0.45);
  transition: background 0.15s;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row:hover {
  background: rgba(58, 127, 209, 0.12);
}

.row-left {
  flex: 1;
  border-right: 1px solid rgba(30, 77, 142, 0.3);
  min-width: 180px;
  /* 时序图区域占位（180s ~ 30s 时间窗），后续可挂折线/柱图 */
}

.row-right {
  display: flex;
  width: clamp(280px, 55%, 360px);
  flex-shrink: 0;
}

.td-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 2.4cqw, 14px);
  border-right: 1px solid rgba(30, 77, 142, 0.3);
  min-width: 0;
  padding: 0 clamp(2px, 0.5cqw, 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-cell:last-child {
  border-right: none;
}

.id-cell {
  color: rgba(127, 182, 255, 0.95);
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 600;
}

/* 名称列内容最长（如"北进口 第3车道"），给它两倍宽度 */
.name-cell {
  flex: 2;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.num-cell {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 600;
}

.num-cell.flow {
  color: #7fe3a8;
}

.num-cell.occ {
  color: #ffc857;
}
</style>