guonan
2025-06-24 c0b4517e7362144cc1683ee0bf0b7e00b67d539a
src/components/tools/DebuffDetail.vue
@@ -1,15 +1,15 @@
<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>
@@ -20,171 +20,176 @@
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;
            }
         }
         const rainfallList = data.rainfalls;
  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;
        }
      }
         // 提取 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;
      if (selectedScheme.value.type !== 2) {
        const rainfallList = data.rainfalls;
         // 更新 detailList 中的“最大雨强”和“平均雨强”
         this.detailList[0].value = maxRain.toFixed(2) + " mm/h";       // 最大雨强
         this.detailList[1].value = avgRain.toFixed(2) + " mm/h";       // 平均雨强
        // 提取 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;
         console.log('当前方案下最小雨量、最大雨量、平均雨量:',
            minRain.toFixed(2),
            maxRain.toFixed(2),
            avgRain.toFixed(2)
         );
      },
      closeMsg() {
         this.$emit("close")
      },
      showMsg() {
         this.$emit("open")
      },
   },
}
        // 更新 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;
  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;
  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;
  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;
  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>