update

package-lock.json

@@ -65,6 +65,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",
@@ -72,6 +73,7 @@
       },
       "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",
         "typescript": "^5.3.3"
@@ -4786,6 +4788,12 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz",
+      "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -17485,6 +17493,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -18785,9 +18801,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
+      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -23064,6 +23080,12 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "@types/uuid": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz",
+      "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
+      "dev": true
+    },
     "@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -32061,6 +32083,13 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^8.3.2",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
       }
     },
     "source-list-map": {
@@ -33024,9 +33053,9 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
-      "version": "8.3.2",
+      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
     },
     "v8-to-istanbul": {
       "version": "8.1.1",

package.json

@@ -60,6 +60,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",
@@ -90,6 +91,7 @@
   },
   "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",
     "typescript": "^5.3.3"

src/App.js

@@ -15,7 +15,7 @@ function App() {
 
   return (
     <>
-      <div id="FullScreen" style={styles}>
+      <div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
         <NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
         <Head />
 

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>

src/components/Common/AmenSelector/index.jsx

@@ -0,0 +1,5 @@
+function AmenSelector() {
+  return <div className="amen-selector"></div>;
+}
+
+export default AmenSelector;

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

@@ -38,9 +38,10 @@
 		.TopSideLeftTxt {
 			margin-right: 120px;
 			margin-top: 15px;
-			color: rgb(255, 255, 255, 0.8);
+			color: rgb(255, 255, 255, 0.6);
 			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;

src/components/Common/CurrentTemp/index.jsx

@@ -59,7 +59,7 @@ function WindFrequence(props) {
 
   return (
     <GraphBase
-      icon="pause"
+      icon="temp"
       title="当前温度"
       dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
       defaultSelect={dataSource}

src/components/Common/Energy/index.jsx

@@ -9,13 +9,18 @@ function EnergyCost(props) {
   if (energyInfo) {
   }
   return (
-    <Container title="能耗" icon="charger" className={cls.energyCost} pending={true}>
+    <Container
+      title="能耗"
+      icon="battery"
+      className={cls.energyCost}
+      pending={true}
+    >
       <div className={`flex flex-col`}>
         <div className={`${cls.cost__info} flex`}>
           <div
             className={`${cls.info__item} flex flex-col justify-center items-center`}
           >
-            <span style={{ fontSize: "18px" }}>余 热 发 电</span>
+            <span style={{ fontSize: "22px" }}>余 热 发 电</span>
             <span>{energyInfo?.elecQty1 || 0}kWh</span>
           </div>
           <div className={cls.info__item_groups}>

src/components/Common/FanRunFrequence/index.jsx

@@ -10,7 +10,62 @@ function WindFrequence(props) {
   const runState = useSelector((state) => state.fanFrequence.runtime);
   const hisState = useSelector((state) => state.fanFrequence.history);
 
-  let dataList = [];
+  const [options, dataList] = getOptions(showChart, hisState, runState);
+
+  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",
@@ -134,54 +189,5 @@ function WindFrequence(props) {
           ];
   }
 
-  function handleSwitchChange(val) {
+  return [options, dataList];
-    if (val) {
-      setShowChart(true);
-    } else {
-      setShowChart(false);
-    }
-  }
-  return (
-    <GraphBase
-      icon="kiln"
-      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;

src/components/Common/GasFlow/index.jsx

@@ -7,45 +7,59 @@ import { Switch } from "antd";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 
-// function mockData(type = "runtime") {
-//   const RUNTIME_DATA_LENGTH = 8;
-//   const MAX_HISTORY_DATA_LENGTH = 8;
-//   const WEEK = 7;
-
-//   switch (type) {
-//     case "runtime":
-//       return [
-//         ...Array.from(
-//           { length: RUNTIME_DATA_LENGTH },
-//           () => Math.floor(Math.random() * 100) + "m³/h"
-//         ),
-//       ];
-//     case "history":
-//       return {
-//         ...Array.from(
-//           { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
-//           (_, index) => ({
-//             ["GAS_" + index]: [
-//               ...Array.from({ length: WEEK }, () =>
-//                 Math.floor(Math.random() * 100)
-//               ),
-//             ],
-//           })
-//         ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
-//       };
-//     default:
-//       break;
-//   }
-// }
-
 /** 助燃风流量 */
 function GasI(props) {
   const [showChart, setShowChart] = useState(true);
   const runState = useSelector((state) => state.combustionAir.runtime);
   const hisState = useSelector((state) => state.combustionAir.history);
 
-  let dataList = [];
+  let [options, dataList] = getOptions(showChart, hisState, runState);
-  let seriesData = [];
+
+  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>
+
+      <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",
@@ -56,7 +70,10 @@ function GasI(props) {
     "#8cd26d",
     "#2aa1ff",
   ];
+  let seriesData = null;
+  let dataList = null;
   let options = null;
+
   if (showChart) {
     // keys() 结果不是按照顺序，需要 sort()
     seriesData =
@@ -167,44 +184,5 @@ function GasI(props) {
           ];
   }
 
-  function handleSwitchChange(val) {
+  return [options, dataList];
-    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>
-
-      <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>
-  );
 }
-
-export default GasI;

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 {

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;

src/components/Common/KilnInfo/Kiln.jsx

@@ -16,7 +16,9 @@ export default function Kiln() {
       <div className={cls.leftBar__top__content}>
         {infos.map((item) => (
           <div key={item.label} className={cls.info__item}>
-            {item.label}: {item.value}
+            <span className={cls.label}>{item.label}</span>
+            <span className={cls.value}>{item.value}</span>
+            {/* {item.label}: {item.value} */}
           </div>
         ))}
       </div>

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

@@ -24,6 +24,19 @@
 			line-height: 40px;
 			text-align: center;
 			user-select: none;
+			display: flex;
+			align-items: center;
+			gap: 12px;
+
+			.label {
+				flex: 6;
+				text-align: right;
+			}
+			
+			.value {
+				flex: 4;
+				text-align: left;
+			}
 		}
 	}
 }

src/components/Common/NatGasFlow/gridList/index.jsx

@@ -46,7 +46,9 @@ function GridList(props) {
     <div className={cls.gridList}>
       {dataList.map((item) => (
         <div key={item.id} className={cls.listItem}>
-          {item.name}: {item.value}
+          <span className={cls.item_label}>{item.name}</span>
+          <span className={cls.item_value}>{item.value}</span>
+          {/* {item.name}: {item.value} */}
         </div>
       ))}
     </div>

src/components/Common/NatGasFlow/gridList/index.module.css

@@ -1,14 +1,27 @@
 .gridList {
   margin-top: 12px;
-	display: grid;
+  display: grid;
-	grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
-	gap: 8px;
+  gap: 8px;
 }
 
 .listItem {
   border-radius: 2px;
   padding: 12px 0;
   text-align: center;
-	color: #fff;
+  color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.item_label {
+  flex: 5;
+  text-align: right;
+}
+
+.item_value {
+  flex: 6;
+  text-align: left;
 }

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

@@ -26,7 +26,8 @@
 	top: 22px;
 	right: 24px;
 	height: 32px;
-	width: 410px;
+	width: 400px;
+	/* background: #12fff5; */
 	display: flex;
 	align-items: center;
 	justify-content: space-between;

src/components/Common/TodayFaultTotal/index.jsx

@@ -4,6 +4,65 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 
+function FaultTotal(props) {
+  const [currentSelect, setCurrentSelect] = useState("日");
+  const isra = useSelector((state) => state.isra);
+
+  const currentStatistic =
+    currentSelect == "日"
+      ? isra.dayStatistic
+      : currentSelect == "周"
+      ? isra.weekStatistic
+      : currentSelect == "月"
+      ? isra.monthStatistic
+      : currentSelect == "月"
+      ? isra.yearStatistic
+      : [];
+
+  const series = preHandleStatisticData(currentStatistic, isra.checkType);
+  const options = getOptions(series, isra, currentStatistic);
+
+  function handleDateChange(v) {
+    setCurrentSelect(v);
+  }
+
+  // 根据使用的页面决定背景的大小
+  const bgSize =
+    props.page == "home" ? ["middle", "short"] : ["middle", "long"];
+
+  return (
+    <GraphBase
+      icon="chart"
+      title="产线缺陷统计"
+      dateOptions={["日", "周", "月", "年"]}
+      defaultSelect={currentSelect}
+      onDateChange={handleDateChange}
+      size={bgSize}
+      style={{ width: "600px" }}
+    >
+      <div className={cls.chart}>
+        {currentStatistic.length != 0 && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )}
+        {currentStatistic.length == 0 && (
+          <p
+            style={{
+              paddingTop: "72px",
+              color: "#fff6",
+              textAlign: "center",
+              fontSize: "24px",
+            }}
+          >
+            暂无数据
+          </p>
+        )}
+      </div>
+    </GraphBase>
+  );
+}
+
+export default FaultTotal;
+
 function preHandleStatisticData(data, legend) {
   const obj = {};
   data.forEach((item) => {
@@ -28,7 +87,15 @@ function preHandleStatisticData(data, legend) {
 
   legend.forEach((item, index) => {
     series[index].name = item;
-    data.forEach((d) => {
+    data.forEach((d, index) => {
+      if (index == 0) {
+        series[index].label = {
+          show: true,
+          position: "top",
+          distance: 10,
+          color: "#fffc",
+        };
+      }
       series[index].data.push(obj[d.name][item] || 0);
     });
   });
@@ -57,7 +124,7 @@ function getOptions(series, isra, currentStatistic) {
       type: "category",
       data: currentStatistic.map((item) => item.name),
       axisLabel: {
-        color: "#fff",
+        color: "#fffc",
         fontSize: 12,
       },
       axisTick: { show: false },
@@ -96,65 +163,11 @@ function getOptions(series, isra, currentStatistic) {
     series,
     tooltip: {
       trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
     },
   };
 }
-
-function FaultTotal(props) {
-  const [currentSelect, setCurrentSelect] = useState("日");
-  const isra = useSelector((state) => state.isra);
-
-  const currentStatistic =
-    currentSelect == "日"
-      ? isra.dayStatistic
-      : currentSelect == "周"
-      ? isra.weekStatistic
-      : currentSelect == "月"
-      ? isra.monthStatistic
-      : currentSelect == "月"
-      ? isra.yearStatistic
-      : [];
-
-  const series = preHandleStatisticData(currentStatistic, isra.checkType);
-  const options = getOptions(series, isra, currentStatistic);
-
-  function handleDateChange(v) {
-    setCurrentSelect(v);
-  }
-
-  // 根据使用的页面决定背景的大小
-  const bgSize =
-    props.page == "home" ? ["middle", "short"] : ["middle", "long"];
-
-  return (
-    <GraphBase
-      icon="battery"
-      title="产线缺陷统计"
-      dateOptions={["日", "周", "月", "年"]}
-      defaultSelect={currentSelect}
-      onDateChange={handleDateChange}
-      size={bgSize}
-      style={{ width: "600px" }}
-    >
-      <div className={cls.chart}>
-        {currentStatistic.length != 0 && (
-          <ReactECharts option={options} style={{ height: "100%" }} />
-        )}
-        {currentStatistic.length == 0 && (
-          <p
-            style={{
-              paddingTop: "72px",
-              color: "#fff6",
-              textAlign: "center",
-              fontSize: "24px",
-            }}
-          >
-            暂无数据
-          </p>
-        )}
-      </div>
-    </GraphBase>
-  );
-}
-
-export default FaultTotal;

src/components/Common/TodayFaultType/index.jsx

@@ -45,7 +45,7 @@ function FaultType(props) {
 
   return (
     <GraphBase
-      icon="battery"
+      icon="default"
       title="产线当日缺陷分类"
       dateOptions={lines}
       defaultSelect={currentLine}
@@ -142,6 +142,11 @@ function getOptions(data, chart_type) {
       },
       tooltip: {
         trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        className: 'xc-chart-tooltip'
+        // backgroundColor: ''
       },
       xAxis: {
         type: "category",
@@ -195,6 +200,13 @@ function getOptions(data, chart_type) {
               { offset: 1, color: "#364BFE" },
             ]),
           },
+          label: {
+            show: true,
+            position: "top",
+            distance: 10,
+            fontSize: 10,
+            color: "#fffc",
+          },
           data: (dataList || []).map((item) => item.value),
         },
       ],

src/components/container.module.scss

@@ -11,10 +11,10 @@
     align-items: center;
 
     img {
-      width: 20px;
+      width: 24px;
 
       &.bigger {
-        width: 24px;
+        width: 28px;
       }
     }
 
@@ -25,7 +25,7 @@
         sans-serif;
       margin: 0;
       margin-left: 6px;
-      font-size: 18px;
+      font-size: 22px;
       color: #fff;
       letter-spacing: 2px;
       font-weight: 500;

src/hooks/useIcon.js

@@ -6,13 +6,14 @@ import IconChart from '../assets/Icon/icon-chart.png';
 import IconPuzzle from '../assets/Icon/icon-puzzle.png';
 import IconPause from '../assets/Icon/icon-pause.png';
 import IconDefault from '../assets/Icon/icon-puzzle.png';
+import IconTemp from '../assets/Icon/temp.svg';
 
 function useIcon(iconName) {
 	// const icon = require(`../assets/icons/${iconName}.svg`).default;
 	// return icon;
 	return iconName == 'kiln'
 		? IconStack
-		: iconName == 'goods'
+		: iconName == 'good'
 		? IconGood
 		: iconName == 'battery'
 		? IconCharger
@@ -24,6 +25,8 @@ function useIcon(iconName) {
 		? IconPuzzle
 		: iconName == 'pause'
 		? IconPause
+		: iconName == 'temp'
+		? IconTemp
 		: IconDefault;
 }
 

src/index.css

@@ -115,3 +115,13 @@ body {
 .bgQuality {
   background: url(./assets/ZL.png) no-repeat;
 }
+
+.xc-chart-tooltip {
+  background: #0a2b4f77 !important;
+  border: none !important;
+  backdrop-filter: blur(12px);
+}
+
+.xc-chart-tooltip * {
+  color: #fff !important;
+}

src/utils/index.ts

@@ -1,5 +1,6 @@
 import { store } from "../store";
 import { MessageItem } from "./checkTypeHelper";
+import { v4 as uuidv4 } from 'uuid'
 
 export function randomInt(min: number, max: number, includeMax = false) {
   let Fn = includeMax ? Math.ceil : Math.floor;
@@ -175,7 +176,7 @@ new XClient(
   }
 );
 
-const newUser = crypto.randomUUID();
+const newUser = uuidv4()
 console.log("websocket user:", newUser);
 new XClient(
   "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,