FOD/src/views/index.vue

<template>
  <div class="app-container">
    <div class="top">
      <div class="title">探测系统</div>
      <div class="items">
        <div @click="setItemsId(1)" :class="{click:itemsId === 1}" class="item">
          <span>
            主界面
          </span>
        </div>
        <div @click="setItemsId(2)" :class="{click:itemsId === 2}" class="item"><span>
          区域标定
        </span></div>
        <div @click="setItemsId(3)" :class="{click:itemsId === 3}" class="item"><span>
          软件设置
        </span></div>
        <div @click="setItemsId(4)" :class="{click:itemsId === 4}" class="item"><span>
          历史记录
        </span></div>
        <!--        <div class="item">视频接口</div>-->
      </div>
    </div>
    <div class="left">
      <Ruler ref="rulerRef" :box-pos="locationData" :index="2"/>
    </div>
    <div class="right">
      <div v-if="itemsId === 1" class="tabsItem">
        <el-card shadow="always">
          <el-form :inline="true" :model="form1" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form1.region"
                  placeholder="请选择机场名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="机场1" value="shanghai"/>
                <el-option label="机场2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form1.region1"
                  placeholder="请选择区域名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="区域1" value="shanghai"/>
                <el-option label="区域2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">固定目标</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-button type="primary" @click="StartWorkBtn">启动雷达</el-button>
          <el-button type="danger" @click="StopWorkBtn">关闭雷达</el-button>
          <el-button type="warning" @click="RestartWorkBtn">重启雷达</el-button>
          <el-button type="info" @click="ShutDownWorkBtn">急停雷达</el-button>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <div v-if="radarWorkState === 1"
              style="width:calc( 50% - 50px);position: relative;border-radius: 5px;background-color: #01CE69;height: 44px;display: inline-block;padding:0 20px;margin-right: 20px;">
            <span
                style="position:absolute;top: 50%;transform: translateY(-50%);left:20%;color: #fff;letter-spacing: 2px">雷达通讯状态</span>
            <el-icon size="20px" style="position:absolute;top: 50%;transform: translateY(-50%);right: 40px">
              <SuccessFilled color="#fff"/>
            </el-icon>
          </div>
          <div
              v-if="radarWorkState === 0"
              style="width:calc( 50% - 50px);position: relative;border-radius: 5px;background-color: #E8370D;height: 44px;display: inline-block;padding:0 20px;">
            <span
                style="position:absolute;top: 50%;transform: translateY(-50%);left:20%;color: #fff;letter-spacing: 2px">雷达通讯状态</span>

            <el-icon size="20px" style="position:absolute;top: 50%;transform: translateY(-50%);right: 40px">
              <WarningFilled color="#fff"/>
            </el-icon>
          </div>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-form :inline="true" :model="form2" class="demo-form-inline">
            <el-form-item>
              <el-date-picker
                  v-model="form2.date"
                  type="date"
                  placeholder="选择时间"
                  clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="onSubmit">停止检测</el-button>
              <el-button type="primary" @click="onSubmit">批量操作</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="tableData1" style="width: 100%">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column property="Lon" label="目标经度" width="120"/>
            <el-table-column property="Lat" label="目标纬度" width="120"/>
            <el-table-column label="告警等级" width="160">
              <template #default="scope">
                <el-rate :model-value="scope.row.rate ||3" disabled/>
              </template>
            </el-table-column>
            <el-table-column
                label="处理状态"
                show-overflow-tooltip>
              <template #default="scope">
                <el-button type="primary" link>已处理</el-button>
                <el-button type="primary" link @click="addShildItem">不处理</el-button>
                <el-button type="primary" link>未发现</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column property="name" label="目标名称" width="120"/>
            <el-table-column property="lon" label="目标经度" width="120"/>
            <el-table-column property="lat" label="目标纬度" width="120"/>
            <el-table-column property="deviation" label="deviation" width="120"/>
            <el-table-column property="shielding" label="shielding" width="120"/>
            <!--            <el-table-column label="告警等级" width="160">-->
            <!--              <template #default="scope">-->
            <!--                <el-rate v-model="scope.row.rate" disabled/>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column-->
            <!--                label="处理状态"-->
            <!--                show-overflow-tooltip>-->
            <!--              <template #default="scope">-->
            <!--                <span v-if="scope.row.type === 1">已处理</span>-->
            <!--                <span v-if="scope.row.type === 2">不处理</span>-->
            <!--                <span v-if="scope.row.type === 3">未发现</span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column label="其他操作" width="160">-->
            <!--              <template #default="scope">-->
            <!--                <el-input v-model="scope.row.notes" placeholder="详细信息填写"/>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
                label="操作"
                show-overflow-tooltip>
              <template #default="scope">
                <el-button type="primary" link @click="delShildItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div v-if="itemsId === 2" class="tabsItem">
        <el-card shadow="always">
          <el-form :inline="true" :model="form5" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="form5.region" style="width: 200px" placeholder="请输入机场名称"/>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form5.region1" style="width: 200px" placeholder="请输入区域名称"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form6" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form6.region"
                  placeholder="请选择机场名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="机场1" value="shanghai"/>
                <el-option label="机场2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form6.region1"
                  placeholder="请选择区域名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="区域1" value="shanghai"/>
                <el-option label="区域2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <div v-for="(i,k) in points" style="margin-bottom: 12px;">
            <el-input disabled v-model="i.name" style="width: 100px"/>
            <el-input v-model="i.lon" style="width: 150px;margin-left: 20px;"/>
            <el-input v-model="i.lat" style="width: 150px;margin-left: 20px;"/>
            <el-button type="primary" @click="getPoint(k)" style=" margin-left: 20px;">获取</el-button>
          </div>
        </el-card>
        <div style="text-align: center;margin-top: 12px;">
          <el-button type="primary" @click="savePoint" style=" margin-left: 20px;">提交</el-button>
        </div>
      </div>
      <div v-if="itemsId === 3" class="tabsItem">
        <div>成像设置</div>
        <el-form :model="parasSignalproForm" label-width="auto" label-position="top" :inline="true">
          <el-form-item style="width: calc(33% - 32px)" label="成像近端距离(米)">
            <el-input v-model="(parasSignalproForm.imaging || {}).imaging_rangemin"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="成像远端距离(米)">
            <el-input v-model="(parasSignalproForm.imaging || {}).imaging_rangemax"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="成像距离分辨率(米)">
            <el-input v-model="(parasSignalproForm.imaging || {}).imaging_rangeres"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="成像方位长度(米)">
            <el-input v-model="(parasSignalproForm.imaging || {}).imaging_azimuthlength"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="成像方位分辨率(米)">
            <el-input v-model="(parasSignalproForm.imaging || {}).imaging_azimuthres"/>
          </el-form-item>
        </el-form>
        <div>检测设置</div>
        <el-form :model="parasSignalproForm" label-width="auto" label-position="top" :inline="true">
          <el-form-item style="width: calc(33% - 32px)" label="检测系数">
            <el-input v-model="(parasSignalproForm.dectection ||{}).alpha"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="检测的最近端">
            <el-input v-model="(parasSignalproForm.dectection ||{}).decstartr"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="检测的最远端">
            <el-input v-model="(parasSignalproForm.dectection ||{}).decwidth"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="小目标距离最小像素">
            <el-input v-model="(parasSignalproForm.dectection ||{}).sk_r"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="小目标方位最小像素">
            <el-input v-model="(parasSignalproForm.dectection ||{}).sk_a"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="大目标距离最小像素">
            <el-input v-model="(parasSignalproForm.dectection ||{}).lk_r"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="大目标方位最小像素">
            <el-input v-model="(parasSignalproForm.dectection ||{}).lk_a"/>
          </el-form-item>
          <el-form-item style="width:100%; ">
            <div style="text-align:center; width:100%">
              <el-button type="primary" @click="saveParasSignalproForm">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div>路线设置</div>
        <el-form :model="parasPosForm" label-width="auto" label-position="top" :inline="true">
          <el-form-item style="width: calc(33% - 32px)" label="路线数量">
            <el-input-number v-model="(parasPosForm.runwaynum ||{}).startpos_num" :precision="0" :step="1"
                             :min="0" @change="updateRunwayNum"></el-input-number>
          </el-form-item>
          <div style="width: 100%"></div>
          <template v-for="(i,k) in (parasPosForm.runwaynum || {}).startpos_num || 0">
            <div style="width: 100%">路线{{ k + 1 }}设置</div>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_lon_a">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_lon_a"/>
            </el-form-item>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_lat_a">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_lat_a"/>
            </el-form-item>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_alt_a">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_alt_a"/>
            </el-form-item>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_lon_b">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_lon_b"/>
            </el-form-item>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_lat_b">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_lat_b"/>
            </el-form-item>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_alt_b">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_alt_b"/>
            </el-form-item>
            <el-form-item style="width: calc(33% - 32px)" label="startpos_ori">
              <el-input v-model="((parasPosForm.runwayedges||[])[k]||{}).startpos_ori"/>
            </el-form-item>
          </template>
          <el-form-item style="width:100%; ">
            <div style="text-align:center; width:100%">
              <el-button type="primary" @click="saveParasPosForm">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="itemsId === 4" class="tabsItem">
        <el-card shadow="always">
          <el-date-picker
              style="width: calc(100% - 20px)"
              v-model="date1"
              type="datetimerange"
              range-separator="到"
              start-placeholder="选择开始时间"
              end-placeholder="选择结束时间"
          />
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-form :inline="true" :model="form3" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form3.region"
                  placeholder="请选择机场名称"
                  style="width: 170px"
                  clearable
              >
                <el-option label="机场1" value="shanghai"/>
                <el-option label="机场2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form3.region1"
                  placeholder="请选择区域名称"
                  style="width: 170px"
                  clearable
              >
                <el-option label="区域1" value="shanghai"/>
                <el-option label="区域2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form3.region2"
                  placeholder="请选择固定目标"
                  style="width: 170px"
                  clearable
              >
                <el-option label="目标1" value="shanghai"/>
                <el-option label="目标2" value="beijing"/>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-form :inline="true" :model="form4" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="form4.input1" style="width: 170px" placeholder="请输入检测序号"/>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                  v-model="form4.date1"
                  type="date"
                  style="width: 170px"
                  placeholder="选择检测时间"
                  clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input v-model="form4.input2" style="width: 170px" placeholder="请输入检测人员"/>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column property="coordinate" label="目标坐标" width="120"/>
            <el-table-column label="告警等级" width="160">
              <template #default="scope">
                <el-rate v-model="scope.row.rate" disabled/>
              </template>
            </el-table-column>
            <el-table-column
                label="处理状态"
                show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.type === 1">已处理</span>
                <span v-if="scope.row.type === 2">不处理</span>
                <span v-if="scope.row.type === 3">未发现</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div v-if="itemsId === 5" class="tabsItem">
      </div>
    </div>
  </div>
</template>
<script setup>
import Ruler from "@/components/ruler.vue";
import {nextTick, onMounted, ref} from "vue";
import {
  getParasPos,
  getParasSignalpro,
  setParasPos,
  setParasSignalpro,
  getShildList,
  addShildData,
  delShildData, StartWork, StopWork, RestartWork, ShutDownWork
} from "@/api/api";

const socketData = [
  {
    "TimeQuality": 19124,
    "GpsWeek": 2378,
    "GpsSeconds": 443388.33,
    "Latitude": 28.24388795549,
    "Longitude": 113.00382002762,
    "EllipsoidHeight": 14.6323,
    "VelocityNorth": -0.1931,
    "VelocityEast": 3.2447,
    "ActualSpeed": 11.701587,
    "RollAngle": 1.047412,
    "HeadingAngle": 92.054855,
    "IncludedAngle": 0.0,
    "SolutionStatus": "",
    "Fps": 3.485E-42,
    "FpsNum": 0.0,
    "MotorPitchAngle": 0.0,
    "MotorAzimuthAngle": 0.0,
    "ty": 3
  },
  {
    "radar_type": 0,
    "radar_ver": "0.1.1",
    "arm_ver": "0.0.0",
    "al_ver": "0.0.0",
    "pwc_ver": "0.0.0",
    "cd_ver": "0.0.0",
    "v1": 0,
    "v2": 0,
    "v3": 0,
    "v4": 0,
    "radar_total_vol": 23.5,
    "radar_total_cur": 0.0,
    "nx_vol": 0.0,
    "nx_cur": 0.0,
    "nx_temp": 25.0,
    "arm_vol": 23.5,
    "arm_cur": 0.0,
    "arm_temp": 25.0,
    "ant_vol": 23.5,
    "ant_cur": 0.0,
    "ant_temp": 0.0,
    "at_work_area_status": 0,
    "pwb_err_code": 0,
    "pwa_err_code": 0,
    "al_err_code": 0,
    "arm_err_code": 0,
    "radar_err_code": 0,
    "radar_work_state": 0,
    "ty": 1
  },
  {
    "Seq": 3.0,
    "MD5": null,
    "TimeStamp": 5.644776E+24,
    "MissionID": 5.644776E+24,
    "RngRes": 0.075,
    "RngNum": 0.0,
    "RngMin": 15.0,
    "AziRes": 0.1,
    "AziNum": 0.0,
    "AziMin": 600.0,
    "DataType": 2.8E-44,
    "LonMin": 112.99582,
    "LatMin": 28.242912,
    "TarNum": 6E-45,
    "ty": 4
  }
]
let area = {
  "LatMin": 36.14505053622,
  "LatMax": 36.15302618219,
  "LonMin": 120.38532472236,
  "LonMax": 120.39109582218,
}

const points = ref([
  {
    lon: 120.38532472236,
    lat: 36.14505053622,
    name: '点位1',
  },
  {
    lon: 120.38532472236,
    lat: 36.15302618219,
    name: '点位2',
  },
  {
    lon: 120.39109582218,
    lat: 36.15302618219,
    name: '点位3',
  },
  {
    lon: 120.39109582218,
    lat: 36.14505053622,
    name: '点位4',
  },
])


const list = ref([
  {
    value1: '点位1',
    value2: '经纬度：(528,11)'
  },
  {
    value1: '点位1',
    value2: '经纬度：(528,11)'
  },
  {
    value1: '点位1',
    value2: '经纬度：(528,11)'
  },
])
const rulerRef = ref()
const itemsId = ref(1)
const form1 = ref({})
const form2 = ref({})
const form3 = ref({})
const form4 = ref({})
const form5 = ref({})
const form6 = ref({})
const radarWorkState = ref(0)
const tableData1 = ref([
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
])
const tableData2 = ref([
  {
    "id": 2,
    "name": "测试",
    "lon": 12.2299995,
    "lat": 323.329987,
    "deviation": 12,
    "shielding": 20
  },
  {
    "id": 1,
    "name": "测试",
    "lon": 12.2299995,
    "lat": 323.329987,
    "deviation": 12,
    "shielding": 20
  }
])
const date1 = ref([])
const setItemsId = (e) => {
  itemsId.value = e
}
const locationData = ref({})
const currentPosition = ref({})

const processData = (data) => {
  // console.log('data',data.ty)
  console.log('FodName', data.FodName)
  if (data.FodName === '雷达信息') {
    console.log(data.radar_work_state)
    radarWorkState.value = data.radar_work_state
  }
  if (data.FodName === '图像数据') {
  }
  if (data.FodName === 'fod信息') {
    setDot(data)
  }
  if (data.ty === 3) {
  }
  if (data.FodName === '车辆信息') {
    currentPosition.value = {
      lon: data.Longitude,
      lat: data.Latitude,
    }
    // console.log(data.Longitude > area.LonMin, data.Longitude < area.LonMax, data.Latitude > area.LatMin, data.Latitude < area.LatMax)
    if (data.Longitude > area.LonMin && data.Longitude < area.LonMax && data.Latitude > area.LatMin && data.Latitude < area.LatMax) {
      let location = {
        x: 300 - (area.LonMax - data.Longitude) / ((area.LonMax - area.LonMin) / 300),
        y: 1800 - (area.LatMax - data.Latitude) / ((area.LatMax - area.LatMin) / 1800),
        rotate: data.HeadingAngle
        // rotate: 0
      }
      console.log('location',location)
      locationData.value = location
    }

  }
};
const parasSignalproForm = ref({
  imaging: {},
  dectection: {}
})
const parasPosForm = ref({
  runwaynum: {
    startpos_num: 1
  },
  runwayedges: [
    {
      startpos_lon_a: '',
      startpos_lat_a: '',
      startpos_alt_a: '',
      startpos_lon_b: '',
      startpos_lat_b: '',
      startpos_alt_b: '',
      startpos_ori: ''
    }
  ]
})

onMounted(() => {
  ad()
  getOption()
  getShildTableList()
  points.value = localStorage.getItem('points') ? JSON.parse(localStorage.getItem('points')) : [
    {
      lon: 117.213524,
      lat: 36.837967,
      name: '点位1',
    },
    {
      lon: 117.213524,
      lat: 36.847967,
      name: '点位2',
    },
    {
      lon: 117.223524,
      lat: 36.847967,
      name: '点位3',
    },
    {
      lon: 117.223524,
      lat: 36.837967,
      name: '点位4',
    },
  ]
  getArea()

  // setDot({
  //   "DarDatas": [{"Lon": 117.213524, "Lat": 36.837967}, {"Lon": 0.0, "Lat": 0.0}, {
  //     "Lon": 0.0,
  //     "Lat": 0.0
  //   }, {"Lon": 0.0, "Lat": 0.0}, {"Lon": 117.2134, "Lat": 36.837967}, {"Lon": 0.0, "Lat": 0.0}, {
  //     "Lon": 0.0,
  //     "Lat": 0.0
  //   }, {"Lon": 0.0, "Lat": 0.0}, {"Lon": 117.21341, "Lat": 36.837986}, {"Lon": 0.0, "Lat": 0.0}, {
  //     "Lon": 0.0,
  //     "Lat": 0.0
  //   }, {"Lon": 0.0, "Lat": 0.0}, {"Lon": 117.21337, "Lat": 36.838}, {"Lon": 0.0, "Lat": 0.0}],
  //   "Seq": 0,
  //   "MD5": "038fb0493c415f58c703ab205f9f2c94",
  //   "TimeStamp": 1757556826,
  //   "MissionID": 1757556826,
  //   "RngRes": 0.075,
  //   "RngNum": 0,
  //   "RngMin": 10.0,
  //   "AziRes": 0.1,
  //   "AziNum": 0,
  //   "AziMin": 0.03593219,
  //   "DataType": 20,
  //   "LonMin": 117.213844,
  //   "LatMin": 36.83799,
  //   "TarNum": 14,
  //   "ty": 0,
  //   "FodName": "fod信息"
  // })
})

const getOption = () => {
  getParasPos().then((e) => {
    parasPosForm.value = {
      runwaynum: e.runwaynum,
      runwayedges: e.runwayedges,
    }
  })
  getParasSignalpro().then((e) => {
    parasSignalproForm.value = {
      imaging: e.imaging,
      dectection: e.dectection,
    }
  })
}
const saveParasSignalproForm = () => {
  setParasSignalpro(parasSignalproForm.value).then(e => {
    console.log(e)
  })
}
const saveParasPosForm = () => {
  setParasPos(parasPosForm.value).then(e => {
    console.log(e)
  })
}
const updateRunwayNum = (e) => {
  let arr = new Array(e).fill(0)
      .map((item, index) => {
        if (index <= parasPosForm.value.runwayedges.length - 1) {
          return JSON.parse(JSON.stringify(parasPosForm.value.runwayedges[index]))
        } else {
          return {
            startpos_lon_a: '',
            startpos_lat_a: '',
            startpos_alt_a: '',
            startpos_lon_b: '',
            startpos_lat_b: '',
            startpos_alt_b: '',
            startpos_ori: ''
          }
        }
      })
  console.log(arr)
  parasPosForm.value.runwayedges = JSON.parse(JSON.stringify(arr))
}

const addShildItem = () => {
  addShildData({
    name: 'string',
    lon: 123,
    lat: 12,
    deviation: 12,
    shielding: 23
  }).then(e => {
    getShildTableList()
  })
}
const delShildItem = (e) => {
  delShildData(e).then(e => {
    getShildTableList()
  })
}
const getShildTableList = () => {
  getShildList({
    pageIndex: 1,
    pageSize: 10,
    name: 'string'
  }).then((e) => {
    tableData2.value = e.data

  })
}

const ad = () => {

// 1. 创建 WebSocket 连接（ws:// 或 wss://）
//   const socket = new WebSocket("ws://192.168.1.123:7789/ws");
  const socket = new WebSocket("ws://192.168.1.123:7789/ws");

// 2. 连接成功时触发
  socket.addEventListener("open", () => {
    console.log("✅ WebSocket 连接成功");
  });

// 3. 接收消息
  socket.addEventListener("message", (event) => {
    console.log(JSON.parse(event.data))
    processData(JSON.parse(event.data))
  });

// 4. 连接关闭时触发
  socket.addEventListener("close", () => {
    console.log("❌ WebSocket 已关闭");
  });

// 5. 出错时触发
  socket.addEventListener("error", (error) => {
    console.error("⚠️ WebSocket 出错:", error);
  });
}

const StartWorkBtn = () => {
  StartWork()
}
const StopWorkBtn = () => {
  StopWork()
}
const RestartWorkBtn = () => {
  RestartWork()
}
const ShutDownWorkBtn = () => {
  ShutDownWork()
}
const getPoint = (k) => {
  points.value[k].lon = currentPosition.value.lon || 0
  points.value[k].lat = currentPosition.value.lat || 0
}
const getArea = () => {
  if (points.value.length < 4) return
  let data = points.value

  let latMin = data[0].lat;
  let latMax = data[0].lat;
  let lonMin = data[0].lon;
  let lonMax = data[0].lon;

  for (let i = 1; i < data.length; i++) {
    const p = data[i];
    if (p.lat < latMin) latMin = p.lat;
    if (p.lat > latMax) latMax = p.lat;
    if (p.lon < lonMin) lonMin = p.lon;
    if (p.lon > lonMax) lonMax = p.lon;
  }
  area = {
    LatMin: latMin,
    LatMax: latMax,
    LonMin: lonMin,
    LonMax: lonMax,
  }
}
const savePoint = () => {
  localStorage.setItem('points', JSON.stringify(points.value))
  getArea()
}
const setDot = (e) => {
  let dots = e.DarDatas.map((v, k) => {
    if (v.Lon == 0 && v.Lat == 0) return null
    console.log(v)
    console.log(area)
    return {
      x: 300 - (area.LonMax - v.Lon) / ((area.LonMax - area.LonMin) / 300),
      y: 1800 - (area.LatMax - v.Lat) / ((area.LatMax - area.LatMin) / 1800),
      index: k
    }
  }).filter(v => v)
  tableData1.value = e.DarDatas
  console.log(dots)
  rulerRef.value.setDot(dots)
}
</script>
<style>
.app-container {
  width: 100%;
  height: 1920px;
  margin: 0 auto;
  border: 1px solid #888888;
}

.top {
  width: 100%;
  height: 80px;
  font-size: 24px;
  background-color: #202227;
  position: relative;
}

.items {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 120px;
  height: 100%;
  color: #8C9A9C;
  line-height: 56px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
}

.item span {
  display: inline-block;
  height: 100%;
}

.item.click span, .item:hover span {
  color: #0D52BF;
  border-bottom: 2px solid #0D52BF;
}

.title {
  line-height: 80px;
  color: #fff;
  margin-left: 20px;
  display: inline-block;
  text-align: left;
}

.left {
  display: inline-block;
  height: 1840px;
  width: 380px;
  vertical-align: top;
}

.right {
  display: inline-block;
  height: 1800px;
  width: 660px;
  padding: 20px;
  background-color: #F6F7FB;
}
</style>