mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update boxes

Browse Source
This commit is contained in:
lb 2023-06-30 14:48:11 +08:00
parent 3c69bc58bf
commit 5f344d3344
10 changed files with 87 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/CenterTopData/LeftBoxes/index.jsx Normal file
View File

@ -0,0 +1,35 @@
import React, { useState } from 'react'
import icon1 from '@/assets/CenterChart2icon1.svg'
import icon2 from '@/assets/CenterChart2icon2.svg'
import icon3 from '@/assets/CenterChart2icon3.svg'
import icon4 from '@/assets/CenterChart2icon4.svg'
import cls from './leftbox.module.less'
const Chart2 = () => {
const [data, setData] = useState([
{ icon: icon1, label: '换火时间', value: '12:08:34' },
{ icon: icon3, label: '剩余时间', value: '11h' },
{ icon: icon2, label: '当前火向', value: '南向' },
// { icon: icon4, label: '车间温度', value: '28℃' },
])
return (
<div className={`${cls.leftbox} flex h-half`}>
{data.map(item =>
<div className={cls.box} key={item.label}>
<img src={item.icon} alt="Error" className='box__logo' />
<div className={cls.box__inner} >
<h2 className={cls.box__label}>{item.label}</h2>
<h2 className={cls.box__value}> {item.value}</h2>
</div>
</div>
)}
</div >
);
}
export default Chart2;

33
src/components/CenterTopData/LeftBoxes/leftbox.module.less Normal file
View File

@ -0,0 +1,33 @@
.leftbox {
// width: 440px;
// background: rgb(127, 202, 42);
.box {
margin-right: 16px;
width: 200px;
padding: 8px;
background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: flex-start;
user-select: none;
.box__inner {
padding-top: 12px;
.box__label {
color: #fffa;
font-size: 18px;
line-height: 14px;
}
.box__value {
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 34px;
}
}
}
}

2
src/components/CenterTopData/substitutionCharts/Chart1.jsx → src/components/CenterTopData/RightTable/index.jsx
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import './Chart1.less'
import './righttable.module.less'
import { ScrollBoard } from '@jiaminghi/data-view-react'

0
src/components/CenterTopData/substitutionCharts/Chart1.less → src/components/CenterTopData/RightTable/righttable.module.less
View File

4
src/components/CenterTopData/index.jsx
View File

@ -1,7 +1,7 @@
import React from 'react'
import Item2 from './substitutionCharts/Chart1.jsx'
import Item1 from './substitutionCharts/Chart2.jsx'
import Item2 from './RightTable'
import Item1 from './LeftBoxes'
import cls from './index.module.less'

2
src/components/CenterTopData/index.module.less
View File

@ -1,5 +1,5 @@
.leftGrid {
width: 416px;
// width: 416px;
height: 212px;
}
.rightTable {

89
src/components/CenterTopData/substitutionCharts/Chart2.jsx
View File

@ -1,89 +0,0 @@
import React, { useEffect, useState, useRef } from 'react'
import icon1 from '@/assets/CenterChart2icon1.svg'
import icon2 from '@/assets/CenterChart2icon2.svg'
import icon3 from '@/assets/CenterChart2icon3.svg'
import icon4 from '@/assets/CenterChart2icon4.svg'
import './Chart2.less'
const Chart2 = () => {
const timmer = useRef();
const [year, setYear] = useState('')
const [month, setMonth] = useState('')
const [day, setDay] = useState('')
const getNewDate = () => {
const Time = new Date();
const year = Time.getFullYear();
const month = Time.getMonth() + 1;
const day = Time.getDate();
setYear(year);
setMonth(month);
setDay(day);
}
useEffect(() => {
getNewDate();
timmer.current = setInterval(getNewDate, 10000);
return () => {
clearTimeout(timmer.current)
}
//eslint-disable-next-line
}, [])
return (
<div className='CenterChart2itemDetailBorder'>
<div className='CenterChart2itemcontentOUT'>
<div className='CenterChart2itemcontent'>
<img src={icon4} alt="Error" className='CenterChart2itemcontentIcon' />
<div className='CenterChart2itemcontentText' >
<h2 className='CenterChart2itemcontentText1'>车间温度</h2>
<h2 className='CenterChart2itemcontentText2'> 27℃</h2>
</div>
</div>
<div className='CenterChart2itemcontent'>
<img src={icon2} alt="Error" className='CenterChart2itemcontentIcon' />
<div className='CenterChart2itemcontentText' >
<h2 className='CenterChart2itemcontentText1'>当前火向</h2>
<h2 className='CenterChart2itemcontentText2'> XXX</h2>
</div>
</div>
</div>
<div className='CenterChart2itemcontentOUT'>
<div className='CenterChart2itemcontent'>
<img src={icon1} alt="Error" className='CenterChart2itemcontentIcon' />
<div className='CenterChart2itemcontentText' >
<h2 className='CenterChart2itemcontentText1'>换火时间</h2>
<h2 className='CenterChart2itemcontentText2'> 12:41:45</h2>
</div>
</div>
<div className='CenterChart2itemcontent'>
<img src={icon3} alt="Error" className='CenterChart2itemcontentIcon' />
<div className='CenterChart2itemcontentText' >
<h2 className='CenterChart2itemcontentText1'>剩余时间</h2>
<h2 className='CenterChart2itemcontentText2'> 20h</h2>
</div>
</div>
</div>
</div >
);
}
export default Chart2;

53
src/components/CenterTopData/substitutionCharts/Chart2.less
View File

@ -1,53 +0,0 @@
.CenterChart2itemDetailBorder {
width: 440px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: start;
.CenterChart2itemcontentOUT {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
.CenterChart2itemcontent {
width: 224px;
height: 95%;
background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat;
display: flex;
flex-direction: row;
justify-content: left;
margin-top: 3%;
margin-left: 2%;
.CenterChart2itemcontentIcon {
margin-top: 2%;
width: 48px;
height: 48px;
margin-left: 5%;
}
.CenterChart2itemcontentText {
width: 50%;
height: 70%;
margin-left: -2%;
.CenterChart2itemcontentText1 {
color: rgba(224, 222, 222, 0.8);
font-size: 15px;
margin-top: 10%;
}
.CenterChart2itemcontentText2 {
color: rgb(255, 255, 255);
font-size: 34px;
margin-top: -10%;
margin-left: -3%;
}
}
}
}
}

1
src/components/Head/index.less
View File

@ -4,7 +4,6 @@
display: flex;
flex-direction: row;
justify-content: space-between;
background: #17b2747a;
.TopSideRight {
margin-top: 40px;

15
src/pages/global.less
View File

@ -2,10 +2,22 @@
display: flex;
}
.flex-col {
flex-direction: column;
}
.justify-between {
justify-content: space-between;
}
.justify-start {
justify-content: start;
}
.justify-start {
justify-content: center;
}
.w-full {
width: 100%;
}
@ -14,3 +26,6 @@
height: 100%;
}
.h-half {
height: 50%;
}