<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="toggleDitch">
|
{{ ditchingActive ? "关闭土方开挖" : "开启土方开挖" }}
|
</el-button>
|
<el-button type="primary" @click="toggleDam">
|
{{ damActive ? "关闭增加拦挡坝" : "开启增加拦挡坝" }}
|
</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 === '历史模拟'">
|
<CitySim :selectedArea="selectedArea" />
|
</div>
|
<div v-if="selectedSimulation === '实时模拟'">
|
<RealTimeSimulation :selectedArea="selectedArea" />
|
</div>
|
<div v-if="selectedSimulation === '预测模拟'">
|
<PredictiveSimulation :selectedArea="selectedArea" />
|
</div>
|
</div>
|
<Ditching v-show="ditchingShow" class="ditchingPosition" @update-excavation-data="handleUpdateExcavationData"></Ditching>
|
<Dam v-show="damShow" class="ditchingPosition"></Dam>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted, reactive } from "vue";
|
import HistorySimulation from "./KGSimOption/HistorySimulation.vue";
|
import CitySim from './CitySim.vue'
|
import Ditching from "@/components/tools/Ditching.vue";
|
import Dam from "@/components/tools/Dam.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([]);
|
let ditchingShow = ref(false);
|
let damShow = ref(false);
|
let ditchingActive = ref(false);
|
let damActive = ref(false);
|
|
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 handleUpdateExcavationData = (data) => {
|
console.log('接收到子组件的数据:', data);
|
// 此处可进行后续操作，如保存、绘图等
|
};
|
// 自定义过滤方法
|
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 toggleDitch = () => {
|
ditchingActive.value = !ditchingActive.value;
|
ditchingShow.value = ditchingActive.value;
|
|
if (ditchingActive.value) {
|
damActive.value = false; // 关闭加坝状态
|
damShow.value = false; // 隐藏 Dam 组件
|
} else {
|
cloesDitch();
|
}
|
};
|
|
// 切换加坝状态
|
const toggleDam = () => {
|
// damActive.value = !damActive.value;
|
// damShow.value = damActive.value;
|
|
// if (damActive.value) {
|
// ditchingActive.value = false; // 关闭开沟状态
|
// ditchingShow.value = false; // 隐藏 Ditching 组件
|
// } else {
|
// cloesDam();
|
// }
|
window.Viewer = earthCtrl.viewer;
|
earthCtrl.factory.createModelLibrary()
|
};
|
const cloesDitch = () => {
|
ditchingShow.value = false;
|
};
|
const cloesDam = () => {
|
damShow.value = false;
|
};
|
|
const handleAdd = () => {
|
console.log("加载按钮被点击");
|
};
|
</script>
|
|
<style scoped>
|
.ditchingPosition {
|
position: fixed;
|
left: 18%;
|
top: 20%;
|
}
|
|
.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: 48%;
|
}
|
}
|
|
.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>
|
