update
Avant Largeur: | Hauteur: | Taille: 595 B Après Largeur: | Hauteur: | Taille: 595 B |
Avant Largeur: | Hauteur: | Taille: 538 B Après Largeur: | Hauteur: | Taille: 538 B |
Avant Largeur: | Hauteur: | Taille: 296 B Après Largeur: | Hauteur: | Taille: 296 B |
Avant Largeur: | Hauteur: | Taille: 336 B Après Largeur: | Hauteur: | Taille: 336 B |
Avant Largeur: | Hauteur: | Taille: 545 B Après Largeur: | Hauteur: | Taille: 545 B |
Avant Largeur: | Hauteur: | Taille: 677 B Après Largeur: | Hauteur: | Taille: 677 B |
Avant Largeur: | Hauteur: | Taille: 532 B Après Largeur: | Hauteur: | Taille: 532 B |
Avant Largeur: | Hauteur: | Taille: 432 B Après Largeur: | Hauteur: | Taille: 432 B |
Avant Largeur: | Hauteur: | Taille: 589 B Après Largeur: | Hauteur: | Taille: 589 B |
Avant Largeur: | Hauteur: | Taille: 703 B Après Largeur: | Hauteur: | Taille: 703 B |
Avant Largeur: | Hauteur: | Taille: 605 B Après Largeur: | Hauteur: | Taille: 605 B |
@ -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>
|
||||
|
@ -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' >
|
||||
|
@ -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'>
|
||||
|
@ -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>
|
||||
|
@ -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
|
@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
|
@ -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'>
|
||||
|
@ -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'>
|
||||
|
@ -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'>
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|