update

2023-12-19 15:15:10 +08:00
parent 31e065fa5a
commit 4fc0cf19e9
25 changed files with 341 additions and 216 deletions
--- 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/Company/index.module.scss
+++ b/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;
--- a/src/components/Common/CurrentTemp/index.jsx
+++ b/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}
--- a/src/components/Common/Energy/index.jsx
+++ b/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}>
--- a/src/components/Common/FanRunFrequence/index.jsx
+++ b/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) {
-    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>
-  );
+  return [options, dataList];
 }
-
-export default WindFrequence;
--- a/src/components/Common/GasFlow/index.jsx
+++ b/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 seriesData = [];
+  let [options, dataList] = getOptions(showChart, hisState, runState);
+
+  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) {
-    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>
-  );
+  return [options, dataList];
 }
-
-export default GasI;
--- 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.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;
--- a/src/components/Common/KilnInfo/Kiln.jsx
+++ b/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>
--- a/src/components/Common/KilnInfo/kiln.module.scss
+++ b/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;
+			}
 		}
 	}
 }
--- a/src/components/Common/NatGasFlow/gridList/index.jsx
+++ b/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>
--- a/src/components/Common/NatGasFlow/gridList/index.module.css
+++ b/src/components/Common/NatGasFlow/gridList/index.module.css
@@ -1,14 +1,27 @@
 .gridList {
  margin-top: 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
 }

 .listItem {
  border-radius: 2px;
  padding: 12px 0;
  text-align: center;
-	color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  color: #fff;
+  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;
 }
--- a/src/components/Common/NatGasFlow/index.module.css
+++ b/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;
--- a/src/components/Common/TodayFaultTotal/index.jsx
+++ b/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;
--- a/src/components/Common/TodayFaultType/index.jsx
+++ b/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),
        },
      ],