<template>
  <div id="ZHQL">
    <div
      :class="[
        'LeftBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
      ]"
    >
      <div class="ComBox LeftBox1_1">
        <div class="Box_header">桥梁简介</div>
        <div class="Box_Body">
          <img
            src="@/assets/images/Sponge_screen/QiaoLiang/jianjie_img@2x.png"
            class="JJImg"
          />
          <div class="JJFont">
            延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。
          </div>
        </div>
      </div>
      <div class="ComBox LeftBox1_2">
        <div class="Box_header">感知设备</div>
        <div class="Box_Body GZSB">
          <div class="GZSBList" v-for="item in AllData.GZSBData">
            <img :src="item.icon" class="GZSBListImg" alt="" />
          </div>
        </div>
      </div>
      <div class="ComBox LeftBox1_3">
        <div class="Box_header">视频监控</div>
        <div class="Box_Body SPJK">
          <div class="SPJKList" v-for="item in AllData.SPJKData">
            <img :src="item.icon" class="SPJKListImg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div
      :class="[
        'RightBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
      ]"
    >
      <div class="ComBox RightBox1_1">
        <div class="Box_header">运行监测</div>
        <div class="Box_Body">
          <div class="YXJC_Box YXJC_Box1">
            <div class="YXJC_Box_Header">
              <img
                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
                class="YXJC_Box_HeaderIcon"
              />
              <span class="YXJC_Box_HeaderFont">结构监测</span>
            </div>
            <div class="YXJC_Box_body">
              <div class="JGBoxLeft">
                <div class="JGBoxList">
                  <div class="Font">挠度</div>
                  <div class="ColorBox" style="background: #00ff9c"></div>
                </div>
                <div class="JGBoxList">
                  <div class="Font">位移</div>
                  <div class="ColorBox" style="background: #358fff"></div>
                </div>
                <div class="JGBoxList">
                  <div class="Font">裂缝</div>
                  <div class="ColorBox" style="background: #00ff9c"></div>
                </div>
              </div>
              <div class="JGBoxRight">
                <div class="JGBoxList">
                  <div class="Font">振动</div>
                  <div class="ColorBox" style="background: #ffc37c"></div>
                </div>
                <div class="JGBoxList">
                  <div class="Font">索力</div>
                  <div class="ColorBox" style="background: #00ff9c"></div>
                </div>
                <div class="JGBoxList">
                  <div class="Font">应变</div>
                  <div class="ColorBox" style="background: #00ff9c"></div>
                </div>
              </div>
              <!-- gif  -->
              <div class="JGGIFBox">
                <img
                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
                  class="JGGIF"
                />
                <span class="JGNum">90</span>
                <span class="JGUnit">分</span>
              </div>
            </div>
          </div>
          <div class="YXJC_Box YXJC_Box2">
            <div class="YXJC_Box_Header">
              <img
                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
                class="YXJC_Box_HeaderIcon"
              />
              <span class="YXJC_Box_HeaderFont">通行监测</span>
            </div>
            <div class="YXJC_Box_body">
              <img
                src="@/assets/images/Sponge_screen/QiaoLiang/txjc_img@2x.png"
                class="YXJC_Box2Img"
              />
            </div>
          </div>
          <div class="YXJC_Box YXJC_Box3">
            <div class="YXJC_Box_Header">
              <img
                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
                class="YXJC_Box_HeaderIcon"
              />
              <span class="YXJC_Box_HeaderFont">负荷监测</span>
            </div>
            <div class="YXJC_Box_body">
              <div class="YXJC_Box3_tableHeader">
                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
              </div>
              <div class="YXJC_Box3_tableBody">
                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
                    item.fx
                  }}</span>
                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
                    item.cp
                  }}</span>
                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
                    item.sj
                  }}</span>
                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
                    item.zz
                  }}</span>
                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
                    item.cz
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ComBox RightBox1_2">
        <div class="Box_header">检测评估</div>
        <div class="Box_Body JCPG">
          <div class="FBox">
            <span class="Font1">&nbsp;2023年 11月20日</span>
            <span class="Font2">最近一次检测</span>
          </div>
          <div class="FBox">
            <span class="Font1">良好</span>
            <span class="Font2">整体工作性能</span>
          </div>
          <div class="FBox">
            <span class="Font1">二类</span>
            <span class="Font2">技术状况等级</span>
          </div>
          <div class="CBox">
            <span class="Font1">检测单位</span>
            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
          </div>
        </div>
      </div>
    </div>
    <div
      :class="[
        'TopBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
      ]"
    >
      <div class="TopInfoList" v-for="item in AllData.TopInfoData">
        <img class="TopInfoListIcon" :src="item.icon" alt="" />
        <div class="TopInfoListFont">{{ item.font }}</div>
        <div class="TopInfoListNum">
          {{ item.num }} <span class="TopInfoListunit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="ZHQL">
import { ref, reactive, toRefs, onMounted } from "vue";
// 感知设备引入
import GZSB1 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png";
import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
// 视频监控引入
import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
// 顶部信息展示
import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
const AllData = reactive({
  // 感知设备
  GZSBData: [
    {
      icon: GZSB1,
      id: 1,
    },
    {
      icon: GZSB2,
      id: 2,
    },
    {
      icon: GZSB3,
      id: 3,
    },
    {
      icon: GZSB4,
      id: 4,
    },
    {
      icon: GZSB5,
      id: 5,
    },
    {
      icon: GZSB6,
      id: 6,
    },
  ],
  // 视频监控
  SPJKData: [
    {
      icon: SPJK1,
      id: 1,
    },
    {
      icon: SPJK2,
      id: 2,
    },
    {
      icon: SPJK3,
      id: 3,
    },
    {
      icon: SPJK4,
      id: 4,
    },
  ],
  // 负荷检测
  YXJCTableData: [
    {
      fx: "北向南",
      cp: "陕J-24YU8",
      sj: "2024-09-30 12:26:00",
      zz: "54.6",
      cz: "16.2",
    },
    {
      fx: "南北向",
      cp: "陕J-24YU8",
      sj: "2024-09-29 16:32:00",
      zz: "48",
      cz: "9.6",
    },
  ],
  // 顶部信息展示
  TopInfoData: [
    {
      icon: QL_WD,
      font: "温度",
      num: "16",
      unit: "℃",
    },
    {
      icon: QL_SD,
      font: "湿度",
      num: "32",
      unit: "%",
    },
    {
      icon: QL_FS,
      font: "风俗",
      num: "5.2",
      unit: "m/s",
    },
    {
      icon: QL_FL,
      font: "风力",
      num: "4",
      unit: "级",
    },
  ],
});
const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {});
</script>

<style lang="scss" scoped>
#ZHQL {
  .LeftBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    left: 10px;
    top: 70px;
    background: linear-gradient(
      0deg,
      rgba(0, 43, 67, 0.8) 0%,
      rgba(0, 69, 108, 0.8) 100%
    );
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: inset 0 0 5px 5px #47eef38a;

    .LeftBox1_1 {
      width: 100%;
      height: calc(100% - 235px - 280px);

      .JJImg {
        width: 100%;
        height: 214px;
        display: inline-block;
        margin: 0;
        box-sizing: border-box;
      }
      .JJFont {
        width: 100%;
        height: calc(100% - 225px);
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #61cafc;
        line-height: 26px;
        text-indent: 2ch;
        box-sizing: border-box;
        padding: 20px;
        background: linear-gradient(
          0deg,
          rgba(35, 152, 196, 0.5) 0%,
          rgba(0, 80, 133, 0.3) 100%
        );
        // animation: moveUp 2s infinite;
        overflow: auto;
      }
    }
    .LeftBox1_2 {
      width: 100%;
      height: 235px;

      .GZSB {
        .GZSBList {
          width: 136px;
          height: 76px;
          float: left;
          margin: 8px 3px;
          cursor: pointer;

          .GZSBListImg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .LeftBox1_3 {
      width: 100%;
      height: 280px;

      .SPJK {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-around;
        align-items: center;
        .SPJKList {
          width: 203px;
          height: 104px;

          .SPJKListImg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    background: linear-gradient(
      0deg,
      rgba(0, 43, 67, 0.8) 0%,
      rgba(0, 69, 108, 0.8) 100%
    );
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: inset 0 0 5px 5px #47eef38a;

    .RightBox1_1 {
      width: 100%;
      height: calc(100% - 255px);
      .YXJC_Box {
        width: 100%;

        box-sizing: border-box;
        padding-top: 10px;

        .YXJC_Box_Header {
          height: 24px;
          width: 100%;

          .YXJC_Box_HeaderIcon {
            width: 24px;
            height: 24px;
            vertical-align: middle;
          }
          .YXJC_Box_HeaderFont {
            display: inline-block;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #ebfeff;
            height: 24px;
            line-height: 20px;
            position: relative;

            &::after {
              content: "";
              width: 60px;
              height: 10px;
              background: linear-gradient(
                0deg,
                rgba(0, 242, 255, 0.5) 0%,
                rgba(0, 242, 255, 0) 100%
              );
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }

        .YXJC_Box_body {
          width: 100%;
          height: calc(100% - 24px);
          box-sizing: border-box;
          padding-top: 10px;
          position: relative;
        }
      }
      .YXJC_Box1 {
        height: 200px;

        .JGBoxLeft {
          width: 150px;
          height: 154px;
          position: absolute;
          top: 10px;
          left: 10px;

          .JGBoxList {
            height: 40px;
            width: 150px;
            border-left: 4px solid #00f2ff;
            background: linear-gradient(
              90deg,
              rgba(21, 210, 253, 0.2) 0%,
              rgba(21, 210, 253, 0) 100%
            );
            margin-bottom: 10px;
            text-align: left;
            position: relative;

            .Font {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 16px;
              color: #ebfeff;
              height: 40px;
              line-height: 40px;
              width: 50px;
              position: absolute;
              left: 20px;
              text-align: left;
            }

            .ColorBox {
              width: 10px;
              height: 10px;
              border-radius: 10px;
              position: absolute;
              top: 15px;
              left: 80px;
            }
          }
        }

        .JGBoxRight {
          width: 150px;
          height: 154px;
          position: absolute;
          top: 10px;
          right: 10px;

          .JGBoxList {
            height: 40px;
            width: 150px;
            border-right: 4px solid #00f2ff;
            background: linear-gradient(
              90deg,
              rgba(21, 210, 253, 0) 0%,
              rgba(21, 210, 253, 0.2) 100%
            );
            margin-bottom: 10px;
            position: relative;
            .Font {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 16px;
              color: #ebfeff;
              height: 40px;
              line-height: 40px;
              width: 50px;
              position: absolute;
              right: 20px;
              text-align: right;
            }

            .ColorBox {
              width: 10px;
              height: 10px;
              border-radius: 10px;
              position: absolute;
              top: 15px;
              right: 80px;
            }
          }
        }

        .JGGIFBox {
          position: absolute;
          top: 0;
          left: 138px;
        }
        .JGGIF {
          width: 154px;
          height: 154px;
        }
        .JGNum {
          position: absolute;
          left: 50%;
          margin-left: -30px;
          top: 50%;
          margin-top: -25px;
          width: 50px;
          height: 50px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 38px;
          color: #3efeca;
          line-height: 51px;
        }
        .JGUnit {
          position: absolute;
          left: 50%;
          margin-left: 20px;
          top: 50%;
          margin-top: -20px;
          width: 30px;
          height: 30px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #cef6ff;
          line-height: 51px;
        }
      }
      .YXJC_Box2 {
        height: 245px;

        .YXJC_Box2Img {
          width: 100%;
          height: 100%;
        }
      }
      .YXJC_Box3 {
        height: calc(100% - 445px);

        .YXJC_Box3_tableHeader {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background: linear-gradient(
            0deg,
            rgba(21, 210, 253, 0.2) 0%,
            rgba(0, 158, 164, 0.5) 100%
          );
          border-radius: 2px;
        }

        .YXJC_Box3_tableBody {
          width: 100%;
          height: calc(100% - 40px);
          overflow: auto;

          .YXJC_Box3_tableList {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background: linear-gradient(
              0deg,
              rgba(21, 210, 253, 0.2) 0%,
              rgba(0, 158, 164, 0.05) 100%
            );
            border-radius: 2px;

            .YXJC_Box3_tableSpan5 {
              color: #ff3f3f;
            }
          }
        }

        .YXJC_Box3_tableSpan {
          display: inline-block;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ebfeff;
          text-align: center;
        }
        .YXJC_Box3_tableSpan1 {
          width: 60px;
        }
        .YXJC_Box3_tableSpan2 {
          width: 100px;
        }
        .YXJC_Box3_tableSpan3 {
          width: 158px;
        }
        .YXJC_Box3_tableSpan4 {
          width: 50px;
        }
        .YXJC_Box3_tableSpan5 {
          width: 50px;
        }
      }
    }
    .RightBox1_2 {
      height: 245px;
      width: 100%;
      margin-top: 10px;

      .JCPG {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        display: flex;
        .FBox {
          width: 135px;
          height: 130px;
          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
            center;
          background-size: cover;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
          text-align: center;
          .Font1 {
            display: inline-block;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 20px;
            color: #00f2ff;
            line-height: 26px;
            width: 100px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .Font2 {
            display: inline-block;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 30px;
            width: 100px;
            height: 30px;
          }
        }
        .CBox {
          width: 428px;
          height: 39px;
          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
            center;
          background-size: cover;
          margin-top: 10px;
          .Font1 {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 16px;
            color: #ebfeff;
            line-height: 39px;
            line-height: 39px;
            display: inline-block;
            padding: 0 20px;
          }
          .Font2 {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 16px;
            color: #00f2ff;
            line-height: 51px;
            line-height: 39px;
            line-height: 39px;
            display: inline-block;
          }
        }
      }
    }
  }
  .TopBox {
    width: calc(100% - 1000px);
    height: 65px;
    position: absolute;
    left: 500px;
    top: 110px;
    // background: linear-gradient(
    //   0deg,
    //   rgba(0, 43, 67, 0.8) 0%,
    //   rgba(0, 69, 108, 0.8) 100%
    // );
    border-radius: 6px;
    // border: 1px solid #47eef3;
    box-sizing: border-box;
    // box-shadow: inset 0 0 5px 5px #47eef38a;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;

    .TopInfoList {
      width: 180px;
      height: 65px;

      .TopInfoListIcon {
        width: 67px;
        height: 65px;
        float: left;
      }

      .TopInfoListFont {
        width: 113px;
        height: 35px;
        float: left;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 35px;
        padding-left: 12px;
      }
      .TopInfoListNum {
        padding-left: 12px;
        width: 113px;
        height: 30px;
        float: left;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 22px;
        color: #15d2fd;

        .TopInfoListunit {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          color: #cef6ff;
        }
      }
    }
  }
  // 左右两侧展示板块公共样式
  .ComBox {
    width: 100%;
    box-sizing: border-box;
    .Box_header {
      width: 100%;
      height: 43px;
      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
        center;
      background-size: cover;
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 23px;
      color: #ebfeff;
      line-height: 43px;
      box-sizing: border-box;
      padding-left: 35px;
    }

    .Box_Body {
      width: 100%;
      height: calc(100% - 43px);
      box-sizing: border-box;
      position: relative;
      overflow: auto;
    }
  }
  .color_red {
    color: #ff3f3f !important;
  }

  @keyframes moveUp {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-20px);
    }
  }
}
</style>