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