zn-admin-vue3-wcs/src/views/mapPage/realTimeMap/index.vue

<template>
  <ContentWrap>
    <div style="display: flex; align-items: center">
      <el-cascader
        v-model="mapValue"
        :options="list"
        @change="handleChangeMap"
        style="width: 160px"
      />
      <div style="width: 1px; height: 25px; background: #e5e5e5; margin: 0 16px"></div>
      <el-button @click="createTask" :icon="'CirclePlus'" style="color: #536387"
        >新建任务</el-button
      >
      <el-button @click="editMap" :icon="'EditPen'" style="color: #536387">地图编辑</el-button>
      <el-button type="danger" @click="emergencyStop" :icon="'Remove'">一键急停</el-button>
    </div>
  </ContentWrap>

  <div class="main-content">
    <!-- <div @click="downAgv">导出zip</div> -->
    <!-- 首页 -->
    <indexPage ref="indexPageRef" />
  </div>

  <!-- 新建任务的弹窗 -->
  <createTaskDialog v-if="mapValue.length" ref="createTaskDialogRef" :positionMapId="mapValue[1]" />
</template>

<script setup>
import indexPage from './components/indexPage.vue'
import createTaskDialog from './components/createTaskDialog.vue'
import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
import * as MapApi from '@/api/map/map'
import download from '@/utils/download'
import { ElMessage, ElMessageBox } from 'element-plus'

const message = useMessage() // 消息弹窗
const route = useRoute()
const { push } = useRouter()
defineOptions({ name: 'MapPageRealTimeMap' })
const mapValue = ref([])
const list = ref([])
const indexPageRef = ref(null)

const downAgv = async () => {
  const data = await MapApi.agvDownload()
  download.zip(data, `agv-${new Date().getTime()}.zip`)
}
// 筛选出对应的区域对象
const findChildrenByValues = (tree, values) => {
  if (!tree || tree.length === 0) {
    return null
  }
  function traverse(node) {
    if (node.children) {
      for (let child of node.children) {
        if (values.includes(child.value)) {
          return child
        }
        let result = traverse(child)
        if (result) {
          return result
        }
      }
    }
    return null
  }

  for (let root of tree) {
    if (values.includes(root.value)) {
      if (root.children) {
        for (let child of root.children) {
          if (values.includes(child.value)) {
            return child
          }
          let result = traverse(child)
          if (result) {
            return result
          }
        }
      }
    }
    let result = traverse(root)
    if (result) {
      return result
    }
  }
  return null
}

//获取地图区域
const getList = async () => {
  let data = await MapApi.getPositionMapGetMap()
  let mapList = []
  for (let key in data) {
    mapList.push({
      floor: key,
      label: key + '层',
      value: key,
      children: data[key]
    })
  }
  if (mapList.length) {
    mapList.forEach((item) => {
      if (item.children.length) {
        item.children.forEach((child) => {
          child.label = child.area
          child.value = child.id
        })
      }
    })
  }

  list.value = mapList

  if (query.mapId) {
    let item = findDataById(data, Number(query.mapId))
    mapValue.value = [String(item.floor), Number(item.id)]
  }

  if (mapValue.value.length) {
    handleChangeMap(mapValue.value)
  } else {
    mapValue.value = [list.value[0].value, list.value[0].children[0].value]
    indexPageRef.value.getMapData(JSON.parse(JSON.stringify(list.value[0].children[0])))
  }
}
const handleChangeMap = async (e) => {
  let item = findChildrenByValues(list.value, e)
  indexPageRef.value.getMapData(item)
  console.log(item)
  router.replace({
      name: 'MapPageRealTimeMap',
      query: {
        mapId: item.id
      }
    })
}
//新建任务
const createTaskDialogRef = ref()
const createTask = async () => {
  ElMessageBox.confirm('是否发起拼接任务？', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning'
  })
    .then(() => {
      push({ name: 'taskManagementCreateTask' })
    })
    .catch(() => {
      createTaskDialogRef.value.open()
    })
}

//一键急停
const emergencyStop = () => {}

//地图编辑
const router = useRouter() // 路由
const editMap = () => {
  router.push({
    name: 'editMapPageRealTimeMap',
    query: {
      mapId: mapValue.value[1]
    }
  })
}

const findDataById = (obj, id) => {
  // 遍历 obj 的每一层
  for (const floor in obj) {
    // 遍历当前楼层的每个区域
    for (const item of obj[floor]) {
      // 如果找到匹配的 id，返回该数据
      if (item.id === id) {
        return item
      }
    }
  }
  // 如果没有找到，返回 null
  return null
}

const { query } = useRoute() // 查询参数
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.main-content {
  // background-color: #fff;
}
</style>