完善监测设备弹窗

guonan

7 天以前 d06f7ad0231d5fb029ab8520bf442590d3bab20b

 src/components/tools/Detail.vue

@@ -1,6 +1,6 @@
<template>
  <div class="detail" ref="detailRef">
    <div class="detail-top">{{ detailTitle }}</div>
    <div class="detail-top" :title="name">{{ detailTitle }}</div>
    <div class="detail-close" @click="closeMsg"></div>
    <div class="detail-context">
      <div v-for="(item, key) in detailList" :key="key" class="detail-item">
@@ -22,61 +22,108 @@
  dialogPositon,
} from "@/store";

import { hdByDevice } from "@/api/hpApi";

const detailList = ref([]);
const detailTitle = ref("设备详情");
const name = ref("");
function closeMsg() {
  showDeviceDetail.value = false;
  coloseDialog();
}

// 监测设备具体信息
function handlDeviceDetail() {
  // const name = deviceDetail.value.deviceForShort;
  detailTitle.value = deviceDetail.value.deviceForShort;
  detailList.value = [
    {
      name: "设备编号",
      value:
        deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
    },
    {
      name: "设备类型",
      value: deviceDetail.value.type || "",
    },
    {
      name: "安装时间",
      value: "2024-01-15 12:55:18" || deviceDetail.value.startTime,
    },
    {
      name: "更新时间",
      value: "2025-02-15 8:15:28",
    },
    {
      name: "设备位置",
      value: deviceDetail.value.deviceForShort || cityData.listData[0],
      //   value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0],
    },
  ];
async function handlDeviceDetail() {
  const hdInfo = ref();

  try {
    const res = await hdByDevice(deviceDetail.value.hdUnifiedCode);
    hdInfo.value = res.data;

    detailList.value = [
      {
        name: "设备编号",
        value: deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
      },
      {
        name: "设备类型",
        value: deviceDetail.value.type || deviceDetail.value.deviceTypeName,
      },
      {
        name: "关联隐患点",
        value: deviceDetail.value.hdName,
      },
      {
        name: "群测群防员",
        value: hdInfo.value?.groupTestGroupDefenseUserName || "暂无信息",
      },
      {
        name: "群测群防员电话",
        value: hdInfo.value?.groupTestGroupDefenseMobile || "暂无信息",
      },
    ];

    detailTitle.value = deviceDetail.value.deviceForShort;
  } catch (err) {
    console.error("获取 hdInfo 失败", err);
    detailList.value = [
      {
        name: "群测群防员",
        value: "接口异常"
      },
      {
        name: "群测群防员电话",
        value: "接口异常"
      }
    ];
  }
}

// 隐患点具体信息
function handleDistrictDetail() {
  const name = deviceDetail.value.hdName;
  detailTitle.value = name;
  detailList.value = [
    // {}
    {
      name: "隐患类型",
      name: "灾害类型",
      value: deviceDetail.value.disasterType || "泥石流",
    },
    {
      name: "主管科长",
      value: "张浩",
      name: "威胁对象",
      value: deviceDetail.value.threatObj || "居民点",
    },
    {
      name: "主管镇长",
      value: deviceDetail.value.supervisorAlcaldeUserName,
      name: "规模等级",
      value: deviceDetail.value.disasterGrade || "小型",
    },
    {
      name: "群测群防",
      name: "险情等级",
      value: deviceDetail.value.riskLevel || "小型",
    },
    {
      name: "威胁人数",
      value: deviceDetail.value.threatPersonNum || "0",
    },
    {
      name: "威胁户数",
      value: deviceDetail.value.threatHouseNum || "0",
    },
    {
      name: "威胁房数",
      value: deviceDetail.value.threatRoomNum || "0",
    },
    {
      name: "是否治理",
      value: deviceDetail.value.isGovern || "否",
    },
    {
      name: "群测群防员",
      value: deviceDetail.value.groupTestGroupDefenseUserName,
    },
    {
      name: "群测群防员电话",
      value: deviceDetail.value.groupTestGroupDefenseMobile,
    },
    {
      name: "隐患位置",
@@ -91,8 +138,10 @@
function loadClassNameDetail() {
  if (className.value == "device") {
    handlDeviceDetail();
    name.value = deviceDetail.value.deviceName;
  } else if (className.value == "district") {
    handleDistrictDetail();
    name.value = deviceDetail.value.hdName;
  }
}
const detailRef = ref(null);
@@ -155,11 +204,18 @@
  left: 1.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  line-height: 2.5rem;
  width: 16.875rem;
  width: 16.875rem; /* 容器宽度固定或限制 */
  cursor: pointer;

  /* 超出隐藏 + 省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 可选：添加过渡动画 */
  transition: all 0.3s ease;
}

.detail-close {
@@ -184,6 +240,8 @@
  top: 3.8rem;
  left: 1.25rem;
  width: 21.875rem;
  overflow-y: auto;
  height: 63%;
}

.detail-item {
@@ -193,9 +251,11 @@
  margin-left: 0.625rem;
}
.detail-name {
  width: 100px;
  display: inline-block; /* 关键 */
  max-width: 100%; /* 防止溢出 */
  font-weight: 700;
  color: #94e0c4;
  white-space: nowrap; /* 可选：防止文字换行 */
  &::after {
    content: "：";
  }