@@ -11,7 +11,7 @@ import { Switch } from "antd"; | |||
import { createPortal } from "react-dom"; | |||
const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"]; | |||
const LUNBO_INTERVAL = 60 * 1000; | |||
function App() { | |||
const { styles, value, setValue } = useSlider(100); | |||
const [navActive, setNavActive] = useState("窑炉总览"); | |||
@@ -22,7 +22,7 @@ function App() { | |||
if (lunbo) { | |||
timer = setInterval(() => { | |||
handleMenuChange(Menus[(Menus.indexOf(navActive) + 1) % Menus.length]); | |||
}, 5000); | |||
}, LUNBO_INTERVAL); | |||
} | |||
return () => { | |||
clearInterval(timer); | |||
@@ -109,6 +109,7 @@ function WindFrequence(props) { | |||
}, | |||
}; | |||
} else { | |||
console.log('runstate changeD!......') | |||
dataList = | |||
runState != null | |||
? Object.keys(runState).map((fan) => ({ | |||
@@ -57,7 +57,7 @@ function WindFrequence(props) { | |||
currentTempList[1 + lines.indexOf(dataSource) + "#"]) || | |||
[] | |||
); | |||
}, [dataSource]); | |||
}, [dataSource, currentTempList]); | |||
return ( | |||
<GraphBase | |||
@@ -44,6 +44,7 @@ function GraphBase(props) { | |||
selectWidth, | |||
legend, | |||
} = props; | |||
const descSmall = props.descSmall || false; | |||
const iconSrc = useIcon(icon); | |||
const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []); | |||
const [showChart, setShowChart] = useState(true); | |||
@@ -72,9 +73,9 @@ function GraphBase(props) { | |||
<span | |||
style={{ | |||
color: "#fff", | |||
fontSize: "14px", | |||
fontSize: "calc(14px * var(--scale))", | |||
lineHeight: 1, | |||
paddingLeft: "12px", | |||
paddingLeft: "calc(12px * var(--scale))", | |||
}} | |||
> | |||
- 无 - | |||
@@ -105,7 +106,7 @@ function GraphBase(props) { | |||
<div className={cls.graphBaseTitle}> | |||
<img src={iconSrc} alt="#" /> | |||
<h2>{title}</h2> | |||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>} | |||
{desc && <div className={`${cls.graphBaseDesc} ${descSmall ? cls.graphBaseDescSmall : ''}`}>{desc}</div>} | |||
</div> | |||
<div className={cls.graphBaseContent}> | |||
{switchOptions && ( | |||
@@ -93,6 +93,11 @@ | |||
color: #76fff9; | |||
} | |||
.graphBaseDescSmall { | |||
font-size: 16px; | |||
color: #76fff9; | |||
} | |||
.graphBaseSwitch { | |||
position: absolute; | |||
top: 30px; | |||
@@ -9,6 +9,7 @@ | |||
.xc-date-selector-menu .ant-select-item-option-content { | |||
text-align: center; | |||
font-size: calc(14px * var(--scale)); | |||
} | |||
.xc-date-selector-menu .ant-select-item-option-selected { | |||
@@ -20,10 +21,16 @@ | |||
background-color: #02457E !important; | |||
color: #fff !important; | |||
} | |||
.xc-date-selector-menu .ant-select-item-option { | |||
/* padding: 5px 8px; */ | |||
padding: .3em .35em; | |||
min-height: unset; | |||
} | |||
/* | |||
.ant-select-selector::after { | |||
content: '\25BC' !important; | |||
visibility: visible !important; | |||
visibility: visible !important; L | |||
position: absolute; | |||
top: 2px; | |||
right: 22px; | |||
@@ -33,9 +33,9 @@ const SmokeTrendChart = (props) => { | |||
switch (period) { | |||
case "day": | |||
setDesc( | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
dayjs().add(1, "day").format("YYYY.MM.DD") + | |||
" 7点" | |||
); | |||
break; | |||
@@ -33,10 +33,9 @@ function FaultTotal(props) { | |||
// time hint | |||
let timeDesc = ""; | |||
const now = new Date(); | |||
switch (currentSelect) { | |||
case "日": | |||
timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点"; | |||
timeDesc = dayjs().format('YYYY.MM.DD') + " 7点 - " + dayjs().add(1, 'day').format('YYYY.MM.DD') + " 7点"; | |||
break; | |||
case "周": | |||
timeDesc = dayjs().subtract(7, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ; | |||
@@ -52,7 +51,6 @@ function FaultTotal(props) { | |||
<GraphBase | |||
icon="chart" | |||
title="产线缺陷统计" | |||
dateOptions={["日", "周", "月", "年"]} | |||
defaultSelect={currentSelect} | |||
onDateChange={handleDateChange} | |||
size={bgSize} | |||
@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react"; | |||
import { useSelector } from "react-redux"; | |||
import { useEffect, useState } from "react"; | |||
import * as echarts from "echarts"; | |||
import dayjs from "dayjs"; | |||
function FaultType(props) { | |||
const [init, setInit] = useState(true); | |||
@@ -16,6 +17,11 @@ function FaultType(props) { | |||
: []; | |||
const lines = currentStatistic.map((item) => item.name); | |||
const CHART_TYPE = "line"; // "pie" | "line"; | |||
const timestr = | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().add(1, "d").format("YYYY.MM.DD") + | |||
" 7点"; | |||
useEffect(() => { | |||
if (init == false) return; | |||
@@ -46,6 +52,8 @@ function FaultType(props) { | |||
<GraphBase | |||
icon="default" | |||
title="产线当日缺陷分类" | |||
desc={timestr} | |||
descSmall={true} | |||
dateOptions={[...lines]} | |||
defaultSelect={currentLine} | |||
onDateChange={handleLineChange} | |||
@@ -145,7 +153,7 @@ function getOptions(data, chart_type) { | |||
axisPointer: { | |||
type: "shadow", | |||
}, | |||
symbol: 'rect', | |||
symbol: "rect", | |||
className: "xc-chart-tooltip", | |||
// backgroundColor: '' | |||
}, | |||
@@ -209,7 +217,9 @@ function getOptions(data, chart_type) { | |||
color: "#fffc", | |||
}, | |||
data: (dataList || []).map((item) => | |||
item.value == null || isNaN(+item.value) ? null : (+item.value).toFixed(0) | |||
item.value == null || isNaN(+item.value) | |||
? null | |||
: (+item.value).toFixed(0) | |||
), | |||
}, | |||
], | |||
@@ -29,9 +29,9 @@ const GoodRateChart = (props) => { | |||
} | |||
const [timestr, setTimestr] = useState( | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
dayjs().add(1, "day").format("YYYY.MM.DD") + | |||
" 7点" | |||
); | |||
function handleDateChange(value) { | |||
@@ -40,9 +40,9 @@ const GoodRateChart = (props) => { | |||
switch (value) { | |||
case "日": | |||
setTimestr( | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
dayjs().add(1, "day").format("YYYY.MM.DD") + | |||
" 7点" | |||
); | |||
break; | |||
@@ -2,33 +2,40 @@ import cls from "./index.module.css"; | |||
import GradientText from "../../../Common/GradientText"; | |||
import { useSelector } from "react-redux"; | |||
import { useEffect, useState } from "react"; | |||
import eIcon1 from "../../../../assets/Icon/dontknowwhatitis.png"; | |||
import eIcon2 from "../../../../assets/Icon/lightnen.png"; | |||
function Energy(props) { | |||
const [isPage1, setIsPage1] = useState(true); | |||
const [isPage1] = useState(props.page === 1); | |||
const energyInfo = useSelector((state) => state.energy?.info); | |||
useEffect(() => { | |||
const timer = setInterval(() => { | |||
setIsPage1((pre) => !pre); | |||
}, 10000); | |||
// useEffect(() => { | |||
// const timer = setInterval(() => { | |||
// setIsPage1((pre) => !pre); | |||
// }, 10000); | |||
return () => { | |||
clearInterval(timer); | |||
} | |||
}, []); | |||
// return () => { | |||
// clearInterval(timer); | |||
// } | |||
// }, []); | |||
return ( | |||
<div className={" " + cls.layout} style={{ color: "#fff" }}> | |||
<span | |||
className={cls.shadowBorder} | |||
className={`${cls.shadowBorder} ${cls.border}`} | |||
style={{ | |||
gridRow: "1 / 3", | |||
paddingTop: "104px", | |||
paddingLeft: "32px", | |||
userSelect: "none", | |||
textAlign: "center", | |||
paddingTop: "96px", | |||
}} | |||
> | |||
<GradientText text="能源" /> | |||
{isPage1 ? ( | |||
<img src={eIcon1} width={32} alt="eicon1" /> | |||
) : ( | |||
<img src={eIcon2} width={32} alt="eicon2" /> | |||
)} | |||
<GradientText text={"\u2002\u2002能源"} /> | |||
</span> | |||
{!isPage1 && ( | |||
<div | |||
@@ -65,7 +72,9 @@ function Energy(props) { | |||
{(+energyInfo?.elecQty7)?.toFixed(2) || 0} | |||
</span> | |||
</div> | |||
<div className={cls.shadowBorder + " " + cls.infoText}> | |||
<div | |||
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border} | |||
> | |||
<span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span> | |||
<span | |||
style={{ | |||
@@ -77,7 +86,9 @@ function Energy(props) { | |||
{(+energyInfo?.elecQty4)?.toFixed(2) || 0} | |||
</span> | |||
</div> | |||
<div className={cls.shadowBorder + " " + cls.infoText}> | |||
<div | |||
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border} | |||
> | |||
<span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(总量)/kWh</span> | |||
<span | |||
style={{ | |||
@@ -118,7 +129,9 @@ function Energy(props) { | |||
</div> | |||
<div | |||
style={{ flex: 1 }} | |||
className={cls.shadowBorder + " " + cls.infoText} | |||
className={ | |||
cls.shadowBorder + " " + cls.infoText + " " + cls.border | |||
} | |||
> | |||
<span style={{ lineHeight: 1.5 }}>余热发电(总量)/kWh</span> | |||
<span | |||
@@ -144,13 +157,17 @@ function Energy(props) { | |||
{energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"} | |||
</span> | |||
</span> | |||
<span className={cls.shadowBorder + " " + cls.infoText}> | |||
<span | |||
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border} | |||
> | |||
<span style={{ lineHeight: 1.5 }}>电耗量/kWh</span> | |||
<span style={{ lineHeight: 1.5 }}> | |||
{(+energyInfo?.elecQty2)?.toFixed(2) || 0} | |||
</span> | |||
</span> | |||
<span className={cls.shadowBorder + " " + cls.infoText}> | |||
<span | |||
className={cls.shadowBorder + " " + cls.infoText + " " + cls.border} | |||
> | |||
<span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span> | |||
<span style={{ lineHeight: 1.5 }}> | |||
{energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"} | |||
@@ -4,7 +4,8 @@ | |||
/* grid-template-columns: 133px 158px 292px 292px; */ | |||
grid-template-columns: 125px 250px 250px 250px; | |||
/* grid-template-rows: 60px 60px; */ | |||
grid-template-rows: 129px 129px; | |||
grid-template-rows: auto; | |||
height: 100%; | |||
} | |||
.shadowBorder { | |||
@@ -13,6 +14,29 @@ | |||
padding: 4px; | |||
} | |||
.shadowBorder.border { | |||
position: relative; | |||
border-bottom: 2px solid #00fff7; | |||
} | |||
.shadowBorder.border::before, | |||
.shadowBorder.border::after { | |||
content: ""; | |||
position: absolute; | |||
bottom: 0; | |||
display: inline-block; | |||
height: 100%; | |||
width: 2px; | |||
background: linear-gradient(to top, #00fff7, #00fff708, transparent); | |||
} | |||
.shadowBorder.border::before { | |||
left: 0; | |||
} | |||
.shadowBorder.border::after { | |||
right: 0; | |||
} | |||
.infoText { | |||
text-align: center; | |||
font-size: 22px; | |||
@@ -27,6 +51,6 @@ | |||
} | |||
.infoText > span:last-child { | |||
color: #00FFF7; | |||
color: #00fff7; | |||
font-size: 24px; | |||
} |
@@ -6,17 +6,38 @@ import { useState } from "react"; | |||
import * as echarts from "echarts"; | |||
import dayjs from "dayjs"; | |||
function getTimeStr(period) { | |||
return { | |||
日: | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().add(1, "d").format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[period]; | |||
} | |||
function NO(props) { | |||
const dayTrend = useSelector((state) => state.smoke?.dayTrend); | |||
const weekTrend = useSelector((state) => state.smoke?.weekTrend); | |||
const monthTrend = useSelector((state) => state.smoke?.monthTrend); | |||
const yearTrend = useSelector((state) => state.smoke?.yearTrend); | |||
const [period, setPeriod] = useState("日"); | |||
const [timestr, setTimestr] = useState( | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") | |||
); | |||
let timestr = getTimeStr(period); | |||
const currentTrend = | |||
period === "日" | |||
@@ -33,35 +54,13 @@ function NO(props) { | |||
function handleDateChange(value) { | |||
setPeriod(value); | |||
setTimestr( | |||
{ | |||
日: | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[value] | |||
); | |||
timestr = getTimeStr(value); | |||
} | |||
return ( | |||
<GraphBase | |||
icon="smoke" | |||
title="氮氧化物" | |||
desc={`能耗趋势图 ${timestr}`} | |||
desc={`烟气趋势图 ${timestr}`} | |||
switchOptions={false} | |||
defaultSelect={period} | |||
onSwitch={handleSwitch} | |||
@@ -6,17 +6,38 @@ import { useState } from "react"; | |||
import * as echarts from "echarts"; | |||
import dayjs from "dayjs"; | |||
function getTimeStr(period) { | |||
return { | |||
日: | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().add(1, 'd').format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[period]; | |||
} | |||
function Dust(props) { | |||
const dayTrend = useSelector((state) => state.smoke?.dayTrend); | |||
const weekTrend = useSelector((state) => state.smoke?.weekTrend); | |||
const monthTrend = useSelector((state) => state.smoke?.monthTrend); | |||
const yearTrend = useSelector((state) => state.smoke?.yearTrend); | |||
const [period, setPeriod] = useState("日"); | |||
const [timestr, setTimestr] = useState( | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") | |||
); | |||
let timestr = getTimeStr(period); | |||
const currentTrend = | |||
period === "日" | |||
? dayTrend | |||
@@ -32,36 +53,14 @@ function Dust(props) { | |||
function handleDateChange(value) { | |||
setPeriod(value); | |||
setTimestr( | |||
{ | |||
日: | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[value] | |||
); | |||
timestr = getTimeStr(value); | |||
} | |||
return ( | |||
<GraphBase | |||
icon="smoke" | |||
title="颗粒物" | |||
desc={`能耗趋势图 ${timestr}`} | |||
desc={`烟气趋势图 ${timestr}`} | |||
switchOptions={false} | |||
defaultSelect={period} | |||
onSwitch={handleSwitch} | |||
@@ -8,7 +8,8 @@ import { lunarYear } from "../../../../utils/energeChartOption"; | |||
import dayjs from "dayjs"; | |||
function NatGas(props) { | |||
const elecTrend = useSelector((state) => state.energy.trend.natGas1); | |||
const natGasTrend = useSelector((state) => state.energy.trend.natGas1); | |||
const gasTrend = useSelector((state) => state.energy.trend.natGas2); | |||
const [period, setPeriod] = useState("周"); | |||
const [timestr, setTimestr] = useState( | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
@@ -18,7 +19,7 @@ function NatGas(props) { | |||
const options = getOptions( | |||
{ 周: "week", 月: "month", 年: "year" }[period], | |||
elecTrend ?? { week: [], month: [], year: [] } | |||
[natGasTrend, gasTrend] ?? { week: [], month: [], year: [] } | |||
); | |||
function handleSwitch(v) { | |||
@@ -50,7 +51,7 @@ function NatGas(props) { | |||
return ( | |||
<GraphBase | |||
icon="battery" | |||
title="天然气I" | |||
title="天然气" | |||
desc={`能耗趋势图 ${timestr}`} | |||
switchOptions={false} | |||
onSwitch={handleSwitch} | |||
@@ -60,6 +61,45 @@ function NatGas(props) { | |||
onDateChange={handleDateChange} | |||
size={["long", "middle"]} | |||
> | |||
<div | |||
className="nat-gas-legend" | |||
style={{ | |||
position: "absolute", | |||
top: 28, | |||
right: 144, | |||
display: "flex", | |||
gap: "24px", | |||
}} | |||
> | |||
<div className="legend-item"> | |||
<div | |||
className="legend-color" | |||
style={{ | |||
display: "inline-block", | |||
width: "12px", | |||
height: "12px", | |||
borderRadius: "2px", | |||
marginRight: "8px", | |||
backgroundColor: "#FFD160", | |||
}} | |||
/> | |||
<span style={{ color: "#fff" }}>天然气I</span> | |||
</div> | |||
<div className="legend-item"> | |||
<div | |||
className="legend-color" | |||
style={{ | |||
display: "inline-block", | |||
width: "12px", | |||
height: "12px", | |||
borderRadius: "2px", | |||
marginRight: "8px", | |||
backgroundColor: "#12FFF5", | |||
}} | |||
/> | |||
<span style={{ color: "#fff" }}>天然气II</span> | |||
</div> | |||
</div> | |||
{/* real echarts here */} | |||
{options && ( | |||
<ReactECharts | |||
@@ -89,8 +129,9 @@ function NatGas(props) { | |||
export default NatGas; | |||
function getOptions(period, trend) { | |||
if (trend[period].length === 0) return null; | |||
function getOptions(period, trendArr) { | |||
if (trendArr[0][period].length === 0 || trendArr[1][period].length === 0) | |||
return null; | |||
// export default function getOptions(seriesData, name) { | |||
const today = new Date(); | |||
const currentYear = today.getFullYear(); | |||
@@ -185,21 +226,38 @@ function getOptions(period, trend) { | |||
}, | |||
}, | |||
}, | |||
series: { | |||
data: trend[period].map((item) => | |||
item != null ? (+item).toFixed(2) : null | |||
), | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: colors[0] + "40" }, | |||
{ offset: 0.5, color: colors[0] + "20" }, | |||
{ offset: 1, color: colors[0] + "00" }, | |||
]), | |||
series: [ | |||
{ | |||
data: trendArr[0][period].map((item) => | |||
item != null ? (+item).toFixed(2) : null | |||
), | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: colors[0] + "40" }, | |||
{ offset: 0.5, color: colors[0] + "20" }, | |||
{ offset: 1, color: colors[0] + "00" }, | |||
]), | |||
}, | |||
}, | |||
}, | |||
{ | |||
data: trendArr[1][period].map((item) => | |||
item != null ? (+item).toFixed(2) : null | |||
), | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: colors[1] + "40" }, | |||
{ offset: 0.5, color: colors[1] + "20" }, | |||
{ offset: 1, color: colors[1] + "00" }, | |||
]), | |||
}, | |||
}, | |||
], | |||
// series: seriesData.map((arr, index) => ({ | |||
// name: index + 1 + '#' + name, | |||
// data: arr, | |||
@@ -6,17 +6,37 @@ import { useState } from "react"; | |||
import * as echarts from "echarts"; | |||
import dayjs from "dayjs"; | |||
function getTimeStr(period) { | |||
return { | |||
日: | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().add(1, "d").format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[period]; | |||
} | |||
function Oxygen(props) { | |||
const dayTrend = useSelector((state) => state.smoke?.dayTrend); | |||
const weekTrend = useSelector((state) => state.smoke?.weekTrend); | |||
const monthTrend = useSelector((state) => state.smoke?.monthTrend); | |||
const yearTrend = useSelector((state) => state.smoke?.yearTrend); | |||
const [period, setPeriod] = useState("日"); | |||
const [timestr, setTimestr] = useState( | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") | |||
); | |||
let timestr = getTimeStr(period); | |||
const currentTrend = | |||
period === "日" | |||
@@ -33,35 +53,13 @@ function Oxygen(props) { | |||
function handleDateChange(value) { | |||
setPeriod(value); | |||
setTimestr( | |||
{ | |||
日: | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[value] | |||
); | |||
timestr = getTimeStr(value); | |||
} | |||
return ( | |||
<GraphBase | |||
icon="smoke" | |||
title="氧气含量" | |||
desc={`能耗趋势图 ${timestr}`} | |||
desc={`烟气趋势图 ${timestr}`} | |||
switchOptions={false} | |||
defaultSelect={period} | |||
onSwitch={handleSwitch} | |||
@@ -6,6 +6,30 @@ import { useState } from "react"; | |||
import * as echarts from "echarts"; | |||
import dayjs from "dayjs"; | |||
function getTimeStr(period) { | |||
return { | |||
日: | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().add(1, 'd').format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[period]; | |||
} | |||
function SO2(props) { | |||
const dayTrend = useSelector((state) => state.smoke?.dayTrend); | |||
const weekTrend = useSelector((state) => state.smoke?.weekTrend); | |||
@@ -21,47 +45,22 @@ function SO2(props) { | |||
: period === "月" | |||
? monthTrend | |||
: yearTrend; | |||
const [timestr, setTimestr] = useState( | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") | |||
); | |||
let timestr = getTimeStr(period); | |||
const options = getOptions("SO2_float", period, currentTrend); | |||
function handleSwitch(v) {} | |||
function handleDateChange(value) { | |||
setPeriod(value); | |||
setTimestr( | |||
{ | |||
日: | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") + | |||
" 7点 - " + | |||
dayjs().format("YYYY.MM.DD") + | |||
" 7点", | |||
年: | |||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().endOf("year").format("YYYY.MM.") + | |||
"28", | |||
周: | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"), | |||
月: | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28", | |||
}[value] | |||
); | |||
timestr = getTimeStr(value); | |||
} | |||
return ( | |||
<GraphBase | |||
icon="smoke" | |||
title="二氧化硫" | |||
desc={`能耗趋势图 ${timestr}`} | |||
desc={`烟气趋势图 ${timestr}`} | |||
switchOptions={false} | |||
defaultSelect={period} | |||
onSwitch={handleSwitch} | |||
@@ -1,21 +1,23 @@ | |||
import cls from "./index.module.css"; | |||
import GradientText from "../../../Common/GradientText"; | |||
import { useSelector } from "react-redux"; | |||
import eIcon1 from '../../../../assets/Icon/oilstation.png'; | |||
function SmokeHandle(props) { | |||
const smokeInfo = useSelector((state) => state.smoke?.info); | |||
return ( | |||
<div className={" " + cls.smoke} style={{ color: "#fff" }}> | |||
<span | |||
className={cls.shadowBorder} | |||
className={cls.shadowBorder + " " + cls.border} | |||
style={{ | |||
gridRow: "1 / 3", | |||
paddingTop: "96px", | |||
paddingLeft: "32px", | |||
userSelect: "none", | |||
textAlign: "center", | |||
}} | |||
> | |||
<GradientText text="烟气处理" /> | |||
<img src={eIcon1} width={32} alt="eIcon1" /> | |||
<GradientText text={"\u2002\u2002烟气处理"} /> | |||
</span> | |||
<span | |||
className={cls.shadowBorder + " " + cls.infoText} | |||
@@ -32,13 +34,13 @@ function SmokeHandle(props) { | |||
{(+smokeInfo?.NOX_float)?.toFixed(2) || 0} | |||
</span> | |||
</span> | |||
<span className={cls.shadowBorder + " " + cls.infoText}> | |||
<span className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}> | |||
<span style={{ lineHeight: 1.5 }}>二氧化硫浓度 mg/m³</span> | |||
<span style={{ lineHeight: 1.5 }}> | |||
{(+smokeInfo?.SO2_float)?.toFixed(2) || 0} | |||
</span> | |||
</span> | |||
<span className={cls.shadowBorder + " " + cls.infoText}> | |||
<span className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}> | |||
<span style={{ lineHeight: 1.5 }}>颗粒物浓度 mg/m³</span> | |||
<span style={{ lineHeight: 1.5 }}> | |||
{(+smokeInfo?.dust_float)?.toFixed(2) || 0} | |||
@@ -3,7 +3,8 @@ | |||
gap: 6px; | |||
grid-template-columns: 187px 347px 347px; | |||
/* grid-template-rows: 60px 60px; */ | |||
grid-template-rows: 129px 129px; | |||
/* grid-template-rows: 129px 129px; */ | |||
grid-template-rows: auto; | |||
height: 100%; | |||
} | |||
@@ -13,6 +14,29 @@ | |||
padding: 4px; | |||
} | |||
.shadowBorder.border { | |||
position: relative; | |||
border-bottom: 2px solid #00fff7; | |||
} | |||
.shadowBorder.border::before, | |||
.shadowBorder.border::after { | |||
content: ""; | |||
position: absolute; | |||
bottom: 0; | |||
display: inline-block; | |||
height: 100%; | |||
width: 2px; | |||
background: linear-gradient(to top, #00fff7, #00fff708, transparent); | |||
} | |||
.shadowBorder.border::before { | |||
left: 0; | |||
} | |||
.shadowBorder.border::after { | |||
right: 0; | |||
} | |||
.infoText { | |||
text-align: center; | |||
font-size: 24px; | |||
@@ -17,6 +17,10 @@ export default function useSlider(defaultSize) { | |||
const v = (value / 100).toFixed(2); | |||
useEffect(() => { | |||
document.documentElement.style.setProperty('--scale', v); | |||
}, [v]) | |||
const styles = { | |||
transform: `scale(${v})`, | |||
// transform: `scale(${v * 24 / 33}, ${v})`, | |||
@@ -37,19 +37,22 @@ function EnergyAnalysis(props) { | |||
<NatGas /> | |||
</div> | |||
<div style={{ gridRow: 3 }}> | |||
<Gas /> | |||
{/* <Gas /> */} | |||
<ElecCost /> | |||
</div> | |||
</div> | |||
<div className={cls.vvgrid + " col-4"}> | |||
<div className=" electronic"> | |||
<Energy /> | |||
<Energy key="2" page={2} /> | |||
</div> | |||
<div className=" gas"> | |||
<SmokeHandle /> | |||
<Energy key="1" page={1} /> | |||
{/* <SmokeHandle /> */} | |||
</div> | |||
<div style={{ height: "100%" }}> | |||
<ElecCost /> | |||
{/* <ElecCost /> */} | |||
<SmokeHandle /> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -27,10 +27,18 @@ | |||
gap: 24px; | |||
grid-template-rows: 128px 389px 389px; | |||
} | |||
.vvgrid { | |||
display: grid; | |||
gap: 24px; | |||
grid-template-rows: 258px 258px 389px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 32px; | |||
/* display: grid; | |||
gap: 32px; | |||
grid-template-rows: 280px 280px 410px; */ | |||
} | |||
.vvgrid > div { | |||
flex: 1; | |||
} | |||
.shadowBorder { | |||
@@ -23,6 +23,8 @@ class XClient { | |||
this.name = config.name; | |||
this.ws = new WebSocket(config.url); | |||
this.timeout = config.timeout || 1000 * 5; | |||
this.heartbeatDelay = 1000 * 60 * 3; | |||
this.reconnectCount = 0; | |||
this.ws.onopen = () => { | |||
console.log(`[*] ${this.name} 初始化连接成功`); | |||