（*）大屏UI提交

1 year ago · 1b47edcca1
31 changed files with 788 additions and 86 deletions
--- a/api/.vscode/launch.json
+++ b/api/.vscode/launch.json
@ -16,7 +16,7 @@
                "-p 4400",
                // 研发
                "-g postgres://FashionAdmin:123456@10.8.30.39:5432/GovernmentDataResourceCenter",
-                "-b http://10.8.30.160:8085"
+                "-b http://10.8.30.161:31420"
            ]
        },
        {
--- a/web/client/assets/images/homePage/bigscreen/2(1).png
+++ b/web/client/assets/images/homePage/bigscreen/2(1).png
--- a/web/client/assets/images/homePage/bigscreen/3(1).png
+++ b/web/client/assets/images/homePage/bigscreen/3(1).png
--- a/web/client/assets/images/homePage/bigscreen/4(1).png
+++ b/web/client/assets/images/homePage/bigscreen/4(1).png
--- a/web/client/assets/images/homePage/bigscreen/accessdata.png
+++ b/web/client/assets/images/homePage/bigscreen/accessdata.png
--- a/web/client/assets/images/homePage/bigscreen/button(2).png
+++ b/web/client/assets/images/homePage/bigscreen/button(2).png
--- a/web/client/assets/images/homePage/bigscreen/button.png
+++ b/web/client/assets/images/homePage/bigscreen/button.png
--- a/web/client/assets/images/homePage/bigscreen/centerbg.png
+++ b/web/client/assets/images/homePage/bigscreen/centerbg.png
--- a/web/client/assets/images/homePage/bigscreen/centerdatabg1.png
+++ b/web/client/assets/images/homePage/bigscreen/centerdatabg1.png
--- a/web/client/assets/images/homePage/bigscreen/centerdatabg2.png
+++ b/web/client/assets/images/homePage/bigscreen/centerdatabg2.png
--- a/web/client/assets/images/homePage/bigscreen/硬盘.png
+++ b/web/client/assets/images/homePage/bigscreen/硬盘.png
--- a/web/client/assets/images/homePage/bigscreen/empty.png
+++ b/web/client/assets/images/homePage/bigscreen/empty.png
--- a/web/client/assets/images/homePage/bigscreen/hotspotdatabg.png
+++ b/web/client/assets/images/homePage/bigscreen/hotspotdatabg.png
--- a/web/client/assets/images/homePage/bigscreen/memory.png
+++ b/web/client/assets/images/homePage/bigscreen/memory.png
--- a/web/client/assets/images/homePage/bigscreen/todaybg.png
+++ b/web/client/assets/images/homePage/bigscreen/todaybg.png
--- a/web/client/index.ejs
+++ b/web/client/index.ejs
@ -11,6 +11,11 @@
        font-family: YouSheBiaoTiHei;
        src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
    }
+
+    @font-face {
+        font-family: D-DIN-Bold;
+        src: url("/assets/font_sc/D-DIN-Bold.ttf");
+    }
 </style>

 <body style="background: transparent">
--- a/web/client/index.html
+++ b/web/client/index.html
@ -12,6 +12,11 @@
        font-family: YouSheBiaoTiHei;
        src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
    }
+
+    @font-face {
+        font-family: D-DIN-Bold;
+        src: url("/assets/font_sc/D-DIN-Bold.ttf");
+    }
 </style>

 <body style="background: #0F1C2A;">
--- a/web/client/src/sections/homePage/components/abnormalMonitoring.js
+++ b/web/client/src/sections/homePage/components/abnormalMonitoring.js
@ -37,6 +37,7 @@ function AbnormalMonitoring(props) {
            rowNum={2}
            height={100}
            multiellipsis
+            marginTop={-50}
        // columnWidth={[200, 170, 120, 120]}
        />
    </div>
--- a/web/client/src/sections/homePage/components/accessData.js
+++ b/web/client/src/sections/homePage/components/accessData.js
@ -1,17 +1,26 @@
 import React, { useEffect, useState } from 'react'
-import TableCard from './public/table-card';
+import Box from './public/table-card';

 function AccessData(props) {

    const renderBody = () => {
-        return '接入数据统计'
+        return <div className='access_data'>
+            <div className='_img'></div>
+            <div className='data_unit'>
+                数据单位<div className='data_number'>256</div>个
+            </div>
+            <div className='data_today'>
+                今日数据<div className='data_number'>256</div>万条
+            </div>
+            <div className='data_total'>
+                数据总量<div className='data_number'>256</div>万条
+            </div>
+        </div>
    }

-    return <TableCard
-        renderBody={renderBody()}
-        height={'100%'}
-        title={"接入数据统计"}
-        bodyPaddingTop={1} />
+    return <Box title={"接入数据统计"} >
+        {renderBody()}
+    </Box>
 }

 export default AccessData;
--- a/web/client/src/sections/homePage/components/alarmList.js
+++ b/web/client/src/sections/homePage/components/alarmList.js
@ -1,25 +1,44 @@
 import React, { useEffect, useState } from 'react'
-import TableCard from './public/table-card';
+import Box from './public/table-card';
 import CarouselList from './public/carousel-list';
+import { Tooltip } from 'antd';

 function AlarmList(props) {
-    const { cardHeight } = props;
+    const { cardContentHeight } = props;
+
+    const data = [
+        ['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
+        ['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
+    ]
    const renderBody = () => {
        return <CarouselList
-            header={['任务名称', '采集时间', '耗时', '异常日志']}
-            data={[['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志']]}
+            header={['预警内容', '预警等级', '预警时间']}
+            data={data?.map(s => {
+                return [
+                    <Tooltip placement="top" title={s[0]}>
+                        {s[0].length > 20 ? s[0]?.taskNamesubstring(0, 20) + '...' : s[0]}
+                    </Tooltip>,
+                    <div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>,
+                    s[2]
+                ]
+            })}
            rowNum={6}
-            height={cardHeight - 42 - 13}
+            height={cardContentHeight}
            multiellipsis
-        // columnWidth={[200, 170, 120, 120]}
+            columnWidth={[180, 80, 150]}
        />
    }

-    return <TableCard
-        renderBody={renderBody()}
-        height={'100%'}
-        title={"预警列表"}
-        bodyPaddingTop={1} />
+    return <Box title={"预警列表"}>
+        {renderBody()}
+    </Box>
 }

 export default AlarmList;
--- a/web/client/src/sections/homePage/components/centerTop.js
+++ b/web/client/src/sections/homePage/components/centerTop.js
@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react'
+import './style.less'
+
+function CenterTop(props) {
+
+
+    return <div className='_top'>
+        <div className='center_top_data'>
+            <div className='_center_card1'>共享交换</div>
+            <div className='_center_card2'>数据监控</div>
+            <div className='_center_card3'>数据治理</div>
+            <div className='_center_card4'>数据采集</div>
+        </div>
+    </div>
+}
+
+export default CenterTop;
+
+
--- a/web/client/src/sections/homePage/components/dataShare.js
+++ b/web/client/src/sections/homePage/components/dataShare.js
@ -1,17 +1,32 @@
 import React, { useEffect, useState } from 'react'
-import TableCard from './public/table-card';
+import Box from './public/table-card';

 function DataShare(props) {

-    const renderBody = () => {
-        return '数据共享'
+    const renderItem = (s) => {
+        return <div className='_item_content'>
+            <div className={'_item_icon' + s.key} />
+            <div className='_item_text'>
+                接口访问次数
+                <div className='number_container'>
+                    <span className='_number'>{s.data}</span>{s.unit}
+                </div>
+            </div>
+        </div>
    }
-
-    return <TableCard
-        renderBody={renderBody()}
-        height={'100%'}
-        title={"数据共享"}
-        bodyPaddingTop={1} />
+    const leftData = [{ key: '1', data: 2000, unit: '条' }, { key: '2', data: 2000, unit: '次' }, { key: '3', data: 2000, unit: '个' }]
+    const rightData = [{ key: '2', data: 2000, unit: '次' }, { key: '3', data: 2000, unit: '个' }]
+    return <Box title={"数据共享"} >
+        <div className='data_share'>
+            <div className='_left_content'>
+                {leftData.map(s => renderItem(s))}
+            </div>
+            <div className='_right_content'>
+                <div className='_today_text'>今日</div>
+                {rightData.map(s => renderItem(s))}
+            </div>
+        </div>
+    </Box>
 }

 export default DataShare;
--- a/web/client/src/sections/homePage/components/dataTop5.js
+++ b/web/client/src/sections/homePage/components/dataTop5.js
@ -1,17 +1,238 @@
 import React, { useEffect, useState } from 'react'
-import TableCard from './public/table-card';
+import Box from './public/table-card';
+import ReactEcharts from 'echarts-for-react';
+import './style.less';

 function DataTop5(props) {
-
+    const { cardContentHeight } = props;
    const renderBody = () => {
-        return '数据量TOP5单位'
+        let chartData = [
+            {
+                name: '工商局',
+                value: 12245,
+            },
+            {
+                name: '人社局',
+                value: 11211,
+            },
+            {
+                name: '市政单位',
+                value: 11165,
+            },
+            {
+                name: '住建局',
+                value: 11145,
+            },
+            {
+                name: '环保局',
+                value: 11128,
+            },
+        ]
+        let options = {
+            xAxis: {
+                splitLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                splitArea: { show: false },
+                axisLine: {
+                    show: false,
+                },
+            },
+            grid: {
+                top: 13,
+                bottom: -10,
+                left: '5%',
+            },
+            yAxis: {
+                inverse: true,
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        padding: [-5, 0, 35, 18],
+                    },
+                    formatter(value, index) {
+                        let str = '', num = 'TOP' + (index + 1)
+                        if (index === 0) {
+                            str = '{a| ' + num + '}{title| ' + value + '}'
+                        } else if (index === 1) {
+                            str = '{b| ' + num + '}{title| ' + value + '}'
+                        } else if (index === 2) {
+                            str = '{c| ' + num + '}{title| ' + value + '}'
+                        } else {
+                            str = '{d| ' + num + '}{title| ' + value + '}'
+                        }
+                        return str
+                    },
+                    rich: {
+                        a: {
+                            borderColor: '#EE6F7C',
+                            borderWidth: 1,
+                            borderRadius: [0, 10, 10, 0],
+                            padding: [3.5, 10, 1, -13],
+                            backgroundColor: 'rgba(238, 111, 124, 0.8)',
+                        },
+                        b: {
+                            borderColor: '#FFCF5F',
+                            borderWidth: 1,
+                            borderRadius: [0, 10, 10, 0],
+                            padding: [3.5, 10, 1, -13],
+                            backgroundColor: 'rgba(255, 207, 95, 0.7)',
+                        },
+                        c: {
+                            borderColor: '#00E8FF',
+                            borderWidth: 1,
+                            borderRadius: [0, 10, 10, 0],
+                            padding: [3.5, 10, 1, -13],
+                            backgroundColor: 'rgba(0, 232, 255, 0.7)',
+                        },
+                        d: {
+                            borderColor: '#1A90FF',
+                            borderWidth: 1,
+                            borderRadius: [0, 10, 10, 0],
+                            padding: [3.5, 10, 1, -13],
+                            backgroundColor: 'rgba(26, 144, 255, 0.7)',
+                        },
+                        title: {
+                            padding: [0, 0, 0, 3],
+                        },
+                    },
+                    align: 'left',
+                },
+                data: chartData.map((item) => item.name),
+            },
+            series: [
+                {
+                    type: 'pictorialBar',
+                    symbol: 'rect',
+                    symbolRotate: 30,
+                    symbolRepeat: 'fixed',
+                    symbolClip: true,
+                    symbolOffset: [0, -1.5],
+                    symbolSize: [2, 12],
+                    symbolMargin: '3',
+                    itemStyle: {
+                        normal: {
+                            color: '#000726',
+                        },
+                    },
+                    label: {
+                        show: true,
+                        color: '#C8F0FF',
+                        fontFamily: 'Bebas',
+                        fontSize: 12,
+                        offset: [-9, 1],
+                        position: 'right',
+                        formatter(params) {
+                            let result = ''
+                            switch (params.dataIndex) {
+                                case 0:
+                                    result = '{img|}{index0|' + params.value + '}{unit|}'
+                                    break
+                                case 1:
+                                    result = '{img|}{index1|' + params.value + '}{unit|}'
+                                    break
+                                case 2:
+                                    result = '{img|}{index2|' + params.value + '}{unit|}'
+                                    break
+                                default:
+                                    result = '{img|}{index3|' + params.value + '}{unit|}'
+                                    break
+                            }
+                            return result
+                        },
+                        rich: {
+                            img: {
+                                height: 18,
+                                width: 20,
+                                // backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
+                            },
+                            unit: {
+                                color: '#C8F0FF',
+                                fontSize: 11,
+                            },
+                            index0: {
+                                color: '#FFF',
+                                fontFamily: 'Bebas',
+                                padding: [-2, 2, 0, 0],
+                                fontWeight: 'bold',
+                                fontSize: 16,
+                            },
+                            index1: {
+                                color: '#FFF',
+                                fontFamily: 'Bebas',
+                                padding: [-2, 2, 0, 0],
+                                fontWeight: 'bold',
+                                fontSize: 16,
+                            },
+                            index2: {
+                                color: '#FFF',
+                                fontFamily: 'Bebas',
+                                padding: [-2, 2, 0, 0],
+                                fontWeight: 'bold',
+                                fontSize: 16,
+                            },
+                            index3: {
+                                color: '#FFF',
+                                fontFamily: 'Bebas',
+                                padding: [-2, 2, 0, 0],
+                                fontWeight: 'bold',
+                                fontSize: 16,
+                            },
+                        },
+                    },
+                    symbolBoundingData: Math.max(...chartData.map((item) => item.value)) * 1.3,
+                    data: chartData.map((item) => item.value),
+                    z: 2,
+                },
+                {
+                    type: 'bar',
+                    barWidth: 10,
+                    data: chartData.map((item) => item.value),
+                    itemStyle: {
+                        normal: {
+                            color: '#54DEFA',
+                        },
+                    },
+                    z: 1,
+                },
+                {
+                    type: 'bar',
+                    barGap: '-125%', // 设置外框粗细
+                    data: chartData.map((items) => Math.max(...chartData.map((item) => item.value)) * 1.3),
+                    barWidth: 15,
+                    itemStyle: {
+                        color: 'none',
+                        borderColor: '#979797',
+                    },
+                    z: 0,
+                },
+            ],
+        };
+
+        return <ReactEcharts
+            option={options}
+            notMerge
+            lazyUpdate
+            style={{ height: cardContentHeight }}
+        />
    }

-    return <TableCard
-        renderBody={renderBody()}
-        height={'100%'}
-        title={"数据量TOP5单位"}
-        bodyPaddingTop={1} />
+    return <Box title={"数据量TOP5单位"} bodyPaddingTop={1} >
+        <div className='data_top5_unit'>数据量：万条</div>
+        {renderBody()}
+    </Box>
 }

 export default DataTop5;
--- a/web/client/src/sections/homePage/components/hotspotData.js
+++ b/web/client/src/sections/homePage/components/hotspotData.js
@ -1,17 +1,23 @@
 import React, { useEffect, useState } from 'react'
-import TableCard from './public/table-card';
+import Box from './public/table-card';
+import './style.less';

 function HotspotData(props) {

-    const renderBody = () => {
-        return '热点数据'
-    }
-
-    return <TableCard
-        renderBody={renderBody()}
-        height={'100%'}
-        title={"热点数据"}
-        bodyPaddingTop={1} />
+    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>
+            </div>
+            <div className='_top2'>
+                <span className='hotspot_title'>热点数据TOP2</span><div className='hotspot_data_number'>256</div>
+            </div>
+            <div className='_top3'>
+                <span className='hotspot_title'>热点数据TOP3</span><div className='hotspot_data_number'>256</div>
+            </div>
+        </div>
+    </Box>
 }

 export default HotspotData;
--- a/web/client/src/sections/homePage/components/nodeResource.js
+++ b/web/client/src/sections/homePage/components/nodeResource.js
@ -1,17 +1,32 @@
 import React, { useEffect, useState } from 'react'
-import TableCard from './public/table-card';
-
+import Box from './public/table-card';
+import './style.less';
 function NodeResource(props) {

    const renderBody = () => {
-        return '节点资源'
+        return <div className='node-resource-container'>
+            <div className='_item'>
+                <div className='_noderesource_data'>97.2<span className='_percent'>%</span></div>
+                <div className='_noderesource_title'>硬盘</div>
+                <div className='disk_icon' />
+            </div>
+            <div className='_item'>
+                <div className='_noderesource_data'>97.2<span className='_percent'>%</span></div>
+                <div className='_noderesource_title'>内存</div>
+                <div className='memory_icon' />
+            </div>
+            <div className='_item'>
+                <div className='_noderesource_data'>97.2<span className='_percent'>%</span></div>
+                <div className='_noderesource_title'>CPU</div>
+                <div className='cpu_icon' />
+            </div>
+        </div>
+
    }

-    return <TableCard
-        renderBody={renderBody()}
-        height={'100%'}
-        title={"节点资源"}
-        bodyPaddingTop={1} />
+    return <Box title={"节点资源"} >
+        {renderBody()}
+    </Box>
 }

 export default NodeResource;
--- a/web/client/src/sections/homePage/components/public/carousel-list.js
+++ b/web/client/src/sections/homePage/components/public/carousel-list.js
@ -2,11 +2,11 @@
 import React from 'react';
 import ScrollBoard from './scrollBoard';
 // import { ScrollBoard } from '@jiaminghi/data-view-react';
-// import NoData from './no-data';
+import NoData from './noData';
 import './index.less';
 function CarouselList(props) {
  const {
-    header = [], data = [], rowNum = 4, height, columnWidth, multiellipsis, waitTime = 2000, ...restProps
+    header = [], data = [], rowNum = 4, height, columnWidth, multiellipsis, waitTime = 2000, marginTop, ...restProps
  } = props;

  const config = {
@ -29,7 +29,7 @@ function CarouselList(props) {
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...restProps}
    />
-  ) : null;
+  ) : <NoData marginTop={marginTop || 0} />;
 }

 export default CarouselList;
--- a/web/client/src/sections/homePage/components/public/noData.js
+++ b/web/client/src/sections/homePage/components/public/noData.js
@ -0,0 +1,19 @@
+/* 公共模块暂无数据组件 */
+import React from 'react';
+import { Empty } from 'antd';
+
+function NoData({ height = 180, marginTop = 0 }) {
+    return (
+        <Empty
+            image="/assets/images/homepage/bigscreen/empty.png"
+            imageStyle={{
+                height,
+                marginTop
+            }}
+            description={false}
+        />
+
+    );
+}
+
+export default NoData;
--- a/web/client/src/sections/homePage/components/public/table-card.js
+++ b/web/client/src/sections/homePage/components/public/table-card.js
@ -1,13 +1,10 @@
 'use strict'

 import React from 'react'
-import { Row, Col, Modal, Tooltip } from 'antd'
 import './index.less'
-
-class TableCard extends React.Component {
-
+class Box extends React.Component {
    render() {
-        const { title, renderBody, height, width, bodyPaddingTop, subTitle, titlePaddingTop, margin, overflow, padding } = this.props
+        const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props

        const headerbg = {
            background: 'url(/assets/images/homepage/bigscreen/header-title-bg.png) no-repeat',
@ -19,26 +16,20 @@ class TableCard extends React.Component {
                <div style={{
                    height: height, listStyle: 'none', overflow: overflow || 'hidden',
                    backgroundImage: 'linear-gradient(180deg, #00204a00 3%, #50c9f71a 100%)',
-                    // ...bg
                }}>
-                    <Row style={{ height: 42, paddingLeft: 24, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg }}>
-                        <Col span={8}>
-                            <span className='card-title'>{title}</span><div className='_sorrow'/>
-                        </Col>
-                        <Col span={16} style={{ textAlign: 'right' }}>
-                            {subTitle}
-                        </Col>
-                    </Row>
+                    <div style={{ height: 42, paddingLeft: 24, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg }}>
+                        <span className='card-title'>{title}</span><div className='_sorrow' />
+                    </div>
                    <div
                        style={{
                            width: '100%', height: 2,
                            marginTop: titlePaddingTop || 10, marginBottom: bodyPaddingTop || 25,
                        }} />
-                    {renderBody}
+                    {children}
                </div>
            </div>
        )
    }
 }
-export default TableCard
+export default Box

--- a/web/client/src/sections/homePage/components/style.less
+++ b/web/client/src/sections/homePage/components/style.less
@ -0,0 +1,373 @@
+@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高
+
+//节点资源
+.node-resource-container {
+    display: flex;
+    height: @card-height;
+    width: 100%;
+    align-items: center;
+
+    ._item {
+        width: 33%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        ._noderesource_data {
+            font-family: D-DINExp-Bold;
+            font-weight: 600;
+            font-size: 24px;
+            color: #FFFFFF;
+            line-height: 43.2px;
+            display: flex;
+            align-items: center;
+
+            ._percent {
+                opacity: 0.8;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                font-size: 12px;
+                color: #C8F0FF;
+                text-align: left;
+                line-height: 24px;
+            }
+        }
+
+        ._noderesource_title {
+            font-family: YouSheBiaoTiHei;
+            font-size: 20px;
+            color: #D8F0FF;
+            letter-spacing: 1.54px;
+            text-align: center;
+            text-shadow: 0 0 10px rgba(0, 145, 255, 0.5);
+            margin-bottom: 17px;
+        }
+
+        .disk_icon {
+            width: 68.73px;
+            height: 62.77px;
+            background: url('/assets/images/homePage/bigscreen/disk.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .cpu_icon {
+            width: 68.73px;
+            height: 62.77px;
+            background: url('/assets/images/homePage/bigscreen/cpu.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .memory_icon {
+            width: 68.73px;
+            height: 62.77px;
+            background: url('/assets/images/homePage/bigscreen/memory.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+//接入数据统计
+.access_data {
+    display: flex;
+    height: @card-height;
+    width: 100%;
+    justify-content: center;
+
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+
+    ._img {
+        width: 230px;
+        height: 95%;
+        background: url('/assets/images/homePage/bigscreen/accessdata.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .data_unit {
+        position: absolute;
+        top: 27%;
+        right: 21%;
+
+        .data_number {
+            line-height: 25px;
+            font-family: D-DINExp-Bold;
+            font-weight: 700;
+            font-size: 20px;
+            color: #3E86FF;
+            letter-spacing: 0;
+        }
+    }
+
+    .data_today {
+        position: absolute;
+        bottom: 13%;
+        right: 79%;
+        text-align: right;
+
+        .data_number {
+            line-height: 25px;
+            font-family: D-DINExp-Bold;
+            font-weight: 700;
+            font-size: 20px;
+            color: #00F6E4;
+            letter-spacing: 0;
+        }
+    }
+
+    .data_total {
+        position: absolute;
+        bottom: 13%;
+        right: 7%;
+
+        .data_number {
+            line-height: 25px;
+            font-family: D-DINExp-Bold;
+            font-weight: 700;
+            font-size: 20px;
+            color: #FFDC4E;
+            letter-spacing: 0;
+        }
+    }
+}
+
+.data_top5_unit {
+    position: absolute;
+    right: 4%;
+    top: 18%;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 12px;
+    color: #C8F0FF;
+}
+
+.hotspot_data_container {
+    display: flex;
+    height: @card-height;
+    width: 100%;
+    justify-content: center;
+
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+
+    ._img {
+        width: 203px;
+        height: 80%;
+        background: url('/assets/images/homePage/bigscreen/hotspotdatabg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .hotspot_title {
+        padding: 2px;
+        padding-left: 6px;
+        padding-right: 6px;
+        background: rgba(77, 241, 227, 0.08);
+        border: 1px solid rgba(77, 241, 227, 0.1);
+        box-shadow: inset 0 0 20px 0 rgba(28, 185, 196, 0.23);
+    }
+
+
+    .hotspot_data_number {
+        font-family: D-DINExp-Bold;
+        font-weight: 700;
+        font-size: 18px;
+        color: #FFFFFF;
+    }
+
+    ._top1 {
+        position: absolute;
+        top: 25%;
+        right: 63%;
+        text-align: right;
+    }
+
+    ._top2 {
+        position: absolute;
+        bottom: 22%;
+        right: 67%;
+        text-align: center;
+    }
+
+    ._top3 {
+        position: absolute;
+        bottom: 34%;
+        right: 2%;
+    }
+}
+
+//数据共享
+.data_share {
+    display: flex;
+    height: @card-height;
+
+    ._left_content {
+        width: 50%;
+        height: 90%;
+        padding-left: 30px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    ._right_content {
+        ._today_text {
+            font-family: YouSheBiaoTiHei;
+            font-size: 24px;
+            color: #FFFFFF;
+            letter-spacing: 0.5px;
+            position: absolute;
+            right: 6%;
+            top: 21%;
+        }
+
+        padding-top: 23px;
+        display: flex;
+        flex-direction: column;
+        width: 47%;
+        height: 95%;
+        background: url(/assets/images/homePage/bigscreen/todaybg.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        justify-content: space-evenly;
+        align-items: center;
+
+    }
+
+    ._item_content {
+        display: flex;
+
+
+        ._item_icon1 {
+            width: 52px;
+            height: 52px;
+            background: url('/assets/images/homePage/bigscreen/1.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        ._item_icon2 {
+            width: 52px;
+            height: 52px;
+            background: url('/assets/images/homePage/bigscreen/2.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        ._item_icon3 {
+            width: 52px;
+            height: 52px;
+            background: url('/assets/images/homePage/bigscreen/3.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        ._item_text {
+            color: #C8F0FF;
+            padding-left: 6px;
+
+            .number_container {
+                ._number {
+                    font-family: D-DINExp-Bold;
+                    font-weight: 700;
+                    font-size: 22px;
+                    color: #FFFFFF;
+                }
+
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+                width: 112px;
+                height: 28px;
+                background-image: linear-gradient(227deg, #3196AB 0%, #2091cd00 100%);
+            }
+        }
+    }
+}
+
+//大屏中间上部分
+.center_top_data {
+
+    ._center_card1 {
+        width: 353px;
+        height: 74px;
+        font-family: YouSheBiaoTiHei;
+        font-size: 22px;
+        color: #FFFFFF;
+        letter-spacing: 0.46px;
+        text-align: center;
+        position: absolute;
+        top: 2%;
+        left: 32%;
+        background: url(/assets/images/homePage/bigscreen/centerdatabg1.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    ._center_card2 {
+        width: 146px;
+        height: 35px;
+        font-family: YouSheBiaoTiHei;
+        font-size: 16px;
+        color: #35D0FF;
+        letter-spacing: 0.46px;
+        text-align: center;
+        position: absolute;
+        top: 25%;
+        left: 42%;
+        background: url(/assets/images/homePage/bigscreen/centerdatabg2.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    ._center_card3 {
+        width: 146px;
+        height: 35px;
+        font-family: YouSheBiaoTiHei;
+        font-size: 16px;
+        color: #35D0FF;
+        letter-spacing: 0.46px;
+        text-align: center;
+        position: absolute;
+        top: 45%;
+        left: 42%;
+        background: url(/assets/images/homePage/bigscreen/centerdatabg2.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    ._center_card4 {
+        width: 146px;
+        height: 35px;
+        font-family: YouSheBiaoTiHei;
+        font-size: 16px;
+        color: #35D0FF;
+        letter-spacing: 0.46px;
+        text-align: center;
+        position: absolute;
+        top: 62%;
+        left: 42%;
+        background: url(/assets/images/homePage/bigscreen/centerdatabg2.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
--- a/web/client/src/sections/homePage/containers/homePage.js
+++ b/web/client/src/sections/homePage/containers/homePage.js
@ -7,13 +7,15 @@ import DataShare from '../components/dataShare'
 import DataTop5 from '../components/dataTop5'
 import HotspotData from '../components/hotspotData'
 import NodeResource from '../components/nodeResource'
-import AbnormalMonitoring from '../components/abnormalMonitoring';
+import AbnormalMonitoring from '../components/abnormalMonitoring'
+import CenterTop from '../components/centerTop'
 import './style.less'

 function homePage(props) {
    const { dispatch } = props;
    const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
-    const cardHeight = document.body.clientHeight * 0.32
+    const cardHeight = document.body.clientHeight * 0.896 * 0.32
+    const cardContentHeight = cardHeight - 42 - 13
    return <div className='homepage'>
        <div className='_title'>
            <div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' ><div className='_icon' />进入后台</div>
@ -27,11 +29,12 @@ function homePage(props) {
                    <NodeResource />
                </div>
                <div className='child' style={childStyle}>
-                    <AlarmList cardHeight={cardHeight} />
+                    <AlarmList cardContentHeight={cardContentHeight} />
                </div>
            </div>
        </div>
        <div className='homepage-center'>
+            <CenterTop />
            <div className="list">
                <div className='child-top'>
                    <AbnormalMonitoring />
@ -44,7 +47,7 @@ function homePage(props) {
                    <DataShare />
                </div>
                <div className='child-right' style={childStyle}>
-                    <DataTop5 />
+                    <DataTop5 cardContentHeight={cardContentHeight} />
                </div>
                <div className='child-right' style={childStyle}>
                    <HotspotData />
--- a/web/client/src/sections/homePage/containers/style.less
+++ b/web/client/src/sections/homePage/containers/style.less
@ -21,8 +21,6 @@
        position: absolute;
        right: 60px;
        top: 38px;
-        // width: 16px;
-        // height: 16px;
        cursor: pointer;
        color: #C8F0FF;
        display: flex;
@ -39,10 +37,8 @@
    }

    .homepage-left {
-        // padding-top: 15px;
        width: 21.8%;
        height: 89.6%;
-        // background-color: red;
        position: absolute;
        top: 8.2%;
        z-index: 300;
@ -50,15 +46,21 @@

    .homepage-center {
        width: 49.16%;
-        height: 150px;
-        // background-color: blueviolet;
+        height: 89.6%;
        position: absolute;
-        bottom: 2.5%;
+        bottom: 2.4%;
        left: 25.5%;
        padding-left: 16px;
        padding-right: 16px;
        z-index: 400;
-        // background-color: rebeccapurple;
+
+        ._top {
+            margin-top: 50px;
+            height: calc(100% - 200px);
+            background: url('/assets/images/homePage/bigscreen/centerbg.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
    }

    .homepage-left-left {
@ -82,7 +84,6 @@
    opacity: 0;
    transform: translateX(-300px);
    animation: show .5s forwards;
-    // margin-bottom: 17px;
 }

 .list .child.show {