From 0263bbda73cce47ae1f9f302ea44bbe6c51f1603 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 12 五月 2025 19:15:03 +0800
Subject: [PATCH] change
---
src/components/monifangzhen/schemeInfo.vue | 443 ++++++++++++++++++++++++++-----------------------------
1 files changed, 211 insertions(+), 232 deletions(-)
diff --git a/src/components/monifangzhen/schemeInfo.vue b/src/components/monifangzhen/schemeInfo.vue
index f115a67..cdbbb72 100644
--- a/src/components/monifangzhen/schemeInfo.vue
+++ b/src/components/monifangzhen/schemeInfo.vue
@@ -1,259 +1,235 @@
<template>
<div class="listCard">
- <div class="top">
- <span>鏂规璇︽儏</span>
- <!-- <el-button class="clickable-text" @click="handleBack">缁撴潫妯℃嫙</el-button> -->
+ <div class="top"><span>鏂规璇︽儏</span>
+ <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
+ {{ isPickingActive ? '杩涜璁＄畻' : '寮�濮嬫嬀鍙�' }}
+ </div>
</div>
<div class="details">
- <div v-if="formattedData.length > 0">
- <div class="input-group">
- <div v-for="(item, index) in formattedData" :key="index" class="input-item">
- <label>{{ item.name }}</label>
- <span>{{ item.value }}</span>
- </div>
+ <div v-if="formattedData.length" class="input-group">
+ <div v-for="(item, index) in formattedData" :key="index" class="input-item">
+ <label>{{ item.name }}</label>
+ <span>{{ item.value }}</span>
</div>
</div>
<div v-else>
<p style="text-align: center">鏆傛棤鏂规淇℃伅</p>
</div>
</div>
+ <div>
+
+ </div>
</div>
- <Message
- @close="close"
- class="mess"
- v-show="messageShow"
- :mesData="mesData"
- />
+ <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
</template>
<script setup>
-import { defineProps, defineEmits, inject ,ref,watch} from "vue";
+import { defineProps, defineEmits, inject, ref, watch } from "vue";
import dayjs from "dayjs";
-import { ElMessage } from "element-plus";
-// 瀹氫箟 emit 鏂规硶
+// 鍏叡渚濊禆
+const props = defineProps({ selectedScheme: { type: Object, default: null } });
const emit = defineEmits(["back"]);
-const { startSimulate, endSimulate } = inject("simulateActions");
+const { endSimulate } = inject("simulateActions");
-// 杩斿洖鎸夐挳鐐瑰嚮浜嬩欢
-function handleBack() {
- ElMessage({
- message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...",
- type: "success",
- });
- emit("back", false); // 鍚戠埗缁勪欢浼犻�� false 鍊�
- endSimulate();
+// 鐘舵�佺鐞�
+const formattedData = ref([]);
+const pickedPoints = ref([]);
+const handler = ref(null);
+const isPickingActive = ref(false);
+
+// 鏄犲皠琛�
+const areaTypeMap = {
+ 0: "鑷畾涔夊尯鍩熶豢鐪�",
+ 1: "琛屾斂鍖哄垝浠跨湡",
+ 2: "閲嶇偣鍖哄煙浠跨湡",
+ 3: "閲嶇偣娌熶豢鐪�"
+};
+
+const statusMap = {
+ 0: "鍒涘缓浠跨湡",
+ 1: "棰勫鐞�",
+ 2: "鍒嗘瀽涓�",
+ 10: "瀹屾垚",
+ 20: "鍑洪敊"
+};
+
+const typeMap = {
+ 1: "棰勬祴妯℃嫙",
+ 2: "瀹炴椂妯℃嫙",
+ 3: "鍘嗗彶妯℃嫙"
+};
+
+// 璺宠繃瀛楁鍒楄〃
+const skipKeys = ["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"];
+
+// 澶勭悊 data 瀛楁瑙ｆ瀽
+function parseDataField(dataStr) {
+ if (typeof dataStr !== "string") return [];
+
+ try {
+ const parsed = JSON.parse(dataStr);
+ const fields = {
+ total: "闄嶉洦鎬婚噺锛坢m锛夛細",
+ duration: "闄嶉洦鏃堕暱锛堝垎閽燂級锛�",
+ intensity: "闄嶉洦寮哄害锛坢m/灏忔椂锛夛細",
+ prediction: "闄嶉洦鍦烘锛�",
+ model: "闄嶉洦妯″紡锛�",
+ history: "鍘嗗彶闄嶉洦锛�",
+ gauges: "闆ㄩ噺璁″垪琛細"
+ };
+
+ return Object.entries(parsed)
+ .filter(([k]) => fields[k])
+ .map(([k, v]) => ({
+ name: fields[k],
+ value: Array.isArray(v) ? v.join(", ") : v || "鏃�"
+ }));
+ } catch (e) {
+ return [{ name: "鏁版嵁锛�", value: dataStr || "鏃�" }];
+ }
}
-// 鎺ユ敹鐖剁粍浠朵紶閫掔殑 props
-const props = defineProps({
- selectedScheme: {
- type: Object,
- default: null,
- },
-});
-// 鏍煎紡鍖栧悗鐨勬暟鎹�
-const formattedData = ref([]);
-
-// 鐩戝惉 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;
- }
-
- // 澶勭悊 areaName 瀛楁
- if (key === "areaName") {
- data.push({
- name: "鍖哄煙鍚嶇О锛�",
- value: 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");
}
-// 瀹氫箟浠诲姟鐘舵�佺殑鏂囨湰鏄犲皠
-const statusText = {
- 0: "鏈紑濮�",
- 1: "杩涜涓�",
- 2: "宸插畬鎴�",
-};
+// 鏍煎紡鍖� selectedScheme 鏁版嵁
+watch(
+ () => props.selectedScheme,
+ (newScheme) => {
+ if (!newScheme || typeof newScheme !== "object") {
+ formattedData.value = [];
+ return;
+ }
+
+ const entries = Object.entries(newScheme);
+ const areaType = newScheme.areaType;
+
+ const result = entries.reduce((acc, [key, value]) => {
+ if (skipKeys.includes(key)) return acc;
+
+ switch (key) {
+ case "createTime":
+ acc.push({ name: "鍒涘缓鏃堕棿锛�", value: formatDate(value) });
+ break;
+ case "areaType":
+ acc.push({ name: "鍖哄煙绫诲埆锛�", value: areaTypeMap[value] || "鏈煡" });
+ break;
+ case "status":
+ acc.push({ name: "浠跨湡鐘舵�侊細", value: statusMap[value] || "鏈煡" });
+ break;
+ case "type":
+ if (![1, 2].includes(areaType)) {
+ acc.push({ name: "妯℃嫙绫诲埆锛�", value: typeMap[value] || "鏈煡" });
+ }
+ break;
+ case "areaName":
+ acc.push({ name: "鍖哄煙鍚嶇О锛�", value: value || "鏃�" });
+ break;
+ case "result":
+ acc.push({ name: "浠跨湡缁撴灉锛�", value: value || "鏃�" });
+ break;
+ case "name":
+ acc.push({ name: "浠跨湡鏂规锛�", value: value || "鏃�" });
+ break;
+ case "data":
+ acc.push(...parseDataField(value));
+ break;
+ default:
+ acc.push({ name: `${key}锛歚, value: value || "鏃�" });
+ }
+
+ return acc;
+ }, []);
+
+ formattedData.value = result;
+ },
+ { immediate: true }
+);
+
+// 鎷惧彇鐩稿叧閫昏緫
+const viewer = window.viewer;
+
+function getPickPosition(windowPosition) {
+ if (!viewer) return null;
+ viewer.scene.globe.depthTestAgainstTerrain = true;
+ const cartesian = viewer.scene.pickPosition(windowPosition);
+ if (!cartesian) return null;
+
+ const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+
+ // 鍦ㄥ師鏈夐珮搴︿笂澧炲姞300绫�
+ cartographic.height += 80.0;
+
+ return {
+ cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
+ longitude: Cesium.Math.toDegrees(cartographic.longitude),
+ latitude: Cesium.Math.toDegrees(cartographic.latitude),
+ height: cartographic.height
+ };
+}
+
+function addPointToViewer(point, index) {
+ const entity = viewer.entities.add({
+ position: point.cartesian,
+ billboard: {
+ // image: '../path/to/your/icon.png', // 鏇挎崲涓轰綘鐨勫浘鏍囪矾寰�
+ width: 32, // 鍥炬爣瀹藉害
+ height: 32, // 鍥炬爣楂樺害
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+ },
+ label: {
+ text: `Point ${index + 1}\n缁忓害: ${point.longitude.toFixed(6)}\n绾害: ${point.latitude.toFixed(6)}`,
+ font: '14pt monospace',
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ outlineWidth: 2,
+ verticalOrigin: Cesium.VerticalOrigin.TOP,
+ pixelOffset: new Cesium.Cartesian2(0, -40), // 璋冩暣鏍囩鐩稿浜庡浘鏍囩殑鍋忕Щ閲�
+ fillColor: Cesium.Color.WHITE,
+ outlineColor: Cesium.Color.BLACK
+ }
+ });
+
+ // 鍙�夛細瀛樺偍瀹炰綋寮曠敤浠ヤ究鍚庣画鎿嶄綔
+ pickedPoints.value.push(entity);
+}
+
+function initPickHandler() {
+ if (!viewer?.scene?.canvas) return;
+ handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+ handler.value.setInputAction((movement) => {
+ const position = getPickPosition(movement.position);
+ if (position) {
+ const index = pickedPoints.value.length;
+ pickedPoints.value.push(position);
+ addPointToViewer(position, index);
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+function togglePick() {
+ isPickingActive.value ? stopPicking() : startPicking();
+}
+
+function startPicking() {
+ pickedPoints.value = [];
+ viewer.entities.removeAll();
+ !handler.value && initPickHandler();
+ isPickingActive.value = true;
+}
+
+function stopPicking() {
+ if (handler.value) {
+ handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ handler.value.destroy();
+ handler.value = null;
+ }
+
+ isPickingActive.value = false;
+}
</script>
<style lang="less" scoped>
@@ -315,13 +291,16 @@
}
}
}
+
.mess {
position: absolute;
top: 10%;
left: 100%;
z-index: 5000;
}
+
.top {
+ display: flex;
width: 100%;
height: 41px;
color: white;
--
Gitblit v1.9.3