index.jsx 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. import React, { useState, useEffect, useRef } from 'react';
  2. import { useModel, useLocation, useIntl } from 'umi';
  3. import styles from './index.less';
  4. import { MenuFoldOutlined, SmileOutlined } from '@ant-design/icons';
  5. import Icon from '@/tenants-ui/SgIcon';
  6. import { Drawer, notification } from 'antd';
  7. import NavMenu from '@/sagacare_components/navMenu';
  8. export default (props) => {
  9. const { menuVisible, closeMenu, toggleMenu } = useModel('controller');
  10. const { initialState, setInitialState } = useModel('@@initialState');
  11. const { changeLastBuildId, changeLastFloorId } = useModel('sagacare_buildFloor');
  12. const [notifyList] = useState([
  13. {
  14. title: '管理员操作指南',
  15. id: 'notify1',
  16. content: '具体介绍管理员权限下的管理功能及相关操作说明。',
  17. name: '行政端操作指南.pdf',
  18. 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',
  19. iconName: 'book',
  20. },
  21. {
  22. title: 'sagacare介绍',
  23. id: 'notify2',
  24. content: '环境健康主动管理服务',
  25. name: 'saga销售手册.pdf',
  26. url: 'http://10.100.28.79/image-service/common/file_get?systemId=dataPlatform&key=sagacare%E4%BB%8B%E7%BB%8D.pdf',
  27. iconName: 'introduce',
  28. },
  29. ]);
  30. const showMenuClick = () => {
  31. toggleMenu();
  32. };
  33. const openNotification = () => {
  34. //打开通知框
  35. notifyList.map((item, index) => {
  36. notification.open({
  37. key: item.id,
  38. message: item.title,
  39. description: item.content,
  40. duration: 0,
  41. className: 'custom-class',
  42. onClick: () => {
  43. console.log('Notification Clicked!', item);
  44. // 下载pdf 需产品给出
  45. //const downLoadUrl = '';
  46. const a = document.createElement('a');
  47. a.href = item.url;
  48. a.target = '_blank';
  49. a.download = item.name;
  50. a.click();
  51. },
  52. icon: <Icon type={item.iconName} style={{ fontSize: 32, color: '#108ee9' }}></Icon>,
  53. style: {
  54. width: 400,
  55. borderRadius: 30,
  56. cursor: 'pointer',
  57. },
  58. closeIcon: <></>,
  59. });
  60. });
  61. };
  62. //关闭提醒框
  63. const closeNotify = () => {
  64. //console.log('close-notify');
  65. notifyList.map((item, index) => {
  66. notification.close(item.id);
  67. });
  68. };
  69. useEffect(async () => {
  70. // debugger;
  71. // console.log('enviroment-layout', initialState);
  72. // const currentUser = await initialState?.fetchUser?.();
  73. // debugger;
  74. // if (currentUser) {
  75. // setInitialState((s) => {
  76. // return { ...s, currentUser: currentUser };
  77. // });
  78. // }
  79. //debugger;
  80. //关闭
  81. document.querySelector('#root').addEventListener('click', closeNotify, true);
  82. const { REACT_APP_ENV } = process.env;
  83. console.log('REACT_APP_ENV', REACT_APP_ENV);
  84. //读取缓存的 楼层id 建筑id
  85. var lastBuildId = sessionStorage.getItem('lastBuildId') || '';
  86. var lastFloorId = sessionStorage.getItem('lastFloorId') || '';
  87. changeLastBuildId(lastBuildId);
  88. changeLastFloorId(lastFloorId);
  89. //console.log('lastBuildId,lastFloorId', lastBuildId, lastFloorId);
  90. return () => {
  91. console.log('layout-useEffect-off');
  92. document.querySelector('#root').removeEventListener('click', closeNotify, true);
  93. };
  94. }, []);
  95. const location = useLocation();
  96. useEffect(() => {
  97. //debugger;
  98. console.log('location', location);
  99. }, [location]);
  100. let setTimer = useRef();
  101. const logOut = () => {
  102. clearTimeout(setTimer.current);
  103. setTimer.current = null;
  104. setTimer.current = setTimeout(() => {
  105. console.log('----没有点击,退出');
  106. window.parent.postMessage('loginOut', '*');
  107. }, 1000 * 60 * 30);
  108. };
  109. logOut();
  110. useEffect(() => {
  111. clearTimeout(setTimer.current);
  112. setTimer.current = null;
  113. }, []);
  114. return (
  115. <div
  116. className={styles.layout}
  117. onClick={(event) => {
  118. console.log('----已点击等待超时,退出');
  119. logOut();
  120. }}
  121. >
  122. <div className={styles.header}>
  123. <div className={styles.title}>之江项目</div>
  124. <div className={styles.right}>
  125. <div className={styles.picture}>
  126. <Icon type="person" style={{ fontSize: 28 }}></Icon>
  127. </div>
  128. <div
  129. className={styles.notify}
  130. onClick={(event) => {
  131. event.stopPropagation();
  132. openNotification();
  133. }}
  134. >
  135. <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
  136. </div>
  137. <MenuFoldOutlined style={{ fontSize: 24, display: 'none' }} onClick={showMenuClick} />
  138. </div>
  139. </div>
  140. {props.children}
  141. <Drawer
  142. title=""
  143. placement="right"
  144. closable={false}
  145. onClose={closeMenu}
  146. visible={menuVisible}
  147. drawerStyle={
  148. {
  149. // height: 340,
  150. // width: 380,
  151. // background: 'transparent',
  152. // transform: 'translate(-50px,20px)',
  153. // top: 100,
  154. //right: 20,
  155. }
  156. }
  157. maskStyle={{ background: 'transparent' }}
  158. contentWrapperStyle={{ boxShadow: 'none' }}
  159. bodyStyle={{ transform: 'translate(-20px,20px)' }}
  160. >
  161. <NavMenu></NavMenu>
  162. </Drawer>
  163. </div>
  164. );
  165. };