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

<template>
  <base-dialog
    v-model:visible="props.visible"
    :title="rescueTeamData.title"
    :table-data="[]"
    :table-columns="[]"
    :table-height="0"
    :total="0"
    :current-page="1"
    :page-size="10"
    :z-index="1000"
    :max-width="400"
    :show-filter="false"
    :show-pagination="false"
    @close="handleClose"
  >
    <!-- 标题栏下方自定义插槽 -->
    <template #header>
      <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>
    </template>
  </base-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import baseDialog from "../component/baseDialog.vue";

const props = 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(["update:visible", "close"]);

const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};
</script>

<style lang="scss" scoped>
// 信息项样式
.dialog-content {
  padding: 16px 20px;

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

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

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

  .info-item:last-child {
    border-bottom: none;
  }
}

// 图片样式
.dialog-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 16px 20px;
  
  .dialog-img {
    width: 75px;
    height: 75px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}
</style>