永洪社区

标题: 求助文本组件实现卡片效果 [打印本页]

作者: 手可摘星辰 时间: 2022-2-24 19:04
标题: 求助文本组件实现卡片效果
本帖最后由手可摘星辰于 2022-2-24 19:33 编辑

目前使用的是文本组件，绑定计算列。目前实现效果不理想，求助大神帮忙实现demo样式
计算列编写：

var t1 = sum(col['当期总额度-当日');
var t2 = sum(col['使用率');
var t3 = sum(col['占比');
var t4 = sum(col['信用授信使用率');
var t5 = sum(col['信用授信占比');
var t6 = sum(col['担保授信使用率');
var t7 = sum(col['担保授信占比');
var t8 = sum(col['当期信用授信额度');
var t9 = sum(col['当期担保授信额度');

"<div style='font-size: 12px;margin: 10px 0 10px 10px;border-right: 1px solid #d8d8d8;padding:0 10px 0px 0'>"
+"<p style='font-size: 16px;height: 30px;'>实际</p>"
+"<div style='height: 40px;text-align: LEFT;'>"
      +"<span style='font-size: 40px;line-height: 40px;font-weight: 600;'>" + formatNumber(t1,'0,000') + "</span>"
      +"<span style='font-size: 14px;'></span>"
+"</div>"

+"<p  style='font-size: 12px;height: 15px;'>使用率</p>"
+"<div style='height: 10px; width: 90px; background: #f2f2f2;border: 1px solid #d8d8d8; margin: 10px 0;'>"
      +"<div style='background: #FF8D14;width: " + formatNumber(t2/1000, '0%') + ";height: 100%;'></div>"
      +"<p  style='font-size: 12px;height: 15px;'>"+formatNumber(t2/1000, '0%')+"</p>"
+"</div>"


+"<p  style='font-size: 12px;height: 15px;'>占比</p>"
+"<div style='height: 10px; width: 90px; background: #f2f2f2;border: 1px solid #d8d8d8; margin: 10px 0;'>"
      +"<div style='background: #FF8D14;width: " + formatNumber(t3/1000, '0%') + ";height: 100%;'></div>"
      +"<p  style='font-size: 12px;height: 15px;'>"+formatNumber(t3/1000, '0%')+"</p>"
+"</div>"
+"<table style='width: 100%;'>"
      +"<tr style='height: 28px;line-height:28px'>"
         +"<td style='text-align: right;'>信用授信</td>"
         +"<td style='text-align: left;padding-left:-5px'>" + formatNumber(t8,'0,000')  +"</td>"
         +"<td style='text-align: right;'>担保授信</td>"
         +"<td style='text-align: left;padding-left:-5px;"+";'>" + formatNumber(t9, '0,000') + "</td>"
      +"</tr>"
      +"<tr>"
         +"<td style='text-align: right;'>使用率</td>"
         +"<td style='text-align: left;padding-left:-5px'>" + formatNumber(t4, '0%') + "</td>"
         +"<td style='text-align: right;'>使用率</td>"
         +"<td style='text-align: left;padding-left:-5px:"+";'>" + formatNumber(t6, '0%') + "</td>"
      +"</tr>"
      +"<tr>"
               +"<td style='text-align: right;'>占比</td>"
         +"<td style='text-align: left;padding-left:-5px'>" + formatNumber(t5, '0%') + "</td>"
         +"<td style='text-align: right;'>占比</td>"
         +"<td style='text-align: left;padding-left:-5px:"+";'>" + formatNumber(t7, '0%') + "</td>"
      +"</tr>"
+"</table>"
+"</div>"

作者: 永洪tech-Bella 时间: 2022-2-24 19:04

手可摘星辰发表于 2022-2-25 15:02
换了指标卡，自由表，文本，凑在一起组合起来。

作者: yhdata_Jenny 时间: 2022-2-24 19:16
是指样式和数据计算都没有弄对是吗，可否传一下这个case jar？

作者: 手可摘星辰 时间: 2022-2-24 19:24

yhdata_Jenny 发表于 2022-2-24 19:16
是指样式和数据计算都没有弄对是吗，可否传一下这个case jar？

样式不对，数据是对的。

作者: 手可摘星辰 时间: 2022-2-24 19:34

yhdata_Jenny 发表于 2022-2-24 19:16
是指样式和数据计算都没有弄对是吗，可否传一下这个case jar？

只用一个文本组件，新建一个计算列，把上面的代码放进去，计算列绑定组件就可。

作者: yhdata_Jenny 时间: 2022-2-24 19:43
这个具体我们内部看一下，需要点时间，有结果第一时间反馈给您

作者: 手可摘星辰 时间: 2022-2-25 13:39

yhdata_Jenny 发表于 2022-2-24 19:43
这个具体我们内部看一下，需要点时间，有结果第一时间反馈给您

需求已解决，请问帖子可以删除吗？

作者: 永洪tech-Bella 时间: 2022-2-25 13:52

手可摘星辰发表于 2022-2-25 13:39
需求已解决，请问帖子可以删除吗？

为什么删除呢
可以分享下怎么实现的吗？

作者: 手可摘星辰 时间: 2022-2-25 15:02

永洪tech-Bella 发表于 2022-2-25 13:52
为什么删除呢
可以分享下怎么实现的吗？

换了指标卡，自由表，文本，凑在一起组合起来。

欢迎光临永洪社区 (https://club.yonghongtech.com/)