From 5fb123a96da4132d01b0d69c4a8a783d622c7760 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 23 四月 2025 16:09:52 +0800
Subject: [PATCH] change
---
src/components/tools/Message.vue | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 200 insertions(+), 34 deletions(-)
diff --git a/src/components/tools/Message.vue b/src/components/tools/Message.vue
index d13b234..4086b98 100644
--- a/src/components/tools/Message.vue
+++ b/src/components/tools/Message.vue
@@ -1,6 +1,6 @@
<template>
<div class="message">
- <div class="message-top">妯℃嫙鏂规璇︽儏</div>
+ <div class="message-top">鏂规璇︽儏</div>
<div class="message-close" @click="closeMsg"></div>
<div class="message-context">
<div v-for="(item, key) in messageList" :key="key" class="message-item">
@@ -14,61 +14,215 @@
<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
+
// 瀹氫箟 props
const props = defineProps({
mesData: {
type: Object,
- default: () => ({}), // 榛樿鍊兼槸涓�涓┖瀵硅薄
+ default: () => ({}),
},
});
-
-// 瀹氫箟 messageList
const messageList = ref([]);
-
// 鐩戝惉 props.mesData 鐨勫彉鍖�
watch(
- () => props.mesData, // 鐩戝惉 props.mesData
+ () => props.mesData,
(newMesData) => {
- if (newMesData) {
- messageList.value = [
- { name: "鏂规鍚嶇О锛�", value: newMesData.name || "鏃�" },
- { name: "妯℃嫙鍖哄煙锛�", value: newMesData.area || "鏃�" },
- { name: "闄嶉洦鏁版嵁锛�", value: newMesData.fileName || "鏃�" },
- { name: "棰勬紨寮�濮嬫椂闂达細", value: newMesData.startTime || "鏃�" },
- { name: "棰勬紨缁撴潫鏃堕棿锛�", value: newMesData.endTime || "鏃�" },
- { name: "鍒涘缓鏃堕棿锛�", value: newMesData.createTime || "鏃�" },
- ];
+ console.log(newMesData, '寮圭獥鐨勬暟鎹�');
+
+ // 妫�鏌ユ暟鎹湁鏁堟��
+ if (!newMesData || typeof newMesData !== "object") {
+ console.warn("Invalid mesData received:", newMesData);
+ messageList.value = [];
+ return;
}
+
+ // 灏嗘墍鏈夊瓧娈佃浆鎹负鍒楄〃褰㈠紡
+ const formattedData = [];
+
+ // 鎻愬墠瑙ｆ瀽 areaType锛岀‘淇濆叾瀛樺湪鎬�
+ const areaType = newMesData.areaType !== undefined ? newMesData.areaType : null;
+
+ for (const [key, value] of Object.entries(newMesData)) {
+ // 璺宠繃涓嶉渶瑕佺殑瀛楁
+ if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue;
+
+ // 鐗规畩澶勭悊 createTime 瀛楁
+ if (key === "createTime" && typeof value === "number") {
+ formattedData.push({
+ name: "鍒涘缓鏃堕棿锛�",
+ value: formatDate(value),
+ });
+ continue;
+ }
+
+ // 澶勭悊 areaType 瀛楁
+ if (key === "areaType") {
+ const areaTypeMap = {
+ 0: "鑷畾涔夊尯鍩熶豢鐪�",
+ 1: "琛屾斂鍖哄垝浠跨湡",
+ 2: "閲嶇偣鍖哄煙浠跨湡",
+ 3: "閲嶇偣娌熶豢鐪�",
+ };
+ formattedData.push({
+ name: "鍖哄煙绫诲埆锛�",
+ value: areaTypeMap[value] || "鏈煡",
+ });
+ continue;
+ }
+
+ // 澶勭悊 status 瀛楁
+ if (key === "status") {
+ const statusMap = {
+ 0: "鍒涘缓浠跨湡",
+ 1: "棰勫鐞�",
+ 2: "鍒嗘瀽涓�",
+ 10: "瀹屾垚",
+ 20: "鍑洪敊",
+ };
+ formattedData.push({
+ name: "浠跨湡鐘舵�侊細",
+ value: statusMap[value] || "鏈煡",
+ });
+ continue;
+ }
+
+ // 澶勭悊 type 瀛楁锛堜粎鍦� areaType 涓嶄负 1 鎴� 2 鏃舵樉绀猴級
+ if (key === "type") {
+ if (![1, 2].includes(areaType)) {
+ const typeMap = {
+ 1: "棰勬祴妯℃嫙",
+ 2: "瀹炴椂妯℃嫙",
+ 3: "鍘嗗彶妯℃嫙",
+ };
+ formattedData.push({
+ name: "妯℃嫙绫诲埆锛�",
+ value: typeMap[value] || "鏈煡",
+ });
+ }
+ continue;
+ }
+
+ // 澶勭悊 result 瀛楁
+ if (key === "result") {
+ formattedData.push({
+ name: "浠跨湡缁撴灉锛�",
+ value: value || "鏃�",
+ });
+ continue;
+ }
+
+ // 澶勭悊 name 瀛楁
+ if (key === "name") {
+ formattedData.push({
+ name: "浠跨湡鏂规锛�",
+ value: value || "鏃�",
+ });
+ continue;
+ }
+
+ // 澶勭悊 data 瀛楁
+ if (key === "data" && typeof value === "string") {
+ try {
+ const parsedData = JSON.parse(value);
+
+ // 澶勭悊 data.total 瀛楁
+ if (parsedData.total !== undefined) {
+ formattedData.push({
+ name: "闄嶉洦鎬婚噺锛坢m锛夛細",
+ value: parsedData.total || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.duration 瀛楁
+ if (parsedData.duration !== undefined) {
+ formattedData.push({
+ name: "闄嶉洦鏃堕暱锛堝垎閽燂級锛�",
+ value: parsedData.duration || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.intensity 瀛楁
+ if (parsedData.intensity !== undefined) {
+ formattedData.push({
+ name: "闄嶉洦寮哄害锛坢m/灏忔椂锛夛細",
+ value: parsedData.intensity || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.prediction 瀛楁
+ if (parsedData.prediction !== undefined) {
+ formattedData.push({
+ name: "闄嶉洦鍦烘锛�",
+ value: parsedData.prediction || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.model 瀛楁
+ if (parsedData.model !== undefined) {
+ formattedData.push({
+ name: "闄嶉洦妯″紡锛�",
+ value: parsedData.model || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.history 瀛楁
+ if (parsedData.history !== undefined) {
+ formattedData.push({
+ name: "鍘嗗彶闄嶉洦锛�",
+ value: parsedData.history || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.gauges 瀛楁
+ if (parsedData.gauges !== undefined) {
+ formattedData.push({
+ name: "闆ㄩ噺璁″垪琛細",
+ value: Array.isArray(parsedData.gauges) ? parsedData.gauges.join(", ") : "鏃�",
+ });
+ }
+ } catch (e) {
+ formattedData.push({
+ name: "鏁版嵁锛�",
+ value: value || "鏃�",
+ });
+ }
+ continue;
+ }
+
+ // 鍏朵粬瀛楁鐩存帴灞曠ず
+ formattedData.push({
+ name: `${key}锛歚,
+ value: value || "鏃�",
+ });
+ }
+
+ // 鏇存柊 messageList
+ messageList.value = formattedData;
},
{ immediate: true } // 绔嬪嵆鎵ц涓�娆�
);
+
+// 鏍煎紡鍖栨椂闂存埑涓烘棩鏈�
+function formatDate(timestamp) {
+ const date = new Date(timestamp);
+ return date.toLocaleString(); // 浣跨敤鏈湴鍖栫殑鏃ユ湡鏍煎紡
+}
// 瀹氫箟 emit 鏂规硶
const emit = defineEmits(["close"]);
const closeMsg = () => {
emit("close");
};
-
-const startPlay = () => {
- simStore.rightShow = true;
- simStore.flowShow = true;
- simStore.messageShow = false;
-};
-
-// import { useSimStore } from "@/store/simulation";
-// const simStore = useSimStore();
-// const closeMsg = () => {
-// console.log("guanbi");
-// simStore.messageShow = false;
-// };
</script>
-
<style lang="less" scoped>
.message {
background: url("@/assets/img/tools/messagebg.png");
width: 391px;
height: 392px;
position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between; /* 纭繚涓婁笅鍐呭鍧囧寑鍒嗗竷 */
}
.message-top {
@@ -97,26 +251,38 @@
.message-context {
position: absolute;
- top: 60px;
+ top: 50px;
left: 20px;
width: 350px;
+ height: 65%;
+ overflow-y: auto; /* 濡傛灉鍐呭杩囧锛屽彲浠ユ粴鍔� */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around; /* 鍧囧寑鍒嗗竷瀛愬厓绱� */
+ align-items: stretch; /* 瀛愬厓绱犲搴︽媺浼� */
}
.message-item {
- height: 23px;
- margin-top: 15px;
- margin-left: 10px;
display: flex;
+ // justify-content: space-between; /* 宸﹀彸瀵归綈 */
+ align-items: center; /* 鍨傜洿灞呬腑 */
+ margin: 2px 0; /* 涓婁笅闂磋窛 */
+ padding: 4px 4px; /* 鍐呰竟璺� */
+ border-radius: 4px; /* 鍦嗚 */
}
.message-name {
font-weight: 700;
color: #94e0c4;
- margin-right: 8px;
+ white-space: nowrap; /* 闃叉鎹㈣ */
}
.message-value {
color: #e1eee9;
+ white-space: nowrap; /* 闃叉鎹㈣ */
+ text-overflow: ellipsis; /* 瓒呭嚭鐪佺暐 */
+ overflow: hidden; /* 闅愯棌瓒呭嚭閮ㄥ垎 */
+ max-width: 200px; /* 鏈�澶у搴﹂檺鍒� */
}
.message-btn {
--
Gitblit v1.9.3