change

wangjuncheng

2025-04-23 1dcbd4839f8397f39ea0e300b3425a29627ed466

change

 src/views/left/KGSim.vue

@@ -10,6 +10,7 @@
        popper-class="mySelectStyle"
        filterable
        :filter-method="filterOptions"
        @change="handleSelectChange"
      >
        <el-option
          v-for="item in filteredOptions"
@@ -48,25 +49,36 @@
</template>

<script setup>
import { ref, computed } from "vue";
import { ref, computed, onMounted, reactive } from "vue";
import HistorySimulation from "./KGSimOption/HistorySimulation.vue";
import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";
import { getRegionData } from "@/api/trApi";

const selectedSimulation = ref("历史模拟");
const selectedArea = ref("孙胡沟");
const earesOptions = [
  { value: "孙胡沟", label: "孙胡沟" },
  { value: "鱼水洞后沟", label: "鱼水洞后沟" },
  { value: "于家西沟", label: "于家西沟" },
  { value: "北河沟", label: "北河沟" },
  { value: "龙泉峪村", label: "龙泉峪村" },
];
const selectedArea = ref(); // 选中的区域
// 重点沟数据
const importGOptions = reactive([]);

onMounted(() => {
  // 获取重点沟数据
  getRegionData({ type: 3 }).then((res) => {
    importGOptions.splice(
      0,
      importGOptions.length,
      ...res.data.map((item) => ({
        id:item.id,
        value: item.geom,
        label: item.name
      }))
    );
  });
});

// 动态过滤选项
const searchQuery = ref("");
const filteredOptions = computed(() => {
  return earesOptions.filter((option) =>
  return importGOptions.filter((option) =>
    option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});
@@ -74,6 +86,12 @@
// 自定义过滤方法
const filterOptions = (query) => {
  searchQuery.value = query;
};

// 处理选项选择事件
const handleSelectChange = (value) => {
  console.log("选中的值：", value); // 打印选中的值
  console.log("当前选中的完整数据：", importGOptions.find((item) => item.value === value)); // 打印完整的选中数据
};

const handleStart = () => {
@@ -84,9 +102,6 @@
  console.log("加载按钮被点击");
};
</script>

<style scoped>
</style>

<style scoped>
.simulation-module {
@@ -129,15 +144,4 @@
:deep(.el-input__inner) {
  color: #fff; /* 让文字颜色跟随父级 */
}
/* .mySelectStyle {
    .el-select-dropdown__item:hover {
        color: #009688 !important;
    }
    .el-select-dropdown__item {
      color: #fff !important;
    }
    .el-select-dropdown__item.selected {
        color: #009688 !important;
    }
} */
</style>
</style>

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -186,8 +186,10 @@
};
const params = {
  name: schemeName.value,

  type: "历史模拟",
  data: {
    
    rainFall: totalRainfall.value,
    rainfallIntensity: rainfallIntensity.value,
    rainfallDuration: rainfallDuration.value,
@@ -201,10 +203,24 @@
    return; // 防止重复提交
  }
  isLoading.value = true; // 开始加载状态
  console.log("当前选中的区域 (selectedArea):", props.selectedArea);

  const params = {
    name: schemeName.value,
    type: "历史模拟",
    eares: props.selectedArea,
    data: {
      rainFall: totalRainfall.value,
      rainfallIntensity: rainfallIntensity.value,
      rainfallDuration: rainfallDuration.value,
      rainfallHistory: rainfallHistory.value,
    },
  };

  try {
    await simStore.createSimulation(params); // 调用 Store 中的保存方法
    ElMessage.success("保存成功");
    saveDialogVisible.value = true; // 显示保存对话框（如果需要）
    saveDialogVisible.value = false; // 关闭保存对话框
  } catch (error) {
    console.error("保存失败:", error);
    ElMessage.error("保存失败，请稍后重试");

 vue.config.js

@@ -21,7 +21,7 @@
    hot: true,
    proxy: {
      '/api': {
        target: 'http://192.168.56.107:8078',
        target: 'http://192.168.56.107:8077',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/api': ''