sagacloud-manager-control/src/pages/Environment/components/chartModal/index.jsx

import React, { useState, useEffect, useRef } from 'react';
import { Modal, Form } from 'antd';
import Draggable from 'react-draggable';
import Icon from '@/tenants-ui/SgIcon';
import styles from './index.less';
import cx from 'classnames';
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
import LineChart from './lineChart';

export default ({ onClose, showSpace, selNav }) => {
  const { ruleCo2, ruleHcho, rulePm25 } = equipImageMap;
  const [paramList, setParamList] = useState([
    {
      name: 'CO₂',
      id: 'CO2',
      maxType: 'co2Max',
      pointNum: null,
      level: '不同浓度下的人体感觉',
      srcImg: ruleCo2,
      content:
        'CO₂一种无色无味气体，CO₂的标准为1000ppm，CO₂过高，影响人体呼吸系统，大脑易疲劳，工作效率降低，室内人员增多，新风量不足时，室内CO₂的浓度就会上升，宜开窗通风或增加送风量，来降低CO₂浓度',
    },
    {
      name: 'PM2.5',
      id: 'PM2d5',
      maxType: 'pm25Max',
      pointNum: 1,
      level: '不同PM2.5浓度对应等级',
      srcImg: rulePm25,
      content:
        'PM2.5，直径≤2.5微米的颗粒，PM2.5的平均值在0-35μg/m3，PM2.5浓度过高，影响人体，呼吸系统和心血管系统健康，应开启除尘净化设备',
    },
    {
      name: '甲醛',
      id: 'HCHO',
      maxType: 'hchoMax',
      pointNum: 2,
      level: '不同阈值浓度对应标准',
      srcImg: ruleHcho,
      content:
        '甲醛（HCHO）是无色有刺激性有机气体。甲醛的主要危害表现为对皮肤和黏膜的刺激作用，室内甲醛浓度长期偏高会引发呼吸系统，消化系统或免疫系统疾病。甲醛多来自于室内装饰材料，如家具，墙纸，油漆以及胶水、芳香剂等物质。由于家具，胶水中的甲醛挥发是一个长期缓慢的过程，因此甲醛超标常表现为室内甲醛浓度长期处于较高的数值。最为有效避免甲醛超标的方法是持续高效的通风，通过引入室外新鲜空气将室内甲醛浓度长期控制在低于有害标准的范围内。由于甲醛传感器为电化学传感器，存在交叉干扰的特性，当室内出现无害的挥发性气体时也会导致测得的甲醛浓度短暂升高，如吸烟，使用香水，空气清新剂，喷洒酒精，甚至剥橘子皮溅出的汁液均可能在短时间内影响甲醛传感器的读数，在去除干扰源后，此种影响会在短时间内消除，可不必因此产生担忧。',
    },
    {
      name: '温湿度',
      id: 'Tdb,RH',
      maxType: 'temperatureMax',
      pointNum: 1,
      level: '',
      srcImg: '',
      content:
        '温度表示空气的冷热程度，夏季高温高湿会使人烦躁、疲倦，冬季湿度过高时，人体感觉越冷，冬季湿度低易引起呼吸道不舒适，室外温度较高时，宜遮阳关窗',
    },
  ]);
  const [paramObj, setParamObj] = useState({});

  const itemClick = (item) => {
    setParamObj(item);
  };

  const defaultType = () => {
    paramList.forEach((item) => {
      if (item.id.includes(selNav.id)) {
        itemClick(item);
      }
    });
  };

  useEffect(() => {
    defaultType(); // 默认展示类型
  }, [selNav]);

  //   拖拽
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef(null);
  const onStart = (_event, uiData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();

    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
    <>
      <Modal
        width={550}
        visible
        maskClosable={false}
        closable={false}
        footer={null}
        style={{
          width: '100%',
          cursor: 'move',
        }}
        modalRender={(modal) => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        <div
          className={styles.main}
          onMouseDown={(e) => {
            e.preventDefault();
          }}
        >
          <div className={styles.header}>
            <div className={styles.title}>{showSpace.localName}</div>
            <div className={styles.close} onClick={onClose}>
              <Icon type="close" />
            </div>
          </div>
          <div className={styles.content}>
            <div className={styles.navigator}>
              {paramList.map((item, index) => {
                return (
                  <div
                    className={cx(styles.nitem, { [styles.sel]: item.id == paramObj.id })}
                    key={'navc' + item.id}
                    onClick={() => {
                      itemClick(item);
                    }}
                  >
                    {item.name}
                  </div>
                );
              })}
            </div>
            <div className={styles.chart}>
              <LineChart paramObj={paramObj} spaceId={showSpace.spaceId} />
            </div>
            <div className={styles.foot}>
              <div className={styles.l}>{paramObj.name}</div>
              <div className={styles.r}>{paramObj.content}</div>
            </div>
            <div className={styles.leveSt}>
              <span>{paramObj.level}</span>
            </div>
            {paramObj.srcImg && (
              <div className={styles.ruleBox}>
                <img className={styles.ruleImg} src={paramObj.srcImg} />
              </div>
            )}
          </div>
        </div>
      </Modal>
    </>
  );
};