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

Reviewed-on: #13
1
2024-09-18 14:57:23 +08:00 · 2024-09-18 14:56:01 +08:00 · 2024-09-18 13:21:45 +08:00 · 2024-09-18 11:25:10 +08:00 · 2024-09-18 11:24:29 +08:00 · 2024-09-18 11:23:50 +08:00
129 changed files with 5059 additions and 332 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/video/liquidSpeed.webm
+++ b/public/video/liquidSpeed.webm
--- a/src/App.js
+++ b/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,7 +17,7 @@ import RulerContainer from "./components/Tools/Ruler";
 import { Switch } from "antd";
 import { createPortal } from "react-dom";

-const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"];
+const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"];
 const LUNBO_INTERVAL = 60 * 1000;
 function App() {
  const { styles, value, setValue } = useSlider(100);
--- a/src/assets/CenterChart1icon1.svg
+++ b/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>
--- a/src/assets/CenterChart1icon2.svg
+++ b/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>
--- a/src/assets/CenterChart1icon3.svg
+++ b/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>
--- a/src/assets/CenterChart1icon4.svg
+++ b/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>
--- a/src/assets/Icon/close.png
+++ b/src/assets/Icon/close.png
--- a/src/assets/Icon/forecast.png
+++ b/src/assets/Icon/forecast.png
--- a/src/assets/Icon/yieldRate.png
+++ b/src/assets/Icon/yieldRate.png
--- a/src/assets/blueBack.png
+++ b/src/assets/blueBack.png
--- a/src/assets/dayNight.png
+++ b/src/assets/dayNight.png
--- a/src/assets/dayNightChange.png
+++ b/src/assets/dayNightChange.png
--- a/src/assets/ditu.png
+++ b/src/assets/ditu.png
--- a/src/assets/forecastBack.png
+++ b/src/assets/forecastBack.png
--- a/src/assets/forecastChartBack.png
+++ b/src/assets/forecastChartBack.png
--- a/src/assets/kilnSpeed.png
+++ b/src/assets/kilnSpeed.png
--- a/src/assets/large.png
+++ b/src/assets/large.png
--- a/src/assets/lastBack.png
+++ b/src/assets/lastBack.png
--- a/src/assets/lefTopBack.png
+++ b/src/assets/lefTopBack.png
--- a/src/assets/leftMiddleBack.png
+++ b/src/assets/leftMiddleBack.png
--- a/src/assets/modelButton.png
+++ b/src/assets/modelButton.png
--- a/src/assets/paramsData.png
+++ b/src/assets/paramsData.png
--- a/src/assets/pointBack.png
+++ b/src/assets/pointBack.png
--- a/src/assets/pointsBack.png
+++ b/src/assets/pointsBack.png
--- a/src/assets/seasonActive.png
+++ b/src/assets/seasonActive.png
--- a/src/assets/seasonChange.png
+++ b/src/assets/seasonChange.png
--- a/src/assets/toFourBack.png
+++ b/src/assets/toFourBack.png
--- a/src/components/Common/BottomItemBackgroundForecast/index.jsx
+++ b/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;
--- a/src/components/Common/BottomItemBackgroundForecast/index.module.css
+++ b/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;
+}
--- a/src/components/Common/BottomItemBackgroundForecastBottom/index.jsx
+++ b/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;
--- a/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css
+++ b/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;
+}
--- a/src/components/Common/BottomItemBackgroundForecastMiddle/index.jsx
+++ b/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;
--- a/src/components/Common/BottomItemBackgroundForecastMiddle/index.module.css
+++ b/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;
+}
--- a/src/components/Common/BottomItemBackgroundForecastTop/index.jsx
+++ b/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;
--- a/src/components/Common/BottomItemBackgroundForecastTop/index.module.css
+++ b/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%;
+}
--- a/src/components/Common/Company/index.jsx
+++ b/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>
--- a/src/components/Common/Company/index.module.scss
+++ b/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;
--- a/src/components/Common/ForecastTemperature/index.jsx
+++ b/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;
--- a/src/components/Common/ForecastTemperature/leftbox.module.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/src/components/Common/KilnInfo/Kiln.jsx
+++ b/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>
--- a/src/components/Common/NavMenu/index.jsx
+++ b/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,7 +12,7 @@ export default function CenterMenu({ active, onChangeActive }) {
  const menuList = [
    ["窑炉总览", "/kilnSummary"],
    ["窑炉内部", "/kilnInner"],
-    ["窑炉优化", "/kilnOptimize"],
+    ["AI窑炉", "/kilnOptimize"],
    ["退火监测", "/stopFire"],
    ["质检统计", "/quailtyCheck"],    
    ["能耗分析", "/energyCost"],
--- a/src/components/Common/TemperatureTop/forecastIndex.jsx
+++ b/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;
--- a/src/components/Common/crownTe/Kiln.jsx
+++ b/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>
+  );
+}
--- a/src/components/Common/crownTe/kiln.module.scss
+++ b/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;
+			}
+		}
+	}
+}
--- a/src/components/Common/forecastLargeBackground/index.jsx
+++ b/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;
--- a/src/components/Common/forecastLargeBackground/index.module.css
+++ b/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;
+}
--- a/src/components/Common/forecastRect/index.jsx
+++ b/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;
--- a/src/components/Common/forecastRect/index.module.css
+++ b/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);
+}
--- a/src/components/Common/forecastRect/visContext.jsx
+++ b/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;
--- a/src/components/Common/pointItemBackgroundForecast/Container.jsx
+++ b/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;
--- a/src/components/Common/pointItemBackgroundForecast/container.module.scss
+++ b/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");
+// }
--- a/src/components/Common/pointItemBackgroundForecast/index.jsx
+++ b/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;
--- a/src/components/Common/pointItemBackgroundForecast/index.module.css
+++ b/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;
+}
--- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
@@ -1,3 +1,10 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-20 14:09:17
+ * @LastEditTime: 2024-09-12 15:44:34
+ * @LastEditors: zhp
+ * @Description: 
+ */
 import { motion, AnimatePresence } from "framer-motion";
 import { useRef, useEffect, useMemo, useState } from "react";
 import FeederStatus from "../../../../Common/Feeder";
@@ -39,7 +46,7 @@ function FloorTwoToOne(props) {
            left: "0px",
            width: "calc(100% - 50px)",
            height: "calc(100% - 7px)",
-            zIndex: -998,
+            zIndex: 998,
            overflow: "clip",
          }}
          initial={{ opacity: 0 }}
--- a/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
+++ b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
@@ -3,6 +3,7 @@ import EnterToFloorOne from "./videoComponents/EnterToFloor1";
 import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
 import FloorOneToTwo from "./videoComponents/Floor1To2";
 import FloorTwoToOne from "./videoComponents/Floor2To1";
+import FloorToFour from "./videoComponents/FloorToFour";
 import { useRef, useEffect, useReducer } from "react";
 import { AnimatePresence } from "framer-motion";

@@ -47,6 +48,17 @@ const opacityReducer = (state, action) => {
        enterVideo: 0,
      };
    }
+    case "to-4": {
+      return {
+        ...initOpacity,
+        // FloorToFour: 1,
+        enterToFloorTwo: 0,
+        floorOneToTwo: 0,
+        enterVideo: 0,
+        floorToFour:1,
+      };
+    }
+      
  }
 };

@@ -61,7 +73,7 @@ function VideoContainer(props) {
      if (floor == 1) {
        if (lastFloor.current == 2 || lastFloor.current == 3) {
          dispatch({ type: "floor-2-to-1" });
-        } else {
+        }  else if (lastFloor.current == 4) {
          dispatch({ type: "enter-to-1" });
        }
      } else if (floor == 2) {
@@ -69,17 +81,19 @@ function VideoContainer(props) {
          dispatch({ type: "floor-1-to-2" });
        } else if (lastFloor.current == 3) {
          // 视频不变画面隐藏,通过判断floor的值隐藏3显示2
-        } else {
-          dispatch({ type: "enter-to-2" });
+        }  else if (lastFloor.current == 4) {
+          dispatch({ type: "floor-1-to-2" });
        }
      } else if (floor == 3) {
        if (lastFloor.current == 1) {
          dispatch({ type: "floor-1-to-2" });
        } else if (lastFloor.current == 2) {
          // 视频不变画面隐藏，通过判断floor的值隐藏2显示3
-        } else {
-          dispatch({ type: "enter-to-2" });
+        }  else if (lastFloor.current == 4) {
+          dispatch({ type: "floor-1-to-2" });
        }
+      } else if (floor == 4) {
+          dispatch({ type: "to-4" });
      }
      lastFloor.current = floor;
    }
@@ -113,6 +127,7 @@ function VideoContainer(props) {
        preFloor={preFloor}
      />
      <FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
+      <FloorToFour key="to-4" opacity={opacity.floorToFour} />
    </AnimatePresence>
  );
 }
--- a/src/components/Modules/KilnOptimize/Center/index.jsx
+++ b/src/components/Modules/KilnOptimize/Center/index.jsx
@@ -1,16 +1,30 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import cls from "./index.module.css";
 import Chart2 from "../../../Common/TimeFireDir";
+import Chart1 from "../../../Common/ForecastTemperature";
 import VideoContainer from "./VideoContainer";
-
-function KilnCenter() {
-  const [floor, setFloor] = useState(0);
+function KilnCenter({ onFloorChange }) {
+  const [floor, setFloor] = useState(1);  // 初始值设置为 1
  const preFloor = useRef();
+
+  useEffect(() => {
+    onFloorChange(floor); 
+  }, [floor, onFloorChange]);
+
  function onFloorUpdate(flr) {
    preFloor.current = floor;
    setFloor(flr);
+    onFloorChange(flr); 
  }

+  const subMenuStyle = {
+    marginLeft: floor === 4? "400px" : "0",
+  };
+
+  const colorStyle = {
+    right: floor === 4? "0px" : "400px",
+  };
+
  return (
    <div
      className="bgKilnInner"
@@ -19,16 +33,27 @@ function KilnCenter() {
        position: "absolute",
        top: "12%",
        display: "flex",
+        zIndex:99,
        flexDirection: "column",
      }}
    >
      {/* 时间火向数据 */}
+      {floor === 4 && (
+          <div
+            className="fireAndTime"
+            style={{ position: "absolute", top: "-112px", height: "212px" }}
+          >
+            <Chart1 />
+          </div>
+        )}
+      {floor!== 4 && (
        <div
          className="fireAndTime"
          style={{ position: "absolute", top: "-112px", height: "212px" }}
        >
          <Chart2 />
        </div>
+      )}

      {/* menu  */}
      <div
@@ -36,7 +61,8 @@ function KilnCenter() {
        style={{
          display: "flex",
          marginBottom: "24px",
-          justifyContent: "center",
+         ...subMenuStyle,
+          justifyContent: "center"
        }}
      >
         <div
@@ -63,6 +89,14 @@ function KilnCenter() {
        >
          溶液速度
        </div>
+          <div
+          className={
+            "flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
+          }
+          onClick={() => onFloorUpdate(4)}
+        >
+          AI预测
+        </div>
      </div>

      {/* 颜色指示图  */}
@@ -70,7 +104,7 @@ function KilnCenter() {
        style={{
          position: "absolute",
          top: "30px",
-          right: "450px",
+         ...colorStyle,
          width: "300px",
          height: "41px",
        }}
--- a/src/components/Modules/KilnOptimize/Center/index.module.css
+++ b/src/components/Modules/KilnOptimize/Center/index.module.css
@@ -2,7 +2,7 @@
 	transition: all 0.3s ease-out;
 	cursor: pointer;
 	user-select: none;
-	padding: 10px 50px;
+	padding: 10px 30px;
 	font-size: 32px;
 	line-height: 48px;
 	letter-spacing: 6px;
@@ -21,7 +21,7 @@
 }

 .menuItem:not(:first-child) {
-	margin-left: 50px;
+	margin-left:20px;
 }

 .videoLayer2 {
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
@@ -4,13 +4,13 @@ import FeederStatus from "../../../../Common/Feeder";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
 import { useSelector } from "react-redux";
 import BotttomColorBlock from "./../../components/BotttomColorBlock";
-import image from "./../../../../../assets/kilnSpeed.png";

 function FloorOneToTwo(props) {
  const fireInfo = useSelector((state) => state.fireInfo);
  const fireDir = fireInfo?.fireDirection || null;

  const [fireCanPlay, setFireCanPlay] = useState(false);
+  const [liquidCanPlay, setLiquidCanPlay] = useState(false);

  const vd = useRef(null);
  const show = props.opacity || 0;
@@ -44,12 +44,14 @@ function FloorOneToTwo(props) {
      setTimeout(() => {
        // console.log("开启1-2的火播放");
        setFireCanPlay(true);
+        setLiquidCanPlay(true);
      }, 2000);
    }
    if (!show) setFireCanPlay(false);
    return () => {
      // console.log("关闭1-2的火播放");
      setFireCanPlay(false);
+      setLiquidCanPlay(false);
    };
  }, [show]);

@@ -126,24 +128,20 @@ function FloorOneToTwo(props) {
            />
          )}
          {/* 溶液速度色块 */}
-          {showSpeed && (
-            <motion.div
+          {showSpeed && liquidCanPlay && (
+            <video
+              src="/video/liquidSpeed.webm"
+              muted
+              autoPlay
+              loop
+              width={3842}
              style={{
                position: "absolute",
-                top: "242px",
-                left: "445px",
-                zIndex: "999",
+                top: "0px",
+                left: "-4px",
+                zIndex: 9,
              }}
-              animate={speedAn}
-            >
-              <img
-                src={image}
-                alt=""
-                width="100%"
-                height="100%"
-                style={{ transform: "scale(0.583, 0.593)" }}
-              />
-            </motion.div>
+            ></video>
          )}
          <FeederStatus />
        </motion.div>
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorTo4.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorTo4.jsx
@@ -0,0 +1,118 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-27 08:38:07
+ * @LastEditTime: 2024-08-28 15:28:39
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useState } from "react";
+import FeederStatus from "../../../../Common/Feeder";
+import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
+import { useSelector, useDispatch } from "react-redux";
+import TopColorBlock from "../../components/forecastTopColorBlock";
+import myImage from '../../../../../assets/toFourBack.png';
+function FloorToFour(props) {
+  const fireInfo = useSelector((state) => state.fireInfo);
+  const fireDir = fireInfo?.fireDirection || null;
+  const [fireCanPlay, setFireCanPlay] = useState(false);
+
+  // const vd = useRef(null);
+  const show = props.opacity || 0;
+
+  // useEffect(() => {
+  //   if (show) {
+  //     vd.current.play();
+  //     setTimeout(() => {
+  //       // console.log("开启2-1的火播放");
+  //       setFireCanPlay(true);
+  //     }, 1800);
+  //   }
+  //   if (!show) setFireCanPlay(false);
+  //   return () => {
+  //     // console.log("关闭2-1的火播放");
+  //     setFireCanPlay(false);
+  //   };
+  // }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            width: "calc(100% - 50px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
+        >
+            <div>
+            <img src={myImage} style={{ width: '1726px', height: '695px',position: "absolute",
+                top: "300px",
+                left: "950px",
+                
+                zIndex: -9, }} alt="Example" />
+          </div>
+          {/* <video ref={vd} muted>
+            <source src="/video/2to1.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "10px",
+                left: "0px",
+                zIndex: 9,
+              }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "-12px",
+                left: "-10px",
+                zIndex: 9,
+              }}
+            ></video>
+          )} */}
+
+          <TopColorBlock />
+
+          <TemperatureTop
+            style={{
+              top: "200px",
+              left: "652px",
+              width: "2380px",
+              zIndex: 10,
+            }}
+          />
+          <FeederStatus style={{ left: "680px" }} />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorToFour;
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx
@@ -0,0 +1,125 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-28 15:27:46
+ * @LastEditTime: 2024-09-14 08:39:56
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useState } from "react";
+import FeederStatus from "../../../../Common/Feeder";
+import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
+import { useSelector, useDispatch } from "react-redux";
+// import TopColorBlock from "../../components/TopColorBlock";
+import TopColorBlock from "../../components/forecastTopColorBlock";
+function FloorTwoToOne(props) {
+  const fireInfo = useSelector((state) => state.fireInfo);
+  const fireDir = fireInfo?.fireDirection || null;
+  const [fireCanPlay, setFireCanPlay] = useState(false);
+
+  const vd = useRef(null);
+  const show = props.opacity || 0;
+
+  useEffect(() => {
+    if (show) {
+      vd.current.play();
+      setTimeout(() => {
+        // console.log("开启2-1的火播放");
+        setFireCanPlay(true);
+      }, 1800);
+    }
+    if (!show) setFireCanPlay(false);
+    return () => {
+      // console.log("关闭2-1的火播放");
+      setFireCanPlay(false);
+    };
+  }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            width: "calc(100% - 500px)",
+            height: "calc(100% - 7px)",
+            zIndex: -99,
+            overflow: "clip",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
+        >
+          <video  style={{
+            position: "fixed",
+            top: "10px",
+            left: "70px",
+            width: "calc(100% - 600px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }} ref={vd} muted>
+            <source src="/video/2to1.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "10px",
+                width: "calc(100% - 500px)",
+                height: "calc(100% - 7px)",
+                left: "240px",
+                zIndex: 9,
+              }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "-12px",
+                left: "-100px",
+                width: "calc(100% - 500px)",
+                height: "calc(100% - 7px)",
+                left: "240px",
+                zIndex: 9,
+              }}
+            ></video>
+          )}
+
+          <TopColorBlock />
+
+          <TemperatureTop
+            style={{
+              top: "200px",
+              left: "652px",
+              width: "2380px",
+              zIndex: 9999,
+            }}
+          />
+          <FeederStatus style={{ left: "680px" }} />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorTwoToOne;
--- a/src/components/Modules/KilnOptimize/LeftSide/indexForecast.jsx
+++ b/src/components/Modules/KilnOptimize/LeftSide/indexForecast.jsx
@@ -0,0 +1,28 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-21 16:31:53
+ * @LastEditTime: 2024-08-30 14:45:54
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import React from 'react';
+import KilnPress from '../components/paramsInput';
+// import LiquidTrend from '../components/LiquidTrend';
+
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+export default function Index({ onGetValueFromGrandChild }) {
+	return (
+		<motion.div
+			className={cls.leftBar}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'relative' }}
+			transition={{ type: 'tween' }}
+		>
+			<KilnPress  onSendValueToParent={onGetValueFromGrandChild}  style={{ flex: 1, width: '100%', marginTop: '24px' }} />
+			{/* <LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} /> */}
+		</motion.div>
+	);
+}
--- a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx
@@ -40,6 +40,50 @@ const BotttomColorBlock = (props) => {
    }
  }, [floor]);
  function returnColor(n) {
+    let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
+    if (num <= 100) {
+      return "rgba(96, 0, 189, 0.5)";
+    } else if (num > 100 && num <= 200) {
+      return "rgba(102, 7, 255, 0.5)";
+    } else if (num > 200 && num <= 300) {
+      return "rgba(10, 20, 255, 0.5)";
+    } else if (num > 300 && num <= 400) {
+      return "rgba(7, 89, 255, 0.5)";
+    } else if (num > 400 && num <= 500) {
+      return "rgba(7, 139, 255, 0.5)";
+    } else if (num > 500 && num <= 600) {
+      return "rgba(7, 194, 255, 0.5)";
+    } else if (num > 600 && num <= 700) {
+      return "rgba(7, 255, 253, 0.5)";
+    } else if (num > 700 && num <= 800) {
+      return "rgba(7, 255, 205, 0.5)";
+    } else if (num > 800 && num <= 900) {
+      return "rgba(20, 237, 127, 0.5)";
+    } else if (num > 900 && num <= 1000) {
+      return "rgba(0, 193, 39, 0.5)";
+    } else if (num > 1000 && num <= 1100) {
+      return "rgba(147, 210, 1, 0.5)";
+    } else if (num > 1100 && num <= 1200) {
+      return "rgba(206, 206, 0, 0.5)";
+    } else if (num > 1200 && num <= 1300) {
+      return "rgba(255, 226, 13, 0.5)";
+    } else if (num > 1300 && num <= 1400) {
+      return "rgba(249, 240, 146, 0.5)";
+    } else if (num > 1400 && num <= 1500) {
+      return "rgba(250, 204, 93, 0.5)";
+    } else if (num > 1500 && num <= 1600) {
+      return "rgba(240, 139, 32, 0.5)";
+    } else if (num > 1600 && num <= 1700) {
+      return "rgba(241, 88, 26, 0.5)";
+    } else if (num > 1700 && num <= 1800) {
+      return "rgba(255, 0, 0, 0.5)";
+    } else if (num > 1800 && num <= 1900) {
+      return "rgba(182, 0, 0, 0.5)";
+    } else if (num > 1900) {
+      return "rgba(140, 0, 33, 0.5)";
+    }
+  }
+  function returnColor2(n) {
    let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
    if (num <= 100) {
      return "rgba(96, 0, 189, 0.7)";
@@ -83,50 +127,6 @@ const BotttomColorBlock = (props) => {
      return "rgba(140, 0, 33, 0.7)";
    }
  }
-  function returnColor2(n) {
-    let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
-    if (num <= 100) {
-      return "rgba(96, 0, 189, 0.9)";
-    } else if (num > 100 && num <= 200) {
-      return "rgba(102, 7, 255, 0.9)";
-    } else if (num > 200 && num <= 300) {
-      return "rgba(10, 20, 255, 0.9)";
-    } else if (num > 300 && num <= 400) {
-      return "rgba(7, 89, 255, 0.9)";
-    } else if (num > 400 && num <= 500) {
-      return "rgba(7, 139, 255, 0.9)";
-    } else if (num > 500 && num <= 600) {
-      return "rgba(7, 194, 255, 0.9)";
-    } else if (num > 600 && num <= 700) {
-      return "rgba(7, 255, 253, 0.9)";
-    } else if (num > 700 && num <= 800) {
-      return "rgba(7, 255, 205, 0.9)";
-    } else if (num > 800 && num <= 900) {
-      return "rgba(20, 237, 127, 0.9)";
-    } else if (num > 900 && num <= 1000) {
-      return "rgba(0, 193, 39, 0.9)";
-    } else if (num > 1000 && num <= 1100) {
-      return "rgba(147, 210, 1, 0.9)";
-    } else if (num > 1100 && num <= 1200) {
-      return "rgba(206, 206, 0, 0.9)";
-    } else if (num > 1200 && num <= 1300) {
-      return "rgba(255, 226, 13, 0.9)";
-    } else if (num > 1300 && num <= 1400) {
-      return "rgba(249, 240, 146, 0.9)";
-    } else if (num > 1400 && num <= 1500) {
-      return "rgba(250, 204, 93, 0.9)";
-    } else if (num > 1500 && num <= 1600) {
-      return "rgba(240, 139, 32, 0.9)";
-    } else if (num > 1600 && num <= 1700) {
-      return "rgba(241, 88, 26, 0.9)";
-    } else if (num > 1700 && num <= 1800) {
-      return "rgba(255, 0, 0, 0.9)";
-    } else if (num > 1800 && num <= 1900) {
-      return "rgba(182, 0, 0, 0.9)";
-    } else if (num > 1900) {
-      return "rgba(140, 0, 33, 0.9))";
-    }
-  }
  // 窑炉内部svg变色
  function BigSvg() {
    return (
@@ -225,7 +225,7 @@ const BotttomColorBlock = (props) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "14px",
+          left: "13px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -261,7 +261,7 @@ const BotttomColorBlock = (props) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "21px",
+          left: "20px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -272,10 +272,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "5px",
+          top: "108px",
+          left: "-10px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
        }}
      />
      <T2
@@ -284,10 +284,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "9px",
+          top: "107px",
+          left: "-5px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
        }}
      />
      <T3
@@ -296,10 +296,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "10px",
+          top: "109px",
+          left: "0px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
        }}
      />
      <T4
@@ -308,10 +308,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "12px",
+          top: "109px",
+          left: "7px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.69)",
        }}
      />
      <T5
@@ -320,10 +320,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "13px",
+          top: "110px",
+          left: "11px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.69)",
        }}
      />
      <T6
@@ -332,10 +332,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
+          top: "110px",
          left: "16px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
        }}
      />
      <T7
@@ -344,10 +344,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "18px",
+          top: "102px",
+          left: "19px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.69,0.64)",
        }}
      />
      <T8
@@ -356,10 +356,10 @@ const BotttomColorBlock = (props) => {
          width: "100%",
          height: "100%",
          position: "absolute",
-          top: "120px",
-          left: "20px",
+          top: "102px",
+          left: "24px",
          zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68,0.64)",
        }}
      />
    </motion.div>
--- a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx
@@ -0,0 +1,80 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-23 14:44:30
+ * @LastEditTime: 2024-09-14 17:08:31
+ * @LastEditors: zhp
+ * @Description: 
+ */
+// 窑炉压力
+import cls from "./index.module.css";
+import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
+import CommonChart from "../forecastRightChart/yield"
+import { useSelector } from "react-redux";
+import moment from "moment";
+import React, { useContext,useEffect,useState} from 'react'
+import { HomeContext } from '../../../../../pages/Home';
+function KilnBottomForecast(props) {
+ const value = useContext(HomeContext);
+  const kilnInfo = useSelector((state) => state.cutting);
+ const originalData = kilnInfo.forecastWeeklyChart;
+const data = [];
+const xData = [];
+
+  let latestDataTime;
+  if (originalData.length !== 0) {
+      originalData.forEach((ele) => {
+          data.push(ele.sum);
+      });
+          originalData.forEach((ele) => {
+        if (!latestDataTime || moment(ele.dataTime) > moment(latestDataTime)) {
+          latestDataTime = ele.dataTime;
+        }
+      });
+
+      originalData.forEach((ele) => {
+        xData.push(moment(ele.dataTime).format('MM-DD'));
+      });
+
+      const oneDayLater = moment(latestDataTime).add(1, 'days')
+      xData.push(oneDayLater.format('MM-DD'));
+
+      const twoDaysLater = moment(latestDataTime).add(2, 'days');
+      xData.push(twoDaysLater.format('MM-DD'));
+        console.log('data',data);
+  }
+
+ const dataSource=  {
+     color1: 'rgba(0, 255, 245, .4)',
+    color:'rgba(255, 194, 20, .4)',
+    yName:'%',
+    // areaColor0:'rgba(18, 255, 245, 0.4)',
+    areaColor1:'rgba(255, 234, 153, 0)',
+    // msg: kilnOptimize.topTempAvgFor1h,
+    xData,
+    data: data? data : [],
+    range:[-10,10],
+    modelFlag: value
+  }
+
+  return (
+    <BottomBarItem
+      icon="yieldRate"
+      title="综合良品率趋势"
+      style={props.style}
+    >
+      {/* legend */}
+      <div className={cls.legend}>
+        <span className={cls.item}>
+           实际值
+        </span>
+        <span className={cls.block}>
+          预测值
+        </span>
+      </div>
+      <div className={cls.chart}>
+        <CommonChart dataSource={dataSource}/>
+      </div>
+    </BottomBarItem>
+  )
+}
+export default KilnBottomForecast;
--- a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css
@@ -0,0 +1,80 @@
+.chart {
+	height: 100%;
+}
+.legend {
+	position: absolute;
+	right: 25px;
+	top: 30px;
+}
+.item{
+	display: inline-block;
+	margin-right: 45px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .item:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -21px;
+      background-color: rgba(255, 194, 20, 1);
+      transform: translateY(-50%);
+    }
+.item:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      top: 50%;
+      background-color: rgba(255, 194, 20, 1);
+      left: -24px;
+      transform: translateY(-50%) translateX(50%);
+}
+.block{
+	display: inline-block;
+	margin-right: 10px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .block:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -22.5px;
+      transform: translateY(-50%);
+      background-color: rgba(0, 255, 245, 1);
+    }
+.block:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: rgba(0, 255, 245, 1);
+      border-radius: 100%;
+      top: 50%;
+      left: -25.5px;
+      transform: translateY(-50%) translateX(50%);
+}
--- a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx
@@ -0,0 +1,50 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-23 14:44:30
+ * @LastEditTime: 2024-09-11 16:44:55
+ * @LastEditors: zhp
+ * @Description: 
+ */
+// 窑炉压力
+import cls from "./index.module.css";
+import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
+import CommonChart from "../forecastRightChart"
+import { useSelector } from "react-redux";
+import React, { useContext,useEffect,useState} from 'react'
+import { HomeContext } from '../../../../../pages/Home';
+function KilnMiddleForecast(props) {
+  const value = useContext(HomeContext);
+  const kilnOptimize = useSelector((state) => state.kilnOptimize);
+   const dataSource = {
+    color1: 'rgba(0, 255, 245, .4)',
+    color:'rgba(255, 194, 20, .4)',
+    yName:'℃',
+    // areaColor0:'rgba(18, 255, 245, 0.4)',
+    areaColor1:'rgba(255, 234, 153, 0)',
+    msg: kilnOptimize.topTempAvgFor1h,
+    modelFlag: value,
+    data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
+    range: [-10, 10]
+  }
+  return (
+    <BottomBarItem
+      icon="kilnBottom"
+      title="池底加权温度趋势"
+      style={props.style}
+    >
+      {/* legend */}
+      <div className={cls.legend}>
+        <span className={cls.item}>
+           实际值
+        </span>
+        <span className={cls.block}>
+          预测值
+        </span>
+      </div>
+      <div className={cls.chart}>
+        <CommonChart dataSource={dataSource}/>
+      </div>
+    </BottomBarItem>
+  )
+}
+export default KilnMiddleForecast;
--- a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css
@@ -0,0 +1,80 @@
+.chart {
+	height: 100%;
+}
+.legend {
+	position: absolute;
+	right: 25px;
+	top: 30px;
+}
+.item{
+	display: inline-block;
+	margin-right: 45px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .item:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -21px;
+      background-color: rgba(255, 194, 20, 1);
+      transform: translateY(-50%);
+    }
+.item:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      top: 50%;
+      background-color: rgba(255, 194, 20, 1);
+      left: -24px;
+      transform: translateY(-50%) translateX(50%);
+}
+.block{
+	display: inline-block;
+	margin-right: 10px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .block:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -22.5px;
+      transform: translateY(-50%);
+      background-color: rgba(0, 255, 245, 1);
+    }
+.block:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: rgba(0, 255, 245, 1);
+      border-radius: 100%;
+      top: 50%;
+      left: -25.5px;
+      transform: translateY(-50%) translateX(50%);
+}
--- a/src/components/Modules/KilnOptimize/components/KilnPress/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnPress/index.jsx
@@ -1,3 +1,10 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-20 14:09:17
+ * @LastEditTime: 2024-08-22 08:51:03
+ * @LastEditors: zhp
+ * @Description: 
+ */
 // 窑炉压力
 import cls from "./index.module.css";
 import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
--- a/src/components/Modules/KilnOptimize/components/KilnTop/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnTop/index.jsx
@@ -1,3 +1,10 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-20 14:09:17
+ * @LastEditTime: 2024-08-23 14:45:08
+ * @LastEditors: zhp
+ * @Description: 
+ */
 // 窑炉压力
 import cls from "./index.module.css";
 import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
--- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx
@@ -0,0 +1,97 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-12 13:44:55
+ * @LastEditTime: 2024-09-18 10:18:09
+ * @LastEditors: zhp
+ * @Description: 
+ */
+// 窑炉压力
+import cls from "./point.module.css";
+import BottomBarItem from "../../../../Common/pointItemBackgroundForecast";
+import CommonChart from "../forecastRightChart/points"
+import { useSelector } from "react-redux";
+import React, { useContext,useEffect,useState} from 'react'
+import { HomeContext } from '../../../../../pages/Home';
+function generateRandomArray(data) {
+  const randomArray = [];
+  for (let i = 0; i < 25; i++) {
+    let randomNumber;
+    do {
+      randomNumber = ((Math.random() * (data - 1)).toFixed(1));
+    } while (Math.abs(randomNumber - data) > 5);
+    randomArray.push(randomNumber);
+  }
+  console.log('randomArray',randomArray);
+  
+  return randomArray;
+}
+function getForecastList(data) {
+  console.log('ryfdata',data);
+  
+  let forecastList = []
+   for (let i = 0; i < data.length; i++) {
+      let item = data[i];
+      let min = item - 5;
+      let max = item + 5;
+      let randomValue = Math.random() * (max - min) + min;
+     forecastList.push(randomValue.toFixed(1))
+  }
+     return forecastList
+}
+function LeftTopForecast(props) {
+  console.log(props);
+  const title = '点位:' + props.dataSource.title
+  const isVisible = '点位:' + props.dataSource.isVisible
+  const data = props.dataSource.value.match(/\d+\.?\d*/)[0]
+ const [parentVisibilityState, setParentVisibilityState] = useState(false);
+  const [randomValue, setRandomValue] = useState(generateRandomArray((data)))
+  // 定义一个处理子组件可见性变化的回调函数
+  const handleVisibilityChange = (newVisibilityState) => {
+    console.log(`Visibility changed to: ${newVisibilityState}`);
+    setParentVisibilityState(newVisibilityState); // 更新父组件的状态
+    // 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等
+    props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
+  };
+  const dataList = randomValue
+  const [forecastList, setForecastList] = useState(getForecastList((dataList)))
+  const value = useContext(HomeContext);
+    // let forecastList = [];
+   console.log('forecastList',forecastList);
+   
+  const kilnOptimize = useSelector((state) => state.kilnOptimize);
+  const dataSource  = {
+    color1: 'rgba(0, 255, 245, .2)',
+    color:'rgba(255, 194, 20, .2)',
+    yName:'℃',
+    // areaColor0:'rgba(18, 255, 245, 0.2)',
+    areaColor1:'rgba(255, 234, 153, 0)',
+    msg: kilnOptimize.topTempAvgFor1h,
+    modelFlag: value,
+    data: dataList ? dataList : [],
+    forecastList:forecastList ?forecastList:[],
+    range: [-10, 10]
+  }
+  return (
+    <BottomBarItem
+      icon="close"
+      title={title}
+      isVisible={isVisible}
+      style={props.style}
+      onVisibilityChange={handleVisibilityChange} // 传递回调
+    >
+      {/* legend */}
+      <div className={cls.legend}>
+        <span className={cls.item}>
+          实际值
+        </span>
+        <span className={cls.block}>
+          预测值
+        </span>
+      </div>
+      <div className={cls.chart}>
+        <CommonChart dataSource={dataSource}/>
+      </div>
+    </BottomBarItem>
+  )
+}
+export default LeftTopForecast;
--- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx
@@ -0,0 +1,51 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-23 14:44:30
+ * @LastEditTime: 2024-09-14 14:10:08
+ * @LastEditors: zhp
+ * @Description: 
+ */
+// 窑炉压力
+import cls from "./index.module.css";
+import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
+import CommonChart from "../forecastRightChart"
+import { useSelector } from "react-redux";
+import React, { useContext,useEffect,useState} from 'react'
+import { HomeContext } from '../../../../../pages/Home';
+function LeftTopForecast(props) {
+  const value = useContext(HomeContext);
+  const kilnOptimize = useSelector((state) => state.kilnOptimize);
+
+  const dataSource  = {
+    color1: 'rgba(0, 255, 245, .2)',
+    color:'rgba(255, 194, 20, .2)',
+    yName:'℃',
+    // areaColor0:'rgba(18, 255, 245, 0.2)',
+    areaColor1:'rgba(255, 234, 153, 0)',
+    msg: kilnOptimize.topTempAvgFor1h,
+    modelFlag: value,
+    data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
+    range: [-10, 10]
+  }
+  return (
+    <BottomBarItem
+      icon="kilnTop"
+      title="碹顶加权温度趋势"
+      style={props.style}
+    >
+      {/* legend */}
+      <div className={cls.legend}>
+        <span className={cls.item}>
+          实际值
+        </span>
+        <span className={cls.block}>
+          预测值
+        </span>
+      </div>
+      <div className={cls.chart}>
+        <CommonChart dataSource={dataSource}/>
+      </div>
+    </BottomBarItem>
+  )
+}
+export default LeftTopForecast;
--- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
@@ -0,0 +1,80 @@
+.chart {
+	height: 100%;
+}
+.legend {
+	position: absolute;
+	right: 25px;
+	top: 30px;
+}
+.item{
+	display: inline-block;
+	margin-right: 45px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .item:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -21px;
+      background-color: rgba(255, 194, 20, 1);
+      transform: translateY(-50%);
+    }
+.item:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      top: 50%;
+      background-color: rgba(255, 194, 20, 1);
+      left: -24px;
+      transform: translateY(-50%) translateX(50%);
+}
+.block{
+	display: inline-block;
+	margin-right: 10px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .block:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -22.5px;
+      transform: translateY(-50%);
+      background-color: rgba(0, 255, 245, 1);
+    }
+.block:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: rgba(0, 255, 245, 1);
+      border-radius: 100%;
+      top: 50%;
+      left: -25.5px;
+      transform: translateY(-50%) translateX(50%);
+}
--- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css
@@ -0,0 +1,80 @@
+.chart {
+	height: 100%;
+}
+.legend {
+	position: absolute;
+	left: 200px;
+	top: 30px;
+}
+.item{
+	display: inline-block;
+	margin-right: 45px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .item:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -23.3px;
+      background-color: rgba(255, 194, 20, 1);
+      transform: translateY(-50%);
+    }
+.item:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      top: 50%;
+      background-color: rgba(255, 194, 20, 1);
+      left: -27px;
+      transform: translateY(-50%) translateX(50%);
+}
+.block{
+	display: inline-block;
+	margin-right: 10px;
+	font-size: 14px;
+  position: relative;
+	color: #DFF1FE;
+}
+/* .block {
+	width: 8px;
+	height: 8px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-right: 4px;
+} */
+ .block:before {
+      content: "";
+      width:14px;
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      left: -24px;
+      transform: translateY(-50%);
+      background-color: rgba(0, 255, 245, 1);
+    }
+.block:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: rgba(0, 255, 245, 1);
+      border-radius: 100%;
+      top: 50%;
+      left: -27px;
+      transform: translateY(-50%) translateX(50%);
+}
--- a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx
@@ -170,7 +170,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "5px",
+          left: "3px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -182,7 +182,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "7px",
+          left: "5px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -206,7 +206,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "12px",
+          left: "10px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -218,7 +218,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "14px",
+          left: "12px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -242,7 +242,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "18px",
+          left: "16px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -254,7 +254,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "120px",
-          left: "19px",
+          left: "17px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -266,7 +266,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "114px",
-          left: "5px",
+          left: "3px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -278,7 +278,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "114px",
-          left: "9px",
+          left: "4px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -302,7 +302,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "114px",
-          left: "12px",
+          left: "11px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -314,7 +314,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "114px",
-          left: "13px",
+          left: "12px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -338,7 +338,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "114px",
-          left: "18px",
+          left: "17px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -350,7 +350,7 @@ const TopColorBlock = ({ condition }) => {
          height: "100%",
          position: "absolute",
          top: "114px",
-          left: "19px",
+          left: "18px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
--- a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx
@@ -170,7 +170,7 @@ const TopColorBlockEnter = () => {
          height: "100%",
          position: "absolute",
          top: "116px",
-          left: "-15px",
+          left: "-16px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -218,7 +218,7 @@ const TopColorBlockEnter = () => {
          height: "100%",
          position: "absolute",
          top: "116px",
-          left: "-13px",
+          left: "-11px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -266,7 +266,7 @@ const TopColorBlockEnter = () => {
          height: "100%",
          position: "absolute",
          top: "110px",
-          left: "-15px",
+          left: "-17px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
@@ -350,7 +350,7 @@ const TopColorBlockEnter = () => {
          height: "100%",
          position: "absolute",
          top: "110px",
-          left: "-7px",
+          left: "-8px",
          zIndex: 0,
          transform: "scale(0.7)",
        }}
--- a/src/components/Modules/KilnOptimize/components/dayButton/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/dayButton/index.jsx
@@ -0,0 +1,49 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-22 09:09:25
+ * @LastEditTime: 2024-09-14 14:38:47
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import React, { useState } from'react';
+import cls from "./index.module.css";
+
+function DayNightToggle() {
+ const [day, setDay] = useState(1);
+  // const preFloor = useRef();
+  function onDayUpdate(day) {
+    // preFloor.current = floor;
+    setDay(day);
+    // onFloorChange(flr); 
+  }
+  return (
+    <div
+        className="subMenu"
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          position: 'relative',
+          zIndex: 999,
+        }}
+      >
+        <div
+          className={
+            "day day1 " + cls.menuItem + " " + (day === 1 ? cls.active : "")
+          }
+          onClick={() => onDayUpdate(1)}
+        >
+          白天
+        </div>
+        <div
+          className={
+            "day day2 " + cls.menuItem + " " + (day === 2 ? cls.active : "")
+          }
+          onClick={() => onDayUpdate(2)}
+        >
+          夜晚
+        </div>
+      </div>
+  );
+}
+
+export default DayNightToggle;
--- a/src/components/Modules/KilnOptimize/components/dayButton/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/dayButton/index.module.css
@@ -0,0 +1,28 @@
+.menuItem {
+	/* transition: all 0.3s ease-out; */
+	cursor: pointer;
+	user-select: none;
+	padding:5px 40px;
+	font-size: 32px;
+	line-height: 48px;
+	letter-spacing: 6px;
+	background: url(../../../../../assets/dayNight.png) no-repeat;
+  background-size: 100% 90%;
+	background-position: bottom;
+	color: rgba(255, 255, 255, 1);
+	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+		'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
+		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
+}
+
+.menuItem.active,
+.menuItem:hover {
+	background: url(../../../../../assets/dayNightChange.png) no-repeat;
+  font-size: 28px;
+  color: rgba(255, 255, 255, 1);
+  background-size: 100% 100%;
+}
+
+.menuItem:not(:first-child) {
+	margin-left:20px;
+}
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js
@@ -0,0 +1,147 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-28 09:25:58
+ * @LastEditTime: 2024-09-14 16:08:38
+ * @LastEditors: zhp
+ * @Description: 
+ */
+// import * as echarts from "echarts";
+
+export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
+  return {
+    grid: { top: 38, right: 0, bottom: 20, left: 48 },
+    xAxis: {
+      type: "category",
+      data:times,
+      axisLabel: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位: "+yName,
+      nameTextStyle: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+      min:range[0],
+      max:range[1]
+    },
+    // visualMap: {
+    //   show: false,
+    //   dimension: 1,
+    //   pieces: pieces
+    // },
+    series: [
+      {
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top',
+          color: 'inherit',
+            formatter: (params) => {
+              const index = params.dataIndex;
+              return index % 2 === 0? params.value : '';
+            }
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+        // prettier-ignore
+        // lineStyle:{
+        //     color:color
+        // },
+       itemStyle: {
+            normal: {
+              color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 194, 20, 1)' //改变折线颜色
+              }
+            }
+        },
+        data: data,
+        // markLine: {
+        //   symbol: 'none',
+        //   label:{
+        //     show:true,
+        //     position:'end',
+        //     formatter:'标准线',
+        //     color:'#FFCB59',
+        //     fontSize: 12,
+        //   },
+        //   lineStyle:{
+        //     color:'#FFCB59'
+        //   },
+        //   data: seriesData.markLineData
+        // },
+        areaStyle:areaStyle
+      },
+      {
+        type: 'line',
+        stack: 'Total',
+        label: {
+          show: true,
+          position: 'top',
+            color: '#00FFF5', //改变折线点的颜色
+          formatter: (params) => {
+            const index = params.dataIndex;
+            if (data[index] && forecastList[index]) {
+              return '';
+            } else if (forecastList[index]) {
+              // 判断是否为奇数索引，隔一个显示一个
+              return index % 2 === 1? forecastList[index] : '';
+            } else {
+              return '';
+            }
+            }
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: {
+          color: '#00FFF5', //改变折线点的颜色
+          normal: {
+              color: '#00FFF5', //改变折线点的颜色
+              lineStyle: {
+                color: '#00FFF5', //改变折线点的颜色
+              }
+            }
+        },
+        areaStyle:areaStyle1,
+        // prettier-ignore
+        data: forecastList,
+      }
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: 'cross'
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
+    },
+  };
+}
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
@@ -0,0 +1,167 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-28 09:25:58
+ * @LastEditTime: 2024-09-14 15:53:44
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import cls from "./index.module.css";
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+import * as echarts from "echarts";
+import { useState } from "react";
+function compareArrays(arr1, arr2) {
+  const result = [];
+  const longerLength = arr2.length;
+  for (let i = 0; i < longerLength; i++) {
+    if (i < arr1.length && arr1[i]) {
+      result.push(null);
+    } else if (i < arr1.length &&!arr1[i]) {
+      result.push(arr2[i]);
+    } else {
+      result.push(arr2[i]);
+    }
+  }
+  return result;
+}
+function generateRandomArray(data) {
+  const result = [];
+  for (let i = 0; i < 10; i++) {
+    if (i < data.length) {
+      let randomNumber;
+      do {
+        randomNumber = data[i] + Math.floor(Math.random() * 11) - 5;
+      } while (randomNumber < 0);
+      result.push(randomNumber);
+    } else {
+      let lastDataValue = data[data.length - 1];
+      let randomNumber;
+      do {
+        randomNumber = lastDataValue + Math.floor(Math.random() * 11) - 5;
+      } while (randomNumber < 0);
+      result.push(randomNumber);
+    }
+  }
+  return result;
+}
+function generateTimeArray() {
+   const now = new Date();
+  const timeArray = [];
+  for (let i = -7; i <= 2; i++) {
+    const newDate = new Date(now.getTime());
+    newDate.setMinutes(now.getMinutes() + i * 10);
+    const hours = newDate.getHours();
+    const minutes = newDate.getMinutes();
+    timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+  }
+  return timeArray;
+}
+function CommonChart(props) {
+  const { dataSource } = props;
+
+  const data = dataSource.data || [];
+  const modelFlag = dataSource.modelFlag || false;
+  const color1 = dataSource.color1 || [];
+  const color = dataSource.color || [];
+  const yName = dataSource.yName;
+  const times = generateTimeArray();
+  let forecastList = []
+  if (modelFlag === true) {
+    forecastList = generateRandomArray(data)
+    console.log('11111',forecastList)
+  }
+console.log('forRYF',times);
+  // for(let i = 0; i < 7; i++) {
+  //    currentTime.setMinutes(currentTime.getMinutes() - 10);
+  //   const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
+  //   times.unshift(timeString);
+  // }
+  let areaStyle = {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: color,
+        },
+        {
+          offset: 1,
+          color: dataSource.areaColor1,
+        },
+      ]),
+      origin: "start",
+  }
+  let areaStyle1 = {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color:color1,
+        },
+        {
+          offset: .3,
+          color: dataSource.areaColor1,
+        },
+      ]),
+      origin: "start",
+    }
+  // let pieces = [
+  //   {
+  //     lte: dataSource.msg ? dataSource.msg.lte : 0,
+  //     color: "#FFCB59",
+  //   },
+  //   {
+  //     gt: dataSource.msg ? dataSource.msg.lte : 0,
+  //     lte: dataSource.msg ? dataSource.msg.gt : 0,
+  //     color: dataSource.color,
+  //   },
+  //   {
+  //     gt: dataSource.msg ? dataSource.msg.gt : 0,
+  //     color: "#FFCB59",
+  //   },
+  // ];
+
+  const [yRange] = useState([]);
+  // useEffect(() => {
+  //   if (data.length > 0) {
+  //     var standardValue = dataSource.msg.sp;
+  //     var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
+  //     var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
+  //     // 计算最大最小值是否超标
+  //     const maxValue = Math.max(...data);
+  //     const minValue = Math.min(...data);
+  //     if (maxValue > maxY) {
+  //       maxY = Math.ceil(maxValue);
+  //     }
+  //     if (minValue < minY) {
+  //       minY = Math.floor(minValue);
+  //     }
+  //     setYRange([minY, maxY]);
+  //   }
+  // }, [dataSource, data]);
+
+  return (
+    <div className={cls.commonChart}>
+      {data.length > 0 && (
+        <ReactECharts
+          option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
+          style={{ height: "100%" }}
+        />
+      )}
+      {data.length <= 0 && (
+        <p
+          style={{
+            paddingTop: "88px",
+            color: "#fffc",
+            textAlign: "center",
+            fontSize: "24px",
+            userSelect: "none",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default CommonChart;
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.module.css
@@ -0,0 +1,3 @@
+.commonChart {
+  height: 100%;
+}
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
@@ -0,0 +1,167 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-13 14:47:50
+ * @LastEditTime: 2024-09-18 10:13:08
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import cls from "./index.module.css";
+import ReactECharts from "echarts-for-react";
+import getOptions from "./pointsChart.js"
+import * as echarts from "echarts";
+import { useState } from "react";
+function getTimeArray() {
+  const now = new Date();
+  const todaySeven = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7, 0, 0);
+  const tomorrowSeven = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 7, 0, 0);
+
+  const timeArray = [];
+  let currentTime = todaySeven;
+  while (currentTime <= tomorrowSeven) {
+    const hours = currentTime.getHours();
+    const minutes = currentTime.getMinutes();
+    if (minutes === 0) {
+      timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+    }
+    currentTime = new Date(currentTime.getTime() + 60 * 60000); // 增加 1 小时
+  }
+
+  return timeArray;
+}
+// function compareArrays(arr1, arr2) {
+//   let hasMissingDataInFirstArray = false;
+//   for (let i = 0; i < arr1.length; i++) {
+//     if (!arr1[i]) {
+//       hasMissingDataInFirstArray = true;
+//       break;
+//     }
+//   }
+
+//   if (hasMissingDataInFirstArray) {
+//     const result = new Array(arr2.length).fill(null);
+//     for (let i = 0; i < arr1.length; i++) {
+//       if (!arr1[i]) {
+//         result[i] = arr2[i];
+//       }
+//     }
+//     return result;
+//   } else {
+//     return arr2.map(() => null);
+//   }
+// }
+function emptyFirstTwelve(arr) {
+  const newArr = [...arr];
+  for (let i = 0; i < 12 && i < newArr.length; i++) {
+    newArr[i] = null;
+  }
+  return newArr;
+}
+function emptyLastThirteen(arr) {
+  const newArr = [...arr];
+  const startIndex = Math.max(0, newArr.length - 13);
+  for (let i = startIndex; i < newArr.length; i++) {
+    newArr[i] = null;
+  }
+  return newArr;
+}
+function CommonChart(props) {
+  const { dataSource } = props;
+
+  const data = dataSource.data || [];
+  let forecastList =dataSource.forecastList || [];
+  // const modelFlag = dataSource.modelFlag || false;
+  const color1 = dataSource.color1 || [];
+  const color = dataSource.color || [];
+  const yName = dataSource.yName;
+  const times = getTimeArray();
+  // }
+  console.log('times',times)
+  let areaStyle = {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: color,
+        },
+        {
+          offset: 1,
+          color: dataSource.areaColor1,
+        },
+      ]),
+      origin: "start",
+  }
+  let areaStyle1 = {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color:color1,
+        },
+        {
+          offset: 1,
+          color: dataSource.areaColor1,
+        },
+      ]),
+      origin: "start",
+    }
+  // let pieces = [
+  //   {
+  //     lte: dataSource.msg ? dataSource.msg.lte : 0,
+  //     color: "#FFCB59",
+  //   },
+  //   {
+  //     gt: dataSource.msg ? dataSource.msg.lte : 0,
+  //     lte: dataSource.msg ? dataSource.msg.gt : 0,
+  //     color: dataSource.color,
+  //   },
+  //   {
+  //     gt: dataSource.msg ? dataSource.msg.gt : 0,
+  //     color: "#FFCB59",
+  //   },
+  // ];
+
+  const [yRange] = useState([]);
+  // useEffect(() => {
+  //   if (data.length > 0) {
+  //     var standardValue = dataSource.msg.sp;
+  //     var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
+  //     var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
+  //     // 计算最大最小值是否超标
+  //     const maxValue = Math.max(...data);
+  //     const minValue = Math.min(...data);
+  //     if (maxValue > maxY) {
+  //       maxY = Math.ceil(maxValue);
+  //     }
+  //     if (minValue < minY) {
+  //       minY = Math.floor(minValue);
+  //     }
+  //     setYRange([minY, maxY]);
+  //   }
+  // }, [dataSource, data]);
+
+  return (
+    <div className={cls.commonChart}>
+      {data.length > 0 && (
+        <ReactECharts
+          option={getOptions(emptyLastThirteen(data), times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
+          style={{ height: "100%" }}
+        />
+      )}
+      {data.length <= 0 && (
+        <p
+          style={{
+            paddingTop: "88px",
+            color: "#fffc",
+            textAlign: "center",
+            fontSize: "24px",
+            userSelect: "none",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default CommonChart;
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
@@ -0,0 +1,134 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-13 15:39:36
+ * @LastEditTime: 2024-09-18 11:21:11
+ * @LastEditors: zhp
+ * @Description: 
+ */
+// import * as echarts from "echarts";
+
+export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
+  return {
+    grid: { top: 38, right: 0, bottom: 40, left: 48 },
+    color:['rgba(255, 194, 20, 1)','rgba(0, 255, 245, 1)'],
+    xAxis: {
+      type: "category",
+      data:times,
+      axisLabel: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        rotate:45
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#F1F9FF",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位: "+yName,
+      nameTextStyle: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        align: "right",
+      },
+         min: function(value) {//取最小值向下取整为最小刻度
+            return Math.floor(value.min)
+          },
+          max: function(value) {//取最大值向上取整为最大刻度
+            return  Math.ceil(value.max) 
+      },
+           scale: true, //自适应
+      type: "value",
+      axisLabel: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#F1F9FF",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#58E7E9",
+        },
+      },
+      min:range[0],
+      max:range[1]
+    },
+    // visualMap: {
+    //   show: false,
+    //   dimension: 1,
+    //   pieces: pieces
+    // },
+    series: [
+      {
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top',
+          color: 'inherit',
+          formatter: (params) => {
+              const index = params.dataIndex;
+              return index % 2 === 0? params.value : '';
+            }
+        },
+       itemStyle: {
+            normal: {
+              color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 194, 20, 1)' //改变折线颜色
+              }
+            }
+        },
+        data: data,
+        areaStyle:areaStyle
+      },
+      {
+        type: 'line',
+        stack: 'Total',
+        label: {
+          show: true,
+          color: '#00FFF5', //改变折线点的颜色
+          position: 'top',
+          formatter: (params) => {
+             const index = params.dataIndex;
+              if (index < 11) {
+                return '';
+              } else if ((index - 11) % 2 === 1) {
+                return params.value;
+              } else {
+                return '';
+              }
+            }
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: {
+          color: '#00FFF5', //改变折线点的颜色
+          normal: {
+              color: '#00FFF5', //改变折线点的颜色
+              lineStyle: {
+                color: '#00FFF5', //改变折线点的颜色
+              }
+            }
+        },
+        areaStyle:areaStyle1,
+        data: forecastList,
+      }
+    ],
+  tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        className: "xc-chart-tooltip",
+        // backgroundColor: ''
+      },
+    };
+}
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
@@ -0,0 +1,101 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-02 09:56:13
+ * @LastEditTime: 2024-09-14 17:07:49
+ * @LastEditors: zhp
+ * @Description: 
+ */
+
+import cls from "./index.module.css";
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+import * as echarts from "echarts";
+import { useState } from "react";
+function convertToNineDigitArray(sevenDigitArray) {
+  const nineDigitArray = [...sevenDigitArray];
+  while (nineDigitArray.length < 9) {
+    const lastValue = nineDigitArray[nineDigitArray.length - 1];
+    const minRandom = Math.max(-0.5, -lastValue);
+    const maxRandom = Math.min(0.5, 1 - lastValue);
+    const randomValue = lastValue + Math.random() * (maxRandom - minRandom) + minRandom;
+    const roundedValue = Math.min(1, Math.round(randomValue * 10) / 10);
+    nineDigitArray.push(roundedValue);
+  }
+  return nineDigitArray;
+}
+function CommonChart(props) {
+  const { dataSource } = props;
+  const data = dataSource.data || []
+  const modelFlag = dataSource.modelFlag || false
+  const color1 = dataSource.color1 || [];
+  const color = dataSource.color || [];
+  const yName = dataSource.yName;
+  const xData = dataSource.xData || [];
+  console.log('xData',props);
+  let forecastList = [];
+  if (modelFlag === true) {
+    forecastList = convertToNineDigitArray(data)
+    // for (let i = 0; i < data.length; i++) {
+    //   let item = data[i];
+    //   let min = item - .5;
+    //   let max = item + .5;
+    //   let randomValue = Math.random() * (max - min) + min;
+    //   forecastList.push(randomValue.toFixed(1));
+    // }
+    console.log('forecastList',forecastList)
+  }
+  let areaStyle = {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: color,
+        },
+        {
+          offset: 1,
+          color: dataSource.areaColor1,
+        },
+      ]),
+      origin: "start",
+  }
+  let areaStyle1 = {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color:color1,
+        },
+        {
+          offset: 1,
+          color: dataSource.areaColor1,
+        },
+      ]),
+      origin: "start",
+    }
+  const [yRange] = useState([]);
+  return (
+    <div className={cls.commonChart}>
+      {data.length > 0 && (
+        <ReactECharts
+          option={getOptions(data, xData, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
+          style={{ height: "100%" }}
+        />
+      )}
+      {data.length <= 0 && (
+        <p
+          style={{
+            paddingTop: "88px",
+            color: "#fffc",
+            textAlign: "center",
+            fontSize: "24px",
+            userSelect: "none",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default CommonChart;
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/index.jsx
@@ -0,0 +1,366 @@
+import { useSelector } from "react-redux";
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ReactComponent as B1 } from "./pic/b1.svg";
+import { ReactComponent as B2 } from "./pic/b2.svg";
+import { ReactComponent as B3 } from "./pic/b3.svg";
+import { ReactComponent as B4 } from "./pic/b4.svg";
+import { ReactComponent as B5 } from "./pic/b5.svg";
+import { ReactComponent as B6 } from "./pic/b6.svg";
+import { ReactComponent as B7 } from "./pic/b7.svg";
+import { ReactComponent as B8 } from "./pic/b8.svg";
+import { ReactComponent as T1 } from "./pic/t1.svg";
+import { ReactComponent as T2 } from "./pic/t2.svg";
+import { ReactComponent as T3 } from "./pic/t3.svg";
+import { ReactComponent as T4 } from "./pic/t4.svg";
+import { ReactComponent as T5 } from "./pic/t5.svg";
+import { ReactComponent as T6 } from "./pic/t6.svg";
+import { ReactComponent as T7 } from "./pic/t7.svg";
+import { ReactComponent as T8 } from "./pic/t8.svg";
+
+const TopColorBlock = ({ condition }) => {
+  const tempTop = useSelector((state) => state.temperature.top);
+  function returnColor(n) {
+    let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
+    if (num <= 100) {
+      return "rgba(96, 0, 189, 0.7)";
+    } else if (num > 100 && num <= 200) {
+      return "rgba(102, 7, 255, 0.7)";
+    } else if (num > 200 && num <= 300) {
+      return "rgba(10, 20, 255, 0.7)";
+    } else if (num > 300 && num <= 400) {
+      return "rgba(7, 89, 255, 0.7)";
+    } else if (num > 400 && num <= 500) {
+      return "rgba(7, 139, 255, 0.7)";
+    } else if (num > 500 && num <= 600) {
+      return "rgba(7, 194, 255, 0.7)";
+    } else if (num > 600 && num <= 700) {
+      return "rgba(7, 255, 253, 0.7)";
+    } else if (num > 700 && num <= 800) {
+      return "rgba(7, 255, 205, 0.7)";
+    } else if (num > 800 && num <= 900) {
+      return "rgba(20, 237, 127, 0.7)";
+    } else if (num > 900 && num <= 1000) {
+      return "rgba(0, 193, 39, 0.7)";
+    } else if (num > 1000 && num <= 1100) {
+      return "rgba(147, 210, 1, 0.7)";
+    } else if (num > 1100 && num <= 1200) {
+      return "rgba(206, 206, 0, 0.7)";
+    } else if (num > 1200 && num <= 1300) {
+      return "rgba(255, 226, 13, 0.7)";
+    } else if (num > 1300 && num <= 1400) {
+      return "rgba(249, 240, 146, 0.7)";
+    } else if (num > 1400 && num <= 1500) {
+      return "rgba(250, 204, 93, 0.7)";
+    } else if (num > 1500 && num <= 1600) {
+      return "rgba(240, 139, 32, 0.7)";
+    } else if (num > 1600 && num <= 1700) {
+      return "rgba(241, 88, 26, 0.7)";
+    } else if (num > 1700 && num <= 1800) {
+      return "rgba(255, 0, 0, 0.7)";
+    } else if (num > 1800 && num <= 1900) {
+      return "rgba(182, 0, 0, 0.7)";
+    } else if (num > 1900) {
+      return "rgba(140, 0, 33, 0.7)";
+    }
+  }
+  function returnColor2(n) {
+    let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
+    if (num <= 100) {
+      return "rgba(96, 0, 189, 0.9)";
+    } else if (num > 100 && num <= 200) {
+      return "rgba(102, 7, 255, 0.9)";
+    } else if (num > 200 && num <= 300) {
+      return "rgba(10, 20, 255, 0.9)";
+    } else if (num > 300 && num <= 400) {
+      return "rgba(7, 89, 255, 0.9)";
+    } else if (num > 400 && num <= 500) {
+      return "rgba(7, 139, 255, 0.9)";
+    } else if (num > 500 && num <= 600) {
+      return "rgba(7, 194, 255, 0.9)";
+    } else if (num > 600 && num <= 700) {
+      return "rgba(7, 255, 253, 0.9)";
+    } else if (num > 700 && num <= 800) {
+      return "rgba(7, 255, 205, 0.9)";
+    } else if (num > 800 && num <= 900) {
+      return "rgba(20, 237, 127, 0.9)";
+    } else if (num > 900 && num <= 1000) {
+      return "rgba(0, 193, 39, 0.9)";
+    } else if (num > 1000 && num <= 1100) {
+      return "rgba(147, 210, 1, 0.9)";
+    } else if (num > 1100 && num <= 1200) {
+      return "rgba(206, 206, 0, 0.9)";
+    } else if (num > 1200 && num <= 1300) {
+      return "rgba(255, 226, 13, 0.9)";
+    } else if (num > 1300 && num <= 1400) {
+      return "rgba(249, 240, 146, 0.9)";
+    } else if (num > 1400 && num <= 1500) {
+      return "rgba(250, 204, 93, 0.9)";
+    } else if (num > 1500 && num <= 1600) {
+      return "rgba(240, 139, 32, 0.9)";
+    } else if (num > 1600 && num <= 1700) {
+      return "rgba(241, 88, 26, 0.9)";
+    } else if (num > 1700 && num <= 1800) {
+      return "rgba(255, 0, 0, 0.9)";
+    } else if (num > 1800 && num <= 1900) {
+      return "rgba(182, 0, 0, 0.9)";
+    } else if (num > 1900) {
+      return "rgba(140, 0, 33, 0.9))";
+    }
+  }
+  // 窑炉内部svg变色
+  function BigSvg() {
+    return (
+      <svg
+        width="2050px"
+        height="700px"
+        style={{
+          position: "absolute",
+          top: "320px",
+          left: "970px",
+          zIndex: 0,
+        }}
+      >
+        <defs>
+          <linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
+            <stop offset="0%" stopColor={returnColor2("TE201")} />
+            <stop offset="9%" stopColor={returnColor2("TE202")} />
+            <stop offset="18%" stopColor={returnColor2("TE203")} />
+            <stop offset="27%" stopColor={returnColor2("TE204")} />
+            <stop offset="36%" stopColor={returnColor2("TE205")} />
+            <stop offset="45%" stopColor={returnColor2("TE206")} />
+            <stop offset="54%" stopColor={returnColor2("TE208")} />
+            <stop offset="63%" stopColor={returnColor2("TE210")} />
+            <stop offset="72%" stopColor={returnColor2("TE211")} />
+            <stop offset="81%" stopColor={returnColor2("TE212")} />
+            <stop offset="90%" stopColor={returnColor2("TE213")} />
+            <stop offset="100%" stopColor={returnColor2("TE213")} />
+          </linearGradient>
+          <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
+            <stop offset="0%" stopColor={returnColor2("TE216")} />
+            <stop offset="33%" stopColor={returnColor2("TE221")} />
+            <stop offset="66%" stopColor={returnColor2("TE225")} />
+            <stop offset="100%" stopColor={returnColor2("TE225")} />
+          </linearGradient>
+        </defs>
+        <polygon
+          points="27 238,1310 238,1320 310,1330 310,1330 351,1320 361,1320 395,1076 395,1076 400,1020 400,1020 400,958 400,958 400,900 400,900 400,832 400,775 400,775 400,170 400,170 380,12 380"
+          fill="url(#Gradient1)"
+        />
+         <polygon
+          points="1345 300,1410 296,1420 290,1390 76,1434 76,1434 83,1434 90,1530 88,1528 88,1530 120,1438 120,1446 178,1616 178,1620 210,1450 210,1462 300,1720 300,1726 333,1470 336,1480 415,1652 414,1658 444,1480 448,1490 523,1590 520, 1593 553,1448 553,1425 335,1424 342,1345 344"
+          fill="url(#Gradient2)"
+        />
+          {/* <polygon
+          points="1350 300,1355 460,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360"
+          fill="url(#Gradient2)"
+        /> */}
+      </svg>
+    );
+  }
+
+  return (
+    <motion.div
+      animate={{
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 1.5 },
+      }}
+    >
+      <BigSvg />
+      <B1
+        style={{
+          fill: returnColor("TE228"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "56px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+      <B2
+        style={{
+          fill: returnColor("TE230"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "48px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+      <B3
+        style={{
+          fill: returnColor("TE232"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "29px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <B4
+        style={{
+          fill: returnColor("TE234"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "21px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <B5
+        style={{
+          fill: returnColor("TE236"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+           top: "100px",
+          left: "16px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <B6
+        style={{
+          fill: returnColor("TE238"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "10px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <B7
+        style={{
+          fill: returnColor("TE240"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "3px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <B8
+        style={{
+          fill: returnColor("TE242"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "100px",
+          left: "-8px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+      <T1
+        style={{
+          fill: returnColor("TE227"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "48px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+      <T2
+        style={{
+          fill: returnColor("TE229"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "44px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+      <T3
+        style={{
+          fill: returnColor("TE231"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "36px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+      <T4
+        style={{
+          fill: returnColor("TE233"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "20px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <T5
+        style={{
+          fill: returnColor("TE235"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+           top: "110px",
+          left: "16px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <T6
+        style={{
+          fill: returnColor("TE237"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "10px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <T7
+        style={{
+          fill: returnColor("TE239"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "4px",
+          zIndex: 0,
+          transform: "scale(0.66,0.64)",
+        }}
+      />
+      <T8
+        style={{
+          fill: returnColor("TE241"),
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "110px",
+          left: "-10px",
+          zIndex: 0,
+          transform: "scale(0.68,0.64)",
+        }}
+      />
+    </motion.div>
+  );
+};
+
+export default TopColorBlock;
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b1.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b1.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM421.92,703.81c-2.21-.15-4-.39-5.76-.37-26.5.16-53,.46-79.48.44-4.48,0-5.5,1.52-5.71,5.7-.59,11.58-.8,11.57-12.2,11.61-1,0-2,.09-3,0-2.63-.22-3.4,1.09-3.54,3.56-.57,10-1.28,19.93-2,29.9-1.54,22.09-3.13,44.17-4.65,66.26-.56,8.08-1,16.16-1.46,24.91h6.08l60-.14c13.16,0,26.33-.19,39.49,0,3.89,0,5.23-1.25,5.21-5.17,0-5.82.55-11.64.86-17.46q1.85-34.66,3.69-69.34C420.3,737.36,421.07,721.06,421.92,703.81Z" transform="translate(277 -158)"/><path d="M421.92,703.81c-.85,17.25-1.62,33.55-2.46,49.84q-1.8,34.67-3.69,69.34c-.31,5.82-.9,11.64-.86,17.46,0,3.92-1.32,5.21-5.21,5.17-13.16-.14-26.33,0-39.49,0l-60,.14h-6.08c.5-8.75.9-16.83,1.46-24.91,1.52-22.09,3.11-44.17,4.65-66.26.7-10,1.41-19.93,2-29.9.14-2.47.91-3.78,3.54-3.56,1,.09,2,0,3,0,11.4,0,11.61,0,12.2-11.61.21-4.18,1.23-5.71,5.71-5.7,26.49,0,53-.28,79.48-.44C417.93,703.42,419.71,703.66,421.92,703.81Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b2.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b2.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM544.59,703.38q-53.33,0-106.49,0c-2.87,0-3.72,1.28-3.8,3.94-.17,5.65-.58,11.3-.87,17-2,38.74-3.87,77.48-5.95,116.21-.21,3.84,1.08,5,4.69,5q51.72-.4,103.43-.61c2.88,0,4.18-.76,4.23-3.91.1-7.15.55-14.3.85-21.46,1.31-30.6,2.68-61.21,3.86-91.82C544.85,719.69,544.59,711.75,544.59,703.38Z" transform="translate(277 -158)"/><path d="M544.59,703.38c0,8.37.26,16.31-.05,24.24-1.18,30.61-2.55,61.22-3.86,91.82-.3,7.16-.75,14.31-.85,21.46-.05,3.15-1.35,3.89-4.23,3.91q-51.71.2-103.43.61c-3.61,0-4.9-1.14-4.69-5,2.08-38.73,4-77.47,5.95-116.21.29-5.65.7-11.3.87-17,.08-2.66.93-3.94,3.8-3.94Q491.3,703.43,544.59,703.38Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b3.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b3.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM558.89,703.13a13,13,0,0,0-.55,1.88q-2.9,68.16-5.8,136.31c-.11,2.69,1,3.48,3.53,3.43,6.33-.12,12.66,0,19-.08,29.5-.18,59-.44,88.49-.51,3.93,0,5.81-1,5.65-5.28-.18-4.65.31-9.32.41-14q1-48.24,2-96.46c.15-8.43,0-16.87,0-25.31Z" transform="translate(277 -158)"/><path d="M558.89,703.13H671.6c0,8.44.13,16.88,0,25.31q-.9,48.22-2,96.46c-.1,4.66-.59,9.33-.41,14,.16,4.3-1.72,5.27-5.65,5.28-29.49.07-59,.33-88.49.51-6.33,0-12.66,0-19,.08-2.53,0-3.64-.74-3.53-3.43q2.94-68.15,5.8-136.31A13,13,0,0,1,558.89,703.13Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b4.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b4.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM799.81,702.69a17.56,17.56,0,0,0-2.32-.43c-36,0-72,.14-107.93.1-3.94,0-4.13,2-4.18,5q-1,65.19-2.27,130.37c-.09,4.72,1,6.33,6,6.28q52-.46,103.93-.34c4.29,0,5.72-1,5.75-5.53.21-43.3.66-86.6,1-129.9C799.83,706.5,799.81,704.71,799.81,702.69Z" transform="translate(277 -158)"/><path d="M799.81,702.69c0,2,0,3.81,0,5.6-.37,43.3-.82,86.6-1,129.9,0,4.5-1.46,5.53-5.75,5.53q-52-.09-103.93.34c-5,.05-6.08-1.56-6-6.28q1.35-65.17,2.27-130.37c0-3,.24-5.06,4.18-5,36,0,72-.06,107.93-.1A17.56,17.56,0,0,1,799.81,702.69Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b5.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b5.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM812.91,702.15a15.47,15.47,0,0,0-.55,2.23q-.57,67.73-1.18,135.46c0,3.33,1.61,3.79,4.34,3.77q52-.43,104-.7c3.43,0,4.28-1.39,4.16-4.48q-.42-11-.52-22-.5-54.74-.9-109.46c0-3.3-.12-5.49-4.73-5.44-32.82.38-65.65.44-98.47.6Z" transform="translate(277 -158)"/><path d="M812.91,702.15H819c32.82-.16,65.65-.22,98.47-.6,4.61,0,4.71,2.14,4.73,5.44q.4,54.74.9,109.46.11,11,.52,22c.12,3.09-.73,4.47-4.16,4.48q-52,.23-104,.7c-2.73,0-4.37-.44-4.34-3.77q.68-67.73,1.18-135.46A15.47,15.47,0,0,1,812.91,702.15Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b6.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b6.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1049,701.25h-5.47c-33.82.06-67.64.21-101.47.07-5,0-6.07,1.61-6,6.32q.85,65,1.21,129.94c0,4.25,1.39,5.3,5.44,5.27,34.83-.23,69.65-.25,104.47-.37,1.77,0,3.54-.24,5.76-.4C1051.66,795,1050.36,748.47,1049,701.25Z" transform="translate(277 -158)"/><path d="M1049,701.25c1.32,47.22,2.62,93.77,3.93,140.83-2.22.16-4,.4-5.76.4-34.82.12-69.64.14-104.47.37-4,0-5.41-1-5.44-5.27q-.37-65-1.21-129.94c-.06-4.71,1.06-6.34,6-6.32,33.83.14,67.65,0,101.47-.07Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b7.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b7.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1064.31,778.29c.47,14.73,1.29,36.54,1.76,58.35.1,4.49,1.63,5.57,5.87,5.53q49.23-.4,98.47-.33c4.88,0,5.77-1.64,5.58-6.05q-2.76-65.14-5.13-130.32c-.15-4.41-2.31-4.67-5.7-4.65-32.49.18-65,.35-97.48.27-4.51,0-5.63,1.33-5.47,5.68C1063,728.24,1063.51,749.73,1064.31,778.29Z" transform="translate(277 -158)"/><path d="M1064.31,778.29c-.8-28.56-1.31-50-2.1-71.52-.16-4.35,1-5.69,5.47-5.68,32.49.08,65-.09,97.48-.27,3.39,0,5.55.24,5.7,4.65q2.36,65.17,5.13,130.32c.19,4.41-.7,6.06-5.58,6.05q-49.23-.15-98.47.33c-4.24,0-5.77-1-5.87-5.53C1065.6,814.83,1064.78,793,1064.31,778.29Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b8.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b8.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197Zm-957.31-80.35v-.58c14.66,0,29.33,0,44,0,6.49,0,6.37-.09,6-6.4q-2.54-44.4-4.93-88.81-1.08-20-2.1-39.92c-.17-3.37-.58-5.82-5.3-5.76q-43.48.55-87,.44c-4.84,0-6.29,1.43-6.06,6.27,1.25,25.62,2.18,51.26,3.28,76.88.75,17.48,1.77,34.94,2.3,52.42.14,4.78,2,5.64,6.29,5.57C1210.69,841.5,1225.19,841.65,1239.69,841.65Z" transform="translate(277 -158)"/><path d="M1239.69,841.65c-14.5,0-29-.15-43.49.1-4.3.07-6.15-.79-6.29-5.57-.53-17.48-1.55-34.94-2.3-52.42-1.1-25.62-2-51.26-3.28-76.88-.23-4.84,1.22-6.28,6.06-6.27q43.48.09,87-.44c4.72-.06,5.13,2.39,5.3,5.76q1,20,2.1,39.92,2.43,44.42,4.93,88.81c.35,6.31.47,6.38-6,6.4-14.66,0-29.33,0-44,0Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t1.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t1.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM447.62,225.07h-5.18c-29.8,0-59.61.19-89.41-.13-5.6-.06-7.34,1.6-7,6.89.18,3.46-.48,7-.72,10.45q-2.34,33.61-4.66,67.22c-.84,12.29-1.53,24.58-2.46,36.86-.26,3.46.79,5,4.38,4.66,2.48-.21,5,.1,7.48-.08,3.39-.24,4.84.88,4.5,4.53s-.07,7.58-.07,11.49a8.13,8.13,0,0,0,2,.57c26.8,0,53.61,0,80.42,0,3.26,0,3.72-1.73,3.87-4.41,2.26-40.38,4.63-80.75,6.87-121.13C447.88,236.59,447.62,231.14,447.62,225.07Z" transform="translate(277 -158)"/><path d="M447.62,225.07c0,6.07.26,11.52,0,16.94-2.24,40.38-4.61,80.75-6.87,121.13-.15,2.68-.61,4.42-3.87,4.41-26.81-.05-53.62,0-80.42,0a8.13,8.13,0,0,1-2-.57c0-3.91-.27-7.73.07-11.49s-1.11-4.77-4.5-4.53c-2.48.18-5-.13-7.48.08-3.59.3-4.64-1.2-4.38-4.66.93-12.28,1.62-24.57,2.46-36.86q2.29-33.62,4.66-67.22c.24-3.49.9-7,.72-10.45-.29-5.29,1.45-7,7-6.89,29.8.32,59.61.14,89.41.13Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t2.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t2.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM562.48,225.44H460.77a10,10,0,0,0-.48,1.8q-2.06,35.67-4.06,71.34c-1.2,21.13-2.28,42.26-3.69,63.36-.29,4.21.77,5.67,5,5.64q48.24-.34,96.49-.39c3.27,0,4.74-.86,4.79-4.5.13-10.83.58-21.65,1-32.47.86-22.14,1.94-44.28,2.59-66.43C562.79,251.18,562.48,238.55,562.48,225.44Z" transform="translate(277 -158)"/><path d="M562.48,225.44c0,13.11.31,25.74-.06,38.35-.65,22.15-1.73,44.29-2.59,66.43-.42,10.82-.87,21.64-1,32.47-.05,3.64-1.52,4.49-4.79,4.5q-48.24.07-96.49.39c-4.24,0-5.3-1.43-5-5.64,1.41-21.1,2.49-42.23,3.69-63.36q2-35.67,4.06-71.34a10,10,0,0,1,.48-1.8Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t3.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t3.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM683.28,225.41a26.54,26.54,0,0,0-2.82-.39c-33.48,0-67,.06-100.43-.05-4.14,0-4.52,2.22-4.62,5.35-1.41,43.6-2.78,87.2-4.4,130.79-.19,5.09,1.58,6.09,6.21,6.06,32.31-.22,64.62-.18,96.93-.25,1.75,0,3.5-.24,5.49-.39C680.86,319.23,682.07,272.5,683.28,225.41Z" transform="translate(277 -158)"/><path d="M683.28,225.41c-1.21,47.09-2.42,93.82-3.64,141.12-2,.15-3.74.39-5.49.39-32.31.07-64.62,0-96.93.25-4.63,0-6.4-1-6.21-6.06,1.62-43.59,3-87.19,4.4-130.79.1-3.13.48-5.37,4.62-5.35,33.47.11,67,0,100.43.05A26.54,26.54,0,0,1,683.28,225.41Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t4.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t4.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM802,296.2h.7c0-21.82-.14-43.65.11-65.47,0-4.63-1.31-5.91-5.85-5.88q-47.47.27-95,0c-4.37,0-6,1-6.06,5.77Q694.7,295.86,692.84,361c-.13,4.59,1.14,6,5.8,6q49-.31,98-.08c4.62,0,5.54-1.59,5.5-5.75C801.94,339.51,802,317.86,802,296.2Z" transform="translate(277 -158)"/><path d="M802,296.2c0,21.66-.09,43.31.07,65,0,4.16-.88,5.77-5.5,5.75q-49-.27-98,.08c-4.66,0-5.93-1.37-5.8-6q1.8-65.19,3.13-130.39c.1-4.74,1.69-5.79,6.06-5.77q47.47.21,95,0c4.54,0,5.9,1.25,5.85,5.88-.25,21.82-.11,43.65-.11,65.47Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t5.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t5.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM919.16,296.12H918c0-22-.08-44,.07-66,0-4.15-1.36-5.36-5.47-5.34q-46.47.24-93,0c-3.95,0-5.48.88-5.47,5.24q.13,65.72-.21,131.43c0,4.11,1.12,5.38,5.32,5.36q47.22-.27,94.45,0c4.62,0,5.52-1.61,5.49-5.76C919.08,339.43,919.16,317.78,919.16,296.12Z" transform="translate(277 -158)"/><path d="M919.16,296.12c0,21.66-.08,43.31.08,65,0,4.15-.87,5.79-5.49,5.76q-47.22-.28-94.45,0c-4.2,0-5.34-1.25-5.32-5.36q.32-65.71.21-131.43c0-4.36,1.52-5.25,5.47-5.24q46.49.18,93,0c4.11,0,5.5,1.19,5.47,5.34-.15,22-.07,44-.07,66Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t6.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t6.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1039.17,296.21h-1.4c0-21.66-.16-43.32.11-65,.06-5-1.2-6.55-6.35-6.51q-47,.36-94,.05c-4.82,0-6.59,1-6.51,6.31q.94,65.23,1.21,130.48c0,4.29,1.44,5.22,5.45,5.2q48.75-.24,97.49,0c4.34,0,5.74-1,5.59-5.56C1040.05,339.53,1039.67,317.87,1039.17,296.21Z" transform="translate(277 -158)"/><path d="M1039.17,296.21c.5,21.66.88,43.32,1.6,65,.15,4.52-1.25,5.58-5.59,5.56q-48.75-.23-97.49,0c-4,0-5.42-.91-5.45-5.2q-.35-65.24-1.21-130.48c-.08-5.33,1.69-6.34,6.51-6.31q47,.25,94-.05c5.15,0,6.41,1.54,6.35,6.51-.27,21.66-.11,43.32-.11,65Z" transform="translate(277 -158)"/></svg>
--- a/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t7.svg
+++ b/src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t7.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1052.49,366.17c2.8.22,4.1.41,5.4.41q46.2,0,92.4,0c6.58,0,6.7,0,6.46-6.5-1.66-43.57-3.43-87.14-5-130.72-.16-4.51-2.54-4.59-5.8-4.58-30,.06-59.94.15-89.9,0-4.86,0-6.18,1.46-6.06,6.27,1,37.78,1.7,75.56,2.45,113.34C1052.61,351.47,1052.49,358.61,1052.49,366.17Z" transform="translate(277 -158)"/><path d="M1052.49,366.17c0-7.56.12-14.7,0-21.84-.75-37.78-1.48-75.56-2.45-113.34-.12-4.81,1.2-6.3,6.06-6.27,30,.17,59.93.08,89.9,0,3.26,0,5.64.07,5.8,4.58,1.54,43.58,3.31,87.15,5,130.72.24,6.49.12,6.5-6.46,6.5q-46.2,0-92.4,0C1056.59,366.58,1055.29,366.39,1052.49,366.17Z" transform="translate(277 -158)"/></svg>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
juzi	cebe989fe4	Merge pull request 'zjl' (#13 ) from zjl into features/warning Reviewed-on: #13	2024-09-18 14:57:23 +08:00
juzi	9b8e3734fa	1	2024-09-18 14:56:01 +08:00
juzi	904b9212b8	Merge branch 'features/warning' into zjl	2024-09-18 13:21:45 +08:00
zhp	1852bdc17f	Merge pull request 'zhp' (#12 ) from zhp into features/warning Reviewed-on: #12	2024-09-18 11:25:10 +08:00
‘937886381’	e2f8d9860a	Merge branch 'features/warning' into zhp	2024-09-18 11:24:29 +08:00
‘937886381’	37c0c77078	修改	2024-09-18 11:23:50 +08:00
juzi	9382cb4cf5	Merge branch 'features/warning' into zjl	2024-09-18 11:10:53 +08:00
zhp	2325dc0373	Merge pull request '修改' (#11 ) from zhp into features/warning Reviewed-on: #11	2024-09-18 10:59:38 +08:00
‘937886381’	196ad512af	修改	2024-09-18 10:55:34 +08:00
juzi	fa03a0b329	Merge branch 'features/warning' into zjl	2024-09-18 09:57:23 +08:00
zhp	29f8e96a2a	Merge pull request 'zhp' (#10 ) from zhp into features/warning Reviewed-on: #10	2024-09-18 09:55:13 +08:00
‘937886381’	aa86600a1a	Merge branch 'features/warning' into zhp	2024-09-18 09:13:14 +08:00
‘937886381’	379de8fda0	修改	2024-09-18 09:12:26 +08:00
juzi	fa5cae9a78	Merge branch 'features/warning' into zjl	2024-09-18 08:32:31 +08:00
juzi	50aada1223	装软件	2024-09-18 08:30:49 +08:00
juzi	248fafdf2c	Merge pull request 'zhp' (#9 ) from zhp into features/warning Reviewed-on: #9	2024-09-15 13:14:52 +08:00
‘937886381’	9589fba7c2	Merge branch 'features/warning' into zhp	2024-09-14 17:10:30 +08:00
‘937886381’	0739f8cf00	修改	2024-09-14 17:09:38 +08:00
juzi	e1f95bd009	Merge pull request 'zhp' (#8 ) from zhp into features/warning Reviewed-on: #8	2024-09-14 13:21:58 +08:00
‘937886381’	6de0fe4753	Merge branch 'features/warning' into zhp	2024-09-14 13:19:13 +08:00
‘937886381’	a8b5e57f38	修改	2024-09-14 13:18:13 +08:00
juzi	a4985a5379	Merge pull request 'zhp' (#7 ) from zhp into features/warning Reviewed-on: #7	2024-09-13 16:58:48 +08:00
‘937886381’	f9dde6e159	Merge branch 'features/warning' into zhp	2024-09-13 16:53:19 +08:00
‘937886381’	b27d70f0fc	修改	2024-09-13 16:52:40 +08:00
juzi	fd34efc0b4	Merge pull request 'zhp' (#6 ) from zhp into features/warning Reviewed-on: #6	2024-09-13 15:52:17 +08:00
‘937886381’	2d2d6d4c15	Merge branch 'features/warning' into zhp	2024-09-13 15:49:10 +08:00
‘937886381’	696d852cd2	修改	2024-09-13 15:47:43 +08:00
juzi	637f387f02	Merge pull request 'zhp' (#5 ) from zhp into features/warning Reviewed-on: #5	2024-09-02 13:21:11 +08:00
‘937886381’	6a25d4e30d	Merge branch 'features/warning' into zhp	2024-09-02 09:56:31 +08:00
‘937886381’	270ca5dce7	修改bug	2024-09-02 09:55:47 +08:00
juzi	fcb1549ee3	Merge pull request 'zhp' (#4 ) from zhp into features/warning Reviewed-on: #4	2024-08-30 19:10:44 +08:00
‘937886381’	e4e9ba11c3	修改	2024-08-30 17:32:15 +08:00
‘937886381’	f702e950ac	修改	2024-08-30 17:17:45 +08:00
juzi	d7cc3deeee	Merge pull request '溶液速度视频' (#3 ) from zjl into features/warning Reviewed-on: #3	2024-07-22 15:29:05 +08:00
juzi	c635243357	溶液速度视频	2024-07-22 15:26:04 +08:00
juzi	1e64a4d0e2	Merge pull request '窑炉优化' (#2 ) from zjl into features/warning Reviewed-on: #2	2024-07-19 16:33:43 +08:00
juzi	a15105a9b0	窑炉优化	2024-07-19 16:31:29 +08:00
				`@@ -0,0 +1 @@`
				<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM421.92,703.81c-2.21-.15-4-.39-5.76-.37-26.5.16-53,.46-79.48.44-4.48,0-5.5,1.52-5.71,5.7-.59,11.58-.8,11.57-12.2,11.61-1,0-2,.09-3,0-2.63-.22-3.4,1.09-3.54,3.56-.57,10-1.28,19.93-2,29.9-1.54,22.09-3.13,44.17-4.65,66.26-.56,8.08-1,16.16-1.46,24.91h6.08l60-.14c13.16,0,26.33-.19,39.49,0,3.89,0,5.23-1.25,5.21-5.17,0-5.82.55-11.64.86-17.46q1.85-34.66,3.69-69.34C420.3,737.36,421.07,721.06,421.92,703.81Z" transform="translate(277 -158)"/><path d="M421.92,703.81c-.85,17.25-1.62,33.55-2.46,49.84q-1.8,34.67-3.69,69.34c-.31,5.82-.9,11.64-.86,17.46,0,3.92-1.32,5.21-5.21,5.17-13.16-.14-26.33,0-39.49,0l-60,.14h-6.08c.5-8.75.9-16.83,1.46-24.91,1.52-22.09,3.11-44.17,4.65-66.26.7-10,1.41-19.93,2-29.9.14-2.47.91-3.78,3.54-3.56,1,.09,2,0,3,0,11.4,0,11.61,0,12.2-11.61.21-4.18,1.23-5.71,5.71-5.7,26.49,0,53-.28,79.48-.44C417.93,703.42,419.71,703.66,421.92,703.81Z" transform="translate(277 -158)"/></svg>