开始模拟跳转

guonan

2025-04-15 9eba6f3e999e7bc1f360b9a4b11dd2b204fb0feb

 src/views/left/KGSim.vue

@@ -29,32 +29,47 @@

    <!-- 历史模拟 -->
    <div class="history-simulation-wrapper">
      <el-radio-group v-model="selectedSimulation" style="margin-bottom: 10px;">
      <el-radio-group v-model="selectedSimulation" style="margin-bottom: 10px">
        <el-radio label="历史模拟">历史模拟</el-radio>
        <el-radio label="实时模拟">实时模拟</el-radio>
        <el-radio label="预测模拟">预测模拟</el-radio>
      </el-radio-group>
      <div v-if="selectedSimulation === '历史模拟'">
        <HistorySimulation :selectedArea="selectedArea"/>
        <HistorySimulation
          :selectedArea="selectedArea"
          @start="start"
          @end="end"
        />
      </div>
      <div v-if="selectedSimulation === '实时模拟'">
        <RealTimeSimulation :selectedArea="selectedArea" />
      </div>
      <div v-if="selectedSimulation === '预测模拟'">
        <PredictiveSimulation :selectedArea="selectedArea"/>
        <PredictiveSimulation :selectedArea="selectedArea" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import HistorySimulation from './KGSimOption/HistorySimulation.vue';
import PredictiveSimulation from './KGSimOption/PredictiveSimulation.vue';
import RealTimeSimulation from './KGSimOption/RealTimeSimulation.vue';
import { ref, computed } from "vue";
import HistorySimulation from "./KGSimOption/HistorySimulation.vue";
import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";

const selectedSimulation = ref('历史模拟');
const selectedArea = ref('孙胡沟');
const emit = defineEmits(["start", "end"]);

function end() {
  emit("end");
}

function start() {
  // initeWaterPrimitiveView();
  emit("start");
}

const selectedSimulation = ref("历史模拟");
const selectedArea = ref("孙胡沟");
const earesOptions = [
  { value: "孙胡沟", label: "孙胡沟" },
  { value: "鱼水洞后沟", label: "鱼水洞后沟" },
@@ -64,9 +79,9 @@
];

// 动态过滤选项
const searchQuery = ref('');
const searchQuery = ref("");
const filteredOptions = computed(() => {
  return earesOptions.filter(option =>
  return earesOptions.filter((option) =>
    option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});
@@ -77,11 +92,11 @@
};

const handleStart = () => {
  console.log('开始按钮被点击');
  console.log("开始按钮被点击");
};

const handleAdd = () => {
  console.log('加载按钮被点击');
  console.log("加载按钮被点击");
};
</script>

@@ -91,7 +106,7 @@

<style scoped>
.simulation-module {
  color: #61f7d4;   
  color: #61f7d4;
}

.simulation-area {
@@ -99,7 +114,7 @@
}

.engineering-buttons {
  .el-button{
  .el-button {
    width: 100px;
  }
}
@@ -107,7 +122,7 @@
.history-simulation-wrapper {
  margin-bottom: 20px;
  height: 100%; /* 固定高度 */
  overflow: auto; 
  overflow: auto;
}
/* 自定义单选框样式 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
@@ -118,13 +133,13 @@
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: inherit; /* 让文字颜色跟随父级 */
}
:deep(.el-select__placeholder ) {
:deep(.el-select__placeholder) {
  color: #fff; /* 让文字颜色跟随父级 */
}
:deep(.el-radio ) {
:deep(.el-radio) {
  color: #fff; /* 让文字颜色跟随父级 */
}
:deep(.el-input__inner ) {
:deep(.el-input__inner) {
  color: #fff; /* 让文字颜色跟随父级 */
}
/* .mySelectStyle {
@@ -138,4 +153,4 @@
        color: #009688 !important;
    }
} */
</style>
</style>