2 changed files with 160 additions and 47 deletions
@ -1,49 +1,158 @@ |
|||||
import React, { useEffect } from 'react'; |
import React, { useEffect } from 'react'; |
||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||
import { Spin, Card } from '@douyinfe/semi-ui'; |
import ReactECharts from 'echarts-for-react'; |
||||
|
import echarts from 'echarts'; |
||||
|
import { Spin, Card, CardGroup } from '@douyinfe/semi-ui'; |
||||
import '../style.less' |
import '../style.less' |
||||
const { Meta } = Card; |
const { Meta } = Card; |
||||
|
|
||||
const Console = (props) => { |
const WorkOrderData = (props) => { |
||||
const { dispatch, actions, user, loading, socket } = props |
const { dispatch, actions, user, clientHeight } = props |
||||
|
|
||||
useEffect(() => { |
useEffect(() => { |
||||
// ACTION 示例 |
|
||||
// dispatch(actions.example.getMembers(user.orgId)) |
}, []) |
||||
}, []) |
|
||||
|
let value = 88 |
||||
// websocket 使用测试 |
return ( |
||||
// useEffect(() => { |
<> |
||||
// console.log(socket) |
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px', minHeight: clientHeight - 32, display: 'flex', flexDirection: 'column' }}> |
||||
// if (socket) { |
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
||||
// socket.on('TEST', function (msg) { |
<div style={{ display: 'flex', alignItems: 'center' }}> |
||||
// console.info(msg); |
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
||||
// }); |
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>工单数据统计 |
||||
// return () => { |
</div> |
||||
// socket.off("TEST"); |
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>WORK ORDER DATA STATISTICS</div> |
||||
// } |
</div> |
||||
// } |
</div> |
||||
|
|
||||
// }, [socket]) |
<div style={{ margin: '20px 0', flex: 1, display: 'flex', }}> |
||||
|
<CardGroup type='grid' style={{ width: '100%' }}> |
||||
return ( |
{ |
||||
<> |
[{ |
||||
<div> |
t: '工单项目分析', |
||||
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative",top: -12, left: -8, }} /> |
echartOption: { |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
name: "单位：次数", |
||||
|
nameLocation: "end", |
||||
|
nameGap: 20 |
||||
|
}, |
||||
|
legend: {}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '1%', |
||||
|
// top: '24%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [120, 200, 150, 80, 70, 110, 130], |
||||
|
type: 'bar', |
||||
|
name: '异常数' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
}, { |
||||
|
t: '工单完成情况分析', |
||||
|
echartOption: { |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'xx', |
||||
|
type: 'gauge', |
||||
|
progress: { |
||||
|
show: true |
||||
|
}, |
||||
|
detail: { |
||||
|
valueAnimation: true, |
||||
|
formatter: '{value}' |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: 50, |
||||
|
name: '工单完成率' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'YY', |
||||
|
type: 'gauge', |
||||
|
progress: { |
||||
|
show: true |
||||
|
}, |
||||
|
detail: { |
||||
|
valueAnimation: true, |
||||
|
formatter: '{value}' |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: 50, |
||||
|
name: '延期数' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
], |
||||
|
media: [ |
||||
|
{ |
||||
|
query: { minAspectRatio: 1 }, |
||||
|
option: { |
||||
|
series: [ |
||||
|
{ center: ['25%', '50%'] }, |
||||
|
{ center: ['75%', '50%'] } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
}, { |
||||
|
t: '工单处理分析', |
||||
|
echartOption: {}, |
||||
|
}, { |
||||
|
t: '工单类型分析', |
||||
|
echartOption: {}, |
||||
|
},].map((c, idx) => ( |
||||
|
<Card |
||||
|
key={idx} |
||||
|
shadows='hover' |
||||
|
title={c.t} |
||||
|
bordered={false} |
||||
|
headerLine={false} |
||||
|
headerStyle={{ |
||||
|
padding: '12px', |
||||
|
}} |
||||
|
bodyStyle={{ |
||||
|
padding: '12px', |
||||
|
}} |
||||
|
style={{ width: '50%', height: '50%' }} |
||||
|
> |
||||
|
|
||||
|
<ReactECharts |
||||
|
notMerge={true} |
||||
|
lazyUpdate={true} |
||||
|
option={c.echartOption} |
||||
|
/> |
||||
|
</Card> |
||||
|
)) |
||||
|
} |
||||
|
</CardGroup> |
||||
</div> |
</div> |
||||
</> |
</div > |
||||
) |
</> |
||||
|
) |
||||
} |
} |
||||
|
|
||||
function mapStateToProps (state) { |
function mapStateToProps (state) { |
||||
const { auth, global, members, webSocket } = state; |
const { auth, global, members, webSocket } = state; |
||||
return { |
return { |
||||
// loading: members.isRequesting, |
user: auth.user, |
||||
// user: auth.user, |
actions: global.actions, |
||||
// actions: global.actions, |
clientHeight: global.clientHeight |
||||
// members: members.data, |
}; |
||||
// socket: webSocket.socket |
|
||||
}; |
|
||||
} |
} |
||||
|
|
||||
export default connect(mapStateToProps)(Console); |
export default connect(mapStateToProps)(WorkOrderData); |
||||
|
|||||
Loading…
Reference in new issue