sagacloud
/
sagacloud-manager-control


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							import React, { useState, useEffect } from 'react';
import { useModel, useLocation, history } from 'umi';
import styles from './index.less';
import { MenuFoldOutlined, SmileOutlined } from '@ant-design/icons';
import Icon from '@/tenants-ui/SgIcon';

import { Drawer, notification } from 'antd';
import NavMenu from '@/sagacare_components/navMenu';
import Head from '@/sagacare_components/head';

export default (props) => {
  const { menuVisible, closeMenu, toggleMenu } = useModel('controller');
  const { initialState, refresh } = useModel('@@initialState');
  const location = useLocation();
  const { changeLastBuildId, changeLastFloorId } = useModel('sagacare_buildFloor');
  //todo
  const [notifyList] = useState([
    {
      title: '管理员操作指南',
      id: 'notify1',
      content: '具体介绍管理员权限下的管理功能及相关操作说明。',
      name: '行政端操作指南.pdf',
      url: 'http://10.100.28.79/image-service/common/file_get?systemId=dataPlatform&key=%E8%A1%8C%E6%94%BF%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C20220419.pdf',
      iconName: 'book',
    },
    {
      title: 'sagacare介绍',
      id: 'notify2',
      content: '环境健康主动管理服务',
      name: 'saga销售手册.pdf',
      url: 'http://10.100.28.79/image-service/common/file_get?systemId=dataPlatform&key=sagacare%E4%BB%8B%E7%BB%8D.pdf',
      iconName: 'introduce',
    },
  ]);
  const showMenuClick = () => {
    toggleMenu();
  };

  const openNotification = () => {
    //打开通知框
    notifyList.map((item, index) => {
      notification.open({
        key: item.id,
        message: item.title,
        description: item.content,
        duration: 0,
        className: 'custom-class',
        onClick: () => {
          console.log('Notification Clicked!', item);
          // 下载pdf 需产品给出
          //const downLoadUrl = '';
          const a = document.createElement('a');
          a.href = item.url;
          a.target = '_blank';
          a.download = item.name;
          a.click();
        },
        icon: <Icon type={item.iconName} style={{ fontSize: 32, color: '#108ee9' }}></Icon>,
        style: {
          width: 400,
          borderRadius: 30,
          cursor: 'pointer',
        },
        closeIcon: <></>,
      });
    });
  };
  //关闭提醒框
  const closeNotify = () => {
    //console.log('close-notify');
    notifyList.map((item, index) => {
      notification.close(item.id);
    });
  };

  useEffect(() => {
    if (menuVisible) {
      refresh();
    }
  }, [menuVisible, refresh]);

  useEffect(() => {
    refresh();
  }, [refresh]);

  useEffect(async () => {
    //关闭
    document.querySelector('#root').addEventListener('click', closeNotify, true);
    const { REACT_APP_ENV } = process.env;
    console.log('REACT_APP_ENV', REACT_APP_ENV);

    //读取缓存的 楼层id 建筑id
    var lastBuildId = sessionStorage.getItem('lastBuildId') || '';
    var lastFloorId = sessionStorage.getItem('lastFloorId') || '';
    changeLastBuildId(lastBuildId);
    changeLastFloorId(lastFloorId);

    return () => {
      document.querySelector('#root').removeEventListener('click', closeNotify, true);
    };
  }, []);

  useEffect(() => {
    //console.log('location', location);
  }, [location]);

  return (
    <div className={styles.layout}>
      <div className={styles.header}>
        <div className={styles.title}>
          <span
            className={styles.project}
            onClick={() => {
              history.push('/home');
            }}
          >
            <span className={styles.projectName}>{initialState?.companyConfig?.projectName}</span>
            <span>{initialState?.companyConfig?.companyName}</span>
          </span>
          <Head></Head>
        </div>
        {location.pathname.indexOf('home') == -1 && (
          <div className={styles.right}>
            <div className={styles.picture}>
              <Icon type="person" style={{ fontSize: 28 }}></Icon>
            </div>
            <div
              className={styles.notify}
              onClick={(event) => {
                event.stopPropagation();
                openNotification();
              }}
            >
              <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
            </div>
            <MenuFoldOutlined style={{ fontSize: 24 }} onClick={showMenuClick} />
          </div>
        )}
      </div>

      {props.children}
      <Drawer
        title=""
        placement="right"
        closable={false}
        onClose={closeMenu}
        open={menuVisible}
        drawerStyle={
          {
            //   height: 340,
            //   width: 380,
            //   background: 'transparent',
            //   transform: 'translate(-50px,20px)',
            // top: 100,
            //right: 20,
          }
        }
        maskStyle={{ background: 'transparent' }}
        contentWrapperStyle={{ boxShadow: 'none' }}
        bodyStyle={{ transform: 'translate(-20px,20px)' }}
      >
        <NavMenu></NavMenu>
      </Drawer>
    </div>
  );
};