From a57caa72a54efe9de3fe26a6c36d3e8038267377 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 17 七月 2025 09:09:49 +0800
Subject: [PATCH] 修改x按钮
---
src/components/tools/DebuffDetail.vue | 353 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 199 insertions(+), 154 deletions(-)
diff --git a/src/components/tools/DebuffDetail.vue b/src/components/tools/DebuffDetail.vue
index a8f6bf4..5a4ca4f 100644
--- a/src/components/tools/DebuffDetail.vue
+++ b/src/components/tools/DebuffDetail.vue
@@ -1,190 +1,235 @@
<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>
-// 鐘舵�佺鐞嗗櫒
+<script setup>
+import { ref, onMounted } from "vue";
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
+
const simStore = useSimStore();
-const { selectedScheme } = storeToRefs(simStore);
+const { selectedScheme, schemWaterInfo } = storeToRefs(simStore);
+// schemWaterInfo
+// 闅愭偅鐐�
+const filteredData = simStore.DangerPoint.filter((item) =>
+ item.position?.includes("瀛欒儭娌�")
+);
-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;
- }
- }
- const rainfallList = data.rainfalls;
+// 鍝嶅簲寮忔暟鎹�
+const detailList = ref([
+ {
+ name: "鏈�澶ч洦寮猴細",
+ value: (Math.random() * 100).toFixed(2) + " mm/h",
+ },
+ {
+ name: "骞冲潎闆ㄥ己锛�",
+ value: (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: "145 浜�",
+ },
+ {
+ name: "濞佽儊璐骇锛�",
+ value: "4872 涓囧厓",
+ },
+]);
- // 鎻愬彇 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;
+const updateThreatData = () => {
+ // 绛涢�� position 鍖呭惈 "瀛欒儭娌�" 鐨勬暟鎹�
+ const filteredData = simStore.DangerPoint.filter((item) =>
+ item.position?.includes("瀛欒儭娌�")
+ );
- // 鏇存柊 detailList 涓殑鈥滄渶澶ч洦寮衡�濆拰鈥滃钩鍧囬洦寮衡��
- this.detailList[0].value = maxRain.toFixed(2) + " mm/h"; // 鏈�澶ч洦寮�
- this.detailList[1].value = avgRain.toFixed(2) + " mm/h"; // 骞冲潎闆ㄥ己
+ if (filteredData.length === 0) {
+ console.warn("鏈壘鍒� position 鍖呭惈 '瀛欒儭娌�' 鐨勬暟鎹�");
+ return;
+ }
- console.log('褰撳墠鏂规涓嬫渶灏忛洦閲忋�佹渶澶ч洦閲忋�佸钩鍧囬洦閲忥細',
- minRain.toFixed(2),
- maxRain.toFixed(2),
- avgRain.toFixed(2)
- );
- },
- closeMsg() {
- this.$emit("close")
- },
- showMsg() {
- this.$emit("open")
- },
- },
-}
+ // 鍒濆鍖栫疮鍔犲��
+ let totalHousehold = 0; // 濞佽儊鎴锋暟
+ let totalPerson = 0; // 濞佽儊浜烘暟
+ let totalRoom = 0; // 濞佽儊鎴挎暟
+
+ // 閬嶅巻骞剁疮鍔�
+ filteredData.forEach((item) => {
+ totalHousehold += Number(item.threatHouseNum) || 0;
+ totalPerson += Number(item.threatPersonNum) || 0;
+ totalRoom += Number(item.threatRoomNum) || 0;
+ });
+
+ // 鏇存柊 detailList
+ detailList.value[5].value = `${totalHousehold} 鎴穈;
+ detailList.value[6].value = `${totalPerson} 浜篳;
+ detailList.value[4].value = `${totalRoom} 闂碻;
+
+ console.log("濞佽儊鎴锋暟:", totalHousehold);
+ console.log("濞佽儊浜烘暟:", totalPerson);
+ console.log("濞佽儊鎴挎暟:", totalRoom);
+};
+// 鏂规硶瀹氫箟
+const 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) {
+ // console.log(schemWaterInfo.value,'杩欓噷鏄墍鏈夌殑鏂规鏁版嵁');
+
+
+ // 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 涓殑鈥滄渶澶ч洦寮衡�濆拰鈥滃钩鍧囬洦寮衡��
+ detailList.value[0].value = schemWaterInfo.value[1].toFixed(2) + " mm/h"; // 鏈�澶ч洦寮�
+ detailList.value[1].value = schemWaterInfo.value[2].toFixed(2) + " mm/h"; // 骞冲潎闆ㄥ己
+ detailList.value[2].value = schemWaterInfo.value[0].toFixed(2) + " m"; // 鏈�澶ф按娣�
+
+ console.log(
+ "褰撳墠鏂规涓嬫渶澶ф按娣便�佹渶澶ч洦閲忋�佸钩鍧囬洦閲忥細",
+ schemWaterInfo.value[0].toFixed(2),
+ schemWaterInfo.value[1].toFixed(2),
+ schemWaterInfo.value[2].toFixed(2)
+ );
+ }
+};
+
+const closeMsg = () => {
+ // 浣跨敤 defineEmits 瀹氫箟 emit
+ emit("close");
+};
+
+const showMsg = () => {
+ emit("open");
+};
+
+// 瀹氫箟 emit
+const emit = defineEmits(["close", "open"]);
+
+// 鐢熷懡鍛ㄦ湡閽╁瓙
+onMounted(() => {
+ // console.log(filteredData);
+ updateThreatData();
+ getRainfallData();
+});
</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;
+ 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;
+ position: absolute;
+ top: 5px;
+ left: 20px;
+ font-weight: 700;
+ font-size: 18px;
+ 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;
-
- font-weight: 700;
- font-size: 18px;
- font-weight: 700;
- color: #fff;
- cursor: pointer;
+ position: absolute;
+ right: 3px;
+ top: 10px;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ font-weight: 700;
+ font-size: 18px;
+ color: #fff;
+ cursor: pointer;
}
.detail-context {
- position: absolute;
- top: 40px;
- left: 20px;
- width: 350px;
+ position: absolute;
+ top: 40px;
+ left: 20px;
+ width: 350px;
}
.detail-item {
- height: 23px;
- margin-top: 15px;
- margin-left: 10px;
+ height: 23px;
+ margin-top: 15px;
+ margin-left: 10px;
}
.detail-name {
- float: left;
- font-weight: 700;
- color: #94e0c4;
+ float: left;
+ font-weight: 700;
+ color: #94e0c4;
}
.detail-value {
- float: left;
- color: #e1eee9;
+ 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;
+ 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