Browse Source

(*)大屏UI提交

master
peng.peng 1 year ago
parent
commit
1b47edcca1
  1. 2
      api/.vscode/launch.json
  2. BIN
      web/client/assets/images/homePage/bigscreen/2(1).png
  3. BIN
      web/client/assets/images/homePage/bigscreen/3(1).png
  4. BIN
      web/client/assets/images/homePage/bigscreen/4(1).png
  5. 0
      web/client/assets/images/homePage/bigscreen/accessdata.png
  6. BIN
      web/client/assets/images/homePage/bigscreen/button(2).png
  7. BIN
      web/client/assets/images/homePage/bigscreen/button.png
  8. BIN
      web/client/assets/images/homePage/bigscreen/centerbg.png
  9. 0
      web/client/assets/images/homePage/bigscreen/centerdatabg1.png
  10. 0
      web/client/assets/images/homePage/bigscreen/centerdatabg2.png
  11. 0
      web/client/assets/images/homePage/bigscreen/disk.png
  12. BIN
      web/client/assets/images/homePage/bigscreen/empty.png
  13. 0
      web/client/assets/images/homePage/bigscreen/hotspotdatabg.png
  14. 0
      web/client/assets/images/homePage/bigscreen/memory.png
  15. BIN
      web/client/assets/images/homePage/bigscreen/todaybg.png
  16. 5
      web/client/index.ejs
  17. 5
      web/client/index.html
  18. 1
      web/client/src/sections/homePage/components/abnormalMonitoring.js
  19. 23
      web/client/src/sections/homePage/components/accessData.js
  20. 41
      web/client/src/sections/homePage/components/alarmList.js
  21. 19
      web/client/src/sections/homePage/components/centerTop.js
  22. 33
      web/client/src/sections/homePage/components/dataShare.js
  23. 237
      web/client/src/sections/homePage/components/dataTop5.js
  24. 26
      web/client/src/sections/homePage/components/hotspotData.js
  25. 31
      web/client/src/sections/homePage/components/nodeResource.js
  26. 6
      web/client/src/sections/homePage/components/public/carousel-list.js
  27. 19
      web/client/src/sections/homePage/components/public/noData.js
  28. 23
      web/client/src/sections/homePage/components/public/table-card.js
  29. 373
      web/client/src/sections/homePage/components/style.less
  30. 11
      web/client/src/sections/homePage/containers/homePage.js
  31. 19
      web/client/src/sections/homePage/containers/style.less

2
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"
]
},
{

BIN
web/client/assets/images/homePage/bigscreen/2(1).png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

BIN
web/client/assets/images/homePage/bigscreen/3(1).png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
web/client/assets/images/homePage/bigscreen/4(1).png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

0
web/client/assets/images/homePage/bigscreen/整图.png → web/client/assets/images/homePage/bigscreen/accessdata.png

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

BIN
web/client/assets/images/homePage/bigscreen/button(2).png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
web/client/assets/images/homePage/bigscreen/button.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

BIN
web/client/assets/images/homePage/bigscreen/centerbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 MiB

0
web/client/assets/images/homePage/bigscreen/组 1444.png → web/client/assets/images/homePage/bigscreen/centerdatabg1.png

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
web/client/assets/images/homePage/bigscreen/button(1).png → web/client/assets/images/homePage/bigscreen/centerdatabg2.png

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

0
web/client/assets/images/homePage/bigscreen/硬盘.png → web/client/assets/images/homePage/bigscreen/disk.png

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
web/client/assets/images/homePage/bigscreen/empty.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

0
web/client/assets/images/homePage/bigscreen/图.png → web/client/assets/images/homePage/bigscreen/hotspotdatabg.png

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

0
web/client/assets/images/homePage/bigscreen/内存.png → web/client/assets/images/homePage/bigscreen/memory.png

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
web/client/assets/images/homePage/bigscreen/todaybg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

5
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">

5
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;">

1
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>

23
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;

41
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;

19
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;

33
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;

237
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;

26
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;

31
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;

6
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;

19
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;

23
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

373
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;
}
}

11
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 />

19
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 {

Loading…
Cancel
Save