tsg-web/src/components/DashboardLayout/index.tsx

import {Alert, Layout, message, Modal} from 'antd';
import React, { Suspense, useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Outlet, useNavigate } from 'react-router';
import { useLocation } from 'react-router-dom';
import { findMenu } from '../../models/auth/menu';
import { Dispatch, RootState } from '../../models/store';
import HeaderUser from './HeaderUser';
import SiderMenu from './SiderMenu';
import './style.less';
import TopMenu from './TopMenu';
import { currentBreadcrumbs } from '../../models/auth/_';
import {page} from '../../service/warn';
import { qryBasicWatershedDetailApi } from "../../service/preplan";
import moment from "moment"
import { httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';

const { Header, Content, Sider } = Layout;
const meunObj:any = {
  'home':'基本情况',
  'fxzb':'防汛准备',
  'sxfd':'思想发动',
  'fxkhgzh':'防汛抗旱工作会',
  'fbzrh':'防办主任会',
  'fxpxb':'防汛培训班',
  'fxtj':'防汛图件',
  'zzjg':'组织机构',
  'zq':'政区',
  'gc':'工程',
  'gczx':'工程整修',
  'ytygc':'已投运工程',
  'zjgc':'在建工程',
  'hdqz':'河道清障',
  'yaxb':'预案修编',
  'zqya':'政区预案',
  'ytygcya':'已投运工程预案',
  'zjgcya':'在建工程预案',
  'hsddya':'洪水调度方案',
  'qxdw':'抢险队伍',
  'qxwl':'抢险物料',
  'jczw':'检测站网',
  'yqz':'雨情站',
  'sqz':'水情站',
  'zbb':'值班表',
  'txl':'通讯录',
  'ysgzq':'雨水工灾情',
  'ssyq':'实时雨情',
  'sssq':'实时水情',
  'ssgq':'实时工情',
  'yxqk':'运行情况',
  'gcxq':'工程险情',
  'dbaq':'大坝安全监测数据',
  'sszq':'实时灾情',
  'fxdd':'防汛调度',
  'dqxsfx':'当前形势分析',
  'tqyb':'天气预报',
  'hsyb':'洪水预报',
  'skhs':'水库洪水',
  'hdhs':'河道洪水',
  'ddjc':'调度决策',
  'yjxy':'应急响应',
  'ddzl':'调度指令',
  'videoSurveillance':'视频监控',
  'fxdp':'防汛大屏',
}



const DashboardLayout: React.FC = () => {

  const getLayerVisible = (s:any) => s.map.layerVisible;
  const layerVisible = useSelector(getLayerVisible);

  const location = useLocation();
  const navigate = useNavigate();

  const pathname = location.pathname;
  const dispatch = useDispatch<Dispatch>();
  const myUser = localStorage.getItem('userName')
  const token = localStorage.getItem('access_token');
  const menu = useSelector((state: RootState) => state.auth.menu);
  const roleObj = useSelector((state: any) => state.auth.roleObj);


  useEffect(()=>{
    if (!myUser || !token) {
      navigate('/login')
    }else{
      dispatch.auth.loadMenu();
      document.title = "小玉潭水库综合管理系统";
    }
  },[])

  useEffect(()=>{
    if(JSON.stringify(roleObj)!=='{}'){
      const obj = roleObj[pathname]
      dispatch.auth.setRole(obj)
    }
  },[pathname,roleObj])


  const [refresh, setRefresh] = useState(false);

  const handleRefresh = (event:any) => {
    event.preventDefault();
    // 设置refresh状态为true
    setRefresh(true);
  };

  

  // 这个方法是统计菜单点击情况的
  // useEffect(()=>{
  //   (async()=>{
  //     const list = location.pathname.split('/')
  //     let menu1:any = meunObj?.[list[2]]
  //     let menu2:any = meunObj?.[list[3]]
  //     let menu3:any = meunObj?.[list[4]]
  //     if(menu1==='基本情况'){
  //       menu2 = '基本情况'
  //     }
  //     if(menu1==='视频监控'){
  //       menu2 = '视频监控'
  //     }
  //     if(menu1==='防汛大屏'){
  //       menu2 = '防汛大屏'
  //     }

  //     const res = await httppost2(apiurl.setMenu,{
  //       createId:localStorage.getItem('userId'),
  //       loginType:0,
  //       menu1:menu1,
  //       menu2:menu2,
  //       menu3:menu3
  //       })
  //   })()
  // },[location.pathname])

  const menuIndexes = useMemo(() => findMenu(menu, pathname), [menu, pathname]);

  const menuUrl = ['/mgr/home', '/mgr/forecast', '/mgr/earlyWarning', '/mgr/preview', '/mgr/plan','/mgr/videoSurveillance'];

  return (
    <Layout className="app-root">
      <Header className="app-header clearFloat">
        {/*<Avatar size={24} className="app-icon" />*/}
        {/*<span className="app-title">{TITLE}{SUBTITLE}</span>*/}
        <span className="app-title lf">
          <img src={`${process.env.PUBLIC_URL}/assets/shuili.png`} alt=""/>
          <span>小玉潭水库综合管理系统</span>
        </span>
        <div className="topMenu lf">
          <TopMenu menu={menu} menuIndexes={menuIndexes} />
        </div>
        <div className="rf">
          <HeaderUser user={null} />
        </div>
      </Header>
      {/*  信息管理左栏*/}
      <Layout className="app-root" >
        {
          !menuUrl.includes(pathname)?

            <Sider className="app-sider"  width={'280px'} >
              {/* 左侧样式 */}
              <SiderMenu menu={menu} menuIndexes={menuIndexes} />
            </Sider>
            :null
        }
        <Content className="app-content" >
          <div className='content-root'>
            <Suspense fallback={null}>
              {
                menu.length>0?<Outlet />:null
              }
            </Suspense>
          </div>
        </Content>
      </Layout>
    </Layout>
  )
};

export default DashboardLayout