From f19e5267cc23b1c714dc746239864f33ed715dd9 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 05 十二月 2025 17:55:02 +0800
Subject: [PATCH] 完成地图制作任务功能初版
---
src/views/fysp/task/components/CompTaskMap.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 104 insertions(+), 13 deletions(-)
diff --git a/src/views/fysp/task/components/CompTaskMap.vue b/src/views/fysp/task/components/CompTaskMap.vue
index 4ca6f09..2e188e7 100644
--- a/src/views/fysp/task/components/CompTaskMap.vue
+++ b/src/views/fysp/task/components/CompTaskMap.vue
@@ -1,6 +1,10 @@
<template>
- <div style="width: 68vw; height: 600px; background-color: aliceblue">
- <SceneMap :data="scenes">
+ <div class="map-wrapper">
+ <SceneMap
+ :model-value="seletedSceneList"
+ @update:model-value="onUpdateSeletedSceneList"
+ :data="scenes"
+ >
<template #left-top>
<FYOptionSupervisionStatus
label=""
@@ -9,10 +13,32 @@
></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 } from 'vue';
+import { ref, computed, watch } from 'vue';
+
+import CompSubTaskSelect from './CompSubTaskSelect.vue';
const props = defineProps({
// 鍦烘櫙璁″垝
@@ -20,17 +46,36 @@
type: Array,
default: () => []
},
- dayTasks: {
- type: Array,
- default: () => []
+ dayTask: {
+ type: Object
}
});
-const supervisionStatus = ref();
+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':
@@ -47,16 +92,62 @@
return true;
}
} else {
- return true
+ return true;
}
- // if (supervisionStatus.value) {
- // supervisionStatus.value;
- // } 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>
--
Gitblit v1.9.3