zcloud-gbs-bi-react/src/pages/Container/White/BranchOffice/components/CenterPanel/index.js

import { useEventListener, useMount } from "ahooks";
import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import { getAlertColor, getWeather, getWeatherIcon } from "~/utils/weather";
import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts";
import "./index.less";

const block3_2TabsList = ["年度", "季度"];
function CenterPanel() {
  const [weatherData, setWeatherData] = useState({});
  const [alert, setAlert] = useState([]);
  const [block1_2List, setBlock1_2List] = useState([
    { department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
    { department: "销售部", requiredDevices: 80, anchoredDevices: 76 },
    { department: "市场部", requiredDevices: 60, anchoredDevices: 58 },
    { department: "运营部", requiredDevices: 120, anchoredDevices: 115 },
    { department: "客服部", requiredDevices: 90, anchoredDevices: 88 },
    { department: "财务部", requiredDevices: 30, anchoredDevices: 29 },
    { department: "人事部", requiredDevices: 25, anchoredDevices: 24 },
    { department: "研发部", requiredDevices: 200, anchoredDevices: 195 },
    { department: "质量部", requiredDevices: 45, anchoredDevices: 42 },
    { department: "采购部", requiredDevices: 35, anchoredDevices: 33 },
  ]);
  const [block1_3List, setBlock1_3List] = useState([
    { title: "股份", count1: 100, count2: 80 },
    { title: "领域", count1: 50, count2: 40 },
    { title: "自查", count1: 50, count2: 40 },
    { title: "专项", count1: 50, count2: 40 },
  ]);
  const [block3_2Index, setBlock3_2Index] = useState(0);

  const chart1Instance = useRef(null);
  const main1Ref = useRef(null);
  const chart2Instance = useRef(null);
  const main2Ref = useRef(null);
  const chart3Instance = useRef(null);
  const main3Ref = useRef(null);
  const chart4Instance = useRef(null);
  const main4Ref = useRef(null);
  const chart5Instance = useRef(null);
  const main5Ref = useRef(null);

  const getWeatherData = async () => {
    const result = await getWeather();
    setWeatherData(result.now);
    setAlert(Array.isArray(result.alerts) ? result.alerts : []);
  };

  useEffect(() => {
    getWeatherData();
  }, []);

  const initEcharts = () => {
    setTimeout(() => {
      initEcharts1(main1Ref, chart1Instance, {
        majorRiskCount: 1,
        greaterRiskCount: 2,
        generalRiskCount: 3,
        lowRiskCount: 4,
      });
      initEcharts2(main2Ref, chart2Instance, [
        { name: "技术部1", unitCount: 95, personnelCount: 92 },
        { name: "技术部2", unitCount: 95, personnelCount: 92 },
        { name: "技术部3", unitCount: 95, personnelCount: 92 },
        { name: "技术部4", unitCount: 95, personnelCount: 92 },
        { name: "技术部5", unitCount: 95, personnelCount: 92 },
        { name: "技术部6", unitCount: 95, personnelCount: 92 },
        { name: "技术部7", unitCount: 95, personnelCount: 92 },
        { name: "技术部8", unitCount: 95, personnelCount: 92 },
        { name: "技术部9", unitCount: 95, personnelCount: 92 },
        { name: "技术部0", unitCount: 95, personnelCount: 92 },
      ]);
      initEcharts3(main3Ref, chart3Instance, [
        { name: "火灾隐患", value: "15" },
        { name: "电气隐患", value: "22" },
        { name: "机械伤害隐患", value: "18" },
        { name: "高空坠落隐患", value: "12" },
        { name: "化学品泄漏隐患", value: "8" },
        { name: "粉尘爆炸隐患", value: "5" },
      ]);
      initEcharts4(main4Ref, chart4Instance, [
        { value: 44, name: "风险点检查覆盖率" },
        { value: 43, name: "自查清单检查率" },
        { value: 41, name: "安全环保检查完成率" },
        { value: 40, name: "隐患整改完成率" },
      ]);
      initEcharts5(main5Ref, chart5Instance, [
        { department: "安全部", yearOnYear: 15, monthOnMonth: 8 },
        { department: "生产部", yearOnYear: -12, monthOnMonth: 6 },
        { department: "设备部", yearOnYear: 10, monthOnMonth: 5 },
        { department: "技术部", yearOnYear: 8, monthOnMonth: 3 },
        { department: "质检部", yearOnYear: 6, monthOnMonth: 4 },
        { department: "物流部", yearOnYear: 5, monthOnMonth: 2 },
        { department: "财务部", yearOnYear: 4, monthOnMonth: 1 },
        { department: "人力资源部", yearOnYear: 3, monthOnMonth: 1 },
        { department: "生产计划部", yearOnYear: 2, monthOnMonth: 1 },
        { department: "质量部", yearOnYear: 1, monthOnMonth: 1 },
        { department: "设备管理部", yearOnYear: 1, monthOnMonth: 1 },
        { department: "设备管理部", yearOnYear: 1, monthOnMonth: 1 },
      ]);
    }, 0);
  };

  useEventListener("resize", () => {
    setTimeout(() => {
      if (chart1Instance.current) {
        chart1Instance.current.dispose();
      }
      if (chart2Instance.current) {
        chart2Instance.current.dispose();
      }
      if (chart3Instance.current) {
        chart3Instance.current.dispose();
      }
      if (chart4Instance.current) {
        chart4Instance.current.dispose();
      }
      if (chart5Instance.current) {
        chart5Instance.current.dispose();
      }
      initEcharts();
    }, 0);
  });

  useMount(() => {
    initEcharts();

    return () => {
      if (chart1Instance.current) {
        chart1Instance.current.dispose();
        chart1Instance.current = null;
      }
      if (chart2Instance.current) {
        chart2Instance.current.dispose();
        chart2Instance.current = null;
      }
      if (chart3Instance.current) {
        chart3Instance.current.dispose();
        chart3Instance.current = null;
      }
      if (chart4Instance.current) {
        chart4Instance.current.dispose();
        chart4Instance.current = null;
      }
      if (chart5Instance.current) {
        chart5Instance.current.dispose();
        chart5Instance.current = null;
      }
    };
  });

  const block3_2OptionsClick = (index) => {
    if (index === block3_2Index)
      return;
    setBlock3_2Index(index);
  };

  return (
    <div className="white_branch_office_center_container">
      <div className="block1">
        <Title title="企业安全状态信息" />
        <div className="container">
          <div>
            <div className="block1_1">
              <div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
            </div>
            <div className="block1_2">
              <div className="alert">
                <div className="scroll">
                  <SeamlessScroll list={alert} step={0.5} limitScrollNum={2} singleHeight={22}>
                    {
                      alert.map((item, index) => (
                        <div className="item" key={index}>
                          <div className="title" style={{ color: getAlertColor(item.level) === "#fff" ? "#2E75C6" : getAlertColor(item.level) }}>{item.title}</div>
                        </div>
                      ))
                    }
                  </SeamlessScroll>
                </div>
              </div>
              <div className="weather">
                <div className="icon">
                  <div className="img">
                    <img src={getWeatherIcon(weatherData.text)} alt="" />
                  </div>
                  <div className="text">{weatherData.text || "暂无数据"}</div>
                </div>
                <div className="items">
                  <div className="item">
                    <div className="info">
                      <div className="label">温度：</div>
                      <div className="value">{weatherData?.temp ? `${weatherData?.temp}℃` : "--"}</div>
                    </div>
                  </div>
                  <div className="item">
                    <div className="info">
                      <div className="label">风速：</div>
                      <div className="value">{weatherData.wind_class || "--"}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="table">
                <div className="tr">
                  <div className="td">部门名称</div>
                  <div className="td">需锚定设备数</div>
                  <div className="td">已锚定设备数</div>
                </div>
                <div className="scroll">
                  <SeamlessScroll list={block1_2List} step={0.5}>
                    {block1_2List.map((item, index) => (
                      <div key={index} className="tr">
                        <div className="td">{item.department}</div>
                        <div className="td">{item.requiredDevices}</div>
                        <div className="td">{item.anchoredDevices}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
              </div>
            </div>
          </div>
          <div className="block1_3">
            <div className="items">
              {
                block1_3List.map((item, index) => (
                  <div key={index} className="item">
                    <div className="title">{item.title}</div>
                    <div className="info">
                      <div>
                        <div className="label">发现数</div>
                        <div className="value" style={{ color: "#2D8EF3" }}>{item.count1}</div>
                      </div>
                      <div>
                        <div className="label">整改数</div>
                        <div className="value" style={{ color: "#F78F00" }}>{item.count1}</div>
                      </div>
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
        </div>
      </div>
      <div className="block2">
        <div className="block2_1">
          <Title title="发现整改验收情况" />
          <div className="container">
            <div ref={main2Ref} style={{ width: "100%", height: "225px" }} />
          </div>
        </div>
        <div className="block2_2">
          <Title title="隐患类型统计" />
          <div className="container">
            <div ref={main3Ref} style={{ width: "100%", height: "225px" }} />
          </div>
        </div>
      </div>
      <div className="block3">
        <div className="block3_1">
          <Title title="隐患排查治理信息" />
          <div className="container">
            <div ref={main4Ref} style={{ width: "100%", height: "225px" }} />
          </div>
        </div>
        <div className="block3_2">
          <Title
            title="隐患治理的环比与同比情况"
            extra={(
              <div className="tabs">
                {block3_2TabsList.map((item, index) => (
                  <div
                    key={index}
                    className={`tab ${index === block3_2Index ? "active" : ""}`}
                    onClick={() => block3_2OptionsClick(index)}
                  >
                    {item}
                  </div>
                ))}
              </div>
            )}
          />
          <div className="container">
            <div ref={main5Ref} style={{ width: "100%", height: "225px" }} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default CenterPanel;