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="750px"
          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/header-logo.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" }}>（SPS）</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);