index.tsx 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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 { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
  14. type runtimeNavType = {
  15. normalRun: any;
  16. overtimeWork: number;
  17. overtimeBook: number;
  18. };
  19. const Runtime: React.FC = () => {
  20. // const { maptemp6 } = equipImageMap;
  21. const [searchText, setSearchText] = useState<{ text: any }>();
  22. const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
  23. const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  24. const [mapCombineList, setMapCombineList] = useState<any[]>([]);
  25. const [selFloorId, setSelFloorId] = useState<string>();
  26. const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
  27. const [spaceTimeList, setSpaceTimeList] = useState<any[]>([]);
  28. //楼层切换的回调
  29. const changeFloorId = (data: string) => {
  30. debugger;
  31. setSelFloorId(data);
  32. };
  33. const checkRecord = () => {
  34. history.push('/runtime/recordList');
  35. console.log('showR');
  36. };
  37. //时间切换的回调
  38. const changeTime = (time) => {
  39. debugger;
  40. var timeStr = time.format('YYYYMMDD');
  41. setSelTime(timeStr);
  42. };
  43. //获取地图 mapList
  44. useEffect(() => {
  45. if (selFloorId) {
  46. getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
  47. (res) => {
  48. debugger;
  49. var data: API.MapInfo[] = (res.data || {}).spaceList || [];
  50. setMapList(data);
  51. },
  52. );
  53. }
  54. }, [selFloorId]);
  55. //获取时间列表 spaceTimeList
  56. useEffect(() => {
  57. if (selFloorId && selTime) {
  58. //debugger;
  59. queryDeviceTimeManage({
  60. //floorId: selFloorId,
  61. floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
  62. //date: selTime,
  63. date: 20220212,
  64. }).then(function (res) {
  65. debugger;
  66. var resdata = res || {};
  67. setRuntimeNav({
  68. normalRun: resdata.workTimeNum,
  69. overtimeWork: resdata.overTimeNum,
  70. overtimeBook: resdata.meetTimeNum,
  71. });
  72. var resList = res.content || [];
  73. resList.forEach((ritem) => {
  74. ritem.runTimeStatus = 'normalRun';
  75. var timeList = [];
  76. if (ritem.hasOwnProperty('workTimeStartTime')) {
  77. var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
  78. timeList.push(timeStrArr);
  79. }
  80. if (ritem.hasOwnProperty('meetTime')) {
  81. ritem.runTimeStatus = 'overtimeBook';
  82. ritem.meetTime.forEach((meetitem) => {
  83. var timeStrArr = [meetitem.meetTimeStartTime, meetitem.meetTimeEndTime];
  84. timeList.push(timeStrArr);
  85. });
  86. }
  87. if (ritem.hasOwnProperty('overTimeStartTime')) {
  88. var timeStrArr = [ritem.overTimeStartTime, ritem.overTimeEndTime];
  89. timeList.push(timeStrArr);
  90. ritem.runTimeStatus = 'overtimeWork';
  91. }
  92. ritem.showTimeList = timeList;
  93. ritem.showTimeStr =
  94. timeList.length > 0 ? timeList[0][0] + '-' + timeList[timeList.length - 1][1] : '';
  95. });
  96. setSpaceTimeList(resList);
  97. });
  98. }
  99. }, [selFloorId, selTime]);
  100. useEffect(() => {
  101. //mapList,spaceTimeList 这两个数据的结合
  102. debugger;
  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) => {
  191. return (
  192. <div>
  193. {timeItem[0]}-{timeItem[1]}
  194. </div>
  195. );
  196. })}
  197. trigger="hover"
  198. style={{ color: 'none' }}
  199. >
  200. <span>{item.showTimeStr}</span>
  201. </Popover>
  202. )}
  203. {item.showTimeList && item.showTimeList.length == 1 && (
  204. <span>{item.showTimeStr}</span>
  205. )}
  206. </div>
  207. <div className={mapstyles.content}>
  208. <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
  209. <div className={mapstyles.name}>{item.localName}</div>
  210. </div>
  211. </div>
  212. );
  213. }}
  214. ></Map>
  215. </>
  216. );
  217. };
  218. export default Runtime;