添加titleBar样式

src/Frameworks/SysStorage.ts

@@ -1,5 +1,7 @@
 export enum STORAGE_TYPE {
   token = 'token',
+  projectName = 'projectName', //项目名称
+  platform = 'platform', // 0 建设平台  1 运营平台
 }
 const useStorage = (storage: Storage) => {
   const setItem = <T>(key: STORAGE_TYPE, value: T) => {

src/Project/Functions/FuncMain.ts

@@ -16,12 +16,12 @@ export default class FuncMain extends Func<FuncMainState> {
   constructor(name: string) {
     super(name);
     super.initStates((sm) => {
-      sm.addState(
-        FuncMainState.ProjectSelection,
-        () => window.GT_APP.funcProjectSelection.setActive(true),
-        () => null,
-        () => window.GT_APP.funcProjectSelection.setActive(false),
-      );
+      // sm.addState(
+      //   FuncMainState.ProjectSelection,
+      //   () => window.GT_APP.funcProjectSelection.setActive(true),
+      //   () => null,
+      //   () => window.GT_APP.funcProjectSelection.setActive(false),
+      // );
       sm.addState(FuncMainState.Login, new LoginHandle());
       sm.addState(FuncMainState.PlatformMenu, new PlatformMenuHandle());
 

src/Project/components/Timer/index.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useRef, useState } from 'react';
+export default function Timer({ style = {} }: { style?: any }) {
+  const [dataNow, setDataNow] = useState('');
+  let timer: any = useRef();
+  useEffect(() => {
+    timer.current = setInterval(() => {
+      setDataNow(getDate());
+    }, 1000);
+    return () => clearInterval(timer.current);
+  }, []);
+  const getDate = () => {
+    const date = new Date();
+    var time = new Date();
+    var year = time.getFullYear(); //获取年份
+    var month = time.getMonth() + 1; //获取月份
+    var day = time.getDate(); //获取日期
+    var hour = time.getHours().toString().padStart(2, '0'); //获取时
+    var minite = time.getMinutes().toString().padStart(2, '0'); //获取分
+    var second = time.getSeconds().toString().padStart(2, '0'); //获取秒
+    const weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+    const week = weekArray[date.getDay()];
+    return `${month}月${day}日 ${week}  ${hour}:${minite}`;
+  };
+  return <div style={style}>{dataNow}</div>;
+}

src/Project/components/TitleBar/index.less

@@ -0,0 +1,89 @@
+:global {
+  .ant-dropdown .ant-dropdown-menu{
+    width: 136px;
+    background-image: linear-gradient( rgba(29, 57, 104, 0.83), rgba(4, 18, 52, 0.90));
+    border: 1px solid rgba(40, 103, 179, 1);
+    border-radius: 0;
+    :last-child{
+      border-bottom: 0;
+    }
+  }
+  .ant-dropdown-menu-item {
+    padding: 10px 12px !important;
+    text-align: center;
+    border-radius: 0 !important;
+    border-bottom: 1px solid rgba(153, 231, 255, 0.40);
+  }
+  .ant-dropdown-menu-title-content{
+    width: 82px;
+    height: 26px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #D8E4E8;
+    line-height: 26px;
+  }
+}
+.TitleBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  
+  
+  .TextMain {
+    position: absolute;
+    top: 25%;
+    font-size: 14px;
+    color: #c0f0ff;
+    width: 100%;
+    text-align: center;
+  }
+  .pageTitle {
+    position: absolute;
+    left: 0;
+    width: calc((100vw - 830px) / 2);
+    text-align: right;
+  }
+  .title {
+    position: absolute;
+    left: 50%;
+    font-size: 28px;
+    line-height: 30px;
+    font-weight: 600;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, #fff, #9ed6ff, #fff);
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    // -webkit-text-stroke: 1px  black;
+  }
+  .textRight {
+    width: calc((100vw - 830px) / 2);
+    position: absolute;
+    right: 0;
+    display: flex;
+    justify-content: space-around;
+    // margin: 0 38px 0 40px;
+    .time {
+      width: 35%;
+    }
+    .user {
+      width: 24%;
+    }
+    .projectName {
+      width: 56%;
+    }
+    .line {
+      width: 1px;
+      background: url('~@/Project/assets/titleBar/titleLine.png');
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.pageMain {
+  padding: 20px;
+  .addBtn {
+    margin-bottom: 20px;
+  }
+}

src/Project/components/TitleBar/index.tsx

@@ -0,0 +1,74 @@
+import Timer from '../Timer';
+import React, { useEffect, useState } from 'react';
+import { connect } from 'umi';
+import styles from './index.less';
+import { Dropdown, MenuProps, Space } from 'antd';
+interface IProps {
+  // model: any;
+  // menuId: string | number;
+  // type: FLOW_TYPE;
+}
+const TitleBar = () => {
+  const [pageName, setPageName] = useState('');
+
+  const items: MenuProps['items'] = [
+    {
+      label: '问题反馈',
+      key: '0',
+    },
+    {
+      label: '修改密码',
+      key: '1',
+    },
+    {
+      label: '退出登录',
+      key: '2',
+    },
+  ];
+  return (
+    <div className={styles.TitleBar}>
+      <div style={{ display: 'flex', height: '68px' }}>
+        <img
+          style={{ flex: '1' }}
+          src={require('@/Project/assets/titleBar/bar.png')}
+        />
+        <img
+          style={{ width: '960px' }}
+          src={require('@/Project/assets/titleBar/title.png')}
+        />
+        <img
+          style={{ flex: '1' }}
+          src={require('@/Project/assets/titleBar/bar.png')}
+        />
+      </div>
+      {/* <img
+        style={{ width: '100%' }}
+        src={require('@/Project/assets/background/titleBar.png')}
+      /> */}
+      <div className={styles.TextMain}>
+        <span className={styles.pageTitle}>智能水厂双胞胎管理平台</span>
+        <span className={styles.title}>
+          {'projectDetail.WaterName' || '智能水厂双胞胎管理平台'}
+        </span>
+        <div className={styles.textRight}>
+          <div>{pageName}</div>
+          <div className={styles.line} />
+          <Timer />
+          <div className={styles.line} />
+          <Dropdown menu={{ items }}>
+            <Space>
+              <div>{'currentUser?.CName' || '-'}</div>
+              <img src={require('@/Project/assets/titleBar/titleIcon.png')} />
+            </Space>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default TitleBar;
+// export default connect(
+//   ({ model, loading }: { model: any }) => ({
+//     model,
+//   }),
+// )(TitleBar);

src/Project/pages/PlatformMenu/index.js

@@ -3,6 +3,7 @@ import { message } from 'antd';
 import menuStyle from './moduleMenuStyle.less';
 import { connect } from 'umi';
 import { FuncMainState } from '@/Project/Functions/FuncMain';
+import TitleBar from '@/Project/components/TitleBar';
 
 function PlatformMenu(props) {
   const {
@@ -187,6 +188,7 @@ function PlatformMenu(props) {
   // return <Menu onClickMenu={menu => handleMenuClick(menu)} menuData={curMenu}></Menu>;
   return (
     <div className={menuStyle.background}>
+      <TitleBar />
       <div className={menuStyle.menuContent}>
         <div className={menuStyle.wrap}>
           {curMenu.map((item) => (