Tento commit je obsažen v:
lb 2024-01-02 14:33:21 +08:00
rodič 4b043214ca
revize a32e6fb591
14 změnil soubory, kde provedl 261 přidání a 86 odebrání

Zobrazit soubor

@ -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 },

Zobrazit soubor

@ -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>

Zobrazit soubor

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

Zobrazit soubor

@ -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>
);

Zobrazit soubor

@ -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 },

Zobrazit soubor

@ -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: {

Zobrazit soubor

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

Zobrazit soubor

@ -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",

Zobrazit soubor

@ -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",

Zobrazit soubor

@ -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 },

Zobrazit soubor

@ -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 },

Zobrazit soubor

@ -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",

Zobrazit soubor

@ -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 },

Zobrazit soubor

@ -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 },