From 8491686b38fbaac5811043d843ab4f1cad98eebf Mon Sep 17 00:00:00 2001
From: setcy <2670061551@qq.com>
Date: Sat, 9 Sep 2023 00:32:54 +0800
Subject: [PATCH] feat: update top service

---
 src/components/datav/RankingBoard.js  | 116 ++++++++++++++++----------
 src/components/datav/ScrollBoard.js   |  37 --------
 src/components/datav/ScrollBoard.less |   7 --
 src/components/datav/index.js         |   1 -
 4 files changed, 74 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/datav/ScrollBoard.js
 delete mode 100644 src/components/datav/ScrollBoard.less

diff --git a/src/components/datav/RankingBoard.js b/src/components/datav/RankingBoard.js
index f5cbf9b..d7a7e4c 100644
--- a/src/components/datav/RankingBoard.js
+++ b/src/components/datav/RankingBoard.js
@@ -1,56 +1,88 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { ScrollRankingBoard } from '@jiaminghi/data-view-react'
 
 import './RankingBoard.less'
+import httpGet from '../../service/request'
 
-const config = {
-  data: [
-    {
-      name: '日常养护',
-      value: 55,
-    },
-    {
-      name: '交通事故',
-      value: 120,
-    },
-    {
-      name: '路面',
-      value: 78,
-    },
-    {
-      name: '桥通',
-      value: 66,
-    },
-    {
-      name: '计日工',
-      value: 80,
-    },
-    {
-      name: '路基',
-      value: 45,
-    },
-    {
-      name: '交安设施',
-      value: 29,
-    },
-    {
-      name: '除雪',
-      value: 29,
-    },
-    {
-      name: '绿化',
-      value: 29,
-    },
-  ],
-  rowNum: 9,
+let data = [
+  {
+    name: '日常养护',
+    value: 55,
+  },
+  {
+    name: '交通事故',
+    value: 120,
+  },
+  {
+    name: '路面',
+    value: 78,
+  },
+  {
+    name: '桥通',
+    value: 66,
+  },
+  {
+    name: '计日工',
+    value: 80,
+  },
+  {
+    name: '路基',
+    value: 45,
+  },
+  {
+    name: '交安设施',
+    value: 29,
+  },
+  {
+    name: '除雪',
+    value: 29,
+  },
+  {
+    name: '绿化',
+    value: 20,
+  },
+]
+function getConfig() {
+  return {
+    data: data,
+    rowNum: data.length,
+  }
 }
 
 export default () => {
+  const [config, setConfig] = useState({})
+  useEffect(() => {
+    createData()
+    getServiceRank()
+
+    const timer = setInterval(createData, 3000)
+    const availabilityTimer = setInterval(getServiceRank, 60000)
+
+    return () => {
+      clearInterval(timer)
+      clearInterval(availabilityTimer)
+    }
+  }, [])
+
+  function createData() {
+    setConfig(getConfig())
+  }
+
   return (
     <div id="ranking-board">
-      <div className="ranking-board-title">巡查上报记录数量</div>
+      <div className="ranking-board-title">近24小时服务访问次数</div>
       <ScrollRankingBoard config={config} />
     </div>
   )
 }
+
+function getServiceRank() {
+  httpGet('https://api.hduhelp.com/aggregating/metric/cdn/top').then(
+    r =>
+      (data = r.map(({ Name, Value }) => ({
+        name: Name,
+        value: Value,
+      })))
+  )
+}
diff --git a/src/components/datav/ScrollBoard.js b/src/components/datav/ScrollBoard.js
deleted file mode 100644
index c2560d7..0000000
--- a/src/components/datav/ScrollBoard.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-
-import { ScrollBoard } from '@jiaminghi/data-view-react'
-
-import './ScrollBoard.less'
-
-const config = {
-  header: ['时间', '病害信息', '数量', '标段'],
-  data: [
-    ['2019-07-01 19:25:00', '路面危害-松散', '5', 'xxxxxxx'],
-    ['2019-07-02 17:25:00', '路面危害-路面油污清理', '13', 'xxxxxxx'],
-    ['2019-07-03 16:25:00', '交安设施-交通标志牌结构', '6', 'xxxxxxx'],
-    ['2019-07-04 15:25:00', '路基危害-防尘网', '2', 'xxxxxxx'],
-    ['2019-07-05 14:25:00', '交安设施-交通标志牌结构', '1', 'xxxxxxx'],
-    ['2019-07-06 13:25:00', '路面危害-松散', '3', 'xxxxxxx'],
-    ['2019-07-07 12:25:00', '路基危害-防尘网', '4', 'xxxxxxx'],
-    ['2019-07-08 11:25:00', '路面危害-路面油污清理', '2', 'xxxxxxx'],
-    ['2019-07-09 10:25:00', '交安设施-交通标志牌结构', '5', 'xxxxxxx'],
-    ['2019-07-10 09:25:00', '路基危害-防尘网', '3', 'xxxxxxx'],
-  ],
-  index: true,
-  columnWidth: [50, 170, 300],
-  align: ['center'],
-  rowNum: 7,
-  headerBGC: '#1981f6',
-  headerHeight: 45,
-  oddRowBGC: 'rgba(0, 44, 81, 0.8)',
-  evenRowBGC: 'rgba(10, 29, 50, 0.8)',
-}
-
-export default () => {
-  return (
-    <div id="scroll-board">
-      <ScrollBoard config={config} />
-    </div>
-  )
-}
diff --git a/src/components/datav/ScrollBoard.less b/src/components/datav/ScrollBoard.less
deleted file mode 100644
index 8ceaaec..0000000
--- a/src/components/datav/ScrollBoard.less
+++ /dev/null
@@ -1,7 +0,0 @@
-#scroll-board {
-  width: 50%;
-  box-sizing: border-box;
-  margin-left: 20px;
-  height: 100%;
-  overflow: hidden;
-}
diff --git a/src/components/datav/index.js b/src/components/datav/index.js
index 39b0c11..e81a32b 100644
--- a/src/components/datav/index.js
+++ b/src/components/datav/index.js
@@ -7,7 +7,6 @@ import DigitalFlop from './DigitalFlop'
 import RankingBoard from './RankingBoard'
 import RoseChart from './RoseChart'
 import WaterLevelChart from './WaterLevelChart'
-import ScrollBoard from './ScrollBoard'
 import Cards from './Cards'
 
 import './index.less'