diff --git a/src/main.js b/src/main.js
index 5408a62..8ac33fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import './style.css'
 import App from './App.vue'
 import router from './router';
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
@@ -11,5 +12,5 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
 app.use(router);
-app.use(ElementPlus)
+app.use(ElementPlus, {locale: zhCn})
 app.mount('#app')
diff --git a/src/views/index.vue b/src/views/index.vue
index c6a2385..be15521 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,13 +1,603 @@
 <template>
-
   <div class="app-container">
-    <TOP/>
-    <LEFT/>
-    <RIGHT/>
-    <el-button style="position: fixed;top: 10px;right: 10px" type="primary" @click="toAdmin">管理</el-button>
-  </div>
+    <div class="top">
+      <div class="title">探测系统</div>
 
-  <!--  </div>-->
+      <div class="items">
+        <div
+            class="item"
+            :class="{ click: itemsId === 1 }"
+            @click="setItemsId(1)"
+        >
+          <span>主界面</span>
+        </div>
+
+        <div
+            class="item"
+            :class="{ click: itemsId === 2 }"
+            @click="setItemsId(2)"
+        >
+          <span>区域标定</span>
+        </div>
+
+        <div
+            class="item"
+            :class="{ click: itemsId === 3 }"
+            @click="setItemsId(3)"
+        >
+          <span>软件设置</span>
+        </div>
+
+        <div
+            class="item"
+            :class="{ click: itemsId === 4 }"
+            @click="setItemsId(4)"
+        >
+          <span>历史记录</span>
+        </div>
+      </div>
+    </div>
+    <div class="left">
+      <Ruler
+          ref="rulerRef"
+          :width="areaData.width"
+          :height="areaData.height"
+          :boxPos="boxPos"
+          :dots="dots"
+          :dotIndex="dotIndex"
+      />
+    </div>
+
+    <div class="right">
+      <div v-if="itemsId === 1" class="tabsItem">
+        <!-- 区域选择 -->
+        <el-card shadow="always">
+          <el-form inline :model="form1" class="demo-form-inline">
+            <el-form-item>
+              <el-select
+                  v-model="form1.region"
+                  placeholder="请选择机场名称"
+                  style="width: 200px"
+                  clearable
+                  @change="selectUpdate"
+              >
+                <el-option
+                    v-for="i in options1"
+                    :key="i.id"
+                    :label="i.name"
+                    :value="i.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-select
+                  v-model="form1.region1"
+                  placeholder="请选择区域名称"
+                  style="width: 200px"
+                  clearable
+              >
+                <el-option
+                    v-for="i in options2"
+                    :key="i.id"
+                    :label="i.name"
+                    :value="i.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="getAreaData">获取区域</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <!-- 雷达启动控制 -->
+        <el-card shadow="always" style="margin-top: 12px">
+          <el-button
+              type="primary"
+              :disabled="radarWorkState === 1"
+              @click="StartWorkBtn"
+          >
+            启动雷达
+          </el-button>
+          <el-button
+              type="danger"
+              :disabled="radarWorkState === 0"
+              @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% - 60px); 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;"
+            >
+              <success-filled color="#fff"/>
+            </el-icon>
+          </div>
+
+          <div
+              v-if="radarWorkState === 0"
+              style="width: calc(50% - 60px); position: relative; border-radius: 5px; background-color: #E8370D; 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;"
+            >
+              <warning-filled color="#fff"/>
+            </el-icon>
+          </div>
+
+          <div
+              v-if="true"
+              style="width: calc(50% - 60px); 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;"
+            >
+              <success-filled color="#fff"/>
+            </el-icon>
+          </div>
+
+          <div
+              v-if="false"
+              style="width: calc(50% - 60px); position: relative; border-radius: 5px; background-color: #E8370D; 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;"
+            >
+              <warning-filled color="#fff"/>
+            </el-icon>
+          </div>
+
+        </el-card>
+
+        <!-- 目标表格1 -->
+        <el-card shadow="always" style="margin-top: 12px">
+
+          <el-table
+              highlight-current-row
+              :data="tableData1.slice((currentPage1 - 1) * pageSize1, currentPage1 * pageSize1)"
+              style="width: 100%"
+              @row-click="table1Current"
+          >
+            <el-table-column type="selection" width="55"/>
+            <el-table-column label="序号" type="index" width="60"/>
+            <el-table-column prop="Lon" label="目标经度" width="100"/>
+            <el-table-column prop="Lat" label="目标纬度" width="100"/>
+            <el-table-column prop="rate" label="强度信息" width="100"/>
+            <el-table-column v-if="false" 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" @click.stop="openHandleObstacleDialog(scope)" link>处置</el-button>
+                <el-popconfirm
+                    class="box-item"
+                    title="确定删除这个点位吗？"
+                    placement="top"
+                    @confirm="delPoint(scope)"
+                >
+                  <template #reference>
+                    <el-button type="primary" @click.stop link>删除</el-button>
+                  </template>
+                </el-popconfirm>
+                <el-button type="primary" link>固定物</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+              v-model:current-page="currentPage1"
+              v-model:page-size="pageSize1"
+              :pager-count="4"
+              :page-sizes="[10,20,50,100, 200, 300, 400]"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData1.length"
+          />
+        </el-card>
+
+        <!-- 目标表格2 -->
+        <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 prop="name" label="目标名称" width="120"/>
+            <el-table-column prop="lon" label="目标经度" width="120"/>
+            <el-table-column prop="lat" label="目标纬度" width="120"/>
+            <el-table-column prop="deviation" label="deviation" width="120"/>
+            <el-table-column prop="shielding" label="shielding" width="120"/>
+            <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 :model="form5" class="demo-form-inline">
+            <el-form-item>
+              <el-input
+                  v-model="form5.region"
+                  placeholder="请输入机场名称"
+                  style="width: 200px"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <el-input
+                  v-model="form5.region1"
+                  placeholder="请输入区域名称"
+                  style="width: 200px"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">添加</el-button>
+            </el-form-item>
+          </el-form>
+
+          <el-form
+              inline
+              :model="form6"
+              class="demo-form-inline"
+              style="margin-top: 12px"
+          >
+            <el-form-item>
+              <el-select
+                  v-model="form6.region"
+                  placeholder="请选择机场名称"
+                  style="width: 200px"
+                  clearable
+                  @change="select2Update"
+              >
+                <el-option
+                    v-for="i in options1"
+                    :key="i.id"
+                    :label="i.name"
+                    :value="i.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-select
+                  v-model="form6.region1"
+                  placeholder="请选择区域名称"
+                  style="width: 200px"
+                  clearable
+                  @change="select3Update"
+              >
+                <el-option
+                    v-for="i in options2"
+                    :key="i.id"
+                    :label="i.name"
+                    :value="i.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="getArea2">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card shadow="always" style="margin-top: 12px">
+          <div
+              v-for="(i, k) in regionLabeling"
+              :key="k"
+              style="margin-bottom: 12px"
+          >
+            <el-input
+                disabled
+                v-model="i.name"
+                placeholder="点位名称"
+                style="width: 100px"
+            />
+            <el-input
+                v-model="i.lon"
+                placeholder="经度"
+                style="width: 150px; margin-left: 20px"
+            />
+            <el-input
+                v-model="i.lat"
+                placeholder="纬度"
+                style="width: 150px; margin-left: 20px"
+            />
+            <el-button
+                type="primary"
+                @click="getPoint(k)"
+                style="margin-left: 20px"
+            >
+              获取
+            </el-button>
+            <el-button
+                type="danger"
+                @click="DeleteCData({ id: parseFloat(i.id) }).then(() => getArea2())"
+                style="margin-left: 20px"
+            >
+              删除
+            </el-button>
+          </div>
+
+          <el-button
+              type="primary"
+              style="text-align: center"
+              @click="addNewPoint"
+          >
+            添加
+          </el-button>
+        </el-card>
+
+        <div style="text-align: center; margin-top: 12px">
+          <el-button
+              type="primary"
+              style="margin-left: 20px"
+              @click="saveAreaPoint"
+          >
+            提交
+          </el-button>
+        </div>
+      </div>
+      <div v-if="itemsId === 3" class="tabsItem">
+        <!-- 成像设置 -->
+        <div>成像设置</div>
+        <el-form :model="parasSignalproForm" inline label-width="auto" label-position="top">
+          <el-form-item
+              v-for='(key, idx) in ["imaging_rangemin", "imaging_rangemax", "imaging_rangeres", "imaging_azimuthlength", "imaging_azimuthres"]'
+              :key="idx"
+              :label="key"
+              style="width: calc(33% - 32px)"
+          >
+            <el-input
+                v-model="parasSignalproForm.imaging[key]"
+            />
+          </el-form-item>
+        </el-form>
+
+        <!-- 检测设置 -->
+        <div>检测设置</div>
+        <el-form :model="parasSignalproForm" inline label-width="auto" label-position="top">
+          <el-form-item
+              v-for='(key, idx) in ["alpha", "decstartr", "decwidth", "sk_r", "sk_a", "lk_r", "lk_a"]'
+              :key="idx"
+              :label="key"
+              style="width: calc(33% - 32px)"
+          >
+            <el-input
+                v-model="parasSignalproForm.dectection[key]"
+            />
+          </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" inline label-width="auto" label-position="top">
+          <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-form-item>
+
+          <div
+              v-for="(item, k) in parasPosForm.runwaynum.startpos_num ? Array(parasPosForm.runwaynum.startpos_num) : []"
+              :key="k"
+              style="width: 100%"
+          >
+            <div>路线{{ k + 1 }}设置</div>
+            <el-form-item
+                v-for='(field, idx) in ["startpos_lon_a", "startpos_lat_a", "startpos_alt_a", "startpos_lon_b", "startpos_lat_b", "startpos_alt_b", "startpos_ori"]'
+                :key="idx"
+                :label="field"
+                style="width: calc(33% - 32px); display: inline-block"
+            >
+              <el-input
+                  v-model="parasPosForm.runwayedges[k][field]"
+              />
+            </el-form-item>
+          </div>
+
+          <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
+              v-model="date1"
+              type="datetimerange"
+              range-separator="到"
+              start-placeholder="选择开始时间"
+              end-placeholder="选择结束时间"
+              style="width: calc(100% - 20px)"
+          />
+        </el-card>
+
+        <!-- 区域选择 -->
+        <el-card shadow="always" style="margin-top: 12px">
+          <el-form inline :model="form3" class="demo-form-inline">
+            <el-form-item v-for="(key, idx) in regionKeys" :key="idx">
+              <el-select
+                  v-model="form3[key]"
+                  :placeholder="key === 'region2' ? '请选择固定目标' : key === 'region' ? '请选择机场' : '请选择区域'"
+                  style="width: 170px"
+                  clearable
+              >
+                <el-option
+                    v-for="option in getOptions(key)"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <!-- 检测输入 -->
+        <el-card shadow="always" style="margin-top: 12px">
+          <el-form inline :model="form4" class="demo-form-inline">
+            <el-form-item>
+              <el-input
+                  v-model="form4.input1"
+                  placeholder="请输入检测序号"
+                  style="width: 170px"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <el-date-picker
+                  v-model="form4.date1"
+                  type="date"
+                  placeholder="选择检测时间"
+                  clearable
+                  style="width: 170px"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <el-input
+                  v-model="form4.input2"
+                  placeholder="请输入检测人员"
+                  style="width: 170px"
+              />
+            </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 prop="coordinate" label="目标坐标" width="120"/>
+            <el-table-column label="告警等级" width="160">
+              <template #default="scope">
+                <el-rate :model-value="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-else-if="scope.row.type === 2">不处理</span>
+                <span v-else-if="scope.row.type === 3">未发现</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+    </div>
+
+    <el-button style="position: fixed;top: 10px;right: 10px" type="primary" @click="toAdmin">管理</el-button>
+
+    <el-dialog v-model="dialog1" title="处置障碍物" width="500">
+      <el-form :model="dialog1Form">
+        <el-form-item label="发现时间" label-width="120px">
+          <el-input v-model="dialog1Form.time" disabled autocomplete="off"/>
+        </el-form-item>
+        <el-form-item label="处理信息描述" label-width="120px">
+          <el-input
+              v-model="dialog1Form.text"
+              style="width: 100%"
+              :rows="2"
+              type="textarea"
+          />
+        </el-form-item>
+        <el-form-item label="处理照片" label-width="120px">
+          <el-upload action="#"
+                     :file-list="dialog1Form.fileList"
+                     list-type="picture-card" :auto-upload="false">
+            <el-icon>
+              <Plus/>
+            </el-icon>
+
+            <template #file="{ file }">
+              <div>
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
+                <span class="el-upload-list__item-actions">
+                  <span
+                      class="el-upload-list__item-preview"
+                      @click="handlePictureCardPreview(file)"
+                  >
+                    <el-icon><zoom-in/></el-icon>
+                  </span>
+                  <span
+                      class="el-upload-list__item-delete"
+                      @click="handleDownload(file)"
+                  >
+                    <el-icon><Download/></el-icon>
+                  </span>
+                  <span
+                      class="el-upload-list__item-delete"
+                      @click="handleRemove(file)"
+                  >
+                    <el-icon><Delete/></el-icon>
+                  </span>
+                </span>
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialog1 = false">关闭</el-button>
+          <el-button type="primary" @click="dialog1 = false">
+            处理
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="imgDialog">
+      <img width="100%" :src="dialogImageUrl" alt="Preview Image"/>
+    </el-dialog>
+  </div>
 </template>
 <script setup lang="jsx">
 import Ruler from "@/components/ruler.vue";
@@ -28,67 +618,541 @@ import {
   getArea,
   GetAllCData,
   InsertCListData,
-  UpdateCData, DeleteCData
+  UpdateCData,
+  DeleteCData
 } from "@/api/api";
 import {useRouter} from "vue-router";
 import {ElMessage} from "element-plus";
 
-const TOP = defineComponent({
-  name: 'TOP',
-  setup() {
-    return () => (
-        <div class="top">
-          <div class="title">探测系统</div>
-          <div class="items">
-            <div
-                class={{item: true, click: itemsId.value === 1}}
-                onClick={() => setItemsId(1)}
-            >
-              <span>主界面</span>
-            </div>
 
-            <div
-                class={{item: true, click: itemsId.value === 2}}
-                onClick={() => setItemsId(2)}
-            >
-              <span>区域标定</span>
-            </div>
+const router = useRouter();
 
-            <div
-                class={{item: true, click: itemsId.value === 3}}
-                onClick={() => setItemsId(3)}
-            >
-              <span>软件设置</span>
-            </div>
+const rulerRef = ref()
 
-            <div
-                class={{item: true, click: itemsId.value === 4}}
-                onClick={() => setItemsId(4)}
-            >
-              <span>历史记录</span>
-            </div>
-          </div>
-        </div>
-    )
+const getSocket = () => {
+
+  //   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) => {
+    processData(JSON.parse(event.data))
+  });
+
+  // 4. 连接关闭时触发
+  socket.addEventListener("close", () => {
+    console.log("❌ WebSocket 已关闭");
+  });
+
+  // 5. 出错时触发
+  socket.addEventListener("error", (error) => {
+    console.error("⚠️ WebSocket 出错:", error);
+  });
+}
+
+const processData = (data) => {
+  if (data.FodName === '雷达信息') {
+    radarWorkState.value = data.radar_work_state
   }
-})
-const LEFT = defineComponent({
-  name: 'LEFT',
-  setup() {
-    return () => (
-        <div class="left">
-          <Ruler
-              ref={rulerRef}
-              width={areaData.value.width}
-              height={areaData.value.height}
-              boxPos={boxPos.value}
-              dots={dots.value}
-              dotIndex={dotIndex.value}
-          />
-        </div>
-    )
+  if (data.FodName === '图像数据') {
   }
+  if (data.FodName === 'fod信息') {
+    console.log('障碍物信息', data)
+    setDot(data)
+  }
+  if (data.ty === 3) {
+  }
+  if (data.FodName === '车辆信息') {
+    currentPosition.value = {
+      lon: data.Longitude,
+      lat: data.Latitude,
+    }
+    const rectInfo = calcRectangleFromPoints(areaPoints.value);
+    const point = {
+      lon: data.Longitude,
+      lat: data.Latitude,
+      rotate: data.HeadingAngle
+    };
+    const local = correctDeviation(getLocalPositionRelativeToP4(point, areaPoints.value, rectInfo))
+
+
+    boxPos.value = local
+
+  }
+};
+
+// 默认方法
+const onSubmit = (e) => {
+  console.log(e)
+}
+
+// 当前菜单id
+const itemsId = ref(1)
+// 菜单id跳转
+const setItemsId = (e) => {
+  itemsId.value = e
+}
+// 雷达状态
+const radarWorkState = ref(0)
+// 车辆位置
+const boxPos = ref({x: 100, y: 150, rotate: 0})
+// 左侧区域宽高
+const areaData = ref({
+  width: 500,
+  height: 1000,
+  angle: 0
 })
+// 障碍物点位
+const dots = ref([
+  // {
+  //   x: 150,
+  //   y: 98
+  // },
+  // {
+  //   x: 50,
+  //   y: 102
+  // },
+  // {
+  //   x: 75,
+  //   y: 75
+  // },
+  // {
+  //   x: 125,
+  //   y: 125
+  // }
+])
+// 当前的目标障碍物
+const dotIndex = ref(-1)
+// 跳转到管理界面
+const toAdmin = () => {
+  router.push('/serve')
+}
+// 检测&成像设置
+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: ''
+    }
+  ]
+})
+// 获取配置文件
+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 => {
+  })
+}
+// 保存路线设置
+const saveParasPosForm = () => {
+  setParasPos(parasPosForm.value).then(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: ''
+          }
+        }
+      })
+  parasPosForm.value.runwayedges = JSON.parse(JSON.stringify(arr))
+}
+
+// 启动雷达
+const StartWorkBtn = () => {
+  StartWork()
+  rulerRef.value.setDot([], true)
+  tableData1.value = []
+}
+// 停止雷达
+const StopWorkBtn = () => {
+  StopWork()
+}
+// 重启雷达
+const RestartWorkBtn = () => {
+  RestartWork()
+}
+// 关闭雷达
+const ShutDownWorkBtn = () => {
+  ShutDownWork()
+}
+// 设置障碍物-不处理
+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 form1 = ref({})
+const form2 = ref({})
+const form3 = ref({})
+const form4 = ref({})
+const form5 = ref({})
+const form6 = ref({})
+
+const tableData1 = ref(Array(1000).fill(0).map((_, k) => {
+  return {
+    Lon: 111.11111111,
+    Lat: 111.11111111,
+    time: '2020-20-20 10:10:10',
+    rate: k,
+  }
+}))
+// 处置
+const dialog1 = ref(false)
+const dialog1Form = ref({})
+const dialogImageUrl = ref('')
+const imgDialog = ref(false)
+const openHandleObstacleDialog = (e) => {
+  dialog1.value = true
+  dialog1Form.value = {
+    index: e.$index,
+    time: e.row.time,
+    fileList: [{url: 'https://dummyimage.com/640x360'}, {url: 'https://placehold.co/600x400/png'}]
+  }
+}
+const handlePictureCardPreview = (file) => {
+  dialogImageUrl.value = file.url
+  imgDialog.value = true
+}
+const handleDownload = (file) => {
+  console.log(file)
+}
+const handleRemove = (file) => {
+  console.log(file)
+  dialog1Form.value.fileList = dialog1Form.value.fileList.filter(e => e.url !== file.url)
+}
+// 删除
+const delPoint = (e) => {
+  tableData1.value.splice((currentPage1.value - 1) * pageSize1.value + e.$index, 1);
+}
+const currentPage1 = ref(1)
+const pageSize1 = ref(10)
+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 currentPosition = ref({})
+
+const DEG_TO_RAD = Math.PI / 180;
+
+function lonLatToXY(lon, lat, lat0) {
+  const R = 111320; // 每度约等于 111.32 km
+  const cosLat = Math.cos(lat0 * DEG_TO_RAD);
+  return {x: lon * R * cosLat, y: lat * R};
+}
+
+function calcRectangleFromPoints(points) {
+  if (!points || points.length !== 4) throw new Error("必须传入4个点");
+  const p1raw = points.find(p => p.name === "点位1") || points[0];
+  const p2raw = points.find(p => p.name === "点位2") || points[1];
+  const p3raw = points.find(p => p.name === "点位3") || points[2];
+  const p4raw = points.find(p => p.name === "点位4") || points[3];
+
+  const lat0 = (points.reduce((s, p) => s + p.lat, 0) / points.length);
+  const p1 = lonLatToXY(p1raw.lon, p1raw.lat, lat0);
+  const p2 = lonLatToXY(p2raw.lon, p2raw.lat, lat0);
+  const p3 = lonLatToXY(p3raw.lon, p3raw.lat, lat0);
+  const p4 = lonLatToXY(p4raw.lon, p4raw.lat, lat0);
+
+  const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+
+  const top = dist(p2, p3);
+  const bottom = dist(p4, p1);
+  const left = dist(p4, p3);
+  const right = dist(p1, p2);
+
+  const trapezoid = Math.abs(top - bottom) / Math.max(top, bottom) > 0.05;
+  const width = trapezoid ? (top + bottom) / 2 : bottom;
+  const height = trapezoid ? (left + right) / 2 : right;
+
+  const bottomAngleRad = Math.atan2(p1.y - p4.y, p1.x - p4.x);
+  const angleDeg = bottomAngleRad * 180 / Math.PI;
+  return {
+    width: Number(width.toFixed(2)),
+    height: Number(height.toFixed(2)),
+    angle: Number(angleDeg.toFixed(6))
+  };
+}
+
+function getLocalPositionRelativeToP4(point, rectPoints, rectInfo) {
+  if (!rectInfo || typeof rectInfo.angle !== 'number') {
+    throw new Error("rectInfo.angle 必须是由 calcRectangleFromPoints 得到的角度");
+  }
+
+  const lat0 = rectPoints.reduce((a, b) => a + b.lat, 0) / rectPoints.length;
+  const p4raw = rectPoints.find(p => p.name === "点位4") || rectPoints[3];
+
+  const p4 = lonLatToXY(p4raw.lon, p4raw.lat, lat0);
+  const p = lonLatToXY(point.lon, point.lat, lat0);
+
+  const dx = p.x - p4.x;
+  const dy = p.y - p4.y;
+
+  const rad = -rectInfo.angle * DEG_TO_RAD;
+  const x_local = dx * Math.cos(rad) - dy * Math.sin(rad);
+  const y_local = dx * Math.sin(rad) + dy * Math.cos(rad);
+
+  const rotate_local = ((point.rotate ?? 0) + rectInfo.angle + 360) % 360;
+
+  return {
+    x: Number(x_local.toFixed(2)),
+    y: Number(y_local.toFixed(2)),
+    rotate: Number(rotate_local.toFixed(2))
+  };
+}
+
+// 偏差值
+const deviationValue = ref({})
+// 设置偏差值
+const getDeviationValue = (e) => {
+  if (!e) return
+  const rectInfo = calcRectangleFromPoints(areaPoints.value);
+  const local = getLocalPositionRelativeToP4(e, areaPoints.value, rectInfo);
+  deviationValue.value = local;
+}
+// 修正偏差
+const correctDeviation = (e) => {
+  let numH = deviationValue.value.y
+  let numW = deviationValue.value.x
+  let Ratio = e.y / numH
+  return {
+    ...e,
+    x: e.x - numW * Ratio
+  }
+}
+const getPoint = (k) => {
+  regionLabeling.value[k].lon = currentPosition.value.lon || 0
+  regionLabeling.value[k].lat = currentPosition.value.lat || 0
+}
+const setDot = (e) => {
+  let fodInfo = e.DarDatas.filter(v => v.Lon !== 0 && v.Lat !== 0)
+  dots.value = [...dots.value, ...fodInfo.map((v, k) => {
+
+    const rectInfo = calcRectangleFromPoints(areaPoints.value);
+    const point = {
+      lon: v.Lon,
+      lat: v.Lat,
+      rotate: 0
+    };
+    const local = correctDeviation(getLocalPositionRelativeToP4(point, areaPoints.value, rectInfo))
+
+    return local
+  }).filter(v => v)]
+  tableData1.value = [...tableData1.value, ...fodInfo.map((v, k) => {
+    return {...v, index: tableData1.value.length + k}
+  })]
+  // rulerRef.value.setDot(dots, false)
+}
+const table1Current = (e, v) => {
+  if (dotIndex.value === e.index) {
+    dotIndex.value = -1
+  } else {
+    dotIndex.value = e.index || 0
+  }
+}
+
+
+const options1 = ref([])
+const options2 = ref([])
+const getTableData = async () => {
+  await getAllAirPort().then(e => {
+    options1.value = e.data
+  })
+}
+const selectUpdate = (val) => {
+  form1.value.region = val
+  getArea({airId: val}).then(e => {
+    options2.value = e.data
+  })
+}
+const select2Update = (val) => {
+  form6.value.region = val
+  getArea({airId: val}).then(e => {
+    options2.value = e.data
+  })
+}
+const select3Update = (val) => {
+  form6.value.region1 = val
+}
+
+// 区域标定页面获取区域信息
+const getArea2 = () => {
+  GetAllCData({areaId: form6.value.region1}).then((res) => {
+    regionLabeling.value = res.data
+  })
+}
+// 区域标定信息
+const regionLabeling = ref([])
+// 区域点位信息
+const areaPoints = ref([
+  {
+    name: '点位1',
+    lon: 120.263824,
+    lat: 36.985199,
+  },
+  {
+    name: '点位2',
+    lon: 120.271545,
+    lat: 36.9816399,
+  },
+  {
+    name: '点位3',
+    lon: 120.271736,
+    lat: 36.9818535,
+  },
+  {
+    name: '点位4',
+    lon: 120.264008,
+    lat: 36.985424,
+  },
+])
+// 保存区域信息
+const saveAreaPoint = () => {
+  let arr = []
+  regionLabeling.value.forEach((v, k) => {
+    arr.push(UpdateCData(v))
+  })
+  Promise.all(arr).then(() => {
+    areaPoints.value = JSON.parse(JSON.stringify(regionLabeling.value))
+    ElMessage.success('保存成功')
+    let data = calcRectangleFromPoints(areaPoints.value)
+    areaData.value = data
+    getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))
+
+  }).catch((err) => {
+    ElMessage.error(err)
+  })
+}
+
+// 主界面获取区域信息
+const getAreaData = () => {
+  GetAllCData({areaId: form1.value.region1}).then((res) => {
+    areaPoints.value = res.data
+    let data = calcRectangleFromPoints(res.data)
+    areaData.value = data
+    getDeviationValue(res.data.find(e => e.name === '点位3'))
+  })
+}
+
+
+const testFun = () => {
+  let data = calcRectangleFromPoints(areaPoints.value)
+  areaData.value = data
+  getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))
+  let data1 = {
+    lon: 120.2716405,
+    lat: 36.9817467,
+    rotate: 303
+  }
+  const getLocal = () => {
+    const rectInfo = calcRectangleFromPoints(areaPoints.value);
+
+    const local = correctDeviation(getLocalPositionRelativeToP4(data1, areaPoints.value, rectInfo))
+    boxPos.value = local
+  }
+  getLocal()
+  let fx = 1
+  setInterval(() => {
+    data1.lon += fx * -0.0077245 * 0.01 / 60
+    data1.lat += fx * 0.0035648 * 0.01 / 60
+    getLocal()
+  }, 1000 / 60)
+  setInterval(() => {
+    fx *= -1
+  }, 1000 * 80)
+}
+
+onMounted(() => {
+  getTableData()
+  getSocket()
+  getOption()
+  getShildTableList()
+  // testFun()
+})
+
+
 const RIGHT = defineComponent({
   name: 'RIGHT',
   setup() {
@@ -574,498 +1638,6 @@ const RIGHT = defineComponent({
     )
   }
 })
-
-const router = useRouter();
-
-const rulerRef = ref()
-
-const getSocket = () => {
-
-  //   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) => {
-    processData(JSON.parse(event.data))
-  });
-
-  // 4. 连接关闭时触发
-  socket.addEventListener("close", () => {
-    console.log("❌ WebSocket 已关闭");
-  });
-
-  // 5. 出错时触发
-  socket.addEventListener("error", (error) => {
-    console.error("⚠️ WebSocket 出错:", error);
-  });
-}
-
-const processData = (data) => {
-  if (data.FodName === '雷达信息') {
-    radarWorkState.value = data.radar_work_state
-  }
-  if (data.FodName === '图像数据') {
-  }
-  if (data.FodName === 'fod信息') {
-    console.log('障碍物信息', data)
-    setDot(data)
-  }
-  if (data.ty === 3) {
-  }
-  if (data.FodName === '车辆信息') {
-    currentPosition.value = {
-      lon: data.Longitude,
-      lat: data.Latitude,
-    }
-    const rectInfo = calcRectangleFromPoints(areaPoints.value);
-    const point = {
-      lon: data.Longitude,
-      lat: data.Latitude,
-      rotate: data.HeadingAngle
-    };
-    const local = correctDeviation(getLocalPositionRelativeToP4(point, areaPoints.value, rectInfo))
-
-
-    boxPos.value = local
-
-  }
-};
-
-// 默认方法
-const onSubmit = (e) => {
-  console.log(e)
-}
-
-// 当前菜单id
-const itemsId = ref(1)
-// 菜单id跳转
-const setItemsId = (e) => {
-  itemsId.value = e
-}
-// 雷达状态
-const radarWorkState = ref(0)
-// 车辆位置
-const boxPos = ref({x: 100, y: 150, rotate: 0})
-// 左侧区域宽高
-const areaData = ref({
-  width: 500,
-  height: 1000,
-  angle: 0
-})
-// 缩放等级
-const areaType = ref(1)
-// 障碍物点位
-const dots = ref([
-  // {
-  //   x: 150,
-  //   y: 98
-  // },
-  // {
-  //   x: 50,
-  //   y: 102
-  // },
-  // {
-  //   x: 75,
-  //   y: 75
-  // },
-  // {
-  //   x: 125,
-  //   y: 125
-  // }
-])
-// 当前的目标障碍物
-const dotIndex = ref(-1)
-// 跳转到管理界面
-const toAdmin = () => {
-  router.push('/serve')
-}
-// 检测&成像设置
-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: ''
-    }
-  ]
-})
-// 获取配置文件
-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 => {
-  })
-}
-// 保存路线设置
-const saveParasPosForm = () => {
-  setParasPos(parasPosForm.value).then(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: ''
-          }
-        }
-      })
-  parasPosForm.value.runwayedges = JSON.parse(JSON.stringify(arr))
-}
-
-// 启动雷达
-const StartWorkBtn = () => {
-  StartWork()
-  rulerRef.value.setDot([], true)
-  tableData1.value = []
-}
-// 停止雷达
-const StopWorkBtn = () => {
-  StopWork()
-}
-// 重启雷达
-const RestartWorkBtn = () => {
-  RestartWork()
-}
-// 关闭雷达
-const ShutDownWorkBtn = () => {
-  ShutDownWork()
-}
-// 设置障碍物-不处理
-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 form1 = ref({})
-const form2 = ref({})
-const form3 = ref({})
-const form4 = ref({})
-const form5 = ref({})
-const form6 = ref({})
-
-const tableData1 = ref([])
-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 currentPosition = ref({})
-
-const DEG_TO_RAD = Math.PI / 180;
-
-function lonLatToXY(lon, lat, lat0) {
-  const R = 111320; // 每度约等于 111.32 km
-  const cosLat = Math.cos(lat0 * DEG_TO_RAD);
-  return {x: lon * R * cosLat, y: lat * R};
-}
-
-function calcRectangleFromPoints(points) {
-  if (!points || points.length !== 4) throw new Error("必须传入4个点");
-  const p1raw = points.find(p => p.name === "点位1") || points[0];
-  const p2raw = points.find(p => p.name === "点位2") || points[1];
-  const p3raw = points.find(p => p.name === "点位3") || points[2];
-  const p4raw = points.find(p => p.name === "点位4") || points[3];
-
-  const lat0 = (points.reduce((s, p) => s + p.lat, 0) / points.length);
-  const p1 = lonLatToXY(p1raw.lon, p1raw.lat, lat0);
-  const p2 = lonLatToXY(p2raw.lon, p2raw.lat, lat0);
-  const p3 = lonLatToXY(p3raw.lon, p3raw.lat, lat0);
-  const p4 = lonLatToXY(p4raw.lon, p4raw.lat, lat0);
-
-  const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
-
-  const top = dist(p2, p3);
-  const bottom = dist(p4, p1);
-  const left = dist(p4, p3);
-  const right = dist(p1, p2);
-
-  const trapezoid = Math.abs(top - bottom) / Math.max(top, bottom) > 0.05;
-  const width = trapezoid ? (top + bottom) / 2 : bottom;
-  const height = trapezoid ? (left + right) / 2 : right;
-
-  const bottomAngleRad = Math.atan2(p1.y - p4.y, p1.x - p4.x);
-  const angleDeg = bottomAngleRad * 180 / Math.PI;
-  return {
-    width: Number(width.toFixed(2)),
-    height: Number(height.toFixed(2)),
-    angle: Number(angleDeg.toFixed(6))
-  };
-}
-
-function getLocalPositionRelativeToP4(point, rectPoints, rectInfo) {
-  if (!rectInfo || typeof rectInfo.angle !== 'number') {
-    throw new Error("rectInfo.angle 必须是由 calcRectangleFromPoints 得到的角度");
-  }
-
-  const lat0 = rectPoints.reduce((a, b) => a + b.lat, 0) / rectPoints.length;
-  const p4raw = rectPoints.find(p => p.name === "点位4") || rectPoints[3];
-
-  const p4 = lonLatToXY(p4raw.lon, p4raw.lat, lat0);
-  const p = lonLatToXY(point.lon, point.lat, lat0);
-
-  const dx = p.x - p4.x;
-  const dy = p.y - p4.y;
-
-  const rad = -rectInfo.angle * DEG_TO_RAD;
-  const x_local = dx * Math.cos(rad) - dy * Math.sin(rad);
-  const y_local = dx * Math.sin(rad) + dy * Math.cos(rad);
-
-  const rotate_local = ((point.rotate ?? 0) + rectInfo.angle + 360) % 360;
-
-  return {
-    x: Number(x_local.toFixed(2)),
-    y: Number(y_local.toFixed(2)),
-    rotate: Number(rotate_local.toFixed(2))
-  };
-}
-
-// 偏差值
-const deviationValue = ref({})
-// 设置偏差值
-const getDeviationValue = (e) => {
-  if (!e) return
-  const rectInfo = calcRectangleFromPoints(areaPoints.value);
-  const local = getLocalPositionRelativeToP4(e, areaPoints.value, rectInfo);
-  deviationValue.value = local;
-}
-// 修正偏差
-const correctDeviation = (e) => {
-  let numH = deviationValue.value.y
-  let numW = deviationValue.value.x
-  let Ratio = e.y / numH
-  return {
-    ...e,
-    x: e.x - numW * Ratio
-  }
-}
-const getPoint = (k) => {
-  regionLabeling.value[k].lon = currentPosition.value.lon || 0
-  regionLabeling.value[k].lat = currentPosition.value.lat || 0
-}
-const setDot = (e) => {
-  let fodInfo = e.DarDatas.filter(v => v.Lon !== 0 && v.Lat !== 0)
-  dots.value = [...dots.value, ...fodInfo.map((v, k) => {
-
-    const rectInfo = calcRectangleFromPoints(areaPoints.value);
-    const point = {
-      lon: v.Lon,
-      lat: v.Lat,
-      rotate: 0
-    };
-    const local = correctDeviation(getLocalPositionRelativeToP4(point, areaPoints.value, rectInfo))
-
-    return local
-  }).filter(v => v)]
-  tableData1.value = [...tableData1.value, ...fodInfo.map((v, k) => {
-    return {...v, index: tableData1.value.length + k}
-  })]
-  // rulerRef.value.setDot(dots, false)
-}
-const table1Current = (e, v) => {
-  if (dotIndex.value === e.index) {
-    dotIndex.value = -1
-  } else {
-    dotIndex.value = e.index || 0
-  }
-}
-
-
-const options1 = ref([])
-const options2 = ref([])
-const getTableData = async () => {
-  await getAllAirPort().then(e => {
-    options1.value = e.data
-  })
-}
-const selectUpdate = (val) => {
-  form1.value.region = val
-  getArea({airId: val}).then(e => {
-    options2.value = e.data
-  })
-}
-const select2Update = (val) => {
-  form6.value.region = val
-  getArea({airId: val}).then(e => {
-    options2.value = e.data
-  })
-}
-const select3Update = (val) => {
-  form6.value.region1 = val
-}
-
-// 区域标定页面获取区域信息
-const getArea2 = () => {
-  GetAllCData({areaId: form6.value.region1}).then((res) => {
-    regionLabeling.value = res.data
-  })
-}
-// 区域标定信息
-const regionLabeling = ref([])
-// 区域点位信息
-const areaPoints = ref([
-  {
-    name: '点位1',
-    lon: 120.263824,
-    lat: 36.985199,
-  },
-  {
-    name: '点位2',
-    lon: 120.271545,
-    lat: 36.9816399,
-  },
-  {
-    name: '点位3',
-    lon: 120.271736,
-    lat: 36.9818535,
-  },
-  {
-    name: '点位4',
-    lon: 120.264008,
-    lat: 36.985424,
-  },
-])
-// 保存区域信息
-const saveAreaPoint = () => {
-  let arr = []
-  regionLabeling.value.forEach((v, k) => {
-    arr.push(UpdateCData(v))
-  })
-  Promise.all(arr).then(() => {
-    areaPoints.value = JSON.parse(JSON.stringify(regionLabeling.value))
-    ElMessage.success('保存成功')
-    let data = calcRectangleFromPoints(areaPoints.value)
-    areaData.value = data
-    getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))
-
-  }).catch((err) => {
-    ElMessage.error(err)
-  })
-}
-
-// 主界面获取区域信息
-const getAreaData = () => {
-  GetAllCData({areaId: form1.value.region1}).then((res) => {
-    areaPoints.value = res.data
-    let data = calcRectangleFromPoints(res.data)
-    areaData.value = data
-    getDeviationValue(res.data.find(e => e.name === '点位3'))
-  })
-}
-
-
-const testFun = () => {
-  let data = calcRectangleFromPoints(areaPoints.value)
-  areaData.value = data
-  getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))
-  let data1 = {
-    lon: 120.2716405,
-    lat: 36.9817467,
-    rotate: 303
-  }
-  const getLocal = () => {
-    const rectInfo = calcRectangleFromPoints(areaPoints.value);
-
-    const local = correctDeviation(getLocalPositionRelativeToP4(data1, areaPoints.value, rectInfo))
-    boxPos.value = local
-  }
-  getLocal()
-  let fx = 1
-  setInterval(() => {
-    data1.lon += fx * -0.0077245 * 0.01 / 60
-    data1.lat += fx * 0.0035648 * 0.01 / 60
-    getLocal()
-  }, 1000 / 60)
-  setInterval(() => {
-    fx *= -1
-  }, 1000 * 80)
-}
-
-onMounted(() => {
-  getTableData()
-  getSocket()
-  getOption()
-  getShildTableList()
-  // testFun()
-})
 </script>
 <style>
 .app-container {