Compare commits
47 Commits
311cdfc5f7
...
zjl
| Author | SHA1 | Date | |
|---|---|---|---|
| 9b8e3734fa | |||
| 904b9212b8 | |||
| 1852bdc17f | |||
|
e2f8d9860a | ||
|
|
37c0c77078 | ||
| 9382cb4cf5 | |||
| 2325dc0373 | |||
|
|
196ad512af | ||
| fa03a0b329 | |||
| 29f8e96a2a | |||
|
|
aa86600a1a | ||
|
|
379de8fda0 | ||
| fa5cae9a78 | |||
| 50aada1223 | |||
| 248fafdf2c | |||
|
|
9589fba7c2 | ||
|
|
0739f8cf00 | ||
| e1f95bd009 | |||
|
|
6de0fe4753 | ||
|
|
a8b5e57f38 | ||
| a4985a5379 | |||
|
|
f9dde6e159 | ||
|
|
b27d70f0fc | ||
| fd34efc0b4 | |||
|
|
2d2d6d4c15 | ||
|
|
696d852cd2 | ||
| 637f387f02 | |||
|
|
6a25d4e30d | ||
|
|
270ca5dce7 | ||
| fcb1549ee3 | |||
|
|
e4e9ba11c3 | ||
|
|
f702e950ac | ||
| d7cc3deeee | |||
| c635243357 | |||
| 1e64a4d0e2 | |||
| a15105a9b0 | |||
| bace9fa501 | |||
| c6cd097433 | |||
| 4d7af62305 | |||
| 214e9fe892 | |||
| 9968280724 | |||
|
8b4322996e | ||
|
|
b325c3fc05 | ||
|
|
28c9c1906e | ||
|
|
7ddae1b3a4 | ||
|
|
61477cdd30 | ||
|
|
6e5badf01a |
219
package-lock.json
generated
219
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
@@ -71,7 +72,8 @@
|
||||
"start": "node scripts/start.js",
|
||||
"build": "node scripts/build.js",
|
||||
"server": "node websocket/server.js",
|
||||
"test": "node scripts/test.js"
|
||||
"test": "node scripts/test.js",
|
||||
"ws": "node websocket/server.js"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
||||
Binary file not shown.
Binary file not shown.
BIN
public/video/liquidSpeed.webm
Normal file
BIN
public/video/liquidSpeed.webm
Normal file
Binary file not shown.
@@ -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,7 +17,7 @@ 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);
|
||||
|
||||
29
src/assets/CenterChart1icon1.svg
Normal file
29
src/assets/CenterChart1icon1.svg
Normal 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 |
36
src/assets/CenterChart1icon2.svg
Normal file
36
src/assets/CenterChart1icon2.svg
Normal 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 |
18
src/assets/CenterChart1icon3.svg
Normal file
18
src/assets/CenterChart1icon3.svg
Normal 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 |
36
src/assets/CenterChart1icon4.svg
Normal file
36
src/assets/CenterChart1icon4.svg
Normal 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
BIN
src/assets/Icon/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
BIN
src/assets/Icon/forecast.png
Normal file
BIN
src/assets/Icon/forecast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1021 B |
BIN
src/assets/Icon/kilnBottom.png
Normal file
BIN
src/assets/Icon/kilnBottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnPress.png
Normal file
BIN
src/assets/Icon/kilnPress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnTop.png
Normal file
BIN
src/assets/Icon/kilnTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/Icon/liquidTrend.png
Normal file
BIN
src/assets/Icon/liquidTrend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/yieldRate.png
Normal file
BIN
src/assets/Icon/yieldRate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 516 B |
BIN
src/assets/blueBack.png
Normal file
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
BIN
src/assets/dayNight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/dayNightChange.png
Normal file
BIN
src/assets/dayNightChange.png
Normal file
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
BIN
src/assets/forecastBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
src/assets/forecastChartBack.png
Normal file
BIN
src/assets/forecastChartBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/large.png
Normal file
BIN
src/assets/large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/assets/lastBack.png
Normal file
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
BIN
src/assets/lefTopBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/leftMiddleBack.png
Normal file
BIN
src/assets/leftMiddleBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/modelButton.png
Normal file
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
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
BIN
src/assets/pointBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/pointsBack.png
Normal file
BIN
src/assets/pointsBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/seasonActive.png
Normal file
BIN
src/assets/seasonActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/seasonChange.png
Normal file
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
BIN
src/assets/tempIntr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/toFourBack.png
Normal file
BIN
src/assets/toFourBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
18
src/components/Common/BottomItemBackgroundForecast/index.jsx
Normal file
18
src/components/Common/BottomItemBackgroundForecast/index.jsx
Normal 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;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/forecastChartBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -0,0 +1,6 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/forecastBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
height: 422px;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/leftMiddleBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -0,0 +1,6 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/lefTopBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -36,7 +36,7 @@ export default function CompanyName() {
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={cls.TopTitleText}>
|
||||
许昌安彩新能科技  4800万方光伏轻质基板生产线{' '}
|
||||
许昌安彩新能科技  许昌安彩窑炉生产指挥调度中心{' '}
|
||||
</h2>
|
||||
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
|
||||
143
src/components/Common/ForecastTemperature/index.jsx
Normal file
143
src/components/Common/ForecastTemperature/index.jsx
Normal 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 || "0分0秒";
|
||||
// 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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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"],
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
// left: 1340px;
|
||||
left: 1460px;
|
||||
left: 1338px;
|
||||
color: white;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@@ -11,10 +11,10 @@ const SmokeHandleTable = () => {
|
||||
<div className={cls.info__item}>
|
||||
氮氧化物浓度: {(+smokeInfo?.NOX_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
<div className={cls.info__item} style={{ gridColumn: "span 2" }}>
|
||||
二氧化硫浓度: {(+smokeInfo?.SO2_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
<div className={cls.info__item + " " + cls.disabled}>
|
||||
颗粒物浓度: {(+smokeInfo?.dust_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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(() => {
|
||||
// 2，3互切不用展示动画
|
||||
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>
|
||||
);
|
||||
|
||||
58
src/components/Common/TemperatureTop/forecastIndex.jsx
Normal file
58
src/components/Common/TemperatureTop/forecastIndex.jsx
Normal 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;
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -6,8 +6,32 @@ function VideoMonitor(props) {
|
||||
<div className="video-monitor">
|
||||
<h2>泡界线监控</h2>
|
||||
<div className="video-container">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.video-container > div {
|
||||
@@ -28,3 +29,7 @@
|
||||
height: 100%;
|
||||
background: #ccc1;
|
||||
}
|
||||
|
||||
.video-container > div > video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
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(0.64);
|
||||
transform: scale(1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
27
src/components/Common/crownTe/Kiln.jsx
Normal file
27
src/components/Common/crownTe/Kiln.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
42
src/components/Common/crownTe/kiln.module.scss
Normal file
42
src/components/Common/crownTe/kiln.module.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/components/Common/forecastLargeBackground/index.jsx
Normal file
18
src/components/Common/forecastLargeBackground/index.jsx
Normal 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;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/large.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 600px;
|
||||
}
|
||||
105
src/components/Common/forecastRect/index.jsx
Normal file
105
src/components/Common/forecastRect/index.jsx
Normal 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;
|
||||
555
src/components/Common/forecastRect/index.module.css
Normal file
555
src/components/Common/forecastRect/index.module.css
Normal 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);
|
||||
}
|
||||
12
src/components/Common/forecastRect/visContext.jsx
Normal file
12
src/components/Common/forecastRect/visContext.jsx
Normal 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;
|
||||
@@ -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;
|
||||
@@ -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");
|
||||
// }
|
||||
41
src/components/Common/pointItemBackgroundForecast/index.jsx
Normal file
41
src/components/Common/pointItemBackgroundForecast/index.jsx
Normal 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;
|
||||
@@ -0,0 +1,6 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/pointsBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 761px;
|
||||
height: 335px;
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
box-shadow: inset 0 0 12px 3px #fff2;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.shadowBorder.border {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import cls from "./index.module.css";
|
||||
import GradientText from "../../../Common/GradientText";
|
||||
import { useSelector } from "react-redux";
|
||||
import eIcon1 from '../../../../assets/Icon/oilstation.png';
|
||||
import eIcon1 from "../../../../assets/Icon/oilstation.png";
|
||||
|
||||
function SmokeHandle(props) {
|
||||
const smokeInfo = useSelector((state) => state.smoke?.info);
|
||||
@@ -34,13 +34,26 @@ function SmokeHandle(props) {
|
||||
{(+smokeInfo?.NOX_float)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}>
|
||||
<span
|
||||
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
|
||||
style={{ gridColumn: "span 2" }}
|
||||
>
|
||||
<span style={{ lineHeight: 1.5 }}>二氧化硫浓度 mg/m³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{(+smokeInfo?.SO2_float)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}>
|
||||
<span
|
||||
className={
|
||||
cls.shadowBorder +
|
||||
" " +
|
||||
cls.infoText +
|
||||
" " +
|
||||
cls.border +
|
||||
" " +
|
||||
cls.disabled
|
||||
}
|
||||
>
|
||||
<span style={{ lineHeight: 1.5 }}>颗粒物浓度 mg/m³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{(+smokeInfo?.dust_float)?.toFixed(2) || 0}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
box-shadow: inset 0 0 12px 3px #fff2;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.shadowBorder.border {
|
||||
@@ -54,3 +55,10 @@
|
||||
color: #00fff7;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@@ -1,104 +1,108 @@
|
||||
import EnterVideo from './videoComponents/EnterVideo';
|
||||
import EnterToFloorOne from './videoComponents/EnterToFloor1';
|
||||
import EnterToFloorTwo from './videoComponents/EnterToFloor2';
|
||||
import FloorOneToTwo from './videoComponents/Floor1To2';
|
||||
import FloorTwoToOne from './videoComponents/Floor2To1';
|
||||
import { useRef, useEffect, useReducer } from 'react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import EnterVideo from "./videoComponents/EnterVideo";
|
||||
import EnterToFloorOne from "./videoComponents/EnterToFloor1";
|
||||
import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
|
||||
import FloorOneToTwo from "./videoComponents/Floor1To2";
|
||||
import FloorTwoToOne from "./videoComponents/Floor2To1";
|
||||
import { useRef, useEffect, useReducer } from "react";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
|
||||
const initOpacity = {
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
const opacityReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case 'enter-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'enter-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-1-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-2-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
switch (action.type) {
|
||||
case "enter-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "enter-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "floor-1-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case "floor-2-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function VideoContainer(props) {
|
||||
const floor = props.floor || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
const floor = props.floor || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2) {
|
||||
dispatch({ type: 'floor-2-to-1' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: 'floor-1-to-2' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-2' });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2) {
|
||||
dispatch({ type: "floor-2-to-1" });
|
||||
} else {
|
||||
dispatch({ type: "enter-to-1" });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else {
|
||||
dispatch({ type: "enter-to-2" });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
};
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: "enter-to-1" });
|
||||
};
|
||||
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo
|
||||
key="1-to-2"
|
||||
opacity={opacity.floorOneToTwo}
|
||||
floor={floor}
|
||||
/>
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoContainer;
|
||||
|
||||
@@ -19,7 +19,7 @@ function EnterToFloorOne(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启enter的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 5000);
|
||||
}, 1800);
|
||||
}
|
||||
return () => {
|
||||
// console.log("关闭enter的火播放");
|
||||
@@ -49,7 +49,7 @@ function EnterToFloorOne(props) {
|
||||
<source src="/video/floor1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{/* {fireCanPlay && fireDir == "东火" && (
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
@@ -68,7 +68,7 @@ function EnterToFloorOne(props) {
|
||||
width={3900}
|
||||
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||
></video>
|
||||
)} */}
|
||||
)}
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
function FloorOneToTwo(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
@@ -13,6 +12,7 @@ function FloorOneToTwo(props) {
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
const speed = "s";
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
@@ -20,7 +20,7 @@ function FloorOneToTwo(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启1-2的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
@@ -81,6 +81,8 @@ function FloorOneToTwo(props) {
|
||||
width: "2380px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
speed={speed}
|
||||
floor={props.floor}
|
||||
/>
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-09-12 15:44:34
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
@@ -19,7 +26,7 @@ function FloorTwoToOne(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启2-1的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 3000);
|
||||
}, 1800);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
@@ -39,7 +46,7 @@ function FloorTwoToOne(props) {
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
zIndex: 998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
|
||||
135
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
135
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import EnterVideo from "./videoComponents/EnterVideo";
|
||||
import EnterToFloorOne from "./videoComponents/EnterToFloor1";
|
||||
import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
|
||||
import FloorOneToTwo from "./videoComponents/Floor1To2";
|
||||
import FloorTwoToOne from "./videoComponents/Floor2To1";
|
||||
import FloorToFour from "./videoComponents/FloorToFour";
|
||||
import { useRef, useEffect, useReducer } from "react";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
|
||||
const initOpacity = {
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
const opacityReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case "enter-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "enter-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "floor-1-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case "floor-2-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "to-4": {
|
||||
return {
|
||||
...initOpacity,
|
||||
// FloorToFour: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
floorToFour:1,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function VideoContainer(props) {
|
||||
const floor = props.floor || null;
|
||||
const preFloor = props.preFloor.current || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2 || lastFloor.current == 3) {
|
||||
dispatch({ type: "floor-2-to-1" });
|
||||
} else if (lastFloor.current == 4) {
|
||||
dispatch({ type: "enter-to-1" });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else if (lastFloor.current == 3) {
|
||||
// 视频不变画面隐藏,通过判断floor的值隐藏3显示2
|
||||
} else if (lastFloor.current == 4) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
}
|
||||
} else if (floor == 3) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else if (lastFloor.current == 2) {
|
||||
// 视频不变画面隐藏，通过判断floor的值隐藏2显示3
|
||||
} else if (lastFloor.current == 4) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
}
|
||||
} else if (floor == 4) {
|
||||
dispatch({ type: "to-4" });
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: "enter-to-1" });
|
||||
};
|
||||
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo
|
||||
key="1-to-2"
|
||||
opacity={opacity.floorOneToTwo}
|
||||
floor={floor}
|
||||
preFloor={preFloor}
|
||||
/>
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
<FloorToFour key="to-4" opacity={opacity.floorToFour} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoContainer;
|
||||
129
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
129
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import cls from "./index.module.css";
|
||||
import Chart2 from "../../../Common/TimeFireDir";
|
||||
import Chart1 from "../../../Common/ForecastTemperature";
|
||||
import VideoContainer from "./VideoContainer";
|
||||
function KilnCenter({ onFloorChange }) {
|
||||
const [floor, setFloor] = useState(1); // 初始值设置为 1
|
||||
const preFloor = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
onFloorChange(floor);
|
||||
}, [floor, onFloorChange]);
|
||||
|
||||
function onFloorUpdate(flr) {
|
||||
preFloor.current = floor;
|
||||
setFloor(flr);
|
||||
onFloorChange(flr);
|
||||
}
|
||||
|
||||
const subMenuStyle = {
|
||||
marginLeft: floor === 4? "400px" : "0",
|
||||
};
|
||||
|
||||
const colorStyle = {
|
||||
right: floor === 4? "0px" : "400px",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bgKilnInner"
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
top: "12%",
|
||||
display: "flex",
|
||||
zIndex:99,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* 时间火向数据 */}
|
||||
{floor === 4 && (
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart1 />
|
||||
</div>
|
||||
)}
|
||||
{floor!== 4 && (
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart2 />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* menu */}
|
||||
<div
|
||||
className="subMenu"
|
||||
style={{
|
||||
display: "flex",
|
||||
marginBottom: "24px",
|
||||
...subMenuStyle,
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(1)}
|
||||
>
|
||||
碹顶温度
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 2? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(2)}
|
||||
>
|
||||
池底温度
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 3? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(3)}
|
||||
>
|
||||
溶液速度
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(4)}
|
||||
>
|
||||
AI预测
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 颜色指示图 */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "30px",
|
||||
...colorStyle,
|
||||
width: "300px",
|
||||
height: "41px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={require("../../../../assets/tempIntr.png")}
|
||||
alt=""
|
||||
style={{ width: "300px", height: "41px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* video */}
|
||||
<VideoContainer
|
||||
onFloorUpdate={onFloorUpdate}
|
||||
floor={floor}
|
||||
preFloor={preFloor}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default KilnCenter;
|
||||
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.menuItem {
|
||||
transition: all 0.3s ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 30px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../../assets/bg_center_menu.png) no-repeat;
|
||||
background-size: 100% 50%;
|
||||
background-position: bottom;
|
||||
color: #00fff788;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
}
|
||||
|
||||
.menuItem.active,
|
||||
.menuItem:hover {
|
||||
color: #00fff7;
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-left:20px;
|
||||
}
|
||||
|
||||
.videoLayer2 {
|
||||
width: 2440px;
|
||||
height: 720px;
|
||||
background: url(../../../../assets/video-layer-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.videoLayer1 {
|
||||
width: 2440px;
|
||||
height: 720px;
|
||||
background: url(../../../../assets/floor1-status.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useCallback, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import TemperatureTop from "../../../../Common/TemperatureTop";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import TopColorBlockEnter from "./../../components/TopColorBlockEnter";
|
||||
|
||||
function EnterToFloorOne(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启enter的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 1800);
|
||||
}
|
||||
return () => {
|
||||
// console.log("关闭enter的火播放");
|
||||
setFireCanPlay(false);
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: -999,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||
>
|
||||
<video ref={vd} muted width={"100%"}>
|
||||
<source src="/video/floor1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3900}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-20px",
|
||||
left: "-20px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3900}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-20px",
|
||||
left: "-20px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TopColorBlockEnter />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "218px",
|
||||
left: "678px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterToFloorOne;
|
||||
@@ -0,0 +1,44 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRef, useEffect } from 'react';
|
||||
|
||||
function EnterToFloorTwo(props) {
|
||||
const vd = useRef(null);
|
||||
const opacity = props.opacity || 0;
|
||||
|
||||
if (opacity == 1) {
|
||||
setTimeout(() => {
|
||||
vd.current.play();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
vd.current.addEventListener('ended', () => {
|
||||
setTimeout(() => {
|
||||
vd.current.currentTime = 0;
|
||||
}, 1000);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: -1000,
|
||||
opacity: opacity,
|
||||
zIndex: -999,
|
||||
}}
|
||||
transition={{ type: 'tween', duration: 1 }}
|
||||
>
|
||||
<video ref={vd} muted width={'100%'}>
|
||||
<source src="/video/floor2.webm" type="video/mp4" />
|
||||
</video>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterToFloorTwo;
|
||||
@@ -0,0 +1,38 @@
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useRef, useMemo } from 'react';
|
||||
|
||||
function EnterVideo(props) {
|
||||
const show = props.opacity || 0;
|
||||
const vd = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
vd.current.addEventListener('ended', props.onVideoEnd);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: -1000,
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||
>
|
||||
<video ref={vd} muted autoPlay={true} width={'100%'}>
|
||||
<source src="/video/enter.webm" type="video/mp4" />
|
||||
</video>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterVideo;
|
||||
@@ -0,0 +1,153 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import { useSelector } from "react-redux";
|
||||
import BotttomColorBlock from "./../../components/BotttomColorBlock";
|
||||
|
||||
function FloorOneToTwo(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
const [liquidCanPlay, setLiquidCanPlay] = useState(false);
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
// 是否显示溶液速度标签的内容
|
||||
// 池底温度和溶液速度写在一个页面上
|
||||
const showSpeed = props.floor == 3 ? true : false; //显示3
|
||||
const showBottom = props.floor == 2 ? true : false; //显示2
|
||||
const speed = props.preFloor == 2 || props.preFloor == 3 ? "f" : "s";
|
||||
const [speedAn, setSpeedAn] = useState({});
|
||||
useEffect(() => {
|
||||
// 2，3互切不用展示动画
|
||||
if (speed === "f") {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 0 },
|
||||
});
|
||||
} else {
|
||||
if (props.floor === 3) {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
});
|
||||
} else {
|
||||
setSpeedAn({});
|
||||
}
|
||||
}
|
||||
}, [props.floor]);
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启1-2的火播放");
|
||||
setFireCanPlay(true);
|
||||
setLiquidCanPlay(true);
|
||||
}, 2000);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
// console.log("关闭1-2的火播放");
|
||||
setFireCanPlay(false);
|
||||
setLiquidCanPlay(false);
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
|
||||
>
|
||||
<video ref={vd} muted>
|
||||
<source src="/video/1to2.webm" type="video/mp4" />
|
||||
</video>
|
||||
{/* 窑炉的色块 */}
|
||||
{showBottom && (
|
||||
<BotttomColorBlock speed={speed} floor={props.floor} />
|
||||
)}
|
||||
|
||||
{showBottom && fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3700}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "18px",
|
||||
left: "72px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{showBottom && fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3780}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-24px",
|
||||
left: "12px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
{/* 温度组件 */}
|
||||
{showBottom && (
|
||||
<TemperatureBottom
|
||||
style={{
|
||||
top: "208px",
|
||||
// left: "638px",
|
||||
left: "690px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
speed={speed}
|
||||
floor={props.floor}
|
||||
/>
|
||||
)}
|
||||
{/* 溶液速度色块 */}
|
||||
{showSpeed && liquidCanPlay && (
|
||||
<video
|
||||
src="/video/liquidSpeed.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3842}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0px",
|
||||
left: "-4px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorOneToTwo;
|
||||
@@ -0,0 +1,104 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import TemperatureTop from "../../../../Common/TemperatureTop";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import TopColorBlock from "./../../components/TopColorBlock";
|
||||
|
||||
function FloorTwoToOne(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启2-1的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 1800);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
// console.log("关闭2-1的火播放");
|
||||
setFireCanPlay(false);
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||
>
|
||||
<video ref={vd} muted>
|
||||
<source src="/video/2to1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
left: "0px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-12px",
|
||||
left: "-10px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TopColorBlock />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorTwoToOne;
|
||||
@@ -0,0 +1,118 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-27 08:38:07
|
||||
* @LastEditTime: 2024-08-28 15:28:39
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import TopColorBlock from "../../components/forecastTopColorBlock";
|
||||
import myImage from '../../../../../assets/toFourBack.png';
|
||||
function FloorToFour(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
// const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
// useEffect(() => {
|
||||
// if (show) {
|
||||
// vd.current.play();
|
||||
// setTimeout(() => {
|
||||
// // console.log("开启2-1的火播放");
|
||||
// setFireCanPlay(true);
|
||||
// }, 1800);
|
||||
// }
|
||||
// if (!show) setFireCanPlay(false);
|
||||
// return () => {
|
||||
// // console.log("关闭2-1的火播放");
|
||||
// setFireCanPlay(false);
|
||||
// };
|
||||
// }, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||
>
|
||||
<div>
|
||||
<img src={myImage} style={{ width: '1726px', height: '695px',position: "absolute",
|
||||
top: "300px",
|
||||
left: "950px",
|
||||
|
||||
zIndex: -9, }} alt="Example" />
|
||||
</div>
|
||||
{/* <video ref={vd} muted>
|
||||
<source src="/video/2to1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
left: "0px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-12px",
|
||||
left: "-10px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)} */}
|
||||
|
||||
<TopColorBlock />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorToFour;
|
||||
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 15:27:46
|
||||
* @LastEditTime: 2024-09-14 08:39:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
// import TopColorBlock from "../../components/TopColorBlock";
|
||||
import TopColorBlock from "../../components/forecastTopColorBlock";
|
||||
function FloorTwoToOne(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启2-1的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 1800);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
// console.log("关闭2-1的火播放");
|
||||
setFireCanPlay(false);
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 500px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -99,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||
>
|
||||
<video style={{
|
||||
position: "fixed",
|
||||
top: "10px",
|
||||
left: "70px",
|
||||
width: "calc(100% - 600px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}} ref={vd} muted>
|
||||
<source src="/video/2to1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
width: "calc(100% - 500px)",
|
||||
height: "calc(100% - 7px)",
|
||||
left: "240px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-12px",
|
||||
left: "-100px",
|
||||
width: "calc(100% - 500px)",
|
||||
height: "calc(100% - 7px)",
|
||||
left: "240px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TopColorBlock />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorTwoToOne;
|
||||
22
src/components/Modules/KilnOptimize/LeftSide/index.jsx
Normal file
22
src/components/Modules/KilnOptimize/LeftSide/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import KilnPress from './../components/KilnPress';
|
||||
import LiquidTrend from './../components/LiquidTrend';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import cls from './index.module.scss';
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<KilnPress style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
<LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.leftBar {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
// margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-21 16:31:53
|
||||
* @LastEditTime: 2024-08-30 14:45:54
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React from 'react';
|
||||
import KilnPress from '../components/paramsInput';
|
||||
// import LiquidTrend from '../components/LiquidTrend';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import cls from './index.module.scss';
|
||||
export default function Index({ onGetValueFromGrandChild }) {
|
||||
return (
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<KilnPress onSendValueToParent={onGetValueFromGrandChild} style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
{/* <LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} /> */}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
22
src/components/Modules/KilnOptimize/RightSide/index.jsx
Normal file
22
src/components/Modules/KilnOptimize/RightSide/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import KilnTop from './../components/KilnTop';
|
||||
import KilnBottom from './../components/KilnBottom';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import cls from './index.module.scss';
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<KilnTop style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
<KilnBottom style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.leftBar {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
// margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
import { useSelector } from "react-redux";
|
||||
import React from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ReactComponent as B1 } from "./pic/b1.svg";
|
||||
import { ReactComponent as B2 } from "./pic/b2.svg";
|
||||
import { ReactComponent as B3 } from "./pic/b3.svg";
|
||||
import { ReactComponent as B4 } from "./pic/b4.svg";
|
||||
import { ReactComponent as B5 } from "./pic/b5.svg";
|
||||
import { ReactComponent as B6 } from "./pic/b6.svg";
|
||||
import { ReactComponent as B7 } from "./pic/b7.svg";
|
||||
import { ReactComponent as B8 } from "./pic/b8.svg";
|
||||
import { ReactComponent as T1 } from "./pic/t1.svg";
|
||||
import { ReactComponent as T2 } from "./pic/t2.svg";
|
||||
import { ReactComponent as T3 } from "./pic/t3.svg";
|
||||
import { ReactComponent as T4 } from "./pic/t4.svg";
|
||||
import { ReactComponent as T5 } from "./pic/t5.svg";
|
||||
import { ReactComponent as T6 } from "./pic/t6.svg";
|
||||
import { ReactComponent as T7 } from "./pic/t7.svg";
|
||||
import { ReactComponent as T8 } from "./pic/t8.svg";
|
||||
|
||||
const BotttomColorBlock = (props) => {
|
||||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
||||
const speed = props.speed;
|
||||
const floor = props.floor;
|
||||
const [speedAn, setSpeedAn] = useState({});
|
||||
useEffect(() => {
|
||||
// 2，3互切不用展示动画
|
||||
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]);
|
||||
function returnColor(n) {
|
||||
let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.5)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.5)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.5)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.5)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.5)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.5)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.5)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.5)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.5)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.5)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.5)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.5)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.5)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.5)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.5)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.5)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.5)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.5)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.5)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.5)";
|
||||
}
|
||||
}
|
||||
function returnColor2(n) {
|
||||
let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.7)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.7)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.7)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.7)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.7)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.7)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.7)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.7)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.7)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.7)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.7)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.7)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.7)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.7)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.7)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.7)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.7)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.7)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.7)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.7)";
|
||||
}
|
||||
}
|
||||
// 窑炉内部svg变色
|
||||
function BigSvg() {
|
||||
return (
|
||||
<svg
|
||||
width="2050px"
|
||||
height="700px"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "320px",
|
||||
left: "1100px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stopColor={returnColor2("TE302")} />
|
||||
<stop offset="7%" stopColor={returnColor2("TE304")} />
|
||||
<stop offset="14%" stopColor={returnColor2("TE306")} />
|
||||
<stop offset="21%" stopColor={returnColor2("TE308")} />
|
||||
<stop offset="28%" stopColor={returnColor2("TE309")} />
|
||||
<stop offset="35%" stopColor={returnColor2("TE310")} />
|
||||
<stop offset="42%" stopColor={returnColor2("TE312")} />
|
||||
<stop offset="49%" stopColor={returnColor2("TE314")} />
|
||||
<stop offset="56%" stopColor={returnColor2("TE315")} />
|
||||
<stop offset="63%" stopColor={returnColor2("TE316")} />
|
||||
<stop offset="70%" stopColor={returnColor2("TE318")} />
|
||||
<stop offset="77%" stopColor={returnColor2("TE321")} />
|
||||
<stop offset="84%" stopColor={returnColor2("TE331")} />
|
||||
<stop offset="91%" stopColor={returnColor2("TE332")} />
|
||||
<stop offset="100%" stopColor={returnColor2("TE332")} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon
|
||||
points="65 251,1515 251,1524 311,1640 311,1645 290,1609 90,1650 90,1650 95,1758 95,1760 107,1665 106,1658 130,1669 190,1865 190,1867 200,1685 200,1678 223,1693 313,1990 315,1992 325,1710 325,1703 347,1717 430,1910 430,1915 446,1731 445,1725 470,1738 544,1856 544,1860 562,1755 562,1752 572,1700 572,1655 340,1543 340,1534 360,1540 395,1080 397,1080 390,1024 390,1022 398,962 398,962 390,908 390,908 398,840 398,840 390,786 390,786 398,720 398,720 390,665 390,665 398,598 398,598 390,542 390,542 398,476 398,476 390,420 390,420 398,354 398,354 391,296 391,296 400,228 400,228 392,48 392"
|
||||
fill="url(#Gradient)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div animate={speedAn}>
|
||||
<BigSvg />
|
||||
<B1
|
||||
style={{
|
||||
fill: returnColor("TE334"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "5px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B2
|
||||
style={{
|
||||
fill: returnColor("TE336"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "9px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B3
|
||||
style={{
|
||||
fill: returnColor("TE338"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B4
|
||||
style={{
|
||||
fill: returnColor("TE340"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B5
|
||||
style={{
|
||||
fill: returnColor("TE342"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "13px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B6
|
||||
style={{
|
||||
fill: returnColor("TE344"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B7
|
||||
style={{
|
||||
fill: returnColor("TE346"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "18px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B8
|
||||
style={{
|
||||
fill: returnColor("TE348"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "20px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T1
|
||||
style={{
|
||||
fill: returnColor("TE333"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "108px",
|
||||
left: "-10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68)",
|
||||
}}
|
||||
/>
|
||||
<T2
|
||||
style={{
|
||||
fill: returnColor("TE335"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "107px",
|
||||
left: "-5px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68)",
|
||||
}}
|
||||
/>
|
||||
<T3
|
||||
style={{
|
||||
fill: returnColor("TE337"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "109px",
|
||||
left: "0px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68)",
|
||||
}}
|
||||
/>
|
||||
<T4
|
||||
style={{
|
||||
fill: returnColor("TE339"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "109px",
|
||||
left: "7px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.69)",
|
||||
}}
|
||||
/>
|
||||
<T5
|
||||
style={{
|
||||
fill: returnColor("TE341"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "11px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.69)",
|
||||
}}
|
||||
/>
|
||||
<T6
|
||||
style={{
|
||||
fill: returnColor("TE343"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68)",
|
||||
}}
|
||||
/>
|
||||
<T7
|
||||
style={{
|
||||
fill: returnColor("TE345"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "102px",
|
||||
left: "19px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.69,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T8
|
||||
style={{
|
||||
fill: returnColor("TE347"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "102px",
|
||||
left: "24px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BotttomColorBlock;
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path class="cls-2" d="M374,684.78c.67-3.25-.17-7.48,1.32-9.68,4.12-6.1,3.08-12.76,3.87-19.21,1.14-9.35,2-18.74,2.83-28.13.46-4.94.68-9.91,1.1-14.86.21-2.35,1.08-4,4-4,8,0,15.88-1.32,23.88-.92,10.47.52,20.87-1.41,31.37-1.09,3.77.12,4.88,1.19,4.72,4.88-.53,12.25-1.55,24.44-2.87,36.62-.32,3,0,6-.28,9-.24,2.31.05,5.21-3.43,5.73-.94.14-1.28.88-1.46,1.77-1.14,5.74-1.63,11.45-.05,17.23.63,2.29,1.68,3,3.93,2.46,5.1-1.14,10.29-.2,15.42-.55,2.83-.19,3.92,1,3.72,3.77-.44,6.11-.48,12.27-1.17,18.35-1.4,12.35-1.89,24.76-2.9,37.13-1.16,14.2-2.68,28.36-3.07,42.61-.11,4.35-1.77,6.43-7,6.29-17.64-.48-35.3-.23-52.94-.25-6.26-1.06-12.57-.31-18.85-.43-9.37-.19-12.74-3.23-12.56-12.59.27-14,2.08-27.79,4-41.61.36-2.63,1.12-5.23.95-7.9-.82-12.7,1.41-25.14,3.1-37.63C371.93,689.25,372.3,686.78,374,684.78Z" transform="translate(277 -158)"/><path class="cls-3" d="M374,684.78c-1,7.35-1.83,14.72-3,22-.48,3-1.14,5.84-.95,8.85,1,15-2.57,29.58-3.76,44.38-.61,7.58-1.82,15.14-1.25,22.8.33,4.37,4.69,7.93,10.3,8.07,5,.12,10,0,15,.05,1.6,0,3.37-.57,4.7.93-14.8,0-29.6,0-44.39.19-3.37,0-4.36-.41-3.87-4.41,1.81-15.11,2.94-30.29,4.34-45.45,1.68-18.12,3.4-36.23,5-54.36.21-2.45,1.31-3.05,3.49-3C364.37,684.9,369.19,684.81,374,684.78Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:#fefefe;}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M480.88,792.94c-3.83,0-7.66,0-11.49,0-2,0-3.19-.13-3-3,1.07-14.33,1.48-28.72,2.72-43,1.11-12.89,2.22-25.76,2.95-38.68.46-8.24,1.27-16.46,2-24.69.14-1.59.47-2,2.68-1.87a181.45,181.45,0,0,0,20.32-.36c1.22-.06,2.78-.14,3.16-2.66.67-4.4,1.28-8.55-.11-12.95-2.19-6.89.21-13.88.14-20.84-.06-6.66,1.64-13.34,1.64-20,0-6,1.56-11.78,1.16-17.74-.14-2,.76-3.13,2.89-3.14,8.5-.05,17-.08,25.49-.22,7.34-.12,14.71-.85,22-.41,4.39.27,8.82.39,13.14.24,3.78-.13,3.73,1.65,3.4,4-1.36,9.61-1.61,19.29-2,29-.3,7.76-.25,15.65-1.79,23.18-1.08,5.35-2.77,10.4-2.64,16.06.08,3.8.43,5.56,4.65,5.27s8.33.06,12.49-.11c2.45-.1,3.59.4,3.38,3.21-1.2,16.07-1.4,32.2-2.92,48.27-.92,9.67-.31,19.48-1.26,29.15-.93,9.47-.5,19-1.35,28.42-.16,1.75-1.07,1.94-2.43,2-9.27.23-18.54.51-27.81.72-6,.14-11.95.24-17.93.26Q505.64,793,480.88,792.94Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M688.32,678.37c6.48-1.08,13,.16,19.42-.34,1.14-.09,1.78.47,1.69,2.11-.34,5.79.05,11.64-.48,17.4-1.39,15-.26,30.1-1.71,45.12-.76,7.79-.07,15.7-.25,23.55s-.81,15.51-.89,23.26c0,3.15-1.9,2.46-3.58,2.46-16.33,0-32.66,0-49,0q-28.53,0-57,.16c-7.62,0-7.43.11-6.55-7.79.62-5.55.56-11.18.83-16.75.42-8.63,1-17.28,1.34-25.92.64-16.17,1.82-32.32,2.47-48.5.12-2.84.93-5.77.35-8.49-1.27-6,2.93-7,6.56-6.37,6.94,1.15,13.84-.2,20.71.67,1.72.22,1.85-.78,1.85-2.09a47.69,47.69,0,0,1,.65-10.39c.2-.92-.46-2.91-.91-3-5.09-.61-2.73-4.41-2.65-6.68.55-15.06.41-30.18,2.86-45.13a7.54,7.54,0,0,0-.17-1.47c-.37-9.21-.37-9.07,8.66-9.27,18.49-.4,37,.7,55.49-.37,2-.11,3.2.49,3.09,2.94-.71,16.32-.84,32.66-1.89,49C688.61,661,687,669.58,688.32,678.37Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M811.77,680c5.44,0,11,.23,16.42-.09,3.78-.22,5,.73,4.93,4.77-.21,26.57-.11,53.14-.11,79.71,0,7.49-.09,15,0,22.48.06,3-.88,4.18-4,4.15-12.62-.12-25.25-.17-37.87,0-8.65.11-17.3.82-26,.91-14.36.16-28.73-.25-43.08.21-5,.16-6-2.93-5.63-5.86.84-6,0-11.89.51-17.79,1.4-16,.48-32.14,1.79-48.2.83-10.23.17-20.57.19-30.86,0-9.47,0-9.24,9.15-8.88,5.28.22,10.57-.91,15.92-.23,2.79.35,4.43-.89,4-4.26-.37-2.95,0-6-.11-9-.08-1.69,1.13-4.1-2.33-4.33-1-.06-.61-2.05-.62-3.18-.2-17.65,1.65-35.27,1-52.93-.13-3.43,1.83-3.66,4.46-3.64,10.66.07,21.34.3,32-.06,8.42-.29,16.85.86,25.28-.69,1.7-.31,4.53.29,4.41,4.08-.6,18.58.32,37.18-.51,55.78C811.35,667.88,811.57,673.78,811.77,680Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M843,740.81q0-22.23,0-44.47c0-10.87,2.11-12.72,13.14-11.72,4.78.43,9.55-1,14.37,0,.89.2,1.52-1.36,1.51-2.65-.06-6.15,1.89-13.19-.44-18.28-4.35-9.47-.72-18.86-2.11-28.22a72.45,72.45,0,0,1,.19-21.69c.18-1.1.56-2.48.1-3.33-1.74-3.2.15-3.45,2.52-3.49,1,0,2,0,3,0,18.19-.06,36.39-.09,54.58-.22,2.19,0,3.08.42,3.2,2.89.7,13.84,1.45,27.68.85,41.51-.44,10.23,1.61,20.32,1.05,30.51-.13,2.24,1,2.33,2.69,2.31,4.33-.07,8.67.09,13-.07,2.46-.1,3.57.4,3.41,3.21a193,193,0,0,0,.27,28.67c1.52,16.25-.37,32.49,1.33,48.72a137.51,137.51,0,0,1,.37,20c-.17,4.23-1,6.62-6.36,6.55-25.32-.34-50.66-.3-76-.07-9,.08-18.1-.43-27.16.48-2.16.22-3.7-1-3.64-4.22C843.17,771.8,843,756.3,843,740.81Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M966,771.59c0-8.14-.48-16.25-.82-24.38-.6-13.94.17-27.94-.31-41.89-.24-7.24-.64-14.48-1-21.72-.18-4.27,1-6,5.52-5.73,7.48.37,15,0,22.49.15,3.54.08,4.3-1.95,3.9-4.62-1.5-10-1.66-20-1.94-30.11-.37-13.11-.87-26.21-1-39.33,0-3,.39-3.1,3.15-3.11q18.24-.06,36.48-.86c6-.27,12,1.1,18.07.12,2.19-.35,2.8,1.9,2.9,3.93.49,9.59,1.12,19.17,1.52,28.75.55,13.51.85,27,1.47,40.52.12,2.8,1,5.22,5.1,4.64s8.35-.18,12.53-.19c2.83,0,4.08,1.18,4,4.23-.47,13.4.72,26.78,1.3,40.13.36,8.46-.59,17.13,1.6,25.53.5,1.93,0,4-.09,6-.37,11,1,21.85,1.2,32.78.06,2.79-.67,3.55-3.53,3.59-12.86.18-25.7.55-38.58.06-9.55-.37-19.15.7-28.73.81-14.17.17-28.36,0-42.54.1-2.31,0-2.75-.84-2.71-2.9C966.08,782.59,966,777.09,966,771.59Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1150.13,789.94c-15.52.45-34.88-.55-54.23.45-2.17.11-3.91-.9-4-3.81-.22-13.2-.23-26.43-1-39.61-1-16-1.51-32.05-2.15-48.08-.2-5-.3-10.19-.81-15.25-.33-3.28,1-3.82,3.92-3.74,7.49.2,15-.1,22.48.14,3.54.11,4.55-1.46,4.69-4.59a66,66,0,0,0-2-17.46c-1.54-6.78-.47-13.84-1.33-20.68-1.14-9-.41-18.11-1.62-27.14-1-7.47,0-8.5,7.3-8.08,14,.81,27.93-1.05,41.91.44,2.66.29,6.62-1.71,8.24.22s.8,5.62.94,8.55c.52,11.41.24,22.92,1.69,34.2,1.35,10.48-.14,21,1.56,31.41.51,3.2,1.82,3.47,4,3,4.32-.89,8.72.9,13.12-.68,1-.34,4.07,0,4.21,3.73.65,17.54,1.54,35.09,2.93,52.58,1.35,17.11,2.33,34.22,3.33,51.35.14,2.35-.69,3-4,3C1184.28,790,1169.12,789.94,1150.13,789.94Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1261.82,604c9.2,0,18.42.29,27.61-.14,4-.19,5.26,1.62,5.5,4.78,1.09,14.09,2,28.21,3.06,42.31s2.12,28,3.54,42c.48,4.68.78,9.39,1.3,14.08,1.7,15.25,2.87,30.57,4.07,45.88.84,10.74,1.32,21.51,2.12,32.26.23,3.07-.71,3.87-3.82,3.89-8.89.06-17.77.79-26.66.86-20.14.14-40.29,0-60.43.11-3.19,0-4.15-1.65-4.07-4.1.21-5.8-.68-11.5-1-17.24-1.17-18.88-2.08-37.77-3.78-56.63-.82-9-1.88-18.08-1.3-27.21.12-2,.42-2.6,2.66-3a66.19,66.19,0,0,1,17.75-.73c5.59.57,7.29-2.14,7.6-6.75.27-4.05.41-9.56-1.38-11.76-4-4.87-2.48-10.09-3.42-15-1-5.36-.38-11-1.27-16.41-1.13-6.81-.2-13.74-1.8-20.52-1.29-5.5,0-6.66,5.77-6.66Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user