123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- import React, { useState, useEffect, useCallback } from 'react';
- import PageHeader from '@/components/PageHeader';
- import Map from '@/components/map';
- import TopNavigator from '../Environment/components/topNavigator';
- import RunNavRight from './components/topNavRight';
- import { FormattedMessage, history } from 'umi';
- import { Input } from 'antd';
- import styles from './index.less';
- import mapstyles from '@/assets/css/map.less';
- import Icon from '@/tenants-ui/Icon';
- //import { equipImageMap } from '@/config/image.js';
- //import { getMapList } from '@/services/ant-design-pro/environment';
- type runtimeNavType = {
- normalRun: number;
- overtimeWork: number;
- overtimeBook: number;
- };
- const Runtime: React.FC = () => {
- // const { maptemp6 } = equipImageMap;
- const [searchText, setSearchText] = useState<string>();
- const [runtimeNav] = useState<runtimeNavType>({
- normalRun: 22,
- overtimeWork: 22,
- overtimeBook: 22,
- });
- //const [mapList, setMapList] = useState<API.MapInfo[]>([]);
- const checkRecord = () => {
- history.push('/runtime/recordList');
- console.log('showR');
- };
- // useEffect(() => {
- // getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
- // var data: API.MapInfo[] = res.data || [];
- // data.forEach((item, index) => {});
- // setMapList(data);
- // });
- // }, []);
- return (
- <>
- <PageHeader
- title={<FormattedMessage id="menu.runtime" />}
- action={
- <div className={styles.headerRight}>
- {/* <SearchInput
- placeholder="搜索空间"
- onSearch={(s) => {
- setSearchText(s || undefined);
- }}
- onCancel={() => {
- setSearchText();
- }}
- /> */}
- <Input.Search
- size="large"
- allowClear
- style={{ width: '230px' }}
- placeholder={'搜索空间'}
- onSearch={(s) => {
- setSearchText(s || undefined);
- }}
- />
- <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
- <Icon className="" style={{ marginRight: 6 }} type="document" />
- <span>查看加班记录</span>
- </div>
- </div>
- }
- />
- <TopNavigator
- type={'runtime'}
- action={<RunNavRight runtimeNav={runtimeNav}></RunNavRight>}
- ></TopNavigator>
- <div className={styles.maptop}>
- <div className={styles.right}></div>
- </div>
- {/* <div className={styles.map}>
- <div className={styles.specialRoom}></div>
- <img src={mapImg}></img>
- </div> */}
- {/* <div
- className={mapstyles.house}
- style={{
- width: 180,
- height: 100,
- }}
- >
- <div className={mapstyles.allTime}>08:00-23:00</div>
- <div className={mapstyles.content}>
- <Icon className="" type="office" style={{ fontSize: 20 }}></Icon>
- <div className={mapstyles.name}>Jozy Zone</div>
- </div>
- </div> */}
- <Map
- type={'runtime'}
- render={(item, index) => {
- return (
- <div
- key={index + 'house'}
- className={mapstyles.house}
- style={{
- left: item.left,
- top: item.top,
- width: item.width,
- height: item.height,
- backgroundColor:
- item.runTimeStatus == 'normalRun'
- ? 'rgba(196, 196, 196, 0.2)'
- : item.runTimeStatus == 'overtimeWork'
- ? 'rgba(94, 139, 207, 0.2)'
- : 'rgba(0, 220, 35, 0.2)',
- }}
- >
- <div className={mapstyles.allTime}>
- {(item.timeList || []).map(function (titem: string, tindex: number) {
- return <span key={tindex + 'time'}>{titem},</span>;
- })}
- </div>
- <div className={mapstyles.content}>
- <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
- <div className={mapstyles.name}>{item.localName}</div>
- </div>
- </div>
- );
- }}
- ></Map>
- </>
- );
- };
- export default Runtime;
|