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

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { usePlatformStore } from '../../stores/platform'

const { state, bootstrap } = usePlatformStore()

const aiData = computed(() => {
  if (!state.realtime?.ai_collect) {
    return Array.from({ length: 12 }, (_, i) => ({
      channel: i + 1,
      rawValue: '--',
      line: '线路一',
      category: '--',
      lowValue1: 0,
      lowValue2: 0,
    }))
  }
  
  return Array.from({ length: 12 }, (_, i) => {
    const channel = i + 1
    const key = `ai_${channel}`
    const rawValue = state.realtime!.ai_collect[key]
    
    let category = '--'
    let rawDisplay = '--'
    
    if (rawValue !== undefined) {
      if (channel % 2 === 1) {
        const voltage = (rawValue / 1000).toFixed(3)
        category = `UA: ${voltage}V`
        rawDisplay = `${rawValue}mV`
      } else {
        const freq = ((rawValue / 1000) * 50).toFixed(4)
        category = `f: ${freq}Hz`
        rawDisplay = `${rawValue}mA`
      }
    }
    
    return {
      channel,
      rawValue: rawDisplay,
      line: '线路一',
      category,
      lowValue1: 1,
      lowValue2: 8,
    }
  })
})

const tableData = computed(() => {
  return state.alarms.slice(0, 10).map((alarm, index) => ({
    name: '线路一',
    typeName: alarm.type,
    content: alarm.content,
    time: alarm.time,
    ts: '0',
  }))
})

onMounted(() => {
  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.channel }}</div>
            <div class="cell">{{ item.rawValue }}</div>
            <div class="cell">{{ item.line }}</div>
            <div class="cell">{{ item.category }}</div>
            <div class="cell">{{ item.lowValue1 }}</div>
            <div class="cell">{{ item.lowValue2 }}</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: 23%; text-align: center;">{{ item.name }}</div>
          <div style="width: 15%; text-align: center;">{{ item.typeName }}</div>
          <div style="width: 25%; text-align: center;">{{ item.content }}</div>
          <div style="width: 20%; text-align: center;">{{ item.time }}</div>
          <div style="width: 10%; text-align: center;">{{ item.ts }}ms</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

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

    .container-top-box {
      width: 100%;
      height: 460px;
      padding: 20px;
      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: 28px;
          line-height: 28px;
          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: 28px;
            line-height: 28px;
            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: calc(100vh - 660px);
      padding: 20px;
      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: 40px;
        font-size: 14px;
        color: #505050;
        border-bottom: 1px solid #f2f2f2;

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