完成地图制作任务功能初版

riku

5 天以前 f19e5267cc23b1c714dc746239864f33ed715dd9

 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>