请写一个巡检任务定义页面，使用vue模板，它的整体布局为：左上方有一个下拉菜单，可以选择datalist里的机器人，左侧是一列多选菜单，可以在10个点位中任意选择，在这多选菜单的下方有个巡检开始的按钮，按下去即可转到巡航页面，并在巡航页面显示选择点位的信息，网页右边是一个地图，地图是自己画的，其中有小车的坐标信息、充电桩的位置和10个点位的具体信息

以下是一个简单的巡检任务定义页面的vue模板代码，包括机器人下拉菜单、多选菜单、巡检开始按钮和地图显示：

<template>
  <div>
    <div class="form-group">
      <label for="robot-select">选择机器人：</label>
      <select id="robot-select" v-model="selectedRobot">
        <option v-for="robot in robotList" :value="robot">{{ robot }}</option>
      </select>
    </div>
    <div class="form-group">
      <label for="points-select">选择巡检点位：</label>
      <div id="points-select" class="checkbox-list">
        <div v-for="(point, index) in pointList" :key="index">
          <input type="checkbox" :id="'point-'+index" :value="point" v-model="selectedPoints">
          <label :for="'point-'+index">{{ point }}</label>
        </div>
      </div>
    </div>
    <button @click="startInspection">开始巡检</button>
    <div class="map-container">
      <!-- 这里放地图显示的代码 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      robotList: ['机器人1', '机器人2', '机器人3'], // 机器人列表
      selectedRobot: '', // 选中的机器人
      pointList: ['点位1', '点位2', '点位3', '点位4', '点位5', '点位6', '点位7', '点位8', '点位9', '点位10'], // 点位列表
      selectedPoints: [] // 选中的点位
    }
  },
  methods: {
    startInspection() {
      // 跳转到巡航页面，传递选中的机器人和点位信息
      this.$router.push({
        name: 'inspection',
        params: {
          robot: this.selectedRobot,
          points: this.selectedPoints
        }
      })
    }
  }
}
</script>

<style>
/* 样式可以根据需要自行调整 */
.form-group {
  margin-bottom: 10px;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-list div {
  margin-right: 20px;
  margin-bottom: 10px;
}

.map-container {
  width: 60%;
  height: 500px;
  border: 1px solid #ccc;
  margin-top: 20px;
}
</style>