emcp/frontend/src/views/aiQuantity/index.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { usePlatformStore } from '../../stores/platform'
import {fetchChannelConfig} from '@/api/platform'
import { formatAlarmEventValue, getAlarmBelongText, getEventDisplayName } from '@/utils/alarmEvent'
const { state, bootstrap } = usePlatformStore()
const channelConfig = ref<Record<number, { type: string; limit_low: number; limit_high: number; line_no: string }>>({})

const aiData = computed(() => {
  const aiCollect = state.realtime?.ai_collect || {}
  return Array.from({ length: 12 }, (_, i) => {
    const ch = i + 1
    const code = `ai${ch}`
    const config = channelConfig.value[ch] || {}
    return {
      code,
      line_no: config.line_no || '',
      singal_type: '',
      type: config.type || '',
      limit_low: config.limit_low || 0,
      limit_high: config.limit_high || 0,
      rawValue: aiCollect[code] !== undefined ? aiCollect[code] : '',
      ch
    }
  })
})
function formatTime(dateStr: string): string {
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const tableData = computed(() => {
  const alarms = state.alarms || []
  const firstThree = alarms.slice(0, 2)
  return firstThree.map(list => {
    return {
      id: list.id || 0,
      name: getAlarmBelongText(list.line_code),
      typeName: getEventDisplayName(list.event_type, list.event_code),
      eventCode: list.event_code,
      eventValue: formatAlarmEventValue(list.event_type, list.event_value),
      content: list.content,
      time: list.event_time ? formatTime(list.event_time) : '',
    }
  })
})
function init(){
  fetchChannelConfig().then(res => {
    const list = res.ai_channel || []
    list.forEach((item: any) => {
      channelConfig.value[item.ch] = {
        type: item.type,
        limit_low: item.limit_low,
        limit_high: item.limit_high,
        line_no: item.line_no
      }
    })
  })
}
onMounted(() => {
  init()
  void bootstrap()
})
</script>

<template>
  <div class="ai-container">
    <div class="ai-container-top">
      <!-- <div class="top-title">AI采集信息</div> -->
      <div class="container-top-box">
        <!-- 表格表头 -->
        <div class="table-header">
          <div class="header-cell" style="width: 90px;max-width: 90px;min-width: 90px;">通道号</div>
          <div class="header-cell">原始值</div>
          <div class="header-cell">所属路线</div>
          <div class="header-cell">类别</div>
          <div class="header-cell">低值</div>
          <div class="header-cell">高值</div>
        </div>
        <!-- 表格内容 -->
        <div class="table-body">
          <div v-for="(item, index) in aiData" :key="index" class="table-row">
            <div class="cell" style="width: 90px;max-width: 90px;min-width: 90px;color: #787878;">{{ item.ch }}
            </div>
            <div class="cell">{{ item.rawValue }}</div>
            <div class="cell">线路{{ item.line_no }}</div>
            <div class="cell">{{ item.type }}</div>
            <div class="cell">{{ item.limit_low }}</div>
            <div class="cell">{{ item.limit_high }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ai-container-bottom">
      <div class="top-title">报警信息</div>
      <div class="container-bottom-box">
        <div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1">
          <div style="width: 8%;text-align: center;">{{ index + 1 }}</div>
          <div style="width: 14%;text-align: center;">{{ item.name }}</div>
          <div style="width: 20%;text-align: center;">{{ item.typeName }}</div>
          <div style="width: 8%;text-align: center;">{{ item.eventValue }}</div>
          <div style="width: 30%;text-align: center;">{{ item.content }}</div>
          <div style="width: 20%;text-align: center;">{{ item.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ai-container {
  width: 100%;
  height: 100%;
  padding: 10px;

  .top-title {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #363636;
    margin-bottom: 4px;
  }

  .ai-container-top {
    width: 100%;
    margin-bottom: 4px;

    .container-top-box {
      width: 100%;
      height: 404px;
      padding: 8px 10px;
      background: #ffffff;
      box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      border-radius: 4px;
      display: flex;
      flex-direction: column;

      .table-header {
        display: flex;
        width: 100%;
        margin-bottom: 5px;
        gap: 5px;

        .header-cell {
          flex: 1;
          height: 25px;
          line-height: 25px;
          background-color: #f8f9fc;
          border: 1px solid #e8e8e8;
          border-radius: 4px;
          text-align: center;
          font-size: 14px;
          color: #787878;
        }
      }

      .table-body {
        display: flex;
        flex-direction: column;
        gap: 5px;

        .table-row {
          display: flex;
          width: 100%;
          gap: 5px;

          .cell {
            flex: 1;
            height: 25px;
            line-height: 25px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            color: #363636;
          }
        }
      }
    }
  }

  .ai-container-bottom {
    width: 100%;

    .container-bottom-box {
      width: 100%;
      height: 66px;
      padding: 0px;
      background: #ffffff;
      box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      border-radius: 4px;

      .container-bottom-box-line1 {
        display: flex;
        align-items: center;
        color: #787878;
        height: 33px;
        font-size: 14px;
        color: #505050;
        border-bottom: 1px solid #f2f2f2;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>