zcloud-gbs-bi-react/src/pages/Container/Share/components/LeftPanel/index.js

import "./index.less";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import cake from "~/assets/images/public/white/img7.png";
import bg1 from "~/assets/images/public/white/bg1.png";
import img1 from "~/assets/images/public/white/img1.png";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import {useState} from "react";



function WhiteShareLeft() {
  const [block1List, setBlock1List] = useState([
    { name: "隐患总数", num: "1398"  },
    { name: "隐患整改数", num: "1212"  },
    { name: "隐患未整改数", num: "563" },
    { name: "隐患整改率", num: "89%" },
  ]);
  const [block2List, setBlock2List] = useState([
    { name: "隐患总数", num: "1398"  },
    { name: "隐患整改数", num: "1212"  },
    { name: "隐患未整改数", num: "563" },
    { name: "隐患整改率", num: "89%" },
  ]);
  const [block3List, setBlock3List] = useState([
    { id: 1, level: "二级", name: "东区一号罐", state: "正常"},
    { id: 2, level: "二级", name: "东区一号罐", state: "正常"},
    { id: 3, level: "二级", name: "东区一号罐", state: "正常"},
    { id: 4, level: "二级", name: "东区一号罐", state: "正常"},
    { id: 5, level: "二级", name: "东区一号罐", state: "正常"},
    { id: 6, level: "二级", name: "东区一号罐", state: "正常"},

  ]);
  const [block4List, setBlock4List] = useState([
    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },

  ]);
  return (
    <div className="white_share_left">
      <div className="block1">
      <Title title={"风险辨识管控情况"} />
      <div className="white_share_left_conten">
        <div className="cake">
          <img src={cake} alt="" />
        </div>
        <div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}>
          <div className="item">
            <div className="title">重大风险</div>
            <div className="num fcr">467</div>
          </div>
          <div className="item">
            <div className="title">较大风险</div>
            <div className="num fco">467</div>
          </div>
          <div className="item">
            <div className="title">一般风险</div>
            <div className="num fcc">467</div>
          </div>
          <div className="item">
            <div className="title">低风险</div>
            <div className="num fcb">9809</div>
          </div>
        </div>
      </div>
      </div>
   <div className="block2">
     <Title title={"重大危险源安全情况"} />
    <div className="white_share_left_conten">
      <div className="top">
        <div className="item">
          <div className="title">二级重大危险源（1个）</div>
          <div className="item_container">
          <span>储罐数: <span className="fcb">3</span> </span>
          <span>在用数: <span className="fcg">3</span> </span>
          <span>停用数: <span className="fcr">0</span></span>
          </div>
        </div>
        <div className="item">
          <div className="title">三级重大危险源（2个）</div>
          <div className="item_container">
            <span>储罐数: <span className="fcb">10</span> </span>
            <span>在用数: <span className="fcg">10</span> </span>
            <span>停用数: <span className="fcr">0</span></span>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="left_table">
          <div className="table">
            <div className="tr">
              <div className="th">级别</div>
              <div className="th">名称</div>
              <div className="th">状态</div>

            </div>
            <div className="scroll">
              <SeamlessScroll list={block3List} step={0.5}>
                {block3List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.level}</div>
                    <div className="td">{item.name}</div>
                    <div className="td">{item.state}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
        <div className="info">
          <div className="title"><img src={img1} alt=""/> 东区二号罐液位过低</div>
          <div className="comment">
            <p>温度待处置数/报警个数：<span>0/0</span> </p>
            <p>压力待处置数/报警个数：<span>0/0</span></p>
            <p>液位待处置数/报警个数：<span> <span className="fcr">1</span>/1</span></p>
          </div>
      </div>




      </div>
      </div>

    </div>
   <div className="block3">
     <Title title={"隐患排查治理情况"} />
     <div className="white_share_left_conten">
       <div className="top">
         <div className="item">
           <div className="content">
             <div className="title">股份<br/>公司</div>
             <div className="info">
               {
                 block1List.map((item, index) => (
                     <div key={index} className="list">
                       <div className="name">{item.name}</div>
                       <div className="num">{item.num}</div>
                     </div>
                   ))
               }
             </div>
           </div>
         </div>

         <div className="item">
           <div className="content">
             <div className="title">分子<br/>公司</div>
             <div className="info">
               {
                 block2List.map((item, index) => (
                   <div key={index} className="list">
                     <div className="name">{item.name}</div>
                     <div className="num">{item.num}</div>
                   </div>
                 ))
               }
             </div>
           </div>
         </div>

       </div>
       <div className="field">
         <div className="top">领域隐患</div>
       </div>
       <div className="main">
         <div className="table">
           <div className="tr">
             <div className="th">领域名称</div>
             <div className="th">隐患总数</div>
             <div className="th">整改数</div>
             <div className="th">未整改数</div>
             <div className="th">整改率</div>
           </div>
           <div className="scroll">
             <SeamlessScroll list={block4List} step={0.5}>
               {block4List.map((item, index) => (
                 <div key={index} className="tr">
                   <div className="td">{item.name}</div>
                   <div className="td">{item.total}</div>
                   <div className="td">{item.rectificationNumber}</div>
                   <div className="td">{item.unNumber}</div>
                   <div className="td">{item.rectificationRate}</div>
                 </div>

               ))}
             </SeamlessScroll>
           </div>
         </div>
       </div>
     </div>
   </div>


    </div>

  );
}

export default WhiteShareLeft;