From e9153c3b417ac1491b326e7936842f068bd1da32 Mon Sep 17 00:00:00 2001 From: lb Date: Sun, 10 Sep 2023 19:10:08 +0800 Subject: [PATCH] add spec product line --- src/components/BottomBar/SpecPL/index.jsx | 126 ++++++++++++++++++ .../BottomBar/SpecPL/index.module.css | 39 ++++++ .../BottomBar/gasi/index.module.css | 5 +- src/components/BottomBar/gasii/index.jsx | 24 ++-- .../BottomBar/gasii/index.module.css | 5 +- src/components/yx-dark/MainContainer.jsx | 15 ++- 6 files changed, 195 insertions(+), 19 deletions(-) create mode 100644 src/components/BottomBar/SpecPL/index.jsx create mode 100644 src/components/BottomBar/SpecPL/index.module.css diff --git a/src/components/BottomBar/SpecPL/index.jsx b/src/components/BottomBar/SpecPL/index.jsx new file mode 100644 index 0000000..57d59c1 --- /dev/null +++ b/src/components/BottomBar/SpecPL/index.jsx @@ -0,0 +1,126 @@ +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'; +import { useState } from 'react'; + +function FaultType(props) { + const options = { + colors: [ + '#2760FF', + '#5B9BFF', + '#FFD160', + '#8167F6', + '#99D66C', + '#FF8A40', + '#12FFF5', + ], + grid: { + left: 0, + top: 0, + bottom: 0, + right: 0, + }, + legend: { + icon: 'circle', + top: 32, + right: 0, + bottom: 32, + width: 296, + height: 130, + itemGap: 30, + formatter: function (name) { + return `${name} {sub|${ + options.series[0].data.find((o) => o.name == name).value + }}`; + }, + textStyle: { + color: '#DFF1FE', + fontSize: 16, + rich: { + sub: { + color: '#fff9', + fontSize: 16, + }, + }, + }, + }, + series: [ + { + type: 'pie', + center: ['26%', '54%'], + radius: ['55%', '75%'], + avoidLabelOverlap: false, + label: { + show: true, + formatter: '{d}%', + fontSize: 14, + color: 'inherit', + }, + labelLine: { + length: 0, + }, + // emphasis: { + // label: { + // show: true, + // fontSize: 40, + // fontWeight: 'bold', + // }, + // }, + // labelLine: { + // show: false, + // }, + data: [ + { value: 1048, name: '缺陷1' }, + { value: 735, name: '缺陷2' }, + { value: 580, name: '缺陷3' }, + { value: 484, name: '缺陷4' }, + { value: 300, name: '缺陷5' }, + { value: 300, name: '缺陷6' }, + { value: 300, name: '缺陷8' }, + ], + }, + ], + }; + + const [lines, setLines] = useState([ + { id: 1, label: '产线1', value: 'l1' }, + { id: 2, label: '产线2', value: 'l2' }, + { id: 3, label: '产线3', value: 'l3' }, + { id: 4, label: '产线4', value: 'l4' }, + { id: 5, label: '产线5', value: 'l5' }, + ]); + return ( + +
+ {/* 日周月年 */} + + {lines.map((l, index) => ( + + {l.label} + + ))} + +
+
+ +
+ + ); +} + +export default FaultType; diff --git a/src/components/BottomBar/SpecPL/index.module.css b/src/components/BottomBar/SpecPL/index.module.css new file mode 100644 index 0000000..bb915ce --- /dev/null +++ b/src/components/BottomBar/SpecPL/index.module.css @@ -0,0 +1,39 @@ +.chart { + height: 100%; +} + +.faultType { + position: relative; + height: 100%; +} + +.headWidget { + position: absolute; + top: 28px; + right: 24px; + height: 32px; + width: 340px; + 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; +} + +.radio-group__item { + padding: 0 8px; +} \ No newline at end of file diff --git a/src/components/BottomBar/gasi/index.module.css b/src/components/BottomBar/gasi/index.module.css index 0936646..53e50ea 100644 --- a/src/components/BottomBar/gasi/index.module.css +++ b/src/components/BottomBar/gasi/index.module.css @@ -5,6 +5,7 @@ .gas { position: relative; + height: 100%; } .currentFlow { @@ -25,7 +26,7 @@ .headWidget { position: absolute; /* background: #00ee33; */ - top: 20px; + top: 28px; right: 24px; height: 32px; width: 190px; @@ -68,7 +69,7 @@ .headWidget { position: absolute; /* background: #00ee33; */ - top: 22px; + top: 28px; right: 24px; height: 32px; width: 410px; diff --git a/src/components/BottomBar/gasii/index.jsx b/src/components/BottomBar/gasii/index.jsx index 329103c..84fb3f0 100644 --- a/src/components/BottomBar/gasii/index.jsx +++ b/src/components/BottomBar/gasii/index.jsx @@ -19,16 +19,16 @@ function GasII(props) { } } - function handleSourceChange(e) { - console.log('val', e.target.value); - if (e.target.value == 'ii') { - // 天然气II - setDataSource('gas-ii'); - } else if (e.target.value == 'i') { - // 天然气 I - setDataSource('gas-i'); - } - } + // function handleSourceChange(e) { + // console.log('val', e.target.value); + // if (e.target.value == 'ii') { + // // 天然气II + // setDataSource('gas-ii'); + // } else if (e.target.value == 'i') { + // // 天然气 I + // setDataSource('gas-i'); + // } + // } return ( @@ -40,7 +40,7 @@ function GasII(props) { {!showChart && 实时流量} - 天然气 II - + */}
diff --git a/src/components/BottomBar/gasii/index.module.css b/src/components/BottomBar/gasii/index.module.css index 63e0a05..d741f2f 100644 --- a/src/components/BottomBar/gasii/index.module.css +++ b/src/components/BottomBar/gasii/index.module.css @@ -4,11 +4,12 @@ .gas { position: relative; + height: 100%; } .currentFlow { position: absolute; - top: 20px; + top: 28px; left: 50%; transform: translateX(-50%); padding: 8px 22px; @@ -23,7 +24,7 @@ .headWidget { position: absolute; - top: 22px; + top: 28px; right: 24px; height: 32px; width: 410px; diff --git a/src/components/yx-dark/MainContainer.jsx b/src/components/yx-dark/MainContainer.jsx index 66196f1..09e4328 100644 --- a/src/components/yx-dark/MainContainer.jsx +++ b/src/components/yx-dark/MainContainer.jsx @@ -5,6 +5,9 @@ import './styles/main.module.css'; import FaultTotal from '../BottomBar/FaultTotal'; import FaultType from '../BottomBar/FaultType'; +import GasFlow from '../BottomBar/gasii'; +import WindFlow from '../BottomBar/gasi'; +import SpecPL from '../BottomBar/SpecPL'; export default (props) => { return ( @@ -17,9 +20,15 @@ export default (props) => { - - - + + + + + + + + +
);