133 Commits

Author SHA1 Message Date
helloDy
8da6dc6232 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-07-24 14:51:56 +08:00
helloDy
3e2661581e bug 2024-07-24 14:51:26 +08:00
ec5e47a416 Merge pull request 'projects/mescc/dy' (#104) from projects/mescc/dy into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #104
2024-07-24 13:07:28 +08:00
helloDy
99d60a14bd merge 2024-07-23 18:01:22 +08:00
helloDy
6409d2d348 bug 2024-07-23 17:59:11 +08:00
71f548cb3b Merge pull request 'projects/mescc/zhp' (#103) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #103
2024-07-22 08:36:42 +08:00
‘937886381’
8ecf281f08 修改ui 2024-07-19 16:46:51 +08:00
‘937886381’
fa75a2b89f Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-19 15:30:38 +08:00
‘937886381’
c469ca5ebe 修改ui 2024-07-19 15:30:05 +08:00
9b8c090f7e Merge pull request 'projects/mescc/zhp' (#102) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #102
2024-07-19 13:25:45 +08:00
‘937886381’
cbae9ef922 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-19 13:23:06 +08:00
‘937886381’
c7a6ad2e22 修改ui 2024-07-19 13:22:42 +08:00
e66ef52489 Merge pull request 'projects/mescc/zhp' (#101) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #101
2024-07-19 08:39:41 +08:00
‘937886381’
ebb7f597b9 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-19 08:38:37 +08:00
‘937886381’
7d6a0e228f 修改ui 2024-07-19 08:37:54 +08:00
3bec7e3333 Merge pull request 'projects/mescc/zhp' (#100) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #100
2024-07-17 09:47:25 +08:00
‘937886381’
5444ff92f7 解决冲突 2024-07-17 08:56:03 +08:00
‘937886381’
0713cb1650 修改bug 2024-07-17 08:53:32 +08:00
9da2e20b24 Merge pull request '生产数据echarts图重写' (#99) from projects/mescc/dy into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #99
2024-07-17 08:28:56 +08:00
helloDy
efa5a7c383 生产数据echarts图重写 2024-07-16 18:41:57 +08:00
6ba4c90767 Merge pull request 'projects/mescc/zhp' (#98) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #98
2024-07-12 09:32:46 +08:00
‘937886381’
b45818e2a4 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 09:21:20 +08:00
‘937886381’
00a5a8ed34 修改bug 2024-07-12 09:20:51 +08:00
f51d786fd3 Merge pull request 'projects/mescc/zhp' (#97) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #97
2024-07-12 09:12:23 +08:00
‘937886381’
01464663fa Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 09:10:20 +08:00
‘937886381’
db393bec12 修改bug 2024-07-12 09:09:49 +08:00
59df1c16f6 Merge pull request 'projects/mescc/zhp' (#96) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #96
2024-07-12 09:02:10 +08:00
‘937886381’
2f2d3defd0 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 09:00:25 +08:00
‘937886381’
0b847d2903 修改bug 2024-07-12 08:59:59 +08:00
5b0bb2ccdb Merge pull request 'projects/mescc/zhp' (#95) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #95
2024-07-12 08:54:16 +08:00
‘937886381’
4d4feee160 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 08:52:14 +08:00
‘937886381’
8d370118aa 修改bug 2024-07-12 08:51:45 +08:00
3a5c2eeb2a Merge pull request '修改bug' (#94) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #94
2024-07-12 08:35:13 +08:00
‘937886381’
72f146394b 修改bug 2024-07-12 08:33:10 +08:00
53b10a9847 Merge pull request 'projects/mescc/zhp' (#93) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #93
2024-07-11 15:15:28 +08:00
‘937886381’
82a7a2b8cd 修改bug 2024-07-11 15:01:49 +08:00
‘937886381’
3e327277e9 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-11 14:50:34 +08:00
‘937886381’
06ab8159c5 修改ui 2024-07-11 14:49:48 +08:00
cdf0525fca Merge pull request 'projects/mescc/zhp' (#92) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #92
2024-07-11 14:36:34 +08:00
‘937886381’
0547133e35 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-11 14:34:40 +08:00
‘937886381’
11387724de 修改ui 2024-07-11 14:34:19 +08:00
fe6fb41e29 Merge pull request 'projects/mescc/zhp' (#91) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #91
2024-07-11 08:28:10 +08:00
‘937886381’
074432851c Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-10 15:46:53 +08:00
‘937886381’
8af5158a1b 修改bug 2024-07-10 15:46:21 +08:00
46743fa4ef Merge pull request 'projects/mescc/zhp' (#90) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #90
2024-07-10 15:26:27 +08:00
‘937886381’
91c352ff79 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-10 15:17:44 +08:00
‘937886381’
41748b740d 修改ui 2024-07-10 15:17:16 +08:00
8d524a71a6 Merge pull request 'projects/mescc/zhp' (#89) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #89
2024-07-10 10:01:27 +08:00
‘937886381’
4fa58b62fc 修改bug 2024-07-10 09:59:53 +08:00
‘937886381’
2d67ca4347 修改ui 2024-07-09 17:01:11 +08:00
‘937886381’
91ac125671 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-09 11:11:01 +08:00
‘937886381’
9ea2f2dbe3 修改bug 2024-07-09 11:10:38 +08:00
30e04d641f Merge pull request 'projects/mescc/zhp' (#88) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #88
2024-07-09 10:21:47 +08:00
‘937886381’
6f2f751b0e Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-09 10:20:17 +08:00
‘937886381’
96f7798708 导出 2024-07-09 10:19:54 +08:00
1aa2310adf Merge pull request 'projects/mescc/zhp' (#87) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #87
2024-07-08 16:57:02 +08:00
‘937886381’
63f4fd7cb5 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-08 16:55:21 +08:00
‘937886381’
72855a6f04 工单导出 2024-07-08 16:54:58 +08:00
b3bd3eea22 Merge pull request 'projects/mescc/zhp' (#86) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #86
2024-07-08 13:26:37 +08:00
‘937886381’
2c53c249af Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-08 13:25:52 +08:00
‘937886381’
f2d57a8ebb 修改ui 2024-07-08 13:25:28 +08:00
00ed35ed82 Merge pull request 'projects/mescc/zhp' (#85) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #85
2024-07-05 16:36:30 +08:00
‘937886381’
689de3173f Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-05 16:33:39 +08:00
‘937886381’
865698a9be 修改ui 2024-07-05 16:33:14 +08:00
798ea2d90d Merge pull request 'projects/mescc/zhp' (#84) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #84
2024-07-05 14:08:40 +08:00
‘937886381’
44f3ab3e99 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-05 14:06:39 +08:00
‘937886381’
3e025020ab 修改bug 2024-07-05 14:06:15 +08:00
d62015bfbb Merge pull request 'projects/mescc/zhp' (#83) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #83
2024-07-04 16:41:23 +08:00
‘937886381’
a7e89fe7e8 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-04 09:39:31 +08:00
‘937886381’
6cb91b2c4a 修改bug 2024-07-04 09:39:08 +08:00
165722d67d Merge pull request 'projects/mescc/zhp' (#82) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #82
2024-07-03 16:59:09 +08:00
‘937886381’
486cffd64e 解决冲突 2024-07-03 16:30:14 +08:00
‘937886381’
81c4af0cc8 修改ui 2024-07-03 16:28:41 +08:00
db113cdba9 Merge pull request 'projects/mescc/dy' (#81) from projects/mescc/dy into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #81
2024-07-03 08:52:56 +08:00
helloDy
af52db4a37 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-07-03 08:52:07 +08:00
helloDy
e0ca435014 ui 2024-07-03 08:51:32 +08:00
affe8ec026 Merge pull request 'projects/mescc/zhp' (#80) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #80
2024-07-02 13:42:35 +08:00
‘937886381’
aa6ae82607 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-02 13:16:48 +08:00
‘937886381’
eee121e5ab 修改bui 2024-07-02 13:15:50 +08:00
4332113e3b Merge pull request 'projects/mescc/zhp' (#79) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #79
2024-07-01 20:34:09 +08:00
‘937886381’
53ba98b01a Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-01 15:28:12 +08:00
‘937886381’
23cf4aaa1e 修改bug 2024-07-01 15:27:49 +08:00
81a110ba45 Merge pull request 'projects/mescc/zhp' (#78) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #78
2024-07-01 14:58:13 +08:00
‘937886381’
a249e88530 修改bug 2024-07-01 14:40:09 +08:00
‘937886381’
2128538199 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-01 13:50:06 +08:00
‘937886381’
052d0704fd 修改bug 2024-07-01 13:49:30 +08:00
749b9c6576 Merge pull request 'projects/mescc/zhp' (#77) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #77
2024-07-01 12:10:22 +08:00
‘937886381’
3f942111b0 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-01 11:52:14 +08:00
‘937886381’
716c88dfc4 修改bug 2024-07-01 11:51:44 +08:00
ec0a99b5fb Merge pull request 'projects/mescc/zhp' (#76) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #76
2024-06-28 16:35:08 +08:00
‘937886381’
384527d6db Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-28 16:32:12 +08:00
‘937886381’
26cf9a6ce4 修改 2024-06-28 16:30:52 +08:00
5ba0b62ae6 Merge pull request 'projects/mescc/zhp' (#75) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #75
2024-06-28 16:12:04 +08:00
‘937886381’
5ac5da1bf5 修改 2024-06-28 16:03:42 +08:00
‘937886381’
99f5f978d4 修改 2024-06-28 15:35:28 +08:00
‘937886381’
04af70f416 修改bug 2024-06-28 14:55:12 +08:00
‘937886381’
242e42a56a Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-28 14:42:26 +08:00
‘937886381’
2ab541d4c1 修改bug 2024-06-28 14:41:50 +08:00
95d530e5f1 Merge pull request 'projects/mescc/zhp' (#74) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #74
2024-06-28 13:22:49 +08:00
‘937886381’
83b9867c2a Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-28 13:16:07 +08:00
‘937886381’
7b8f4cac21 修改bug 2024-06-28 13:15:43 +08:00
7886d5ad5a Merge pull request 'projects/mescc/zjl' (#73) from projects/mescc/zjl into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #73
2024-06-28 11:10:40 +08:00
b31b67d2ed Merge branch 'projects/mescc/develop' into projects/mescc/zjl 2024-06-28 11:09:49 +08:00
fc21359f8f 样式 2024-06-28 11:09:02 +08:00
be6d84daf5 Merge pull request 'projects/mescc/zjl' (#72) from projects/mescc/zjl into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #72
2024-06-27 16:57:47 +08:00
daaec2417c Merge branch 'projects/mescc/develop' into projects/mescc/zjl 2024-06-27 16:57:20 +08:00
dcf4f6c392 Merge pull request 'projects/mescc/zhp' (#71) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #71
2024-06-27 16:56:15 +08:00
d27e56cd7f 报表样式 2024-06-27 16:55:47 +08:00
‘937886381’
445ebe339d Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-27 15:47:28 +08:00
‘937886381’
353e3e0f35 修改bug 2024-06-27 15:47:07 +08:00
ea29a33c2a Merge pull request 'projects/mescc/dy' (#70) from projects/mescc/dy into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #70
2024-06-27 14:59:19 +08:00
helloDy
d5673f3c9f 工厂更改 2024-06-27 14:56:47 +08:00
helloDy
3064722052 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-06-27 14:53:37 +08:00
helloDy
dfe52cbac5 工单管理详情ui 2024-06-27 14:53:11 +08:00
68e386333b Merge pull request 'projects/mescc/zhp' (#69) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #69
2024-06-27 14:43:32 +08:00
‘937886381’
96d55b5a57 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-27 13:59:29 +08:00
‘937886381’
fb74340f0f 修改滚动条样式及导出 2024-06-27 13:58:58 +08:00
b1ddfa5c0d Merge pull request 'projects/mescc/zhp' (#68) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #68
2024-06-27 09:29:54 +08:00
‘937886381’
f7b151f9aa Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-27 09:28:27 +08:00
‘937886381’
51938926d3 修改bug 2024-06-27 09:28:04 +08:00
588037c45c Merge pull request 'projects/mescc/zhp' (#67) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #67
2024-06-27 08:38:58 +08:00
‘937886381’
354031f119 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-26 16:56:44 +08:00
‘937886381’
44c5271b5a 修改bug 2024-06-26 16:56:22 +08:00
241810d1c8 Merge pull request 'projects/mescc/zhp' (#66) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #66
2024-06-26 15:53:43 +08:00
‘937886381’
92a297a5e9 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-26 15:19:10 +08:00
‘937886381’
f67e781146 修改bug 2024-06-26 15:18:38 +08:00
e310c5465e Merge pull request 'projects/mescc/zhp' (#65) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #65
2024-06-26 11:04:29 +08:00
‘937886381’
f2cfe94dfc 剞劂冲突 2024-06-26 11:00:48 +08:00
‘937886381’
92c0c33fbd 修改bug 2024-06-26 10:59:23 +08:00
0a391a4de5 Merge pull request 'projects/mescc/dy' (#64) from projects/mescc/dy into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #64
2024-06-25 14:40:13 +08:00
helloDy
8be57f586e Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-06-25 14:36:04 +08:00
helloDy
4e5a5f9ba2 2024-06-25 14:35:23 +08:00
a78c3d79f1 Merge pull request 'projects/mescc/dy' (#63) from projects/mescc/dy into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #63
2024-06-24 17:00:47 +08:00
98 changed files with 5819 additions and 2531 deletions

View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="01数字驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="产量驾驶舱" transform="translate(-1438.000000, -12.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="编组-20" transform="translate(1438.000000, 8.000000)">
<g id="编组" transform="translate(0.000000, 4.000000)">
<rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.1"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -1,11 +1,13 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
item.meta.title
}}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<el-breadcrumb-item v-for=" (item, index) in levelList" :key="item.path">
<span :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .65)')}"
v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
item.meta.title
}}</span>
<a :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .45)')}" v-else
@click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
@@ -18,7 +20,29 @@ export default {
levelList: null
}
},
computed: {
changeColor() {
// console.log(this.$route);
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
}
},
watch: {
changeColor(val) {
if (val == true) {
let item = document.getElementsByClassName('el-breadcrumb__separator')
// let item =document.getElementsByClassName('')
item[0].style.color = rgba(255, 255, 255, 0.45)
item[1].style.color = rgba(255, 255, 255, 0.45)
} else {
let item = document.getElementsByClassName('el-breadcrumb__separator')
item[0].style.color = ''
item[1].style.color = ''
}
},
$route(route) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
@@ -70,13 +94,20 @@ export default {
margin-left: 8px;
.no-redirect {
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, .45);
cursor: text;
}
}
.app-breadcrumb .el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
color: rgba(0, 0, 0, 0.45);
color:rgba(0, 0, 0, 0.65)
}
</style>
<!-- <style lang="scss">
.changeColor {
--theme-color: rgba(255, 255, 255, 0.45);
}
.el-breadcrumb__separator {
color:var(--theme-color);
}
</style> -->

View File

@@ -1,14 +1,16 @@
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-11 13:56:19
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="padding: 0 15px;" @click="toggleClick">
<svg
:class="{'is-active':isActive}"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
<svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' ">
<path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
</template>
@@ -22,6 +24,15 @@ export default {
default: false
}
},
computed: {
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
},
methods: {
toggleClick() {
this.$emit('toggleClick')

View File

@@ -1,5 +1,6 @@
<template>
<div class="navbar">
<div ref="navbar" class="navbar"
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" />
@@ -41,6 +42,13 @@ export default {
'nickname',
'device'
]),
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
setting: {
get() {
return this.$store.state.settings.showSettings
@@ -58,6 +66,23 @@ export default {
}
}
},
watch: {
// changeColor: {
// handler(val){
// if (val == true) {
// let svg = document.getElementsByClassName('hamburger')
// console.log('svg', svg)
// svg[0].style.color = 'rgba(255, 255, 255, 1)'
// svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
// } else {
// let svg = document.getElementsByClassName('hamburger')
// console.log('svg', svg);
// svg[0].setAttribute('fill', '')
// }
// },
// immediate: true, //立即执行
// }
},
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')

View File

@@ -1,25 +1,31 @@
<template>
<div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
<div class="home-icon" v-if='blackTitle'>
<svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" />
<svg-icon :icon-class="changeColor === true ? 'darkHome' : 'home'"
style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" />
</div>
<div class="time-msg">
<div class="line1">{{ timeZone }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
<div class="line2">{{ topDate }}</div>
<div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone
}}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ topDate }}</div>
</div>
<div class="base-msg">
<div class="avatar">
<el-dropdown>
<img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item>
<el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item>
<el-dropdown-item>
<svg-icon icon-class="helpbtn" />帮助文档
</el-dropdown-item>
<el-dropdown-item @click.native="logout">
<svg-icon icon-class="exitbtn" />退出登录
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="use-msg">
<div class="line1">{{ nickname }}</div>
<div class="line2">{{ dept }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div>
</div>
</div>
</div>
@@ -48,6 +54,15 @@ export default {
}
}
},
computed: {
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
},
created() {
// this.getUserMsg()
this.getTime()
@@ -124,4 +139,4 @@ export default {
opacity: 0.65;
}
}
</style>
</style>

View File

@@ -1,3 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-04 10:44:35
* @LastEditors: zhp
* @Description:
-->
<template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
@@ -17,7 +24,9 @@ export default {
computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap
}
},
},
watch: {
},
mounted() {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)

View File

@@ -1,5 +1,7 @@
<template>
<div id="tags-view-container" class="tags-view-container">
<div ref="tagsViewContainer"
:style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container"
class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@@ -36,6 +38,13 @@ export default {
}
},
computed: {
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
visitedViews() {
return this.$store.state.tagsView.visitedViews
},
@@ -44,9 +53,31 @@ export default {
},
theme() {
return this.$store.state.settings.theme;
}
},
},
watch: {
changeColor(val) {
if (val == true) {
// console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
// this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
var tag = document.getElementsByClassName("tags-view-item")
console.log('tag', tag)
for (let i in tag) {
tag[i].classList.add("changeColor")
// tag[i].classList.remove("default")
}
// console.log('this.$refs.scrollContainer', this.$refs.tag);
} else {
// this.$refs.tagsViewContainer.style.backgroundColor = ''
// this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
var tag = document.getElementsByClassName("tags-view-item")
for (let i in tag) {
tag[i].classList.remove("changeColor")
// tag[i].classList.add("default")
}
}
},
$route() {
this.addTags()
this.moveToCurrentTag()
@@ -60,6 +91,7 @@ export default {
}
},
mounted() {
console.log(this.$route, this.changeColor);
this.initTags()
this.addTags()
},
@@ -68,11 +100,23 @@ export default {
return route.path === this.$route.path
},
activeStyle(tag) {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
if (this.changeColor) {
if (!this.isActive(tag)) return {
"background-color": 'rgba(0, 59, 115, 1)',
"border-color": 'rgba(0, 59, 115, 1)',
"color": 'rgba(255, 255, 255, 1)'
};
return {
"background-color": this.theme,
"border-color": this.theme
};
} else {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
}
},
isAffix(tag) {
return tag.meta && tag.meta.affix
@@ -230,6 +274,14 @@ export default {
</script>
<style lang="scss" scoped>
// :root{
// --theme-color: rgba(0, 0, 0, 0.45);
// --theme-background: #f4f4f4ff;
// }
.changeColor{
--theme-background: rgba(0, 59, 115, 1);
--theme-color: rgba(255, 255, 255, 1);
}
.tags-view-container {
height: 42px;
width: 100%;
@@ -245,8 +297,8 @@ export default {
cursor: pointer;
height: 28px;
line-height: 28px;
color: rgba(0, 0, 0, 0.45);
background: #F4F4F4FF;
color: var(--theme-color,rgba(0, 0, 0, 0.45));
background:var(--theme-background,#f4f4f4ff);
padding: 0 8px 0 12px;
font-size: 14px;
letter-spacing: 1px;
@@ -331,7 +383,7 @@ export default {
.el-icon-close {
&:hover {
background-color: #fff;
color: #409eff;
color: rgba(62, 142, 247, 1);
}
}
}

View File

@@ -2,7 +2,8 @@
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer"
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<tags-view v-if="needTagsView" />
@@ -39,6 +40,13 @@ export default {
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
classObj() {
return {
hideSidebar: !this.sidebar.opened,
@@ -51,6 +59,16 @@ export default {
return variables;
}
},
watch: {
// changeColor(val) {
// if (val == true) {
// // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
// this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// } else {
// this.$refs.mainContainer.style.backgroundColor = ''
// }
// },
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

View File

@@ -92,7 +92,7 @@ const actions = {
/** 初始化首页数据 */
async initHome({ commit }) {
const dataArr = await getHomeInfo();
console.log('dataArr', dataArr);
// console.log('dataArr', dataArr);
let preData = dataArr.previousProdOutputOutDO
let preFtoData = dataArr.previousProdOutputFtoDO
// const targetArr = await getHomeInfo();
@@ -127,7 +127,7 @@ const actions = {
// const payload = handler(factoryData)
// commit("SET_COPILOT_INFO", { type, payload });
// } else {
console.log('factoryList',factoryList)
// console.log('factoryList',factoryList)
let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
@@ -289,7 +289,7 @@ function splitCurrentAndPreviousB(factoryListResponse) {
}
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
console.log('工厂',targetListResponse);
// console.log('工厂',preData);
// 初始数据
const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
@@ -343,17 +343,24 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
// componentYieldRate: 0.73,
// },
// ];
if (preData && preData[0] != null) {
if (preData) {
for (const factory of preData) {
const fId = getPreFactoryId(factory);
const fId = getPreFactoryId(factory)
// console.log('factory',factory.previousYearOee);
// chipInvest.previous[fId] = factory.previousYearInputNumber;
// chipOeeRate.current[fId] = factory.oee;
chipOeeRate.previous[fId] = factory.previousYearOee;
if (factory.previousGlassType === 0) {
chipOeeRate.previous[fId] = factory.previousYearOee;
}
// chipOeeRate.previous[fId] = factory.previousYearOee;
// 转化效率
transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
if (factory.previousGlassType === 1) {
transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency;
}
// transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
// 芯片良率 与 标准组件良率
if (![0, 1].includes(factory.glassType)) continue;
const _t = [chipRate, stdRate][factory.glassType]
if (![0, 1].includes(factory.previousGlassType)) continue;
const _t = [chipRate, stdRate][factory.previousGlassType]
// _t.current[fId] = factory.yieldRate ;
_t.previous[fId] = factory.previousYearYieldRate ;
// }
@@ -393,6 +400,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
_t.current[fId] = factory.yieldRate ;
// _t.previous[fId] = factory.previousYearYieldRate ;
}
// console.log('chipOeeRate',stdRate);
// console.log('chipOeeRate',chipOeeRate);
return {
chipOeeRate,
@@ -404,12 +412,12 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
}
function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
console.log('prodOutputFtoListRes',preFtoData);
// console.log('prodOutputFtoListRes',preFtoData);
// 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
if (prodOutputFtoListRes.length !== 0 ) {
for (const factory of prodOutputFtoListRes) {
console.log(factory);
// console.log(factory);
const fId = getFactoryId(factory);
// const preFId = getPreFactoryId(factory);
// if (fId) {
@@ -422,7 +430,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
}
if (preFtoData) {
for (const factory of preFtoData) {
console.log(factory);
// console.log(factory);
const fId = getPreFactoryId(factory);
// const preFId = getPreFactoryId(factory);
// if (fId) {
@@ -455,7 +463,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
if (factoryListResponse) {
for (const factory of factoryListResponse) {
const fId = getFactoryId(factory);
console.log('factory.inputNumber', factory, fId);
// console.log('factory.inputNumber', factory, fId);
if (factory.glassType === 0) {
chipInvest.current[fId] = factory.inputNumber
}
@@ -476,7 +484,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
_t.current[fId] = factory.outputNumber;
}
console.log('chipInvest',ftoInvest);
// console.log('chipInvest',ftoInvest);
return {
chipInvest,
// ftoInvest,

View File

@@ -1,8 +1,16 @@
<!--
<!--
* @Author: zhp
* @Date: 2024-07-10 15:17:28
* @LastEditTime: 2024-07-19 15:18:00
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ChartContainer.vue
author: liubin
date: 2024-04-10 08:54:33
description:
description:
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
-->
@@ -43,7 +51,7 @@ export default {
}
::-webkit-scrollbar {
width: 8px;
width: 80%;
height: 8px;
}

View File

@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="chart" style="height:94%;width:100%"></div>
</chart-container>
@@ -62,7 +62,36 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,24 +102,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -108,7 +137,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -143,7 +172,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -188,19 +217,19 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
this.options.series.map((item) => {
item.barWidth = val ? 18 : 16;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions);
this.canvasReset()
},
@@ -209,14 +238,14 @@ export default {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@@ -225,7 +254,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -249,7 +278,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

@@ -8,9 +8,7 @@
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button
v-if="0"
style="
<button v-if="0" style="
appearance: none;
outline: none;
border: none;
@@ -20,22 +18,11 @@
position: absolute;
top: 8px;
right: 8px;
"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
@@ -44,19 +31,13 @@
<div v-if="side == 'left'" class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
]">
<slot />
</div>
</div>
@@ -92,6 +73,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -141,7 +123,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -161,8 +143,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-07 16:54:54
* @LastEditTime: 2024-07-09 16:55:58
* @LastEditors: zhp
* @Description:
-->
@@ -61,8 +61,8 @@ export default {
.container-icon {
// width: 32px;
// height: 32px;
width: 1.701vw;
height: 1.701vw;
width: 1.4vw;
height: 1.4vw;
background: #ccc2;
}
</style>

View File

@@ -12,7 +12,7 @@
<div class="page-title">{{ companyName }}</div>
<section class="menu2">
<div class="btn-group">
<el-tooltip class="item" effect="dark" content="导出" placement="top">
<el-tooltip v-if="showPeriod" class="item" effect="dark" content="导出" placement="top">
<button type="button" class="export-btn" @click="handleExport" />
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="isFullscreen === false ? '退出全屏' : '全屏'" placement="top">
@@ -48,10 +48,20 @@ export default {
type: String,
},
},
watch: {
period(val) {
if (val != 1) {
this.showPeriod = true
} else {
this.showPeriod = false
}
}
},
data() {
return {
isFullscreen: false,
content:'全屏',
content: '全屏',
showPeriod:false,
dataList: [
{ id: 1, name: "日" },
{ id: 2, name: "周" },
@@ -63,14 +73,20 @@ export default {
computed: {},
methods: {
handleExport() {
exportFactoryDataExcel({
factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
compare: this.than === '同比' ? 1 : 2
}).then(response => {
this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false;
}).catch(() => { });
// if (this.period != 1) {
this.showPeriod = true
exportFactoryDataExcel({
factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
compare: this.than === '同比' ? 1 : 2
}).then(response => {
this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false;
}).catch(() => { });
// } else {
// this.showPeriod = false
// }
},
toggleFullScreen() {
this.isFullscreen = !this.isFullscreen;

View File

@@ -0,0 +1,226 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:07:50
* @LastEditTime: 2024-07-09 15:41:38
* @LastEditors: zhp
* @Description:
-->
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-09 15:06:52
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -0,0 +1,219 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -75,8 +75,8 @@ button {
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
width: 0.7vw;
height: 0.7vw;
top: 0;
background: transparent;
border-style: solid;

View File

@@ -0,0 +1,220 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:15:00
* @LastEditTime: 2024-07-19 16:11:37
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 5%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 10%;
bottom: 0;
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -0,0 +1,220 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-06-04 08:54:10
* @LastEditTime: 2024-07-19 16:08:27
* @LastEditors: zhp
* @Description:
-->
@@ -10,7 +10,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="ftoChart" style="height:94%;width:100%"></div>
</chart-container>
@@ -63,7 +63,36 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -74,24 +103,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -109,7 +138,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -144,7 +173,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -189,19 +218,19 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
this.options.series.map((item) => {
item.barWidth = val ? 18 : 16;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions);
this.canvasReset()
},
@@ -210,14 +239,14 @@ export default {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val[1].data;
this.options.series[1].name = val[1].name;
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@@ -226,7 +255,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -250,7 +279,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.ftoChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

@@ -1,16 +1,14 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-06-05 09:43:52
* @LastEditTime: 2024-07-19 16:11:59
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button
v-if="false"
style="
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
@@ -20,43 +18,26 @@
position: absolute;
top: 8px;
right: 8px;
"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
]">
<slot />
</div>
</div>
@@ -92,6 +73,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -99,23 +81,25 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
right: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
transparent);
z-index: 1;
}
@@ -123,12 +107,12 @@ export default {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 7%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
z-index: 0;
}
@@ -141,7 +125,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -161,8 +145,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -8,9 +8,7 @@
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button
v-if="false"
style="
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
@@ -20,43 +18,26 @@
position: absolute;
top: 8px;
right: 8px;
"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
]">
<slot />
</div>
</div>
@@ -92,6 +73,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -99,13 +82,17 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
@@ -113,7 +100,7 @@ export default {
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
#024798 100%,
transparent
);
z-index: 1;
@@ -123,12 +110,12 @@ export default {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
right: 1%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
@@ -141,7 +128,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -161,8 +148,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-06-05 09:53:49
* @LastEditTime: 2024-07-19 16:14:07
* @LastEditors: zhp
* @Description:
-->
@@ -55,7 +55,7 @@
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
@@ -99,6 +99,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -106,23 +108,25 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
transparent);
z-index: 1;
}
@@ -133,7 +137,7 @@ export default {
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 6%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
@@ -148,7 +152,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -168,8 +172,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -63,44 +63,47 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周目标`, color: "#58adfa" },
{ label: `${year - 1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周目标`, color: "#58adfa" },
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year}年目标`, color: "#58adfa" },
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
}
@@ -141,14 +144,6 @@ export default {
// console.log('chipOee', chipOeeRate)
let dataList = null
switch (this.period) {
case "日":
dataList = [];
dataList[0] = chipOeeRate?.previous;
dataList[1] = chipOeeRate?.current;
case "周":
dataList = [];
dataList[0] = chipOeeRate?.previous;
dataList[1] = chipOeeRate?.current;
default:
dataList = [];
dataList[0] = chipOeeRate?.previous;
@@ -191,6 +186,11 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
@@ -203,6 +203,11 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
@@ -215,6 +220,11 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
@@ -227,6 +237,11 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [

View File

@@ -63,44 +63,47 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周目标`, color: "#58adfa" },
{ label: `${year - 1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周目标`, color: "#58adfa" },
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year}年目标`, color: "#58adfa" },
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
}
@@ -112,17 +115,9 @@ export default {
series() {
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
const transformRate = this.transformRate
// console.log('chipOee', chipOeeRate)
console.log('chipOee', transformRate)
let dataList = null;
switch (this.period) {
case "日":
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current;
case "周":
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current;
default:
dataList = [];
dataList[0] = transformRate.previous;
@@ -182,6 +177,11 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
@@ -194,6 +194,11 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
@@ -206,6 +211,11 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
@@ -218,6 +228,11 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-06-17 09:22:17
* @LastEditTime: 2024-07-19 16:10:10
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container>
@@ -62,7 +62,42 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,23 +108,23 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -107,7 +142,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -142,7 +177,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -222,11 +257,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -236,12 +271,12 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -252,14 +287,14 @@ export default {
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
this.initChart(this.options);
},
},
mounted() {
@@ -273,7 +308,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -296,7 +331,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};
@@ -328,10 +363,10 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
.legend-item:nth-child(1) {
margin-left: 1vw;
}
.legend-item:nth-child(3):before {
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
@@ -340,11 +375,11 @@ export default {
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
@@ -355,15 +390,15 @@ export default {
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):before {
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
}

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-06-17 09:23:39
* @LastEditTime: 2024-07-19 16:10:19
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container>
@@ -62,7 +62,42 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,23 +108,23 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -107,7 +142,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -142,7 +177,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -222,11 +257,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -236,12 +271,12 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -250,15 +285,15 @@ export default {
return;
}
console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options))
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@@ -272,7 +307,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -295,7 +330,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};
@@ -327,43 +362,43 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
.legend-item:nth-child(1) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>

View File

@@ -65,13 +65,13 @@ export default {
valueTuple() {
const getter = this.chipRate;
// console.log(getter)
if (this.period === "日" || this.period === "周") {
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
0,
];
}
// if (this.period === "日" || this.period === "周") {
// return [
// getter.previous[this.factoryId],
// getter.current[this.factoryId],
// 0,
// ];
// }
// [100, 200, 200]
return [
getter.previous[this.factoryId],
@@ -105,21 +105,25 @@ export default {
items = [
{ label: `${yesterday}日良率`, },
{ label: `${year - 1}${yesterday}日良率` },
{ label: `${yesterday}日目标` },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日良率` },
{ label: `${dayBeYes}日良率` },
{ label: `${yesterday}日目标` },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `本周良率`, },
{ label: `${year-1}年本周良率` },
{ label: `${year - 1}年本周良率` },
{ label: `本周目标`, },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周良率`, },
{ label: `上周良率`, },
{ label: `本周目标`, },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
@@ -147,12 +151,13 @@ export default {
: `${month}月良率`,
: `${year}良率`,
}[this.period];
console.log(vt[1]);
console.log(vt[0]);
const t = getOptions({
// single,
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue,
subtitle,
yesterday,
currentName: items[0].label,
preName: items[1].label,
previousSum: vt[0],
@@ -182,22 +187,25 @@ export default {
items = [
{ label: `${year - 1}${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
@@ -310,6 +318,8 @@ export default {
.legend-item {
margin-left: 15px;
display: flex;
font-size: 16px;
// font-weight: 600;
flex-direction: column;
// align-items: center;
align-items: flex-start;
@@ -363,8 +373,6 @@ export default {
background: #003982;
}
.legend-item__value {
font-size: 24px;
font-weight: 600;
}
}
</style>

View File

@@ -47,12 +47,12 @@ export default {
computed: {
dataRate() {
// if (this.current != 0 && this.target != 0) {
console.log( '1111111111', this.current, this.target);
console.log( '1111111111', this.current, this.target,this.previous);
return this.current == 0 && this.target == 0
? 0
: this.current != 0 && this.target != 0
? `${((this.current / this.target) * 100).toFixed(2)}%`
: this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : this.previous >=100 ? 100 + '%' : this.previous + '%';
: this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? parseFloat(this.current).toFixed(2) + '%' : 0 + '%'
// } else if(this.previous != 0) {
// return this.previous + '%'
// }

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-06-14 09:58:01
* @LastEditTime: 2024-07-09 15:04:24
* @LastEditors: zhp
* @Description:
-->
@@ -11,21 +11,21 @@
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
</div>
</div>
<div v-else-if="period == '周'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
</div>
</div>
<div v-else-if="period == '月'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
</div>
</div>
@@ -33,7 +33,7 @@
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
</div>
</div>
@@ -42,10 +42,12 @@
<script>
import CityName from "./CityName.vue";
import ProgressBar from "./ProgressBar.vue";
import preProgressBar from "./preProgressBar.vue";
export default {
name: "StdRateItem",
components: { CityName, ProgressBar },
components: { CityName, ProgressBar, preProgressBar },
props: {
city: {
type: Object,
@@ -148,7 +150,7 @@ export default {
align-items: center;
gap: 8px;
flex: 1 1 auto;
padding: 12px;
padding: 16px;
}
.std-rate-item__value {

View File

@@ -0,0 +1,130 @@
<!--
* @Author: zhp
* @Date: 2024-06-27 09:12:54
* @LastEditTime: 2024-07-09 15:02:46
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="progress-bar" :data-title="title" :data-rate="previous + '%'">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
<script>
export default {
name: "ProgressBar",
components: {},
props: {
value: {
type: Number,
default: 0,
},
target: {
type: Number,
default: 0,
},
previous: {
type: Number,
default: 0,
},
current: {
type: Number,
default: 0,
},
// total: {
// type: Number,
// default: 0,
// },
title: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
dataRate() {
// if (this.current != 0 && this.target != 0) {
// console.log( '1111111111', this.current, this.target,this.previous);
return this.previous >= 100 ? 100 + '%' : parseFloat(this.previous).toFixed(2) + '%';
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
},
},
methods: {},
};
</script>
<style scoped lang="scss">
.progress-bar {
height: 10px;
background-color: #002f6b;
border-radius: 4px;
margin-bottom: 12px;
position: relative;
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
position: absolute;
bottom: -200%;
font-size: 12px;
}
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
position: absolute;
bottom: -200%;
right: 0;
font-size: 12px;
}
&:first-child {
&:after {
color: #11eae3;
}
}
&:nth-child(2) {
&:after {
color: #0e65fd;
}
}
.progress-bar__rate {
position: absolute;
display: inline-block;
height: 100%;
width: 0;
border-radius: 4px;
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
&:first-child {
.progress-bar__rate {
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
}
&:nth-child(2) {
.progress-bar__rate {
background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
}
}
}
</style>

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-06-05 09:45:47
* @LastEditTime: 2024-07-09 15:16:43
* @LastEditors: zhp
* @Description:
-->
@@ -30,8 +30,9 @@
</template>
<script>
import Container from "@/views/copilot/components/rightContainer.vue";
import leftContainer from "@/views/copilot/components/leftContainer.vue";
import Container from "@/views/copilot/components/efficiencyRightContainer.vue";
import leftContainer from "@/views/copilot/components/efficiencyLeftContainer.vue";
import ChipOeeVue from "./components/ChipOee.vue";
import ChipRateVue from "./components/ChipRate.vue";
import StdRateVue from "./components/StdRate.vue";
@@ -102,12 +103,12 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
gap: 20px;
}
.flex {
display: flex;
gap: 16px;
gap: 20px;
flex: 1;
}

View File

@@ -1,4 +1,4 @@
export default ({
export default ({
titleValue,
subtitle,
previousSum,
@@ -6,6 +6,7 @@ export default ({
targetSum,
currentName,
preName,
yesterday,
}) => ({
grid: {
left: 300,
@@ -14,22 +15,27 @@ export default ({
top: 0,
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "item",
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
},
title: {
text: titleValue,
left: "48%",
top: "37%",
top: "middle",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 26,
color: "#fffd",
fontSize: 36,
color: "rgba(223,241,254,.8)",
},
subtext: `\u2002${subtitle}\u2002`,
subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: {
fontSize: 14,
fontSize: 16,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -61,7 +67,15 @@ export default ({
value: currentSum,
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
selected: false,
itemStyle: {
@@ -86,7 +100,15 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -109,6 +131,17 @@ export default ({
{
value: previousSum,
name: preName,
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
selected: false,
itemStyle: {
borderJoin: "round",
@@ -129,10 +162,19 @@ export default ({
},
},
{
value:previousSum == 0
? 1
: 0,
name: "-",
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
},

View File

@@ -55,13 +55,40 @@ export default {
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "7%",
right: "7%",
left: "9%",
right: "3%",
bottom: "15%",
top: "15%",
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = ``;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
axisTick: {
@@ -75,8 +102,8 @@ export default {
axisLabel: {
interval: 0,//设置横坐标为斜
rotate:45,
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
// formatter: function (value) {
// console.log(value);
@@ -95,17 +122,18 @@ export default {
yAxis: {
type: "value",
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 10,
color: "rgba(223,241,254,.8)",
fontSize:16,
},
axisLine: {
show: true,
@@ -173,7 +201,7 @@ export default {
// { offset: 1, color: "#12FFF5" + "00" },
// ]),
// },
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -217,11 +245,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initOptions(this.actualOptions);
// },
// series(val) {
@@ -396,11 +424,11 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.xAxis.data = this.orderXAxis;
actualOptions.series[0].data = this.data;
this.actualOptions = actualOptions;
this.chart.setOption(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
this.options.xAxis.data = this.orderXAxis;
this.options.series[0].data = this.data;
// this.actualOptions = actualOptions;
this.chart.setOption(this.options);
},
},
};

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-06-07 09:29:45
* @LastEditTime: 2024-07-18 16:48:10
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:100%"></div>
</chart-container>
@@ -56,13 +56,70 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "8%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
// extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
// backgroundColor: '#001829',
// borderColor: '#001829',
// // textStyle: {
// // color:'rgba(255, 255, 255, 0.85)'
// // },
// formatter: params => {
// console.log('params', params)
// var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
// for (var i = 0, l = params.length; i < l; i++) {
// res +=
// "<br/>" +
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].seriesName}</span>` +
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value}</span>`;
// }
// return res;
// },
// },
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,24 +130,25 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -108,7 +166,7 @@ export default {
{
name: "FTO", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -143,7 +201,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -175,7 +233,7 @@ export default {
{
name: "", // "2024年目标值",
type: "line",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color:'#f3c000'
@@ -201,12 +259,12 @@ export default {
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
this.options.series.map((item) => {
item.barWidth = val ? 18 : 16;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -216,12 +274,12 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -231,16 +289,17 @@ export default {
}
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions);
// actualOptions.xAxis.data = val
console.log(actualOptions)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
this.initChart(this.options);
},
},
mounted() {
@@ -277,27 +336,28 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
top: 3vh;
right: 13vw;
}
.legend-item {
position: relative;
// font-size: 12px;
font-size: 1.2vw;
margin-right:1.2vw;
color: #DFF1FE;
&::before {
content: "";
display: inline-block;
@@ -347,4 +407,8 @@ export default {
transform: translateY(-50%) translateX(50%);
}
}
.echarts-tooltip-dark {
background: #001829;
}
</style>

View File

@@ -1,8 +1,15 @@
<!--
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-09 16:49:22
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ContainerIcon.vue
author: liubin
date: 2024-04-09 16:41:36
description:
description:
-->
<template>
@@ -49,8 +56,8 @@ export default {
.container-icon {
// width: 32px;
// height: 32px;
width: 1.701vw;
height: 1.701vw;
width: 1.4vw;
height: 1.4vw;
background: #ccc2;
}
</style>

View File

@@ -1,19 +1,19 @@
<template>
<div class="order-container">
<div class="table">
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" />
<dv-scroll-board v-if="showTable" :config="config"
style="width: 100%; height: 100%; color: rgba(255, 255, 255,1);font-size:16," ref="orderScrollBoard" />
</div>
<div class="chart">
<div class="chart-title">
<span class="title">工单情况</span>
<span class="line"></span>
</div>
<div class="button-type" style="margin-left: auto;position: absolute;right: 1%;top: 57%;z-index: 999;">
<div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;">
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" />
</div>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
style="height: 0;flex:1"></barChartBase>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
</div>
</div>
@@ -40,6 +40,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [],
rowNum: 12,
fontSize:16,
waitTime: 3000,
columnWidth: [150],
align: ["left"],
@@ -99,33 +100,33 @@ export default {
let arr = [];
// arr.push(i + 1);
arr.push(
`<span title=${this.prodOrder[i].workOrderNumber || ""}>${
`<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${
this.prodOrder[i].workOrderNumber || ""
}</span>`,
`<span title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
}</span>`,
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
}</span>`,
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`,
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) + "%"
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
: "0%"
}</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) *
? this.prodOrder[i].productionProgress.toFixed(2) *100 *
37.68 *
0.01 +
"," +
(1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 *
37.68
: 0 + "," + 37.68
}"/>
@@ -188,7 +189,7 @@ export default {
height: 1px; // display: inline-block;
border: 1px solid;
// display: inline-block;
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
backdrop-filter: blur(3px);
}
}

View File

@@ -28,8 +28,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -38,8 +38,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -61,8 +61,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -71,8 +71,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -94,8 +94,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -104,8 +104,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -118,7 +118,11 @@
<div class="chart">
<div class="chart-title">
<span class="title">生产情况</span>
<span class="line"></span>
<div class="button-than" style="position: absolute;right: 3%;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
<!-- <span class="line"></span> -->
</div>
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
style="height: 0;flex:1">
@@ -129,10 +133,12 @@
<script>
import { number } from 'echarts';
import barChartBase from './ChipOee'
import CopilotButton from "./button.vue"
export default {
name: "ProdMonitor",
components: {
barChartBase,
CopilotButton
},
data() {
return {
@@ -153,6 +159,9 @@ export default {
type: Number,
default:0
},
than: {
type: String,
},
than: {
type: String,
default: '同比',
@@ -181,10 +190,14 @@ export default {
},
mounted() {
this.makeData();
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
})
},
methods: {
makeData() {
console.log('msgObj', this.msgObj);
this.msgObj.chip = {};
this.msgObj.stand = {};
this.msgObj.bipv = {};
@@ -233,19 +246,19 @@ export default {
// width: 5vw;
color: #FFFFFF;
line-height: 24px;
text-align: left;
// text-align: left;
font-style: normal;
display: inline-block;
}
.line{
flex: 1;
// width: 80%;
height: 1px; // display: inline-block;
border: 1px solid;
// display: inline-block;
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
backdrop-filter: blur(3px);
}
// .line{
// flex: 1;
// // width: 80%;
// height: 1px; // display: inline-block;
// border: 1px solid;
// // display: inline-block;
// border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
// backdrop-filter: blur(3px);
// }
}
}
.data{

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-06 14:22:56
* @LastEditTime: 2024-06-07 10:53:39
* @LastEditTime: 2024-07-02 13:54:08
* @LastEditors: zhp
* @Description:
-->
@@ -62,7 +62,7 @@ button {
font-size: 16px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
/* letter-spacing: 5px; */
text-align: center;
font-style: normal;
letter-spacing: 10px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-07 08:37:17
* @LastEditTime: 2024-06-07 11:04:41
* @LastEditTime: 2024-07-18 16:16:24
* @LastEditors: zhp
* @Description:
-->
@@ -59,7 +59,7 @@ button {
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
@@ -91,7 +91,7 @@ button {
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-06-05 09:38:23
* @LastEditTime: 2024-07-19 16:16:02
* @LastEditors: zhp
* @Description:
-->
@@ -15,9 +15,7 @@
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button
v-if="false"
style="
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
@@ -27,43 +25,26 @@
position: absolute;
top: 8px;
right: 8px;
"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
]">
<slot />
</div>
</div>
@@ -99,6 +80,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -106,21 +89,23 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 96%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
right: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
#024798 100%,
transparent
);
z-index: 1;
@@ -130,12 +115,12 @@ export default {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 80%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
right: 4%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%);
z-index: 0;
}
@@ -148,7 +133,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -168,8 +153,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -33,12 +33,8 @@
<!-- content -->
<div class="container-head" ref="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon :icon="icon"></Icon>
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
<div class="button-than" style="margin-left: auto;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
@@ -50,12 +46,10 @@
<script>
import ContainerIconVue from "./ContainerIcon.vue"
import CopilotButton from "./button.vue"
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
CopilotButton
},
props: {
side: {
@@ -66,9 +60,6 @@ export default {
type: String,
default: "cube",
},
than: {
type: String,
},
title: {
type: String,
default: "Default Title",
@@ -80,43 +71,38 @@ export default {
},
computed: {},
mounted() {
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
})
},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
height: 96%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
transparent);
z-index: 1;
}
@@ -124,12 +110,12 @@ export default {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 80%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 3%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%);
z-index: 0;
}
@@ -142,7 +128,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -162,8 +148,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -4,9 +4,9 @@
@update:than="updateThan" @update:period="updatePeriod" />
<div class="factory-section">
<section class="top flex">
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than">
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
<db-container title="生产监控" icon="prod">
<prod-monitor @update:than="updateThan" :companyId="companyId" :factoryData="factoryData" :than="than"
:period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container>
<left-container title="工单监控" icon="order">
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
@@ -88,7 +88,7 @@ export default {
updateThan(val) {
console.log(val);
this.than = val;
// this.getMes();
this.getMes()
},
updatePeriod(val) {
this.period = val;
@@ -134,11 +134,11 @@ export default {
if (preData && preData[0] != null) {
for (const factory of preData) {
if (factory.previousGlassType === 0) {
preDataDetail[1] = factory.previousYearOutputNumber
preDataDetail[1] = factory.previousOutputNumber
} else if (factory.previousGlassType === 1) {
preDataDetail[2] = factory.previousYearOutputNumber
} else if (factory.previousYearOutputNumber === 2) {
currentDataDetail[3] = factory.outputNumber
preDataDetail[2] = factory.previousOutputNumber
} else if (factory.previousGlassType === 2) {
preDataDetail[3] = factory.previousOutputNumber
}
}
}

View File

@@ -4,9 +4,9 @@
@update:period="updatePeriod" />
<div class="factory-section">
<section class="top flex">
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than">
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
<db-container title="生产监控" icon="prod">
<prod-monitor @update:than="updateThan" :than="than" :companyId="companyId" :factoryData="factoryData"
:period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container>
<left-container title="工单监控" icon="order">
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
@@ -132,16 +132,17 @@ export default {
// }
}
}
if (preData && preData[0] != null) {
if (preData) {
for (const factory of preData) {
if (factory.previousGlassType === 0) {
preDataDetail[1] = factory.previousYearOutputNumber
console.log('factory', factory)
preDataDetail[1] = factory.previousOutputNumber
} else if (factory.previousGlassType === 1) {
preDataDetail[2] = factory.previousYearOutputNumber
preDataDetail[2] = factory.previousOutputNumber
}
}
}
if (targetListResponse && targetListResponse[0] != null) {
if (targetListResponse) {
for (const factory of targetListResponse) {
targetDataDetail[0] = factory.ftoInput
// if (factory.previousGlassType === 0) {
@@ -153,7 +154,7 @@ export default {
}
}
// console.log('ftoInvest',ftoInvest)
if (factoryListResponse && factoryListResponse[0] != null) {
if (factoryListResponse) {
for (const factory of factoryListResponse) {
// targetDataDetail[0] = factory.ftoInput
if (factory.glassType === 0) {
@@ -163,6 +164,7 @@ export default {
}
}
}
console.log(' this.factoryData.preDataDetail', preDataDetail);
this.factoryData.preDataDetail = preDataDetail
this.factoryData.currentDataDetail = currentDataDetail
this.factoryData.targetDataDetail = targetDataDetail

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-06-17 16:42:12
* @LastEditTime: 2024-07-19 16:05:46
* @LastEditors: zhp
* @Description:
-->
@@ -165,10 +165,15 @@ export default {
subtitle =
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log('titleValue', items)
let titleSize = fontSize(0.35)
let subtitleSize = fontSize(0.14)
// console.log(this.valueTuple[2]- this.valueTuple[1])
return getOptions({
titleValue,
subtitle,
titleSize,
subtitleSize,
currentName: items[0].label,
preName: items[1].label,
previousSum: this.valueTuple[0],
@@ -219,7 +224,12 @@ export default {
// },
},
};
function fontSize(res){
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple);
let items = [];
@@ -296,8 +306,9 @@ function calculateItems(period, valueTuple, than) {
</script>
<style scoped>
.double-ring-chart {
height: 100%;
height: 98%;
display: flex;
flex-direction: column;
}
@@ -312,7 +323,7 @@ function calculateItems(period, valueTuple, than) {
}
.double-ring-chart__legend {
padding: 12px;
/* padding: 12px; */
color: #fff;
display: flex;
justify-content: center;
@@ -321,6 +332,7 @@ function calculateItems(period, valueTuple, than) {
.legend-item {
display: flex;
/* font-size:16px; */
flex-direction: column;
align-items: flex-start;
}

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 16:00:50
* @LastEditTime: 2024-06-03 16:26:03
* @LastEditTime: 2024-07-09 09:09:07
* @LastEditors: zhp
* @Description:
-->
@@ -42,10 +42,11 @@ export default {
return {
factoryId: 4, // 默认成都
cityOptions: [
"瑞昌",
// "成都",
"邯郸",
// "株洲",
"瑞昌",
// "佳木斯",
// "凯盛光伏",
// "蚌埠兴科",
@@ -63,7 +64,7 @@ export default {
<style scoped lang="scss">
.double-ring-wrapper {
height: 100%;
padding: 12px 24px;
padding: 0px 24px;
display: flex;
gap: 12px;
flex-direction: column;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-24 15:15:00
* @LastEditTime: 2024-05-31 16:16:16
* @LastEditTime: 2024-07-09 09:27:12
* @LastEditors: zhp
* @Description:
-->
@@ -74,7 +74,7 @@ export default {
<style scoped lang="scss">
.double-ring-wrapper {
height: 100%;
padding: 12px 24px;
padding: 0px 24px;
display: flex;
gap: 12px;
flex-direction: column;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-10 11:10:54
* @LastEditTime: 2024-06-05 09:49:46
* @LastEditTime: 2024-07-09 15:09:27
* @LastEditors: zhp
* @Description:
-->
@@ -20,12 +20,12 @@
</left-container>
</section>
<section class="bottom flex">
<right-container class="fto-involve" title="FTO投入">
<bottom-right-container class="fto-involve" title="FTO投入">
<fto-invest :period="period" :than="than" />
</right-container>
<left-container class="chip-involve" title="芯片投入" icon="chip">
</bottom-right-container>
<bottom-left-container class="chip-involve" title="芯片投入" icon="chip">
<chip-invest :period="period" :than="than" />
</left-container>
</bottom-left-container>
</section>
</div>
</template>
@@ -34,7 +34,8 @@
import twoContainer from "@/views/copilot/components/twoContainer.vue";
import leftContainer from "@/views/copilot/components/leftContainer.vue";
import rightContainer from "@/views/copilot/components/rightContainer.vue";
import bottomRightContainer from "@/views/copilot/components/bottomRightContainer.vue";
import bottomLeftContainer from "@/views/copilot/components/bottomLeftContainer.vue";
import StdOutput from "./components/StdOutput.vue";
import ChipOutput from "./components/ChipOutput.vue";
import FtoInvest from "./components/FtoInvest.vue";
@@ -45,6 +46,8 @@ export default {
name: "YieldCopilot",
components: {
DbContainer: twoContainer,
bottomRightContainer,
bottomLeftContainer,
leftContainer,
rightContainer,
StdOutput,

View File

@@ -3,6 +3,8 @@ export default ({
subtitle,
previousSum,
currentSum,
subtitleSize,
titleSize,
targetSum,
currentName,
preName,
@@ -14,22 +16,29 @@ export default ({
top: 0,
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "item",
// extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
// backgroundColor: '#001829',
// borderColor: '#001829',
},
title: {
text: titleValue,
left: "44%",
top: "37%",
left: "48.5%",
top: "middle",
itemGap: 12,
textVerticalAlign:'auto',
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 20,
color: "#fffd",
fontWeight: 400,
fontSize: titleSize,
color: "rgba(223,241,254,.8)",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontSize: subtitleSize,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -38,8 +47,8 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["80%", "90%"],
center: ["45%", "52%"],
radius: ["74%", "86%"],
center: ["50%", "48%"],
emptyCircleStyle: {
color: "#042c5f33",
},
@@ -47,8 +56,8 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["80%", "90%"],
center: ["45%", "52%"],
radius: ["74%", "86%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -61,8 +70,16 @@ export default ({
value: currentSum,
name: currentName,
selected: false,
tooltip: {
formatter: `${currentName} : ${currentSum}`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: {
borderJoin: "round",
@@ -85,8 +102,16 @@ export default ({
{
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -96,8 +121,8 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["70%", "80%"],
center: ["45%", "52%"],
radius: ["61%", "74%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -111,7 +136,15 @@ export default ({
name: preName,
selected: false,
tooltip: {
formatter: `${preName} : ${previousSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: {
borderJoin: "round",
@@ -135,8 +168,16 @@ export default ({
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-14 09:03:26
* @LastEditTime: 2024-07-18 16:37:41
* @LastEditors: zhp
* @Description:
-->
@@ -53,7 +53,17 @@ export default {
top: 0,
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
},
title: {
text: "0%",
left: "48%",
@@ -66,7 +76,7 @@ export default {
},
subtext: `\u2002${year}年累计产出\u2002`,
subtextStyle: {
fontSize: 12,
fontSize: 15,
fontWeight: 100,
color: "#fffd",
align: "right",
@@ -102,7 +112,6 @@ export default {
name: `${year}累计产出`,
selected: false,
tooltip: {
formatter: null,
},
itemStyle: {
borderJoin: "round",
@@ -126,7 +135,6 @@ export default {
value: 0,
name: `${year}目标`,
tooltip: {
formatter: null,
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -151,7 +159,17 @@ export default {
name: `${year - 1}累计产出`,
selected: false,
tooltip: {
formatter: null,
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
},
},
itemStyle: {
borderJoin: "round",
@@ -175,7 +193,15 @@ export default {
value: 0,
name: `${year - 1}累计产出`,
tooltip: {
formatter:null,
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -223,40 +249,80 @@ export default {
actualOptions() {
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options));
const options = this.options
// console.log('options', options);
// 标题
if (!this.output.target) options.title.text = "0%";
else
options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
if (!this.output.target && !this.output.current) options.title.text = "0%";
else if (!this.output.target && this.output.current) options.title.text = "100%";
else options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
// 外环
if (
this.output.current == this.output.target &&
this.output.current == 0
) {
options.series[1].data[0].value = 0;
options.series[1].data[1].value = 1;
options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
this.options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1;
this.options.series[1].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
this.options.series[1].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0 }</span>
</div>`;
} else {
options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value =
this.options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value =
this.output.target - this.output.current;
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
this.options.series[1].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
</div>`;
this.options.series[1].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
</div>`;
}
// 内环
if (this.output.previous == 0) {
options.series[2].data[0].value = 0;
options.series[2].data[1].value = 1;
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
this.options.series[2].data[0].value = 0;
this.options.series[2].data[1].value = 1;
this.options.series[2].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
this.options.series[2].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
} else {
options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0;
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
this.options.series[2].data[0].value = this.output.previous;
this.options.series[2].data[1].value = 0;
this.options.series[2].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
</div>`;
this.options.series[2].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> +
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
</div>`;
}
console.log('options', options);
return options;
@@ -274,6 +340,9 @@ export default {
factory(val) {
this.initOptions(this.actualOptions);
},
actualOptions() {
this.initOptions(this.actualOptions);
}
},
mounted() {
console.log("mounted", this.actualOptions);

View File

@@ -1,16 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-31 16:11:06
* @LastEditTime: 2024-06-27 16:30:58
* @LastEditors: zhp
* @Description:
-->
<!--
filename: fto.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<left-chart-base

View File

@@ -8,19 +8,10 @@
<template>
<chart-container class="left-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
</chart-container>
</template>
@@ -65,8 +56,40 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value: 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
type:'category',
axisTick: {
show: false,
},
@@ -76,24 +99,27 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
textStyle: {
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
// position:'left',
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align:'right'
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -111,14 +137,14 @@ export default {
{
name: '', // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
label: {
show: true, //开启显示
align: 'right', //在上方显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#DFF1FE',
fontSize: 12
color: "rgba(223,241,254,.8)",
fontSize: 14
}
},
itemStyle: {
@@ -155,14 +181,14 @@ export default {
{
name: '', // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
label: {
show: true, //开启显示
align: 'left', //在上方显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#DFF1FE',
fontSize: 12
color: "rgba(223,241,254,.8)",
fontSize: 16
}
},
itemStyle: {
@@ -201,9 +227,9 @@ export default {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
this.initOptions(this.actualOptions);
},
series(val) {
@@ -234,9 +260,25 @@ export default {
</script>
<style scoped lang="scss">
.left-chart-base {
// position: relative;
.echarts-tooltip{
background: #001829;
// background-color: ;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);
opacity: 0.6;
border-radius: 4px;
.content {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
backdrop-filter: blur(6px);
// transition: .3s transform;
}
}
.left-chart-base {
.legend {
position: absolute;
top: 5.2vh;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-21 15:02:27
* @LastEditTime: 2024-07-19 15:25:37
* @LastEditors: zhp
* @Description:
-->
@@ -15,19 +15,10 @@
<template>
<chart-container class="right-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
</chart-container>
</template>
@@ -65,13 +56,50 @@ export default {
isFullscreen: false,
options: {
grid: {
left: "5%",
left: "6%",
right: "4%",
bottom: "0",
top: "18%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
confine:true,
backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
}` +
`<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -82,24 +110,25 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
// position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: 'right'
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -152,7 +181,7 @@ export default {
{
name: "", // "2023年",
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -187,7 +216,7 @@ export default {
{
name: "", // "2024年",
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -227,9 +256,9 @@ export default {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initOptions(this.actualOptions);
},
series(val) {
@@ -292,13 +321,13 @@ export default {
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
@@ -308,11 +337,11 @@ export default {
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}

View File

@@ -83,7 +83,7 @@ export default {
// backdrop-filter: blur(2px);
// border-radius: 4px;
transform: translate(-50%, -100%);
box-shadow: inset 0 0 12px 2px #fff3;
// box-shadow: inset 0 0 12px 2px #fff3;
background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%;
// background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7) 10%, #021842 30%);
// 在这里设置一个总的字体大小 不失为一个好的选择
@@ -92,11 +92,12 @@ export default {
}
h2 {
padding: 0 1vw;
// padding: 0 1vw;
margin: 6px 0;
font-family: 优设标题黑;
color: #fff;
letter-spacing:5px;
letter-spacing:4px;
text-align: left;
// font-size: 24px;
font-size: 1.276em;
}
@@ -115,7 +116,7 @@ ul {
}
li {
font-size: 0.851em;
font-size: 0.77em;
}
.corner {

View File

@@ -1,8 +1,8 @@
<!--
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
description:
-->
<template>
@@ -38,7 +38,7 @@
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
@@ -82,6 +82,7 @@ export default {
</script>
<style scoped lang="scss">
.dashboard-container {
height: 0;
flex: 1;
@@ -90,29 +91,29 @@ export default {
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
// &::after {
// content: "";
// position: absolute;
// display: inline-block;
// width: 60%;
// height: 0.31415vh;
// border-radius: 2px;
// left: 8%;
// bottom: 0;
// background: linear-gradient(to right, #024798, transparent);
// z-index: 0;
// }
&::after {
content: "";
position: absolute;
display: inline-block;
width: 85%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to left, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
height:4vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -132,8 +133,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -1,8 +1,8 @@
<!--
<!--
filename: ContainerIcon.vue
author: liubin
date: 2024-04-09 16:41:36
description:
description:
-->
<template>
@@ -51,8 +51,8 @@ export default {
.container-icon {
// width: 32px;
// height: 32px;
width: 1.701vw;
height: 1.701vw;
width: 1.4vw;
height: 1.4vw;
background: #ccc2;
}
</style>

View File

@@ -153,7 +153,7 @@ h1 {
.side {
position: absolute;
font-size: 1.18vw;
font-size: 1vw;
// line-height: 24px;
line-height: 1.277vw;
letter-spacing: 2px;

View File

@@ -0,0 +1,204 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 13:51:30
* @LastEditTime: 2024-07-19 10:43:18
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="dashboard-container">
<!-- refresh btn -->
<button
v-if="0"
style="appearance: none; outline: none; border: none; background: none; color:#fff; cursor: pointer; position: absolute; top: 8px; right: 8px"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div v-if="side == 'left'" class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.dashboard-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
&::after {
content: "";
position: absolute;
display: inline-block;
width: 85%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height:4vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -17,12 +17,12 @@
<db-header class="db-header"></db-header>
<div class="db-body">
<div class="db-left">
<db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
<left-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
<fto-chart :key="ftoKey" />
</db-container>
<db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
</left-container>
<left-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
<chip-invest-chart :key="chipInvestKey" />
</db-container>
</left-container>
</div>
<div class="db-right">
<db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
@@ -53,6 +53,7 @@ import store from "@/store";
import DashboardHeader from "./dashboard/components/Header.vue";
import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
import Container from "./dashboard/components/Container.vue";
import leftContainer from "./dashboard/components/leftContainer.vue";
import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
import BipvChart from "./dashboard/charts/Bipv.vue";
@@ -69,11 +70,11 @@ const LOCATIONS = [
// 蚌埠2
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
// 江西 瑞昌
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
{ x: 60, y: 58, tx: 68, ty: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, path: 'factoryData/factory-data' },
// 湖南 株洲
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
// 邯郸
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
{ x: 58, y: 45, tx: 48.5, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
];
// rcLine.style.left = `66.8%`;
// rcLine.style.top = `52%`;
@@ -84,6 +85,7 @@ export default {
name: "Index",
components: {
CompanyInfo,
leftContainer,
ksCompanyInfo: CompanyInfo,
hdCompanyInfo: CompanyInfo,
bbCompanyInfo: CompanyInfo,
@@ -340,7 +342,7 @@ export default {
.db-left,
.db-right {
// width: 420px;
width: 24vw;
width: 24.5vw;
padding: 20px;
display: flex;
flex-direction: column;

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-24 15:15:02
* @LastEditors: DY
* @LastEditTime: 2024-07-05 13:28:38
* @LastEditors: zhp
* @Description:
-->
<template>
@@ -45,7 +45,7 @@
</el-col>
<el-col :span="6">
<p class="title">芯片总功率(MW)</p>
<p class="text">{{ dataForm.chipTotalPower }}</p>
<p class="text">{{ dataForm.chipTotalPower.toFixed(2) }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
@@ -58,7 +58,7 @@
<p class="text">{{ dataForm.chipCssMarriageRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片段OEE</p>
<p class="title">芯片段OEE(%)</p>
<p class="text">{{ dataForm.chipOee }}</p>
</el-col>
<el-col :span="6">
@@ -73,7 +73,7 @@
</el-col>
<el-col :span="6">
<p class="title">芯片产能利用率(%)</p>
<p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
<p class="text">{{ parseFloat(dataForm.chipCapacityUtilizationRate.toFixed(2)) }}</p>
</el-col>
</el-row>
</div>
@@ -102,11 +102,11 @@
<el-row :gutter="24">
<el-col :span="6">
<p class="title">标准组件总功率(MW)</p>
<p class="text">{{ dataForm.componentTotalPower }}</p>
<p class="text">{{ parseFloat(dataForm.componentTotalPower.toFixed(2)) }}</p>
</el-col>
<el-col :span="6">
<p class="title">封装产能利用率(%)</p>
<p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
<p class="text">{{ parseFloat(dataForm.componentCapacityUtilizationRate.toFixed(2)) }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件人均产量(/)</p>
@@ -116,10 +116,16 @@
<p class="title">标准组件平均功率(W)</p>
<p class="text">{{ dataForm.componentAveragePower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">标准组件转化效率</p>
<p class="text">{{ dataForm.componentTransRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片投入</p>
<p class="text">{{ dataForm.chipInput }}</p>
</el-col>
</el-row>
</div>
<div v-if="glass === 2">

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-24 14:38:17
* @LastEditTime: 2024-07-24 14:48:25
* @LastEditors: DY
* @Description:
-->
@@ -10,22 +10,22 @@
<div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type">
<el-select v-model="listQuery.type" size="small" clearable placeholder="请选择">
<el-select @change="changType" v-model="listQuery.type" size="small" clearable placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ firstDayOfWeek: 1 }">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
@@ -39,7 +39,7 @@
</el-form-item>
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
placeholder="开始时间">
placeholder="开始时间" @change="getYear">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
@@ -115,7 +115,7 @@ import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata'
import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants";
import { factoryList, factoryArray, factoryListabbr } from "@/utils/constants";
export default {
components: { lineChart, ButtonNav, AddOrUpdate },
@@ -124,7 +124,7 @@ export default {
return {
factoryList,
factoryArray,
factoryArray1,
factoryListabbr,
listQuery: {
pageSize: 20,
pageNo: 1,
@@ -210,7 +210,7 @@ export default {
{
prop: 'factory',
label: '工厂名称',
filter: (val) => factoryList[val],
filter: (val) => factoryList[val],
minWidth: 180,
showOverflowtooltip: true
},
@@ -234,7 +234,7 @@ export default {
{
prop: 'goodRatio',
label: '良品率%',
filter: (val) => val + '%'
filter: (val) => val.toFixed(2) + '%'
},
],
tableData: [],
@@ -244,7 +244,7 @@ export default {
colorList: ['#7164FF', '#63BDFF', '#8EF0AB', '#FFCE6A']
// proLineList: [],
// all: {}
};
};
},
// computed: {
// weekNum() {
@@ -253,7 +253,7 @@ export default {
// },
created() {
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
@@ -261,6 +261,13 @@ export default {
mounted() {
},
methods: {
changType() {
this.listQuery.endDate = null
this.listQuery.startDate = null
this.listQuery.reportTime = null
this.listQuery.start = null
this.listQuery.end = null
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
this.addOrEditTitle = "详情";
@@ -277,20 +284,14 @@ export default {
this.listQuery.reportTime = []
this.listQuery.start = undefined
this.listQuery.end = undefined
// console.log();
} else {
this.listQuery.startDate = this.listQuery.start
this.listQuery.endDate = this.listQuery.end
}
if (!this.listQuery.start && !this.listQuery.end) {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
}
// console.log(e);
},
onValueChange(picker, k) { // 选中近k周后触发的操作
if (this.listQuery.start && this.listQuery.end) {
console.log(this.listQuery.reportTime)
// console.log(this.listQuery.start, this.listQuery.end - this.listQuery.start)
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
@@ -304,11 +305,15 @@ export default {
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
}
}
if (!this.listQuery.start && !this.listQuery.end) {
console.log(this.listQuery.startDate, this.listQuery.endDate)
} else {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
}
// if (!this.listQuery.start && !this.listQuery.end) {
// this.listQuery.startDate = undefined
// this.listQuery.endDate = undefined
// }
},
changeDayTime() {
if (this.listQuery.reportTime) {
@@ -354,7 +359,7 @@ export default {
this.$message.warning('请选择时间维度!')
return
}
if (this.listQuery.startDate === undefined) {
if (!this.listQuery.startDate || !this.listQuery.endDate) {
this.$message.warning('请选择时间范围!')
} else {
await getProduceDataPage(this.listQuery).then(res => {
@@ -364,7 +369,6 @@ export default {
this.listQuery.total = res.data.total
}
})
// 图表
await getproddata(this.listQuery).then(resp => {
if (resp.data?.length > 0) {
@@ -381,95 +385,71 @@ export default {
this.seriesList = []
// x轴数据
xAxisData = Object.keys(data)
// y轴数据
this.factoryArray.forEach(fac => {
let i = 0
while ( i < 3) {
// 下标
const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
// let oneChart = {}
xAxisData.forEach((x, index) => {
if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
let series = {
name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
type: 'bar',
stack: String(fac.id),
data: Array(xAxisData.length).fill(0),
barWidth: 20,
itemStyle: {
color: this.colorList[i]
},
label: {
show: i === 2 ? true : false,
position: 'top',
formatter(params) {
return fac.name.substring(0, 2)
}
}
}
dataList.forEach(item => {
if (fac.id === item.factory && item.datestr === x) {
series.data[index] = item[index1]
}
})
this.seriesList.push(series)
} else {
this.listQuery.glass.forEach(gl => {
if (gl === i) {
let series = {
name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
type: 'bar',
stack: String(fac.id),
data: Array(xAxisData.length).fill(0),
barWidth: 20,
itemStyle: {
color: this.colorList[i]
},
label: {
show: true,
position: 'top',
formatter(params) {
if (params.value === 0) {
return ''
} else {
// return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
return fac.name.substring(0, 2)
}
}
}
}
dataList.forEach(item => {
if (fac.id === item.factory && item.datestr === x) {
series.data[index] = item[index1]
}
})
this.seriesList.push(series)
}
})
}
// let series = {
// name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
// type: 'bar',
// stack: String(fac.id),
// data: Array(xAxisData.length).fill(0),
// barWidth: 20,
// itemStyle: {
// color: this.colorList[i]
// }
// }
// dataList.forEach(item => {
// if (fac.id === item.factory && item.datestr === x) {
// series.data[index] = item[index1]
// }
// })
// this.seriesList.push(series)
})
i ++
}
// 构造series
// 玻璃类型 ['chipYield', 'componentYield', 'bipvProductOutput']
const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass
// 工厂名称 this.factoryListabbr
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
const seriesArray = []
factoryNameArray.forEach((fac, facIndex) => {
typeArray.forEach((type, typeIndex) => {
const series = {
data: Array(xAxisData.length).fill(0),
type: 'bar',
stack: String(fac),
barWidth: 16,
itemStyle: {
color: this.colorList[type]
},
name: this.factoryListabbr[fac] + '-' + type
}
seriesArray.push(series)
})
})
console.log('你好', this.seriesList)
this.$refs.lineChart.initChart(xAxisData, this.seriesList)
// 按工厂分
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory)
// const seriesDataArray = []
let n = 0
Object.values(arrayByFacArray).forEach((item) => {
typeArray.forEach(type => {
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
let seriesData = Array(xAxisData.length).fill(0)
item.forEach(it => {
xAxisData.forEach((x, xindex) => {
if (x === it['datestr']) {
seriesData[xindex] = it[typeName]
}
})
})
seriesArray[n].data = seriesData
n ++
})
})
// 添加工厂
const validSeriesArray = []
factoryNameArray.forEach(f => {
const s = {
name: '显示工厂',
data: Array(xAxisData.length).fill(0),
type: 'bar',
stack: String(f),
barWidth: 16,
label: {
show: true,
position: 'top',
// position: f > 0 ? [2, -16] : [-10, -16],
formatter(params) {
return factoryListabbr[f]
}
}
}
validSeriesArray.push(s)
})
this.seriesList = [...seriesArray, ...validSeriesArray]
this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
@@ -535,11 +515,23 @@ export default {
};
</script>
<style scoped>
<style>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{
display: inline-block;
content: '';

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: DY
* @LastEditTime: 2024-06-24 11:13:48
* @LastEditTime: 2024-07-16 18:41:27
* @Description:
-->
<template>
@@ -73,8 +73,7 @@ export default {
this.chart = null
},
methods: {
initChart(xAxis, seriesList) {
console.log('2', xAxis, seriesList)
initChart(xAxis, seriesList, facs) {
if (xAxis.length === 0) {
this.chart.clear()
}
@@ -94,41 +93,48 @@ export default {
itemHeight: 10,
itemGap: 40,
formatter(name) {
return name.split('-')[0]
return ['玻璃芯片', '标准组件', 'BIPV'][name.split('-')[1]]
},
data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
data: ['瑞昌-0', '瑞昌-1', '瑞昌-2']
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
axisPointer: {
type: 'shadow',
color: "rgba(237,237,237,0.5)"
},
formatter(params) {
let str = ''
facs.forEach(ele => {
str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
})
let result = `
<div style="width: 270px; display: flex">
<div style="width: 150px">${params[0].name}</div>
<div style="width: 60px">${factoryListabbr[0]}</div>
<div style="width: 60px">${factoryListabbr[1]}</div>
${ str }
</div>`
const newArray = params.map(p => {
return {
glass: p.seriesName.split('-')[0], // 玻璃类型
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
value: p.value,
name: p.name,
marker: p.marker
const analyzeArray = params.filter(p => p.seriesName !== '显示工厂').map(item => {
const obj = {
glass: ['玻璃芯片', '标准组件', 'BIPV'][item.seriesName.split('-')[1]], // 玻璃类型
factoryName: item.seriesName.split('-')[0], // 工厂名称
value: item.value,
name: item.name,
marker: item.marker,
color: item.color
}
return obj
})
const analyzeList = Object.groupBy(newArray, (member) => member.glass)
const analyzeList = Object.groupBy(analyzeArray, (member) => member.glass)
for (let g in analyzeList) {
// date => 玻璃类型
let oneData = `<div style="width: 270px; display: flex">
<div style="width: 150px">${analyzeList[g][0].marker} ${g}</div>`
for (let fac of factoryListabbr) {
<div style="width: 150px; display: flex; align-items: center">
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
<div>${g}</div></div>`
let goodNum = 0
for (let ana of analyzeList[g]) {
if (ana.factoryName === fac && ana.value !== 0) {
goodNum = ana.value
}
}
oneData += `<div style="width: 60px">${goodNum}</div>`
for (let ana of analyzeList[g]) {
goodNum = ana.value
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
}
result = result + oneData + '</div>'
}
@@ -150,12 +156,12 @@ export default {
yAxis: [
{
type: 'value',
name: '单位:'
name: '单位:'
}
],
grid: {
top: '10%',
left: "1%",
left: "2%",
right: "5%",
bottom: "0%",
containLabel: true

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-20 16:41:48
* @LastEditTime: 2024-07-02 16:35:01
* @LastEditors: DY
* @Description:
-->
@@ -691,11 +691,22 @@ export default {
};
</script>
<style scoped>
<style>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{
display: inline-block;
content: '';

View File

@@ -1,15 +1,15 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-17 17:03:17
* @LastEditors: DY
* @LastEditTime: 2024-07-08 15:06:49
* @LastEditors: zhp
* @Description:
-->
<template>
<el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
<small-title slot="title" :no-padding="true">
{{ '详情' }}
<el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
<!-- <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button> -->
</small-title>
<div ref="detail" class="detailBox">
<el-row :gutter="20">
@@ -69,21 +69,59 @@
</el-col>
<el-col :span="3">
<p class="title">开始时间</p>
<p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
<p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-'
+ dataForm.startDate[2] : '' }}</p>
</el-col>
<el-col :span="3">
<p class="title">完成时间</p>
<p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p>
<p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' +
dataForm.endDate[2] : '' }}</p>
</el-col>
</el-row>
<el-divider></el-divider>
<div class="chartDiv">
<div ref="bar" :style="{ height: '30vh', width: '40vw' }" />
<div ref="pie" :style="{ height: '30vh', width: '40vw' }" />
</div>
<div class="chartDiv">
<div ref="equipmentLine" :style="{ height: '30vh', width: '40vw' }" />
<div ref="line" v-show="dataForm.orderStatus === 2" :style="{ height: '30vh', width: '40vw' }" />
<div v-loading="loading">
<div style="width: 100%; padding: 0 32px">
<el-divider style="margin: 0"></el-divider>
</div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
产品良率
</small-title>
<div ref="pie" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
待制品分布
</small-title>
<div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
<div style="width: 100%; padding: 0 32px">
<el-divider style="margin: 0"></el-divider>
</div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
生产明细
</small-title>
<div ref="bar" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div v-show="dataForm.orderStatus === 2"
style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
历史趋势
</small-title>
<div ref="line" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
</div>
</div>
</el-drawer>
@@ -118,7 +156,9 @@ export default {
barChart: null,
equipmentLineChart: null,
visible: false,
dataForm: {}
loading:true,
dataForm: {},
colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
}
},
beforeDestroy() {
@@ -137,17 +177,17 @@ export default {
const pdf = new jsPDF('l', 'pt', 'a4');
const canvas = document.createElement('canvas')
const element = this.$refs['detail'];
const width = pdf.internal.pageSize.getWidth()
const height = pdf.internal.pageSize.getHeight()
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const options = {
// scale: 2,
dpi: 300,
@@ -163,12 +203,13 @@ export default {
},
init(id) {
this.visible = true
this.$nextTick(() => {
this.initLineChart()
})
// this.$nextTick(() => {
// this.initLineChart()
// })
if (id) {
getWorkOrderDetail(id).then(res => {
if (res.code === 0) {
this.loading = false
this.dataForm = res.data.prodWorkOrderDO
this.buildChart(this.dataForm)
// 在制品
@@ -195,7 +236,7 @@ export default {
// this.initEqLineChart(xAxisList, yAxisList)
// }
// })
}
},
trend() {
@@ -218,47 +259,56 @@ export default {
this.initChart(barList)
// 良品率
const pieList = [
{ value: data.actualProduction, name: '实际产出' },
{ value: data.wasteNum, name: '废品数量' },
{ value: data.reworkNum, name: '待再加工数量' }
{ value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
{ value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
{ value: data.reworkNum ? data.reworkNum :0, name: '待再加工数量' }
]
this.initPieChart(pieList)
},
initChart(barData) {
this.barChart = echarts.init(this.$refs['bar'])
this.barChart.setOption({
title: {
text: '生产明细',
left: 'center'
// subtext: 'Fake Data'
},
// title: {
// text: '生产明细',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '20%',
left: "1%",
right: "3%",
bottom: "1%",
top: '15%',
left: 20,
right: '10%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
axisLabel: {
rotate:45
rotate: 25
}
},
yAxis: {
type: 'value'
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: barData,
type: 'bar',
barWidth: '40%'
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}, true)
@@ -266,8 +316,9 @@ export default {
initPieChart(pieData) {
this.pieChart = echarts.init(this.$refs['pie'])
this.pieChart.setOption({
color: ['#3E8EF7', '#69E6D8', '#F7C739'],
title: {
text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
// text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
left: 'center'
// subtext: 'Fake Data'
},
@@ -275,31 +326,38 @@ export default {
trigger: 'item'
},
legend: {
top: '5%',
left: 'right',
orient: 'vertical'
bottom: 0,
left: 'center'
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: pieData,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
show: true,
position: 'outside',
formatter: (params) => {
console.log(params)
let res = ''
// for (let i in params) {
res += `${params.percent ? params.percent : 0}% \n ${params.name}`
// }
return res
},
rich: {
d: {
color: 'inherit', // 系列色
verticalAlign: 'top'
},
b: {
color: '#8C8C8C',
verticalAlign: 'top'
}
}
},
labelLine: {
show: false
},
data: pieData
}
}
]
}, true)
@@ -307,39 +365,48 @@ export default {
initEqLineChart(xAxisList, yAxisList) {
this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
this.equipmentLineChart.setOption({
title: {
text: '待制品分布',
left: 'center'
// subtext: 'Fake Data'
},
// title: {
// text: '待制品分布',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '20%',
left: "1%",
right: "3%",
bottom: "1%",
top: '15%',
left: 30,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate:45,
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value'
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: '50%'
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}, true)
@@ -347,27 +414,39 @@ export default {
initLineChart(xAxisList, seriesList) {
this.lineChart = echarts.init(this.$refs['line'])
this.lineChart.setOption({
title: {
text: '历史趋势',
left: 'center' // 设置标题居中
},
color: ['#3E8EF7'],
tooltip: {
trigger: 'item'
},
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate:45
rotate: 25
}
},
yAxis: {
type: 'value'
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: seriesList,
type: 'line'
type: 'line',
label: {
show: true,
position: 'top'
}
}
]
}, true)
@@ -381,14 +460,8 @@ export default {
},
};
</script>
<style scoped>
.chartDiv {
display: flex;
justify-content: space-between;
width: 100%;
padding: 5px;
padding-left: 30px;
}
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
}
@@ -405,7 +478,8 @@ export default {
}
.detailBox p {
margin: 0;
padding: 0 32px;
padding-left: 32px;
/* padding: 0 32px; */
}
.detailBox .title {
/* width: 56px; */
@@ -427,6 +501,8 @@ export default {
}
.detailBox {
padding-top: 30px;
width: 99%;
overflow-x: hidden;
overflow-y: auto;
/* width: 99%; */
}
</style>

View File

@@ -0,0 +1,127 @@
<template>
<div class="dayRepExpBox">
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">产品良率</div>
<div class="box2">
<productYield ref="productYield" :pieList="pieList" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">待制品分布</div>
<div class="box2">
<beProcessed ref="beProcess" :beProcessObj="beProcessObj" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">生产明细</div>
<div class="box2">
<produceDetail ref="produceDetail" :produceData="produceData" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">历史趋势</div>
<div class="box2">
<hisChart ref="hisChart" :hisObj="hisObj" />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import hisChart from './dayReportExportChart/hisChart'
import produceDetail from './dayReportExportChart/produceDetail'
import productYield from './dayReportExportChart/productYield'
import beProcessed from './dayReportExportChart/beProcessed.vue'
export default {
name: 'ExportDayReport',
components: { hisChart, produceDetail, productYield, beProcessed },
props: {
produceData: {
type: Array,
default: () => []
},
hisObj: {
type: Object,
default: () => { }
},
pieList: {
type: Array,
default: () => []
},
beProcessObj: {
type: Object,
default: () => {}
},
},
data() {
return {
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
this.$refs.beProcess.canvasReset()
}
}
},
mounted() {
this.getData()
},
methods: {
getData() {
// console.log('beProcessObj', this.beProcessObj);
// this.$refs.beProcess.canvasReset()
// this.$refs.productYield.canvasReset()
// this.$refs.produceDetail.canvasReset()
// this.$refs.hisChart.canvasReset()
}
}
}
</script>
<style lang='scss' scoped>
.dayRepExpBox {
width: 595px;
height: 842px;
padding: 15px 20px 0;
background-color: #fff;
z-index: 2000;
.box2{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
border-left: 0;
}
.box3{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
}
.box5{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
border-left: 0;
}
.box6{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
position: relative;
.rightTitle{
position: absolute;
right: 5px;
top:2px;
font-size: 8px;
color: #383838;
}
}
}
</style>

View File

@@ -0,0 +1,103 @@
<template>
<div id="chipPowerExpChart" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
beProcessObj: {
handler(val) {
console.log(val);
this.canvasReset()
},
deep: true //对象内部属性的监听,关键。
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('chipPowerExpChart'))
// const legendName = Object.keys(this.chipPowerDistributionVo)
let xAxisList = this.beProcessObj.xAxisList
let yAxisList = this.beProcessObj.yAxisList
var option = {
// title: {
// text: '待制品分布',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 45
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 10,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@@ -0,0 +1,108 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-09 09:55:27
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="hisChart" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
hisObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
hisObj: {
handler(newValue, oldValue) {
this.canvasReset()
},
deep:true,
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById('hisChart'))
// const legendName = Object.keys(this.chipPowerDistributionVo)
// const values = Object.values(this.chipPowerDistributionVo)
let dateList = this.hisObj.dateList
let seriesList = this.hisObj.seriesList
var option = {
// title: {
// text: '待制品分布',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: dateList,
axisLabel: {
rotate: 45
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: seriesList,
type: 'line',
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@@ -0,0 +1,107 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-09 09:56:13
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="produceDetail" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
produceData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
produceData: {
handler(newValue, oldValue) {
this.canvasReset()
},
deep:true,
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById('produceDetail'), null, { devicePixelRatio: 2 })
// const legendName = Object.keys(this.chipPowerDistributionVo)
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
// title: {
// text: '生产明细',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: '10%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
axisLabel: {
rotate: 45
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: this.produceData,
type: 'bar',
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@@ -0,0 +1,109 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-11 14:48:15
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="productYield" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
pieList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
pieList: {
handler(newValue, oldValue) {
this.canvasReset()
},
deep:true
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('productYield'), null, { devicePixelRatio: 2 })
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
color: ['#3E8EF7', '#69E6D8', '#F7C739'],
title: {
// text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
left: 'center'
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0,
left: 'center',
itemGap:60,
},
series: [
{
// name: 'Access From',
type: 'pie',
center: ['50%', '45%'],
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: this.pieList,
label: {
show: true,
position: 'outside',
formatter: (params) => {
console.log(params)
let res = ''
// for (let i in params) {
res += `${params.percent ? params.percent : 0}% \n ${params.name}`
// }
return res
},
rich: {
d: {
color: 'inherit', // 系列色
verticalAlign: 'top'
},
b: {
color: '#8C8C8C',
verticalAlign: 'top'
}
}
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-24 15:08:34
* @LastEditors: DY
* @LastEditTime: 2024-07-09 11:08:43
* @LastEditors: zhp
* @Description:
-->
<template>
@@ -10,7 +10,7 @@
<el-row :gutter="10">
<el-col :span="4">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view">
<div style="padding: 10px 0; width: 100%">
<div class="topDiv">
@@ -27,13 +27,14 @@
</el-col>
<el-col :span="20">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view">
<div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
<div class="topDiv">
<div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
<div class="centerDiv">
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index]
}}</span>
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
</div>
<svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
@@ -49,27 +50,28 @@
<div class="app-container" style="margin-top: 8px;flex-grow: 1;">
<!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData" :max-height="tableH">
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"
:max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList"
/>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
<div id="dayRepDom" style="position: absolute;top:0;display: none;">
<ExportDayReport :beProcessObj="beProcessObj" :produceData="produceData" :hisObj="hisObj" :pieList="pieList" />
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
import { getWorkOrderPage, exportExcel, getOverView, getWorkOrderDetail } from '@/api/produceData/order';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import ExportDayReport from './dayReportComponents/ExportDayReport'
import moment from 'moment'
import tableHeightMixin from "@/mixins/tableHeightMixin";
// import ButtonNav from '@/components/ButtonNav'
@@ -78,11 +80,12 @@ import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
// import { publicFormatter } from "@/utils/dict";
import statusChart from "./statusChart.vue";
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart, AddOrUpdate },
components: { lineChart, AddOrUpdate, ExportDayReport },
mixins: [basicPage, tableHeightMixin],
data() {
return {
@@ -91,6 +94,16 @@ export default {
inputNum: 0,
heightNum: 180,
factoryList,
produceData: [],
pieList:[],
hisObj: {
seriesList: [],
dateList:[],
},
beProcessObj: {
xAxisList: [],
yAxisList:[]
},
factoryArray,
listQuery: {
pageSize: 20,
@@ -106,6 +119,10 @@ export default {
type: 'detail',
btnName: '详情',
},
{
type: 'export',
btnName: '导出',
},
// {
// type: 'delete',
// btnName: '删除',
@@ -142,15 +159,15 @@ export default {
selectOptions: [
{
label: '未开始',
value: 1
value: 0
},
{
label: '生产中',
value: 2
value: 1
},
{
label: '已完成',
value: 3
value: 2
}
],
labelField: "label",
@@ -242,7 +259,7 @@ export default {
{
prop: 'productionProgress',
label: '生产进度',
filter: (val) => (val * 100) + '%'
filter: (val) => (val * 100).toFixed(2) + '%'
},
{
prop: 'orderStatus',
@@ -281,6 +298,29 @@ export default {
this.getOverView()
},
methods: {
exportPDF() {
setTimeout(() => {
this.$message.success('正在导出,请稍等!')
const element = document.getElementById('dayRepDom')
element.style.display = 'block'
const fileName = '工单数据' + moment().format('yyMMDD') + '.pdf'
html2canvas(element, {
dpi: 300, // Set to 300 DPI
scale: 3 // Adjusts your resolution
}).then(function (canvas) {
const imgWidth = 595.28
const imgHeight = 841.89
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
setTimeout(() => {
PDF.save(fileName) // 导出文件名
}, 1000)
})
element.style.display = 'none'
}, 3000)
},
getOverView() {
getOverView().then(res => {
// this.data = res.data
@@ -299,11 +339,46 @@ export default {
})
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
console.log(val)
if (val.type === 'detail') {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
} else {
getWorkOrderDetail(val.data.id).then((res) => {
if (res.code === 0) {
// this.loading = false
const xAxisList = Object.keys(res.data.inProcessDis)
const yAxisList = Object.values(res.data.inProcessDis)
this.beProcessObj.xAxisList = xAxisList
this.beProcessObj.yAxisList = yAxisList
// console.log(this.beProcessObj)
; const data = res.data.prodWorkOrderDO
const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
const seriesList = []
const dateList = []
res.data.his.forEach(element => {
seriesList.push(element.actualProduction)
dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
})
this.hisObj.seriesList = seriesList
this.hisObj.dateList = dateList
this.produceData = barList
this.pieList = [
{ value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
{ value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
{ value: data.reworkNum ? data.reworkNum : 0, name: '待再加工数量' }
]
}
this.$nextTick(() => {
this.exportPDF()
})
})
}
},
async getDataList() {
const res = await getWorkOrderPage(this.listQuery)

View File

@@ -1,9 +1,9 @@
<!--
* @Author: Do not edit
* @Date: 2024-06-24 15:03:19
* @LastEditTime: 2024-06-24 15:07:42
* @LastEditors: DY
* @Description:
* @LastEditTime: 2024-07-08 08:48:58
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
@@ -22,10 +22,10 @@ export default {
},
computed: {
state() {
return ['', '未开始', '生产中', '已完成'][this.injectData.orderStatus]
return ['未开始', '生产中', '已完成'][this.injectData.orderStatus]
},
myClass() {
return ['', 'yellow', 'blue', 'green'][this.injectData.orderStatus]
return ['yellow', 'blue', 'green'][this.injectData.orderStatus]
}
},
};

View File

@@ -96,7 +96,7 @@ export default {
name: "",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -110,7 +110,7 @@ export default {
name: "",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -187,19 +187,19 @@ export default {
{
prop: "yoy",
label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
];
@@ -273,7 +273,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -287,7 +287,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -93,7 +93,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -107,7 +107,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -285,7 +285,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -299,7 +299,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -93,7 +93,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -107,7 +107,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -272,7 +272,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -286,7 +286,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -96,7 +96,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -110,7 +110,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -273,7 +273,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -287,7 +287,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -30,7 +30,14 @@
</div>
<!-- 图 -->
<div>
<div style="display: inline-block; width: 79%; vertical-align: top">
<div
style="
display: inline-block;
width: 79%;
vertical-align: top;
padding-right: 20px;
"
>
<base-chart
v-show="this.chartMsg1.series[0].data.length > 0"
:chartHeight="chartHeight"

View File

@@ -73,13 +73,13 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: "-100%",
label: {
show: true,
@@ -98,13 +98,13 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: "-100%",
label: {
show: true,
@@ -176,13 +176,13 @@ export default {
{
prop: "queryValue",
label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
];
@@ -222,6 +222,7 @@ export default {
});
},
setChartMsg(val) {
console.log(val);
let xData1 = [];
let xData2 = [];
let barData1 = [];
@@ -231,12 +232,12 @@ export default {
for (let i = 0; i < val.length; i++) {
if (val[i].unit !== "㎡") {
xData1.push(val[i].item);
barData1.push(val[i].target || 0);
barData2.push(val[i].queryValue || 0);
barData1.push(val[i].target ? parseFloat(val[i].target.toFixed(2)) : 0);
barData2.push(val[i].queryValue ? parseFloat(val[i].queryValue.toFixed(2)) : 0);
} else {
xData2.push(val[i].item);
barData3.push(val[i].target || 0);
barData4.push(val[i].queryValue || 0);
barData3.push(val[i].target ? parseFloat(val[i].target.toFixed(2)) : 0);
barData4.push(val[i].queryValue ? parseFloat(val[i].queryValue.toFixed(2)) : 0);
}
}
this.chartMsg1.xData = xData1;
@@ -258,13 +259,13 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: "-100%",
label: {
show: true,
@@ -283,13 +284,13 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: "-100%",
label: {
show: true,

View File

@@ -71,7 +71,7 @@ export default {
"<br/>" +
`${
params[i].seriesType === "line"
? '<img width="10" height="10" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
}` +
`<span style='display:inline-block;width:180px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-06-24 08:46:34
* @LastEditTime: 2024-07-12 09:12:10
* @LastEditors: zhp
* @Description:
-->
@@ -9,9 +9,9 @@
<div>
<!-- 暂无数据 -->
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series.length === 0"></div>
v-show="this.chartMsg.series[0].data.length === 0"></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series.length > 0">
<div v-show="this.chartMsg.series[0].data.length > 0 ">
<div class="legendData" v-if="show">
<span class="itemData" v-for="item in legendList" :key="item.id">
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
@@ -51,20 +51,24 @@ export default {
},
},
formatter: function (params) {
// console.log('params', params);
console.log('params', params)
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
}` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
}</span>`;
}
return res;
@@ -83,15 +87,36 @@ export default {
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: false,
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
backgroundColor: "#F7F7F7",
// handleStyle: {
// color: '#D6D6D6'
// },
handleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
moveHandleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
emphasis: {
handleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
},
moveHandleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
}
},
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
fillerColor: "#F7F7F7",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
borderColor: "#F7F7F7",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
@@ -102,9 +127,9 @@ export default {
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
width: "100%",
// 设置滚动条高度
height: 8,
height: 3,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
@@ -112,7 +137,7 @@ export default {
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
bottom: 14,
},
{
// 没有下面这块的话,只能拖动滚动条,
@@ -124,7 +149,6 @@ export default {
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
yAxis:undefined,
series: [],
@@ -190,6 +214,7 @@ export default {
}, 500)();
},
getMes() {
console.log('222222', this.chartMsg.series);
if (this.myChart) {
this.myChart.dispose();
}
@@ -208,12 +233,12 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.legendData {
text-align: right;
position: relative;
// right: 30;
// top: 10px;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:36
* @LastEditTime: 2024-06-24 08:46:42
* @LastEditTime: 2024-07-09 16:15:10
* @LastEditors: zhp
* @Description:
-->
@@ -36,9 +36,9 @@ export default {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: -30,
left: 50,
right: 0,
bottom: 30,
bottom: 31,
top: 30,
containLabel:true,
},
@@ -51,20 +51,21 @@ export default {
},
},
formatter: function (params) {
// console.log('params', params);
// console.log('params', params.data)
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片"
}</span>`;
}
return res;
@@ -80,52 +81,52 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "rgb(19, 63, 100)",
// // 设置选中范围的填充颜色
// fillerColor: "rgb(16, 171, 198)",
// // 设置边框颜色
// borderColor: "rgb(19, 63, 100)",
// // 是否显示detail即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值(一页显示多少条数据)
// endValue: 5,
// // empty当前数据窗口外的数据被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度,相对于盒子宽度
// width: "50%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域(或叫做数据窗口)的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话,只能拖动滚动条,
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
],
// ],
yAxis:undefined,
series: [],
},
@@ -136,6 +137,10 @@ export default {
type: Number,
default: 300,
},
gridLeft: {
type: Boolean,
default: true,
},
type: {
type: Number,
default: 2,
@@ -166,7 +171,16 @@ export default {
handler(newVal) {
this.chartHeight = newVal;
},
},
// gridLeft(val) {
// if (val === false) {
// this.option.grid.left = 100
// } else {
// this.option.grid.left = -80
// }
// this.canvasReset()
// },
type() {
this.canvasReset();
},
@@ -190,30 +204,40 @@ export default {
}, 500)();
},
getMes() {
console.log(this.gridLeft)
// console.log('222222', this.chartMsg);
if (this.myChart) {
this.myChart.dispose();
}
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
this.option.xAxis.data = this.chartMsg.xData
if (this.gridLeft === false) {
this.option.grid.left = 50
} else {
this.option.grid.left = -80
}
// this.option.yAxis.name = this.chartMsg.yName;
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.option.yAxis = this.chartMsg.yAxis;
console.log(this.option.grid);
this.myChart.setOption(this.option);
},
},
};
</script>
<style lang="scss">
<style lang="scss" >
.legendData {
text-align: right;
position: relative;
// right: 30;
// top: 10px;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:52
* @LastEditTime: 2024-06-24 08:46:46
* @LastEditTime: 2024-07-11 16:45:08
* @LastEditors: zhp
* @Description:
-->
@@ -9,9 +9,9 @@
<div>
<!-- 暂无数据 -->
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series.length === 0"></div>
v-show="this.chartMsg.series[0].data.length === 0"></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series.length > 0">
<div v-show="this.chartMsg.series[0].data.length > 0">
<div class="legendData" v-if="show">
<span class="itemData" v-for="item in legendList" :key="item.id">
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
@@ -36,9 +36,9 @@ export default {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: 30,
left: 60,
right: 0,
bottom: 30,
bottom: 31,
top: 30,
containLabel:true,
},
@@ -51,20 +51,20 @@ export default {
},
},
formatter: function (params) {
// console.log('params', params);
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? params[i].value+ "%"
? parseFloat(params[i].value.toFixed(2)) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡":(params[i].value ? params[i].value : 0) + "片"
}</span>`;
}
return res;
@@ -80,52 +80,52 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "rgb(19, 63, 100)",
// // 设置选中范围的填充颜色
// fillerColor: "rgb(16, 171, 198)",
// // 设置边框颜色
// borderColor: "rgb(19, 63, 100)",
// // 是否显示detail即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值(一页显示多少条数据)
// endValue: 5,
// // empty当前数据窗口外的数据被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度,相对于盒子宽度
// width: "50%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域(或叫做数据窗口)的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话,只能拖动滚动条,
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
],
// ],
yAxis:undefined,
series: [],
},
@@ -208,12 +208,14 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.legendData {
text-align: right;
position: relative;
// right: 30;
// top: 10px;
top: 0px;
// top: -10px;
.itemData {
display: inline-block;
margin-right: 10px;

View File

@@ -0,0 +1,277 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 16:06:13
* @LastEditTime: 2024-07-09 16:14:54
* @LastEditors: zhp
* @Description:
-->
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-07-08 14:19:57
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<!-- 暂无数据 -->
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series[0].data.length === 0"></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series[0].data.length > 0 ">
<div class="legendData" v-if="show">
<span class="itemData" v-for="item in legendList" :key="item.id">
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
<span v-if="item.type === 2" class="line" :style="{ backgroundColor: item.color }">
<span class="line-block" :style="{ backgroundColor: item.color }"></span>
</span>
{{ item.name }}</span>
</div>
<div :id="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { debounce } from "@/utils/debounce";
export default {
name: "bmLineBar",
data() {
return {
myChart: "",
option: {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: 30,
right: 50,
bottom: 30,
top: 30,
containLabel:true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
formatter: function (params) {
console.log('params', params)
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
}` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
}</span>`;
}
return res;
},
},
xAxis: {
type: "category",
data: [],
axisTick: {
show: false,
},
axisPointer: {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "#F7F7F7",
// handleStyle: {
// color: '#D6D6D6'
// },
handleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
moveHandleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
emphasis: {
handleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
},
moveHandleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
}
},
// 设置选中范围的填充颜色
fillerColor: "#F7F7F7",
// 设置边框颜色
borderColor: "#F7F7F7",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "100%",
// 设置滚动条高度
height: 3,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 14,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
yAxis:undefined,
series: [],
},
};
},
props: {
chartHeight: {
type: Number,
default: 300,
},
type: {
type: Number,
default: 2,
},
show: {
type: Boolean,
default: true,
},
legendList: {
type: Array,
default: () => [],
},
chartMsg: {
type: Object,
default: () => {},
},
chartId: {
type: String,
default: "bmChart",
},
chartNum: {
type: Number,
default: 1,
},
},
watch: {
chartHeight: {
handler(newVal) {
this.chartHeight = newVal;
},
},
type() {
this.canvasReset();
},
chartNum(val) {
this.canvasReset();
},
chartMsg: {
handler(newVal) {
this.canvasReset();
},
deep: true,
},
},
mounted() {
this.canvasReset();
},
methods: {
canvasReset() {
debounce(() => {
this.getMes();
}, 500)();
},
getMes() {
console.log('222222', this.chartMsg.series);
if (this.myChart) {
this.myChart.dispose();
}
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
// this.option.yAxis.name = this.chartMsg.yName;
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.option.yAxis = this.chartMsg.yAxis;
this.myChart.setOption(this.option);
},
},
};
</script>
<style lang="scss" scoped>
.legendData {
text-align: right;
position: relative;
// right: 30;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;
font-size: 14px;
color: #8c8c8c;
.block {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;
}
.line {
width: 10px;
height: 10px;
border-radius: 5px;
display: inline-block;
margin-right: 4px;
position: relative;
.line-block {
position: absolute;
width: 20px;
height: 2px;
left: -5px;
top: 4px;
}
}
}
}
</style>

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-21 09:05:14
* @LastEditTime: 2024-06-24 08:46:49
* @LastEditTime: 2024-07-09 16:15:04
* @LastEditors: zhp
* @Description:
-->
@@ -9,9 +9,9 @@
<div>
<!-- 暂无数据 -->
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series.length === 0"></div>
v-show="this.chartMsg.series[0].data.length === 0"></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series.length > 0">
<div v-show="this.chartMsg.series[0].data.length > 0">
<div class="legendData" v-if="show">
<span class="itemData" v-for="item in legendList" :key="item.id">
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
@@ -36,7 +36,7 @@ export default {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: -30,
left: 60,
right: 0,
bottom: 30,
top: 30,
@@ -55,34 +55,32 @@ export default {
let arr = []
var res = ``;
// for (var i = 0, l = params.length; i < l; i++) {
console.log()
if (params[0].axisValue === 'FTO投入' || params[0].axisValue === '芯片产量' || params[0].axisValue === '标准组件产量') {
// console.log()
if (params[0].axisValue === 'FTO投入' || params[0].axisValue === '芯片产量' || params[0].axisValue === '标准组件产量' || params[0].axisValue === '芯片总功率' || params[0].axisValue === '标准组件总功率') {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[0].color}'></span>` +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[0].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[0].name === "综合良率"
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
: params[0].name === "转化效率"
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
: params[0].axisValueLabel.search('总功率') != -1
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0) + "MW"
: (params[0].value ? params[0].value : 0) + "片"
}</span>`;
// }
}
if (params[1].axisValue === '综合良率' || params[1].axisValue === '转化效率') {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[1].axisValueLabel}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[1].name === "综合良率"
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
: params[1].name === "转化效率"
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
: params[1].axisValueLabel.search('总功率') != -1
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0) + "MW"
: (params[1].value ? params[1].value : 0) + "片"
}</span>`;
}
return res;
@@ -98,52 +96,51 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "#F7F7F7",
// // 设置选中范围的填充颜色
// fillerColor: "#EBEBEB",
// // 设置边框颜色
// borderColor: "#F7F7F7",
// // 是否显示detail即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值(一页显示多少条数据)
// endValue: 5,
// // empty当前数据窗口外的数据被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度,相对于盒子宽度
// width: "100%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域(或叫做数据窗口)的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话,只能拖动滚动条,
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
// ],
yAxis:undefined,
series: [],
},
@@ -226,10 +223,11 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.legendData {
text-align: right;
position: relative;
top: 0px;
// right: 30;
// top: 10px;
.itemData {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-24 09:39:27
* @LastEditTime: 2024-07-10 15:45:28
* @LastEditors: zhp
* @Description:
-->
@@ -14,15 +14,15 @@
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期">
<el-date-picker prefix-icon="el-icon-date" size="small" clearable v-model="listQuery.reportTime"
type="daterange" range-separator="" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
@change="changeDayTime" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
@@ -155,6 +155,11 @@ export default {
// all: {}
};
},
watch: {
currentMenu() {
this.getDataList()
},
},
computed: {
weekNum() {
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
@@ -196,12 +201,36 @@ export default {
// this.getOverView()
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList()
},
methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.startDate = null
this.listQuery.endDate = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0;
@@ -314,9 +343,18 @@ export default {
}
},
async getDataList() {
console.log(this.listQuery.type);
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度!')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间')
return
}
this.otherProps = []
let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(2)
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
this.listQuery.factory = arr
const res = await getComprehensiveDataPage(this.listQuery)
// this.tableData = res.data.list
@@ -338,10 +376,6 @@ export default {
type: '芯片',
item: '芯片良率',
unit: '%'
}, {
type: '芯片',
item: '芯片产量',
unit: '片'
}, {
type: '芯片',
item: '芯片总功率',
@@ -410,7 +444,7 @@ export default {
{
type: 'BIPV',
item: 'BIPV产量',
unit: 'm2'
unit: ''
},
{
type: 'BIPV',
@@ -420,7 +454,7 @@ export default {
{
type: 'BIPV',
item: '人均产量',
unit: 'm2/人'
unit: '/人'
},
{
type: 'BIPV',
@@ -443,6 +477,7 @@ export default {
// this.chartMsg.xData.push(ele.titleValue)
this.otherProps.push({
label: ele.titleValue,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i
})
})
@@ -451,34 +486,32 @@ export default {
let i = index + 1
let m = 'value' + i
// ele.productYieldDataVOList.forEach((item) => {
dataArr[0]['' + m + ''] = item.ftoInput
// dataArr[0].factory = item.factory === 1 ? '邯郸' : '瑞昌'
// dataArr[1].factory = item.factory === 1 ? '邯郸' : '瑞昌'
// dataArr[2].factory = item.factory === 1 ? '邯郸' : '瑞昌'
// dataArr[3].factory = item.factory === 1 ? '邯郸' : '瑞昌'
dataArr[1]['' + m + ''] = item.chipYield
dataArr[2]['' + m + ''] = item.chipAveragePower
dataArr[4]['' + m + ''] = item.chipTotalPower
dataArr[5]['' + m + ''] = item.chipCssMarriageRate
dataArr[6]['' + m + ''] = item.chipOee
dataArr[7]['' + m + ''] = item.chipCapacityUtilizationRate
dataArr[8]['' + m + ''] = item.chipAnnualAverageProduction
dataArr[9]['' + m + ''] = item.chipBom
dataArr[10]['' + m + ''] = item.componentYield
dataArr[11]['' + m + ''] = item.componentAveragePower
dataArr[12]['' + m + ''] = item.componentYieldRate
dataArr[13]['' + m + ''] = item.componentTotalPower
dataArr[14]['' + m + ''] = item.componentOee
dataArr[15]['' + m + ''] = item.componentCapacityUtilizationRate
dataArr[16]['' + m + ''] = item.componentAnnualAverageProduction
dataArr[17]['' + m + ''] = item.componentBom
dataArr[18]['' + m + ''] = item.bipvChipUsage
dataArr[19]['' + m + ''] = item.bipvProductOutput
dataArr[20]['' + m + ''] = item.bipvChipUtilizationRate
dataArr[21]['' + m + ''] = item.bipvAnnualAverageProduction
dataArr[22]['' + m + ''] = item.bipvOeeMaterialCost
dataArr[23]['' + m + ''] = item.bipvInsideMaterialCost
dataArr[24]['' + m + ''] = item.bipvComprehensiveMaterialCost
dataArr[0]['' + m + ''] = item.ftoInput
dataArr[1]['' + m + ''] = item.chipYield
dataArr[2]['' + m + ''] = item.chipAveragePower
dataArr[3]['' + m + ''] = item.chipYieldRate
dataArr[4]['' + m + ''] = item.chipTotalPower
dataArr[5]['' + m + ''] = item.chipCssMarriageRate
dataArr[6]['' + m + ''] = item.chipOee
dataArr[7]['' + m + ''] = item.chipCapacityUtilizationRate
dataArr[8]['' + m + ''] = item.chipAnnualAverageProduction
dataArr[9]['' + m + ''] = item.chipBom
dataArr[10]['' + m + ''] = item.componentYield
dataArr[11]['' + m + ''] = item.componentAveragePower
dataArr[12]['' + m + ''] = item.componentYieldRate
dataArr[13]['' + m + ''] = item.componentTotalPower
dataArr[14]['' + m + ''] = item.componentOee
dataArr[15]['' + m + ''] = item.componentCapacityUtilizationRate
dataArr[16]['' + m + ''] = item.componentAnnualAverageProduction
dataArr[17]['' + m + ''] = item.componentBom
dataArr[18]['' + m + ''] = item.bipvChipUsage
dataArr[19]['' + m + ''] = item.bipvProductOutput
dataArr[20]['' + m + ''] = item.bipvChipUtilizationRate
dataArr[21]['' + m + ''] = item.bipvAnnualAverageProduction
dataArr[22]['' + m + ''] = item.bipvOeeMaterialCost
dataArr[23]['' + m + ''] = item.bipvInsideMaterialCost
dataArr[24]['' + m + ''] = item.bipvComprehensiveMaterialCost
// dataArr[25]['' + m + ''] = item.bipvComprehensiveMaterialCost
// })
// ele.titleValue

View File

@@ -96,7 +96,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -110,7 +110,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -273,7 +273,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -287,7 +287,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -93,7 +93,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -107,7 +107,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -285,7 +285,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -299,7 +299,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -96,7 +96,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -110,7 +110,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -187,19 +187,19 @@ export default {
{
prop: "yoy",
label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150,
},
];
@@ -273,7 +273,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -287,7 +287,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -5,15 +5,15 @@
</ButtonNav>
<!-- </div> -->
<div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle">
<el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期">
</el-date-picker>
@@ -84,8 +84,8 @@
:chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" />
</el-col> -->
</el-row>
<base-table :key="showTable" :span-method="objectSpanMethod" :table-props="tableProps" :page="listQuery.current"
:limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
:table-data="tableData" :max-height="tableH" />
</div>
<!-- <div class="containerBottom">
@@ -96,7 +96,7 @@
<script>
import { getProduceTransData, exportProduceTransData } from '@/api/report';
import bmSearchBar from "./components/bmSearchBar";
import BmLineBar from "./components/produceLineBar.vue";
import BmLineBar from "./components/produceLineYieldBar.vue";
import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";
import ButtonNav from '@/components/ButtonNav'
@@ -174,7 +174,15 @@ export default {
yAxis: [
{
type: "value",
name: "单位/",
name: "单位/MW",
// splitNumber: 5,
// min: function (value) {//取最小值向下取整为最小刻度
// return 0
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks: true,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -183,11 +191,17 @@ export default {
},
{
type: 'value',
alignTicks: true,
// min: 0,
// max: 100,
// scale: true,
// interval: 25,//间隔
// inverse: true,
// splitNumber: 5,
name: "单位/%",
nameTextStyle: {
fontSize: 12,
align: "right",
align: "left",
},
axisLabel: {},
}
@@ -198,13 +212,13 @@ export default {
// yAxisIndex: 0,
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
position: [0, -16],
color: "#68C483",
formatter: function (params) {
return params.value + "MW";
return params.value
},
},
},
@@ -213,13 +227,13 @@ export default {
type: 'bar',
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
position: [0, -16],
color: "#68C483",
formatter: function (params) {
return params.value + "%";
return params.value
},
},
yAxisIndex: 1
@@ -233,7 +247,16 @@ export default {
yAxis: [
{
type: "value",
name: "单位/",
name: "单位/MW",
// min: function (value) {//取最小值向下取整为最小刻度
// return 0
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks: true,
// splitNumber: 5,
// scale: true,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -241,11 +264,19 @@ export default {
axisLabel: {},
},
{
type: "value",
type: 'value',
// inverse: true,
name: "单位/%",
scale: true,
alignTicks: true,
// min: 0,
// max: 100,
// scale: true,
// interval: 25,//间隔
// splitNumber: 5,
nameTextStyle: {
fontSize: 12,
align: "right",
align: "left",
},
axisLabel: {},
}
@@ -256,13 +287,13 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
position: [-0, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "MW";
return params.value.toFixed(2)
},
},
},
@@ -271,13 +302,13 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "MW";
return params.value.toFixed(2)
},
},
},
@@ -294,7 +325,7 @@ export default {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
return params.value.toFixed(2)
},
},
},
@@ -313,13 +344,6 @@ export default {
computed: {
tableProps() {
return [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
@@ -345,6 +369,9 @@ export default {
},
watch: {
// 监听左侧菜单栏是否展开
currentMenu() {
this.getDataList()
},
isOpen(val) {
if (this.$route.name === "produceConversion") {
this.chartNum++;
@@ -369,12 +396,36 @@ export default {
// this.getOverView()
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.beginTime = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endTime = moment(today).format('yyyy-MM-DD')
this.listQuery.beginTime = this.getFirstDay()
this.listQuery.endTime = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.beginTime, this.listQuery.endTime]
this.getDataList()
},
methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange(val) {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.endTime = null
this.listQuery.beginTime = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0;
@@ -494,7 +545,15 @@ export default {
this.chartMsg.series[2].data = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
this.title = ''
if (this.listQuery.date === '') {
this.$message.warning('请选择时间维度!')
return
}
if (!this.listQuery.beginTime && !this.listQuery.endTime) {
this.$message.warning('请选择起止时间')
return
}
console.log(this.listQuery);
if (this.listQuery.type == 3) {
this.listQuery.beginTime = this.listQuery.reportTime[0]
@@ -521,36 +580,37 @@ export default {
}
]
res.data.forEach(element => {
element.list.reverse().forEach((ele, index) => {
element.list.forEach((ele, index) => {
let i = index + 1
this.chartMsg.xData.push(ele.reportTimep)
this.otherProps.push({
label: ele.reportTimep,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i
})
})
})
if (res.data[0].list.length != 0) {
this.chartMsg.xData.push(res.data[0].list[0].reportTimep + '目标')
this.chartMsg.xData.push(res.data[0].list[res.data[0].list.length - 1].reportTimep.slice(0, res.data[0].list[res.data[0].list.length - 1].reportTimep.length - 3) + '目标')
if (this.listQuery.date === 0 || this.listQuery.date === 1 || this.listQuery.date === 2) {
this.otherProps.push({
label: res.data[0].list[0].reportTimep + '目标',
label: res.data[0].list[res.data[0].list.length - 1].reportTimep.slice(0, res.data[0].list[res.data[0].list.length - 1].reportTimep.length-3) + '目标',
prop: 'dayData'
})
dataArr[0]['dayData'] = res.data[0].list[0].chipTarget
dataArr[1]['dayData'] = res.data[0].list[0].standTarget
dataArr[2]['dayData'] = res.data[0].list[0].conversionEfficiencyTarget
dataArr[0]['dayData'] = res.data[0].list[res.data[0].list.length - 1].chipTarget
dataArr[1]['dayData'] = res.data[0].list[res.data[0].list.length - 1].standTarget
dataArr[2]['dayData'] = res.data[0].list[res.data[0].list.length - 1].conversionEfficiencyTarget
}
if (this.listQuery.date === 2 || this.listQuery.date === 3) {
this.otherProps.push({
label: res.data[0].yearTarget.targetTime,
label: res.data[0].yearTarget.targetTime + '年目标值',
prop: 'yearData'
})
dataArr[0]['yearData'] = res.data[0].yearTarget.chipTotalPower
dataArr[1]['yearData'] = res.data[0].yearTarget.componentTotalPower
dataArr[2]['yearData'] = res.data[0].yearTarget.componentConversionEfficiency
}
res.data.forEach((ele, index) => {
res.data.reverse().forEach((ele, index) => {
// let i = index + 1
// let m = 'value' + i
ele.list.forEach((item, index) => {
@@ -560,9 +620,6 @@ export default {
dataArr[0]['' + m + ''] = item.chipTotalPowers
dataArr[1]['' + m + ''] = item.scTotalPowers
dataArr[2]['' + m + ''] = item.conversionEfficiency
dataArr[0].factory = ele.factory === 1 ? '邯郸' : '瑞昌'
dataArr[1].factory = ele.factory === 1 ? '邯郸' : '瑞昌'
dataArr[2].factory = ele.factory === 1 ? '邯郸' : '瑞昌'
// dataArr[3]['' + m + ''] = ele.comprehensiveYieldRate
// })
@@ -573,22 +630,31 @@ export default {
// })
})
})
this.title = res.data[0].yearTarget.targetTime + '目标值'
this.title = res.data[0].yearTarget.targetTime ? res.data[0].yearTarget.targetTime + '目标值' : ''
this.chartMsgYearTarget.series[0].data = [
{
value: res.data[0].yearTarget.chipTotalPower,
label: {
color: '#8EF0AB'
},
itemStyle: {
color: '#8EF0AB'
}
},
{
value: res.data[0].yearTarget.componentTotalPower,
label: {
color: '#288AFF'
},
itemStyle: {
color: '#288AFF'
}
},
{
value: null,
label: {
color: '#64BDFF'
},
itemStyle: {
color: '#64BDFF'
}
@@ -596,18 +662,27 @@ export default {
this.chartMsgYearTarget.series[1].data = [
{
value: null,
label: {
color: '#8EF0AB'
},
itemStyle: {
color: '#8EF0AB'
}
},
{
value: null,
label: {
color: '#288AFF'
},
itemStyle: {
color: '#288AFF'
}
},
{
value: res.data[0].yearTarget.componentConversionEfficiency,
label: {
color: '#64BDFF'
},
itemStyle: {
color: '#64BDFF'
}
@@ -618,7 +693,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[0].data.push({
name: dataArr[0]['item'],
value: dataArr[0][i]
value: dataArr[0][i] === 0 ? null : dataArr[0][i]
})
}
}
@@ -627,7 +702,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({
name: dataArr[1]['item'],
value: dataArr[1][i]
value: dataArr[1][i] === 0 ? null : dataArr[1][i]
})
}
}
@@ -636,10 +711,22 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({
name: dataArr[2]['item'],
value: dataArr[2][i]
value: dataArr[2][i] === 0 ? null : dataArr[2][i]
})
}
}
this.chartMsg.series[0].data.push({
name: '芯片总功率',
value: dataArr[0]['dayData'] === 0 ? null : dataArr[0]['dayData']
})
this.chartMsg.series[1].data.push({
name: '标准组件总功率',
value: dataArr[1]['dayData'] === 0 ? null : dataArr[1]['dayData']
})
this.chartMsg.series[2].data.push({
name: '转化效率',
value: dataArr[2]['dayData'] === 0 ? null : dataArr[2]['dayData']
})
} else {
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
@@ -682,30 +769,45 @@ export default {
</script>
<style lang="scss" scoped>
.search {
// height: calc((100px));
background-color: #fff;
border-radius: 8px;
padding: 16px 16px 0 16px;
margin: 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
.containerTop {

View File

@@ -3,15 +3,15 @@
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
</ButtonNav>
<div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle">
<el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期">
</el-date-picker>
@@ -55,36 +55,60 @@
<!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> -->
<el-row v-if="this.listQuery.type === 2">
<el-col :span="12">
<el-col :span="18">
<div class="blueTip">
生产情况对比
</div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :chartId="'chartTarget'" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<div class="blueTip">
{{ title }}
</div>
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="24">
<div class="blueTip">
生产情况对比
</div>
</el-col>
</el-row>
<el-row v-else>
<div class="blueTip">
生产情况对比
</div>
</el-row>
<el-row v-if="this.listQuery.type === 2">
<el-col :span="12">
<!-- <div class="blueTip">
生产情况对比
</div> -->
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<!-- <div class="blueTip">
{{ title }}
</div> -->
<bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgYearTarget" :chartId="'chartYearTarget'" :chartNum="chartNum" />
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="18">
<div class="blueTip">
<!-- <div class="blueTip">
生产情况对比
</div>
</div> -->
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
</el-col>
<el-col :span="6" style="margin-top: 30px">
<el-col :span="6">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :chartId="'chartDayTarget'" :chartNum="chartNum" />
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartNum="chartNum" />
</el-col>
<!-- <el-col :span="6">
<div class="blueTip">
@@ -95,16 +119,16 @@
</el-col> -->
</el-row>
<el-row v-else>
<div class="blueTip">
<!-- <div class="blueTip">
生产情况对比
</div>
</div> -->
<!-- <el-col :span="12"> -->
<bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg"
:chartId="chartId" :chartNum="chartNum" />
<!-- </el-col> -->
</el-row>
<base-table :key="showTable" :span-method="objectSpanMethod" :table-props="tableProps" :page="listQuery.current"
:limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
:table-data="tableData" :max-height="tableH" />
</div>
<!-- <div class="containerBottom">
@@ -130,6 +154,7 @@ export default {
currentMenu: '邯郸',
end: undefined,
title: '',
gridLeft:true,
listQuery: {
pageNo: 1,
pageSize: 999,
@@ -191,13 +216,13 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value
return parseFloat(params.value.toFixed(2))
},
},
},
@@ -205,13 +230,13 @@ export default {
name: "标准组件总功率",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value
return parseFloat(params.value.toFixed(2))
},
},
},
@@ -222,9 +247,11 @@ export default {
xData: [],
yName: "单位/MW",
yAxis: {
show: true,
type: "value",
name: "单位/MW",
show: false,
position:'left',
// splitNumber: 4,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -238,11 +265,12 @@ export default {
chartMsg: {
color: ["#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/MW",
yAxis:
{
// yName: "单位/MW",
yAxis:{
type: "value",
name: "单位/MW",
// splitNumber: 4,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -252,16 +280,15 @@ export default {
series: [
{
name: "芯片总功率",
data: [
],
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [10, -16],
position: [-10, -16],
color: "#68C483",
formatter: function (params) {
return params.value
return parseFloat(params.value.toFixed(2))
},
},
},
@@ -270,13 +297,13 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value
return parseFloat(params.value.toFixed(2))
},
},
},
@@ -310,13 +337,6 @@ export default {
},
tableProps() {
return [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
@@ -342,6 +362,9 @@ export default {
},
watch: {
// 监听左侧菜单栏是否展开
currentMenu() {
this.getDataList()
},
isOpen(val) {
if (this.$route.name === "productionSituationMW") {
this.chartNum++;
@@ -366,12 +389,36 @@ export default {
// this.getOverView()
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList()
},
methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.startDate = null
this.listQuery.endDate = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0;
@@ -493,37 +540,86 @@ export default {
this.chartMsgTarget.series = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
console.log(this.listQuery);
console.log(this.listQuery.type);
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度!')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间')
return
}
let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
this.listQuery.factory = arr
const res = await getProductionSituationMWData(this.listQuery)
let maxData = []
res.data.list.forEach((ele, index) => {
let i = index + 1
// this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.otherProps.push({
label: ele.titleValue,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i
})
})
res.data.list.forEach((ele, index) => {
let i = index + 1
let m = 'value' + i
ele.productionSituationPowerDataVOList.forEach((item) => {
// maxData.push(item.chipTotalPower, item.componentTotalPower)
this.dataArr[0]['' + m + ''] = item.chipTotalPower
// this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1]['' + m + ''] = item.componentTotalPower
// this.dataArr[3]['' + m + ''] = item.bipvProductOutput
})
// ele.titleValue
// .push({
// label: ele.titleValue,
// props: 'value' + index + 1,
// })
})
if (this.listQuery.type === 2) {
console.log(res.data.list.slice(res.data.list.length - 2, res.data.list.length));
res.data.list.forEach((ele, index) => {
let i = index + 1
// this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.otherProps.push({
label: ele.titleValue,
prop: 'value' + i
res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
ele.productionSituationPowerDataVOList.forEach((item) => {
maxData.push(item.chipTotalPower, item.componentTotalPower)
})
})
} else {
res.data.list.forEach((ele, index) => {
ele.productionSituationPowerDataVOList.forEach((item) => {
maxData.push(item.chipTotalPower, item.componentTotalPower)
})
})
}
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData) )
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
if (this.listQuery.type === 2) {
if (res.data.list.length === 3) {
this.gridLeft = false
} else {
this.gridLeft = true
}
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 2).forEach((ele, index) => {
res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => {
// let i = index + 1
this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length - 3))
ele.productionSituationPowerDataVOList.forEach((item) => {
this.chartMsg.series[0].data.push({
name: ele.titleValue,
value: item.chipTotalPower
value: item.chipTotalPower === 0 ? null : item.chipTotalPower
})
this.chartMsg.series[1].data.push({
name: ele.titleValue,
value: item.componentTotalPower
value: item.componentTotalPower === 0 ? null : item.componentTotalPower
})
})
})
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue.replace(/[^\d]/g, " "))
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue.slice(0, res.data.list[res.data.list.length - 2].titleValue.length - 3))
// this.chartMsgTarget.series = [{
// name: "FTO投入",
// data: [
@@ -547,98 +643,19 @@ export default {
let arr = []
let chip = []
let std = []
let obj = {}
let targetObj = {}
res.data.list.slice(res.data.list.length - 3, res.data.list.length - 1).forEach((ele, index) => {
console.log(ele.titleValue.search('目标'));
// let i = index + 1
// this.chartMsgTarget.xData.push(ele.titleValue)
ele.productionSituationPowerDataVOList.forEach((item) => {
if (ele.titleValue.search('目标') != -1) {
chip.push({
name: "芯片总功率目标值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率目标值", value: item.componentTotalPower },
// { name: '芯片总功率目标值', value: 22 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131,.5)",
formatter: function (params) {
return params.value
},
},
},)
std.push({
name: "标准组件总功率目标值",
stack: 'b',
data: [
{ name: "标准组件总功率目标值", value: item.componentYield },
// { name: '标准组件总功率目标值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255,.5)",
formatter: function (params) {
return params.value
},
},
})
targetObj.chipTotalPower = item.chipTotalPower === 0 ? null : item.chipTotalPower
targetObj.componentTotalPower = item.componentTotalPower === 0 ? null : item.componentTotalPower
} else {
chip.unshift({
name: "芯片总功率完成值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率完成值", value: item.componentTotalPower },
// { name: '芯片总功率完成值', value: 55 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131)",
formatter: function (params) {
return params.value
},
},
},)
std.unshift({
name: "标准组件总功率完成值",
stack: 'b',
data: [
{ name: "标准组件总功率完成值", value: item.componentYield },
// { name: '标准组件总功率完成值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255)",
formatter: function (params) {
return params.value
},
},
})
obj.chipTotalPower = item.chipTotalPower === 0 ? null : item.chipTotalPower
obj.componentTotalPower = item.componentTotalPower === 0 ? null : item.componentTotalPower
}
// this.chartMsgTarget.series[1].data.push()
@@ -646,11 +663,87 @@ export default {
// this.chartMsgTarget.series[3].data.push()
})
})
console.log('arr', arr)
this.chartMsgTarget.series = [...chip, ...std]
// arr.forEach((ele) => {
chip.push({
name: "芯片总功率完成值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率完成值", value: obj.chipTotalPower, titleValue: obj.chipTotalPower },
// { name: '芯片总功率完成值', value: 55 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131)",
formatter: function (params) {
return params.value.toFixed(2)
},
},
}, {
name: "芯片总功率目标值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率目标值", value: (targetObj.chipTotalPower - obj.chipTotalPower) > 0 ? (targetObj.chipTotalPower - obj.chipTotalPower) : null, titleValue: targetObj.chipTotalPower },
// { name: '芯片总功率目标值', value: 22 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131,.5)",
formatter: function (params) {
return params.value.toFixed(2)
},
},
})
std.push({
name: "标准组件总功率完成值",
stack: 'b',
data: [
{ name: "标准组件总功率完成值", value: obj.componentTotalPower,titleValue:obj.componentTotalPower },
],
type: "bar",
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255)",
formatter: function (params) {
return params.value.toFixed(2)
},
},
}, {
name: "标准组件总功率目标值",
stack: 'b',
data: [
{ name: "标准组件总功率目标值", value: (targetObj.componentTotalPower - obj.componentTotalPower) > 0 ? (targetObj.componentTotalPower - obj.componentTotalPower) : null, titleValue: targetObj.componentTotalPower },
// { name: '标准组件总功率目标值', value: 23 },
// })
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255,.5)",
formatter: function (params) {
return params.value.toFixed(2)
},
},
})
console.log('arr', chip,std)
this.chartMsgTarget.series = [...chip, ...std]
res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele, index) => {
// let i = index + 1
this.chartMsgYearTarget.xData.push(ele.titleValue)
@@ -658,59 +751,37 @@ export default {
ele.productionSituationPowerDataVOList.forEach((item) => {
this.chartMsgYearTarget.series[0].data.push({
name: ele.titleValue,
value: item.chipTotalPower
value: item.chipTotalPower === 0 ? null : item.chipTotalPower
})
this.chartMsgYearTarget.series[1].data.push({
name: ele.titleValue,
value: item.componentTotalPower
value: item.componentTotalPower === 0 ? null : item.componentTotalPower
})
})
})
// })
console.log(this.chartMsg.xData)
res.data.list.forEach((ele, index) => {
let i = index + 1
let m = 'value' + i
ele.productionSituationPowerDataVOList.forEach((item) => {
this.dataArr[0]['' + m + ''] = item.chipTotalPower
this.dataArr[0].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1].factory = item.factory == 1 ? '邯郸' : '瑞昌'
// this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1]['' + m + ''] = item.componentTotalPower
// this.dataArr[3]['' + m + ''] = item.bipvProductOutput
})
// ele.titleValue
// .push({
// label: ele.titleValue,
// props: 'value' + index + 1,
// })
})
} else if (this.listQuery.type === 1 || this.listQuery.type === 0) {
console.log(res.data.list.slice(res.data.list.length - 2, res.data.list.length));
res.data.list.forEach((ele, index) => {
let i = index + 1
// this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.otherProps.push({
label: ele.titleValue,
prop: 'value' + i
})
})
if (res.data.list.length === 2) {
this.gridLeft = false
} else {
this.gridLeft = true
}
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
res.data.list.slice(0, res.data.list.length - 2).forEach((ele, index) => {
// let i = index + 1
this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length - 3))
ele.productionSituationPowerDataVOList.forEach((item) => {
this.chartMsg.series[0].data.push({
name: ele.titleValue,
value: item.chipTotalPower
value: item.chipTotalPower === 0 ? null : item.chipTotalPower
})
this.chartMsg.series[1].data.push({
name: ele.titleValue,
value: item.componentTotalPower
value: item.componentTotalPower === 0 ? null : item.componentTotalPower
})
})
})
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue)
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue.slice(0, res.data.list[res.data.list.length - 1].titleValue.length - 3))
// this.chartMsgTarget.series = [{
// name: "FTO投入",
// data: [
@@ -734,98 +805,19 @@ export default {
let arr = []
let chip = []
let std = []
res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele, index) => {
let obj = {}
let targetObj = {}
res.data.list.slice(res.data.list.length - 2, res.data.list.length).forEach((ele, index) => {
console.log(ele.titleValue.search('目标'));
// let i = index + 1
// this.chartMsgTarget.xData.push(ele.titleValue)
ele.productionSituationPowerDataVOList.forEach((item) => {
if (ele.titleValue.search('目标') != -1) {
chip.push({
name: "芯片总功率目标值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率目标值", value: item.componentTotalPower },
// { name: '芯片总功率目标值', value: 22 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131,.5)",
formatter: function (params) {
return params.value
},
},
},)
std.push({
name: "标准组件总功率目标值",
stack: 'b',
data: [
{ name: "标准组件总功率目标值", value: item.componentYield },
// { name: '标准组件总功率目标值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255,.5)",
formatter: function (params) {
return params.value
},
},
})
targetObj.chipTotalPower = item.chipTotalPower === 0 ? null : item.chipTotalPower
targetObj.componentTotalPower = item.componentTotalPower === 0 ? null : item.componentTotalPower
} else {
chip.unshift({
name: "芯片总功率完成值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率完成值", value: item.componentTotalPower },
// { name: '芯片总功率完成值', value: 55 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131)",
formatter: function (params) {
return params.value
},
},
},)
std.unshift({
name: "标准组件总功率完成值",
stack: 'b',
data: [
{ name: "标准组件总功率完成值", value: item.componentYield },
// { name: '标准组件总功率完成值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255)",
formatter: function (params) {
return params.value
},
},
})
obj.chipTotalPower = item.chipTotalPower === 0 ? null : item.chipTotalPower
obj.componentTotalPower = item.componentTotalPower === 0 ? null : item.componentTotalPower
}
// this.chartMsgTarget.series[1].data.push()
@@ -833,57 +825,101 @@ export default {
// this.chartMsgTarget.series[3].data.push()
})
})
console.log('arr', arr)
this.chartMsgTarget.series = [...chip,...std]
console.log(this.chartMsg.xData)
res.data.list.forEach((ele, index) => {
let i = index + 1
let m = 'value' + i
ele.productionSituationPowerDataVOList.forEach((item) => {
this.dataArr[0]['' + m + ''] = item.chipTotalPower
this.dataArr[0].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1].factory = item.factory == 1 ? '邯郸' : '瑞昌'
// this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1]['' + m + ''] = item.componentTotalPower
})
// ele.titleValue
// .push({
// label: ele.titleValue,
// props: 'value' + index + 1,
// })
chip.push({
name: "芯片总功率完成值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率完成值", value: obj.chipTotalPower, titleValue: obj.chipTotalPower },
// { name: '芯片总功率完成值', value: 55 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131)",
formatter: function (params) {
return params.value
},
},
}, {
name: "芯片总功率目标值",
// barGap: '-100%',
stack: 'a',
data: [
{ name: "芯片总功率目标值", value: (targetObj.chipTotalPower - obj.chipTotalPower) > 0 ? (targetObj.chipTotalPower - obj.chipTotalPower) : null, titleValue: targetObj.chipTotalPower },
// { name: '芯片总功率目标值', value: 22 },
// { name: "%", value: 21.66 },
// { name: "%", value: 18.4 },
],
type: "bar",
// barGap: '-100%',
label: {
show: true,
position: [-18, -16],
color: "rgba(104,196,131,.5)",
formatter: function (params) {
return params.value
},
},
})
std.push({
name: "标准组件总功率完成值",
stack: 'b',
data: [
{ name: "标准组件总功率完成值", value: obj.componentTotalPower, titleValue: obj.componentTotalPower },
// { name: '标准组件总功率完成值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255)",
formatter: function (params) {
return params.value
},
},
}, {
name: "标准组件总功率目标值",
stack: 'b',
data: [
{ name: "标准组件总功率目标值", value: (targetObj.componentTotalPower - obj.componentTotalPower) > 0 ? (targetObj.componentTotalPower - obj.componentTotalPower) : null, titleValue: targetObj.componentTotalPower },
// { name: '标准组件总功率目标值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "rgba(40,138,255,.5)",
formatter: function (params) {
return params.value
},
},
})
console.log('arr', chip, std)
this.chartMsgTarget.series = [...chip, ...std]
} else {
// if (this.currentMenu !== '瑞昌') {
res.data.list.forEach((ele, index) => {
let i = index + 1
this.chartMsg.xData.push(ele.titleValue)
this.otherProps.push({
label: ele.titleValue,
prop: 'value' + i
})
})
console.log(this.otherProps)
res.data.list.forEach((ele, index) => {
let i = index + 1
let m = 'value' + i
ele.productionSituationPowerDataVOList.forEach((item) => {
this.dataArr[0]['' + m + ''] = item.chipTotalPower
this.dataArr[0].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1]['' + m + ''] = item.componentTotalPower
})
// ele.titleValue
// .push({
// label: ele.titleValue,
// props: 'value' + index + 1,
// })
})
for (let i in this.dataArr[0]) {
console.log(this.dataArr[0]['item']);
this.chartMsg.series[0].name = this.dataArr[0]['item']
if (i.search('value') === 0) {
this.chartMsg.series[0].data.push({
name: this.dataArr[0]['item'],
value: this.dataArr[0][i]
value: this.dataArr[0][i] === 0 ? null : this.dataArr[0][i]
})
}
}
@@ -892,7 +928,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({
name: this.dataArr[1]['item'],
value: this.dataArr[1][i]
value: this.dataArr[1][i] === 0 ? null : this.dataArr[1][i]
})
}
}
@@ -955,28 +991,6 @@ export default {
border-radius: 8px;
padding: 16px 16px 0 16px;
margin: 8px 0px;
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.containerTop {
margin-top: 8px;
.smallTitle {
font-size: 16px;
@@ -991,7 +1005,24 @@ export default {
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
vertical-align: -9px;
}
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -5,15 +5,15 @@
</ButtonNav>
<!-- </div> -->
<div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle">
<el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期">
</el-date-picker>
@@ -84,8 +84,8 @@
:chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" />
</el-col> -->
</el-row>
<base-table :key="showTable" :span-method="objectSpanMethod" :table-props="tableProps" :page="listQuery.current"
:limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
:table-data="tableData" :max-height="tableH" />
</div>
<!-- <div class="containerBottom">
@@ -96,7 +96,7 @@
<script>
import { getProductionYieldSituationMWData, exportProductionYieldSituationMWData } from '@/api/report';
import bmSearchBar from "./components/bmSearchBar";
import BmLineBar from "./components/produceLineBar.vue";
import BmLineBar from "./components/produceLineYieldBar.vue";
import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";
import ButtonNav from '@/components/ButtonNav'
import moment from 'moment'
@@ -107,6 +107,7 @@ export default {
otherProps: [],
start: undefined,
end: undefined,
currentMenu:'邯郸',
title: '',
showTable:false,
listQuery: {
@@ -145,13 +146,12 @@ export default {
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{
id: 1, name: "综合良率", type: 2, color: "#FFCE6A" },
{
id: 2, name: "FTO投入", type: 1, color: "#8EF0AB" },
{id: 2, name: "FTO投入", type: 1, color: "#8EF0AB" },
{ id: 3, name: "芯片产量", type: 1, color: "#288AFF" },
{ id: 4, name: "标准组件产量", type: 1, color: "#64BDFF" },
{
id: 4, name: "标准组件产量", type: 1, color: "#64BDFF" },
id: 1, name: "综合良率", type: 2, color: "#FFCE6A"
},
],
legendListTarget: [
{
@@ -173,6 +173,14 @@ export default {
{
type: "value",
name: "单位/片",
splitNumber: 4,
// min: function (value) {//取最小值向下取整为最小刻度
// return Math.floor(value.min)
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks: true,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -182,10 +190,16 @@ export default {
{
type: 'value',
// inverse: true,
alignTicks: true,
// min: 0,
// max: 100,
// scale: true,
// interval: 25,//间隔
splitNumber: 4,
name: "单位/%",
nameTextStyle: {
fontSize: 12,
align: "right",
align: "left",
},
axisLabel: {},
}
@@ -196,7 +210,7 @@ export default {
// yAxisIndex: 0,
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -211,7 +225,7 @@ export default {
// type: 'bar',
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -232,6 +246,15 @@ export default {
{
type: "value",
name: "单位/片",
// min: function (value) {//取最小值向下取整为最小刻度
// return Math.floor(value.min)
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks:true,
// splitNumber: 4,
// scale: true,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -242,64 +265,73 @@ export default {
type: 'value',
// inverse: true,
name: "单位/%",
alignTicks: true,
// min: 0,
// max:100,
// scale: true,
// interval: 25,//间隔
splitNumber: 4,
nameTextStyle: {
fontSize: 12,
align: "right",
align: "left",
},
axisLabel: {},
}
],
series: [
{
name: "",
name: "FTO投入",
// yAxisIndex: 0,
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
yAxisIndex: 0,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value + "片";
return params.value
},
},
},
{
name: "",
name: "芯片产量",
// yAxisIndex: 0,
data: [],
yAxisIndex: 0,
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value + "片";
return params.value
},
},
},
{
name: "",
name: "标准组件产量",
// yAxisIndex: 0,
data: [],
type: "bar",
barWidth: 20,
yAxisIndex: 0,
barWidth: 16,
label: {
show: true,
position: [0, -16],
color: "#64BDFF",
formatter: function (params) {
return params.value+ "片";
return params.value
},
},
},
{
name: "",
name: "综合良率",
data: [],
type: "line",
// barWidth: 20,
// barWidth: 16,
symbol: "circle",
symbolSize: 6,
yAxisIndex: 1,
@@ -307,7 +339,7 @@ export default {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
return params.value.toFixed(2)
},
},
},
@@ -326,13 +358,6 @@ export default {
computed: {
tableProps() {
return [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
@@ -363,6 +388,9 @@ export default {
// 监听左侧菜单栏是否展开
type(val) {
},
currentMenu() {
this.getDataList()
},
isOpen(val) {
if (this.$route.name === "productionYield") {
@@ -388,12 +416,36 @@ export default {
// this.getOverView()
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList()
},
methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.endTime = null
this.listQuery.beginTime = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0;
@@ -512,8 +564,17 @@ export default {
this.chartMsg.series[1].data = []
this.chartMsg.series[2].data = []
this.chartMsg.series[3].data = []
this.chartMsgYearTarget.xData = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度!')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间')
return
}
let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
this.listQuery.factory = arr
@@ -541,12 +602,22 @@ export default {
if (this.listQuery.type == 2) {
res.data.list.forEach((ele, index) => {
let i = index + 1
this.chartMsg.xData.push(ele.titleValue)
// this.chartMsg.xData.push(ele.titleValue)
this.otherProps.push({
label: ele.titleValue,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i
})
})
res.data.list.slice(0,res.data.list.length-1).forEach((ele, index) => {
// let i = index + 1
this.chartMsg.xData.push(ele.titleValue)
// this.otherProps.push({
// label: ele.titleValue,
// filter: (val) => (val || val === 0 ? val : "-"),
// prop: 'value' + i
// })
})
this.chartMsgYearTarget.xData.push('FTO投入', '芯片产量', '标准组件产量', '综合良率')
res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele) => {
this.title = ele.titleValue
@@ -558,24 +629,36 @@ export default {
this.chartMsgYearTarget.series[0].data = [
{
value: item.ftoInput,
label: {
color: '#8EF0AB'
},
itemStyle: {
color: '#8EF0AB'
}
},
{
value: item.chipYield,
label: {
color: '#288AFF'
},
itemStyle: {
color: '#288AFF'
}
},
{
value: item.componentYield,
label: {
color: '#64BDFF'
},
itemStyle: {
color: '#64BDFF'
}
},
{
value: null,
label: {
color: '#FFCE6A'
},
itemStyle: {
color: '#FFCE6A'
}
@@ -583,24 +666,36 @@ export default {
this.chartMsgYearTarget.series[1].data = [
{
value: null,
label: {
color: '#8EF0AB'
},
itemStyle: {
color: '#8EF0AB'
}
},
{
value: null,
label: {
color: '#288AFF'
},
itemStyle: {
color: '#288AFF'
}
},
{
value: null,
label: {
color: '#64BDFF'
},
itemStyle: {
color: '#64BDFF'
}
},
{
value: item.ftoInput,
label: {
color: '#FFCE6A'
},
itemStyle: {
color: '#FFCE6A'
}
@@ -621,51 +716,40 @@ export default {
let m = 'value' + i
ele.productYieldDataVOList.forEach((item) => {
dataArr[0]['' + m + ''] = item.ftoInput
dataArr[0].factory = item.factory == 1 ? '邯郸' : '瑞昌'
dataArr[1].factory = item.factory == 1 ? '邯郸' : '瑞昌'
dataArr[2].factory = item.factory == 1 ? '邯郸' : '瑞昌'
dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
dataArr[1]['' + m + ''] = item.chipYield
dataArr[2]['' + m + ''] = item.componentYield
dataArr[3]['' + m + ''] = item.comprehensiveYieldRate
})
})
for (let i in dataArr[0]) {
this.chartMsg.series[0].name = dataArr[0]['item']
if (i.search('value') === 0) {
// for (let i in chartDataArr[0]) {
// this.chartMsg.series[0].name = chartDataArr[0]['item']
// if (i.search('value') === 0) {
// this.chartMsg.series[0].data.push({
// name: chartDataArr[0]['item'],
// value: chartDataArr[0][i] === 0 ? null : chartDataArr[0][i]
// })
// }
// }
res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
ele.productYieldDataVOList.forEach((item, index) => {
this.chartMsg.series[0].data.push({
name: dataArr[0]['item'],
value: dataArr[0][i]
name: ele.titleValue,
value: item.ftoInput === 0 ? null : item.ftoInput
})
}
}
for (let i in dataArr[1]) {
this.chartMsg.series[1].name = dataArr[1]['item']
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({
name: dataArr[1]['item'],
value: dataArr[1][i]
name: ele.titleValue,
value: item.chipYield === 0 ? null : item.chipYield
})
}
}
for (let i in dataArr[2]) {
this.chartMsg.series[2].name = dataArr[2]['item']
if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({
name: dataArr[2]['item'],
value: dataArr[2][i]
name: ele.titleValue,
value: item.componentYield === 0 ? null : item.componentYield
})
}
}
for (let i in dataArr[3]) {
this.chartMsg.series[3].name = dataArr[3]['item']
if (i.search('value') === 0) {
this.chartMsg.series[3].data.push({
name: dataArr[3]['item'],
value: dataArr[3][i]
name: ele.titleValue,
value: item.comprehensiveYieldRate === 0 ? null : item.comprehensiveYieldRate
})
}
}
})
})
} else {
res.data.list.forEach((ele, index) => {
let i = index + 1
@@ -695,7 +779,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[0].data.push({
name: dataArr[0]['item'],
value: dataArr[0][i]
value: dataArr[0][i] === 0 ? null : dataArr[0][i]
})
}
}
@@ -704,7 +788,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({
name: dataArr[1]['item'],
value: dataArr[1][i]
value: dataArr[1][i] === 0 ? null : dataArr[1][i]
})
}
}
@@ -713,7 +797,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({
name: dataArr[2]['item'],
value: dataArr[2][i]
value: dataArr[2][i] === 0 ? null : dataArr[2][i]
})
}
}
@@ -722,7 +806,7 @@ export default {
if (i.search('value') === 0) {
this.chartMsg.series[3].data.push({
name: dataArr[3]['item'],
value: dataArr[3][i]
value: dataArr[3][i] === 0 ? null : dataArr[3][i]
})
}
}
@@ -761,30 +845,45 @@ export default {
</script>
<style lang="scss" scoped>
.search {
// height: calc((100px));
background-color: #fff;
border-radius: 8px;
padding: 16px 16px 0 16px;
margin:8px 0 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
.containerTop {

View File

@@ -93,7 +93,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -107,7 +107,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -285,7 +285,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -299,7 +299,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -93,7 +93,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -107,7 +107,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -272,7 +272,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
// position: [-5, -16],
@@ -286,7 +286,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -96,7 +96,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -110,7 +110,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -273,7 +273,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -287,7 +287,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],

View File

@@ -83,7 +83,7 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: 0.5,
label: {
show: true,
@@ -99,7 +99,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -114,7 +114,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -129,7 +129,7 @@ export default {
name: "4",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -237,7 +237,7 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: 0.5,
label: {
show: true,
@@ -253,7 +253,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: "100%",
label: {
show: true,
@@ -269,7 +269,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -284,7 +284,7 @@ export default {
name: "4",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -376,7 +376,7 @@ export default {
name: "1",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
barGap: 0.5,
label: {
show: true,
@@ -392,7 +392,7 @@ export default {
name: "2",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -407,7 +407,7 @@ export default {
name: "3",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",
@@ -422,7 +422,7 @@ export default {
name: "4",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: "top",

View File

@@ -137,7 +137,7 @@
<!-- 添加或修改菜单对话框 -->
<base-dialog :dialogTitle="title" :dialogVisible="open" width="50%">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="24">
<el-form-item label="上级菜单">
@@ -205,6 +205,7 @@
v-model="form.sort"
controls-position="right"
:min="0"
style="width: 100%"
/>
</el-form-item>
</el-col>
@@ -331,8 +332,8 @@
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</base-dialog>
</div>
@@ -437,6 +438,12 @@ export default {
},
],
tableBtn: [
this.$auth.hasPermi("system:menu:create")
? {
type: "add",
btnName: "新增",
}
: undefined,
this.$auth.hasPermi("system:menu:update")
? {
type: "edit",
@@ -449,12 +456,6 @@ export default {
btnName: "删除",
}
: undefined,
this.$auth.hasPermi("system:menu:create")
? {
type: "add",
btnName: "新增",
}
: undefined,
].filter((v) => v),
tableProps,
heightNum: 210,

View File

@@ -83,7 +83,7 @@
{{ parseTime(form.startTime) }} | {{ form.duration }} ms
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="24">
<el-form-item label="操作结果:">
<div v-if="form.resultCode === 0">
正常 | {{ form.resultData }}

View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="user-container">
<!-- <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
<doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
<doc-alert
@@ -8,40 +8,43 @@
/> -->
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<el-row :gutter="8" class="user-box">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
<div class="user-box-left">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</div>
</el-col>
<!--用户数据-->
<el-col :span="20" :xs="24">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<!-- <el-form
<div class="user-box-right">
<search-bar
:formConfigs="formConfig"
ref="userSearchBarForm"
@headBtnClick="buttonClick"
/>
<!-- <el-form
:model="queryParams"
ref="queryForm"
size="small"
@@ -104,7 +107,7 @@
</el-form-item>
</el-form> -->
<!-- <el-row :gutter="10" class="mb8">
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
@@ -144,25 +147,25 @@
></right-toolbar>
</el-row> -->
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="userList"
:max-height="tableH"
@emitFun="handleStatusChange"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="220"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
<!-- <el-table v-loading="loading" :data="userList">
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="userList"
:max-height="tableH"
@emitFun="handleStatusChange"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="220"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
<!-- <el-table v-loading="loading" :data="userList">
<el-table-column
label="用户编号"
align="center"
@@ -288,18 +291,19 @@
</el-table-column>
</el-table> -->
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</div>
</el-col>
</el-row>
<!-- 添加或修改参数配置对话框 -->
<base-dialog :dialogTitle="title" :dialogVisible="open" width="50%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickname">
@@ -412,8 +416,8 @@
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</base-dialog>
@@ -448,7 +452,7 @@
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>导出模板</el-link
>
</div>
</el-upload>
@@ -606,6 +610,11 @@ export default {
name: "search",
color: "primary",
},
{
type: "button",
btnName: "重置",
name: "cancel",
},
{
type: this.$auth.hasPermiOr([
"system:user:create",
@@ -615,18 +624,11 @@ export default {
? "separate"
: "",
},
{
type: this.$auth.hasPermi("system:user:create") ? "button" : "",
btnName: "新增",
name: "addNew",
color: "success",
plain: true,
},
{
type: this.$auth.hasPermi("system:user:import") ? "button" : "",
btnName: "导入",
name: "import",
color: "warning",
color: "primary",
plain: true,
},
{
@@ -636,20 +638,15 @@ export default {
color: "primary",
plain: true,
},
{
type: this.$auth.hasPermi("system:user:create") ? "button" : "",
btnName: "新增",
name: "addNew",
color: "success",
plain: true,
},
],
tableBtn: [
this.$auth.hasPermi("system:user:update")
? {
type: "edit",
btnName: "修改",
}
: undefined,
this.$auth.hasPermi("system:user:delete")
? {
type: "delete",
btnName: "删除",
}
: undefined,
this.$auth.hasPermi("system:user:update-password")
? {
type: "reset",
@@ -662,6 +659,18 @@ export default {
btnName: "分配角色",
}
: undefined,
this.$auth.hasPermi("system:user:update")
? {
type: "edit",
btnName: "修改",
}
: undefined,
this.$auth.hasPermi("system:user:delete")
? {
type: "delete",
btnName: "删除",
}
: undefined,
].filter((v) => v),
tableProps,
// 遮罩层
@@ -803,6 +812,15 @@ export default {
case "search":
this.handleQuery(val);
break;
case "cancel":
this.$refs["userSearchBarForm"].resetForm();
this.queryParams.pageNo = 1;
this.queryParams.username = "";
this.queryParams.mobile = "";
this.queryParams.status = "";
this.queryParams.createTime = [];
this.getList();
break;
case "addNew":
this.handleAdd();
break;
@@ -1033,7 +1051,7 @@ export default {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 下载模板操作 */
/** 导出模板操作 */
importTemplate() {
importTemplate().then((response) => {
this.$download.excel(response, "用户导入模板.xls");
@@ -1090,11 +1108,19 @@ export default {
};
</script>
<style lang="scss" scoped>
.app-container {
.user-container {
width: 100%;
height: calc(100vh - 120px - 8px);
background-color: #fff;
border-radius: 8px;
padding: 8px;
background-color: #f2f4f9;
.user-box {
.user-box-left,
.user-box-right {
background-color: #fff;
padding: 8px;
border-radius: 8px;
height: calc(100vh - 128px);
}
}
}
</style>