mt-fe-group/xuchang-screen
8
0
Fork 0
Código Incidencias Pull Requests Lanzamientos Wiki Actividad

add 产线缺陷统计

Explorar el Código
Este commit está contenido en:
lb 2023-07-02 14:12:20 +08:00
padre 9342750233
commit 5fd0a9b803
Se han modificado 14 ficheros con 339 adiciones y 30 borrados
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

BIN
src/assets/Icon/icon-puzzle.png Archivo normal
Ver fichero

Archivo binario no mostrado.
Lado a lado

Después

Anchura:  |  Altura:  |  Tamaño: 593 B

2
src/components/BottomBar/BottomBarItem/index.jsx
Ver fichero

@ -12,3 +12,5 @@ function BottomBarItem(props) {
</Container>
);
}
export default BottomBarItem;

1
src/components/BottomBar/BottomBarItem/index.module.css
Ver fichero

@ -1,4 +1,5 @@
.bottomBarItem {
background: url(../../../assets/bg-bottom-item.png) no-repeat;
background-size: 100% 100%;
width: 600px;
}

225
src/components/BottomBar/FaultTotal/index.jsx
Ver fichero

@ -1,10 +1,233 @@
import cls from './index.module.css';
import BottomBarItem from '../BottomBarItem';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { randomInt } from '../../../utils';
function FaultTotal(props) {
const options = {
color: [
'#2760FF',
'#5B9BFF',
'#FFD160',
'#8167F6',
'#99D66C',
'#FF8A40',
'#12FFF5',
],
grid: { top: 42, right: 12, bottom: 20, left: 48 },
legend: {
top: 10,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: '#DFF1FE',
fontSize: 12,
},
// data: [
// { name: '缺陷1', icon: 'roundRect' },
// { name: '缺陷2', icon: 'roundRect' },
// { name: '缺陷3', icon: 'roundRect' },
// { name: '缺陷4', icon: 'roundRect' },
// { name: '缺陷5', icon: 'roundRect' },
// { name: '缺陷6', icon: 'roundRect' },
// { name: '缺陷8', icon: 'roundRect' },
// ],
},
xAxis: {
type: 'category',
data: Array(5)
.fill(1)
.map((_, index) => {
return '产线' + (index + 1);
// const today = new Date();
// const dtimestamp = today - index * 24 * 60 * 60 * 1000;
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
// dtimestamp,
// ).getDate()}`;
}),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位/个',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
// interval: 10,
// min: 0,
// max: 100,
},
series: [
{
name: '缺陷1',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: '缺陷2',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: '缺陷3',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: '缺陷4',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '缺陷5',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
},
{
name: '缺陷6',
type: 'bar',
barGap: 20,
barWidth: 12,
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [620, 732, 701, 734, 1090, 1130, 1120],
},
// {
// data: Array(5)
// .fill(1)
// .map((_) => {
// return randomInt(1000, 10000);
// }),
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: '#FFD16040' },
// { offset: 0.5, color: '#FFD16020' },
// { offset: 1, color: '#FFD16010' },
// ]),
// },
// // smooth: true,
// },
// {
// data: Array(7)
// .fill(1)
// .map((_) => {
// return randomInt(60, 100);
// }),
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: '#12FFF540' },
// { offset: 0.5, color: '#12FFF520' },
// { offset: 1, color: '#12FFF510' },
// ]),
// },
// // smooth: true,
// },
// {
// data: Array(7)
// .fill(1)
// .map((_) => {
// return randomInt(60, 100);
// }),
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: '#2760FF40' },
// { offset: 0.5, color: '#2760FF20' },
// { offset: 1, color: '#2760FF10' },
// ]),
// },
// // smooth: true,
// },
],
tooltip: {
trigger: 'axis',
},
};
return (
<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
产线缺陷统计 堆叠图 颜色 上下legend 日周月年
{/* 产线缺陷统计 堆叠图 颜色 上下legend 日周月年 */}
<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>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</BottomBarItem>
);
}

36
src/components/BottomBar/FaultTotal/index.module.css
Ver fichero

@ -0,0 +1,36 @@
.chart {
height: 100%;
/* background-color: #00ee33; */
}
.faultTotal {
position: relative;
}
.headWidget {
position: absolute;
/* background: #00ee33; */
top: 20px;
right: 24px;
height: 32px;
width: 190px;
text-align: right;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
}

4
src/components/BottomBar/gasii/index.jsx
Ver fichero

@ -1,7 +1,7 @@
import cls from './index.module.css';
import BottomBarItem from '../BottomBarItem';
function GasI(props) {
function GasII(props) {
return (
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
天然气流量 - linechart - 当前流量 - 2 legends - 2 lines
@ -9,4 +9,4 @@ function GasI(props) {
);
}
export default GasI;
export default GasII;

24
src/components/BottomBar/index.jsx
Ver fichero

@ -6,19 +6,31 @@ import Chart2 from './Chart2';
import Chart3 from './Chart3';
import Chart4 from './Chart4';
import GasI from './gasi';
import GasII from './gasii';
import FaultTotal from './FaultTotal';
import FaultType from './FaultType';
import './index.less';
import cls from './index.module.css';
export default function index() {
return (
<>
<div className="ButtonBorder">
<Chart1 />
<Chart2 />
<Chart3 />
<Chart4 />
{false && (
<div className="ButtonBorder">
<Chart1 />
<Chart2 />
<Chart3 />
<Chart4 />
</div>
)}
<div className={`${cls.bottomBar} flex justify-between`}>
<FaultTotal />
<FaultType />
<GasI />
<GasII />
</div>
<div className={cls.bottomBar}></div>
</>
);
}

7
src/components/BottomBar/index.module.css
Ver fichero

@ -1,3 +1,6 @@
.bottomBar {
background-color: #0004;
}
/* background-color: #3894; */
width: 100%;
height: 100%;
overflow: visible;
}

9
src/components/Container.jsx
Ver fichero

@ -6,6 +6,9 @@ import IconStack from '../assets/Icon/icon-stack.png';
import IconGood from '../assets/Icon/icon-good.png';
import IconCharger from '../assets/Icon/icon-charge.png';
import IconSmoke from '../assets/Icon/icon-taiji.png';
import IconChart from '../assets/Icon/icon-chart.png';
import IconPuzzle from '../assets/Icon/icon-puzzle.png';
import IconPause from '../assets/Icon/icon-pause.png';
const Container = (props) => {
let icon = useRef(null);
@ -24,13 +27,13 @@ const Container = (props) => {
icon.current = IconSmoke;
break;
case 'chart':
icon.current = IconSmoke;
icon.current = IconChart;
break;
case 'puzzle':
icon.current = IconSmoke;
icon.current = IconPuzzle;
break;
case 'pause':
icon.current = IconSmoke;
icon.current = IconPause;
break;
}

36
src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css
Ver fichero

@ -4,13 +4,13 @@
}
.radio-group__item:first-child {
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
.radio-group__item:last-child {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
.radio-group__item.ant-radio-button-wrapper-checked {
@ -18,11 +18,29 @@
}
.ant-switch-checked {
background: #b4fffdb1 !important;
background: #b4fffdb1 !important;
}
.ant-switch-checked:focus{
box-shadow: none !important;
.ant-switch-checked:focus {
box-shadow: none !important;
}
.ant-switch-checked .ant-switch-handle::before {
background-color: #76FFF9 !important;
}
background-color: #76fff9 !important;
}
/*
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
} */

2
src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx
Ver fichero

@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
</Radio.Button>
</Radio.Group>
</div>
<ReactECharts option={options} style={{ height: '270px' }} />
<ReactECharts option={options} style={{ height: '240px' }} />
</div>
);
};

4
src/components/RightBar/SmokeHandle/index.module.less
Ver fichero

@ -14,10 +14,10 @@
color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// width: 288px;
height: 43px;
height: 56px;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
line-height: 56px;
text-align: center;
user-select: none;
}

12
src/pages/global.less
Ver fichero

@ -26,6 +26,10 @@
justify-content: center;
}
.justify-around {
justify-content: space-around;
}
.items-center {
align-items: center;
}
@ -49,3 +53,11 @@
.h-auto {
height: auto;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

7
src/pages/index.less
Ver fichero

@ -12,9 +12,7 @@
flex-direction: row;
.Center {
margin-top: 21px;
margin-left: 24px;
padding: 1px;
margin: 22px;
width: 2472px;
height: 940px;
@ -28,8 +26,9 @@
.V3DBG {
position: absolute;
width: 2472px;
height: 642px;
height: 640px;
z-index: 1;
box-shadow: inset 0 0 128px 64px #0a2859;
}
.V3DBorder {