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

<template>
  <div
    v-if="props.visible"
    class="map-info-dialog"
    :style="{ backgroundImage: `url(${iconProject})` }"
  >
    <!-- 关闭按钮 -->
    <div class="dialog-close" @click="handleClose">×</div>

    <!-- 标题栏 -->
    <div class="dialog-header" @click="handleClose">
      <span class="header-title">{{ dialogTitle }}</span>
      <img class="header-icon" :src="iconTunnel" alt="" />
    </div>

    <!-- 内容区域 -->
    <div class="dialog-content">
      <div class="info-row" v-for="(item, index) in dialogItems" :key="index">
        <span class="info-label">{{ item.label }}：</span>
        <span class="info-value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import iconProject from "../../../assets/RiskWarning_img/弹窗背景@2x.png";
import iconTunnel from "../../../assets/RiskWarning_img/图标_media_dvr@2x.png";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "project", // project, tunnel, bridge, road
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:visible"]);

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

// 根据类型和数据显示不同的标题和内容
const dialogTitle = computed(() => {
  const titleMap = {
    project: "项目信息",
    tunnel: "隧道信息",
    bridge: "桥梁信息",
    road: "路段信息",
    emergency: "抢险队伍",
    slope: "边坡信息",
  };
  return titleMap[props.type] || "详细信息";
});

const dialogItems = computed(() => {
  const data = props.data;
  const type = props.type;

  switch (type) {
    case "project":
      return [
        { label: "项目名称", value: data.PROJECT_NAME || "-" },
        { label: "子项目名称", value: data.SUB_PROJECT_NAME || "-" },
        { label: "行政区域", value: data.ADMINISTRATIVE_REGION || "-" },
        { label: "驻地名称", value: data.SITE_NAME || "-" },
        { label: "驻地地址", value: data.SITE_ADDRESS || data.COUNTY || "-" },
        { label: "驻地人数", value: data.SITE_POPULATION || "-" },
        { label: "驻地类型", value: data.SITE_TYPE || "-" },
        { label: "驻地风险等级", value: data.RISK_LEVEL || "-" },
        { label: "搬迁状态", value: data.RELOCATION_STATUS || "-" },
        { label: "项目类型", value: data.PROJECT_TYPE || "-" },
        { label: "房建类型", value: data.BUILDING_TYPE || "-" },
        { label: "建设单位", value: data.CONSTRUCTION_UNIT || "-" },
        { label: "业主责任人", value: data.OWNER_RESPONSIBLE_PERSON || "-" },
        { label: "业主责任人电话", value: data.OWNER_RESPONSIBLE_PHONE || "-" },
        { label: "施工责任人", value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || "-" },
        { label: "施工责任人电话", value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || "-" },
        { label: "驻地责任人", value: data.SITE_RESPONSIBLE_PERSON || "-" },
        { label: "驻地责任人电话", value: data.SITE_RESPONSIBLE_PHONE || "-" },
        { label: "市级责任人", value: data.CITY_RESPONSIBLE_PERSON || "-" },
        { label: "市级责任人电话", value: data.CITY_RESPONSIBLE_PHONE || "-" },
        { label: "区县责任人", value: data.DISTRICT_RESPONSIBLE_PERSON || "-" },
        { label: "区县责任人电话", value: data.DISTRICT_RESPONSIBLE_PHONE || "-" },
        { label: "吹哨人", value: data.WHISTLEBLOWER_NAME || "-" },
        { label: "吹哨人电话", value: data.WHISTLEBLOWER_PHONE || "-" },
        { label: "备注", value: data.REMARKS || "-" },
      ];
    case "tunnel":
      return [
        {
          label: "隧道名称",
          value: data.GL1_SDMC || "-",
        },
        {
          label: "建成时间",
          value:
            data.HEIGHT || data.GL1_SDGD
              ? `${data.HEIGHT || data.GL1_SDGD}(米)`
              : "-",
        },

        {
          label: "编号",
          value: data.GL1_ZJ || "-",
        },
        {
          label: "入口桩号",
          value: data.GL1_RKZH || "-",
        },

        {
          label: "所属区县",
          value: data.GL1_QXMC || "-",
        },

        {
          label: "隧道净宽",
          value: data.GL1_SDJG || "-",
        },
        {
          label: "隧道净高",
          value: data.GL1_SDJK || "-",
        },
        {
          label: "隧道长度",
          value: data.GL1_SDC || "-",
        },

        {
          label: "路线编号",
          value: data.GL1_LXBH || "-",
        },
        {
          label: "长度分类",
          value: data.GL1_SDLX || "-",
        },
        {
          label: "路线名称",
          value: data.GL1_LXMC || "-",
        },

        {
          label: "评定等级",
          value: data.GL1_PDDJ || "-",
        },
      ];
    case "bridge":
      return [
        {
          label: "桥梁名称",
          value: data.GL1_QLMC || "-",
        },
        {
          label: "编号",
          value: data.GL1_QLDM || "-",
        },
        {
          label: "所属区县",
          value: data.GL1_QXMC || "-",
        },
        {
          label: "桥梁长度",
          value: data.GL1_QLQC || "-",
        },
        {
          label: "路线编号",
          value: data.GL1_QLDM || "-",
        },
        {
          label: "路线名称",
          value: data.GL1_LXMC || "-",
        },
        {
          label: "建成时间",
          value: data.TYPE || "-",
        },
        {
          label: "中心桩号",
          value: data.GL1_ZXZH  || "-",
        },

        {
          label: "跨径总长",
          value: data.GL1_AKJFLDM || "-",
        },
        {
          label: "跨径分类",
          value: data.GL1_AKJFLLX || "-",
        },
        {
          label: "技术状况",
          value: data.GL1_PDDJ || "-",
        },
      ];
    case "road":
      return [
        {
          label: "区县名称",
          value: data.GL1_QXMC || "-",
        },
        {
          label: "风险等级",
          value: data.GL1_JSDJ || "-",
        },
        {
          label: "公路编号",
          value: data.GL1_LXBH || "-",
        },
        {
          label: "位置",
          value: data.GL1_QDMC + '-' + data.GL1_ZDMC || "-",
        },
        {
          label: "风险描述",
          value:
            data.LENGTH || data.GL1_LDCD
              ? `${data.LENGTH || data.GL1_LDCD}(公里)`
              : "-",
        },
        {
          label: "采取措施",
          value:
            data.PAVEMENT_TYPE || data.pavementType || data.GL1_LMLX || "-",
        },
        {
          label: "照片",
          value: data.photos || data.photos || "-",
        },
      ];
    case "emergency":
      return [
        { label: "队伍名称", value: data.gl1Yjllmc || "-" },
        { label: "防范状态", value: data.COUNTY || data.county || "-" },
        { label: "人数", value: data.gl1Rysl || "-" },
        { label: "联系人", value: data.gl1Lxr || "-" },
        { label: "地址", value: data.gl1Xxdz || "-" },
        { label: "物资装备", value: data.COUNTY || data.county || "-" },
        { label: "照片", value: data.photos || data.photos || '-' },
      ];
    case "slope":
      return [
        { label: "边坡坡长(km)", value: data.NAME || data.name || "-" },
        { label: "边坡最大高度(m)", value: data.COUNTY || data.county || "-" },
        { label: "边坡构成", value: data.COUNTY || data.county || "-" },
        { label: "风险等级", value: data.COUNTY || data.county || "-" },
        { label: "支护形式", value: data.COUNTY || data.county || "-" },
        { label: "监测设施设置", value: data.COUNTY || data.county || "-" },
        { label: "起点桩号", value: data.photos || data.photos || [] },
        { label: "止点桩号", value: data.photos || data.photos || [] },
      ];

    default:
      return [
        { label: "名称", value: data.NAME || data.name || "-" },
        { label: "所属区县", value: data.COUNTY || data.county || "-" },
      ];
  }
});
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return calc($px / 1920 * 100vw);
}

.map-info-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: vw(400);
  // min-height: vw(200);
  background-size: 100% 100%;
  padding-bottom: vw(20);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1000;
  padding: vw(20);
  box-sizing: border-box;

  .dialog-close {
    position: absolute;
    top: vw(22);
    right: vw(15);
    width: vw(24);
    height: vw(24);
    line-height: vw(24);
    text-align: center;
    font-size: vw(30);
    color: #3e9ff0;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }

  .dialog-header {
    display: flex;
    align-items: center;
    margin-bottom: vw(15);
    padding-bottom: vw(10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    .header-icon {
      width: vw(24);
      height: vw(24);
      margin-left: vw(10);
    }

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

  .dialog-content {
    max-height: vw(350);
    padding-bottom: vw(20);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }

    .info-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: vw(8);
      line-height: 1.5;

      .info-label {
        color: rgba(255, 255, 255, 0.7);
        font-size: vw(13);
        // min-width: vw(100);
        flex-shrink: 0;
      }

      .info-value {
        color: #fff;
        font-size: vw(13);
        flex: 1;
        word-break: break-all;
      }
    }
  }
}
</style>