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

update

Browse Source
This commit is contained in:
lb
2023-12-27 16:44:24 +08:00
parent b35cf01fc8
commit b57b65ffd4
5 changed files with 154 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/components/Common/Energy/EnergyCostChart/index.jsx
View File

@@ -1,126 +1,141 @@
import cls from './index.module.css';
import { randomInt } from '../../../../utils';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
import cls from "./index.module.css";
import { randomInt } from "../../../../utils";
import * as echarts from "echarts";
import { Switch, Radio } from "antd";
import ReactECharts from "echarts-for-react";
const EnergyCostChart = (props) => {
const options = {
color: ['#FFD160', '#12FFF5', '#2760FF'],
grid: { top: 32, right: 12, bottom: 56, left: 48 },
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³',
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',
},
},
interval: 10,
min: 0,
max: 100,
},
series: [
{
data: Array(7)
.fill(1)
.map((_) => {
return randomInt(60, 100);
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFD16040' },
{ offset: 0.5, color: '#FFD16020' },
{ offset: 1, color: '#FFD16010' },
]),
},
// smooth: true,
},
],
tooltip: {
trigger: 'axis',
},
};
const options = {
color: ["#FFD160", "#12FFF5", "#2760FF"],
grid: { top: 32, right: 12, bottom: 56, left: 48 },
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³",
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",
},
},
interval: 10,
min: 0,
max: 100,
},
series: [
{
data: Array(7)
.fill(1)
.map((_) => {
return randomInt(60, 100);
}),
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD16040" },
{ offset: 0.5, color: "#FFD16020" },
{ offset: 1, color: "#FFD16010" },
]),
},
// smooth: true,
},
],
tooltip: {
trigger: "axis",
},
};
function handleSwitchChange(val) {
}
function handleSwitchChange(val) {}
return (
<div className={cls.energyCostChart}>
<div className={cls.titleBar}>
<h2>能耗趋势图</h2>
<Switch defaultChecked onChange={handleSwitchChange} />
<div className={cls.legend}>
<span className="legend__title">班次详情</span>
<ul className="legend__list">
<li>总量</li>
</ul>
</div>
<Radio.Group
defaultValue="week"
buttonStyle="solid"
className={cls.radioGroup}
>
<Radio.Button value="day" className="radio-group__item">
日
</Radio.Button>
<Radio.Button value="week" className="radio-group__item">
周
</Radio.Button>
<Radio.Button value="month" className="radio-group__item">
月
</Radio.Button>
<Radio.Button value="year" className="radio-group__item">
年
</Radio.Button>
</Radio.Group>
</div>
<div className="flex-1">
<ReactECharts option={options} style={{ height: '180px' }} />
</div>
</div>
);
return (
<div className={cls.energyCostChart}>
<div className={cls.titleBar}>
<h2>能耗趋势图</h2>
</div>
<div className={`${cls.choiceBar} flex items-center justify-between`}>
<Radio.Group
defaultValue="oxygen"
buttonStyle="solid"
className={`${cls.radioGroup} flex items-center justify-between`}
>
<Radio.Button value="oxygen" className="radio-group__item">
氧气含量
</Radio.Button>
<Radio.Button value="so2" className="radio-group__item">
二氧化硫
</Radio.Button>
<Radio.Button value="no" className="radio-group__item">
一氧化氮
</Radio.Button>
<Radio.Button value="no2" className="radio-group__item">
二氧化氮
</Radio.Button>
</Radio.Group>
<Radio.Group
defaultValue="week"
buttonStyle="solid"
className={cls.radioGroup}
>
<Radio.Button value="day" className="radio-group__item">
日
</Radio.Button>
<Radio.Button value="week" className="radio-group__item">
周
</Radio.Button>
<Radio.Button value="month" className="radio-group__item">
月
</Radio.Button>
<Radio.Button value="year" className="radio-group__item">
年
</Radio.Button>
</Radio.Group>
</div>
<div className="flex-1" style={{ marginTop: "8px" }}>
<ReactECharts option={options} style={{ height: "180px" }} />
</div>
</div>
);
};
export default EnergyCostChart;

7
src/components/Common/Energy/index.jsx
View File

@@ -9,12 +9,7 @@ function EnergyCost(props) {
if (energyInfo) {
}
return (
<Container
title="能耗"
icon="battery"
className={cls.energyCost}
pending={true}
>
<Container title="能耗" icon="battery" className={cls.energyCost}>
<div className={`flex flex-col`}>
<div className={`${cls.cost__info} flex`}>
<div