<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"
|
@change="handleSelectChange"
|
>
|
<el-option
|
v-for="item in filteredOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item"
|
/>
|
</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, 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";
|
import { EventBus } from "@/eventBus"; // 引入事件总线
|
|
const selectedSimulation = ref("历史模拟");
|
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 importGOptions.filter((option) =>
|
option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
);
|
});
|
|
// 自定义过滤方法
|
const filterOptions = (query) => {
|
searchQuery.value = query;
|
};
|
|
// 处理选项选择事件
|
const handleSelectChange = (value) => {
|
EventBus.emit("select-geom", { geom: value.value, flyHeight: 8000 });
|
console.log("选中的值：", value); // 打印选中的值
|
console.log(
|
"当前选中的完整数据：",
|
importGOptions.find((item) => item.value === value)
|
); // 打印完整的选中数据
|
};
|
|
const handleStart = () => {
|
console.log("开始按钮被点击");
|
};
|
|
const handleAdd = () => {
|
console.log("加载按钮被点击");
|
};
|
</script>
|
|
<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; /* 让文字颜色跟随父级 */
|
}
|
</style>
|
