From 201321e7379ebc00a80fd48415ece152481801fb Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期日, 28 四月 2024 15:09:11 +0800
Subject: [PATCH] #
---
src/components/panel.jsx | 6
package-lock.json | 50 ++++
package.json | 4
src/pages/left/components/Capacity.tsx | 89 ++++++++
src/pages/left/components/Task.tsx | 157 +++++++++++++++
src/pages/left/components/stock-charts.jsx | 202 ++++++++++++++++++++
src/pages/left/index.jsx | 4
src/pages/left/components/AgvPanel.tsx | 34 +++
8 files changed, 539 insertions(+), 7 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 319f914..9501035 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,8 @@
"@tweenjs/tween.js": "^21.0.0",
"antd": "^5.16.4",
"axios": "^1.6.2",
+ "echarts": "^5.4.2",
+ "echarts-for-react": "^3.0.2",
"maath": "0.10.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -6633,6 +6635,33 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
"dev": true
},
+ "node_modules/echarts": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
+ "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+ "dependencies": {
+ "tslib": "2.3.0",
+ "zrender": "5.5.0"
+ }
+ },
+ "node_modules/echarts-for-react": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
+ "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
+ "dependencies": {
+ "fast-deep-equal": "^3.1.3",
+ "size-sensor": "^1.0.1"
+ },
+ "peerDependencies": {
+ "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0",
+ "react": "^15.0.0 || >=16.0.0"
+ }
+ },
+ "node_modules/echarts/node_modules/tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -7253,8 +7282,7 @@
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
- "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
- "dev": true
+ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/fast-glob": {
"version": "3.3.2",
@@ -12639,6 +12667,11 @@
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
"peer": true
},
+ "node_modules/size-sensor": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz",
+ "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
+ },
"node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -14074,6 +14107,19 @@
"integrity": "sha512-raRj6r0gPzopFm5XWBJZr/NuV4EEnT4iE+U3dp5FV5pCb588Gmm3zLIp/j9yqqcMiHH8VNQlerLTgOqL7krh6w==",
"peer": true
},
+ "node_modules/zrender": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
+ "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+ "dependencies": {
+ "tslib": "2.3.0"
+ }
+ },
+ "node_modules/zrender/node_modules/tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"node_modules/zustand": {
"version": "3.7.2",
"resolved": "https://registry.npmmirror.com/zustand/-/zustand-3.7.2.tgz",
diff --git a/package.json b/package.json
index 3fca06a..baaef17 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
"react-router-dom": "^6.15.0",
"react-spring": "^9.7.1",
"three": "^0.153.0",
- "valtio": "^1.12.1"
+ "valtio": "^1.12.1",
+ "echarts": "^5.4.2",
+ "echarts-for-react": "^3.0.2"
},
"devDependencies": {
"@types/react": "^18.2.66",
diff --git a/src/components/panel.jsx b/src/components/panel.jsx
index 5f01f6d..c38e60e 100644
--- a/src/components/panel.jsx
+++ b/src/components/panel.jsx
@@ -42,18 +42,20 @@
});
};
+ console.log(styles);
+
return (
<div className="w-full mt-2" ref={cardRef}>
{/* <BorderBox8 dur={12}> */}
<div>
<animated.div
- className={`border border-solid ${styles['animate-border-glow']} ${styles.card} `}
+ className={`border border-solid ${styles['animate-border-glow']} ${styles.card} `}
style={{ transform: xys.to(trans) }}
onMouseLeave={handleMouseLeave}
onMouseMove={handleMouseMove}
>
{props.title && (
- <p className={`${styles.title} text-sm flex justify-between border-solid`}>
+ <p className={`${styles.title} text-sm flex justify-between`}>
{props.title} {props.right}
</p>
)}
diff --git a/src/pages/left/components/AgvPanel.tsx b/src/pages/left/components/AgvPanel.tsx
new file mode 100644
index 0000000..5b34104
--- /dev/null
+++ b/src/pages/left/components/AgvPanel.tsx
@@ -0,0 +1,34 @@
+import { ScrollBoard } from '@jiaminghi/data-view-react';
+
+const AgvPanel = () => {
+ const config = {
+ header: ['缂栧彿', '鐢甸噺', '浣嶇疆', '閫熷害'],
+ data: [
+ ['AGV1', '100%', 'A1', '1m/s'],
+ ['AGV2', '100%', 'A2', '1m/s'],
+ ['AGV3', '100%', 'A3', '1m/s'],
+ ['AGV4', '100%', 'A4', '1m/s'],
+ ['AGV5', '100%', 'A5', '1m/s'],
+ ['AGV6', '100%', 'A6', '1m/s'],
+ ['AGV7', '100%', 'A7', '1m/s'],
+ ['AGV8', '100%', 'A8', '1m/s'],
+ ['AGV9', '100%', 'A9', '1m/s'],
+ ['AGV10', '100%', 'A10', '1m/s'],
+ ['AGV11', '100%', 'A11', '1m/s'],
+ ],
+ 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 AgvPanel;
diff --git a/src/pages/left/components/Capacity.tsx b/src/pages/left/components/Capacity.tsx
new file mode 100644
index 0000000..f212c21
--- /dev/null
+++ b/src/pages/left/components/Capacity.tsx
@@ -0,0 +1,89 @@
+// import { observer } from "mobx-react-lite";
+import React, { useEffect, useState } from 'react';
+import * as echarts from 'echarts/core';
+import ReactECharts from 'echarts-for-react';
+import { GetAreaLocationWeekSummary } from 'apis';
+import { config } from '../../config';
+import { useRequest } from 'ahooks';
+
+function Capacity() {
+ const [data, setData] = useState<Record<string, any>[]>([]);
+ useRequest(init, { ...config });
+
+ async function init() {
+ const res = await GetAreaLocationWeekSummary<Record<string, any>[]>({});
+ setData(res.resultData || []);
+ }
+
+ const options = {
+ title: {
+ text: '涓�鍛ㄥ簱瀹规洸绾垮浘',
+ top: 16,
+ left: 16,
+ textStyle: {
+ color: '#FBFBFB',
+ //瀛椾綋椋庢牸,'normal','italic','oblique'
+ fontStyle: 'normal',
+ //瀛椾綋绮楃粏 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
+ fontWeight: 'bold',
+ //瀛椾綋绯诲垪
+ fontFamily: 'sans-serif',
+ //瀛椾綋澶у皬
+ fontSize: 15,
+ },
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#414348',
+ },
+ },
+ axisLabel: {
+ textStyle: {
+ color: 'white',
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ data: data.map((item) => item.reportDate.split(' ')[0]),
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: false,
+ },
+ },
+ grid: {
+ x: 50,
+ y: 50,
+ x2: 20,
+ y2: 30,
+ },
+ series: [
+ {
+ data: data.map((item) => item.emptyLocationTotal),
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ color: '#06CDCE',
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#06CDCE' },
+ { offset: 1, color: '#06CDCE00' },
+ ]),
+ },
+ },
+ },
+ ],
+ };
+
+ return <ReactECharts option={options} />;
+}
+// export default observer(Capacity);
+export default Capacity;
diff --git a/src/pages/left/components/Task.tsx b/src/pages/left/components/Task.tsx
new file mode 100644
index 0000000..c78918e
--- /dev/null
+++ b/src/pages/left/components/Task.tsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import ReactECharts from 'echarts-for-react';
+import { useRequest } from 'ahooks';
+import { config } from '../../config';
+import * as echarts from 'echarts/core';
+import { GetCurrentLocationSummary } from 'apis';
+
+const Task: React.FC = () => {
+ const trafficWay = [
+ {
+ name: 'HG',
+ value: 20,
+ },
+ {
+ name: 'RG',
+ value: 10,
+ },
+ {
+ name: 'MG',
+ value: 20,
+ },
+ {
+ name: 'FM',
+ value: 10,
+ },
+ {
+ name: 'PG',
+ value: 30,
+ },
+ ];
+
+ const data = [];
+ const color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00'];
+ for (let i = 0; i < trafficWay.length; i++) {
+ data.push(
+ {
+ value: trafficWay[i].value,
+ name: trafficWay[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderColor: color[i],
+ shadowColor: color[i],
+ },
+ },
+ },
+ {
+ value: 2,
+ name: '',
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ color: 'rgba(0, 0, 0, 0)',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ borderWidth: 0,
+ },
+ },
+ }
+ );
+ }
+ const seriesOption = [
+ {
+ name: '',
+ type: 'pie',
+ clockWise: false,
+ radius: [35, 39],
+ center: ['50%', '35%'],
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'outside',
+ color: '#ddd',
+ formatter: function (params) {
+ let percent = 0;
+ let total = 0;
+ for (let i = 0; i < trafficWay.length; i++) {
+ total += trafficWay[i].value;
+ }
+ percent = ((params.value / total) * 100).toFixed(0);
+ if (params.name !== '') {
+ return '' + params.name + '\n' + '\n' + '' + percent + '%';
+ } else {
+ return '';
+ }
+ },
+ },
+ labelLine: {
+ length: 10,
+ length2: 20,
+ show: true,
+ color: '#00ffff',
+ },
+ },
+ },
+ data: data,
+ },
+ ];
+ const option = {
+ color: color,
+ title: {
+ text: '',
+ top: '48%',
+ textAlign: 'center',
+ left: '49%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 18,
+ fontWeight: '400',
+ },
+ },
+ tooltip: {
+ show: true,
+ },
+ legend: {
+ icon: 'circle',
+ // 璁剧疆icon澶у皬
+ itemWidth: 8,
+ orient: 'horizontal',
+ // x: 'left',
+ data: ['HG', 'RG', 'MG', 'FM', 'PG'],
+ left: 10,
+ bottom: 20,
+ align: 'left',
+ textStyle: {
+ color: '#fff',
+ },
+ itemGap: 10,
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ // left: '25%', // 璋冩暣缃戞牸宸︿晶浣嶇疆
+ // top: '20%', // 璋冩暣缃戞牸椤堕儴浣嶇疆
+ // right: '25%', // 璋冩暣缃戞牸鍙充晶浣嶇疆
+ // bottom: '20%', // 璋冩暣缃戞牸搴曢儴浣嶇疆
+ },
+ series: seriesOption,
+ };
+ return (
+ <>
+ <div>
+ <ReactECharts style={{ height: '200px' }} option={option} />
+ </div>
+ </>
+ );
+};
+
+export default Task;
diff --git a/src/pages/left/components/stock-charts.jsx b/src/pages/left/components/stock-charts.jsx
new file mode 100644
index 0000000..9fe5aba
--- /dev/null
+++ b/src/pages/left/components/stock-charts.jsx
@@ -0,0 +1,202 @@
+import React from 'react';
+import ReactECharts from 'echarts-for-react';
+// import { useRequest } from 'ahooks';
+// import { config } from '../../config';
+import * as echarts from 'echarts/core';
+// import { GetCurrentLocationSummary } from 'apis';
+
+const StockCharts = () => {
+ // const { data } = useRequest(() => GetCurrentLocationSummary({}), {
+ // ...config,
+ // });
+
+ // const resultData = data?.resultData || {};
+
+ var barWidth = 3;
+ const option3_xdata = [
+ 'A12',
+ 'A2',
+ 'A3',
+ 'A4',
+ 'A5',
+ 'A7',
+ 'B1',
+ 'B3',
+ 'Y2',
+ 'Y1',
+ 'C1',
+ 'C2',
+ 'C4',
+ 'A1',
+ 'B4',
+ 'C6',
+ ];
+ const option3_Ydata = [75, 62, 57, 42, 35, 32, 29, 27, 75, 62, 57, 42, 35, 32, 29, 27];
+
+ const option3_Ydatamax = [];
+ var yMax2 = Math.max.apply(null, option3_Ydata);
+ for (var i = 0; i < option3_Ydata.length; i++) {
+ option3_Ydatamax.push(yMax2);
+ }
+
+ const option = {
+ title: {
+ show: false,
+ },
+ tooltip: {
+ trigger: 'item',
+ },
+ grid: {
+ borderWidth: 0,
+ top: '10',
+ left: '10',
+ right: '30',
+ bottom: '3%',
+ },
+ // color: color,
+ yAxis: [
+ {
+ inverse: true,
+ type: 'category',
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ inside: false,
+ },
+ data: option3_xdata,
+ },
+ ],
+ xAxis: {
+ type: 'value',
+
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ },
+ dataZoom: [
+ {
+ type: 'slider',
+ show: true,
+ yAxisIndex: [0],
+ right: 0,
+ width: 8,
+ height: '84%',
+ top: '7%',
+ start: 0,
+ end: 50,
+ zoomLock: true,
+ // show: false,
+ showDetail: false,
+ showDataShadow: false,
+ brushSelect: false,
+ fillerColor: 'rgba(200,200,200,.3)',
+ backgroundColor: 'rgba(200,200,200,.05)',
+ borderColor: 'transparent',
+ handleSize: '0%',
+ },
+ ],
+
+ series: [
+ {
+ name: '',
+ type: 'bar',
+ zlevel: 2,
+ barWidth: barWidth,
+ itemStyle: {
+ normal: {
+ barBorderRadius: 2,
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ {
+ offset: 0,
+ color: '#248ff7',
+ },
+ {
+ offset: 1,
+ color: '#6851f1',
+ },
+ ]),
+ },
+ emphasis: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
+ ]),
+ },
+ },
+ data: option3_Ydata,
+ animationDuration: 1500,
+ label: {
+ normal: {
+ color: '#555',
+ show: true,
+ position: [0, '-16px'],
+ textStyle: {
+ fontSize: 12,
+ color: '#fff',
+ },
+ formatter: function (a, b) {
+ return a.name;
+ },
+ },
+ },
+ },
+ {
+ // 鑳屾櫙
+ type: 'pictorialBar',
+ animationDuration: 0,
+ symbolRepeat: 'fixed',
+ symbolMargin: '20%',
+ symbol: 'roundRect',
+ symbolSize: [barWidth * 1.2, barWidth],
+ itemStyle: {
+ normal: {
+ color: 'rgba(200,200,200,.06)',
+ },
+ },
+ label: {
+ normal: {
+ color: '#fff',
+ show: true,
+ position: 'right',
+ textStyle: {
+ fontSize: 12,
+ color: '#fff',
+ },
+ formatter: function (a) {
+ // console.log(a);
+ return option3_Ydata[a.dataIndex];
+ },
+ },
+ },
+ data: option3_Ydatamax,
+ z: 0,
+ animationEasing: 'elasticOut',
+ },
+ ],
+ animationEasing: 'cubicOut',
+ };
+
+ return (
+ <>
+ <div>
+ <ReactECharts style={{ height: '240px' }} option={option} />
+ </div>
+ </>
+ );
+};
+
+export default StockCharts;
diff --git a/src/pages/left/index.jsx b/src/pages/left/index.jsx
index dd323b4..a669749 100644
--- a/src/pages/left/index.jsx
+++ b/src/pages/left/index.jsx
@@ -5,7 +5,7 @@
import Panel from '@/components/panel';
-// import Buffer from './modules/Buffer';
+import StockCharts from './components/stock-charts';
// import Task from './modules/Task';
// import AgvPanel from './modules/AgvPanel';
@@ -30,7 +30,7 @@
>
<div className="h-full overflow-auto">
<Panel title="搴撴埧鎯呭喌">
- {/* <Buffer /> */}
+ <StockCharts />
</Panel>
<Panel title="搴撳瓨绫诲瀷">
{/* <Task /> */}
--
Gitblit v1.9.1