low-altitude-web/src/views/home/cpns/PanelHxhs.vue

<!-- 航线划设面板 -->
<template>
  <div class="panel-hxhs flex flex-col aside-left-inner">
    <div class="title-main">航线划设</div>
    <el-steps :active="currentStep" finish-status="success" align-center>
      <el-step title="航线划设" />
      <el-step title="航线评估" />
    </el-steps>

    <div class="flex-1 relative mb-4">
      <Transition name="emerge-left">
        <el-form ref="formRef"  v-show="currentStep === 0"  :model="form" :rules="rules" label-position="left"
          size="large" class="p-form p-main">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="任务类型" prop="taskType">
            <el-select v-model="form.taskType" placeholder="">
              <el-option label="短途运输" value="01" />
              <el-option label="外卖配送" value="02" />
            </el-select>
          </el-form-item>
          <el-form-item label="飞行器" prop="uavType">
            <el-select v-model="form.uavType" placeholder="">
              <el-option label="微型无人机" value="01" />
              <el-option label="轻型无人机" value="02" />
              <el-option label="小型无人机" value="03" />
              <el-option label="中型无人机" value="04" />
              <el-option label="大型无人机" value="05" />
            </el-select>
          </el-form-item>
          <el-form-item label="航线选择" prop="dataType">
            <el-radio-group v-model="form.dataType" @change="changeDataType()" size="large">
              <el-radio label="起降场规划" value="02" />
              <el-radio label="手动划设" value="01" />
              <el-radio label="导入航线" value="03" />
            </el-radio-group>
          </el-form-item>
          <div v-if="form.dataType === '01'" @click="changeDataType()"  class="msg-draw">
            <img src="../../../assets/images/page/icon-draw.png" alt="">
            <span>重新绘制</span>
          </div>
          <template v-if="form.dataType === '02'">
            <el-form-item label="起飞场" prop="fromPort">
              <el-select v-model="form.fromPort" @change="showPort('fromPort')"  placeholder="">
                <el-option v-for="item in portOptions" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.value === form.toPort" />
              </el-select>
            </el-form-item>
            <el-form-item label="降落场" prop="toPort">
              <el-select v-model="form.toPort" @change="showPort('toPort')"  placeholder="">
                <el-option v-for="item in portOptions" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.value === form.fromPort" />
              </el-select>
            </el-form-item>
          </template>
          <el-form-item label="上传文件" prop="file" v-if="form.dataType === '03'">
            <el-upload v-model:file-list="form.file" action="" class="single-uplaod">
              <div class="upload-trigger">点击上传文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="保持半径" prop="radius">
            <el-input v-model="form.radius" type="number" class="flex-1">
              <template #suffix>
                <span>米</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="飞行高度" prop="height">
            <el-input v-model="form.height1" type="number" class="flex-1">
              <template #suffix>
                <span>米</span>
              </template>
            </el-input>
            <div class="mx-3">--</div>
            <el-input v-model="form.height2" type="number" class="flex-1">
              <template #suffix>
                <span>米</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="日期" prop="startDate">
            <el-date-picker v-model="form.startDate" value-format="YYYY-MM-DD" type="date"
              class="flex-1"></el-date-picker>
            <div class="mx-3">--</div>
            <el-date-picker v-model="form.endDate" value-format="YYYY-MM-DD" type="date"
              class="flex-1"></el-date-picker>
          </el-form-item>
          <el-form-item label="时间" prop="startTime">
            <el-time-select v-model="form.startTime" :max-time="form.endTime" placeholder="" start="00:00" step="00:15"
              end="23:45" class="flex-1" />
            <div class="mx-3">--</div>
            <el-time-select v-model="form.endTime" :min-time="form.startTime" placeholder="" start="00:00" step="00:15"
              end="23:45" class="flex-1" />
          </el-form-item>
          <el-form-item label="网格查询">
<!--            <el-checkbox v-model="form.grade">评分</el-checkbox>-->
            <el-button class="btn-secondary ml-4" @click="queryCube()">查询网格</el-button>
            <el-button class="btn-secondary ml-4" @click="closeCube()">关闭网格</el-button>
          </el-form-item>
<!--          <el-form-item label="辅助规划">-->
<!--            <el-button class="btn-secondary" @click="getAutoPath()" >辅助规划</el-button>-->
<!--          </el-form-item>-->
        </el-form>
      </Transition>
      <Transition name="emerge-right">
        <div v-show="currentStep === 1" class="p-main">
          <ul class="list-plans flex justify-evenly mb-4">
            <li v-for="item in plans" class="pt-7 cursor-pointer hover:brightness-125"
              :class="{ 'active': item.id === currentPlan }" @click="handlePickPlan(item)">
              <div class="text-base"><span class="tuli" :style="{backgroundColor:item.color}"></span>{{ item.feature }}</div>
              <div class="text-sm py-1">距离&nbsp;<span class="num">{{ item.distance }}</span>&nbsp;公里</div>
              <div class="text-sm">风险度：<span class="num">{{ item.risk }}</span></div>
            </li>
          </ul>
          <el-form-item label="网格查询">
            <!--            <el-checkbox v-model="form.grade">评分</el-checkbox>-->
            <el-button class="btn-secondary ml-4" @click="queryCube()">查询网格</el-button>
            <el-button class="btn-secondary ml-4" @click="closeCube()">关闭网格</el-button>
          </el-form-item>

          <div class="msg-safe mb-2">当前计划无冲突!</div>

          <div v-for="item in results" :key="item.title" class="mb-3">
            <div class="title-sub">
              {{ item.title }}
              <div class="flex-1 flex justify-between items-center pl-2">
                <span class="risk-label" :class="item.level === '低风险' ? 'green' : 'orange'">{{ item.level
                  }}</span>
                <span class="btn-inline">重新评估</span>
              </div>
            </div>
            <table class="table-default stripe mt-2">
              <thead>
                <tr>
                  <th v-for="th in item.cols">{{ th }}</th>
                  <th class="w-20">地图显示</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="row in item.details">
                  <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
                  <td class="w-20">
                    <el-checkbox size="large" v-model="row.display"></el-checkbox>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </Transition>
    </div>


    <div class="text-center">
      <el-button v-if="currentStep === 0" :disabled="!hasDraw"  class="btn-main" @click="toNext">下一步</el-button>
      <template v-if="currentStep === 1">
        <el-button class="btn-main" @click="toPrev">上一步</el-button>
        <el-button class="btn-main" @click="handlePreview">计划预演</el-button>
        <el-button class="btn-main" @click="handleSave">保存</el-button>
      </template>
    </div>

  </div>
</template>

<script setup>
import {ref, onMounted, watch, onBeforeUnmount, computed} from 'vue';
import {routePlanAll, saveRoute, searchQJCList} from "@/service/panelHxhs.js";
import {geometryMeshEffect, getPathCube, showAndRedrawPath} from "@/utils/map/addTool.js";
import useLayoutStore from '@/store/layout'
import {useMapStore} from "@/store/map.js";
import {ElMessage} from "element-plus";
const currentStep = ref(0)
let currentPath = []; // 当前规划路径
let allPathArr = []; // 所有路径
let autoHeight = false //手动规划
const layoutStore = useLayoutStore();
const mapStore = useMapStore();
const form = ref({
  taskType: '01',
  uavType: '01',
  dataType: '02',
  height1: 60,
  height2: 80,
  radius:5
})

const portOptions = []

const rules = {
  name: [{ required: true, message: '请输入空域名称', trigger: 'none' }]
}

const formRef = ref(null)

const results = ref([
  {
    title: '空域评估',
    level: '低风险',
    cols: { areaName: '冲突空域', height: '冲突高度' },
    details: [
      { areaName: '虹桥机场净空区', height: '112-120', display: false },
      { areaName: '虹桥机场净空区', height: '112-120', display: false },
    ]
  },
  {
    title: '计划冲突',
    level: '低风险',
    cols: { areaName: '冲突空域', height: '冲突高度' },
    details: [
      { areaName: '合生汇-黄兴公园美团飞行计划', height: '112-120', display: false },
      { areaName: '合生汇-黄兴公园美团飞行计划', height: '112-120', display: false },
    ]
  },
  {
    title: '障碍物分析',
    level: '高风险',
    cols: { object: '冲突空域', height: '冲突高度' },
    details: [
      { object: '建筑物', height: '112-120', display: false },
      { object: '建筑物', height: '112-120', display: false },
    ]
  },
  {
    title: '地面安全评估',
    level: '高风险',
    cols: { element: '要素', coverage: '覆盖率' },
    details: [
      { element: '路面', coverage: '40%', display: false },
      { element: '道路', coverage: '20%', display: false },
      { element: '综合占比', coverage: '60%', display: false },
    ]
  }
])

let plans = ref([
  { id: '1',name:'originalPath', feature: '接近原方案',color:'#FFA500',  distance: '', risk: '50' },
  { id: '2',name:'safePath',  feature: '地面风险较低',color:'#00FF00',  distance: '', risk: '10' },
  { id: '3',name:'shortestPath',  feature: '距离最短',color:'#FFA5FF',  distance: '', risk: '50' },
])

const isSafe = computed(() => {
  return results.value.every(i => i.level === 1)
})

const hasDraw = ref(false)


function handlePickPlan(plan) {
  currentPlan.value = plan.id;
  showAllPathByType()
}

const currentPlan = ref('1');

function toNext() {
  formRef.value.validate(valid => {
    if (valid) {
      currentStep.value = 1;
      getAutoPath();
    }
  })
}

function toPrev() {
  currentStep.value = 0
  getPathCube({
    status:"hide",
  })
  hasDraw.value = false;
  showAndRedrawPath({
    status:"hide",
  });
  geometryMeshEffect({
    id: "fromPort",
    status:"hide"
  })
  geometryMeshEffect({
    id: "toPort",
    status:"hide"
  })
  geometryMeshEffect({
    "status": "hide",
    "id": "drawAllPathOne"
  })
}

//保存网格结果
function handleSave() {
  saveRoute({
    ...form.value,
    shape: JSON.stringify({paths:[currentPath]})
  }).then(res =>{
    if(res.data.code == 200 && res.data.msg == "success"){
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
    }else{
      ElMessage({
        type: 'error',
        message: '保存失败'
      })
    }
  }).catch(()=>{
    ElMessage({
      type: 'error',
      message: '保存失败'
    })
  })
}

function handlePreview() {

}

//获取起降数据
function getQJCList(){
  searchQJCList().then(res=>{
    let data = res.data.data;
    data.forEach((item)=>{
      portOptions.push({
        label: item.name,
        value: item.id,
        shape: item.shape,
        geoType: item.geoType
      })
    })
  })
}

function showPort(id){
  geometryMeshEffect({
    id: id,
    status:"show",
    data: [{
      type: portOptions.find((item)=>item.value ==form.value[id]).geoType,
      shape: {
        ...JSON.parse(portOptions.find((item)=>item.value ==form.value[id]).shape),
        color: [0,255,0,0.7]
      }
    }]
  })
  showOriginPath()
}

//起降场选择完成生成原始直线
function showOriginPath(){
  if(form.value.fromPort && form.value.toPort){
    let formPoint = JSON.parse(portOptions.find((item)=>item.value ==form.value.fromPort).shape).point;
    let toPoint = JSON.parse(portOptions.find((item)=>item.value ==form.value.toPort).shape).point;
    debugger
    currentPath = [
      [formPoint.x, formPoint.y,formPoint.z],
      [formPoint.x, formPoint.y,(form.value.height1 * 1 + form.value.height2 * 1)/2],
      [(formPoint.x + toPoint.x)/2, (formPoint.y + toPoint.y)/2,(form.value.height1 * 1 + form.value.height2 * 1)/2],
      [toPoint.x, toPoint.y,(form.value.height1 * 1 + form.value.height2 * 1)/2],
      [toPoint.x, toPoint.y,toPoint.z]
    ]
    hasDraw.value = true;
    showAndRedrawPath({
      status:"show",
      path:currentPath
    });
  }
}


//查询网格
function queryCube(){
  getPathCube({
    status:"show",
    paths:[currentPath]
  })
}

//关闭网格
function closeCube(){
  getPathCube({
    status:"hide"
  })
}


//辅助规划
function getAutoPath(){
    let paramsPaths = [];
    currentPath.forEach((item) =>{
      paramsPaths.push({
        x:item[0],
        y:item[1],
        z:item[2]
      })
    })
    layoutStore.toggleGlobalLoading(true)
    routePlanAll({
      height1: form.value.height1,
      height2: form.value.height2,
      paths:paramsPaths
    }).then(res=>{
      layoutStore.toggleGlobalLoading(false)
      debugger
      let data = res.data.data;
      allPathArr = data;
      plans.value.forEach((item)=>{
        item.distance = (data[item.name].length/1000).toFixed(2)
      });
      showAllPathByType();
    });
}


function showAllPathByType(){
  let otherPathArr = [];
  if(currentPlan.value == 1){ //接近原路线
    if(allPathArr.safePath.path.length > 0){
      otherPathArr.push({
        "name": "安全路径",
        "type": "polyline",
        "shape":{
          "radius": 10,
          "paths": allPathArr.safePath.path,
          "color": [0,255,0,0.3]
        }
      })
    }
    if(allPathArr.shortestPath.path.length > 0){
      otherPathArr.push({
        "name": "贴合路径",
        "type": "polyline",
        "shape":{
          "radius": 10,
          "paths": allPathArr.shortestPath.path,
          "color": [255,165,255,0.3]
        }
      })
    }
    showAndRedrawPath({
      status:"show",
      path:allPathArr.originalPath.path,
      color:[255,234,0,0.7]
    });
    currentPath = allPathArr.shortestPath.path;
  }else if(currentPlan.value == 2){  //安全
    if(allPathArr.shortestPath.path.length > 0){
      otherPathArr.push({
        "name": "最短路径",
        "type": "polyline",
        "shape":{
          "radius": 10,
          "paths": allPathArr.shortestPath.path,
          "color": [255,165,255,0.3]
        }
      })
    }
    if(allPathArr.originalPath.path.length > 0){
      otherPathArr.push({
        "name": "贴合路径",
        "type": "polyline",
        "shape":{
          "radius": 10,
          "paths": allPathArr.originalPath.path,
          "color": [255,234,0,0.3]
        }
      })
    }
    showAndRedrawPath({
      status:"show",
      path:allPathArr.safePath.path,
      color:[0,255,0,0.7]
    });
    currentPath = allPathArr.safePath.path;
  }else if(currentPlan.value == 3){  //最短
    if(allPathArr.safePath.path.length > 0){
      otherPathArr.push({
        "name": "安全路径",
        "type": "polyline",
        "shape":{
          "radius": 10,
          "paths": allPathArr.safePath.path,
          "color": [0,255,0,0.3]
        }
      })
    }
    if(allPathArr.originalPath.path.length > 0){
      otherPathArr.push({
        "name": "贴合路径",
        "type": "polyline",
        "shape":{
          "radius": 10,
          "paths": allPathArr.originalPath.path,
          "color": [255,234,0,0.3]
        }
      })
    }
    showAndRedrawPath({
      status:"show",
      path:allPathArr.shortestPath.path,
      color:[ 225,165,255,0.7]
    });
    currentPath = allPathArr.shortestPath.path;
  }
  geometryMeshEffect({
    "status": "show",
    "id": "drawAllPathOne",
    "data":otherPathArr
  })
}

function getDrawGeometry(){
  if(mapStore.draw_geometry){
    if(autoHeight){
      let path = mapStore.draw_geometry.paths[0];
      let flyPathArr = [path[0]];
      path.forEach((item) => {
        flyPathArr.push([item[0],item[1],(form.value.height1*1 + form.value.height2*1)/2 ]);
      });
      flyPathArr.push([path[path.length-1][0],path[path.length-1][1],0]);
      hasDraw.value = true;
      showAndRedrawPath({
        status:"show",
        path:flyPathArr
      });
      autoHeight = false;
      currentPath = flyPathArr;
    }else{
      if(currentPlan.value == 1){  //最接近原航线，替换原航线数据
        allPathArr.originalPath.path = mapStore.draw_geometry.paths[0];
      }else if(currentPlan.value == 2){   //最安全
        allPathArr.safePath.path = mapStore.draw_geometry.paths[0];
      }else if(currentPlan.value == 3){   //最短
        allPathArr.shortestPath.path = mapStore.draw_geometry.paths[0];
      }
      currentPath = mapStore.draw_geometry.paths[0];
    }
  }
}

function changeDataType(){
  if(form.value.dataType == '01'){ //手动
    autoHeight = true;
    hasDraw.value = true;
    showAndRedrawPath({
      status:"show",
      radius:form.value.radius
    });
    geometryMeshEffect({
      id: "fromPort",
      status:"hide"
    })
    geometryMeshEffect({
      id: "toPort",
      status:"hide"
    })
  }else if(form.value.dataType == "02"){ //自动
    autoHeight = false;
    hasDraw.value = false;
    showAndRedrawPath({
      status:"hide"
    });
  }else if(form.value.dataType == "03"){  //导入航线
    autoHeight = false;
    hasDraw.value = false;
    showAndRedrawPath({
      status:"hide"
    });
    geometryMeshEffect({
      id: "fromPort",
      status:"hide"
    })
    geometryMeshEffect({
      id: "toPort",
      status:"hide"
    })
  }
}

//展示冲突结果



onMounted(()=>{
  getQJCList()
})

watch(() => mapStore.draw_geometry, (val) => {
  getDrawGeometry()
}, {
  deep: true
})

watch(() => mapStore.cubeResult, (val) => {
  //showConflict()
}, { deep: true })


onBeforeUnmount(() => {
  toPrev()
})

</script>

<style lang="scss">
@use '../../../assets/styles/panel-form.scss';
</style>

<style lang="scss" scoped>
.panel-hxhs {
  :deep(.p-form) {
    .el-form-item__label {
      width: 105px;
    }
  }

  .msg-draw {
    height: 38px;
    margin: -5px 0 25px;
    background: #62729486;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;

    img {
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
  }

  .list-plans {
    li {
      width: 134px;
      height: 117px;
      background: url('../../../assets/images/page/bg-plan.png');
      background-size: 100% !important;
      text-align: center;
      .tuli{
        display: inline-block;
        margin-right: 4px;
        width: 10px;
        height: 10px;
      }
      .num {
        color: #8CBCFF;
      }

      &.active {
        background: url('../../../assets/images/page/bg-plan-h.png');
      }
    }
  }
}
</style>