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 | 232 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 136 insertions(+), 96 deletions(-)
diff --git a/src/components/tools/DebuffDetail.vue b/src/components/tools/DebuffDetail.vue
index f5b1506..5a4ca4f 100644
--- a/src/components/tools/DebuffDetail.vue
+++ b/src/components/tools/DebuffDetail.vue
@@ -12,108 +12,152 @@
</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: "灏瑰瑗挎矡",
- },
+// 鍝嶅簲寮忔暟鎹�
+const detailList = ref([
+ {
+ name: "鏈�澶ч洦寮猴細",
+ value: (Math.random() * 100).toFixed(2) + " mm/h",
},
- 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 涓囧厓",
- },
- ],
- };
+ {
+ name: "骞冲潎闆ㄥ己锛�",
+ value: (Math.random() * 10).toFixed(2) + " mm/h",
},
- mounted() {
- this.getRainfallData(); // 缁勪欢鎸傝浇鍚庢墽琛岃幏鍙栭洦閲忔暟鎹�
+ {
+ name: "鏈�澶ф按娣憋細",
+ value: "1.86 m",
},
- 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");
- },
+ // {
+ // name: "鏈�澶ф祦閫燂細",
+ // value: "7 m/s",
+ // },
+ {
+ name: "濞佽儊鎴挎暟锛�",
+ value: "406 闂�",
},
+ {
+ name: "濞佽儊鎴锋暟锛�",
+ value: "145 鎴�",
+ },
+ {
+ name: "濞佽儊浜哄彛锛�",
+ value: "145 浜�",
+ },
+ {
+ name: "濞佽儊璐骇锛�",
+ value: "4872 涓囧厓",
+ },
+]);
+
+const updateThreatData = () => {
+ // 绛涢�� position 鍖呭惈 "瀛欒儭娌�" 鐨勬暟鎹�
+ const filteredData = simStore.DangerPoint.filter((item) =>
+ item.position?.includes("瀛欒儭娌�")
+ );
+
+ if (filteredData.length === 0) {
+ console.warn("鏈壘鍒� position 鍖呭惈 '瀛欒儭娌�' 鐨勬暟鎹�");
+ return;
+ }
+
+ // 鍒濆鍖栫疮鍔犲��
+ 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");
@@ -133,7 +177,6 @@
left: 20px;
font-weight: 700;
font-size: 18px;
- font-weight: 700;
color: #fff;
line-height: 40px;
width: 270px;
@@ -148,11 +191,8 @@
height: 20px;
text-align: center;
line-height: 20px;
- text-align: center;
-
font-weight: 700;
font-size: 18px;
- font-weight: 700;
color: #fff;
cursor: pointer;
}
--
Gitblit v1.9.3