（*）大屏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
+    return <Box title={"接入数据统计"} >
-        renderBody={renderBody()}
+        {renderBody()}
-        height={'100%'}
+    </Box>
        title={"接入数据统计"}
        bodyPaddingTop={1} />
 }
 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={['任务名称', '采集时间', '耗时', '异常日志']}
+            header={['预警内容', '预警等级', '预警时间']}
-            data={[['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志']]}
+            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
+    return <Box title={"预警列表"}>
-        renderBody={renderBody()}
+        {renderBody()}
-        height={'100%'}
+    </Box>
        title={"预警列表"}
        bodyPaddingTop={1} />
 }
 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 = () => {
+    const renderItem = (s) => {
-        return '数据共享'
+        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>
    }
-
+    const leftData = [{ key: '1', data: 2000, unit: '条' }, { key: '2', data: 2000, unit: '次' }, { key: '3', data: 2000, unit: '个' }]
-    return <TableCard
+    const rightData = [{ key: '2', data: 2000, unit: '次' }, { key: '3', data: 2000, unit: '个' }]
-        renderBody={renderBody()}
+    return <Box title={"数据共享"} >
-        height={'100%'}
+        <div className='data_share'>
-        title={"数据共享"}
+            <div className='_left_content'>
-        bodyPaddingTop={1} />
+                {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
+    return <Box title={"数据量TOP5单位"} bodyPaddingTop={1} >
-        renderBody={renderBody()}
+        <div className='data_top5_unit'>数据量：万条</div>
-        height={'100%'}
+        {renderBody()}
-        title={"数据量TOP5单位"}
+    </Box>
        bodyPaddingTop={1} />
 }
 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 <Box title={"热点数据"} bodyPaddingTop={25}  >
-        return '热点数据'
+        <div className='hotspot_data_container'>
-    }
+            <div className='_img'></div>
-
+            <div className='_top1'>
-    return <TableCard
+                <span className='hotspot_title'>热点数据TOP1</span><div className='hotspot_data_number'>256</div>
-        renderBody={renderBody()}
+            </div>
-        height={'100%'}
+            <div className='_top2'>
-        title={"热点数据"}
+                <span className='hotspot_title'>热点数据TOP2</span><div className='hotspot_data_number'>256</div>
-        bodyPaddingTop={1} />
+            </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
+    return <Box title={"节点资源"} >
-        renderBody={renderBody()}
+        {renderBody()}
-        height={'100%'}
+    </Box>
        title={"节点资源"}
        bodyPaddingTop={1} />
 }
 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 Box extends React.Component {
 class TableCard 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 }}>
+                    <div 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>
+                    </div>
                        <Col span={16} style={{ textAlign: 'right' }}>
                            {subTitle}
                        </Col>
                    </Row>
                    <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;
+        height: 89.6%;
        // background-color: blueviolet;
        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 {