Merge branch 'bugfix#4.4'
This commit is contained in:
commit
19ea3287ae
@ -2,14 +2,10 @@
|
|||||||
import useIcon from "../../../hooks/useIcon";
|
import useIcon from "../../../hooks/useIcon";
|
||||||
import cls from "./index.module.css";
|
import cls from "./index.module.css";
|
||||||
import { useMemo, useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
import { Switch, Select, Radio } from "antd";
|
import { Switch, Select } from "antd";
|
||||||
import "./selector.style.overwrite.css";
|
import "./selector.style.overwrite.css";
|
||||||
// import { Switch, Select, Space } from 'antd';
|
|
||||||
import triangle from "../../../assets/Icon/triangle.svg";
|
import triangle from "../../../assets/Icon/triangle.svg";
|
||||||
|
|
||||||
const handleChange = (value: string) => {
|
|
||||||
console.log(`selected ${value}`);
|
|
||||||
};
|
|
||||||
function choseBg(size) {
|
function choseBg(size) {
|
||||||
const [width, height] = size;
|
const [width, height] = size;
|
||||||
return width === "long" && height === "middle"
|
return width === "long" && height === "middle"
|
||||||
@ -53,7 +49,6 @@ function GraphBase(props) {
|
|||||||
const [showChart, setShowChart] = useState(true);
|
const [showChart, setShowChart] = useState(true);
|
||||||
|
|
||||||
let dto = null;
|
let dto = null;
|
||||||
let timerangeHint = null;
|
|
||||||
const switchStyle = {};
|
const switchStyle = {};
|
||||||
|
|
||||||
if (props.switchPosition) {
|
if (props.switchPosition) {
|
||||||
@ -65,7 +60,6 @@ function GraphBase(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (dateOptions) {
|
if (dateOptions) {
|
||||||
console.log("dateoptions ", title, dateOptions);
|
|
||||||
dto = (
|
dto = (
|
||||||
<Select
|
<Select
|
||||||
defaultValue={defaultSelect || dateOptions[0]}
|
defaultValue={defaultSelect || dateOptions[0]}
|
||||||
@ -89,9 +83,6 @@ function GraphBase(props) {
|
|||||||
onChange={(value, option) => onDateChange(value)}
|
onChange={(value, option) => onDateChange(value)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
// <Radio.Button value={item} key={item} className="radio-group__item">
|
|
||||||
// {item}
|
|
||||||
// </Radio.Button>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSwitchChange(v) {
|
function handleSwitchChange(v) {
|
||||||
@ -137,19 +128,7 @@ function GraphBase(props) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{
|
{dateOptions && dto}
|
||||||
dateOptions && dto
|
|
||||||
// (
|
|
||||||
// <Radio.Group
|
|
||||||
// value={defaultSelect || dateOptions[0]}
|
|
||||||
// buttonStyle="solid"
|
|
||||||
// className={cls.graphBaseDate + " " + cls.radioGroup}
|
|
||||||
// onChange={({ target }) => onDateChange(target.value)}
|
|
||||||
// >
|
|
||||||
// {dto}
|
|
||||||
// </Radio.Group>
|
|
||||||
// )
|
|
||||||
}
|
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -76,7 +76,7 @@ const SmokeTrendChart = (props) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
function handleSourceChange(value) {
|
function handleSourceChange(value) {
|
||||||
setPeriod(
|
setSource(
|
||||||
{
|
{
|
||||||
氧气: "O2_float",
|
氧气: "O2_float",
|
||||||
氮氧化物: "NOX_float",
|
氮氧化物: "NOX_float",
|
||||||
|
@ -8,7 +8,7 @@ import * as echarts from "echarts";
|
|||||||
|
|
||||||
function FaultType(props) {
|
function FaultType(props) {
|
||||||
const [init, setInit] = useState(true);
|
const [init, setInit] = useState(true);
|
||||||
const [currentLine, setCurrentLine] = useState("");
|
const [currentLine, setCurrentLine] = useState("Y61");
|
||||||
const isra = useSelector((state) => state.isra);
|
const isra = useSelector((state) => state.isra);
|
||||||
const currentStatistic = isra.dayStatistic || [];
|
const currentStatistic = isra.dayStatistic || [];
|
||||||
const currentLineStatistic =
|
const currentLineStatistic =
|
||||||
|
@ -86,9 +86,7 @@ function ElecCost(props) {
|
|||||||
export default ElecCost;
|
export default ElecCost;
|
||||||
|
|
||||||
function getOptions(period, trend) {
|
function getOptions(period, trend) {
|
||||||
console.log("getOptions", period, trend);
|
|
||||||
if (trend[period].length === 0) return null;
|
if (trend[period].length === 0) return null;
|
||||||
// export default function getOptions(seriesData, name) {
|
|
||||||
const colors = [
|
const colors = [
|
||||||
"#FFD160",
|
"#FFD160",
|
||||||
"#12FFF5",
|
"#12FFF5",
|
||||||
|
@ -29,20 +29,10 @@ function NO(props) {
|
|||||||
|
|
||||||
const options = getOptions("NOX_float", period, currentTrend);
|
const options = getOptions("NOX_float", period, currentTrend);
|
||||||
|
|
||||||
function handleSwitch(v) {
|
function handleSwitch(v) {}
|
||||||
// console.log('switched ', v);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function handleDateChange(value) {
|
function handleDateChange(value) {
|
||||||
setPeriod(
|
setPeriod(value);
|
||||||
{
|
|
||||||
日: "day",
|
|
||||||
周: "week",
|
|
||||||
月: "month",
|
|
||||||
年: "year",
|
|
||||||
}[value]
|
|
||||||
);
|
|
||||||
setTimestr(
|
setTimestr(
|
||||||
{
|
{
|
||||||
日:
|
日:
|
||||||
@ -76,23 +66,13 @@ function NO(props) {
|
|||||||
defaultSelect={period}
|
defaultSelect={period}
|
||||||
onSwitch={handleSwitch}
|
onSwitch={handleSwitch}
|
||||||
dateOptions={["日", "周", "月", "年"]}
|
dateOptions={["日", "周", "月", "年"]}
|
||||||
// legend={["总量", "白班", "夜班"]}
|
|
||||||
onDateChange={handleDateChange}
|
onDateChange={handleDateChange}
|
||||||
size={["long", "middle"]}
|
size={["long", "middle"]}
|
||||||
>
|
>
|
||||||
{/* real echarts here */}
|
|
||||||
{options && (
|
{options && (
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
key={Math.random()}
|
key={Math.random()}
|
||||||
option={options}
|
option={options}
|
||||||
// option={getOptions(
|
|
||||||
// [
|
|
||||||
// [148, 110, 140, 122, 84, 153, 89],
|
|
||||||
// [88, 79, 75, 73, 33, 54, 31],
|
|
||||||
// [60, 31, 65, 49, 51, 99, 58],
|
|
||||||
// ],
|
|
||||||
// "氧气"
|
|
||||||
// )}
|
|
||||||
style={{ height: "100%" }}
|
style={{ height: "100%" }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -109,7 +89,6 @@ function NO(props) {
|
|||||||
暂无数据
|
暂无数据
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{/* real table data here */}
|
|
||||||
</GraphBase>
|
</GraphBase>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -127,16 +106,6 @@ function getOptions(source, period, trend) {
|
|||||||
grid: { top: 40, right: 12, bottom: 20, left: 64 },
|
grid: { top: 40, right: 12, bottom: 20, left: 64 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
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(),
|
|
||||||
data: trend[source].map((item) => item.time),
|
data: trend[source].map((item) => item.time),
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
@ -174,9 +143,6 @@ function getOptions(source, period, trend) {
|
|||||||
color: "#213259a0",
|
color: "#213259a0",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// interval: 10,
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@ -193,40 +159,7 @@ function getOptions(source, period, trend) {
|
|||||||
{ offset: 1, color: "#FFD16010" },
|
{ offset: 1, color: "#FFD16010" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
// smooth: true,
|
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// 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: "#12FFF540" },
|
|
||||||
// { offset: 0.5, color: "#12FFF520" },
|
|
||||||
// { offset: 1, color: "#12FFF510" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// 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: "#2760FF40" },
|
|
||||||
// { offset: 0.5, color: "#2760FF20" },
|
|
||||||
// { offset: 1, color: "#2760FF10" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
@ -234,7 +167,6 @@ function getOptions(source, period, trend) {
|
|||||||
type: "shadow",
|
type: "shadow",
|
||||||
},
|
},
|
||||||
className: "xc-chart-tooltip",
|
className: "xc-chart-tooltip",
|
||||||
// backgroundColor: ''
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -28,20 +28,10 @@ function Dust(props) {
|
|||||||
|
|
||||||
const options = getOptions("dust_float", period, currentTrend);
|
const options = getOptions("dust_float", period, currentTrend);
|
||||||
|
|
||||||
function handleSwitch(v) {
|
function handleSwitch(v) {}
|
||||||
// console.log('switched ', v);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function handleDateChange(value) {
|
function handleDateChange(value) {
|
||||||
setPeriod(
|
setPeriod(value);
|
||||||
{
|
|
||||||
日: "day",
|
|
||||||
周: "week",
|
|
||||||
月: "month",
|
|
||||||
年: "year",
|
|
||||||
}[value]
|
|
||||||
);
|
|
||||||
setTimestr(
|
setTimestr(
|
||||||
{
|
{
|
||||||
日:
|
日:
|
||||||
@ -67,7 +57,6 @@ function Dust(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GraphBase
|
<GraphBase
|
||||||
icon="smoke"
|
icon="smoke"
|
||||||
@ -77,23 +66,13 @@ function Dust(props) {
|
|||||||
defaultSelect={period}
|
defaultSelect={period}
|
||||||
onSwitch={handleSwitch}
|
onSwitch={handleSwitch}
|
||||||
dateOptions={["日", "周", "月", "年"]}
|
dateOptions={["日", "周", "月", "年"]}
|
||||||
// legend={["总量", "白班", "夜班"]}
|
|
||||||
onDateChange={handleDateChange}
|
onDateChange={handleDateChange}
|
||||||
size={["long", "middle"]}
|
size={["long", "middle"]}
|
||||||
>
|
>
|
||||||
{/* real echarts here */}
|
|
||||||
{options && (
|
{options && (
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
key={Math.random()}
|
key={Math.random()}
|
||||||
option={options}
|
option={options}
|
||||||
// option={getOptions(
|
|
||||||
// [
|
|
||||||
// [91, 164, 88, 120, 167, 158, 43],
|
|
||||||
// [30, 75, 52, 43, 73, 66, 36],
|
|
||||||
// [61, 89, 36, 77, 94, 92, 7],
|
|
||||||
// ],
|
|
||||||
// "氧气"
|
|
||||||
// )}
|
|
||||||
style={{ height: "100%" }}
|
style={{ height: "100%" }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -110,7 +89,6 @@ function Dust(props) {
|
|||||||
暂无数据
|
暂无数据
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{/* real table data here */}
|
|
||||||
</GraphBase>
|
</GraphBase>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -128,16 +106,6 @@ function getOptions(source, period, trend) {
|
|||||||
grid: { top: 40, right: 12, bottom: 20, left: 64 },
|
grid: { top: 40, right: 12, bottom: 20, left: 64 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
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(),
|
|
||||||
data: trend[source].map((item) => item.time),
|
data: trend[source].map((item) => item.time),
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
@ -175,13 +143,9 @@ function getOptions(source, period, trend) {
|
|||||||
color: "#213259a0",
|
color: "#213259a0",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// interval: 10,
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
// (isNaN((+"f")) ? 0 : (+"f")).toFixed(2)
|
|
||||||
data: trend[source].map((item) =>
|
data: trend[source].map((item) =>
|
||||||
!(item.value == null || isNaN(+item.value))
|
!(item.value == null || isNaN(+item.value))
|
||||||
? (+item.value).toFixed(2)
|
? (+item.value).toFixed(2)
|
||||||
@ -197,40 +161,7 @@ function getOptions(source, period, trend) {
|
|||||||
{ offset: 1, color: "#FFD16010" },
|
{ offset: 1, color: "#FFD16010" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
// smooth: true,
|
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// 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: "#12FFF540" },
|
|
||||||
// { offset: 0.5, color: "#12FFF520" },
|
|
||||||
// { offset: 1, color: "#12FFF510" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// 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: "#2760FF40" },
|
|
||||||
// { offset: 0.5, color: "#2760FF20" },
|
|
||||||
// { offset: 1, color: "#2760FF10" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
@ -238,7 +169,6 @@ function getOptions(source, period, trend) {
|
|||||||
type: "shadow",
|
type: "shadow",
|
||||||
},
|
},
|
||||||
className: "xc-chart-tooltip",
|
className: "xc-chart-tooltip",
|
||||||
// backgroundColor: ''
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -29,19 +29,10 @@ function Oxygen(props) {
|
|||||||
|
|
||||||
const options = getOptions("O2_float", period, currentTrend);
|
const options = getOptions("O2_float", period, currentTrend);
|
||||||
|
|
||||||
function handleSwitch(v) {
|
function handleSwitch(v) {}
|
||||||
// console.log('switched ', v);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDateChange(value) {
|
function handleDateChange(value) {
|
||||||
setPeriod(
|
setPeriod(value);
|
||||||
{
|
|
||||||
日: "day",
|
|
||||||
周: "week",
|
|
||||||
月: "month",
|
|
||||||
年: "year",
|
|
||||||
}[value]
|
|
||||||
);
|
|
||||||
setTimestr(
|
setTimestr(
|
||||||
{
|
{
|
||||||
日:
|
日:
|
||||||
@ -75,23 +66,13 @@ function Oxygen(props) {
|
|||||||
defaultSelect={period}
|
defaultSelect={period}
|
||||||
onSwitch={handleSwitch}
|
onSwitch={handleSwitch}
|
||||||
dateOptions={["日", "周", "月", "年"]}
|
dateOptions={["日", "周", "月", "年"]}
|
||||||
// legend={["总量", "白班", "夜班"]}
|
|
||||||
onDateChange={handleDateChange}
|
onDateChange={handleDateChange}
|
||||||
size={["long", "middle"]}
|
size={["long", "middle"]}
|
||||||
>
|
>
|
||||||
{/* real echarts here */}
|
|
||||||
{options && (
|
{options && (
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
key={Math.random()}
|
key={Math.random()}
|
||||||
option={options}
|
option={options}
|
||||||
// option={getOptions(
|
|
||||||
// [
|
|
||||||
// [172, 165, 135, 35, 101, 53, 68], // 总量
|
|
||||||
// [87, 68, 81, 33, 35, 44, 38], // 白班
|
|
||||||
// [85, 97, 54, 2, 66, 9, 30], // 夜班
|
|
||||||
// ],
|
|
||||||
// "氧气"
|
|
||||||
// )}
|
|
||||||
style={{ height: "100%" }}
|
style={{ height: "100%" }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -108,7 +89,6 @@ function Oxygen(props) {
|
|||||||
暂无数据
|
暂无数据
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{/* real table data here */}
|
|
||||||
</GraphBase>
|
</GraphBase>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -175,9 +155,6 @@ function getOptions(source, period, trend) {
|
|||||||
color: "#213259a0",
|
color: "#213259a0",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// interval: 10,
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@ -196,40 +173,7 @@ function getOptions(source, period, trend) {
|
|||||||
{ offset: 1, color: "#FFD16010" },
|
{ offset: 1, color: "#FFD16010" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
// smooth: true,
|
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// 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: "#12FFF540" },
|
|
||||||
// { offset: 0.5, color: "#12FFF520" },
|
|
||||||
// { offset: 1, color: "#12FFF510" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// 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: "#2760FF40" },
|
|
||||||
// { offset: 0.5, color: "#2760FF20" },
|
|
||||||
// { offset: 1, color: "#2760FF10" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
@ -237,7 +181,6 @@ function getOptions(source, period, trend) {
|
|||||||
type: "shadow",
|
type: "shadow",
|
||||||
},
|
},
|
||||||
className: "xc-chart-tooltip",
|
className: "xc-chart-tooltip",
|
||||||
// backgroundColor: ''
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -28,19 +28,10 @@ function SO2(props) {
|
|||||||
);
|
);
|
||||||
const options = getOptions("SO2_float", period, currentTrend);
|
const options = getOptions("SO2_float", period, currentTrend);
|
||||||
|
|
||||||
function handleSwitch(v) {
|
function handleSwitch(v) {}
|
||||||
// console.log('switched ', v);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDateChange(value) {
|
function handleDateChange(value) {
|
||||||
setPeriod(
|
setPeriod(value);
|
||||||
{
|
|
||||||
日: "day",
|
|
||||||
周: "week",
|
|
||||||
月: "month",
|
|
||||||
年: "year",
|
|
||||||
}[value]
|
|
||||||
);
|
|
||||||
setTimestr(
|
setTimestr(
|
||||||
{
|
{
|
||||||
日:
|
日:
|
||||||
@ -75,22 +66,12 @@ function SO2(props) {
|
|||||||
defaultSelect={period}
|
defaultSelect={period}
|
||||||
onSwitch={handleSwitch}
|
onSwitch={handleSwitch}
|
||||||
dateOptions={["日", "周", "月", "年"]}
|
dateOptions={["日", "周", "月", "年"]}
|
||||||
// legend={["总量", "白班", "夜班"]}
|
|
||||||
onDateChange={handleDateChange}
|
onDateChange={handleDateChange}
|
||||||
size={["long", "middle"]}
|
size={["long", "middle"]}
|
||||||
>
|
>
|
||||||
{/* real echarts here */}
|
|
||||||
{options && (
|
{options && (
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
key={Math.random()}
|
key={Math.random()}
|
||||||
// option={getOptions(
|
|
||||||
// [
|
|
||||||
// [132, 155, 140, 83, 180, 67, 136],
|
|
||||||
// [83, 58, 60, 22, 80, 64, 43],
|
|
||||||
// [49, 97, 80, 61, 100, 3, 93],
|
|
||||||
// ],
|
|
||||||
// '氧气',
|
|
||||||
// )}
|
|
||||||
option={options}
|
option={options}
|
||||||
style={{ height: "100%" }}
|
style={{ height: "100%" }}
|
||||||
/>
|
/>
|
||||||
@ -108,7 +89,6 @@ function SO2(props) {
|
|||||||
暂无数据
|
暂无数据
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{/* real table data here */}
|
|
||||||
</GraphBase>
|
</GraphBase>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -126,16 +106,6 @@ function getOptions(source, period, trend) {
|
|||||||
grid: { top: 40, right: 12, bottom: 20, left: 64 },
|
grid: { top: 40, right: 12, bottom: 20, left: 64 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
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(),
|
|
||||||
data: trend[source].map((item) => item.time),
|
data: trend[source].map((item) => item.time),
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
@ -173,9 +143,6 @@ function getOptions(source, period, trend) {
|
|||||||
color: "#213259a0",
|
color: "#213259a0",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// interval: 10,
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@ -194,40 +161,7 @@ function getOptions(source, period, trend) {
|
|||||||
{ offset: 1, color: "#FFD16010" },
|
{ offset: 1, color: "#FFD16010" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
// smooth: true,
|
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// 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: "#12FFF540" },
|
|
||||||
// { offset: 0.5, color: "#12FFF520" },
|
|
||||||
// { offset: 1, color: "#12FFF510" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// 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: "#2760FF40" },
|
|
||||||
// { offset: 0.5, color: "#2760FF20" },
|
|
||||||
// { offset: 1, color: "#2760FF10" },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
@ -235,7 +169,6 @@ function getOptions(source, period, trend) {
|
|||||||
type: "shadow",
|
type: "shadow",
|
||||||
},
|
},
|
||||||
className: "xc-chart-tooltip",
|
className: "xc-chart-tooltip",
|
||||||
// backgroundColor: ''
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,6 @@ function EnergyAnalysis(props) {
|
|||||||
return (
|
return (
|
||||||
<div className={cls.grid}>
|
<div className={cls.grid}>
|
||||||
<div className={cls.vgrid + " col-1"}>
|
<div className={cls.vgrid + " col-1"}>
|
||||||
{/* <SmokeHandle /> */}
|
|
||||||
<div style={{ gridRow: "1 / 3" }}>
|
<div style={{ gridRow: "1 / 3" }}>
|
||||||
<Oxygen />
|
<Oxygen />
|
||||||
</div>
|
</div>
|
||||||
@ -33,32 +32,24 @@ function EnergyAnalysis(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* <div className={" " + cls.line}></div> */}
|
|
||||||
|
|
||||||
<div className={cls.vgrid + " col-3"}>
|
<div className={cls.vgrid + " col-3"}>
|
||||||
<div style={{ gridRow: 2 }}>
|
<div style={{ gridRow: 2 }}>
|
||||||
{/* <RestHeat /> */}
|
|
||||||
<NatGas />
|
<NatGas />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ gridRow: 3 }}>
|
<div style={{ gridRow: 3 }}>
|
||||||
{/* <WaterCost /> */}
|
|
||||||
<Gas />
|
<Gas />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={cls.vvgrid + " col-4"}>
|
<div className={cls.vvgrid + " col-4"}>
|
||||||
{/* <div className="bgray energy"></div> */}
|
|
||||||
{/* <Energy /> */}
|
|
||||||
<div className=" electronic">
|
<div className=" electronic">
|
||||||
<Energy />
|
<Energy />
|
||||||
</div>
|
</div>
|
||||||
<div className=" gas">
|
<div className=" gas">
|
||||||
{/* <NatGas /> */}
|
|
||||||
<SmokeHandle />
|
<SmokeHandle />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ height: "100%" }}>
|
<div style={{ height: "100%" }}>
|
||||||
<ElecCost />
|
<ElecCost />
|
||||||
{/* <Gas /> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user