From 9ae47a72e8f73ad8105799801f7c0fbd72213374 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期日, 28 四月 2024 15:30:15 +0800 Subject: [PATCH] # --- src/pages/right/components/Handles.jsx | 37 ++++ src/pages/right/index.jsx | 66 +++++++ src/pages/right/components/stat-charts.jsx | 235 ++++++++++++++++++++++++++ src/pages/right/components/task-charts.jsx | 140 +++++++++++++++ src/pages/base.jsx | 2 src/pages/left/index.jsx | 5 src/pages/right/components/Allerway.jsx | 31 +++ 7 files changed, 513 insertions(+), 3 deletions(-) diff --git a/src/pages/base.jsx b/src/pages/base.jsx index 4c3b197..57be20e 100644 --- a/src/pages/base.jsx +++ b/src/pages/base.jsx @@ -10,6 +10,7 @@ import House from '../components/house' import Warehouse from '../core/warehouse' import Left from './left' +import Right from './right' const Base = (props) => { return ( @@ -32,6 +33,7 @@ <Help /> </Canvas> <Left /> + <Right /> </div> ) diff --git a/src/pages/left/index.jsx b/src/pages/left/index.jsx index 7977331..6c5f3c7 100644 --- a/src/pages/left/index.jsx +++ b/src/pages/left/index.jsx @@ -11,14 +11,13 @@ import CapacityCharts from './components/capacity-charts'; const Left = () => { - const [isExpanded, setIsExpanded] = useState(true); - // 瀹氫箟鍔ㄧ敾灞炴�� + const [isExpanded, setIsExpanded] = useState(false); + const containerAnimation = useSpring({ transform: isExpanded ? 'translate(0%)' : 'translateX(-100%)', config: { precision: 0.01 }, }); - // 鍒囨崲瀹瑰櫒鐘舵�� const toggleContainer = () => { setIsExpanded(!isExpanded); }; diff --git a/src/pages/right/components/Allerway.jsx b/src/pages/right/components/Allerway.jsx new file mode 100644 index 0000000..ad2b140 --- /dev/null +++ b/src/pages/right/components/Allerway.jsx @@ -0,0 +1,31 @@ +// import { ScrollBoard } from '@jiaminghi/data-view-react'; + +// const Allerway = () => { +// const config = { +// header: ['缂栧彿', '鏃堕棿', '绫诲瀷', '鍖哄煙', '鍗曞彿'], +// data: [ +// ['1', '2023-06-01 12:00:00', '鍏ュ簱', 'A1', 'b12c3'], +// ['2', '2023-06-01 12:00:00', '鍑哄簱', 'A2', 'b12c3'], +// ['3', '2023-06-01 12:00:00', '鍏ュ簱', 'A3', 'b12c3'], +// ['4', '2023-06-01 12:00:00', '鍑哄簱', 'A4', 'b12c3'], +// ['5', '2023-06-01 12:00:00', '鍏ュ簱', 'A5', 'b12c3'], +// ['6', '2023-06-01 12:00:00', '鍑哄簱', 'A6', 'b12c3'], +// ['7', '2023-06-01 12:00:00', '鍏ュ簱', 'A7', 'b12c3'], +// ['8', '2023-06-01 12:00:00', '鍑哄簱', 'A8', 'b12c3'], +// ], +// headerBGC: '#00fff138', +// oddRowBGC: '#00000017', +// evenRowBGC: '#ededed13', +// headerHeight: 28, +// rowNum: 8, +// columnWidth: [80, 70, 60, 100], +// }; +// return ( +// <ScrollBoard +// config={config} +// style={{ width: '100%', height: '220px', fontSize: '12px', marginBottom: '8px' }} +// /> +// ); +// }; + +// export default Allerway; diff --git a/src/pages/right/components/Handles.jsx b/src/pages/right/components/Handles.jsx new file mode 100644 index 0000000..f791d0b --- /dev/null +++ b/src/pages/right/components/Handles.jsx @@ -0,0 +1,37 @@ +// import { observer, ThreeStoreContext, ThreeStore } from 'mobx-threejs-store'; +// import React, { useContext, useState } from 'react'; +// import { Button, Form, Input, Radio, Switch } from 'antd'; + +// const Tools = () => { +// const mobxStore = useContext(ThreeStoreContext); +// const [formLayout, setFormLayout] = useState('inline'); +// // console.log('threeStore', ThreeStore.visible); + +// const onFormLayoutChange = (values) => { +// mobxStore.threeStore.setCameraCtrls({ ...mobxStore.threeStore.cameraCtrls, ...values }); +// // ThreeStore.setVisible(!ThreeStore.visible); +// }; +// return ( +// <> +// {/* <p>鍝嶅簲{String(ThreeStore.visible)}</p> */} +// <Form +// layout={'inline'} +// className="absolute bottom-0 left-0 translate-x-[-100%] flex-nowrap w-max" +// initialValues={{ layout: formLayout }} +// onValuesChange={onFormLayoutChange} +// > +// <Form.Item label="鑷姩宸¤埅" name="autoCruise"> +// <Switch /> +// </Form.Item> +// <Form.Item label="鎺у埗鍣ㄥ垏鎹�" name="choiceCtrls"> +// <Radio.Group> +// <Radio value="0">鎸夐敭鎺у埗</Radio> +// <Radio value="1">鑷敱鎺у埗</Radio> +// </Radio.Group> +// </Form.Item> +// </Form> +// </> +// ); +// }; + +// export default observer(Tools); diff --git a/src/pages/right/components/stat-charts.jsx b/src/pages/right/components/stat-charts.jsx new file mode 100644 index 0000000..3df4a84 --- /dev/null +++ b/src/pages/right/components/stat-charts.jsx @@ -0,0 +1,235 @@ +import React from 'react'; +import ReactECharts from 'echarts-for-react'; +import * as echarts from 'echarts/core'; + +const StatCharts = () => { + let chartData = { + xdata: ['01/01', '01/02', '01/03', '01/04', '01/05'], + currentYearList: [10, 20, 30, 40, 50], + lastYearList: [20, 10, 30, 40, 20], + rateDataOne: [10, 40, 20, 30, 50], + }; + let dataZoomFlag = false; + let zoomEnd = 100; + if (chartData.xdata.length > 6) { + dataZoomFlag = true; + zoomEnd = 60; + } + let option = { + grid: { + top: '10%', + left: '3%', + right: '10%', + bottom: '13%', + }, + barWidth: 6, + tooltip: { + show: true, + trigger: 'axis', + formatter: (params) => { + return ( + params[0].name + + '<br/>' + + params[0].seriesName + + ':' + + params[0].value + + '<br/>' + + params[1].seriesName + + ':' + + params[1].value + + '<br/>' + + params[2].seriesName + + ':' + + params[2].value + + '%' + ); + }, + }, + dataZoom: [ + { + show: dataZoomFlag, + realtime: true, + height: 8, + start: 0, + textStyle: { + show: false, + }, + end: zoomEnd, + borderColor: 'rgba(255,255,255,0.20)', + backgroundColor: 'rgba(255,255,255,0.10)', + bottom: '1%', + }, + { + type: 'inside', + realtime: true, + start: 0, + end: 100, + }, + ], + xAxis: [ + { + type: 'category', + data: chartData.xdata, + splitLine: { + lineStyle: { + color: 'rgba(255,255,255,0.2)', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + // 鏀瑰彉x杞撮鑹� + lineStyle: { + color: 'rgba(255,255,255,0.2)', + type: 'solid', + }, + }, + axisLabel: { + // 鏀瑰彉x杞村瓧浣撻鑹插拰澶у皬 + show: true, + textStyle: { + color: 'rgba(250,250,250,1)', + fontSize: 12, + }, + }, + }, + ], + yAxis: [ + { + name: '', + nameTextStyle: { + color: 'rgb(250,250,250,.7)', + fontSize: 12, + padding: [0, 25, 0, 0], + }, + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,0.1)', + type: 'dotted', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + // 鏀瑰彉y杞撮鑹� + show: false, + lineStyle: { + color: 'rgba(255,255,255,0.2)', + type: 'solid', + }, + }, + axisLabel: { + // 鏀瑰彉y杞村瓧浣撻鑹插拰澶у皬 + textStyle: { + color: 'rgba(250,250,250,0.6)', + fontSize: 12, + }, + }, + }, + { + name: '', + nameTextStyle: { + color: 'rgb(250,250,250,.7)', + fontSize: 12, + padding: [0, 0, 0, 40], + }, + show: true, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + textStyle: { + fontSize: 12, + color: 'rgba(255,255,255, .7)', + }, + }, + }, + ], + series: [ + { + type: 'bar', + barMinHeight: 0, + name: '浠婂勾', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#1AA0FF', + }, + { + offset: 1, + color: 'rgba(3,14,55,0.6)', + }, + ]), + borderWidth: 2, + }, + }, + data: chartData.currentYearList, + }, + { + type: 'bar', + barMinHeight: 0, + name: '鍘诲勾', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#FFBD46', + }, + { + offset: 1, + color: 'rgba(3,14,55,0.6)', + }, + ]), + borderWidth: 2, + }, + }, + data: chartData.lastYearList, + barCategoryGap: '40%', + }, + { + z: 9, + yAxisIndex: 1, + name: '澧炲箙', + type: 'line', + showAllSymbol: true, + symbol: 'rect', + symbolSize: 5, + itemStyle: { + color: '#fff', + width: 1, + shadowColor: '#fff', + borderColor: '#44E5BE', + shadowBlur: 2, + }, + lineStyle: { + width: 1, + color: '#44E5BE', + }, + data: chartData.rateDataOne, + }, + ], + }; + + return ( + <> + <div> + <ReactECharts style={{ height: '200px' }} option={option} /> + </div> + </> + ); +}; + +export default StatCharts; diff --git a/src/pages/right/components/task-charts.jsx b/src/pages/right/components/task-charts.jsx new file mode 100644 index 0000000..2b13ca5 --- /dev/null +++ b/src/pages/right/components/task-charts.jsx @@ -0,0 +1,140 @@ +import React from 'react'; +import ReactECharts from 'echarts-for-react'; +import * as echarts from 'echarts/core'; + +const TasksCharts = () => { + const backgroundColor = '#101736'; + const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2涓互涓婄殑series灏遍渶瑕佺敤鍒癱olor鏁扮粍 + const legend = { + //data锛屽氨鏄彇寰楁瘡涓猻eries閲岄潰鐨刵ame灞炴�с�� + orient: 'horizontal', + icon: 'circle', //鍥句緥褰㈢姸 + //鍦嗙偣澶у皬 + padding: 0, + top: 15, + right: 10, + itemWidth: 6, //灏忓渾鐐瑰搴� + itemHeight: 6, // 灏忓渾鐐归珮搴� + itemGap: 6, // 鍥句緥姣忛」涔嬮棿鐨勯棿闅斻�俒 default: 10 ]妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞�鏃朵负绾靛悜闂撮殧銆� + textStyle: { + fontSize: 12, + color: '#ffffff', + }, + }; + const tooltip = { + show: true, + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }; + let seriesData = [ + { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] }, + { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] }, + { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] }, + { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] }, + ]; + const commonConfigFn = (index) => { + return { + type: 'line', + smooth: true, + symbol: 'emptyCircle', //绌哄績灏忓渾鐐广�傜嚎鏉″皬鍦嗙偣褰㈢姸 + symbolSize: 6, //灏忓渾鐐瑰ぇ灏� + itemStyle: { + //杩樻槸灏忓渾鐐硅缃� + }, + + label: { + show: false, //涓嶆樉绀哄皬鍦嗙偣涓婄殑label鏂囧瓧 + }, + lineStyle: { + width: 1, //绾挎潯璁剧疆 + }, + + areaStyle: { + //濉厖绾挎潯涓嬮潰鐨勯潰绉尯鍩熼鑹层�傦紙areaStyle鍙槸閿︿笂娣昏姳锛� + opacity: 0.4, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: color[index], // 涓婂鐨勯鑹� + }, + { + offset: 1, + color: 'transparent', // 涓嬪鐨勯鑹� + }, + ], + global: false, // 缂虹渷涓� false + }, + }, + }; + }; + + seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) })); + const option = { + color, + tooltip, + legend, + grid: { + top: '15%', + left: '3%', + right: '4%', + bottom: '5%', + containLabel: true, + }, + + xAxis: { + show: true, //鏄剧ずx杞�+x杞磍abel鏂囧瓧 + type: 'category', + boundaryGap: false, //浠嶻杞村嚭鍙戯紝杩欎釜false寰堝ソ鐨� + axisLine: { + show: true, //鏄剧ずx鍧愭爣杞磋酱绾� + lineStyle: { + color: 'rgba(255,255,255,.4)', + }, + }, + axisTick: { + show: false, //涓嶆樉绀簒鍧愭爣1cm鍒诲害 + }, + axisLabel: { + color: '#ffffff', //x杞磍abel鏂囧瓧棰滆壊 + }, + splitLine: { + show: false, //涓嶆樉绀篻rid绔栧悜鍒嗗壊绾� + }, + + data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'], + }, + yAxis: { + type: 'value', + axisLabel: { + color: '#ffffff', + }, + axisLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,.4)', + }, + }, + splitLine: { + show: false, //涓嶆樉绀篻rid姘村钩鍒嗗壊绾� + }, + }, + + series: seriesData, + }; + + return ( + <div> + <ReactECharts style={{ height: '250px' }} option={option} /> + </div> + ); +}; + +export default TasksCharts; diff --git a/src/pages/right/index.jsx b/src/pages/right/index.jsx new file mode 100644 index 0000000..06ee269 --- /dev/null +++ b/src/pages/right/index.jsx @@ -0,0 +1,66 @@ +import { LeftOutlined, RightOutlined, UnorderedListOutlined } from '@ant-design/icons'; +import { useSpring, animated } from 'react-spring'; +import { useState } from 'react'; +import { Modal } from 'antd'; +import styles from '@/styles/panel.module.scss'; + +import Panel from '@/components/panel'; + +// import Allerway from './components/Allerway'; +import StatCharts from './components/stat-charts'; +import TaskCharts from './components/task-charts'; +// import Handles from './components/Handles'; + +const Right = () => { + const [isExpanded, setIsExpanded] = useState(false); + + const containerAnimation = useSpring({ + transform: isExpanded ? 'translate(0%)' : 'translateX(100%)', + config: { precision: 0.01 }, + }); + + const toggleContainer = () => { + setIsExpanded(!isExpanded); + }; + return ( + <div> + <animated.div + style={{ + ...containerAnimation, + }} + className={`absolute top-2 w-[280px] right-2 bottom-2 ${styles.panel}`} + > + <div className="overflow-auto h-full"> + <Panel title="鍑哄叆搴撲俊鎭�"> + {/* <Allerway /> */} + </Panel> + <Panel title="鍑哄叆搴撶粺璁�"> + <StatCharts /> + </Panel> + <Panel title="浠诲姟鍒嗗竷"> + <TaskCharts /> + </Panel> + </div> + <div + className={`${'absolute text-white top-1/2 -translate-y-1/2 left-[-21px] bg-black bg-opacity-20 text-xl font-bold bg'}`} + > + {isExpanded ? ( + <RightOutlined + className="hover:scale-110 transition-transform duration-300" + onClick={toggleContainer} + /> + ) : ( + <LeftOutlined + className="hover:scale-110 transition-transform duration-300 " + onClick={toggleContainer} + /> + )} + </div> + {/* <Handles /> */} + </animated.div> + + </div> + ); +}; + +export default Right; -- Gitblit v1.9.1