import img8 from "~/assets/images/public/bigScreen/bg11.png";
import img9 from "~/assets/images/public/bigScreen/bg12.png";
import img2 from "~/assets/images/public/bigScreen/ico6.png";
import img3 from "~/assets/images/public/bigScreen/ico7.png";
import img4 from "~/assets/images/public/bigScreen/ico8.png";
import img7 from "~/assets/images/public/bigScreen/ico9.png";
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
import "./index.less";

function RightScreen() {
  return (
    <div className="right-container">
      <div className="block1">
        <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 className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">方宇物业</div>
              <div className="table-item">2</div>
              <div className="table-item">3</div>
              <div className="table-item">4</div>

            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">方宇物业</div>
              <div className="table-item">2</div>
              <div className="table-item">3</div>
              <div className="table-item">4</div>

            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">方宇物业</div>
              <div className="table-item">2</div>
              <div className="table-item">3</div>
              <div className="table-item">4</div>

            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">方宇物业</div>
              <div className="table-item">2</div>
              <div className="table-item">3</div>
              <div className="table-item">4</div>

            </div>

          </div>

        </div>

      </div>
      <div className=" block2">
        <div className="top" style={{ backgroundImage: `url(${img1})` }}>
          当前重点作业统计
        </div>
        <div className="main">
          <div className="item">
            <div className="img">
              <img src={img2} alt="" />
            </div>
            <div className="info">
              <div className="title">三人以上作业</div>
              <div>
                <p> 当前作业数：13</p>
                <p>申请数：14</p>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="img">
              <img src={img3} alt="" />
            </div>
            <div className="info">
              <div className="title">危险作业</div>
              <div>
                <p> 当前作业数：13</p>
                <p>申请数：14</p>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="img">
              <img src={img4} alt="" />
            </div>
            <div className="info">
              <div className="title">夜间作业</div>
              <div>
                <p> 当前作业数：13</p>
                <p>申请数：14</p>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="img">
              <img src={img7} alt="" />
            </div>
            <div className="info">
              <div className="title">四新作业</div>
              <div>
                <p> 当前作业数：13</p>
                <p>申请数：14</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className=" block3">
        <div className="top" style={{ backgroundImage: `url(${img1})` }}>
          当前口门、封闭区情况
        </div>
        <div className="main">
          <div className="item" style={{ backgroundImage: `url(${img9})` }}>
            <div className="title">一级口门进出统计</div>
            <div className="num">
              <div>人数：2100</div>
              <div>车数：1125</div>
            </div>
          </div>
          <div className="item" style={{ backgroundImage: `url(${img9})` }}>
            <div className="title">进入申请待审批</div>
            <div className="num">
              <div>人数：2100</div>
              <div>车数：1125</div>
            </div>
          </div>
          <div className="item" style={{ backgroundImage: `url(${img8})` }}>
            <div className="title">封闭区域人员情况</div>
            <div className="num">
              <div>人数：2100</div>
              <div>车数：1125</div>
            </div>
          </div>
          <div className="item" style={{ backgroundImage: `url(${img8})` }}>
            <div className="title">封闭区域作业情况</div>
            <div className="num">
              <div>人数：2100</div>
              <div>车数：1125</div>
            </div>
          </div>
        </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 className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">新益公司</div>
              <div className="table-item">火灾检测系统</div>
              <div className="table-item">燃气泄露</div>
              <div className="table-item">未处置</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">新益公司</div>
              <div className="table-item">火灾检测系统</div>
              <div className="table-item">燃气泄露</div>
              <div className="table-item">未处置</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">新益公司</div>
              <div className="table-item">火灾检测系统</div>
              <div className="table-item">燃气泄露</div>
              <div className="table-item">未处置</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">新益公司</div>
              <div className="table-item">火灾检测系统</div>
              <div className="table-item">燃气泄露</div>
              <div className="table-item">未处置</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">新益公司</div>
              <div className="table-item">火灾检测系统</div>
              <div className="table-item">燃气泄露</div>
              <div className="table-item">未处置</div>
            </div>
            <div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
              <div className="table-item">新益公司</div>
              <div className="table-item">火灾检测系统</div>
              <div className="table-item">燃气泄露</div>
              <div className="table-item">未处置</div>
            </div>

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

    </div>
  );
}

export default RightScreen;
