53 lines
1.4 KiB
Plaintext
53 lines
1.4 KiB
Plaintext
<template>
|
|
<view :class="wbClass">
|
|
<view class="hr-wb-dot" :style="{ backgroundColor: dotColor }"></view>
|
|
<text :style="{ color: textColor }">{{ label }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
/**
|
|
* 伤情腕带分级标签
|
|
* 设计规则：颜色 + 文字双重编码
|
|
* 1 危重(红) / 2 重伤(黄) / 3 轻伤(绿) / 4 死亡(黑)
|
|
*/
|
|
const props = defineProps({
|
|
level : { type: Number, default: 3 },
|
|
/** 自定义文字，空则按分级取默认文案 */
|
|
text : { type: String, default: '' },
|
|
/** 小号（作业列表内使用） */
|
|
small : { type: Boolean, default: false }
|
|
})
|
|
|
|
const label = computed(() : string => {
|
|
if (props.text != '') { return props.text }
|
|
if (props.level == 1) { return '危重' }
|
|
if (props.level == 2) { return '重伤' }
|
|
if (props.level == 3) { return '轻伤' }
|
|
return '死亡'
|
|
})
|
|
|
|
const dotColor = computed(() : string => {
|
|
if (props.level == 1) { return '#B91C1C' }
|
|
if (props.level == 2) { return '#92400E' }
|
|
if (props.level == 3) { return '#065F46' }
|
|
return '#111827'
|
|
})
|
|
|
|
const textColor = computed(() : string => {
|
|
return dotColor.value
|
|
})
|
|
|
|
const wbClass = computed(() : string => {
|
|
let c = 'hr-wb'
|
|
if (props.small) { c += ' hr-wb-sm' }
|
|
if (props.level == 1) { c += ' hr-wb1' }
|
|
if (props.level == 2) { c += ' hr-wb2' }
|
|
if (props.level == 3) { c += ' hr-wb3' }
|
|
if (props.level == 4) { c += ' hr-wb4' }
|
|
return c
|
|
})
|
|
</script>
|