首页以及整体流程

src/Frameworks/SysRouter/index.ts

@@ -39,7 +39,7 @@ export const route: GT.IRouterOptions[] = [
     //@ts-ignore
     component: () => import('@/Project/pages/PlatformMenu'),
     //@ts-ignore
-    models: () => import('@/Project/pages/PlatformMenu/models/menu'),
+    // models: () => import('@/Project/pages/PlatformMenu/models/menu'),
     options: {
       header: false,
     },

src/Project/Functions/FuncMain.ts

@@ -15,9 +15,11 @@ export enum FuncMainState {
 }
 
 export default class FuncMain extends Func<FuncMainState> {
+  subModule: number = 1; // 1建设  2运营
   constructor(name: string) {
     super(name);
     super.initStates((sm) => {
+      sm.addState(FuncMainState.PlatformMenu, new PlatformMenuHandle());
       sm.addState(
         FuncMainState.ProjectSelection,
         () => window.GT_APP.funcProjectSelection.setActive(true),
@@ -28,7 +30,6 @@ export default class FuncMain extends Func<FuncMainState> {
 
       sm.addState(FuncMainState.ProjectMenu, new ProjectMenuHandle());
       sm.addState(FuncMainState.DataMeter, new DataMeterHandle());
-      sm.addState(FuncMainState.PlatformMenu, new PlatformMenuHandle());
       sm.addState(
         FuncMainState.Map,
         () => window.GT_APP.funcMap.setActive(true),
@@ -36,7 +37,7 @@ export default class FuncMain extends Func<FuncMainState> {
         () => window.GT_APP.funcMap.setActive(false),
       );
       sm.addState(
-        FuncMainState.PlatformMenu,
+        FuncMainState.PageMenu,
         () => {
           window.GT_APP.funcPageMenu.setActive(true);
           window.GT_APP.funcPageMenu.changeState(

src/Project/Functions/LevelAFunctions/FuncPlatformMenu.ts

@@ -1,5 +1,11 @@
 import Func from '@/Engine/ECS/Function';
-import { PAGE_KEY } from '@/Project/constants';
+import {
+  BuildNodeCode,
+  GlobalCockpit,
+  OpsNodeCode,
+  PAGE_KEY,
+} from '@/Project/constants';
+import { getToken } from '@/Project/utils';
 import { FuncMainState } from '../FuncMain';
 export enum FuncPlatformMenuState {
   PlatformMenu,
@@ -14,16 +20,42 @@ export default class FuncPlatformMenu extends Func<FuncPlatformMenuState> {
         this.onStateIn,
         null,
         this.onStateExit,
+        this,
       );
     });
   }
   onStateIn(): void {
-    const handleMapPage = (state: FuncMainState): void => {
-      window.GT_APP.funcMain.changeState(state);
-    };
-    window.GT_APP.sysPage.add(PAGE_KEY.PlatformMenu, { handleMapPage });
+    window.GT_APP.sysPage.add(PAGE_KEY.PlatformMenu, {
+      onClickMenu: this.onClickMenu,
+    });
   }
   onStateExit(): void {
     window.GT_APP.sysPage.removeByKey(PAGE_KEY.PlatformMenu);
   }
+  onClickMenu(element: Api.IMenu) {
+    const funcMain = window.GT_APP.funcMain;
+    if (element.Code == BuildNodeCode) {
+      funcMain.subModule = 1;
+      funcMain.changeState(FuncMainState.ProjectSelection);
+    } else if (element.Code == OpsNodeCode) {
+      funcMain.subModule = 2;
+      funcMain.changeState(FuncMainState.ProjectSelection);
+    } else if (element.Code == GlobalCockpit) {
+      //TODO: 跳转全局驾驶舱
+    } else {
+      if (element.WebPath == undefined) return;
+      //网页端跳转页面
+      let curHref = window.location.href;
+      let sign = '?';
+      if (curHref.indexOf('?') != -1) {
+        sign = '&';
+      }
+      let isUrl =
+        element.WebPath.indexOf('http') != -1 ||
+        element.WebPath.indexOf('https') != -1;
+      if (isUrl)
+        window.location.href =
+          element.WebPath + sign + 'JWT-TOKEN=' + getToken();
+    }
+  }
 }

src/Project/Functions/LevelAFunctions/FuncProjectMenu.tsx

@@ -21,7 +21,7 @@ export default class FuncProjectMenu extends Func<FuncProjectMenuState> {
   onStateIn(): void {
     window.GT_APP.sysPage.add(PAGE_KEY.ProjectMenu, {
       clickMenu: this.clickMenu,
-      subModule: 2,
+      subModule: window.GT_APP.funcMain.subModule,
     });
   }
   onStateExit(): void {

src/Project/Functions/LevelAFunctions/FuncProjectSelection.ts

@@ -26,7 +26,7 @@ export default class FuncProjectSelection extends Func<FuncProjectSelectionState
     // };
     window.GT_APP.sysPage.add(PAGE_KEY.ProjectSelection, {
       selectProject: this.selectProject,
-      subModule: 1,
+      subModule: window.GT_APP.funcMain.subModule,
     });
   }
   onIdleStateExit(): void {

src/Project/components/Menu/MenuStyle.less

@@ -0,0 +1,184 @@
+.background {
+  background-image: url("@/Project/assets/UnityMenu/newBackground.jpg");
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  :global {
+    .ant-popover-inner {
+      background: #0d1a2b;
+    }
+  }
+}
+
+.menu {
+  width: 1.2rem;
+  height: 1.2rem;
+  background: linear-gradient(0deg, #285098, #1d3969);
+  box-shadow: 0px 3px 0.16rem 2px rgba(0, 0, 0, 0.3), 0px 5px 0.39rem 0.1rem rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.TogMenu {
+  background-image: url(@/Project/assets/UnityMenu/TogMenuBackground.png);
+  width: 3.56rem;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0.6rem;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 99999;
+}
+
+.TogMenuClose {
+  background-image: url(@/Project/assets/UnityMenu/TogMenuClose.png);
+  width: 0.23rem;
+  height: 5px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  right: 0.1rem;
+  top: 0.14rem;
+}
+
+.TogMenuItem {
+  margin-left: 0.22rem;
+  margin-right: 0.4rem;
+  height: 0.6rem;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgb(176, 192, 224);
+}
+
+.TogMenuItemLeftLine {
+  background-image: url(@/Project/assets/UnityMenu/leftLine.png);
+  height: 0.16rem;
+  width: 4px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.TogMenuItemText {
+  font-size: 0.18rem;
+  font-family: 'Microsoft YaHei UI';
+  /* Microsoft YaHei UI;*/
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.34rem;
+  margin-left: 0.18rem;
+}
+
+.menuContent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100vh - 0.6rem);
+}
+
+.menuFriName {
+  font-size: 24px;
+  margin-top: 22px;
+  font-family: Microsoft YaHei UI;
+  color: #bae3ff;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  letter-spacing: 2px;
+  text-align: center;
+  word-break: keep-all;
+}
+
+.card {
+  width: 12rem;
+  height: 6.4rem;
+}
+
+.wrap {
+  width: 1480px;
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 292px;
+  height: 220px;
+  margin-bottom: 64px;
+  cursor: pointer;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+.empty {
+  height: 1px;
+  width: 2.92rem;
+  visibility: hidden;
+}
+
+.headerText {
+  width: 6rem;
+  font-size: 0.36rem;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.63rem;
+  text-align: center;
+  cursor: default;
+}
+
+.BreadcrumbWrap {
+  position: absolute;
+  left: 0.77rem;
+  top: 0.15rem;
+  height: 0.34rem;
+  // width: 3.4rem;
+  display: flex;
+  align-items: center;
+}
+
+.BreadcrumbItem {
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 0.34rem;
+  font-size: 16px;
+  font-family: 'Microsoft YaHei UI';
+  /* Microsoft YaHei UI;*/
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 0.34rem;
+  background: url(@/Project/assets/UnityMenu/BreadcrumbSelect.png) no-repeat center;
+  background-size: 100% 100%;
+  padding-left: 0.18rem;
+  padding-right: 0.16rem;
+
+  &.active {
+    background-image: url(@/Project/assets/UnityMenu/Breadcrumb.png);
+  }
+}
+
+.BreadcrumbContent {
+  background-image: url(@/Project/assets/UnityMenu/TogMenuBackground.png);
+  width: 2.68rem;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+}

src/Project/components/Menu/config.ts

@@ -0,0 +1,103 @@
+export const grayIcon = [
+  {
+    code: 'func-01-ops-BaseInfo',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-BaseInfo.png'),
+    name: '水厂介绍',
+  },
+  {
+    code: 'func-01-ops-DataView',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-DataView.png'),
+    name: '数据驾驶舱',
+  },
+  {
+    code: 'func-01-ops-DeviceManagement',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-DeviceManagement.png'),
+    name: '设备管理',
+  },
+  {
+    code: 'func-01-ops-ProManagement',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-ProManagement.png'),
+    name: '生产管理',
+  },
+  {
+    code: 'func-01-ops-SecurityManagement',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-SecurityManagement.png'),
+    name: '安全管理',
+  },
+  {
+    code: 'func-01-ops-LimitedSpace',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-LimitedSpace.png'),
+    name: '有限空间管理',
+  },
+  {
+    code: 'func-01-ops-EnergyManagement',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-EnergyManagement.png'),
+    name: '能耗管理',
+  },
+  {
+    code: 'func-01-ops-WaterQManagement',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-WaterQManagement.png'),
+    name: '水质管理',
+  },
+  {
+    code: 'func-01-build-0',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-0.png'),
+    name: '数据中心',
+  },
+  {
+    code: 'func-01-ops-ConfigManagement',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-ConfigManagement.png'),
+    name: '配置管理',
+  },
+
+  {
+    code: 'func-01-build-0',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-0.png'),
+    name: '数据中心',
+  },
+  {
+    code: 'func-01-build-3',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-3.png'),
+    name: '计划管理',
+  },
+  {
+    code: 'func-01-build-4',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-4.png'),
+    name: '安全管理',
+  },
+  {
+    code: 'func-01-build-10',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-10.png'),
+    name: '流程管理',
+  },
+  {
+    code: 'func-01-point-bom',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-point-bom.png'),
+    name: 'BOM清单',
+  },
+  {
+    code: 'func-01-build',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build.png'),
+    name: '建设平台',
+  },
+  {
+    code: 'func-01-ops',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops.png'),
+    name: '运营平台',
+  },
+  {
+    code: 'func-06-ManDay',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-06-ManDay.png'),
+    name: '人日系统',
+  },
+  {
+    code: 'func-06-globalCockpit',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-06-globalCockpit.png'),
+    name: '全局驾驶舱',
+  },
+  {
+    code: 'func-01-DirectDrinking',
+    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-DirectDrinking.png'),
+    name: '直饮水平台',
+  }
+];

src/Project/components/Menu/index.tsx

@@ -0,0 +1,63 @@
+import { useModel, useRequest } from '@umijs/max';
+import { Spin } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { grayIcon } from './config';
+import menuStyle from './MenuStyle.less';
+
+interface IProps {
+  menu: Api.IMenu[];
+  onClickMenu: (menu: Api.IMenu) => void;
+}
+function Menu(props: IProps) {
+  const { menu, onClickMenu } = props;
+
+  const handleMenuClick = (element: Api.IMenu) => {
+    if (!element.active) return;
+    onClickMenu?.(element);
+  };
+
+  const getSrc = (item: Api.IMenu) => {
+    if (item.active) {
+      return (
+        item.Icon || require('@/Project/assets/UnityMenu/ICON/newModel.png')
+      );
+    } else {
+      return grayIcon.find((icon) => icon.code === item.Code)?.iconPath;
+    }
+  };
+
+  return (
+    <div className={menuStyle.wrap}>
+      {menu.map((item) => (
+        <div
+          key={item.ID}
+          className={`${menuStyle.item} ${
+            item.active ? '' : menuStyle.disabled
+          }`}
+          onClick={() => handleMenuClick(item)}
+        >
+          <img className={menuStyle.pic} src={getSrc(item)} />
+          <span className={menuStyle.menuFriName}>{item.Name}</span>
+        </div>
+      ))}
+      {/* 新增功能 */}
+      {menu.length > 0 && (
+        <div className={menuStyle.item} style={{ cursor: 'not-allowed' }}>
+          <img
+            className={menuStyle.pic}
+            src={require('@/Project/assets/UnityMenu/ICON/newModel.png')}
+          />
+          <span className={menuStyle.menuFriName}>新增功能</span>
+        </div>
+      )}
+
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+    </div>
+  );
+}
+export default Menu;

src/Project/constants/index.ts

@@ -79,3 +79,4 @@ export const RoleType = [
 
 export const BuildNodeCode = 'func-01-build';
 export const OpsNodeCode = 'func-01-ops';
+export const GlobalCockpit = 'func-06-globalCockpit';

src/Project/pages/PlatformMenu/index.js

@@ -1,238 +0,0 @@
-import React, { useState, useEffect } from 'react';
-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 {
-    dispatch,
-    access,
-    params,
-    // location: { query = {} },
-  } = props;
-  console.log(props);
-  let query = {};
-
-  const noIcon = require('@/Project/assets/platformMenu/noIcon.png');
-  const newIcon = require('@/Project/assets/platformMenu/ICON/newModel.png');
-  const [curMenu, setCurMenu] = useState([]);
-  useEffect(() => {
-    dispatch({
-      type: 'menu/getPlatformMenu',
-      callback: (menus) => {
-        initMenu(menus);
-      },
-      payload: { version: 2 },
-    });
-    // dispatch({
-    //   type: 'user/fetchCurrent',
-    // });
-  }, []);
-
-  const getIcon = (item) => {
-    if (item.active && item.Icon) return item.Icon;
-    let current = find((icon) => icon.code === item.Code)?.iconPath;
-    if (current) return current;
-    return newIcon;
-  };
-
-  const initMenu = (menus) => {
-    console.log(access);
-    let newMenus = menus.filter((item) => {
-      if (item.Type == 1 && access[item.Code]) {
-        item.name = item.Name;
-        item.active =
-          item.children != undefined ||
-          item.WebPath != '' ||
-          item.UnityPath != '';
-
-        item.iconPath = getIcon(item);
-        return item;
-      }
-    });
-    newMenus.push({
-      name: '新增功能',
-      ID: '新增功能',
-      Code: '',
-      Type: 1,
-      iconPath: require('@/Project/assets/platformMenu/ICON/newModel.png'),
-      WebPath: '',
-      UnityPath: '',
-      active: false,
-    });
-    setCurMenu(newMenus);
-  };
-
-  const initMenu1 = (parent, permission) => {
-    console.log(parent, permission);
-    if (parent?.children) {
-      let menu = parent.children;
-      for (let i = 0; i < menu.length; i++) {
-        let element = menu[i];
-        if (element.Type != 1 || !permission[element.Code]) {
-          menu.splice(i, 1);
-          i--; //i
-          continue;
-        }
-        element.name = element.Name;
-        element.iconPath = element.Icon || noIcon;
-        element.active =
-          element.children != undefined ||
-          element.WebPath != '' ||
-          element.UnityPath != '';
-        if (!element.active) continue;
-      }
-      menu = menu.concat([
-        {
-          name: '新增功能',
-          ID: '新增功能',
-          Code: '',
-          Type: 1,
-          iconPath: require('@/Project/assets/platformMenu/newModel.png'),
-          WebPath: '',
-          UnityPath: '',
-          active: false,
-        },
-      ]);
-      setCurMenu(menu);
-    }
-  };
-  const handleMenuClick = (element) => {
-    params.handleMapPage(FuncMainState.Map);
-    if (element.Name == '运营平台' || element.Name == '建设平台') {
-      // if (query.unity == undefined) {
-      //   message.error('请使用客户端进入');
-      //   return;
-      // }
-      const subModule = element.Name == '运营平台' ? 2 : 1;
-      // const forbiddenModel = getGlobalData('forbiddenModel');
-      // 设置全局变量
-      // setGlobalData('curApp', subModule);
-      // UnityAction.sendMsg('EnterApp', element.Code);
-      // PageAction.sendMsg('HTML_changePage', {
-      //   code: 'projectSelect',
-      //   urlParams: {
-      //     subModule,
-      //     forbiddenModel,
-      //   },
-      // });
-      // PageAction.sendMsg('HTML_changeState', {
-      //   curMenu: null,
-      // });
-    } else {
-      //网页端跳转页面
-      if (query.unity == undefined) {
-        let curHref = window.location.href;
-        let sign = '?';
-        if (curHref.indexOf('?') != -1) {
-          sign = '&';
-        }
-        if (element.WebPath == undefined) return;
-        let isUrl =
-          element.WebPath.indexOf('http') != -1 ||
-          element.WebPath.indexOf('https') != -1;
-        // console.log(isUrl);
-        if (isUrl)
-          window.location.href =
-            element.WebPath + sign + 'JWT-TOKEN=' + localStorage['JWT-TOKEN'];
-      } else {
-        // UnityAction.sendMsg('EnterApp', element.Code);
-      }
-    }
-  };
-  const grayIcon = [
-    {
-      code: 'func-01-point-bom',
-      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-point-bom.png'),
-      name: 'BOM清单',
-    },
-    {
-      code: 'func-01-build',
-      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-build.png'),
-      name: '建设平台',
-    },
-    {
-      code: 'func-01-ops',
-      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-ops.png'),
-      name: '运营平台',
-    },
-    {
-      code: 'func-06-ManDay',
-      iconPath: require('@/Project/assets/platformMenu/ICON/func-06-ManDay.png'),
-      name: '人日系统',
-    },
-    {
-      code: 'func-06-globalCockpit',
-      iconPath: require('@/Project/assets/platformMenu/ICON/func-06-globalCockpit.png'),
-      name: '全局驾驶舱',
-    },
-    {
-      code: 'func-01-DirectDrinking',
-      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-DirectDrinking.png'),
-      name: '直饮水平台',
-    },
-    {
-      code: '',
-      iconPath: require('@/Project/assets/platformMenu/ICON/newModel.png'),
-      name: '新增功能',
-    },
-  ];
-  const getProjectSelectionUrl = (subModule) => {
-    // TODO 获取全局变量forbiddenModel
-    // const forbiddenModel = getGlobalData('forbiddenModel');
-    // return `#/smart-water/platform/projectSelect?subModule=${subModule}&forbiddenModel=${forbiddenModel}`;
-  };
-
-  // 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) => (
-            <div className={menuStyle.item}>
-              <div
-                onClick={() => handleMenuClick(item)}
-                className={menuStyle.menu}
-                style={item.active ? null : { cursor: 'not-allowed' }}
-              >
-                <img
-                  className={menuStyle.pic}
-                  src={item.iconPath}
-                  style={item.active ? {} : { cursor: 'not-allowed' }}
-                />
-              </div>
-              <div
-                style={{
-                  marginTop: '22px',
-                  width: '152px',
-                  textAlign: 'center',
-                }}
-              >
-                <span
-                  onClick={() => item.click?.(item)}
-                  className={menuStyle.menuFriName}
-                  style={
-                    item.active
-                      ? {}
-                      : { color: '#6081B2', cursor: 'not-allowed' }
-                  }
-                >
-                  {item.name}
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-export default connect(({ loading }) => ({
-  // waterMenuData: menu.waterMenuData,
-  // loading: loading.models.menu,
-  // currentUser: user.currentUser,
-  // Permission: user.currentUser.Permission,
-}))(PlatformMenu);

src/Project/pages/PlatformMenu/index.tsx

@@ -0,0 +1,31 @@
+import Menu from '@/Project/components/Menu';
+import { useModel } from '@umijs/max';
+import { Spin } from 'antd';
+import { useEffect } from 'react';
+import menuStyle from './moduleMenuStyle.less';
+
+function ModuleMenu(props: any) {
+  const {
+    params: { onClickMenu },
+  } = props;
+  const { allMenu, queryAllMenu, loading } = useModel('menu');
+
+  // const backToProjectSelect = () => {
+  //   UnityAction.sendMsg('back', '');
+  // };
+  const handleMenuClick = (element: Api.IMenu) => {
+    
+  };
+  useEffect(() => {
+    queryAllMenu();
+  }, []);
+
+  return (
+    <div className={menuStyle.background}>
+      <Spin spinning={loading}>
+        <Menu menu={allMenu} onClickMenu={onClickMenu} />
+      </Spin>
+    </div>
+  );
+}
+export default ModuleMenu;

src/Project/pages/PlatformMenu/models/menu.js

@@ -1,46 +0,0 @@
-import { getMenuData } from '@/Project/services/platformMenu';
-import { queryCurrent } from '@/Project/services/user';
-
-// const filterWaterMenuData = (menuData) => {
-//   if (!menuData) {
-//     return [];
-//   }
-//   var arr = [];
-//   menuData.forEach((item) => {
-//     if (item.Type != 1) return;
-//     arr.push(item);
-//     if (item.children) {
-//       let newChildren = filterWaterMenuData(item.children);
-//       item.children = newChildren.length == 0 ? null : newChildren;
-//     }
-//   });
-//   return arr;
-// };
-
-export default {
-  namespace: 'menu',
-  state: {},
-
-  effects: {
-    *getPlatformMenu({ callback, payload }, { put, call }) {
-      const allMenu = yield call(getMenuData, payload);
-      // const response = yield call(queryCurrent);
-      // let permission = {};
-      // if (response && allMenu) {
-      //   for (let i = 0; i < response?.data?.Permissions?.length; i++) {
-      //     let item = response.data.Permissions[i];
-      //     if (!item.Menus || typeof item.Menus != 'object') return;
-      //     permission = {
-      //       ...permission,
-      //       ...item.Menus,
-      //     };
-      //   }
-      let menu = allMenu.data?.list.find((item) => item.MenuType == 0) || {};
-      // menu.children = filterWaterMenuData(menu.children);
-      callback?.(menu?.children);
-      // }
-    },
-  },
-
-  reducers: {},
-};

src/Project/pages/PlatformMenu/moduleMenuStyle.less

@@ -12,117 +12,4 @@
       background: #0d1a2b;
     }
   }
-}
-.menu {
-  width: 152px;
-  height: 152px;
-  // background: linear-gradient(0deg, #285098, #1d3969);
-  // box-shadow: 0px 3px 16px 2px rgba(0, 0, 0, 0.3), 0px 5px 39px 10px rgba(0, 0, 0, 0.1);
-  // border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-.TogMenu {
-  background-image: url('@/Project/assets/platformMenu/TogMenuBackground.png');
-  width: 356px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: absolute;
-  top: 60px;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: 99999;
-}
-.TogMenuClose {
-  background-image: url('@/Project/assets/platformMenu/TogMenuClose.png');
-  width: 23px;
-  height: 5px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: absolute;
-  right: 10px;
-  top: 14px;
-}
-.TogMenuItem {
-  margin-left: 22px;
-  margin-right: 40px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid rgb(176, 192, 224);
-}
-.TogMenuItemLeftLine {
-  background-image: url('@/Project/assets/platformMenu/leftLine.png');
-  height: 16px;
-  width: 4px;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.TogMenuItemText {
-  font-size: 18px;
-  font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 34px;
-  margin-left: 18px;
-  cursor: pointer;
-}
-.menuContent {
-  height: 100%;
-  padding-top: 160px;
-  width: 1480px;
-  max-height: 100vh;
-  overflow-y: hidden;
-}
-.menuFriName {
-  font-size: 24px;
-  font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
-  // font-weight: 400;
-  color: #bae3ff;
-  // line-height: 45px;
-  // text-shadow: 0px 5px 14px rgba(0, 0, 0, 0.35), 0px 3px 12px rgba(0, 0, 0, 0.19);
-  cursor: pointer;
-  user-select: none;
-  letter-spacing: 2px;
-  text-align: center;
-  word-break: keep-all;
-}
-.card {
-  width: 120px;
-  height: 640px;
-}
-.wrap {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: start;
-  align-items: center;
-}
-.item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 292px;
-  height: 220px;
-  margin-bottom: 64px;
-}
-
-.headerText {
-  width: 600px;
-  font-size: 36px;
-  font-family: YouSheBiaoTiHei;
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 63px;
-  text-align: center;
-  cursor: default;
-}
-
-.pic {
-  width: 152px;
-  height: 152px;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
+}

src/Project/pages/ProjectMenu/MenuStyle.less

@@ -4,181 +4,4 @@
   height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
-
-  :global {
-    .ant-popover-inner {
-      background: #0d1a2b;
-    }
-  }
-}
-
-.menu {
-  width: 1.2rem;
-  height: 1.2rem;
-  background: linear-gradient(0deg, #285098, #1d3969);
-  box-shadow: 0px 3px 0.16rem 2px rgba(0, 0, 0, 0.3), 0px 5px 0.39rem 0.1rem rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.TogMenu {
-  background-image: url(@/Project/assets/UnityMenu/TogMenuBackground.png);
-  width: 3.56rem;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: absolute;
-  top: 0.6rem;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: 99999;
-}
-
-.TogMenuClose {
-  background-image: url(@/Project/assets/UnityMenu/TogMenuClose.png);
-  width: 0.23rem;
-  height: 5px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: absolute;
-  right: 0.1rem;
-  top: 0.14rem;
-}
-
-.TogMenuItem {
-  margin-left: 0.22rem;
-  margin-right: 0.4rem;
-  height: 0.6rem;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid rgb(176, 192, 224);
-}
-
-.TogMenuItemLeftLine {
-  background-image: url(@/Project/assets/UnityMenu/leftLine.png);
-  height: 0.16rem;
-  width: 4px;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-.TogMenuItemText {
-  font-size: 0.18rem;
-  font-family: 'Microsoft YaHei UI';
-  /* Microsoft YaHei UI;*/
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 0.34rem;
-  margin-left: 0.18rem;
-}
-
-.menuContent {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: calc(100vh - 0.6rem);
-}
-
-.menuFriName {
-  font-size: 24px;
-  margin-top: 22px;
-  font-family: Microsoft YaHei UI;
-  color: #bae3ff;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  letter-spacing: 2px;
-  text-align: center;
-  word-break: keep-all;
-}
-
-.card {
-  width: 12rem;
-  height: 6.4rem;
-}
-
-.wrap {
-  width: 1480px;
-  height: 100vh;
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-}
-
-.item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 292px;
-  height: 220px;
-  margin-bottom: 64px;
-
-}
-
-.disabled {
-  cursor: not-allowed;
-}
-
-.empty {
-  height: 1px;
-  width: 2.92rem;
-  visibility: hidden;
-}
-
-.headerText {
-  width: 6rem;
-  font-size: 0.36rem;
-  font-family: YouSheBiaoTiHei;
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 0.63rem;
-  text-align: center;
-  cursor: default;
-}
-
-.BreadcrumbWrap {
-  position: absolute;
-  left: 0.77rem;
-  top: 0.15rem;
-  height: 0.34rem;
-  // width: 3.4rem;
-  display: flex;
-  align-items: center;
-}
-
-.BreadcrumbItem {
-  background-size: contain;
-  background-repeat: no-repeat;
-  height: 0.34rem;
-  font-size: 16px;
-  font-family: 'Microsoft YaHei UI';
-  /* Microsoft YaHei UI;*/
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 0.34rem;
-  background: url(@/Project/assets/UnityMenu/BreadcrumbSelect.png) no-repeat center;
-  background-size: 100% 100%;
-  padding-left: 0.18rem;
-  padding-right: 0.16rem;
-
-  &.active {
-    background-image: url(@/Project/assets/UnityMenu/Breadcrumb.png);
-  }
-}
-
-.BreadcrumbContent {
-  background-image: url(@/Project/assets/UnityMenu/TogMenuBackground.png);
-  width: 2.68rem;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
 }

src/Project/pages/ProjectMenu/index.tsx

@@ -1,93 +1,14 @@
-import { useModel, useRequest } from '@umijs/max';
+import Menu from '@/Project/components/Menu';
+import { useModel } from '@umijs/max';
 import { Spin } from 'antd';
-import React, { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import menuStyle from './MenuStyle.less';
 
-const grayIcon = [
-  {
-    code: 'func-01-ops-BaseInfo',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-BaseInfo.png'),
-    name: '水厂介绍',
-  },
-  {
-    code: 'func-01-ops-DataView',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-DataView.png'),
-    name: '数据驾驶舱',
-  },
-  {
-    code: 'func-01-ops-DeviceManagement',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-DeviceManagement.png'),
-    name: '设备管理',
-  },
-  {
-    code: 'func-01-ops-ProManagement',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-ProManagement.png'),
-    name: '生产管理',
-  },
-  {
-    code: 'func-01-ops-SecurityManagement',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-SecurityManagement.png'),
-    name: '安全管理',
-  },
-  {
-    code: 'func-01-ops-LimitedSpace',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-LimitedSpace.png'),
-    name: '有限空间管理',
-  },
-  {
-    code: 'func-01-ops-EnergyManagement',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-EnergyManagement.png'),
-    name: '能耗管理',
-  },
-  {
-    code: 'func-01-ops-WaterQManagement',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-WaterQManagement.png'),
-    name: '水质管理',
-  },
-  {
-    code: 'func-01-build-0',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-0.png'),
-    name: '数据中心',
-  },
-  {
-    code: 'func-01-ops-ConfigManagement',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-ops-ConfigManagement.png'),
-    name: '配置管理',
-  },
-
-  {
-    code: 'func-01-build-0',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-0.png'),
-    name: '数据中心',
-  },
-  {
-    code: 'func-01-build-3',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-3.png'),
-    name: '计划管理',
-  },
-  {
-    code: 'func-01-build-4',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-4.png'),
-    name: '安全管理',
-  },
-  {
-    code: 'func-01-build-10',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/func-01-build-10.png'),
-    name: '流程管理',
-  },
-
-  {
-    code: '',
-    iconPath: require('@/Project/assets/UnityMenu/ICON/newModel.png'),
-    name: '新增功能',
-  },
-];
-
 function ModuleMenu(props: any) {
   const {
     params: { subModule, clickMenu },
   } = props;
-  const { projectMenu, queryProjectMenu, loading } = useModel('menu');
+  const { projectMenu, changeModule, loading } = useModel('menu');
 
   // const backToProjectSelect = () => {
   //   UnityAction.sendMsg('back', '');
@@ -112,54 +33,14 @@ function ModuleMenu(props: any) {
     //   }
     // }
   };
-
-  const getSrc = (item: Api.IMenu) => {
-    if (item.active) {
-      return (
-        item.Icon || require('@/Project/assets/UnityMenu/ICON/newModel.png')
-      );
-    } else {
-      return grayIcon.find((icon) => icon.code === item.Code)?.iconPath;
-    }
-  };
   useEffect(() => {
-    queryProjectMenu(subModule);
+    changeModule(subModule);
   }, []);
 
   return (
     <div className={menuStyle.background}>
       <Spin spinning={loading}>
-        <div className={menuStyle.wrap}>
-          {projectMenu.map((item) => (
-            <div
-              key={item.ID}
-              className={`${menuStyle.item} ${
-                item.active ? '' : menuStyle.disabled
-              }`}
-              onClick={() => handleMenuClick(item)}
-            >
-              <img className={menuStyle.pic} src={getSrc(item)} />
-              <span className={menuStyle.menuFriName}>{item.Name}</span>
-            </div>
-          ))}
-          {/* 新增功能 */}
-          {projectMenu.length > 0 && (
-            <div className={menuStyle.item} style={{ cursor: 'not-allowed' }}>
-              <img
-                className={menuStyle.pic}
-                src={require('@/Project/assets/UnityMenu/ICON/newModel.png')}
-              />
-              <span className={menuStyle.menuFriName}>新增功能</span>
-            </div>
-          )}
-
-          <div className={menuStyle.empty}></div>
-          <div className={menuStyle.empty}></div>
-          <div className={menuStyle.empty}></div>
-          <div className={menuStyle.empty}></div>
-          <div className={menuStyle.empty}></div>
-          <div className={menuStyle.empty}></div>
-        </div>
+        <Menu menu={projectMenu} onClickMenu={handleMenuClick} />
       </Spin>
     </div>
   );

src/Project/services/typings.d.ts

@@ -140,6 +140,9 @@ declare namespace Api {
     RoleName: string;
     Menus: { [key: string]: boolean };
   }
+  interface IPermission {
+    [key: string]: boolean;
+  }
 }
 declare interface IResponse<T> {
   code: number;

src/app.ts

@@ -3,21 +3,19 @@ import type { RequestConfig } from 'umi';
 import { queryCurrent, queryAccess } from '@/Project/services/user';
 import { STORAGE_TYPE, LocalService } from './Frameworks/SysStorage';
 import { message } from 'antd';
+import { FuncMainState } from './Project/Functions/FuncMain';
 // 全局初始化数据配置，用于 Layout 用户信息和权限初始化
 // 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
 export async function getInitialState(): Promise<any> {
   let currentUser = {},
-    access = {};
-  let app = window.GT_APP;
+    access: Api.IPermission = {};
   // 非登录页获取用户信息
-  if (app?.isActive && !app.funcLogin.IsActive) {
-    try {
-      currentUser = (await queryCurrent()).data;
-    } catch (error) {}
-    try {
-      access = await queryAccess(46);
-    } catch (error) {}
-  }
+  try {
+    currentUser = (await queryCurrent()).data;
+  } catch (error) {}
+  try {
+    access = await queryAccess(46);
+  } catch (error) {}
   return { currentUser, access, projectId: 46 };
 }
 
@@ -36,15 +34,18 @@ export const request: RequestConfig = {
     },
     errorHandler(error: any, opts: any) {
       if (opts?.skipErrorHandler) throw error;
-      // 我们的 errorThrower 抛出的错误。
+      // errorThrower 抛出的错误。
       if (error.name === 'AjaxError') {
+        // 校验是否token失效
+        if (tokenExpiredHandle(error.info.code)) return;
         const errorInfo: IResponse<any> | undefined = error.info;
         const inLoginPage = window.GT_APP.funcLogin.IsActive;
         if (!inLoginPage && errorInfo) {
           message.error(errorInfo.msg || errorInfo.data);
         }
       } else if (error.response) {
-        // Axios 的错误
+        // http错误,校验token是否失效
+        if (tokenExpiredHandle(error.response.status)) return;
         // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
         message.error(`网络连接错误，请稍后重试(${error.response.status})`);
       } else if (error.request) {
@@ -79,3 +80,22 @@ export const request: RequestConfig = {
     },
   ],
 };
+let tokenFlag: boolean = false;
+// token失效校验
+const tokenExpiredHandle = (code: number) => {
+  if ([401, 601, 602, 603].includes(code)) {
+    if (tokenFlag) return true;
+
+    tokenFlag = true;
+    setTimeout(() => {
+      tokenFlag = false;
+    }, 50000);
+    message.error('token失效，请重新登录');
+    setTimeout(() => {
+      window.GT_APP.funcMain.changeState(FuncMainState.Login);
+    }, 1000);
+    return true;
+  } else {
+    return false;
+  }
+};

src/models/menu.ts

@@ -6,12 +6,11 @@ import {
 import { useModel, useRequest } from '@umijs/max';
 import { useMemo, useState } from 'react';
 
-interface IPermission {
-  [key: string]: boolean;
-}
 const useMenu = () => {
   const projectModel = useModel('project');
-  const projectId = projectModel.project?.ID;
+  const { initialState } = useModel('@@initialState');
+  const access: Api.IAccess = initialState?.access || null;
+  const projectId = projectModel.project?.ID || 0;
   // 1=build   2=ops
   const [module, changeModule] = useState<number>(1);
   const allMenuRequest = useRequest(
@@ -23,10 +22,10 @@ const useMenu = () => {
       manual: true,
     },
   );
-  const allMenu: Api.IMenu[] = allMenuRequest.data?.list || [];
+  // const allMenu: Api.IMenu[] = allMenuRequest.data?.list || [];
   const projectMenuRequest = useRequest(
-    async (module: number) => {
-      changeModule(module);
+    async (module?: number) => {
+      if (module) changeModule(module);
       let allMenuRes = await getMenuData({
         projectId,
         version: 2,
@@ -34,20 +33,36 @@ const useMenu = () => {
       let accessRes = await getMenuDataByProject(projectId!);
       const allMenu: Api.IMenu[] = allMenuRes.data?.list || [];
       const access: Api.IProjectAccess[] = accessRes.data || [];
-      return { data: initData(allMenu, access, module) };
+      return { data: { allMenu, access } };
     },
     {
-      manual: true,
+      ready: !!projectId,
+      refreshDeps: [projectId],
     },
   );
+  const projectMenu = useMemo(() => {
+    if (!projectMenuRequest.data) return [];
+    const { allMenu, access } = projectMenuRequest.data;
+    return initData(allMenu, access, module);
+  }, [projectMenuRequest.data, module]);
+
+  const allMenu: Api.IMenu[] = useMemo(() => {
+    if (!allMenuRequest.data) return [];
+    if (!access) return [];
+    let menu: Api.IMenu = allMenuRequest.data?.list.find(
+      (item: Api.IMenu) => item.MenuType == 0,
+    );
+    if (!menu || !menu.children) return [];
+    return filterWaterMenuDataByDepId(menu.children, access);
+  }, [allMenuRequest.data, access]);
 
   return {
     allMenu,
-    projectMenu: projectMenuRequest.data || [],
+    projectMenu,
     changeModule,
     loading: projectMenuRequest.loading || allMenuRequest.loading,
     queryAllMenu: allMenuRequest.run,
-    queryProjectMenu: projectMenuRequest.run,
+    // queryProjectMenu: projectMenuRequest.run,
   };
 };
 const initData = (
@@ -59,7 +74,7 @@ const initData = (
 
   let menu = allMenu.find((item: Api.IMenu) => item.MenuType == 0);
   if (!menu || !menu.children) return [];
-  var permission: IPermission = {};
+  var permission: Api.IPermission = {};
   for (let i = 0; i < access.length; i++) {
     let element = access[i].Menus;
     if (element == null) continue;
@@ -83,7 +98,7 @@ const initData = (
 // 根据权限过滤菜单栏
 const filterWaterMenuDataByDepId = (
   menuData: Api.IMenu[],
-  permission: IPermission,
+  permission: Api.IPermission,
 ) => {
   if (!menuData) {
     return [];
@@ -102,7 +117,7 @@ const filterWaterMenuDataByDepId = (
       }
     }
 
-    if (item.children?.length || item.UnityPath) {
+    if (item.children?.length || item.UnityPath || item.WebPath) {
       item.active = true;
     } else {
       item.active = false;

src/models/project.ts

@@ -18,7 +18,6 @@ const useProject = () => {
     },
     [projectRequest.data],
   );
-  console.log(project);
 
   return {
     project,