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