From 6d21360f263ae282bfa7ca4533154aad66feeb53 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 16 五月 2024 09:07:39 +0800 Subject: [PATCH] # --- src/pages/left/components/action-charts.jsx | 64 ++++++++++++++++++++------------ .env | 1 src/api/report/index.js | 8 ++++ src/pages/left/index.jsx | 6 +- 4 files changed, 52 insertions(+), 27 deletions(-) diff --git a/.env b/.env index ad8b665..50bc131 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ COOL_API_BASE_URL = 'http://192.168.4.15:9090' +# COOL_API_BASE_URL = 'http://localhost:9090' diff --git a/src/api/report/index.js b/src/api/report/index.js index ca69eef..46f40d4 100644 --- a/src/api/report/index.js +++ b/src/api/report/index.js @@ -1,5 +1,13 @@ import request from '../../utils/request'; +export async function getActionCount(_params) { + const res = await request.get('/digital/charts/actioncount', _params); + if (res.data.code === 200) { + return res.data.data; + } + return Promise.reject(new Error(res.data.msg)); +} + export async function getAgvCharts(_params) { const res = await request.get('/digital/charts/agvcharts', _params); if (res.data.code === 200) { diff --git a/src/pages/left/components/stock-charts.jsx b/src/pages/left/components/action-charts.jsx similarity index 77% rename from src/pages/left/components/stock-charts.jsx rename to src/pages/left/components/action-charts.jsx index 30c74cc..ebe39d2 100644 --- a/src/pages/left/components/stock-charts.jsx +++ b/src/pages/left/components/action-charts.jsx @@ -1,19 +1,10 @@ -import React from 'react'; +import { useEffect, useState } 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'; +import { getActionCount } from '@/api/report'; -const StockCharts = () => { - // const { data } = useRequest(() => GetCurrentLocationSummary({}), { - // ...config, - // }); - - // const resultData = data?.resultData || {}; - - var barWidth = 3; - const option3_xdata = [ +const ActionCharts = () => { + const [xdata, setXdata] = useState([ 'A12', 'A2', 'A3', @@ -30,12 +21,38 @@ 'A1', 'B4', 'C6', - ]; - const option3_Ydata = [75, 62, 57, 42, 35, 32, 29, 27, 75, 62, 57, 42, 35, 32, 29, 27]; + ]); + const [ydata, setYdata] = useState([75, 62, 57, 42, 35, 32, 29, 27, 75, 62, 57, 42, 35, 32, 29, 27]); + useEffect(() => { + const fetchChartsData = () => { + getActionCount().then(res => { + const dualXdata = []; + const dualYdata = []; + res.forEach(item => { + dualXdata.push(item.name); + dualYdata.push(item.count); + }) + setXdata(dualXdata); + setYdata(dualYdata); + }) + } + + fetchChartsData(); + + const timer = setInterval(() => { + fetchChartsData(); + }, 1000); + + return () => { + clearInterval(timer); + } + }, []); + + var barWidth = 3; const option3_Ydatamax = []; - var yMax2 = Math.max.apply(null, option3_Ydata); - for (var i = 0; i < option3_Ydata.length; i++) { + var yMax2 = Math.max.apply(null, ydata); + for (var i = 0; i < ydata.length; i++) { option3_Ydatamax.push(yMax2); } @@ -50,7 +67,7 @@ borderWidth: 0, top: '10', left: '10', - right: '30', + right: '50', bottom: '3%', }, // color: color, @@ -68,7 +85,7 @@ show: false, inside: false, }, - data: option3_xdata, + data: xdata, }, ], xAxis: { @@ -97,7 +114,7 @@ height: '84%', top: '7%', start: 0, - end: 50, + end: 200, zoomLock: true, // show: false, showDetail: false, @@ -137,7 +154,7 @@ ]), }, }, - data: option3_Ydata, + data: ydata, animationDuration: 1500, label: { normal: { @@ -177,8 +194,7 @@ color: '#fff', }, formatter: function (a) { - // console.log(a); - return option3_Ydata[a.dataIndex]; + return ydata[a.dataIndex]; }, }, }, @@ -199,4 +215,4 @@ ); }; -export default StockCharts; +export default ActionCharts; diff --git a/src/pages/left/index.jsx b/src/pages/left/index.jsx index 27b8158..19f6a17 100644 --- a/src/pages/left/index.jsx +++ b/src/pages/left/index.jsx @@ -5,7 +5,7 @@ import Panel from '@/components/panel'; -import StockCharts from './components/stock-charts'; +import ActionCharts from './components/action-charts'; import LocCharts from './components/loc-charts'; import AgvCharts from './components/agv-charts'; import CapacityCharts from './components/capacity-charts'; @@ -29,8 +29,8 @@ className={`absolute top-2 left-2 bottom-2 w-[280px] ${styles.panel}`} > <div className="h-full overflow-hidden"> - <Panel title="搴撴埧鎯呭喌"> - <StockCharts /> + <Panel title="鍔ㄤ綔缁熻"> + <ActionCharts /> </Panel> <Panel title="搴撳瓨绫诲瀷"> <LocCharts /> -- Gitblit v1.9.1