mh_jy_safe_web/src/layout/Header.js

import React, { useState, useMemo, useEffect } from 'react';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import { Dropdown, Icon, Menu, message, Button, Modal } from 'antd';
import { HeaderSearch as OPTSearch, PictureThumb } from '@woowalker/feui';
import ModifyPassword from '../components/MainPage/ModifyPassword';
import FoUserInfoShow from '../components/MainPage/FoUserInfoShow';
import FeedbackQuestion from '../components/MainPage/FeedbackQuestion';
import GuideCanvas from '../components/MainPage/GuideCanvas';
import IconFont from '../utils/iconFont';
import { initFilter, requestFullScreenMethod, exitFullScreen, isFullscreenElement } from '../utils/common';
import config from '../config';
import './header.less';
import Option from './Option';
import FullScreenPage from './FullScreen';

// 投屏
const DataV = (props) => {
  const navTo = () => {
    const { OrgId, Tenant, baseConfig } = props.login;
    const preUrl = baseConfig.SCREEN_URL || config.dataVUrl;
    const queryStr = `OrgId=${OrgId}&Tenant=${Tenant}`;
    const url = `${preUrl.indexOf('?') !== -1 ? preUrl : preUrl + '?'}${queryStr}`;
    window.open(url, '_blank');
  };
  return (
    <span title="投屏" onClick={navTo} className="header__right-datav">
      {/* <EnergyIcon type='icon-touping' className='header__right-icon' /> */}
    </span>
  );
};
const HeaderDataV = connect(({ login }) => ({ login }))(DataV);

// 搜索
const Search = (props) => {
  const [autoCompleteData, setAutoCompleteData] = useState([]);

  const leafMenus = useMemo(() => {
    const menuForms = [];
    const menuDatas = [];
    function traverseChild(item) {
      if (!item.Menu.Nav_MenuForm || item.ChildMenus?.length) {
        item.ChildMenus.forEach((x) => {
          traverseChild(x);
        });
      } else if (item.Menu.Nav_MenuForm) {
        menuForms.push({
          MenuName: item.Menu.NAME,
          ...item.Menu.Nav_MenuForm,
        });
        menuDatas.push(item);
      }
    }

    const menus = props.login.loginInfo.Menus || [];
    menus.forEach((item) => {
      traverseChild(item);
    });

    return { menuForms, menuDatas };
  }, [props.login.loginInfo?.Menus]);

  /**
   * 搜索菜单
   * @param {*} e
   */
  const handleSearchMenu = (e) => {
    if (!e || e === '') {
      setAutoCompleteData([]);
      return;
    }
    const validResult = [];
    leafMenus.menuForms.forEach((item) => {
      if (
        item.CODE.toLowerCase().indexOf(e.toLowerCase()) >= 0 ||
        item.NAME.toLowerCase().indexOf(e.toLowerCase()) >= 0 ||
        item.MenuName.toLowerCase().indexOf(e.toLowerCase()) >= 0
      ) {
        validResult.push(item);
      }
    });
    setAutoCompleteData(validResult);
  };

  /**
   * 选中菜单
   * @param {*} e
   */
  const handleSelectMenu = (e) => {
    const menu = leafMenus.menuDatas.find((item) => item.Menu.Nav_MenuForm.ID === e);
    props.dispatch({
      type: 'app/updateActivatedMenu',
      payload: {
        currActivatedTab: menu.Node.ID,
        currActivatedMenu: menu.Node,
      },
    });
    props.history.push({ pathname: `/main/${menu.Node.ID}` });
  };

  if (window.navigator.userAgent.indexOf('Windows') < 1) {
    return <span></span>;
  } else {
    return <OPTSearch dataSource={autoCompleteData} onChange={handleSearchMenu} onSelect={handleSelectMenu} />;
  }
  //return (
  //
  // <OPTSearch
  //   dataSource={autoCompleteData}
  //   onChange={handleSearchMenu}
  //   onSelect={handleSelectMenu}
  // />
  //)
};
const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(Search));

// 个人中心
const User = (props) => {
  const [visible, setVisible] = useState(false);

  /**
   * 注销登录
   */
  const handleLogout = () => {
    const { OrgId, userId } = props.login;
    const logJson = initFilter(OrgId, userId, '', 0, 1, 0);
    props.dispatch({
      type: 'app/addLoginOut',
      payload: logJson,
    });
    localStorage.removeItem('accessToken');
    localStorage.removeItem('currentMineTypeName');
    props.history.push({ pathname: '/login' });
  };

  /**
   * 锁屏
   */
  const handleLockScreen = () => {
    localStorage.removeItem('accessToken');
    props.dispatch({
      type: 'login/save',
      payload: {
        screenLocked: true,
      },
    });
  };

  /**
   * 菜单选中
   * @param {*} evt
   */
  const handleUserMenuClick = (evt) => {
    switch (evt.key) {
      case 'user-menu-logout':
        handleLogout();
        break;
      case 'user-menu-lockscreen':
        handleLockScreen();
        break;
      case 'user-menu-cacheclean':
        window.localStorage.clear();
        message.success('清除成功，即将重新加载页面', 2, () => {
          setTimeout(() => window.location.reload(true), 500);
        });
        break;
      default:
        break;
    }
    setVisible(false);
  };

  const { loginInfo = {} } = props.login;
  return (
    <Dropdown
      visible={visible}
      onVisibleChange={setVisible}
      overlay={
        <Menu onClick={handleUserMenuClick}>
          <Menu.Item key="user-menu-userinfo">当前登录：{loginInfo.User?.NAME}</Menu.Item>
          <Menu.Item key="user-menu-UserInfoShow">
            <FoUserInfoShow>我的资料</FoUserInfoShow>
          </Menu.Item>
          <Menu.Item key="user-menu-updatepwd">
            <ModifyPassword>修改密码</ModifyPassword>
          </Menu.Item>
          {/* <Menu.Item key='user-menu-feedbackqtn'><FeedbackQuestion>问题反馈</FeedbackQuestion></Menu.Item> */}
          {/* <Menu.Item key='user-menu-lockscreen'>屏幕锁定</Menu.Item> */}
          <Menu.Item key="user-menu-cacheclean">清除缓存</Menu.Item>
          <Menu.Item>版本号:{config.version}</Menu.Item>
          <Menu.Item key="user-menu-logout">退出登录</Menu.Item>
        </Menu>
      }
    >
      <span className="header__right-user">
        <Icon type="user" className="header__right-icon" />
      </span>
    </Dropdown>
  );
};
const HeaderUser = withRouter(connect(({ login }) => ({ login }))(User));
// 2023-10-08 生产单元
const MineType = (props) => {
  const [visible, setVisible] = useState(false);
  let currUserMineType = localStorage.getItem('MineType');
  if (currUserMineType == null || currUserMineType == undefined) {
    localStorage.setItem('MineType', '30');
    localStorage.setItem('currentMineTypeName', '露天矿');
  } else {
    if (localStorage.getItem('currentMineTypeName') == null) {
      if (currUserMineType.indexOf(30) > -1) {
        localStorage.setItem('currentMineType', 30);
        localStorage.setItem('currentMineTypeName', '露天矿');
      } else if (currUserMineType.indexOf(20) > -1) {
        localStorage.setItem('currentMineType', 20);
        localStorage.setItem('currentMineTypeName', '尾矿库');
      } else if (currUserMineType.indexOf(10) > -1) {
        localStorage.setItem('currentMineType', 10);
        localStorage.setItem('currentMineTypeName', '选矿厂');
      } else if (currUserMineType.indexOf(40) > -1) {
        localStorage.setItem('currentMineType', 40);
        localStorage.setItem('currentMineTypeName', '地下矿');
      } else if (currUserMineType.indexOf(31) > -1) {
        localStorage.setItem('currentMineType', 31);
        localStorage.setItem('currentMineTypeName', '职能口');
      } else if (currUserMineType.indexOf(32) > -1) {
        localStorage.setItem('currentMineType', 32);
        localStorage.setItem('currentMineTypeName', '非金属');
      }
    } else {
      let currentMineType = localStorage.getItem('currentMineType');
      if (currUserMineType.indexOf(currentMineType) > -1) {
        if (currentMineType == 30) {
          localStorage.setItem('currentMineTypeName', '露天矿');
        } else if (currUserMineType == 20) {
          localStorage.setItem('currentMineTypeName', '尾矿库');
        } else if (currUserMineType == 10) {
          localStorage.setItem('currentMineTypeName', '选矿厂');
        } else if (currUserMineType == 40) {
          localStorage.setItem('currentMineTypeName', '地下矿');
        } else if (currUserMineType == 31) {
          localStorage.setItem('currentMineTypeName', '职能口');
        } else if (currUserMineType == 32) {
          localStorage.setItem('currentMineTypeName', '非金属');
        }
      } else {
        if (currUserMineType.indexOf(30) > -1) {
          localStorage.setItem('currentMineTypeName', '露天矿');
        } else if (currUserMineType.indexOf(20) > -1) {
          localStorage.setItem('currentMineTypeName', '尾矿库');
        } else if (currUserMineType.indexOf(10) > -1) {
          localStorage.setItem('currentMineTypeName', '选矿厂');
        } else if (currUserMineType.indexOf(40) > -1) {
          localStorage.setItem('currentMineTypeName', '地下矿');
        } else if (currUserMineType.indexOf(31) > -1) {
          localStorage.setItem('currentMineTypeName', '职能口');
        } else if (currUserMineType.indexOf(32) > -1) {
          localStorage.setItem('currentMineTypeName', '非金属');
        }
      }
    }
  }

  let currUserMineTypeArray = [];
  if (currUserMineType.indexOf('30') > -1) {
    currUserMineTypeArray.push({ key: '30', label: '露天矿' });
  }
  if (currUserMineType.indexOf('10') > -1) {
    currUserMineTypeArray.push({ key: '10', label: '选矿厂' });
  }
  if (currUserMineType.indexOf('20') > -1) {
    currUserMineTypeArray.push({ key: '20', label: '尾矿库' });
  }
  if (currUserMineType.indexOf('40') > -1) {
    currUserMineTypeArray.push({ key: '40', label: '地下矿' });
  }
  if (currUserMineType.indexOf('31') > -1) {
    currUserMineTypeArray.push({ key: '31', label: '职能口' });
  }
  if (currUserMineType.indexOf('32') > -1) {
    currUserMineTypeArray.push({ key: '32', label: '非金属' });
  }
  const MineTypeMenu = () => {
    return (
      <Menu onClick={handleMineTypeClick}>
        {currUserMineTypeArray.map((item) => (
          <Menu.Item key={item.key}>{item.label}</Menu.Item>
        ))}
      </Menu>
    );
  };
  /**
   * 生产单元切换
   * @param {*} evt
   */
  const handleMineTypeClick = (evt) => {
    localStorage.setItem('currentMineType', evt.key);
    localStorage.setItem('currentMineTypeName', evt.item.props.children);
    setVisible(false);
    window.location.reload();
  };
  if (window.navigator.userAgent.indexOf('Windows') < 1) {
    return <div></div>;
  } else {
    return (
      <Dropdown visible={visible} onVisibleChange={setVisible} overlay={MineTypeMenu}>
        <a style={{ color: '#000000A6', marginLeft: '20px' }}>
          <b>生产单元：{localStorage.getItem('currentMineTypeName')}</b>
        </a>
      </Dropdown>
    );
  }
};
const HeaderMineType = withRouter(connect(({ login }) => ({ login }))(MineType));
const GuideCodePage = (props) => {
  const [showCanvas, setshowCanvas] = useState(false);
  const currVans = (val) => {
    setshowCanvas(true);
  };
  /**
   * 生产单元切换
   * @param {*} evt
   */

  if (window.navigator.userAgent.indexOf('Windows') < 1) {
    return <div></div>;
  } else {
    return (
      <div>
        <div
          onClick={() => {
            currVans();
          }}
          style={{ margin: '0px 36px', display: 'flex', alignItems: 'center' }}
        >
          <Icon type="qrcode" className="header__right-icon" />
        </div>
        <Modal
          title=""
          visible={showCanvas}
          width="450px"
          centered={true}
          onOk={() => {
            setshowCanvas(false);
          }}
          onCancel={() => {
            setshowCanvas(false);
          }}
          footer={null}
        >
          <GuideCanvas />
        </Modal>
      </div>
    );
  }
};
const GuideCode = withRouter(connect(({ login }) => ({ login }))(GuideCodePage));
const NavOpton = (props) => {
  const [showModal, setshowModal] = useState(false);
  const getChildCount = (val) => {
    setshowModal(val);
  };
  if (window.navigator.userAgent.indexOf('Windows') < 1) {
    return <div></div>;
  } else {
    return (
      <div>
        <div
          type="primary"
          onClick={() => {
            setshowModal(true);
          }}
        >
          {/* <Icon type='bars' className='header__right-icon'></Icon> */}
          <IconFont type="icon-line-108" style={{ fontSize: '22px', color: '#333333', cursor: 'pointer' }}></IconFont>
        </div>
        <Modal
          title="功能导航"
          visible={showModal}
          width="96%"
          centered={true}
          onOk={() => {
            setshowModal(false);
          }}
          onCancel={() => {
            setshowModal(false);
          }}
          className="headerModal"
        >
          <Option getCount={getChildCount}></Option>
        </Modal>
      </div>
    );
  }
};
const FullScreenOpton = (props) => {
  const [showModal, setshowModal] = useState(false);
  const getChildCount = (val) => {
    setshowModal(val);
  };
  const [fullScreen, setFullScreen] = useState(false);
  const [originResizeFunc, setOriginResizeFunc] = useState();
  const escFunction = () => {
    let isFull = !!(
      document.fullscreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen ||
      document.webkitFullScreen ||
      document.msFullScreen
    );
    if (isFull) {
      // /
    } else {
      // requestFullScreenMethod(document.body);
      setshowModal(false);
    }
  };
  useEffect(() => {
    // 监听退出全屏事件 --- chrome 用 esc 退出全屏并不会触发 keyup 事件
    document.addEventListener('webkitfullscreenchange', escFunction); /* Chrome, Safari and Opera */
    document.addEventListener('mozfullscreenchange', escFunction); /* Firefox */
    document.addEventListener('fullscreenchange', escFunction); /* Standard syntax */
    document.addEventListener('msfullscreenchange', escFunction); /* IE / Edge */
    return () => {
      //销毁时清除监听
      document.removeEventListener('webkitfullscreenchange', escFunction);
      document.removeEventListener('mozfullscreenchange', escFunction);
      document.removeEventListener('fullscreenchange', escFunction);
      document.removeEventListener('MSFullscreenChange', escFunction);
    };
  }, []);

  if (window.navigator.userAgent.indexOf('Windows') < 1) {
    return <div></div>;
  } else {
    return (
      <div>
        <div
          type="primary"
          onClick={() => {
            setshowModal(true);
            requestFullScreenMethod(document.body); // 进入全屏
          }}
        >
          <Icon type="alert" className="header__right-icon"></Icon>
          {/* <IconFont
            type="icon-line-108"
            style={{ fontSize: "22px", color: "#333333", cursor: "pointer" }}
          ></IconFont> */}
        </div>
        <Modal
          title="功能导航"
          visible={showModal}
          width="100%"
          centered={true}
          onOk={() => {
            setshowModal(false);
          }}
          onCancel={() => {
            setshowModal(false);
          }}
          className="fullScreen"
        >
          <FullScreenPage />
        </Modal>
      </div>
    );
  }
};

const FullScreen = withRouter(connect(({ login }) => ({ login }))(FullScreenOpton));

const HeaderNav = withRouter(connect(({ login }) => ({ login }))(NavOpton));

function Header(props) {
  const { baseConfig = {} } = props.login;
  const thumbCode = baseConfig.Nav_PictureLogo ? baseConfig.Nav_PictureLogo.CODE : '';
  let isMobile = false;

  if (window.navigator.userAgent.indexOf('Windows') < 1) {
    isMobile = true;
  }

  return (
    <div className={`header ${props.matchLogin ? 'login' : ''}`}>
      <div className="header__left">
        <PictureThumb
          thumbCodes={thumbCode ? [thumbCode] : []}
          thumbConfigs={[{ target: thumbCode }]}
          defaultThumb={require('../assets/layout/headerno-logo-new.png')}
          className="header__left-logo"
        />
        {isMobile ? (
          <span className="header__left-slogan-mobile"> </span>
        ) : (
          <span className={`${props.matchLogin ? 'header__left-sloganLogin' : 'header__left-slogan'}`}>
            矿山安全生产信息化平台
            <span style={{ color: '#c99d03' }}></span>
            {baseConfig.SYS_NAME}{' '}
          </span>
        )}
      </div>
      {!props.matchLogin ? (
        <div className="header__right">
          {/* <RiskFourColor/> */}
          {/* <FullScreen /> */}
          {/* {window.location.host == "121.41.2.71:8001" ? <FullScreen /> : ""}  */}
          <GuideCode />
          <HeaderNav />
          <HeaderDataV />
          <HeaderSearch />
          {/* style={{"color":"#f3eded"}} */}
          <HeaderMineType />
          <HeaderUser />
          <b>
            {props.login.user.NAME}({props.login.user.CODE})
          </b>
        </div>
      ) : null}
    </div>
  );
}

export default connect(({ login }) => ({ login }))(Header);