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
| <template>
| <div
| class="flex cursor-none"
| :class="`space-x-[${THICK_BORDER_WIDTH}px]`"
| :style="{
| backgroundColor: BORDER_COLOR,
| }"
| >
| <div
| :class="ROW_HEADER_CELL_CLASS"
| :style="{
| width: `${firstColWidth}px`,
| height: `${CELL_HEIGHT}px`,
| }"
| >
| {{ title }}
| </div>
| <div
| v-for="(item, index) in values"
| :key="index"
| :class="CONTENT_CELL_CLASS"
| :style="{
| width: `${restColWidth}px`,
| height: `${CELL_HEIGHT}px`,
| }"
| >
| <span>
| {{ item[type] }}
| </span>
| </div>
| </div>
| </template>
|
| <script setup lang="ts">
| import type { PropType } from 'vue';
| import { BORDER_COLOR, CELL_HEIGHT, CONTENT_CELL_CLASS, ROW_HEADER_CELL_CLASS, THICK_BORDER_WIDTH } from './constants';
| import type { MonitorValue } from './types';
| const props = defineProps({
| /** @description 标题 */
| title: {
| type: String,
| },
| /** @description 类型 */
| type: {
| type: String,
| },
| /** @description 值 */
| values: {
| type: Object as PropType<MonitorValue[]>,
| },
| firstColWidth: {
| type: Number,
| },
|
| restColWidth: {
| type: Number,
| },
| });
| </script>
| <style scoped lang="scss"></style>
|
|
