From 47af17665d9e8b0f49c2a5f91a75812e9b5d73f0 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期二, 29 四月 2025 17:33:09 +0800
Subject: [PATCH] change
---
src/components/tools/Message.vue | 261 +++++++++++++++++++++++----------------------------
1 files changed, 117 insertions(+), 144 deletions(-)
diff --git a/src/components/tools/Message.vue b/src/components/tools/Message.vue
index 2a464a0..fa58e21 100644
--- a/src/components/tools/Message.vue
+++ b/src/components/tools/Message.vue
@@ -5,10 +5,31 @@
<div class="message-context">
<div v-for="(item, key) in messageList" :key="key" class="message-item">
<div class="message-name">{{ item.name }}</div>
- <div class="message-value">{{ item.value }}</div>
+ <div class="message-value" v-if="!(item.name.includes('闆ㄩ噺璁″垪琛�'))">
+ {{ item.value }}
+ </div>
+ <div v-if="item.name.includes('闆ㄩ噺璁″垪琛�')" @click.stop="openDialog"
+ style="color: #5bc0de; cursor: pointer;">
+ 鏌ョ湅闆ㄩ噺璁″垪琛�
+ </div>
</div>
</div>
- <!-- <div class="message-btn" @click="startPlay">寮�濮嬫ā鎷�</div> -->
+ <el-dialog title="闆ㄩ噺璁¤鎯�" v-model="dialogVisible" :width="'60%'" :before-close="handleClose"
+ style="background-color: rgb(5,75,69);">
+ <div class="table-container">
+ <el-table :data="gaugesData" border stripe height="100%">
+ <el-table-column prop="name" label="鍚嶇О"></el-table-column>
+ <el-table-column prop="x" label="缁忓害(X)"></el-table-column>
+ <el-table-column prop="y" label="绾害(Y)"></el-table-column>
+ <el-table-column prop="r" label="鍗婂緞(r)"></el-table-column>
+ </el-table>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍏� 闂�</el-button>
+ </span>
+ </template>
+ </el-dialog>
</div>
</template>
@@ -22,40 +43,45 @@
default: () => ({}),
},
});
+
+// 鍝嶅簲寮忔暟鎹�
const messageList = ref([]);
-// 鐩戝惉 props.mesData 鐨勫彉鍖�
+const gaugesData = ref([]); // 瀛樺偍闆ㄩ噺璁℃暟鎹�
+const dialogVisible = ref(false); // 鎺у埗寮圭獥鏄惁鍙
+
+// 鎵撳紑寮圭獥
+function openDialog() {
+ if (gaugesData.value.length > 0) {
+ dialogVisible.value = true;
+ }
+}
+
+// 鍏抽棴寮圭獥
+function handleClose(done) {
+ done();
+}
+
+// 鐩戝惉 mesData 鍙樺寲骞舵洿鏂� messageList 鍜� gaugesData
watch(
() => props.mesData,
(newMesData) => {
- // 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),
- });
+ formattedData.push({ name: "鍒涘缓鏃堕棿锛�", value: formatDate(value) });
continue;
}
- // 澶勭悊 areaType 瀛楁
if (key === "areaType") {
const areaTypeMap = {
0: "鑷畾涔夊尯鍩熶豢鐪�",
@@ -63,149 +89,90 @@
2: "閲嶇偣鍖哄煙浠跨湡",
3: "閲嶇偣娌熶豢鐪�",
};
- formattedData.push({
- name: "鍖哄煙绫诲埆锛�",
- value: areaTypeMap[value] || "鏈煡",
- });
+ formattedData.push({ name: "鍖哄煙绫诲埆锛�", value: areaTypeMap[value] || "鏈煡" });
continue;
}
- // 澶勭悊 status 瀛楁
if (key === "status") {
- const statusMap = {
- 0: "鍒涘缓浠跨湡",
- 1: "棰勫鐞�",
- 2: "鍒嗘瀽涓�",
- 10: "瀹屾垚",
- 20: "鍑洪敊",
- };
- formattedData.push({
- name: "浠跨湡鐘舵�侊細",
- value: statusMap[value] || "鏈煡",
- });
+ 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] || "鏈煡",
- });
+ const typeMap = { 1: "棰勬祴妯℃嫙", 2: "瀹炴椂妯℃嫙", 3: "鍘嗗彶妯℃嫙" };
+ formattedData.push({ name: "妯℃嫙绫诲埆锛�", value: typeMap[value] || "鏈煡" });
}
continue;
}
- // 澶勭悊 result 瀛楁
if (key === "result") {
- formattedData.push({
- name: "浠跨湡缁撴灉锛�",
- value: value || "鏃�",
- });
+ formattedData.push({ name: "浠跨湡缁撴灉锛�", value: value || "鏃�" });
continue;
}
- // 澶勭悊 name 瀛楁
if (key === "name") {
- formattedData.push({
- name: "浠跨湡鏂规锛�",
- value: value || "鏃�",
- });
+ formattedData.push({ name: "浠跨湡鏂规锛�", value: value || "鏃�" });
continue;
}
- // 澶勭悊 data 瀛楁
if (key === "data" && typeof value === "string") {
try {
const parsedData = JSON.parse(value);
+ console.log('Parsed Data:', parsedData);
+ // 澶勭悊 data 涓殑鍚勪釜瀛楁
+ const addField = (fieldKey, label) => {
+ if (parsedData[fieldKey] !== undefined) {
+ formattedData.push({ name: `${label}锛歚, value: parsedData[fieldKey] || "鏃�" });
+ }
+ };
- // 澶勭悊 data.total 瀛楁
- if (parsedData.total !== undefined) {
- formattedData.push({
- name: "闄嶉洦鎬婚噺锛坢m锛夛細",
- value: parsedData.total || "鏃�",
- });
- }
+ addField("total", "闄嶉洦鎬婚噺锛坢m锛�");
+ addField("duration", "闄嶉洦鏃堕暱锛堝垎閽燂級");
+ addField("intensity", "闄嶉洦寮哄害锛坢m/灏忔椂锛�");
+ addField("prediction", "闄嶉洦鍦烘");
+ addField("model", "闄嶉洦妯″紡");
+ addField("history", "鍘嗗彶闄嶉洦");
- // 澶勭悊 data.duration 瀛楁
- if (parsedData.duration !== undefined) {
- formattedData.push({
- name: "闄嶉洦鏃堕暱锛堝垎閽燂級锛�",
- value: parsedData.duration || "鏃�",
- });
- }
+ // 澶勭悊闆ㄩ噺璁℃暟鎹�
+ if (parsedData.gauges && Array.isArray(parsedData.gauges)) {
+ gaugesData.value = parsedData.gauges.map((gauge) => ({
+ name: gauge.name || "鏈煡",
+ x: gauge.x != null ? gauge.x.toFixed(2) : "-",
+ y: gauge.y != null ? gauge.y.toFixed(2) : "-",
+ r: gauge.r || "-",
+ }));
- // 澶勭悊 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(", ") : "鏃�",
- });
+ const gaugeNames = gaugesData.value.map(g => g.name).join(", ");
+ formattedData.push({ name: "闆ㄩ噺璁″垪琛細", value: gaugeNames || "鏃�" });
}
} catch (e) {
- formattedData.push({
- name: "鏁版嵁锛�",
- value: value || "鏃�",
- });
+ formattedData.push({ name: "鏁版嵁锛�", value: value || "鏃�" });
}
continue;
}
- // 鍏朵粬瀛楁鐩存帴灞曠ず
- formattedData.push({
- name: `${key}锛歚,
- value: value || "鏃�",
- });
+ formattedData.push({ name: `${key}锛歚, value: value || "鏃�" });
}
- // 鏇存柊 messageList
messageList.value = formattedData;
+ console.log(messageList.value, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwww');
+
},
- { immediate: true } // 绔嬪嵆鎵ц涓�娆�
+ { immediate: true }
);
-// 鏍煎紡鍖栨椂闂存埑涓烘棩鏈�
+// 鏍煎紡鍖栨椂闂存埑
function formatDate(timestamp) {
const date = new Date(timestamp);
- return date.toLocaleString(); // 浣跨敤鏈湴鍖栫殑鏃ユ湡鏍煎紡
+ return date.toLocaleString();
}
// 瀹氫箟 emit 鏂规硶
@@ -214,6 +181,7 @@
emit("close");
};
</script>
+
<style lang="less" scoped>
.message {
background: url("@/assets/img/tools/messagebg.png");
@@ -222,7 +190,7 @@
position: relative;
display: flex;
flex-direction: column;
- justify-content: space-between; /* 纭繚涓婁笅鍐呭鍧囧寑鍒嗗竷 */
+ justify-content: space-between;
}
.message-top {
@@ -255,46 +223,51 @@
left: 20px;
width: 350px;
height: 65%;
- overflow-y: auto; /* 濡傛灉鍐呭杩囧锛屽彲浠ユ粴鍔� */
+ overflow-y: auto;
display: flex;
flex-direction: column;
- justify-content: space-around; /* 鍧囧寑鍒嗗竷瀛愬厓绱� */
- align-items: stretch; /* 瀛愬厓绱犲搴︽媺浼� */
+ justify-content: space-around;
+ align-items: stretch;
}
.message-item {
display: flex;
- // justify-content: space-between; /* 宸﹀彸瀵归綈 */
- align-items: center; /* 鍨傜洿灞呬腑 */
- margin: 2px 0; /* 涓婁笅闂磋窛 */
- padding: 4px 4px; /* 鍐呰竟璺� */
- border-radius: 4px; /* 鍦嗚 */
+ align-items: center;
+ margin: 2px 0;
+ padding: 4px 4px;
+ border-radius: 4px;
}
.message-name {
font-weight: 700;
color: #94e0c4;
- white-space: nowrap; /* 闃叉鎹㈣ */
+ white-space: nowrap;
}
.message-value {
color: #e1eee9;
- white-space: nowrap; /* 闃叉鎹㈣ */
- text-overflow: ellipsis; /* 瓒呭嚭鐪佺暐 */
- overflow: hidden; /* 闅愯棌瓒呭嚭閮ㄥ垎 */
- max-width: 200px; /* 鏈�澶у搴﹂檺鍒� */
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 200px;
+}
+.table-container {
+ max-height: 500px; // 鎺у埗鏈�澶ч珮搴︼紝瓒呰繃鍒欏嚭鐜版粴鍔ㄦ潯
+ overflow-y: auto; // 鍨傜洿婊氬姩
+ padding: 10px;
+ border-radius: 4px;
}
-.message-btn {
- background: url("@/assets/img/tools/messagebtn.png") no-repeat;
- position: absolute;
- bottom: 60px;
- right: 60px;
- width: 105px;
- height: 26px;
- text-align: center;
- color: #fff;
- cursor: pointer;
- line-height: 26px;
+.el-dialog__body {
+ padding-top: 10px;
+ padding-bottom: 10px;
}
-</style>
+/deep/.el-dialog__title{
+ color: #fff !important;
+}
+.table-container .el-table {
+ font-size: 14px;
+ border-radius: 4px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3