From 3f41ad8cf82b08585e89815feadb5a17938b3033 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 15 五月 2024 16:07:26 +0800 Subject: [PATCH] # --- src/pages/left/components/loc-charts.jsx | 4 + src/pages/right/index.jsx | 6 +- src/pages/right/components/task-charts.jsx | 40 +++++++++---- src/api/report/index.js | 8 ++ src/pages/right/components/inout-charts.jsx | 63 ++++++++++++++------- 5 files changed, 85 insertions(+), 36 deletions(-) diff --git a/src/api/report/index.js b/src/api/report/index.js index a06f450..180db24 100644 --- a/src/api/report/index.js +++ b/src/api/report/index.js @@ -14,4 +14,12 @@ return res.data.data; } return Promise.reject(new Error(res.data.msg)); +} + +export async function getTaskCharts(_params) { + const res = await request.get('/digital/charts/taskcharts', _params); + if (res.data.code === 200) { + return res.data.data; + } + return Promise.reject(new Error(res.data.msg)); } \ No newline at end of file diff --git a/src/pages/left/components/loc-charts.jsx b/src/pages/left/components/loc-charts.jsx index 0029878..1bb7926 100644 --- a/src/pages/left/components/loc-charts.jsx +++ b/src/pages/left/components/loc-charts.jsx @@ -48,6 +48,10 @@ } }, []); + useEffect(() => { + console.log(trafficWay); + }, [trafficWay]) + const data = []; const color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00']; diff --git a/src/pages/right/components/inout-charts.jsx b/src/pages/right/components/inout-charts.jsx index 2a8ba0a..0342784 100644 --- a/src/pages/right/components/inout-charts.jsx +++ b/src/pages/right/components/inout-charts.jsx @@ -1,29 +1,50 @@ +import { useEffect, useState } from 'react'; import { ScrollBoard } from '@jiaminghi/data-view-react'; +import { getAgvCharts } from '@/api/report'; const InOutCharts = () => { - 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], - }; + + const [apiData, setApiData] = useState([ + ['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'], + ]); + + useEffect(() => { + const timer = setInterval(() => { + getAgvCharts().then(res => { + setApiData(res.reverse().map(item => { + return ["AGV" + item.agvNo, item.loaderTheta + "掳", item.forkLength, item.inOutFlag] + })) + }) + }, 1000); + + return () => { + clearInterval(timer); + } + }, []); + return ( <ScrollBoard - config={config} - style={{ width: '100%', height: '280px', fontSize: '12px', marginBottom: '8px' }} + config={{ + header: ['缂栧彿', '杞借揣鍙�', '璐у弶', '浣滀笟'], + data: apiData, + headerBGC: '#00fff138', + oddRowBGC: '#00000017', + evenRowBGC: '#ededed13', + headerHeight: 28, + rowNum: 10, + columnWidth: [80, 120, 100, 130], + }} + style={{ width: '100%', height: '400px', fontSize: '12px', marginBottom: '8px' }} /> ); }; diff --git a/src/pages/right/components/task-charts.jsx b/src/pages/right/components/task-charts.jsx index 66a002d..91639b7 100644 --- a/src/pages/right/components/task-charts.jsx +++ b/src/pages/right/components/task-charts.jsx @@ -1,9 +1,32 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import ReactECharts from 'echarts-for-react'; import * as echarts from 'echarts/core'; +import { getTaskCharts } from '@/api/report'; const TasksCharts = () => { - const backgroundColor = '#101736'; + const [seriesData, setSeriesData] = useState([ + { 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 [week, setWeek] = useState(['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']); + + useEffect(() => { + const timer = setInterval(() => { + getTaskCharts().then(res => { + setSeriesData(res.data); + setWeek(res.week); + console.log(res); + }) + }, 1000); + + return () => { + clearInterval(timer); + } + }, []); + const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2涓互涓婄殑series灏遍渶瑕佺敤鍒癱olor鏁扮粍 const legend = { //data锛屽氨鏄彇寰楁瘡涓猻eries閲岄潰鐨刵ame灞炴�с�� @@ -28,12 +51,6 @@ 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', @@ -76,7 +93,6 @@ }; }; - seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) })); const option = { color, tooltip, @@ -109,7 +125,7 @@ show: false, //涓嶆樉绀篻rid绔栧悜鍒嗗壊绾� }, - data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'], + data: week, }, yAxis: { type: 'value', @@ -127,12 +143,12 @@ }, }, - series: seriesData, + series: seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) })), }; return ( <div> - <ReactECharts style={{ height: '280px' }} option={option} /> + <ReactECharts style={{ height: '360px' }} option={option} /> </div> ); }; diff --git a/src/pages/right/index.jsx b/src/pages/right/index.jsx index df56a08..b61e57c 100644 --- a/src/pages/right/index.jsx +++ b/src/pages/right/index.jsx @@ -31,15 +31,15 @@ className={`absolute top-2 w-[280px] right-2 bottom-2 ${styles.panel}`} > <div className="overflow-hidden h-full"> - <Panel title="鍑哄叆搴撲俊鎭�"> - <InOutCharts /> - </Panel> <Panel title="鍑哄叆搴撶粺璁�"> <StatCharts /> </Panel> <Panel title="浠诲姟鍒嗗竷"> <TaskCharts /> </Panel> + <Panel title="AGV淇℃伅"> + <InOutCharts /> + </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'}`} -- Gitblit v1.9.1