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 { truncateToTwoDecimalPlaces } from '@/utils/format';

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

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

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

  if ( item.type == 0 ) {
    return waterWhite[item.status + '']
  }
  if ( item.type === 1 ) {
    return waterWhite[item.status + '']
  }
  if ( item.type === 2 ) {
    return earlyWaring[item.status + '']
  }
})

const dataSources = computed(() => {
  const item = props.item;
  if (item.type == 0) {
    return [
      { label: '报警时间', value: item.time },
      { label: '报警值',   value: truncateToTwoDecimalPlaces(item.warningVal), type: 'wraning' },
      { label: '报警级别', value: item.level },
      { label: '报警次数', value: item.counts },
    ]
  }
  if (item.type == 1) {
    return [
      { label: '报警时间', value: item.time },
      { label: '报警值',   value: item.warningVal, type: 'wraning' },
      { label: '报警次数', value: item.counts },
    ]
  }
});

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 }}</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>