+ {!!header.length && !!mergedConfig && (
+
+ {header.map((headerItem, i) => (
+
+ ))}
+
+ )}
+
+ {!!mergedConfig && (
+
+ {rowsShow.map((row, ri) => (
+
+ {row.ceils.map((ceil, ci) => {
+ if (typeof (ceil) === 'string') {
+ return (
+
emitEvent(onClick, ri, ci, row, ceil)}
+ onMouseEnter={() => handleHover(true, ri, ci, row, ceil)}
+ onMouseLeave={() => handleHover(false)}
+ />
+ );
+ }
+ return (
+
handleHover(true, ri, ci, row, ceil)}
+ onMouseLeave={() => handleHover(false)}
+ >
+ {ceil}
+
+ );
+ })}
+
+ ))}
+
+ )}
+
+ );
+});
+
+ScrollBoard.propTypes = {
+ config: PropTypes.object,
+ onClick: PropTypes.func,
+ onMouseOver: PropTypes.func,
+ className: PropTypes.string,
+ style: PropTypes.object,
+};
+
+export default ScrollBoard;
diff --git a/web/client/src/sections/homePage/components/public/scrollBoard/style.less b/web/client/src/sections/homePage/components/public/scrollBoard/style.less
new file mode 100644
index 0000000..cb6eea5
--- /dev/null
+++ b/web/client/src/sections/homePage/components/public/scrollBoard/style.less
@@ -0,0 +1,44 @@
+.dv-scroll-board {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ color: #fff;
+
+ .text {
+ padding: 0 10px;
+ box-sizing: border-box;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .header {
+ display: flex;
+ flex-direction: row;
+ font-size: 15px;
+
+ .header-item {
+ .text;
+ transition: all 0.3s;
+ }
+ }
+
+ .rows {
+ overflow: hidden;
+
+ .row-item {
+ display: flex;
+ font-size: 14px;
+ transition: all 0.3s;
+ }
+
+ .ceil {
+ .text;
+ }
+
+ .index {
+ border-radius: 3px;
+ padding: 0px 3px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/client/src/sections/homePage/components/public/table-card.js b/web/client/src/sections/homePage/components/public/table-card.js
new file mode 100644
index 0000000..1ecb606
--- /dev/null
+++ b/web/client/src/sections/homePage/components/public/table-card.js
@@ -0,0 +1,44 @@
+'use strict'
+
+import React from 'react'
+import { Row, Col, Modal, Tooltip } from 'antd'
+import './index.less'
+
+class TableCard extends React.Component {
+
+ render() {
+ const { title, renderBody, height, width, bodyPaddingTop, subTitle, titlePaddingTop, margin, overflow, padding } = this.props
+
+ const headerbg = {
+ background: 'url(/assets/images/homepage/bigscreen/header-title-bg.png) no-repeat',
+ backgroundSize: '100% 100%',
+
+ }
+ return (
+
+
+
+
+ {title}
+
+
+ {subTitle}
+
+
+
+ {renderBody}
+
+
+ )
+ }
+}
+export default TableCard
+
diff --git a/web/client/src/sections/homePage/containers/homePage.js b/web/client/src/sections/homePage/containers/homePage.js
index 701b574..0c9193f 100644
--- a/web/client/src/sections/homePage/containers/homePage.js
+++ b/web/client/src/sections/homePage/containers/homePage.js
@@ -1,12 +1,57 @@
import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
+import AccessData from '../components/accessData'
+import AlarmList from '../components/alarmList'
+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 './style.less'
function homePage(props) {
- const { clientHeight } = props;
- return
- 1
+ const { dispatch } = props;
+ const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
+ return
+
+
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >
进入后台
+
+
+
+
+
}
function mapStateToProps(state) {
diff --git a/web/client/src/sections/homePage/containers/style.less b/web/client/src/sections/homePage/containers/style.less
index e69de29..1a89c0e 100644
--- a/web/client/src/sections/homePage/containers/style.less
+++ b/web/client/src/sections/homePage/containers/style.less
@@ -0,0 +1,222 @@
+.homepage {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: url('/assets/images/homePage/bigscreen/bg.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ overflow: hidden;
+
+ ._title {
+ width: 100%;
+ height: 88px;
+ background: url('/assets/images/homePage/bigscreen/top.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+
+ ._exit {
+ position: absolute;
+ right: 60px;
+ top: 38px;
+ // width: 16px;
+ // height: 16px;
+ cursor: pointer;
+ color: #C8F0FF;
+ display: flex;
+
+ ._icon {
+ display: inline-block;
+ width: 28px;
+ height: 28px;
+ background: url('/assets/images/homePage/bigscreen/exit.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ margin-right: 3px;
+ }
+ }
+
+ .homepage-left {
+ // padding-top: 15px;
+ width: 21.8%;
+ height: 89.6%;
+ // background-color: red;
+ position: absolute;
+ top: 8.2%;
+ z-index: 300;
+ }
+
+ .homepage-center {
+ width: 49.16%;
+ height: 150px;
+ // background-color: blueviolet;
+ position: absolute;
+ bottom: 2.5%;
+ left: 25.5%;
+ padding-left: 16px;
+ padding-right: 16px;
+ z-index: 400;
+ // background-color: rebeccapurple;
+ }
+
+ .homepage-left-left {
+ left: 48px;
+ }
+
+ .homepage-left-right {
+ right: 48px;
+ }
+
+}
+
+
+.list {
+ list-style: none;
+ height: 100%;
+}
+
+.list .child {
+ box-sizing: border-box;
+ opacity: 0;
+ transform: translateX(-300px);
+ animation: show .5s forwards;
+ // margin-bottom: 17px;
+}
+
+.list .child.show {
+ animation-delay: 0s !important;
+}
+
+.list .child.hide {
+ opacity: 1;
+ transform: translateX(0);
+ animation-name: hide;
+ animation-delay: 0s;
+}
+
+/*animation-delay*/
+.list .child:not(.hide):nth-child(5n + 1) {
+ animation-delay: .3s;
+}
+
+.list .child:not(.hide):nth-child(5n + 2) {
+ animation-delay: .6s;
+}
+
+.list .child:not(.hide):nth-child(5n + 3) {
+ animation-delay: .9s;
+}
+
+.list .child:not(.hide):nth-child(5n + 4) {
+ animation-delay: 1.2s;
+}
+
+.list .child:not(.hide):nth-child(5n + 5) {
+ animation-delay: 1.5s;
+}
+
+.list .child-right {
+ box-sizing: border-box;
+ opacity: 0;
+ transform: translateX(300px);
+ animation: show .5s forwards;
+}
+
+.list .child-right.show {
+ animation-delay: 0s !important;
+}
+
+.list .child-right.hide {
+ opacity: 1;
+ transform: translateX(0);
+ animation-name: hide;
+ animation-delay: 0s;
+}
+
+/*animation-delay*/
+.list .child-right:not(.hide):nth-child(5n + 1) {
+ animation-delay: .3s;
+}
+
+.list .child-right:not(.hide):nth-child(5n + 2) {
+ animation-delay: .6s;
+}
+
+.list .child-right:not(.hide):nth-child(5n + 3) {
+ animation-delay: .9s;
+}
+
+.list .child-right:not(.hide):nth-child(5n + 4) {
+ animation-delay: 1.2s;
+}
+
+.list .child-right:not(.hide):nth-child(5n + 5) {
+ animation-delay: 1.5s;
+}
+
+.list .child-top {
+ box-sizing: border-box;
+ opacity: 0;
+ transform: translateY(300px);
+ animation: show 1s forwards;
+}
+
+.list .child-top.show {
+ animation-delay: 0s !important;
+}
+
+.list .child-top.hide {
+ opacity: 1;
+ transform: translateY(0);
+ animation-name: hide;
+ animation-delay: 0s;
+}
+
+
+@keyframes show {
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes hide {
+ to {
+ opacity: 0;
+ transform: translateX(100px);
+ max-height: 0;
+ margin: 0;
+ }
+}
+
+.center-card-title {
+ height: 31px;
+ font-family: YouSheBiaoTiHei;
+ font-size: 24px;
+ color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ margin-top: 5px;
+
+ ._icon_left {
+ width: 32px;
+ height: 17px;
+ background: url('/assets/images/homePage/bigscreen/center-left.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ margin-right: 11px;
+ margin-left: 10px;
+ }
+
+ ._icon_right {
+ width: 32px;
+ height: 17px;
+ background: url('/assets/images/homePage/bigscreen/center-right.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ margin-right: 11px;
+ margin-left: 10px;
+ }
+}
\ No newline at end of file
diff --git a/web/client/src/sections/homePage/routes.js b/web/client/src/sections/homePage/routes.js
index b1331e4..fd004b3 100644
--- a/web/client/src/sections/homePage/routes.js
+++ b/web/client/src/sections/homePage/routes.js
@@ -2,7 +2,7 @@
import homePage from './containers/index';
export default [{
- type: 'inner',
+ type: 'outer',
route: {
path: '/homePage',
key: 'homePage',
diff --git a/web/package.json b/web/package.json
index e5c028f..8f58a9a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -67,6 +67,7 @@
"@antv/g6": "^4.2.5",
"@douyinfe/semi-ui": "^2.28.1",
"@fs/attachment": "^1.0.0",
+ "@jiaminghi/data-view-react": "^1.2.5",
"@peace/components": "0.0.35",
"@peace/utils": "0.0.37",
"ahooks": "^3.7.4",