pms-iot-vue/src/views/pms/monitor/data-row.vue

<template>
  <div
    style="border-radius: 5px"
    :class="[
      'flex text-[#00d9df] items-center justify-between border-b border-cyan-500/20 hover:bg-cyan-500/10 transition-colors px-2 -mx-2 rounded gap-5',
      compact ? 'py-1' : 'py-2'
    ]"
  >
    <span class="text-cyan-200">{{ label }}</span>
    <div class="flex items-center gap-2">
      <!-- 对于运行状态类的字段，显示状态指示器 -->
      <template v-if="isStatusField(label)">
        <span class="flex items-center">
          <!-- 使用图片作为状态指示器 -->
          <img :src="getStatusImage(value)" :alt="getStatusText(value)" class="w-5 h-5 mr-1" />
        </span>
      </template>
      <span v-else class="font-mono text-white font-bold">{{ formattedValue }}</span>
      <button
        v-if="button"
        style="border-radius: 5px"
        :class="[
          'px-3 py-1 rounded text-white text-sm transition-all',
          buttonColor === 'green'
            ? 'bg-green-600 hover:bg-green-500 shadow-[0_0_10px_rgba(22,163,74,0.5)]'
            : 'bg-red-600 hover:bg-red-500 shadow-[0_0_10px_rgba(220,38,38,0.5)]'
        ]"
      >
        {{ button }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import green from '@/assets/imgs/green.png'
import red from '@/assets/imgs/red.png'
interface Props {
  label: string
  value: string
  button?: string
  buttonColor?: 'green' | 'red'
  compact?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  compact: false
})

// 判断是否为状态字段
const isStatusField = (label: string) => {
  return (
    label.includes('运行状态') ||
    label.includes('加载状态') ||
    label.includes('PSA运行状态') ||
    label.toLowerCase().includes('status')
  )
}

// 获取状态文本
const getStatusText = (statusValue: string | number) => {
  return statusValue === '1' || statusValue === 1 || statusValue === 'true' ? '运行中' : '停止'
}

// 获取状态图片路径
const getStatusImage = (statusValue: string | number) => {
  return statusValue === '1' || statusValue === 1 || statusValue === 'true'
    ? green // 绿色状态使用green.png
    : red // 红色状态使用red.png
}

// 格式化非状态字段的值
const formattedValue = computed(() => {
  // 如果是状态字段，则不显示原始值
  if (isStatusField(props.label)) {
    return ''
  }
  return props.value
})
</script>

<style scoped>
.status-active {
  background: rgb(34, 197, 94); /* 绿色 */
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}

.status-inactive {
  background: rgb(239, 68, 68); /* 红色 */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}
</style>