mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
lb 2024-01-03 17:00:31 +08:00
parent bee1aedda4
commit 0b1d3aa4b3
22 changed files with 256 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@ -20,6 +20,7 @@ function App() {
<Head /> <Head />
{navActive == "能耗分析" && <EnergyAnalysis />} {navActive == "能耗分析" && <EnergyAnalysis />}
{navActive == "能耗分析" && <div className='bgDitu'></div>}
{navActive != "能耗分析" && <Home active={navActive} />} {navActive != "能耗分析" && <Home active={navActive} />}
</div> </div>
<Slider value={value} setValue={setValue} /> <Slider value={value} setValue={setValue} />

BIN
src/assets/ditu.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 7.5 MiB

16
src/components/Common/Feeder/feeder.css Normal file
View File

@ -0,0 +1,16 @@
.feeder {
flex: 1;
}
.feeder-running {
background: url(../../../assets/online.png);
background-size: 100% 100%;
}
.feeder-stop {
background: url(../../../assets/offline.png);
background-size: 100% 100%;
}
.feeder-error {
background: url(../../../assets/offline.png);
background-size: 100% 100%;
}

91
src/components/Common/Feeder/index.jsx
View File

@ -1,5 +1,6 @@
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import "./feeder.css";
function FeederStatus(props) { function FeederStatus(props) {
const feeder = useSelector((state) => state.feeder); const feeder = useSelector((state) => state.feeder);
@ -10,13 +11,15 @@ function FeederStatus(props) {
className="feeder" className="feeder"
style={{ style={{
position: "absolute", position: "absolute",
bottom: "128px", bottom: "56px",
left: "740px", left: "740px",
width: "300px", width: "400px",
height: "80px", height: "128px",
zIndex: "-1", zIndex: "-1",
display: "flex", display: "flex",
gap: "20px", gap: "8px",
paddingTop: "12px",
justifyContent: "center",
...props.style, ...props.style,
}} }}
animate={{ animate={{
@ -26,34 +29,74 @@ function FeederStatus(props) {
> >
<span <span
style={{ style={{
color: "#fff", position: "absolute",
border: "1px solid #fff", color: "#6be1e1",
padding: "12px", top: "-32px",
background: left: "20px",
leftFeeder == "运行" fontSize: "22px",
? "#0f03"
: leftFeeder == "故障"
? "#f003"
: "#da33",
}} }}
> >
投料机1 : {leftFeeder} 1#投料{" "}
<b
style={{
fontWeight: 400,
color:
leftFeeder == "故障"
? "#f83a35"
: leftFeeder == "运行"
? "#9af72b"
: "#ccc",
}}
>
{leftFeeder}
</b>
</span> </span>
<span <span
style={{ style={{
color: "#fff", position: "absolute",
border: "1px solid #fff", color: "#6be1e1",
padding: "12px", top: "-32px",
background: left: "230px",
rightFeeder == "运行" fontSize: "22px",
? "#0f03"
: rightFeeder == "故障"
? "#f003"
: "#da33",
}} }}
> >
投料机2 : {rightFeeder} 2#投料{" "}
<b
style={{
fontWeight: 400,
color:
rightFeeder == "故障"
? "#f83a35"
: rightFeeder == "运行"
? "#9af72b"
: "#ccc",
}}
>
{rightFeeder}
</b>
</span> </span>
<span
className={`
feeder ${
leftFeeder == "运行"
? "feeder-running"
: leftFeeder == "故障"
? "feeder-error"
: "feeder-stop"
}
`}
></span>
<span
className={`
feeder ${
rightFeeder == "运行"
? "feeder-running"
: rightFeeder == "故障"
? "feeder-error"
: "feeder-stop"
}
`}
></span>
</motion.div> </motion.div>
); );
} }

3
src/components/Common/GasFlow/index.jsx
View File

@ -113,7 +113,7 @@ function getOptions(showChart, hisState, runState) {
}, },
}, },
yAxis: { yAxis: {
name: "单位/m³", name: "单位m³/h",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
@ -144,6 +144,7 @@ function getOptions(showChart, hisState, runState) {
data: v, data: v,
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 6,
// label: { // label: {
// show: true, // show: true,
// position: "top", // position: "top",

2
src/components/Common/NatGasFlow/gasChart/chart.config.js
View File

@ -83,6 +83,8 @@ export default function getOptions(seriesData, name) {
name: index + 1 + "#" + name, name: index + 1 + "#" + name,
data: arr, data: arr,
type: "line", type: "line",
symbol: 'circle',
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[index] + "40" }, { offset: 0, color: colors[index] + "40" },

2
src/components/Common/TodayGood/components/GoodRateChart/index.jsx
View File

@ -186,6 +186,8 @@ function getOptions(dataList, showMore, dateType) {
{ {
data: list.map((item) => (item.sum * 100).toFixed(2)), data: list.map((item) => (item.sum * 100).toFixed(2)),
type: "line", type: "line",
symbol: 'circle',
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" }, { offset: 0, color: "#FFD16040" },

9
src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
View File

@ -115,7 +115,7 @@ function getOptions(period, trend) {
.fill(1) .fill(1)
.map((_, index) => { .map((_, index) => {
if (period == "week") { if (period == "week") {
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp dtimestamp
).getDate()}`; ).getDate()}`;
@ -166,6 +166,8 @@ function getOptions(period, trend) {
series: { series: {
data: trend[period], data: trend[period],
type: "line", type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" }, { offset: 0, color: colors[0] + "40" },
@ -188,6 +190,11 @@ function getOptions(period, trend) {
// })), // })),
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

23
src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
View File

@ -36,13 +36,15 @@ function ElecCost(props) {
size={["long", "middle"]} size={["long", "middle"]}
> >
{/* real echarts here */} {/* real echarts here */}
{ options && <ReactECharts {options && (
key={Math.random()} <ReactECharts
option={options} key={Math.random()}
// option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")} option={options}
style={{ height: "100%" }} // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
/>} style={{ height: "100%" }}
{!options && ( />
)}
{!options && (
<p <p
style={{ style={{
color: "#cccf", color: "#cccf",
@ -147,6 +149,8 @@ function getOptions(period, trend) {
series: { series: {
data: trend[period].map((item) => item.qty), data: trend[period].map((item) => item.qty),
type: "line", type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" }, { offset: 0, color: colors[0] + "40" },
@ -169,6 +173,11 @@ function getOptions(period, trend) {
// })), // })),
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

2
src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
View File

@ -20,7 +20,7 @@ function Energy(props) {
<span <span
className={cls.shadowBorder + " " + cls.infoText} className={cls.shadowBorder + " " + cls.infoText}
style={{ style={{
fontSize: "22px", fontSize: "24px",
lineHeight: "1.5", lineHeight: "1.5",
gridRow: "1 / 3", gridRow: "1 / 3",
}} }}

3
src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
View File

@ -14,7 +14,7 @@
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 20px; font-size: 24px;
line-height: 2.5; line-height: 2.5;
/* line-height: 20px; */ /* line-height: 20px; */
letter-spacing: 1px; letter-spacing: 1px;
@ -27,4 +27,5 @@
.infoText > span:last-child { .infoText > span:last-child {
color: #00FFF7; color: #00FFF7;
font-size: 28px;
} }

7
src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
View File

@ -143,6 +143,8 @@ function getOptions(source, period, trend) {
{ {
data: trend[source].map((item) => item.value), data: trend[source].map((item) => item.value),
type: "line", type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" }, { offset: 0, color: "#FFD16040" },
@ -187,6 +189,11 @@ function getOptions(source, period, trend) {
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

7
src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
View File

@ -165,6 +165,8 @@ function getOptions(period, trend) {
series: { series: {
data: trend[period], data: trend[period],
type: "line", type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" }, { offset: 0, color: colors[0] + "40" },
@ -187,6 +189,11 @@ function getOptions(period, trend) {
// })), // })),
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

7
src/components/Modules/EnergyCostAnalysis/O/index.jsx
View File

@ -143,6 +143,8 @@ function getOptions(source, period, trend) {
{ {
data: trend[source].map((item) => item.value), data: trend[source].map((item) => item.value),
type: "line", type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" }, { offset: 0, color: "#FFD16040" },
@ -187,6 +189,11 @@ function getOptions(source, period, trend) {
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

7
src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
View File

@ -142,6 +142,8 @@ function getOptions(source, period, trend) {
{ {
data: trend[source].map((item) => item.value), data: trend[source].map((item) => item.value),
type: "line", type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" }, { offset: 0, color: "#FFD16040" },
@ -186,6 +188,11 @@ function getOptions(source, period, trend) {
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

2
src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
View File

@ -37,7 +37,7 @@ function SmokeHandle(props) {
</span> </span>
</span> </span>
<span className={cls.shadowBorder + " " + cls.infoText}> <span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度:</span>{" "} <span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度</span>{" "}
<span style={{ lineHeight: 1.5 }}> <span style={{ lineHeight: 1.5 }}>
{smokeInfo?.dust_float || 0}mg/m³ {smokeInfo?.dust_float || 0}mg/m³
</span> </span>

3
src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
View File

@ -15,7 +15,7 @@
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 20px; font-size: 24px;
line-height: 2.5; line-height: 2.5;
/* line-height: 20px; */ /* line-height: 20px; */
letter-spacing: 1px; letter-spacing: 1px;
@ -28,4 +28,5 @@
.infoText > span:last-child { .infoText > span:last-child {
color: #00fff7; color: #00fff7;
font-size: 28px;
} }

190
src/hooks/getChartOption.js
View File

@ -1,97 +1,99 @@
import * as echarts from 'echarts'; import * as echarts from "echarts";
export default function getOptions(seriesData, name) { export default function getOptions(seriesData, name) {
const colors = [ const colors = [
'#FFD160', "#FFD160",
'#12FFF5', "#12FFF5",
'#2760FF', "#2760FF",
'#E80091', "#E80091",
'#8064ff', "#8064ff",
'#ff8a3b', "#ff8a3b",
'#8cd26d', "#8cd26d",
'#2aa1ff', "#2aa1ff",
]; ];
return { return {
color: colors, color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 }, grid: { top: 38, right: 12, bottom: 20, left: 48 },
legend: { legend: {
show: false, show: false,
icon: 'roundRect', icon: "roundRect",
top: 10, top: 10,
right: 10, right: 10,
padding: 0, padding: 0,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
itemGap: 3, itemGap: 3,
height: 8, height: 8,
textStyle: { textStyle: {
color: '#DFF1FE', color: "#DFF1FE",
fontSize: 10, fontSize: 10,
}, },
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: Array(7) data: Array(7)
.fill(1) .fill(1)
.map((_, index) => { .map((_, index) => {
const today = new Date(); const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000; const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp, dtimestamp
).getDate()}`; ).getDate()}`;
}) })
.reverse(), .reverse(),
axisLabel: { axisLabel: {
color: '#fff', color: "#fff",
fontSize: 12, fontSize: 12,
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 1, width: 1,
color: '#213259', color: "#213259",
}, },
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: "单位m³/h",
nameTextStyle: { nameTextStyle: {
color: '#fff', color: "#fff",
fontSize: 10, fontSize: 10,
align: 'right', align: "right",
}, },
type: 'value', type: "value",
axisLabel: { axisLabel: {
color: '#fff', color: "#fff",
fontSize: 12, fontSize: 12,
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#213259', color: "#213259",
}, },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#213259a0', color: "#213259a0",
}, },
}, },
}, },
series: seriesData.map((arr, index) => ({ series: seriesData.map((arr, index) => ({
name: index + 1 + '#' + name, name: index + 1 + "#" + name,
data: arr, data: arr,
type: 'line', symbol: "circle",
areaStyle: { symbolSize: 6,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ type: "line",
{ offset: 0, color: colors[index] + '40' }, areaStyle: {
{ offset: 0.5, color: colors[index] + '20' }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: colors[index] + '00' }, { offset: 0, color: colors[index] + "40" },
]), { offset: 0.5, color: colors[index] + "20" },
}, { offset: 1, color: colors[index] + "00" },
})), ]),
tooltip: { },
trigger: 'axis', })),
}, tooltip: {
}; trigger: "axis",
},
};
} }

4
src/index.css
View File

@ -71,7 +71,7 @@ body {
} }
.bgDitu { .bgDitu {
position: fixed; position: absolute;
z-index: -1000; z-index: -1000;
top: 0; top: 0;
left: 0; left: 0;
@ -79,7 +79,7 @@ body {
height: 100%; height: 100%;
/* background: #f003; */ /* background: #f003; */
background: url(./assets/ditu.png) no-repeat; background: url(./assets/ditu.png) no-repeat;
background-position: -800px 0; /* background-position: -800px 0; */
background-size: 100%; background-size: 100%;
} }

1
src/pages/EnergyCostAnalysis/index.jsx
View File

@ -14,7 +14,6 @@ import Gas from "../../components/Modules/EnergyCostAnalysis/BadGas";
function EnergyAnalysis(props) { function EnergyAnalysis(props) {
return ( return (
<div className={cls.grid}> <div className={cls.grid}>
<div className={cls.bgDitu}></div>
<div className={cls.vgrid + " col-1"}> <div className={cls.vgrid + " col-1"}>
{/* <SmokeHandle /> */} {/* <SmokeHandle /> */}
<div style={{ gridRow: "1 / 3" }}> <div style={{ gridRow: "1 / 3" }}>

5
src/pages/EnergyCostAnalysis/index.module.css
View File

@ -1,4 +1,5 @@
.grid { .grid {
position: relative;
display: grid; display: grid;
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
@ -9,7 +10,7 @@
} }
.bgDitu { .bgDitu {
position: fixed; position: absolute;
z-index: -1000; z-index: -1000;
top: 0; top: 0;
left: 0; left: 0;
@ -17,7 +18,7 @@
height: 100%; height: 100%;
/* background: #f003; */ /* background: #f003; */
background: url(../../assets/ditu.png) no-repeat; background: url(../../assets/ditu.png) no-repeat;
background-position: -800px 0; /* background-position: -800px 0; */
background-size: 100%; background-size: 100%;
} }

7
src/utils/energeChartOption.js
View File

@ -99,6 +99,8 @@ export function getOptions(period, source, trend, options={}) {
? trend[period].map((item) => item.qty) ? trend[period].map((item) => item.qty)
: trend[period], : trend[period],
type: "line", type: "line",
symbol: 'circle',
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" }, { offset: 0, color: "#FFD16040" },
@ -111,6 +113,11 @@ export function getOptions(period, source, trend, options={}) {
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
...options ...options
}; };