Skip to content

C
CivWeb
Commit 4ea1b232 authored by 邓晓峰's avatar 邓晓峰
Browse files
Options

feat: 重构BasicLayout

parent 001cce6a
Pipeline #47375 skipped with stages
        Hide whitespace changes
        Inline Side-by-side
        Showing with 96 additions and 1511 deletions
        config/proxy.js
        View file @ 4ea1b232
        /* eslint-disable */
        // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
        // const proxyURL = 'https://work.panda-water.cn';
        const proxyURL = 'http://192.168.12.47:8082';
        // const proxyURL = 'https://panda-water.cn';
        // const proxyURL = 'http://192.168.12.47:8082';
        const proxyURL = 'https://panda-water.cn';
        module.exports = {
        ......
        package.json
        View file @ 4ea1b232
        ......@@ -110,9 +110,9 @@
        "@wisdom-map/Map": "^1.0.12-17",
        "@wisdom-map/arcgismap": "^1.0.79-17",
        "@wisdom-map/util": "^1.0.27-0",
        "@wisdom-utils/components": "0.0.57",
        "@wisdom-utils/components": "0.0.98",
        "@wisdom-utils/runtime": "0.0.15",
        "@wisdom-utils/utils": "0.0.96",
        "@wisdom-utils/utils": "0.1.36",
        "animate.css": "^4.1.1",
        "antd": "^4.17.4",
        "compression": "1.7.4",
        ......
        src/layouts/BasicLayout.js deleted 100644 → 0
        View file @ 001cce6a
        import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
        import { Anchor, Button, Popover, Radio, Result, Spin } from 'antd';
        import { store } from '@wisdom-utils/utils';
        import classNames from 'classnames';
        import Cookies from 'js-cookie';
        import { dom } from '@wisdom-utils/utils/lib/helpers';
        import { connect } from 'react-redux';
        import { useMountedState } from 'react-use';
        import { LeftOutlined, LoadingOutlined, MenuFoldOutlined } from '@ant-design/icons';
        import ProLayout, { getPageTitle } from '@ant-design/pro-layout';
        import { getMatchMenu } from '@umijs/route-utils';
        import { useHistory } from '@wisdom-utils/runtime';
        import { Panel } from '@wisdom-utils/components';
        import { findPathByLeafId } from '@wisdom-utils/components/lib/AppLayout/helpers';
        import RightContent from '@/components/GlobalHeader/RightContent';
        import { actionCreators } from '@/containers/App/store';
        import Authorized from '@/utils/Authorized';
        import { getBaseName } from '@/utils/utils';
        import pkg from '../../package.json';
        import SecurityLayout from './SecurityLayout';
        import Site from './Site';
        import styles from './UserLayout.less';
        const { layout: defaultSetting } = require('../../config/config');
        // import Login from '../pages/user/login/login';
        const antIcon = <LoadingOutlined style={{ fontSize: 12 }} spin />;
        // const { TabPane } = Tabs;
        // const baseURI = isProd
        // ? window.location.origin
        // : `http://${window.location.hostname}:3020`;
        const optionsWith = [{ label: '按站点', value: 'site' }, { label: '按城市', value: 'city' }];
        const noMatch = (
        <Result
        status={403}
        title="403"
        subTitle="Sorry, you are not authorized to access this page."
        extra={<Button type="primary">Go Login</Button>}
        />
        );
        const renderIcon = (icon, size, alias) => (
        <img src={icon} style={{ width: `${size}px`, height: `${size}px`, opacity: '0.8' }} alt="" />
        );
        const menuExtraRender = currentRoutes => {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const [toggleSystem, setToggleSystem] = useState(false);
        return {
        render: ({ collapsed }) => {
        if (currentRoutes) {
        const iconURL = currentRoutes && currentRoutes.extData && currentRoutes.extData.icon;
        return (
        <>
        <Spin spinning={currentRoutes.extData && !currentRoutes.extData.icon}>
        {iconURL && (
        <a style={{ display: 'flex', alignItems: 'center' }} onClick={() => setToggleSystem(!toggleSystem)}>
        <img src={iconURL} style={{ width: '20px', height: '20px' }} alt="" />
        <span
        style={{
        margin: '0 2px 0 7px',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        color: 'rgba(255, 255, 255, 0.65)',
        fontSize: '14px',
        }}
        >
        {currentRoutes && currentRoutes.name}
        </span>
        <MenuFoldOutlined style={{ color: '#888', marginLeft: '10px' }} />
        </a>
        )}
        </Spin>
        </>
        );
        }
        return null;
        },
        toggleSystem,
        onClose: () => setToggleSystem(!toggleSystem),
        };
        };
        const HOT = ['HOT', '县', '市', 'New'];
        const StationsItem = (item, action) => {
        const changeGroup = (event, data) => {
        action.changeGroup && action.changeGroup(event, data);
        };
        return (
        <li key={item.groupID} style={{ marginRight: `${item.style.marginRight}px` }}>
        <a
        className={classNames(styles.city_select, styles.showTip)}
        title={item.city}
        index={item.promoteIndex}
        style={{ fontSize: '13px' }}
        onClick={event => changeGroup(event, item)}
        >
        {item.groupName}
        {item.promoteTip && HOT.includes(item.promoteTip) && <div title={`${item.promoteTip}`}>{item.promoteTip}</div>}
        </a>
        </li>
        );
        };
        const Stations = props => {
        const data = props.data.stations;
        const [targetOffset, setTargetOffset] = useState(undefined);
        const cityPane = useRef(null);
        const cityContent = useRef(null);
        const [defaultTab, setDefaultTab] = useState('site');
        useEffect(() => {
        setTargetOffset(cityPane.current.clientHeight / 2);
        }, []);
        const handleClick = (event, link) => {
        event.preventDefault();
        };
        const handleTabChange = event => {
        setDefaultTab(event.target.value);
        };
        return (
        <>
        <div className={styles.focusStations}>
        <ul>{Array.isArray(data) ? data.map(item => StationsItem(item, props.action)) : null}</ul>
        </div>
        <Radio.Group
        options={optionsWith}
        optionType="button"
        buttonStyle="solid"
        size="small"
        value={defaultTab}
        onChange={handleTabChange}
        style={{ marginTop: '6px' }}
        />
        <div style={{ maxWidth: '520px', position: 'relative' }}>
        {defaultTab === 'site' ? (
        <div className={classNames(styles.city_pane, styles.station_container)} ref={cityPane}>
        <Anchor
        affix={false}
        onClick={handleClick}
        targetOffset={targetOffset}
        getContainer={() => cityContent.current}
        >
        <ul className={styles.py}>{props.data && props.data.siteCityList && props.data.siteCityList.letters}</ul>
        <div className={styles.cityContent} style={{ height: '335px' }} ref={cityContent}>
        {props.data && props.data.siteCityList && props.data.siteCityList.content}
        </div>
        </Anchor>
        </div>
        ) : (
        <div className="city_pane city_container">{props.data.citySelector}</div>
        )}
        <Spin spinning={props.loading} tip="加载中" />
        </div>
        </>
        );
        };
        const renderTitle = ({ title, action, data, loading, setLoading, collapsed, fixedHeader, config }) => {
        // eslint-disable-next-line react-hooks/rules-of-hooks,no-debugger
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const [visible, setVisible] = useState(false);
        const header = document.querySelector('.ant-pro-fixed-header');
        let marginLeft = '148px';
        const DEFAULT_MIXIN_WIDTH = 48;
        if (header && fixedHeader) {
        const documentWidth = document.body.clientWidth;
        if (documentWidth === header.offsetWidth && !collapsed) {
        marginLeft = '148px';
        } else {
        /* eslint-disable */
        const deltWidth = document.body.clientWidth - header.offsetWidth;
        marginLeft = collapsed
        ? '0px'
        : deltWidth === DEFAULT_MIXIN_WIDTH
        ? `100px`
        : `${deltWidth}px`;
        }
        }
        let loaded = !!(
        (data && !data.stations) ||
        (Array.isArray(data.weathers) && data.weathers.length === 0)
        );
        if (config && config.userInfo && config.userInfo.site === '') {
        loaded = false;
        }
        return (
        <>
        <span className={styles['header-title']} style={{ marginLeft }}>
        {title}
        </span>
        <Spin
        indicator={antIcon}
        spinning={loaded}
        size="small"
        style={{ marginLeft: '10px' }}
        tip="加载中"
        wrapperClassName={styles.spinLoadding}
        >
        <div className={styles.cityContent}>
        <Popover
        placement="bottomLeft"
        trigger="click"
        content={
        <Stations
        data={data}
        action={action}
        loading={loading}
        setLoading={setLoading}
        />
        }
        arrowPointAtCenter
        overlayClassName={styles.stationsWrapper}
        onVisibleChange={visible => setVisible(visible)}
        >
        {Array.isArray(data.stations) && data.stations.length > 0 ? (
        <span className={styles.siteName}>
        <img src="https://panda-water.cn/web4/assets/images/depart.svg" />
        <span>{data.currentStationName}</span>
        <img
        src="https://panda-water.cn/web4/assets/images/下.svg"
        style={{
        transform: !visible ? `rotate(0deg)` : `rotate(180deg)`,
        }}
        />
        </span>
        ) : null}
        </Popover>
        {data.weathers && Object.keys(data.weathers).length > 0 ? (
        <span
        className={styles.weatcher}
        style={{
        borderLeft:
        data.stations.length === 0 ? '0px' : '1px solid #aaaaaa',
        }}
        >
        <img src={data.weathers && data.weathers.icon} />
        <span>{data.weathers && data.weathers.text}</span>
        </span>
        ) : null}
        </div>
        </Spin>
        </>
        );
        };
        const BasicLayout = props => {
        /* eslint-disable no-unused-vars */
        const {
        children,
        settings,
        location = {
        pathname: '/',
        },
        } = props;
        const basename = getBaseName();
        const history = useHistory();
        const [currentRoutes, setCurrentRoutes] = useState([]);
        const [collapse, setCollapse] = useState(false);
        const [loading, setLoading] = useState(true);
        const [cityData, setCityData] = useState({});
        const [pageLoading, setPageLoading] = useState(true);
        const [siteLoading, setSiteLoading] = useState(false);
        const [complexCollapsed, setComplexCollapsed] = useState(false);
        const [tabRoutesList, setTabRoutesList] = useState(
        JSON.parse(sessionStorage.getItem('tabNav')),
        ); // 多标签导航
        const [tabActiveKey, setTabActiveKey] = useState(
        sessionStorage.getItem('tabActiveKey'),
        ); // 多标签导航选中项
        const isMounted = useMountedState();
        const [siteAction, setSiteAction] = useState(
        () => new Site(props, setSiteLoading),
        );
        // useEffect(() => {
        // setCurrentRoutes(props.route.routes[props.currentMenuIndex]);
        // }, [props.route, props.currentMenuIndex]);
        useEffect(() => {
        props.updatePathname(props.location.pathname);
        }, []);
        const extraRender = menuExtraRender(currentRoutes);
        let clearTime = null;
        //
        // useEffect(() => {
        // setTimeout(() => {
        // if (isMounted) setPageLoading(!pageLoading);
        // }, 2000);
        // }, []);
        useEffect(() => {
        const config = findPathByLeafId(
        `${props.location.pathname}`,
        [currentRoutes],
        '',
        'path',
        true,
        );
        config && config.parent && props.updateOpenKeys([config.parent.path]);
        if (config && config.level <= 3) {
        props.updatePathname(config.key);
        props.updateSelectedKeys(config.key);
        } else if (config) {
        const { name, path, parent } = config;
        // setPathname(parent.key);
        props.updatePathname(parent.key);
        props.updateSelectedKeys(parent.path);
        props.updateComplexPathName(path);
        const findDeepLevelConfig = findPathByLeafId(
        parent.path,
        currentRoutes.routes,
        '',
        'path',
        );
        props.updateComplexConfig(findDeepLevelConfig);
        setCollapse(true);
        history.push(config.path);
        }
        // handleTabList(props.location.pathname);
        }, [props.location.pathname, currentRoutes]);
        // 监听路由变化，处理标签数据
        const handleTabList = pathname => {
        const { flatMenu } = props;
        let curConfigArr =
        flatMenu.length > 0 &&
        flatMenu.filter(item => item.name && item.path == pathname);
        if (curConfigArr.length > 0) {
        let config = curConfigArr[0];
        let key = null;
        let curTabRoutesList = JSON.parse(sessionStorage.getItem('tabNav'));
        if (config.level <= 3) {
        key = pathname;
        const curSelectTab = curTabRoutesList.filter(child => child.key == key);
        if (curSelectTab.length > 0) {
        setTabActiveKey(key);
        } else {
        curTabRoutesList.push({
        title: config.name,
        key: key,
        path: pathname,
        });
        }
        } else {
        const routes = config.parent.routes || [];
        if (routes.length > 0) {
        key = routes[0].path;
        const curSelectTab = curTabRoutesList.filter(
        child => child.key == key,
        );
        if (curSelectTab.length > 0) {
        setTabActiveKey(key);
        } else {
        curTabRoutesList.push({
        title: config.parent.name,
        key: key,
        path: routes[0].path,
        });
        }
        }
        }
        setTabActiveKey(key);
        setTabRoutesList(curTabRoutesList);
        sessionStorage.setItem('tabNav', JSON.stringify(curTabRoutesList));
        sessionStorage.setItem('tabActiveKey', key);
        }
        };
        //
        useEffect(() => {
        setLoading(true);
        clearTime = setTimeout(() => {
        if (props.currentMenuIndex !== -1) {
        setCurrentRoutes(props.route.routes[props.currentMenuIndex]);
        setLoading(false);
        }
        }, 400);
        return () => clearTimeout && clearTimeout(clearTime);
        }, [props.currentMenuIndex]);
        useEffect(() => {
        siteAction.setGlobalConfig(props.global);
        if (!Cookies.get('token')) {
        let client = props.global.get('client');
        client = _.isNull(client) || _.isUndefined(client) || client === 'undefined' ? client: 'city';
        history.replace(`/user/login?client=${client}`);
        props.logout();
        return;
        }
        if (
        props.global &&
        props.global.userInfo &&
        props.global.userInfo.token !== null &&
        props.global.userInfo.loginName &&
        Object.keys(cityData).length === 0
        ) {
        siteAction.getCityStationsForUser().then(res => {
        setCityData(res);
        });
        }
        }, [props.global]);
        useEffect(() => {
        window.share.event.on('updateSite', res => setCityData(res));
        return () => {
        window.share.event.removeAllListeners('updateSite');
        // sessionStorage.removeItem('tabNav')
        // sessionStorage.removeItem('tabActiveKey')
        };
        }, []);
        useMemo(() => {
        window.share.event.on('listenerRemoveTab', () => {
        props.updateSelectedKeys(
        `/civweb4/?client=${props.global.get('client')}`,
        );
        props.updatePathname(`/civweb4/?client=${props.global.get('client')}`);
        history.push(`/civweb4/?client=${props.global.get('client')}`);
        });
        window.share.event.removeAllListeners('listenerRemoveSigleTab');
        }, [props.pathname]);
        useMemo(() => {
        window.share.event.on('listenerRemoveSigleTab', url => {
        const config = findPathByLeafId(
        `${props.location.pathname}`,
        [currentRoutes],
        '',
        'path',
        );
        if (config) {
        props.updatePathname(config.key);
        props.updateSelectedKeys(config.key);
        }
        });
        window.share.event.removeAllListeners('listenerRemoveSigleTab');
        }, []);
        const updateSettings = config => {
        props.updageSetting && props.updageSetting(config);
        };
        const menuDataRef = useRef([]);
        const authorized = useMemo(() => {
        const isHash = window.location.hash !== '';
        const path = isHash
        ? `${props.location.pathname}${window.location.hash}`
        : `${props.location.pathname}`;
        return (
        getMatchMenu(path || '/', menuDataRef.current).pop() || {
        path,
        }
        );
        }, [location.pathname]);
        const handleSelectedKey = item => {
        const config = findPathByLeafId(
        item.path,
        currentRoutes.routes,
        '',
        'path',
        );
        props.updateComplexConfig({});
        props.updateComplexPathName(null);
        if (config && config.routes && config.routes.length > 0) {
        props.updateComplexConfig(config);
        props.updateComplexPathName(config.routes[0].path);
        history.push(config.routes[0].path);
        } else {
        history.push(config.path);
        }
        props.updatePathname(item.key);
        props.updateSelectedKeys(`${item.key}`);
        extraRender.onClose();
        // history.push(item.key);
        };
        const handleLogo = event => {
        props.global.get('userInfo.site') ? history.push(`/industry`) : void 0;
        //history.push('/openapi');
        };
        const transformPopupMenu = useCallback(key => {
        if (key.length > 0) {
        const element = document.getElementById(`${key[0]}$Menu`);
        const len = element ? element.children.length : 0;
        if (len >= 6) {
        dom.addClass(element, styles['popup-menu-flex']);
        }
        }
        });
        const others = {
        history: props.history,
        location: props.location,
        match: props.match,
        route: props.menu,
        fixedHeader: true,
        fixSiderbar: true,
        collapsed: collapse,
        };
        const headerContentRender = renderTitle({
        title: props.global.get('title'),
        action: siteAction,
        data: cityData,
        loading: siteLoading,
        setLoading: setSiteLoading,
        collapsed: collapse,
        fixedHeader: others.fixedHeader,
        config: props.global,
        });
        const menuComplexDataRender = menuList =>
        menuList.map(item => {
        const localItem = {
        ...item,
        hideInMenu: false,
        routes: item.routes ? item.routes : undefined,
        };
        return localItem;
        });
        const transformComplexSideWidth = () => {
        const complexConfig = props.complexConfig.toJS
        ? props.complexConfig.toJS()
        : props.complexConfig;
        let defaultWidth = '150px';
        if (complexCollapsed) {
        return defaultWidth;
        }
        if (
        complexConfig &&
        Object.keys(complexConfig).length > 0 &&
        complexConfig.level === 3
        ) {
        defaultWidth = 150;
        } else {
        defaultWidth = 0;
        }
        return defaultWidth;
        };
        const forceRender = () => {
        if (
        props.location.pathname ===
        decodeURIComponent(
        window.location.pathname.split(pkg.name.toLocaleLowerCase())[1],
        )
        ) {
        window.share.event.emit('trigger:route');
        }
        };
        const title = getPageTitle({
        title: (props.global && props.global.get('title')) || defaultSetting.title,
        });
        const logo = props.global.get('bannerLogo')
        ? window.globalConfig.transformDevAssetsBaseURL(
        props.global.get('bannerLogo'),
        )
        : defaultSetting.logo;
        const renderComplexLayout = children => {
        const complexConfig = props.complexConfig.toJS
        ? props.complexConfig.toJS()
        : props.complexConfig;
        return (
        <ProLayout
        logo={false}
        title={title}
        headerRender={false}
        rightContentRender={() => null}
        collapsedButtonRender={false}
        menuHeaderRender={false}
        footerRender={false}
        className={styles.complexLayout}
        location={{
        pathname: props.complexPathName,
        }}
        route={{
        routes:
        (complexConfig &&
        complexConfig.routes &&
        menuComplexDataRender(complexConfig.routes)) ||
        [],
        }}
        menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
        return defaultDom;
        }
        return <a to={menuItemProps.path}>{defaultDom}</a>;
        }}
        menuProps={{
        onClick: ({ item, key, keyPath, domEvent }) => {
        const config = findPathByLeafId(key, [complexConfig], '', 'key');
        props.updateComplexPathName(key);
        history.push(config.path);
        },
        }}
        collapsed={complexCollapsed}
        navTheme="light"
        siderWidth={transformComplexSideWidth()}
        style={{
        height: '400px',
        }}
        >
        {complexConfig && Object.keys(complexConfig).length > 0 ? (
        <span
        className={styles.complexCollapse}
        onClick={() => setComplexCollapsed(!complexCollapsed)}
        >
        <span className={styles.collapsed}>
        <LeftOutlined />
        </span>
        </span>
        ) : null}
        {children}
        </ProLayout>
        );
        };
        const handlerCollapsed = collapse => {
        setCollapse(collapse);
        if (!collapse) {
        const config = findPathByLeafId(
        `${props.location.pathname}`,
        [currentRoutes],
        '',
        'path',
        );
        // fix: 目前菜单限制只支持两级
        if (config && config.parent) {
        const parentConfig = findPathByLeafId(
        config.parent.path,
        [currentRoutes],
        '',
        'path',
        );
        parentConfig &&
        parentConfig.parent &&
        props.updateOpenKeys([parentConfig.parent.path, config.parent.path]);
        }
        }
        };
        const handleUpdateCurrentIndex = index => {
        props.updateCurrentIndex(index);
        window.share && window.share.event.emit('trigger:updateMenuIndex', index);
        store.set('updateMenuIndex', index);
        }
        const renderSiderMenu = (menuItemProps, defaultDom) => {
        if (collapse) {
        return (
        <>
        {renderIcon(
        menuItemProps.extData && menuItemProps.extData.icon,
        17,
        menuItemProps.alias,
        )}
        <div
        className={`ant-pro-menu-item ${styles.shortName} ${
        styles.minixName
        }`}
        >
        {menuItemProps &&
        menuItemProps.extData &&
        menuItemProps.extData.shortName
        ? menuItemProps.extData.shortName
        : menuItemProps.name}
        </div>
        <div
        className={`ant-pro-menu-item ${styles.shortName} ${
        styles.popverName
        }`}
        >
        {menuItemProps.name}
        </div>
        </>
        );
        }
        return (
        <>
        {renderIcon(
        menuItemProps.extData && menuItemProps.extData.icon,
        17,
        menuItemProps.alias,
        )}
        {defaultDom}
        </>
        );
        };
        // 多标签模式下，切换标签
        const handleTabRouteChange = activeKey => {
        let tabRoutesList = JSON.parse(sessionStorage.getItem('tabNav'));
        const currentItem = tabRoutesList.filter(item => item.key === activeKey)[0];
        if (currentItem.title == '首页') {
        let path = tabRoutesList[0].path;
        props.updateSelectedKeys(path);
        props.updatePathname(path);
        history.replace(path);
        } else {
        const config = findPathByLeafId(
        currentItem.path,
        [currentRoutes],
        '',
        'path',
        );
        props.updateComplexConfig({});
        props.updateComplexPathName(null);
        if (config && config.routes && config.routes.length > 0) {
        props.updateComplexConfig(config);
        props.updateComplexPathName(config.routes[0].path);
        history.push(config.routes[0].path);
        }
        history.push(currentItem.path);
        props.updatePathname(activeKey);
        props.updateSelectedKeys(`${activeKey}`);
        }
        setTabActiveKey(activeKey);
        sessionStorage.setItem('tabActiveKey', activeKey);
        forceRender();
        };
        // 多标签模式下，删除标签
        const handleTabRouteEdit = (targetKey, action) => {
        if (action === 'remove') {
        let newActiveKey = tabActiveKey;
        let lastIndex;
        let tabRoutesList = JSON.parse(sessionStorage.getItem('tabNav'));
        tabRoutesList.forEach((item, i) => {
        if (item.key === targetKey) {
        lastIndex = i - 1;
        }
        });
        const newTabList = tabRoutesList.filter(item => item.key !== targetKey);
        if (newTabList.length && newActiveKey === targetKey) {
        newActiveKey =
        lastIndex >= 0 ? newTabList[lastIndex].key : newTabList[0].key;
        }
        const config = findPathByLeafId(
        newActiveKey,
        [currentRoutes],
        '',
        'path',
        );
        props.updateComplexConfig({});
        props.updateComplexPathName(null);
        if (config && config.routes && config.routes.length > 0) {
        props.updateComplexConfig(config);
        props.updateComplexPathName(config.routes[0].path);
        history.push(config.routes[0].path);
        }
        if (lastIndex >= 0) {
        history.push(newTabList[lastIndex].path);
        } else {
        history.replace(`/${props.global.homepage}`);
        }
        props.updateSelectedKeys(newActiveKey);
        props.updatePathname(newActiveKey);
        setTabActiveKey(newActiveKey);
        setTabRoutesList(newTabList);
        sessionStorage.setItem('tabNav', JSON.stringify(newTabList));
        sessionStorage.setItem('tabActiveKey', newActiveKey);
        }
        };
        const { openKeys } = props;
        // const filterMenu = props.menu.filter(item => !item.hideInMenu)
        return (
        <SecurityLayout loading updateCurrentIndex={handleUpdateCurrentIndex}>
        {collapse && props.global.loginTemplate === '新春 - 智联.html' ? null : (
        props.global.loginTemplate === '新春 - 智联.html' && (
        <img
        src="https://panda-water.com/web4/assets/images/%E6%96%B0%E5%B9%B4%E4%B8%BB%E9%A2%98/%E6%96%B0%E5%B9%B4%E5%BF%AB%E4%B9%90.gif"
        style={{
        width: '120px',
        position: 'absolute',
        bottom: '40px',
        zIndex: 500,
        left: '12px',
        }}
        />)
        )}
        <ProLayout
        logo={logo}
        siderWidth={defaultSetting.siderWidth}
        onPageChange={() => {}}
        className={
        props.global.loginTemplate === '新春 - 智联.html'
        ? styles.fixSliderHeight
        : ''
        }
        title={title}
        onCollapse={collapse => handlerCollapsed(collapse)}
        onMenuHeaderClick={event => handleLogo(event)}
        menuExtraRender={props.menu.length > 0 ? extraRender.render : null}
        rightContentRender={() => <RightContent {...props} />}
        headerContentRender={() => headerContentRender}
        menu={{
        loading,
        }}
        location={props.pathname}
        locale
        menuDataRender={() => currentRoutes && currentRoutes.routes}
        menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
        return (
        <a
        className={styles.menuItemLink}
        href={menuItemProps.href}
        target={menuItemProps.target}
        title={menuItemProps.name}
        >
        {!collapse && (
        <>
        {renderIcon(
        menuItemProps.extData && menuItemProps.extData.icon,
        17,
        menuItemProps.alias,
        )}
        <span className="ant-pro-menu-item">
        <span className="ant-pro-menu-item-title">
        {menuItemProps.name}
        </span>
        </span>
        </>
        )}
        {collapse && renderSiderMenu(menuItemProps, defaultDom)}
        </a>
        );
        }
        return (
        <a
        to={menuItemProps.path}
        className={styles.menuItemLink}
        onClick={() => history.push(menuItemProps.path)}
        title={menuItemProps.name}
        >
        {renderSiderMenu(menuItemProps, defaultDom)}
        </a>
        );
        }}
        subMenuItemRender={(menuItemProps, defaultDom) => (
        <>
        {renderIcon(
        menuItemProps.extData && menuItemProps.extData.icon,
        17,
        menuItemProps.alias,
        )}
        {collapse ? (
        <div className={`ant-pro-menu-item ${styles.shortName}`}>
        {menuItemProps.extData && menuItemProps.extData.shortName
        ? menuItemProps.extData.shortName
        : menuItemProps.name}
        </div>
        ) : (
        defaultDom
        )}
        </>
        )}
        openKeys={[...openKeys]}
        menuProps={{
        forceSubMenuRender: true,
        onClick: ({ item, key, keyPath, domEvent }) => {
        // console.log(item)
        domEvent.persist();
        const keyField = key.indexOf('/') > -1 ? 'path' : 'key';
        const config = findPathByLeafId(
        key,
        currentRoutes.routes,
        '',
        keyField,
        );
        // console.log(key, keyPath)
        props.updateComplexConfig({});
        props.updateComplexPathName(null);
        if (config && config.routes && config.routes.length > 0) {
        props.updateComplexConfig(config);
        props.updateComplexPathName(config.routes[0].path);
        history.push(config.routes[0].path);
        }
        props.updateSelectedKeys(item.props.eventKey);
        props.updatePathname(item.props.eventKey);
        forceRender();
        // window.history.pushState(null, '', '/civbase' + config.path);
        },
        onOpenChange: openKeys => {
        props.updateOpenKeys(openKeys.length > 0 ? openKeys : []);
        if (collapse) {
        transformPopupMenu(openKeys);
        }
        },
        selectedKeys: [props.selectedKeys],
        popupClassName: styles.menuPopover,
        }}
        postMenuData={menuData => {
        menuDataRef.current = menuData || [];
        return menuData || [];
        }}
        settings={defaultSetting}
        {...others}
        >
        <Spin
        spinning={props.microMounted}
        size="large"
        wrapperClassName={styles.loadding}
        >
        <Panel
        visible={extraRender.toggleSystem}
        keyboard
        onClose={extraRender.onClose}
        data={props.route.routes || []}
        currentMenuIndex={props.currentMenuIndex}
        onChange={index => handleUpdateCurrentIndex(index)}
        onSelect={item => handleSelectedKey(item)}
        />
        {/*{*/}
        {/* props.global.mdi == 'MDI' && */}
        {/* <Tabs*/}
        {/* className={styles.menuTabs}*/}
        {/* type="editable-card"*/}
        {/* hideAdd={true}*/}
        {/* onChange={activeKey => handleTabRouteChange(activeKey)}*/}
        {/* activeKey={tabActiveKey}*/}
        {/* onEdit={(targetKey, action) => handleTabRouteEdit(targetKey, action)}*/}
        {/* >*/}
        {/* {tabRoutesList && tabRoutesList.length > 0 && tabRoutesList.map(item => (*/}
        {/* <TabPane tab={item.title} key={item.key} closable={item.title != '首页'}/>*/}
        {/* ))}*/}
        {/* </Tabs>*/}
        {/*}*/}
        {/*noMatch={noMatch*/}
        {renderComplexLayout(
        <>
        <Authorized authority={authorized} {...props}>
        {children}
        </Authorized>
        <div id="micro-container" className="subapp-container" />
        </>,
        )}
        </Spin>
        {/*<SettingDrawer*/}
        {/* settings={props.settings}*/}
        {/* onSettingChange={config => updateSettings(config)}*/}
        {/* publicPath={`/${basename}/theme`}*/}
        {/*/>*/}
        </ProLayout>
        {/*<div id="micro-container" className="subapp-container" />*/}
        </SecurityLayout>
        );
        };
        const mapStateToProps = state => ({
        global: state.getIn(['global', 'globalConfig']),
        settings: state.getIn(['global', 'defaultSetting']),
        collapsed: state.getIn(['global', 'collapsed']),
        menu: state.getIn(['global', 'menu']),
        currentMenuIndex: state.getIn(['global', 'currentMenuIndex']),
        flatMenu: state.getIn(['global', 'flatMenu']),
        authValidate: state.getIn(['global', 'authValidate']),
        pathname: state.getIn(['global', 'pathname']),
        selectedKeys: state.getIn(['global', 'selectedKeys']),
        openKeys: state.getIn(['global', 'openKeys']),
        complexConfig: state.getIn(['global', 'complexConfig']),
        complexPathName: state.getIn(['global', 'complexPathName']),
        microMounted: state.getIn(['global', 'microMounted']),
        });
        const mapDispatchToProps = dispatch => ({
        updageSetting(setting) {
        dispatch(actionCreators.updageSetting(setting));
        },
        updateConfig(config) {
        dispatch(actionCreators.getConfig(config));
        },
        updateCurrentIndex(index) {
        dispatch(actionCreators.updateCurrentIndex(index));
        },
        updateCollapsed(collapsed) {
        dispatch(actionCreators.updateCollapsed(collapsed));
        },
        updateAuthValidate(auth) {
        dispatch(actionCreators.updateAuthValidate(auth));
        },
        updatePathname(pathname) {
        dispatch(actionCreators.updatePathname(pathname));
        },
        updateSelectedKeys(keys) {
        dispatch(actionCreators.updateSelectedKeys(keys));
        },
        updateOpenKeys(keys) {
        dispatch(actionCreators.updateOpenKeys(keys));
        },
        updateComplexConfig(config) {
        dispatch(actionCreators.updateComplexConfig(config));
        },
        updateComplexPathName(pathname) {
        dispatch(actionCreators.updateComplexPathName(pathname));
        },
        logout() {
        dispatch(actionCreators.logout());
        }
        });
        export default connect(
        mapStateToProps,
        mapDispatchToProps,
        )(BasicLayout);
        src/layouts/BasicLayout.less
        View file @ 4ea1b232
        ......@@ -251,48 +251,7 @@
        :global(.@{ant-prefix}-spin-container::after) {
        background: transparent!important;
        }
        .toggleSite {
        height: 30px;
        background: rgba(0,0,0,.12);
        border-radius: 15px;
        min-width: 10px;
        border: 1px solid rgba(238,238,238,.25);
        margin-left: 18px;
        display: flex;
        align-items: center;
        padding-left: 16px;
        padding-right: 16px;
        cursor: pointer;
        // transition: all .3s;
        .site {
        width: 16px;
        height: 16px;
        }
        .name {
        font-family: 'MicrosoftYaHei';
        font-weight: bold;
        color: #FFFFFF;
        font-size: 14px;
        margin-left: 9px;
        }
        .arrow {
        margin-left: 9px;
        }
        }
        .weatcher {
        margin-left: 25px;
        .icon {
        width: 22px;
        height: 22px;
        margin-right: 12px;
        margin-left: 25px;
        }
        .text {
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 2px;
        }
        }
        }
        }
        .menu-item-children {
        ......@@ -465,6 +424,48 @@
        }
        .toggleSite {
        height: 30px;
        background: rgba(0,0,0,.12);
        border-radius: 15px;
        min-width: 10px;
        border: 1px solid rgba(238,238,238,.25);
        margin-left: 18px;
        display: flex;
        align-items: center;
        padding-left: 16px;
        padding-right: 16px;
        cursor: pointer;
        // transition: all .3s;
        .site {
        width: 16px;
        height: 16px;
        }
        .name {
        font-family: 'MicrosoftYaHei';
        font-weight: bold;
        color: #FFFFFF;
        font-size: 14px;
        margin-left: 9px;
        }
        .arrow {
        margin-left: 9px;
        }
        }
        .weatcher {
        margin-left: 25px;
        .icon {
        width: 22px;
        height: 22px;
        margin-right: 12px;
        margin-left: 25px;
        }
        .text {
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 2px;
        }
        }
        & :global {
        .@{ant-prefix}-dropdown-menu-item {
        ......
        src/layouts/BasicLayout1.js
        View file @ 4ea1b232
        import React, { useEffect, useRef, useState, useContext, Suspense } from 'react';
        import { Anchor, Popover, Radio, Spin, Tabs, Divider, Dropdown, Menu, Tooltip, ConfigProvider, Skeleton } from 'antd';
        import { PageContainer } from '@ant-design/pro-layout';
        import Icon, {
        // LeftOutlined,
        LoadingOutlined,
        // MenuFoldOutlined,
        DownOutlined,
        } from '@ant-design/icons';
        import { Anchor, Popover, Radio, Spin, Tabs, ConfigProvider } from 'antd';
        import Icon, { LoadingOutlined } from '@ant-design/icons';
        import { store, helpers } from '@wisdom-utils/utils';
        import classNames from 'classnames';
        import { ReactSVG } from 'react-svg';
        import Cookies from 'js-cookie';
        import { connect } from 'react-redux';
        import { useHistory } from '@wisdom-utils/runtime';
        import KeepAlive from 'react-activation';
        import AMapLoader from '@amap/amap-jsapi-loader';
        import { MinPanel } from '@wisdom-utils/components';
        import { findPathByLeafId } from '@wisdom-utils/components/lib/AppLayout/helpers';
        import { BasicLayout } from '@wisdom-utils/components/lib/AppLayout'
        import RightContent from '@/components/GlobalHeader/ExtendRightContent';
        import { actionCreators } from '@/containers/App/store';
        // import { ArcgisMap, AMap, CesiumMap } from '../pages/map';
        import { WEB_GIS_TYPE } from '../constants';
        // import { getBaseName } from '@/utils/utils';
        // eslint-disable-next-line import/no-duplicates
        import SecurityLayout from './SecurityLayout';
        import Site from './Site';
        ......@@ -32,17 +22,11 @@ const ArcgisMap = React.lazy(() => import('../pages/map/arcgis'));
        const AMap = React.lazy(() => import('../pages/map/amap'));
        const CesiumMap = React.lazy(() => import('../pages/map/cesiumMap'));
        // eslint-disable-next-line import/extensions
        const { TabPane } = Tabs;
        const { renderRoutes, params } = helpers;
        const { params } = helpers;
        const { getParamsV1 } = params;
        const { layout: defaultSetting } = require('../../config/config');
        // import Login from '../pages/user/login/login';
        const antIcon = <LoadingOutlined style={{ fontSize: 12 }} spin />;
        /* eslint-disable */
        const homeSvg = () => (
        <svg t="1631169883330" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2203" width="20" height="20"><path d="M423.9 487H221.7c-34.9 0-63.4-28.4-63.4-63.4V221.5c0-34.9 28.4-63.4 63.4-63.4h202.2c34.9 0 63.4 28.4 63.4 63.4v202.2c-0.1 34.9-28.5 63.3-63.4 63.3z m0-63.3v31.7-31.7zM221.7 221.5v202.2h202.1l0.1-202.2H221.7zM803.1 487H600.9c-34.9 0-63.4-28.4-63.4-63.4V221.5c0-34.9 28.4-63.4 63.4-63.4h202.2c34.9 0 63.4 28.4 63.4 63.4v202.2c0 34.9-28.5 63.3-63.4 63.3z m0-63.3v31.7-31.7zM600.9 221.5v202.2H803l0.1-202.2H600.9zM423.9 865.8H221.7c-34.9 0-63.4-28.4-63.4-63.4V600.3c0-34.9 28.4-63.4 63.4-63.4h202.2c34.9 0 63.4 28.4 63.4 63.4v202.2c-0.1 34.9-28.5 63.3-63.4 63.3z m0-63.3v31.7-31.7zM221.7 600.3v202.2h202.1l0.1-202.2H221.7zM736.9 865.8h-69.7c-71.4 0-129.6-58.1-129.6-129.6v-69.7c0-71.4 58.1-129.6 129.6-129.6h69.7c71.4 0 129.6 58.1 129.6 129.6v69.7c0 71.5-58.2 129.6-129.6 129.6z m-69.8-265.5c-36.5 0-66.2 29.7-66.2 66.2v69.7c0 36.5 29.7 66.2 66.2 66.2h69.7c36.5 0 66.2-29.7 66.2-66.2v-69.7c0-36.5-29.7-66.2-66.2-66.2h-69.7z" fill="#B2B2B2" p-id="2204"></path></svg>
        );
        const arrowSvg = ({ fillColor = '#fff' }) => (
        <svg t="1543324489942"
        className="icon" viewBox="0 0 1024 1024"
        ......@@ -52,7 +36,6 @@ const arrowSvg = ({ fillColor = '#fff' }) => (
        <path d="M511.700683 639.423111 191.917496 319.596945 319.830771 319.596945 511.700683 511.715521 703.570595 319.596945 831.48387 319.596945Z" p-id="8626" fill={fillColor}></path>
        </svg>
        );
        const HomeIcon = props => <Icon component={homeSvg} {...props} style={{ marginRight: '0px' }} />;
        const ArrowIcon = props => <Icon component={arrowSvg} {...props} />;
        // const { TabPane } = Tabs;
        ......@@ -227,137 +210,30 @@ const renderSite = ({ data, config, loading, setLoading, action }) => {
        )
        }
        const BasicLayout = props => {
        const Layout = props => {
        /* eslint-disable no-unused-vars */
        const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
        const prefixCls = props.prefixCls || getPrefixCls('');
        // const [currentRoutes, setCurrentRoutes] = useState([]);
        const [collapse, setCollapse] = useState(false);
        const [toggleSystem, setToggleSystem] = useState(false);
        const [cityData, setCityData] = useState({});
        const [siteLoading, setSiteLoading] = useState(false);
        const [selectIndex, setSelectIndex] = useState(-1);
        const [childrenRoutes, setChildrenRoutes] = useState([]);
        const [selectedKeys, setSelectedKeys] = useState([]);
        const [tabActiveKey, setTabActiveKey] = useState("1");
        const [currentRoutes, setCurrentRoutes] = useState({});
        const [mapMode, setMapMode] = useState('ArcgisMap')
        const [mapMode, setMapMode] = useState(WEB_GIS_TYPE.ARCGIS)
        const [siteAction, setSiteAction] = useState(
        () => new Site(props, setSiteLoading),
        );
        // const basename = getBaseName();
        const history = useHistory();
        // 处理隐藏菜单
        useEffect(() => {
        const newRoutes = props.route.routes.filter(item => !item.hideInMenu)[props.currentMenuIndex] || {};
        if(!_.isEqual(currentRoutes, newRoutes)) {
        setCurrentRoutes({})
        setSelectIndex(-1);
        setCurrentRoutes(newRoutes)
        }
        }, [props.route, props.currentMenuIndex]);
        // let currentRoutes = props.route.routes.filter(item => !item.hideInMenu)[props.currentMenuIndex];
        //props.currentMenuIndex
        useEffect(() => {
        const initSelectRoute = findPathByLeafId(
        `${props.location && props.location.pathname || ''}`,
        [currentRoutes],
        '',
        'path',
        true,
        );
        const parentMenuName = initSelectRoute && initSelectRoute.parent && initSelectRoute.parent.label;
        if (parentMenuName) {
        let currentChildrenRoute = currentRoutes.routes.find(item => item.name === parentMenuName);
        if (!currentChildrenRoute) {
        currentChildrenRoute = initSelectRoute
        }
        let childrenName = currentChildrenRoute ? currentChildrenRoute.name : parentMenuName;
        if (currentChildrenRoute.routes) {
        const active = currentChildrenRoute.routes.find(item => item.name === initSelectRoute.name);
        setTabActiveKey(active.path)
        } else {
        setTabActiveKey(currentChildrenRoute.path);
        }
        const initSelectIndex = currentRoutes.routes.findIndex(item => item.name === childrenName);
        setSelectIndex(initSelectIndex);
        currentChildrenRoute && currentChildrenRoute.routes ? setChildrenRoutes(currentChildrenRoute.routes) : setChildrenRoutes([currentChildrenRoute]);
        } else {
        let url = props.global && props.global.hasOwnProperty('get') && props.global.get('homepage')
        ? _.isString(props.global.get('homepage'))
        ? props.global.get('homepage')
        : props.global.get('homepage.url')
        : '';
        if(!props.global.get('home')) {
        url = `civweb4/${url.replace(/^\//, '').replace(/^civweb4\//, '')}`
        }
        setSelectIndex(-1)
        setChildrenRoutes([
        {
        icon: <HomeIcon/>,
        path: `/${url}`,
        name: '首页'
        }
        ])
        }
        }, []);
        // useEffect(() => {
        // console.log(props.route.routes);
        // }, [props.currentMenuIndex]);
        useEffect(() => {
        window.share && window.share.event && window.share.event.on('event:updateCurrentChildrenRoutes', ({currentPath, currentRoute, selectedIndex}) => {
        currentRoute && currentRoute.parent && currentRoute.parent.routes ? setChildrenRoutes(currentRoute.parent.routes): !currentRoute.parent ? setChildrenRoutes(currentRoute.routes): setChildrenRoutes([currentRoute]);
        setSelectIndex(selectedIndex);
        setTabActiveKey(currentPath)
        });
        window.share && window.share.event && window.share.event.on('event:favitor', ({icon, name, path}) => {
        setChildrenRoutes([
        {
        icon: <HomeIcon/>,
        path: path,
        name: name
        }
        ])
        });
        window.share && window.share.event && window.share.event.on('goHome', url => {
        setChildrenRoutes([
        {
        icon: <HomeIcon/>,
        path: url,
        name: '首页'
        }
        ]);
        setTabActiveKey(url);
        window.history.pushState(null, '', `/civbase${url}`);
        });
        return () => {
        window.share && window.share.event && window.share.event.removeAllListeners('event:updateCurrentChildrenRoutes');
        window.share && window.share.event && window.share.event.removeAllListeners('event:favitor');
        window.share && window.share.event && window.share.event.removeAllListeners('goHome');
        };
        }, []);
        useEffect(() => {
        siteAction.setGlobalConfig(props.global);
        if (!Cookies.get('token')) {
        let client = props.global && props.global.hasOwnProperty('client') ? props.global.get('client') : null;
        client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client: 'city';
        client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
        let generateType = props.global && props.global.hasOwnProperty('get') ? props.global.get('generateType') : null;
        generateType = !_.isNull(generateType) && !_.isUndefined(generateType) && generateType !== 'undefined' ? `&generateType=${generateType}` : '';
        history.replace(`/user/login?client=${client}${generateType}`);
        ......@@ -376,146 +252,39 @@ const BasicLayout = props => {
        });
        }
        }, [props.global]);
        // setChildrenRoutes(currentChildrenRoute)
        /**
        * web4全屏退出，切换三级菜单高亮
        */
        useEffect(() => {
        if (selectIndex !== -1 && currentRoutes && currentRoutes.hasOwnProperty('routes')) {
        const routes = currentRoutes.routes[selectIndex];
        if (routes) {
        if (routes && routes.routes) {
        const route = routes && routes.routes && routes.routes.find(item => item.path === decodeURI(window.location.pathname.replace('/civbase', '')));
        if (route && route.path) {
        setTabActiveKey(route.path)
        }
        }
        }
        }
        const handlerPageChange = () => {
        const params = getParamsV1(props.location.pathname);
        if(params.hasOwnProperty('mapType') && params.mapType === WEB_GIS_TYPE.AMAP) {
        if (params.hasOwnProperty('mapType') && params.mapType === WEB_GIS_TYPE.AMAP) {
        AMapLoader.reset();
        setMapMode(WEB_GIS_TYPE.AMAP)
        } else {
        AMapLoader.reset();
        setMapMode(WEB_GIS_TYPE.ARCGIS)
        if (!/civweb4/.test(location.pathname)) {
        AMapLoader.reset();
        setMapMode(WEB_GIS_TYPE.ARCGIS)
        }
        }
        console.log(props.location, currentRoutes)
        }, [props.location]);
        }
        useEffect(() => {
        window.share.event.on('updateSite', res => setCityData(res));
        // store.on('event:map', arg => {
        // AMapLoader.reset();
        // setMapMode(arg)
        // });
        return () => {
        window.share.event.removeAllListeners('updateSite');
        // store.off('event:map', () => {})
        };
        }, []);
        const handlerSecond = (item, index) => {
        let current = void 0;
        if (item && item.routes) {
        setChildrenRoutes(item.routes);
        current = item.routes[0];
        } else {
        setChildrenRoutes([item]);
        current = item;
        }
        setTabActiveKey(current.path);
        setSelectIndex(index);
        if (current.routes) {
        setSelectedKeys([current.routes[0].href]);
        window.history.pushState(null, '', `/civbase${current.routes[0].path}`);
        } else {
        if (/iframe/.test(current.path)) {
        history.push({
        pathname: '/iframe',
        state: current.params
        })
        } else {
        window.history.pushState(null, '', `/civbase${current.path}`);
        }
        }
        }
        const handleToggleSystem = () => {
        setToggleSystem(!toggleSystem);
        }
        const handleUpdateCurrentIndex = index => {
        setSelectIndex(-1)
        props.updateCurrentIndex(index);
        window.share && window.share.event.emit('trigger:updateMenuIndex', index);
        store.set('updateMenuIndex', index);
        }
        const handleSelectMenuItem = (item) => {
        setTabActiveKey(item);
        if (item.indexOf('web_console') === -1) {
        window.history.pushState(null, '', `/civbase${item}`);
        }
        }
        const handlerSelectMenu = ({ item, key, keyPath, domEvent }) => {
        setSelectedKeys([key]);
        window.history.pushState(null, '', `/civbase${key}`);
        }
        const updateSettings = config => {
        props.updageSetting && props.updageSetting(config);
        };
        const renderChildrenMenu = (route) => {
        const routes = (route.routes || []).map(item => {
        item.key = item.href;
        return item;
        });
        const menu = (
        <Menu onClick={handlerSelectMenu} selectedKeys={selectedKeys}>
        {
        (routes || []).map((item, index) => {
        return (
        <>
        <Menu.Item key={item.href}>
        <div>
        <span></span>
        <span>{item.name}</span>
        </div>
        </Menu.Item>
        <Divider style={{ width: '80%', minWidth: '80%', margin: '0 auto' }}></Divider>
        </>
        )
        })
        }
        </Menu>
        )
        return (
        <>
        <Dropdown overlay={menu} overlayClassName={`${prefixCls}-dropdown-custom-menu`}>
        <div >
        {
        /.svg/.test(route.extData.icon) ? <ReactSVG src={route.extData.icon} style={{ width: '18px', height: '18px', position: 'relative', top: '-3px' }} /> : <img src={route.extData.icon} style={{ width: '18px', height: '18px' }} />
        }
        <span style={{ marginLeft: '8px' }}>{route.name} </span>
        <DownOutlined style={{ position: 'relative', right: '-10px' }} />
        </div>
        </Dropdown>
        <Divider type="vertical" />
        </>
        )
        }
        const handlerIndustry = event => {
        props.global.get('userInfo.site') ? history.push(`/industry`) : void 0;
        ......@@ -525,205 +294,41 @@ const BasicLayout = props => {
        setCollapse(!collapse);
        }
        const logo = props.global && _.isFunction(props.global.get) && props.global.get('bannerLogo')? (props.global && _.isFunction(props.global.transformDevAssetsBaseURL) && props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))): defaultSetting.logo;
        const logo = props.global && _.isFunction(props.global.get) && props.global.get('bannerLogo') ? (props.global && _.isFunction(props.global.transformDevAssetsBaseURL) && props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))) : defaultSetting.logo;
        return (
        <SecurityLayout loading>
        {
        props.global.layout !== 'blank' ? (
        <div className={classNames(layoutStyles.basicLayout)}>
        <div className={layoutStyles['layout-has-slider']} style={{ minHeight: '100%' }}>
        <div style={{
        width: collapse ? '48px' : '80px',
        overflow: 'hidden',
        flex: collapse ? '0 0 48px' : '0 0 80px',
        maxWidth: collapse ? '48px' : '80px',
        minWidth: collapse ? '48px' : '80px',
        transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
        }}></div>
        <aside className={classNames(layoutStyles.layoutSlider, layoutStyles.fixed, {
        [layoutStyles.collapsed]: collapse
        })}>
        <div className={layoutStyles['layout-slider-childern']}>
        <div className={layoutStyles.sliderMenu} style={{ flex: '1 1 0%', overflow: 'hidden auto' }}>
        {
        <div style={{padding: currentRoutes && !currentRoutes.routes ? '20px 6px 6px 6px': '0px'}}><Skeleton loading={currentRoutes && !currentRoutes.routes} active title={false} paragraph={{
        rows: 10
        }}/>
        {
        currentRoutes && currentRoutes.routes && currentRoutes.routes.length > 0 && <React.Fragment>
        <ul className={classNames(layoutStyles.menu)} style={{ minHeight: '0px', marginBottom: '0px' }}>
        <li className={classNames(layoutStyles['menu-item'])} onClick={handleToggleSystem}>
        <Tooltip placement="right" title={collapse ? currentRoutes.name : ''}>
        <a>
        {
        (currentRoutes && currentRoutes.extData && currentRoutes.extData.icon) && <img src={currentRoutes.extData.icon} />
        }
        {
        collapse ? null : <span className={classNames(layoutStyles.text, layoutStyles.currentText)}>{currentRoutes && currentRoutes.name}</span>
        }
        </a>
        </Tooltip>
        </li>
        </ul>
        <div className={layoutStyles.splitLine}></div>
        <ul className={classNames(layoutStyles.menu, 'menu-vertical')}>
        {
        currentRoutes && (currentRoutes.routes || []).filter(item => !item.hideInMenu).map((item, index) => {
        return (
        <React.Fragment key={index}>
        <li key={index} className={classNames(layoutStyles['menu-item'], { [layoutStyles['active']]: index === selectIndex })} onClick={() => handlerSecond(item, index)}>
        <Tooltip placement="right" title={collapse ? 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={layoutStyles.icon} /> : item.extData && <img src={item.extData.icon} />
        }
        {
        collapse ? item.extData && <span className={classNames(layoutStyles.text)}>{(item.extData.shortName || item.name).substr(0, 2)}</span> : <span className={classNames(layoutStyles.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>
        }
        </div>
        }
        </div>
        <div className="ant-pro-sider-links" >
        <ul className="ant-menu ant-menu-root ant-menu-inline ant-menu-dark ant-pro-sider-link-menu" role="menu" tabIndex="0" >
        <li className="ant-menu-item ant-menu-item-only-child ant-pro-sider-collapsed-button" role="menuitem" tabIndex="-1" onClick={handlerCollapsed}>
        <span className="ant-menu-title-content">
        <span role="img" aria-label="menu-fold" className="anticon anticon-menu-fold">
        <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" 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>
        </svg>
        </span>
        </span>
        </li>
        </ul>
        <div aria-hidden="true" style={{ display: 'none' }}></div>
        </div>
        </div>
        </aside>
        <div className={layoutStyles.layout} style={{ width: 'calc(100% - 80px)' }}>
        <MinPanel
        visible={toggleSystem}
        keyboard
        onClose={() => setToggleSystem(false)}
        currentMenuIndex={props.currentMenuIndex}
        onChange={index => handleUpdateCurrentIndex(index)}
        data={props.route.routes || []}
        />
        {/* <SettingDrawer
        settings={defaultSetting}
        onSettingChange={config => updateSettings(config)}
        publicPath={`${window.location.origin}/${basename}/theme`}
        /> */}
        <div className={classNames(layoutStyles['basicLayout-content'], {
        [layoutStyles['hook_web4']]: location.pathname.startsWith('/civbase/civweb4')
        })}>
        <div className={layoutStyles[`${props.rootPrefix}-page-container`]} style={{ paddingTop: '0px' }}>
        <div className={layoutStyles[`${props.rootPrefix}-page-container-warp`]}>
        <div className={layoutStyles[`${props.rootPrefix}-page-header`]} style={{ position: 'fixed' }}>
        <img src={require('../assets/basic/图层 998@2x.png')} style={{ width: '100%' }} />
        <div className={layoutStyles.header}>
        <a className={layoutStyles.logo} onClick={handlerIndustry}>
        <img src={`${logo}`} alt="logo" />
        </a>
        <div className={layoutStyles.title}>{props.global.title}</div>
        {
        renderSite({
        data: cityData,
        config: props.global,
        loading: siteLoading,
        setLoading: setSiteLoading,
        action: siteAction,
        })
        }
        <RightContent />
        </div>
        </div>
        </div>
        <div className={layoutStyles['menu-item-children']}>
        <Tabs activeKey={tabActiveKey} defaultActiveKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={(event) => handleSelectMenuItem(event)}>
        {childrenRoutes.map((item, index) => (
        <>
        <TabPane
        className="only-last-children"
        tab={
        <>
        {
        item.routes ? renderChildrenMenu(item) : (
        <>
        {
        item.icon ? item.icon : item.extData && /.svg/.test(item.extData.icon) ? <ReactSVG src={item.extData.icon} style={{ width: '18px', height: '18px' }} /> : item.extData && <img src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
        }
        <span className={layoutStyles['menu-item-name']}>{item.name}</span>
        {
        childrenRoutes.length === 1 ? null : <Divider type="vertical" />
        }
        </>
        )
        }
        </>
        }
        key={item.path}
        >
        </TabPane>
        </>
        ))}
        </Tabs>
        </div>
        <PageContainer style={{paddingTop: '0px', height: '100%'}}>
        {
        renderRoutes('panda-console-base', props.route.routes, props)
        }
        <Suspense fallback={<></>}>
        {
        window.location.pathname.startsWith('/civbase/civ_3d') ? <KeepAlive><CesiumMap /></KeepAlive> : window.location.pathname.startsWith('/civbase/civ_webgis') ? ((mapMode === 'AMap' ? <AMap/>: <ArcgisMap options={{ type: 'ArcgisMap' }}/>)) : null
        }
        </Suspense>
        <div id="micro-container" className="subapp-container">
        {props.children}
        </div>
        {props.children}
        </PageContainer>
        </div>
        </div>
        <BasicLayout
        route={props.route}
        title={props.global.title}
        logo={logo}
        global={props.global}
        collapsed={collapse}
        onCollapse={handlerCollapsed}
        currentMenuIndex={props.currentMenuIndex}
        onHeaderLogo={handlerIndustry}
        onPageChange={handlerPageChange}
        onMenuPanelItemClick={handleUpdateCurrentIndex}
        headerContentRender={() => <RightContent />}
        headerSiteRender={() =>
        renderSite({
        data: cityData,
        config: props.global,
        loading: siteLoading,
        setLoading: setSiteLoading,
        action: siteAction,
        })}>
        <>
        <Suspense fallback={<></>}>
        {
        window.location.pathname.startsWith('/civbase/civ_3d') ? <KeepAlive><CesiumMap /></KeepAlive> : window.location.pathname.startsWith('/civbase/civ_webgis') ? ((mapMode === 'AMap' ? <AMap /> : <ArcgisMap options={{ type: 'ArcgisMap' }} />)) : null
        }
        </Suspense>
        <div id="micro-container" className="subapp-container">
        {props.children}
        </div>
        </div>
        </div>
        ): (
        <PageContainer style={{paddingTop: '0px', height: '100%'}}>
        {
        renderRoutes('panda-console-base', props.route.routes, props)
        }
        <Suspense fallback={<></>}>
        {
        window.location.pathname.startsWith('/civbase/civ_3d') ? <KeepAlive><CesiumMap /></KeepAlive> : window.location.pathname.startsWith('/civbase/civ_webgis') ? ((mapMode === 'AMap' ? <AMap/>: <ArcgisMap options={{ type: 'ArcgisMap' }}/>)) : null
        }
        </Suspense>
        <div id="micro-container" className="subapp-container">
        {/*<CreateBaseMap/>*/}
        {props.children}
        </div>
        </PageContainer>
        )
        }
        </>
        </BasicLayout>
        </SecurityLayout>);
        };
        ......@@ -781,4 +386,4 @@ const mapDispatchToProps = dispatch => ({
        export default connect(
        mapStateToProps,
        mapDispatchToProps,
        )(BasicLayout);
        )(Layout);
        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