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

<template>
  <base-dialog
    v-model:visible="props.visible"
    :title="dialogTitle"
    :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 dialogItems" :key="index">
          <label class="info-label">{{ item.label }}：</label>
          <span class="info-value">{{ item.value }}</span>
        </div>
      </div>
    </template>
  </base-dialog>
</template>

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

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: "路段信息",
  };
  return titleMap[props.type] || "详细信息";
});

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

  switch (type) {
    case "project":
      return [
        { label: "项目名称", value: data.NAME || data.name || "-" },
        { label: "所属区县", value: data.COUNTY || data.county || "-" },
        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || "-" },
        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || "-" },
        { label: "项目类型", value: data.TYPE || data.type || "-" },
        { label: "建设状态", value: data.STATUS || data.status || "-" },
        { label: "开始时间", value: data.START_TIME || data.startTime || "-" },
        { label: "预计完成", value: data.END_TIME || data.endTime || "-" },
      ];
    case "tunnel":
      return [
        { label: "隧道名称", value: data.NAME || data.name || data.GL1_SDMC || "-" },
        { label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
        { label: "隧道长度", value: data.LENGTH || data.GL1_SDCD ? `${data.LENGTH || data.GL1_SDCD}(米)` : "-" },
        { label: "隧道净宽", value: data.WIDTH || data.GL1_SDKD ? `${data.WIDTH || data.GL1_SDKD}(米)` : "-" },
        { label: "隧道净高", value: data.HEIGHT || data.GL1_SDGD ? `${data.HEIGHT || data.GL1_SDGD}(米)` : "-" },
        { label: "建成时间", value: data.BUILD_TIME || data.buildTime || data.GL1_JCSJ || "-" },
        { label: "评定等级", value: data.GRADE || data.grade || data.GL1_PDDJ || "-" },
      ];
    case "bridge":
      return [
        { label: "桥梁名称", value: data.NAME || data.name || data.GL1_QLMC || "-" },
        { label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
        { label: "桥梁长度", value: data.LENGTH || data.GL1_QLCD ? `${data.LENGTH || data.GL1_QLCD}(米)` : "-" },
        { label: "桥梁宽度", value: data.WIDTH || data.GL1_QLKD ? `${data.WIDTH || data.GL1_QLKD}(米)` : "-" },
        { label: "桥梁类型", value: data.TYPE || data.type || data.GL1_QLXZ || "-" },
        { label: "建成时间", value: data.BUILD_TIME || data.buildTime || data.GL1_JCSJ || "-" },
        { label: "评定等级", value: data.GRADE || data.grade || data.GL1_PDDJ || "-" },
      ];
    case "road":
      return [
        { label: "路段名称", value: data.NAME || data.name || data.GL1_LDMC || "-" },
        { label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
        { 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.LANE_COUNT || data.laneCount || data.GL1_CDSL || "-" },
        { label: "设计时速", value: data.SPEED_LIMIT || data.speedLimit ? `${data.SPEED_LIMIT || data.speedLimit}(km/h)` : "-" },
      ];
    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);
}

.dialog-content {
  padding: vw(10) vw(15);
  max-height: vw(300);
  overflow-y: auto;

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

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

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