zs_aucma-mes-ui/src/views/board/andonBoard/index.vue

<template>
  <div class="app-container">
    <div class="headTitle">{{ boardTitle }}</div>
    <div class="subTitle">
      <span v-if="boardCode">boardCode: {{ boardCode }}</span>
      <span v-else>缺少 boardCode</span>
      <span class="split">|</span>
      <span>刷新: {{ refreshIntervalSec }}s</span>
      <span class="split">|</span>
      <span>最近更新: {{ lastUpdateText }}</span>
    </div>

    <div v-if="errorMsg" class="error">{{ errorMsg }}</div>

    <div class="content" v-else>
      <div class="stats">
        <div class="stat stat-pending">
          <div class="stat-label">待处理</div>
          <div class="stat-value">{{ stats.pending || 0 }}</div>
        </div>
        <div class="stat stat-processing">
          <div class="stat-label">处理中</div>
          <div class="stat-value">{{ stats.processing || 0 }}</div>
        </div>
        <div class="stat stat-resolved">
          <div class="stat-label">已解决</div>
          <div class="stat-value">{{ stats.resolved || 0 }}</div>
        </div>
        <div class="stat stat-cancelled">
          <div class="stat-label">已取消</div>
          <div class="stat-value">{{ stats.cancelled || 0 }}</div>
        </div>
        <div class="stat stat-total">
          <div class="stat-label">总数</div>
          <div class="stat-value">{{ stats.total || 0 }}</div>
        </div>
      </div>

      <div class="panels">
        <div class="panel">
          <div class="panel-title">待处理 / 处理中 ({{ stats.active || 0 }})</div>
          <div class="table">
            <div class="grid-header" :style="gridStyle(activeColumns)">
              <div
                v-for="col in activeColumns"
                :key="col.field"
                class="cell header"
                :style="cellStyle(col)"
              >
                {{ col.label }}
              </div>
            </div>
            <div class="grid-body">
              <div
                v-for="(row, rowIndex) in activeEvents"
                :key="row.eventId || rowIndex"
                class="grid-row"
                :style="gridStyle(activeColumns)"
              >
                <div
                  v-for="col in activeColumns"
                  :key="col.field"
                  class="cell"
                  :style="cellStyle(col)"
                >
                  <span
                    v-if="col.field === 'eventStatus'"
                    :class="['status', statusClass(row.eventStatus)]"
                  >
                    {{ statusText(row.eventStatus) }}
                  </span>
                  <span v-else>
                    {{ formatValue(row, col.field, rowIndex) }}
                  </span>
                </div>
              </div>
              <div v-if="!activeEvents || activeEvents.length === 0" class="empty">暂无数据</div>
            </div>
          </div>
        </div>

        <div class="panel">
          <div class="panel-title">已解决 / 已取消 ({{ closedEvents.length }})</div>
          <div class="table">
            <div class="grid-header" :style="gridStyle(closedColumns)">
              <div
                v-for="col in closedColumns"
                :key="col.field"
                class="cell header"
                :style="cellStyle(col)"
              >
                {{ col.label }}
              </div>
            </div>
            <div class="grid-body">
              <div
                v-for="(row, rowIndex) in closedEvents"
                :key="row.eventId || rowIndex"
                class="grid-row"
                :style="gridStyle(closedColumns)"
              >
                <div
                  v-for="col in closedColumns"
                  :key="col.field"
                  class="cell"
                  :style="cellStyle(col)"
                >
                  <span
                    v-if="col.field === 'eventStatus'"
                    :class="['status', statusClass(row.eventStatus)]"
                  >
                    {{ statusText(row.eventStatus) }}
                  </span>
                  <span v-else>
                    {{ formatValue(row, col.field, rowIndex) }}
                  </span>
                </div>
              </div>
              <div v-if="!closedEvents || closedEvents.length === 0" class="empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="loading" class="loading">加载中...</div>
    </div>
  </div>
</template>

<script>
import { viewAndonBoard } from '@/api/production/andonBoard'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'AndonBoard',
  data() {
    return {
      boardCode: '',
      loading: false,
      fetching: false,
      errorMsg: '',
      config: {},
      stats: {},
      activeEvents: [],
      closedEvents: [],
      activeColumns: [],
      closedColumns: [],
      refreshIntervalSec: 10,
      lastServerTime: null,
      refreshTimer: null,
      refreshTimerSec: null,
    }
  },
  computed: {
    boardTitle() {
      const name = this.config && this.config.boardName ? this.config.boardName : '安灯看板'
      return name
    },
    lastUpdateText() {
      return this.lastServerTime ? parseTime(this.lastServerTime, '{y}-{m}-{d} {h}:{i}:{s}') : '-'
    }
  },
  created() {
    this.boardCode = this.getBoardCode()
    this.reload()
  },
  watch: {
    '$route.query.boardCode': function () {
      const nextCode = this.getBoardCode()
      if (nextCode !== this.boardCode) {
        this.boardCode = nextCode
        this.reload()
      }
    }
  },
  beforeDestroy() {
    this.clearRefreshTimer()
  },
  methods: {
    getBoardCode() {
      return (this.$route.query && this.$route.query.boardCode) || (this.$route.params && this.$route.params.boardCode) || ''
    },
    reload() {
      this.clearRefreshTimer()
      if (!this.boardCode) {
        this.errorMsg = '请在URL中传入参数 boardCode，例如：/andonBoard?boardCode=AD-001'
        return
      }
      this.errorMsg = ''
      this.lastServerTime = null
      this.fetchBoardData()
    },
    fetchBoardData() {
      if (this.fetching) {
        return Promise.resolve()
      }
      const showLoading = !this.lastServerTime
      this.fetching = true
      if (showLoading) {
        this.loading = true
      }
      return viewAndonBoard(this.boardCode)
        .then((res) => {
          const data = (res && res.data) || {}
          this.errorMsg = ''
          this.config = data.config || {}
          this.stats = data.stats || {}
          this.activeEvents = data.activeEvents || []
          this.closedEvents = data.closedEvents || []
          this.lastServerTime = data.serverTime || null

          const interval = Number(this.config && this.config.refreshIntervalSec)
          this.refreshIntervalSec = interval && interval > 0 ? interval : 10

          const cols = this.parseDisplayFields(this.config && this.config.displayFields)
          this.activeColumns = cols.active
          this.closedColumns = cols.closed

          this.resetRefreshTimer()
        })
        .catch((e) => {
          this.errorMsg = (e && e.message) || '加载失败'
        })
        .finally(() => {
          this.fetching = false
          if (showLoading) {
            this.loading = false
          }
          this.resetRefreshTimer()
        })
    },
    clearRefreshTimer() {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
        this.refreshTimer = null
        this.refreshTimerSec = null
      }
    },
    resetRefreshTimer() {
      const sec = this.refreshIntervalSec
      if (!sec || sec <= 0) {
        return
      }
      if (this.refreshTimer && this.refreshTimerSec === sec) {
        return
      }
      this.clearRefreshTimer()
      this.refreshTimerSec = sec
      this.refreshTimer = setInterval(() => {
        this.fetchBoardData()
      }, sec * 1000)
    },
    parseDisplayFields(raw) {
      const fallbackActive = ['callCode', 'callTypeCode', 'stationCode', 'deviceCode', 'eventStatus', 'priority', 'createTime', 'description']
      const fallbackClosed = ['callCode', 'callTypeCode', 'stationCode', 'deviceCode', 'eventStatus', 'responseEndTime', 'resolution', 'cancelReason']

      if (!raw) {
        return {
          active: this.normalizeColumns(fallbackActive),
          closed: this.normalizeColumns(fallbackClosed),
        }
      }

      if (typeof raw === 'string') {
        const trimmed = raw.trim()
        if (trimmed && trimmed[0] !== '[' && trimmed[0] !== '{') {
          const fields = trimmed.split(/[,，;；\s]+/).filter(Boolean)
          if (fields.length) {
            const cols = this.normalizeColumns(fields)
            return { active: cols, closed: cols }
          }
        }
      }

      let parsed
      try {
        parsed = typeof raw === 'string' ? JSON.parse(raw) : raw
      } catch (e) {
        return {
          active: this.normalizeColumns(fallbackActive),
          closed: this.normalizeColumns(fallbackClosed),
        }
      }

      if (Array.isArray(parsed)) {
        const cols = this.normalizeColumns(parsed)
        return { active: cols, closed: cols }
      }

      if (parsed && typeof parsed === 'object') {
        const activeRaw = parsed.activeFields || parsed.active || parsed.fields || parsed
        const closedRaw = parsed.closedFields || parsed.closed || parsed.fields || parsed

        const activeCols = Array.isArray(activeRaw) || typeof activeRaw === 'object' ? this.normalizeColumns(activeRaw) : this.normalizeColumns(fallbackActive)
        const closedCols = Array.isArray(closedRaw) || typeof closedRaw === 'object' ? this.normalizeColumns(closedRaw) : this.normalizeColumns(fallbackClosed)

        return {
          active: activeCols && activeCols.length ? activeCols : this.normalizeColumns(fallbackActive),
          closed: closedCols && closedCols.length ? closedCols : this.normalizeColumns(fallbackClosed),
        }
      }

      return {
        active: this.normalizeColumns(fallbackActive),
        closed: this.normalizeColumns(fallbackClosed),
      }
    },
    normalizeColumns(input) {
      if (!input) return []

      if (Array.isArray(input)) {
        return input
          .map((item) => {
            if (!item) return null
            if (typeof item === 'string') {
              return { field: item, label: this.fieldLabel(item) }
            }
            if (typeof item === 'object') {
              const field = item.field || item.prop || item.key
              if (!field) return null
              return {
                field,
                label: item.label || item.title || this.fieldLabel(field),
                width: item.width,
                align: item.align,
              }
            }
            return null
          })
          .filter(Boolean)
      }

      if (input && typeof input === 'object') {
        return Object.keys(input).map((field) => {
          const val = input[field]
          if (typeof val === 'string') {
            return { field, label: val }
          }
          if (typeof val === 'object' && val) {
            return {
              field,
              label: val.label || val.title || this.fieldLabel(field),
              width: val.width,
              align: val.align,
            }
          }
          return { field, label: this.fieldLabel(field) }
        })
      }

      return []
    },
    fieldLabel(field) {
      const map = {
        index: '序号',
        eventId: '事件ID',
        callCode: '呼叫单号',
        callTypeCode: '呼叫类型',
        sourceType: '触发源类型',
        sourceRefId: '触发源',
        productLineCode: '产线',
        stationCode: '工位',
        teamCode: '班组',
        orderCode: '工单号',
        materialCode: '物料编码',
        deviceCode: '设备编码',
        priority: '优先级',
        eventStatus: '状态',
        description: '描述',
        ackBy: '确认人',
        ackTime: '确认时间',
        responseStartTime: '开始处理时间',
        responseEndTime: '完成时间',
        resolution: '解决措施',
        cancelReason: '取消原因',
        escalateLevel: '升级级别',
        escalateTime: '升级时间',
        ackDeadline: '确认截止',
        resolveDeadline: '解决截止',
        createTime: '创建时间',
        updateTime: '更新时间',
      }
      return map[field] || field
    },
    formatValue(row, field, rowIndex) {
      if (field === 'index') {
        return rowIndex + 1
      }
      const v = row ? row[field] : null
      if (v === null || v === undefined) return ''

      if (field === 'eventStatus') {
        return this.statusText(v)
      }

      if (field === 'sourceType') {
        return this.sourceTypeText(v)
      }

      if (/(Time|Deadline)$/i.test(field)) {
        const text = parseTime(v, '{y}-{m}-{d} {h}:{i}:{s}')
        return text || ''
      }

      return String(v)
    },
    statusText(status) {
      if (status === '0') return '待处理'
      if (status === '1') return '处理中'
      if (status === '2') return '已解决'
      if (status === '3') return '已取消'
      return String(status || '')
    },
    statusClass(status) {
      if (status === '0') return 'pending'
      if (status === '1') return 'processing'
      if (status === '2') return 'resolved'
      if (status === '3') return 'cancelled'
      return ''
    },
    sourceTypeText(v) {
      if (v === '0') return '工位'
      if (v === '1') return '设备'
      if (v === '2') return '报警'
      if (v === '3') return '手动'
      return String(v || '')
    },
    gridStyle(cols) {
      const list = Array.isArray(cols) ? cols : []
      const template = list
        .map((c) => {
          if (c && c.width) {
            if (typeof c.width === 'number') return c.width + 'px'
            return String(c.width)
          }
          return '1fr'
        })
        .join(' ')

      return {
        gridTemplateColumns: template || '1fr',
      }
    },
    cellStyle(col) {
      const style = {}
      if (col && col.align) {
        style.textAlign = col.align
      }
      return style
    },
  }
}
</script>

<style scoped lang="less">
.app-container {
  background: #0f2740;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4.2vw 2vw 1.2vw 2vw;
  box-sizing: border-box;
  color: #d6eaed;
  overflow: hidden;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.6vw;
  letter-spacing: 0.3vw;
  white-space: nowrap;
}

.subTitle {
  position: absolute;
  top: 8.1%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 0.85vw;
  color: #a9d5e8;
  white-space: nowrap;
}

.split {
  display: inline-block;
  margin: 0 0.6vw;
  color: rgba(255, 255, 255, 0.35);
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1vw;
  margin-bottom: 1.2vw;
}

.stat {
  height: 5.6vw;
  border-radius: 0.6vw;
  padding: 0.8vw 1vw;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-label {
  font-size: 0.95vw;
  opacity: 0.9;
}

.stat-value {
  font-size: 2.1vw;
  font-weight: 700;
  line-height: 1;
}

.stat-pending .stat-value {
  color: #ff5f5f;
}

.stat-processing .stat-value {
  color: #ffb020;
}

.stat-resolved .stat-value {
  color: #16ceb9;
}

.stat-cancelled .stat-value {
  color: #9aa3ad;
}

.stat-total .stat-value {
  color: #ffffff;
}

.panels {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2vw;
  min-height: 0;
}

.panel {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6vw;
  padding: 0.8vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-title {
  font-size: 1.05vw;
  font-weight: 700;
  margin-bottom: 0.6vw;
  letter-spacing: 0.1vw;
}

.table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.grid-header {
  display: grid;
  gap: 0;
  background: rgba(9, 65, 112, 0.75);
  border-radius: 0.4vw;
  overflow: hidden;
}

.grid-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0.4vw;
}

.grid-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.grid-row {
  display: grid;
  background: rgba(3, 45, 87, 0.55);
}

.grid-row:nth-child(2n) {
  background: rgba(5, 52, 96, 0.55);
}

.cell {
  padding: 0.55vw 0.6vw;
  font-size: 0.85vw;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

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

.cell.header {
  font-size: 0.85vw;
  font-weight: 700;
  color: #ffffff;
}

.status {
  font-weight: 700;
}

.status.pending {
  color: #ff5f5f;
}

.status.processing {
  color: #ffb020;
}

.status.resolved {
  color: #16ceb9;
}

.status.cancelled {
  color: #9aa3ad;
}

.empty {
  padding: 1vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9vw;
}

.error {
  margin-top: 6vw;
  padding: 1vw;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 95, 95, 0.6);
  border-radius: 0.6vw;
  font-size: 1vw;
  color: #ffbdbd;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.35);
  padding: 0.6vw 1.2vw;
  border-radius: 0.4vw;
}
</style>