# @linkdesign/screen

IoT 城市屏组件库

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

## 安装

```sh
tnpm install @linkdesign/screen --save
```

## 依赖

- ```@alifd/next```

```shell
npm install @alifd/next --save
```

## 引入

### 全量引入

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

### 按需引入

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

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

#### 1. 手动引入

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

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

##### babel配置

```js
{
  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

- [ ] ......

## 意见或建议

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

- [翊安](dingtalk://dingtalkclient/action/sendmsg?spm=a2o8d.corp_prod_issue_list.0.0.6a88718cyxurWU&dingtalk_id=vtyx2bd) (howard.zh@alibaba-inc.com)
