index.tsx 8.0 KB

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