<template>
|
<div class="simulation-module">
|
<!-- 模拟区域 -->
|
<div class="simulation-area">
|
<p>模拟区域</p>
|
<el-select
|
v-model="selectedArea"
|
placeholder="请选择"
|
style="max-width: 600px"
|
popper-class="mySelectStyle"
|
filterable
|
:filter-method="filterOptions"
|
>
|
<el-option
|
v-for="item in filteredOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
|
<!-- 治理工程标绘 -->
|
<div class="engineering-buttons">
|
<p>治理工程标绘</p>
|
<el-button type="primary" @click="handleStart">开沟</el-button>
|
<el-button type="success" @click="handleAdd">加坝</el-button>
|
</div>
|
|
<!-- 历史模拟 -->
|
<div class="history-simulation-wrapper">
|
<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" />
|
</div>
|
<div v-if="selectedSimulation === '实时模拟'">
|
<!-- <RealTimeSimulation :selectedArea="selectedArea" /> -->
|
</div>
|
<div v-if="selectedSimulation === '预测模拟'">
|
<!-- <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";
|
|
const selectedSimulation = ref("历史模拟");
|
const selectedArea = ref("孙胡沟");
|
const earesOptions = [
|
{ value: "孙胡沟", label: "孙胡沟" },
|
{ value: "鱼水洞后沟", label: "鱼水洞后沟" },
|
{ value: "于家西沟", label: "于家西沟" },
|
{ value: "北河沟", label: "北河沟" },
|
{ value: "龙泉峪村", label: "龙泉峪村" },
|
];
|
|
// 动态过滤选项
|
const searchQuery = ref("");
|
const filteredOptions = computed(() => {
|
return earesOptions.filter((option) =>
|
option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
);
|
});
|
|
// 自定义过滤方法
|
const filterOptions = (query) => {
|
searchQuery.value = query;
|
};
|
|
const handleStart = () => {
|
console.log("开始按钮被点击");
|
};
|
|
const handleAdd = () => {
|
console.log("加载按钮被点击");
|
};
|
</script>
|
|
<style scoped>
|
</style>
|
|
<style scoped>
|
.simulation-module {
|
color: #61f7d4;
|
font-size: 14px;
|
height: 100%;
|
background: url("@/assets/img/screen/leftbg.png");
|
}
|
|
.simulation-area {
|
margin-bottom: 10px;
|
}
|
|
.engineering-buttons {
|
.el-button {
|
width: 100px;
|
}
|
}
|
|
.history-simulation-wrapper {
|
margin-bottom: 20px;
|
height: 100%; /* 固定高度 */
|
overflow: auto;
|
}
|
/* 自定义单选框样式 */
|
:deep(.el-radio__input.is-checked .el-radio__inner) {
|
background-color: #009688; /* 选中时的背景颜色 */
|
border-color: #009688; /* 选中时的边框颜色 */
|
}
|
|
:deep(.el-radio__input.is-checked + .el-radio__label) {
|
color: inherit; /* 让文字颜色跟随父级 */
|
}
|
:deep(.el-select__placeholder) {
|
color: #fff; /* 让文字颜色跟随父级 */
|
}
|
:deep(.el-radio) {
|
color: #fff; /* 让文字颜色跟随父级 */
|
}
|
: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>
|
