This commit is contained in:
lb 2023-06-30 16:29:27 +08:00
parent bf11472517
commit 533a59ddac
21 changed files with 60 additions and 38 deletions

View File

Before

Width:  |  Height:  |  Size: 595 B

After

Width:  |  Height:  |  Size: 595 B

View File

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 538 B

View File

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 296 B

View File

Before

Width:  |  Height:  |  Size: 336 B

After

Width:  |  Height:  |  Size: 336 B

View File

Before

Width:  |  Height:  |  Size: 545 B

After

Width:  |  Height:  |  Size: 545 B

View File

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 677 B

View File

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 532 B

View File

Before

Width:  |  Height:  |  Size: 432 B

After

Width:  |  Height:  |  Size: 432 B

View File

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

View File

Before

Width:  |  Height:  |  Size: 703 B

After

Width:  |  Height:  |  Size: 703 B

View File

Before

Width:  |  Height:  |  Size: 605 B

After

Width:  |  Height:  |  Size: 605 B

View File

@ -7,8 +7,8 @@ import Item from './substitutionCharts/Chart1.jsx';
//
import Item2 from './substitutionCharts/Chart4.jsx';
import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png';
// import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
// import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png';
import './Chart1.less';
@ -110,11 +110,11 @@ export default function Chart1() {
return (
<div className="ButtonChart1AllBorder">
<div className="ButtonChart1ItemitemBorder">
<img
{/* <img
src={index == 1 ? ICon1 : ICon2}
alt="图片读取失败"
className="ButtonChart1ItemIcon"
/>
/> */}
<div className="ButtonChart1ItemTitle">
{index == 1 ? '小时蒸汽产生量' : '窑炉温度变化'}
</div>

View File

@ -1,8 +1,8 @@
import { useEffect, useState } from 'react'
import Item2 from './substitutionCharts/Chart2.jsx'
import Icon from '../../assets/Icon/ButtonChart2Icon1.png'
import GapLine from '../../assets/buttonChart2GapLine.png'
// import Icon from '../../assets/Icon/ButtonChart2Icon1.png'
// import GapLine from '../../assets/buttonChart2GapLine.png'
import './Chart2.less'
@ -10,7 +10,7 @@ export default function Chart2() {
return (
<div className='ButtonChart2AllBorder'>
<div className='ButtonChart2ItemitemBorder'>
<img src={Icon} alt="图片加载错误" className='ButtonChart2ItemIcon' />
{/* <img src={Icon} alt="图片加载错误" className='ButtonChart2ItemIcon' /> */}
<div className='ButtonChart2ItemTitle' >AB线成品量</div>
</div>
<div className='ButtonChart2ItemBorder' >

View File

@ -4,8 +4,8 @@ import React from 'react'
import Item from './Form/Form.jsx'
import Item1 from './Form/Form1.jsx'
import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png'
// import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
// import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png'
import './Chart3.less'
@ -14,7 +14,7 @@ export default function Chart3() {
<div className='ButtonChart3AllBorder'>
<div className='ButtonChart3ItemBorder'>
<div className='ButtonChart3ItemitemBorder'>
<img src={Icon1} alt="图片加载错误" className='ButtonChart3ItemIcon' />
{/* <img src={Icon1} alt="图片加载错误" className='ButtonChart3ItemIcon' /> */}
<div className='ButtonChart3ItemTitle'>退火风机状况</div>
</div>
<div className='ButtonChart3ItemDetail'>
@ -24,7 +24,7 @@ export default function Chart3() {
<div className='ButtonChart3ItemGap'></div>
<div className='ButtonChart3ItemBorder'>
<div className='ButtonChart3ItemitemBorder'>
<img src={Icon2} alt="图片加载错误" className='ButtonChart3ItemIcon' />
{/* <img src={Icon2} alt="图片加载错误" className='ButtonChart3ItemIcon' /> */}
<div className='ButtonChart3ItemTitle'>空压机运行时间</div>
</div>
<div className='ButtonChart3ItemDetail'>

View File

@ -7,8 +7,8 @@ import Chart1 from './substitutionCharts/Chart3.jsx';
//
import Chart2 from './substitutionCharts/Chart4.jsx';
import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png';
// import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
// import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png';
import './Chart4.less';
@ -45,11 +45,11 @@ export default function Chart4() {
return (
<div className="ButtonChart4AllBorder">
<div className="ButtonChart4ItemitemBorder">
<img
{/* <img
src={index == 1 ? Icon1 : Icon2}
alt="图片加载错误"
className="ButtonChart4ItemIcon"
/>
/> */}
<div className="ButtonChart4ItemTitle">
{index == 1 ? '火炉实时流量' : '火炉实时温度'}
</div>

View File

@ -1,13 +1,23 @@
import cls from 'container.module.less'
import cls from './container.module.less'
export default Container = props => {
return <div className={cls.container}>
import IconStack from '../assets/Icon/icon-stack.png'
const Container = props => {
let icon = null
switch (props.icon){
case 'kiln':
icon = IconStack
}
return <div className={`${cls.container} ${props.className}`}>
<div className={cls.container__head}>
<img src="#" alt="#" />
<img src={icon} alt="#" />
<h2>{props.title}</h2>
</div>
<div className={cls.container__content}>
{props.children}
</div>
</div>
}
</ div>
}
export default Container

View File

@ -2,10 +2,10 @@ import React from 'react'
import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import Container from '../Container'
import Item from './substitutionCharts/Chart1.jsx'
import Icon from '../../assets/Icon/LeftrChart1ICon.png'
// import Icon from '../../assets/Icon/LeftrChart1ICon.png'
import Icon1 from '../../assets/ButtonChart7Icon1.svg'
import Icon2 from '../../assets/ButtonChart7Icon2.svg'
@ -42,15 +42,11 @@ export default function Kiln() {
const [num, setNum] = useState(1)
return (
<div className={cls.leftBar__top}>
<div className='LeftChart1ItemitemBorder'>
<img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
<div className='title'>窑炉信息</div>
</div>
<Container title='窑炉信息' icon='kiln' className={cls.leftBar__top}>
<div className='LeftChart1ItemBorder'>
<div className='LeftChart1ItemRow'>
<div className='LeftChart1ItemRowDetail'>
<img src={Icon1} alt="" />
{/* <img src={Icon1} alt="" /> */}
<h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
</div>
<Item data={num == 1 ? Data1 : Data2} />
@ -65,8 +61,7 @@ export default function Kiln() {
</div>
<div className='LeftChart1ItemRow'></div>
</div>
</div>
</Container>
)
}

View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import Item from './substitutionCharts/Chart1/index.jsx'
import Icon1 from '../../assets/Icon/rightChart1ICon.png'
// import Icon1 from '../../assets/Icon/rightChart1ICon.png'
import "./Chart1.less"
@ -10,7 +10,7 @@ export default function Chart1() {
<div className='rightChart1Border'>
<div className='RightChart1ItemitemBorder'>
<img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' />
{/* <img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' /> */}
<div className='RightChart1Title'>储能电站</div>
</div>
<div className='RightChart1ItemBorder'>

View File

@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
import styled from 'styled-components'
import { motion } from 'framer-motion'
import Icon from '../../assets/Icon/rightChart2ICon.png'
// import Icon from '../../assets/Icon/rightChart2ICon.png'
import Item from './substitutionCharts/Chart2.jsx'
@ -77,7 +77,7 @@ export default function Chart2() {
return (
<div className='rightchart2AllBorder'>
<div className='rightchart2ItemitemBorder'>
<img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' />
{/* <img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' /> */}
<div className='rightchart2ItemTitle'>光伏发电统计</div>
</div>
< div className='rightchart2Switchbox'>

View File

@ -4,7 +4,7 @@ import styled from 'styled-components'
import Item from './substitutionCharts/Chart3.jsx'
import Icon from '../../assets/Icon/rightChart3ICon.png'
// import Icon from '../../assets/Icon/rightChart3ICon.png'
import './Chart3.less'
const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
@ -76,7 +76,7 @@ export default function Chart3() {
<div className='RightChart3AllBorder'>
<div className='RightChart3ItemitemBorder'>
<img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' />
{/* <img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' /> */}
<div className='RightChart3ItemTitle'>储能电站</div>
</div>
< div className='rightchart3Switchbox'>

View File

@ -4,6 +4,23 @@
flex-direction: column;
background-size: 100% 100%;
background-repeat: no-repeat;
.container__head {
display: flex;
align-items: center;
h2 {
font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
"PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
"WenQuanYi Micro Hei", sans-serif;
margin: 0;
margin-left: 6px;
font-size: 18px;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
}
}
}
.bgKiln {
@ -29,4 +46,4 @@
}
.bgSmoke {
background: url('../assets/smoke.png');
}
}