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.GL1_GXSJ,
        },
        {
          label: '中心桩号',
          value: data.GL1_ZXZH || '-',
        },

        {
          label: '跨径总长',
          value: data.GL1_AKJFLDM || '-',
        },
        {
          label: '跨径分类',
          value: data.GL1_AKJFLLX || '-',
        },
        {
          label: '技术状况',
          value: data.GL1_JSZKPJDJ || '-',
        },
      ];
    case 'road':
      return [
        {
          label: '区县名称',
          value: data.GL1_QXMC || '-',
        },
        {
          label: '风险等级',
          value: data.GL1_FXDJ || '',
        },
        {
          label: '公路编号',
          value: data.GL1_GLBH,
        },
        {
          label: '位置',
          value: data.GL1_GLMC  ,
        },
        {
          label: '风险描述',
          value: data.GL1_FXMS || '-',
        },
        {
          label: '采取措施',
          value: data.GL1_CQCS || '-',
        },
        {
          label: '照片',
          value: data.photos || data.photos || '-',
        },
      ];
    case 'emergency':
      return [
        { label: '队伍名称', value: data.gl1Yjllmc || '-'  },
        { label: '防范状态', value: data.preventionStatus || '-' },
        { label: '人数', value: data.gl1Rysl || '-' },
        { label: '联系人', value: data.gl1Lxr || '-' },
        { label: '地址', value: data.gl1Xxdz || '-' },
        { label: '物资装备', value: data.materialsAndEquipments || '-' },
        { 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>