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

import "./index.less";
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
import img2 from "~/assets/images/public/weather/1.png";
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
import img7 from "~/assets/images/public/bigScreen/ico3.png";
import img8 from "~/assets/images/public/bigScreen/bg10.png";
import img9 from "~/assets/images/public/bigScreen/bg9.png";






function LeftScreen() {
  return (
    <div className="left-container">
     <div className="item">
       <div className="top"  style={{ backgroundImage: `url(${img1})` }}>
         天气预报情况
       </div>
       <div className="main">
         <div className="list1">
          <img src={img2} alt="" className="img1"/>
           <div>晴</div>
         </div>
         <div className="list1">
           <img src={img3} alt="" className="img"/>
           <div className="info">
             <div>温度：</div>
             <div className="temp">28.5°</div>
           </div>
         </div>
         <div className="list1">
           <img src={img4} alt="" className="img"/>
           <div className="info">
             <div>风速：</div>
             <div className="temp">8级</div>
           </div>
         </div>
       </div>
       <div className="info">
         秦皇岛市气象台发布大风橙色预警[工级/严重]
       </div>
       <div className="table">
         <div className="head"  style={{ backgroundImage: `url(${img5})` }} >
           <div>公司名称</div>
           <div>处置状态</div>
           <div>预防措施</div>
         </div>
         <div className="table-container" style={{ backgroundImage: `url(${img6})` }} >
           <div className="table-item">新益公司</div>
           <div className="table-item fc1">未处置</div>
           <div className="table-item">远离大树、电线杆、简易房等...</div>
         </div>
         <div className="table-container" style={{ backgroundImage: `url(${img6})` }} >
           <div className="table-item">新益公司</div>
           <div className="table-item fc2">已处置</div>
           <div className="table-item">远离大树、电线杆、简易房等...</div>
         </div>
         <div className="table-container" style={{ backgroundImage: `url(${img6})` }} >
           <div className="table-item">新益公司</div>
           <div className="table-item fc3">处置中</div>
           <div className="table-item">远离大树、电线杆、简易房等...</div>
         </div>
       </div>


     </div>
      <div className=" block2">
        <div className="top"  style={{ backgroundImage: `url(${img1})` }}>
          重大危险源运行情况
        </div>
        <div className="main">
          <div className="warning"> <img src={img7} alt=""/> 北区二号罐液位过低</div>
          <div className="main_item">
            <div className="list" style={{ backgroundImage: `url(${img8})` }}>
              <div className="title">二级重大危险源（1个）</div>
              <div className="main_con">
                <div className="item">储罐数：3</div>
                <div className="item ">再用数：3</div>
                <div className="item ">停用数： <span className="fcr">2</span></div>
             </div>
            </div>
            <div className="list" style={{ backgroundImage: `url(${img8})` }}>
              <div className="title">三级重大危险源（2个）</div>
              <div className="main_con">
                <div className="item">储罐数：10</div>
                <div className="item ">再用数：10</div>
                <div className="item ">停用数： <span className="fcr">0</span></div>
              </div>
            </div>
          </div>
          <div className="main_item">
            <div className="list" style={{ backgroundImage: `url(${img9})` }}>
              <div className="item_list">
                <div className="info">东罐区二号罐</div>
                <div className="state">正常</div>
              </div>
              <div className="item_list">
                <div className="info">东罐区二号罐</div>
                <div className="state fcr">液位低</div>
              </div>
              <div className="item_list">
                <div className="info">东罐区二号罐</div>
                <div className="state">正常</div>
              </div>

            </div>
            <div className="list" style={{ backgroundImage: `url(${img9})` }}>
              <div className="title fcb">报警处置情况</div>
              <div className="main_con1">
                <div className="item">温度待处置数/报警个数：0/0 </div>
                <div className="item ">压力待处置数/报警个数：0/0</div>
                <div className="item ">液位待处置数/报警个数：1/1</div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div className=" block3">
        <div className="top"  style={{ backgroundImage: `url(${img1})` }}>
          领域整改情况统计
        </div>
        <div className="main">
           这里是echart
        </div>
      </div>
      <div className="block4">
        <div className="top"  style={{ backgroundImage: `url(${img1})` }}>
          当前各公司作业中情况
        </div>
        <div className="main">
          <div className="table">
            <div className="head"  style={{ backgroundImage: `url(${img5})` }} >
              <div>公司名称</div>
              <div>发现隐患数</div>
              <div>整改隐患数</div>
              <div>待整改</div>
              <div>待验收</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }} >
              <div className="table-item">新益公司</div>
              <div className="table-item">123</div>
              <div className="table-item">123</div>
              <div className="table-item">123</div>
              <div className="table-item">123</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }} >
              <div className="table-item">新益公司</div>
              <div className="table-item">123</div>
              <div className="table-item">123</div>
              <div className="table-item">123</div>
              <div className="table-item">123</div>
            </div>

          </div>
        </div>
      </div>

    </div>
  );
}

export default LeftScreen;