<template>
|
<div class="district">
|
<div class="left-top">
|
<span>监测位置</span>
|
</div>
|
|
<div class="left-content district-content">
|
<div style="margin-left: 5px">
|
<span style="color: white">重点沟：</span>
|
<el-select
|
@change="handleChange"
|
v-model="selectValue"
|
placeholder="Select"
|
size="large"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
|
<!-- 滚动区域 -->
|
<div style="overflow-y: auto; height: 95%">
|
<!-- 加载遮罩层 -->
|
<div v-if="loading" class="loading-overlay">
|
<div class="spinner"></div>
|
</div>
|
<div
|
v-else
|
v-for="(item, key) in districtList"
|
:key="key"
|
class="district-item"
|
@click="handleClick(item)"
|
>
|
<div class="district-item-icon"></div>
|
<div class="district-item-text">{{ item.hdName }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, watch } from "vue";
|
import { createPoint } from "@/utils/map";
|
import { useSimStore } from "@/store/simulation";
|
|
const simStore = useSimStore();
|
|
const selectValue = ref("孙胡沟");
|
|
const options = ref([
|
{
|
value: "孙胡沟",
|
label: "孙胡沟",
|
},
|
{
|
value: "鱼水洞后沟",
|
label: "鱼水洞后沟",
|
},
|
{
|
value: "于家西沟",
|
label: "于家西沟",
|
},
|
{
|
value: "北河沟",
|
label: "北河沟",
|
},
|
{
|
value: "龙泉峪村",
|
label: "龙泉峪村",
|
},
|
]);
|
|
const districtList = ref([]);
|
const loading = ref(true); // 控制加载状态
|
|
function handleClick(district) {
|
const entity = viewer.entities.getById(district.hdId);
|
if (entity) {
|
viewer.flyTo(entity, {
|
offset: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-45),
|
range: 4000,
|
},
|
});
|
}
|
}
|
|
// 根据区域名称过滤数据
|
const filterDataByArea = (areaName) => {
|
if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
|
districtList.value = [];
|
return;
|
}
|
|
districtList.value = simStore.DangerPoint.filter((item) =>
|
item.position?.includes(areaName)
|
);
|
};
|
|
// 处理区域变化事件
|
const handleChange = (item) => {
|
const areaName = item;
|
if (!areaName) {
|
ElMessage.warning("请选择一个区域");
|
return;
|
}
|
|
filterDataByArea(areaName);
|
};
|
|
// 监听 simStore.DangerPoint 变化
|
watch(
|
() => simStore.DangerPoint,
|
(newVal) => {
|
if (newVal && newVal.length > 0) {
|
filterDataByArea(selectValue.value);
|
loading.value = false; // 数据加载完成
|
} else {
|
districtList.value = [];
|
loading.value = true; // 数据未准备就绪
|
}
|
},
|
{ immediate: true }
|
);
|
|
onMounted(() => {
|
// 默认先检查一遍数据
|
if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
|
filterDataByArea("孙胡沟");
|
loading.value = false;
|
} else {
|
loading.value = true;
|
}
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.loading-overlay {
|
position: absolute;
|
top: 120px;
|
left: 0px;
|
right: 0px;
|
bottom: 10px;
|
background-color: rgba(236, 233, 233, 0.5); /* 半透明遮罩 */
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 999;
|
}
|
|
.spinner {
|
width: 40px;
|
height: 40px;
|
border: 4px solid #fff;
|
border-top: 4px solid transparent;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
}
|
|
@keyframes spin {
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
.district {
|
position: absolute;
|
width: 345px;
|
top: 100px;
|
left: 30px;
|
bottom: 55px;
|
z-index: 99;
|
}
|
|
.district-item {
|
height: 30px;
|
cursor: pointer;
|
margin-top: 10px;
|
}
|
.district-content {
|
padding: 10px;
|
box-sizing: border-box;
|
}
|
.district-item-icon {
|
background: url("@/assets/img/menu/locationicon.png") no-repeat;
|
background-position: 5px 5px;
|
width: 30px;
|
height: 30px;
|
float: left;
|
}
|
|
.district-item-text {
|
color: white;
|
line-height: 30px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.loading-text {
|
color: white;
|
font-size: 14px;
|
text-align: center;
|
margin-top: 20px;
|
}
|
|
/deep/ .el-select__placeholder {
|
color: white;
|
}
|
/deep/ .el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
color: white !important;
|
background-color: rgb(38, 124, 124, 0.5);
|
}
|
</style>
|
