|
|
@ -1,35 +1,146 @@ |
|
|
|
import React, { useEffect } from 'react'; |
|
|
|
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' |
|
|
|
const { Meta } = Card; |
|
|
|
|
|
|
|
const Console = (props) => { |
|
|
|
const { dispatch, actions, user, loading, socket } = props |
|
|
|
const WorkOrderData = (props) => { |
|
|
|
const { dispatch, actions, user, clientHeight } = props |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
// ACTION 示例 |
|
|
|
// dispatch(actions.example.getMembers(user.orgId)) |
|
|
|
}, []) |
|
|
|
|
|
|
|
// websocket 使用测试 |
|
|
|
// useEffect(() => { |
|
|
|
// console.log(socket) |
|
|
|
// if (socket) { |
|
|
|
// socket.on('TEST', function (msg) { |
|
|
|
// console.info(msg); |
|
|
|
// }); |
|
|
|
// return () => { |
|
|
|
// socket.off("TEST"); |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// }, [socket]) |
|
|
|
}, []) |
|
|
|
|
|
|
|
let value = 88 |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div> |
|
|
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative",top: -12, left: -8, }} /> |
|
|
|
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px', minHeight: clientHeight - 32, display: 'flex', flexDirection: 'column' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<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 }}>工单数据统计 |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>WORK ORDER DATA STATISTICS</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style={{ margin: '20px 0', flex: 1, display: 'flex', }}> |
|
|
|
<CardGroup type='grid' style={{ width: '100%' }}> |
|
|
|
{ |
|
|
|
[{ |
|
|
|
t: '工单项目分析', |
|
|
|
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 > |
|
|
|
</> |
|
|
|
) |
|
|
@ -38,12 +149,10 @@ const Console = (props) => { |
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, global, members, webSocket } = state; |
|
|
|
return { |
|
|
|
// loading: members.isRequesting, |
|
|
|
// user: auth.user, |
|
|
|
// actions: global.actions, |
|
|
|
// members: members.data, |
|
|
|
// socket: webSocket.socket |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
clientHeight: global.clientHeight |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Console); |
|
|
|
export default connect(mapStateToProps)(WorkOrderData); |
|
|
|