Merge pull request 'zjl' (#13) from zjl into features/warning

Reviewed-on: #13

.gitignore

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

package-lock.json

@@ -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",

package.json

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

public/index.html

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

src/App.js

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

src/assets/CenterChart1icon1.svg

@@ -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>

src/assets/CenterChart1icon2.svg

@@ -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>

src/assets/CenterChart1icon3.svg

@@ -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>

src/assets/CenterChart1icon4.svg

@@ -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>

src/components/Common/AnnealFanRunFrequence/index.jsx

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

src/components/Common/BottomItemBackgroundForecast/index.jsx

@@ -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;

src/components/Common/BottomItemBackgroundForecast/index.module.css

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

src/components/Common/BottomItemBackgroundForecastBottom/index.jsx

@@ -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;

src/components/Common/BottomItemBackgroundForecastBottom/index.module.css

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

src/components/Common/BottomItemBackgroundForecastMiddle/index.jsx

@@ -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;

src/components/Common/BottomItemBackgroundForecastMiddle/index.module.css

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

src/components/Common/BottomItemBackgroundForecastTop/index.jsx

@@ -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;

src/components/Common/BottomItemBackgroundForecastTop/index.module.css

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

src/components/Common/Company/index.jsx

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

src/components/Common/Company/index.module.scss

@@ -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;

src/components/Common/CurrentTemp/index.jsx

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

src/components/Common/Energy/EnergeCostRealtime/index.jsx

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

src/components/Common/ForecastTemperature/index.jsx

@@ -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;

src/components/Common/ForecastTemperature/leftbox.module.scss

@@ -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;
+      }
+    }
+  }
+}

src/components/Common/GraphBase/index.jsx

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

src/components/Common/GraphBase/index.module.css

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

src/components/Common/GraphBase/selector.style.overwrite.css

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

src/components/Common/KilnInfo/Kiln.jsx

@@ -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>

src/components/Common/NatGasFlow/gasChart/chart.config.js

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

src/components/Common/NavMenu/index.jsx

@@ -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"],

src/components/Common/NavMenu/index.module.scss

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

src/components/Common/SmokeHandle/SmokeHandleTable/index.jsx

@@ -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>

src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx

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

src/components/Common/SmokeHandle/index.module.scss

@@ -27,3 +27,10 @@
   grid-template-columns: 1fr 1fr;
   gap: 4px;
 }
+
+.disabled {
+  display: none;
+  pointer-events: none;
+  opacity: 0.5;
+  color: transparent;
+}

src/components/Common/TemperatureBottom/index.jsx

@@ -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 = [
+const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];
-  "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
+        ...props.style,
-      }}
-      animate={{
-        opacity: [0, 0, 0, 0.6, 1],
-        transition: { duration: 0.3, delay: 2 },
       }}
+      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>
   );

src/components/Common/TemperatureTop/forecastIndex.jsx

@@ -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;

src/components/Common/TemperatureTop/index.jsx

@@ -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>
   );

src/components/Common/TodayFaultTotal/index.jsx

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

src/components/Common/TodayFaultType/index.jsx

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

src/components/Common/TodayGood/components/GoodRateChart/index.jsx

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

src/components/Common/VideoMonitor/index.jsx

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

src/components/Common/VideoMonitor/video-monitor.css

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

src/components/Common/WarnAlert/ListContainer.jsx

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

src/components/Common/WarnAlert/index.jsx

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

src/components/Common/WarnAlert/position.json

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

src/components/Common/WarnAlert/warn-alert.css

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

src/components/Common/crownTe/Kiln.jsx

@@ -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>
+  );
+}

src/components/Common/crownTe/kiln.module.scss

@@ -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;
+			}
+		}
+	}
+}

src/components/Common/forecastLargeBackground/index.jsx

@@ -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;

src/components/Common/forecastLargeBackground/index.module.css

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

src/components/Common/forecastRect/index.jsx

@@ -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;

src/components/Common/forecastRect/index.module.css

@@ -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);
+}

src/components/Common/forecastRect/visContext.jsx

@@ -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;

src/components/Common/pointItemBackgroundForecast/Container.jsx

@@ -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;

src/components/Common/pointItemBackgroundForecast/container.module.scss

@@ -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");
+// }

src/components/Common/pointItemBackgroundForecast/index.jsx

@@ -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;

src/components/Common/pointItemBackgroundForecast/index.module.css

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

src/components/Modules/EnergyCostAnalysis/Energy/index.jsx

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

src/components/Modules/EnergyCostAnalysis/Energy/index.module.css

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

src/components/Modules/EnergyCostAnalysis/NO/index.jsx

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

src/components/Modules/EnergyCostAnalysis/NO2/index.jsx

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

src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx

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

src/components/Modules/EnergyCostAnalysis/O/index.jsx

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

src/components/Modules/EnergyCostAnalysis/SO2/index.jsx

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

src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx

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