反馈已提交

网络繁忙

系统运行维护看板

  • 文档创建者:RosieY
  • 历史版本:4
  • 最近更新:HeroZ 于 2023-02-24
  • 1. 模板内容

    分别从模板开发工作、模板维护工作和报表系统的访问量情况等维度分析透明IT部门的工作以及工作价值。

    模板实现效果如下:

    模板下载:系统运行维护看板1 、系统运行维护看板2

    模板特色功能:轮播图、跑马灯、多层饼图实现钻取。

    2. 模板构成

    模板一共由 23 个组件构成,适用于 PC 端展示。

    序号
    组件类型个数涉及功能效果示例
    1指标卡11文本内容与图片背景结合

    2图表9饼图、柱形图、条形图、折线图、面积图等


    3TAB
    1/
    4明细表2用 JS 实现跑马灯效果

    3. 布局与属性设置

    1)决策报表 body 布局采用自适应布局,组件间隔设定为 10,body 内边距全部设定为 10。整体背景颜色选择了一个极淡的灰色 #F7F8FA 。

    Snag_210c82.png


    其他组件的背景颜色均调成白色,圆角均调整为 10,内容显示方式均调整为双向铺满报表块,组件大小调整详情见第 4 章 —— 组件实现。

    2)模板 PC 端属性推荐选择「为该模板单独设置」,设置为字体不自适应,表格双向自适应。如下图所示:

    4. 组件实现

    4.1 指标卡

    4.1.1 系统维护看板1 中的指标卡实现

    1)向 body 里面拖入报表块(拖入三个)。

    4.1-1.jpg

    2)编辑报表块,选择对应的数据集、插入文本等。

    3)插入合适的图片作为背景图。

      

    4)调整组件大小

    以上三个组件相对应的大小分别调整为:

    圆角大小均设置为10

    5)效果预览

    4.1-8.jpg

    其他类似指标卡的实现:


    4.1.2系统维护看板2 中的指标卡实现

    1)将空白块中的绝对画布块拖入到body相应的位置

    4.1-11.jpg

    2)选中拖入的绝对画布块将新的报表块拖入到里面

    3)编辑报表块:通过将背景染色、合并单元格、调整大小等变成合适的样式

    4)插入合适的图片作为背景图,图片选择拉伸

    5)调整组件大小

    以上两个绝对画布块对应的大小分别为:

      和  

    两个绝对画布块中的报表块对应的大小分别为:

      和  

    拓展

    指标卡的样式很多样,本张模板采用的仅仅是指标卡最基本的样式,其他更多样式可参见:帆软市场

    大屏素材简介

    【图标素材下载网站】FVD 、阿里巴巴图标库

    注:阿里巴巴图标素材下载网站来自于外部非帆软所有,商用请注意版权问题。

    4.2 Tab块

    1)选择空白块中的 Tab块 拖入到 body 中。

    4.2-1.jpg

    2)点击右上角“+”可新增标签。

    1639460539994899.jpg

    3)隐藏标题——选中容纳 Tab 页标签的面板 tabpane0,将组件大小调整为 0 。

    4.2-3.jpg

    4)设置 Tab块 的整体布局以及轮播间隔

    4.2-4.jpg

    拓展

    更多 Tab 块轮播实现方式如下:

    JS 实现点击超链切换 Tab 块

    JS 实现决策报表中 Tab 块轮播

    4.3 折线图

    1)插入折线图:选中 Tab0 4.3-1.jpg,将图表栏里的折线图拖拽到上一步新建好的 Tab 块中。

    4.3-2.jpg

    2)编辑 折线图 :折线图类型选择为第一种。

    4.3-3.jpg

    绑定数据:选择对应的数据集,其中系列名选择字段名。

    4.3-4.jpg

    设置折线图的样式:

     

    3)调整组件大小以及添加标题样式。

    4.3-7.jpg

    4)效果预览

    4.3-8.jpg

    拓展

    其他更多折线图样式可参见:帆软市场

    更多折线图展现技巧可参考文档:

    折线图最值设置闪烁动画

    折线图改变线条或标记点属性

    大数据折线图

    动态轮播折线图

    4.4 面积图

    1)插入面积图:选中 Tab1 4.4-1.jpg将图表栏里的面积图拖拽到 4.2 中建好的 Tab 块。

    4.4-2.jpg

    2)编辑 面积图 :类型选择为第一种。

    4.4-3.jpg

    绑定数据:选择对应的数据集,其中系列名选择字段名。

    4.4-4.jpg

    设置面积图样式:

      

    3)调整组件大小和标题:

    4.4-8.jpg

    4)效果预览

    4.4-9.jpg


    拓展

    其他更多面积图样式可参见:帆软市场

    更多面积图实现方法如下:

    百分比堆积面积图

    垂直和曲线面积图

    范围面积图

    4.5 条形图

    1)插入条形图:选中 Tab2 4.5-1.jpg 将图表栏里的条形图拖拽到 4.2 节建好的 Tab 块。

    4.5-2.jpg

    2)编辑 条形图,类型选择为第一种。

    4.5-3.jpg

    绑定数据:选择对应的数据集,其中系列名选择字段名

    4.5-4.jpg

    设置条形图样式:颜色、分类间隔。

     

    3)调整组件大小和标题:

    4.5-7.jpg

    4)效果预览

    4.5-8.jpg


    拓展

    其他更多条形图展现形式可见:帆软市场

    更多条形图展现技巧如下:

    条形图隔行变色

    轮播条形图

    动态轮播条形图

    4.6 饼图

    4.6.1 普通饼图

    1)插入饼图:将图表栏里的饼图图标拖入到 看板1 的绝对画布块中。

    Snag_576bf1.png

    2)编辑 饼图,类型选择为第一种。

    4.6-1.jpg

    绑定数据:选择对应的数据集,系列名使用字段值。

    4.6-2.jpg

    设置饼图样式,如标签、半径大小等。

    4.6-3.jpg 4.6-4.jpg

    3)效果预览

    4.6-5.jpg


    4.6.2 多层饼图

    1)插入饼图:将图表栏里的多层饼图拖入到 看板1 的绝对画布块中。

     

    2)编辑 多层饼图 :

    绑定数据:选择对应的数据集并设置层级。

    4.6-8.jpg

    设置多层饼图样式:自定义颜色、是否开启钻取、透明度等。

    4.6-9.jpg

    3)添加组件背景:组件主体填充图片作为背景图。

    4.6-10.jpg

    4)设置组件大小(背景图片组件大小和饼图组件大小)

     

    5)效果预览

    4.6-13.jpg

    拓展

    其他更多饼图样式可见:帆软市场

    更多饼图实现方法如下:

    环形饼图/半圆饼图 

    多分类饼图

    4.7 柱形图

    4.7.1 系统维护看板1 中的普通柱形图

    1)插入柱形图:将图表栏里的柱形图拖入到 看板1 的 body 中。

    4.7-1.jpg

    2)编辑 柱形图,类型选择为第一种。

    4.7-2.jpg

    绑定数据:选择对应的数据集,系列名使用字段名。

    4.7-3.jpg

    设置柱形图样式:标签、自定义颜色、坐标轴等

      

    3)调整组件大小并设置标题。

    4.7-7.jpg

    4)效果预览

    4.7-8.jpg


    4.7.2 系统维护看板2 中的堆积柱形图

    1)插入柱形图:将图表栏里的柱形图拖入到 看板1 的 body 中。

    4.7-9.jpg

    2)编辑 柱形图,类型选择为第二种。

    4.7-10.jpg

    绑定数据:

    4.7-11.jpg

    设置样式:自定义颜色、坐标轴等。

     

    3)调整组件大小并设置标题:

    4.7-14.jpg

    4)效果预览

    4.7-15.jpg

    拓展

    其他更多柱形图展现形式可见:帆软市场

    更多柱形图实现方法如下:

    渐变柱形图

    弧形柱形图

    特殊图形柱形图

    占比柱形图

    4.8 跑马灯

    • 系统维护看板1 中的报表块跑马灯

    1)将报表块拖入到相应的位置

    4.8-1.jpg

    2)编辑标题表头等,选择相对应的数据集拖入到对应字段下面

    4.8-2.jpg

    3)点击添加「事件>初始化后」事件,编辑写入 JS 脚本,其中 'report30' 是当前组件的名字,需根据实际情况替换。

    4)调整组件大小、填充颜色以及设置圆角:

     

    • 系统维护看板2中的报表块跑马灯效果实现步骤同上,调整组件大小为:

     

    拓展

    更多跑马灯实现方法如下:

    跑马灯

    JS实现自动滚屏/跑马灯效果

    JS实现首尾相接的跑马灯

    其他

    场景方案链接:【场景方案】让我用五秒钟为信息部门“正名”

    任务领取链接:【模板打卡】用组件复用设计一张向其他业务小组透明信息部门工作的模板

    附件列表


    主题: 业务场景案例
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持