@@ -1,11 +1,7 @@ | |||||
.goodProd { | .goodProd { | ||||
background: url(../../assets/good.png) no-repeat; | |||||
background: url(../../assets/good-bg.png) no-repeat; | |||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
width: 625px; | |||||
// height: 626px; | |||||
flex: 1; | |||||
height: 1px; | |||||
margin-top: 24px; | |||||
height: 610px; | |||||
.goodProd__content { | .goodProd__content { | ||||
display: flex; | display: flex; | ||||
@@ -1,9 +1,7 @@ | |||||
.leftBar__top { | .leftBar__top { | ||||
width: 625px; | |||||
// height: 305px; | |||||
height: 300px; | |||||
background: url('../../assets/ItemBg.png') no-repeat; | |||||
background: url('../../assets/kiln-bg.png') no-repeat; | |||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
height: 306px; | |||||
.leftBar__top__content { | .leftBar__top__content { | ||||
flex: 1; | flex: 1; | ||||
@@ -11,7 +9,7 @@ | |||||
display: grid; | display: grid; | ||||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||||
gap: 10px; | gap: 10px; | ||||
padding-top: 18px; | |||||
padding-top: 8px; | |||||
.info__item { | .info__item { | ||||
border-radius: 2px; | border-radius: 2px; | ||||
@@ -8,7 +8,7 @@ import { randomInt } from '../../../../utils'; | |||||
const GoodRateChart = (props) => { | const GoodRateChart = (props) => { | ||||
const options = { | const options = { | ||||
color: ['#FFD160', '#12FFF5', '#2760FF'], | color: ['#FFD160', '#12FFF5', '#2760FF'], | ||||
grid: { top: 28, right: 12, bottom: 32, left: 48 }, | |||||
grid: { top: 28, right: 12, bottom: 64, left: 48 }, | |||||
xAxis: { | xAxis: { | ||||
type: 'category', | type: 'category', | ||||
data: Array(7) | data: Array(7) | ||||
@@ -29,7 +29,7 @@ const GoodRateChart = (props) => { | |||||
axisLine: { | axisLine: { | ||||
lineStyle: { | lineStyle: { | ||||
width: 1, | width: 1, | ||||
color: '#213259', | |||||
color: '#4561AE', | |||||
}, | }, | ||||
}, | }, | ||||
}, | }, | ||||
@@ -43,12 +43,12 @@ const GoodRateChart = (props) => { | |||||
axisLine: { | axisLine: { | ||||
show: true, | show: true, | ||||
lineStyle: { | lineStyle: { | ||||
color: '#213259', | |||||
color: '#4561AE', | |||||
}, | }, | ||||
}, | }, | ||||
splitLine: { | splitLine: { | ||||
lineStyle: { | lineStyle: { | ||||
color: '#213259a0', | |||||
color: '#4561AEa0', | |||||
}, | }, | ||||
}, | }, | ||||
interval: 10, | interval: 10, | ||||
@@ -5,7 +5,8 @@ import { ScrollBoard } from '@jiaminghi/data-view-react'; | |||||
const TodayTableData = (props) => { | const TodayTableData = (props) => { | ||||
const [config, setConfig] = useState({ | const [config, setConfig] = useState({ | ||||
// headerBGC: 'rgba(4, 44, 76, 0.3)', | // headerBGC: 'rgba(4, 44, 76, 0.3)', | ||||
headerBGC: 'rgba(4, 44, 76, .8)', | |||||
// headerBGC: 'rgba(4, 44, 76, .8)', | |||||
headerBGC: '#044A8425', | |||||
header: [ | header: [ | ||||
'<span style="color:#fff">产线<span/>', | '<span style="color:#fff">产线<span/>', | ||||
'<span style="color:#fff">一等率<span/>', | '<span style="color:#fff">一等率<span/>', | ||||
@@ -13,8 +14,10 @@ const TodayTableData = (props) => { | |||||
'<span style="color:#fff">成品率<span/>', | '<span style="color:#fff">成品率<span/>', | ||||
'<span style="color:#fff">废品率<span/>', | '<span style="color:#fff">废品率<span/>', | ||||
], | ], | ||||
oddRowBGC: '#042444', | |||||
evenRowBGC: '#042c4c', | |||||
// oddRowBGC: '#042444', | |||||
oddRowBGC: '#044A8425', | |||||
// evenRowBGC: '#042c4c', | |||||
evenRowBGC: '#0B549945', | |||||
columnWidth: [90], | columnWidth: [90], | ||||
headerHeight: 40, | headerHeight: 40, | ||||
hoverPause: false, | hoverPause: false, | ||||
@@ -28,7 +31,11 @@ const TodayTableData = (props) => { | |||||
}); | }); | ||||
return ( | return ( | ||||
<div className={cls.todayTableData}> | <div className={cls.todayTableData}> | ||||
<ScrollBoard config={config} style={{ width: '100%' }} /> | |||||
<ScrollBoard | |||||
config={config} | |||||
className={cls.tableClass} | |||||
style={{ width: '100%' }} | |||||
/> | |||||
</div> | </div> | ||||
); | ); | ||||
}; | }; | ||||
@@ -10,7 +10,7 @@ | |||||
align-items: center; | align-items: center; | ||||
img { | img { | ||||
width: 20px; | |||||
width: 24px; | |||||
&.bigger { | &.bigger { | ||||
width: 24px; | width: 24px; | ||||
@@ -24,7 +24,7 @@ | |||||
sans-serif; | sans-serif; | ||||
margin: 0; | margin: 0; | ||||
margin-left: 6px; | margin-left: 6px; | ||||
font-size: 18px; | |||||
font-size: 24px; | |||||
color: #fff; | color: #fff; | ||||
letter-spacing: 2px; | letter-spacing: 2px; | ||||
font-weight: 500; | font-weight: 500; | ||||
@@ -1,5 +1,13 @@ | |||||
import './styles/left.module.css'; | import './styles/left.module.css'; | ||||
import Kiln from '../LeftBar/Kiln'; | |||||
import GoodProduction from '../LeftBar/GoodProduction'; | |||||
export default (props) => { | export default (props) => { | ||||
return <div className={`left-content ${props.className}`}></div>; | |||||
return ( | |||||
<div className={`left-content ${props.className}`}> | |||||
<Kiln /> | |||||
<GoodProduction /> | |||||
</div> | |||||
); | |||||
}; | }; |
@@ -3,5 +3,5 @@ | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
gap: 20px; | gap: 20px; | ||||
background: #fcc3; | |||||
/* background: #fcc3; */ | |||||
} | } |
@@ -1,7 +1,7 @@ | |||||
.main-container { | .main-container { | ||||
height: 1px; | height: 1px; | ||||
flex: 1; | flex: 1; | ||||
background: #ccc4; | |||||
/* background: #ccc4; */ | |||||
display: grid; | display: grid; | ||||
grid-template-columns: 626px 576px 580px 626px 626px 450px 626px; | grid-template-columns: 626px 576px 580px 626px 626px 450px 626px; | ||||
grid-template-rows: 600px 306px; | grid-template-rows: 600px 306px; | ||||