Commit 59e86911 authored by 曾婧's avatar 曾婧

华农主题提交本地一版本2

parent 715215a2
......@@ -3,7 +3,7 @@
* @Date: 2022-04-14 10:25:39
* @LastEditTime: 2022-04-14 10:30:09
* @LastEditors: ZengJing
* @Description:
* @Description:
* @FilePath: \CivWeb\src\components\GlobalHeader\HNRightContent.js
*/
import React, { useState, useRef } from 'react';
......
......@@ -5,8 +5,8 @@ import classNames from 'classnames';
import { ReactSVG } from 'react-svg';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useHistory } from '@wisdom-utils/runtime';
const LoadingSkeleton = (props) => {
const route = props.route;
const LoadingSkeleton = props => {
const { route } = props;
return (
<div style={{ padding: route && !route.routes ? '20px 6px 6px 6px' : '0px' }}>
<Skeleton loading={route && !route.routes} active title={false} paragraph={{ rows: 10 }}>
......@@ -16,23 +16,16 @@ const LoadingSkeleton = (props) => {
);
};
const Menu = (props) => {
const {
prefixCls,
collapsed,
onCollapse,
onMenuClick,
menuHeaderRender,
onMenuHeaderClick,
} = props;
const route = props.route;
const Menu = props => {
const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick } = props;
const { route } = props;
const history = useHistory();
const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
value: props.active,
onChange: props.onActiveChange,
});
const toLink = (path) => {
const toLink = path => {
if (!window.__POWERED_BY_QIANKUN__) {
history.push(path);
} else {
......@@ -61,7 +54,7 @@ const Menu = (props) => {
}
onMenuClick && onMenuClick(current, childrenRoutes, index);
};
return (
<LoadingSkeleton {...props}>
{route && route.routes && route.routes.length > 0 && (
......@@ -70,23 +63,13 @@ const Menu = (props) => {
menuHeaderRender(props)
) : (
<>
<ul
className={classNames(`${prefixCls}-menu`)}
style={{ minHeight: '0px', marginBottom: '0px' }}
>
<ul className={classNames(`${prefixCls}-menu`)} style={{ minHeight: '0px', marginBottom: '0px' }}>
<li className={`${prefixCls}-menu-item`} onClick={onMenuHeaderClick}>
<Tooltip placement="right" title={collapsed ? route.name : ''}>
<a>
{route && route.extData && route.extData.icon && (
<img src={route.extData.icon} />
)}
{route && route.extData && route.extData.icon && <img src={route.extData.icon} />}
{collapsed ? null : (
<span
className={classNames(
`${prefixCls}-menu-item-text`,
`${prefixCls}-menu-item-current`,
)}
>
<span className={classNames(`${prefixCls}-menu-item-text`, `${prefixCls}-menu-item-current`)}>
{route && route.name}
</span>
)}
......@@ -100,60 +83,58 @@ const Menu = (props) => {
<ul className={classNames(`${prefixCls}-menu ${prefixCls}-menu-vertical`)}>
{route &&
(route.routes || [])
.filter((item) => !item.hideInMenu)
.map((item, index) => {
return (
<React.Fragment key={index}>
<li
key={index}
className={classNames(`${prefixCls}-menu-item`, {
[`${prefixCls}-menu-item-active`]: index === selectIndex,
})}
onClick={() => onSelectItem(item, index)}
>
<Tooltip placement="right" title={collapsed ? item.name : ''}>
<a>
{item.icon ? (
item.icon
) : item.extData && /.svg/.test(item.extData.icon) ? (
<ReactSVG
src={item.extData.icon}
style={{ width: '20px', height: '20px' }}
className={`${prefixCls}-menu-item-icon`}
/>
) : (
item.extData && <img src={item.extData.icon} />
)}
{collapsed ? (
item.extData && (
<span className={`${prefixCls}-menu-item-text`}>
{(item.extData.shortName || item.name).substr(0, 2)}
</span>
)
) : (
<span className={`${prefixCls}-menu-item-text`}>{item.name}</span>
)}
</a>
</Tooltip>
</li>
<Divider
style={{
border: '1px solid rgb(49, 53, 62, 0.3)',
margin: '0 auto',
minWidth: '80%',
width: '80%',
}}
/>
</React.Fragment>
);
})}
.filter(item => !item.hideInMenu)
.map((item, index) => (
<React.Fragment key={index}>
<li
key={index}
className={classNames(`${prefixCls}-menu-item`, {
[`${prefixCls}-menu-item-active`]: index === selectIndex,
})}
onClick={() => onSelectItem(item, index)}
>
<Tooltip placement="right" title={collapsed ? item.name : ''}>
<a>
{item.icon ? (
item.icon
) : item.extData && /.svg/.test(item.extData.icon) ? (
<ReactSVG
src={item.extData.icon}
style={{ width: '20px', height: '20px' }}
className={`${prefixCls}-menu-item-icon`}
/>
) : (
item.extData && <img src={item.extData.icon} />
)}
{collapsed ? (
item.extData && (
<span className={`${prefixCls}-menu-item-text`}>
{(item.extData.shortName || item.name).substr(0, 2)}
</span>
)
) : (
<span className={`${prefixCls}-menu-item-text`}>{item.name}</span>
)}
</a>
</Tooltip>
</li>
<Divider
style={{
border: '1px solid rgb(49, 53, 62, 0.3)',
margin: '0 auto',
minWidth: '80%',
width: '80%',
}}
/>
</React.Fragment>
))}
</ul>
</React.Fragment>
)}
</LoadingSkeleton>
);
};
export default (props) => {
export default props => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('layout-slider');
const { menuItemRender, menuHeaderRender, siderWidth } = props;
......@@ -178,14 +159,9 @@ export default (props) => {
})}
>
<div className={`${prefixCls}-children`}>
<div
className={`${prefixCls}-wrapper`}
style={{ flex: '1 1 0%', overflow: 'hidden auto' }}
>
{/*{LoadingSkeleton(props)}*/}
{menuItemRender
? menuItemRender(props)
: Menu(Object.assign({}, props, { prefixCls: prefixCls }))}
<div className={`${prefixCls}-wrapper`} style={{ flex: '1 1 0%', overflow: 'hidden auto' }}>
{/* {LoadingSkeleton(props)} */}
{menuItemRender ? menuItemRender(props) : Menu(Object.assign({}, props, { prefixCls }))}
</div>
{route && route.routes && route.routes.length > 0 && (
<div className={`${prefixCls}-pro-sider-links`}>
......@@ -216,7 +192,7 @@ export default (props) => {
fill="currentColor"
aria-hidden="true"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z" />
</svg>
</span>
</span>
......
/*
* @Author: ZengJing
* @Date: 2022-04-15 09:34:03
* @LastEditTime: 2022-04-15 18:06:00
* @LastEditTime: 2022-04-15 18:16:26
* @LastEditors: ZengJing
* @Description:
* @FilePath: \CivWeb\src\layouts\AppLayout\components\SlideMenu\index.js
......@@ -15,7 +15,7 @@ import ProLayout, { getPageTitle } from '@ant-design/pro-layout';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useHistory } from '@wisdom-utils/runtime';
const LoadingSkeleton = props => {
const route = props.route;
const { route } = props;
return (
<div style={{ padding: route && !route.routes ? '20px 6px 6px 6px' : '0px' }}>
<Skeleton loading={route && !route.routes} active title={false} paragraph={{ rows: 10 }}>
......@@ -27,7 +27,7 @@ const LoadingSkeleton = props => {
const Menu = props => {
const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick, title } = props;
const route = props.route;
const { route } = props;
const history = useHistory();
const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
......@@ -42,10 +42,10 @@ const Menu = props => {
}
};
const onSelectItem = (item,dom) => {
const onSelectItem = (item, dom) => {
let current = void 0;
let childrenRoutes = [];
console.log('item', item,dom);
console.log('item', item, dom);
if (item && item.child) {
current = item.child[0];
......@@ -69,21 +69,21 @@ const Menu = props => {
};
useEffect(() => {
route.routes = treeRoutes(route.routes);
console.log('newRoutes************', route.routes);
}, [route]);
const treeRoutes = iroute =>
}, [route, treeRoutes]);
const treeRoutes =(iroute =>
iroute
.filter(item => item.level !== 3)
.map(item => {
console.log('item..>', item);
if (item.routes && Array.isArray(item.routes) && item.routes.length >= 1) {
if(item.level===2){
if (item.level === 2) {
item.child = item.routes;
}
item.routes = treeRoutes(item.routes);
}
return item;
});
})
);
return (
<LoadingSkeleton {...props}>
{route && route.routes && route.routes.length > 0 && (
......@@ -97,11 +97,11 @@ const Menu = props => {
// onHeaderLogo={handlerIndustry}
// onPageChange={handlerPageChange}
// onMenuPanelItemClick={handleUpdateCurrentIndex}
menuItemRender={(item, dom) => {
return item.level < 3 ? (
menuItemRender={(item, dom) =>
item.level < 3 ? (
<div
onClick={() => {
onSelectItem(item,dom);
onSelectItem(item, dom);
}}
className="test-icon"
>
......@@ -116,8 +116,8 @@ const Menu = props => {
)}
<span style={{ marginLeft: '5px' }}> {dom} </span>
</div>
) : null;
}}
) : null
}
subMenuItemRender={(item, dom) => (
<div className="test-icon">
{/.svg/.test(item.extData.icon) ? (
......
......@@ -4,7 +4,7 @@ import classNames from 'classnames';
import styles from './index.less';
const Categories = (props) => {
const Categories = props => {
const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
const selectCategories = (event, index) => {
event.preventDefault();
......@@ -27,11 +27,7 @@ const Categories = (props) => {
currentIndex === index ? styles.active : '',
);
return (
<div
className={categorieCls}
key={item.name}
onClick={(event) => selectCategories(event, index)}
>
<div className={categorieCls} key={item.name} onClick={event => selectCategories(event, index)}>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img src={item.extData.icon} />
<span>{item.extData.label}</span>
......
......@@ -2,9 +2,9 @@ import React from 'react';
import styles from './index.less';
const Menu = (props) => {
const renderTitle = (title) => <h4 className={styles.title}>{title}</h4>;
const renderMenuItem = (data) => {
const Menu = props => {
const renderTitle = title => <h4 className={styles.title}>{title}</h4>;
const renderMenuItem = data => {
let menuItem = [];
if (!data) {
return;
......@@ -14,12 +14,10 @@ const Menu = (props) => {
menuItem = (
<div
className={styles['main-menus-recentAll-menu-group-items-menu-item']}
onClick={(event) => props.handleClick(event, data)}
onClick={event => props.handleClick(event, data)}
>
<img src={data.extData.icon} alt="" />
<a
className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}
>
<a className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}>
{data.name}
</a>
</div>
......@@ -30,12 +28,10 @@ const Menu = (props) => {
<div
className={styles['main-menus-recentAll-menu-group-items-menu-item']}
key={item.name}
onClick={(event) => props.handleClick(event, item)}
onClick={event => props.handleClick(event, item)}
>
<img src={item.extData.icon} alt="" />
<a
className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}
>
<a className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}>
{item.name}
</a>
</div>
......
......@@ -4,7 +4,7 @@ import classNames from 'classnames';
import styles from './min.less';
const Categories = (props) => {
const Categories = props => {
const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
const selectCategories = (event, index) => {
event.preventDefault();
......@@ -21,7 +21,7 @@ const Categories = (props) => {
})}
>
{(props.data || [])
.filter((item) => !item.hideInMenu)
.filter(item => !item.hideInMenu)
.map((item, index) => {
const categorieCls = classNames(
styles['categorie-name'],
......@@ -29,11 +29,7 @@ const Categories = (props) => {
currentIndex === index ? styles.active : '',
);
return (
<div
className={categorieCls}
key={item.name}
onClick={(event) => selectCategories(event, index)}
>
<div className={categorieCls} key={item.name} onClick={event => selectCategories(event, index)}>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img src={item.extData.icon} />
<span>{item.extData.label}</span>
......
......@@ -10,7 +10,7 @@ import { ConfigProvider } from 'antd';
// eslint-disable-next-line import/extensions
import { events } from '@wisdom-utils/utils/lib/helpers';
const ThLarge = (props) => (
const ThLarge = props => (
<svg viewBox="0 0 1024 1024" version="1.1" width="14" height="14">
<path
d="M592 64h384c26.51 0 48 21.49 48 48v320c0 26.51-21.49 48-48 48H592c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48z m-160 0H48C21.49 64 0 85.49 0 112v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM0 592v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H48c-26.51 0-48 21.49-48 48z m592 368h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H592c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48z"
......@@ -19,15 +19,15 @@ const ThLarge = (props) => (
</svg>
);
const ThLargeIcon = (props) => <Icon component={ThLarge} {...props} />;
const ThLargeIcon = props => <Icon component={ThLarge} {...props} />;
const MinPanel = (props) => {
const MinPanel = props => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('panel-min');
const getCategories = () => {
let { data } = props;
// eslint-disable-next-line no-prototype-builtins
data = data.filter((item) => item.hasOwnProperty('extData'));
data = data.filter(item => item.hasOwnProperty('extData'));
return data;
};
......@@ -49,7 +49,7 @@ const MinPanel = (props) => {
// eslint-disable-next-line no-underscore-dangle
let _clickEvents = null;
const handleKeyDown = (event) => {
const handleKeyDown = event => {
if (event.keyCode === KeyCode.ESC) {
const { onClose } = props;
event.stopPropagation();
......@@ -63,7 +63,7 @@ const MinPanel = (props) => {
domRef.current.focus();
}
};
const handleDocumentClick = (e) => {
const handleDocumentClick = e => {
if (props.visible) {
const node = domRef && domRef.current;
if (
......@@ -93,7 +93,7 @@ const MinPanel = (props) => {
props.onSelect && props.onSelect(item);
};
const handleCategories = (index) => {
const handleCategories = index => {
setCurrentMenu(props.data[index]);
// eslint-disable-next-line no-unused-expressions
props.onChange && props.onChange(index);
......@@ -105,12 +105,12 @@ const MinPanel = (props) => {
addDocumentEvents();
return () => removeDocumentEvents();
}, [props.visible]);
}, [addDocumentEvents, props.visible, removeDocumentEvents]);
return (
<div
className={panelCls}
tabIndex="-1"
onKeyDown={(event) => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
onKeyDown={event => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
ref={domRef}
>
<div className={`${prefixCls}-mainPane-main`}>
......
......@@ -12,7 +12,7 @@ import styles from './index.less';
import Menu from './Menu';
// eslint-disable-next-line import/extensions
const ThLarge = (props) => (
const ThLarge = props => (
<svg viewBox="0 0 1024 1024" version="1.1" width="14" height="14">
<path
d="M592 64h384c26.51 0 48 21.49 48 48v320c0 26.51-21.49 48-48 48H592c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48z m-160 0H48C21.49 64 0 85.49 0 112v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM0 592v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H48c-26.51 0-48 21.49-48 48z m592 368h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H592c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48z"
......@@ -21,9 +21,9 @@ const ThLarge = (props) => (
</svg>
);
const ThLargeIcon = (props) => <Icon component={ThLarge} {...props} />;
const ThLargeIcon = props => <Icon component={ThLarge} {...props} />;
const Panel = (props) => {
const Panel = props => {
const panelCls = classNames(styles.mainPane, props.visible ? styles.visible : styles.hidden);
const domRef = useRef();
// eslint-disable-next-line no-debugger;
......@@ -35,7 +35,7 @@ const Panel = (props) => {
// eslint-disable-next-line no-underscore-dangle
let _clickEvents = null;
const handleKeyDown = (event) => {
const handleKeyDown = event => {
if (event.keyCode === KeyCode.ESC) {
const { onClose } = props;
event.stopPropagation();
......@@ -49,7 +49,7 @@ const Panel = (props) => {
domRef.current.focus();
}
};
const handleDocumentClick = (e) => {
const handleDocumentClick = e => {
if (props.visible) {
const node = domRef && domRef.current;
if (
......@@ -77,11 +77,11 @@ const Panel = (props) => {
const getCategories = () => {
let { data } = props;
// eslint-disable-next-line no-prototype-builtins
data = data.filter((item) => item.hasOwnProperty('extData'));
data = data.filter(item => item.hasOwnProperty('extData'));
return data;
};
const handleCategories = (index) => {
const handleCategories = index => {
setCurrentMenu(props.data[index]);
// eslint-disable-next-line no-unused-expressions
props.onChange && props.onChange(index);
......@@ -98,12 +98,12 @@ const Panel = (props) => {
addDocumentEvents();
return () => removeDocumentEvents();
}, [props.visible]);
}, [addDocumentEvents, props.visible, removeDocumentEvents]);
return (
<div
className={panelCls}
tabIndex="-1"
onKeyDown={(event) => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
onKeyDown={event => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
ref={domRef}
>
<div className={styles.header}>
......@@ -122,11 +122,7 @@ const Panel = (props) => {
</div>
<div className={styles.main}>
<div className={styles['main-left']}>
<Categories
data={getCategories()}
onChange={handleCategories}
currentMenuIndex={props.currentMenuIndex}
/>
<Categories data={getCategories()} onChange={handleCategories} currentMenuIndex={props.currentMenuIndex} />
</div>
<div className={styles['main-menus']}>
<Spin spinning={!currentMenu}>
......
......@@ -9,10 +9,10 @@ import { connect } from 'react-redux';
import { useHistory } from '@wisdom-utils/runtime';
import KeepAlive from 'react-activation';
import AMapLoader from '@amap/amap-jsapi-loader';
import BasicLayout from './AppLayout/layouts/BasicLayout';
import RightContent from '@/components/GlobalHeader/ExtendRightContent';
import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
import { actionCreators } from '@/containers/App/store';
import BasicLayout from './AppLayout/layouts/BasicLayout';
import { WEB_GIS_TYPE } from '../constants';
import SecurityLayout from './SecurityLayout';
import Site from './Site';
......@@ -47,7 +47,6 @@ const optionsWith = [{ label: '按站点', value: 'site' }, { label: '按城市'
const HOT = ['HOT', '县', '市', 'New'];
const StationsItem = (item, action, onChangeVisible) => {
const changeGroup = (event, data) => {
debugger;
action.changeGroup && action.changeGroup(event, data, onChangeVisible);
};
return (
......@@ -215,18 +214,16 @@ const Layout = props => {
setCityData(res);
});
}
}, [props.global]);
}, [cityData, history, props, props.global, siteAction]);
const handlerPageChange = () => {
const params = getParamsV1(props.location.pathname);
if (params.hasOwnProperty('mapType') && params.mapType === WEB_GIS_TYPE.AMAP) {
AMapLoader.reset();
setMapMode(WEB_GIS_TYPE.AMAP);
} else {
if (!/civweb4/.test(location.pathname)) {
AMapLoader.reset();
setMapMode(WEB_GIS_TYPE.ARCGIS);
}
} else if (!/civweb4/.test(location.pathname)) {
AMapLoader.reset();
setMapMode(WEB_GIS_TYPE.ARCGIS);
}
};
......@@ -305,7 +302,7 @@ const Layout = props => {
<BasicLayout
route={props.route}
title={''}
title=""
logo={require('@/assets/basic/HN-logo.png')}
config={props.global}
currentMenuIndex={props.currentMenuIndex}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment