add 产线缺陷统计

src/components/BottomBar/BottomBarItem/index.jsx

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

src/components/BottomBar/BottomBarItem/index.module.css

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

src/components/BottomBar/FaultTotal/index.jsx

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

src/components/BottomBar/FaultTotal/index.module.css

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

src/components/BottomBar/gasii/index.jsx

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

src/components/BottomBar/index.jsx

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

src/components/BottomBar/index.module.css

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

src/components/Container.jsx

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

src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css

@@ -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;
+} */

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx

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

src/components/RightBar/SmokeHandle/index.module.less

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

src/pages/global.less

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

src/pages/index.less

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