guonan
2025-05-16 a9c4f7775e82d93638e607fa6c5fafe22f5310b4
src/components/tools/Detail.vue
@@ -5,7 +5,9 @@
      <div class="detail-context">
         <div v-for="(item, key) in detailList" :key="key" class="detail-item">
            <div class="detail-name">{{ item.name }}</div>
            <div class="detail-value" :title="item.value">{{ item.value || "--" }}</div>
        <div class="detail-value" :title="item.value">
          {{ item.value || "--" }}
        </div>
         </div>
      </div>
   </div>
@@ -13,37 +15,28 @@
<script setup>
   import { ref, onMounted, nextTick, onUnmounted } from "vue";
   import { showDeviceDetail, deviceDetail, className, dialogPositon } from "@/store"
import {
  showDeviceDetail,
  deviceDetail,
  className,
  dialogPositon,
} from "@/store";
   // props: {
   //    deviceDetail: {
   //       type: Object,
   //       default: {
   //          deviceCode: "1101161102180100031040",
   //          deviceId: "1554360448383913986",
   //          deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
   //          dictDeviceType: "1437295832",
   //          latitude: 40.563822,
   //          longitude: 116.592648,
   //          type: "次生仪",
   //          name: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
   //          id: "1554360448383913986",
   //       },
   //    },
   // },
   const detailList = ref([])
   const detailTitle = ref("设备详情")
const detailList = ref([]);
const detailTitle = ref("设备详情");
   function closeMsg() {
      showDeviceDetail.value = false
      coloseDialog()
  showDeviceDetail.value = false;
  coloseDialog();
   }
// 监测设备具体信息
   function handlDeviceDetail() {
      const name = deviceDetail.value.name.split("孙胡沟")[1] || deviceDetail.value.deviceName
      detailTitle.value = name
  const name = deviceDetail.value.name;
  detailTitle.value = name;
      detailList.value = [
         {
            name: "设备编号",
            value: deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
      value:
        deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
         },
         {
            name: "设备类型",
@@ -51,7 +44,7 @@
         },
         {
            name: "安装时间",
            value: "2024-01-15 12:55:18",
      value: "2024-01-15 12:55:18" || deviceDetail.value.startTime,
         },
         {
            name: "更新时间",
@@ -59,52 +52,50 @@
         },
         {
            name: "设备位置",
            value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0],
      value: deviceDetail.value.deviceForShort || cityData.listData[0],
      //   value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0],
         },
      ]
  ];
   }
// 隐患点具体信息
   function handleDistrictDetail() {
      const name = deviceDetail.value.name || deviceDetail.value.district
      detailTitle.value = name
  const name = deviceDetail.value.hdName;
  detailTitle.value = name;
      detailList.value = [
         {
            name: "隐患类型",
            value: deviceDetail.value.type || "泥石流",
      value: deviceDetail.value.disasterType || "泥石流",
         },
         // {
         //    name: "威胁人数",
         //    value: deviceDetail.value.type || "",
         // },
         {
            name: "主管科长",
            value: "张浩",
         },
         {
            name: "主管镇长",
            value: "刘佳斌",
      value: deviceDetail.value.supervisorAlcaldeUserName,
         },
         {
            name: "群测群防",
            value: deviceDetail.value.groupMonitor,
      value: deviceDetail.value.groupTestGroupDefenseUserName,
         },
         {
            name: "隐患位置",
            value: deviceDetail.value.district,
      value: deviceDetail.value.position,
         },
         {
            name: "预防方案",
            value: deviceDetail.value.preventionPlan,
      value: deviceDetail.value.preventionSuggestion,
         },
      ]
  ];
   }
   function loadClassNameDetail() {
      if (className.value == "device") {
         handlDeviceDetail()
    handlDeviceDetail();
      } else if (className.value == "district") {
         handleDistrictDetail()
    handleDistrictDetail();
      }
   }
   const detailRef = ref(null)
const detailRef = ref(null);
   //展示属性框
   function calcDialogPostion() {
    const position = dialogPositon.value;
@@ -131,11 +122,10 @@
    bubble.style.top = top + "px";
}
   //关闭属性框
   const coloseDialog = () => {
      window.viewer.scene.postRender.removeEventListener(calcDialogPostion)
   }
  window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
};
   onMounted(() => {
    loadClassNameDetail();
    nextTick(() => {