slibra-module-web/src/components/RecodeSquareCardItem/index.vue

<script setup>
import { ref, computed } from 'vue';
import { NEllipsis } from "naive-ui";
import { BaseButton, SvgIcon } from '@/components';
import { truncateDecimals } from '@/utils/format';

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['on-click']);

const warningType = computed(() => {
  const item = props.item;
  const waterEnum = {
    '0': {
      label: '报警中',
      cls: 'tips_warning'
    },
    '1': {
      label: '用户关闭',
      cls: 'tips_success'
    },
    '2': {
      label: '系统关闭',
      cls: 'tips_close'
    },
    '3': {
      label: '应急处理中',
      cls: 'tips_warning'
    }
  }
  const earlyEnum = {
    '0': {
      label: '预警中',
      cls: 'tips_warning'
    },
    '2': {
      label: '已完成',
      cls: 'tips_success'
    },
  }

  switch(item.type) {
    case 0:
      return waterEnum[item.status + ''];
    case 1:
      return waterEnum[item.status + ''];
    case 2:
      return earlyEnum[item.status + ''];
    default:
      return {
        label: '未知',
        cls: 'tips_close'
      }
  }
})

const dataSources = computed(() => {
  const item = props.item;
  if (item.type == 0) {
    return [
      { label: '报警时间', value: item.time },
      { label: '报警值',  value: truncateDecimals(item.warningVal), type: 'wraning', unit: 'mg/L' },
      { label: '报警级别', value: item.level },
      { label: '报警次数', value: item.counts },
    ]
  }
  if (item.type == 1) {
    return [
      { label: '报警时间', value: item.time },
      { label: '报警值', value: Number(item?.warningVal?.toFixed(2)), type: 'wraning', unit: 'mg/L' },
      { label: '报警次数', value: item.counts },
    ]
  }
  if (item.type == 2) {
    return [
      { label: '预警时间', value: item.createTime },
      { label: '超标时间', value: item.time },
      { label: '现在值', value: Number(item?.warningVal?.toFixed(2)) ?? '', unit: 'mg/L' },
      { label: '预测值', value: Number(item?.forecastVal?.toFixed(2)) ?? '', type: 'wraning', unit: 'mg/L' },
      { label: '设计值', value: item.designVal, unit: 'mg/L' }
    ]
  }
});

const handleEmitParent = () => {
  emit('on-click', props.item)
};

</script>

<template>
  <div class="warning-item-inner">
    <div :class="['tips', warningType?.cls]">
      <span>{{ warningType?.label }}</span>
    </div>
    <dl class="warning-info">
      <dt>
        <NEllipsis class="font-bold text-[#1A2029] leading-[20px]">{{ item.reason }}</NEllipsis>
      </dt>
      <dd class="flex items-center" v-for="(item, index) in dataSources" :key="index">
        <span>{{ item.label }}: {{ item.value }} {{ item.unit }}</span>
        <SvgIcon name="tool-up" class="ml-[4px]" v-if="item.type"></SvgIcon>
      </dd>
    </dl>
    <BaseButton type="gray" class="mt-[8px]" @click="handleEmitParent">操作</BaseButton>
  </div>
</template>