<template>
|
<Left @start="startSimulate" @end="endSimulate" />
|
<echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" />
|
<TimeLine
|
v-if="showWaterSimulate"
|
@time-update="timeUpdate"
|
@is-playing="isPlaying"
|
:waterSimulateParams="waterSimulateParams"
|
@playbackFinished="playbackFinished"
|
@end="endSimulate"
|
/>
|
<DebuffDetail
|
v-if="showDebuffDetail"
|
@open="openDetail"
|
@close="showDebuffDetail = false"
|
/>
|
<DebuffTable v-if="showDebuffTable" @close="closeDebuffTable" />
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, provide } from "vue";
|
import TimeLine from "@/components/menu/TimeLine.vue";
|
import Left from "./left/Left.vue";
|
import echartInfo from "@/components/monifangzhen/echartInfo.vue";
|
import DebuffDetail from "@/components/tools/DebuffDetail.vue";
|
import DebuffTable from "@/components/tools/DebuffTable.vue";
|
import { getMaxInfluenceArea } from "@/api/index";
|
|
import { createPoint, geomToGeoJSON } from "@/utils/map.js";
|
import { checkedKeys } from "@/store/index";
|
const waterSimulateParams = ref({});
|
const showWaterSimulate = ref(false);
|
const showDebuffDetail = ref(false);
|
const showDebuffTable = ref(false);
|
const isDynamicMode = ref(false);
|
const isFinish = ref(true);
|
|
// 提供方法给所有子组件
|
provide("simulateActions", {
|
startSimulate,
|
endSimulate,
|
});
|
|
function startSimulate(form) {
|
// console.log("form", form);
|
showWaterSimulate.value = true;
|
waterSimulateParams.value = form;
|
}
|
function endSimulate() {
|
// showDebuffDetail.value = true
|
removeDataSources();
|
setTimeout(() => {
|
showWaterSimulate.value = false;
|
isDynamicMode.value = false;
|
}, 2000);
|
}
|
const MaxInfluenceAreaList = ref([]);
|
const dataSources = [];
|
function getTimeMarkers() {
|
// 将改 list数据的 gemo EPSG:4548 坐标 转为 wgs84 坐标系的 geojson 数据
|
const list = MaxInfluenceAreaList.value;
|
list.forEach((item, index) => {
|
const geosjon = geomToGeoJSON(item.geom);
|
Cesium.GeoJsonDataSource.load(geosjon, {
|
stroke: Cesium.Color.RED, // 边框颜色
|
strokeWidth: 2, // 边框宽度
|
fill: Cesium.Color.RED.withAlpha(0.5), // 填充颜色（带透明度）
|
}).then((dataSource) => {
|
viewer.dataSources.add(dataSource);
|
dataSources.push(dataSource);
|
});
|
});
|
}
|
function removeDataSources() {
|
dataSources.forEach((dataSource) => {
|
viewer.dataSources.remove(dataSource);
|
});
|
}
|
function timeUpdate(percentage) {
|
if (percentage > 99) {
|
if (showDebuffDetail.value) {
|
return;
|
}
|
checkedKeys.value = ["避险点"];
|
showDebuffDetail.value = true;
|
getTimeMarkers();
|
|
}
|
}
|
function openDetail() {
|
showDebuffTable.value = true;
|
}
|
function closeDebuffTable() {
|
showDebuffTable.value = false;
|
showDebuffDetail.value = true;
|
}
|
function getMaxInfluenceAreaData() {
|
getMaxInfluenceArea().then((res) => {
|
MaxInfluenceAreaList.value = res.data.items;
|
});
|
}
|
|
function isPlaying(val) {
|
isDynamicMode.value = val;
|
}
|
|
function playbackFinished(val) {
|
isFinish.value = val;
|
}
|
onMounted(() => {
|
getMaxInfluenceAreaData();
|
});
|
onUnmounted(() => {
|
endSimulate();
|
});
|
</script>
|
<style lang="less" scoped>
|
@import url("../assets/css/home.css");
|
</style>
|
