done 左右侧边栏
This commit is contained in:
parent
0fb251ba1b
commit
73d18b8eea
@ -75,6 +75,7 @@ function GraphBase(props) {
|
||||
' ' +
|
||||
props.className
|
||||
}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
<div className={cls.graphBaseTitle}>
|
||||
<img src={iconSrc} alt="#" />
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
33
src/components/模块组件/质检统计/RightSide/index.jsx
Normal file
33
src/components/模块组件/质检统计/RightSide/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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页面');
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user