import services from '@/services';
import { useRequest } from '@umijs/max';
import { Flex } from 'antd';
import { useMemo } from 'react';
import SafetyMap from '../SafetyMap';
import FacilityWarn from './FacilityWarn';
import styles from './index.less';
import IndustryWarn from './IndustryWarn';
import RightLayout from './RightLayout';
import SafetyAccident from './SafetyAccident';
import SafetyTips from './SafetyTips';
import SecurityCqi from './SecurityCqi';
import WarnInfo from './WarnInfo';
const SecurityState = () => {
  const { data: tree } = useRequest(services.CityRiskApi.getTree);
  
  
  return (
    <Flex className={styles.container} justify="space-between">
      {/* 左侧 */}
      <div className={styles.leftWrap}>
        <SecurityCqi />
        <IndustryWarn data={tree} />
        <FacilityWarn data={tree}/>
      </div>
      {/* 地图 */}
      <div className={styles.mapCenter}>
        <SafetyMap />
      </div>
      {/* 右侧布局 */}
      <div className={styles.rightWrap}>
        <RightLayout />
        <div className={styles.rDiv}>
          <WarnInfo />
          <SafetyTips />
          <SafetyAccident />
        </div>
      </div>
    </Flex>
  );
};
export default SecurityState;
