update

src/components/Common/Energy/EnergyCostChart/index.jsx

@@ -64,7 +64,22 @@ const EnergyCostChart = (props) => {
       </div>
 
       <div className="flex-1" style={{ marginTop: "8px" }}>
-        <ReactECharts option={options} style={{ height: "180px" }} />
+        {options && (
+          <ReactECharts option={options} style={{ height: "180px" }} />
+        )}
+        {!options && (
+          <p
+            style={{
+              color: "#cccf",
+              fontSize: "20px",
+              userSelect: "none",
+              textAlign: "center",
+              paddingTop: "32px",
+            }}
+          >
+            暂无数据
+          </p>
+        )}
       </div>
     </div>
   );
@@ -73,6 +88,7 @@ const EnergyCostChart = (props) => {
 export default EnergyCostChart;
 
 function getOptions(period, source, trend) {
+  if (trend[period].length == 0) return null;
   return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 32, right: 12, bottom: 56, left: 48 },

src/components/Common/Energy/index.jsx

@@ -13,32 +13,35 @@ function EnergyCost(props) {
         <div className={`${cls.cost__info} flex`}>
           <div
             className={`${cls.info__item} flex flex-col justify-center items-center`}
+            style={{ width: "112px", padding: 0 }}
           >
-            <span style={{ fontSize: "22px" }}>余 热 发 电</span>
-            <span>{energyInfo?.elecQty1 || 0}kWh</span>
+            <span style={{ fontSize: "20px", letterSpacing: '2px', lineHeight: 1.5 }}>余热发电</span>
+            <span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
+              {energyInfo?.elecQty1 || 0}kWh
+            </span>
           </div>
           <div className={cls.info__item_groups}>
             <div className={cls.info__item}>
-              <i style={{ fontSize: "18px", fontStyle: "normal" }}>水耗量</i>:
-              <span style={{ fontSize: "12px" }}>
+              <i style={{ fontSize: "18px", fontStyle: "normal", paddingRight: '6px' }}>水耗量</i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {energyInfo?.waterQty || 0}Km³
               </span>
             </div>
             <div className={cls.info__item}>
-              <i style={{ fontSize: "18px", fontStyle: "normal" }}>天然气I</i>:
-              <span style={{ fontSize: "12px" }}>
+              <i style={{ fontSize: "18px", fontStyle: "normal", paddingRight: '6px' }}>天然气I</i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {energyInfo?.ngQty1 || 0}
               </span>
             </div>
             <div className={cls.info__item}>
-              <i style={{ fontSize: "18px", fontStyle: "normal" }}>电耗量</i>:
-              <span style={{ fontSize: "12px" }}>
+              <i style={{ fontSize: "18px", fontStyle: "normal", paddingRight: '6px' }}>电耗量</i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {energyInfo?.elecQty2 || 0}kWh
               </span>
             </div>
             <div className={cls.info__item}>
-              <i style={{ fontSize: "18px", fontStyle: "normal" }}>天然气II</i>:
-              <span style={{ fontSize: "12px" }}>
+              <i style={{ fontSize: "18px", fontStyle: "normal", paddingRight: '6px' }}>天然气II</i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {energyInfo?.ngQty2 || 0}
               </span>
             </div>

src/components/Common/Energy/index.module.scss

@@ -18,12 +18,13 @@
 	border-radius: 2px;
 	color: hsl(0, 0%, 100%, 0.9);
 	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
-	width: 190px;
+	// min-width: 190px;
 	// height: 43px;
 	font-size: 14px;
-	letter-spacing: 1.43px;
+	// letter-spacing: 1.43px;
 	line-height: 40px;
-	text-align: center;
+	padding-left: 12px;
+	// text-align: center;
 	user-select: none;
 }
 

src/components/Common/FanInfo/index.jsx

@@ -33,6 +33,7 @@ function FanInfo(props) {
       fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
     ];
   });
+  const dataRight = [...data.slice(rowNum), ...data.slice(0, rowNum)];
 
   let config = {
     headerBGC: "rgba(4, 44, 76, 0.3)",
@@ -43,6 +44,7 @@ function FanInfo(props) {
     ],
     oddRowBGC: "#042444",
     evenRowBGC: "#042c4c",
+    // columnWidth: data.length > 12 ? [50, 136] : [88, 256],
     columnWidth: [50, 136],
     rowNum,
     hoverPause: false,
@@ -59,7 +61,9 @@ function FanInfo(props) {
         className="flex"
         style={{
           display: "flex",
+          flex: 1,
           gap: "20px",
+          // gap: data.length > 12 ? "20px" : 0,
           height: "100%",
           position: "relative",
         }}
@@ -67,9 +71,15 @@ function FanInfo(props) {
         <div className="flex-1" style={{ flex: 1 }}>
           <ScrollBoard
             config={config}
-            style={{ width: "280px", height: "100%" }}
+            style={{
+              width: "280px",
+              // width: data.length > 12 ? "280px" : "100%",
+              height: "100%",
+            }}
           />
         </div>
+        {/* {data.length > 12 && (
+          <> */}
         <div
           className="verticalLine"
           style={{
@@ -84,10 +94,12 @@ function FanInfo(props) {
         ></div>
         <div className="flex-1" style={{ flex: 1 }}>
           <ScrollBoard
-            config={config}
+            config={{ ...config, data: attachStyle(dataRight) }}
             style={{ width: "280px", height: "100%" }}
           />
         </div>
+        {/* </>
+        )} */}
       </div>
     </GraphBase>
   );

src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx

@@ -82,7 +82,20 @@ const SmokeTrendChart = (props) => {
           </Radio.Button>
         </Radio.Group>
       </div>
-      <ReactECharts option={options} style={{ height: "240px" }} />
+      {options && <ReactECharts option={options} style={{ height: "240px" }} />}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "96px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
     </div>
   );
 };
@@ -90,6 +103,7 @@ const SmokeTrendChart = (props) => {
 export default SmokeTrendChart;
 
 function getOptions(source, period, trend) {
+  if (trend[source].length === 0) return null;
   return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 38, right: 12, bottom: 20, left: 48 },

src/components/Common/TodayFaultType/index.jsx

@@ -153,8 +153,8 @@ function getOptions(data, chart_type) {
         data: (dataList || []).map((item) => item.category),
         axisLabel: {
           color: "#fff",
-          fontSize: 12,
-          rotate: 24,
+          fontSize: 10,
+          rotate: 20,
         },
         axisTick: { show: false },
         axisLine: {

src/components/Common/TodayGood/components/TodayTableData/index.jsx

@@ -57,7 +57,26 @@ const TodayTableData = (props) => {
   };
   return (
     <div className={cls.todayTableData}>
-      <ScrollBoard className={cls.paddingCeil} config={config} style={{ width: "100%", color: '#fffc' }} />
+      {config.data.lenght != 0 && (
+        <ScrollBoard
+          className={cls.paddingCeil}
+          config={config}
+          style={{ width: "100%", color: "#fffc" }}
+        />
+      )}
+      {config.data.lenght == 0 && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "48px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
     </div>
   );
 };

src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx

@@ -37,12 +37,27 @@ function Gas(props) {
       size={["long", "short"]}
     >
       {/* real echarts here */}
-      <ReactECharts
-        key={Math.random()}
-		option={options}
-        // option={getOptions([[21, 4, 74, 72, 9, 59, 63]], "氧气")}
-        style={{ height: "100%" }}
-      />
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          option={options}
+          // option={getOptions([[21, 4, 74, 72, 9, 59, 63]], "氧气")}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "48px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -52,6 +67,7 @@ export default Gas;
 
 function getOptions(period, trend) {
   console.log("getOptions", period, trend);
+  if (trend[period].length === 0) return null;
   // export default function getOptions(seriesData, name) {
   const colors = [
     "#FFD160",

src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx

@@ -36,12 +36,25 @@ function ElecCost(props) {
       size={["long", "short"]}
     >
       {/* real echarts here */}
-      <ReactECharts
+      { options && <ReactECharts
         key={Math.random()}
         option={options}
         // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
         style={{ height: "100%" }}
-      />
+      />}
+       {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "48px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -51,6 +64,7 @@ export default ElecCost;
 
 function getOptions(period, trend) {
   console.log("getOptions", period, trend);
+  if (trend[period].length === 0) return null;
   // export default function getOptions(seriesData, name) {
   const colors = [
     "#FFD160",

src/components/Modules/EnergyCostAnalysis/NO/index.jsx

@@ -46,19 +46,34 @@ function NO(props) {
       size={["long", "middle"]}
     >
       {/* real echarts here */}
-      <ReactECharts
-        key={Math.random()}
-        option={options}
-        // option={getOptions(
-        //   [
-        //     [148, 110, 140, 122, 84, 153, 89],
-        //     [88, 79, 75, 73, 33, 54, 31],
-        //     [60, 31, 65, 49, 51, 99, 58],
-        //   ],
-        //   "氧气"
-        // )}
-        style={{ height: "100%" }}
-      />
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          option={options}
+          // option={getOptions(
+          //   [
+          //     [148, 110, 140, 122, 84, 153, 89],
+          //     [88, 79, 75, 73, 33, 54, 31],
+          //     [60, 31, 65, 49, 51, 99, 58],
+          //   ],
+          //   "氧气"
+          // )}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "96px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -67,6 +82,7 @@ function NO(props) {
 export default NO;
 
 function getOptions(source, period, trend) {
+  if (trend[source].length == 0) return null;
   return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 38, right: 12, bottom: 20, left: 48 },

src/components/Modules/EnergyCostAnalysis/NO2/index.jsx

@@ -46,19 +46,34 @@ function Dust(props) {
       size={["long", "middle"]}
     >
       {/* real echarts here */}
-      <ReactECharts
-        key={Math.random()}
-        option={options}
-        // option={getOptions(
-        //   [
-        //     [91, 164, 88, 120, 167, 158, 43],
-        //     [30, 75, 52, 43, 73, 66, 36],
-        //     [61, 89, 36, 77, 94, 92, 7],
-        //   ],
-        //   "氧气"
-        // )}
-        style={{ height: "100%" }}
-      />
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          option={options}
+          // option={getOptions(
+          //   [
+          //     [91, 164, 88, 120, 167, 158, 43],
+          //     [30, 75, 52, 43, 73, 66, 36],
+          //     [61, 89, 36, 77, 94, 92, 7],
+          //   ],
+          //   "氧气"
+          // )}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "96px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -67,6 +82,7 @@ function Dust(props) {
 export default Dust;
 
 function getOptions(source, period, trend) {
+  if (trend[source].length == 0) return null;
   return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 38, right: 12, bottom: 20, left: 48 },

src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx

@@ -37,12 +37,27 @@ function NatGas(props) {
       size={["long", "short"]}
     >
       {/* real echarts here */}
-      <ReactECharts
-        key={Math.random()}
-        option={options}
-        // option={getOptions([[91, 69, 5, 10, 21, 46, 24]], "氧气")}
-        style={{ height: "100%" }}
-      />
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          option={options}
+          // option={getOptions([[91, 69, 5, 10, 21, 46, 24]], "氧气")}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "48px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -52,6 +67,7 @@ export default NatGas;
 
 function getOptions(period, trend) {
   console.log("getOptions", period, trend);
+  if (trend[period].length === 0) return null;
   // export default function getOptions(seriesData, name) {
   const colors = [
     "#FFD160",

src/components/Modules/EnergyCostAnalysis/O/index.jsx

@@ -46,19 +46,34 @@ function Oxygen(props) {
       size={["long", "middle"]}
     >
       {/* real echarts here */}
-      <ReactECharts
-        key={Math.random()}
-        option={options}
-        // option={getOptions(
-        //   [
-        //     [172, 165, 135, 35, 101, 53, 68], // 总量
-        //     [87, 68, 81, 33, 35, 44, 38], // 白班
-        //     [85, 97, 54, 2, 66, 9, 30], // 夜班
-        //   ],
-        //   "氧气"
-        // )}
-        style={{ height: "100%" }}
-      />
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          option={options}
+          // option={getOptions(
+          //   [
+          //     [172, 165, 135, 35, 101, 53, 68], // 总量
+          //     [87, 68, 81, 33, 35, 44, 38], // 白班
+          //     [85, 97, 54, 2, 66, 9, 30], // 夜班
+          //   ],
+          //   "氧气"
+          // )}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "96px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -67,6 +82,7 @@ function Oxygen(props) {
 export default Oxygen;
 
 function getOptions(source, period, trend) {
+  if (trend[source].length == 0) return null;
   return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 38, right: 12, bottom: 20, left: 48 },

src/components/Modules/EnergyCostAnalysis/SO2/index.jsx

@@ -45,19 +45,34 @@ function SO2(props) {
       size={["long", "middle"]}
     >
       {/* real echarts here */}
-      <ReactECharts
-        key={Math.random()}
-        // option={getOptions(
-        // 	[
-        // 		[132, 155, 140, 83, 180, 67, 136],
-        // 		[83, 58, 60, 22, 80, 64, 43],
-        // 		[49, 97, 80, 61, 100, 3, 93],
-        // 	],
-        // 	'氧气',
-        // )}
-        option={options}
-        style={{ height: "100%" }}
-      />
+      {options && (
+        <ReactECharts
+          key={Math.random()}
+          // option={getOptions(
+          // 	[
+          // 		[132, 155, 140, 83, 180, 67, 136],
+          // 		[83, 58, 60, 22, 80, 64, 43],
+          // 		[49, 97, 80, 61, 100, 3, 93],
+          // 	],
+          // 	'氧气',
+          // )}
+          option={options}
+          style={{ height: "100%" }}
+        />
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "96px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
       {/* real table data here  */}
     </GraphBase>
   );
@@ -66,6 +81,7 @@ function SO2(props) {
 export default SO2;
 
 function getOptions(source, period, trend) {
+  if (trend[source].length == 0) return null;
   return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 38, right: 12, bottom: 20, left: 48 },