TextComponent.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script lang="ts">
export default {
inheritAttrs: false,
};
</script>
<script lang="ts" setup>
import { computed } from 'vue';
import { Statistic, Tooltip } from 'ant-design-vue';
import {
getUpdateTime,
fontSize,
RadioRecord,
DEFAULT_RADIO_RECORD,
} from '../../detail/config/util';
import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
import { SvgIcon } from '/@/components/Icon';
const props = defineProps({
layout: {
type: Object as PropType<TextComponentLayout>,
default: () => ({ base: true } as TextComponentLayout),
},
value: {
type: Object as PropType<TextComponentValue>,
default: () =>
({ ...TextComponentDefaultConfig, name: '温度', value: 123 } as TextComponentValue),
},
radio: {
type: Object as PropType<RadioRecord>,
default: () => DEFAULT_RADIO_RECORD as RadioRecord,
},
});
const getIsColumnLayout = computed(() => {
const { base } = props.layout;
return base;
});
const getShowIcon = computed(() => {
const { showIcon, base } = props.layout;
return base ? false : showIcon;
});
const getShowUpdate = computed(() => {
const { showUpdate, base } = props.layout;
return base ? false : showUpdate;
});
const getShowUnit = computed(() => {
const { showUnit, base } = props.layout;
return base ? false : showUnit;
});
const getRadio = computed(() => {
return props.radio || DEFAULT_RADIO_RECORD;
});
</script>
<template>
<div class="w-full h-full flex flex-col">
<div
class="flex justify-center items-center w-full text-center flex-auto"
:style="{ flexDirection: getIsColumnLayout ? 'column' : 'row' }"
>
<div class="w-1/2">
<div>
<div v-if="getShowIcon">
<SvgIcon
:name="props.value.icon || TextComponentDefaultConfig.icon!"
prefix="iconfont"
:style="{
color: props.value.iconColor,
width: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
height: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
}"
/>
</div>
<div class="flex justify-center">
<Statistic
:value="props.value.value || 0"
class="truncate"
:suffix="getShowUnit ? props.value.unit : ''"
:value-style="{
fontSize: fontSize({ radioRecord: getRadio, basic: 24, min: 16 }),
color: props.value.fontColor,
}"
/>
</div>
<div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
{{ props.value.name }}
</div>
</div>
</div>
</div>
<div class="text-center text-xs truncate p-5" style="color: #999">
<Tooltip v-if="getShowUpdate" placement="top" :title="getUpdateTime(props.value?.updateTime)">
<div
:style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
class="truncate"
>
<span class="mr-1">更新时间:</span>
<span class="truncate">
{{ getUpdateTime(props.value?.updateTime) }}
</span>
</div>
</Tooltip>
</div>
</div>
</template>