Browse Source

add left

yx-dark
lb 1 year ago
parent
commit
d56573acbb
10 changed files with 33 additions and 24 deletions
  1. BIN
      src/assets/good-bg.png
  2. BIN
      src/assets/kiln-bg.png
  3. +2
    -6
      src/components/LeftBar/good.module.less
  4. +3
    -5
      src/components/LeftBar/kiln.module.less
  5. +4
    -4
      src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx
  6. +11
    -4
      src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx
  7. +2
    -2
      src/components/container.module.less
  8. +9
    -1
      src/components/yx-dark/LeftContent.jsx
  9. +1
    -1
      src/components/yx-dark/styles/left.module.css
  10. +1
    -1
      src/components/yx-dark/styles/main.module.css

BIN
src/assets/good-bg.png View File

Before After
Width: 1252  |  Height: 1220  |  Size: 641 KiB

BIN
src/assets/kiln-bg.png View File

Before After
Width: 1252  |  Height: 612  |  Size: 359 KiB

+ 2
- 6
src/components/LeftBar/good.module.less View File

@@ -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;


+ 3
- 5
src/components/LeftBar/kiln.module.less View File

@@ -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;


+ 4
- 4
src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx View File

@@ -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,


+ 11
- 4
src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx View File

@@ -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>
); );
}; };


+ 2
- 2
src/components/container.module.less View File

@@ -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;


+ 9
- 1
src/components/yx-dark/LeftContent.jsx View File

@@ -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>
);
}; };

+ 1
- 1
src/components/yx-dark/styles/left.module.css View File

@@ -3,5 +3,5 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
background: #fcc3;
/* background: #fcc3; */
} }

+ 1
- 1
src/components/yx-dark/styles/main.module.css View File

@@ -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;


Loading…
Cancel
Save