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

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

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

2
src/components/Common/TodayFaultTotal/index.jsx
View File

@ -64,6 +64,7 @@ function FaultTotal(props) {
export default FaultTotal; export default FaultTotal;
function preHandleStatisticData(data, legend) { function preHandleStatisticData(data, legend) {
console.table(data);
const obj = {}; const obj = {};
data.forEach((item) => { data.forEach((item) => {
obj[item.name] = {}; obj[item.name] = {};
@ -72,6 +73,7 @@ function preHandleStatisticData(data, legend) {
}); });
}); });
console.log("obj", obj)
const series = Array(legend.length) const series = Array(legend.length)
.fill(1) .fill(1)
.map((_) => ({ .map((_) => ({

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

@ -3,7 +3,6 @@ import "./overwrite.css"; // 覆写 antd 默认样式，全局
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Switch, Radio } from "antd"; import { Switch, Radio } from "antd";
import { randomInt } from "../../../../../utils";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@ -33,7 +32,7 @@ const GoodRateChart = (props) => {
} }
// 根据日期类型，数据列表，是否展示班次数据，生成对应的 options // 根据日期类型，数据列表，是否展示班次数据，生成对应的 options
const options = getOptions(cutting.chart[dateType], showMore); const options = getOptions(cutting.chart[dateType], showMore, dateType);
return ( return (
<div className={cls.GoodRateChart}> <div className={cls.GoodRateChart}>
@ -80,7 +79,7 @@ const GoodRateChart = (props) => {
export default GoodRateChart; export default GoodRateChart;
function getOptions(dataList, showMore) { function getOptions(dataList, showMore, dateType) {
console.log("showmore", showMore); console.log("showmore", showMore);
const list = [...dataList].sort((a, b) => a.dataTime - b.dataTime); const list = [...dataList].sort((a, b) => a.dataTime - b.dataTime);
// data: Array(7) // data: Array(7)
@ -97,11 +96,19 @@ function getOptions(dataList, showMore) {
const grid = { top: 28, right: 12, bottom: 48, left: 48 }; const grid = { top: 28, right: 12, bottom: 48, left: 48 };
const xAxis = { const xAxis = {
type: "category", 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: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 10,
rotate: 45, rotate: 25,
margin: 13, margin: 13,
}, },
axisTick: { show: false }, axisTick: { show: false },
@ -167,13 +174,13 @@ function getOptions(dataList, showMore) {
yAxis, yAxis,
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
color: '#fff', color: "#fff",
formatter: "{b} {c}%", formatter: "{b} {c}%",
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
textStyle: { textStyle: {
color: '#fffc' color: "#fffc",
}, },
className: "xc-chart-tooltip", className: "xc-chart-tooltip",
// backgroundColor: '' // backgroundColor: ''

4
src/utils/index.ts
View File

@ -177,9 +177,9 @@ new XClient(
); );
const newUser = uuidv4() const newUser = uuidv4()
console.log("websocket user:", newUser);
new XClient( 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", // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
"MES_DATA", "MES_DATA",
(msg) => { (msg) => {