1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { useState, useEffect } from "react"
import { Select, Col, Row, Card } from "antd"
import { ReactSVG } from 'react-svg'
import { connect } from 'umi'
import { dispatchHandle } from '@/utils/publicHandle'
import style from "../../index.less"
const { Option } = Select
const OpsCapacityCount = (props) => {
const {
dispatch,
projectId,
home: {
projectsList,
opsCapacitySta
},
user: {
currentUser
}
} = props;
const optCapacityList = [
{ name: "110KV变压器", imgPath: "/pageImg/Fill 1@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "10KV变压器", imgPath: "/pageImg/Fill 1@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "中央空调", imgPath: "/pageImg/central_air_condition@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "空压机", imgPath: "/pageImg/airCompressor@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "制氮机", imgPath: "/pageImg/psan@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "锅炉", imgPath: "/pageImg/boiler@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "供水设施", imgPath: "/pageImg/waterSupply@2x.png", trustCapacity: "198900", runCapacity: "198900" },
{ name: "纯水设施", imgPath: "/pageImg/water@2x.png", trustCapacity: "198900", runCapacity: "198900" },
]
useEffect(() => {
dispatchHandle(
dispatch,
'home/device_service_device_group_volume_statistics_post',
{ projectId }
)
}, [projectId])
return (<div className={style.operation_capacity}>
{
opsCapacitySta && opsCapacitySta.length > 0 && (
<>
<header style={{ fontWeight: 600, fontSize: '0.83vw'}}>运维容量统计</header>
<Row className={style.operation_capacity_content} gutter={[{ md: 8, xxl: 16 }, { md: 8, xl: 16 }]}>
{
opsCapacitySta && opsCapacitySta.length > 0 && opsCapacitySta.filter(item=>item.icon).map((i, j) => {
return <Col md={{ span: 6 }} xxl={{ span: 3 }} key={i.id} style={{ height: '100%' }}>
<Card className={style.operation_capacity_item}>
<span className={style.operation_capacity_content_title}>{i?.name}</span>
<ReactSVG
src={i.icon ? `/svg/${i?.icon}.svg` : '/pageImg/default@2x.png'}
style={{ height: '2.81vw', width: '2.81vw', margin: '20px 0' }} />
<ul>
<li>
<span>托管容量:</span>
<span style={{ fontFamily: 'HelveticaNeue' }}>{i?.total}</span>
<span>{i.unitDesc || ''}</span>
</li>
<li>
<span>运行容量:</span>
<span style={{ fontFamily: 'HelveticaNeue' }}>{i?.value}</span>
<span>{i.unitDesc || ''}</span>
</li>
</ul>
</Card>
</Col>
})
}
</Row>
</>
)
}
</div>)
}
export default connect(({ home, user, loading }) => ({
home,
user
}))(OpsCapacityCount);