index.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import React, { useState, useEffect, useCallback } from 'react';
  2. import PageHeader from '@/components/PageHeader';
  3. import Map from '@/components/map';
  4. import TopNavigator from '../Environment/components/topNavigator';
  5. import RunNavRight from './components/topNavRight';
  6. import { FormattedMessage, history } from 'umi';
  7. import { Input } 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 { equipImageMap } from '@/config/image.js';
  12. //import { getMapList } from '@/services/ant-design-pro/environment';
  13. type runtimeNavType = {
  14. normalRun: number;
  15. overtimeWork: number;
  16. overtimeBook: number;
  17. };
  18. const Runtime: React.FC = () => {
  19. // const { maptemp6 } = equipImageMap;
  20. const [searchText, setSearchText] = useState<string>();
  21. const [runtimeNav] = useState<runtimeNavType>({
  22. normalRun: 22,
  23. overtimeWork: 22,
  24. overtimeBook: 22,
  25. });
  26. //const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  27. const checkRecord = () => {
  28. history.push('/runtime/recordList');
  29. console.log('showR');
  30. };
  31. // useEffect(() => {
  32. // getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
  33. // var data: API.MapInfo[] = res.data || [];
  34. // data.forEach((item, index) => {});
  35. // setMapList(data);
  36. // });
  37. // }, []);
  38. return (
  39. <>
  40. <PageHeader
  41. title={<FormattedMessage id="menu.runtime" />}
  42. action={
  43. <div className={styles.headerRight}>
  44. {/* <SearchInput
  45. placeholder="搜索空间"
  46. onSearch={(s) => {
  47. setSearchText(s || undefined);
  48. }}
  49. onCancel={() => {
  50. setSearchText();
  51. }}
  52. /> */}
  53. <Input.Search
  54. size="large"
  55. allowClear
  56. style={{ width: '230px' }}
  57. placeholder={'搜索空间'}
  58. onSearch={(s) => {
  59. setSearchText(s || undefined);
  60. }}
  61. />
  62. <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
  63. <Icon className="" style={{ marginRight: 6 }} type="document" />
  64. <span>查看加班记录</span>
  65. </div>
  66. </div>
  67. }
  68. />
  69. <TopNavigator
  70. type={'runtime'}
  71. action={<RunNavRight runtimeNav={runtimeNav}></RunNavRight>}
  72. ></TopNavigator>
  73. <div className={styles.maptop}>
  74. <div className={styles.right}></div>
  75. </div>
  76. {/* <div className={styles.map}>
  77. <div className={styles.specialRoom}></div>
  78. <img src={mapImg}></img>
  79. </div> */}
  80. {/* <div
  81. className={mapstyles.house}
  82. style={{
  83. width: 180,
  84. height: 100,
  85. }}
  86. >
  87. <div className={mapstyles.allTime}>08:00-23:00</div>
  88. <div className={mapstyles.content}>
  89. <Icon className="" type="office" style={{ fontSize: 20 }}></Icon>
  90. <div className={mapstyles.name}>Jozy Zone</div>
  91. </div>
  92. </div> */}
  93. <Map
  94. type={'runtime'}
  95. render={(item, index) => {
  96. return (
  97. <div
  98. key={index + 'house'}
  99. className={mapstyles.house}
  100. style={{
  101. left: item.left,
  102. top: item.top,
  103. width: item.width,
  104. height: item.height,
  105. backgroundColor:
  106. item.runTimeStatus == 'normalRun'
  107. ? 'rgba(196, 196, 196, 0.2)'
  108. : item.runTimeStatus == 'overtimeWork'
  109. ? 'rgba(94, 139, 207, 0.2)'
  110. : 'rgba(0, 220, 35, 0.2)',
  111. }}
  112. >
  113. <div className={mapstyles.allTime}>
  114. {(item.timeList || []).map(function (titem: string, tindex: number) {
  115. return <span key={tindex + 'time'}>{titem},</span>;
  116. })}
  117. </div>
  118. <div className={mapstyles.content}>
  119. <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
  120. <div className={mapstyles.name}>{item.localName}</div>
  121. </div>
  122. </div>
  123. );
  124. }}
  125. ></Map>
  126. </>
  127. );
  128. };
  129. export default Runtime;