CommobileStep.js
7.62 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
/* eslint-disable prefer-destructuring */
/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import React from 'react';
import { Steps } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import CommobileBase from '../../mobile/common/CommobileBase';
import CommobileListEvent from './CommobileListEvent';
import * as commonUtils from '../../utils/utils';
const Step = Steps.Step;
const warningIcon = () => (
<svg
t="1605371264198"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1675"
data-spm-anchor-id="a313x.7781069.0.i6"
>
<path
d="M533.333333 949.333333c-235.648 0-426.666667-191.018667-426.666666-426.666666s191.018667-426.666667 426.666666-426.666667 426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666666z m-40.021333-640V597.333333a42.666667 42.666667 0 0 0 85.333333 0V309.333333a42.666667 42.666667 0 0 0-85.333333 0z m40.021333 469.333334a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
p-id="1676"
data-spm-anchor-id="a313x.7781069.0.i5"
className=""
fill="#faad14"
/>
</svg>
);
const finishIcon = () => (
<svg
t="1605374543748"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2801"
>
<path
d="M512 64c-247.4 0-448 200.6-448 448s200.6 448 448 448S960 759.4 960 512 759.4 64 512 64z m193.5 301.7l-210.6 292c-12.7 17.7-39 17.7-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
p-id="2802"
data-spm-anchor-id="a313x.7781069.0.i19"
className="selected"
fill="#22ac38"
/>
</svg>
);
const errorIcon = () => (
<svg
t="1605374709673"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3619"
>
<path
d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m0-486.997334L391.338667 330.965333 330.965333 391.338667 451.669333 512l-120.704 120.661333 60.373334 60.373334L512 572.330667l120.661333 120.704 60.373334-60.373334L572.330667 512l120.704-120.661333-60.373334-60.373334L512 451.669333z"
p-id="3620"
data-spm-anchor-id="a313x.7781069.0.i24"
className="selected"
fill="#ff4d4f"
/>
</svg>
);
// eslint-disable-next-line react/require-render-return
class CommobileStep extends React.Component {
constructor(props) {
super(props);
this.state = {
// isLoading: false,
};
}
onClose = key => () => {
this.setState({
[key]: false,
});
}
render() {
const { sSlaveId, slaveData } = this.props; /* 工单号 */
const iIndex = slaveData.findIndex(item => item.sSlaveId === sSlaveId);
let slaveDataRow = {};
if (iIndex > -1) {
slaveDataRow = slaveData[iIndex];
const sPartNameStatus = slaveDataRow.sPartNameStatus; /* 工单状态 */
const sPartItem = commonUtils.isNotEmptyObject(sPartNameStatus) ? sPartNameStatus.split('->') : '';
return (
<div
size="lg"
style={{
width: '100%', padding: '0.5em', textAlign: 'left', maxHeight: 'calc(100vh - 40px)', overflowY: 'auto', height: 'calc(100vh - 40px)',
}}
>
<div style={{ backgrounColor: '#fff' }}>
{
commonUtils.isNotEmptyObject(sPartNameStatus) ?
<Steps size="small" current={1}>
{
// eslint-disable-next-line array-callback-return
sPartItem.map((t) => {
// const sPartItemLength = sPartItem.length;
const ArrItemStr = t.split('#')[0];
const ArrItemNum = t.split('#')[1];
const ArrItemName = t.split('#')[2];
const ArrItemBanZhu = t.split('#')[3];
const ArrItemTime = t.split('#')[4];
const ArrItemPCNum = t.split('#')[5];
const ArrItemSBNum = t.split('#')[6];
let ArrItemNumChange = '';
let icon = null;
let status = 'wait';
// eslint-disable-next-line no-unused-vars
// eslint-disable-next-line default-case
switch (Number(ArrItemNum)) {
case 0:
ArrItemNumChange = '未排程';
status = 'error';
// eslint-disable-next-line react/jsx-no-undef
icon = warningIcon();
break;
case 1:
ArrItemNumChange = '未完成';
// icon = <Icon type="close-circle" theme="filled" style={{ margin: '0 6px 0 0', color: '#ffa39e' }} title="未完成" />;
status = 'error';
icon = errorIcon();
break;
case 2:
ArrItemNumChange = '生产中';
status = 'process';
// icon = <Icon type="clock-circle" theme="filled" style={{ margin: '0 6px 0 0', color: '#69c0ff' }} title="生产中" />;
break;
case 3:
ArrItemNumChange = '暂停';
status = 'wait';
// icon = <Icon type="ause-circle" theme="filled" style={{ margin: '0 6px 0 0', color: '#fff566' }} title="暂停" />;
break;
case 4:
ArrItemNumChange = '取消';
status = 'wait';
break;
case 5:
// eslint-disable-next-line no-const-assign
ArrItemNumChange = '完成';
status = 'finish';
icon = finishIcon();
break;
}
const title = (
<div style={{
width: '100%', display: 'flex', justifyContent: 'space-between', color: '#000',
}}
>
<span style={{ fontSize: '16px', fontWeight: 'normal' }}>{ArrItemStr}</span>
<span style={{ fontSize: '14px', color: '#333333', fontWeight: 'normal' }}>{ArrItemNumChange}</span>
</div>
);
const content = (
<div style={{
fontSize: '1.1em', color: 'rgba(0, 0, 0, 0.85)', paddingBottom: '1px', borderBottom: '1px solid #f5f5f5',
}}
>
<div style={{ width: '100%', display: 'flex', flexWrap: 'nowrap' }}>
<div style={{ flex: '2' }}><span >机台名称：</span>{ArrItemName}</div>
<div style={{ flex: '1' }}><span >班组名称：</span>{ArrItemBanZhu}</div>
</div>
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
<div style={{ flex: '2' }}><span >排单时间：</span>{ArrItemTime}</div>
<div style={{ flex: '1' }}><span >排程数量：</span>{ArrItemPCNum}</div>
</div>
<div style={{ width: '100%', display: 'flex' }}>
<div style={{ flex: '2' }}><span >上报时间：</span></div>
<div style={{ flex: '1' }}><span >上报数量：</span>{ArrItemSBNum}</div>
</div>
</div>
);
return (
<Step title={title} description={content} status={status} icon={icon} />
);
})
}
</Steps> : ''
}
</div>
</div>
);
}
}
}
export default CommobileBase(CommobileListEvent(CommobileStep));