@linkdesign/screen
Version:
屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏
601 lines (550 loc) • 16.4 kB
Markdown
---
title: 组件示例
order: 2
---
## 基础用法
```jsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { reduce } from 'lodash-es';
import { Switch, Grid, Divider } from '@alifd/next';
import {
Title,
Indicator,
CarouselTable,
EChart,
BarStackChart,
RingStackChart,
GaugeChart,
MiniLineChart,
BarChart,
LineChart,
DemoWrapper,
config,
Scene,
Utils,
} from '@linkdesign/screen';
const { Row, Col } = Grid;
const { CarPlate } = Scene.Park;
const { _cssPrefix } = config;
const { NWC } = Utils;
const R1C3 = [
{
actionTime: 1587696039000,
actionType: 1,
carNo: '鲁CH873D',
carType: 1,
inTime: 1587696039000,
parkDuration: -31,
parkId: 382,
parkName: '六和金座停车场',
recordId: '12020042410400426385400382',
money: 5000,
},
{
actionTime: 1587695976000,
actionType: 1,
carNo: '浙AEJ092',
carType: 1,
inTime: 1587695976000,
parkDuration: 31,
parkId: 260,
parkName: '中大银座停车场',
recordId: '12020042410393663629050260',
money: 4000,
},
{
actionTime: 1587695975000,
actionType: 2,
carNo: '浙AGF033',
carType: 1,
inTime: 1587694344000,
outTime: 1587695975000,
parkDuration: 1631,
parkId: 260,
parkName: '中大银座停车场',
recordId: '12020042410122501693870260',
money: 3000,
},
{
actionTime: 1587695973000,
actionType: 1,
carNo: '浙A2PT66',
carType: 1,
inTime: 1587695973000,
parkDuration: 34,
parkId: 261,
parkName: '鹏辉产业园停车场',
recordId: '12020042410393402013680261',
money: 2000,
},
{
actionTime: 1587695971000,
actionType: 2,
carNo: '浙AJ885N',
carType: 1,
inTime: 1587693297000,
outTime: 1587695971000,
parkDuration: 2674,
parkId: 362,
parkName: '澹海金座停车场',
recordId: '12020042409545781394750362',
money: 1000,
},
{
actionTime: 1587695961000,
actionType: 1,
carNo: '浙FS1G12',
carType: 1,
inTime: 1587695961000,
parkDuration: 46,
parkId: 358,
parkName: '龙轩停车场',
recordId: '12020042410392148052130358',
money: 1000,
},
{
actionTime: 1587695958000,
actionType: 2,
carNo: '浙ADC9223',
carType: 5,
inTime: 1587694482000,
outTime: 1587695958000,
parkDuration: 1476,
parkId: 367,
parkName: '之江发展大厦停车场',
recordId: '12020042410144185394290367',
money: 1000,
},
{
actionTime: 1587695933000,
actionType: 1,
carNo: '浙ABV586',
carType: 1,
inTime: 1587695933000,
parkDuration: 74,
parkId: 260,
parkName: '中大银座停车场',
recordId: '12020042410385380139350260',
money: 1000,
},
{
actionTime: 1587695914000,
actionType: 1,
carNo: '浙A92008',
carType: 1,
inTime: 1587695914000,
parkDuration: 93,
parkId: 367,
parkName: '之江发展大厦停车场',
recordId: '12020042410383472221730367',
money: 1000,
},
{
actionTime: 1587695910000,
actionType: 1,
carNo: '浙A8011E',
carType: 1,
inTime: 1587695910000,
parkDuration: 97,
parkId: 261,
parkName: '鹏辉产业园停车场',
recordId: '12020042410383014770170261',
money: 1000,
},
];
const App = () => {
const [r0c1, setR0c1] = useState();
const [r1c3, setR1c3] = useState();
useEffect(() => {
fetchR0c1();
fetchR1c3();
}, []);
const fetchR0c1 = () => {
setTimeout(() => {
const res = [
{ value: 335, name: '消防事件' },
{ value: 310, name: '城市内涝' },
{ value: 234, name: '环境污染' },
{ value: 135, name: '城管事件' },
{ value: 1548, name: '安防事件' },
];
const total = reduce(res, (sum, el) => sum + el.value, 0);
setR0c1(res.map(({ value, name }) => ({
value,
name: `${name} ${(value / total * 100).toFixed(2)}%`
})));
}, 1000);
};
const fetchR1c3 = () => {
setTimeout(() => {
const total = reduce(R1C3, (sum, el) => sum + el.money, 0);
setR1c3(R1C3.map(({ money, parkName }, i) => ({
label: `${i + 1}. ${parkName}`,
value: money,
rate: money / total * 100,
})));
}, 1000);
};
return (
<DemoWrapper id="demo-Scene-Park">
<section style={{ marginBottom: 20 }}>
<Title className={`${_cssPrefix}main-title`} textStyle={{ marginBottom: 12 }}>清家底</Title>
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>接入停车场数</Title>
<Row justify="space-between">
<Col span="10" align="center">
<BarStackChart
title="接入停车场"
dataSource={[{
label: '类型一',
value: 40,
}, {
label: '类型二',
value: 60,
}]}
/>
</Col>
<Col span="10">
<RingStackChart title="接入停车场" dataSource={r0c1} />
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>接入调度停车场数</Title>
<Row justify="space-between">
<Col span="10" align="center">
<BarStackChart
title="接入调度停车场数"
total={140}
dataSource={[{
label: '类型一',
value: '40%',
}, {
label: '类型二',
value: '100%',
}]}
/>
</Col>
<Col span="10">
<RingStackChart title="接入调度停车场数" dataSource={r0c1} />
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>接入普查停车场数</Title>
<Row justify="space-between">
<Col span="10" align="center">
<BarStackChart
title="接入普查停车场数"
total={140}
dataSource={[{
label: '类型一',
value: '40%',
}, {
label: '类型二',
value: '100%',
}]}
/>
</Col>
<Col span="10">
<RingStackChart title="接入普查停车场数" dataSource={r0c1} />
</Col>
</Row>
</div>
</section>
<section style={{ marginBottom: 20 }}>
<Title className={`${_cssPrefix}main-title`} textStyle={{ marginBottom: 12 }}>实时停车资源情况数据指标</Title>
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>实时停车数</Title>
<Row>
<Col span="5" align="center">
<Indicator
type="main"
label="在停车位总数"
value={123456}
/>
</Col>
<Col span="5" offset="2" align="center">
<Indicator
type="main"
label="空闲车位数"
value={11456}
/>
</Col>
<Col span="10" offset="2">
<BarStackChart
title="在停车位总数"
dataSource={[{
label: '类型一',
value: 400,
}, {
label: '类型二',
value: 600,
}]}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>负荷指数</Title>
<Row justify="space-between">
<Col span="10" align="center">
<GaugeChart
universalStyle={{ height: 240 }}
config={{
value: 5.4,
limit: 6,
max: 8,
label: '良好',
content: (val) => val.toFixed(1),
}}
/>
</Col>
<Col span="10">
<GaugeChart
universalStyle={{ height: 240 }}
config={{
value: 7,
limit: 6,
max: 8,
label: '超负荷',
content: (val) => val.toFixed(1),
}}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>余位识别准确率</Title>
<Row>
<Col span="2" align="center">
<Indicator
type="main"
label="余位准确率"
value="85%"
unit={<span className={`with-triangle ${_cssPrefix}data`}>12%</span>}
/>
</Col>
<Col span="3" offset="1" align="center">
<MiniLineChart
universalStyle={{ height: 56 }}
dataSource={[820, 932, 901, 934, 1290, 1330, 1320]}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>驶入驶出情况</Title>
<Row>
<Col span="12">
<CarouselTable
title="停车场车辆实时进出情况"
global={{
textStyle: { color: '#fff' }
}}
universalStyle={{ height: 280 }}
sliderOptions={{ slidesToShow: 5 }}
headerOptions={{
textStyle: {
borderTop: '1px solid #D3E2FF',
borderBottom: '1px solid #D3E2FF',
},
}}
rowOptions={{
oddBackgroundColor: '#112854',
}}
column={[{
key: 'actionTime',
alias: '时间',
widthRate: 20,
type: 'time',
textStyle: {
paddingLeft: 10,
},
}, {
key: 'parkName',
alias: '车场',
widthRate: 40,
}, {
key: 'carNo',
alias: '车牌',
widthRate: 20,
cell: (val, i, record) => (val ? <CarPlate plateNo={val} plateColor={1} /> : '-'),
}, {
key: 'money',
alias: '金额',
widthRate: 20,
type: 'data',
}]}
dataSource={R1C3}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车热点排行</Title>
<Row>
<Col span="12">
<CarouselTable
title="停车热点排行"
universalStyle={{ height: 280 }}
sliderOptions={{ slidesToShow: 5 }}
column={[{
key: '$index',
widthRate: 10,
}, {
key: 'parkName',
alias: '停车场/路侧停车名称',
widthRate: 70,
}, {
key: 'money',
alias: '负荷指数',
widthRate: 20,
type: 'data',
}]}
dataSource={R1C3}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车场饱和度排名</Title>
<Row>
<Col span="12">
<BarChart
title="停车场饱和度排名"
universalStyle={{ height: 280 }}
dataSource={r1c3}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车场泊车活跃排名</Title>
<Row>
<Col span="12">
<BarChart
title="停车场泊车活跃度排名"
universalStyle={{ height: 280 }}
dataSource={r1c3}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>全域车位利用率</Title>
<Row>
<Col span="12">
<LineChart
title="全域车位利用率"
universalStyle={{
height: 220,
}}
options={{
tooltip: {
formatter: '时间: {b}<br />利用率: {c}%',
},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
name: '单位：%',
min: 0,
max: 100,
},
series: [{
data: [20, 32, 10, 34, 90, 30, 20],
lineStyle: {
color: '#3B81FF',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 112, 204, 0.5)'
}, {
offset: 1, color: 'rgba(0, 112, 204, 0)'
}],
}
},
}],
}}
/>
</Col>
</Row>
</div>
<Divider />
<div>
<Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车难度预测（时间维度）</Title>
<Row>
<Col span="12">
<LineChart
title="停车难度预测（时间维度）"
universalStyle={{
height: 220,
}}
options={{
tooltip: {
// formatter: '时间: {b}<br />利用率: {c}%',
},
xAxis: {
data: ['12:00', '15:00', '18:00', '21:00', '24:00'],
},
yAxis: {
name: '单位：%',
scale: true,
},
series: [{
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [20, 32, 10, null, null],
markLine: {
data: [{
xAxis: '18:00',
label: {
formatter: '现在',
position: 'start'
},
lineStyle: {
type: 'solid',
color: 'rgba(211, 226, 255, 0.5)',
}
}],
},
}, {
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [null, null, 20, 44, 80],
lineStyle: {
type: 'dashed',
}
}],
}}
/>
</Col>
</Row>
</div>
</section>
</DemoWrapper>
);
}
ReactDOM.render((
<App />
), mountNode);
```