update
This commit is contained in:
lb
parent
b35cf01fc8
commit
b57b65ffd4
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -64,6 +64,7 @@ function FaultTotal(props) {
|
||||
export default FaultTotal;
|
||||
|
||||
function preHandleStatisticData(data, legend) {
|
||||
console.table(data);
|
||||
const obj = {};
|
||||
data.forEach((item) => {
|
||||
obj[item.name] = {};
|
||||
@ -72,6 +73,7 @@ function preHandleStatisticData(data, legend) {
|
||||
});
|
||||
});
|
||||
|
||||
console.log("obj", obj)
|
||||
const series = Array(legend.length)
|
||||
.fill(1)
|
||||
.map((_) => ({
|
||||
|
||||
@ -3,7 +3,6 @@ import "./overwrite.css"; // 覆写 antd 默认样式，全局
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import * as echarts from "echarts";
|
||||
import { Switch, Radio } from "antd";
|
||||
import { randomInt } from "../../../../../utils";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@ -33,7 +32,7 @@ const GoodRateChart = (props) => {
|
||||
}
|
||||
|
||||
// 根据日期类型，数据列表，是否展示班次数据，生成对应的 options
|
||||
const options = getOptions(cutting.chart[dateType], showMore);
|
||||
const options = getOptions(cutting.chart[dateType], showMore, dateType);
|
||||
|
||||
return (
|
||||
<div className={cls.GoodRateChart}>
|
||||
@ -80,7 +79,7 @@ const GoodRateChart = (props) => {
|
||||
|
||||
export default GoodRateChart;
|
||||
|
||||
function getOptions(dataList, showMore) {
|
||||
function getOptions(dataList, showMore, dateType) {
|
||||
console.log("showmore", showMore);
|
||||
const list = [...dataList].sort((a, b) => a.dataTime - b.dataTime);
|
||||
// data: Array(7)
|
||||
@ -97,11 +96,19 @@ function getOptions(dataList, showMore) {
|
||||
const grid = { top: 28, right: 12, bottom: 48, left: 48 };
|
||||
const xAxis = {
|
||||
type: "category",
|
||||
data: list.map((item) => item.dataTime.split("T")[0]),
|
||||
data: list.map((item) =>
|
||||
dateType == "day"
|
||||
? item.dataTime.split("T")[1]
|
||||
: item.dataTime.split("T")[0]
|
||||
),
|
||||
// data: list.map((item) => {
|
||||
// console.log("datetime", item.dataTime);
|
||||
// return item.dataTime.split("T")[0];
|
||||
// }),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
rotate: 45,
|
||||
fontSize: 10,
|
||||
rotate: 25,
|
||||
margin: 13,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
@ -167,13 +174,13 @@ function getOptions(dataList, showMore) {
|
||||
yAxis,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
formatter: "{b} {c}%",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fffc'
|
||||
color: "#fffc",
|
||||
},
|
||||
className: "xc-chart-tooltip",
|
||||
// backgroundColor: ''
|
||||
|
||||
@ -177,9 +177,9 @@ new XClient(
|
||||
);
|
||||
|
||||
const newUser = uuidv4()
|
||||
console.log("websocket user:", newUser);
|
||||
new XClient(
|
||||
"ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
|
||||
"ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
|
||||
// "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
|
||||
// "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
|
||||
"MES_DATA",
|
||||
(msg) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user