首页调整

src/global.less

@@ -69,7 +69,7 @@
 
 /* 滚动条 */
 ::-webkit-scrollbar-track-piece {
-  background-color:#ededed;
+  background-color:#fff;
 }
 
 ::-webkit-scrollbar {
@@ -122,11 +122,6 @@
   color: #fff !important;
 }
 
-.ant-menu-horizontal .ant-menu-submenu-title .anticon {
-  margin-right: 0 !important;
-  font-size: 18px !important;
-}
-
 .ant-layout-sider .ant-menu-item:after {
   border: 0 !important;
 }

src/layout/index.js

@@ -2,6 +2,7 @@ import React, { useState, Fragment } from "react";
 import { Link } from 'react-router-dom';
 import { Layout, Menu, Icon, message, Avatar } from 'antd';
 import { connect } from 'react-redux';
+import classnames from 'classnames';
 
 import { ContextPath, Open } from '../util';
 
@@ -11,12 +12,14 @@ import './index.less';
 import { dispatchLatest } from "../model";
 
 import logo from '../assets/logo.png';
+import logoHome from '../assets/logo_home.png';
 
 const { Header, Sider, Content } = Layout;
 const { SubMenu } = Menu;
 
-const _Logout = ({session, location}) => session ?
-    <Menu className={"ml-auto layout-menu"} mode="horizontal" theme="light"
+const _Logout = ({session, isHome, location}) => session ?
+
+    <Menu className={ classnames('logout-menu', isHome?'':'ml-auto') } mode="horizontal" theme="light"
       onClick={null}>
       <SubMenu
         title={
@@ -111,22 +114,22 @@ export const HomeLayout = function ({ content, location }) {
   const subMenus = GetSubMenu(routes);
   return <Layout style={{ minHeight: '100vh' }}>
 
-    <Header style={{}} className={'bg-primary d-flex home-header'}>
+    <Header style={{}} className={'bg-white d-flex home-header'}>
       <div className="mr-3">
-      <img src={logo}
+      <img src={logoHome}
          alt="" style={{ maxHeight: '2rem' }} />
       </div>
       <Menu
-        mode="horizontal" theme={'dark'}
+        mode="horizontal"
         selectedKeys={[location.pathname]}
-        style={{ lineHeight: '64px', width: '500px'}}>
+        style={{ lineHeight: '64px'}}>
         {subMenus}
       </Menu>
 
-      <Logout />
+      <Logout isHome={true} />
     </Header>
 
-    <Layout style={{ backgroundColor: '#1f2531' }}> 
+    <Layout style={{ backgroundColor: '#eee' }}> 
       {content} 
     </Layout>
 

src/layout/index.less

@@ -26,13 +26,41 @@
     }
   }
 
-  .layout-menu {
+  .layout-menu, .logout-menu {
     i, span {
       color: #fff;
     }
   }
 }
 
+.home-header {
+
+  justify-content: space-between ;
+
+  &.ant-layout-header {
+    padding: 0 60px;
+  }
+
+  .layout-menu, .logout-menu {
+    i, span {
+      color: #000;
+    }
+
+    &:hover {
+      i, span {
+        color: #249aec;
+      }
+    }
+  }
+
+  .logout-menu {
+    .anticon-user {
+      margin-right: 0 !important;
+      font-size: 18px !important;
+    }
+  }
+}
+
 .manage-sider-logo {
   display: flex;
   align-items: center;

src/view/Home/Home.less

 @import '~antd/es/style/themes/default.less';
 
 .home-container {
+
+
   .home-search {
-    width: 1920px;
-    height: 700px;
-    background: url('../../assets/home/1.png');
+    width: 100%;
+    height: calc(100vh - 64px - 143px);
 
     .ant-input-lg {
-      height: 50px;
-      line-height: 50px;
+      height: 40px;
+      line-height: 40px;
     }
     
     .ant-btn-lg {
-      height: 50px;
-      font-size: 30px;
+      height: 40px;
+      font-size: 20px;
+      background-color: #f4c660;
+      border-color: #f4c660;
     }
   }
 
@@ -22,80 +25,41 @@
     height: 100%;
   }
 
-  p {
-    margin-bottom: 1rem;
-  }
-
   .home-menu {
+
+    background-color: #fff;
+    font-size: 20px;
+    color: #249aec;
+
     img {
-      width: 4rem;
-      height: 4rem;
-      transition: all 0.1s linear;
-      &:hover {
-        transform: scale(1.1, 1.1);
-      }
+      width: 43px;
+      height: 43px;
     }
 
     span, a {
-      line-height: 4rem;
+      line-height: 40px;
+      color: #249aec;
     }
-  }
-
-  .home-grid-outter {
-    .home-grid {
-      background: url('../../assets/home/grid.png');
 
-      .node-img {
-        transition: all 0.1s linear;
     &:hover {
-          filter: drop-shadow(0 0 0.02rem white);
-        }
-      }
-    }
-  }
+      background-color: #f4c660;
 
-  @media (max-width: @screen-sm-max) {
-    .comet {
-      display: none;
+      span, a {
+        color: #fff;
       }
     }
 
-  @media (max-width: 1366px) {
-    .home-search { 
-      background-position-x: -450px;
-      background-position-y: -100px;
-      height: 600px;
-      .comet{
-        left: -450px;
-        top: -100px;
-      }
   }
 
   .home-grid-outter {
-      height: 950px;
     .home-grid {
-        transform: scale(0.7);
-        transform-origin: top left;
-      }
-    }
-  }
+      background: url('../../assets/home/grid.png');
 
-  @media (min-width: @screen-xxl-min) {
-    .home-search { 
-      background-position-x: 0px;
-      background-position-y: 0px;
-      height: 700px;
-    }
-    .comet{
-      left: 0px;
-      top: 0px;
+      .node-img {
+        transition: all 0.1s linear;
+        &:hover {
+          filter: drop-shadow(0 0 0.02rem white);
         }
-
-    .home-grid-outter {
-      height: 1350px;
-      .home-grid {
-        left: -100px;
-        transform: scale(1);
       }
     }
   }

src/view/Home/HomeHelper.js

 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import classnames from 'classnames';
-import { Tooltip, Input, Row, Col } from 'antd';
+import { Input, Row, Col } from 'antd';
 
 import { ContextPath } from '../../util';
-import Comet from './Comet';
-import { dispatchLatest } from '../../model';
+
+import bgImg from '../../assets/home/1.png';
 
 import menuImg1 from '../../assets/home/menu1.png';
 import menuImg2 from '../../assets/home/menu2.png';
 import menuImg3 from '../../assets/home/menu3.png';
 import menuImg4 from '../../assets/home/menu4.png';
 
-import nodeImg1 from '../../assets/home/node1.png';
-import nodeImg2 from '../../assets/home/node2.png';
-import nodeImg3 from '../../assets/home/node3.png';
-import nodeImg4 from '../../assets/home/node4.png';
-import nodeImg5 from '../../assets/home/node5.png';
-import nodeImg6 from '../../assets/home/node6.png';
-import nodeImg7 from '../../assets/home/node7.png';
-import nodeImg8 from '../../assets/home/node8.png';
+import menuImgH1 from '../../assets/home/menu1_h.png';
+import menuImgH2 from '../../assets/home/menu2_h.png';
+import menuImgH3 from '../../assets/home/menu3_h.png';
+import menuImgH4 from '../../assets/home/menu4_h.png';
 
 import './Home.less';
 
 const { Search } = Input;
 
-const linesData = [
-  [[1584, 465, 1407, 550], [1225, 466, 1407, 550]],
-  [[1407, 550, 1407, 588]],
-  [
-    [1348, 613, 1405, 644],
-    [1465, 613, 1405, 644],
-    [1255, 570, 1312, 596],
-    [1375, 570, 1312, 596],
-    [1166, 523, 1224, 552],
-    [1284, 525, 1224, 552],
-    [1437, 569, 1493, 597],
-    [1554, 569, 1493, 597],
-    [1526, 525, 1582, 553],
-    [1643, 524, 1582, 553],
-  ],
-  [
-    [1405, 644, 1406, 691],
-    [1312, 596, 1312, 691],
-    [1224, 552, 1224, 691],
-    [1493, 597, 1493, 691],
-    [1582, 553, 1582, 691],
-  ],
-];
-
 export class HomeSearch extends Component {
   constructor() {
     super();
@@ -58,27 +29,17 @@ export class HomeSearch extends Component {
     const { history } = this.props;
     return (
       <div 
-        className={'position-relative home-search'} 
+        className='position-relative home-search'
       >
-        <Comet
-          args={{
-            speed: 2,
-            opacity: 0.5,
-            className: classnames('position-absolute comet'),
-            width: 1920,
-            height: 700
-          }}
-          linesData={linesData}
-        />
-
-        <div className="position-absolute" style={{ padding: '8rem 0 0 4rem' }}>
-          <p className="text-muted font-xl font-weight-lighter">数据服务平台</p>
-          <p className="text-muted font-lg font-weight-lighter">
+        <img className="position-absolute" src={bgImg} style={{ objectFit: 'cover', top: 0, left: 0, right: 0 ,bottom: 0, width: '100%', height:'100%' }} alt="" />
+        <div className="position-absolute" style={{ left: '10%' ,top: '50%', transform: 'translateY(-50%)', whiteSpace: 'nowrap' }}>
+          <p className="text-white" style={{ fontSize: '45px', fontWeight: 'bold', marginBottom: '20px' }}>数据服务平台</p>
+          <p className="text-white" style={{ fontSize: '25px', fontWeight: '400' }}>
             从数据资产、环境服务、人员培训等方面提供
           </p>
-          <p className="text-muted font-lg font-weight-lighter">大数据应用支持</p>
+          <p className="text-white" style={{ fontSize: '25px', fontWeight: '400' }}>大数据应用支持</p> 
 
-          <div style={{ width: '40rem', marginTop: '8rem', fontSize: '1.1rem' }}>
+          <div style={{ marginTop: '30px', fontSize: '16px' }}>
             <p>
               <Link className="text-white" to={`${ContextPath}/manage/search`}>
                 接口查询
@@ -104,29 +65,53 @@ export class HomeSearch extends Component {
 }
 
 const homeMenu = [
-  { title: '数据资产', img: menuImg1, url: `${ContextPath}/manage/assets` },
-  { title: '元数据', img: menuImg2, url: `${ContextPath}/manage/metadata` },
-  { title: '数据指标', img: menuImg3, url: `${ContextPath}/manage/indicator` },
-  { title: '数据标准', img: menuImg4, url: `${ContextPath}/manage/standard` },
+  { title: '数据资产', img: menuImg1, imgH: menuImgH1, url: `${ContextPath}/manage/assets` },
+  { title: '元数据', img: menuImg2, imgH: menuImgH2, url: `${ContextPath}/manage/metadata` },
+  { title: '数据指标', img: menuImg3, imgH: menuImgH3, url: `${ContextPath}/manage/indicator` },
+  { title: '数据标准', img: menuImg4, imgH: menuImgH4, url: `${ContextPath}/manage/standard` },
 ];
 
 export class HomeMenu extends Component {
+
+  constructor() {
+    super();
+    this.state = { hoverIndex: -1 };
+  }
+
+  enter = (index) => {
+    console.log('enter',index);
+    this.setState({ hoverIndex: index });
+  }
+
+  leave = () => {
+    this.setState({ hoverIndex: -1 });
+  }
+
   render() {
+    const { hoverIndex } = this.state;
+
     return (
-      <Row className={'font-h3 home-menu'} type="flex">
+      <Row type="flex">
         {homeMenu.map((menu, i) => (
           <Col key={i} xs={24} className="col-lg pl-between-1">
-            <Row className="home-menu px-4 py-5 text-center" style={{ backgroundColor: '#445572' }}>
+            <Row className="home-menu px-4 py-6 text-center" onMouseEnter={ e=> {
+              e.preventDefault();
+              e.stopPropagation();
+              this.setState({ hoverIndex: i });
+            }} onMouseLeave={ e=> {
+              e.stopPropagation();
+              this.setState({ hoverIndex: -1 });
+            }}>
               <Col xl={24} xxl={12}>
-                <img src={menu.img} alt='' />
+                <img src={(hoverIndex===i)?menu.imgH:menu.img} alt='' />
               </Col>
               <Col xl={24} xxl={10}>
                 {menu.url ? (
-                  <Link className="text-white" to={menu.url}>
+                  <Link to={menu.url}>
                     {menu.title}
                   </Link>
                 ) : (
-                  <span className="text-white">{menu.title}</span>
+                  <span>{menu.title}</span>
                 )}
               </Col>
             </Row>
@@ -136,195 +121,3 @@ export class HomeMenu extends Component {
     );
   }
 }
-
-const homeNodes = [
-  {
-    img: nodeImg1,
-    style: { top: 200, left: 1315 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>日均数据流量:</span>
-        <span className="ml-2">12</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg2,
-    style: { top: 410, left: 485 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>日均数据流量:</span>
-        <span className="ml-2">12</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg3,
-    style: { top: 465, left: 730 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>表数量:</span>
-        <span className="ml-2">{data.totalJob}</span>
-        <br />
-        <span>资产数:</span>
-        <span className="ml-2">{data.totalJob}</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg4,
-    style: { top: 775, left: 375 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>数据源数量:</span>
-        <span className="ml-2">{data.dataSource}</span>
-        <br />
-        <span>表数量:</span>
-        <span className="ml-2">{data.sqoopDB}</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg5,
-    style: { top: 460, left: 1510 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>日均数据流量:</span>
-        <span className="ml-2">12</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg6,
-    style: { top: 525, left: 120 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>日均数据流量:</span>
-        <span className="ml-2">12</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg7,
-    style: { top: 910, left: 645 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>日均数据流量:</span>
-        <span className="ml-2">{data.sqoopFILE}</span>
-        <br />
-      </div>
-    ),
-  },
-  {
-    img: nodeImg8,
-    style: { top: 800, left: 1200 },
-    begin: 'opacity:0.1; transform:translateY(0px);',
-    end: 'opacity:1; transform:translateX(0px);',
-    tooltip: data => (
-      <div>
-        <span>加工作业数:</span>
-        <span className="ml-2">{data.totalJob}</span>
-        <br />
-      </div>
-    ),
-  },
-];
-
-const netData = [
-  [
-    [550, 935, 820, 780],
-    [840, 970, 820, 780],
-    [300, 745, 1130, 270],
-    [1130, 600, 1345, 460],
-    [1130, 600, 1520, 640],
-    [650, 580, 830, 690],
-  ],
-  [[1140, 265, 1360, 400]],
-];
-
-export class HomeGrid extends Component {
-  
-  constructor() {
-    super();
-    this.state = {
-      tooltipData: {}
-    };
-  }
-
-  componentDidMount() {
-
-    dispatchLatest({
-      type: 'assets.getDataFlowCount',
-      payload: {},
-      callback: data => {
-        this.setState({ tooltipData: data })
-      }
-    })  
-  }
-
-  render() {
-    const { tooltipData } = this.state;
-
-    return (
-      <div className={'home-grid-outter'} style={{}}>
-        <div
-          className={'position-relative home-grid'}
-          style={{ width: 1920, height: 1350 }}
-        >
-          <Comet
-            args={{
-              speed: 3,
-              opacity: 0.5,
-              fillStyle: 'rgba(100,100,100,.59)',
-              lineW: 3,
-              className: classnames('position-absolute '),
-              style: { height: '100%' },
-              width: 1920,
-              height: 1350,
-            }}
-            linesData={netData}
-          />
-          {homeNodes.map((node, i) => (
-            <div
-              key={i}
-              className="position-absolute"
-              style={node.style}
-              data-400={node.begin}
-              data-700={node.end}
-            >
-              <Tooltip
-                placement="top"
-                overlayClassName="home"
-                title={node.tooltip(tooltipData || {})}
-              >
-                <span>
-                  <img className="node-img" src={node.img} alt='' />
-                </span>
-              </Tooltip>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-}

src/view/Metadata/index.jsx

@@ -13,7 +13,7 @@ export default class Metadata extends Component {
           <iframe
             title="元数据"
             src="/center-home/meta"
-            style={{ width: '100%', height: '741px', border: 0 }}
+            style={{ width: '100%', height: 'calc(100vh - 168px - 48px - 5px)', border: 0 }}
           />
         </Card>
       </PageHeaderWrapper>