Arbor 前端框架4.2 面板使用文档

# 质监粤品通大屏

需求：期望通过面板设计器配置出来的大屏效果如下

ypt-xq-01

点击上/下一页或出现的弹窗设计图如下

ypt-xq-02 ypt-xq-03

# 创建面板

ypt-01

配置模版

配置模版前确认配置所需要的模版主题已有否？
若存在，直接在模版上选择对应的主题即可；
若不存在，则需要创建/拓展对应的模版/主题
当前支持的模版主题：【链接】------------------------------- todo

ypt-02

# 拓展主题

  1. src/components/frame/Panel/PanelCode/theme/theme.js 文件上新增对应的主题，以及主题对应的主题块边框样式
export default {
    // 面板主题列表 { text: 主题名称, id: 主题code }
    // 其中 code 的值为 @/components/frame/Panel/PanelCode/theme 的主题目录名称
    themeList: [
        { text: '质监粤品通大屏', id: 'ypt' },  // 新增的大屏名称与id，这个id需要与themeBorderInfo、文件夹名称对应
        { text: '智慧监控大屏', id: 'zhjk' },
        { text: '蓝色大屏', id: 'bluePlane' },
        { text: '蓝色主题2', id: 'blue2' },
        { text: '白底', id: 'white' },
    ],
    // 主题边框信息
    themeBorderInfo: {
        default: [
            { text: '实线', id: 'solid' },
            { text: '虚线', id: 'dashed' },
            { text: '点', id: 'dotted' },
            { text: '双线', id: 'double' },
            { text: '3D 凹槽边框', id: 'groove' },
            { text: '3D 垄状边框', id: 'ridge' },
            { text: '3D inset 边框', id: 'inset' },
            { text: '3D outset 边框', id: 'outset' },
        ],
        // key 为 themeList 中的id，即主题目录的名称
        bluePlane: [
            // text 为border显示值（自行定义），id 为 主题目录下/borderTheme/边框图片名
            ...
        ],
        blue2: [ ... ],
        white: [ ... ],
        zhjk: [ ... ],
        // 新增的大屏边框，如果没有，则可不填，会默认使用themeBorderInfo.default
        ypt: [],
    }
}
  1. 新增模版/主题文件 2.1 在src/components/frame/Panel/PanelCode/theme/下心中模版ypt文件夹

注意

这里的ypt需要与第一步定义的themeList新增的id对应

2.2 src/components/frame/Panel/PanelCode/theme/ypt 文件下新增assets文件夹与index.js文件
assets文件下添加主题背景图片、头部标题背景图片等

ypt-03

index.js 文件

export default {
    primaryColor: '#06173F',
    // 1. 设置大屏背景图片
    panel: {
        backgroundImage: `url(${require('./assets/background.png')})`, 
        backgroundSize: '100% 100%',
    },
    // 2. 设置大屏头部背景图片
    // 面板标题样式
    panelTitle: {
        height: '7.8vh',
        backgroundImage: `url(${require('./assets/head.png')})`,
        backgroundSize: '100% auto',
        color: 'rgba(0, 0, 0, 0)', /* 图片中已含有标题，则将字体颜色透明度设置为0，不显示字体标题 */
    },
}

此时预览效果如下

ypt-04

# 分析设计图

对设计图进行分析，确认哪些块支持配置，哪些块可通过拓展实现，哪些需要自定义页面，下面对面板块进行逐个分析

  1. 自定义页面：左侧的柱线混合图支持配置，右侧的表不支持配置，一般此类情况可使用多内容的方式进行配置，左侧柱线图使用报表类型、右侧统计表使用自定义页面
    但考虑到点击下一页时需要进行轮播图切换，当前（2024/09/27）面板不支持混合展示类型，故此模块使用 自定义页面 进行配置 block-01

  2. 自定义页面：头部的统计数可以通过拓展卡片的方式进行配置，下面的列表（不改动原组件，拓展一个列表组件）面板支持配置，但考虑到以下两点
    block-02

  3. 自定义页面：不支持配置 block-03

  4. 自定义页面：此块逻辑略微复杂，通过自定义页面实现使其更灵活 block-04

  5. 自定义页面：不支持配置 block-05

  6. 自定义页面：不支持配置 block-06

  7. 支持配置：可通过报表配置 block-07

  8. 支持配置：可通过报表配置 block-08

  9. 支持配置：可通过报表配置 block-09

# 创建块

按上述的配置分析，逐步新增对应的块

创建对应的文件（自定义页面）

在src/views/business/下新增此面板文件夹YptScreen
按块的业务作用进行命名（这里统一使用 Block1，Block2等）

  1. 第一个块为自定义页面，故在YptScreen文件夹下Block1.vue文件，Block1.vue中使用 src/components/frame/Panel/BlockContent/items/PChart/index.vue 组件渲染左侧图表，其余自定义开发。配置步骤如下：
    点击添加块按钮后

block1-c block1-d 按设计图的大小与位置信息调入相对应的位置 block1-e

点击确定按钮即可

初步效果如下： block1-a 这时发现块的标题，背景等还是默认的样式，故在创建块之前我们需要先设置块的主题样式

设置块主题样式

src/components/frame/Panel/PanelCode/theme/ypt/index.js文件下新增一下代码

  1. 标题样式
export default {
    // ...
    blockTitle: {
        backgroundImage: `url(${require('./assets/blockTitleBg.png')})`,
        backgroundColor: 'rgba(0, 0, 0, 0)',
        backgroundSize: 'auto 100%',
        fontSize: '48px',
        color: '#FFFFFF',
        paddingLeft: '50px',
        fontFamily: 'PangMenZhengDao',
        paddingBottom: '20px',
    },
    // ...
}

其中：

  • 引入字体：如果当前项目中如未全局引入 PangMenZhengDao 字体，并且此字体仅在当前主题中使用，可在 src/components/frame/Panel/PanelCode/theme/ypt 文件夹下新增 index.css 文件，文件内容如下：（assets/fonts/PangMenZhengDao.ttf为 PangMenZhengDao字体文件路径）
  • 特殊样式：块的背景颜色为渐变色 + 透明度，直接透过单个属性无法实现，亦可以通过此css实现
@font-face {
    font-family: PangMenZhengDao;
    src: url("./assets/fonts/PangMenZhengDao.ttf");
}

.panel-block::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg,rgba(57,166,255,.05),rgba(4,120,255,.7));
    opacity: 0.1;
}

.panel-block >* {
    z-index: 9;
}

在当前js文件头部引入此css文件，如下

import './index.css'
export default {
    // ...
}
  1. 块背景颜色等
export default {
    // ...
    block: {
        backgroundColor: 'rgba(0, 0, 0, 0)',
    },
    // ...
}

至此，一个初步的块就出来了 block1-b

然后再按设计图调整下自定义页面的样式即可 block1-f

  1. 创建 Block2.vue 文件，开发第二个自定义页面块（步骤同一） block2

  2. 创建 Block3.vue 文件，开发第三个自定义页面块（步骤同一） block3

  3. 创建Block4.vue、Block5.vue、Block6.vue、Block7.vue，一个基础的面板配置完成 todo：效果图

# 调整内容

  1. 以第一个模块为例：根据需求，点击右上角的下一页上一页按钮可切换内容，故考虑“多内容”类型

------- 未完待续