Compare commits

...

61 Commits

Author SHA1 Message Date
cebe989fe4 Merge pull request 'zjl' (#13) from zjl into features/warning
Reviewed-on: #13
2024-09-18 14:57:23 +08:00
9b8e3734fa 1 2024-09-18 14:56:01 +08:00
904b9212b8 Merge branch 'features/warning' into zjl 2024-09-18 13:21:45 +08:00
zhp
1852bdc17f Merge pull request 'zhp' (#12) from zhp into features/warning
Reviewed-on: #12
2024-09-18 11:25:10 +08:00
‘937886381’
e2f8d9860a Merge branch 'features/warning' into zhp 2024-09-18 11:24:29 +08:00
‘937886381’
37c0c77078 修改 2024-09-18 11:23:50 +08:00
9382cb4cf5 Merge branch 'features/warning' into zjl 2024-09-18 11:10:53 +08:00
zhp
2325dc0373 Merge pull request '修改' (#11) from zhp into features/warning
Reviewed-on: #11
2024-09-18 10:59:38 +08:00
‘937886381’
196ad512af 修改 2024-09-18 10:55:34 +08:00
fa03a0b329 Merge branch 'features/warning' into zjl 2024-09-18 09:57:23 +08:00
zhp
29f8e96a2a Merge pull request 'zhp' (#10) from zhp into features/warning
Reviewed-on: #10
2024-09-18 09:55:13 +08:00
‘937886381’
aa86600a1a Merge branch 'features/warning' into zhp 2024-09-18 09:13:14 +08:00
‘937886381’
379de8fda0 修改 2024-09-18 09:12:26 +08:00
fa5cae9a78 Merge branch 'features/warning' into zjl 2024-09-18 08:32:31 +08:00
50aada1223 装软件 2024-09-18 08:30:49 +08:00
248fafdf2c Merge pull request 'zhp' (#9) from zhp into features/warning
Reviewed-on: #9
2024-09-15 13:14:52 +08:00
‘937886381’
9589fba7c2 Merge branch 'features/warning' into zhp 2024-09-14 17:10:30 +08:00
‘937886381’
0739f8cf00 修改 2024-09-14 17:09:38 +08:00
e1f95bd009 Merge pull request 'zhp' (#8) from zhp into features/warning
Reviewed-on: #8
2024-09-14 13:21:58 +08:00
‘937886381’
6de0fe4753 Merge branch 'features/warning' into zhp 2024-09-14 13:19:13 +08:00
‘937886381’
a8b5e57f38 修改 2024-09-14 13:18:13 +08:00
a4985a5379 Merge pull request 'zhp' (#7) from zhp into features/warning
Reviewed-on: #7
2024-09-13 16:58:48 +08:00
‘937886381’
f9dde6e159 Merge branch 'features/warning' into zhp 2024-09-13 16:53:19 +08:00
‘937886381’
b27d70f0fc 修改 2024-09-13 16:52:40 +08:00
fd34efc0b4 Merge pull request 'zhp' (#6) from zhp into features/warning
Reviewed-on: #6
2024-09-13 15:52:17 +08:00
‘937886381’
2d2d6d4c15 Merge branch 'features/warning' into zhp 2024-09-13 15:49:10 +08:00
‘937886381’
696d852cd2 修改 2024-09-13 15:47:43 +08:00
637f387f02 Merge pull request 'zhp' (#5) from zhp into features/warning
Reviewed-on: #5
2024-09-02 13:21:11 +08:00
‘937886381’
6a25d4e30d Merge branch 'features/warning' into zhp 2024-09-02 09:56:31 +08:00
‘937886381’
270ca5dce7 修改bug 2024-09-02 09:55:47 +08:00
fcb1549ee3 Merge pull request 'zhp' (#4) from zhp into features/warning
Reviewed-on: #4
2024-08-30 19:10:44 +08:00
‘937886381’
e4e9ba11c3 修改 2024-08-30 17:32:15 +08:00
‘937886381’
f702e950ac 修改 2024-08-30 17:17:45 +08:00
d7cc3deeee Merge pull request '溶液速度视频' (#3) from zjl into features/warning
Reviewed-on: #3
2024-07-22 15:29:05 +08:00
c635243357 溶液速度视频 2024-07-22 15:26:04 +08:00
1e64a4d0e2 Merge pull request '窑炉优化' (#2) from zjl into features/warning
Reviewed-on: #2
2024-07-19 16:33:43 +08:00
a15105a9b0 窑炉优化 2024-07-19 16:31:29 +08:00
bace9fa501 Merge pull request 'zjl' (#1) from zjl into features/warning
Reviewed-on: #1
2024-07-12 15:11:34 +08:00
c6cd097433 1优化 2024-07-12 14:52:07 +08:00
4d7af62305 窑炉优化 2024-07-12 14:12:10 +08:00
214e9fe892 底&顶ok 2024-07-10 15:39:02 +08:00
9968280724 7.9 2024-07-09 14:50:29 +08:00
lb
8b4322996e update 注释 2024-04-29 13:28:08 +08:00
lb
b325c3fc05 update 报警大小 2024-04-28 13:55:59 +08:00
lb
28c9c1906e update 烟气处理 2024-04-25 11:04:52 +08:00
lb
7ddae1b3a4 update videos 2024-04-25 10:01:25 +08:00
lb
61477cdd30 Merge branch 'features/warning' of http://git.picaiba.com/mt-fe-group/xuchang-new into features/warning 2024-04-25 09:44:40 +08:00
lb
6e5badf01a add video 2024-04-25 09:44:36 +08:00
gtz
311cdfc5f7 1' 2024-04-24 17:02:20 +08:00
lb
bc8b68e449 1 2024-04-24 16:58:38 +08:00
lb
024f4bcf14 1 2024-04-23 15:27:54 +08:00
lb
361aedd4ad done alarm 2024-04-23 15:26:55 +08:00
lb
60c6fdda79 1 2024-04-23 11:24:31 +08:00
lb
15708c0eef update 2024-04-23 09:33:41 +08:00
lb
2996c061dc merge bugfix 2024-04-22 16:58:15 +08:00
lb
9894aeca50 update WarnAlert 2024-04-19 17:03:43 +08:00
lb
9f7652d9f3 update ts->js 2024-04-19 16:55:10 +08:00
lb
e854b966dc add fake websocket server 2024-04-19 16:38:41 +08:00
lb
dff017a5a2 update 2024-04-19 16:11:10 +08:00
lb
e796a07e66 update Home Element Position 2024-04-16 10:28:14 +08:00
lb
43635ff398 add warn-alert 2024-04-15 16:18:21 +08:00
270 changed files with 9030 additions and 1215 deletions

2
.gitignore vendored
View File

@ -1,7 +1,7 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
**/node_modules
/.pnp
.pnp.js

219
package-lock.json generated
View File

@ -45,6 +45,7 @@
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"moment": "^2.30.1",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
@ -2562,6 +2563,7 @@
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
"integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
"deprecated": "Use @eslint/config-array instead",
"dependencies": {
"@humanwhocodes/object-schema": "^2.0.1",
"debug": "^4.1.1",
@ -2586,7 +2588,8 @@
"node_modules/@humanwhocodes/object-schema": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw=="
"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
"deprecated": "Use @eslint/object-schema instead"
},
"node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0",
@ -4004,10 +4007,6 @@
"integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
@ -4016,10 +4015,6 @@
"integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
@ -4028,10 +4023,6 @@
"integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
@ -4052,10 +4043,6 @@
"integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-svg-em-dimensions": {
@ -4064,10 +4051,6 @@
"integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-transform-react-native-svg": {
@ -4076,10 +4059,6 @@
"integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-transform-svg-component": {
@ -4088,10 +4067,6 @@
"integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-preset": {
@ -4110,10 +4085,6 @@
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/core": {
@ -4142,10 +4113,6 @@
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/plugin-jsx": {
@ -4205,89 +4172,6 @@
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@testing-library/dom": {
"version": "9.3.4",
"resolved": "https://registry.npmmirror.com/@testing-library/dom/-/dom-9.3.4.tgz",
"integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.1.3",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=14"
}
},
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"peer": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@testing-library/dom/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"peer": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@testing-library/dom/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"peer": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/@testing-library/dom/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"peer": true
},
"node_modules/@testing-library/dom/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"peer": true,
"engines": {
"node": ">=8"
}
},
"node_modules/@testing-library/dom/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"peer": true,
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@testing-library/jest-dom": {
"version": "5.17.0",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@ -9414,6 +9298,7 @@
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
"deprecated": "Glob versions prior to v9 are no longer supported",
"dependencies": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@ -10031,6 +9916,7 @@
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
"dependencies": {
"once": "^1.3.0",
"wrappy": "1"
@ -13718,6 +13604,14 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -15772,6 +15666,7 @@
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
"integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
"deprecated": "You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.\n\n(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)",
"engines": {
"node": ">=0.6.0",
"teleport": ">=0.2.0"
@ -17028,6 +16923,7 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"deprecated": "Rimraf versions prior to v4 are no longer supported",
"dependencies": {
"glob": "^7.1.3"
},
@ -18071,6 +17967,7 @@
"version": "7.1.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
"deprecated": "Glob versions prior to v9 are no longer supported",
"dependencies": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@ -18687,7 +18584,14 @@
"node_modules/typescript": {
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw=="
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/unbox-primitive": {
"version": "1.0.2",
@ -19609,6 +19513,7 @@
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",
"integrity": "sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==",
"deprecated": "It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained",
"dependencies": {
"workbox-background-sync": "6.6.0",
"workbox-core": "6.6.0",
@ -22649,73 +22554,6 @@
"loader-utils": "^2.0.0"
}
},
"@testing-library/dom": {
"version": "9.3.4",
"resolved": "https://registry.npmmirror.com/@testing-library/dom/-/dom-9.3.4.tgz",
"integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
"peer": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.1.3",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"peer": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"peer": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"peer": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"peer": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"peer": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"peer": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"@testing-library/jest-dom": {
"version": "5.17.0",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@ -29683,6 +29521,11 @@
"minimist": "^1.2.6"
}
},
"moment": {
"version": "2.30.1",
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

View File

@ -40,6 +40,7 @@
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"moment": "^2.30.1",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
@ -70,7 +71,9 @@
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
"server": "node websocket/server.js",
"test": "node scripts/test.js",
"ws": "node websocket/server.js"
},
"eslintConfig": {
"extends": [

View File

@ -29,6 +29,8 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- <div id="alarm-list-container"></div> -->
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-09-09 14:58:53
* @LastEditors: zhp
* @Description:
*/
import "./global.css";
import "./index.css";
import Head from "./components/Common/Company";
@ -10,8 +17,8 @@ import RulerContainer from "./components/Tools/Ruler";
import { Switch } from "antd";
import { createPortal } from "react-dom";
const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"];
const LUNBO_INTERVAL = 60 * 1000;
function App() {
const { styles, value, setValue } = useSlider(100);
const [navActive, setNavActive] = useState("窑炉总览");
@ -22,7 +29,7 @@ function App() {
if (lunbo) {
timer = setInterval(() => {
handleMenuChange(Menus[(Menus.indexOf(navActive) + 1) % Menus.length]);
}, 5000);
}, LUNBO_INTERVAL);
}
return () => {
clearInterval(timer);

View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>泡界线</title>
<defs>
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-790.000000, -134.000000)" fill-rule="nonzero">
<g id="编组-32" transform="translate(763.000000, 122.000000)">
<g id="泡界线" filter="url(#filter-1)" transform="translate(32.000000, 16.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M13.3807264,21 C13.3807264,20.2857143 13.2366352,19.6071429 12.9484529,18.9642857 C12.6602706,18.3214286 12.271851,17.7678571 11.783194,17.3035714 C11.2945371,16.8392857 10.7181724,16.4702381 10.0541002,16.1964286 C9.39002788,15.922619 8.68210177,15.7857143 7.93032183,15.7857143 C7.1785419,15.7857143 6.46435096,15.922619 5.78774901,16.1964286 C5.11114707,16.4702381 4.52851762,16.8392857 4.03986066,17.3035714 C3.5512037,17.7678571 3.16278407,18.3214286 2.87460176,18.9642857 C2.58641945,19.6071429 2.44232829,20.2857143 2.44232829,21 C2.44232829,21.7142857 2.58641945,22.3869048 2.87460176,23.0178571 C3.16278407,23.6488095 3.5512037,24.1964286 4.03986066,24.6607143 C4.52851762,25.125 5.11114707,25.4940476 5.78774901,25.7678571 C6.46435096,26.0416667 7.1785419,26.1785714 7.93032183,26.1785714 C8.68210177,26.1785714 9.39002788,26.0416667 10.0541002,25.7678571 C10.7181724,25.4940476 11.2945371,25.125 11.783194,24.6607143 C12.271851,24.1964286 12.6602706,23.6488095 12.9484529,23.0178571 C13.2366352,22.3869048 13.3807264,21.7142857 13.3807264,21 Z M25.6890346,26.9815668 C25.6890346,26.4408602 25.5790969,25.9247312 25.3592214,25.4331797 C25.139346,24.9416283 24.8354006,24.5176651 24.4473851,24.1612903 C24.0593697,23.8049155 23.606685,23.5222734 23.089331,23.3133641 C22.5719771,23.1044547 22.0287555,23 21.4596661,23 C20.8647091,23 20.3150206,23.1044547 19.8106005,23.3133641 C19.3061804,23.5222734 18.8664295,23.8049155 18.4913479,24.1612903 C18.1162663,24.5176651 17.8187878,24.9416283 17.5989124,25.4331797 C17.379037,25.9247312 17.2690993,26.4408602 17.2690993,26.9815668 C17.2690993,27.546851 17.379037,28.0691244 17.5989124,28.5483871 C17.8187878,29.0276498 18.1162663,29.4516129 18.4913479,29.8202765 C18.8664295,30.1889401 19.3061804,30.4777266 19.8106005,30.6866359 C20.3150206,30.8955453 20.8647091,31 21.4596661,31 C22.0287555,31 22.5719771,30.8955453 23.089331,30.6866359 C23.606685,30.4777266 24.0593697,30.1889401 24.4473851,29.8202765 C24.8354006,29.4516129 25.139346,29.0276498 25.3592214,28.5483871 C25.5790969,28.0691244 25.6890346,27.546851 25.6890346,26.9815668 Z M17.696147,17 C16.4405427,17 15.2705477,16.7763158 14.1861621,16.3289474 C13.1017765,15.8815789 12.152939,15.2715311 11.3396498,14.4988038 C10.5263606,13.7260766 9.88429021,12.8245614 9.41343857,11.7942584 C8.94258692,10.7639553 8.7071611,9.66586922 8.7071611,8.5 C8.7071611,7.33413078 8.94258692,6.22926635 9.41343857,5.1854067 C9.88429021,4.14154705 10.5263606,3.2400319 11.3396498,2.48086124 C12.152939,1.72169059 13.1017765,1.11842105 14.1861621,0.671052632 C15.2705477,0.223684211 16.4405427,0 17.696147,0 C18.923215,0 20.0789417,0.223684211 21.1633273,0.671052632 C22.2477129,1.11842105 23.1965503,1.72169059 24.0098396,2.48086124 C24.8231288,3.2400319 25.4651992,4.14154705 25.9360508,5.1854067 C26.4069025,6.22926635 26.6423283,7.33413078 26.6423283,8.5 C26.6423283,9.66586922 26.4069025,10.7639553 25.9360508,11.7942584 C25.4651992,12.8245614 24.8231288,13.7260766 24.0098396,14.4988038 C23.1965503,15.2715311 22.2477129,15.8815789 21.1633273,16.3289474 C20.0789417,16.7763158 18.923215,17 17.696147,17 Z M14.1533891,4.14285714 C13.5715236,4.14285714 13.0752266,4.33797909 12.6644981,4.728223 C12.2537695,5.1184669 12.0484053,5.59001161 12.0484053,6.14285714 C12.0484053,6.69570267 12.2537695,7.16724739 12.6644981,7.55749129 C13.0752266,7.94773519 13.5715236,8.14285714 14.1533891,8.14285714 C14.7352545,8.14285714 15.2315515,7.94773519 15.6422801,7.55749129 C16.0530086,7.16724739 16.2583729,6.69570267 16.2583729,6.14285714 C16.2583729,5.59001161 16.0530086,5.1184669 15.6422801,4.728223 C15.2315515,4.33797909 14.7352545,4.14285714 14.1533891,4.14285714 Z" id="形状" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>碹顶</title>
<defs>
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-1036.201540, -134.000000)" fill-rule="nonzero">
<g id="编组-33" transform="translate(1009.000000, 122.000000)">
<g id="碹顶" filter="url(#filter-1)" transform="translate(32.201540, 16.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<g id="编组" transform="translate(1.602174, 1.600000)">
<path d="M26.7803321,0.00434714257 L14.3978264,0.00434714257 C14.0276789,0.00434714257 13.7276151,0.304410971 13.7276151,0.674558462 C13.7276151,1.04470595 14.0276789,1.34476978 14.3978264,1.34476978 L26.7803321,1.34476978 C27.1504012,1.34476978 27.4503559,1.6447245 27.450356,2.01516858 L27.450356,26.7801799 C27.450356,27.150249 27.1504012,27.4502038 26.7803321,27.4502038 L2.01532077,27.4502038 C1.64525164,27.4502038 1.34529693,27.150249 1.3452969,26.7801799 L1.3452969,2.01966791 C1.3452969,1.98704784 1.34979621,1.95405281 1.35429555,1.92593205 L1.34492198,1.92593205 L1.34492198,0.121329488 C0.539761675,0.405340909 0.000936313498,1.16588532 0,2.01966791 L0,26.7846792 C0.00165189001,27.8970252 0.902974797,28.7983481 2.01532077,28.8 L26.7803321,28.8 C27.8926781,28.7983481 28.794001,27.8970252 28.7956529,26.7846792 L28.7956529,2.01966791 C28.794001,0.907321939 27.8926781,0.00599903259 26.7803321,0.00434714257 Z" id="路径" fill="url(#linearGradient-2)"></path>
<path d="M3.36475692,0 L11.5177045,0 C11.8929336,4.20938436e-17 12.1971168,0.304183249 12.1971168,0.679412302 C12.1971168,1.05464136 11.8929336,1.3588246 11.5177045,1.3588246 L3.36475692,1.3588246 C2.98952786,1.3588246 2.68534461,1.05464136 2.68534461,0.679412302 C2.68534461,0.304183249 2.98952786,4.59523059e-17 3.36475692,0 Z M24.7646364,26.1088159 L4.03026656,26.1088159 C3.28975336,26.1088159 2.68534461,25.5089065 2.68534461,24.763894 L2.68534461,3.59659181 C3.28975336,3.31988357 4.00664513,3.10916539 4.79890053,3.10916539 C7.19853826,3.10916539 7.19853826,5.03075029 9.59817599,5.03075029 C11.9978137,5.03075029 11.9978137,3.10916539 14.3974515,3.10916539 C16.7970892,3.10916539 16.7970892,5.03075029 19.196727,5.03075029 C21.5963647,5.03075029 21.5963647,3.10916539 23.9960024,3.10916539 C24.7833836,3.10916539 25.5006503,3.31538426 26.1099333,3.59659181 L26.1099333,24.763894 C26.1080777,25.5060501 25.5067931,26.1071671 24.7646364,26.1088159 Z M8.97788835,18.5660828 L13.265104,14.2788672 L13.265104,14.2788672 L13.265104,22.5359782 C13.265104,23.16146 13.7721572,23.6685132 14.397639,23.6685132 C15.0231207,23.6685132 15.5301739,23.16146 15.5301739,22.5359782 L15.5301739,14.2788672 L15.5301739,14.2788672 L19.8173896,18.5660828 C20.1948661,18.9435594 20.8068766,18.9435594 21.1843531,18.5660828 C21.5618297,18.1886063 21.5618297,17.5765958 21.1843531,17.1991193 L14.6320676,10.6468337 L14.6320676,10.6468337 L14.1632103,10.6468337 L7.61092477,17.1991193 C7.2334482,17.5765958 7.2334482,18.1886063 7.61092477,18.5660828 C7.98840134,18.9435594 8.60041178,18.9435594 8.97788835,18.5660828 Z M21.1928485,7.24922894 L7.60242938,7.24922894 C6.97694761,7.24922894 6.46989445,7.7562821 6.46989445,8.38176387 C6.46989445,9.00724564 6.97694761,9.5142988 7.60242938,9.5142988 L21.1928485,9.5142988 C21.8183303,9.5142988 22.3253835,9.00724564 22.3253835,8.38176387 C22.3253835,7.7562821 21.8183303,7.24922894 21.1928485,7.24922894 Z" id="形状" fill="url(#linearGradient-3)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>液位</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-799.000000, -252.000000)">
<g id="液位" transform="translate(799.000000, 252.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.3958148,25.0213482 L26.3958148,22.0000163 L22.4895185,22.0000163 L22.4895185,19.3333243 L26.3958148,19.3333243 L26.3958148,15.3333568 L22.4895185,15.3333568 L22.4895185,12.6666703 L26.3958148,12.6666703 L26.3958148,8.66669737 L22.4895185,8.66669737 L22.4895185,6.00001084 L26.3958148,6.00001084 L26.3958148,3.3333243 L29,3.3333243 L29,26.7639693 C29.4283704,27.1587024 29.7682222,27.5279873 30,27.81338 L28,29.5200093 C27.6430412,29.1042014 27.2518491,28.7205726 26.8307407,28.3733565 C26.0234444,27.7133314 25.25,27.3333514 24.6601481,27.3333514 C24.2564815,27.3333514 24.0754815,27.466699 23.4895556,28.186685 C22.4478889,29.4666854 21.7252593,30 20.319,30 C18.9127407,30 18.1914074,29.4666854 17.1484444,28.186685 C16.5625185,27.466699 16.3814815,27.3333514 15.9791481,27.3333514 C15.5754815,27.3333514 15.3945185,27.466699 14.8098889,28.186685 C13.7682222,29.4666854 13.0442593,30 11.6392963,30 C10.233037,30 9.51040741,29.4666854 8.46874074,28.186685 C7.88281481,27.466699 7.70048148,27.3333514 7.29814815,27.3333514 C6.66041448,27.3384964 6.04093705,27.5519777 5.52992593,27.9427075 C5.20962963,28.1773552 4.99607407,28.4040006 4.91274074,28.5186887 L4.77211111,28.681353 C4.40751852,29.0400186 4.09766667,29.3680022 3.91666667,29.569351 L2,27.7640384 C2.2924622,27.4428839 2.59290632,27.1294497 2.90103704,26.824044 C3.138,26.521357 3.50781481,26.1453593 4.013,25.7759986 C4.95048148,25.0866946 6.05337037,24.6666649 7.29814815,24.6666649 C8.70440741,24.6666649 9.42703704,25.2000173 10.4687407,26.4800178 C11.0546667,27.2000038 11.236963,27.3333514 11.6392963,27.3333514 C12.0416296,27.3333514 12.2226296,27.2000038 12.8085556,26.4800178 C13.8502593,25.2000173 14.5728889,24.6667028 15.9791481,24.6667028 C17.3854074,24.6667028 18.108037,25.2000173 19.1497037,26.4800178 C19.7356296,27.2000038 19.917963,27.3333514 20.318963,27.3333514 C20.7226667,27.3333514 20.9036296,27.2000038 21.4895556,26.4800178 C22.5312593,25.2000173 23.2538889,24.6667028 24.6601481,24.6667028 C25.2460741,24.6667028 25.8254815,24.7920101 26.3958148,25.0213482 Z M5.53165581,13.8320585 C5.53165581,9.35334649 11.5772114,2 12.0420262,2 C12.506841,2 18.5525447,9.35330856 18.5525447,13.8319827 C18.5525447,17.6026933 15.622841,20.666692 12.0421003,20.666692 C8.46132247,20.666692 5.53165581,17.6027312 5.53165581,13.8320585 Z" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) "></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>池底</title>
<defs>
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-1036.000000, -247.000000)" fill-rule="nonzero">
<g id="编组-33备份" transform="translate(1009.000000, 236.000000)">
<g id="池底" filter="url(#filter-1)" transform="translate(32.000000, 15.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<g id="编组" transform="translate(1.602174, 1.600000)">
<path d="M26.7803321,0.00434714257 L14.3978264,0.00434714257 C14.0276789,0.00434714257 13.7276151,0.304410971 13.7276151,0.674558462 C13.7276151,1.04470595 14.0276789,1.34476978 14.3978264,1.34476978 L26.7803321,1.34476978 C27.1504012,1.34476978 27.4503559,1.6447245 27.450356,2.01516858 L27.450356,26.7801799 C27.450356,27.150249 27.1504012,27.4502038 26.7803321,27.4502038 L2.01532077,27.4502038 C1.64525164,27.4502038 1.34529693,27.150249 1.3452969,26.7801799 L1.3452969,2.01966791 C1.3452969,1.98704784 1.34979621,1.95405281 1.35429555,1.92593205 L1.34492198,1.92593205 L1.34492198,0.121329488 C0.539761675,0.405340909 0.000936313498,1.16588532 0,2.01966791 L0,26.7846792 C0.00165189001,27.8970252 0.902974797,28.7983481 2.01532077,28.8 L26.7803321,28.8 C27.8926781,28.7983481 28.794001,27.8970252 28.7956529,26.7846792 L28.7956529,2.01966791 C28.794001,0.907321939 27.8926781,0.00599903259 26.7803321,0.00434714257 Z" id="路径" fill="url(#linearGradient-2)"></path>
<path d="M3.36475692,0 L11.5177045,0 C11.8929336,4.20938436e-17 12.1971168,0.304183249 12.1971168,0.679412302 C12.1971168,1.05464136 11.8929336,1.3588246 11.5177045,1.3588246 L3.36475692,1.3588246 C2.98952786,1.3588246 2.68534461,1.05464136 2.68534461,0.679412302 C2.68534461,0.304183249 2.98952786,4.59523059e-17 3.36475692,0 Z M24.7646364,26.1088159 L4.03026656,26.1088159 C3.28975336,26.1088159 2.68534461,25.5089065 2.68534461,24.763894 L2.68534461,3.59659181 C3.28975336,3.31988357 4.00664513,3.10916539 4.79890053,3.10916539 C7.19853826,3.10916539 7.19853826,5.03075029 9.59817599,5.03075029 C11.9978137,5.03075029 11.9978137,3.10916539 14.3974515,3.10916539 C16.7970892,3.10916539 16.7970892,5.03075029 19.196727,5.03075029 C21.5963647,5.03075029 21.5963647,3.10916539 23.9960024,3.10916539 C24.7833836,3.10916539 25.5006503,3.31538426 26.1099333,3.59659181 L26.1099333,24.763894 C26.1080777,25.5060501 25.5067931,26.1071671 24.7646364,26.1088159 Z M19.8173896,12.3516593 L15.5301739,16.638875 L15.5301739,16.638875 L15.5301739,8.38176387 C15.5301739,7.7562821 15.0231207,7.24922894 14.397639,7.24922894 C13.7721572,7.24922894 13.265104,7.7562821 13.265104,8.38176387 L13.265104,16.638875 L13.265104,16.638875 L8.97788835,12.3516593 C8.60041178,11.9741827 7.98840134,11.9741827 7.61092477,12.3516593 C7.2334482,12.7291358 7.2334482,13.3411463 7.61092477,13.7186229 L14.1632103,20.2709084 L14.1632103,20.2709084 L14.6320676,20.2709084 L21.1843531,13.7186229 C21.5618297,13.3411463 21.5618297,12.7291358 21.1843531,12.3516593 C20.8068766,11.9741827 20.1948661,11.9741827 19.8173896,12.3516593 Z M7.60242938,23.6685132 L21.1928485,23.6685132 C21.8183303,23.6685132 22.3253835,23.16146 22.3253835,22.5359782 C22.3253835,21.9104965 21.8183303,21.4034433 21.1928485,21.4034433 L7.60242938,21.4034433 C6.97694761,21.4034433 6.46989445,21.9104965 6.46989445,22.5359782 C6.46989445,23.16146 6.97694761,23.6685132 7.60242938,23.6685132 Z" id="形状" fill="url(#linearGradient-3)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/Icon/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 472 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1021 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/Icon/kilnTop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 516 B

BIN
src/assets/blueBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
src/assets/dayNight.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 MiB

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
src/assets/forecastBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/large.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/lastBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/assets/lefTopBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/modelButton.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/paramsData.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
src/assets/pointBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
src/assets/pointsBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/assets/seasonActive.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/seasonChange.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/assets/tempIntr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/toFourBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
src/assets/warn-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/warn-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -109,6 +109,7 @@ function WindFrequence(props) {
},
};
} else {
console.log('runstate changeD!......')
dataList =
runState != null
? Object.keys(runState).map((fan) => ({

View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/forecastChartBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
}

View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

View File

@ -0,0 +1,6 @@
.bottomBarItem {
background: url(../../../assets/forecastBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
height: 422px;
}

View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/leftMiddleBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
}

View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

View File

@ -0,0 +1,6 @@
.bottomBarItem {
background: url(../../../assets/lefTopBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
height: 100%;
}

View File

@ -36,7 +36,7 @@ export default function CompanyName() {
</div>
<div>
<h2 className={cls.TopTitleText}>
许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线{' '}
许昌安彩新能科技&ensp;&ensp;许昌安彩窑炉生产指挥调度中心{' '}
</h2>
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
</div>

View File

@ -38,7 +38,7 @@
.TopSideLeftTxt {
margin-right: 120px;
margin-top: 15px;
color: rgb(255, 255, 255, 0.6);
color: rgb(255, 255, 255, 0.8);
font-size: 20px;
font-weight: 300px;
letter-spacing: 1px;

View File

@ -57,7 +57,7 @@ function WindFrequence(props) {
currentTempList[1 + lines.indexOf(dataSource) + "#"]) ||
[]
);
}, [dataSource]);
}, [dataSource, currentTempList]);
return (
<GraphBase

View File

@ -35,10 +35,10 @@ const EnergyCostRealtime = () => {
paddingRight: "6px",
}}
>
余热发电(实时)
余热发电(昨日)
</i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
</span>
</div>
@ -66,7 +66,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px",
}}
>
水耗量
水耗量(昨日)
</i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
@ -80,7 +80,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px",
}}
>
天然气I
天然气I(累计)
</i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{energyInfo?.ngQty1 || "0Nm³"}
@ -94,7 +94,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px",
}}
>
电耗量
电耗量(昨日)
</i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
@ -108,7 +108,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px",
}}
>
天然气II
天然气II(累计)
</i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{energyInfo?.ngQty2 || "0Nm³"}

View File

@ -0,0 +1,143 @@
import cls from "./leftbox.module.scss";
import React, { useState, useContext, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import icon1 from "../../../assets/CenterChart1icon1.svg";
import icon2 from "../../../assets/CenterChart1icon2.svg";
import icon3 from "../../../assets/CenterChart1icon3.svg";
import icon4 from "../../../assets/CenterChart1icon4.svg";
// import icon4 from "../../../assets/CenterChart2icon4.svg";
import useTimeCounter from "../../../hooks/useTimeCounter";
const FireInfo = () => {
// const dispatch = useDispatch();
const KilnInfo = useSelector((state) => state.kiln);
// const time = KilnInfo.lastFireChangeTime || "00";
// const minsec = useTimeCounter(time);
// let [min, sec] = [0, 0];
// if (minsec) {
// min = minsec[0];
// sec = minsec[1];
// }
// useEffect(() => {
// const restTime = ctx?.runState?.lastFireChangeTime;
// if (restTime == null) return;
// let timer = null;
// if (//.test(restTime) && //.test(restTime)) {
// let [min, sec] = restTime.replace(//, ":").replace(//, "").split(":");
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// } else if (//.test(restTime)) {
// let sec,
// min = restTime.replace(//, ":");
// sec = 0;
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// } else if (//.test(restTime)) {
// let min,
// sec = restTime.replace(//, "");
// min = 0;
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// }
// return () => {
// clearInterval(timer);
// };
// }, [ctx?.runState?.lastFireChangeTime]);
// useEffect(() => {
// setInterval(() => {
// dispatch({
// type: "fireInfo/setFireInfo",
// payload: {
// fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
// Math.random() * 10
// )}`,
// fireDirection: Math.random * 10 < 5 ? "" : "西",
// lastFireChangeTime: `${Math.ceil(Math.random() * 60)}${Math.ceil(
// Math.random() * 50
// )}`,
// },
// });
// }, 10000);
// }, []);
const data = [
{
icon: icon1,
label: "泡界线",
// value: ctx?.runState?.fireChangeTime || "00:00",
// value: KilnInfo.fireChangeTime || "00:00",
},
{
icon: icon2,
label: "磴顶加权温度",
// value: `${time[0]}${time[1]}`,
value: KilnInfo.topTemp|| "℃",
},
{
icon: icon3,
label: "液位",
// value: ctx?.runState?.fireDirection || "",
value: KilnInfo.liquidLevel || "0",
},
{
icon: icon4,
label: "池底加权温度",
// value: ctx?.runState?.fireDirection || "",
value: KilnInfo.meltTemp || "℃",
},
];
return (
<div className={`${cls.leftbox}`}>
{data.map((item) => (
<div className={cls.box} key={item.label}>
<img src={item.icon} alt="Error" className="box__logo" />
<div className={cls.box__inner}>
<h2 className={cls.box__label}>{item.label}</h2>
<h2 className={cls.box__value}> {item.value}</h2>
</div>
</div>
))}
</div>
);
};
export default FireInfo;

View File

@ -0,0 +1,41 @@
.leftbox {
// height: 128px;
height: 230px;
display: flex;
width: 640px;
flex-wrap: wrap;
.box {
margin-right: 16px;
width: 272px;
height: 100px;
padding: 12px 16px;
background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
letter-spacing: 2px;
align-items: flex-start;
// flex-wrap: wrap;
user-select: none;
.box__inner {
padding-top: 12px;
margin-left: 20px;
.box__label {
color: #fffa;
font-size: 18px;
line-height: 1;
margin-left: 8px;
}
.box__value {
color: #fff;
font-weight: 400;
margin-left: 8px;
font-size: 34px;
line-height: 54px;
}
}
}
}

View File

@ -44,6 +44,7 @@ function GraphBase(props) {
selectWidth,
legend,
} = props;
const descSmall = props.descSmall || false;
const iconSrc = useIcon(icon);
const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
const [showChart, setShowChart] = useState(true);
@ -72,9 +73,9 @@ function GraphBase(props) {
<span
style={{
color: "#fff",
fontSize: "14px",
fontSize: "calc(14px * var(--scale))",
lineHeight: 1,
paddingLeft: "12px",
paddingLeft: "calc(12px * var(--scale))",
}}
>
- -
@ -105,7 +106,7 @@ function GraphBase(props) {
<div className={cls.graphBaseTitle}>
<img src={iconSrc} alt="#" />
<h2>{title}</h2>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
{desc && <div className={`${cls.graphBaseDesc} ${descSmall ? cls.graphBaseDescSmall : ''}`}>{desc}</div>}
</div>
<div className={cls.graphBaseContent}>
{switchOptions && (

View File

@ -93,6 +93,11 @@
color: #76fff9;
}
.graphBaseDescSmall {
font-size: 16px;
color: #76fff9;
}
.graphBaseSwitch {
position: absolute;
top: 30px;

View File

@ -9,6 +9,7 @@
.xc-date-selector-menu .ant-select-item-option-content {
text-align: center;
font-size: calc(14px * var(--scale));
}
.xc-date-selector-menu .ant-select-item-option-selected {
@ -20,10 +21,16 @@
background-color: #02457E !important;
color: #fff !important;
}
.xc-date-selector-menu .ant-select-item-option {
/* padding: 5px 8px; */
padding: .3em .35em;
min-height: unset;
}
/*
.ant-select-selector::after {
content: '\25BC' !important;
visibility: visible !important;
visibility: visible !important; L
position: absolute;
top: 2px;
right: 22px;

View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:08:32
* @LastEditTime: 2024-08-30 09:50:51
* @LastEditors: zhp
* @Description:
*/
import cls from "./kiln.module.scss";
import Container from "../../Container";
import { useSelector } from "react-redux";
@ -14,7 +21,7 @@ export default function Kiln() {
return (
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
<div className={cls.leftBar__top__content}>
{infos.map((item) => (
{infos.slice(0,infos.length-1).map((item) => (
<div key={item.label} className={cls.info__item}>
<span className={cls.label}>{item.label}</span>
<span className={cls.value}>{item.value}</span>

View File

@ -1,5 +1,4 @@
import * as echarts from "echarts";
import { randomInt } from "../../../../utils";
export default function getOptions(seriesData, name) {
const colors = [

View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-09-09 15:00:13
* @LastEditors: zhp
* @Description:
*/
import { useCallback, useEffect, useState } from "react";
import cls from "./index.module.scss";
@ -5,6 +12,7 @@ export default function CenterMenu({ active, onChangeActive }) {
const menuList = [
["窑炉总览", "/kilnSummary"],
["窑炉内部", "/kilnInner"],
["AI窑炉", "/kilnOptimize"],
["退火监测", "/stopFire"],
["质检统计", "/quailtyCheck"],
["能耗分析", "/energyCost"],

View File

@ -2,7 +2,7 @@
position: fixed;
top: 120px;
// left: 1340px;
left: 1460px;
left: 1338px;
color: white;
z-index: 10000;
}

View File

@ -11,10 +11,10 @@ const SmokeHandleTable = () => {
<div className={cls.info__item}>
氮氧化物浓度: {(+smokeInfo?.NOX_float)?.toFixed(2) || 0}mg/
</div>
<div className={cls.info__item}>
<div className={cls.info__item} style={{ gridColumn: "span 2" }}>
二氧化硫浓度: {(+smokeInfo?.SO2_float)?.toFixed(2) || 0}mg/
</div>
<div className={cls.info__item}>
<div className={cls.info__item + " " + cls.disabled}>
颗粒物浓度: {(+smokeInfo?.dust_float)?.toFixed(2) || 0}mg/
</div>
</div>

View File

@ -33,9 +33,9 @@ const SmokeTrendChart = (props) => {
switch (period) {
case "day":
setDesc(
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
dayjs().add(1, "day").format("YYYY.MM.DD") +
" 7点"
);
break;

View File

@ -1,29 +1,36 @@
.smokeHandle {
// background: #b730305c;
background: url(../../../assets/smoke.png) no-repeat;
background-size: 100% 100%;
width: 626px;
height: 490px;
.smokeHandle__content {
margin-top: 8px;
}
// background: #b730305c;
background: url(../../../assets/smoke.png) no-repeat;
background-size: 100% 100%;
width: 626px;
height: 490px;
.smokeHandle__content {
margin-top: 8px;
}
}
.info__item {
border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
height: 32px;
font-size: 16px;
letter-spacing: 1.43px;
line-height: 32px;
text-align: center;
user-select: none;
border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
height: 32px;
font-size: 16px;
letter-spacing: 1.43px;
line-height: 32px;
text-align: center;
user-select: none;
}
.info__item_groups {
margin-bottom: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-bottom: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.disabled {
display: none;
pointer-events: none;
opacity: 0.5;
color: transparent;
}

View File

@ -1,18 +1,30 @@
import BlueRect from "../BlueRect";
import { useSelector } from "react-redux";
import { motion, AnimatePresence } from "framer-motion";
import { useEffect, useState } from "react";
const blueTe = [
"TE401",
"TE402",
"TE403",
"PE401",
"PE402",
"PE403",
];
const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];
function TemperatureBottom(props) {
const tempBottom = useSelector((state) => state.temperature.bottom);
const speed = props.speed;
const floor = props.floor;
const [speedAn, setSpeedAn] = useState({});
useEffect(() => {
// 23
if (speed === "f") {
setSpeedAn({});
} else {
if (floor === 2) {
setSpeedAn({
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 1.8 },
});
} else {
setSpeedAn({});
}
}
}, [floor]);
return (
<motion.div
@ -24,15 +36,17 @@ function TemperatureBottom(props) {
width: "100%",
height: "80vh",
zIndex: "-1",
...props.style
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
...props.style,
}}
animate={speedAn}
>
{Object.keys(tempBottom).map((d) => (
<BlueRect title={d} key={d + Math.random()} value={tempBottom[d]} blue={blueTe.includes(d)} />
<BlueRect
title={d}
key={d + Math.random()}
value={tempBottom[d]}
blue={blueTe.includes(d)}
/>
))}
</motion.div>
);

View File

@ -0,0 +1,58 @@
/*
* @Author: zhp
* @Date: 2024-08-27 09:22:58
* @LastEditTime: 2024-08-30 09:55:56
* @LastEditors: zhp
* @Description:
*/
import BlueRect from "../forecastRect";
import { useSelector } from "react-redux";
import { motion, AnimatePresence } from "framer-motion";
const blueTe = [
"TE271",
"TE272",
"TE273",
"TE274",
"TE275",
"TE276",
"TE277",
"TE278",
"TE279",
"TE280",
];
function TemperatureTop(props) {
const tempTop = useSelector((state) => state.temperature.top);
console.log('tempTop',tempTop);
return (
<motion.div
className="temperature-top"
style={{
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "80vh",
zIndex: "-1",
...props.style,
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 1.5 },
}}
>
{Object.keys(tempTop).map((d) => (
<BlueRect
title={d}
key={d + Math.random()}
value={tempTop[d]}
blue={blueTe.includes(d)}
/>
))}
</motion.div>
);
}
export default TemperatureTop;

View File

@ -28,15 +28,20 @@ function TemperatureTop(props) {
width: "100%",
height: "80vh",
zIndex: "-1",
...props.style
...props.style,
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
transition: { duration: 0.3, delay: 1.5 },
}}
>
{Object.keys(tempTop).map((d) => (
<BlueRect title={d} key={d + Math.random()} value={tempTop[d]} blue={blueTe.includes(d)} />
<BlueRect
title={d}
key={d + Math.random()}
value={tempTop[d]}
blue={blueTe.includes(d)}
/>
))}
</motion.div>
);

View File

@ -33,10 +33,9 @@ function FaultTotal(props) {
// time hint
let timeDesc = "";
const now = new Date();
switch (currentSelect) {
case "日":
timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点";
timeDesc = dayjs().format('YYYY.MM.DD') + " 7点 - " + dayjs().add(1, 'day').format('YYYY.MM.DD') + " 7点";
break;
case "周":
timeDesc = dayjs().subtract(7, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
@ -52,7 +51,6 @@ function FaultTotal(props) {
<GraphBase
icon="chart"
title="产线缺陷统计"
dateOptions={["日", "周", "月", "年"]}
defaultSelect={currentSelect}
onDateChange={handleDateChange}
size={bgSize}

View File

@ -3,8 +3,8 @@ import GraphBase from "../GraphBase";
import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { randomInt } from "../../../utils";
import * as echarts from "echarts";
import dayjs from "dayjs";
function FaultType(props) {
const [init, setInit] = useState(true);
@ -17,6 +17,11 @@ function FaultType(props) {
: [];
const lines = currentStatistic.map((item) => item.name);
const CHART_TYPE = "line"; // "pie" | "line";
const timestr =
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().add(1, "d").format("YYYY.MM.DD") +
" 7点";
useEffect(() => {
if (init == false) return;
@ -47,6 +52,8 @@ function FaultType(props) {
<GraphBase
icon="default"
title="产线当日缺陷分类"
desc={timestr}
descSmall={true}
dateOptions={[...lines]}
defaultSelect={currentLine}
onDateChange={handleLineChange}
@ -146,7 +153,7 @@ function getOptions(data, chart_type) {
axisPointer: {
type: "shadow",
},
symbol: 'rect',
symbol: "rect",
className: "xc-chart-tooltip",
// backgroundColor: ''
},
@ -210,7 +217,9 @@ function getOptions(data, chart_type) {
color: "#fffc",
},
data: (dataList || []).map((item) =>
item.value == null || isNaN(+item.value) ? null : (+item.value).toFixed(0)
item.value == null || isNaN(+item.value)
? null
: (+item.value).toFixed(0)
),
},
],

View File

@ -29,9 +29,9 @@ const GoodRateChart = (props) => {
}
const [timestr, setTimestr] = useState(
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
dayjs().add(1, "day").format("YYYY.MM.DD") +
" 7点"
);
function handleDateChange(value) {
@ -40,9 +40,9 @@ const GoodRateChart = (props) => {
switch (value) {
case "日":
setTimestr(
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
dayjs().add(1, "day").format("YYYY.MM.DD") +
" 7点"
);
break;

View File

@ -0,0 +1,40 @@
// import cls from "./index.module.css";
import "./video-monitor.css";
function VideoMonitor(props) {
return (
<div className="video-monitor">
<h2>泡界线监控</h2>
<div className="video-container">
<div>
{/* <video muted autoPlay loop src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video> */}
<img
style={{
width: "100%",
height: "100%",
display: "block",
margin: "auto",
backgrounColor: "hsl(0, 0%, 25%)",
}}
src="http://10.70.180.10:8001/video_feed"
></img>
</div>
<div>
{/* <video muted autoPlay loop src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"></video> */}
<img
style={{
width: "100%",
height: "100%",
display: "block",
margin: "auto",
backgrounColor: "hsl(0, 0%, 25%)",
}}
src="http://10.70.180.10:8000/video_feed"
></img>
</div>
</div>
</div>
);
}
export default VideoMonitor;

View File

@ -0,0 +1,35 @@
.video-monitor {
display: flex;
flex-direction: column;
margin-left: 80px;
height: 200px;
width: 500px;
}
.video-monitor > h2 {
margin: 0;
padding: 10px 0;
background: #16253c;
color: #fff;
font-weight: 400;
letter-spacing: 2px;
font-size: 18px;
text-align: center;
}
.video-monitor > .video-container {
display: flex;
gap: 8px;
flex: 1;
max-height: 150px;
}
.video-container > div {
flex: 1;
height: 100%;
background: #ccc1;
}
.video-container > div > video {
width: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,130 @@
import WarnAlert from ".";
import { useSelector } from "react-redux";
import posMap from "./position.json";
const total = `AN_1_1,助燃风故障报警
AN_1_2,压延机冷却风故障报警
AN_1_3,L吊墙冷却风机故障报警
AN_1_4,熔化带及部分澄清部冷却风机故障报警
AN_2_1,澄清带池壁冷却风机故障报警
AN_2_2,钢碴碴冷却风机故障报警
AN_2_3,支通路拐角冷却风机报警
AN_2_4,吊墙吊钩砖结构温升报警
AN_3_1,深层水包冷却水温升报警
AN_3_2,深层水包冷却水断水报警
AN_3_3,卡脖吊平冷却水断水报警
AN_3_4,卡脖吊平喧冷却水温升报警
AN_4_1,液面计冷却水断水报警
AN_4_2,液面计冷却水温升报警
AN_4_3,循环水入口压力低报警
AN_4_4,天然气压力高低报警
AN_5_1,助燃风风压低报警
AN_5_2,净化压缩气压力低报警
AN_5_3,普通压缩空气压力高低报警
AN_5_4,焦炉煤气气压力高低报警
AN_6_1,换向过程故障报警
AN_6_2,空交机换向不到位报警
AN_6_3,投料机故障报警
AN_6_4,备用
AN_7_1,1#压延机冷却水断水报警
AN_7_2,1#压延机冷却水温升报警
AN_7_3,1#过渡辊台冷却水断水报警
AN_7_4,1过渡辊台冷却水温升报警
AN_8_1,1#线唇砖冷却水断水报警
AN_8_2,1#线唇砖冷却水温升报警
AN_8_3,1#退火窑A区风机报警
AN_8_4,1#退火窑B区风机报警
AN_9_1,1#退火窑c区风机报警
AN_9_2,1#退火窑Ret1区风机报警
AN_9_3,1#退火窑Ret2区风机报警
AN_9_4,1#退火窑F1区风机报警
AN_10_1,1#退火窑F2区风机报警
AN_10_2,1#主传动报警
AN_10_3,1#压延机报警
AN_10_4,备用
AN_11_1,2#压延机冷却水断水报警
AN_11_2,2#压延机冷却水温升报警
AN_11_3,2#过渡辊台冷却水断水报警
AN_11_4,2#过渡辊台冷却水温升报警
AN_12_1,2#线唇砖冷却水断水报警
AN_12_2,2#线唇砖冷却水温升报警
AN_12_3,2#退火窑A区风机报警
AN_12_4,2#退火窑B区风机报警
AN_13_1,2#退火窑c区风机报警
AN_13_2,2#退火窑Ret1区风机报警
AN_13_3,2#退火窑Ret2区风机报警
AN_13_4,2#退火窑F1区风机报警
AN_14_1,2#退火窑F2区风机报警
AN_14_2,2#主传动报警
AN_14_3,2#压延机报警
AN_14_4,备用
AN_15_1,3#压延机冷却水断水报警
AN_15_2,3压延机冷却水温升报警
AN_15_3,3#过渡辊台冷却水断水报警
AN_15_4,3#过渡辊台冷却水温升报警
AN_16_1,3#线唇砖冷却水断水报警
AN_16_2,3#线唇砖冷却水温升报警
AN_16_3,3#退火窑A区风机报警
AN_16_4,3#退火窑B区风机报警
AN_17_1,3#退火窑c区风机报警
AN_17_2,3#退火窑Ret1区风机报警
AN_17_3,3#退火窑Ret2区风机报警
AN_17_4,3#退火窑F1区风机报警
AN_18_1,3#退火窑F2区风机报警
AN_18_2,3#主传动报警
AN_18_3,3#压延机报警
AN_18_4,备用
AN_19_1,4#压延机冷却水断水报警
AN_19_2,4压延机冷却水温升报警
AN_19_3,4#过渡辊台冷却水断水报警
AN_19_4,4#过渡辊台冷却水温升报警
AN_20_1,4#线唇砖冷却水断水报警
AN_20_2,4#线唇砖冷却水温升报警
AN_20_3,4#退火窑A区风机报警
AN_20_4,4#退火窑B区风机报警
AN_21_1,4#退火窑c区风机报警
AN_21_2,4#退火窑Ret1区风机报警
AN_21_3,4#退火窑Ret2区风机报警
AN_21_4,4#退火窑F1区风机报警
AN_22_1,4#退火窑F2区风机报警
AN_22_2,4#主传动报警
AN_22_3,4#压延机报警
AN_23_1,5#压延机冷却水断水报警
AN_23_2,5#压延机冷却水温升报警
AN_23_3,5#过渡辊台冷却水断水报警
AN_23_4,5#过渡台冷却水温升报警
AN_24_1,5#线唇砖冷却水断水报警
AN_24_2,5#线唇砖冷却水温升报警
AN_24_3,5#退火窑A区风机报警
AN_24_4,5#退火窑B区风机报警
AN_25_1,5#退火窑c区风机报警
AN_25_2,5#退火窑Ret1区风机报警
AN_25_3,5#退火窑Ret2区风机报警
AN_25_4,5#退火窑F1区风机报警
AN_26_1,5#退火窑F2区风机报警
AN_26_2,5#主传动报警
AN_26_3,5#压延机报警
`;
function AlarmListContainer(props) {
const alarmList = useSelector((state) => state.alarm.list);
// const alarmList = total
// .split("\n")
// .filter((str) => str.trim())
// .map((item) => ({
// id: item.split(",")[0],
// title: item.split(",")[0],
// content: item.split(",")[1],
// }));
return alarmList.map((alarm) => (
<WarnAlert
key={alarm.id}
title={alarm.title}
content={alarm.content}
x={posMap[alarm.title]?.x || 0}
y={posMap[alarm.title]?.y || 0}
/>
));
}
export default AlarmListContainer;

View File

@ -0,0 +1,18 @@
// import cls from "./index.module.css";
import "./warn-alert.css";
import AlertIcon from "./warn-icon.png";
function WarnAlert(props) {
const { x, y, title, content } = props;
return (
<div className="warn-alert" style={{ top: `${y}px`, left: `${x}px` }}>
<h1 className="">
<img src={AlertIcon} width={24} alt="icon" />
{title || "test"}
</h1>
<p>{content || "Lorem ipsum dolor sit amet consectetur."}</p>
</div>
);
}
export default WarnAlert;

View File

@ -0,0 +1,104 @@
{
"AN_1_1": { "x": 650, "y": 645 },
"AN_1_2": { "x": 1450, "y": 540 },
"AN_1_3": { "x": 640, "y": 285 },
"AN_1_4": { "x": 720, "y": 645 },
"AN_2_1": { "x": 1250, "y": 540 },
"AN_2_2": { "x": 1200, "y": 540 },
"AN_2_3": { "x": 1460, "y": 410 },
"AN_2_4": { "x": 650, "y": 420 },
"AN_3_1": { "x": 1360, "y": 380 },
"AN_3_2": { "x": 1360, "y": 380 },
"AN_3_3": { "x": 1360, "y": 420 },
"AN_3_4": { "x": 1360, "y": 420 },
"AN_4_1": { "x": 1350, "y": 460 },
"AN_4_2": { "x": 1350, "y": 460 },
"AN_4_3": { "x": 1270, "y": 320 },
"AN_4_4": { "x": 900, "y": 420 },
"AN_5_1": { "x": 650, "y": 645 },
"AN_5_2": { "x": 980, "y": 420 },
"AN_5_3": { "x": 1050, "y": 420 },
"AN_5_4": { "x": 1130, "y": 420 },
"AN_6_1": { "x": 1220, "y": 420 },
"AN_6_2": { "x": 1290, "y": 420 },
"AN_6_3": { "x": 650, "y": 440 },
"AN_6_4": { "x": 1400, "y": 650 },
"AN_7_1": { "x": 1450, "y": 540 },
"AN_7_2": { "x": 1450, "y": 540 },
"AN_7_3": { "x": 1470, "y": 540 },
"AN_7_4": { "x": 1470, "y": 540 },
"AN_8_1": { "x": 1470, "y": 540 },
"AN_8_2": { "x": 1470, "y": 540 },
"AN_8_3": { "x": 1480, "y": 540 },
"AN_8_4": { "x": 1580, "y": 540 },
"AN_9_1": { "x": 1700, "y": 540 },
"AN_9_2": { "x": 1760, "y": 540 },
"AN_9_3": { "x": 1780, "y": 540 },
"AN_9_4": { "x": 1780, "y": 540 },
"AN_10_1": { "x": 1780, "y": 540 },
"AN_10_2": { "x": 1390, "y": 540 },
"AN_10_3": { "x": 1450, "y": 540 },
"AN_10_4": { "x": 1400, "y": 650 },
"AN_11_1": { "x": 1450, "y": 480 },
"AN_11_2": { "x": 1450, "y": 480 },
"AN_11_3": { "x": 1450, "y": 480 },
"AN_11_4": { "x": 1450, "y": 480 },
"AN_12_1": { "x": 1450, "y": 480 },
"AN_12_2": { "x": 1450, "y": 480 },
"AN_12_3": { "x": 1550, "y": 480 },
"AN_12_4": { "x": 1650, "y": 480 },
"AN_13_1": { "x": 1750, "y": 480 },
"AN_13_2": { "x": 1850, "y": 480 },
"AN_13_3": { "x": 1900, "y": 480 },
"AN_13_4": { "x": 1910, "y": 480 },
"AN_14_1": { "x": 1920, "y": 480 },
"AN_14_2": { "x": 1450, "y": 480 },
"AN_14_3": { "x": 1450, "y": 480 },
"AN_14_4": { "x": 1400, "y": 650 },
"AN_15_1": { "x": 1450, "y": 430 },
"AN_15_2": { "x": 1450, "y": 430 },
"AN_15_3": { "x": 1470, "y": 430 },
"AN_15_4": { "x": 1470, "y": 430 },
"AN_16_1": { "x": 1470, "y": 430 },
"AN_16_2": { "x": 1470, "y": 430 },
"AN_16_3": { "x": 1600, "y": 430 },
"AN_16_4": { "x": 1700, "y": 430 },
"AN_17_1": { "x": 1800, "y": 430 },
"AN_17_2": { "x": 1900, "y": 430 },
"AN_17_3": { "x": 1950, "y": 430 },
"AN_17_4": { "x": 1960, "y": 430 },
"AN_18_1": { "x": 1970, "y": 430 },
"AN_18_2": { "x": 1450, "y": 430 },
"AN_18_3": { "x": 1450, "y": 430 },
"AN_18_4": { "x": 1400, "y": 650 },
"AN_19_1": { "x": 1450, "y": 370 },
"AN_19_2": { "x": 1450, "y": 370 },
"AN_19_3": { "x": 1460, "y": 370 },
"AN_19_4": { "x": 1460, "y": 370 },
"AN_20_1": { "x": 1460, "y": 370 },
"AN_20_2": { "x": 1460, "y": 370 },
"AN_20_3": { "x": 1500, "y": 370 },
"AN_20_4": { "x": 1600, "y": 370 },
"AN_21_1": { "x": 1700, "y": 370 },
"AN_21_2": { "x": 1800, "y": 370 },
"AN_21_3": { "x": 1850, "y": 370 },
"AN_21_4": { "x": 1860, "y": 370 },
"AN_22_1": { "x": 1870, "y": 370 },
"AN_22_2": { "x": 1450, "y": 370 },
"AN_22_3": { "x": 1460, "y": 370 },
"AN_23_1": { "x": 1460, "y": 320 },
"AN_23_2": { "x": 1460, "y": 320 },
"AN_23_3": { "x": 1465, "y": 320 },
"AN_23_4": { "x": 1465, "y": 320 },
"AN_24_1": { "x": 1465, "y": 320 },
"AN_24_2": { "x": 1465, "y": 320 },
"AN_24_3": { "x": 1480, "y": 320 },
"AN_24_4": { "x": 1580, "y": 320 },
"AN_25_1": { "x": 1680, "y": 320 },
"AN_25_2": { "x": 1780, "y": 320 },
"AN_25_3": { "x": 1750, "y": 320 },
"AN_25_4": { "x": 1760, "y": 320 },
"AN_26_1": { "x": 1770, "y": 320 },
"AN_26_2": { "x": 1430, "y": 320 },
"AN_26_3": { "x": 1460, "y": 320 }
}

View File

@ -0,0 +1,65 @@
.warn-alert {
position: fixed;
top: 200px;
left: 200px;
/* height: 72px; */
z-index: 10000;
display: inline-block;
/* background: url(../../../assets/warn-bg.png) 0 0 / 116px 100% repeat-x; */
background: url(./3.png) 0 0 / 116px 100% repeat-x;
box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.5);
user-select: none;
transform: scale(1);
cursor: pointer;
}
.warn-alert:hover {
transform: scale(1.1);
box-shadow: 0 0 32px 12px rgba(0, 0, 0, 0.5);
z-index: 10001;
}
.warn-alert::before {
box-sizing: border-box;
content: "";
position: absolute;
top: 0;
left: -24px;
width: 24px;
height: 100%;
display: inline-block;
border: 12px solid transparent;
border-right-color: #ff2c2c;
}
.warn-alert::after {
box-sizing: border-box;
content: "";
position: absolute;
top: 0;
right: -24px;
width: 24px;
height: 100%;
display: inline-block;
border: 12px solid transparent;
border-left-color: #ff2c2c;
}
.warn-alert > h1 {
display: flex;
margin: 8px 0 0;
align-items: center;
color: #fff;
font-size: 16px;
text-transform: uppercase;
}
.warn-alert > h1 img {
padding-top: 3px;
margin-left: 10px;
}
.warn-alert > p {
color: #fff;
margin: 0 22px 16px 14px;
font-size: 14px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,27 @@
import cls from "./kiln.module.scss";
import Container from "../../Container";
import { useSelector } from "react-redux";
import { stateNameMap } from "../../../store/features/kilnSlice";
export default function Kiln() {
const kilnInfo = useSelector((state) => state.kiln);
const infos = Object.keys(kilnInfo).map((key) => ({
label: stateNameMap[key],
value: kilnInfo[key],
}));
return (
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
<div className={cls.leftBar__top__content}>
{infos.map((item) => (
<div key={item.label} className={cls.info__item}>
<span className={cls.label}>{item.label}</span>
<span className={cls.value}>{item.value}</span>
{/* {item.label}: {item.value} */}
</div>
))}
</div>
</Container>
);
}

View File

@ -0,0 +1,42 @@
.leftBar__top {
width: 625px;
// height: 305px;
height: 300px;
background: url('../../../assets/ItemBg.png') no-repeat;
background-size: 100% 100%;
.leftBar__top__content {
flex: 1;
height: 1px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 18px;
.info__item {
border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// width: 288px;
height: 43px;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
gap: 12px;
.label {
flex: 6;
text-align: right;
}
.value {
flex: 4;
text-align: left;
}
}
}
}

View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/large.png) no-repeat;
background-size: 100% 100%;
width: 600px;
}

View File

@ -0,0 +1,105 @@
/*
* @Author: zhp
* @Date: 2024-08-29 09:46:11
* @LastEditTime: 2024-09-18 09:10:19
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import React, { useState,useEffect,useRef } from 'react';
import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points";
function generateRandomNearNumber(number) {
const minRandom = -0.5;
const maxRandom = 0.5;
return (number + Math.random() * (maxRandom - minRandom) + minRandom).toFixed(1);
}
function BlueRect(props) {
const title = props.title || "DEFAULT";
const value = props.value || "0℃";
const [isVisible, setIsVisible] = useState(false);
const [chartData, setChartData] = useState(null);
const updateVisibilityState = (newVisibilityState) => {
setIsVisible(!newVisibilityState);
// isVisible
};
const [randomValue, setRandomValue] = useState(generateRandomNearNumber(parseInt(value)));
// const parentRef = useRef(null);
// const pointsRef = useRef(null);
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [pointsPosition, setPointsPosition] = useState({ left: 'initial', top: 'initial' });
const handleMouseMove = (event) => {
setMousePosition({ x: event.clientX, y: event.clientY });
};
const handleToggleVisibility = () => {
setIsVisible(!isVisible);
if (isVisible) {
//
setChartData(null);
} else {
setPointsPosition({
left: `${mousePosition.x + 100}px`,
top: `${mousePosition.y - 100}px`,
});
//
setChartData({
title,
isVisible,
value
});
}
}
return (
<div onMouseMove={handleMouseMove}>
<div
// ref={parentRef}
className={`${cls.blueRect} ${cls[title]}`}
style={{
background: props.blue ? "#0a4268ee" : "#0a426860",
height:props.blue ? "68px" : "90px" ,
}}
>
<span
className="title"
style={{
fontSize: "18px",
lineHeight: "24px",
color: props.blue ? "#40afb8" : "#fff",
fontWeight: 600,
userSelect: "none",
}}
>
{title}
</span>
{props.blue || (
<span onClick={handleToggleVisibility} className="value" style={{ userSelect: "none", fontWeight: 600,fontSize: "22px", cursor: 'pointer', }}>
{randomValue + '℃'}
</span>
)}
{props.blue? (
<span className='value' style={{ userSelect: "none", fontSize: "22px" }}>
{value}
</span>
): (
<span className={`${cls.forecastValue}`} style={{ userSelect: "none", fontSize: "22px" }}>
{value}
</span>
)}
</div>
{isVisible && !props.blue && <Points dataSource={chartData}
updateVisibilityState={updateVisibilityState} //
style={{
position: "fixed",
left: pointsPosition.left,
top: pointsPosition.top,
zIndex: 9999,
}}/>}
</div>
);
}
export default BlueRect;

View File

@ -0,0 +1,555 @@
.blueRect {
display: inline-block;
width: 106px;
height: 68px;
position: absolute;
top: 0;
left: 0;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
background: #0a426820;
border-radius: 4px;
}
.blueRect::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
transparent 0%,
transparent 50%,
#24aebb 100%
);
border-radius: 3px;
}
.blueRect::after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
#24aebb 0%,
transparent 50%,
transparent 100%
);
border-radius: 3px;
}
/** left **/
.TE271 {
top: 160px;
left: 70px;
}
.TE272 {
top: 254px; /* +94px */
left: 70px;
}
.TE273 {
top: 348px; /* +94px */
left: 70px;
}
.TE274 {
top: 442px;
left: 70px;
}
.TE279 {
top: 536px;
left: 70px;
}
.TE275 {
top: 160px;
left: 206px;
}
.TE276 {
top: 254px;
left: 206px; /* +136px */
}
.TE277 {
top: 348px; /* +94px */
left: 206px; /* +136px */
}
.TE278 {
top: 442px; /* +94px */
left: 206px; /* +136px */
}
.TE280 {
top: 536px; /* +94px */
left: 206px; /* +136px */
}
/** center top **/
.TE227 {
top: 178px;
left: 470px;
}
.TE229 {
top: 178px;
left: 590px; /* +120px */
}
.TE231 {
top: 178px;
left: 700px;
}
.TE233 {
top: 178px;
left: 800px;
}
.TE235 {
top: 178px;
left: 900px;
}
.TE237 {
top: 178px;
left: 1000px;
}
.TE239 {
top: 178px;
left: 1100px;
}
.TE241 {
top: 178px;
left: 1200px;
}
/** center bottom **/
.TE228 {
top: 580px;
left: 460px;
}
.TE230 {
top: 580px;
left: 570px;
}
.TE232 {
top: 580px;
left: 680px;
}
.TE234 {
top: 580px;
left: 790px;
}
.TE236 {
top: 580px;
left: 900px;
}
.TE238 {
top: 580px;
left: 1000px;
}
.TE240 {
top: 580px;
left: 1100px;
}
.TE242 {
top: 580px;
left: 1200px;
}
/** center middle **/
.TE201 {
top: 380px;
/* transform: rotate(-1deg); */
left: 360px;
}
.TE202 {
top: 380px;
/* transform: rotate(-1deg); */
left: 480px;
}
.TE203 {
top: 380px;
/* transform: rotate(-1deg); */
left: 600px;
}
.TE204 {
top: 380px;
/* transform: rotate(-1deg); */
left: 720px;
}
.TE205 {
top: 380px;
/* transform: rotate(-1deg); */
left: 840px;
}
.TE206 {
top: 380px;
/* transform: rotate(-1deg); */
left: 960px;
}
.TE207 {
top: 270px;
/* transform: rotate(-1deg); */
left: 1080px;
}
.TE208 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1080px;
}
.TE209 {
top: 470px;
/* transform: rotate(-1deg); */
left: 1080px;
}
.TE210 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1200px;
}
.TE211 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1320px;
}
.TE212 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1440px;
}
.TE213 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1560px;
}
/** right **/
.TE214 {
top: 128px;
left: 1720px;
}
.TE215 {
top: 245px;
left: 1740px;
}
.TE216 {
top: 380px;
left: 1740px;
}
.TE217 {
top: 500px;
left: 1760px;
}
.TE218 {
top: 600px;
left: 1780px;
}
.TE219 {
top: 128px;
left: 1840px;
}
.TE220 {
top: 245px;
left: 1860px;
}
.TE221 {
top: 380px;
left: 1860px;
}
.TE222 {
top: 500px;
left: 1880px;
}
.TE223 {
top: 600px;
left: 1900px;
}
.TE224 {
top: 245px;
left: 1980px;
}
.TE225 {
top: 380px;
left: 1980px;
}
.TE226 {
top: 500px;
left: 2000px;
}
/** 一层 --- 窑底 **/
.TE401 {
top: 420px;
left: 20px;
}
.TE402 {
top: 420px;
left: 140px;
}
.TE403 {
top: 420px;
left: 260px;
}
.PE401 {
top: 320px;
left: 20px;
}
.PE402 {
top: 320px;
left: 140px;
}
.PE403 {
top: 320px;
left: 260px;
}
/** center top **/
.TE333 {
top: 128px;
left: 660px;
}
.TE335 {
top: 128px;
left: 775px;
}
.TE337 {
top: 128px;
left: 880px;
}
.TE339 {
top: 128px;
left: 1000px;
}
.TE341 {
top: 128px;
left: 1110px;
}
.TE343 {
top: 128px;
left: 1225px;
}
.TE345 {
top: 128px;
left: 1335px;
}
.TE347 {
top: 128px;
left: 1440px;
}
/** center bottom **/
.TE334 {
top: 620px;
left: 610px;
}
.TE336 {
top: 620px;
left: 730px;
}
.TE338 {
top: 620px;
left: 860px;
}
.TE340 {
top: 620px;
left: 980px;
}
.TE342 {
top: 620px;
left: 1110px;
}
.TE344 {
top: 620px;
left: 1235px;
}
.TE346 {
top: 620px;
left: 1360px;
}
.TE348 {
top: 620px;
left: 1480px;
}
/** center middle **/
.TE301 {
top: 340px;
transform: scaleY(0.8);
left: 450px;
}
.TE302 {
top: 400px;
transform: scaleY(0.8);
left: 450px;
}
.TE303 {
top: 460px;
transform: scaleY(0.8);
left: 450px;
}
.TE304 {
top: 400px;
/* transform: scaleY(0.8) skewX(-2deg); */
transform: scaleY(0.8);
left: 580px;
}
.TE305 {
top: 340px;
/* transform: scaleY(0.8) skewX(-2deg); */
transform: scaleY(0.8);
left: 720px;
}
.TE306 {
top: 400px;
/* transform: scaleY(0.8) skewX(-2deg); */
/* transform: scaleY(0.8) rotate(-1deg); */
transform: scaleY(0.8);
left: 720px;
}
.TE307 {
top: 460px;
/* transform: scaleY(0.8) rotate(-1deg); */
transform: scaleY(0.8);
left: 720px;
}
.TE308 {
top: 400px;
transform: scaleY(0.8);
left: 860px;
}
.TE309 {
top: 400px;
transform: scaleY(0.8);
left: 1000px;
}
.TE310 {
top: 400px;
transform: scaleY(0.8);
left: 1140px;
}
.TE311 {
top: 340px;
transform: scaleY(0.8);
left: 1280px;
}
.TE312 {
top: 400px;
transform: scaleY(0.8);
left: 1280px;
}
.TE313 {
top: 460px;
transform: scaleY(0.8);
left: 1280px;
}
.TE314 {
top: 400px;
transform: scaleY(0.8);
left: 1420px;
}
.TE315 {
top: 400px;
transform: scaleY(0.8);
left: 1560px;
}
.TE316 {
top: 400px;
transform: scaleY(0.8);
left: 1700px;
}
.TE317 {
top: 340px;
transform: scaleY(0.8);
left: 1840px;
}
.TE318 {
top: 400px;
transform: scaleY(0.8);
left: 1840px;
}
.TE319 {
top: 460px;
transform: scaleY(0.8);
left: 1840px;
}
/** right **/
.TE327 {
top: 152px;
left: 2000px;
transform: scale(0.8) skewX(5deg);
}
.TE320 {
top: 252px;
left: 2020px;
transform: scale(0.8) skewX(7deg);
}
.TE321 {
top: 400px;
left: 2040px;
transform: scale(0.8) skewX(7deg);
}
.TE322 {
top: 532px;
left: 2060px;
transform: scale(0.8) skewX(7deg);
}
.TE330 {
top: 656px;
left: 2080px;
transform: scale(0.8) skewX(7deg);
}
.TE323 {
top: 152px;
left: 2100px;
transform: scale(0.8) skewX(7deg);
}
.TE328 {
top: 252px;
left: 2120px;
transform: scale(0.8) skewX(7deg);
}
.TE331 {
top: 400px;
left: 2140px;
transform: scale(0.8) skewX(7deg);
}
.TE329 {
top: 532px;
left: 2160px;
transform: scale(0.8) skewX(7deg);
}
.TE326 {
top: 656px;
left: 2180px;
transform: scale(0.8) skewX(7deg);
}
.TE324 {
top: 252px;
left: 2220px;
transform: scale(0.8) skewX(7deg);
}
.TE332 {
top: 400px;
left: 2260px;
transform: scale(0.8) skewX(7deg);
}
.TE325 {
top: 532px;
left: 2260px;
transform: scale(0.8) skewX(7deg);
}
.forecastValue{
width: 100%;
height: 29px;
text-align: center;
margin-top: 4px;
background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
opacity: 0.7;
backdrop-filter: blur(3px);
}

View File

@ -0,0 +1,12 @@
/*
* @Author: zhp
* @Date: 2024-09-12 16:43:21
* @LastEditTime: 2024-09-12 16:43:21
* @LastEditors: zhp
* @Description:
*/
import React from 'react';
const VisibilityContext = React.createContext();
export default VisibilityContext;

View File

@ -0,0 +1,64 @@
/*
* @Author: zhp
* @Date: 2024-09-12 16:11:31
* @LastEditTime: 2024-09-13 13:39:40
* @LastEditors: zhp
* @Description:
*/
import { useEffect } from "react";
import useIcon from "../../../hooks/useIcon";
import cls from "./container.module.scss";
import React, { useState } from 'react';
const Container = (props) => {
let icon = useIcon(props.icon);
// console.log(props);
// const [visible, setVisible] = useState(props.isVisible);
const desc = props.desc;
const [localVisible, setLocalVisible] = useState(props.isVisible);
// isVisible
useEffect(() => {
setLocalVisible(props.isVisible);
}, [props.isVisible]);
const handleChangeIsVisible = () => {
const newVisibility = !localVisible;
setLocalVisible(newVisibility);
props.onVisibilityChange(newVisibility);
};
return (
<div
className={`${cls.container} ${props.className}`}
style={props.pending ? { filter: "grayscale(100%)" } : props.style}
>
<div className={cls.container__head}>
<h2>{props.title}</h2>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
<img
src={icon}
alt="#"
onClick={handleChangeIsVisible}
className={props.icon == "close" ? cls.bigger : ""}
/>
</div>
<div className={cls.container__content}>{props.children}</div>
{props.pending && (
<div
className={`${cls.container__content} pending-modal`}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "20px",
userSelect: "none",
cursor: "not-allowed",
}}
></div>
)}
</div>
);
};
export default Container;

View File

@ -0,0 +1,59 @@
.container {
padding: 24px;
display: flex;
flex-direction: column;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
.container__head {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 32px;
&.bigger {
width: 28px;
}
}
h2 {
font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system,
BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
"Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
sans-serif;
margin: 0;
margin-left: 6px;
font-size: 22px;
color:#58E7E9;
letter-spacing: 2px;
font-weight: 500;
}
.graphBaseDesc {
margin: 0 6px;
margin-left: 108px;
font-size: 16px;
line-height: 1;
color: #76fff9;
flex: 1;
}
}
.container__content {
height: 1px;
flex: 1;
// background: #25a78672;
}
}
// .bgGood {
// background: url("../assets/good.png");
// }
// .bgEnergy {
// background: url("../assets/energy.png");
// }
// .bgSmoke {
// background: url("../assets/smoke.png");
// }

View File

@ -0,0 +1,41 @@
/*
* @Author: zhp
* @Date: 2024-09-12 15:36:30
* @LastEditTime: 2024-09-13 13:51:31
* @LastEditors: zhp
* @Description:
*/
import cls from './index.module.css';
import Container from './Container';
import React, { useState } from 'react';
function BottomBarItem(props) {
const [isVisible, setIsVisible] = useState(false);
// onVisibilityChange
if (typeof props.onVisibilityChange !== 'function') {
throw new Error('onVisibilityChange must be a function');
}
//
const handleVisibilityChange = (newVisibilityState) => {
console.log(newVisibilityState);
setIsVisible(newVisibilityState);
props.onVisibilityChange(newVisibilityState); //
};
return (
<Container
icon={props.icon}
title={props.title}
isVisible={isVisible}
onVisibilityChange={handleVisibilityChange}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

View File

@ -0,0 +1,6 @@
.bottomBarItem {
background: url(../../../assets/pointsBack.png) no-repeat;
background-size: 100% 100%;
width: 761px;
height: 335px;
}

View File

@ -2,33 +2,40 @@ import cls from "./index.module.css";
import GradientText from "../../../Common/GradientText";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import eIcon1 from "../../../../assets/Icon/dontknowwhatitis.png";
import eIcon2 from "../../../../assets/Icon/lightnen.png";
function Energy(props) {
const [isPage1, setIsPage1] = useState(true);
const [isPage1] = useState(props.page === 1);
const energyInfo = useSelector((state) => state.energy?.info);
useEffect(() => {
const timer = setInterval(() => {
setIsPage1((pre) => !pre);
}, 10000);
// useEffect(() => {
// const timer = setInterval(() => {
// setIsPage1((pre) => !pre);
// }, 10000);
return () => {
clearInterval(timer);
}
}, []);
// return () => {
// clearInterval(timer);
// }
// }, []);
return (
<div className={" " + cls.layout} style={{ color: "#fff" }}>
<span
className={cls.shadowBorder}
className={`${cls.shadowBorder} ${cls.border}`}
style={{
gridRow: "1 / 3",
paddingTop: "104px",
paddingLeft: "32px",
userSelect: "none",
textAlign: "center",
paddingTop: "96px",
}}
>
<GradientText text="能源" />
{isPage1 ? (
<img src={eIcon1} width={32} alt="eicon1" />
) : (
<img src={eIcon2} width={32} alt="eicon2" />
)}
<GradientText text={"\u2002\u2002能源"} />
</span>
{!isPage1 && (
<div
@ -65,7 +72,9 @@ function Energy(props) {
{(+energyInfo?.elecQty7)?.toFixed(2) || 0}
</span>
</div>
<div className={cls.shadowBorder + " " + cls.infoText}>
<div
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
>
<span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span>
<span
style={{
@ -77,7 +86,9 @@ function Energy(props) {
{(+energyInfo?.elecQty4)?.toFixed(2) || 0}
</span>
</div>
<div className={cls.shadowBorder + " " + cls.infoText}>
<div
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
>
<span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(总量)/kWh</span>
<span
style={{
@ -105,7 +116,7 @@ function Energy(props) {
style={{ flex: 1 }}
className={cls.shadowBorder + " " + cls.infoText}
>
<span style={{ lineHeight: 1.5 }}>余热发电(实时)/kWh</span>
<span style={{ lineHeight: 1.5 }}>余热发电(昨日)/kWh</span>
<span
style={{
lineHeight: 1.5,
@ -118,7 +129,9 @@ function Energy(props) {
</div>
<div
style={{ flex: 1 }}
className={cls.shadowBorder + " " + cls.infoText}
className={
cls.shadowBorder + " " + cls.infoText + " " + cls.border
}
>
<span style={{ lineHeight: 1.5 }}>余热发电(总量)/kWh</span>
<span
@ -133,25 +146,29 @@ function Energy(props) {
</div>
</div>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>水耗量/Km³</span>
<span style={{ lineHeight: 1.5 }}>水耗量(昨日)/Km³</span>
<span style={{ lineHeight: 1.5 }}>
{(+energyInfo?.waterQty)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>天然气I/Nm³</span>
<span style={{ lineHeight: 1.5 }}>天然气I(累计)/Nm³</span>
<span style={{ lineHeight: 1.5 }}>
{energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
<span
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
>
<span style={{ lineHeight: 1.5 }}>电耗量(昨日)/kWh</span>
<span style={{ lineHeight: 1.5 }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
<span
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
>
<span style={{ lineHeight: 1.5 }}>天然气II(累计)/Nm³</span>
<span style={{ lineHeight: 1.5 }}>
{energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"}
</span>

View File

@ -4,13 +4,38 @@
/* grid-template-columns: 133px 158px 292px 292px; */
grid-template-columns: 125px 250px 250px 250px;
/* grid-template-rows: 60px 60px; */
grid-template-rows: 129px 129px;
grid-template-rows: auto;
height: 100%;
}
.shadowBorder {
box-shadow: inset 0 0 12px 3px #fff2;
border-radius: 4px;
padding: 4px;
backdrop-filter: blur(3px);
}
.shadowBorder.border {
position: relative;
border-bottom: 2px solid #00fff7;
}
.shadowBorder.border::before,
.shadowBorder.border::after {
content: "";
position: absolute;
bottom: 0;
display: inline-block;
height: 100%;
width: 2px;
background: linear-gradient(to top, #00fff7, #00fff708, transparent);
}
.shadowBorder.border::before {
left: 0;
}
.shadowBorder.border::after {
right: 0;
}
.infoText {
@ -27,6 +52,6 @@
}
.infoText > span:last-child {
color: #00FFF7;
color: #00fff7;
font-size: 24px;
}

View File

@ -6,17 +6,38 @@ import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function getTimeStr(period) {
return {
:
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().add(1, "d").format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[period];
}
function NO(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
const weekTrend = useSelector((state) => state.smoke?.weekTrend);
const monthTrend = useSelector((state) => state.smoke?.monthTrend);
const yearTrend = useSelector((state) => state.smoke?.yearTrend);
const [period, setPeriod] = useState("日");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
let timestr = getTimeStr(period);
const currentTrend =
period === "日"
@ -33,35 +54,13 @@ function NO(props) {
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
:
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[value]
);
timestr = getTimeStr(value);
}
return (
<GraphBase
icon="smoke"
title="氮氧化物"
desc={`能耗趋势图 ${timestr}`}
desc={`烟气趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

View File

@ -6,17 +6,38 @@ import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function getTimeStr(period) {
return {
:
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().add(1, 'd').format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[period];
}
function Dust(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
const weekTrend = useSelector((state) => state.smoke?.weekTrend);
const monthTrend = useSelector((state) => state.smoke?.monthTrend);
const yearTrend = useSelector((state) => state.smoke?.yearTrend);
const [period, setPeriod] = useState("日");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
let timestr = getTimeStr(period);
const currentTrend =
period === "日"
? dayTrend
@ -32,36 +53,14 @@ function Dust(props) {
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
:
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[value]
);
timestr = getTimeStr(value);
}
return (
<GraphBase
icon="smoke"
title="颗粒物"
desc={`能耗趋势图 ${timestr}`}
desc={`烟气趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

View File

@ -8,7 +8,8 @@ import { lunarYear } from "../../../../utils/energeChartOption";
import dayjs from "dayjs";
function NatGas(props) {
const elecTrend = useSelector((state) => state.energy.trend.natGas1);
const natGasTrend = useSelector((state) => state.energy.trend.natGas1);
const gasTrend = useSelector((state) => state.energy.trend.natGas2);
const [period, setPeriod] = useState("周");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
@ -18,7 +19,7 @@ function NatGas(props) {
const options = getOptions(
{ : "week", : "month", : "year" }[period],
elecTrend ?? { week: [], month: [], year: [] }
[natGasTrend, gasTrend] ?? { week: [], month: [], year: [] }
);
function handleSwitch(v) {
@ -50,7 +51,7 @@ function NatGas(props) {
return (
<GraphBase
icon="battery"
title="天然气I"
title="天然气"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
onSwitch={handleSwitch}
@ -60,6 +61,45 @@ function NatGas(props) {
onDateChange={handleDateChange}
size={["long", "middle"]}
>
<div
className="nat-gas-legend"
style={{
position: "absolute",
top: 28,
right: 144,
display: "flex",
gap: "24px",
}}
>
<div className="legend-item">
<div
className="legend-color"
style={{
display: "inline-block",
width: "12px",
height: "12px",
borderRadius: "2px",
marginRight: "8px",
backgroundColor: "#FFD160",
}}
/>
<span style={{ color: "#fff" }}>天然气I</span>
</div>
<div className="legend-item">
<div
className="legend-color"
style={{
display: "inline-block",
width: "12px",
height: "12px",
borderRadius: "2px",
marginRight: "8px",
backgroundColor: "#12FFF5",
}}
/>
<span style={{ color: "#fff" }}>天然气II</span>
</div>
</div>
{/* real echarts here */}
{options && (
<ReactECharts
@ -89,8 +129,9 @@ function NatGas(props) {
export default NatGas;
function getOptions(period, trend) {
if (trend[period].length === 0) return null;
function getOptions(period, trendArr) {
if (trendArr[0][period].length === 0 || trendArr[1][period].length === 0)
return null;
// export default function getOptions(seriesData, name) {
const today = new Date();
const currentYear = today.getFullYear();
@ -185,21 +226,38 @@ function getOptions(period, trend) {
},
},
},
series: {
data: trend[period].map((item) =>
item != null ? (+item).toFixed(2) : null
),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" },
{ offset: 0.5, color: colors[0] + "20" },
{ offset: 1, color: colors[0] + "00" },
]),
series: [
{
data: trendArr[0][period].map((item) =>
item != null ? (+item).toFixed(2) : null
),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" },
{ offset: 0.5, color: colors[0] + "20" },
{ offset: 1, color: colors[0] + "00" },
]),
},
},
},
{
data: trendArr[1][period].map((item) =>
item != null ? (+item).toFixed(2) : null
),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[1] + "40" },
{ offset: 0.5, color: colors[1] + "20" },
{ offset: 1, color: colors[1] + "00" },
]),
},
},
],
// series: seriesData.map((arr, index) => ({
// name: index + 1 + '#' + name,
// data: arr,

View File

@ -6,17 +6,37 @@ import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function getTimeStr(period) {
return {
:
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().add(1, "d").format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[period];
}
function Oxygen(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
const weekTrend = useSelector((state) => state.smoke?.weekTrend);
const monthTrend = useSelector((state) => state.smoke?.monthTrend);
const yearTrend = useSelector((state) => state.smoke?.yearTrend);
const [period, setPeriod] = useState("日");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
let timestr = getTimeStr(period);
const currentTrend =
period === "日"
@ -33,35 +53,13 @@ function Oxygen(props) {
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
:
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[value]
);
timestr = getTimeStr(value);
}
return (
<GraphBase
icon="smoke"
title="氧气含量"
desc={`能耗趋势图 ${timestr}`}
desc={`烟气趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

View File

@ -6,6 +6,30 @@ import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function getTimeStr(period) {
return {
:
dayjs().format("YYYY.MM.DD") +
" 7点 - " +
dayjs().add(1, 'd').format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[period];
}
function SO2(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
const weekTrend = useSelector((state) => state.smoke?.weekTrend);
@ -21,47 +45,22 @@ function SO2(props) {
: period === "月"
? monthTrend
: yearTrend;
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
let timestr = getTimeStr(period);
const options = getOptions("SO2_float", period, currentTrend);
function handleSwitch(v) {}
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
:
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
" 7点",
:
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28",
:
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
:
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28",
}[value]
);
timestr = getTimeStr(value);
}
return (
<GraphBase
icon="smoke"
title="二氧化硫"
desc={`能耗趋势图 ${timestr}`}
desc={`烟气趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

View File

@ -1,21 +1,23 @@
import cls from "./index.module.css";
import GradientText from "../../../Common/GradientText";
import { useSelector } from "react-redux";
import eIcon1 from "../../../../assets/Icon/oilstation.png";
function SmokeHandle(props) {
const smokeInfo = useSelector((state) => state.smoke?.info);
return (
<div className={" " + cls.smoke} style={{ color: "#fff" }}>
<span
className={cls.shadowBorder}
className={cls.shadowBorder + " " + cls.border}
style={{
gridRow: "1 / 3",
paddingTop: "96px",
paddingLeft: "32px",
userSelect: "none",
textAlign: "center",
}}
>
<GradientText text="烟气处理" />
<img src={eIcon1} width={32} alt="eIcon1" />
<GradientText text={"\u2002\u2002烟气处理"} />
</span>
<span
className={cls.shadowBorder + " " + cls.infoText}
@ -32,13 +34,26 @@ function SmokeHandle(props) {
{(+smokeInfo?.NOX_float)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
style={{ gridColumn: "span 2" }}
>
<span style={{ lineHeight: 1.5 }}>二氧化硫浓度 mg/</span>
<span style={{ lineHeight: 1.5 }}>
{(+smokeInfo?.SO2_float)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span
className={
cls.shadowBorder +
" " +
cls.infoText +
" " +
cls.border +
" " +
cls.disabled
}
>
<span style={{ lineHeight: 1.5 }}>颗粒物浓度 mg/</span>
<span style={{ lineHeight: 1.5 }}>
{(+smokeInfo?.dust_float)?.toFixed(2) || 0}

Some files were not shown because too many files have changed in this diff Show More