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