首页

src/pages/Container/Bi/components/Header/index.js

@@ -0,0 +1,112 @@
+import { useMount } from "ahooks";
+import { useContext, useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import backImg from "~/assets/images/public/bigScreen/back.png";
+import imgOk from "~/assets/images/public/bigScreen/imgok.png";
+import guangImg from "~/assets/images/map_bi/guang.png";
+import topImg from "~/assets/images/public/bigScreen/title.png";
+import { Context } from "~/pages/Container/Map/js/context";
+import mitt from "~/pages/Container/Map/js/mitt";
+import {
+  changeBottomUtilsAnimationMittKey,
+  changeContentAnimationKeyMittKey,
+  changePeopleTrajectorySelectVisibleMittKey,
+  clickBackMittKey,
+  clickBranchOfficePointMittKey,
+  clickPortPointMittKey,
+  deletePeoplePositionPointMittKey,
+  initBottomUtilsMittKey,
+  resetAllBottomUtilsCheckMittKey,
+  resetBottomCurrentIndexMittKey,
+} from "~/pages/Container/Map/js/mittKey";
+import "./index.less";
+
+function Header() {
+  const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);
+
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useMount(() => {
+    setAnimationKey(Math.random());
+  });
+
+  const onBack = () => {
+    mitt.emit(deletePeoplePositionPointMittKey);
+    if (currentPort !== "00003" && currentBranchOffice) {
+      mitt.emit(clickPortPointMittKey, { id: "" });
+      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
+      mapMethods.current.removeWall();
+      mapMethods.current.removeFourColorDiagram();
+      mapMethods.current.removeBranchOfficePoint();
+      mapMethods.current.removeMarkPoint();
+      mapMethods.current.flyTo();
+      mapMethods.current.addPortPoint();
+    }
+    else if (currentBranchOffice) {
+      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
+      mapMethods.current.removeBranchOfficePoint();
+      mapMethods.current.removeMarkPoint();
+      mapMethods.current.returnPreviousCenterPoint();
+      setTimeout(() => {
+        mapMethods.current.addBranchOfficePoint(area);
+      }, 2000);
+    }
+    else if (currentPort) {
+      mitt.emit(clickPortPointMittKey, { id: "" });
+      mapMethods.current.removeWall();
+      mapMethods.current.removeFourColorDiagram();
+      mapMethods.current.removeBranchOfficePoint();
+      mapMethods.current.removeMarkPoint();
+      mapMethods.current.flyTo();
+      mapMethods.current.addPortPoint();
+    }
+    mitt.emit(changeBottomUtilsAnimationMittKey);
+    mitt.emit(initBottomUtilsMittKey);
+    mitt.emit(resetBottomCurrentIndexMittKey);
+    mitt.emit(resetAllBottomUtilsCheckMittKey);
+    mitt.emit(clickBackMittKey);
+    mitt.emit(changeContentAnimationKeyMittKey);
+    mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
+  };
+
+  return (
+    <div className="header_container">
+      <CSSTransition
+        in={animationKey !== 0}
+        timeout={1000}
+        classNames={{
+          enter: "animate__animated",
+          enterActive: "animate__animated animate__fadeInDown",
+          exit: "animate__animated",
+          exitActive: "animate__animated animate__fadeOutUp",
+        }}
+        unmountOnExit
+      >
+        <header style={{ backgroundImage: `url(${topImg})` }}>
+          <CSSTransition
+            in={!!(currentPort || currentBranchOffice)}
+            timeout={1000}
+            classNames={{
+              enter: "animate__animated",
+              enterActive: "animate__animated animate__fadeInDown",
+              exit: "animate__animated",
+              exitActive: "animate__animated animate__fadeOutUp",
+            }}
+            unmountOnExit
+          >
+
+          </CSSTransition>
+          <div
+            className="back"
+            onClick={onBack}
+          > <img src={backImg} alt="返回" /> 返回</div>
+          <div className="title">秦港股份安全监管平台</div>
+          <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
+          <div className="time"> <img src={imgOk} /> 企业已连续平安运行 1095 天</div>
+        </header>
+      </CSSTransition>
+    </div>
+  );
+}
+
+export default Header;

src/pages/Container/Bi/components/Header/index.less

@@ -0,0 +1,75 @@
+.header_container {
+
+  header {
+    width: 100%;
+    height: 70px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    font-size: 40px;
+    color: #fff;
+    text-align: center;
+    padding-top: 10px;
+    font-weight: bold;
+    position: absolute;
+
+    .back {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: normal;
+    }
+
+    .title {
+      background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 34px;
+    }
+
+    .guang {
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      width: 707px;
+      height: 85px;
+      position: absolute;
+      top: 25px;
+      left: 50%;
+      animation: headerContainerScale 2s infinite;
+
+      @keyframes headerContainerScale {
+        0% {
+          transform: translateX(-50%) scale(1);
+        }
+
+        50% {
+          transform: translateX(-50%) scale(0.5);
+        }
+
+        100% {
+          transform: translateX(-50%) scale(1);
+        }
+      }
+    }
+    .time{
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      font-size: 14px;
+      border-style: solid;
+      border-width: 1px;
+      border-color: rgba(12,108,177,0.2);
+      background-image: -moz-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%);
+      background-image: -webkit-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%);
+      background-image: -ms-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%);
+      box-shadow: inset 0px 3px 7px 0px rgba(21, 50, 102, 0.35);
+      font-weight: normal;
+      padding: 5px 10px;
+      border-radius: 20px;
+      color: #ffffff;
+      z-index: 9999;
+    }
+  }
+}

src/pages/Container/Bi/components/LeftPanel/echarts.js

@@ -0,0 +1,146 @@
+import * as echarts from "echarts";
+import { textFormatter } from "~/pages/Container/Map/js/utils";
+
+export const initEcharts1 = (main1Ref, chartInstance, data) => {
+  const XAxisData = [];
+  const seriesData1 = [];
+  const seriesData2 = [];
+
+  data.forEach((e) => {
+    XAxisData.push(e.AREA_NAME);
+    seriesData1.push(Number(e.CAR_IN) + Number(e.PEOPLE_IN));
+    seriesData2.push(Number(e.CAR_OUT) + Number(e.PEOPLE_OUT));
+  });
+
+  chartInstance.current = echarts.init(main1Ref.current);
+
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      left: "2%",
+      right: "4%",
+      bottom: "5%",
+      top: "10%",
+      containLabel: true,
+    },
+    dataZoom: [
+      {
+        type: "slider",
+        height: 6,
+        bottom: 0,
+        show: true,
+        start: 0,
+        end: 25,
+        handleSize: 3,
+        handleStyle: {
+          color: "#DCE2E8",
+        },
+        xAxisIndex: [0],
+        filterMode: "filter",
+        showDetail: false,
+      },
+    ],
+    legend: {
+      top: "0%",
+      right: "0%",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      itemWidth: 12,
+      itemHeight: 10,
+    },
+    xAxis: {
+      type: "category",
+      data: XAxisData,
+      axisLine: {
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        rotate: 0,
+        color: "#fff",
+        fontSize: 14,
+        interval: 0,
+        formatter(value) {
+          return textFormatter(value, 3);
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#8c9493",
+        },
+      },
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+    },
+    series: [
+      {
+        name: "进",
+        type: "bar",
+        barWidth: "30%",
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: "#00f0ff",
+            },
+            {
+              offset: 1,
+              color: "#0066ff",
+            },
+          ],
+          false,
+        ),
+        data: seriesData1,
+      },
+      {
+        name: "出",
+        type: "bar",
+        barWidth: "30%",
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: "#003cff",
+            },
+            {
+              offset: 1,
+              color: "#00ff9c",
+            },
+          ],
+          false,
+        ),
+        data: seriesData2,
+      },
+    ],
+  };
+
+  chartInstance.current.setOption(option);
+};

src/pages/Container/Bi/components/LeftPanel/index.js

@@ -0,0 +1,169 @@
+
+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;

src/pages/Container/Bi/components/LeftPanel/index.less

@@ -0,0 +1,261 @@
+.left-container{
+  width: 360px;
+  height: calc(100vh - 80px);
+  position: absolute;
+  left: 20px;
+  top: 60px;
+  .item{
+    width: 100%;
+
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+
+      .list1{
+        display: flex;
+        color: #ffffff;
+        align-items: center;
+        width: 33%;
+        text-align: center;
+            .img1{
+             width: 40px;
+              height: 40px;
+                }
+
+        .img{
+          width: 42px;
+          height: 42px;
+          margin-right: 5px;
+        }
+        .temp{
+          font-size: 18px;
+          color: #00e7ff;
+        }
+
+      }
+
+
+
+    }
+    .info{
+      color: #fe9e00;
+      font-weight: bold;
+      margin-top: 10px;
+    }
+
+    .table{
+      width: 360px;
+      margin-top: 10px;
+
+      .head{
+        width: 360px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 2fr;
+        color: #ffffff;
+        padding: 5px;
+        font-size: 12px;
+      }
+      .table-container{
+        width: 360px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 2fr;
+        color: #ffffff;
+        padding: 5px;
+        font-size: 12px;
+        margin: 5px auto;
+
+        .fc1{
+          color: #0c90ff;
+        }
+        .fc2{
+          color: #62b13f;
+        }
+        .fc3{
+          color: #ffa105;
+        }
+      }
+
+    }
+
+  }
+
+.block2{
+  width: 100%;
+  margin-top: 10px;
+  .top{
+    color: #ffffff;
+    font-weight: bold;
+    padding-left: 30px;
+    width: 360px;
+    height: 30px;
+    background-size: 100% 100%;
+  }
+  .main{
+    .warning{
+      width: 100%;
+      border-style: solid;
+      border-width: 1px;
+      border-color: rgb(255, 0, 0,0.5);
+      border-radius: 2px;
+      background-color: rgba(16, 36, 93, 0.659);
+      color: #ffffff;
+      padding: 5px;
+      vertical-align: middle;
+      font-weight: bold;
+      margin: 10px auto;
+    }
+    .mt10{
+      margin-top: 10px;
+    }
+    .main_item{
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .list{
+        width: 48%;
+        height: 91px;
+        background-size: 100% 100%;
+        padding: 5px;
+        color: #ffffff;
+        .title{
+          font-weight: bold;
+        }
+        .main_con{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+
+
+          .item{
+            width: 50%;
+            margin: 2px 0;
+            font-size: 12px;
+            .fcr{
+              color: #f90102;
+            }
+          }
+
+        }
+        .fcb{
+          color: #00aeff;
+        }
+
+        .main_con1{
+          .item{
+            width: 100%;
+            margin: 2px 0;
+            font-size: 12px;
+            line-height: 22px;
+            .fcr{
+              color: #f90102;
+            }
+          }
+        }
+        .item_list{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          border-bottom: 1px solid #163682;
+          font-size: 12px;
+          line-height: 30px;
+
+          .info{
+            width: 60%;
+          }
+          .state{
+            width: 40%;
+            text-align: right;
+            color: #7ccf41;
+          }
+          .fcr{
+            color: #f90102;
+          }
+        }
+      }
+    }
+  }
+
+}
+  .block3{
+    width: 100%;
+    margin-top: 20px;
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      width: 360px;
+      height: 100px;
+    }
+  }
+  .block4{
+    width: 100%;
+    margin-top: 20px;
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      width: 360px;
+      .table{
+        width: 360px;
+        margin-top: 10px;
+
+        .head{
+          width: 360px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          background: rgba(39,101,175,0.5);
+          text-align: center;
+        }
+        .table-container{
+          width: 360px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          margin: 5px auto;
+          background: rgba(17,51,122,0.5);
+          text-align: center;
+
+          .fc1{
+            color: #0c90ff;
+          }
+          .fc2{
+            color: #62b13f;
+          }
+          .fc3{
+            color: #ffa105;
+          }
+        }
+
+      }
+    }
+
+  }
+
+}

src/pages/Container/Bi/components/bottom/index.js

@@ -0,0 +1,75 @@
+
+import "./index.less";
+import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
+import img2 from "~/assets/images/public/bigScreen/bg13.png";
+import img3 from "~/assets/images/public/bigScreen/bg14.png";
+
+
+function BottomScreen() {
+  return (
+    <div className="bottom-container" >
+      <div className="left">
+        <div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
+        <div className="main" style={{ backgroundImage: `url(${img2})` }}>
+          <div className="table">
+            <div className="head"   >
+              <div>公司名称</div>
+              <div>检查任务完成情况</div>
+              <div>安全会议召开情况</div>
+              <div>重要事项传达情况</div>
+              <div>专项任务完成情况</div>
+            </div>
+            <div className="table-container"  >
+              <div className="table-item">新益公司</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+            </div>
+
+            <div className="table-container"  >
+              <div className="table-item">新益公司</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+            </div>
+            <div className="table-container"  >
+              <div className="table-item">新益公司</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+            </div>
+            <div className="table-container"  >
+              <div className="table-item">新益公司</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+              <div className="table-item">23/26</div>
+            </div>
+        </div>
+        </div>
+      </div>
+      <div className="right">
+        <div className="title" style={{ backgroundImage: `url(${img1})` }}>视频巡屏</div>
+        <div className="main">
+          <div className="menu">
+            <div className="list active">新益公司</div>
+            <div className="list">二公司</div>
+            <div className="list">六公司</div>
+            <div className="list">七公司</div>
+            <div className="list">九公司</div>
+          </div>
+          <div className="video-container" style={{ backgroundImage: `url(${img3})` }}>
+            这里是视频
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+  );
+}
+
+export default BottomScreen;

src/pages/Container/Bi/components/bottom/index.less

@@ -0,0 +1,125 @@
+.bottom-container{
+  width: 1120px;
+  height: 200px;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+  .left{
+    width: 670px;
+    .title{
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+      padding-left: 20px;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .main{
+      width: 670px;
+      height: 160px;
+      background-size: 100% 100%;
+      margin-top: 10px;
+      color: #ffffff;
+      .table{
+        width: 100%;
+        margin-top: 10px;
+
+        .head{
+          width: 100%;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
+          color: #ffffff;
+          padding:10px 5px;
+          font-size: 12px;
+          text-align: center;
+          font-weight: bold;
+        }
+        .table-container{
+          width: 100%;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          margin: 0px auto;
+          text-align: center;
+
+          .fc1{
+            color: #0c90ff;
+          }
+          .fc2{
+            color: #62b13f;
+          }
+          .fc3{
+            color: #ffa105;
+          }
+          &:hover{
+            background-color: rgba(14,197,208,0.1);
+            box-shadow: 0 0 1px #00e7ff;
+
+          }
+        }
+
+      }
+    }
+
+  }
+
+  .right{
+    width: 440px;
+    .title{
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 20px;
+    }
+    .main{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      .menu{
+        width: 120px;
+        border-radius: 5px;
+        background-color: rgb(13, 56, 119);
+        box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17);
+        height: 180px;
+        color: #ffffff;
+        text-align: center;
+        line-height: 30px;
+        padding: 5px;
+
+        .list{
+          width: 100%;
+          border-radius: 5px;
+          background-color: rgba(18, 96, 181, 0.4);
+          box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4);
+          margin-bottom: 5px;
+          &:hover{
+            border-radius: 5px;
+            background-color: rgb(18, 96, 181);
+            box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
+            cursor: pointer;
+          }
+        }
+        .active{
+          border-radius: 5px;
+          background-color: rgb(18, 96, 181);
+          box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
+          cursor: pointer;
+        }
+
+      }
+      .video-container{
+        flex: 1;
+        margin-left: 10px;
+        padding: 10px;
+
+      }
+    }
+  }
+}

src/pages/Container/Bi/components/rightPanel/index.js

@@ -0,0 +1,220 @@
+
+import "./index.less";
+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 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 img8 from "~/assets/images/public/bigScreen/bg11.png";
+import img9 from "~/assets/images/public/bigScreen/bg12.png";
+
+
+
+
+
+
+
+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;

src/pages/Container/Bi/components/rightPanel/index.less

@@ -0,0 +1,205 @@
+.right-container{
+  width: 360px;
+  height: calc(100vh - 80px);
+  position: absolute;
+  right: 20px;
+  top: 60px;
+  .block1{
+    width: 100%;
+
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+
+      .table{
+        width: 360px;
+        margin-top: 10px;
+
+        .head{
+          width: 360px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1.5fr 1fr ;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          background: rgba(39,101,175,0.5);
+          text-align: center;
+        }
+        .table-container{
+          width: 360px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1.5fr 1fr ;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          margin: 5px auto;
+          background: rgba(17,51,122,0.5);
+          text-align: center;
+
+          .fc1{
+            color: #0c90ff;
+          }
+          .fc2{
+            color: #62b13f;
+          }
+          .fc3{
+            color: #ffa105;
+          }
+        }
+
+      }
+
+
+
+    }
+
+
+
+
+  }
+
+  .block2{
+    width: 100%;
+    margin-top: 10px;
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      display: flex;
+      justify-content: space-between;
+     flex-wrap: wrap;
+      .item{
+        width: 50%;
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+        .title{
+          font-weight: bold;
+        }
+
+        .info{
+          padding-left: 10px;
+          width: 100%;
+          color: #ffffff;
+          font-size: 12px;
+          p{
+            margin: 0;
+          }
+        }
+
+      }
+
+
+
+    }
+
+  }
+  .block3{
+    width: 100%;
+    margin-top: 20px;
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      width: 360px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .item{
+        width: 49%;
+        text-align: center;
+        background-size: 100% 100%;
+        color: #ffffff;
+        padding:5px 10px;
+        font-size: 12px;
+        margin-top: 10px;
+
+        .title{
+          font-weight: bold;
+        }
+        .num{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 5px;
+        }
+
+      }
+
+    }
+  }
+  .block4{
+    width: 100%;
+    margin-top: 20px;
+    .top{
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 30px;
+      width: 360px;
+      height: 30px;
+      background-size: 100% 100%;
+    }
+    .main{
+      width: 360px;
+      .table{
+        width: 360px;
+        margin-top: 10px;
+
+        .head{
+          width: 360px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr ;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          background: rgba(39,101,175,0.5);
+          text-align: center;
+        }
+        .table-container{
+          width: 360px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr ;
+          color: #ffffff;
+          padding: 5px;
+          font-size: 12px;
+          margin: 5px auto;
+          background: rgba(17,51,122,0.5);
+          text-align: center;
+
+          .fc1{
+            color: #0c90ff;
+          }
+          .fc2{
+            color: #62b13f;
+          }
+          .fc3{
+            color: #ffa105;
+          }
+        }
+
+      }
+    }
+
+  }
+
+}

src/pages/Container/Bi/index.js

@@ -1,145 +1,21 @@
-import { useMount } from "ahooks";
-import autofit from "autofit.js";
-import { Connect } from "@cqsjjb/jjb-dva-runtime";
-import { NS_BI } from "~/enumerate/namespace";
-
-import { useState } from "react";
 import backgroundimg from "../../../assets/images/public/bigScreen/backgroundimg.jpg";
-import ico1 from "../../../assets/images/public/bigScreen/ico1.png";
-import ico2 from "../../../assets/images/public/bigScreen/ico2.png";
-import icobg1 from "../../../assets/images/public/bigScreen/icobg1.png";
-
-import icobg2 from "../../../assets/images/public/bigScreen/icobg2.png";
-// import RightPanel from './components/rightPanel';
-// import CenterArea from './components/centerArea';
-import Bubble from "./bubble";
-import LeftPanel from "./components/leftPanel";
-import TopTitleArea from "./components/topTitleArea";
 import "./index.less";
+import Header from "../Bi/components/Header/index";
+import Leftpanel from "~/pages/Container/Bi/components/LeftPanel/index";
+import Rightpanel from "~/pages/Container/Bi/components/rightPanel/index";
+import Bottom from "~/pages/Container/Bi/components/Bottom/index";
 
-const mockPoints = [
-  {
-    id: "00002",
-    name: "沧州黄骅港矿石港务有限公司",
-    title: "沧州港",
-    type: "港口",
-    descr: "公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。",
-    position: { x: 117.91412, y: 38.35902 },
-    CORP_INFO_ID: "f8da1790b1034058ae2efefd69af3284",
-    style: { top: "58%", left: "30%" },
-    description: "公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。",
-  },
-  {
-    id: "00003",
-    name: "秦皇岛港",
-    title: "秦皇岛港",
-    type: "港口",
-    descr: "秦皇岛港分为东、西两个港区，现有生产性泊位50个，年设计通过能力2.26亿吨，经营货类主要包括煤炭、金属矿石、油品及液体化工、集装箱及其他杂货等。",
-    position: { x: 119.61254, y: 39.92572 },
-    style: { top: "30%", right: "46.8%" },
-    CORP_INFO_ID: "",
-    description: "秦皇岛港分为东、西两个港区，现有生产性泊位50个，年设计通过能力2.26亿吨，经营货类主要包括煤炭、金属矿石、油品及液体化工、集装箱及其他杂货等。",
-  },
-  {
-    id: "00004",
-    name: "曹妃甸实业港务",
-    title: "曹实业",
-    type: "港口",
-    descr: "公司现共有6个泊位(5-30万吨级)，设计年通过能力6550万吨。堆场面积146万平米，堆存能力1350万吨，大型装卸设备23台套。",
-    position: { x: 118.51022, y: 38.93503 },
-    CORP_INFO_ID: "8854edee3aa94be496cee676b6d4845a",
-    style: { top: "49%", left: "38.5%" },
-    description: "公司现共有6个泊位(5-30万吨级)，设计年通过能力6550万吨。堆场面积146万平米，堆存能力1350万吨，大型装卸设备23台套。",
-  },
-];
-const BiScreen = () => {
-  const [bubbleVisibleMeta, setBubbleVisibleMeta] = useState({});
-
-  const handleBubbleVisible = (id) => {
-    const newVisibleMeta = {};
-    newVisibleMeta[id] = true;
-    setBubbleVisibleMeta(newVisibleMeta);
-  };
-
-  const handleBubbleClose = (id) => {
-    setBubbleVisibleMeta(prev => ({
-      ...prev,
-      [id]: false,
-    }));
-  };
-
-  useMount(() => {
-    autofit.init({
-      dw: 1920,
-      dh: 1080,
-      el: "#screenContainerId",
-      resize: true,
-    });
-
-    return () => {
-      autofit.off();
-    };
-  });
-
+function BiScreen() {
   return (
-    <div id="screenContainerId" className="screen-container" style={{ backgroundImage: `url(${backgroundimg})` }}>
-      {/* 顶部标题区 */}
-      <TopTitleArea />
-
-      {/* 左中右面板 */}
-      <div className="screen-body">
-        {/* 左侧面板 */}
-        <LeftPanel />
-
-        {/* 中间面板 */}
-        {/* <CenterArea initPoint={initPoint} /> */}
-
-        {/* 右侧面板 */}
-        {/* <RightPanel /> */}
+    <div className="screen-container"  style={{ backgroundImage: `url(${backgroundimg})` }}>
+      <Header />
+      <div className="screen-content">
+        <Leftpanel/>
+        <Rightpanel/>
+        <Bottom/>
       </div>
-
-      {/* 地图三个点位信息坐标 start */}
-      {mockPoints.map((item, index) => (
-        <div key={index} className="center-area__point" style={item.style}>
-          {item.id === "00003"
-            ? (
-                <div className="img">
-                  <img
-                    src={ico2}
-                    alt=""
-                    onClick={() => handleBubbleVisible(item.id)}
-                  />
-                  <img src={icobg2} alt="" />
-                </div>
-              )
-            : (
-                <div className="img">
-                  <img
-                    src={ico1}
-                    alt=""
-                    onClick={() => handleBubbleVisible(item.id)}
-                  />
-                  <img
-                    src={icobg1}
-                    alt=""
-                  />
-                </div>
-              )}
-          <div className="bubble-box">
-            {bubbleVisibleMeta[item.id] && (
-              <Bubble
-                id={item.id}
-                title={item.name}
-                description={item.descr || item.description || "暂无描述"}
-                onClose={() => handleBubbleClose(item.id)}
-              />
-            )}
-          </div>
-        </div>
-      ))}
-      {/* 地图三个点位信息坐标 end */}
     </div>
   );
-};
+}
 
-export default Connect([NS_BI], true)(BiScreen);
+export default BiScreen;

src/pages/Container/Bi/index.less

@@ -1,818 +1,9 @@
-/* 顶部标题区域样式 */
-.top-title-area {
-  box-sizing: border-box;
-  width: 100%;
-  height: 75px;
-
-  .top-title-area__back {
-    width: 65px;
-    height: 32px;
+.screen-container{
+  width: 100vw;
+  height: 100vh;
+  .screen-content{
+    width: 100%;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    position: absolute;
-    top: 30px;
-    left: 17px;
-    color: #fff;
-    font-size: 17px;
-    cursor: pointer;
-
-    .icon-arrow__left {
-      font-size: 20px;
-    }
-  }
-
-  .top-title-area__img {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    line-height: 80px;
-    position: relative;
-    background-origin: border-box;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-
-    .top-title-area__img__text {
-      user-select: none;
-      background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      font-size: 40px;
-      font-weight: bold;
-    }
-
-    .top-title-area__img__box {
-      position: absolute;
-      top: 53px;
-      left: 50%;
-    }
-
-    .top-title-area__right {
-      position: absolute;
-      top: 30px;
-      right: 17px;
-      width: 110px;
-      height: 32px;
-      cursor: pointer;
-      background-image: url("../../../assets/images/public/bigScreen/bg7.png");
-      background-origin: border-box;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      color: #fff;
-
-      .top-title-area__right__text {
-        user-select: none;
-        width: 60px;
-        position: absolute;
-        top: -24px;
-        left: 40px;
-        height: 32px;
-      }
-    }
-
-    .top-title-area__img__guang {
-      animation: scale 2s infinite;
-    }
+    justify-content: space-between;
   }
 }
-
-@keyframes scale {
-  0% {
-    transform: translateX(-50%) scale(1.2);
-  }
-
-  50% {
-    transform: translateX(-50%) scale(0.6);
-  }
-
-  100% {
-    transform: translateX(-50%) scale(1.2);
-  }
-}
-
-/* 主容器样式 */
-.screen-container {
-  background-origin: border-box;
-  background-repeat: no-repeat;
-  position: relative;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-}
-
-.screen-body {
-  box-sizing: border-box;
-  padding-top: 10px;
-  width: 100%;
-  display: grid;
-  grid-template-columns: 422px 1fr 450px;
-  gap: 8px;
-}
-
-/* 地图点位样式 */
-.center-area__point {
-  position: absolute;
-
-  .img {
-    cursor: pointer;
-    animation: moveUpDown 1.3s infinite ease-in-out;
-    position: relative;
-
-    img:nth-child(1) {
-      width: 52px;
-      height: 54px;
-      position: absolute;
-      top: -52px;
-      left: 21px;
-    }
-
-    img:nth-child(2) {
-      width: 96px;
-      height: 31px;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  .bubble-box {
-    width: 380px;
-    position: absolute;
-    top: 0;
-    left: 45px;
-  }
-}
-
-/* 左侧面板样式 */
-.left-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  z-index: 100;
-}
-
-/* 通用卡片样式 */
-.card {
-  width: 100%;
-  background: rgba(4, 24, 52, 0);
-  overflow: hidden;
-}
-
-.card-header {
-  width: 100%;
-  background-origin: border-box;
-  background-position: left;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.card-header__text {
-  line-height: 35px;
-  padding-left: 30px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-}
-
-.weather-card__content {
-  padding: 5px 20px;
-  padding-bottom: 0;
-}
-
-.weather-main {
-  display: flex;
-  align-items: center;
-  gap: 45px;
-  margin-bottom: 15px;
-}
-
-.weather-icon {
-  width: 62px;
-  height: 53px;
-  text-align: center;
-
-  .buttom {
-    width: 100%;
-    height: 20%;
-    color: #fff;
-    font-size: 12px;
-    text-align: center;
-  }
-}
-
-
-
-
-.weather-info {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 45px;
-
-  .weather-info__item {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    gap: 8px;
-
-    &>img {
-      animation: zooming 1.3s infinite ease-in-out;
-    }
-
-    .weather-info__text {
-      color: #fff;
-
-      &>p:nth-child(1) {
-        font-size: 12px;
-        margin: 0;
-      }
-
-      &>p:nth-child(2) {
-        font-size: 18px;
-        color: #00e7ff;
-        margin: 0;
-      }
-    }
-  }
-}
-
-.temperature {
-  display: flex;
-  align-items: baseline;
-  gap: 5px;
-}
-
-.temp-value {
-  font-size: 36px;
-  font-weight: bold;
-  color: #fff;
-}
-
-.temp-unit {
-  font-size: 18px;
-  color: #fff;
-}
-
-.wind-speed {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.wind-label {
-  font-size: 14px;
-  color: #fff;
-}
-
-.wind-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #05e3fb;
-}
-
-.weather-alert {
-  border-radius: 4px;
-}
-
-.weather-alert p {
-  margin: 0;
-  font-size: 14px;
-  color: #FE9E00;
-}
-
-.alert-control-card {
-
-  .card-body {
-    margin: 0 18px;
-    padding: 0 10px;
-    border: 2px solid transparent;
-    border-image: linear-gradient(to bottom, #24529B, transparent) 1 1;
-  }
-}
-
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  padding: 4px 0;
-  border-bottom: 1px solid #42698f;
-  font-weight: bold;
-  color: #fff;
-  font-size: 12px;
-}
-
-.table-header span:first-child {
-  width: 30%;
-}
-
-.table-header span:nth-child(2) {
-  width: 20%;
-  text-align: center;
-}
-
-.table-header span:last-child {
-  width: 50%;
-  padding-left: 30px;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.table-body {
-  margin-top: 10px;
-  height: 70px;
-  overflow: hidden;
-  position: relative;
-
-}
-
-.table-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(66, 105, 143, 0.3);
-  font-size: 12px;
-  color: #fff;
-}
-
-.table-row span:first-child {
-  width: 30%;
-}
-
-.table-row span:nth-child(2) {
-  width: 20%;
-  text-align: center;
-}
-
-.table-row span:last-child {
-  width: 50%;
-  padding-left: 30px;
-  text-align: right;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.status-done {
-  color: #52c41a;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-
-.status-processing {
-  color: #faad14;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-
-.status-pending {
-  color: #ff4d4f;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-
-/* 重大危险源样式 */
-.hazards-card {
-  .card-body {
-    margin: 5px 18px;
-    padding: 0 10px;
-  }
-}
-
-.hazard-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 5px 10px;
-  background: rgba(19, 47, 112, 0.1);
-  border: 1px solid #ff4d4f;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-bottom: 8px;
-  color: #fff;
-}
-
-.hazard-icon {
-  font-size: 20px;
-}
-
-.hazard-name {
-  font-size: 14px;
-}
-
-.selected-hazard {
-  margin-bottom: 5px;
-}
-
-/* 危险源等级统计 */
-.hazard-levels {
-  display: flex;
-  gap: 15px;
-  margin-bottom: 5px;
-}
-
-.hazard-level {
-  flex: 1;
-  background: rgba(19, 47, 112, 0.1);
-  border: 1px solid #42698f;
-  border-radius: 4px;
-  padding: 5px 10px;
-}
-
-.hazard-level__title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #05e3fb;
-  margin-bottom: 8px;
-}
-
-.hazard-level__content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.hazard-level__item {
-  font-size: 12px;
-  color: #fff;
-}
-
-.tank-status-scroller {
-  height: 114px;
-  overflow: hidden;
-  position: relative;
-}
-
-.tank-status-scroll-content {
-  animation: scroll-up 10s linear infinite;
-}
-
-@keyframes scroll-up {
-  0% {
-    transform: translateY(0);
-  }
-
-  100% {
-    transform: translateY(-50%);
-  }
-}
-
-.tank-status-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 10px;
-  background: rgba(19, 47, 112, 0.1);
-  border-bottom: 1px solid rgba(66, 105, 143, 0.3);
-  font-size: 12px;
-  color: #fff;
-  // height: 38px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.tank-status-item:last-child {
-  border-bottom: none;
-}
-
-.tank-status.normal {
-  color: #52c41a;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: bold;
-}
-
-.tank-status.warning {
-  color: #faad14;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: bold;
-}
-
-/* 储罐状态和报警处置情况容器 */
-.tank-alarm-container {
-  display: flex;
-  gap: 15px;
-}
-
-.tank-status-list {
-  flex-basis: 50%;
-}
-
-/* 报警处置情况 */
-.alarm-handling {
-  flex-basis: 50%;
-  background: rgba(19, 47, 112, 0.1);
-  border: 1px solid #42698f;
-  border-radius: 4px;
-  padding: 5px 10px;
-}
-
-.alarm-handling__title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #05e3fb;
-  margin-bottom: 8px;
-}
-
-.alarm-handling__content {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.alarm-handling__item {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #fff;
-}
-
-.item-label {
-  color: #c0c0c0;
-}
-
-.item-value {
-  color: #fff;
-  font-weight: bold;
-}
-
-.stat-label {
-  font-size: 13px;
-  margin-bottom: 5px;
-}
-
-.stat-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #05e3fb;
-}
-
-.tank-stats {
-  display: flex;
-  gap: 20px;
-}
-
-.tank-group {
-  flex: 1;
-  padding: 10px;
-  background: rgba(66, 105, 143, 0.2);
-  border: 1px solid #42698f;
-  border-radius: 4px;
-}
-
-.tank-group-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.tank-info {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  color: #fff;
-  font-size: 13px;
-}
-
-/* 储罐状态样式 */
-.tank-status-card {
-  @extend .card;
-}
-
-.tank-list {
-  margin-bottom: 15px;
-}
-
-.tank-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid rgba(66, 105, 143, 0.3);
-  color: #fff;
-  font-size: 14px;
-}
-
-.tank-status {
-  padding: 2px 12px;
-  border-radius: 10px;
-  font-size: 12px;
-}
-
-.tank-status.normal {
-  color: #52c41a;
-  background: rgba(82, 196, 26, 0.2);
-}
-
-.tank-status.warning {
-  color: #faad14;
-  background: rgba(250, 173, 20, 0.2);
-}
-
-.handling-status {
-  padding: 12px;
-  background: rgba(66, 105, 143, 0.2);
-  border: 1px solid #42698f;
-  border-radius: 4px;
-}
-
-.handling-header h4 {
-  margin: 0 0 10px 0;
-  font-size: 14px;
-  color: #fff;
-}
-
-.handling-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.handling-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #fff;
-  font-size: 13px;
-}
-
-.flow-machine-tooltip {
-  background: rgba(35, 53, 93, 0.95);
-  border: 1px solid #42698f;
-  border-radius: 4px;
-  padding: 10px;
-  color: #fff;
-  font-size: 13px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-.tooltip-content {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.tooltip-title {
-  font-weight: bold;
-  margin-bottom: 5px;
-  color: #05e3fb;
-}
-
-.operation-status-card .table-header span {
-  width: 20%;
-  text-align: center;
-}
-
-.operation-status-card .table-row span {
-  width: 20%;
-  text-align: center;
-  font-size: 12px;
-}
-
-/* 右侧面板样式 */
-.right-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  z-index: 100;
-}
-
-/* 气泡样式 */
-.bubble-wrap {
-  width: 100%;
-  z-index: 1500;
-
-  .bubble-box {
-    width: 100%;
-    border-radius: 4px;
-    border: 1px solid #42698f;
-    background-color: rgb(35 53 93 / 74%);
-    animation: slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-
-    .bubble-wrap__header {
-      display: flex;
-      padding: 10px 14px;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid #42698f;
-
-      .bubble-wrap__title {
-        text-align: start;
-        font-size: 16px;
-        font-weight: bold;
-        color: #ffffff;
-      }
-
-      .bubble-wrap__close {
-        width: 12px;
-        height: 12px;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        cursor: pointer;
-      }
-    }
-
-    .bubble-wrap__content {
-      background-color: rgb(74 101 161 / 38%);
-      padding: 25px 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      color: #fff;
-      font-size: 14px;
-
-      .content__label {
-        width: 110px;
-        color: #fff;
-        font-size: 14px;
-      }
-
-      .content__text {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: normal;
-        height: 48px;
-      }
-    }
-
-    .bubble-wrap__footer {
-      background-color: rgb(74 101 161 / 38%);
-      padding: 10px 14px;
-      text-align: right;
-
-      .footer__text {
-        color: #05e3fb;
-        font-size: 14px;
-        cursor: pointer;
-        margin: 0;
-        display: inline-flex;
-        align-items: center;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
-
-/* 动画效果 */
-@keyframes moveUpDown {
-
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-5px);
-  }
-}
-
-@keyframes moveUpDown__2 {
-
-  0%,
-  100% {
-    transform: translateX(12px) translateY(-10px);
-  }
-
-  50% {
-    transform: translateX(12px) translateY(-15px);
-  }
-}
-
-@keyframes zooming {
-
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-}
-
-@keyframes slide-in-elliptic-bottom-fwd {
-  0% {
-    transform: translateY(600px) rotateX(30deg) scale(0);
-    transform-origin: 50% 100%;
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0) rotateX(0) scale(1);
-    transform-origin: 50% 100%;
-    opacity: 1;
-  }
-}