rtgk-screen-web/pages/reports/curveParam/index.js

import React, { useRef, useEffect, useState, useMemo } from "react";
import { SearchOutlined } from "@ant-design/icons";
import _, { indexOf } from "lodash";
import moment from "moment";
import "antd/dist/antd.css";
import { Select, Button, DatePicker, Checkbox, message, Spin } from "antd";
const { Option } = Select;
import {
  getFactory,
  getEquipType,
  getEquip,
  getEquipmentLocation,
  getEquipmentLocationEchart,
} from "../../../reportUtils/getQueryData";
function CurveParam() {
  //HTML元素
  let refinput = useRef();

  //常量
  const [factoryValue, setFactoryValue] = useState("");
  const [factory, setFactory] = useState([]);
  const [equipTypeValue, setEquipTypeValue] = useState("");
  const [equipType, setEquipType] = useState([]);
  const [equipValue, setEquipValue] = useState("");
  const [equip, setEquip] = useState([]);
  // 点位集合
  const [locations, setLocations] = useState([]);
  // 点位变化值
  const [locationValue, setLocationValue] = useState([]);

  //react render
  useEffect(() => {
    let _locationValue = locationValue;
    // iframe 消息通讯
    let locationsValues = _.cloneDeep(locations);
    let retData = {};
    let selectItems = [];
    _locationValue.map((key) => {
      let index = _.findIndex(locationsValues, function (o) {
        return o.value === key;
      });
      selectItems.push(locationsValues[index]);
    });
    retData.selectItems = selectItems;
    retData.equipCode = equipValue;
    console.log(retData);
    if (retData.selectItems?.length > 0) {
      window.parent.postMessage(retData, "*");
    }
  }, [locationValue]);

  // 查询设备类型,查询车间，
  useEffect(() => {
    getEquipType().then((data) => {
      setEquipType(data);
    });
    getFactory().then((data) => {
      setFactory(data);
    });
  }, []);
  // 查询设备  监听设备类型
  useEffect(() => {
    getEquip({ equipTypeValue, factoryValue }).then((data) => {
      setEquip(data);
      setEquipValue("");
      setLocations([]);
      setLocationValue([]);
    });
  }, [equipTypeValue, factoryValue]);

  //方法
  const locationChange = (checkValue) => {
    setLocationValue(checkValue);
  };

  const handleCancelClick = () => {
    setLocationValue([]);
  };

  const equipTypeChange = (value) => {
    setEquipTypeValue(value);
  };

  const factoryChange = (value) => {
    setFactoryValue(value);
  };
  const equipChange = (value = "") => {
    if (value && equipValue !== value) {
      setLocationValue([]);

      getEquipmentLocation(value).then((data) => {
        let locationArr = data
          .sort((a, b) => (a.iotfieldsort > b.iotfieldsort ? 1 : -1))
          .map((item) => {
            return {
              label: item.iotfielddescribe,
              value: item.iotField,
            };
          });

        setLocations(locationArr);
      });
    } else {
      setLocationValue([]);
      setLocations([]);
    }
    setEquipValue(value);
  };

  return (
    <div className="w-90 mt-4 mx-3">
      <div className="flex flex-row space-x-4 ">
        <div className="workShop">
          <span>车间:</span>&nbsp;
          <Select
            allowClear
            size="small"
            style={{ width: 120 }}
            onChange={factoryChange}
            value={factoryValue}
          >
            {factory.map((item) => {
              return (
                <Option value={item.code} key={item.gid}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </div>
        <div className="equipType">
          <span>设备类型:</span>&nbsp;
          <Select
            allowClear
            size="small"
            style={{ width: 120 }}
            onChange={equipTypeChange}
            value={equipTypeValue}
          >
            {equipType.map((item) => {
              return (
                <Option value={item.equipTypeGid} key={item.gid}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </div>
        <div className="equipNo">
          <span>设备编号:</span>&nbsp;
          <Select
            showSearch
            allowClear
            size="small"
            onChange={equipChange}
            optionFilterProp="children"
            style={{ width: 150 }}
            value={equipValue}
            filterOption={(input, option) =>
              option.children.toLowerCase().includes(input.toLowerCase())
            }
          >
            {equip.map((item) => {
              return (
                <Option
                  value={item.serialNumber}
                  key={item.serialNumber + item.name}
                >
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </div>
      </div>
      <div className="toolBar flex flex-row mt-4">
        <div className="  text-xs 	">
          {locations.length > 0 ? (
            <Button
              type="primary"
              className="ml-2 mt-2"
              size="small"
              onClick={handleCancelClick}
            >
              取消全选
            </Button>
          ) : (
            <></>
          )}
        </div>
        <div className="legend overflow-y-auto  ml-10  mt-2  h-32  ">
          <Checkbox.Group
            ref={refinput}
            value={locationValue}
            options={locations}
            onChange={locationChange}
          />
        </div>
      </div>
      <style jsx>{`
        .ant-checkbox-group-item {
          width: 200px !important;
        }

        .toolBar {
          position: relative;
          border-width: 1px 0 1px 0;
          border-color: #d3d3d3;
          background: #f8f8f8;
          min-height: 32px;
        }
      `}</style>
    </div>
  );
}
export default CurveParam;