import img9 from "~/assets/images/public/bigScreen/bg9.png";
import img8 from "~/assets/images/public/bigScreen/bg10.png";
import img7 from "~/assets/images/public/bigScreen/ico3.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 img3 from "~/assets/images/public/bigScreen/w_ico1.png";
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
import img2 from "~/assets/images/public/weather/1.png";
import "./index.less";

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;
