(*)大屏数据接入

api/app/lib/controllers/homepage/index.js

@@ -171,9 +171,36 @@ function getRestfulInfo(opts) {
                         model: models.RestfulApi,
                     }]
             })
+            let top3Obj = {}
+            allApis.rows.map(s => {
+                if (top3Obj[s.restServiceId]) {
+                    top3Obj[s.restServiceId] = { ...top3Obj[s.restServiceId], count: top3Obj[s.restServiceId].count + 1 }
+                } else {
+                    top3Obj[s.restServiceId] = { count: 1, name: s.restfulApi.name }
+                }
+            })
+            let top3Arr = []
+            Object.keys(top3Obj).map(key => {
+                top3Arr.push({
+                    id: key,
+                    name: top3Obj[key].name,
+                    count: top3Obj[key].count
+                })
+            })
+
+            let total = allApis.count;
+            let todayArr = allApis.rows.filter(s => moment().startOf('d') < moment(s.visitTime) && moment().endOf('d') > moment(s.visitTime))
+            let todayUser = Array.from(new Set(todayArr.map(s => s.token)))
+            let totalUser = Array.from(new Set(allApis.rows.map(s => s.token)))
 
             ctx.status = 200;
-            ctx.body = { allApis };
+            ctx.body = {
+                total, //接口访问总次数
+                todayTotal: todayArr.length, //今日访问次数
+                todayUser: todayUser.length, //今日访问用户数
+                totalUser: totalUser.length,//接口访问用户总数
+                top3: top3Arr.sort((a, b) => b.count - a.count).slice(0, 3),//接口访问次数top3
+            };
         } catch (error) {
             ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
             ctx.status = 400;

web/client/src/sections/homePage/components/dataShare.js

@@ -10,6 +10,12 @@ function DataShare(props) {
         cacheKey: 'datatotal',
     });
 
+    const { data: restfulInfo = {} } = useFsRequest({
+        url: 'homepage/restful/info',
+        pollingInterval: 1000 * 60,
+        cacheKey: 'restfulInfo',
+    });
+
     const renderItem = (s) => {
         return <div className='_item_content'>
             <div className={'_item_icon' + s.key} />
@@ -24,11 +30,11 @@ function DataShare(props) {
 
     const leftData = [
         { key: '1', data: mathRound(dataTotal?.total), unit: '万条', title: '共享库数据总量' },
-        { key: '2', data: 2000, unit: '次', title: '访问接口总次数' },
-        { key: '3', data: 2000, unit: '个', title: '访问接口用户总数' }]
+        { key: '2', data: restfulInfo?.total, unit: '次', title: '访问接口总次数' },
+        { key: '3', data: restfulInfo?.totalUser, unit: '个', title: '访问接口用户总数' }]
     const rightData = [
-        { key: '2', data: 2000, unit: '次', title: '接口访问次数' },
-        { key: '3', data: 2000, unit: '个', title: '访问接口用户总数' }]
+        { key: '2', data: restfulInfo?.todayTotal, unit: '次', title: '接口访问次数' },
+        { key: '3', data: restfulInfo?.todayUser, unit: '个', title: '访问接口用户总数' }]
 
     return <Box title={"数据共享"} >
         <div className='data_share'>

web/client/src/sections/homePage/components/dataTop5.js

@@ -4,7 +4,7 @@ import ReactEcharts from 'echarts-for-react';
 import './style.less';
 import { useFsRequest } from '$utils';
 import { mathRound } from './util';
-
+import NoData from './public/noData';
 function DataTop5(props) {
     const { cardContentHeight } = props;
     const { data: dataTotal = {} } = useFsRequest({
@@ -245,8 +245,15 @@ function DataTop5(props) {
     }
 
     return <Box title={"数据量TOP5单位"} bodyPaddingTop={1} >
-        <div className='data_top5_unit'>数据量：万条</div>
-        {renderBody()}
+        {
+            dataTotal?.top5?.length > 0 ?
+                <>
+                    <div className='data_top5_unit'>数据量：万条</div>
+                    {renderBody()}
+                </>
+                : <NoData />
+        }
+
     </Box>
 }
 

web/client/src/sections/homePage/components/hotspotData.js

@@ -1,20 +1,31 @@
 import React, { useEffect, useState } from 'react'
 import Box from './public/table-card';
+import { Tooltip } from 'antd';
 import './style.less';
-
+import { ApiTable, useFsRequest } from '$utils';
 function HotspotData(props) {
 
+    const { data: restfulInfo = {} } = useFsRequest({
+        url: 'homepage/restful/info',
+        pollingInterval: 1000 * 60,
+        cacheKey: 'restfulInfo',
+    });
+
+    const top3 = restfulInfo?.top3 || [{ name: '-', count: '-' }, { name: '-', count: '-' }, { name: '-', count: '-' }]
     return <Box title={"热点数据"} bodyPaddingTop={25}  >
         <div className='hotspot_data_container'>
             <div className='_img'></div>
             <div className='_top1'>
-                <span className='hotspot_title'>热点数据TOP1</span><div className='hotspot_data_number'>256</div>
+                <span className='hotspot_title' title={top3[0].name}>{top3[0].name?.length > 6 ? top3[0].name.substring(0, 6) + '...' : top3[0].name}</span>
+                <div className='hotspot_data_number'>{top3[0].count}</div>
             </div>
             <div className='_top2'>
-                <span className='hotspot_title'>热点数据TOP2</span><div className='hotspot_data_number'>256</div>
+                <span className='hotspot_title' title={top3[2].name}>{top3[2].name?.length > 6 ? top3[2].name.substring(0, 6) + '...' : top3[2].name}</span>
+                <div className='hotspot_data_number'>{top3[2].count}</div>
             </div>
             <div className='_top3'>
-                <span className='hotspot_title'>热点数据TOP3</span><div className='hotspot_data_number'>256</div>
+                <span className='hotspot_title' title={top3[1].name}>{top3[1].name?.length > 6 ? top3[1].name.substring(0, 6) + '...' : top3[1].name}</span>
+                <div className='hotspot_data_number'>{top3[1].count}</div>
             </div>
         </div>
     </Box>

web/client/src/sections/homePage/components/public/table-card.js

@@ -9,7 +9,6 @@ class Box extends React.Component {
         const headerbg = {
             background: 'url(/assets/images/homepage/bigscreen/headertitlebg.png) no-repeat',
             backgroundSize: '100% 100%',
-
         }
         return (
             <div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}>