YbBasicProfile 基础详情数据展示
用于一系列的字段与值的基础详情信息展示
# 基本使用
病种名称
伤寒保守治疗（含简单操作）
DIP编码
A01.0:n(y)
诊断名称
伤寒
诊断编码
A01.0
操作名称
保守治疗（含简单操作）
操作编码
n(y)
诊断编码版本
国临3.0版
操作编码版本
国临3.0版
分值
725
次均费用
9704.13
年度
2021
病种类型
1
<template>
<div class="app-base-bg" style="padding:20px;">
<yb-basic-profile
labelPosition="right"
:fields="fields"
:fieldsValue="fieldsValue"
>
</yb-basic-profile>
</div>
</template>
<script>
export default {
data() {
return {
fieldsValue: {
diagnoseCode: 'A01.0',
diagnoseName: '伤寒',
diagnoseVersion: '国临3.0版',
disCodeCombination: 'A01.0:n(y) ',
disCombinationName: '伤寒保守治疗（含简单操作）',
diseaseType: '1',
diseaseTypeName: '基层病种',
operationCodes: 'n(y) ',
operationName: '保守治疗（含简单操作）',
operationVersion: '国临3.0版',
quotas: 9704.13,
score: 725,
year: '2021',
},
fields: [
{
label: '病种名称',
prop: 'disCombinationName',
},
{
label: 'DIP编码',
prop: 'disCodeCombination',
//
},
{
label: '诊断名称',
prop: 'diagnoseName',
},
{
label: '诊断编码',
prop: 'diagnoseCode',
},
{
label: '操作名称',
prop: 'operationName',
},
{
label: '操作编码',
prop: 'operationCodes',
},
{
label: '诊断编码版本',
prop: 'diagnoseVersion',
},
{
label: '操作编码版本',
prop: 'operationVersion',
},
{
label: '分值',
prop: 'score',
},
{
label: '次均费用',
prop: 'quotas',
},
{
label: '年度',
prop: 'year',
},
{
label: '病种类型',
prop: 'diseaseType',
},
],
};
},
methods: {},
};
</script>
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
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
显示 复制 复制
# 带分组信息
视频参数
匹配模式
自定义1
采集分辨率
720*1280
采集帧率
15 fps
编码分辨率
720*1280
编码码率最小值
300 bps0
编码码率最大值
800 bps
音频参数
匹配模式
自定义1
采集分辨率
720*1280
采集帧率
15 fps
编码分辨率
720*1280
编码码率最小值
300 bps0
编码码率最大值
800 bps
<template>
<div class="app-base-bg" style="padding:20px;">
<yb-basic-profile
labelPosition="right"
:fields="fields"
:fieldsValue="fieldsValue"
></yb-basic-profile>
</div>
</template>
<script>
export default {
data() {
return {
fieldsValue: {
a: '自定义1',
b: '720*1280',
c: '15 fps',
d: '720*1280',
e: '300 bps0',
f: '800 bps',
'group2-a': '自定义1',
'group2-b': '720*1280',
'group2-c': '15 fps',
'group2-d': '720*1280',
'group2-e': '300 bps0',
'group2-f': '800 bps',
},
fields: [
{
label: '视频参数',
prop: 'group1',
children: [
{
label: '匹配模式',
prop: 'a',
},
{
label: '采集分辨率',
prop: 'b',
},
{
label: '采集帧率',
prop: 'c',
},
{
label: '编码分辨率',
prop: 'd',
},
{
label: '编码码率最小值',
prop: 'e',
},
{
label: '编码码率最大值',
prop: 'f',
},
],
},
{
label: '音频参数',
prop: 'group2',
children: [
{
label: '匹配模式',
prop: 'group2-a',
},
{
label: '采集分辨率',
prop: 'group2-b',
},
{
label: '采集帧率',
prop: 'group2-c',
},
{
label: '编码分辨率',
prop: 'group2-d',
},
{
label: '编码码率最小值',
prop: 'group2-e',
},
{
label: '编码码率最大值',
prop: 'group2-f',
},
],
},
],
};
},
methods: {},
};
</script>
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
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
显示 复制 复制
# 插槽的使用
- 自定义所有 label 区域插槽名称："fieldsLabel"
- 自定义所有 value 区域插槽名称："filedsValue"
- 自定义单个 label 区域的插槽名称：fields[].prop+"-label"
- 自定义单个 value 区域的插槽名称：fields[].prop
视频参数
匹配模式
自定义1
采集分辨率
720*1280
采集帧率
15 fps
编码分辨率
720*1280
编码码率最小值
300 bps0
编码码率最大值
800 bps
音频参数
匹配模式
自定义1
采集分辨率
720*1280
采集帧率
15 fps
编码分辨率
720*1280
编码码率最小值
300 bps0
编码码率最大值
800 bps
<template>
<div class="app-base-bg" style="padding:20px;">
<yb-basic-profile
labelPosition="right"
:fields="fields"
:fieldsValue="fieldsValue"
>
<!-- 自定义所有 label 区域插槽名称："fieldsLabel" -->
<template v-slot:fieldsLabel="{value,field,fields,fieldsValue}">
<i class="el-icon-s-help"></i>{{field.label}}
</template>
<!-- 自定义单个 label 区域的插槽名称：fields[].prop+"-label"-->
<template v-slot:f-label="{value,field,fields,fieldsValue}">
<i class="el-icon-picture-outline-round"></i>{{field.label}}
</template>
<!-- 自定义所有 value 区域插槽名称："filedsValue" -->
<template v-slot:filedsValue="{value,field,fields,fieldsValue}">
<i class="el-icon-picture-outline-round"></i>{{value}}
</template>
<!-- 自定义单个 value 区域的插槽名称：fields[].prop-->
<template v-slot:f="{value,field,fields,fieldsValue}">
<el-tag type="danger">{{value}}</el-tag>
</template>
</yb-basic-profile>
</div>
</template>
<script>
export default {
data() {
return {
fieldsValue: {
a: '自定义1',
b: '720*1280',
c: '15 fps',
d: '720*1280',
e: '300 bps0',
f: '800 bps',
'group2-a': '自定义1',
'group2-b': '720*1280',
'group2-c': '15 fps',
'group2-d': '720*1280',
'group2-e': '300 bps0',
'group2-f': '800 bps',
},
fields: [
{
label: '视频参数',
prop: 'group1',
children: [
{
label: '匹配模式',
prop: 'a',
},
{
label: '采集分辨率',
prop: 'b',
},
{
label: '采集帧率',
prop: 'c',
},
{
label: '编码分辨率',
prop: 'd',
},
{
label: '编码码率最小值',
prop: 'e',
},
{
label: '编码码率最大值',
prop: 'f',
},
],
},
{
label: '音频参数',
prop: 'group2',
children: [
{
label: '匹配模式',
prop: 'group2-a',
},
{
label: '采集分辨率',
prop: 'group2-b',
},
{
label: '采集帧率',
prop: 'group2-c',
},
{
label: '编码分辨率',
prop: 'group2-d',
},
{
label: '编码码率最小值',
prop: 'group2-e',
},
{
label: '编码码率最大值',
prop: 'group2-f',
},
],
},
],
};
},
methods: {},
};
</script>
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
110
111
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
110
111
显示 复制 复制
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| fields | 展示字段的结构数据 | object[] | - | [] |
| fields[].label | 名称 | string | - | - |
| fields[].prop | 字段标识 | string | - | - |
| fields[].spans | 单个字段的栅栏配置 | object | - | - |
| fieldsValue | 字段对应的值 | object | - | {} |
| spans | 用栅栏布局对 fields 排版，如果是 object 类型，将与默认的{ xl: 4,lg: 6,md: 8,sm: 12, xs: 24}进行合并，总占格数为 24 , 如果存在 { span:12 } 则 以span的值为准 | object | - | { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 } |
| labelWidth | label 的宽度 | string | - | "120px" |
| labelPosition | label 的位置，居左："left",居右："right" | string | - | "right" |
上次更新: 2024/09/25, 19:33:20