@linkdesign/screen

IoT 城市屏组件库

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

安装

tnpm install @linkdesign/screen --save

依赖

• @alifd/next

npm install @alifd/next --save

引入

全量引入

import '@linkdesign/screen/lib/index.less';
import { Title, BarChart } from '@linkdesign/screen';

按需引入

0. 引入全局样式（字体等）

// in your entry
import '@linkdesign/screen/lib/_reset.less';

1. 手动引入

import Title from '@linkdesign/screen/lib/title';
import '@linkdesign/screen/lib/title/style';

2. 使用 babel-plugin-import(推荐)

babel配置

{
  libraryName: '@linkdesign/screen',
  camel2DashComponentName: false,
  style: (name) => {
    if (name.endsWith('config') || name.endsWith('Utils')) {
      return false;
    }

    return `${name}/style`;
  },
  customName: (name) => {
    if (['config', 'Utils'].includes(name)) {
      return `@linkdesign/screen/lib/${name}`;
    }

    return `@linkdesign/screen/lib/${name}`;
  },
}

能力一览

文本类

• [x] 标题
• [x] 子屏标题
• [x] 筛选按钮
• [x] （高德）天气
• [x] 时间器
• [x] 指标
• [x] 轮播表格
• [x] 排序列表
• [x] 键值表格
• [ ] ......

图表类

基于Echarts/G2/自定义

• [x] 条形占比统计图（条形图）
• [x] 条形堆叠占比图（条形图）
• [x] 饼状标签占比图（饼图）
• [x] 环状占比统计图（环状图）
• [x] 环状堆叠占比图（环状图）
• [x] 仪表盘
• [x] echarts图表
• [x] g2图表
• [ ] ......

GIS/数据可视化类

• [x] 高德在线地图
• [x] 围栏编辑器
• [x] 点、线、面覆盖物展示
• [x] 位置预览
• [x] 拖拽选址
• [x] 区域分级统计图（2D/3D）
• [x] 飞线（3D）
• [x] 地图点组件（设备点、事件点、POI点、人）
• [x] 散点图、气泡图、热力图（2D/3D）
• [x] 离线地图（需要用户自己提供栅格图数据）
• [x] 支持高德Loca（数据可视化）
• [x] 支持L7（数据可视化）
• [ ] ......

媒体类

• [ ] 图片
• [x] 视频（录像、rtmp直播）
• [ ] ......

其他

• [x] 全屏切换
• [x] 实时感知（雷达动画）
• [x] 图形标记工具
• [ ] ......

文档

设计规范

城市数据大盘_大屏设计规范V1.0

大屏标准套件& BI指标看板

组件文档

高德GIS

GIS组件库

图形标记工具的设计思路

TODO List

• [ ] ......

意见或建议

对组件库的建设有任何想法或建议，请联系：

• 翊安 ([e-mail])