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

Reviewed-on: #13

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

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

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%);
 }

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%);
 }

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 (

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%);
 }

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,

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
+ * @LastEditTime: 2024-09-18 11:21:11
- * @LastEditors: zhp
- * @Description: 
- */
-/*
- * @Author: zhp
- * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-09-13 14:22:01
  * @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: {
+  tooltip: {
-      trigger: "axis",
+        trigger: "axis",
-      axisPointer: {
+        axisPointer: {
-        type: 'cross'
+          type: "shadow",
+        },
+        className: "xc-chart-tooltip",
+        // backgroundColor: ''
       },
-      className: "xc-chart-tooltip",
+    };
-      // backgroundColor: ''
-    },
-  };
 }

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>

src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css

@@ -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; */
 			}

src/components/Modules/KilnOptimize/forecastRightSide/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-23 13:56:11
- * @LastEditTime: 2024-09-18 08:52:18
+ * @LastEditTime: 2024-09-18 10:54:39
  * @LastEditors: zhp
  * @Description: 
  */
@@ -37,7 +37,7 @@ export default function Index() {
 			</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' }}

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