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