From d06f7ad0231d5fb029ab8520bf442590d3bab20b Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期三, 16 七月 2025 15:29:13 +0800
Subject: [PATCH] 完善监测设备弹窗
---
src/components/tools/Detail.vue | 470 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 260 insertions(+), 210 deletions(-)
diff --git a/src/components/tools/Detail.vue b/src/components/tools/Detail.vue
index 64d6492..dfa5128 100644
--- a/src/components/tools/Detail.vue
+++ b/src/components/tools/Detail.vue
@@ -1,233 +1,283 @@
<template>
- <div class="detail" ref="detailRef">
- <div class="detail-top">{{ 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">
- <div class="detail-name">{{ item.name }}</div>
- <div class="detail-value" :title="item.value">{{ item.value || "--" }}</div>
- </div>
- </div>
- </div>
+ <div class="detail" ref="detailRef">
+ <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">
+ <div class="detail-name">{{ item.name }}</div>
+ <div class="detail-value" :title="item.value">
+ {{ item.value || "--" }}
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script setup>
- import { ref, onMounted, nextTick, onUnmounted } from "vue";
- import { showDeviceDetail, deviceDetail, className, dialogPositon } from "@/store"
+import { ref, onMounted, nextTick, onUnmounted } from "vue";
+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("璁惧璇︽儏")
- function closeMsg() {
- showDeviceDetail.value = false
- coloseDialog()
- }
- function handlDeviceDetail() {
- const name = deviceDetail.value.name.split("瀛欒儭娌�")[1] || deviceDetail.value.deviceName
- detailTitle.value = name
- 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",
- },
- {
- name: "鏇存柊鏃堕棿",
- value: "2025-02-15 8:15:28",
- },
- {
- name: "璁惧浣嶇疆",
- value: deviceDetail.value.name.split("瀛欒儭娌�")[0] || cityData.listData[0],
- },
- ]
- }
- function handleDistrictDetail() {
- const name = deviceDetail.value.name || deviceDetail.value.district
- detailTitle.value = name
- detailList.value = [
- {
- name: "闅愭偅绫诲瀷",
- value: deviceDetail.value.type || "娉ョ煶娴�",
- },
- // {
- // name: "濞佽儊浜烘暟",
- // value: deviceDetail.value.type || "",
- // },
- {
- name: "涓荤绉戦暱",
- value: "寮犳旦",
- },
- {
- name: "涓荤闀囬暱",
- value: "鍒樹匠鏂�",
- },
- {
- name: "缇ゆ祴缇ら槻",
- value: deviceDetail.value.groupMonitor,
- },
- {
- name: "闅愭偅浣嶇疆",
- value: deviceDetail.value.district,
- },
- {
- name: "棰勯槻鏂规",
- value: deviceDetail.value.preventionPlan,
- },
- ]
- }
- function loadClassNameDetail() {
- if (className.value == "device") {
- handlDeviceDetail()
- } else if (className.value == "district") {
- handleDistrictDetail()
- }
- }
- const detailRef = ref(null)
- //灞曠ず灞炴�ф
- function calcDialogPostion() {
- const position = dialogPositon.value;
- if (!position) {
- console.error("dialogPositon is null or invalid");
- return;
- }
+import { hdByDevice } from "@/api/hpApi";
- const bubble = detailRef.value;
- if (!bubble) {
- console.error("detailRef is null, DOM not ready");
- return;
- }
-
- let winpos = window.viewer.scene.cartesianToCanvasCoordinates(position);
- if (!winpos || isNaN(winpos.x) || isNaN(winpos.y)) {
- console.error("Invalid canvas coordinates:", winpos);
- return;
- }
-
- let poph = bubble.offsetHeight;
- bubble.style.left = winpos.x - 200 + "px";
- let top = winpos.y - poph - 50;
- bubble.style.top = top + "px";
+const detailList = ref([]);
+const detailTitle = ref("璁惧璇︽儏");
+const name = ref("");
+function closeMsg() {
+ showDeviceDetail.value = false;
+ coloseDialog();
}
+// 鐩戞祴璁惧鍏蜂綋淇℃伅
+async function handlDeviceDetail() {
+ const hdInfo = ref();
- //鍏抽棴灞炴�ф
- const coloseDialog = () => {
- window.viewer.scene.postRender.removeEventListener(calcDialogPostion)
- }
- onMounted(() => {
- loadClassNameDetail();
- nextTick(() => {
- window.viewer.scene.postRender.addEventListener(calcDialogPostion);
- });
+ 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: "鐏惧绫诲瀷",
+ value: deviceDetail.value.disasterType || "娉ョ煶娴�",
+ },
+ {
+ name: "濞佽儊瀵硅薄",
+ value: deviceDetail.value.threatObj || "灞呮皯鐐�",
+ },
+ {
+ name: "瑙勬ā绛夌骇",
+ value: deviceDetail.value.disasterGrade || "灏忓瀷",
+ },
+ {
+ 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: "闅愭偅浣嶇疆",
+ value: deviceDetail.value.position,
+ },
+ {
+ name: "棰勯槻鏂规",
+ value: deviceDetail.value.preventionSuggestion,
+ },
+ ];
+}
+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);
+//灞曠ず灞炴�ф
+function calcDialogPostion() {
+ const position = dialogPositon.value;
+ if (!position) {
+ console.error("dialogPositon is null or invalid");
+ return;
+ }
+
+ const bubble = detailRef.value;
+ if (!bubble) {
+ console.error("detailRef is null, DOM not ready");
+ return;
+ }
+
+ let winpos = window.viewer.scene.cartesianToCanvasCoordinates(position);
+ if (!winpos || isNaN(winpos.x) || isNaN(winpos.y)) {
+ console.error("Invalid canvas coordinates:", winpos);
+ return;
+ }
+
+ let poph = bubble.offsetHeight;
+ bubble.style.left = winpos.x - 200 + "px";
+ let top = winpos.y - poph - 50;
+ bubble.style.top = top + "px";
+}
+
+//鍏抽棴灞炴�ф
+const coloseDialog = () => {
+ window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
+};
+onMounted(() => {
+ loadClassNameDetail();
+ nextTick(() => {
+ window.viewer.scene.postRender.addEventListener(calcDialogPostion);
+ });
});
onUnmounted(() => {
- // 瑙ｅ喅dom涓璷ffHeight鎶ラ敊
- window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
+ // 瑙ｅ喅dom涓璷ffHeight鎶ラ敊
+ window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
});
</script>
<style lang="less" scoped>
- .detail {
- background: url("@/assets/img/tools/messagebg.png");
- background-size: 100% 100%;
- width: 24.4375rem;
- height: 24.5rem;
- position: absolute;
- top: 30%;
- right: 30%;
- }
+.detail {
+ background: url("@/assets/img/tools/messagebg.png");
+ background-size: 100% 100%;
+ width: 24.4375rem;
+ height: 24.5rem;
+ position: absolute;
+ top: 30%;
+ right: 30%;
+}
- .detail-top {
- position: absolute;
- top: 0.3125rem;
- left: 1.25rem;
- font-weight: 700;
- font-size: 1.125rem;
- font-weight: 700;
- color: #fff;
- line-height: 2.5rem;
- width: 16.875rem;
- cursor: pointer;
- }
+.detail-top {
+ position: absolute;
+ top: 0.3125rem;
+ left: 1.25rem;
+ font-weight: 700;
+ font-size: 1.125rem;
+ color: #fff;
+ line-height: 2.5rem;
+ width: 16.875rem; /* 瀹瑰櫒瀹藉害鍥哄畾鎴栭檺鍒� */
+ cursor: pointer;
- .detail-close {
- position: absolute;
- right: 0.1875rem;
- top: 0rem;
- width: 1.25rem;
- height: 1.25rem;
- text-align: center;
- line-height: 1.25rem;
- text-align: center;
+ /* 瓒呭嚭闅愯棌 + 鐪佺暐鍙� */
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
- font-weight: 700;
- font-size: 1.125rem;
- font-weight: 700;
- color: #fff;
- cursor: pointer;
- }
+ /* 鍙�夛細娣诲姞杩囨浮鍔ㄧ敾 */
+ transition: all 0.3s ease;
+}
- .detail-context {
- position: absolute;
- top: 3.8rem;
- left: 1.25rem;
- width: 21.875rem;
- }
+.detail-close {
+ position: absolute;
+ right: 0.1875rem;
+ top: 0rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ text-align: center;
+ line-height: 1.25rem;
+ text-align: center;
- .detail-item {
- display: flex;
- height: 1.4375rem;
- margin-top: 0.9375rem;
- margin-left: 0.625rem;
- }
- .detail-name {
- width: 100px;
- font-weight: 700;
- color: #94e0c4;
- &::after {
- content: "锛�";
- }
- }
+ font-weight: 700;
+ font-size: 1.125rem;
+ font-weight: 700;
+ color: #fff;
+ cursor: pointer;
+}
- .detail-value {
- color: #e1eee9;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 250px;
- }
+.detail-context {
+ position: absolute;
+ top: 3.8rem;
+ left: 1.25rem;
+ width: 21.875rem;
+ overflow-y: auto;
+ height: 63%;
+}
- .detail-btn {
- background: url("@/assets/img/tools/messagebtn.png") no-repeat;
- position: absolute;
- bottom: 3.75rem;
- right: 3.75rem;
- width: 6.5625rem;
- height: 1.625rem;
- text-align: center;
- color: #fff;
- cursor: pointer;
- }
+.detail-item {
+ display: flex;
+ height: 1.4375rem;
+ margin-top: 0.9375rem;
+ margin-left: 0.625rem;
+}
+.detail-name {
+ display: inline-block; /* 鍏抽敭 */
+ max-width: 100%; /* 闃叉婧㈠嚭 */
+ font-weight: 700;
+ color: #94e0c4;
+ white-space: nowrap; /* 鍙�夛細闃叉鏂囧瓧鎹㈣ */
+ &::after {
+ content: "锛�";
+ }
+}
+
+.detail-value {
+ color: #e1eee9;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 250px;
+}
+
+.detail-btn {
+ background: url("@/assets/img/tools/messagebtn.png") no-repeat;
+ position: absolute;
+ bottom: 3.75rem;
+ right: 3.75rem;
+ width: 6.5625rem;
+ height: 1.625rem;
+ text-align: center;
+ color: #fff;
+ cursor: pointer;
+}
</style>
--
Gitblit v1.9.3