GCSGUI/src/components/toolbar.vue

<!--
  文件描述：工具条
  创建时间：2024/4/16 10:54
  创建人：Zhaipeixiu
-->
<script setup>
import {ChevronBack, CreateOutline, DuplicateSharp, EyeSharp, Layers, Settings} from '@vicons/ionicons5'
import {RulerAlt} from '@vicons/carbon'
import {TerrainSharp} from '@vicons/material'
import {DrawPolygon} from '@vicons/fa'
import {useMessage} from 'naive-ui'
import {ref} from "vue";
import {useStaticStore} from "@/store/staticOptions.js";
import {login, requestAirline} from "@/assets/js/request.js";
import {dataProcess, getAirline} from "@/assets/js/websocketProtocol.ts";

const message = useMessage();
let file, SceneValue;
let showModal = ref(false);
let hasPlane = ref(false);
let store = useStaticStore();

// --------------------------------------


SceneValue = ref('untrace');
let sceneOptions= [
 {
    label: '第三视角跟随',
    value: 'fallow'
  },{
    label: '不跟随',
    value: 'untrace'
  }
];
function handleSceneSelect(key){
  if(!hasPlane.value)   return;

  if(key === 'untrace') {
    window.measureViewer.setNoTrack()
  }else if(key === 'fallow') {
    window.viewer.trackedEntity = window.viewer.entities.getById('websocket-flying-plane');
  }
}
let EditOptions = [
  {
    label: '查询航线',
    key: 'requestLine'
  },
  {
    label: '航线管理',
    key: 'manage'
  }]

let layerValue = ref('layer1');
let barIsOpen = ref(true);
let MeasureOptions = [
  {
    label: '距离测量',
    key: 'distance'
  },
  {
    label: '面积测量',
    key: 'area'
  },
  {
    label: '清除',
    key: 'clear'
  },
]

let DrawOptions = [
  {
    label: '多边形',
    key: 'polygon'
  },
  {
    label: '矩形',
    key: 'rec'
  },{
    label: '圆形',
    key: 'circle'
  },
  {
    label: '清除',
    key: 'clear'
  },
]
function handleEditSelect(key) {
  if(key === 'requestLine') {
    getUavAirline()
  }
  else{
    // 航线管理页面
  }
}

function handleDrawSelect(key) {
  if(key === 'clear') {
    if(window.measureViewer.clearDraw()){
      message.warning('无可清除图形')
    }
  }
  else{
    window.measureViewer.drawGraphics(key)
  }
}

// 测量菜单选中事件
function handleSelect(key) {
  if(key === 'distance') {
    measure();
  }
  else if(key === 'area') {
    measureArea()
  }else if(key === 'clear') {
    measureEnd()
  }
}

async function  handleFile() {
  const [fileHandle] = await window?.showOpenFilePicker({
    types: [
      {
        description: "kml/json",
        accept: {"text/kml": ['.kml', '.kmz', '.json', '.geojson']}
      }
    ]
  })

  // 获取文件File对象
  const file = await fileHandle?.getFile()
  console.group("获取到的文件")
  console.log(fileHandle)
  console.log(file.name)
  if(file.name.toLowerCase().endsWith('kml')||file.name.toLowerCase().endsWith('kmz')){
    window.measureViewer.addKml(file)
  }
  else if(file.name.toLowerCase().endsWith('geojson')||file.name.toLowerCase().endsWith('json')||file.name.toLowerCase().endsWith('topojson')) {
    window.measureViewer.addJson(file)
  }

}

/**
 * 多点距离测量
 */
function measure(){
  window.measureViewer.clearDisEntity()
  window.measureViewer.activate()
}

/**
 * 清除面积测量和多点距离测量
 */
function measureEnd(){
  if(window.measureViewer.vertexEntities.length>0 || window.measureViewer.activeShapePoints.length>0){
    window.measureViewer.deactivate()
    window.measureViewer.stopAreaMeasure()
    window.measureViewer.clearDisEntity()
    window.measureViewer.clearAreaEntity()
    window.measureViewer.viewer.scene.requestRender()
  }else{
    message.warning('无可清除元素')
  }
}

/**
 * 面积测量
 */
function measureArea() {
  window.measureViewer.clearAreaEntity()
  window.measureViewer.activateAreaMeasure();
}

async function connectWebSocket() {
  await login(store.temp.userName, store.temp.password).then(rsp => {
    let resData = JSON.parse(rsp.data.data)
    console.log(resData)
    sessionStorage.setItem('token',resData.jwtToken)
  }).catch(err => {
    console.log(err)
    sessionStorage.setItem('token','err')

  })
  if(sessionStorage.getItem('token') === 'err')  return

  store.server.ws = new WebSocket('ws://123.57.54.1:8048/htfp/websocket/uavGlobal/sysUser003', sessionStorage.getItem('token'))
  // store.server.ws = new WebSocket('ws://'+store.server.ws_config.address+':'+store.server.ws_config.port);
  store.server.ws.onmessage = (event) => {
    //收到消息后的处理流程....
    let data = dataProcess(JSON.parse(event.data))
    console.log(data);
    // 添加飞机三维图标
    if (!hasPlane.value && data != null) {
      window.measureViewer.addAirplaneEntity(store.models.defaultAirPlane, data.uavId + data.uavType)
      SceneValue.value = 'fallow'
      hasPlane.value = true;
    }
    if (data != null) {
      window.measureViewer.updateDynamicData(data)
    }
  };
}

function closeWS(){
  if(store.server.ws){
    store.server.ws.close();
  }
}

function getUavAirline() {
  if(sessionStorage.getItem('uavId')){
    requestAirline(sessionStorage.getItem('uavId')).then(rsp => {
      console.log(rsp.data)
      window.measureViewer.showAirLine(getAirline(rsp.data))
    })
  }else {
    message.warning('当前未连接飞机')
  }
}
</script>

<template>
  <n-flex id="panel">
    <n-popselect v-model:value="layerValue" :options="store.templateValue.layerOptions" size="medium">
      <n-button tertiary circle type="warning">
        <template #icon>
          <n-icon><Layers/></n-icon>
        </template>
      </n-button>
    </n-popselect>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning" @click="handleFile">
          <template #icon>
            <n-icon><DuplicateSharp /></n-icon>
          </template>
        </n-button>
      </template>
      <span> 添加数据 </span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
      <n-button tertiary circle type="warning">
        <template #icon>
          <n-icon><TerrainSharp/></n-icon>
        </template>
      </n-button>
        </template>
    <span> 地形分析 </span>
    </n-tooltip>
    <n-dropdown :options="EditOptions" @select="handleEditSelect">
    <n-button tertiary circle type="warning">
      <template #icon>
        <n-icon><CreateOutline/></n-icon>
      </template>
    </n-button>
    </n-dropdown>
    <n-dropdown :options="MeasureOptions" @select="handleSelect">
    <n-button tertiary circle type="warning">
      <template #icon>
      <n-icon><RulerAlt/></n-icon>
      </template>
    </n-button>
    </n-dropdown>
    <n-dropdown :options="DrawOptions" @select="handleDrawSelect">
    <n-button tertiary circle type="warning">
      <template #icon>
        <n-icon><DrawPolygon/></n-icon>
      </template>
    </n-button>
    </n-dropdown>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning" @click="showModal = true">
          <template #icon>
            <n-icon><Settings/></n-icon>
          </template>
        </n-button>
      </template>
      <span> WebSocket配置 </span>
    </n-tooltip>
    <n-popselect v-model:value="SceneValue" :options="sceneOptions" @update:value="handleSceneSelect"
                 size="medium">
<!--                 :disabled="!hasPlane" -->

      <n-button tertiary circle type="warning">
        <template #icon>
          <n-icon><EyeSharp/></n-icon>
        </template>
      </n-button>
    </n-popselect>
    <n-button tertiary circle type="warning">
      <template #icon>
<!--        ChevronBack,ChevronForward,-->
        <n-icon><ChevronBack/></n-icon>
      </template>
    </n-button>
  </n-flex>

  <n-modal v-model:show="showModal"
        style="width: 40%"
        :mask-closable="false"
        preset="dialog"
        title="">
    <template #header>
      <div>WebsSocket配置</div>
    </template>
    <div style="margin: 2rem 2rem .5rem 1rem">
      <n-space>
        <n-form ref="formRef" :model="store.server.ws_config"
                label-placement="left"
                label-width="auto"
                require-mark-placement="right-hanging">
          <n-form-item label="服务器地址">
            <n-input v-model:value="store.server.ws_config.address"  placeholder="127.0.0.1"/>
          </n-form-item>
          <n-form-item label="端口号">
            <n-input-number v-model:value="store.server.ws_config.port" placeholder=8000 />
          </n-form-item>
        </n-form>
      </n-space>
      <n-space justify="center">
        <n-button @click="connectWebSocket" type="primary" size="small">开启通信</n-button>
        <!--      <n-button @click=" sendMessage" type="primary" size="small">发消息</n-button>-->
        <n-button @click="closeWS"  type="warning" size="small">关闭通信</n-button>
      </n-space>
    </div>
  </n-modal>
</template>

<style scoped>
#panel{
  position: absolute;
  top: 10px;
  left: 2px;
  background: rgba(21, 21, 21, 0.73);
  border-radius: 7px;
}
</style>