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