fix ui

2024-01-03 17:00:31 +08:00
parent bee1aedda4
commit 0b1d3aa4b3
22 changed files with 256 additions and 136 deletions
--- 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
@@ -1,5 +1,6 @@
 import { useSelector } from "react-redux";
 import { motion } from "framer-motion";
+import "./feeder.css";

 function FeederStatus(props) {
  const feeder = useSelector((state) => state.feeder);
@@ -10,13 +11,15 @@ function FeederStatus(props) {
      className="feeder"
      style={{
        position: "absolute",
-        bottom: "128px",
+        bottom: "56px",
        left: "740px",
-        width: "300px",
-        height: "80px",
+        width: "400px",
+        height: "128px",
        zIndex: "-1",
        display: "flex",
-        gap: "20px",
+        gap: "8px",
+        paddingTop: "12px",
+        justifyContent: "center",
        ...props.style,
      }}
      animate={{
@@ -26,34 +29,74 @@ function FeederStatus(props) {
    >
      <span
        style={{
-          color: "#fff",
-          border: "1px solid #fff",
-          padding: "12px",
-          background:
-            leftFeeder == "运行"
-              ? "#0f03"
-              : leftFeeder == "故障"
-              ? "#f003"
-              : "#da33",
+          position: "absolute",
+          color: "#6be1e1",
+          top: "-32px",
+          left: "20px",
+          fontSize: "22px",
        }}
      >
-        投料机1 : {leftFeeder}
+        1#投料{" "}
+        <b
+          style={{
+            fontWeight: 400,
+            color:
+              leftFeeder == "故障"
+                ? "#f83a35"
+                : leftFeeder == "运行"
+                ? "#9af72b"
+                : "#ccc",
+          }}
+        >
+          {leftFeeder}
+        </b>
      </span>
      <span
        style={{
-          color: "#fff",
-          border: "1px solid #fff",
-          padding: "12px",
-          background:
-            rightFeeder == "运行"
-              ? "#0f03"
-              : rightFeeder == "故障"
-              ? "#f003"
-              : "#da33",
+          position: "absolute",
+          color: "#6be1e1",
+          top: "-32px",
+          left: "230px",
+          fontSize: "22px",
        }}
      >
-        投料机2 : {rightFeeder}
+        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>
  );
 }
--- a/src/components/Common/GasFlow/index.jsx
+++ b/src/components/Common/GasFlow/index.jsx
@@ -113,7 +113,7 @@ function getOptions(showChart, hisState, runState) {
        },
      },
      yAxis: {
-        name: "单位/m³",
+        name: "单位m³/h",
        nameTextStyle: {
          color: "#fff",
          fontSize: 10,
@@ -144,6 +144,7 @@ function getOptions(showChart, hisState, runState) {
        data: v,
        type: "line",
        symbol: "circle",
+        symbolSize: 6,
        // label: {
        //   show: true,
        //   position: "top",
--- a/src/components/Common/NatGasFlow/gasChart/chart.config.js
+++ b/src/components/Common/NatGasFlow/gasChart/chart.config.js
@@ -83,6 +83,8 @@ export default function getOptions(seriesData, name) {
      name: index + 1 + "#" + name,
      data: arr,
      type: "line",
+      symbol: 'circle',
+      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[index] + "40" },
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
@@ -186,6 +186,8 @@ function getOptions(dataList, showMore, dateType) {
      {
        data: list.map((item) => (item.sum * 100).toFixed(2)),
        type: "line",
+        symbol: 'circle',
+        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
--- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
@@ -115,7 +115,7 @@ function getOptions(period, trend) {
        .fill(1)
        .map((_, index) => {
          if (period == "week") {
-            const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
+            const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
              dtimestamp
            ).getDate()}`;
@@ -166,6 +166,8 @@ function getOptions(period, trend) {
    series: {
      data: trend[period],
      type: "line",
+      symbol: "circle",
+      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] + "40" },
@@ -188,6 +190,11 @@ function getOptions(period, trend) {
    // })),
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
  };
 }
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
@@ -36,13 +36,15 @@ function ElecCost(props) {
      size={["long", "middle"]}
    >
      {/* real echarts here */}
-      { options && <ReactECharts
-        key={Math.random()}
-        option={options}
-        // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
-        style={{ height: "100%" }}
-      />}
-       {!options && (
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          option={options}
+          // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
        <p
          style={{
            color: "#cccf",
@@ -147,6 +149,8 @@ function getOptions(period, trend) {
    series: {
      data: trend[period].map((item) => item.qty),
      type: "line",
+      symbol: "circle",
+      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] + "40" },
@@ -169,6 +173,11 @@ function getOptions(period, trend) {
    // })),
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
  };
 }
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
@@ -20,7 +20,7 @@ function Energy(props) {
      <span
        className={cls.shadowBorder + " " + cls.infoText}
        style={{
-          fontSize: "22px",
+          fontSize: "24px",
          lineHeight: "1.5",
          gridRow: "1 / 3",
        }}
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
@@ -14,7 +14,7 @@

 .infoText {
  text-align: center;
-  font-size: 20px;
+  font-size: 24px;
  line-height: 2.5;
  /* line-height: 20px; */
  letter-spacing: 1px;
@@ -27,4 +27,5 @@

 .infoText > span:last-child {
  color: #00FFF7;
+  font-size: 28px;
 }
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
@@ -143,6 +143,8 @@ function getOptions(source, period, trend) {
      {
        data: trend[source].map((item) => item.value),
        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
@@ -187,6 +189,11 @@ function getOptions(source, period, trend) {
    ],
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
  };
 }
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
@@ -165,6 +165,8 @@ function getOptions(period, trend) {
    series: {
      data: trend[period],
      type: "line",
+      symbol: "circle",
+      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] + "40" },
@@ -187,6 +189,11 @@ function getOptions(period, trend) {
    // })),
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
  };
 }
--- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
@@ -143,6 +143,8 @@ function getOptions(source, period, trend) {
      {
        data: trend[source].map((item) => item.value),
        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
@@ -187,6 +189,11 @@ function getOptions(source, period, trend) {
    ],
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
  };
 }
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
@@ -142,6 +142,8 @@ function getOptions(source, period, trend) {
      {
        data: trend[source].map((item) => item.value),
        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
@@ -186,6 +188,11 @@ function getOptions(source, period, trend) {
    ],
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
  };
 }
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
@@ -37,7 +37,7 @@ function SmokeHandle(props) {
        </span>
      </span>
      <span className={cls.shadowBorder + " " + cls.infoText}>
-        <span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度:</span>{" "}
+        <span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度</span>{" "}
        <span style={{ lineHeight: 1.5 }}>
          {smokeInfo?.dust_float || 0}mg/m³
        </span>
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
@@ -15,7 +15,7 @@

 .infoText {
  text-align: center;
-  font-size: 20px;
+  font-size: 24px;
  line-height: 2.5;
  /* line-height: 20px; */
  letter-spacing: 1px;
@@ -28,4 +28,5 @@

 .infoText > span:last-child {
  color: #00fff7;
+  font-size: 28px;
 }