首页优化
This commit is contained in:
parent
d033ff3998
commit
af6b6192ff
@ -1,7 +1,7 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { connect } from "dva";
|
||||
import { withRouter } from "dva/router";
|
||||
import { Dropdown, Icon, Menu, message, Button, Modal } from "antd";
|
||||
import { Dropdown, Icon, Menu, message, Button, Modal, Input } from "antd";
|
||||
import { HeaderSearch as OPTSearch, PictureThumb } from "@woowalker/feui";
|
||||
import ModifyPassword from "../components/MainPage/ModifyPassword";
|
||||
import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
|
||||
@ -13,15 +13,15 @@ import config from "../config";
|
||||
import "./header.less";
|
||||
import Option from "./Option";
|
||||
|
||||
|
||||
// 投屏
|
||||
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}`;
|
||||
const url = `${
|
||||
preUrl.indexOf("?") !== -1 ? preUrl : preUrl + "?"
|
||||
}${queryStr}`;
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
return (
|
||||
@ -33,8 +33,9 @@ const DataV = (props) => {
|
||||
const HeaderDataV = connect(({ login }) => ({ login }))(DataV);
|
||||
|
||||
// 搜索
|
||||
const Search = (props) => {
|
||||
const SearchBox = (props) => {
|
||||
const [autoCompleteData, setAutoCompleteData] = useState([]);
|
||||
const [inputVal, setInputVal] = useState("");
|
||||
|
||||
const leafMenus = useMemo(() => {
|
||||
const menuForms = [];
|
||||
@ -66,16 +67,17 @@ const Search = (props) => {
|
||||
* @param {*} e
|
||||
*/
|
||||
const handleSearchMenu = (e) => {
|
||||
if (!e || e === "") {
|
||||
setInputVal(e.target.value);
|
||||
if (!e.target.value || e.target.value === "") {
|
||||
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
|
||||
item.CODE.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 ||
|
||||
item.NAME.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 ||
|
||||
item.MenuName.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0
|
||||
) {
|
||||
validResult.push(item);
|
||||
}
|
||||
@ -87,6 +89,36 @@ const Search = (props) => {
|
||||
* 选中菜单
|
||||
* @param {*} e
|
||||
*/
|
||||
|
||||
const overMenu = () => {
|
||||
if (autoCompleteData.length == 0) {
|
||||
return (
|
||||
<Menu>
|
||||
<Menu.Item key="0">暂无匹配项</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Menu
|
||||
// onClick={handleMenuClick}
|
||||
style={{ height: "200px", overflow: "auto" }}
|
||||
>
|
||||
{autoCompleteData.map((item, index) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
key={index}
|
||||
onClick={() => {
|
||||
handleSelectMenu(item.ID);
|
||||
}}
|
||||
>
|
||||
{item.NAME}({item.CODE})
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
};
|
||||
const handleSelectMenu = (e) => {
|
||||
const menu = leafMenus.menuDatas.find(
|
||||
(item) => item.Menu.Nav_MenuForm.ID === e
|
||||
@ -99,17 +131,48 @@ const Search = (props) => {
|
||||
},
|
||||
});
|
||||
props.history.push({ pathname: `/main/${menu.Node.ID}` });
|
||||
setInputVal("");
|
||||
setAutoCompleteData([])
|
||||
};
|
||||
|
||||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||||
return <span></span>;
|
||||
} else {
|
||||
return (
|
||||
<OPTSearch
|
||||
dataSource={autoCompleteData}
|
||||
onChange={handleSearchMenu}
|
||||
onSelect={handleSelectMenu}
|
||||
/>
|
||||
// <OPTSearch
|
||||
// dataSource={autoCompleteData}
|
||||
// onChange={handleSearchMenu}
|
||||
// onSelect={handleSelectMenu}
|
||||
// />
|
||||
// <SearchBox
|
||||
// backgroundColor="#F7F7F7" // 自定义背景色
|
||||
// placeholder="请输入关键词" // 输入框提示
|
||||
// hasDropdown={true} // 是否显示下拉搜索类型
|
||||
// onClick={handleSelectMenu} // 点击菜单执行方法
|
||||
// onClickSearch={handleSearchMenu} // 点击搜索按钮执行
|
||||
// size="sm" // 大小 lg or sm
|
||||
// hasBorder={false}
|
||||
// lists={autoCompleteData}
|
||||
// />
|
||||
<Dropdown overlay={overMenu} placement="topLeft" trigger={['click']}>
|
||||
<div className="headerInput">
|
||||
{/* <Search
|
||||
placeholder={"请输入搜索内容"}
|
||||
onSearch={handleSearchMenu}
|
||||
style={{ width: 200 }}
|
||||
/> */}
|
||||
<Input
|
||||
placeholder="搜索菜单"
|
||||
prefix={<Icon type="search" style={{ color: "#909399" ,fontSize:'18px'}} />}
|
||||
onChange={(e) => {
|
||||
handleSearchMenu(e);
|
||||
}}
|
||||
onPressEnter={(e) => {
|
||||
handleSearchMenu(e);
|
||||
}}
|
||||
value={inputVal}
|
||||
/>
|
||||
</div>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
//return (
|
||||
@ -121,7 +184,7 @@ const Search = (props) => {
|
||||
// />
|
||||
//)
|
||||
};
|
||||
const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(Search));
|
||||
const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(SearchBox));
|
||||
|
||||
// 个人中心
|
||||
const User = (props) => {
|
||||
@ -226,14 +289,11 @@ const GuideCodePage = (props) => {
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
currVans()
|
||||
currVans();
|
||||
}}
|
||||
style={{ margin: "0px 36px", display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<Icon
|
||||
type="qrcode"
|
||||
className="header__right-icon"
|
||||
/>
|
||||
<Icon type="qrcode" className="header__right-icon" />
|
||||
</div>
|
||||
<Modal
|
||||
title=""
|
||||
@ -251,7 +311,6 @@ const GuideCodePage = (props) => {
|
||||
<GuideCanvas />
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -277,7 +336,7 @@ const NavOpton = (props) => {
|
||||
{/* <Icon type='bars' className='header__right-icon'></Icon> */}
|
||||
<IconFont
|
||||
type="icon-line-108"
|
||||
style={{ fontSize: "22px", color: "#606266", cursor: "pointer" }}
|
||||
style={{ fontSize: "22px", color: "#909399", cursor: "pointer" }}
|
||||
></IconFont>
|
||||
</div>
|
||||
<Modal
|
||||
@ -325,10 +384,11 @@ function Header(props) {
|
||||
<span className="header__left-slogan-mobile"> </span>
|
||||
) : (
|
||||
<span
|
||||
className={`${props.matchLogin
|
||||
? "header__left-sloganLogin"
|
||||
: "header__left-slogan"
|
||||
}`}
|
||||
className={`${
|
||||
props.matchLogin
|
||||
? "header__left-sloganLogin"
|
||||
: "header__left-slogan"
|
||||
}`}
|
||||
>
|
||||
矿山安全生产标准化系统
|
||||
<span style={{ color: "#c99d03" }}>（SMS）</span>
|
||||
@ -338,15 +398,16 @@ function Header(props) {
|
||||
</div>
|
||||
{!props.matchLogin ? (
|
||||
<div className="header__right">
|
||||
<GuideCode />
|
||||
<HeaderNav />
|
||||
|
||||
<HeaderDataV />
|
||||
<HeaderSearch />
|
||||
<GuideCode />
|
||||
<HeaderNav />
|
||||
{/* style={{"color":"#f3eded"}} */}
|
||||
<HeaderUser />
|
||||
<b>
|
||||
{/* <HeaderUser /> */}
|
||||
{/* <b>
|
||||
{props.login.user.NAME}({props.login.user.CODE})
|
||||
</b>
|
||||
</b> */}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,18 @@
|
||||
.ant-modal {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.headerInput {
|
||||
.ant-input {
|
||||
border: 1px solid #fff;
|
||||
height: 38px;
|
||||
}
|
||||
.ant-input-affix-wrapper .ant-input:not(:first-child) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.ant-input::placeholder {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.@{header-prefix} {
|
||||
// width: 100%;
|
||||
@ -72,7 +84,7 @@
|
||||
|
||||
&-icon {
|
||||
font-size: 22px !important;
|
||||
color: #606266 !important; //f3eded
|
||||
color: #909399 !important; //f3eded
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
1002
src/routes/Home.js
1002
src/routes/Home.js
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,7 @@
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-Width: "320px",
|
||||
}
|
||||
:global(.home-userInfo-tabs) {
|
||||
background-color: #eefff8;
|
||||
@ -99,6 +100,7 @@
|
||||
background-color: #fafafa;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12) ;
|
||||
}
|
||||
:global(.home-tech-icon) {
|
||||
font-size: 30px;
|
||||
@ -267,6 +269,13 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
:global(.home-work-type-black) {
|
||||
background-color: #eef5ff;
|
||||
color: #55a0f7;
|
||||
padding: 3px 8px;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
:global(.home-work-type-green) {
|
||||
background-color: #eef6eb;
|
||||
color: #6dd230;
|
||||
padding: 3px 8px;
|
||||
@ -303,4 +312,21 @@
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
min-width: 674px;
|
||||
}
|
||||
:global(.home-setting) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.home-setting-icon) {
|
||||
color: #909399;
|
||||
padding: 4px;
|
||||
}
|
||||
:global(.home-setting-icon):hover {
|
||||
color: #909399;
|
||||
background-color: #f3f4f6;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user