From 5fb123a96da4132d01b0d69c4a8a783d622c7760 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 23 四月 2025 16:09:52 +0800
Subject: [PATCH] change
---
src/views/GisView.vue | 2
src/components/monifangzhen/schemeInfo.vue | 221 +++++++++++++++++++++++----
src/components/tools/Message.vue | 234 +++++++++++++++++++++++++----
src/components/monifangzhen/schemeCard.vue | 11
4 files changed, 396 insertions(+), 72 deletions(-)
diff --git a/src/components/monifangzhen/schemeCard.vue b/src/components/monifangzhen/schemeCard.vue
index 3d879d4..a69da73 100644
--- a/src/components/monifangzhen/schemeCard.vue
+++ b/src/components/monifangzhen/schemeCard.vue
@@ -9,7 +9,7 @@
<p>
鏂规鐘舵�� :
<span style="color: aquamarine">{{
- statusText[item.taskStatus] || "鏈煡"
+ statusText[item.status] || "鏈煡"
}}</span>
</p>
</div>
@@ -23,7 +23,6 @@
</el-card>
<schemeInfo v-if="schemeInfoShow" :selectedScheme="currentScheme" @back="handleBack" />
</div>
-
<Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
</template>
@@ -49,9 +48,11 @@
}
const statusText = {
- 0: "鏈紑濮�",
- 1: "杩涜涓�",
- 2: "宸插畬鎴�",
+ 0: "鍒涘缓浠跨湡",
+ 1: "棰勫鐞�",
+ 2: "鍒嗘瀽涓�",
+ 10: "瀹屾垚",
+ 20: "鍑洪敊",
};
function formatTime(time) {
return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
diff --git a/src/components/monifangzhen/schemeInfo.vue b/src/components/monifangzhen/schemeInfo.vue
index 6523022..9db0533 100644
--- a/src/components/monifangzhen/schemeInfo.vue
+++ b/src/components/monifangzhen/schemeInfo.vue
@@ -5,35 +5,11 @@
<!-- <el-button class="clickable-text" @click="handleBack">缁撴潫妯℃嫙</el-button> -->
</div>
<div class="details">
- <div v-if="selectedScheme">
+ <div v-if="formattedData.length > 0">
<div class="input-group">
- <div class="input-item">
- <label>鏂规鍚嶇О:</label>
- <span>{{ selectedScheme.name }}</span>
- </div>
- <div class="input-item">
- <label>鍒涘缓鏃堕棿:</label>
- <span>{{ formatTime(selectedScheme.createTime) }}</span>
- </div>
- <div class="input-item">
- <label>鏂规鐘舵��:</label>
- <span>{{ statusText[selectedScheme.taskStatus] || "鏈煡" }}</span>
- </div>
- <div class="input-item">
- <label>寮�濮嬫椂闂�:</label>
- <span>{{ selectedScheme.startTime }}</span>
- </div>
- <div class="input-item">
- <label>缁撴潫鏃堕棿:</label>
- <span>{{ selectedScheme.endTime }}</span>
- </div>
- <div class="input-item">
- <label>鏂囦欢鏁伴噺:</label>
- <span>{{ selectedScheme.fileCount }}</span>
- </div>
- <div class="input-item">
- <label>杈撳嚭鍛ㄦ湡:</label>
- <span>{{ selectedScheme.outputPeriod }} 绉�</span>
+ <div v-for="(item, index) in formattedData" :key="index" class="input-item">
+ <label>{{ item.name }}</label>
+ <span>{{ item.value }}</span>
</div>
</div>
</div>
@@ -51,7 +27,7 @@
</template>
<script setup>
-import { defineProps, defineEmits, inject } from "vue";
+import { defineProps, defineEmits, inject ,ref,watch} from "vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
@@ -76,10 +52,191 @@
default: null,
},
});
+// 鏍煎紡鍖栧悗鐨勬暟鎹�
+const formattedData = ref([]);
-// 鏍煎紡鍖栨椂闂�
-function formatTime(time) {
- return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+// 鐩戝惉 selectedScheme 鐨勫彉鍖�
+watch(
+ () => props.selectedScheme,
+ (newScheme) => {
+ console.log(newScheme, "寮圭獥鐨勬暟鎹�");
+
+ // 妫�鏌ユ暟鎹湁鏁堟��
+ if (!newScheme || typeof newScheme !== "object") {
+ console.warn("Invalid selectedScheme received:", newScheme);
+ formattedData.value = [];
+ return;
+ }
+
+ // 灏嗘墍鏈夊瓧娈佃浆鎹负鍒楄〃褰㈠紡
+ const data = [];
+
+ // 鎻愬墠瑙ｆ瀽 areaType锛岀‘淇濆叾瀛樺湪鎬�
+ const areaType = newScheme.areaType !== undefined ? newScheme.areaType : null;
+
+ for (const [key, value] of Object.entries(newScheme)) {
+ // 璺宠繃涓嶉渶瑕佺殑瀛楁
+ if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue;
+
+ // 鐗规畩澶勭悊 createTime 瀛楁
+ if (key === "createTime" && typeof value === "number") {
+ data.push({
+ name: "鍒涘缓鏃堕棿锛�",
+ value: formatDate(value),
+ });
+ continue;
+ }
+
+ // 澶勭悊 areaType 瀛楁
+ if (key === "areaType") {
+ const areaTypeMap = {
+ 0: "鑷畾涔夊尯鍩熶豢鐪�",
+ 1: "琛屾斂鍖哄垝浠跨湡",
+ 2: "閲嶇偣鍖哄煙浠跨湡",
+ 3: "閲嶇偣娌熶豢鐪�",
+ };
+ data.push({
+ name: "鍖哄煙绫诲埆锛�",
+ value: areaTypeMap[value] || "鏈煡",
+ });
+ continue;
+ }
+
+ // 澶勭悊 status 瀛楁
+ if (key === "status") {
+ const statusMap = {
+ 0: "鍒涘缓浠跨湡",
+ 1: "棰勫鐞�",
+ 2: "鍒嗘瀽涓�",
+ 10: "瀹屾垚",
+ 20: "鍑洪敊",
+ };
+ data.push({
+ name: "浠跨湡鐘舵�侊細",
+ value: statusMap[value] || "鏈煡",
+ });
+ continue;
+ }
+
+ // 澶勭悊 type 瀛楁锛堜粎鍦� areaType 涓嶄负 1 鎴� 2 鏃舵樉绀猴級
+ if (key === "type") {
+ if (![1, 2].includes(areaType)) {
+ const typeMap = {
+ 1: "棰勬祴妯℃嫙",
+ 2: "瀹炴椂妯℃嫙",
+ 3: "鍘嗗彶妯℃嫙",
+ };
+ data.push({
+ name: "妯℃嫙绫诲埆锛�",
+ value: typeMap[value] || "鏈煡",
+ });
+ }
+ continue;
+ }
+
+ // 澶勭悊 result 瀛楁
+ if (key === "result") {
+ data.push({
+ name: "浠跨湡缁撴灉锛�",
+ value: value || "鏃�",
+ });
+ continue;
+ }
+
+ // 澶勭悊 name 瀛楁
+ if (key === "name") {
+ data.push({
+ name: "浠跨湡鏂规锛�",
+ value: value || "鏃�",
+ });
+ continue;
+ }
+
+ // 澶勭悊 data 瀛楁
+ if (key === "data" && typeof value === "string") {
+ try {
+ const parsedData = JSON.parse(value);
+
+ // 澶勭悊 data.total 瀛楁
+ if (parsedData.total !== undefined) {
+ data.push({
+ name: "闄嶉洦鎬婚噺锛坢m锛夛細",
+ value: parsedData.total || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.duration 瀛楁
+ if (parsedData.duration !== undefined) {
+ data.push({
+ name: "闄嶉洦鏃堕暱锛堝垎閽燂級锛�",
+ value: parsedData.duration || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.intensity 瀛楁
+ if (parsedData.intensity !== undefined) {
+ data.push({
+ name: "闄嶉洦寮哄害锛坢m/灏忔椂锛夛細",
+ value: parsedData.intensity || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.prediction 瀛楁
+ if (parsedData.prediction !== undefined) {
+ data.push({
+ name: "闄嶉洦鍦烘锛�",
+ value: parsedData.prediction || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.model 瀛楁
+ if (parsedData.model !== undefined) {
+ data.push({
+ name: "闄嶉洦妯″紡锛�",
+ value: parsedData.model || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.history 瀛楁
+ if (parsedData.history !== undefined) {
+ data.push({
+ name: "鍘嗗彶闄嶉洦锛�",
+ value: parsedData.history || "鏃�",
+ });
+ }
+
+ // 澶勭悊 data.gauges 瀛楁
+ if (parsedData.gauges !== undefined) {
+ data.push({
+ name: "闆ㄩ噺璁″垪琛細",
+ value: Array.isArray(parsedData.gauges) ? parsedData.gauges.join(", ") : "鏃�",
+ });
+ }
+ } catch (e) {
+ data.push({
+ name: "鏁版嵁锛�",
+ value: value || "鏃�",
+ });
+ }
+ continue;
+ }
+
+ // 鍏朵粬瀛楁鐩存帴灞曠ず
+ data.push({
+ name: `${key}锛歚,
+ value: value || "鏃�",
+ });
+ }
+
+ // 鏇存柊 formattedData
+ formattedData.value = data;
+ },
+ { immediate: true } // 绔嬪嵆鎵ц涓�娆�
+);
+
+// 鏍煎紡鍖栨椂闂存埑涓烘棩鏈�
+function formatDate(timestamp) {
+ return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss");
}
// 瀹氫箟浠诲姟鐘舵�佺殑鏂囨湰鏄犲皠
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 {
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index 91cd7e3..04199ce 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -23,7 +23,7 @@
earthCtrl.showFPS = true
earthCtrl.factory.createImageryLayer({
sourceType: "mapworld",
- url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=3ec79cf7a9dcc6bb18411a5414b148cb",
+ url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
layers: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
--
Gitblit v1.9.3