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/App.js
+++ b/src/App.js
@@ -20,6 +20,7 @@ function App() {
        <Head />

        {navActive == "能耗分析" && <EnergyAnalysis />}
+        {navActive == "能耗分析" && <div className='bgDitu'></div>}
        {navActive != "能耗分析" && <Home active={navActive} />}
      </div>
      <Slider value={value} setValue={setValue} />
--- a/src/assets/ditu.png
+++ b/src/assets/ditu.png
--- 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;
 }
--- a/src/hooks/getChartOption.js
+++ b/src/hooks/getChartOption.js
@@ -1,97 +1,99 @@
-import * as echarts from 'echarts';
+import * as echarts from "echarts";

 export default function getOptions(seriesData, name) {
-	const colors = [
-		'#FFD160',
-		'#12FFF5',
-		'#2760FF',
-		'#E80091',
-		'#8064ff',
-		'#ff8a3b',
-		'#8cd26d',
-		'#2aa1ff',
-	];
-	return {
-		color: colors,
-		grid: { top: 38, right: 12, bottom: 20, left: 48 },
-		legend: {
-			show: false,
-			icon: 'roundRect',
-			top: 10,
-			right: 10,
-			padding: 0,
-			itemWidth: 8,
-			itemHeight: 8,
-			itemGap: 3,
-			height: 8,
-			textStyle: {
-				color: '#DFF1FE',
-				fontSize: 10,
-			},
-		},
-		xAxis: {
-			type: 'category',
-			data: Array(7)
-				.fill(1)
-				.map((_, index) => {
-					const today = new Date();
-					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-						dtimestamp,
-					).getDate()}`;
-				})
-				.reverse(),
-			axisLabel: {
-				color: '#fff',
-				fontSize: 12,
-			},
-			axisTick: { show: false },
-			axisLine: {
-				lineStyle: {
-					width: 1,
-					color: '#213259',
-				},
-			},
-		},
-		yAxis: {
-			name: '单位m³/h',
-			nameTextStyle: {
-				color: '#fff',
-				fontSize: 10,
-				align: 'right',
-			},
-			type: 'value',
-			axisLabel: {
-				color: '#fff',
-				fontSize: 12,
-				formatter: '{value}',
-			},
-			axisLine: {
-				show: true,
-				lineStyle: {
-					color: '#213259',
-				},
-			},
-			splitLine: {
-				lineStyle: {
-					color: '#213259a0',
-				},
-			},
-		},
-		series: seriesData.map((arr, index) => ({
-			name: index + 1 + '#' + name,
-			data: arr,
-			type: 'line',
-			areaStyle: {
-				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-					{ offset: 0, color: colors[index] + '40' },
-					{ offset: 0.5, color: colors[index] + '20' },
-					{ offset: 1, color: colors[index] + '00' },
-				]),
-			},
-		})),
-		tooltip: {
-			trigger: 'axis',
-		},
-	};
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(7)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: seriesData.map((arr, index) => ({
+      name: index + 1 + "#" + name,
+      data: arr,
+      symbol: "circle",
+	  symbolSize: 6,
+      type: "line",
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: colors[index] + "40" },
+          { offset: 0.5, color: colors[index] + "20" },
+          { offset: 1, color: colors[index] + "00" },
+        ]),
+      },
+    })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
 }
--- a/src/index.css
+++ b/src/index.css
@@ -71,7 +71,7 @@ body {
 }

 .bgDitu {
-  position: fixed;
+  position: absolute;
  z-index: -1000;
  top: 0;
  left: 0;
@@ -79,7 +79,7 @@ body {
  height: 100%;
  /* background: #f003; */
  background: url(./assets/ditu.png) no-repeat;
-  background-position: -800px 0;
+  /* background-position: -800px 0; */
  background-size: 100%;
 }

--- a/src/pages/EnergyCostAnalysis/index.jsx
+++ b/src/pages/EnergyCostAnalysis/index.jsx
@@ -14,7 +14,6 @@ import Gas from "../../components/Modules/EnergyCostAnalysis/BadGas";
 function EnergyAnalysis(props) {
  return (
    <div className={cls.grid}>
-      <div className={cls.bgDitu}></div>
      <div className={cls.vgrid + " col-1"}>
        {/* <SmokeHandle /> */}
        <div style={{ gridRow: "1 / 3" }}>
--- a/src/pages/EnergyCostAnalysis/index.module.css
+++ b/src/pages/EnergyCostAnalysis/index.module.css
@@ -1,4 +1,5 @@
 .grid {
+	position: relative;
 	display: grid;
 	justify-content: center;
 	gap: 24px;
@@ -9,7 +10,7 @@
 }

 .bgDitu {
-	position: fixed;
+	position: absolute;
 	z-index: -1000;
 	top: 0;
 	left: 0;
@@ -17,7 +18,7 @@
 	height: 100%;
 	/* background: #f003; */
 	background: url(../../assets/ditu.png) no-repeat;
-	background-position: -800px 0;
+	/* background-position: -800px 0; */
 	background-size: 100%;
 }

--- a/src/utils/energeChartOption.js
+++ b/src/utils/energeChartOption.js
@@ -99,6 +99,8 @@ export function getOptions(period, source, trend, options={}) {
            ? trend[period].map((item) => item.qty)
            : trend[period],
        type: "line",
+        symbol: 'circle',
+        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
@@ -111,6 +113,11 @@ export function getOptions(period, source, trend, options={}) {
    ],
    tooltip: {
      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
    },
    ...options
  };