<template>
|
<div class="map-wrapper">
|
<SceneMap
|
:model-value="seletedSceneList"
|
@update:model-value="onUpdateSeletedSceneList"
|
:data="scenes"
|
>
|
<template #left-top>
|
<FYOptionSupervisionStatus
|
label=""
|
:allOption="true"
|
v-model:value="supervisionStatus"
|
></FYOptionSupervisionStatus>
|
</template>
|
</SceneMap>
|
<el-row class="p-events-none top-right-wrap" align="middle">
|
<el-button
|
class="close-btn-left p-events-auto"
|
type="success"
|
size="small"
|
:icon="rightCardShow ? 'ArrowRight' : 'ArrowLeft'"
|
@click="rightCardShow = !rightCardShow"
|
></el-button>
|
<div class="right-wrapper">
|
<div v-show="rightCardShow" class="p-events-auto subtask-select">
|
<CompSubTaskSelect
|
:model-value="selectedPlans"
|
@update:model-value="onUpdateSelectedPlans"
|
height="82vh"
|
:dayTask="dayTask"
|
@submit="handleSubmitDone"
|
></CompSubTaskSelect>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
</template>
|
<script setup>
|
import { ref, computed, watch } from 'vue';
|
|
import CompSubTaskSelect from './CompSubTaskSelect.vue';
|
|
const props = defineProps({
|
// 场景计划
|
plans: {
|
type: Array,
|
default: () => []
|
},
|
dayTask: {
|
type: Object
|
}
|
});
|
|
const emits = defineEmits(['submit']);
|
|
const supervisionStatus = ref();
|
const rightCardShow = ref(true);
|
const seletedSceneList = ref([]);
|
const selectedPlans = ref([]);
|
|
watch(
|
() => props.dayTask,
|
(newVal, oldVal) => {
|
if (newVal != oldVal) {
|
seletedSceneList.value = [];
|
selectedPlans.value = [];
|
}
|
}
|
);
|
|
// 监管计划包含的场景点位信息
|
const scenes = computed(() => {
|
return props.plans
|
.filter((v) => {
|
if (!v.scene.longitude || !v.scene.latitude) {
|
return false;
|
}
|
// 按照监管状态筛选
|
if (supervisionStatus.value) {
|
switch (supervisionStatus.value.value) {
|
case '0':
|
return (
|
v.extension1 == undefined ||
|
v.extension1 == null ||
|
v.extension1 == '0'
|
);
|
case '1':
|
return v.extension1 == '1';
|
case '2':
|
return v.extension1 == '2';
|
default:
|
return true;
|
}
|
} else {
|
return true;
|
}
|
})
|
.map((p) => {
|
return p.scene;
|
});
|
});
|
|
// 监听地图选中场景事件
|
function onUpdateSeletedSceneList(val) {
|
seletedSceneList.value = val;
|
selectedPlans.value = seletedSceneList.value.map((s) => {
|
return props.plans.find((p) => p.scene.guid == s.guid);
|
});
|
}
|
|
// 监听子任务移除事件
|
function onUpdateSelectedPlans(val) {
|
selectedPlans.value = val;
|
seletedSceneList.value = selectedPlans.value.map((v) => v.scene);
|
}
|
|
function handleSubmitDone(e) {
|
console.log(e);
|
emits('submit', e);
|
}
|
</script>
|
<style scoped>
|
.map-wrapper {
|
position: relative;
|
width: 100%;
|
height: 90vh;
|
}
|
|
.right-wrapper {
|
background-color: rgba(255, 255, 255, 0.8);
|
box-shadow: var(--el-box-shadow);
|
border-radius: 4px;
|
height: 90vh;
|
}
|
|
.subtask-select {
|
width: 330px;
|
padding-left: 4px;
|
padding-top: 8px;
|
}
|
|
.close-btn-left {
|
margin-right: 0px;
|
height: 60px;
|
width: 20px;
|
}
|
|
.top-right-wrap {
|
position: absolute;
|
right: 0px;
|
top: 1px;
|
}
|
</style>
|
