done 左右侧边栏

This commit is contained in:
Melete 2023-11-04 11:43:09 +08:00
parent 0fb251ba1b
commit 73d18b8eea
8 changed files with 78 additions and 74 deletions

View File

@ -75,6 +75,7 @@ function GraphBase(props) {
' ' +
props.className
}
style={{ ...props.style }}
>
<div className={cls.graphBaseTitle}>
<img src={iconSrc} alt="#" />

View File

@ -30,7 +30,8 @@
.middle-short {
/* background: url('../../../assets/middle-short.png') no-repeat; */
background: url('../../../assets/energy.png') no-repeat;
/* background: url('../../../assets/energy.png') no-repeat; */
background: url('../../../assets/bg-bottom-item.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}

View File

@ -1,6 +1,5 @@
import cls from './index.module.css';
import BottomBarItem from '../BottomItemBackground';
import { Radio } from 'antd';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';
import { useState } from 'react';
@ -16,10 +15,10 @@ function FaultType(props) {
'#12FFF5',
],
grid: {
left: 0,
top: 0,
bottom: 0,
right: 0,
left: 24,
top: 10,
bottom: 10,
right: 24,
},
legend: {
icon: 'circle',
@ -80,34 +79,28 @@ function FaultType(props) {
{ id: 4, label: '产线4', value: 'l4' },
{ id: 5, label: '产线5', value: 'l5' },
]);
function handleDateChange(v) {
console.log('date ', v);
}
// 使
const bgSize =
props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
return (
<BottomBarItem
icon="puzzle"
<GraphBase
icon="battery"
title="产线当日缺陷分类"
className={cls.faultType}
dateOptions={lines.map((item) => item.label)}
onDateChange={handleDateChange}
size={bgSize}
style={{ width: '600px' }}
>
<div className={cls.headWidget}>
{/* 日周月年 */}
<Radio.Group
defaultValue="l1"
buttonStyle="solid"
className={cls.radioGroup}
>
{lines.map((l, index) => (
<Radio.Button
key={l.label}
value={l.value}
className="radio-group__item"
>
{l.label}
</Radio.Button>
))}
</Radio.Group>
</div>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</BottomBarItem>
</GraphBase>
);
}

View File

@ -1,6 +1,5 @@
import cls from './index.module.css';
import BottomBarItem from '../BottomItemBackground';
import { Radio } from 'antd';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';
function FaultTotal(props) {
@ -137,33 +136,27 @@ function FaultTotal(props) {
},
};
function handleDateChange(v) {
console.log('date ', v);
}
// 使
const bgSize =
props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];
return (
<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
<div className={cls.headWidget}>
{/* 日周月年 */}
<Radio.Group
defaultValue="week"
buttonStyle="solid"
className={cls.radioGroup}
>
<Radio.Button value="day" className="radio-group__item">
</Radio.Button>
<Radio.Button value="week" className="radio-group__item">
</Radio.Button>
<Radio.Button value="month" className="radio-group__item">
</Radio.Button>
<Radio.Button value="year" className="radio-group__item">
</Radio.Button>
</Radio.Group>
</div>
<GraphBase
icon="battery"
title="产线当日缺陷分类"
dateOptions={['日', '周', '月', '年']}
onDateChange={handleDateChange}
size={bgSize}
style={{ width: '600px' }}
>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</BottomBarItem>
</GraphBase>
);
}

View File

@ -12,8 +12,8 @@ import cls from './index.module.css';
export default function index() {
return (
<div className={`${cls.bottomBar} flex justify-between`}>
<FaultTotal />
<FaultType />
<FaultTotal page="home" />
<FaultType page="home" />
<GasII />
<GasI />
</div>

View File

@ -0,0 +1,33 @@
import React from 'react';
import FanInfo from '../../../公共组件/风机信息';
import WindFrequence from '../../../公共组件/风机运行频率';
import FaultType from '../../../公共组件/产线当日缺陷分类';
import FaultTotal from '../../../公共组件/产线缺陷统计';
import { motion } from 'framer-motion';
import cls from './index.module.less';
export default function index() {
return (
<motion.div
style={{
width: '625px',
height: '966px',
// background: '#fff3',
display: 'flex',
flexDirection: 'column',
}}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'absolute' }}
transition={{ type: 'tween' }}
>
<div style={{ height: '357px' }}>
<FaultType page="fault-total" />
</div>
<div style={{ flex: 1, marginTop: '24px' }}>
<FaultTotal page="fault-total" />
</div>
</motion.div>
);
}

View File

@ -9,6 +9,7 @@ import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide
import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide';
import FireCheckRight from '../../components/模块组件/退火监测/RightSide';
import QualityCheckRight from '../../components/模块组件/质检统计/RightSide';
import V3DBG from '../../assets/V3DBG.png';
@ -30,24 +31,6 @@ const KilnTotalRight = (props) => {
);
};
const QualityCheckRight = (props) => {
return (
<motion.div
style={{
width: '625px',
height: '900px',
background: '#fff3',
}}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'absolute' }}
transition={{ type: 'tween' }}
>
质检统计 RIGHT
</motion.div>
);
};
export default function Home({ active }) {
console.log('[rendering...] 加载 Home页面');