update
This commit is contained in:
lb
rodzic
4b043214ca
commit
a32e6fb591
@ -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 },
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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 },
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 },
|
||||
|
||||
@ -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 },
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 },
|
||||
|
||||
@ -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 },
|
||||
|
||||
Ładowanie…
Reference in New Issue
Block a user