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