sagacloud-manager-control/src/pages/Environment/index.tsx

import React, { useState, useEffect } from 'react';
import { FormattedMessage } from 'umi';
import PageHeader from '@/components/PageHeader';
import Map from '@/components/map';
import SearchInput from '@/components/SearchInput';
import TopNavigator from './components/topNavigator';
import ChartModal from './components/chartModal';

import { equipImageMap } from '@/config/image.js';
import { Input } from 'antd';
import Icon from '@/tenants-ui/Icon';

import styles from './index.less';
import mapstyles from '@/assets/css/map.less';

export type navigatorItem = {
  name: string;
  id: string;
  src: any;
  unit?: string;
  num?: number;
  color: string;
  colorStr: string;
  opacity?: number;
  indicator?: number[];
  [key: string]: any;
};
const Environment: React.FC = () => {
  const { envir_temperature, envir_wet, envir_co2, envir_pm25, envir_jiaquan } = equipImageMap;

  const [searchText, setSearchText] = useState<string>();

  const [showChart, setShowChart] = useState(false);
  const [navigatorList] = useState<navigatorItem[]>([
    {
      name: '温度',
      id: 'Tdb',
      src: envir_temperature,
      unit: '℃',
      num: 24.3,
      color: '#E5574F',
      colorStr: '229,87,79,',
      opacity: 0.2,
      indicator: [18, 21, 24, 27, 30],
    },
    {
      name: '湿度',
      id: 'RH',
      src: envir_wet,
      unit: '%',
      num: 70,
      color: '#9FB7CD',
      colorStr: '159,183,205,',
      opacity: 0.2,
      indicator: [25, 35, 45, 55, 65],
    },
    {
      name: 'CO₂',
      id: 'CO2',
      src: envir_co2,
      unit: 'ppm',
      num: 600,
      color: '#00DC23',
      colorStr: '0,220,35,',
      opacity: 0.2,
      indicator: [500, 700, 1000, 2000, 3000],
    },
    {
      name: 'PM2.5',
      id: 'PM2d5',
      src: envir_pm25,
      unit: 'ug/m³',
      num: 33,
      color: '#E89E32',
      colorStr: '232,158,50,',
      opacity: 0.2,
      indicator: [15, 25, 35, 75, 90],
    },
    {
      name: '甲醛',
      id: 'HCHO',
      src: envir_jiaquan,
      unit: 'mg/m³',
      num: 50,
      color: '#140050',
      colorStr: '20,0,80,',
      opacity: 0.25,
      indicator: [0.02, 0.05, 0.1, 0.15], //指标梯度
    },
  ]);
  const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
  const navigatorChange = (item: navigatorItem) => {
    if (item.id == 'Tdb') {
    }
    setSelNav(item);
  };
  // const specialRoomClick = () => {
  //   console.log('showChart');
  //   setShowChart(true);
  // };

  //根据指标的值  得到不同的透明度等级 第一级0.2 第二级0.4 依次往后
  const getColorOpacity = (value: number): number => {
    var indicator: number[] = selNav.indicator || []; //指标梯度
    var number = indicator.length;
    var res = 1;
    for (var i = 0; i < number; i++) {
      if (value >= indicator[i] && value < indicator[i + 1]) {
        res = i + 1;
        break;
      }
    }
    return res;
  };

  return (
    <>
      <PageHeader
        title={<FormattedMessage id="menu.environment" />}
        action={
          <SearchInput
            onSearch={(s) => {
              setSearchText(s);
            }}
          />

          //   <Input.Search
          //     size="large"
          //     allowClear
          //     style={{ width: '230px' }}
          //     placeholder={'搜索空间'}
          //     onSearch={(s) => {
          //       setSearchText(s);
          //     }}
          //   />
        }
      />
      <TopNavigator
        navigatorList={navigatorList}
        type={'enviroment'}
        navigatorChange={navigatorChange}
      ></TopNavigator>
      <div className={styles.maptop}>
        <div className={styles.right}>
          {(selNav.indicator || []).map((item, index) => {
            return (
              <div className={styles.indicatorBox} key={index + 'indicator'}>
                <div className={styles.text}>{item}</div>
                <div
                  className={styles.color}
                  style={{
                    backgroundColor:
                      'rgba(' + selNav.colorStr + (selNav.opacity as number) * (index + 1) + ')',
                  }}
                ></div>
              </div>
            );
          })}
        </div>
      </div>

      <Map
        type={'enviroment'}
        searchText={searchText}
        render={(item: API.MapInfo, index: number) => {
          return (
            <div
              key={index + 'house'}
              className={mapstyles.house}
              style={{
                left: item.left,
                top: item.top,
                width: item.width,
                height: item.height,
                backgroundColor:
                  'rgba(' +
                  selNav.colorStr +
                  (selNav.opacity as number) * getColorOpacity(item[selNav.id]) +
                  ')',
              }}
            >
              <div className={mapstyles.content}>
                <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
                <div className={mapstyles.name}>{item.localName}</div>
              </div>
            </div>
          );
        }}
      ></Map>
      {/* {mapList.map(function (item, index) {
              return (
                <div
                  key={index + 'house'}
                  className={mapstyles.house}
                  style={{
                    left: item.left,
                    top: item.top,
                    width: item.width,
                    height: item.height,
                    backgroundColor:
                      'rgba(' +
                      selNav.colorStr +
                      (selNav.opacity as number) * getColorOpacity(item.value) +
                      ')',
                  }}
                >
                  <div className={mapstyles.content}>
                    <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
                    <div className={mapstyles.name}>{item.name}</div>
                  </div>
                </div>
              );
            })} */}

      {showChart && (
        <ChartModal
          onClose={() => {
            setShowChart(false);
          }}
        ></ChartModal>
      )}
    </>
  );
};

export default Environment;