|
|
@@ -2,7 +2,7 @@
|
|
2
|
2
|
* @Author: dayan_hjm
|
|
3
|
3
|
* @Date: 2023-10-25 10:32:44
|
|
4
|
4
|
* @Last Modified by: dayan_hjm
|
|
5
|
|
- * @Last Modified time: 2023-11-05 11:14:56
|
|
|
5
|
+ * @Last Modified time: 2023-11-07 11:26:49
|
|
6
|
6
|
*/
|
|
7
|
7
|
/*
|
|
8
|
8
|
* @Author: dayan_hjm
|
|
|
@@ -15,7 +15,7 @@ import React, { useState, useEffect, Component } from "react";
|
|
15
|
15
|
import styles from "./style.less";
|
|
16
|
16
|
import { useHistory, useLocation, withRouter } from "react-router-dom";
|
|
17
|
17
|
import { observer, observable } from "mobx-react";
|
|
18
|
|
-import { message, Space, Form, Popconfirm, Modal, Carousel, Icon, Button } from "antd";
|
|
|
18
|
+import { message, Space, Form, Popconfirm, Modal, Tooltip, Icon, Button } from "antd";
|
|
19
|
19
|
import mod from './mod';
|
|
20
|
20
|
import { toJS } from "mobx";
|
|
21
|
21
|
import BottomLineForSend from "./component/bottomLineForSend.jsx";
|
|
|
@@ -27,6 +27,7 @@ import MapView from "./component/mapView.jsx";
|
|
27
|
27
|
import {
|
|
28
|
28
|
timeService,
|
|
29
|
29
|
numberService,
|
|
|
30
|
+ updateTimeService
|
|
30
|
31
|
} from "./api";
|
|
31
|
32
|
|
|
32
|
33
|
import 'animate.css';
|
|
|
@@ -38,21 +39,22 @@ class Home extends Component {
|
|
38
|
39
|
super(props, context);
|
|
39
|
40
|
this.store = mod;
|
|
40
|
41
|
this.state = {
|
|
|
42
|
+ updateTime: '',
|
|
41
|
43
|
changGif: false,
|
|
42
|
|
- plannedCompletionData:[
|
|
43
|
|
- {name:'射洪',value:78.1},
|
|
44
|
|
- {name:'广东',value:12},
|
|
45
|
|
- {name:'珠海',value:65},
|
|
46
|
|
- {name:'潮汕',value:45},
|
|
|
44
|
+ plannedCompletionData: [
|
|
|
45
|
+ { name: '射洪', value: 78.1 },
|
|
|
46
|
+ { name: '广东', value: 12 },
|
|
|
47
|
+ { name: '珠海', value: 65 },
|
|
|
48
|
+ { name: '潮汕', value: 45 },
|
|
47
|
49
|
],
|
|
48
|
|
- plannedCompletionNum:1,
|
|
49
|
|
- manHourData:[
|
|
50
|
|
- {name:'射洪',value:0.2},
|
|
51
|
|
- {name:'广东',value:33},
|
|
52
|
|
- {name:'珠海',value:65},
|
|
53
|
|
- {name:'潮汕',value:65},
|
|
|
50
|
+ plannedCompletionNum: 1,
|
|
|
51
|
+ manHourData: [
|
|
|
52
|
+ { name: '射洪', value: 0.2 },
|
|
|
53
|
+ { name: '广东', value: 33 },
|
|
|
54
|
+ { name: '珠海', value: 65 },
|
|
|
55
|
+ { name: '潮汕', value: 65 },
|
|
54
|
56
|
],
|
|
55
|
|
- manHourNum:1,
|
|
|
57
|
+ manHourNum: 1,
|
|
56
|
58
|
};
|
|
57
|
59
|
this.timer = null //定时器,用于检测同步状态
|
|
58
|
60
|
}
|
|
|
@@ -61,6 +63,7 @@ class Home extends Component {
|
|
61
|
63
|
this.fontMsgChange();
|
|
62
|
64
|
this.getUrl();
|
|
63
|
65
|
this.getUrl2()
|
|
|
66
|
+ this.getUrl3();
|
|
64
|
67
|
setTimeout(() => {
|
|
65
|
68
|
this.videoStart();
|
|
66
|
69
|
}, 200)
|
|
|
@@ -125,81 +128,88 @@ class Home extends Component {
|
|
125
|
128
|
|
|
126
|
129
|
}
|
|
127
|
130
|
|
|
128
|
|
- async getUrl(){
|
|
129
|
|
- await timeService().then(({ data=[], resultCode }) => {
|
|
|
131
|
+ async getUrl() {
|
|
|
132
|
+ await timeService().then(({ data = [], resultCode }) => {
|
|
130
|
133
|
if (+resultCode === 0) {
|
|
131
|
|
- let plannedCompletionData = [],manHourData = [];
|
|
132
|
|
- data.map((x,i)=>{
|
|
133
|
|
- if(x.indexName == '产量计划完成率'){
|
|
|
134
|
+ let plannedCompletionData = [], manHourData = [];
|
|
|
135
|
+ data.map((x, i) => {
|
|
|
136
|
+ if (x.indexName == '产量计划完成率') {
|
|
134
|
137
|
plannedCompletionData.push({
|
|
135
|
|
- name:x.factoryName,
|
|
136
|
|
- value:x.indexValue*100,
|
|
|
138
|
+ name: x.factoryName,
|
|
|
139
|
+ value: x.indexValue * 100,
|
|
137
|
140
|
})
|
|
138
|
|
- }else{
|
|
|
141
|
+ } else {
|
|
139
|
142
|
manHourData.push({
|
|
140
|
|
- name:x.factoryName,
|
|
141
|
|
- value:x.indexValue*100,
|
|
|
143
|
+ name: x.factoryName,
|
|
|
144
|
+ value: x.indexValue * 100,
|
|
142
|
145
|
})
|
|
143
|
146
|
}
|
|
144
|
147
|
});
|
|
145
|
|
- this.setState({plannedCompletionData,manHourData,plannedCompletionNum:1,manHourNum:1});
|
|
|
148
|
+ this.setState({ plannedCompletionData, manHourData, plannedCompletionNum: 1, manHourNum: 1 });
|
|
146
|
149
|
}
|
|
147
|
150
|
});
|
|
148
|
151
|
}
|
|
149
|
|
- async getUrl2(){
|
|
150
|
|
- await numberService().then(({ data=[], resultCode }) => {
|
|
|
152
|
+ async getUrl2() {
|
|
|
153
|
+ await numberService().then(({ data = [], resultCode }) => {
|
|
151
|
154
|
if (+resultCode === 0) {
|
|
152
|
|
- let totalValue = 0,yearDecline = 0,yearSend=0,productInventory=0;
|
|
153
|
|
- data.map((x,i)=>{
|
|
154
|
|
- if(x.indexName == '产值'){
|
|
|
155
|
+ let totalValue = 0, yearDecline = 0, yearSend = 0, productInventory = 0;
|
|
|
156
|
+ data.map((x, i) => {
|
|
|
157
|
+ if (x.indexName == '产值') {
|
|
155
|
158
|
totalValue = x.indexValue
|
|
156
|
|
- }else if(x.indexName == '年度产量'){
|
|
|
159
|
+ } else if (x.indexName == '年度产量') {
|
|
157
|
160
|
yearDecline = x.indexValue
|
|
158
|
|
- }else if(x.indexName == '产品库存'){
|
|
|
161
|
+ } else if (x.indexName == '产品库存') {
|
|
159
|
162
|
yearSend = x.indexValue
|
|
160
|
|
- }else if(x.indexName == '年度产量'){
|
|
|
163
|
+ } else if (x.indexName == '年度产量') {
|
|
161
|
164
|
productInventory = x.indexValue
|
|
162
|
165
|
}
|
|
163
|
166
|
});
|
|
164
|
|
- this.store.saveState({totalValue,yearDecline,yearSend,productInventory});
|
|
|
167
|
+ this.store.saveState({ totalValue, yearDecline, yearSend, productInventory });
|
|
165
|
168
|
setTimeout(() => {
|
|
166
|
169
|
$(".shu1").numScroll();
|
|
167
|
170
|
}, 2500)
|
|
168
|
171
|
}
|
|
169
|
172
|
});
|
|
170
|
173
|
}
|
|
|
174
|
+ async getUrl3() {
|
|
|
175
|
+ await updateTimeService().then(({ data = [], resultCode }) => {
|
|
|
176
|
+ if (+resultCode === 0) {
|
|
|
177
|
+ this.setState({ updateTime: data?.[0]?.etlTime || '' })
|
|
|
178
|
+ }
|
|
|
179
|
+ });
|
|
|
180
|
+ }
|
|
171
|
181
|
|
|
172
|
|
- componentDidCatch(){
|
|
|
182
|
+ componentDidCatch() {
|
|
173
|
183
|
clearInterval(this.timer);
|
|
174
|
184
|
this.timer = null;
|
|
175
|
185
|
}
|
|
176
|
186
|
|
|
177
|
|
- fontMsgChange(){
|
|
|
187
|
+ fontMsgChange() {
|
|
178
|
188
|
this.timer = setInterval(() => {
|
|
179
|
|
- const { plannedCompletionData,plannedCompletionNum,manHourData,manHourNum } = this.state;
|
|
|
189
|
+ const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
|
|
180
|
190
|
|
|
181
|
191
|
//产量计划完成率
|
|
182
|
192
|
var p1 = document.getElementById('plannedCompletionBox');
|
|
183
|
|
- const datas_ = plannedCompletionData[plannedCompletionNum-1];
|
|
184
|
|
- var res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_.value + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">'+datas_.name+'</p></div>';
|
|
|
193
|
+ const datas_ = plannedCompletionData[plannedCompletionNum - 1];
|
|
|
194
|
+ var res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_.value + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_.name + '</p></div>';
|
|
185
|
195
|
p1.innerHTML = res;
|
|
186
|
196
|
|
|
187
|
197
|
//百万工时损工率
|
|
188
|
198
|
var p2 = document.getElementById('manHourBox');
|
|
189
|
|
- const datas_2 = manHourData[manHourNum-1];
|
|
190
|
|
- var res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2.value + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">'+datas_2.name+'</p></div>';
|
|
|
199
|
+ const datas_2 = manHourData[manHourNum - 1];
|
|
|
200
|
+ var res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2.value + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">' + datas_2.name + '</p></div>';
|
|
191
|
201
|
p2.innerHTML = res2;
|
|
192
|
202
|
|
|
193
|
|
- const num_ = plannedCompletionNum+1 >= plannedCompletionData.length ? 1 : plannedCompletionNum+1;
|
|
194
|
|
- const num_2 = manHourNum+1 >= manHourData.length ? 1 : manHourNum+1;
|
|
195
|
|
- this.setState({plannedCompletionNum:num_,manHourNum:num_2})
|
|
|
203
|
+ const num_ = plannedCompletionNum + 1 >= plannedCompletionData.length ? 1 : plannedCompletionNum + 1;
|
|
|
204
|
+ const num_2 = manHourNum + 1 >= manHourData.length ? 1 : manHourNum + 1;
|
|
|
205
|
+ this.setState({ plannedCompletionNum: num_, manHourNum: num_2 })
|
|
196
|
206
|
}, 4000)
|
|
197
|
207
|
}
|
|
198
|
208
|
|
|
199
|
209
|
render() {
|
|
200
|
210
|
const stores = this.store.state;
|
|
201
|
|
- const {totalValue,yearDecline,yearSend,productInventory} = this.store.state;
|
|
202
|
|
- let { changGif,plannedCompletionData, } = this.state;
|
|
|
211
|
+ const { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
|
|
|
212
|
+ let { changGif, updateTime, } = this.state;
|
|
203
|
213
|
return (
|
|
204
|
214
|
<div className={"home_box"}>
|
|
205
|
215
|
{/* 视频播放器 */}
|
|
|
@@ -212,7 +222,9 @@ class Home extends Component {
|
|
212
|
222
|
|
|
213
|
223
|
<div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
|
|
214
|
224
|
<div className="topMsg">
|
|
215
|
|
- <p className="topMsg_title">总产值</p>
|
|
|
225
|
+ <Tooltip placement="bottom" title={' ● 从1月至m-1月的产值累计,产值计算方式:销售单价*产量'}>
|
|
|
226
|
+ <p className="topMsg_title">总产值</p>
|
|
|
227
|
+ </Tooltip>
|
|
216
|
228
|
<div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
|
|
217
|
229
|
<span className="topMsg_number" class="shu1">{totalValue}</span><span className="topMsg_number_2">万元</span>
|
|
218
|
230
|
</div>
|
|
|
@@ -221,7 +233,9 @@ class Home extends Component {
|
|
221
|
233
|
|
|
222
|
234
|
<div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
|
|
223
|
235
|
<div className="center_box">
|
|
224
|
|
- <p className="topMsg_title">库存金额</p>
|
|
|
236
|
+ <Tooltip placement="bottom" title={' ● 即为 t-1天的库存金额,百分比即为产品库存金额占总体金额的百分比'}>
|
|
|
237
|
+ <p className="topMsg_title" style={{position: "relative",zIndex: 999999}}>库存金额</p>
|
|
|
238
|
+ </Tooltip>
|
|
225
|
239
|
<div className="topMsg_content">
|
|
226
|
240
|
<LeftMenoyView></LeftMenoyView>
|
|
227
|
241
|
</div>
|
|
|
@@ -230,7 +244,9 @@ class Home extends Component {
|
|
230
|
244
|
|
|
231
|
245
|
<div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
|
|
232
|
246
|
<div className="bottomContent bigDivPd">
|
|
233
|
|
- <p className="topMsg_title">月度产量/发货量</p>
|
|
|
247
|
+ <Tooltip placement="bottom" title={' ● m-6至m月的产量和发货量的对比数据(含外加工)当月的数据计算至t-1天'}>
|
|
|
248
|
+ <p className="topMsg_title">月度产量/发货量</p>
|
|
|
249
|
+ </Tooltip>
|
|
234
|
250
|
<div className="topMsg_content">
|
|
235
|
251
|
<MoodSendView></MoodSendView>
|
|
236
|
252
|
</div>
|
|
|
@@ -248,20 +264,26 @@ class Home extends Component {
|
|
248
|
264
|
<div className="right_li">
|
|
249
|
265
|
<span className="topMsg_number" class="shu1">{yearDecline}</span>
|
|
250
|
266
|
<p className="topMsg_line"></p>
|
|
251
|
|
- <span className="topMsg_tip">年度产量/吨</span>
|
|
|
267
|
+ <Tooltip placement="bottom" title={' ● 即为从1/1至t-1天的产量之和(含外加工)'}>
|
|
|
268
|
+ <span className="topMsg_tip">年度产量/吨</span>
|
|
|
269
|
+ </Tooltip>
|
|
252
|
270
|
</div>
|
|
253
|
271
|
</div>
|
|
254
|
272
|
<div className="center_li">
|
|
255
|
273
|
<div className="right_li">
|
|
256
|
274
|
<span className="topMsg_number" class="shu1">{yearSend}</span>
|
|
257
|
275
|
<p className="topMsg_line"></p>
|
|
258
|
|
- <span className="topMsg_tip">年度发货量/吨</span>
|
|
|
276
|
+ <Tooltip placement="bottom" title={' ● 即为从当年1/1至t-1天的发货量之和(含外加工)'}>
|
|
|
277
|
+ <span className="topMsg_tip">年度发货量/吨</span>
|
|
|
278
|
+ </Tooltip>
|
|
259
|
279
|
</div>
|
|
260
|
280
|
</div>
|
|
261
|
281
|
<div className="center_li">
|
|
262
|
282
|
<span className="topMsg_number" class="shu1">{productInventory}</span>
|
|
263
|
283
|
<p className="topMsg_line"></p>
|
|
264
|
|
- <span className="topMsg_tip">产品库存/吨</span>
|
|
|
284
|
+ <Tooltip placement="bottom" title={' ● t-1天的产品库存数量(含外加工)'}>
|
|
|
285
|
+ <span className="topMsg_tip">产品库存/吨</span>
|
|
|
286
|
+ </Tooltip>
|
|
265
|
287
|
</div>
|
|
266
|
288
|
</div>
|
|
267
|
289
|
</div>
|
|
|
@@ -269,7 +291,9 @@ class Home extends Component {
|
|
269
|
291
|
</div>
|
|
270
|
292
|
<div class="bottomContent3 animate__animated animate__fadeInUp animate__slower">
|
|
271
|
293
|
<div className="bottomContent">
|
|
272
|
|
- <p className="topMsg_title">近30天产量</p>
|
|
|
294
|
+ <Tooltip placement="bottom" title={' ● t-31 至t-1 天的产量(含外加工)'}>
|
|
|
295
|
+ <p className="topMsg_title">近30天产量</p>
|
|
|
296
|
+ </Tooltip>
|
|
273
|
297
|
<div className="topMsg_content">
|
|
274
|
298
|
<BottomLineForSend></BottomLineForSend>
|
|
275
|
299
|
</div>
|
|
|
@@ -282,7 +306,9 @@ class Home extends Component {
|
|
282
|
306
|
<div className="rightContent">
|
|
283
|
307
|
<div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
|
|
284
|
308
|
<div className="topMsg bigDivPd">
|
|
285
|
|
- <p className="topMsg_title">百万工时损工率</p>
|
|
|
309
|
+ <Tooltip placement="bottom" title={' ● 即为m-1月的百万工时损工率'}>
|
|
|
310
|
+ <p className="topMsg_title">百万工时损工率</p>
|
|
|
311
|
+ </Tooltip>
|
|
286
|
312
|
<div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox">
|
|
287
|
313
|
<div className="topMsg_box">
|
|
288
|
314
|
<span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
|
|
|
@@ -294,7 +320,10 @@ class Home extends Component {
|
|
294
|
320
|
|
|
295
|
321
|
<div class="topMsg_22 animate__animated animate__fadeInDown animate__slower">
|
|
296
|
322
|
<div className="topMsg_2">
|
|
297
|
|
- <p className="topMsg_title">一次合格率</p>
|
|
|
323
|
+ <Tooltip placement="bottom" title={' ● m-6至m月\n近六个月的产品一次合格率和目标值合格率;\n当月的数据计算至t-1天'}>
|
|
|
324
|
+ <p className="topMsg_title">一次合格率</p>
|
|
|
325
|
+ </Tooltip>
|
|
|
326
|
+
|
|
298
|
327
|
<div className="topMsg_content">
|
|
299
|
328
|
<OneQualified></OneQualified>
|
|
300
|
329
|
</div>
|
|
|
@@ -303,7 +332,9 @@ class Home extends Component {
|
|
303
|
332
|
|
|
304
|
333
|
<div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
|
|
305
|
334
|
<div className="topMsg_3">
|
|
306
|
|
- <p className="topMsg_title">产量计划完成率</p>
|
|
|
335
|
+ <Tooltip placement="bottom" title={' ● 即为从当年1月至m-1月的累计产量计划完成率;'}>
|
|
|
336
|
+ <p className="topMsg_title">产量计划完成率</p>
|
|
|
337
|
+ </Tooltip>
|
|
307
|
338
|
<div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox">
|
|
308
|
339
|
<div className="topMsg_box">
|
|
309
|
340
|
<span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
|
|
|
@@ -312,10 +343,12 @@ class Home extends Component {
|
|
312
|
343
|
</div>
|
|
313
|
344
|
</div>
|
|
314
|
345
|
</div>
|
|
315
|
|
-
|
|
|
346
|
+
|
|
316
|
347
|
<div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
|
|
317
|
348
|
<div className="bottomContent bigDivPd">
|
|
318
|
|
- <p className="topMsg_title">碳排放</p>
|
|
|
349
|
+ <Tooltip placement="bottom" title={' ● 近三年的碳排放强度、碳排放总量数据'}>
|
|
|
350
|
+ <p className="topMsg_title">碳排放</p>
|
|
|
351
|
+ </Tooltip>
|
|
319
|
352
|
<div className="topMsg_content">
|
|
320
|
353
|
<RightBottomView></RightBottomView>
|
|
321
|
354
|
</div>
|
|
|
@@ -323,9 +356,9 @@ class Home extends Component {
|
|
323
|
356
|
</div>
|
|
324
|
357
|
</div>
|
|
325
|
358
|
<div className="bottom_box">
|
|
326
|
|
- <p style={{color:"#6a818d"}}>
|
|
327
|
|
- 更新时间:2023-10-18
|
|
328
|
|
- </p>
|
|
|
359
|
+ <p style={{ color: "#6a818d" }}>
|
|
|
360
|
+ 更新时间 : {updateTime}
|
|
|
361
|
+ </p>
|
|
329
|
362
|
</div>
|
|
330
|
363
|
|
|
331
|
364
|
</div>
|