修改x按钮

guonan

6 天以前 a57caa72a54efe9de3fe26a6c36d3e8038267377

 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;
}