rtgk-screen-web/pages/components/Header/Header.js

/** @format */
import react from "react";
import LabelCheck from "./LabelCheck";
import VLabel from "./VLabel";
import { PuzzleIcon, PauseIcon, RefreshIcon } from "@heroicons/react/solid";
import eqs from "../../../utils/eqs";
import AutoCompleteCombobox from "../Combobox";
import requests from "../../../utils/requests";
import { doPost } from "../../../utils/requests";
const { eqstatus, orderstatus } = eqs;

function Header({
  factorychanged,
  setTypeList,
  statuslist,
  typeList,
  typechanged,
  zzref,
  getEqData,
  runningstatuschanged,
  selectedone
}) {
  const [factoryData, setfactoryData] = react.useState(null);
  const [ischeckAll, setIscheckAll] = react.useState(true);
  let getCount = (key) => {
    if (statuslist) {
      var aa = 0;
      Object.keys(statuslist).forEach((x) => {
        if (key === parseInt(x)) {
          aa = statuslist[x];
        }
      });
      return aa;
    } else {
      return 0;
    }
  };
  var selectChanged = (item) => {
    factorychanged(item);
  };
  react.useEffect(() => {}, [typeList]);
  react.useEffect(() => {
    doPost(requests.fetchFactory.url, {
      removePermission: true,
      page: 1,
      pageSize: 100000,
      sorted: "serialNumber"
    })
      .then((res) => res.json())
      .then((data) => {
        setfactoryData(data.data);
      })
      .catch((ex) => {
        console.log(ex);
      });

    doPost(requests.fetchType.url, {
      removePermission: true,
      page: 1,
      pageSize: 100000,
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          if (data.data) {
            var typecodedata = data.data
              .sort((a, b) => (parseInt(a.code) > parseInt(b.code) ? 1 : -1))
              .map((a) => {
                return {
                  code: a.code,
                  name: a.name,
                };
              });
            setTypeList(typecodedata);
          }
        }
      });
  }, []);
  return (
    <header
      className="flex flex-col  h-auto space-y-2 sticky top-0 z-20   "
      ref={zzref}
    >
      {/* <div className="flex   plblue h-12 px-3">
        <PuzzleIcon className="flex-none w-11 h-11"></PuzzleIcon>
        <div className=" border-l  border-gray-50 my-3 mx-3 "></div>
        <label className=" text-xl text-white flex items-center ">
          融通高科设备状态大屏
        </label>
      </div> */}
      <div className="px-3  bg-white  h-14 flex items-center ">
        <div className="flex items-center ">
          <VLabel>车间</VLabel>
          <AutoCompleteCombobox
            dataSource={factoryData}
            selectChanged={selectChanged}
            selectedone={selectedone}
          />
          <div className=" w-5"></div>

          <VLabel>分类</VLabel>
          <AutoCompleteCombobox
            dataSource={typeList}
            selectChanged={typechanged}
          />
        </div>
        <div className="flex-auto"></div>
        <div className="flex  flex-row  ">
          <div className="flex flex-row items-center  mr-3">
            <span> 刷新设备数据： </span>{" "}
            <button type="button" onClick={getEqData}>
              <RefreshIcon className="flex-none w-5 h-5 text-gray-300 "></RefreshIcon>{" "}
            </button>
          </div>
          <div className="space-x-2  items-center flex flex-row ">
            <VLabel>设备运行状态</VLabel>
            {eqstatus
              .sort((a, b) => (a.idx > b.idx ? 1 : -1))
              .filter((z) => {
                if (z.key >= -10) return z;
              })
              .map((item, idx) => (
                <LabelCheck
                  oncheckchange={(val) => {
                    if(item.key===-10){
                      setIscheckAll(val.target.checked)
                    }
                    runningstatuschanged(item.key, val.target.checked);
                  }}
                  key={idx}
                  keyv={item.key}
                  PrefixTitle={item.title}
                  SuffixTitle={item.unit}
                  checked= {ischeckAll}
                  Count={item.key == -10 ? "" : getCount(item.key)}
                  Bg={item.bg}
                ></LabelCheck>
              ))}
          </div>
          {/* <div className=" border-l  border-gray-300  mx-6"></div>

          <div className="space-x-2  items-center flex flex-row   ">
            <VLabel>设备生产状态</VLabel>
            {orderstatus.map((item, idx) => (
              <LabelCheck
                key={idx}
                PrefixTitle={item.title}
                SuffixTitle={item.unit}
                Count={
                  item.key === "1" ? productCount : allEquipCount-productCount
                }
                Bg={item.bg}
              ></LabelCheck>
            ))}
          </div> */}
        </div>
      </div>
      <div className=" mt-4"></div>
    </header>
  );
}

export default Header;