<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>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import { useSimStore } from "@/store/simulation";
|
import { storeToRefs } from "pinia";
|
|
const simStore = useSimStore();
|
const { selectedScheme, schemWaterInfo } = storeToRefs(simStore);
|
// schemWaterInfo
|
// 隐患点
|
const filteredData = simStore.DangerPoint.filter((item) =>
|
item.position?.includes("孙胡沟")
|
);
|
|
// 响应式数据
|
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 万元",
|
},
|
]);
|
|
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");
|
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;
|
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;
|
font-weight: 700;
|
font-size: 18px;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.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-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>
|
