change

wangjuncheng

2025-05-16 b1398528bd9f5245f580285681cca6abc192c651

 src/components/tools/DebuffDetail.vue

@@ -13,139 +13,178 @@
</template>

<script>
   export default {
      name: "detail",
      components: {},
      props: {
         areaName: {
            type: String,
            default: "尹家西沟",
         },
// 状态管理器
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: "0.29 m",
               },
               {
                  name: "最大流速：",
                  value: "7 m/s",
               },
               {
                  name: "威胁房屋：",
                  value: "406 间",
               },
               {
                  name: "威胁人口：",
                  value: "145 户",
               },
               {
                  name: "威胁财产：",
                  value: "4872 万元",
               },
            ],
   },
   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;

         // 提取 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)
         );
      },
      methods: {
         closeMsg() {
            this.$emit("close")
         },
         showMsg() {
            this.$emit("open")
         },
      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>