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