1

Merge branch 'features/warning' into zjl
Merge pull request 'zhp' (#12 ) from zhp into features/warning
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 · 2024-09-18 11:10:53 +08:00
346 changed files with 22899 additions and 10103 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

 # dependencies
-/node_modules
+**/node_modules
 /.pnp
 .pnp.js

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
    "@babel/core": "^7.16.0",
    "@jiaminghi/data-view-react": "^1.2.5",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -22,6 +23,7 @@
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dayjs": "^1.11.10",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "echarts": "^5.4.3",
@@ -38,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",
@@ -59,6 +62,7 @@
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
+    "uuid": "^9.0.1",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
@@ -67,7 +71,9 @@
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "server": "node websocket/server.js",
+    "test": "node scripts/test.js",
+    "ws": "node websocket/server.js"
  },
  "eslintConfig": {
    "extends": [
@@ -89,8 +95,10 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/uuid": "^9.0.7",
    "less": "^4.2.0",
-    "less-loader": "^11.1.3"
+    "less-loader": "^11.1.3",
+    "typescript": "^5.3.3"
  },
  "jest": {
    "roots": [
--- a/public/index.html
+++ b/public/index.html
@@ -29,6 +29,8 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <!-- <div id="alarm-list-container"></div> -->
+
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
--- a/public/video/1to2.webm
+++ b/public/video/1to2.webm
--- a/public/video/1to2_old.webm
+++ b/public/video/1to2_old.webm
--- a/public/video/2to1.webm
+++ b/public/video/2to1.webm
--- a/public/video/2to1_old.webm
+++ b/public/video/2to1_old.webm
--- a/public/video/east_fire.webm
+++ b/public/video/east_fire.webm
--- a/public/video/enter.webm
+++ b/public/video/enter.webm
--- a/public/video/enter_old.webm
+++ b/public/video/enter_old.webm
--- a/public/video/floor1.webm
+++ b/public/video/floor1.webm
--- a/public/video/floor1_old.webm
+++ b/public/video/floor1_old.webm
--- a/public/video/liquidSpeed.webm
+++ b/public/video/liquidSpeed.webm
--- a/public/video/west_fire.webm
+++ b/public/video/west_fire.webm
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,75 @@
-// import "./App.css";
+/*
+ * @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";
-// import { SocketContextProvider } from "../store/socket-data-provider";
 import useSlider, { Slider } from "./hooks/useSlider";
 import NavMenu from "./components/Common/NavMenu";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Home from "./pages/Home";
 import EnergyAnalysis from "./pages/EnergyCostAnalysis";
 import RulerContainer from "./components/Tools/Ruler";
+import { Switch } from "antd";
 import { createPortal } from "react-dom";

+const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"];
+const LUNBO_INTERVAL = 60 * 1000;
 function App() {
  const { styles, value, setValue } = useSlider(100);
  const [navActive, setNavActive] = useState("窑炉总览");
+  const [lunbo, setlunbo] = useState(false);
+
+  useEffect(() => {
+    let timer;
+    if (lunbo) {
+      timer = setInterval(() => {
+        handleMenuChange(Menus[(Menus.indexOf(navActive) + 1) % Menus.length]);
+      }, LUNBO_INTERVAL);
+    }
+    return () => {
+      clearInterval(timer);
+    };
+  }, [lunbo, navActive]);
+
+  function handleSwitchChange(val) {
+    setlunbo(val);
+  }
+
+  function handleMenuChange(value) {
+    setNavActive(value);
+  }

  return (
    <>
-      <div id="FullScreen" style={styles}>
-        <NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
+      <div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
+        <NavMenu active={navActive} onChangeActive={handleMenuChange} />
        <Head />
-
+        <div
+          className="lunbo-setting"
+          style={{
+            position: "fixed",
+            top: "48px",
+            right: "680px",
+            display: "flex",
+            alignItems: "center",
+            gap: "16px",
+          }}
+        >
+          <span style={{ fontSize: "20px", color: "#00fff7" }}>模块轮播</span>
+          <Switch
+            className="lunbo-btn"
+            size="small"
+            value={lunbo}
+            onChange={handleSwitchChange}
+          />
+        </div>
        {navActive == "能耗分析" && <EnergyAnalysis />}
+        {navActive == "能耗分析" && <div className="bgDitu"></div>}
        {navActive != "能耗分析" && <Home active={navActive} />}
      </div>
      <Slider value={value} setValue={setValue} />
--- 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/dontknowwhatitis.png
+++ b/src/assets/Icon/dontknowwhatitis.png
--- a/src/assets/Icon/forecast.png
+++ b/src/assets/Icon/forecast.png
--- a/src/assets/Icon/kilnBottom.png
+++ b/src/assets/Icon/kilnBottom.png
--- a/src/assets/Icon/kilnPress.png
+++ b/src/assets/Icon/kilnPress.png
--- a/src/assets/Icon/kilnTop.png
+++ b/src/assets/Icon/kilnTop.png
--- a/src/assets/Icon/lightnen.png
+++ b/src/assets/Icon/lightnen.png
--- a/src/assets/Icon/liquidTrend.png
+++ b/src/assets/Icon/liquidTrend.png
--- a/src/assets/Icon/oilstation.png
+++ b/src/assets/Icon/oilstation.png
--- a/src/assets/Icon/temp.svg
+++ b/src/assets/Icon/temp.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>温度</title>
+    <g id="退火监测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-64.000000, -134.000000)" fill-rule="nonzero" id="编组-8备份">
+            <g transform="translate(40.000000, 112.000000)">
+                <g id="温度" transform="translate(24.000000, 22.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M18.6,15 C18.15,14.25 17.4,13.5 16.5,13.05 L16.5,3 C16.5,1.35 15.3,0 13.65,0 C12,0 10.8,1.35 10.8,3 L10.8,13.2 C9.9,13.5 9.3,14.25 8.7,15 C8.1,15.9 7.8,16.95 7.8,18.15 C7.8,19.65 8.4,21.15 9.45,22.2 C10.5,23.25 12.15,24 13.65,24 C15.15,24 16.65,23.4 17.7,22.35 C18.75,21.3 19.35,19.8 19.35,18.3 C19.5,17.1 19.2,16.05 18.6,15 Z M13.65,22.95 C10.95,22.95 8.85,20.7 8.85,18.15 C8.85,16.35 9.9,14.7 11.55,13.8 L11.85,13.65 L11.85,3 C11.85,1.95 12.75,1.05 13.8,1.05 C14.85,1.05 15.75,1.95 15.75,3 L15.75,13.8 L16.05,13.95 C17.7,14.85 18.75,16.5 18.75,18.3 C18.6,20.85 16.35,22.95 13.65,22.95 Z M14.55,15.6 L14.55,6.15 C14.55,5.7 14.1,5.25 13.65,5.25 C13.2,5.25 12.75,5.7 12.75,6.15 L12.75,15.6 C11.7,15.9 11.1,16.95 11.1,18 C11.1,19.35 12.3,20.55 13.65,20.55 C15,20.55 16.2,19.35 16.2,18 C16.2,16.95 15.6,15.9 14.55,15.6 Z M8.25,4.35 L3.6,4.35 C3,4.35 2.7,4.05 2.7,3.45 C2.7,3 3,2.55 3.6,2.55 L8.4,2.55 C8.85,2.55 9.3,3 9.3,3.45 C9.15,4.05 8.85,4.35 8.25,4.35 L8.25,4.35 Z M8.25,7.2 L5.25,7.2 C4.8,7.2 4.35,6.75 4.35,6.3 C4.35,5.85 4.8,5.4 5.25,5.4 L8.25,5.4 C8.7,5.4 9.15,5.85 9.15,6.3 C9.15,6.9 8.85,7.2 8.25,7.2 Z M8.25,10.2 L7.35,10.2 C6.9,10.2 6.45,9.75 6.45,9.3 C6.45,8.85 6.9,8.4 7.35,8.4 L8.4,8.4 C8.85,8.4 9.3,8.85 9.3,9.3 C9.15,9.75 8.85,10.2 8.25,10.2 Z" id="形状" fill="#59D0E2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/assets/Icon/triangle.svg
+++ b/src/assets/Icon/triangle.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="·窑炉总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="总览" transform="translate(-1823.000000, -772.000000)">
+            <g id="编组-20备份-5" transform="translate(1786.000000, 764.000000)">
+                <g id="编组-13" transform="translate(45.000000, 16.000000) scale(1, -1) rotate(-180.000000) translate(-45.000000, -16.000000) translate(37.000000, 8.000000)">
+                    <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+                    <path d="M3.67840479,4.47768215 L12.3215952,4.47768215 C12.87388,4.47768215 13.3215952,4.9253974 13.3215952,5.47768215 C13.3215952,5.70423387 13.2446673,5.92407165 13.1034098,6.1011931 L8.78181462,11.5200015 C8.43745903,11.9517857 7.80827335,12.0226607 7.37648905,11.6783051 C7.31796217,11.6316289 7.2648616,11.5785283 7.21818538,11.5200015 L2.89659016,6.1011931 C2.55223458,5.6694088 2.62310955,5.04022312 3.05489384,4.69586753 C3.23201529,4.55461005 3.45185307,4.47768215 3.67840479,4.47768215 Z" id="路径-2" fill="#03233C"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- 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/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/offline.png
+++ b/src/assets/offline.png
--- a/src/assets/online.png
+++ b/src/assets/online.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/tempIntr.png
+++ b/src/assets/tempIntr.png
--- a/src/assets/toFourBack.png
+++ b/src/assets/toFourBack.png
--- a/src/assets/warn-bg.png
+++ b/src/assets/warn-bg.png
--- a/src/assets/warn-icon.png
+++ b/src/assets/warn-icon.png
--- a/src/components/Common/AmenSelector/index.jsx
+++ b/src/components/Common/AmenSelector/index.jsx
@@ -0,0 +1,5 @@
+function AmenSelector() {
+  return <div className="amen-selector"></div>;
+}
+
+export default AmenSelector;
--- a/src/components/Common/AnnealFanRunFrequence/index.jsx
+++ b/src/components/Common/AnnealFanRunFrequence/index.jsx
@@ -0,0 +1,213 @@
+// AnnealFanRunFrequence
+import cls from "./index.module.css";
+import * as echarts from "echarts";
+import GraphBase from "../GraphBase";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+function WindFrequence(props) {
+  const [currLine, setCurrLine] = useState('Y61')
+  const [showChart, setShowChart] = useState(false);
+  const [currentLine, setCurrentLine] = useState([]);
+  const runState = useSelector((state) => state.annealFanFrequence.runtime);
+  const hisState = useSelector((state) => state.annealFanFrequence.history);
+
+  let dataList = [];
+  let seriesData = [];
+  const colors = [
+    "#12FFF5",
+    "#2760FF",
+    "#FFD160",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  let options = null;
+  if (showChart) {
+    // keys() 结果不是按照顺序，需要 sort()
+    seriesData =
+      hisState != null
+        ? Object.keys(hisState)
+            .sort()
+            .map((key) => hisState[key])
+        : Array(8)
+            .fill(1)
+            .map((_) => Array(7).fill(0));
+
+    options = {
+      color: colors,
+      grid: { top: 32, right: 12, bottom: 20, left: 48 },
+      xAxis: {
+        type: "category",
+        data: Array(7)
+          .fill(1)
+          .map((_, index) => {
+            const today = new Date();
+            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+              dtimestamp
+            ).getDate()}`;
+          })
+          .reverse(),
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+        },
+        axisTick: { show: false },
+        axisLine: {
+          lineStyle: {
+            width: 1,
+            color: "#213259",
+          },
+        },
+      },
+      yAxis: {
+        name: "单位/m³",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 10,
+          align: "right",
+        },
+        type: "value",
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#213259",
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#213259a0",
+          },
+        },
+        // interval: 10,
+        // min: 0,
+        // max: 100,
+      },
+      series: seriesData.map((v, i) => ({
+        name: i + 1 + "#风机",
+        data: v,
+        type: "line",
+        symbol: "circle",
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            // i % 8 避免超过8个数据时无颜色的问题
+            { offset: 0, color: colors[i % 8] + "40" },
+            { offset: 0.5, color: colors[i % 8] + "20" },
+            { offset: 1, color: colors[i % 8] + "00" },
+          ]),
+        },
+      })),
+      tooltip: {
+        trigger: "axis",
+      },
+    };
+  } else {
+    console.log('runstate changeD!......')
+    dataList =
+      runState != null
+        ? Object.keys(runState).map((fan) => ({
+            id: Math.random(),
+            name: fan,
+            value: runState[fan],
+          }))
+        : [
+            { id: 1, name: "1#风机#1", value: "0m³/h" },
+            // { id: 133, name: "1#风机#1", value: "0m³/h" },
+            // { id: 134, name: "1#风机#1", value: "0m³/h" },
+            // { id: 1344, name: "1#风机#1", value: "0m³/h" },
+            // { id: 51, name: "1#风机#1", value: "0m³/h" },
+            // { id: 1534, name: "1#风机#1", value: "0m³/h" },
+            // { id: 154, name: "1#风机#1", value: "0m³/h" },
+            // { id: 153, name: "1#风机#1", value: "0m³/h" },
+            // { id: 111, name: "1#风机#1", value: "0m³/h" },
+            { id: 2, name: "2#风机#1", value: "0m³/h" },
+            { id: 3, name: "3#风机#1", value: "0m³/h" },
+            { id: 4, name: "4#风机#1", value: "0m³/h" },
+            { id: 5, name: "5#风机#1", value: "0m³/h" },
+            { id: 11, name: "1#风机#2", value: "0m³/h" },
+            { id: 12, name: "2#风机#2", value: "0m³/h" },
+            { id: 13, name: "3#风机#2", value: "0m³/h" },
+            { id: 14, name: "4#风机#2", value: "0m³/h" },
+            { id: 15, name: "5#风机#2", value: "0m³/h" },
+          ];
+  }
+
+  function handleSwitchChange(val) {
+    if (val) {
+      setShowChart(true);
+    } else {
+      setShowChart(false);
+    }
+  }
+
+  useEffect(() => {
+    if (!showChart) {
+      setCurrentLine((old) =>
+        dataList.filter((item) => item?.name.startsWith("1#"))
+      );
+    }
+  }, [showChart]);
+
+  function handleLineChange(line) {
+    const lineNum = line[2];
+    setCurrLine(line);
+    setCurrentLine((old) =>
+      dataList.filter((item) => item?.name.startsWith(`${lineNum}#`))
+    );
+  }
+
+  return (
+    <GraphBase
+      icon="kiln"
+      title="风机运行频率"
+      size={["middle", "long"]}
+      switchOptions={false}
+      switchPosition={[null, 200]} // [top, left]
+      onSwitch={handleSwitchChange}
+      dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
+      selectWidth={70}
+      defaultSelect={currLine}
+      onDateChange={handleLineChange}
+    >
+      <div className={cls.chart} style={{ marginTop: "24px" }}>
+        {/* {showChart && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )} */}
+        {!showChart && (
+          <div className={cls.gridList}>
+            {currentLine.map((item) => (
+              <div
+                key={item.id}
+                className={cls.listItem}
+                style={{ padding: props.stretch ? "20px 0" : "" }}
+              >
+                <span className={cls.fanName}>{item.name}</span>
+                <span
+                  className={cls.fanValue}
+                  style={{
+                    fontWeight: 700,
+                    letterSpacing: 1,
+                    fontSize: 16,
+                    // color: "#e03537",
+                    color: "#24aebb",
+                  }}
+                >
+                  {item.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </GraphBase>
+  );
+}
+
+export default WindFrequence;
--- a/src/components/Common/AnnealFanRunFrequence/index.module.css
+++ b/src/components/Common/AnnealFanRunFrequence/index.module.css
@@ -0,0 +1,52 @@
+.chart {
+  height: 100%;
+}
+
+.gridList {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* grid-auto-row: ; */
+  gap: 8px;
+}
+
+.listItem {
+  border-radius: 2px;
+  padding: 10px 0;
+  text-align: center;
+  color: #fff;
+  box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.headWidget {
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  height: 32px;
+  width: 410px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: #fff;
+}
+.relative {
+  position: relative;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.fanName {
+  text-align: right;
+  flex: 7;
+}
+
+.fanValue {
+  flex: 3;
+  text-align: left;
+}
--- a/src/components/Common/Arrow/index.jsx
+++ b/src/components/Common/Arrow/index.jsx
@@ -0,0 +1,28 @@
+import cls from "./index.module.css";
+
+const Arrow = ({ direction, disabled, onClick }) => {
+  function handleClick() {
+    onClick(direction)
+  }
+  return (
+    <button
+      className={`${cls["arrow"]} ${
+        direction == "right" ? cls["arrow__right"] : ""
+      } ${true ? "disabled" : ""}`}
+      onClick={handleClick}
+    >
+      <div
+        className={`${cls["arrow-top"]} ${
+          direction == "right" ? cls["arrow-top__right"] : ""
+        }`}
+      ></div>
+      <div
+        className={`${cls["arrow-bottom"]} ${
+          direction == "right" ? cls["arrow-bottom__right"] : ""
+        }`}
+      ></div>
+    </button>
+  );
+};
+
+export default Arrow;
--- a/src/components/Common/Arrow/index.module.css
+++ b/src/components/Common/Arrow/index.module.css
@@ -0,0 +1,60 @@
+
+
+.arrow {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: transparent;
+  width: 16px;
+  height: 48px;
+  position: absolute;
+  top: 112px;
+  left: 5px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.arrow.disabled > div {
+  background: #3d4a56;
+}
+
+.arrow__right {
+  left: unset;
+  right: 5px;
+}
+
+.arrow:hover > div {
+  background: #00f3ed;
+}
+
+.arrow-top {
+  transition: background 0.1s ease-out;
+  background: #1eaba9;
+  width: 8px;
+  height: 24px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 12px;
+  transform: rotateZ(20deg) translateY(2px) translateX(4px);
+}
+
+.arrow-bottom {
+  transition: background 0.1s ease-out;
+  background: #1eaba9;
+  width: 8px;
+  height: 24px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-radius: 12px;
+  transform: rotateZ(-20deg) translateY(-2px) translateX(4px);
+}
+
+.arrow-top__right {
+  transform: rotateZ(-20deg) translateY(4px) translateX(4px);
+}
+
+.arrow-bottom__right {
+  transform: rotateZ(20deg) translateY(-4px) translateX(4px);
+}
--- a/src/components/Common/BlueRect/index.jsx
+++ b/src/components/Common/BlueRect/index.jsx
@@ -0,0 +1,32 @@
+import cls from "./index.module.css";
+
+function BlueRect(props) {
+  const title = props.title || "DEFAULT";
+  const value = props.value || "0℃";
+  return (
+    <div
+      className={`${cls.blueRect} ${cls[title]}`}
+      style={{
+        background: props.blue ? "#0a4268ee" : "#0a426860",
+      }}
+    >
+      <span
+        className="title"
+        style={{
+          fontSize: "18px",
+          lineHeight: "24px",
+          color: props.blue ? "#40afb8" : "#fff",
+          fontWeight: 600,
+          userSelect: "none",
+        }}
+      >
+        {title}
+      </span>
+      <span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export default BlueRect;
--- a/src/components/Common/BlueRect/index.module.css
+++ b/src/components/Common/BlueRect/index.module.css
@@ -0,0 +1,544 @@
+.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: 128px;
+  left: 630px;
+}
+.TE229 {
+  top: 128px;
+  left: 746px; /* +120px */
+}
+.TE231 {
+  top: 128px;
+  left: 866px;
+}
+.TE233 {
+  top: 128px;
+  left: 980px;
+}
+.TE235 {
+  top: 128px;
+  left: 1100px;
+}
+.TE237 {
+  top: 128px;
+  left: 1220px;
+}
+.TE239 {
+  top: 128px;
+  left: 1330px;
+}
+.TE241 {
+  top: 128px;
+  left: 1450px;
+}
+
+/** center bottom **/
+.TE228 {
+  top: 620px;
+  left: 600px;
+}
+.TE230 {
+  top: 620px;
+  left: 720px;
+}
+.TE232 {
+  top: 620px;
+  left: 850px;
+}
+.TE234 {
+  top: 620px;
+  left: 970px;
+}
+.TE236 {
+  top: 620px;
+  left: 1100px;
+}
+.TE238 {
+  top: 620px;
+  left: 1225px;
+}
+.TE240 {
+  top: 620px;
+  left: 1350px;
+}
+.TE242 {
+  top: 620px;
+  left: 1470px;
+}
+
+/** center middle **/
+.TE201 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 480px;
+}
+.TE202 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 610px;
+}
+.TE203 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 740px;
+}
+.TE204 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 870px;
+}
+.TE205 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1000px;
+}
+.TE206 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1130px;
+}
+.TE207 {
+  top: 330px;
+  /* transform: rotate(-1deg); */
+  left: 1260px;
+}
+.TE208 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1260px;
+}
+.TE209 {
+  top: 485px;
+  /* transform: rotate(-1deg); */
+  left: 1260px;
+}
+.TE210 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1390px;
+}
+.TE211 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1520px;
+}
+.TE212 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1650px;
+}
+.TE213 {
+  top: 410px;
+  /* transform: rotate(-1deg); */
+  left: 1780px;
+}
+
+/** right **/
+.TE214 {
+  top: 168px;
+  left: 2000px;
+}
+.TE215 {
+  top: 265px;
+  left: 2030px;
+}
+.TE216 {
+  top: 400px;
+  left: 2050px;
+}
+.TE217 {
+  top: 520px;
+  left: 2070px;
+}
+.TE218 {
+  top: 660px;
+  left: 2090px;
+}
+.TE219 {
+  top: 168px;
+  left: 2120px;
+}
+.TE220 {
+  top: 265px;
+  left: 2135px;
+}
+.TE221 {
+  top: 400px;
+  left: 2170px;
+}
+.TE222 {
+  top: 520px;
+  left: 2180px;
+}
+.TE223 {
+  top: 660px;
+  left: 2200px;
+}
+.TE224 {
+  top: 265px;
+  left: 2240px;
+}
+.TE225 {
+  top: 400px;
+  left: 2290px;
+}
+.TE226 {
+  top: 520px;
+  left: 2290px;
+}
+
+/** 一层 --- 窑底 **/
+.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);
+}
--- a/src/components/Common/BottomItemBackground/index.jsx
+++ b/src/components/Common/BottomItemBackground/index.jsx
@@ -6,6 +6,7 @@ function BottomBarItem(props) {
 		<Container
 			icon={props.icon}
 			title={props.title}
+			desc={props.desc}
 			className={`${cls.bottomBarItem} ${props.className}`}
 			style={props.style}
 		>
--- a/src/components/Common/BottomItemBackground/index.module.css
+++ b/src/components/Common/BottomItemBackground/index.module.css
@@ -2,4 +2,4 @@
    background: url(../../../assets/bg-bottom-item.png) no-repeat;
    background-size: 100% 100%;
    width: 600px;
-}
+}
--- 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
@@ -32,11 +32,11 @@ export default function CompanyName() {
 			<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
 			<div className={cls.TopSideLeftLine}>
 				<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
-				<h2 className={cls.TopSideLeftTxt}>单位：河南汇融科技服务有限公司</h2>
+				<h2 className={cls.TopSideLeftTxt}>单位：河南汇融数字科技有限公司</h2>
 			</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
@@ -41,6 +41,7 @@
 			color: rgb(255, 255, 255, 0.8);
 			font-size: 20px;
 			font-weight: 300px;
+			letter-spacing: 1px;
 			line-height: 22.174976px;
 		}
 	}
@@ -77,9 +78,9 @@
 	}

 	.TopTitleText {
-		margin-top: 16px;
+		margin-top: 40px;
 		letter-spacing: 8px;
-		font-size: 32px;
+		font-size: 34px;
 		color: #00fff7;
 		text-align: center;
 		letter-spacing: 2px;
--- a/src/components/Common/CurrentLineSpec/index.jsx
+++ b/src/components/Common/CurrentLineSpec/index.jsx
@@ -1,73 +1,153 @@
 import BottomBarItem from "../BottomItemBackground";
-import React, { Component } from "react";
 import cls from "./righttable.module.scss";
-
+import { useSelector } from "react-redux";
 import { ScrollBoard } from "@jiaminghi/data-view-react";

-let data = [
-  ["产线0", "10mm", "10mm", "10mm"],
-  ["产线2", "8mm", "8mm", "8mm"],
-  ["产线3", "15mm", "15mm", "15mm"],
-  ["产线4", "15mm", "15mm", "15mm"],
-  ["产线42", "15mm", "15mm", "15mm"],
-  ["产线5", "15mm", "15mm", "15mm"],
-  ["产线6", "15mm", "15mm", "15mm"],
+function Chart1(props) {
+  const rawData = useSelector((state) => state.cutting.productData);
+
+  let config = {
+    // headerBGC: "rgba(4, 44, 76, 0.3)",
+    headerBGC: "#044A8460",
+    header: [
+      '<span style="color:#fff; padding-left: 8px;">产线名<span/>',
+      '<span style="color:#fff; padding-left: 8px;">玻璃长度<span/>',
+      '<span style="color:#fff; padding-left: 8px;">玻璃宽度<span/>',
+      '<span style="color:#fff; padding-left: 8px;">玻璃厚度<span/>',
+    ],
+    // oddRowBGC: "#042444",
+    // evenRowBGC: "#042c4c",
+    oddRowBGC: "#044A8460",
+    evenRowBGC: "#0b549970",
+    columnWidth: [128],
+    headerHeight: 40,
+    hoverPause: true,
+    data: replaceStyle(filterData(rawData), 0.7),
+  };
+
+  return (
+    <BottomBarItem
+      icon="pause"
+      title="当前产线生产规格"
+      className={props.className}
+      style={props.style}
+    >
+      <div
+        className={cls.CenterChart1itemDetailBorder}
+        style={{ paddingTop: "6px" }}
+      >
+        <span className={cls.CenterFormitemDetailBorderLine1}></span>
+        <span className={cls.CenterFormitemDetailBorderLine2}></span>
+        <span className={cls.CenterFormitemDetailBorderLine3}></span>
+        {config.data.length !== 0 && <ScrollBoard config={config} style={{}} />}
+        {config.data.length === 0 && (
+          <p
+            style={{
+              color: "#cccf",
+              fontSize: "24px",
+              userSelect: "none",
+              textAlign: "center",
+              paddingTop: "72px",
+            }}
+          >
+            暂无数据
+          </p>
+        )}
+      </div>
+    </BottomBarItem>
+  );
+}
+
+export default Chart1;
+
+// 测试数据
+var rawData = [
+  {
+    id: 1,
+    length: 1209,
+    productionLine: "Y61",
+    square: 123.3,
+    thick: 2,
+    wide: 1089,
+  },
+  {
+    id: 2,
+    length: 1119,
+    productionLine: "Y62",
+    square: 103.3,
+    thick: 2,
+    wide: 1339,
+  },
+  {
+    id: 3,
+    length: 1019,
+    productionLine: "Y63",
+    square: 233,
+    thick: 1,
+    wide: 1111,
+  },
+  {
+    id: 4,
+    length: 2000,
+    productionLine: "Y64",
+    square: 233,
+    thick: 1,
+    wide: 1232,
+  },
+  {
+    id: 5,
+    length: 1560,
+    productionLine: "Y65",
+    square: 233,
+    thick: 1,
+    wide: 996,
+  },
+  {
+    id: 6,
+    length: 1990,
+    productionLine: "Y66",
+    square: 233,
+    thick: 1,
+    wide: 416,
+  },
 ];

-let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
+function filterData(rawData) {
+  return (rawData ?? []).map((item) => [
+    // 产线名
+    item.productionLine,
+    // 原板宽度
+    item.length,
+    // 净板宽
+    item.wide,
+    // 玻璃厚度
+    item.thick,
+  ]);
+}

-let config = {
-  headerBGC: "rgba(4, 44, 76, 0.3)",
-  header: [
-    '<span style="color:#fff">产线名<span/>',
-    '<span style="color:#fff">原板宽度<span/>',
-    '<span style="color:#fff">净板宽<span/>',
-    '<span style="color:#fff">玻璃厚度<span/>',
-  ],
-  oddRowBGC: "#042444",
-  evenRowBGC: "#042c4c",
-  columnWidth: [128],
-  headerHeight: 40,
-  hoverPause: false,
-  data: replaceStyle(data, 0.7),
-};
+// let data = [
+//   ["产线0", "10mm", "10mm", "10mm"],
+//   ["产线2", "8mm", "8mm", "8mm"],
+//   ["产线3", "15mm", "15mm", "15mm"],
+//   ["产线4", "15mm", "15mm", "15mm"],
+//   ["产线42", "15mm", "15mm", "15mm"],
+//   ["产线5", "15mm", "15mm", "15mm"],
+//   ["产线6", "15mm", "15mm", "15mm"],
+// ];

-function replaceStyle(Arr, opencity) {
+// let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
+
+function replaceStyle(Arr, opacity) {
  let temp = [];

  for (let i = 0; i < Arr.length; i++) {
    temp[i] = [];
    for (let j = 0; j < Arr[i].length; j++) {
-      temp[i][
-        j
-      ] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
+      temp[i][j] = `<span style="color:rgba(255, 255, 255,${opacity})">${
+        Arr[i][j]
+      } ${j == 0 ? "" : "mm"}<span/>`;
    }
  }

  return temp;
 }
-
-class Chart1 extends Component {
-  render() {
-    return (
-      <BottomBarItem
-        icon="pause"
-        title="当前产线生产规格"
-        className={this.props.className}
-        style={this.props.style}
-      >
-        <div
-          className={cls.CenterChart1itemDetailBorder}
-          style={{ paddingTop: "6px" }}
-        >
-          <span className={cls.CenterFormitemDetailBorderLine1}></span>
-          <span className={cls.CenterFormitemDetailBorderLine2}></span>
-          <span className={cls.CenterFormitemDetailBorderLine3}></span>
-          <ScrollBoard config={config} style={{}} />
-        </div>
-      </BottomBarItem>
-    );
-  }
-}
-
-export default Chart1;
--- a/src/components/Common/CurrentLineSpec/righttable.module.scss
+++ b/src/components/Common/CurrentLineSpec/righttable.module.scss
@@ -5,7 +5,7 @@
 	flex-direction: column;
 	justify-content: flex-start;

-	background-color: rgba(4, 44, 76, 0.2);
+	// background-color: rgba(4, 44, 76, 0.2);
 	.CenterChart1itemTXT {
 		width: 100%;
 		height: 10%;
--- a/src/components/Common/CurrentTemp/6778.ttf
+++ b/src/components/Common/CurrentTemp/6778.ttf
--- a/src/components/Common/CurrentTemp/font.css
+++ b/src/components/Common/CurrentTemp/font.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "HelloFont WenYiHei";
+  /* font-style: normal;
+  font-weight: 400; */
+  src: url("./ziyou.ttf");
+  /* font-display: swap; */
+}
--- a/src/components/Common/CurrentTemp/index.jsx
+++ b/src/components/Common/CurrentTemp/index.jsx
@@ -1,138 +1,259 @@
-import BottomBarItem from '../BottomItemBackground';
-import GraphBase from '../GraphBase';
-import { Radio } from 'antd';
-import cls from './index.module.css';
-import { useState } from 'react';
+import GraphBase from "../GraphBase";
+import "./font.css";
+import cls from "./index.module.css";
+import { useEffect, useState } from "react";
+import { Tooltip, Button } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useSelector } from "react-redux";

 const SmallBox = (props) => {
-	return (
-		<div
-			className="small-box"
-			style={{
-				boxShadow: 'inset 0 0 18px 10px #fff1',
-				borderRadius: '3px',
-				padding: '6px',
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				color: '#fff',
-				position: 'relative',
-				userSelect: 'none',
-			}}
-		>
-			{props.split !== false && (
-				<span
-					className="vertical-line"
-					style={{
-						position: 'absolute',
-						display: 'inline-block',
-						width: '2px',
-						height: '80%',
-						top: '10%',
-						left: '50%',
-						background:
-							'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
-					}}
-				></span>
-			)}
-			{props.children}
-		</div>
-	);
+  return (
+    <div
+      className="small-box"
+      style={{
+        boxShadow: "inset 0 0 18px 10px #fff1",
+        borderRadius: "3px",
+        padding: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#fff",
+        position: "relative",
+        userSelect: "none",
+      }}
+    >
+      {props.split !== false && (
+        <span
+          className="vertical-line"
+          style={{
+            position: "absolute",
+            display: "inline-block",
+            width: "2px",
+            height: "80%",
+            top: "10%",
+            left: "45%",
+            background:
+              "linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)",
+          }}
+        ></span>
+      )}
+      {props.children}
+    </div>
+  );
 };

 function WindFrequence(props) {
-	const [dataSource, setDataSource] = useState('风机');
+  const [dataSource, setDataSource] = useState("Y61");
+  const [currentLineTemp, setCurrentLineTemp] = useState([]);
+  const currentTempList = useSelector((state) => state.annealTemperature?.data);
+  const lines = ["Y61", "Y62", "Y63", "Y64", "Y65"];
+  function handleSourceChange(line) {
+    setDataSource(line);
+  }

-	function handleSourceChange(v) {
-		console.log('val', v);
-	}
+  useEffect(() => {
+    setCurrentLineTemp(
+      (currentTempList &&
+        currentTempList[1 + lines.indexOf(dataSource) + "#"]) ||
+        []
+    );
+  }, [dataSource, currentTempList]);

-	return (
-		<GraphBase
-			icon="pause"
-			title="当前温度"
-			dateOptions={['风机', '风阀', '电加热']}
-			onDateChange={handleSourceChange}
-			size={['middle', 'long']}
-		>
-			<div className={cls.mainContent + ' ' + cls.grid}>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox split={false}>
-					<div className={cls.areaPureContent}>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox split={false}>
-					<div className={cls.areaPureContent}>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-			</div>
-		</GraphBase>
-	);
+  return (
+    <GraphBase
+      icon="temp"
+      title="当前温度"
+      dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
+      selectWidth={70}
+      defaultSelect={dataSource}
+      onDateChange={handleSourceChange}
+      size={["middle", "long"]}
+    >
+      <div className={cls.mainContent + " " + cls.grid}>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[0]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[1]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[2]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A2区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[6]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[7]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[8]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>B区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[12]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[13]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[14]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>C区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[18]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[19]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[20]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[3]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[4]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[5]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A2区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[9]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[10]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[11]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>B区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[15]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[16]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[17]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>C区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[21]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[22]).toFixed(2) || 0} ℃
+            </span>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[23]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox split={false} style={{ position: "relative" }}>
+          <div className={cls.areaPureContent}>
+            <div
+              className="hint"
+              style={{ position: "absolute", top: "3px", right: "3px" }}
+            >
+              <Tooltip title="红外温度">
+                <Button
+                  shape="circle"
+                  type="text"
+                  style={{ color: "#cccc" }}
+                  icon={<InfoCircleOutlined />}
+                ></Button>
+              </Tooltip>
+            </div>
+            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
+              {(+currentLineTemp[26]).toFixed(2) || 0}℃
+            </span>
+            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
+              {(+currentLineTemp[27]).toFixed(2) || 0}℃
+            </span>
+            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
+              {(+currentLineTemp[28]).toFixed(2) || 0}℃
+            </span>
+          </div>
+        </SmallBox>
+
+        <SmallBox split={false} style={{ position: "relative" }}>
+          <div className={cls.areaPureContent}>
+            <div
+              className="hint"
+              style={{ position: "absolute", top: "3px", right: "3px" }}
+            >
+              <Tooltip title="压延机冷却水温度 | 过度辊台冷却水温度 | 唇砖冷却水温度">
+                <Button
+                  shape="circle"
+                  type="text"
+                  style={{ color: "#cccc" }}
+                  icon={<InfoCircleOutlined />}
+                ></Button>
+              </Tooltip>
+            </div>
+            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
+              {(+currentLineTemp[29]).toFixed(2) || 0}℃
+            </span>
+            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
+              {(+currentLineTemp[30]).toFixed(2) || 0}℃
+            </span>
+            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
+              {(+currentLineTemp[31]).toFixed(2) || 0}℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>RET1区</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[24]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>RET2区</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>
+              {(+currentLineTemp[25]).toFixed(2) || 0} ℃
+            </span>
+          </div>
+        </SmallBox>
+      </div>
+    </GraphBase>
+  );
 }

 export default WindFrequence;
--- a/src/components/Common/CurrentTemp/index.module.css
+++ b/src/components/Common/CurrentTemp/index.module.css
@@ -1,139 +1,141 @@
 .chart {
-	height: 100%;
+  height: 100%;
 }

 .gas {
-	position: relative;
+  position: relative;
 }

 .currentFlow {
-	position: absolute;
-	top: 20px;
-	left: 50%;
-	transform: translateX(-50%);
-	padding: 8px 22px;
-	border-radius: 2px;
-	letter-spacing: 2px;
-	box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
-	line-height: 18px;
-	font-size: 18px;
-	text-align: center;
-	color: #12fff5;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 22px;
+  border-radius: 2px;
+  letter-spacing: 2px;
+  box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
+  line-height: 18px;
+  font-size: 18px;
+  text-align: center;
+  color: #12fff5;
 }

 .floatHead {
-	position: absolute;
-	top: 22px;
-	right: 24px;
-	height: 32px;
-	width: 410px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  height: 32px;
+  width: 410px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }

 .mainContent {
-	padding-top: 16px;
+  padding-top: 16px;
 }

 .alignRight {
-	text-align: right;
-	justify-self: flex-end;
+  text-align: right;
+  justify-self: flex-end;
 }

 .grid {
-	display: grid;
-	gap: 6px;
-	grid-template-columns: repeat(2, minmax(100px, 1fr));
-	grid-auto-rows: minmax(64px, min-content);
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(2, minmax(100px, 1fr));
+  grid-auto-rows: minmax(64px, min-content);
 }

 .areaName {
-	color: #fff;
-	font-size: 20px;
-	line-height: 1;
-	letter-spacing: 1.5px;
-	margin: 0;
-	padding-left: 20px;
-	width: 50%;
+  color: #fff;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: 1.5px;
+  margin: 0;
+  padding-left: 20px;
+  width: 50%;
 }

 .areaPureContent {
-	display: flex;
+  display: flex;
 }

 .areaPureValue {
-	padding: 0 8px;
+  padding: 0 8px;
 }

-.areaPureValue:not(:first-child) {
-	border-left: 2px solid #fff6;
+span.areaPureValue:not(:first-of-type) {
+  border-left: 2px solid #fff6;
 }

 .areaContent {
-	width: 50%;
-	padding-left: 12px;
-	display: flex;
-	flex-direction: column;
+  width: 50%;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: column;
 }

 .areaPureValue,
 .areaValue {
-	display: inline-block;
-	font-size: 17px;
-	line-height: 22px;
-	letter-spacing: 1.2px;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 1.2px;
+  font-family: "HelloFont WenYiHei", sans-serif;
+  color: #53c2d4;
 }

 .switchLabel {
-	color: white;
-	margin-left: 6px;
+  color: white;
+  margin-left: 6px;
 }

 .legend:last-child {
-	margin-left: 8px;
+  margin-left: 8px;
 }

 .legend > span {
-	display: inline-block;
-	color: #dff1fe;
-	font-size: 14px;
-	letter-spacing: 2px;
+  display: inline-block;
+  color: #dff1fe;
+  font-size: 14px;
+  letter-spacing: 2px;
 }

 .legend > span:first-child {
-	width: 12px;
-	height: 12px;
-	margin-right: 4px;
-	border-radius: 2px;
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  border-radius: 2px;
 }

 .gasIcon {
-	background: #12fff5;
+  background: #12fff5;
 }

 .gas2Icon {
-	background: #2760ff;
+  background: #2760ff;
 }

 .radioGroup {
-	user-select: none;
+  user-select: none;
 }

 .radioGroup * {
-	border: none !important;
-	border-radius: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
 }

 .radioGroup *:focus-within {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }

 .radioGroup *::before {
-	width: 0 !important;
+  width: 0 !important;
 }

 .radioGroup_button_wrapper {
-	color: #fff !important;
-	background: #03233c !important;
+  color: #fff !important;
+  background: #03233c !important;
 }
--- a/src/components/Common/CurrentTemp/ziyou.ttf
+++ b/src/components/Common/CurrentTemp/ziyou.ttf
--- a/src/components/Common/Energy/EnergeCostRealtime/index.jsx
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
@@ -0,0 +1,184 @@
+import { useEffect, useState } from "react";
+import cls from "./index.module.scss";
+import { useSelector } from "react-redux";
+import Arrow from "../../Arrow";
+
+const EnergyCostRealtime = () => {
+  const [isPage1, setIsPage1] = useState(false);
+  const energyInfo = useSelector((state) => state.energy?.info);
+
+  // function handleClick() {
+  //   setIsPage1((pre) => !pre);
+  // }
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIsPage1(pre => !pre);
+    }, 10000);
+    
+    return () => {
+      clearInterval(timer);
+    }
+  }, []);
+  return (
+    <>
+      {/* <Arrow key="left" direction="left" onClick={handleClick} />
+      <Arrow key="right" direction="right" onClick={handleClick} /> */}
+      {isPage1 && (
+        <div className={`${cls.cost__info} flex`}>
+          <div className={`${cls.info__item_groups_col1}`}>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                余热发电(昨日)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
+              </span>
+            </div>
+
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                余热发电(总量)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh
+              </span>
+            </div>
+          </div>
+          <div className={cls.info__item_groups}>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                水耗量(昨日)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
+              </span>
+            </div>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                天然气I(累计)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {energyInfo?.ngQty1 || "0Nm³"}
+              </span>
+            </div>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                电耗量(昨日)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+              </span>
+            </div>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                天然气II(累计)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {energyInfo?.ngQty2 || "0Nm³"}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+      {!isPage1 && (
+        <div className={cls.energy_info_new}>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              智慧能源光伏发电(昨日)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty6)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              许昌安彩光伏发电(昨日)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty7)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              智慧能源光伏发电(总量)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty4)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              许昌安彩光伏发电(总量)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty5)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default EnergyCostRealtime;
--- a/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
@@ -0,0 +1,60 @@
+.cost__info {
+  margin-top: 4px;
+  margin-bottom: 6px;
+  // margin-bottom: 12px;
+}
+
+.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);
+  font-size: 14px;
+  line-height: 28px;
+  padding-left: 12px;
+  padding: 8px 0;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hAuto {
+  height: auto;
+}
+
+.info__item_groups {
+  flex: 2;
+  margin-left: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.info__item_groups_col1 {
+  flex: 1;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: 8px;
+}
+
+.energy_info_new {
+  color: #fff;
+  display: grid;
+  gap: 8px;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  height: 162px;
+  padding: 4px 0;
+}
+
+.energy_info_new > div {
+  border-radius: 2px;
+  box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
+  font-size: 14px;
+  line-height: 28px;
+  color: hsl(0, 0%, 100%, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/components/Common/Energy/EnergyCostChart/index.jsx
+++ b/src/components/Common/Energy/EnergyCostChart/index.jsx
@@ -1,128 +1,151 @@
-import cls from './index.module.css';
-import { randomInt } from '../../../../utils';
-import * as echarts from 'echarts';
-import { Switch, Radio } from 'antd';
-import ReactECharts from 'echarts-for-react';
+import cls from "./index.module.css";
+import { Radio, Select } from "antd";
+import ReactECharts from "echarts-for-react";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { getOptions } from "../../../../utils/energeChartOption";
+import triangle from "../../../../assets/Icon/triangle.svg";
+import dayjs from "dayjs";

 const EnergyCostChart = (props) => {
-	const options = {
-		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 32, right: 12, bottom: 20, left: 48 },
-		xAxis: {
-			type: 'category',
-			data: Array(7)
-				.fill(1)
-				.map((_, index) => {
-					const today = new Date();
-					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-						dtimestamp,
-					).getDate()}`;
-				})
-				.reverse(),
-			axisLabel: {
-				color: '#fff',
-				fontSize: 12,
-			},
-			axisTick: { show: false },
-			axisLine: {
-				lineStyle: {
-					width: 1,
-					color: '#213259',
-				},
-			},
-		},
-		yAxis: {
-			name: '单位/m³',
-			nameTextStyle: {
-				color: '#fff',
-				fontSize: 10,
-				align: 'right',
-			},
-			type: 'value',
-			axisLabel: {
-				color: '#fff',
-				fontSize: 12,
-				formatter: '{value} %',
-			},
-			axisLine: {
-				show: true,
-				lineStyle: {
-					color: '#213259',
-				},
-			},
-			splitLine: {
-				lineStyle: {
-					color: '#213259a0',
-				},
-			},
-			interval: 10,
-			min: 0,
-			max: 100,
-		},
-		series: [
-			{
-				data: Array(7)
-					.fill(1)
-					.map((_) => {
-						return randomInt(60, 100);
-					}),
-				type: 'line',
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#FFD16040' },
-						{ offset: 0.5, color: '#FFD16020' },
-						{ offset: 1, color: '#FFD16010' },
-					]),
-				},
-				// smooth: true,
-			},
-		],
-		tooltip: {
-			trigger: 'axis',
-		},
-	};
+  const elecTrend = useSelector((state) => state.energy.trend.elec);
+  const gasITrend = useSelector((state) => state.energy.trend.natGas1);
+  const gasIITrend = useSelector((state) => state.energy.trend.natGas2);
+  const [source, setSource] = useState("elec");
+  const [period, setPeriod] = useState("week");

-	function handleSwitchChange(val) {
-		// val: boolean
-		console.log('switch change', val);
-	}
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );

-	return (
-		<div className={cls.energyCostChart}>
-			<div className={cls.titleBar}>
-				<h2>能耗趋势图</h2>
-				<Switch defaultChecked onChange={handleSwitchChange} />
-				<div className={cls.legend}>
-					<span className="legend__title">班次详情</span>
-					<ul className="legend__list">
-						<li>总量</li>
-					</ul>
-				</div>
-				<Radio.Group
-					defaultValue="week"
-					buttonStyle="solid"
-					className={cls.radioGroup}
-				>
-					<Radio.Button value="day" className="radio-group__item">
-						日
-					</Radio.Button>
-					<Radio.Button value="week" className="radio-group__item">
-						周
-					</Radio.Button>
-					<Radio.Button value="month" className="radio-group__item">
-						月
-					</Radio.Button>
-					<Radio.Button value="year" className="radio-group__item">
-						年
-					</Radio.Button>
-				</Radio.Group>
-			</div>
-			<div className="flex-1">
-				<ReactECharts option={options} style={{ height: '180px' }} />
-			</div>
-		</div>
-	);
+  const currentTrend =
+    source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
+
+  const options = getOptions(
+    period,
+    source,
+    currentTrend ?? { week: [], month: [], year: [] }
+  );
+
+  function handleDateChange(value) {
+    setPeriod(
+      {
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+    setTimestr(
+      {
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
+  }
+
+  return (
+    <div className={cls.energyCostChart}>
+      <div className={cls.titleBar}>
+        <h2>能耗趋势图</h2>
+      </div>
+
+      <div className={`${cls.choiceBar} flex items-center justify-between`}>
+        <Radio.Group
+          value={source}
+          buttonStyle="solid"
+          onChange={(v) => setSource(v.target.value)}
+          className={`${cls.radioGroup} flex items-center justify-between`}
+        >
+          <Radio.Button value="elec" className="radio-group__item">
+            电
+          </Radio.Button>
+          <Radio.Button value="gasi" className="radio-group__item">
+            天然气I
+          </Radio.Button>
+          <Radio.Button value="gasii" className="radio-group__item">
+            天然气II
+          </Radio.Button>
+        </Radio.Group>
+
+        {/* <Radio.Group
+          value={period}
+          buttonStyle="solid"
+          onChange={(v) => setPeriod(v.target.value)}
+          className={cls.radioGroup}
+        >
+          <Radio.Button value="week" className="radio-group__item">
+            周
+          </Radio.Button>
+          <Radio.Button value="month" className="radio-group__item">
+            月
+          </Radio.Button>
+          <Radio.Button value="year" className="radio-group__item">
+            年
+          </Radio.Button>
+        </Radio.Group> */}
+
+        <div className={cls.graphBaseDesc}>{timestr}</div>
+
+        <Select
+          defaultValue={"周"}
+          style={{ width: 60 }}
+          popupClassName="xc-date-selector-menu"
+          className={cls.radioGroupShort}
+          options={["周", "月", "年"].map((item) => ({
+            label: item,
+            value: item,
+          }))}
+          suffixIcon={<img src={triangle} alt="#" />}
+          notFoundContent={
+            <span
+              style={{
+                color: "#fff",
+                fontSize: "14px",
+                lineHeight: 1,
+                paddingLeft: "12px",
+              }}
+            >
+              - 无 -
+            </span>
+          }
+          onChange={(value, option) => handleDateChange(value)}
+        />
+      </div>
+
+      <div className="flex-1" style={{ marginTop: "8px" }}>
+        {options && (
+          <ReactECharts option={options} style={{ height: "180px" }} />
+        )}
+        {!options && (
+          <p
+            style={{
+              color: "#cccf",
+              fontSize: "20px",
+              userSelect: "none",
+              textAlign: "center",
+              paddingTop: "32px",
+            }}
+          >
+            暂无数据
+          </p>
+        )}
+      </div>
+    </div>
+  );
 };

 export default EnergyCostChart;
--- a/src/components/Common/Energy/EnergyCostChart/index.module.css
+++ b/src/components/Common/Energy/EnergyCostChart/index.module.css
@@ -1,85 +1,95 @@
 .energyCostChart {
-	height: 1px;
-	flex: 1;
-	padding-top: 8px;
+  height: 1px;
+  flex: 1;
+  padding-top: 8px;
 }
 .energyCostChart .titleBar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
 }
 .energyCostChart .titleBar h2 {
-	margin: 0;
-	font-size: 18px;
-	line-height: 32px;
-	letter-spacing: 1.2px;
-	color: #52fff8;
+  margin: 0;
+  font-size: 18px;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  color: #52fff8;
+}
+.graphBaseDesc {
+  margin: 0 12px;
+  line-height: 1;
+  color: #76fff9;
+  flex: 1;
 }

 .energyCostChart .titleBar .legend {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 .energyCostChart .titleBar .legend * {
-	font-size: 14px;
-	line-height: 14px;
-	color: #dff1fe;
+  font-size: 14px;
+  line-height: 14px;
+  color: #dff1fe;
 }

 .energyCostChart .titleBar .legend ul {
-	display: flex;
-	margin: 0;
-	margin-left: 8px;
-	padding: 0;
-	list-style: none;
-	align-items: center;
+  display: flex;
+  margin: 0;
+  margin-left: 8px;
+  padding: 0;
+  list-style: none;
+  align-items: center;
 }
 .energyCostChart .titleBar .legend ul li {
-	position: relative;
-	margin: 4px;
-	padding-left: 16px;
+  position: relative;
+  margin: 4px;
+  padding-left: 16px;
 }
 .energyCostChart .titleBar .legend ul li::before {
-	content: '';
-	position: absolute;
-	left: 2px;
-	top: 2px;
-	display: inline-block;
-	width: 12px;
-	height: 12px;
-	border-radius: 2px;
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
 }

 .energyCostChart .titleBar .legend ul li:first-child::before {
-	background-color: #ffd160;
+  background-color: #ffd160;
 }

 .energyCostChart .titleBar .legend ul li:nth-child(2)::before {
-	background-color: #12fff5;
+  background-color: #12fff5;
 }

 .energyCostChart .titleBar .legend ul li:nth-child(3)::before {
-	background-color: #2760ff;
+  background-color: #2760ff;
 }

 .radioGroup * {
-	border: none !important;
-	border-radius: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+}
+.radioGroupShort * {
+  border: none !important;
+  border-radius: 6px !important;
 }
 .radioGroup *:focus-within {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }

 .radioGroup *::before {
-	width: 0 !important;
+  width: 0 !important;
 }

 .radioGroup_button_wrapper {
-	color: #fff !important;
-	background: #03233c !important;
+  color: #fff !important;
+  background: #03233c !important;
 }

 .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
-	background: #02457e !important;
+  background: #02457e !important;
 }
--- a/src/components/Common/Energy/index.jsx
+++ b/src/components/Common/Energy/index.jsx
@@ -1,33 +1,22 @@
-import cls from './index.module.scss';
-import Container from '../../Container';
-import TechSplitline from '../TechSplitline';
-import EnergyCostChart from './EnergyCostChart';
+import cls from "./index.module.scss";
+import Container from "../../Container";
+import TechSplitline from "../TechSplitline";
+import EnergyCostChart from "./EnergyCostChart";
+import EnergyCostRealtime from "./EnergeCostRealtime";

 function EnergyCost(props) {
-	return (
-		<Container title="能耗" icon="charger" className={cls.energyCost}>
-			<div className={`flex flex-col`}>
-				<div className={`${cls.cost__info} flex`}>
-					<div
-						className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
-					>
-						<span>余 热 发 电</span>
-						<span>922kWh</span>
-					</div>
-					<div className={cls.info__item_groups}>
-						<div className={cls.info__item}>水 耗 量 : 32Km³</div>
-						<div className={cls.info__item}>天 然 气 I : 83m³</div>
-						<div className={cls.info__item}>电 耗 量 : 52kWh</div>
-						<div className={cls.info__item}>天 然 气 II: 32m³</div>
-					</div>
-				</div>

-				<TechSplitline />
+  return (
+    <Container title="能耗" icon="battery" className={cls.energyCost}>
+      <div className={`flex flex-col`}>
+        <EnergyCostRealtime />

-				<EnergyCostChart />
-			</div>
-		</Container>
-	);
+        <TechSplitline />
+
+        <EnergyCostChart />
+      </div>
+    </Container>
+  );
 }

 export default EnergyCost;
--- a/src/components/Common/Energy/index.module.scss
+++ b/src/components/Common/Energy/index.module.scss
@@ -2,7 +2,7 @@
 	background: url(../../../assets/energy.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-	height: 400px;
+	height: 460px;
 }

 .cost__info {
@@ -18,12 +18,9 @@
 	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;
+	font-size: 14px;
 	line-height: 40px;
-	text-align: center;
+	padding-left: 12px;
 	user-select: none;
 }

--- a/src/components/Common/FanInfo/index.jsx
+++ b/src/components/Common/FanInfo/index.jsx
@@ -1,46 +1,20 @@
 import GraphBase from "../../Common/GraphBase";
 import "./index.module.scss";
-
+import { useSelector } from "react-redux";
 import { ScrollBoard } from "@jiaminghi/data-view-react";

-function getRandomRow() {
-  const idx = Math.ceil(Math.random() * 100);
-  return [idx, `${idx}#风机`, Math.ceil(Math.random() * 2) - 1];
-}
-
-function getRandomRows(rows) {
-  return Array(rows)
-    .fill(0)
-    .map(() => getRandomRow());
-}
-
-// let data = [
-// 	[1, '1#风机', 1], // 1 正常 2 故障 0 离线
-// 	[2, '2#风机', 1],
-// 	[3, '3#风机', 1],
-// 	[4, '4#风机', 0],
-// 	[5, '5#风机', 1],
-// 	[6, '6#风机', 1],
-// 	[7, '7#风机', 0],
-// 	[8, '8#风机', 1],
-// 	[9, '9#风机', 1],
-// 	[10, '10#风机', 1],
-// ];
-
-// let header = ['序号', '风机名称', '故障情况'];
-
 function attachStyle(data) {
  return data.map((arr) => {
    return arr.map((item, index) => {
      if (index == arr.length - 1) {
        return `<div style="display: flex; align-items: center">
 							<span style="box-shadow: 0 0 4px 4px ${
-                item == 1 ? "#2760ff55" : "#a81b2655"
+                item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
              }; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
-          item == 1 ? "#2760ff" : "#a81b26"
-        }"></span><span style="color: ${item == 1 ? "#2760ff" : "#a81b26"}">${
-          item == 1 ? "正常" : "故障"
-        }</span></div>`;
+          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
+        }"></span><span style="color: ${
+          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
+        }">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
      }
      return `<span style='color: #fffa'>${item}</span>`;
    });
@@ -49,7 +23,17 @@ function attachStyle(data) {

 function FanInfo(props) {
  const rowNum = props.rows || 8;
-  let data = getRandomRows(100);
+  // 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
+  const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);
+
+  const data = Object.keys(fanInfo).map((key, index) => {
+    return [
+      index + 1,
+      key,
+      fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
+    ];
+  });
+  const dataRight = [...data.slice(rowNum), ...data.slice(0, rowNum)];

  let config = {
    headerBGC: "rgba(4, 44, 76, 0.3)",
@@ -60,11 +44,10 @@ function FanInfo(props) {
    ],
    oddRowBGC: "#042444",
    evenRowBGC: "#042c4c",
-    columnWidth: [70, 96],
+    // columnWidth: data.length > 12 ? [50, 136] : [88, 256],
+    columnWidth: [50, 136],
    rowNum,
-    // headerHeight: 40,
-    hoverPause: false,
-    // data: replaceStyle(data, 0.7),
+    hoverPause: true,
    data: attachStyle(data),
  };

@@ -78,7 +61,9 @@ function FanInfo(props) {
        className="flex"
        style={{
          display: "flex",
+          flex: 1,
          gap: "20px",
+          // gap: data.length > 12 ? "20px" : 0,
          height: "100%",
          position: "relative",
        }}
@@ -86,9 +71,15 @@ function FanInfo(props) {
        <div className="flex-1" style={{ flex: 1 }}>
          <ScrollBoard
            config={config}
-            style={{ width: "280px", height: "100%" }}
+            style={{
+              width: "280px",
+              // width: data.length > 12 ? "280px" : "100%",
+              height: "100%",
+            }}
          />
        </div>
+        {/* {data.length > 12 && (
+          <> */}
        <div
          className="verticalLine"
          style={{
@@ -103,10 +94,12 @@ function FanInfo(props) {
        ></div>
        <div className="flex-1" style={{ flex: 1 }}>
          <ScrollBoard
-            config={config}
+            config={{ ...config, data: attachStyle(dataRight) }}
            style={{ width: "280px", height: "100%" }}
          />
        </div>
+        {/* </>
+        )} */}
      </div>
    </GraphBase>
  );
--- a/src/components/Common/FanInfoStretch/index.jsx
+++ b/src/components/Common/FanInfoStretch/index.jsx
@@ -0,0 +1,248 @@
+import GraphBase from "../GraphBase";
+import "./index.module.scss";
+import { useSelector } from "react-redux";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+import { useMemo } from "react";
+
+function attachStyle(data) {
+  return data.map((arr) => {
+    return arr.map((item, index) => {
+      if (index == arr.length - 1) {
+        return `<div style="display: flex; align-items: center">
+							<span style="box-shadow: 0 0 4px 4px ${
+                item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
+              }; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
+          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
+        }"></span><span style="color: ${
+          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
+        }">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
+      }
+      return `<span style='color: #fffa'>${item}</span>`;
+    });
+  });
+}
+
+function FanInfo(props) {
+  // 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
+  const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);
+
+  const data = Object.keys(fanInfo).map((key, index) => {
+    return [
+      index + 1,
+      key,
+      fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
+    ];
+  });
+
+  const y61 = useMemo(
+    () => data.filter((item) => item[1].startsWith("1#")) || [],
+    [data]
+  );
+  const y62 = useMemo(
+    () => data.filter((item) => item[1].startsWith("2#")) || [],
+    [data]
+  );
+  const y63 = useMemo(
+    () => data.filter((item) => item[1].startsWith("3#")) || [],
+    [data]
+  );
+  const y64 = useMemo(
+    () => data.filter((item) => item[1].startsWith("4#")) || [],
+    [data]
+  );
+  const y65 = useMemo(
+    () => data.filter((item) => item[1].startsWith("5#")) || [],
+    [data]
+  );
+  const y66 = useMemo(() => [...y65.slice(5), ...y65.slice(0, 5)], [y65]);
+
+  let config = {
+    headerBGC: "rgba(4, 44, 76, 0.3)",
+    header: [
+      '<span style="color:#fff">序号<span/>',
+      '<span style="color:#fff">风机名称<span/>',
+      '<span style="color:#fff">故障情况<span/>',
+    ],
+    oddRowBGC: "#042444",
+    evenRowBGC: "#042c4c",
+    // columnWidth: data.length > 12 ? [50, 136] : [88, 256],
+    columnWidth: [50, 136],
+    rowNum: 6,
+    hoverPause: true,
+    data: [],
+  };
+
+  return (
+    <GraphBase
+      icon="kiln"
+      title="风机信息"
+      size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
+    >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateRows: "auto 2px auto 2px auto",
+          gap: "4px",
+          // height: "100%",
+          position: "relative",
+        }}
+      >
+        <div className="" style={{ display: "flex", gap: "8px" }}>
+          <div>
+            <h1
+              style={{
+                fontSize: "16px",
+                fontWeight: 400,
+                textAlign: "center",
+                letterSpacing: "2px",
+                color: "#fff",
+                background: "#012041",
+                padding: "4px 0",
+              }}
+            >
+              产线Y61
+            </h1>
+            <ScrollBoard
+              key="y61"
+              config={{ ...config, data: attachStyle(y61) }}
+              style={{
+                width: "280px",
+                height: "280px",
+              }}
+            />
+          </div>
+          <div>
+            <h1
+              style={{
+                fontSize: "16px",
+                fontWeight: 400,
+                textAlign: "center",
+                letterSpacing: "2px",
+                color: "#fff",
+                background: "#012041",
+                padding: "4px 0",
+              }}
+            >
+              产线Y62
+            </h1>
+            <ScrollBoard
+              key="y62"
+              config={{ ...config, data: attachStyle(y62) }}
+              style={{
+                width: "280px",
+                height: "280px",
+              }}
+            />
+          </div>
+        </div>
+
+        <div
+          className="horizontalLine"
+          style={{
+            height: "2px",
+            background:
+              "radial-gradient(ellipse, #15E8F563, #15E8F599, transparent,  transparent)",
+          }}
+        ></div>
+
+        <div className="" style={{ display: "flex", gap: "8px" }}>
+          <div>
+            <h1
+              style={{
+                fontSize: "16px",
+                fontWeight: 400,
+                textAlign: "center",
+                letterSpacing: "2px",
+                color: "#fff",
+                background: "#012041",
+                padding: "4px 0",
+              }}
+            >
+              产线Y63
+            </h1>
+            <ScrollBoard
+              key="y63"
+              config={{ ...config, data: attachStyle(y63) }}
+              style={{
+                width: "280px",
+                height: "280px",
+              }}
+            />
+          </div>
+          <div>
+            {/* <div style={{ display: "flex", flexDirection: "column" }}> */}
+            <h1
+              style={{
+                fontSize: "16px",
+                fontWeight: 400,
+                textAlign: "center",
+                letterSpacing: "2px",
+                color: "#fff",
+                background: "#012041",
+                padding: "4px 0",
+              }}
+            >
+              产线Y64
+            </h1>
+            <ScrollBoard
+              key="y64"
+              config={{ ...config, data: attachStyle(y64) }}
+              style={{
+                width: "280px",
+                height: "280px",
+              }}
+            />
+          </div>
+        </div>
+
+        <div
+          className="horizontalLine"
+          style={{
+            height: "2px",
+            background:
+              "radial-gradient(ellipse, #15E8F563, #15E8F599, transparent,  transparent)",
+          }}
+        ></div>
+
+        <div
+          className=""
+          style={{ height: "240px", display: "flex", flexDirection: "column" }}
+        >
+          <h1
+            style={{
+              fontSize: "16px",
+              fontWeight: 400,
+              textAlign: "center",
+              letterSpacing: "2px",
+              color: "#fff",
+              background: "#012041",
+              padding: "4px 0",
+            }}
+          >
+            产线Y65
+          </h1>
+          <div style={{ flex: 1, height: "1px", display: "flex", gap: "4px" }}>
+            <ScrollBoard
+              key="y65"
+              config={{ ...config, data: attachStyle(y65), rowNum: 5 }}
+              style={{
+                width: "280px",
+                height: "220px",
+              }}
+            />
+            <ScrollBoard
+              key="y66"
+              config={{ ...config, data: attachStyle(y66), rowNum: 5 }}
+              style={{
+                width: "280px",
+                height: "220px",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </GraphBase>
+  );
+}
+
+export default FanInfo;
--- a/src/components/Common/FanInfoStretch/index.module.scss
+++ b/src/components/Common/FanInfoStretch/index.module.scss
@@ -0,0 +1,50 @@
+.CenterChart1itemDetailBorder {
+	width: 100%;
+	height: 240px;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+
+	background-color: rgba(4, 44, 76, 0.2);
+	.CenterChart1itemTXT {
+		width: 100%;
+		height: 10%;
+		font-size: 20px;
+		color: rgba(255, 255, 255, 0.8);
+		text-align: center;
+		margin-top: 2%;
+	}
+	.CenterChart1itemContainer {
+		width: 95%;
+		height: 100px;
+		position: relative;
+
+		.CenterFormitemDetailBorderLine1 {
+			width: 1px;
+			height: 200px;
+			background-color: #041c2c;
+			float: left;
+			margin-left: 18%;
+			z-index: 10;
+			position: absolute;
+		}
+		.CenterFormitemDetailBorderLine2 {
+			width: 1px;
+			height: 200px;
+			background-color: #041c2c;
+			float: left;
+			margin-left: 46%;
+			z-index: 10;
+			position: absolute;
+		}
+		.CenterFormitemDetailBorderLine3 {
+			width: 1px;
+			height: 200px;
+			background-color: #041c2c;
+			float: left;
+			margin-left: 72%;
+			z-index: 10;
+			position: absolute;
+		}
+	}
+}
--- a/src/components/Common/FanRunFrequence/index.jsx
+++ b/src/components/Common/FanRunFrequence/index.jsx
@@ -1,20 +1,71 @@
 // FanRunFrequence
 import cls from "./index.module.css";
-import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
-import { Switch } from "antd";
 import GraphBase from "../../Common/GraphBase";
-import { useState, useContext } from "react";
-// import SocketContext from '../../../store/socket-data-provider';
+import { useState } from "react";
+import { useSelector } from "react-redux";

 function WindFrequence(props) {
-  const [showChart, setShowChart] = useState(true);
-  // const { runState, hisState } = useContext(SocketContext);
+  const [showChart, setShowChart] = useState(false);
+  const runState = useSelector((state) => state.fanFrequence.runtime);
+  const hisState = useSelector((state) => state.fanFrequence.history);

-  const runState = null;
-  const hisState = null;
+  const [options, dataList] = getOptions(showChart, hisState, runState);

-  let dataList = [];
+  function handleSwitchChange(val) {
+    if (val) {
+      setShowChart(true);
+    } else {
+      setShowChart(false);
+    }
+  }
+  return (
+    <GraphBase
+      icon="smoke"
+      title="风机运行频率"
+      size={["middle", "long"]}
+      switchOptions={false}
+      switchPosition={[null, 200]} // [top, left]
+      onSwitch={handleSwitchChange}
+    >
+      <div className={cls.chart}>
+        {/* {showChart && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )} */}
+        {!showChart && (
+          <div className={cls.gridList}>
+            {dataList.map((item) => (
+              <div
+                key={item.id}
+                className={cls.listItem}
+                style={{ padding: props.stretch ? "16px 0" : "" }}
+              >
+                <span className={cls.fanName}>{item.name}</span>
+                <span
+                  className={cls.fanValue}
+                  style={{
+                    fontWeight: 700,
+                    letterSpacing: 1,
+                    fontSize: 16,
+                    // color: "#e03537",
+                    color: "#24aebb",
+                  }}
+                >
+                  {item.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </GraphBase>
+  );
+}
+
+export default WindFrequence;
+
+function getOptions(showChart, hisState, runState) {
+  let dataList = null;
  let seriesData = [];
  const colors = [
    "#12FFF5",
@@ -29,20 +80,15 @@ function WindFrequence(props) {
  let options = null;
  if (showChart) {
    // keys() 结果不是按照顺序，需要 sort()
-    seriesData = hisState?.combustionAir
-      ? Object.keys(hisState.combustionAir)
-          .sort()
-          .map((key) => hisState.combustionAir[key])
-      : Array(8)
-          .fill(1)
-          .map((_) => Array(7).fill(0));
+    seriesData =
+      hisState != null
+        ? Object.keys(hisState)
+            .sort()
+            .map((key) => hisState[key])
+        : Array(8)
+            .fill(1)
+            .map((_) => Array(7).fill(0));

-    // debug
-    console.log(
-      "助燃风 chart series data",
-      hisState?.combustionAir,
-      seriesData
-    );
    options = {
      color: colors,
      grid: { top: 32, right: 12, bottom: 20, left: 48 },
@@ -104,9 +150,10 @@ function WindFrequence(props) {
        symbol: "circle",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: colors[i] + "40" },
-            { offset: 0.5, color: colors[i] + "20" },
-            { offset: 1, color: colors[i] + "00" },
+            // i % 8 避免超过8个数据时无颜色的问题
+            { offset: 0, color: colors[i % 8] + "40" },
+            { offset: 0.5, color: colors[i % 8] + "20" },
+            { offset: 1, color: colors[i % 8] + "00" },
          ]),
        },
      })),
@@ -115,80 +162,32 @@ function WindFrequence(props) {
      },
    };
  } else {
-    dataList = runState?.combustionAirPressureArr
-      ? [
-          { id: 1, name: "1#风机", value: "0m³/h" },
-          { id: 2, name: "2#风机", value: "0m³/h" },
-          { id: 3, name: "3#风机", value: "0m³/h" },
-          { id: 4, name: "4#风机", value: "0m³/h" },
-          { id: 5, name: "5#风机", value: "0m³/h" },
-          { id: 6, name: "6#风机", value: "0m³/h" },
-          { id: 7, name: "7#风机", value: "0m³/h" },
-          { id: 8, name: "8#风机", value: "0m³/h" },
-          { id: 9, name: "9#风机", value: "0m³/h" },
-          { id: 10, name: "10#风机", value: "0m³/h" },
-          { id: 11, name: "11#风机", value: "0m³/h" },
-          { id: 12, name: "12#风机", value: "0m³/h" },
-          { id: 13, name: "13#风机", value: "0m³/h" },
-          { id: 14, name: "14#风机", value: "0m³/h" },
-          { id: 15, name: "15#风机", value: "0m³/h" },
-          { id: 16, name: "16#风机", value: "0m³/h" },
-        ].map((item, index) => ({
-          ...item,
-          value: runState.combustionAirPressureArr[index] ?? "/",
-        }))
-      : [
-          { id: 1, name: "1#风机", value: "0m³/h" },
-          { id: 2, name: "2#风机", value: "0m³/h" },
-          { id: 3, name: "3#风机", value: "0m³/h" },
-          { id: 4, name: "4#风机", value: "0m³/h" },
-          { id: 5, name: "5#风机", value: "0m³/h" },
-          { id: 6, name: "6#风机", value: "0m³/h" },
-          { id: 7, name: "7#风机", value: "0m³/h" },
-          { id: 8, name: "8#风机", value: "0m³/h" },
-          { id: 9, name: "9#风机", value: "0m³/h" },
-          { id: 10, name: "10#风机", value: "0m³/h" },
-          { id: 11, name: "11#风机", value: "0m³/h" },
-          { id: 12, name: "12#风机", value: "0m³/h" },
-          { id: 13, name: "13#风机", value: "0m³/h" },
-          { id: 14, name: "14#风机", value: "0m³/h" },
-          { id: 15, name: "15#风机", value: "0m³/h" },
-          { id: 16, name: "16#风机", value: "0m³/h" },
-        ];
+    dataList =
+      runState != null
+        ? Object.keys(runState).map((fan) => ({
+            id: Math.random(),
+            name: fan,
+            value: (+runState[fan])?.toFixed(2),
+          }))
+        : [
+            { id: 1, name: "1#风机", value: "0m³/h" },
+            { id: 2, name: "2#风机", value: "0m³/h" },
+            { id: 3, name: "3#风机", value: "0m³/h" },
+            { id: 4, name: "4#风机", value: "0m³/h" },
+            { id: 5, name: "5#风机", value: "0m³/h" },
+            { id: 6, name: "6#风机", value: "0m³/h" },
+            { id: 7, name: "7#风机", value: "0m³/h" },
+            { id: 8, name: "8#风机", value: "0m³/h" },
+            { id: 9, name: "9#风机", value: "0m³/h" },
+            { id: 10, name: "10#风机", value: "0m³/h" },
+            { id: 11, name: "11#风机", value: "0m³/h" },
+            { id: 12, name: "12#风机", value: "0m³/h" },
+            { id: 13, name: "13#风机", value: "0m³/h" },
+            { id: 14, name: "14#风机", value: "0m³/h" },
+            { id: 15, name: "15#风机", value: "0m³/h" },
+            { id: 16, name: "16#风机", value: "0m³/h" },
+          ];
  }

-  function handleSwitchChange(val) {
-    if (val) {
-      setShowChart(true);
-    } else {
-      setShowChart(false);
-    }
-  }
-  return (
-    <GraphBase
-      icon="kiln"
-      title="风机运行频率"
-      size={["middle", "long"]}
-      switchOptions={true}
-      switchPosition={[null, 200]} // [top, left]
-      onSwitch={handleSwitchChange}
-    >
-      <div className={cls.chart}>
-        {showChart && (
-          <ReactECharts option={options} style={{ height: "100%" }} />
-        )}
-        {!showChart && (
-          <div className={cls.gridList}>
-            {dataList.map((item) => (
-              <div key={item.id} className={cls.listItem}>
-                {item.name}: {item.value}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </GraphBase>
-  );
+  return [options, dataList];
 }
-
-export default WindFrequence;
--- a/src/components/Common/FanRunFrequence/index.module.css
+++ b/src/components/Common/FanRunFrequence/index.module.css
@@ -1,33 +1,52 @@
 .chart {
-	height: 100%;
+  height: 100%;
 }

 .gridList {
-	margin-top: 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	/* grid-auto-row: ; */
-	gap: 6px;
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* grid-auto-row: ; */
+  gap: 6px;
 }

 .listItem {
-	border-radius: 2px;
-	padding: 9px 0;
-	text-align: center;
-	color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  border-radius: 2px;
+  padding: 10px 0;
+  text-align: center;
+  color: #fff;
+  box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
+
 .headWidget {
-	position: absolute;
-	top: 22px;
-	right: 24px;
-	height: 32px;
-	width: 410px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	color: #fff;
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  height: 32px;
+  width: 410px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: #fff;
 }
 .relative {
-	position: relative;
+  position: relative;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.fanName {
+  text-align: right;
+  flex: 7;
+}
+
+.fanValue {
+  flex: 3;
+  text-align: left;
 }
--- a/src/components/Common/Feeder/feeder.css
+++ b/src/components/Common/Feeder/feeder.css
@@ -0,0 +1,16 @@
+.feeder {
+    flex: 1;
+}
+
+.feeder-running {
+    background: url(../../../assets/online.png);
+    background-size: 100% 100%;
+}
+.feeder-stop {
+    background: url(../../../assets/offline.png);
+    background-size: 100% 100%;
+}
+.feeder-error {
+    background: url(../../../assets/offline.png);
+    background-size: 100% 100%;
+}
--- a/src/components/Common/Feeder/index.jsx
+++ b/src/components/Common/Feeder/index.jsx
@@ -0,0 +1,104 @@
+import { useSelector } from "react-redux";
+import { motion } from "framer-motion";
+import "./feeder.css";
+
+function FeederStatus(props) {
+  const feeder = useSelector((state) => state.feeder);
+  const rightFeeder = feeder.rightFeeder;
+  const leftFeeder = feeder.leftFeeder;
+  return (
+    <motion.div
+      className="feeder"
+      style={{
+        position: "absolute",
+        bottom: "56px",
+        left: "740px",
+        width: "400px",
+        height: "128px",
+        zIndex: "-1",
+        display: "flex",
+        gap: "8px",
+        paddingTop: "12px",
+        justifyContent: "center",
+        ...props.style,
+      }}
+      animate={{
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 2 },
+      }}
+    >
+      <span
+        style={{
+          position: "absolute",
+          color: "#6be1e1",
+          top: "-32px",
+          left: "20px",
+          fontSize: "22px",
+        }}
+      >
+        1#投料{" "}
+        <b
+          style={{
+            fontWeight: 400,
+            color:
+              leftFeeder == "故障"
+                ? "#f83a35"
+                : leftFeeder == "运行"
+                ? "#9af72b"
+                : "#ccc",
+          }}
+        >
+          {leftFeeder}
+        </b>
+      </span>
+      <span
+        style={{
+          position: "absolute",
+          color: "#6be1e1",
+          top: "-32px",
+          left: "230px",
+          fontSize: "22px",
+        }}
+      >
+        2#投料{" "}
+        <b
+          style={{
+            fontWeight: 400,
+            color:
+              rightFeeder == "故障"
+                ? "#f83a35"
+                : rightFeeder == "运行"
+                ? "#9af72b"
+                : "#ccc",
+          }}
+        >
+          {rightFeeder}
+        </b>
+      </span>
+      <span
+        className={`
+        feeder ${
+          leftFeeder == "运行"
+            ? "feeder-running"
+            : leftFeeder == "故障"
+            ? "feeder-error"
+            : "feeder-stop"
+        }
+        `}
+      ></span>
+      <span
+        className={`
+          feeder ${
+            rightFeeder == "运行"
+              ? "feeder-running"
+              : rightFeeder == "故障"
+              ? "feeder-error"
+              : "feeder-stop"
+          }
+          `}
+      ></span>
+    </motion.div>
+  );
+}
+
+export default FeederStatus;
--- 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/GasFlow/index.jsx
+++ b/src/components/Common/GasFlow/index.jsx
@@ -1,187 +1,223 @@
 // 助燃风流量
-import cls from './index.module.css';
-import BottomBarItem from '../BottomItemBackground';
-import ReactECharts from 'echarts-for-react';
-import * as echarts from 'echarts';
-import { randomInt } from '../../../utils';
-import { Switch } from 'antd';
-import { useState, useContext } from 'react';
-// import SocketContext from '../../../store/socket-data-provider';
+import cls from "./index.module.css";
+import BottomBarItem from "../BottomItemBackground";
+import ReactECharts from "echarts-for-react";
+import * as echarts from "echarts";
+import { Switch } from "antd";
+import { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import dayjs from "dayjs";

+/** 助燃风流量 */
 function GasI(props) {
-	const [showChart, setShowChart] = useState(true);
-	// const { runState, hisState } = useContext(SocketContext);
+  const [showChart, setShowChart] = useState(true);
+  const runState = useSelector((state) => state.combustionAir.runtime);
+  const hisState = useSelector((state) => state.combustionAir.history);

-	const runState = null;
-	const hisState = null;
+  let [options, dataList] = getOptions(showChart, hisState, runState);

-	let dataList = [];
-	let seriesData = [];
-	const colors = [
-		'#12FFF5',
-		'#2760FF',
-		'#FFD160',
-		'#E80091',
-		'#8064ff',
-		'#ff8a3b',
-		'#8cd26d',
-		'#2aa1ff',
-	];
-	let options = null;
-	if (showChart) {
-		// keys() 结果不是按照顺序，需要 sort()
-		seriesData = hisState?.combustionAir
-			? Object.keys(hisState.combustionAir)
-					.sort()
-					.map((key) => hisState.combustionAir[key])
-			: Array(8)
-					.fill(1)
-					.map((_) => Array(7).fill(0));
+  function handleSwitchChange(val) {
+    if (val) {
+      setShowChart(true);
+    } else {
+      setShowChart(false);
+    }
+  }

-		// debug
-		console.log(
-			'助燃风 chart series data',
-			hisState?.combustionAir,
-			seriesData,
-		);
-		options = {
-			color: colors,
-			grid: { top: 32, right: 12, bottom: 20, left: 48 },
-			xAxis: {
-				type: 'category',
-				data: Array(7)
-					.fill(1)
-					.map((_, index) => {
-						const today = new Date();
-						const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-						return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-							dtimestamp,
-						).getDate()}`;
-					})
-					.reverse(),
-				axisLabel: {
-					color: '#fff',
-					fontSize: 12,
-				},
-				axisTick: { show: false },
-				axisLine: {
-					lineStyle: {
-						width: 1,
-						color: '#213259',
-					},
-				},
-			},
-			yAxis: {
-				name: '单位/m³',
-				nameTextStyle: {
-					color: '#fff',
-					fontSize: 10,
-					align: 'right',
-				},
-				type: 'value',
-				axisLabel: {
-					color: '#fff',
-					fontSize: 12,
-				},
-				axisLine: {
-					show: true,
-					lineStyle: {
-						color: '#213259',
-					},
-				},
-				splitLine: {
-					lineStyle: {
-						color: '#213259a0',
-					},
-				},
-				// interval: 10,
-				// min: 0,
-				// max: 100,
-			},
-			series: seriesData.map((v, i) => ({
-				name: i + 1 + '#助燃风',
-				data: v,
-				type: 'line',
-				symbol: 'circle',
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: colors[i] + '40' },
-						{ offset: 0.5, color: colors[i] + '20' },
-						{ offset: 1, color: colors[i] + '00' },
-					]),
-				},
-			})),
-			tooltip: {
-				trigger: 'axis',
-			},
-		};
-	} else {
-		dataList = runState?.combustionAirPressureArr
-			? [
-					{ id: 1, name: '1#助燃风', value: '0m³/h' },
-					{ id: 2, name: '2#助燃风', value: '0m³/h' },
-					{ id: 3, name: '3#助燃风', value: '0m³/h' },
-					{ id: 4, name: '4#助燃风', value: '0m³/h' },
-					{ id: 5, name: '5#助燃风', value: '0m³/h' },
-					{ id: 6, name: '6#助燃风', value: '0m³/h' },
-					{ id: 7, name: '7#助燃风', value: '0m³/h' },
-					{ id: 8, name: '8#助燃风', value: '0m³/h' },
-			  ].map((item, index) => ({
-					...item,
-					value: runState.combustionAirPressureArr[index] ?? '/',
-			  }))
-			: [
-					{ id: 1, name: '1#助燃风', value: '0m³/h' },
-					{ id: 2, name: '2#助燃风', value: '0m³/h' },
-					{ id: 3, name: '3#助燃风', value: '0m³/h' },
-					{ id: 4, name: '4#助燃风', value: '0m³/h' },
-					{ id: 5, name: '5#助燃风', value: '0m³/h' },
-					{ id: 6, name: '6#助燃风', value: '0m³/h' },
-					{ id: 7, name: '7#助燃风', value: '0m³/h' },
-					{ id: 8, name: '8#助燃风', value: '0m³/h' },
-			  ];
-		// debug
-		console.log('助燃风 实时 data', runState?.combustionAirPressureArr);
-	}
+  const desc =
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+    " - " +
+    dayjs().subtract(1, "day").format("YYYY.MM.DD");

-	function handleSwitchChange(val) {
-		if (val) {
-			setShowChart(true);
-		} else {
-			setShowChart(false);
-		}
-	}
-	return (
-		<BottomBarItem
-			icon="pause"
-			title="助燃风流量"
-			className={cls.gas}
-			style={props.style}
-		>
-			<div className={cls.headWidget}>
-				<div className="flex items-center">
-					<Switch size="small" defaultChecked onChange={handleSwitchChange} />
-					{showChart && <span className={cls.switchLabel}>历史详情</span>}
-					{!showChart && <span className={cls.switchLabel}>实时流量</span>}
-				</div>
-			</div>
+  return (
+    <BottomBarItem
+      icon="pause"
+      title="助燃风流量"
+      desc={desc}
+      className={cls.gas}
+      style={props.style}
+    >
+      <div className={cls.headWidget}>
+        <div className="flex items-center">
+          <Switch size="small" defaultChecked onChange={handleSwitchChange} />
+          {showChart && <span className={cls.switchLabel}>历史详情</span>}
+          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
+        </div>
+      </div>

-			<div className={cls.chart}>
-				{showChart && (
-					<ReactECharts option={options} style={{ height: '100%' }} />
-				)}
-				{!showChart && (
-					<div className={cls.gridList}>
-						{dataList.map((item) => (
-							<div key={item.id} className={cls.listItem}>
-								{item.name}: {item.value}
-							</div>
-						))}
-					</div>
-				)}
-			</div>
-		</BottomBarItem>
-	);
+      <div className={cls.chart}>
+        {showChart && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )}
+        {!showChart && (
+          <div className={cls.gridList}>
+            {dataList.map((item) => (
+              <div key={item.id} className={cls.listItem}>
+                <span className={cls.item_label}>{item.name}</span>
+                <span className={cls.item_value}>{item.value}</span>
+                {/* {item.name}: {item.value} */}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </BottomBarItem>
+  );
 }

 export default GasI;
+
+function getOptions(showChart, hisState, runState) {
+  const colors = [
+    "#12FFF5",
+    "#2760FF",
+    "#FFD160",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  let seriesData = null;
+  let dataList = null;
+  let options = null;
+
+  if (showChart) {
+    // keys() 结果不是按照顺序，需要 sort()
+    seriesData =
+      hisState != null
+        ? Object.keys(hisState)
+            .sort()
+            .map((key) => hisState[key])
+        : Array(8)
+            .fill(1)
+            .map((_) => Array(7).fill(0));
+
+    options = {
+      color: colors,
+      grid: { top: 36, right: 12, bottom: 20, left: 48 },
+      legend: {
+        show: true,
+        icon: "roundRect",
+        top: 10,
+        right: 10,
+        padding: 0,
+        itemWidth: 8,
+        itemHeight: 8,
+        itemGap: 3,
+        height: 8,
+        textStyle: {
+          color: "#DFF1FE",
+          fontSize: 10,
+        },
+      },
+      xAxis: {
+        type: "category",
+        data: Array(7)
+          .fill(1)
+          .map((_, index) => {
+            const today = new Date();
+            const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+              dtimestamp
+            ).getDate()}`;
+          })
+          .reverse(),
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+        },
+        axisTick: { show: false },
+        axisLine: {
+          lineStyle: {
+            width: 1,
+            color: "#213259",
+          },
+        },
+      },
+      yAxis: {
+        name: "单位m³/h",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 10,
+          align: "right",
+        },
+        type: "value",
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#213259",
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#213259a0",
+          },
+        },
+        // interval: 10,
+        // min: 0,
+        // max: 100,
+      },
+      series: seriesData.map((v, i) => ({
+        name: i + 1 + "#流量",
+        data: v,
+        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
+        // label: {
+        //   show: true,
+        //   position: "top",
+        //   distance: 10,
+        //   color: "#fffc",
+        // },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colors[i % colors.length] + "40" },
+            { offset: 0.5, color: colors[i % colors.length] + "20" },
+            { offset: 1, color: colors[i % colors.length] + "00" },
+          ]),
+        },
+      })),
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        className: "xc-chart-tooltip",
+        // backgroundColor: ''
+      },
+    };
+  } else {
+    dataList =
+      runState != null
+        ? [
+            { id: 1, name: "1#助燃风流量", value: "0m³/h" },
+            { id: 2, name: "2#助燃风流量", value: "0m³/h" },
+            { id: 3, name: "3#助燃风流量", value: "0m³/h" },
+            { id: 4, name: "4#助燃风流量", value: "0m³/h" },
+            { id: 5, name: "5#助燃风流量", value: "0m³/h" },
+            { id: 6, name: "6#助燃风流量", value: "0m³/h" },
+            { id: 7, name: "7#助燃风流量", value: "0m³/h" },
+            { id: 8, name: "8#助燃风流量", value: "0m³/h" },
+          ].map((item, index) => ({
+            ...item,
+            value: runState[index] ?? "/",
+          }))
+        : [
+            { id: 1, name: "1#助燃风流量", value: "0m³/h" },
+            { id: 2, name: "2#助燃风流量", value: "0m³/h" },
+            { id: 3, name: "3#助燃风流量", value: "0m³/h" },
+            { id: 4, name: "4#助燃风流量", value: "0m³/h" },
+            { id: 5, name: "5#助燃风流量", value: "0m³/h" },
+            { id: 6, name: "6#助燃风流量", value: "0m³/h" },
+            { id: 7, name: "7#助燃风流量", value: "0m³/h" },
+            { id: 8, name: "8#助燃风流量", value: "0m³/h" },
+          ];
+  }
+
+  return [options, dataList];
+}
--- a/src/components/Common/GasFlow/index.module.css
+++ b/src/components/Common/GasFlow/index.module.css
@@ -26,9 +26,10 @@
 	position: absolute;
 	/* background: #00ee33; */
 	top: 20px;
+	left: 180px;
 	right: 24px;
 	height: 32px;
-	width: 190px;
+	width: 128px;
 	text-align: right;
 }

@@ -62,7 +63,21 @@
 	padding: 12px 0;
 	text-align: center;
 	color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+	box-shadow: inset 0 0 12px 2px rgba(255, 255, 255, 0.197);
+
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.item_label {
+	flex: 5;
+	text-align: right;
+}
+
+.item_value {
+	flex: 4;
+	text-align: left;
 }

 .headWidget {
--- a/src/components/Common/GraphBase/index.jsx
+++ b/src/components/Common/GraphBase/index.jsx
@@ -1,124 +1,139 @@
 // TODO: 通用组件 - 按钮 菜单控制层
-import useIcon from '../../../hooks/useIcon';
-import cls from './index.module.css';
-import { useMemo, useState } from 'react';
-import { Switch, Radio } from 'antd';
+import useIcon from "../../../hooks/useIcon";
+import cls from "./index.module.css";
+import { useMemo, useState } from "react";
+import { Switch, Select } from "antd";
+import "./selector.style.overwrite.css";
+import triangle from "../../../assets/Icon/triangle.svg";

 function choseBg(size) {
-	const [width, height] = size;
-	return width === 'long' && height === 'middle'
-		? 'long-middle'
-		: width === 'long' && height === 'short'
-		? 'long-short'
-		: width === 'short' && height === 'middle'
-		? 'short-middle'
-		: width === 'short' && height === 'short'
-		? 'short-short'
-		: width === 'short' && height === 'long'
-		? 'short-long'
-		: width === 'middle' && height === 'middle'
-		? 'middle-middle'
-		: width === 'middle' && height === 'short'
-		? 'middle-short'
-		: width === 'middle' && height === 'long'
-		? 'middle-long'
-		: width === 'middle' && height === 'full'
-		? 'middle-full'
-		: 'middle-middle';
+  const [width, height] = size;
+  return width === "long" && height === "middle"
+    ? "long-middle"
+    : width === "long" && height === "short"
+    ? "long-short"
+    : width === "short" && height === "middle"
+    ? "short-middle"
+    : width === "short" && height === "short"
+    ? "short-short"
+    : width === "short" && height === "long"
+    ? "short-long"
+    : width === "middle" && height === "middle"
+    ? "middle-middle"
+    : width === "middle" && height === "short"
+    ? "middle-short"
+    : width === "middle" && height === "long"
+    ? "middle-long"
+    : width === "middle" && height === "full"
+    ? "middle-full"
+    : "middle-middle";
 }

 function GraphBase(props) {
-	const size = props.size || ['middle', 'middle'];
-	const bgClass = choseBg(size);
-	const {
-		icon,
-		title,
-		desc,
-		switchOptions,
-		onSwitch,
-		dateOptions,
-		onDateChange,
-		legend,
-	} = props;
-	const iconSrc = useIcon(icon);
-	const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
-	const [showChart, setShowChart] = useState(true);
+  const size = props.size || ["middle", "middle"];
+  const bgClass = choseBg(size);
+  const {
+    icon,
+    title,
+    desc,
+    switchOptions,
+    onSwitch,
+    dateOptions,
+    onDateChange,
+    defaultSelect,
+    selectWidth,
+    legend,
+  } = props;
+  const descSmall = props.descSmall || false;
+  const iconSrc = useIcon(icon);
+  const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
+  const [showChart, setShowChart] = useState(true);

-	let dto = null;
-	const switchStyle = {};
+  let dto = null;
+  const switchStyle = {};

-	if (props.switchPosition) {
-		props.switchPosition.forEach((item, index) => {
-			if (item != null) {
-				switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
-			}
-		});
-	}
-	if (dateOptions) {
-		dto = dateOptions.map((item) => (
-			<Radio.Button value={item} key={item} className="radio-group__item">
-				{item}
-			</Radio.Button>
-		));
-	}
+  if (props.switchPosition) {
+    props.switchPosition.forEach((item, index) => {
+      if (item != null) {
+        switchStyle[index == 0 ? "top" : "left"] = item + "px";
+      }
+    });
+  }

-	function handleSwitchChange(v) {
-		v ? setShowChart(true) : setShowChart(false);
-		onSwitch(v);
-	}
+  if (dateOptions) {
+    dto = (
+      <Select
+        defaultValue={defaultSelect || dateOptions[0]}
+        style={{ width: selectWidth || 60 }}
+        popupClassName="xc-date-selector-menu"
+        className={cls.graphBaseDate + " " + cls.radioGroup}
+        options={dateOptions.map((item) => ({ label: item, value: item }))}
+        suffixIcon={<img src={triangle} alt="#" />}
+        notFoundContent={
+          <span
+            style={{
+              color: "#fff",
+              fontSize: "calc(14px * var(--scale))",
+              lineHeight: 1,
+              paddingLeft: "calc(12px * var(--scale))",
+            }}
+          >
+            - 无 -
+          </span>
+        }
+        onChange={(value, option) => onDateChange(value)}
+      />
+    );
+  }

-	return (
-		<div
-			className={
-				'graph-base ' +
-				cls[bgClass] +
-				' ' +
-				cls.graphBase +
-				' ' +
-				props.className
-			}
-			style={{ ...props.style }}
-		>
-			<div className={cls.graphBaseTitle}>
-				<img src={iconSrc} alt="#" />
-				<h2>{title}</h2>
-			</div>
-			<div className={cls.graphBaseContent}>
-				{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
-				{switchOptions && (
-					<div className={cls.graphBaseSwitch} style={switchStyle}>
-						<Switch size="small" defaultChecked onChange={handleSwitchChange} />
-						{showChart && <span className={cls.switchLabel}>历史详情</span>}
-						{!showChart && <span className={cls.switchLabel}>实时流量</span>}
-					</div>
-				)}
-				{legend && showChart && (
-					<div className={cls.legend}>
-						{legend.map((item, index) => (
-							<div className={cls.legendItem} key={item}>
-								<span
-									className={cls.lengedItemPrefix}
-									style={{ backgroundColor: colors[index] }}
-								></span>
-								<span className={cls.legendItemLabel}>{item}</span>
-							</div>
-						))}
-					</div>
-				)}
-				{dateOptions && (
-					<Radio.Group
-						defaultValue={dateOptions[0]}
-						buttonStyle="solid"
-						className={cls.graphBaseDate + ' ' + cls.radioGroup}
-						onChange={({ target }) => onDateChange(target.value)}
-					>
-						{dto}
-					</Radio.Group>
-				)}
-				{props.children}
-			</div>
-		</div>
-	);
+  function handleSwitchChange(v) {
+    v ? setShowChart(true) : setShowChart(false);
+    onSwitch(v);
+  }
+
+  return (
+    <div
+      className={
+        "graph-base " +
+        cls[bgClass] +
+        " " +
+        cls.graphBase +
+        " " +
+        props.className
+      }
+      style={{ ...props.style }}
+    >
+      <div className={cls.graphBaseTitle}>
+        <img src={iconSrc} alt="#" />
+        <h2>{title}</h2>
+        {desc && <div className={`${cls.graphBaseDesc} ${descSmall ? cls.graphBaseDescSmall : ''}`}>{desc}</div>}
+      </div>
+      <div className={cls.graphBaseContent}>
+        {switchOptions && (
+          <div className={cls.graphBaseSwitch} style={switchStyle}>
+            <Switch size="small" defaultChecked onChange={handleSwitchChange} />
+            {showChart && <span className={cls.switchLabel}>历史详情</span>}
+            {!showChart && <span className={cls.switchLabel}>实时流量</span>}
+          </div>
+        )}
+        {legend && showChart && (
+          <div className={cls.legend}>
+            {legend.map((item, index) => (
+              <div className={cls.legendItem} key={item}>
+                <span
+                  className={cls.lengedItemPrefix}
+                  style={{ backgroundColor: colors[index] }}
+                ></span>
+                <span className={cls.legendItemLabel}>{item}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        {dateOptions && dto}
+        {props.children}
+      </div>
+    </div>
+  );
 }

 export default GraphBase;
--- a/src/components/Common/GraphBase/index.module.css
+++ b/src/components/Common/GraphBase/index.module.css
@@ -63,7 +63,7 @@
 }

 .graphBaseTitle > img {
-	width: 20px;
+	width: 24px;
 }

 .graphBaseTitle > h2 {
@@ -72,7 +72,7 @@
 		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
 	margin: 0;
 	margin-left: 6px;
-	font-size: 20px;
+	font-size: 22px;
 	color: #fff;
 	letter-spacing: 2px;
 	font-weight: 500;
@@ -85,13 +85,19 @@
 }

 .graphBaseDesc {
-	position: absolute;
+	margin-left: 8px;
+	/* position: absolute;
 	top: 25px;
-	left: 150px;
+	left: 150px; */
 	font-size: 19px;
 	color: #76fff9;
 }

+.graphBaseDescSmall {
+	font-size: 16px;
+	color: #76fff9;
+}
+
 .graphBaseSwitch {
 	position: absolute;
 	top: 30px;
@@ -114,7 +120,7 @@

 .radioGroup * {
 	border: none !important;
-	border-radius: 0 !important;
+	border-radius: 6px !important;
 }

 .radioGroup *:focus-within {
--- a/src/components/Common/GraphBase/selector.style.overwrite.css
+++ b/src/components/Common/GraphBase/selector.style.overwrite.css
@@ -0,0 +1,38 @@
+.xc-date-selector-menu {
+    background-color: #04233c !important;
+}
+
+.xc-date-selector-menu .ant-select-item {
+    color: #fff;
+    background: transparent;
+}
+
+.xc-date-selector-menu .ant-select-item-option-content {
+    text-align: center;
+    font-size: calc(14px * var(--scale));
+ }
+
+.xc-date-selector-menu .ant-select-item-option-selected {
+    color: #fff !important;
+    background-color: #02457E !important;
+}
+
+.ant-select-selector {
+    background-color: #02457E !important;
+    color: #fff !important;
+}
+
+.xc-date-selector-menu .ant-select-item-option {
+    /* padding: 5px 8px; */
+    padding: .3em .35em;
+    min-height: unset;
+}
+/* 
+.ant-select-selector::after {
+    content: '\25BC' !important;
+    visibility: visible !important; L
+    position: absolute;
+    top: 2px;
+    right: 22px;
+    color: #04233c;
+} */
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
juzi	bace9fa501	Merge pull request 'zjl' (#1 ) from zjl into features/warning Reviewed-on: #1	2024-07-12 15:11:34 +08:00
juzi	c6cd097433	1优化	2024-07-12 14:52:07 +08:00
juzi	4d7af62305	窑炉优化	2024-07-12 14:12:10 +08:00
juzi	214e9fe892	底&顶ok	2024-07-10 15:39:02 +08:00
juzi	9968280724	7.9	2024-07-09 14:50:29 +08:00
lb	8b4322996e	update 注释	2024-04-29 13:28:08 +08:00
lb	b325c3fc05	update 报警大小	2024-04-28 13:55:59 +08:00
lb	28c9c1906e	update 烟气处理	2024-04-25 11:04:52 +08:00
lb	7ddae1b3a4	update videos	2024-04-25 10:01:25 +08:00
lb	61477cdd30	Merge branch 'features/warning' of http://git.picaiba.com/mt-fe-group/xuchang-new into features/warning	2024-04-25 09:44:40 +08:00
lb	6e5badf01a	add video	2024-04-25 09:44:36 +08:00
gtz	311cdfc5f7	1'	2024-04-24 17:02:20 +08:00
lb	bc8b68e449	1	2024-04-24 16:58:38 +08:00
lb	024f4bcf14	1	2024-04-23 15:27:54 +08:00
lb	361aedd4ad	done alarm	2024-04-23 15:26:55 +08:00
lb	60c6fdda79	1	2024-04-23 11:24:31 +08:00
lb	15708c0eef	update	2024-04-23 09:33:41 +08:00
lb	2996c061dc	merge bugfix	2024-04-22 16:58:15 +08:00
lb	9894aeca50	update WarnAlert	2024-04-19 17:03:43 +08:00
lb	9f7652d9f3	update ts->js	2024-04-19 16:55:10 +08:00
lb	e854b966dc	add fake websocket server	2024-04-19 16:38:41 +08:00
lb	dff017a5a2	update	2024-04-19 16:11:10 +08:00
lb	e796a07e66	update Home Element Position	2024-04-16 10:28:14 +08:00
lb	43635ff398	add warn-alert	2024-04-15 16:18:21 +08:00
lb	19ea3287ae	Merge branch 'bugfix#4.4'	2024-04-15 13:51:16 +08:00
lb	4f6e4cbcf8	bugfix4.4	2024-04-15 13:50:49 +08:00
lb	c9ccc6ebcb	fire and kiln inner	2024-01-26 17:25:24 +08:00
lb	4374260acd	update lunbo	2024-01-26 17:19:39 +08:00
lb	6cf533e718	add 轮播功能	2024-01-26 14:08:31 +08:00
lb	b0e7a7ca34	update kiln inner	2024-01-26 11:11:26 +08:00
lb	0b48f68078	add refresher	2024-01-26 09:24:26 +08:00
lb	c767a7fe2e	update video playbackrate	2024-01-25 16:51:12 +08:00
lb	97409d61a9	1	2024-01-25 16:36:12 +08:00
lb	0da9ba434d	update video	2024-01-25 16:15:53 +08:00
lb	0bd1f8dcac	update energy cost page	2024-01-25 15:42:25 +08:00
lb	6e10a5aacd	update energy	2024-01-25 15:19:27 +08:00
lb	2fb3d05f8c	1	2024-01-25 10:55:22 +08:00
lb	b27a20f3cf	update rightbar	2024-01-25 10:24:08 +08:00
lb	be5fbe1c01	update	2024-01-25 09:10:00 +08:00
lb	d6f9744ded	1	2024-01-24 17:01:29 +08:00
lb	1ebda5cf6f	1	2024-01-24 16:13:45 +08:00
lb	b7b2ad2ee5	1	2024-01-24 15:39:42 +08:00
lb	446234c2aa	update	2024-01-24 14:41:24 +08:00
lb	909bd92ee6	update	2024-01-11 16:50:55 +08:00
lb	b16ee86def	bugfix 20240111	2024-01-11 16:03:33 +08:00
lb	c8d392ce51	update	2024-01-08 13:28:03 +08:00
lb	d1212c8729	update	2024-01-04 17:03:00 +08:00
lb	9d3c877628	update	2024-01-04 16:58:43 +08:00
lb	e1e73b341d	update	2024-01-04 16:44:15 +08:00
lb	ac772e2caf	fix ui	2024-01-04 10:58:20 +08:00
lb	0b1d3aa4b3	fix ui	2024-01-03 17:00:31 +08:00
lb	bee1aedda4	update	2024-01-03 15:21:43 +08:00
lb	678c1b86ed	update	2024-01-03 15:09:59 +08:00
lb	0f56538c27	update websocket reconnect policy & fix some bugs	2024-01-03 15:07:43 +08:00
lb	6b838ce089	update 天然气历史	2024-01-03 11:28:26 +08:00
lb	e40e897882	update	2024-01-02 17:07:07 +08:00
lb	15d05c26d8	update energe layout	2024-01-02 17:01:27 +08:00
lb	c9829d4f5a	update faninfostretch	2024-01-02 16:11:37 +08:00
lb	a32e6fb591	update	2024-01-02 14:34:35 +08:00
lb	4b043214ca	update elec	2024-01-02 10:53:43 +08:00
lb	871efd2eb2	update 能耗	2023-12-29 12:47:30 +08:00
lb	0cd25a6972	update right table	2023-12-29 12:33:25 +08:00
lb	a73d61fad8	update	2023-12-29 11:06:07 +08:00
lb	3f44cb9e9a	update	2023-12-29 09:31:33 +08:00
Melete	060616e845	fix error	2023-12-28 18:54:55 +08:00
lb	2722ca6122	update	2023-12-28 16:59:43 +08:00
lb	049a0804ac	update烟气	2023-12-28 16:16:31 +08:00
lb	4e73410495	update 能源，规格:	2023-12-28 15:16:23 +08:00
lb	c2802627d6	update 当前产线生产规格	2023-12-28 10:44:13 +08:00
lb	b57b65ffd4	update	2023-12-27 16:44:24 +08:00
lb	b35cf01fc8	update	2023-12-21 17:41:54 +08:00
lb	f6cbc3a34a	del test data	2023-12-20 09:15:12 +08:00
lb	373f990517	update table style	2023-12-19 16:36:53 +08:00
lb	94a713a803	Merge branch 'master' of http://git.picaiba.com/g7hoo/xuchang-new	2023-12-19 15:49:55 +08:00
lb	903a576cdc	update	2023-12-19 15:49:24 +08:00
lb	4fc0cf19e9	update	2023-12-19 15:15:10 +08:00
gtz	6374fcdb6f	'add_cutting_newuser'	2023-12-18 18:10:18 +08:00
lb	31e065fa5a	update	2023-12-18 09:51:28 +08:00
gtz	98ad9f590c	'update'	2023-12-15 18:42:45 +08:00
gtz	682cfc0407	Merge branch 'master' of git.picaiba.com:g7hoo/xuchang-new	2023-12-15 17:33:17 +08:00
gtz	f32306096f	'1'	2023-12-15 17:33:15 +08:00
lb	a2349e6f26	update data	2023-12-15 17:31:33 +08:00
lb	5107dd8ce8	update isra	2023-12-15 15:20:20 +08:00
lb	0b91868b4f	update	2023-12-15 11:16:54 +08:00
lb	bb541962dd	update	2023-12-15 09:58:40 +08:00
lb	c3511e1bfe	update	2023-12-14 13:57:49 +08:00
lb	e4a2af8458	update	2023-12-14 11:24:03 +08:00
lb	68065b612a	update 缺陷分类	2023-12-14 11:06:19 +08:00
lb	ac711e6f2a	update	2023-12-13 16:59:58 +08:00
lb	19825dcb5f	before using typescript	2023-12-13 13:44:45 +08:00
lb	cb0de3b5d0	update 退火-风机信息	2023-12-11 16:04:46 +08:00
lb	85ed13d8f5	update 退火左侧组件	2023-12-11 15:33:34 +08:00
lb	aa2a730acc	done 当前温度	2023-12-11 15:28:59 +08:00
lb	c549f38231	add AnnealFanFrequence	2023-12-11 13:52:44 +08:00
lb	9f51f2b3cb	update	2023-12-07 09:56:21 +08:00
lb	d4a4e82aa6	update 能源数据对接	2023-12-07 09:20:32 +08:00
lb	dd5ce4d90d	update	2023-12-07 09:19:12 +08:00
lb	eadbfcb982	update energy	2023-12-06 16:46:44 +08:00
lb	42e5bea184	update websocket	2023-12-06 16:37:53 +08:00
lb	5f92580c7e	add energe slice	2023-12-06 16:24:34 +08:00
gtz	9a4f60a75a	'del_console'	2023-12-04 17:50:49 +08:00
gtz	9814c2b6e9	'update'	2023-12-04 17:47:13 +08:00
lb	49ac95fbbd	update 风机信息	2023-12-01 16:30:04 +08:00
lb	6eb4102863	update 风机信息	2023-12-01 16:15:32 +08:00
lb	ad305f0c46	update firedir	2023-12-01 16:05:09 +08:00
lb	4a882104c8	update 投料机	2023-12-01 15:50:33 +08:00
lb	ca6a1c6ede	update	2023-12-01 15:19:50 +08:00
lb	52f028d806	update一层温度	2023-12-01 15:15:10 +08:00
lb	69dcea7909	update	2023-12-01 14:40:19 +08:00
lb	04a15dc14c	update 一层温度	2023-12-01 13:59:53 +08:00
lb	b601e9065a	update 一层温度	2023-12-01 11:34:54 +08:00
lb	550da629c0	update 风机运行频率	2023-12-01 10:17:47 +08:00
lb	d1d47cf5ac	update 天然气流量	2023-12-01 09:31:44 +08:00
lb	a880f62393	update 天然气数据	2023-11-30 17:01:30 +08:00
lb	d65fc0e3ed	connect 助燃风流量	2023-11-30 16:40:02 +08:00
lb	af531456f4	connect KilnInfo	2023-11-30 16:07:41 +08:00
lb	bc03a717bb	Merge branch 'testing-redux'	2023-11-10 10:10:18 +08:00
lb	3821121a6f	add more slices	2023-11-10 10:09:50 +08:00