Skip to Content

Wiki源代码5.8.2.5 指标卡

由用户 yinshi 在 2024/10/25 08:10 保存的版本 4.1
显示最后作者
1 ==== 【使用场景】 ====
2
3 适用于需要直接显示重点数据的场景。例如可以使用指标卡展示商品的销售总额、发货数量、仓库库存数量等
4
5 如下图所示，使用指标卡直接显示销售总金额，方便以卡片形式突出显示
6
7 [[image:1729839523741-806.png||height="380" width="1091"]]
8
9 ==== 【基本要求】 ====
10
11 (% style="width:650.222px" %)
12 |(% style="width:290px" %)指标|(% style="width:356px" %)指标字段类型
13 |(% style="width:290px" %)必填，最多8个字段|(% style="width:356px" %)必须是聚合字段公式内字段也需要为聚合字段
14
15 **指标**：指标卡中显示的数字，是聚合后的结果，换句话说，指标卡中一定显示的是数字
16
17
18
19 **【配置步骤】**
20
21 ①在图形选择区选择“指标卡”图形：首页点击指标卡后，显示demo假数据，效果如下图
22
23 [[image:1729843542241-466.png]]
24
25
26 ②为指标卡图形添加指标，即： 拖入表单字段作为数据源：
27
28 [[image:1729843773872-432.png||height="462" width="1355"]]
29
30
31 3、【样式配置】
32
33 [[image:1729843821098-935.png||height="659" width="1281"]]
34
35
36
37 具体可配置的样式和详细需求如下：
38
39 |(% colspan="1" rowspan="1" %)(((
40
41 )))|(% colspan="1" rowspan="1" %)(((
42 样式设置分类
43 )))|(% colspan="1" rowspan="1" %)(((
44 配置项
45 )))|(% colspan="1" rowspan="1" %)(((
46 形态
47 )))|(% colspan="1" rowspan="1" %)(((
48
49 )))
50 |(% colspan="1" rowspan="9" %)(((
51 **指标卡**
52
53
54 )))|(% colspan="1" rowspan="6" %)(((
55 基础
56
57
58 )))|(% colspan="1" rowspan="1" %)(((
59 显示标题
60 )))|(% colspan="1" rowspan="1" %)(((
61 开关
62 )))|(% colspan="1" rowspan="1" %)(((
63 默认开启
64 )))
65 |(% colspan="1" rowspan="1" %)(((
66 标题名称
67 )))|(% colspan="1" rowspan="1" %)(((
68 输入框
69 )))|(% colspan="1" rowspan="1" %)(((
70 默认输入：指标卡
71 )))
72 |(% colspan="1" rowspan="1" %)(((
73 帮助文字
74 )))|(% colspan="1" rowspan="1" %)(((
75 开关
76 )))|(% colspan="1" rowspan="1" %)(((
77 默认关闭
78 )))
79 |(% colspan="1" rowspan="1" %)(((
80 帮助文字内容
81 )))|(% colspan="1" rowspan="1" %)(((
82 输入框
83 )))|(% colspan="1" rowspan="1" %)(((
84 占位提示：请输入
85 )))
86 |(% colspan="1" rowspan="1" %)(((
87 启用导出
88 )))|(% colspan="1" rowspan="1" %)(((
89 开关
90
91
92 )))|(% colspan="1" rowspan="1" %)(((
93 默认打开。**导出的是报表数据源表单的Excel源数据**
94 )))
95 |(% colspan="1" rowspan="1" %)(((
96 每行列数
97 )))|(% colspan="1" rowspan="1" %)(((
98 下拉单选
99 )))|(% colspan="1" rowspan="1" %)(((
100 默认：4， 可选值：4，3，2
101 )))
102 |(% colspan="1" rowspan="3" %)(((
103 指标卡样式
104
105
106 )))|(% colspan="1" rowspan="1" %)(((
107 指标卡风格
108 )))|(% colspan="1" rowspan="1" %)(((
109 选项卡
110 )))|(% colspan="1" rowspan="1" %)(((
111 默认：纯色填充，可选值：纯色填充，带侧边条 （以UI为准）
112 )))
113 |(% colspan="1" rowspan="1" %)(((
114 背景色值
115 )))|(% colspan="1" rowspan="1" %)(((
116 拾色器
117 )))|(% colspan="1" rowspan="1" %)(((
118 默认颜色：待UI确定（以UI为准）
119 )))
120 |(% colspan="1" rowspan="1" %)(((
121 指标字号
122 )))|(% colspan="1" rowspan="1" %)(((
123 下拉单选
124
125
126 )))|(% colspan="1" rowspan="1" %)(((
127 默认：大，可选值：大，中，小（以UI为准）。只改变指标卡中数字的字号粗细，不改变指标名称的字体字号（原型中有效果展示）。
128 )))
129 |(% colspan="1" rowspan="1" %)(((
130
131 )))|(% colspan="1" rowspan="1" %)(((
132
133 )))|(% colspan="1" rowspan="1" %)(((
134
135 )))|(% colspan="1" rowspan="1" %)(((
136
137 )))|(% colspan="1" rowspan="1" %)(((
138
139 )))
140
141
142 (% contenteditable="false" style="background-image:url(http://192.168.102.35:8080/webjars/wiki%3Axwiki/xwiki-platform-ckeditor-webjar/16.8.0/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5); display:none" tabindex="-1" %)[[image:data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==||draggable="true" height="15" role="presentation" title="拖曳以移動" width="15"]]