index.tsx 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. import React, { useState, useEffect, useCallback } from 'react';
  2. import PageHeader from '@/components/PageHeader';
  3. import Map from '@/components/map';
  4. import TopNavigator from '@/components/topNavigator';
  5. import RunNavRight from './components/topNavRight';
  6. import { FormattedMessage, history, useModel } from 'umi';
  7. import { Spin } from 'antd';
  8. import { Popover } from 'antd';
  9. import styles from './index.less';
  10. import mapstyles from '@/assets/css/map.less';
  11. import Icon from '@/tenants-ui/Icon';
  12. import SearchInput from '@/components/SearchInput';
  13. import moment from 'moment';
  14. import cx from 'classnames';
  15. import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
  16. type runtimeNavType = {
  17. normalRun: any;
  18. overtimeWork: number;
  19. meetingBook: number;
  20. };
  21. const Runtime: React.FC = () => {
  22. // const { maptemp6 } = equipImageMap;
  23. const { getSpaceFunc } = useModel('spaceFunc');
  24. const [loading, setLoading] = useState<boolean>(false);
  25. const [searchText, setSearchText] = useState<{ text: any }>();
  26. const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
  27. const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  28. const [mapCombineList, setMapCombineList] = useState<any[]>([]);
  29. const [selFloorId, setSelFloorId] = useState<string>();
  30. const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
  31. const [spaceTimeList, setSpaceTimeList] = useState<any[]>([]);
  32. //楼层切换的回调
  33. const changeFloorId = (data: string) => {
  34. setSelFloorId(data);
  35. };
  36. const checkRecord = () => {
  37. history.push('/runtime/recordList');
  38. console.log('showR');
  39. };
  40. //时间切换的回调
  41. const changeTime = (time) => {
  42. var timeStr = time.format('YYYYMMDD');
  43. setSelTime(timeStr);
  44. };
  45. //获取地图 mapList
  46. useEffect(() => {
  47. if (selFloorId) {
  48. setLoading(true);
  49. getMapList({
  50. floorId: selFloorId,
  51. //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
  52. projectId: '',
  53. })
  54. .then((res) => {
  55. setLoading(false);
  56. var data: API.MapInfo[] = (res.data || {}).spaceList || [];
  57. setMapList(data);
  58. })
  59. .catch(() => {
  60. setLoading(false);
  61. });
  62. } else {
  63. setMapList([]);
  64. }
  65. }, [selFloorId]);
  66. //获取时间列表 spaceTimeList
  67. useEffect(() => {
  68. if (selFloorId && selTime) {
  69. //setLoading(true);
  70. queryDeviceTimeManage({
  71. floorId: selFloorId,
  72. //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
  73. //date: selTime,
  74. date: 20220212,
  75. })
  76. .then(function (res) {
  77. //setLoading(false);
  78. var resdata = res || {};
  79. setRuntimeNav({
  80. normalRun: resdata.workTimeNum,
  81. overtimeWork: resdata.overTimeNum,
  82. meetingBook: resdata.meetTimeNum,
  83. });
  84. var resList = res.content || [];
  85. resList.forEach((ritem) => {
  86. ritem.runTimeStatus = 'normalRun'; //正常工作
  87. var timeList = [];
  88. if (ritem.hasOwnProperty('workTimeStartTime')) {
  89. var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
  90. timeList.push(timeStrArr);
  91. }
  92. if (ritem.hasOwnProperty('meetTime')) {
  93. ritem.runTimeStatus = 'meetingBook'; //会议预约
  94. ritem.meetTime.forEach((meetitem) => {
  95. var timeStrArr = [meetitem.meetTimeStartTime, meetitem.meetTimeEndTime];
  96. timeList.push(timeStrArr);
  97. });
  98. }
  99. if (ritem.hasOwnProperty('overTimeStartTime')) {
  100. var timeStrArr = [ritem.overTimeStartTime, ritem.overTimeEndTime];
  101. timeList.push(timeStrArr);
  102. ritem.runTimeStatus = 'overtimeWork'; //加班
  103. }
  104. ritem.showTimeList = timeList;
  105. ritem.showTimeStr =
  106. timeList.length > 0 ? timeList[0][0] + '-' + timeList[timeList.length - 1][1] : '';
  107. });
  108. setSpaceTimeList(resList);
  109. })
  110. .catch(() => {
  111. //setLoading(false);
  112. });
  113. }
  114. }, [selFloorId, selTime]);
  115. useEffect(() => {
  116. //mapList,spaceTimeList 这两个数据的结合
  117. console.log('dfsd-------', mapList, spaceTimeList);
  118. // if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
  119. var combineList: any = [];
  120. mapList.map(function (mitem) {
  121. var spaceId = mitem.spaceId;
  122. var filterSpace = spaceTimeList.filter((ele) => {
  123. return ele.id == spaceId;
  124. });
  125. var combine = Object.assign({}, mitem, filterSpace[0]);
  126. combineList.push(combine);
  127. });
  128. setMapCombineList(combineList);
  129. // }
  130. }, [mapList, spaceTimeList]);
  131. return (
  132. <>
  133. <PageHeader
  134. title={<FormattedMessage id="menu.runtime" />}
  135. action={
  136. // <div className={styles.headerRight}>
  137. // <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
  138. // <Icon className="" style={{ marginRight: 6 }} type="document" />
  139. // <span>查看加班记录</span>
  140. // </div>
  141. // </div>
  142. <SearchInput
  143. mapList={mapList}
  144. callbackSearch={(s) => {
  145. // setSelFloorId(s.floorId);
  146. setSearchText({ text: s.localName });
  147. }}
  148. />
  149. }
  150. />
  151. <TopNavigator
  152. type={'runtime'}
  153. action={<RunNavRight runtimeNav={runtimeNav} changeTime={changeTime}></RunNavRight>}
  154. changeFloorId={changeFloorId}
  155. ></TopNavigator>
  156. <div className={styles.maptop}>
  157. <div className={styles.right}></div>
  158. </div>
  159. {/* <div className={styles.map}>
  160. <div className={styles.specialRoom}></div>
  161. <img src={mapImg}></img>
  162. </div> */}
  163. {/* <div
  164. className={mapstyles.house}
  165. style={{
  166. width: 180,
  167. height: 100,
  168. }}
  169. >
  170. <div className={mapstyles.allTime}>08:00-23:00</div>
  171. <div className={mapstyles.content}>
  172. <Icon className="" type="office" style={{ fontSize: 20 }}></Icon>
  173. <div className={mapstyles.name}>Jozy Zone</div>
  174. </div>
  175. </div> */}
  176. <Spin spinning={loading}>
  177. <Map
  178. searchText={searchText}
  179. mapList={mapCombineList}
  180. type={'runtime'}
  181. render={(item, index) => {
  182. return (
  183. <div
  184. key={index + 'house'}
  185. className={mapstyles.house}
  186. style={{
  187. left: item.left,
  188. top: item.top,
  189. width: item.width,
  190. height: item.height,
  191. background: item.roomFuncType
  192. ? item.runTimeStatus == 'meetingBook'
  193. ? 'rgba(0, 220, 35, 0.2)'
  194. : item.runTimeStatus == 'overtimeWork'
  195. ? 'rgba(94, 139, 207, 0.2)'
  196. : 'rgba(196, 196, 196, 0.2)'
  197. : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
  198. }}
  199. >
  200. <div className={mapstyles.allTime}>
  201. {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
  202. return <span key={tindex + 'time'}>{titem},</span>;
  203. })} */}
  204. {item.showTimeList && item.showTimeList.length > 1 && (
  205. <Popover
  206. content={(item.showTimeList || []).map((timeItem, index) => {
  207. return (
  208. <div key={'time' + index}>
  209. {timeItem[0]}-{timeItem[1]}
  210. </div>
  211. );
  212. })}
  213. trigger="hover"
  214. style={{ color: 'none' }}
  215. >
  216. <span
  217. className={cx({
  218. [mapstyles.overworkTime]: item.runTimeStatus == 'overtimeWork',
  219. [mapstyles.meetTime]: item.runTimeStatus == 'meetingBook',
  220. })}
  221. >
  222. {item.showTimeStr}
  223. </span>
  224. </Popover>
  225. )}
  226. {item.showTimeList && item.showTimeList.length == 1 && (
  227. <span>{item.showTimeStr}</span>
  228. )}
  229. </div>
  230. <div className={mapstyles.content}>
  231. <Icon
  232. className=""
  233. type={getSpaceFunc(item.roomFuncType)}
  234. style={{ fontSize: 20 }}
  235. ></Icon>
  236. <div className={mapstyles.name}>{item.localName}</div>
  237. </div>
  238. </div>
  239. );
  240. }}
  241. ></Map>
  242. </Spin>
  243. </>
  244. );
  245. };
  246. export default Runtime;