bxztApp/packages/screen/src/views/RiskWarning/Dialog/tunnelInfoDialog.vue

<template>
  <div class="tunnel-info-dialog" v-if="visible">
    <!-- 四个角的装饰 -->
    <div class="corner corner-top-left"></div>
    <div class="corner corner-top-right"></div>
    <div class="corner corner-bottom-left"></div>
    <div class="corner corner-bottom-right"></div>

    <div class="dialog-header">
      <div class="header-title">
        <span class="title-text">{{ rescueTeamData.title }}</span>
        <img
          class="title-icon"
          src="../../../assets/RiskWarning_img/图标_media_dvr@2x.png"
          alt=""
        />
      </div>
      <!-- <div class="close-btn" @click="closeDialog">
        <span class="close-icon">×</span>
      </div> -->
      <div class="close-btn" style="pointer-events: auto" @click="closeDialog">
        <el-icon color="#5DD7F6"><Close /></el-icon>
      </div>
    </div>
    <div class="dialog-content">
      <div class="info-item" v-for="(item, index) in rescueTeamData.items" :key="index">
        <label class="info-label">{{ item.label }}：</label>
        <span class="info-value">{{ item.value }}</span>
      </div>
    </div>
    <div class="dialog-imgs">
      <img
        class="dialog-img"
        v-for="(img, index) in rescueTeamData.imgs"
        :key="index"
        :src="img"
        alt=""
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { Close } from "@element-plus/icons-vue";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => ({
      title: "隧道信息",
      items: [
        { label: "隧道名称", value: "蔺市隧道右线" },
        { label: "编号", value: "G212线" },
        { label: "所属区县", value: "涪陵" },
        { label: "隧道长度", value: "1782(米)" },
        { label: "路线编号", value: "G50351" },
        { label: "路线名称", value: "石柱-重庆" },
        { label: "建成时间", value: "2023年" },
        { label: "入口桩号", value: "159.079" },
        { label: "隧道净宽", value: "22(米)" },
        { label: "隧道净高", value: "5(米)" },
        { label: "长度分类", value: "长隧道" },
        { label: "评定等级", value: "2类" },
      ],
    }),
  },
});

// 边坡信息数据
const slopeData = {
  title: "边坡信息",
  items: [
    { label: "边坡坡长", value: "0.1(km)" },
    { label: "边坡最大高度", value: "46(m)" },
    { label: "边坡构成", value: "土石混合边坡 (坡高>=25m)" },
    { label: "风险等级", value: "三级 (一般)" },
    { label: "变形形式", value: "框架梁" },
    { label: "监测设施设置", value: "无" },
    { label: "起点桩号", value: "1447.7" },
    { label: "止点桩号", value: "1447.8" },
  ],
};

// 隧道信息数据
const tunnelData = {
  title: "隧道信息",
  items: [
    { label: "隧道名称", value: "蔺市隧道右线" },
    { label: "编号", value: "G212 线" },
    { label: "所属区县", value: "涪陵" },
    { label: "隧道长度", value: "1782(米)" },
    { label: "路线编号", value: "G50351" },
    { label: "路线名称", value: "石柱 - 重庆" },
    { label: "建成时间", value: "2023 年" },
    { label: "入口桩号", value: "159.079" },
    { label: "隧道净宽", value: "22(米)" },
    { label: "隧道净高", value: "5(米)" },
    { label: "长度分类", value: "长隧道" },
    { label: "评定等级", value: "2 类" },
  ],
};

// 桥梁信息数据
const bridgeData = {
  title: "桥梁信息",
  items: [
    { label: "桥梁名称", value: "蔺市隧道右线" },
    { label: "编号", value: "K212 线" },
    { label: "所属区县", value: "涪陵" },
    { label: "桥梁长度", value: "46(米)" },
    { label: "路线编号", value: "G50351" },
    { label: "路线名称", value: "银川 - 重庆" },
    { label: "建成时间", value: "2013" },
    { label: "中心桩号", value: "1278.994" },
    { label: "桥梁长度", value: "46 米" },
    { label: "跨径总长", value: "40 米" },
    { label: "跨径分类", value: "长隧道" },
    { label: "技术状况", value: "一类" },
  ],
};

// 抢险队伍数据
const rescueTeamData = {
  title: "抢险队伍",
  items: [
    { label: "队伍名称", value: "重庆公路应急抢险指挥及物资储备中心" },
    { label: "防范状态", value: "已出动" },
    { label: "人数", value: "50" },
    { label: "联系人", value: "18602981928" },
    { label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" },
    { label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" },
  ],
  imgs: ["", "", "", "", ""],
};

defineExpose({
  slopeData,
  tunnelData,
  bridgeData,
  rescueTeamData,
});

const emit = defineEmits(["close"]);

const closeDialog = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
// 视频屏幕自适应 - 基于视口宽度动态调整
@function vw($px) {
  @return calc($px / 1920 * 100vw);
}
.tunnel-info-dialog {
  max-width: vw(300);
  width: vw(300);
  max-height: vw(600);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(64, 169, 255, 0.2);
  border: 1px solid rgba(64, 169, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 20%;
  left: 45%;
  z-index: 1000;

  &::-webkit-scrollbar {
    display: none;
  }
  // 四个角的装饰
  .corner {
    position: absolute;
    width: vw(20);
    height: vw(20);
    border: 1px solid #40a9ff;
    pointer-events: none;

    &.corner-top-left {
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: none;
    }

    &.corner-top-right {
      top: 0;
      right: 0;
      border-left: none;
      border-bottom: none;
    }

    &.corner-bottom-left {
      bottom: 0;
      left: 0;
      border-right: none;
      border-top: none;
    }

    &.corner-bottom-right {
      bottom: 0;
      right: 0;
      border-left: none;
      border-top: none;
    }
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vw(16) vw(20);
    border-bottom: 1px solid rgba(64, 169, 255, 0.2);

    .header-title {
      display: flex;
      align-items: center;
      gap: vw(10);

      .title-text {
        font-size: vw(16);
        font-weight: 600;
        color: #fff;
      }

      .title-icon {
        width: vw(24);
        height: vw(24);
      }
    }

    .close-btn {
      cursor: pointer;
      transition: all 0.3s;

      .close-icon {
        font-size: vw(24);
        color: rgba(255, 255, 255, 0.7);
      }

      &:hover {
        .close-icon {
          color: #fff;
        }
      }
    }
  }

  .dialog-content {
    padding: vw(16) vw(20);

    .info-item {
      display: flex;
      align-items: center;
      padding: vw(8) 0;
      border-bottom: 1px solid rgba(64, 169, 255, 0.1);

      .info-label {
        font-size: vw(14);
        color: rgba(255, 255, 255, 0.7);
        flex: 0 0 vw(100);
      }

      .info-value {
        font-size: vw(14);
        color: #4fecff;
        flex: 1;
      }
    }

    .info-item:last-child {
      border-bottom: none;
    }
  }
}
.dialog-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: vw(6);
  padding: vw(16) vw(20);
  .dialog-img {
    width: vw(75);
    height: vw(75);
  }
}
</style>