From c0b4517e7362144cc1683ee0bf0b7e00b67d539a Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 24 六月 2025 18:01:08 +0800
Subject: [PATCH] 提交初版实时模拟
---
src/components/tools/DebuffDetail.vue | 318 ++++++++++++++++++++++++++++++----------------------
1 files changed, 181 insertions(+), 137 deletions(-)
diff --git a/src/components/tools/DebuffDetail.vue b/src/components/tools/DebuffDetail.vue
index 4bc9239..f5b1506 100644
--- a/src/components/tools/DebuffDetail.vue
+++ b/src/components/tools/DebuffDetail.vue
@@ -1,151 +1,195 @@
<template>
- <div class="detail">
- <div class="detail-top">缁熻鍒嗘瀽缁撴灉</div>
- <div class="detail-btn" @click="showMsg">鏌ョ湅璇︽儏</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">{{ item.value }}</div>
- </div>
- </div>
- </div>
+ <div class="detail">
+ <div class="detail-top">缁熻鍒嗘瀽缁撴灉</div>
+ <!-- <div class="detail-btn" @click="showMsg">鏌ョ湅璇︽儏</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">{{ item.value }}</div>
+ </div>
+ </div>
+ </div>
</template>
<script>
- export default {
- name: "detail",
- components: {},
- props: {
- areaName: {
- type: String,
- default: "灏瑰瑗挎矡",
- },
- },
- data() {
- return {
- show: false,
- detailList: [
- {
- name: "鏈�澶ч洦寮猴細",
- value: Number(Math.random() * 100).toFixed(2) + " mm/h",
- },
- {
- name: "骞冲潎闆ㄥ己锛�",
- value: Number(Math.random() * 10).toFixed(2) + " mm/h",
- },
- {
- name: "鏈�澶ф按娣憋細",
- value: "1.86 m",
- },
- {
- name: "骞冲潎姘存繁锛�",
- value: "0.29 m",
- },
- {
- name: "鏈�澶ф祦閫燂細",
- value: "7 m/s",
- },
- {
- name: "濞佽儊鎴垮眿锛�",
- value: "406 闂�",
- },
- {
- name: "濞佽儊浜哄彛锛�",
- value: "145 鎴�",
- },
- {
- name: "濞佽儊璐骇锛�",
- value: "4872 涓囧厓",
- },
- ],
- }
- },
- methods: {
- closeMsg() {
- this.$emit("close")
- },
- showMsg() {
- this.$emit("open")
- },
- },
- }
+// 鐘舵�佺鐞嗗櫒
+import { useSimStore } from "@/store/simulation";
+import { storeToRefs } from "pinia";
+const simStore = useSimStore();
+const { selectedScheme } = storeToRefs(simStore);
+
+export default {
+ name: "detail",
+ components: {},
+ props: {
+ areaName: {
+ type: String,
+ default: "灏瑰瑗挎矡",
+ },
+ },
+ data() {
+ return {
+ show: false,
+ detailList: [
+ {
+ name: "鏈�澶ч洦寮猴細",
+ value: Number(Math.random() * 100).toFixed(2) + " mm/h",
+ },
+ {
+ name: "骞冲潎闆ㄥ己锛�",
+ value: Number(Math.random() * 10).toFixed(2) + " mm/h",
+ },
+ {
+ name: "鏈�澶ф按娣憋細",
+ value: "1.86 m",
+ },
+ {
+ name: "鏈�澶ф祦閫燂細",
+ value: "7 m/s",
+ },
+ {
+ name: "濞佽儊鎴垮眿锛�",
+ value: "406 闂�",
+ },
+ {
+ name: "濞佽儊浜哄彛锛�",
+ value: "145 鎴�",
+ },
+ {
+ name: "濞佽儊璐骇锛�",
+ value: "4872 涓囧厓",
+ },
+ ],
+ };
+ },
+ mounted() {
+ this.getRainfallData(); // 缁勪欢鎸傝浇鍚庢墽琛岃幏鍙栭洦閲忔暟鎹�
+ },
+ methods: {
+ getRainfallData() {
+ if (!selectedScheme.value || !selectedScheme.value.data) {
+ console.warn("selectedScheme 鎴� data 涓嶅瓨鍦�");
+ return;
+ }
+ let data = selectedScheme.value.data;
+ // 濡傛灉鏄瓧绗︿覆锛屽垯灏濊瘯瑙ｆ瀽鎴愬璞�
+ if (typeof data === "string") {
+ try {
+ data = JSON.parse(data);
+ } catch (e) {
+ console.error("data 涓嶆槸鏈夋晥鐨� JSON 瀛楃涓�");
+ return;
+ }
+ }
+
+ if (selectedScheme.value.type !== 2) {
+ const rainfallList = data.rainfalls;
+
+ // 鎻愬彇 intensity 鍊�
+ const rainValues = rainfallList.map((r) => r.intensity);
+ const minRain = Math.min(...rainValues);
+ const maxRain = Math.max(...rainValues);
+ const avgRain =
+ rainValues.reduce((sum, val) => sum + val, 0) / rainValues.length;
+
+ // 鏇存柊 detailList 涓殑鈥滄渶澶ч洦寮衡�濆拰鈥滃钩鍧囬洦寮衡��
+ this.detailList[0].value = maxRain.toFixed(2) + " mm/h"; // 鏈�澶ч洦寮�
+ this.detailList[1].value = avgRain.toFixed(2) + " mm/h"; // 骞冲潎闆ㄥ己
+
+ console.log(
+ "褰撳墠鏂规涓嬫渶灏忛洦閲忋�佹渶澶ч洦閲忋�佸钩鍧囬洦閲忥細",
+ minRain.toFixed(2),
+ maxRain.toFixed(2),
+ avgRain.toFixed(2)
+ );
+ }
+ },
+ closeMsg() {
+ this.$emit("close");
+ },
+ showMsg() {
+ this.$emit("open");
+ },
+ },
+};
</script>
<style lang="less" scoped>
- .detail {
- background: url("@/assets/img/tools/messagebg.png");
- background-size: 100% 100%;
- width: 391px;
- height: 420px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 99;
- }
+.detail {
+ background: url("@/assets/img/tools/messagebg.png");
+ background-size: 100% 100%;
+ width: 391px;
+ height: 420px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 99;
+}
- .detail-top {
- position: absolute;
- top: 5px;
- left: 20px;
- font-weight: 700;
- font-size: 18px;
- font-weight: 700;
- color: #fff;
- line-height: 40px;
- width: 270px;
- cursor: pointer;
- }
+.detail-top {
+ position: absolute;
+ top: 5px;
+ left: 20px;
+ font-weight: 700;
+ font-size: 18px;
+ font-weight: 700;
+ color: #fff;
+ line-height: 40px;
+ width: 270px;
+ cursor: pointer;
+}
- .detail-close {
- position: absolute;
- right: 3px;
- top: 10px;
- width: 20px;
- height: 20px;
- text-align: center;
- line-height: 20px;
- text-align: center;
+.detail-close {
+ position: absolute;
+ right: 3px;
+ top: 10px;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ text-align: center;
- font-weight: 700;
- font-size: 18px;
- font-weight: 700;
- color: #fff;
- cursor: pointer;
- }
+ font-weight: 700;
+ font-size: 18px;
+ font-weight: 700;
+ color: #fff;
+ cursor: pointer;
+}
- .detail-context {
- position: absolute;
- top: 40px;
- left: 20px;
- width: 350px;
- }
+.detail-context {
+ position: absolute;
+ top: 40px;
+ left: 20px;
+ width: 350px;
+}
- .detail-item {
- height: 23px;
- margin-top: 15px;
- margin-left: 10px;
- }
- .detail-name {
- float: left;
- font-weight: 700;
- color: #94e0c4;
- }
+.detail-item {
+ height: 23px;
+ margin-top: 15px;
+ margin-left: 10px;
+}
- .detail-value {
- float: left;
- color: #e1eee9;
- }
+.detail-name {
+ float: left;
+ font-weight: 700;
+ color: #94e0c4;
+}
- .detail-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;
- }
+.detail-value {
+ float: left;
+ color: #e1eee9;
+}
+
+.detail-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;
+}
</style>
--
Gitblit v1.9.3