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
18 changed files with 19955 additions and 115 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/assets/leftBottomBack.png
+++ b/src/assets/leftBottomBack.png
--- a/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css
+++ b/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css
@@ -1,5 +1,6 @@
 .bottomBarItem {
-      background: url(../../../assets/forecastBack.png) no-repeat;
+    background: url(../../../assets/forecastBack.png) no-repeat;
    background-size: 100% 100%;
    width: 506px;
+    height: 422px;
 }
--- a/src/components/Common/Company/index.jsx
+++ b/src/components/Common/Company/index.jsx
@@ -36,7 +36,7 @@ export default function CompanyName() {
 			</div>
 			<div>
 				<h2 className={cls.TopTitleText}>
-					许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线{' '}
+					许昌安彩新能科技&ensp;&ensp;许昌安彩窑炉生产指挥调度中心{' '}
 				</h2>
 				<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
 			</div>
--- a/src/components/Common/ForecastTemperature/leftbox.module.scss
+++ b/src/components/Common/ForecastTemperature/leftbox.module.scss
@@ -8,7 +8,7 @@
    margin-right: 16px;
    width: 272px;
    height: 100px;
-    padding: 12px 8px;
+    padding: 12px 16px;
    background: url(../../../assets/CenterChart2ItemBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
--- a/src/components/Common/forecastRect/index.jsx
+++ b/src/components/Common/forecastRect/index.jsx
@@ -1,7 +1,7 @@
 /*
 * @Author: zhp
 * @Date: 2024-08-29 09:46:11
- * @LastEditTime: 2024-09-14 09:20:36
+ * @LastEditTime: 2024-09-18 09:10:19
 * @LastEditors: zhp
 * @Description: 
 */
@@ -9,8 +9,9 @@ import cls from "./index.module.css";
 import React, { useState,useEffect,useRef } from 'react';
 import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points"; 
 function generateRandomNearNumber(number) {
-  const randomOffset = Math.floor(Math.random() * 11) - 5;
-  return number + randomOffset;
+  const minRandom = -0.5;
+  const maxRandom = 0.5;
+  return (number + Math.random() * (maxRandom - minRandom) + minRandom).toFixed(1);
 }
 function BlueRect(props) {
  const title = props.title || "DEFAULT";
@@ -22,6 +23,7 @@ function BlueRect(props) {
    setIsVisible(!newVisibilityState);
    // 在这里可以根据isVisible的变化执行其他逻辑
  };
+   const [randomValue, setRandomValue] = useState(generateRandomNearNumber(parseInt(value)));
    // const parentRef = useRef(null);
  // const pointsRef = useRef(null);
    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
@@ -70,15 +72,23 @@ function BlueRect(props) {
        }}
      >
        {title}
-      </span>
-      <span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
+        </span>
+      {props.blue || (
+        <span onClick={handleToggleVisibility} className="value" style={{ userSelect: "none", fontWeight: 600,fontSize: "22px",  cursor: 'pointer', }}>
+           {randomValue + '℃'}
+        </span>
+        )}
+      {props.blue? (
+       <span  className='value' style={{ userSelect: "none", fontSize: "22px" }}>
        {value}
      </span>
-      {props.blue || (
-        <span onClick={handleToggleVisibility}  className={`${cls.forecastValue}`} style={{ userSelect: "none", fontWeight: 600,fontSize: "22px" }}>
-         {generateRandomNearNumber(parseInt(value)) + '℃'}
-        </span>
+        ): (
+                <span  className={`${cls.forecastValue}`}  style={{ userSelect: "none", fontSize: "22px" }}>
+        {value}
+      </span>
+   
      )}
+    
      </div>
      {isVisible && !props.blue && <Points dataSource={chartData}
        updateVisibilityState={updateVisibilityState} // 传递方法给子组件
--- a/src/components/Common/forecastRect/index.module.css
+++ b/src/components/Common/forecastRect/index.module.css
@@ -551,6 +551,5 @@
  background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%);
  box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
  opacity: 0.7;
-  cursor: pointer;
  backdrop-filter: blur(3px);
 }
--- a/src/components/Common/pointItemBackgroundForecast/container.module.scss
+++ b/src/components/Common/pointItemBackgroundForecast/container.module.scss
@@ -26,7 +26,7 @@
      margin: 0;
      margin-left: 6px;
      font-size: 22px;
-      color: #fff;
+      color:#58E7E9;
      letter-spacing: 2px;
      font-weight: 500;
    }
--- a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css
@@ -26,7 +26,7 @@
      height: 1px;
      position: absolute;
      top: 50%;
-      left: -23.3px;
+      left: -21px;
      background-color: rgba(255, 194, 20, 1);
      transform: translateY(-50%);
    }
@@ -39,7 +39,7 @@
      border-radius: 100%;
      top: 50%;
      background-color: rgba(255, 194, 20, 1);
-      left: -1.1vw;
+      left: -24px;
      transform: translateY(-50%) translateX(50%);
 }
 .block{
@@ -62,7 +62,7 @@
      height: 1px;
      position: absolute;
      top: 50%;
-      left: -24px;
+      left: -22.5px;
      transform: translateY(-50%);
      background-color: rgba(0, 255, 245, 1);
    }
@@ -75,6 +75,6 @@
      background-color: rgba(0, 255, 245, 1);
      border-radius: 100%;
      top: 50%;
-      left: -1.1vw;
+      left: -25.5px;
      transform: translateY(-50%) translateX(50%);
 }
--- a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css
@@ -26,7 +26,7 @@
      height: 1px;
      position: absolute;
      top: 50%;
-      left: -23.3px;
+      left: -21px;
      background-color: rgba(255, 194, 20, 1);
      transform: translateY(-50%);
    }
@@ -39,7 +39,7 @@
      border-radius: 100%;
      top: 50%;
      background-color: rgba(255, 194, 20, 1);
-      left: -1.1vw;
+      left: -24px;
      transform: translateY(-50%) translateX(50%);
 }
 .block{
@@ -62,7 +62,7 @@
      height: 1px;
      position: absolute;
      top: 50%;
-      left: -24px;
+      left: -22.5px;
      transform: translateY(-50%);
      background-color: rgba(0, 255, 245, 1);
    }
@@ -75,6 +75,6 @@
      background-color: rgba(0, 255, 245, 1);
      border-radius: 100%;
      top: 50%;
-      left: -1.1vw;
+      left: -25.5px;
      transform: translateY(-50%) translateX(50%);
 }
--- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx
+++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx
@@ -1,7 +1,7 @@
 /*
 * @Author: zhp
 * @Date: 2024-09-12 13:44:55
- * @LastEditTime: 2024-09-14 14:10:23
+ * @LastEditTime: 2024-09-18 10:18:09
 * @LastEditors: zhp
 * @Description: 
 */
@@ -25,13 +25,26 @@ function generateRandomArray(data) {
  
  return randomArray;
 }
+function getForecastList(data) {
+  console.log('ryfdata',data);
+  
+  let forecastList = []
+   for (let i = 0; i < data.length; i++) {
+      let item = data[i];
+      let min = item - 5;
+      let max = item + 5;
+      let randomValue = Math.random() * (max - min) + min;
+     forecastList.push(randomValue.toFixed(1))
+  }
+     return forecastList
+}
 function LeftTopForecast(props) {
  console.log(props);
  const title = '点位:' + props.dataSource.title
  const isVisible = '点位:' + props.dataSource.isVisible
  const data = props.dataSource.value.match(/\d+\.?\d*/)[0]
 const [parentVisibilityState, setParentVisibilityState] = useState(false);
-
+  const [randomValue, setRandomValue] = useState(generateRandomArray((data)))
  // 定义一个处理子组件可见性变化的回调函数
  const handleVisibilityChange = (newVisibilityState) => {
    console.log(`Visibility changed to: ${newVisibilityState}`);
@@ -39,8 +52,12 @@ function LeftTopForecast(props) {
    // 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等
    props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
  };
-  
+  const dataList = randomValue
+  const [forecastList, setForecastList] = useState(getForecastList((dataList)))
  const value = useContext(HomeContext);
+    // let forecastList = [];
+   console.log('forecastList',forecastList);
+   
  const kilnOptimize = useSelector((state) => state.kilnOptimize);
  const dataSource  = {
    color1: 'rgba(0, 255, 245, .2)',
@@ -50,7 +67,8 @@ function LeftTopForecast(props) {
    areaColor1:'rgba(255, 234, 153, 0)',
    msg: kilnOptimize.topTempAvgFor1h,
    modelFlag: value,
-    data: data ? generateRandomArray(data) : [],
+    data: dataList ? dataList : [],
+    forecastList:forecastList ?forecastList:[],
    range: [-10, 10]
  }
  return (
--- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
@@ -75,6 +75,6 @@
      background-color: rgba(0, 255, 245, 1);
      border-radius: 100%;
      top: 50%;
-      left: -26px;
+      left: -25.5px;
      transform: translateY(-50%) translateX(50%);
 }
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
@@ -1,7 +1,7 @@
 /*
 * @Author: zhp
 * @Date: 2024-09-13 14:47:50
- * @LastEditTime: 2024-09-14 15:53:14
+ * @LastEditTime: 2024-09-18 10:13:08
 * @LastEditors: zhp
 * @Description: 
 */
@@ -68,20 +68,13 @@ function CommonChart(props) {
  const { dataSource } = props;

  const data = dataSource.data || [];
+  let forecastList =dataSource.forecastList || [];
  // const modelFlag = dataSource.modelFlag || false;
  const color1 = dataSource.color1 || [];
  const color = dataSource.color || [];
  const yName = dataSource.yName;
  const times = getTimeArray();
  // }
-  let forecastList = []
-    for (let i = 0; i < data.length; i++) {
-      let item = data[i];
-      let min = item - 5;
-      let max = item + 5;
-      let randomValue = Math.random() * (max - min) + min;
-      forecastList.push(randomValue.toFixed(1));
-  }
  console.log('times',times)
  let areaStyle = {
      opacity: 0.8,
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
@@ -1,14 +1,7 @@
 /*
 * @Author: zhp
 * @Date: 2024-09-13 15:39:36
- * @LastEditTime: 2024-09-14 16:02:21
- * @LastEditors: zhp
- * @Description: 
- */
-/*
- * @Author: zhp
- * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-09-13 14:22:01
+ * @LastEditTime: 2024-09-18 11:21:11
 * @LastEditors: zhp
 * @Description: 
 */
@@ -62,7 +55,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
      },
      splitLine: {
        lineStyle: {
-          color: "#F1F9FF",
+          color: "#58E7E9",
        },
      },
      min:range[0],
@@ -129,13 +122,13 @@ export default function getOptions(data, times, range, yName,forecastList,color,
        data: forecastList,
      }
    ],
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: 'cross'
+  tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        className: "xc-chart-tooltip",
+        // backgroundColor: ''
      },
-      className: "xc-chart-tooltip",
-      // backgroundColor: ''
-    },
-  };
+    };
 }
--- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx
@@ -1,7 +1,7 @@
 /*
 * @Author: zhp
 * @Date: 2024-08-23 15:31:44
- * @LastEditTime: 2024-09-14 15:18:21
+ * @LastEditTime: 2024-09-18 10:44:06
 * @LastEditors: zhp
 * @Description: 
 */
@@ -24,7 +24,7 @@ function LeftMiddleForecast() {
      <div className={cls.leftBar__middle__content}>
        {infos.map((item) => (
          <div key={item.label} className={`${cls.info__item}`}>
-            <span className={cls.square}></span>
+            {/* <span className={cls.square}></span> */}
            <span className={cls.label}>{item.label}</span>
            <span className={cls.line}></span>
            <span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span>
--- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css
@@ -7,7 +7,7 @@
 		display: grid;
 	  grid-template-rows: auto 1fr 1fr;
 		/* gap: 4px; */
-		padding-top: 6px;
+		padding-top: 4px;
 		.info__item {
 	    /* width: 100%; */
      background: url('../../../../../assets/blueBack.png') no-repeat;
@@ -28,16 +28,9 @@
 			display: flex;
 			align-items: center;
 			gap: 14px;
-      .square{
-        /* flex: 1; */
-        margin-left: 20px;
-        width: 6px;
-        height: 6px;
-        background: #00FFF5;
-        box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
-      }
 			.label {
 				/* flex:1; */
+        margin-left: 40px;
 				text-align: left;
        /* position: relative; */
 			}
--- a/src/components/Modules/KilnOptimize/forecastRightSide/index.jsx
+++ b/src/components/Modules/KilnOptimize/forecastRightSide/index.jsx
@@ -1,7 +1,7 @@
 /*
 * @Author: zhp
 * @Date: 2024-08-23 13:56:11
- * @LastEditTime: 2024-08-30 16:30:35
+ * @LastEditTime: 2024-09-18 10:54:39
 * @LastEditors: zhp
 * @Description: 
 */
@@ -32,12 +32,12 @@ export default function Index() {
        <div style={{ height: '261px', marginTop: '24px' }}>
 			    <LeftMiddleForecast />
        </div>
-        <div style={{ flex: 1,marginTop: '24px' }}>
+        <div style={{ height: '422px',marginTop: '24px' }}>
 	          <LeftBottomForecast/>
 			</div>
        </motion.div>
      <motion.div
-          className={cls.leftBar}
+          className={cls.leftBarRight}
          initial={{ opacity: 0, position: 'absolute' }}
          animate={{ opacity: 1, position: 'relative' }}
          exit={{ opacity: 0, position: 'relative' }}
--- a/src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss
+++ b/src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss
@@ -11,6 +11,14 @@
  display: flex;
  justify-content: space-between;
  gap: 16px;
+
+}
+.leftBarRight {
+	width: 501px;
+	height: 966px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
  position: relative;
  z-index: 99;
 }
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