576 lines
17 KiB
JavaScript
576 lines
17 KiB
JavaScript
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/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" }}>（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);
|