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

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

@ -113,7 +113,7 @@ function getOptions(showChart, hisState, runState) {
},
},
yAxis: {
name: "单位/m³",
name: "单位m³/h",
nameTextStyle: {
color: "#fff",
fontSize: 10,
@ -144,6 +144,7 @@ function getOptions(showChart, hisState, runState) {
data: v,
type: "line",
symbol: "circle",
symbolSize: 6,
// label: {
// show: true,
// 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,
data: arr,
type: "line",
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ 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)),
type: "line",
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" },

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

@ -115,7 +115,7 @@ function getOptions(period, trend) {
.fill(1)
.map((_, index) => {
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(
dtimestamp
).getDate()}`;
@ -166,6 +166,8 @@ function getOptions(period, trend) {
series: {
data: trend[period],
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" },
@ -188,6 +190,11 @@ function getOptions(period, trend) {
// })),
tooltip: {
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"]}
>
{/* real echarts here */}
{ options && <ReactECharts
key={Math.random()}
option={options}
// option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
style={{ height: "100%" }}
/>}
{!options && (
{options && (
<ReactECharts
key={Math.random()}
option={options}
// option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
style={{ height: "100%" }}
/>
)}
{!options && (
<p
style={{
color: "#cccf",
@ -147,6 +149,8 @@ function getOptions(period, trend) {
series: {
data: trend[period].map((item) => item.qty),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" },
@ -169,6 +173,11 @@ function getOptions(period, trend) {
// })),
tooltip: {
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
className={cls.shadowBorder + " " + cls.infoText}
style={{
fontSize: "22px",
fontSize: "24px",
lineHeight: "1.5",
gridRow: "1 / 3",
}}

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

@ -14,7 +14,7 @@
.infoText {
text-align: center;
font-size: 20px;
font-size: 24px;
line-height: 2.5;
/* line-height: 20px; */
letter-spacing: 1px;
@ -27,4 +27,5 @@
.infoText > span:last-child {
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),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" },
@ -187,6 +189,11 @@ function getOptions(source, period, trend) {
],
tooltip: {
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: {
data: trend[period],
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] + "40" },
@ -187,6 +189,11 @@ function getOptions(period, trend) {
// })),
tooltip: {
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),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" },
@ -187,6 +189,11 @@ function getOptions(source, period, trend) {
],
tooltip: {
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),
type: "line",
symbol: "circle",
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" },
@ -186,6 +188,11 @@ function getOptions(source, period, trend) {
],
tooltip: {
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 className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度:</span>{" "}
<span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度</span>{" "}
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.dust_float || 0}mg/m³
</span>

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

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

4
src/index.css
View File

@ -71,7 +71,7 @@ body {
}
.bgDitu {
position: fixed;
position: absolute;
z-index: -1000;
top: 0;
left: 0;
@ -79,7 +79,7 @@ body {
height: 100%;
/* background: #f003; */
background: url(./assets/ditu.png) no-repeat;
background-position: -800px 0;
/* background-position: -800px 0; */
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) {
return (
<div className={cls.grid}>
<div className={cls.bgDitu}></div>
<div className={cls.vgrid + " col-1"}>
{/* <SmokeHandle /> */}
<div style={{ gridRow: "1 / 3" }}>

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

@ -1,4 +1,5 @@
.grid {
position: relative;
display: grid;
justify-content: center;
gap: 24px;
@ -9,7 +10,7 @@
}
.bgDitu {
position: fixed;
position: absolute;
z-index: -1000;
top: 0;
left: 0;
@ -17,7 +18,7 @@
height: 100%;
/* background: #f003; */
background: url(../../assets/ditu.png) no-repeat;
background-position: -800px 0;
/* background-position: -800px 0; */
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],
type: "line",
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" },
@ -111,6 +113,11 @@ export function getOptions(period, source, trend, options={}) {
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
},
...options
};