diff --git a/frontend/src/views/home/components/device-manage/index.js b/frontend/src/views/home/components/device-manage/index.js
new file mode 100644
index 0000000..f8be3a3
--- /dev/null
+++ b/frontend/src/views/home/components/device-manage/index.js
@@ -0,0 +1,3069 @@
+import { lodLayer, viewer } from '@/components/dt-scene/index.vue'
+
+// 新增空间态势统计
+
+// 台风列表
+import SceneInfo from '@/mixin/scene-info'
+
+import { mapMutations, mapGetters } from 'vuex'
+
+import * as DT from 'dt-sdk'
+import moment from 'moment'
+import { connectWebSocket, disconnectWebSocket } from '@/utils/web-socket'
+import { ICON_MODE } from '@/enum'
+import { AmapImageryProvider, TencentImageryProvider } from '@/utils/map-provider'
+import { getResourceList } from '@/api/home'
+import { removeRefreshToken, removeToken } from '@/utils/auth'
+import { getWeatherInfo } from '@/api/user'
+import {
+  flyTaskUavCommand,
+  getRadarListData,
+  getTaskItemDetail,
+  getTaskListData,
+  getUavListData,
+  reRunTask, stopTaskFly
+} from '@/api/task'
+import UavTarget from './uavTarget'
+import PicturesUpload from '../pictures-upload/index.vue'
+import RightSlide from '@/components/RightSlide.vue'
+import LeftSlide from '@/components/LeftSlide.vue'
+
+let handler = undefined
+let broadcastChannel = null
+let broadcastChannelInterval = null
+
+let radarViewer = null
+let radarLayer = null
+let radarHandler = null
+let messageHandler = null
+
+let socketInstance = null
+let stompClientInstance = null
+let entityCollection = new DT.Cesium.AssociativeArray()
+
+let linePicture = {}
+let currentPicture = null
+let renderTaskInfo = {}
+let pictureHandler = null
+let historyPictureList = [] // 存放无人机详情相关历史图片
+let taskUavCollection = {}
+let taskPlanAreaCollection = {}
+let radarSceneEntity = {}
+let sceneEntity = {}
+let taskListResource = []
+export default {
+  name: 'TwinSituation',
+  props: {
+    visible: Boolean,
+    sceneComplete: Boolean,
+  },
+  components: {
+    PicturesUpload,
+    RightSlide,
+    LeftSlide,
+  },
+  mixins: [SceneInfo],
+  data() {
+    return {
+      visibleLocale: false,
+      loadingCount: 0,
+      sceneCompleteLocale: false,
+      activeTabs: [],
+      resourceList: {
+        visible: true,
+        activeTabId: 1,
+        data: [
+          {
+            signal: 50,
+            nickName: '无人机1',
+            battery: 80,
+            flyHeight: 80,
+            lon: 115.76,
+            lat: 40.38,
+            id: 2
+          }
+        ],
+        typeDict: {
+          1: '无人机',
+          2: '消防车',
+          3: '成员'
+        }
+      },
+      taskList: {
+        visible: true,
+        data: []
+      },
+      weatherInfo2: {
+        visible: true,
+        shrink: false,
+        wendu: '-',
+        shidu: '-',
+        quality: '-',
+        pm25: '-',
+        pm10: '-',
+        weekData: [],
+        chart: {
+          data: [
+            {
+              type: 'line',
+              name: '温度',
+              symbol: 'none',
+              areaStyle: {
+                color: '#81d3f8'
+              },
+              style: {
+                color: '#81d3f8',
+              },
+              lineStyle: { color: '#066893', },
+              data: [
+
+              ]
+            }
+          ],
+          tooltip: { show: false },
+          legend: [{ show: false }],
+          title: [{ show: false }],
+          grid: [{ left: 0, top: 0, right: 0, bottom: 0, borderWidth: 0 }],
+          xAxis: [
+            {
+              type: 'value',
+              min: 0,
+              // max: 5,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              min: 0,
+              max: 60,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true
+              },
+              splitLine: {
+                show: false
+              },
+            }
+          ]
+        }
+      },
+      radarInfo: {
+        visible: true,
+      },
+      availableList: [
+        {
+          id: 1,
+          name: '成员2'
+        },
+        {
+          id: 2,
+          name: '成员3'
+        }
+      ],
+      detailInfo: {
+        visible: false,
+        id: 1,
+        jobId: undefined,
+        baseInfo: {},
+        taskList: [
+        ],
+        pictureList: [
+        ]
+      },
+      detailUav: {
+        visible: false,
+        id: 1,
+        baseInfo: {
+          url: require('@/assets/img/uav.png'),
+          status: true,
+          battery: 80,
+          flyHeight: 120,
+          flyWidth: 120,
+          longitude: 123.232312,
+          latitude: 23.232312,
+        },
+        activeNames: ['1'],
+        activeTab: 'DEV',
+        basicsInfo: {
+          name: '无人机1',
+          group: '小组1'
+        },
+        taskList: [
+          {
+            id: 1,
+            executeIcon: 'ri-dv-line',
+            executeName: '无人机1',
+            typeIcon: 'el-icon-camera',
+            taskName: '拍照任务',
+            uavCompletion: 30,
+            isFinish: false,
+            taskProgressName: '30%',
+            executeClass: '2',
+            taskTime: '2024-12-28 14:00:00'
+          },
+          {
+            id: 6,
+            executeIcon: 'ri-dv-line',
+            executeName: '无人机1',
+            typeIcon: 'el-icon-camera',
+            taskName: '拍照任务',
+            uavCompletion: 100,
+            isFinish: true,
+            taskProgressName: '完成',
+            executeClass: '2',
+            taskTime: '2024-12-27 15:00:00'
+          },
+        ],
+        statusInfo: {
+          dev: [
+            { name: '是否开机', value: '是', unit: '' },
+            { name: '时钟锁定', value: '是', unit: '' },
+            { name: 'GPU温度', value: '正常', unit: '' },
+            { name: 'CPU温度', value: 40, unit: '℃' },
+            { name: '射频温度', value: 40, unit: '℃' },
+            { name: '天线温度', value: 40, unit: '℃' },
+            { name: '硬盘温度', value: 40, unit: '℃' },
+            { name: 'FPGA温度', value: 40, unit: '℃' },
+            { name: '硬盘容量', value: 40, unit: '%' },
+            { name: '内存容量', value: 40, unit: 'MB' },
+          ],
+          gps: [
+            { name: '定位状态', value: '正常', unit: '' },
+            { name: '定向状态', value: '正常', unit: '' },
+            { name: 'rtk状态', value: '无效', unit: '' },
+            { name: '卫星个数', value: 0, unit: '' },
+            { name: '惯导状态', value: '位置+速度+航向', unit: '' },
+            { name: '年月日', value: moment().format('YYYY-MM-DD'), unit: '' },
+            { name: '经度', value: '120.34534', unit: '°' },
+            { name: '维度', value: '40.34534', unit: '°' },
+            { name: '高度', value: 45002, unit: 'm' },
+          ],
+          imu: [
+            { name: '配置状态', value: '正常', unit: '' },
+            { name: '天线方位角', value: 1.5, unit: '°' },
+            { name: '天线俯仰角', value: 0.95, unit: '°' },
+            { name: '东向速度', value: 69.28, unit: 'm/s' },
+            { name: '北向速度', value: 41.28, unit: 'm/s' },
+            { name: '天向速度', value: 0, unit: 'm/s' },
+            { name: '俯仰角', value: 3.96, unit: '°' },
+            { name: '翻转角', value: 1.02, unit: '°' },
+            { name: '偏航角', value: 65.62, unit: '°' },
+          ],
+          dev2: {
+            isWork: true,
+            isLock: true,
+            cpuTemperature: 40,
+            spTemperature: 40,
+            txTemperature: 40,
+            ypTemperature: 40,
+            fpgaTemperature: 40,
+            storage: 80,
+            memory: 80,
+          }
+        },
+        chart: {
+          data: [
+            {
+              type: 'line',
+              name: 'channel1False',
+              symbol: 'none',
+              style: {
+                color: '#fff',
+              },
+              lineStyle: { color: '#fff', },
+              data: []
+            },
+            {
+              type: 'line',
+              name: 'channel1Real',
+              symbol: 'none',
+              style: {
+                color: '#fff',
+              },
+              lineStyle: { color: '#1721c5', },
+              data: []
+            },
+            {
+              type: 'line',
+              name: 'channel2False',
+              symbol: 'none',
+              style: {
+                color: '#fff',
+              },
+              lineStyle: { color: '#32a592', },
+              data: []
+            },
+            {
+              type: 'line',
+              name: 'channel2Real',
+              symbol: 'none',
+              style: {
+                color: '#fff',
+              },
+              lineStyle: { color: '#d93d9d', },
+              data: []
+            }
+          ],
+          tooltip: { show: false },
+          legend: [{ show: false }],
+          title: [{ show: false }],
+          grid: [{ left: 40, top: 40, right: 40, bottom: 20, borderWidth: 0 }],
+          xAxis: [
+            {
+              type: 'value',
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true
+              },
+              splitLine: {
+                show: false
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              // max: 1,
+              // min: -1,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true
+              },
+              splitLine: {
+                show: false
+              },
+            }
+          ]
+        },
+        backImage: [
+          {
+            time: moment().subtract(40, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
+            url: require('@/assets/img/test.png'),
+            uavName: '无人机1',
+            id: 1
+          },
+          {
+            time: moment().subtract(10, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
+            url: require('@/assets/img/test.png'),
+            uavName: '无人机1',
+            id: 2
+          }
+        ]
+      },
+      isSending: false,
+      rightShow: true,
+      uploadPictureInfo: {
+        visible: false,
+      },
+      taskLineDetail: {
+        visible: false,
+        title: '航线详情',
+        data: []
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'currentTime',
+      'iconMode',
+      'showSatelliteLabel',
+      'shouldAnimate',
+      'multiplier',
+      'showTrack',
+      'showFrontier',
+      'showDayNight',
+      'showLonLatGrid',
+      'viewMode',
+      'showRoadNet',
+      'isFullscreen',
+      'iconMode',
+      'showGlobalAtmosphere',
+      'duringPlay',
+      'theme',
+      'showCloud',
+      'mapType',
+      'userId',
+      'imuStatus',
+      'enableStatus',
+      'successStatus',
+      'sarWorkStatus',
+      'taskFlightMode',
+      'detectType',
+      'jobStatus',
+    ]),
+    isIconModeLarge() {
+      return this.iconMode === ICON_MODE.LARGE
+    }
+  },
+  watch: {
+    visible: {
+      handler: function (nv) {
+        if (nv) {
+          this.visibleLocale = nv
+        }
+      },
+      immediate: true,
+    },
+    visibleLocale(nv) {
+      if (!nv) {
+        this.$emit('update:visible', false)
+      }
+    },
+    sceneComplete: {
+      handler: function (nv) {
+        if (nv && this.visibleLocale) {
+        }
+      },
+      immediate: true,
+    },
+    'detailInfo.visible': {
+      handler: function (nv) {
+        if (!nv) {
+          if (this.detailInfo.pictureList.length > 0) {
+            let jobId = this.detailInfo.pictureList[0].jobId
+            let uavId = this.detailInfo.pictureList[0].uavId
+            if (taskUavCollection[jobId]) {
+              let find = taskUavCollection[jobId].find(item => item.uavId + '' === uavId + '')
+              if (find) {
+                find.toggleAllLoaderVisible(true)
+              }
+            }
+          }
+
+
+          historyPictureList.forEach(item => {
+            item.forEach(child => {
+              viewer.entities.remove(child)
+            })
+          })
+          historyPictureList = []
+        }
+      }
+    }
+  },
+  created() {
+    this.getWeather()
+    this.getResourceData()
+
+
+  },
+  mounted() {
+    // this.$refs.tools.handleMapChange('sat')
+    // this.createBroadcastChannel()
+    // TODO 部署打开
+    // window.open(window.config.homeUrl + 'task', '_blank')
+    // window.open(window.config.homeUrl + 'monitor', '_blank')
+    // TODO
+    // this.resourceClick(this.resourceList.data[0])
+    this.handleSceneComplete()
+    this.getTaskList()
+
+    // this.startTest()
+  },
+  beforeDestroy() {
+    this.SET_SPLIT_VISIBLE(false)
+    this.removePictureHandle()
+    // 移除任务区域
+    for (let key in taskPlanAreaCollection) {
+      if (taskPlanAreaCollection[key]) {
+        taskPlanAreaCollection[key].forEach(item => {
+          viewer.entities.remove(item)
+        })
+      }
+
+    }
+    for (let key in taskUavCollection) {
+      if (taskUavCollection[key]) {
+        taskUavCollection[key].forEach(item => {
+          item.destroy()
+        })
+      }
+
+    }
+    for (let key in sceneEntity) {
+      if (sceneEntity[key]) {
+        viewer.entities.remove(sceneEntity[key])
+      }
+    }
+    taskUavCollection = {}
+    // if (lodLayer) {
+    //   lodLayer.removeAll()
+    //   viewer.entities.removeAll()
+    // }
+    if (handler) {
+      handler.removeInputAction(DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    }
+    if (stompClientInstance) {
+      disconnectWebSocket(stompClientInstance)
+      socketInstance = null
+      stompClientInstance = null
+    }
+    // if (broadcastChannel) {
+    //   this.closeBroadcastChannel()
+    // }
+    linePicture = null
+    currentPicture = null
+    renderTaskInfo = null
+    pictureHandler = null
+    historyPictureList = null
+    taskPlanAreaCollection = {}
+    radarSceneEntity = {}
+    sceneEntity = {}
+    taskListResource = []
+  },
+  methods: {
+    ...mapMutations('scene-control', [
+      'SET_SWITCH',
+      'SET_ANIMATE',
+      'SET_MULTIPLIER',
+      'SET_TRACK',
+      'SET_FRONTIER',
+      'SET_DAY_NIGHT',
+      'SET_LON_LAT_GRID',
+      'SET_VIEW_MODE',
+      'SET_FULL_SCREEN',
+      'SET_ROAD_NET',
+      'SET_INIT_STATE',
+      'SET_GLOBAL_ATMOSPHERE_SHOW',
+      'SET_SATELLITE_LABEL',
+      'SET_INTER_VISIBLE',
+      'SET_VIEWABLE_VISIBLE',
+      'SET_CLOUD',
+      'SET_MAP_TYPE',
+      'SET_SPLIT_VISIBLE',
+    ]),
+    ...mapMutations('app', ['SET_THEME']),
+    startTest() {
+      let testHeight = 1000
+      window.detectType = {
+        1: '车'
+      }
+      let task = [
+        {
+          id: 1,
+          name: '测试任务',
+          status: 1,
+          statusName: '执行中',
+          check: true,
+          beginTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+          pointList: [
+            [
+              {
+                longitude: 115.915457,
+                latitude: 40.359459,
+              },
+              {
+                longitude: 115.915457,
+                latitude: 40.358999,
+              },
+              {
+                longitude: 115.915874,
+                latitude: 40.358999,
+              },
+              {
+                longitude: 115.915874,
+                latitude: 40.359459,
+              }
+            ],
+            [
+              {
+                longitude: 115.915457,
+                latitude: 40.355459
+              },
+            ]
+          ],
+          uavList: [
+            {
+              jobId: 1,
+              uavId: 2,
+              uavName: '无人机1',
+              airlineList: [
+                {
+                  startLon: 115.917609,
+                  startLat: 40.359843,
+                  startHeight: testHeight,
+                  endLon: 115.917609,
+                  endLat: 40.357843,
+                  endHeight: testHeight,
+                  id: 1
+                },
+                {
+                  startLon: 115.919609,
+                  startLat: 40.359843,
+                  startHeight: testHeight,
+                  endLon: 115.919609,
+                  endLat: 40.357843,
+                  endHeight: testHeight,
+                  id: 2
+                }
+              ],
+              trailList: [
+                {
+                  longitude: 115.917609,
+                  latitude: 40.359843,
+                  height: testHeight
+                },
+                {
+                  longitude: 115.918609,
+                  latitude: 40.359843,
+                  height: testHeight
+                },
+                {
+                  longitude: 115.919609,
+                  latitude: 40.357843,
+                  height: testHeight
+                }
+              ],
+              startLon: 115.917609,
+              startLat: 40.359843,
+              startHeight: testHeight,
+              payloadList: [
+                {
+                  payloadId: 1,
+                  payloadName: 'sar',
+                  imageList: [
+                    {
+                      left1Lon: 115.917609,
+                      left1Lat: 40.359843,
+                      left2Lon: 115.917609,
+                      left2Lat: 40.358843,
+                      right2Lon: 115.918609,
+                      right2Lat: 40.358843,
+                      right1Lon: 115.918609,
+                      right1Lat: 40.359843,
+                      fileId: 1,
+                      id: 1,
+                      relativePath: '1.png',
+                      itemList: [
+                        {
+                          id: 2,
+                          left1Lon: 115.917609,
+                          left1Lat: 40.359843,
+                          left2Lon: 115.917609,
+                          left2Lat: 40.358843,
+                          right2Lon: 115.918609,
+                          right2Lat: 40.358843,
+                          right1Lon: 115.918609,
+                          right1Lat: 40.359843,
+                          type: 1,
+                        },
+                        {
+                          id: 4,
+                          left1Lon: 115.916609,
+                          left1Lat: 40.359143,
+                          left2Lon: 115.916609,
+                          left2Lat: 40.358943,
+                          right2Lon: 115.918509,
+                          right2Lat: 40.358943,
+                          right1Lon: 115.918509,
+                          right1Lat: 40.359143,
+                          type: 1,
+                        }
+                      ]
+                    },
+                    {
+                      left1Lon: 115.919609,
+                      left1Lat: 40.359843,
+                      left2Lon: 115.919609,
+                      left2Lat: 40.358843,
+                      right2Lon: 115.920609,
+                      right2Lat: 40.358843,
+                      right1Lon: 115.920609,
+                      right1Lat: 40.359843,
+                      fileId: 2,
+                      relativePath: '1.png',
+                      itemList: [
+                        {
+                          id: 5,
+                          left1Lon: 115.919609,
+                          left1Lat: 40.359843,
+                          left2Lon: 115.919609,
+                          left2Lat: 40.358843,
+                          right2Lon: 115.920609,
+                          right2Lat: 40.358843,
+                          right1Lon: 115.920609,
+                          right1Lat: 40.359843,
+                          type: 1,
+                        },
+                        {
+                          id: 6,
+                          left1Lon: 115.918609,
+                          left1Lat: 40.359143,
+                          left2Lon: 115.918609,
+                          left2Lat: 40.358943,
+                          right2Lon: 115.920509,
+                          right2Lat: 40.358943,
+                          right1Lon: 115.920509,
+                          right1Lat: 40.359143,
+                          type: 1,
+                        }
+                      ]
+                    }
+                  ],
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          name: '测试任务2',
+          status: 2,
+          check: false,
+          statusName: '已完成',
+          beginTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+          pointList: [
+            [
+              {
+                longitude: 115.905457,
+                latitude: 40.359459
+              },
+              {
+                longitude: 115.905457,
+                latitude: 40.358999
+              },
+              {
+                longitude: 115.905874,
+                latitude: 40.358999
+              },
+              {
+                longitude: 115.905874,
+                latitude: 40.359459
+              }
+            ],
+            [
+              {
+                longitude: 115.905457,
+                latitude: 40.355459
+              },
+            ]
+          ],
+          uavList: [
+            {
+              jobId: 2,
+              uavId: 3,
+
+              uavName: '无人机1',
+              airlineList: [
+                {
+                  startLon: 115.907609,
+                  startLat: 40.359843,
+                  startHeight: testHeight,
+                  endLon: 115.917609,
+                  endLat: 40.357843,
+                  endHeight: testHeight,
+                  id: 1
+                },
+                {
+                  startLon: 115.909609,
+                  startLat: 40.359843,
+                  startHeight: testHeight,
+                  endLon: 115.919609,
+                  endLat: 40.357843,
+                  endHeight: testHeight,
+                  id: 2
+                }
+              ],
+              trailList: [
+                {
+                  longitude: 115.907609,
+                  latitude: 40.359843,
+                  height: testHeight
+                },
+                {
+                  longitude: 115.906609,
+                  latitude: 40.359843,
+                  height: testHeight
+                },
+                {
+                  longitude: 115.905609,
+                  latitude: 40.357843,
+                  height: testHeight
+                }
+              ],
+              startLon: 115.907609,
+              startLat: 40.359843,
+              startHeight: testHeight,
+              payloadList: [
+                {
+                  payloadId: 1,
+                  payloadName: 'sar',
+                  imageList: [
+                    {
+                      left1Lon: 115.907609,
+                      left1Lat: 40.359843,
+                      left2Lon: 115.907609,
+                      left2Lat: 40.358843,
+                      right2Lon: 115.908609,
+                      right2Lat: 40.358843,
+                      right1Lon: 115.908609,
+                      right1Lat: 40.359843,
+                      fileId: 1,
+                      relativePath: '1.png',
+                      itemList: [
+                        {
+                          id: 1,
+                          left1Lon: 115.917609,
+                          left1Lat: 40.359843,
+                          left2Lon: 115.917609,
+                          left2Lat: 40.358843,
+                          right2Lon: 115.918609,
+                          right2Lat: 40.358843,
+                          right1Lon: 115.918609,
+                          right1Lat: 40.359843,
+                          type: 1,
+                        },
+                        {
+                          id: 2,
+                          left1Lon: 115.916609,
+                          left1Lat: 40.359143,
+                          left2Lon: 115.916609,
+                          left2Lat: 40.358943,
+                          right2Lon: 115.918509,
+                          right2Lat: 40.358943,
+                          right1Lon: 115.918509,
+                          right1Lat: 40.359143,
+                          type: 1,
+                        }
+                      ]
+                    },
+                    {
+                      left1Lon: 115.909609,
+                      left1Lat: 40.359843,
+                      left2Lon: 115.909609,
+                      left2Lat: 40.358843,
+                      right2Lon: 115.910609,
+                      right2Lat: 40.358843,
+                      right1Lon: 115.910609,
+                      right1Lat: 40.359843,
+                      fileId: 2,
+                      relativePath: '1.png',
+                      itemList: [
+                        {
+                          id: 1,
+                          left1Lon: 115.909609,
+                          left1Lat: 40.359843,
+                          left2Lon: 115.909609,
+                          left2Lat: 40.358843,
+                          right2Lon: 115.910609,
+                          right2Lat: 40.358843,
+                          right1Lon: 115.910609,
+                          right1Lat: 40.359843,
+                          type: 1,
+                        },
+                        {
+                          id: 2,
+                          left1Lon: 115.908609,
+                          left1Lat: 40.359143,
+                          left2Lon: 115.908609,
+                          left2Lat: 40.358943,
+                          right2Lon: 115.910509,
+                          right2Lat: 40.358943,
+                          right1Lon: 115.910509,
+                          right1Lat: 40.359143,
+                          type: 1,
+                        }
+                      ]
+                    }
+                  ],
+                }
+              ]
+            }
+          ]
+        }
+      ]
+      this.taskList.data = task
+      task.forEach(item => {
+        // 测试
+
+        if (item.status === 1) {
+          this.addUavToScene(item)
+          this.addTaskPlanArea(item.pointList, item.id)
+        }
+      })
+
+      let initPosition = [115.919609, 40.357843, testHeight]
+      // 测试推送
+      setInterval(() => {
+        initPosition[0] += 0.001
+        initPosition[1] += 0.001
+        let body = [{
+          jobId: 1,
+          uavId: 2,
+          longitude: initPosition[0],
+          latitude: initPosition[1],
+          height: initPosition[2],
+          payloadList: [
+            {
+              longitude: initPosition[0],
+              latitude: initPosition[1],
+              altitude: initPosition[2],
+            }
+          ]
+        }]
+        this.handleWebsocketStatus({ body: JSON.stringify(body) })
+
+      }, 4000)
+
+      let initPic = {
+        left1Lon: 115.917609,
+        left1Lat: 40.359843,
+        left2Lon: 115.917609,
+        left2Lat: 40.358843,
+        right2Lon: 115.918609,
+        right2Lat: 40.358843,
+        right1Lon: 115.918609,
+        right1Lat: 40.359843,
+        fileId: 4,
+        id: 1,
+        jobId: 1,
+        payloadId: 1,
+        uavId: 2,
+        relativePath: '1.png',
+        itemList: [
+          {
+            id: 9,
+            left1Lon: 115.917609,
+            left1Lat: 40.359843,
+            left2Lon: 115.917609,
+            left2Lat: 40.358843,
+            right2Lon: 115.918609,
+            right2Lat: 40.358843,
+            right1Lon: 115.918609,
+            right1Lat: 40.359843,
+            type: 1,
+          },
+        ]
+      }
+      setInterval(() => {
+        initPic.left1Lon += 0.001
+        initPic.left1Lat += 0.001
+        initPic.left2Lon += 0.001
+        initPic.left2Lat += 0.001
+        initPic.right2Lon += 0.001
+        initPic.right2Lat += 0.001
+        initPic.right1Lon += 0.001
+        initPic.right1Lat += 0.001
+        initPic.fileId += 1
+        initPic.itemList.forEach(item => {
+          item.left1Lon += 0.001
+          item.left1Lat += 0.001
+          item.left2Lon += 0.001
+          item.left2Lat += 0.001
+          item.right2Lon += 0.001
+          item.right2Lat += 0.001
+          item.right1Lon += 0.001
+          item.right1Lat += 0.001
+          item.id += 1
+        })
+        this.handleWebsocketImage({ body: JSON.stringify(initPic) })
+      }, 6000)
+    },
+    // 工具栏操作
+    toggleTools(tool) {
+      tool.active = !tool.active
+      switch (tool.type) {
+        case 'entityName':
+          this.handleGlobeLabelVisible(tool.active)
+          break
+        case 'ability':
+          this.abilityShow = tool.active
+          break
+      }
+    },
+
+    /**
+     * 菜单点击事件
+     * @author Farley
+     * @date 2022-04-29
+     * @param {any} menu
+     * @param {any} active
+     * @returns {any}
+     */
+    menuClick(menu, active) {
+      const blackList = ['setting', 'timeline']
+      if (blackList.includes(menu.type)) return
+      switch (menu.type) {
+        case 'situation': // 遥感卫星能力展示
+          this.menus.scenePlay.active = false
+          break
+        case 'scenePlay':
+          this.menus.situation.active = false
+          break
+      }
+    },
+    handleSceneComplete() {
+      let that = this
+      this.$nextTick(() => {
+        // this.addHandler()
+        if (this.rightShow) {
+          this.createRadar()
+        }
+        // this.testLine()
+        // 移动相机
+        // viewer.cesiumViewer.scene.camera.moveBackward(10000000)
+        // 加载湘江流域3Dtiles场景
+        // loadXJLYSceneasync(DT)
+
+        // this.addPictureHandle()
+
+        viewer.cesiumViewer.scene.camera.changed.addEventListener(function (ev) {
+          that.refreshRadar()
+        })
+      })
+
+      // this.startWebSocket()
+      this.createWebsocket()
+
+    },
+    toggleRightShow() {
+      this.rightShow = !this.rightShow
+      if (this.rightShow) {
+
+        this.$nextTick(() => {
+          this.createRadar()
+        })
+      } else {
+        this.detailInfo.visible = false
+        this.detailUav.visible = false
+      }
+    },
+
+    getTaskList() {
+      getTaskListData({ type: 2, orders: [{ column: 'begin_time', asc: false }] }).then(res => {
+        if (res.data.code === 200) {
+          console.log('任务列表', res.data.data)
+          let data = res.data.data
+          let list = []
+          data.forEach(item => {
+            item.check = item.status === 1 || item.status === 3
+            item.statusName = this.jobStatus[item.status + '']
+            // TODO 临时设置
+            item.uavList.forEach(child => {
+              if (!child.trailList) {
+                child.trailList = []
+              }
+              child.jobName = item.name
+            })
+            list.push({
+              id: item.id,
+              beginTime: item.beginTime,
+              check: item.check,
+              endTime: item.endTime,
+              mode: item.mode,
+              name: item.name,
+              status: item.status,
+              statusName: item.statusName,
+            })
+            // TODO
+            // item.pointList = [item.pointList]
+            if (item.status === 1 || item.status === 3) {
+              // this.addJobLine(item, false)
+              this.addUavToScene(item)
+              this.addTaskPlanArea(item.pointList, item.id, item.name)
+            }
+            // 测试
+            // this.addUavToScene(item)
+          })
+          taskListResource = data
+          this.taskList.data = list
+        } else {
+          this.$message.error(res.data.message)
+        }
+      })
+    },
+    addTaskPlanArea(data, taskId, taskName) {
+      taskPlanAreaCollection[taskId] = []
+      let allPositions = []
+      let centerLon = 0
+      let centerLat = 0
+      data.forEach((item, index) => {
+        if (item.length > 1) {
+          let positions = []
+          item.forEach(child => {
+            positions.push(DT.Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude))
+          })
+          positions.push(DT.Cesium.Cartesian3.fromDegrees(item[0].longitude, item[0].latitude))
+          allPositions = allPositions.concat(positions)
+          let entity = viewer.entities.add({
+            position: positions[0],
+            label: {
+              text: `${taskName}任务-规划区域${index + 1}`,
+              disableDepthTestDistance: 10000,
+              font: '14px sans-serif',
+              fillColor: DT.Cesium.Color.RED,
+              horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+              verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
+              pixelOffset: new DT.Cesium.Cartesian2(0, -10),
+              scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
+              distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 10000),
+              showBackground: true,
+              backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.6)')
+            },
+            polyline: {
+              positions: positions,
+              width: 2,
+              arcType: DT.Cesium.ArcType.NONE,
+              material: DT.Cesium.Color.RED,
+              depthFailMaterial: DT.Cesium.Color.RED,
+              disableDepthTestDistance: 10000,
+              zIndex: -1
+            }
+          })
+          taskPlanAreaCollection[taskId].push(entity)
+        } else if (item.length === 1) {
+          let position = DT.Cesium.Cartesian3.fromDegrees(item[0].longitude, item[0].latitude)
+          allPositions.push(position)
+          let entity = viewer.entities.add({
+            position,
+            label: {
+              text: `${taskName}任务-规划区域${index + 1}`,
+              disableDepthTestDistance: 10000,
+              font: '14px sans-serif',
+              fillColor: DT.Cesium.Color.RED,
+              horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+              pixelOffset: new DT.Cesium.Cartesian2(10, 0),
+              showBackground: true,
+              backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.6)')
+            },
+            point: {
+              pixelSize: 4,
+              color: DT.Cesium.Color.RED,
+              disableDepthTestDistance: 10000
+            }
+          })
+          taskPlanAreaCollection[taskId].push(entity)
+
+        }
+      })
+      if (allPositions.length > 0) {
+        let cat = DT.Cesium.Cartographic.fromCartesian(allPositions[0])
+        allPositions.push(DT.Cesium.Cartesian3.fromRadians(cat.longitude, cat.latitude, 2000))
+        // let rotation = DT.Cesium.Matrix3.fromRotationZ(Math.PI / 2)
+        // let matrix = new DT.Cesium.Matrix4()
+        // DT.Cesium.Matrix4.fromRotationTranslation(rotation, DT.Cesium.Cartesian3.ZERO, matrix)
+        viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(allPositions), {
+          duration: 0.1,
+          offset: new DT.Cesium.HeadingPitchRange(0, -Math.PI / 2, 0),
+          // endTransform:matrix,
+        })
+        // console.log('相机', viewer.cesiumViewer.camera)
+      }
+
+    },
+    addUavToScene(info) {
+      let arr = []
+      info.uavList.forEach(item => {
+        let uav = new UavTarget(viewer, item)
+        arr.push(uav)
+      })
+      taskUavCollection[info.id] = arr
+      console.log('taskUavCollection添加完毕', taskUavCollection)
+      this.refreshRadar()
+    },
+    /**
+     * 更新雷达图上的实体位置
+     * @param name
+     * @param id
+     * @param position
+     */
+    updateRadarSceneEntityPosition(name, id, position, connected) {
+      if (connected) {
+        if (radarSceneEntity[id]) {
+          radarSceneEntity[id].position = position.clone()
+        } else {
+          radarSceneEntity[id] = radarViewer.entities.add({
+            id: 'uav-' + id,
+            position: position.clone(),
+            label: {
+              text: name,
+              font: '14px sans-serif',
+              horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+              outlineColor: DT.Cesium.Color.BLACK,
+              outlineWidth: 2,
+              pixelOffset: new DT.Cesium.Cartesian2(5, -4),
+              disableDepthTestDistance: 10000
+            },
+            billboard: {
+              image: process.env.BASE_URL + 'static/img/icon_wrj.png',
+              disableDepthTestDistance: 10000
+            }
+          })
+        }
+      } else {
+        if (radarSceneEntity[id]) {
+          radarViewer.entities.remove(radarSceneEntity[id])
+          radarSceneEntity[id] = null
+        }
+      }
+
+    },
+    /**
+     * 更新雷达图上的实体位置
+     * @param name
+     * @param id
+     * @param position
+     */
+    updateSceneEntityPosition(name, id, position, connected) {
+      if (connected) {
+        if (sceneEntity[id]) {
+          sceneEntity[id].position = position.clone()
+        } else {
+          sceneEntity[id] = viewer.entities.add({
+            id: 'radar2-' + id,
+            position: position.clone(),
+            label: {
+              text: name + '0000',
+              font: '14px sans-serif',
+              horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+              outlineColor: DT.Cesium.Color.BLACK,
+              outlineWidth: 2,
+              pixelOffset: new DT.Cesium.Cartesian2(5, -4),
+              disableDepthTestDistance: 10000
+            },
+            billboard: {
+              image: process.env.BASE_URL + 'static/img/icon_wrj.png',
+              disableDepthTestDistance: 10000
+            }
+          })
+        }
+      } else {
+        if (sceneEntity[id]) {
+          viewer.entities.remove(sceneEntity[id])
+          sceneEntity[id] = null
+        }
+      }
+    },
+
+    removeTaskTarget(taskId) {
+      if (taskPlanAreaCollection[taskId]) {
+        taskPlanAreaCollection[taskId].forEach(item => {
+          viewer.entities.remove(item)
+        })
+        taskPlanAreaCollection[taskId] = null
+      }
+      if (taskUavCollection[taskId]) {
+        taskUavCollection[taskId].forEach(item => {
+          item.destroy()
+        })
+        taskUavCollection[taskId] = null
+      }
+    },
+    addJobLine(info, isFinish) {
+      console.log('任务信息', info)
+      let load = renderTaskInfo[`${info.id}-${info.uavList[0].uavId}`]
+      if (load) {
+        return
+      }
+      let routes = []
+      let startHeight = 0
+      let endHeight = 0
+      info.uavList[0].airlineList.forEach((item, index) => {
+        if (index === 0) {
+          startHeight = item.flightStartHeight
+        }
+        if (index === info.uavList[0].airlineList.length - 1) {
+          endHeight = item.flightEndHeight
+        }
+        routes.push([item.flightStartLon, item.flightStartLat, item.flightStartHeight])
+        routes.push([item.flightEndLon, item.flightEndLat, item.flightEndHeight])
+      })
+      routes.unshift([info.uavList[0].startLon, info.uavList[0].startLat, startHeight])
+      routes.push([info.uavList[0].endLon, info.uavList[0].endLat, endHeight])
+      let positions = []
+      let minLon, maxLon, minLat, maxLat
+      routes.forEach((item, index) => {
+        if (index === 0) {
+          minLon = item[0]
+          maxLon = item[0]
+          minLat = item[1]
+          maxLat = item[1]
+        } else {
+          minLon = Math.min(minLon, item[0])
+          maxLon = Math.max(maxLon, item[0])
+          minLat = Math.min(minLat, item[1])
+          maxLat = Math.max(maxLat, item[1])
+        }
+        positions.push(DT.Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]))
+      })
+      let currentIndex = 0
+      let currentPosition = positions[0].clone()
+      if (isFinish) {
+        currentIndex = positions.length - 1
+        currentPosition = positions[currentIndex].clone()
+      }
+
+      let pathEntity = new DT.DirectionPath({
+        id: `${info.id}-${info.uavList[0].uavId}~baseline`,
+        positions: positions,
+        dataFit: false,
+        currentPosition: currentPosition,
+        currentIndex: currentIndex,
+        autoStep: false,
+        equalsEpsilon: 0.01,
+        stepDistance: 30,
+        addMark: !isFinish,
+        leadLineOption: {
+          width: 4,
+          dashLength: 20,
+          color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
+          image: process.env.BASE_URL + 'static/img/dash.png'
+        },
+        passLineOption: {
+          width: 4,
+          color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
+        },
+        labelConfig: {
+          font: '21pt Lucida Console',
+          horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+          outlineColor: DT.Cesium.Color.BLACK,
+          outlineWidth: 2,
+          pixelOffset: new DT.Cesium.Cartesian2(5, -4),
+          scale: 0.5,
+          show: true,
+          style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+          text: info.uavList[0].uavName,
+          verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
+          disableDepthTestDistance: 10000
+        },
+        billboardConfig: {
+          image: process.env.BASE_URL + 'static/img/icon_wrj.png',
+          disableDepthTestDistance: 10000
+          // enableRotation: true
+        },
+        enableRepeatAdjust: false,
+      })
+      let pathEntity2 = new DT.DirectionPath({
+        id: `${info.id}-${info.uavList[0].uavId}~baseline`,
+        positions: positions,
+        dataFit: false,
+        currentPosition: currentPosition,
+        currentIndex: currentIndex,
+        autoStep: false,
+        equalsEpsilon: 0.01,
+        stepDistance: 30,
+        addMark: !isFinish,
+        leadLineOption: {
+          width: 4,
+          dashLength: 20,
+          color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
+          image: process.env.BASE_URL + 'static/img/dash.png'
+        },
+        passLineOption: {
+          width: 4,
+          color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
+        },
+        labelConfig: {
+          font: '21pt Lucida Console',
+          horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+          outlineColor: DT.Cesium.Color.BLACK,
+          outlineWidth: 2,
+          pixelOffset: new DT.Cesium.Cartesian2(5, -4),
+          scale: 0.5,
+          show: true,
+          style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+          text: info.uavList[0].uavName,
+          verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
+          disableDepthTestDistance: 10000
+        },
+        billboardConfig: {
+          image: process.env.BASE_URL + 'static/img/icon_wrj.png',
+          disableDepthTestDistance: 10000
+          // enableRotation: true
+        },
+        enableRepeatAdjust: false,
+      })
+      console.log('调用添加方法了吗')
+      lodLayer.add(pathEntity)
+      radarLayer.add(pathEntity2)
+
+      // 添加图片
+
+
+      renderTaskInfo[`${info.id}-${info.uavList[0].uavId}`] = {
+        entity: pathEntity,
+        entity2: pathEntity2,
+        picture: {}
+      }
+
+      info.uavList.forEach(uav => {
+        uav.payloadList.forEach(payload => {
+          payload.imageList.forEach(image => {
+            this.addMarkPicture2(image)
+          })
+        })
+      })
+      // 适当扩大视角范围
+      let lonDiff = (maxLon - minLon) / 2
+      let latDiff = (maxLat - minLat) / 2
+      minLon -= lonDiff
+      maxLon += lonDiff
+      minLat -= latDiff
+      maxLat += latDiff
+
+      let boundingPosition = [
+        DT.Cesium.Cartesian3.fromDegrees(minLon, minLat),
+        DT.Cesium.Cartesian3.fromDegrees(minLon, maxLat),
+        DT.Cesium.Cartesian3.fromDegrees(maxLon, minLat),
+        DT.Cesium.Cartesian3.fromDegrees(maxLon, maxLat),
+      ]
+      // console.log('最小最大', minLon, maxLon, minLat, maxLat)
+      viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 })
+    },
+    removeJobLine(jobId, uavId) {
+      let load = renderTaskInfo[`${jobId}-${uavId}`]
+      if (load) {
+        if (load.entity) {
+          lodLayer.remove(load.entity)
+          radarLayer.remove(load.entity2)
+        }
+        if (load.picture) {
+          for (let key in load.picture) {
+            if (load.picture[key].pictureEntity) {
+              viewer.entities.remove(load.picture[key].pictureEntity)
+            }
+            if (load.picture[key].markArr) {
+              load.picture[key].markArr.forEach(item => {
+                viewer.entities.remove(item)
+              })
+            }
+          }
+        }
+      }
+      renderTaskInfo[`${jobId}-${uavId}`] = null
+    },
+
+    showUpload() {
+      this.uploadPictureInfo.visible = true
+    },
+    makeTaskUavFly(info, index) {
+      this.$confirm('确定执行吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(res => {
+        flyTaskUavCommand({ id: info.id }).then(res => {
+          if (res.data.code === 200) {
+            info.status = 1
+            info.check = false
+            info.statusName = this.jobStatus[info.status + '']
+            this.toggleTaskSceneShow(info, index)
+            this.taskList.data.forEach((child, childIndex) => {
+              if (child.check && child.status === 2) {
+                this.toggleTaskSceneShow(child, childIndex)
+              }
+            })
+            this.$message.success('起飞成功')
+          } else {
+            this.$message.error(res.data.message)
+          }
+        })
+      })
+
+    },
+    toggleTaskSceneShow(info, index) {
+      // console.log('切换的info', info)
+      // console.log('无人机详情面板', this.detailInfo)
+      if (info.check) {
+        if (this.detailInfo.visible) {
+          let isDetail = false
+          taskListResource[index].uavList.forEach(uav => {
+            uav.payloadList.forEach(payload => {
+              if (payload.payloadId === this.detailInfo.baseInfo.id) {
+                isDetail = true
+              }
+            })
+          })
+          if (isDetail) {
+            this.detailInfo.visible = false
+            this.detailUav.visible = false
+          }
+
+        }
+        info.check = false;
+        taskListResource[index].check = false
+
+        // if (currentPicture && currentPicture.jobId === info.id + '') {
+        //   currentPicture = null
+        // }
+        this.removeTaskTarget(info.id);
+      } else {
+        this.addUavToScene(taskListResource[index])
+        this.addTaskPlanArea(taskListResource[index].pointList, info.id, info.name)
+        info.check = true
+
+      }
+      // console.log('变换后的数据', this.taskList.data)
+    },
+    stopTask(info, index) {
+      this.$confirm('确定结束任务吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(res => {
+        stopTaskFly({ id: info.id }).then(res => {
+          if (res.data.code === 200) {
+            info.status = 2
+            info.statusName = this.jobStatus[info.status + '']
+            this.$message.success('任务已结束！')
+          } else {
+            this.$message.error(res.data.message)
+          }
+        })
+      })
+
+    },
+    /**
+     * 重新执行
+     * @param info
+     */
+    reRunTask(info) {
+      if (info.status !== 2) return
+      this.$confirm('确定重新执行吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(res => {
+        reRunTask({ id: info.id }).then(res => {
+          if (res.data.code === 200) {
+            console.log('重新运行结果', res)
+            this.$message.success('任务重新执行成功')
+            let data = res.data.data
+            data.check = data.status === 1
+            data.statusName = this.jobStatus[data.status + '']
+            data.uavList.forEach(child => {
+              if (!child.trailList) {
+                child.trailList = []
+              }
+              child.jobName = data.name
+            })
+            this.taskList.data.unshift({
+              id: data.id,
+              beginTime: data.beginTime,
+              check: data.check,
+              endTime: data.endTime,
+              mode: data.mode,
+              name: data.name,
+              status: data.status,
+              statusName: data.statusName,
+            })
+            taskListResource.unshift(data)
+            // this.addUavToScene(data)
+            // this.addTaskPlanArea(data.pointList, data.id, data.name)
+          } else {
+            this.$message.error(res.data.message)
+          }
+        })
+      })
+    },
+    getWeather() {
+      getWeatherInfo().then(res => {
+        if (res.data.code === 200) {
+          let data = res.data.data
+          this.weatherInfo2.wendu = data.wendu
+          this.weatherInfo2.shidu = data.shidu
+          this.weatherInfo2.quality = data.quality
+          this.weatherInfo2.pm25 = data.pm25
+          this.weatherInfo2.pm10 = data.pm10
+          let list = data.forecast.slice(0, 5)
+          let chart = []
+          list.forEach((item, index) => {
+            let low = item.low.split(' ')[1]
+            let high = item.high.split(' ')[1]
+            item.temperatureRange = [low, high]
+            // chart.push([item.week, parseFloat(high)])
+            chart.push([index, parseFloat(high)])
+          })
+          this.weatherInfo2.weekData = list
+          this.weatherInfo2.chart.data[0].data = chart
+          console.log('数据', this.weatherInfo2.chart.data)
+          if (this.$refs.chart) {
+            this.$refs.chart.updateData(this.weatherInfo2.chart.data)
+
+          }
+        } else {
+          this.$message.error(res.data.message)
+        }
+      })
+    },
+
+    /**
+     * @description 添加地面站点击事件
+     * @author wzw
+     * @date 2022年3月30日
+     */
+    addHandler() {
+      let that = this
+      handler = new DT.Cesium.ScreenSpaceEventHandler(
+        viewer.cesiumViewer.scene.canvas
+      )
+      handler.setInputAction(event => {
+        let evt = viewer.cesiumViewer.scene.pick(event.position)
+
+        // 卫星和地面站的点击事件
+        if (evt && evt.primitive && evt.primitive.entityId) {
+          let id = evt.primitive.entityId
+          // 点击的是地面站
+          if (id.includes('station')) {
+            // 激活实体详情面板
+            if (!this.visible.entityDetail) {
+              this.visible.entityDetail = true
+            }
+            let data = undefined
+            for (let i = 0; i < this.sceneInfo.stationList.length; i++) {
+              if ('station-' + this.sceneInfo.stationList[i].staId === id) {
+                data = JSON.parse(JSON.stringify(this.sceneInfo.stationList[i]))
+                break
+              }
+            }
+          }
+          // 点击的是卫星
+          if (id.includes('satellite')) {
+            // 激活实体详情面板
+            if (!this.visible.entityDetail) {
+              this.visible.entityDetail = true
+            }
+            let satId = id.split('-')[1]
+            let satelliteInfo = this.sceneInfo.satelliteList.find(
+              item => item.satId === +satId
+            )
+            let info = JSON.parse(JSON.stringify(satelliteInfo))
+            this.showSatelliteInfo(info)
+          }
+        }
+
+        // 覆盖范围属于那个卫星的提示框
+        if (evt && evt.id && evt.id.id.includes('area')) {
+          let position1
+          let feature = viewer.cesiumViewer.scene.pick(event.position)
+          if (feature) {
+            position1 = viewer.cesiumViewer.scene.pickPosition(event.position)
+          } else {
+            let ray = viewer.cesiumViewer.scene.camera.getPickRay(
+              event.position
+            )
+            position1 = viewer.cesiumViewer.scene.globe.pick(
+              ray,
+              viewer.cesiumViewer.scene
+            )
+          }
+          let cartographic = viewer.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
+            position1
+          )
+          let id = evt.id.id
+          let isExist = that.eventTips.findIndex(item => {
+            return item.id === id
+          })
+          if (isExist !== -1) {
+            that.eventTips[isExist].showAnimation = false
+            that.eventTips[isExist].position = [
+              DT.Cesium.Math.toDegrees(cartographic.longitude),
+              DT.Cesium.Math.toDegrees(cartographic.latitude),
+              500
+            ]
+            Reflect.deleteProperty(that.eventTips[isExist], 'disappearTime')
+            Reflect.deleteProperty(that.eventTips[isExist], 'animationTime')
+          } else {
+            that.eventTips.push({
+              id,
+              name: evt.id.name,
+              show: true,
+              showAnimation: false,
+              position: [
+                DT.Cesium.Math.toDegrees(cartographic.longitude),
+                DT.Cesium.Math.toDegrees(cartographic.latitude),
+                500
+              ]
+            })
+          }
+        } else {
+          that.eventTips.forEach(item => {
+            item.animationTime = moment().format('YYYY-MM-DD HH:mm:ss')
+            item.disappearTime = moment()
+              .add(2, 's')
+              .format('YYYY-MM-DD HH:mm:ss')
+          })
+        }
+      }, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+
+    /*********************业务代码**********************/
+    //#region 测试代码
+    testLine() {
+      let lineData = [
+        {
+          lon: 116.538201,
+          lat: 40.141529
+        },
+        {
+          lon: 116.538216,
+          lat: 40.143778
+        },
+        {
+          lon: 116.546478,
+          lat: 40.143742
+        },
+        {
+          lon: 116.546193,
+          lat: 40.141043
+        },
+        {
+          lon: 116.546097,
+          lat: 40.137875
+        },
+        {
+          lon: 116.537818,
+          lat: 40.138056
+        },
+        {
+          lon: 116.537725,
+          lat: 40.134348
+        }
+      ]
+
+      let cartesian3Positions = []
+      let minLon, maxLon, minLat, maxLat
+      lineData.forEach((item, index) => {
+        if (index === 0) {
+          minLon = item.lon
+          maxLon = item.lon
+          minLat = item.lat
+          maxLat = item.lat
+        } else {
+          minLon = Math.min(minLon, item.lon)
+          maxLon = Math.max(maxLon, item.lon)
+          minLat = Math.min(minLat, item.lat)
+          maxLat = Math.max(maxLat, item.lat)
+        }
+        cartesian3Positions.push(DT.Cesium.Cartesian3.fromDegrees(item.lon, item.lat))
+      })
+      let pathEntity = new DT.DirectionPath({
+        positions: cartesian3Positions,
+        dataFit: false,
+        // currentPosition:current,
+        autoStep: false,
+        equalsEpsilon: 0.01,
+        stepDistance: 30,
+        leadLineOption: {
+          width: 4,
+          dashLength: 20,
+          color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
+          image: process.env.BASE_URL + 'static/img/dash.png'
+        },
+        passLineOption: {
+          width: 4,
+          color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
+        },
+        labelConfig: {
+          font: '21pt Lucida Console',
+          horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+          outlineColor: DT.Cesium.Color.BLACK,
+          outlineWidth: 2,
+          pixelOffset: new DT.Cesium.Cartesian2(5, -4),
+          scale: 0.5,
+          show: true,
+          style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+          text: '无人机',
+          verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
+          disableDepthTestDistance: 10000
+        },
+        billboardConfig: {
+          image: process.env.BASE_URL + 'static/img/icon_wrj.png',
+          disableDepthTestDistance: 10000
+          // enableRotation: true
+        },
+        enableRepeatAdjust: false,
+      })
+      lodLayer.add(pathEntity)
+      // 适当扩大视角范围
+      let lonDiff = (maxLon - minLon) / 2
+      let latDiff = (maxLat - minLat) / 2
+      minLon -= lonDiff
+      maxLon += lonDiff
+      minLat -= latDiff
+      maxLat += latDiff
+
+      let boundingPosition = [
+        DT.Cesium.Cartesian3.fromDegrees(minLon, minLat),
+        DT.Cesium.Cartesian3.fromDegrees(minLon, maxLat),
+        DT.Cesium.Cartesian3.fromDegrees(maxLon, minLat),
+        DT.Cesium.Cartesian3.fromDegrees(maxLon, maxLat),
+      ]
+      // console.log('最小最大', minLon, maxLon, minLat, maxLat)
+      viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 })
+      this.addMarkPicture()
+    },
+    addMarkPicture() {
+      // const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({
+      //   url: "图片url",
+      // }));
+      let cby_bg_data = [
+        116.540165, 40.138266,
+        116.540190, 40.137485,
+        116.541745, 40.137458,
+        116.541714, 40.138282,
+
+
+      ];
+      let entity = viewer.entities.add({
+        id: 'picture-1',
+        name: '背景',
+        polygon: {
+          // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
+          hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
+          perPositionHeight: true,
+          material: new DT.Cesium.ImageMaterialProperty({
+            image: process.env.BASE_URL + 'static/img/pic.png',
+          }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
+          outline: true,
+          outlineColor: DT.Cesium.Color.WHITE,
+          outlineWidth: 2, //很多电脑当宽度>1时，没用
+        }
+      });
+      let markPosition = DT.Cesium.Cartesian3.fromDegrees(116.540265, 40.138066, 1)
+      let markArr = [
+        116.540265, 40.138066, 1,
+        116.540265, 40.137866, 1,
+        116.540845, 40.137866, 1,
+        116.540845, 40.138066, 1,
+        116.540265, 40.138066, 1,
+      ]
+      let markLine = viewer.entities.add({
+        id: 'picture-text-1',
+        show: false,
+        position: markPosition,
+        label: {
+          text: '标注点',
+          font: '12px sans-serif',
+          fillColor: DT.Cesium.Color.RED,
+          horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+          verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
+          disableDepthTestDistance: 10000,
+          showBackground: false,
+          backgroundColor: DT.Cesium.Color.BLACK,
+          style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+        },
+        polyline: {
+          positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
+          // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
+          width: 1,
+          material: DT.Cesium.Color.RED,
+          depthFailMaterial: DT.Cesium.Color.RED,
+          zIndex: 3,
+        }
+      })
+      linePicture['picture-1'] = {
+        picEntity: entity,
+        mark: markLine
+      }
+
+      let handler = new DT.Cesium.ScreenSpaceEventHandler(
+        viewer.cesiumViewer.scene.canvas
+      )
+      handler.setInputAction(({ position }) => {
+        let pick = viewer.cesiumViewer.scene.pick(position)
+        if (currentPicture) {
+          currentPicture.picEntity.polygon.outlineColor = DT.Cesium.Color.WHITE
+          currentPicture.picEntity.show = true
+          currentPicture.mark.show = false
+        }
+        currentPicture = null
+        if (pick && pick.id && pick.id.id && pick.id.id.indexOf('picture') !== -1) {
+          currentPicture = linePicture['picture-1']
+          currentPicture.picEntity.polygon.outlineColor = DT.Cesium.Color.RED
+          currentPicture.mark.show = true
+        } else {
+
+        }
+      }, DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+      handler.setInputAction(({ position }) => {
+        console.log('右键', currentPicture)
+        if (currentPicture) {
+          let show = !currentPicture.picEntity.show
+          console.log('触发显隐', show)
+          currentPicture.picEntity.show = show
+          currentPicture.mark.show = show
+          console.log('触发显隐', currentPicture.picEntity, currentPicture.mark)
+
+        }
+      }, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+
+    },
+    //#endregion
+
+    getResourceData() {
+      getRadarListData().then(res => {
+        if (res.data.code === 200) {
+          let data = res.data.data
+          data.forEach((item, index) => {
+            item.battery = 80
+            item.flyHeight = '-'
+            item.lon = '-'
+            item.lat = '-'
+          })
+          this.resourceList.data = data
+          console.log('雷达列表', res.data.data)
+        } else {
+          this.$message.error(res.data.message)
+        }
+      })
+      // getUavListData().then(res => {
+      //   if (res.data.code === 200) {
+      //     let data = res.data.data
+      //     data.forEach((item, index) => {
+      //       item.battery = 80
+      //       item.flyHeight = '-'
+      //       item.lon = '-'
+      //       item.lat = '-'
+      //     })
+      //     this.resourceList.data = data
+      //     console.log('无人机列表', res.data.data)
+      //   } else {
+      //     this.$message.error(res.data.message)
+      //   }
+      // })
+
+    },
+    /**
+     * 获取装备信号强度css类
+     * @param strength
+     * @returns {string}
+     */
+    getDeviceSignalClass(strength) {
+      if (strength < 20) {
+        return 'device-status__disconnect'
+      } else if (strength < 60) {
+        return 'device-status__weak'
+      } else {
+        return 'device-status__normal'
+      }
+    },
+    /**
+     * 车航程css
+     * @param value
+     * @returns {string}
+     */
+    getCarDistanceClass(value) {
+      if (value < 50) {
+        return 'battery-danger'
+      } else if (value < 200) {
+        return 'battery-weak'
+      } else {
+        return 'battery-normal'
+      }
+    },
+    /**
+     * 获取装备电池css类
+     * @param strength
+     * @returns {string}
+     */
+    getDeviceBatteryClass(strength) {
+      if (strength < 20) {
+        return 'battery-danger'
+      } else if (strength < 60) {
+        return 'battery-weak'
+      } else {
+        return 'battery-normal'
+      }
+    },
+    flyToTarget(lon, lat, alt = 1000) {
+      let longitude = parseFloat(lon)
+      let latitude = parseFloat(lat)
+      let height = parseFloat(alt)
+      if (typeof longitude === 'number' && typeof latitude === 'number') {
+        let position = DT.Cesium.Cartesian3.fromDegrees(longitude, latitude, height * 3)
+        viewer.cesiumViewer.scene.camera.flyTo({
+          destination: position,
+          duration: 1
+        })
+      }
+    },
+
+
+    /**
+     * 切换资源列表分组
+     * @param tab
+     */
+    resourceTabClick(tab) {
+      if (this.resourceList.activeTabId !== tab.id) {
+        this.resourceList.activeTabId = tab.id
+      }
+    },
+
+    //#region 无人机详情代码
+    resourceClick(info) {
+      console.log('点击的信息', info)
+      this.detailInfo.visible = false
+
+      // 直接显示详细信息窗口，跳过中间步骤
+      this.detailUav.id = info.id
+      this.detailUav.basicsInfo.name = info.name
+      this.detailUav.baseInfo.longitude = info.lon
+      this.detailUav.baseInfo.latitude = info.lat
+      this.detailUav.baseInfo.flyHeight = info.flyHeight
+      this.detailUav.visible = true
+
+      // TODO 测试
+      // this.resourceClickTest(info)
+      getTaskListData({ payloadId: info.id }).then(res => {
+        if (res.data.code === 200) {
+          console.log('任务详情----------------', res.data.data)
+          let tasklist = res.data.data
+          this.detailInfo.jobId = undefined
+          if (tasklist.length > 0) {
+            // 有正在执行的任务
+            // 判断当前任务是否显示
+            let findIndex = -1
+            taskListResource.forEach((item, index) => {
+              if (item.status === 1) {
+                item.uavList.forEach(uav => {
+                  let find = uav.payloadList.find(payload => payload.payloadId === info.id)
+                  if (find) {
+                    findIndex = index
+                  }
+                })
+              }
+            })
+            if (findIndex > -1) {
+              this.detailInfo.jobId = this.taskList.data[findIndex].id
+              if (!this.taskList.data[findIndex].check) {
+                // 打开任务信息
+                this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
+              }
+            }
+          } else {
+            // 没有正在执行的任务
+          }
+
+          this.detailInfo.baseInfo = JSON.parse(JSON.stringify(info))
+          this.detailInfo.taskList = tasklist
+          let pictureList = []
+          tasklist.forEach((item, index) => {
+            item.uavList.forEach(child => {
+              child.payloadList.forEach(loader => {
+                if (loader.payloadId === info.id) {
+                  loader.imageList.forEach(pic => {
+                    pictureList.push(Object.assign({
+                      jobId: item.id,
+                      url: window.config.imagePath + pic.relativePath,
+                      taskName: item.name,
+                      uavName: child.uavName,
+                      uavId: child.uavId,
+                      payloadId: loader.payloadId,
+                      loaderName: loader.payloadName,
+                      status: item.status + '',
+                    }, pic))
+                  })
+                }
+
+              })
+            })
+          })
+          this.detailInfo.pictureList = pictureList
+          //this.detailInfo.visible = true
+        } else {
+          this.$message.error(res.data.message)
+        }
+      })
+    },
+    showUavMore() {
+      console.log('_++++++++++++++++++', this.detailInfo.baseInfo)
+      this.detailUav.id = this.detailInfo.baseInfo.id
+      this.detailUav.basicsInfo.name = this.detailInfo.baseInfo.name
+      this.detailUav.baseInfo.longitude = this.detailInfo.baseInfo.lon
+      this.detailUav.baseInfo.latitude = this.detailInfo.baseInfo.lat
+      this.detailUav.baseInfo.flyHeight = this.detailInfo.baseInfo.flyHeight
+      this.detailUav.visible = true
+
+    },
+    lockHistoryPicture(data) {
+      console.log('跟踪图片', data)
+      if (data.status === '2') {
+        let id = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`
+        let target = historyPictureList[id]
+        if (!target) {
+          let cby_bg_data = [
+            data.left1Lon, data.left1Lat,
+            data.left2Lon, data.left2Lat,
+            data.right2Lon, data.right2Lat,
+            data.right1Lon, data.right1Lat,
+          ]
+          let entity = viewer.entities.add({
+            id: `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-history`,
+            name: '背景',
+            polygon: {
+              // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
+              hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
+              perPositionHeight: true,
+              material: new DT.Cesium.ImageMaterialProperty({
+                image: window.config.imagePath + data.relativePath,
+                // image: process.env.BASE_URL + 'static/img/ttt.tif',
+                // image: process.env.BASE_URL + 'static/img/pic.png',
+              }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
+              outline: true,
+              outlineColor: DT.Cesium.Color.WHITE,
+              outlineWidth: 2, //很多电脑当宽度>1时，没用
+            }
+          })
+          let markLineArr = [entity]
+          data.itemList.forEach((item) => {
+            let markId = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-${item.id}~mark`
+            let markPosition = DT.Cesium.Cartesian3.fromDegrees(item.left1Lon, item.left1Lat, 1)
+            let markArr = [
+              item.left1Lon, item.left1Lat, 1,
+              item.left2Lon, item.left2Lat, 1,
+              item.right2Lon, item.right2Lat, 1,
+              item.right1Lon, item.right1Lat, 1,
+              item.left1Lon, item.left1Lat, 1,
+            ]
+            let markLine = viewer.entities.add({
+              id: markId,
+              show: true,
+              position: markPosition,
+              label: {
+                text: this.detectType[item.type],
+                font: '12px sans-serif',
+                fillColor: DT.Cesium.Color.RED,
+                horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+                verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
+                disableDepthTestDistance: 10000,
+                showBackground: false,
+                backgroundColor: DT.Cesium.Color.BLACK,
+                style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+              },
+              polyline: {
+                positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
+                // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
+                width: 1,
+                material: DT.Cesium.Color.RED,
+                depthFailMaterial: DT.Cesium.Color.RED,
+                zIndex: 3,
+              }
+            })
+            markLineArr.push(markLine)
+            console.log('推进去的', markLine)
+          })
+          historyPictureList[`${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`] = markLineArr
+          console.log('最后生成的1', `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`)
+          console.log('最后生成的2', historyPictureList)
+        } else {
+          target.forEach(item => {
+            item.show = true
+          })
+        }
+      }
+      let boundingPosition = [
+        DT.Cesium.Cartesian3.fromDegrees(data.left1Lon, data.left1Lat),
+        DT.Cesium.Cartesian3.fromDegrees(data.left2Lon, data.left2Lat),
+        DT.Cesium.Cartesian3.fromDegrees(data.right2Lon, data.right2Lat),
+        DT.Cesium.Cartesian3.fromDegrees(data.right1Lon, data.right1Lat),
+      ]
+      // console.log('最小最大', minLon, maxLon, minLat, maxLat)
+      viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 })
+
+
+    },
+    toggleHistoryPicture(data) {
+      console.log('切换整体信息', data)
+      if (taskUavCollection[data.jobId]) {
+        let find = taskUavCollection[data.jobId].find(item => item.uavId + '' === data.uavId + '')
+        console.log('找到了无人机对象吗吗', find)
+        if (find) {
+          find.toggleLoaderPictureVisible(data.payloadId, data.fileId)
+        }
+      }
+      // if (data.status + '' === '2') {
+      //   let id = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`
+      //   let target = historyPictureList[id]
+      //   if (!target) {
+      //     let cby_bg_data=[
+      //       data.left1Lon, data.left1Lat,
+      //       data.left2Lon, data.left2Lat,
+      //       data.right2Lon, data.right2Lat,
+      //       data.right1Lon, data.right1Lat,
+      //     ]
+      //     let entity = viewer.entities.add({
+      //       id: `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-history`,
+      //       name: '背景',
+      //       polygon: {
+      //         // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
+      //         hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
+      //         perPositionHeight: true,
+      //         material: new DT.Cesium.ImageMaterialProperty({
+      //           image: window.config.imagePath + data.relativePath,
+      //           // image: process.env.BASE_URL + 'static/img/ttt.tif',
+      //           // image: process.env.BASE_URL + 'static/img/pic.png',
+      //         }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
+      //         outline: true,
+      //         outlineColor: DT.Cesium.Color.WHITE,
+      //         outlineWidth: 2, //很多电脑当宽度>1时，没用
+      //       }
+      //     })
+      //     let markLineArr = [entity]
+      //     data.itemList.forEach((item) => {
+      //       let markId = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-${item.id}~mark`
+      //       let markPosition = DT.Cesium.Cartesian3.fromDegrees(item.left1Lon, item.left1Lat, 1)
+      //       let markArr = [
+      //         item.left1Lon, item.left1Lat, 1,
+      //         item.left2Lon, item.left2Lat, 1,
+      //         item.right2Lon, item.right2Lat, 1,
+      //         item.right1Lon, item.right1Lat, 1,
+      //         item.left1Lon, item.left1Lat, 1,
+      //       ]
+      //       let markLine = viewer.entities.add({
+      //         id: markId,
+      //         show: true,
+      //         position: markPosition,
+      //         label: {
+      //           text: this.detectType[item.type],
+      //           font: '12px sans-serif',
+      //           fillColor: DT.Cesium.Color.RED,
+      //           horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+      //           verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
+      //           disableDepthTestDistance: 10000,
+      //           showBackground: false,
+      //           backgroundColor: DT.Cesium.Color.BLACK,
+      //           style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+      //         },
+      //         polyline: {
+      //           positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
+      //           // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
+      //           width: 1,
+      //           material: DT.Cesium.Color.RED,
+      //           depthFailMaterial: DT.Cesium.Color.RED,
+      //           zIndex: 3,
+      //         }
+      //       })
+      //       markLineArr.push(markLine)
+      //       console.log('推进去的', markLine)
+      //     })
+      //     historyPictureList[`${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`] = markLineArr
+      //     // console.log('最后生成的', target.picture[`${data.fileId}-picture`])
+      //   } else {
+      //     let show = !target[0].show
+      //     target.forEach(item => {
+      //       item.show = show
+      //     })
+      //   }
+      // } else if (data.status + '' === '1') {
+      //   console.log('切换有任务对象吗', taskUavCollection[data.jobId])
+      //   if (taskUavCollection[data.jobId]) {
+      //     let find = taskUavCollection[data.jobId].find(item => item.uavId + '' === data.uavId + '')
+      //     console.log('找到了无人机对象吗吗', find)
+      //     if (find) {
+      //       find.toggleLoaderPictureVisible(data.payloadId,data.fileId)
+      //     }
+      //   }
+      //   // let findId = `${data.jobId}-${data.uavId}`
+      //   // let find = renderTaskInfo[findId]
+      //   // let findShow = !find.picture[`${data.fileId}-picture`].pictureEntity.show
+      //   // find.picture[`${data.fileId}-picture`].pictureEntity.show = findShow
+      //   // find.picture[`${data.fileId}-picture`].markArr.forEach((item) => {
+      //   //   item.show = findShow
+      //   // })
+      // }
+    },
+    //#endregion
+
+
+    //#region tab通信相关代码
+    createBroadcastChannel() {
+      this.closeBroadcastChannel()
+      broadcastChannel = new BroadcastChannel('channel')
+      broadcastChannel.onmessage = this.handleChannelMessage;
+      broadcastChannelInterval = setInterval(() => {
+        this.sendMessageByBroadcastChannel({ type: 'heartbeat', form: 'home' })
+      }, 5000)
+    },
+    handleChannelMessage(data) {
+      console.log('home收到消息', data)
+      switch (data.data.type) {
+        case 'heartbeat':
+          let fromTab = data.data.from
+          let find = this.activeTabs.find(item => item.name === fromTab)
+          if (find) {
+            find.lastTime = new Date().getTime()
+          } else {
+            this.activeTabs.push({
+              name: fromTab,
+              lastTime: new Date().getTime(),
+            })
+          }
+          break
+        case 'viewMode':
+          console.log('收到viewmode消息')
+          if (this.viewMode !== data.data.value) {
+            this.SET_VIEW_MODE(data.data.value)
+          }
+          break
+        case 'showDayNight':
+          console.log('收到showDayNight消息')
+          if (this.showDayNight !== data.data.value) {
+            this.SET_DAY_NIGHT(data.data.value)
+          }
+          break
+        case 'showFrontier':
+          console.log('收到showFrontier消息')
+          if (this.showFrontier !== data.data.value) {
+            this.SET_FRONTIER(data.data.value)
+          }
+          break
+        case 'showLonLatGrid':
+          console.log('收到showLonLatGrid消息')
+          if (this.showLonLatGrid !== data.data.value) {
+            this.SET_LON_LAT_GRID(data.data.value)
+          }
+          break
+        case 'isFullscreen':
+          console.log('收到isFullscreen消息')
+          if (this.isFullscreen !== data.data.value) {
+            this.SET_FULL_SCREEN(data.data.value)
+          }
+          break
+        case 'mapType':
+          console.log('收到mapType消息')
+          if (this.mapType !== data.data.value) {
+            this.SET_MAP_TYPE(data.data.value)
+          }
+          break
+      }
+    },
+    sendMessageByBroadcastChannel(msg) {
+      if (broadcastChannel) {
+        broadcastChannel.postMessage(msg)
+      }
+    },
+    closeBroadcastChannel() {
+      if (broadcastChannel) {
+        broadcastChannel.close()
+        broadcastChannel = null
+      }
+      if (broadcastChannelInterval) {
+        window.clearInterval(broadcastChannelInterval)
+        broadcastChannelInterval = null
+      }
+    },
+    //#endregion
+
+    //#region 雷达
+    createRadar() {
+      let position = viewer.cesiumViewer.scene.camera.position.clone()
+      let position2 = DT.Cesium.Cartographic.fromCartesian(position)
+      let calHeight = Math.min(position2.height * 2, 1000000)
+      calHeight = Math.max(calHeight, 10000)
+      let radarPosition = DT.Cesium.Cartesian3.fromRadians(position2.longitude, position2.latitude, calHeight)
+      let tilingScheme, satMap, vectorMap, roadMap, arcgisMap
+      tilingScheme = new DT.Cesium.WebMercatorTilingScheme()
+      // 开发环境或者内网生产环境，访问内网地图服务
+
+      /******************天地图************************/
+      let token = window.config.tdtToken
+      // 服务域名
+      let tdtUrl = 'https://t{s}.tianditu.gov.cn/';
+      // 服务负载子域
+      let subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
+      let tdtImgMap = new DT.Cesium.UrlTemplateImageryProvider({
+        url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
+        subdomains: subdomains,
+        tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
+        maximumLevel: 18
+      });
+      let tdtVecMap = new DT.Cesium.UrlTemplateImageryProvider({
+        url: tdtUrl + 'DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
+        subdomains: subdomains,
+        tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
+        maximumLevel: 18
+      });
+      // 叠加国界服务
+      let tdtIboMap = new DT.Cesium.UrlTemplateImageryProvider({
+        url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
+        subdomains: subdomains,
+        tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
+        maximumLevel: 10
+      });
+      // 影像注记
+      let tdtImageMarkMap = new DT.Cesium.UrlTemplateImageryProvider({
+        url: tdtUrl + 'DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + token,
+        subdomains: subdomains,
+        tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
+        // maximumLevel : 10
+      });
+      // 叠加地形服务
+      let terrainUrls = new Array();
+      for (let i = 0; i < subdomains.length; i++) {
+        // let url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + token;
+        let url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token;
+        terrainUrls.push(url);
+      }
+      /**********************************************************/
+
+      /********************天地图另一种方式********************/
+      // 影像地图
+      let tdtImgMap2 = new DT.Cesium.WebMapTileServiceImageryProvider({
+        url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
+        layer: 'tdtImgLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        subdomains: subdomains,
+        tileMatrixSetID: 'GoogleMapsCompatible',
+        maximumLevel: 18
+      })
+      // 影像标记
+      let tdtImgMark2 = new DT.Cesium.WebMapTileServiceImageryProvider({
+        url: 'http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
+        layer: 'tdtCiaLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible',
+      })
+      // 矢量地图
+      let tdtVecMap2 = new DT.Cesium.WebMapTileServiceImageryProvider({
+        url: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
+        layer: 'tdtVecLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible'
+      })
+      // 矢量标注
+      let tdtVecMark2 = new DT.Cesium.WebMapTileServiceImageryProvider({
+        url: 'http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
+        layer: 'tdtCvaLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible',
+      })
+      /***************************************/
+
+      radarViewer = new DT.Viewer(this.$refs.radarCanvas, {
+        imageryProvider: tdtVecMap2, // tdtImgMap2
+        sceneMode: 2,
+        mapProjection: new DT.Cesium.WebMercatorProjection(),
+        mapMode2D: DT.Cesium.MapMode2D.INFINITE_SCROLL,
+      })
+      // 海图地图
+      let seaMap = new DT.Cesium.UrlTemplateImageryProvider({
+        url: process.env.BASE_URL + 'map/sea/{z}/{x}/{y}.png',
+        tilingScheme: tilingScheme,
+        minimumLevel: 2,
+        maximumLevel: 18
+      })
+      radarViewer.cesiumViewer.imageryLayers.addImageryProvider(seaMap, 1)
+      // viewer.cesiumViewer.imageryLayers.get(4).show = false
+      // radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtImgMark2, 1)
+      // radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtVecMap2, 2)
+      radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtVecMark2, 1)
+      // radarViewer.cesiumViewer.imageryLayers.get(2).show = false
+      // radarViewer.cesiumViewer.imageryLayers.get(3).show = false
+
+      let vtxf_dpr = window.devicePixelRatio
+      while (vtxf_dpr >= 2.0) {
+        vtxf_dpr /= 2.0
+      }
+      radarViewer.cesiumViewer.resolutionScale = vtxf_dpr
+      radarLayer = new DT.LODSceneLayer()
+      radarViewer.addLayer(radarLayer)
+      // radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableTranslate = false
+      // radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableRotate = false
+      // radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableZoom = false
+      // radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableTilt = false
+      // radarViewer.cesiumViewer.scene.screenSpaceCameraController.tiltEventTypes = []
+      // 去掉版权
+      radarViewer.cesiumViewer._innerCreditContainer.style.display = 'none'
+      radarViewer.cesiumViewer.scene.camera.flyTo({
+        destination: radarPosition,
+        duration: 0
+      })
+      radarHandler = new DT.Cesium.ScreenSpaceEventHandler(
+        radarViewer.cesiumViewer.scene.canvas
+      )
+      this.$nextTick(() => {
+        this.refreshRadar()
+      })
+      // radarHandler.setInputAction(event => {
+      //   let car = radarViewer.cesiumViewer.scene.globe.pick(radarViewer.cesiumViewer.scene.camera.getPickRay(event.position),radarViewer.cesiumViewer.scene);
+      //   let updateCartographic = DT.Cesium.Cartographic.fromCartesian(car)
+      //   let sourceCamera = DT.Cesium.Cartographic.fromCartesian(viewer.cesiumViewer.scene.camera.position.clone())
+      //   viewer.cesiumViewer.scene.camera.flyTo({
+      //     destination: DT.Cesium.Cartesian3.fromRadians(updateCartographic.longitude, updateCartographic.latitude, sourceCamera.height),
+      //     duration: 1
+      //   })
+      // }, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+    refreshRadar() {
+      if (!radarViewer) return
+      let position = viewer.cesiumViewer.scene.camera.position.clone()
+      // let rayCross = viewer.cesiumViewer.scene.camera.position.clone()
+      // let ray = new DT.Cesium.Ray(viewer.cesiumViewer.scene.camera.position, viewer.cesiumViewer.scene.camera.direction )
+      // if (ray) {
+      //   let rayCrossTemp = viewer.cesiumViewer.scene.globe.pick(ray, viewer.cesiumViewer.scene)
+      //   if (rayCrossTemp) {
+      //     rayCross = rayCrossTemp
+      //     console.log('焦点-----------------', rayCross)
+      //   }
+      // }
+      let position2 = DT.Cesium.Cartographic.fromCartesian(position)
+      // let position3 = DT.Cesium.Cartographic.fromCartesian(rayCross)
+      let calHeight = Math.min(position2.height * 2, 10000000)
+      // let calHeight = position2.height * 2
+      calHeight = Math.max(calHeight, 1000)
+      let radarPosition = DT.Cesium.Cartesian3.fromRadians(position2.longitude, position2.latitude, calHeight)
+      radarViewer.cesiumViewer.scene.camera.flyTo({
+        destination: radarPosition,
+        duration: 1
+      })
+    },
+    dealMapChange(map) {
+      return
+      switch (map) {
+        case 'sat':
+          // viewer.cesiumViewer.camera.flyHome()
+          radarViewer.cesiumViewer.imageryLayers.get(0).show = true
+          radarViewer.cesiumViewer.imageryLayers.get(1).show = true
+          radarViewer.cesiumViewer.imageryLayers.get(2).show = false
+          radarViewer.cesiumViewer.imageryLayers.get(3).show = false
+          break
+        case 'vec':
+          radarViewer.cesiumViewer.imageryLayers.get(0).show = false
+          radarViewer.cesiumViewer.imageryLayers.get(1).show = false
+          radarViewer.cesiumViewer.imageryLayers.get(2).show = true
+          radarViewer.cesiumViewer.imageryLayers.get(3).show = true
+          break
+
+      }
+    },
+    //#endregion
+
+
+    //#region socket
+    createWebsocket() {
+      let options = {
+        url: window.config.socket + '/ws',
+        topic: [
+          {
+            name: '/topic/status',
+            callback: this.handleWebsocketStatus
+          },
+          {
+            name: '/topic/wave',
+            callback: this.handleWebsocketWave
+          },
+          {
+            name: '/topic/image',
+            callback: this.handleWebsocketImage
+          },
+          {
+            name: '/topic/jobStatus',
+            callback: this.handleWebsocketState
+          },
+        ],
+        success: () => {
+          console.log('自身websocket链接成功2')
+        }
+      }
+      let { socket, stompClient } = connectWebSocket(options)
+      socketInstance = socket
+      stompClientInstance = stompClient
+    },
+    handleWebsocketStatus(info) {
+      // console.log('SAR状态信息', info.body)
+      let data = JSON.parse(info.body)
+      // console.log('SAR状态信息',data)
+      data.forEach(item => {
+        // 更新场景无人机位置和轨迹
+        if (item.jobId && item.payloadList && item.payloadList[0].connected) {
+          // 有任务
+          // 更新任务路线
+          if (taskUavCollection[item.jobId]) {
+            let find = taskUavCollection[item.jobId].find(child => child.uavId + '' === item.uavId + '')
+            if (find) {
+              let position = DT.Cesium.Cartesian3.fromDegrees(item.payloadList[0].longitude, item.payloadList[0].latitude, item.payloadList[0].altitude)
+              find.updateCurrentPosition(position)
+            }
+          }
+          // 位置信息更新到列表
+          let findTask = taskListResource.find(item => item.jobId === item.jobId)
+          if (findTask) {
+            let uav = findTask.uavList.find(uav => uav.uavId === item.uavId)
+            uav.trailList.push({
+              lon: item.payloadList[0].longitude,
+              lat: item.payloadList[0].latitude,
+              height: item.payloadList[0].altitude
+            })
+          }
+        } else {
+          // 无任务
+        }
+        // 更新资源列表设备状态
+        item.payloadList.forEach(child => {
+          let find = this.resourceList.data.find(el => el.id === child.sarId)
+          if (find) {
+            let position = DT.Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, item.payloadList[0].altitude)
+            find.lon = child.longitude.toFixed(2)
+            find.lat = child.latitude.toFixed(2)
+            find.flyHeight = Math.round(child.altitude * 10) / 10
+            find.status = child.connected
+            if (find.status) {
+              this.updateRadarSceneEntityPosition(find.name, child.sarId, position, child.connected)
+              this.updateSceneEntityPosition(find.name, child.sarId, position, child.connected)
+            }
+
+          }
+          // 更新详情
+          if (find && find.status && this.detailInfo.visible && this.detailInfo.id === child.sarId) {
+            this.detailInfo.baseInfo.lon = child.longitude.toFixed(2)
+            this.detailInfo.baseInfo.lat = child.latitude.toFixed(2)
+            this.detailInfo.baseInfo.flyHeight = Math.round(child.altitude * 10) / 10
+
+          }
+          // 更新无人机详细数据
+          if (find && find.status && this.detailUav.visible && this.detailUav.id === child.sarId) {
+            this.updateUavInfo(child)
+          }
+        })
+      })
+    },
+    updateUavInfo(data) {
+      this.detailUav.baseInfo.flyHeight = Math.round(data.altitude * 10) / 10
+      this.detailUav.baseInfo.longitude = data.longitude.toFixed(3)
+      this.detailUav.baseInfo.latitude = data.latitude.toFixed(3)
+      this.detailUav.baseInfo.status = data.connected
+      this.detailUav.statusInfo.dev = [
+        { name: '是否开机', value: this.sarWorkStatus[data.dIsBoot], unit: '' },
+        { name: '时钟锁定', value: this.successStatus[data.clockLock], unit: '' },
+        { name: 'GPU温度', value: '正常', unit: '' },
+        { name: 'CPU温度', value: data.cpuC, unit: '℃' },
+        { name: '射频温度', value: data.rfC, unit: '℃' },
+        { name: '天线温度', value: data.antC, unit: '℃' },
+        { name: '硬盘温度', value: data.diskC, unit: '℃' },
+        { name: 'FPGA温度', value: data.fpgaC, unit: '℃' },
+        { name: '硬盘容量', value: data.diskUtilization, unit: '%' },
+        { name: '内存容量', value: data.memoryCapacity, unit: 'MB' },
+      ]
+      this.detailUav.statusInfo.gps = [
+        { name: '定位状态', value: '正常', unit: '' },
+        { name: '定向状态', value: '正常', unit: '' },
+        { name: 'rtk状态', value: data.rtkStatusLabel, unit: '' },
+        { name: '卫星个数', value: data.satelliteNum, unit: '' },
+        { name: '惯导状态', value: this.imuStatus[data.imuStatus], unit: '' },
+        { name: '年月日', value: data.date, unit: '' },
+        { name: '经度', value: data.longitude, unit: '°' },
+        { name: '维度', value: data.latitude, unit: '°' },
+        { name: '高度', value: data.altitude, unit: 'm' },
+      ]
+      this.detailUav.statusInfo.imu = [
+        { name: '配置状态', value: '正常', unit: '' },
+        { name: '天线方位角', value: data.antennaAzimuth, unit: '°' },
+        { name: '天线俯仰角', value: data.antennaPitch, unit: '°' },
+        { name: '东向速度', value: data.eastVelocity, unit: 'm/s' },
+        { name: '北向速度', value: data.northVelocity, unit: 'm/s' },
+        { name: '天向速度', value: data.skyVelocity, unit: 'm/s' },
+        { name: '俯仰角', value: data.anglePitch, unit: '°' },
+        { name: '翻转角', value: data.angleRoll, unit: '°' },
+        { name: '偏航角', value: data.angleYaw, unit: '°' },
+      ]
+      // 更新场景中数据
+      // this.updateSceneUav(data)
+    },
+    updateSceneUav(data) {
+      let position = DT.Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.altitude)
+      let entity = viewer.entities.getById('uav-' + data.id)
+      if (entity) {
+        entity.position = position
+      } else {
+        entity = viewer.entities.add({
+          id: 'uav-' + data.id,
+          position: position,
+          label: {
+            text: '无人机' + data.id,
+            horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+            outlineColor: DT.Cesium.Color.BLACK,
+            outlineWidth: 2,
+            pixelOffset: new DT.Cesium.Cartesian2(5, -4),
+            disableDepthTestDistance: 10000
+          },
+          billboard: {
+            image: process.env.BASE_URL + 'static/img/icon_wrj.png',
+            disableDepthTestDistance: 10000
+          }
+        })
+      }
+    },
+    handleWebsocketWave(info) {
+      console.log('SAR波形', JSON.parse(info.body))
+      let data = JSON.parse(info.body)
+      if (this.detailUav.visible && this.detailUav.id === data.payloadId) {
+        let channel1False = []
+        let channel1Real = []
+        let channel2False = []
+        let channel2Real = []
+        data.channel1False.forEach((item, index) => {
+          channel1False.push([index, item / 32768])
+        })
+        data.channel1Real.forEach((item, index) => {
+          channel1Real.push([index, item / 32768])
+        })
+        data.channel2False.forEach((item, index) => {
+          channel2False.push([index, item / 32768])
+        })
+        data.channel2Real.forEach((item, index) => {
+          channel2Real.push([index, item / 32768])
+        })
+        this.detailUav.chart.data[0].data = channel1False
+        this.detailUav.chart.data[1].data = channel1Real
+        this.detailUav.chart.data[2].data = channel2False
+        this.detailUav.chart.data[3].data = channel2Real
+        if (this.detailUav.activeNames.includes('4')) {
+          if (this.$refs.uavDetailChart) {
+            this.$refs.uavDetailChart.updateData(this.detailUav.chart.data)
+          }
+        }
+      }
+    },
+    handleWebsocketImage(info) {
+      // console.log('SAR图像', info.body)
+      let data = JSON.parse(info.body)
+      console.log('SAR图像2', data)
+      // this.addMarkPicture2(data)
+      // console.log('灭有匹配到吗taskUavCollection', taskUavCollection, taskUavCollection[data.jobId])
+      if (taskUavCollection[data.jobId]) {
+        let find = taskUavCollection[data.jobId].find(item => item.uavId + '' === data.uavId + '')
+        // console.log('找到添加图片的对象', find)
+        if (find) {
+          find.appendLoaderPicture(data)
+        }
+      }
+      // 更新列表里的数据
+      let find = taskListResource.find(item => item.id === data.jobId)
+      if (find) {
+        let findUav = find.uavList.find(item => item.uavId === data.uavId)
+        // TODO 需要匹配载荷ID
+        if (findUav && findUav.payloadList && findUav.payloadList.length > 0) {
+          let findIndex = findUav.payloadList[0].imageList.findIndex(target => target.airlineId === data.airlineId)
+          if (findIndex > -1) {
+            findUav.payloadList[0].imageList.splice(findIndex, 1, data)
+          } else {
+            findUav.payloadList[0].imageList.unshift(data)
+          }
+        }
+      }
+      if (this.detailInfo.visible && this.detailInfo.baseInfo.id === data.payloadId) {
+        let findIndex = this.detailInfo.pictureList.findIndex(target => target.airlineId === data.airlineId)
+        let obj = Object.assign({
+          jobId: data.jobId,
+          url: window.config.imagePath + data.relativePath,
+          taskName: data.jobName,
+          uavName: data.uavName,
+          uavId: data.uavId,
+          payloadId: data.payloadId,
+          loaderName: data.payloadName,
+          airlineId: data.airlineId,
+        }, data)
+        if (findIndex > -1) {
+          this.detailInfo.pictureList.splice(findIndex, 1, obj)
+        } else {
+          this.detailInfo.pictureList.unshift(obj)
+        }
+      }
+
+    },
+    addMarkPicture2(data) {
+      // const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({
+      //   url: "图片url",
+      // }));
+      // if (this.tempAdd) return
+      // this.tempAdd = true
+      let id = `${data.jobId}-${data.uavId}`
+      let target = renderTaskInfo[id]
+      if (target) {
+        let cby_bg_data = [
+          data.left1Lon, data.left1Lat,
+          data.left2Lon, data.left2Lat,
+          data.right2Lon, data.right2Lat,
+          data.right1Lon, data.right1Lat,
+        ]
+        let entity = viewer.entities.add({
+          id: `${data.jobId}-${data.uavId}~${data.fileId}-picture`,
+          name: '背景',
+          polygon: {
+            // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
+            hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
+            perPositionHeight: true,
+            material: new DT.Cesium.ImageMaterialProperty({
+              image: window.config.imagePath + data.relativePath,
+              // image: process.env.BASE_URL + 'static/img/ttt.tif',
+              // image: process.env.BASE_URL + 'static/img/pic.png',
+            }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
+            outline: true,
+            outlineColor: DT.Cesium.Color.WHITE,
+            outlineWidth: 2, //很多电脑当宽度>1时，没用
+          }
+        })
+        let markLineArr = []
+        if (data.itemList) {
+          data.itemList.forEach((item) => {
+            let markId = `${data.jobId}-${data.uavId}-${data.fileId}-${item.id}~mark`
+            let markPosition = DT.Cesium.Cartesian3.fromDegrees(item.left1Lon, item.left1Lat, 1)
+            let markArr = [
+              item.left1Lon, item.left1Lat, 1,
+              item.left2Lon, item.left2Lat, 1,
+              item.right2Lon, item.right2Lat, 1,
+              item.right1Lon, item.right1Lat, 1,
+              item.left1Lon, item.left1Lat, 1,
+            ]
+            let markLine = viewer.entities.add({
+              id: markId,
+              show: false,
+              position: markPosition,
+              label: {
+                text: this.detectType[item.type],
+                font: '12px sans-serif',
+                fillColor: DT.Cesium.Color.RED,
+                horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+                verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
+                disableDepthTestDistance: 10000,
+                showBackground: false,
+                backgroundColor: DT.Cesium.Color.BLACK,
+                style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+              },
+              polyline: {
+                positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
+                // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
+                width: 1,
+                material: DT.Cesium.Color.RED,
+                depthFailMaterial: DT.Cesium.Color.RED,
+                zIndex: 3,
+              }
+            })
+            markLineArr.push(markLine)
+          })
+        }
+        target.picture[`${data.fileId}-picture`] = {
+          pictureEntity: entity,
+          markArr: markLineArr
+        }
+      }
+    },
+    addPictureHandle() {
+      console.log('双击事件执行了吗', new Date().getTime())
+      if (pictureHandler) {
+        this.removePictureHandle()
+      }
+      pictureHandler = new DT.Cesium.ScreenSpaceEventHandler(
+        viewer.cesiumViewer.scene.canvas
+      )
+      pictureHandler.setInputAction(({ position }) => {
+        let pick = viewer.cesiumViewer.scene.pick(position)
+        console.log('双击前有吗', currentPicture)
+        if (currentPicture) {
+          currentPicture.uav.toggleLoaderPictureActive(
+            currentPicture.payloadId,
+            currentPicture.filedId,
+            false
+          )
+        }
+        currentPicture = null
+        if (pick && pick.id && pick.id.id && pick.id.id.indexOf('picture') !== -1) {
+          let findIdArr = pick.id.id.split('-')[0].split('~')
+          if (taskUavCollection[findIdArr[0]]) {
+
+            let uav = taskUavCollection[findIdArr[0]].find(item => item.uavId + '' === findIdArr[1])
+            if (uav) {
+              currentPicture = {
+                uav: uav,
+                jobId: findIdArr[0],
+                uavId: findIdArr[1],
+                payloadId: findIdArr[2],
+                filedId: findIdArr[3],
+              }
+              currentPicture.uav.toggleLoaderPictureActive(
+                currentPicture.payloadId,
+                currentPicture.filedId,
+                true
+              )
+            }
+
+          }
+        } else {
+        }
+      }, DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+      pictureHandler.setInputAction(({ position }) => {
+        console.log('右键', currentPicture)
+        if (currentPicture) {
+          currentPicture.uav.toggleLoaderPictureVisible(currentPicture.payloadId, currentPicture.filedId)
+        }
+      }, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+
+    },
+    removePictureHandle() {
+      if (pictureHandler) {
+        pictureHandler.removeInputAction(DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+        pictureHandler.removeInputAction(DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+        pictureHandler = null
+      }
+    },
+    handleWebsocketState(info) {
+      console.log('整体状态变更', JSON.parse(info.body))
+      let data = JSON.parse(info.body)
+      // TODO 待测试
+      // airlineId  airlineStatus jobId  jobStatus  payloadStatus payloadId  uavId
+      let findIndex = this.taskList.data.findIndex(item => item.id === data.jobId)
+      if (findIndex !== -1) {
+        // 从未执行到准备中
+        if (this.taskList.data[findIndex].status === 0 && data.jobStatus === 1) {
+          // this.taskList.data[findIndex].check = true
+          this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
+          taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
+          this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
+        }
+        // 从准备中到执行中
+        if (this.taskList.data[findIndex].status === 3 && data.jobStatus === 1) {
+          // this.taskList.data[findIndex].check = true
+          this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
+          taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
+          // this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
+        }
+        if (this.taskList.data[findIndex].status === 2 && data.jobStatus === 1) {
+          // this.taskList.data[findIndex].check = true
+          // this.taskList.data[findIndex].statusName = '执行中'
+          // taskListResource[findIndex].statusName = '执行中'
+          // this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
+        }
+
+        // 从执行中变为执行完毕
+        if (this.taskList.data[findIndex].status === 1 && data.jobStatus === 2) {
+          // 移除任务相关信息
+          console.log('任务变更', this.jobStatus, this.jobStatus[data.jobStatus + ''])
+          this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
+          taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
+        }
+        this.taskList.data[findIndex].status = data.jobStatus
+        taskListResource[findIndex].status = data.jobStatus
+        console.log('整体状态变更1', findIndex, this.taskList.data[findIndex])
+      }
+    },
+
+    handleWebsocket(res) {
+      let data = JSON.parse(res.body)
+      console.log('websocket数据66666', data)
+      this.updatePeople(data)
+    },
+    stopTempWebSocket() {
+      if (socketInstance) {
+        disconnectWebSocket(socketInstance)
+        socketInstance = null
+        stompClientInstance = null
+      }
+    },
+    updatePeople(data) {
+      let entity = lodLayer.getEntityById(data.userid)
+      let updatePosition = DT.Cesium.Cartesian3.fromDegrees(
+        data.lon,
+        data.lat,
+        Math.min(data.high, 1000)
+      )
+      if (entity) {
+        entity.position = updatePosition
+      } else {
+        entity = new DT.BillboardEntity({
+          id: data.userid,
+          position: updatePosition,
+          labelConfig: {
+            text: data.username,
+            font: '12px Microsoft YaHei',
+            verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
+            outlineColor: DT.Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+            pixelOffset: new DT.Cesium.Cartesian2(10, 0),
+            // distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(
+            //   0,
+            //   10000000
+            // )
+          },
+          billboardConfig: {
+            image: process.env.BASE_URL + 'data/images/people.png',
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            width: 24,
+            height: 24
+          }
+        })
+        lodLayer.add(entity)
+        entityCollection.set(data.userid, entity)
+      }
+    },
+    //#endregion
+
+
+    //#region
+    handleUavDetailCollapse(actives) {
+      console.log('展开的', actives)
+      if (actives.includes('4')) {
+        if (this.$refs.uavDetailChart) {
+          this.$nextTick(() => {
+            this.$refs.uavDetailChart.chartInstance.resize()
+          })
+        }
+      }
+    },
+    //#endregion
+
+
+    //#region 航线详情
+    openTaskLineDetail(info) {
+      this.taskLineDetail.visible = false
+      let find = taskListResource.find(item => item.id === info.id)
+
+      console.log('信息', find)
+      if (find && find.uavList) {
+        let line = []
+        find.uavList.forEach(item => {
+          if (item.airlineList) {
+            item.airlineList.forEach(airline => {
+              line.push({
+                startLon: airline.startLon,
+                startLat: airline.startLat,
+                startHeight: airline.startHeight,
+                startAlt: airline.startHeight + item.startAltitude,
+                endLon: airline.endLon,
+                endLat: airline.endLat,
+                endHeight: airline.endHeight,
+                endAlt: airline.endHeight + item.startAltitude,
+              })
+            })
+          }
+        })
+        this.taskLineDetail.title = find.name + '-航线详情'
+        this.taskLineDetail.data = line
+        this.taskLineDetail.visible = true
+      }
+    }
+    //#endregion
+  }
+}
diff --git a/frontend/src/views/home/components/device-manage/index.scss b/frontend/src/views/home/components/device-manage/index.scss
new file mode 100644
index 0000000..24b6bc8
--- /dev/null
+++ b/frontend/src/views/home/components/device-manage/index.scss
@@ -0,0 +1,1479 @@
+@import '~@/styles/variables.scss';
+
+.twin-situation {
+  //width: 100%;
+  //height: 100%;
+  //font-size: 40px;
+  position: relative;
+
+  .card-position {
+    position: absolute;
+    top: 85px;
+    left: 50px;
+    height: calc(100vh - 248px);
+    transition: 0.2s ease-in-out;
+  }
+
+  .card-position2 {
+    position: absolute;
+    top: 85px;
+    right: 10px;
+    width: 300px;
+    height: calc(100vh - 218px);
+    transition: 0.2s ease-in-out;
+  }
+  .resource-list {
+    width: 460px;
+    position: fixed;
+    top: 85px;
+    left: 50px;
+    height: calc(50vh - 48px);
+    transition: 0.2s ease-in-out;
+    .resource-list__header {
+      height: 36px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      box-sizing: border-box;
+      .group-list {
+        width: calc(100% - 40px);
+        height: 100%;
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+        overflow-x: auto;
+        justify-content: flex-start;
+        >span {
+          flex: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          box-sizing: border-box;
+          padding: 0 8px;
+          color: $--color-text-1;
+          cursor: pointer;
+          background-color: $--color-black-5;
+          border-radius: 2px;
+          margin-right: 5px;
+          transition: all 0.2s ease-in-out;
+          >i {
+            font-size: 14px;
+            color: $--color-text-1;
+            cursor: pointer;
+            margin-left: 8px;
+            transition: all 0.2s ease-in-out;
+          }
+        }
+        .active-tab {
+          color: $--color-primary;
+          >i {
+            color: $--color-primary;
+          }
+        }
+      }
+      .right-icon {
+        height: 100%;
+        width: 36px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        >i {
+          font-size: 18px;
+          color: $--color-text-1;
+          cursor: pointer;
+        }
+      }
+    }
+    .resource-list__content {
+      height: calc(50vh - 136px);
+      width: 100%;
+      overflow-y: auto;
+      position: relative;
+      .resource-item {
+        width: 100%;
+        height: 40px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: rgb(13, 52, 72);
+        margin: 5px 0;
+        padding: 0 5px;
+        box-sizing: border-box;
+        >.icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 20px;
+          height: 20px;
+          margin: 0 6px;
+          border-radius: 50%;
+          border: 1px solid $--color-text-1;
+          box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
+          0 0 6px rgba(250, 250, 250, 0.6),
+          0 0 14px rgba(250, 250, 250, 0.3);
+          >i {
+            color: $--color-text-1;
+            font-size: 12px;
+          }
+        }
+        >.device-name {
+          display: inline-block;
+          width: 110px;
+          height: 40px;
+          text-align: left;
+          line-height: 40px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: $--color-text-1;
+        }
+        .battery {
+          color: $--color-text-1;
+          font-size: 14px;
+          width: 70px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          >i {
+            color: $--color-text-1;
+            font-size: 16px;
+            margin-right: 2px;
+          }
+          &-normal {
+            color: #18da2e;
+            >i {
+              color: #18da2e;
+            }
+          }
+          &-weak {
+            color: #f59a23;
+            >i {
+              color: #f59a23;
+            }
+          }
+          &-danger {
+            color: #d9001b;
+            >i {
+              color: #d9001b;
+            }
+          }
+        }
+        .fly-height {
+          color: $--color-text-1;
+          font-size: 14px;
+          display: flex;
+          justify-content: flex-start;
+          width: 70px;
+          >i {
+            color: #18da2e;
+            font-size: 14px;
+            margin-right: 4px;
+          }
+        }
+        .device-location {
+          color: $--color-text-1;
+          font-size: 14px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex: 1;
+          >i {
+            color: #d9001b;
+            font-size: 16px;
+            margin-right: 2px;
+          }
+        }
+        .device-lock {
+          font-size: 18px;
+          color: #ffff00;
+          cursor: pointer;
+        }
+      }
+
+      .device-status {
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        border-radius: 50%;
+        background: #d9001b;
+        //&__normal {
+        //  background: #95f204;
+        //}
+        //&__weak {
+        //  background: #f59a23;
+        //}
+        &__online {
+          background: #95f204;
+        }
+      }
+
+      .team-header {
+        background: rgb(13, 52, 72);
+        margin: 5px 0;
+        width: 100%;
+        height: 40px;
+        padding: 0 5px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        >.icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 20px;
+          height: 20px;
+          margin: 0 6px;
+          border-radius: 50%;
+          border: 1px solid #a45d35;
+          box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+          0 0 10px rgba(164, 93, 53, 0.6),
+          0 0 20px rgba(164, 93, 53, 0.3);
+          >i {
+            color: $--color-text-1;
+            font-size: 12px;
+          }
+        }
+        >.team-name {
+          display: inline-block;
+          flex: 1;
+          height: 40px;
+          text-align: left;
+          line-height: 40px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: $--color-text-1;
+        }
+        .team-command {
+          >i {
+            color: $--color-text-1;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.2s ease-in-out;
+            &:hover {
+              color: $--color-primary;
+            }
+          }
+        }
+      }
+      .team-item {
+        >div {
+          background: rgb(13, 52, 72);
+          margin: 5px 0;
+          padding: 0 5px 0 15px;
+          box-sizing: border-box;
+        }
+        .uav-item .device-name {
+          width: 100px;
+        }
+        .people-item .people-name {
+          width: 170px;
+        }
+        .rescue-item .car-name {
+          width: 100px;
+        }
+        .fire-item .car-name {
+          width: 100px;
+        }
+      }
+    }
+  }
+  .resource-list__large {
+    height: calc(50vh - 57px);
+    left: $--icon-mode-larger-card-left;
+    top: $--icon-mode-larger-card-top;
+    transition: 0.2s ease-in-out;
+  }
+  .task-list-wrap {
+    width: 480px;
+    position: fixed;
+    bottom: 5px;
+    left: 50px;
+  }
+  .task-list {
+    width: 460px;
+    position: fixed;
+    bottom: 5px;
+    left: 50px;
+    height: calc(50vh - 48px);
+    transition: 0.2s ease-in-out;
+
+    .task-list__content {
+      height: calc(50vh - 98px);
+      position: relative;
+      width: 100%;
+      padding-right: 5px;
+      box-sizing: border-box;
+      overflow-y: auto;
+
+    }
+    .task-item {
+      height: 40px;
+      box-sizing: border-box;
+      width: 100%;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 8px 0;
+      .left-part {
+        padding: 0 8px;
+        background: #333333;
+        border-radius: 4px;
+        flex: 1;
+        height: 100%;
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .task-progress-bar {
+          position: absolute;
+          height: 100%;
+          left: 0;
+          top: 0;
+          border-radius: 4px;
+          background: #43522c;
+          //z-index: -1;
+        }
+        .execute-info {
+          z-index: 1;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          width: 150px;
+
+          .execute-type-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            margin-right: 4px;
+            border: 1px solid $--color-text-1;
+            >i {
+              color: $--color-text-1;
+              font-size: 12px;
+            }
+          }
+          .execute-state-0 {
+            border: 1px solid #a45d35;
+            box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+            0 0 10px rgba(164, 93, 53, 0.6),
+            0 0 20px rgba(164, 93, 53, 0.3);
+          }
+          .execute-state-1 {
+            border: 1px solid #39cf0b;
+            box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
+            0 0 10px rgba(17, 172, 38, 0.6),
+            0 0 20px rgba(17, 172, 38, 0.3);
+          }
+          .execute-state-2 {
+            border: 1px solid $--color-text-1;
+            box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
+            0 0 6px rgba(250, 250, 250, 0.6),
+            0 0 14px rgba(250, 250, 250, 0.3);
+          }
+          .execute-state-3 {
+            border: 1px solid #a45d35;
+            box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+            0 0 10px rgba(164, 93, 53, 0.6),
+            0 0 20px rgba(164, 93, 53, 0.3);
+          }
+          .execute-state-4 {
+            border: 1px solid #893654;
+            box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
+            0 0 10px rgba(137, 54, 84, 0.6),
+            0 0 20px rgba(137, 54, 84, 0.3);
+          }
+          .execute-state-5 {
+            border: 1px solid #681c1f;
+            box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
+            0 0 10px rgba(104, 28, 31, 0.6),
+            0 0 20px rgba(104, 28, 31, 0.3);
+          }
+          .task-execute {
+            color: $--color-text-1;
+            font-size: 14px;
+            width: 125px;
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+
+          }
+        }
+        .task-info {
+          z-index: 1;
+          width: 50px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          >i {
+            font-size: 16px;
+            color: #07e5e5;
+            margin-right: 6px;
+          }
+          >span {
+            color: $--color-orange;
+          }
+          .task-name {
+            color: $--color-text-1;
+            font-size: 14px;
+            margin-right: 2px;
+          }
+          .task-finish {
+            color: $--color-green;
+          }
+        }
+        .task-time {
+          z-index: 1;
+          color: $--color-text-1;
+        }
+      }
+      .right-part {
+        width: 40px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        >i {
+          font-size: 14px;
+          cursor: pointer;
+          margin: 2px 0;
+        }
+        .edit-task {
+          color: #ffff00;
+        }
+        .delete-task {
+          color: $--color-red;
+        }
+      }
+    }
+  }
+  .task-list__large {
+    height: calc(50vh - 57px);
+    left: $--icon-mode-larger-card-left;
+    bottom: 5px;
+    transition: 0.2s ease-in-out;
+  }
+
+  .weather-info-wrap {
+    width: 480px;
+    position: fixed;
+    top: 85px;
+    right: 10px;
+    height: 240px; // 240
+  }
+  .weather-info {
+    width: 460px;
+    height: 240px; // 240
+    transition: 0.2s ease-in-out;
+    ::v-deep .dt-card__content {
+      padding: 0;
+    }
+    .weather-info__content {
+      position: relative;
+      box-sizing: border-box;
+      padding: 4px 10px;
+    }
+    .base-info {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 6px;
+      .base-warning {
+        flex: 1;
+        color: $--color-orange;
+        font-size: 12px;
+      }
+      .base-des {
+        color:$--color-green;
+        font-size: 12px;
+        width: 120px;
+        >span {
+          color:$--color-text-2;
+          font-size: 12px;
+        }
+      }
+    }
+    .visibility-chart-title {
+      color: $--color-text-3;
+      font-size: 12px;
+
+    }
+    .visibility-chart {
+      height: 50px;
+      //background: #02a7f0;
+      padding: 0 6px;
+      box-sizing: border-box;
+    }
+    .hour-forecast {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      margin-bottom: 4px;
+      .hour-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        >div {
+          color: $--color-text-1;
+          font-size: 12px;
+        }
+      }
+    }
+    .wind-forecast{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      margin-bottom: 4px;
+      .wind-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        >div {
+          color: $--color-text-3;
+          font-size: 12px;
+        }
+        >div:nth-child(2) {
+          color: $--color-text-1;
+        }
+      }
+    }
+    .weather-info__content2 {
+      box-sizing: border-box;
+      padding: 10px 0;
+      .base-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 4px;
+        margin-bottom: 10px;
+        >div {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          >span {
+            font-size: 14px;
+          }
+          >span:nth-of-type(2) {
+
+          }
+        }
+      }
+      .week-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 4px;
+        .week-info-item {
+          >div {
+            display:  flex;
+            justify-content: center;
+            align-items: center;
+            margin: 6px 0;
+          }
+        }
+      }
+    }
+  }
+  .weather-info__large {
+    top: $--icon-mode-larger-card-top;
+  }
+  .radar-info-wrap {
+    width: 480px;
+    position: fixed;
+    top: 330px;
+    right: 10px;
+    height: 280px;
+  }
+  .radar-info {
+    width: 460px;
+    //position: fixed;
+    //top: 330px;
+    //right: 10px;
+    height: 280px;
+    transition: 0.2s ease-in-out;
+  }
+  .radar-info__large {
+    top: 350px;
+  }
+
+  .detail-info-wrap {
+    width: 480px;
+    position: fixed;
+    //bottom: 5px;
+    top: 200px;
+    right: 10px;
+    //height: calc(100vh - 620px);
+    height: calc(100vh - 620px);
+  }
+  .detail-info {
+    width: 460px;
+    //position: fixed;
+    //bottom: 5px;
+    //right: 10px;
+    height: calc(100vh - 620px);
+    transition: 0.2s ease-in-out;
+    .detail-info__content {
+      padding-right: 8px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: column;
+      height: calc(100vh - 680px);
+      .base-info {
+        background: #0d3448;
+        box-sizing: border-box;
+        padding-right: 4px;
+        >.uav-item {
+          width: 100%;
+          height: 40px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          >.icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            border-radius: 50%;
+            border: 1px solid $--color-text-1;
+            box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
+            0 0 6px rgba(250, 250, 250, 0.6),
+            0 0 14px rgba(250, 250, 250, 0.3);
+            >i {
+              color: $--color-text-1;
+              font-size: 12px;
+            }
+          }
+          >.device-name {
+            display: inline-block;
+            width: 110px;
+            height: 40px;
+            text-align: left;
+            line-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: $--color-text-1;
+          }
+          .battery {
+            color: $--color-text-1;
+            font-size: 14px;
+            width: 70px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            >i {
+              color: $--color-text-1;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+            &-normal {
+              color: #18da2e;
+              >i {
+                color: #18da2e;
+              }
+            }
+            &-weak {
+              color: #f59a23;
+              >i {
+                color: #f59a23;
+              }
+            }
+            &-danger {
+              color: #d9001b;
+              >i {
+                color: #d9001b;
+              }
+            }
+          }
+          .fly-height {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            width: 70px;
+            >i {
+              color: #18da2e;
+              font-size: 14px;
+              margin-right: 4px;
+            }
+          }
+          .device-location {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex: 1;
+            >i {
+              color: #d9001b;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+          }
+          .device-lock {
+            font-size: 18px;
+            color: #ffff00;
+            cursor: pointer;
+          }
+
+        }
+
+        >.people-item {
+          width: 100%;
+          height: 40px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          >.icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            border-radius: 50%;
+            border: 1px solid #a45d35;
+            box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+            0 0 10px rgba(164, 93, 53, 0.6),
+            0 0 20px rgba(164, 93, 53, 0.3);
+            >i {
+              color: $--color-text-1;
+              font-size: 12px;
+            }
+          }
+          >.people-name {
+            display: inline-block;
+            width: 180px;
+            height: 40px;
+            text-align: left;
+            line-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: $--color-text-1;
+          }
+          .battery {
+            color: $--color-text-1;
+            font-size: 14px;
+            width: 70px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            >i {
+              color: $--color-text-1;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+            &-normal {
+              color: #18da2e;
+              >i {
+                color: #18da2e;
+              }
+            }
+            &-weak {
+              color: #f59a23;
+              >i {
+                color: #f59a23;
+              }
+            }
+            &-danger {
+              color: #d9001b;
+              >i {
+                color: #d9001b;
+              }
+            }
+          }
+          .device-location {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex: 1;
+            >i {
+              color: #d9001b;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+          }
+          .send-message, .voice-video {
+            font-size: 18px;
+            color: #ffff00;
+            cursor: pointer;
+            margin-left: 4px;
+          }
+        }
+
+        >.rescue-item {
+          width: 100%;
+          height: 40px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          >.icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            border-radius: 50%;
+            border: 1px solid #893654;
+            box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
+            0 0 10px rgba(137, 54, 84, 0.6),
+            0 0 20px rgba(137, 54, 84, 0.3);
+            >i {
+              color: $--color-text-1;
+              font-size: 12px;
+            }
+          }
+          >.car-name {
+            display: inline-block;
+            width: 110px;
+            height: 40px;
+            text-align: left;
+            line-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: $--color-text-1;
+          }
+          .run-distance {
+            color: $--color-text-1;
+            font-size: 14px;
+            width: 70px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            >i {
+              color: $--color-text-1;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+            &-normal {
+              color: #18da2e;
+              >i {
+                color: #18da2e;
+              }
+            }
+            &-weak {
+              color: #f59a23;
+              >i {
+                color: #f59a23;
+              }
+            }
+            &-danger {
+              color: #d9001b;
+              >i {
+                color: #d9001b;
+              }
+            }
+          }
+          .car-oil {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            width: 70px;
+            >i {
+              color: #18da2e;
+              font-size: 14px;
+              margin-right: 4px;
+            }
+          }
+          .device-location {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex: 1;
+            >i {
+              color: #d9001b;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+          }
+        }
+        >.fire-item {
+          width: 100%;
+          height: 40px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          >.icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            border-radius: 50%;
+            border: 1px solid #681c1f;
+            box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
+            0 0 10px rgba(104, 28, 31, 0.6),
+            0 0 20px rgba(104, 28, 31, 0.3);
+            >i {
+              color: $--color-text-1;
+              font-size: 12px;
+            }
+          }
+          >.car-name {
+            display: inline-block;
+            width: 110px;
+            height: 40px;
+            text-align: left;
+            line-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: $--color-text-1;
+          }
+          .run-distance {
+            color: $--color-text-1;
+            font-size: 14px;
+            width: 70px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            >i {
+              color: $--color-text-1;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+            &-normal {
+              color: #18da2e;
+              >i {
+                color: #18da2e;
+              }
+            }
+            &-weak {
+              color: #f59a23;
+              >i {
+                color: #f59a23;
+              }
+            }
+            &-danger {
+              color: #d9001b;
+              >i {
+                color: #d9001b;
+              }
+            }
+          }
+          .car-oil {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            width: 70px;
+            >i {
+              color: #18da2e;
+              font-size: 14px;
+              margin-right: 4px;
+            }
+          }
+          .device-location {
+            color: $--color-text-1;
+            font-size: 14px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex: 1;
+            >i {
+              color: #d9001b;
+              font-size: 16px;
+              margin-right: 2px;
+            }
+          }
+          .send-message, .voice-video {
+            font-size: 18px;
+            color: #ffff00;
+            cursor: pointer;
+            margin-left: 4px;
+          }
+        }
+
+        >.device-status {
+          width: 8px;
+          height: 8px;
+          display: inline-block;
+          border-radius: 50%;
+          background: #95f204;
+          &__normal {
+            background: #95f204;
+          }
+          &__weak {
+            background: #f59a23;
+          }
+          &__disconnect {
+            background: #d9001b;
+          }
+        }
+
+        >.team-header {
+          background: rgb(13, 52, 72);
+          width: 100%;
+          height: 40px;
+          padding: 0 5px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          >.icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            border-radius: 50%;
+            border: 1px solid #a45d35;
+            box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+            0 0 10px rgba(164, 93, 53, 0.6),
+            0 0 20px rgba(164, 93, 53, 0.3);
+            >i {
+              color: $--color-text-1;
+              font-size: 12px;
+            }
+          }
+          >.team-name {
+            display: inline-block;
+            flex: 1;
+            height: 40px;
+            text-align: left;
+            line-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: $--color-text-1;
+          }
+          .team-command {
+            >i {
+              color: $--color-text-1;
+              font-size: 14px;
+              cursor: pointer;
+              transition: all 0.2s ease-in-out;
+              &:hover {
+                color: $--color-primary;
+              }
+            }
+          }
+        }
+        >.team-item {
+          >div {
+            background: rgb(13, 52, 72);
+            margin: 5px 0;
+            padding: 0 5px 0 15px;
+            box-sizing: border-box;
+          }
+          .uav-item .device-name {
+            width: 100px;
+          }
+          .people-item .people-name {
+            width: 170px;
+          }
+          .rescue-item .car-name {
+            width: 100px;
+          }
+          .fire-item .car-name {
+            width: 100px;
+          }
+        }
+      }
+      .target-task-list {
+        max-height: 100px;
+        overflow-y: auto;
+        position: relative;
+        .target-task-item {
+          height: 40px;
+          margin: 5px 0;
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 8px;
+          background: #333333;
+          border-radius: 4px;
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          .task-progress-bar {
+            position: absolute;
+            height: 100%;
+            left: 0;
+            top: 0;
+            border-radius: 4px;
+            background: #43522c;
+            //z-index: -1;
+          }
+          .execute-info {
+            z-index: 1;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            width: 150px;
+            .execute-type-icon {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              margin-right: 4px;
+              border: 1px solid $--color-text-1;
+              >i {
+                color: $--color-text-1;
+                font-size: 12px;
+              }
+            }
+            .execute-state-0 {
+              border: 1px solid #a45d35;
+              box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+              0 0 10px rgba(164, 93, 53, 0.6),
+              0 0 20px rgba(164, 93, 53, 0.3);
+            }
+            .execute-state-1 {
+              border: 1px solid #39cf0b;
+              box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
+              0 0 10px rgba(17, 172, 38, 0.6),
+              0 0 20px rgba(17, 172, 38, 0.3);
+            }
+            .execute-state-2 {
+              border: 1px solid $--color-text-1;
+              box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
+              0 0 6px rgba(250, 250, 250, 0.6),
+              0 0 14px rgba(250, 250, 250, 0.3);
+            }
+            .execute-state-3 {
+              border: 1px solid #a45d35;
+              box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
+              0 0 10px rgba(164, 93, 53, 0.6),
+              0 0 20px rgba(164, 93, 53, 0.3);
+            }
+            .execute-state-4 {
+              border: 1px solid #893654;
+              box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
+              0 0 10px rgba(137, 54, 84, 0.6),
+              0 0 20px rgba(137, 54, 84, 0.3);
+            }
+            .execute-state-5 {
+              border: 1px solid #681c1f;
+              box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
+              0 0 10px rgba(104, 28, 31, 0.6),
+              0 0 20px rgba(104, 28, 31, 0.3);
+            }
+            .task-execute {
+              color: $--color-text-1;
+              font-size: 14px;
+              width: 125px;
+              display: inline-block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+          .task-info {
+            z-index: 1;
+            flex: 1;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            width: 50px;
+            >i {
+              font-size: 16px;
+              color: #07e5e5;
+              margin-right: 6px;
+            }
+            >span {
+              color: $--color-orange;
+            }
+            .task-name {
+              color: $--color-text-1;
+              font-size: 14px;
+              margin-right: 2px;
+            }
+            .task-finish {
+              color: $--color-green;
+            }
+          }
+          .task-time {
+            z-index: 1;
+            color: $--color-text-1;
+          }
+        }
+      }
+      .picture-list {
+        width: 100%;
+        position: relative;
+        flex: 1;
+        overflow-y: auto;
+        box-sizing: border-box;
+        .picture-list-item {
+          display:  flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          padding: 5px 5px;
+          height: 50px;
+          .picture-item-image {
+            width: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .el-image {
+              flex: none;
+            }
+          }
+          .picture-item-info {
+            flex: 1;
+            margin: 0 10px;
+            >div {
+              color: $--color-text-2;
+
+            }
+          }
+          .picture-command {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            >i {
+              font-size: 16px;
+              color: $--color-text-1;
+              cursor: pointer;
+              margin: 0 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .detail-info__large {
+    height: calc(50vh - 72px);
+  }
+
+
+  .detail-uav {
+    width: 460px;
+    position: fixed;
+    top: 90px;
+    //bottom: 5px;
+    right: 10px;
+    //right: 510px;
+    height: calc(100vh - 90px);
+    //height: calc(100vh - 620px);
+    transition: 0.2s ease-in-out;
+    z-index: 2;
+    .detail-uav__content {
+      padding-right: 8px;
+      box-sizing: border-box;
+      position: relative;
+      .image-info {
+        width: 100%;
+        height: 240px;
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .status-info {
+          position: absolute;
+          left: 20px;
+          bottom: 10px;
+          z-index: 2;
+          >div {
+            margin: 5px 0;
+            >span {
+              font-size: 12px;
+              margin-right: 12px;
+              >i {
+                font-size: 14px;
+                color: #1af32a;
+                margin-right: 5px;
+              }
+            }
+            >i {
+              font-size: 14px;
+              cursor: pointer;
+            }
+          }
+
+          .uav-status-online {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #1af32a;
+            margin-right: 4px;
+            display: inline-block;
+          }
+          .uav-status-offline {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #7c0a06;
+            margin-right: 4px;
+            display: inline-block;
+          }
+
+        }
+      }
+      .target-task-item {
+        height: 40px;
+        margin: 8px 0;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 8px;
+        background: #333333;
+        border-radius: 4px;
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        .task-progress-bar {
+          position: absolute;
+          height: 100%;
+          left: 0;
+          top: 0;
+          border-radius: 4px;
+          background: #43522c;
+          //z-index: -1;
+        }
+        .task-info {
+          z-index: 1;
+          flex: 1;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          width: 50px;
+          >i {
+            font-size: 16px;
+            color: #07e5e5;
+            margin-right: 6px;
+          }
+          >span {
+            color: $--color-orange;
+          }
+          .task-name {
+            color: $--color-text-1;
+            font-size: 14px;
+            margin-right: 2px;
+          }
+          .task-finish {
+            color: $--color-green;
+          }
+        }
+        .task-time {
+          z-index: 1;
+          color: $--color-text-1;
+        }
+      }
+      .uav-span-wrap {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin: 3px 0;
+        >span:nth-of-type(1) {
+          display: inline-block;
+          width: 84px;
+          text-align: right;
+          margin-right: 4px;
+          color: $--color-text-1;
+        }
+        >span:nth-of-type(2) {
+          color: $--color-text-0;
+        }
+      }
+      .wave-chart {
+        height: 200px;
+      }
+      .back-image {
+        .picture-list-item {
+          display:  flex;
+          justify-content: space-between;
+          align-items: center;
+          box-sizing: border-box;
+          padding: 5px 5px;
+          height: 50px;
+          .picture-item-image {
+            width: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .el-image {
+              flex: none;
+            }
+          }
+          .picture-item-info {
+            flex: 1;
+            margin: 0 10px;
+            >div {
+              color: $--color-text-2;
+
+            }
+          }
+          .picture-command {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            >i {
+              font-size: 16px;
+              color: $--color-text-1;
+              cursor: pointer;
+              margin: 0 4px;
+            }
+          }
+        }
+      }
+
+    }
+  }
+
+  .info-bar-2 {
+    right: 476px;
+  }
+
+
+
+  .icon-mode-large--left {
+    height: calc(45vh - 20px);
+    left: $--icon-mode-larger-card-left;
+    top: $--icon-mode-larger-card-top;
+    transition: 0.2s ease-in-out;
+  }
+
+}
+
+.task-line-detail {
+  width: 100%;
+  height: 50vh;
+  position: relative;
+  overflow: hidden;
+}
diff --git a/frontend/src/views/home/components/device-manage/index.vue b/frontend/src/views/home/components/device-manage/index.vue
new file mode 100644
index 0000000..a0af906
--- /dev/null
+++ b/frontend/src/views/home/components/device-manage/index.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="twin-situation" >
+    <!--  资源列表  -->
+    <dt-card
+      :class="{
+        'resource-list': true,
+        'resource-list__large': isIconModeLarge
+      }"
+      icon="ri-send-plane-line"
+      title="可用资源"
+      :visible.sync="resourceList.visible"
+      :scroll="false"
+      :showClose="false"
+      :showDivider="false"
+    >
+      <template v-slot:header>
+        <span class="remote-header">
+          <i class="iconfont icon-left_icon_remote"></i>
+          可用资源
+        </span>
+      </template>
+<!--      <template v-slot:command>-->
+<!--        <el-tooltip-->
+<!--          effect="dark"-->
+<!--          content="详情"-->
+<!--          placement="bottom"-->
+<!--        >-->
+<!--          <i class="ri-eye-2-line" @click="toggleRightShow"></i>-->
+<!--        </el-tooltip>-->
+<!--      </template>-->
+      <div class="resource-list__content">
+        <div v-for="item in resourceList.data" :key="item.id" class="resource-item" @click.stop="resourceClick(item)">
+          <span class="device-status" :class="item.status ? 'device-status__online' : ''"></span>
+          <span class="icon"><i class="ri-dv-line"></i></span>
+          <span class="device-name">{{item.name}}</span>
+          <span class="battery" :class="getDeviceBatteryClass(item.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{item.battery}}%</span>
+          <span class="fly-height"><i class="ri-expand-vertical-line"></i>{{item.flyHeight}}m</span>
+          <span class="device-location"><i class="ri-map-pin-line"></i>{{item.lon}},{{item.lat}}</span>
+          <i class="iconfont icon-zhuizong device-lock" @click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"></i>
+        </div>
+      </div>
+    </dt-card>
+
+    <!--  任务列表  -->
+<!--    <dt-card
+      :class="{
+        'task-list': true,
+        'task-list__large': isIconModeLarge
+      }"
+      icon="ri-list-unordered"
+      title="任务列表"
+      :visible.sync="taskList.visible"
+      :scroll="false"
+      :showClose="false"
+      :showDivider="false"
+    >
+      <template v-slot:header>
+        <span class="remote-header">
+          <i class="iconfont icon-left_icon_remote"></i>
+          任务列表
+        </span>
+      </template> -->
+<!--      <template v-slot:command>-->
+<!--        <el-tooltip-->
+<!--          effect="dark"-->
+<!--          content="上传精处理图片"-->
+<!--          placement="top"-->
+<!--        >-->
+<!--          <i class="ri-upload-2-line" @click.stop="showUpload"></i>-->
+<!--        </el-tooltip>-->
+<!--      </template>-->
+      <!--
+      <div class="task-list__content">
+        <div v-for="(item, index) in taskList.data" :key="item.id" class="task-item">
+          <div class="left-part">-->
+<!--            <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
+<!--            <div class="execute-info" @click="openTaskLineDetail(item)">
+              <span class="execute-type-icon" :class="'execute-state-' + item.status"><i class="ri-dv-line"></i></span>
+              <span class="task-execute">{{ item.name }}</span>
+            </div>
+            <div class="task-info">
+              {{item.statusName}}
+            </div>
+            <div class="task-time">{{item.beginTime}}</div>
+          </div>
+          <div class="right-part">
+
+            <el-tooltip
+              effect="dark"
+              :content="item.check ? '隐藏' : '显示'"
+              placement="right"
+            >
+              <i :class="item.check ? 'ri-eye-off-line' : 'ri-eye-line'" @click.stop="toggleTaskSceneShow(item, index)"></i>
+            </el-tooltip>
+            <el-tooltip
+              v-if="item.status === 0"
+              effect="dark"
+              content="执行"
+              placement="right"
+            >
+              <i class="ri-flight-takeoff-line" @click.stop="makeTaskUavFly(item, index)"></i>
+            </el-tooltip>
+            <el-tooltip
+              effect="dark"
+              content="结束任务"
+              placement="right"
+              v-if="item.status === 1"
+            >
+              <i class="ri-stop-circle-line" @click.stop="stopTask(item, index)"></i>
+
+            </el-tooltip>
+            <el-tooltip
+              effect="dark"
+              content="重新执行"
+              placement="right"
+              v-if="item.status === 2"
+            >
+              <i class="ri-repeat-line" @click.stop="reRunTask(item, index)"></i>
+
+            </el-tooltip>-->
+<!--            <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
+<!--            <i class="el-icon-close delete-task" @click.stop="deleteTask(item)"></i>-->
+<!--          </div>
+        </div>
+      </div>
+    </dt-card>
+-->
+    <!-- 图片上传   -->
+    <pictures-upload v-if="uploadPictureInfo.visible" :visible.sync="uploadPictureInfo.visible"></pictures-upload>
+
+    <!--  气象预警  -->
+<!--
+    <right-slide class="weather-info-wrap">
+      <dt-card
+        :class="{
+        'weather-info': true,
+        'weather-info__shrink': weatherInfo2.shrink,
+        'weather-info__large': isIconModeLarge
+      }"
+        icon="iconfont icon-target"
+        title="气象预警"
+        :visible.sync="rightShow"
+        :scroll="false"
+        :showClose="false"
+        :showDivider="false"
+      >
+        <div class="weather-info__content2">
+          <div class="base-info">
+            <div><span>温度：</span><span>{{weatherInfo2.wendu}}</span></div>
+            <div><span>湿度：</span><span>{{weatherInfo2.shidu}}</span></div>
+            <div><span>空气质量：</span><span>{{weatherInfo2.quality}}</span></div>
+            <div><span>pm25：</span><span>{{weatherInfo2.pm25}}</span></div>
+            <div><span>pm10：</span><span>{{weatherInfo2.pm10}}</span></div>
+          </div>
+          <div class="week-info">
+            <div v-for="item in weatherInfo2.weekData" :key="item.ymd" class="week-info-item">
+              <div>{{item.week}}</div>
+              <div>{{item.type}}</div>
+              <div><span>{{item.temperatureRange[0]}}</span>~<span>{{item.temperatureRange[0]}}</span></div>
+              <div>{{item.fx}}</div>
+              <div>{{item.fl}}</div>
+            </div>
+          </div>
+        </div>
+      </dt-card>
+    </right-slide>
+
+-->
+
+    <!--  雷达图  -->
+<!--
+    <right-slide class="radar-info-wrap">
+      <dt-card
+        :class="{
+        'radar-info': true,
+        'radar-info__large': isIconModeLarge
+      }"
+        icon="iconfont icon-target"
+        title="缩略图"
+        :visible.sync="rightShow"
+        :scroll="false"
+        :showClose="false"
+        :showDivider="false"
+      >
+        <template v-slot:command>
+          <el-tooltip
+            effect="dark"
+            content="重建"
+            placement="bottom"
+          >
+            <i class="el-icon-refresh" style="cursor: pointer;" @click.stop="refreshRadar"></i>
+          </el-tooltip>
+        </template>
+        <div class="radar-canvas" ref="radarCanvas"></div>
+      </dt-card>
+    </right-slide>
+
+-->
+    <!--  详情  -->
+    <right-slide class="detail-info-wrap" v-if="detailInfo.visible">
+      <dt-card
+        :class="{
+        'detail-info': true,
+        'detail-info__large': isIconModeLarge
+      }"
+        icon="iconfont icon-target"
+        title="详细信息"
+        v-if="detailInfo.visible"
+        :visible.sync="detailInfo.visible"
+        :scroll="false"
+        :showClose="true"
+        :showDivider="false"
+      >
+        <div class="detail-info__content">
+          <div class="base-info">
+            <!--    无人机      -->
+            <div class="uav-item" >
+              <span class="device-status" :class="getDeviceSignalClass(detailInfo.baseInfo.signal)"></span>
+              <span class="icon"><i class="ri-dv-line"></i></span>
+              <span class="device-name">{{ detailInfo.baseInfo.name }}</span>
+              <span class="battery" :class="getDeviceBatteryClass(detailInfo.baseInfo.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailInfo.baseInfo.battery}}%</span>
+              <span class="fly-height"><i class="ri-expand-vertical-line"></i>{{detailInfo.baseInfo.flyHeight}}m</span>
+              <span class="device-location"><i class="ri-map-pin-line"></i>{{detailInfo.baseInfo.lon}},{{detailInfo.baseInfo.lat}}</span>
+              <i class="el-icon-info device-lock" @click="showUavMore"></i>
+            </div>
+          </div>
+          <!--        <div class="target-task-list">-->
+          <!--          <div class="target-task-item" v-for="item in detailInfo.taskList" :key="item.id">-->
+          <!--            <div class="execute-info">-->
+          <!--              <span class="execute-type-icon" :class="'execute-state-' + item.status"><i class="ri-dv-line"></i></span>-->
+          <!--              <span class="task-execute">{{ item.name }}</span>-->
+          <!--            </div>-->
+          <!--            <div class="task-time">{{item.beginTime}}</div>-->
+          <!--          </div>-->
+          <!--        </div>-->
+          <div class="picture-list">
+            <div>回传图像：</div>
+            <div v-for="item in detailInfo.pictureList" :key="item.createTime" class="picture-list-item">
+              <div class="picture-item-image">
+                <el-image
+                  style="width: 40px; height: 40px"
+                  :src="item.url"
+                  :preview-src-list="[item.url]">
+                </el-image>
+              </div>
+              <div class="picture-item-info">
+                <div>拍摄任务：{{item.taskName}} | 拍摄载荷：{{item.loaderName}}</div>
+                <div>拍摄时间：{{item.createTime}}</div>
+              </div>
+              <div class="picture-command">
+                <i class="iconfont icon-dt-icon-dingwei" @click="lockHistoryPicture(item)"></i>
+                <i class="iconfont icon-quanjushijiao-copy" @click="toggleHistoryPicture(item)"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </dt-card>
+    </right-slide>
+
+
+    <!--  详情  -->
+    <dt-card
+      :class="{
+        'detail-uav': true,
+        'detail-uav__large': isIconModeLarge
+      }"
+      icon="iconfont icon-target"
+      title="详细信息"
+      v-if="detailUav.visible"
+      :visible.sync="detailUav.visible"
+      :scroll="true"
+      :showClose="true"
+      :showDivider="false"
+    >
+      <div class="detail-uav__content">
+        <div class="image-info">
+          <img :src="detailUav.baseInfo.url" alt="">
+          <div class="status-info">
+            <div>
+              <span :class="detailUav.baseInfo.status ? 'uav-status-online' : 'uav-status-offline'"></span>
+              <span>{{detailUav.baseInfo.status ? '在线' : '离线'}}</span>
+<!--              <span style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailUav.baseInfo.battery}}%</span>-->
+              <span><i class="ri-expand-vertical-line"></i>{{detailUav.baseInfo.flyHeight}}m</span>
+<!--              <span><i class="ri-expand-horizontal-line"></i>{{detailUav.baseInfo.flyWidth}}m</span>-->
+            </div>
+            <div>
+              <span>{{detailUav.baseInfo.longitude}}</span>
+              <span>{{detailUav.baseInfo.latitude}}</span>
+              <i class="iconfont icon-zhuizong" @click.stop="flyToTarget(detailUav.baseInfo.longitude, detailUav.baseInfo.latitude, detailUav.baseInfo.flyHeight)"></i>
+            </div>
+          </div>
+        </div>
+        <div class="other-info">
+          <el-collapse v-model="detailUav.activeNames" @change="handleUavDetailCollapse">
+<!--            <el-collapse-item title="基本信息" name="1">-->
+<!--              <div class="uav-span-wrap"><span>名称：</span><span>{{detailUav.basicsInfo.name}}</span></div>-->
+<!--              <div class="uav-span-wrap"><span>分组：</span><span>{{detailUav.basicsInfo.group}}</span></div>-->
+<!--            </el-collapse-item>-->
+<!--            <el-collapse-item title="任务信息" name="2">-->
+<!--              <div class="target-task-item" v-for="item in detailUav.taskList" :key="item.id">-->
+<!--                <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
+<!--                <div class="task-info">-->
+<!--                  <i :class="item.typeIcon"></i>-->
+<!--                  <span class="task-name">{{ item.taskName }}</span>-->
+<!--                  <span :class="{ 'task-finish': item.isFinish }">{{-->
+<!--                      item.uavCompletionName-->
+<!--                    }}</span>-->
+<!--                </div>-->
+<!--                <div class="task-time">{{item.taskTime}}</div>-->
+<!--              </div>-->
+<!--            </el-collapse-item>-->
+            <el-collapse-item title="状态信息" name="3">
+              <el-tabs v-model="detailUav.activeTab">
+                <el-tab-pane label="DEV" name="DEV">
+                  <div class="uav-span-wrap" v-for="item in detailUav.statusInfo.dev" :key="item.name">
+                    <span>{{item.name}}：</span>
+                    <span>{{item.value}}{{item.unit}}</span>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="GPS" name="GPS">
+                  <div class="uav-span-wrap" v-for="item in detailUav.statusInfo.gps" :key="item.name">
+                    <span>{{item.name}}：</span>
+                    <span>{{item.value}}{{item.unit}}</span>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="IMU" name="IMU">
+                  <div class="uav-span-wrap" v-for="item in detailUav.statusInfo.imu" :key="item.name">
+                    <span>{{item.name}}：</span>
+                    <span>{{item.value}}{{item.unit}}</span>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-item>
+            <el-collapse-item title="波形信息" name="4">
+              <div class="wave-chart">
+                <dt-multiple-analysis
+                  ref="uavDetailChart"
+                  :data="detailUav.chart.data"
+                  :legend="detailUav.chart.legend"
+                  :tooltip="detailUav.chart.tooltip"
+                  :title="detailUav.chart.title"
+                  :grid="detailUav.chart.grid"
+                  :xAxis="detailUav.chart.xAxis"
+                  :yAxis="detailUav.chart.yAxis"
+                ></dt-multiple-analysis>
+              </div>
+            </el-collapse-item>
+            <el-collapse-item title="回传图像" name="5">
+              <div class="back-image">
+                <div v-for="item in detailInfo.pictureList" :key="item.time" class="picture-list-item">
+                  <div class="picture-item-image">
+                    <el-image
+                      style="width: 40px; height: 40px"
+                      :src="item.url"
+                      :preview-src-list="[item.url]">
+                    </el-image>
+                  </div>
+                  <div class="picture-item-info">
+                    <div>拍摄任务：{{item.taskName}} | 拍摄载荷：{{item.loaderName}}</div>
+                    <div>拍摄时间：{{item.time}}</div>
+                  </div>
+                  <div class="picture-command">
+                    <i class="iconfont icon-dt-icon-dingwei" @click="lockHistoryPicture(item)"></i>
+                    <i class="iconfont icon-quanjushijiao-copy" @click="toggleHistoryPicture(item)"></i>
+                  </div>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </dt-card>
+
+
+    <dt-dialog
+      :title="taskLineDetail.title"
+      top="20vh"
+      width="60vw"
+      :visible.sync="taskLineDetail.visible"
+      append-to-body
+    >
+      <div class="task-line-detail">
+        <el-table
+          :data="taskLineDetail.data"
+          height="100%"
+          style="width: 100%"
+        >
+          <el-table-column
+            type="index"
+            width="50">
+          </el-table-column>
+          <el-table-column
+            prop="startLon"
+            label="起点经度">
+          </el-table-column>
+          <el-table-column
+            prop="startLat"
+            label="起点纬度">
+          </el-table-column>
+          <el-table-column
+            prop="startHeight"
+            label="起点相对高度">
+          </el-table-column>
+          <el-table-column
+            prop="startAlt"
+            label="起点海拔高度">
+          </el-table-column>
+          <el-table-column
+            prop="endLon"
+            label="终点经度">
+          </el-table-column>
+          <el-table-column
+            prop="endLat"
+            label="终点纬度">
+          </el-table-column>
+          <el-table-column
+            prop="endHeight"
+            label="终点相对高度">
+          </el-table-column>
+          <el-table-column
+            prop="endAlt"
+            label="终点海拔高度">
+          </el-table-column>
+        </el-table>
+      </div>
+
+    </dt-dialog>
+
+    <dt-loading :visible="loadingCount > 0"></dt-loading>
+  </div>
+</template>
+<script src="./index.js"></script>
+<style src="./index.scss" lang="scss" scoped></style>
diff --git a/frontend/src/views/home/components/device-manage/uavTarget.js b/frontend/src/views/home/components/device-manage/uavTarget.js
new file mode 100644
index 0000000..ba2c4cb
--- /dev/null
+++ b/frontend/src/views/home/components/device-manage/uavTarget.js
@@ -0,0 +1,419 @@
+import * as DT from 'dt-sdk'
+import { viewer } from '@/components/dt-scene'
+export default class UavTarget {
+  planLines = new DT.Cesium.AssociativeArray()
+  uavEntity = null
+  _options = {}
+  loaderPicture = {}
+  positions = []
+  startAltitude = 0
+  constructor(viewer, options) {
+    this.viewer = viewer
+    this._options = options
+    this.jobId = options.jobId
+    this.uavId = options.uavId
+    this.jobName = options.jobName
+    this.startAltitude = options.startAltitude
+
+    this.addPlanLine(options.airlineList)
+    this.addUav(options)
+    this.addUavLoader(options.payloadList)
+  }
+  addUav(info) {
+    let that = this
+    let position = DT.Cesium.Cartesian3.fromDegrees(info.startLon, info.startLat, info.startHeight)
+    if (info.trailList && info.trailList.length > 0) {
+      info.trailList.forEach(route => {
+        this.positions.push(DT.Cesium.Cartesian3.fromDegrees(route.lon, route.lat, route.height))
+      })
+    } else {
+      this.positions.push(position.clone())
+      this.positions.push(position.clone())
+    }
+    let currentPosition = this.positions[this.positions.length - 1].clone()
+    let id = `${this.jobId}~${this.uavId}-uav`
+    this.uavEntity = this.viewer.entities.add({
+      id,
+      position: currentPosition,
+      // label: {
+      //   text: info.uavName,
+      //   font: '14px sans-serif',
+      //   fillColor: DT.Cesium.Color.WHITE,
+      //   horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+      //   verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
+      //   disableDepthTestDistance: 10000,
+      //   pixelOffset: new DT.Cesium.Cartesian2(10, 0),
+      //   showBackground: true,
+      //   scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
+      //   distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 20000),
+      //   backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(0,0,0,0.7)'),
+      //   style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+      // },
+      // model: {
+      //   uri: process.env.BASE_URL + 'model/uav.gltf',
+      //   // scale: 1,
+      //   minimumPixelSize: 32,
+      //   maximumScale: 128,
+      // },
+      polyline: {
+        positions: new DT.Cesium.CallbackProperty(function () {
+          return that.positions
+        }, false),
+        width: 2,
+        zIndex: 6,
+        material: DT.Cesium.Color.CYAN,
+        depthFailMaterial:  DT.Cesium.Color.CYAN,
+        arcType: DT.Cesium.ArcType.NONE
+      }
+    })
+  }
+  updateCurrentPosition(position) {
+    this.uavEntity.position = position.clone()
+    this.positions.push(position.clone())
+  }
+  addUavLoader(data) {
+    let loaderPicture = {}
+    data.forEach(loader => {
+      loaderPicture[loader.payloadId] = []
+      let key  = 'imageList'
+      if (loader.imageHighList &&  loader.imageHighList.length > 0) {
+        key = 'imageHighList'
+      }
+      if (loader[key] && loader[key].length > 0) {
+        console.log('这是哈222', loader.imageList)
+        loader[key].forEach((image, imageIndex) => {
+          let obj = {
+            picture: null,
+            fileId: image.fileId,
+            markArr: []
+          }
+          // let cby_bg_data=[
+          //   image.left1Lon, image.left1Lat,
+          //   image.left2Lon, image.left2Lat,
+          //   image.right2Lon, image.right2Lat,
+          //   image.right1Lon, image.right1Lat,
+          // ]
+          // obj.picture = this.viewer.entities.add({
+          //   id: `${this.jobId}~${this.uavId}~${loader.payloadId}~${image.fileId}-picture`,
+          //   name: '背景',
+          //   polygon: {
+          //     // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
+          //     hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
+          //     perPositionHeight: true,
+          //     material: new DT.Cesium.ImageMaterialProperty({
+          //       image: window.config.imagePath + image.relativePath,
+          //       // image: process.env.BASE_URL + 'static/img/ttt.tif',
+          //       // image: process.env.BASE_URL + 'static/img/pic.png',
+          //     }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
+          //     outline: true,
+          //     outlineColor: DT.Cesium.Color.WHITE,
+          //     outlineWidth: 2, //很多电脑当宽度>1时，没用
+          //   }
+          // })
+          let minLon = Math.min(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
+          let maxLon = Math.max(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
+          let minLat = Math.min(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
+          let maxLat = Math.max(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
+          if (maxLat - minLat > 0 && maxLon - minLon > 0) {
+            let rectangle = DT.Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat)
+            let layer = new DT.Cesium.SingleTileImageryProvider({
+              url: window.config.imagePath + image.relativePath,
+              rectangle
+            })
+            let addLayer  = this.viewer.cesiumViewer.imageryLayers.addImageryProvider(layer)
+            // 设置分屏显示
+            addLayer.splitDirection = DT.Cesium.ImagerySplitDirection.LEFT
+            obj.picture = addLayer
+            if (image.itemList) {
+              image.itemList.forEach( (mark, markIndex) => {
+                let markId = `${this.jobId}~${this.uavId}~${loader.payloadId}~${image.fileId}~${mark.id}-mark${imageIndex}${markIndex}`
+                let markPosition = DT.Cesium.Cartesian3.fromDegrees(mark.left1Lon, mark.left1Lat, 1)
+                let markArr = [
+                  mark.left1Lon, mark.left1Lat, 1,
+                  mark.left2Lon, mark.left2Lat, 1,
+                  mark.right2Lon, mark.right2Lat, 1,
+                  mark.right1Lon, mark.right1Lat, 1,
+                  mark.left1Lon, mark.left1Lat, 1,
+                ]
+                let markLine = this.viewer.entities.add({
+                  id: markId,
+                  show: true,
+                  position: markPosition,
+                  label: {
+                    text: window.detectType[mark.type],
+                    font: '16px sans-serif',
+                    fillColor: DT.Cesium.Color.RED,
+                    horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+                    verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
+                    disableDepthTestDistance: 10000,
+                    showBackground: false,
+                    backgroundColor: DT.Cesium.Color.BLACK,
+                    style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+                  },
+                  polyline: {
+                    positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
+                    // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
+                    width: 1,
+                    material: DT.Cesium.Color.RED,
+                    depthFailMaterial: DT.Cesium.Color.RED,
+                    zIndex: 3,
+                  }
+                })
+                obj.markArr.push(markLine)
+              })
+            }
+            loaderPicture[loader.payloadId].push(obj)
+          }
+
+        })
+      }
+    })
+    this.loaderPicture = loaderPicture
+  }
+  appendLoaderPicture(image) {
+    // this.removePicture()
+    // this.removePictureItem(image.payloadId, image.airlineId)
+    if (!this.loaderPicture) {
+      this.loaderPicture = {}
+    }
+    if (!this.loaderPicture[image.payloadId]) {
+      this.loaderPicture[image.payloadId] = []
+    }
+    let obj = {
+      picture: null,
+      fileId: image.fileId,
+      airlineId: image.airlineId,
+      markArr: []
+    }
+    let length = this.loaderPicture[image.payloadId].length
+    // obj.picture = this.viewer.entities.add({
+    //   id: `${this.jobId}~${this.uavId}~${image.payloadId}~${image.fileId}-picture`,
+    //   name: '背景',
+    //   polygon: {
+    //     // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
+    //     hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
+    //     perPositionHeight: true,
+    //     material: new DT.Cesium.ImageMaterialProperty({
+    //       image: window.config.imagePath + image.relativePath,
+    //       // image: process.env.BASE_URL + 'static/img/ttt.tif',
+    //       // image: process.env.BASE_URL + 'static/img/pic.png',
+    //     }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
+    //     outline: true,
+    //     outlineColor: DT.Cesium.Color.WHITE,
+    //     outlineWidth: 2, //很多电脑当宽度>1时，没用
+    //   }
+    // })
+    let minLon = Math.min(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
+    let maxLon = Math.max(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
+    let minLat = Math.min(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
+    let maxLat = Math.max(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
+    if (maxLat - minLat > 0 && maxLon - minLon > 0) {
+      let rectangle = DT.Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat)
+      let layer = new DT.Cesium.SingleTileImageryProvider({
+        url: window.config.imagePath + image.relativePath,
+        rectangle
+      })
+
+      // console.log('添加的图片', obj.picture)
+      if (image.itemList) {
+        image.itemList.forEach( (mark, markIndex) => {
+          let markId = `${this.jobId}~${this.uavId}~${image.payloadId}~${image.fileId}~${mark.id}-mark${length}${markIndex}`
+          let markPosition = DT.Cesium.Cartesian3.fromDegrees(mark.left1Lon, mark.left1Lat, 1)
+          let markArr = [
+            mark.left1Lon, mark.left1Lat, 1,
+            mark.left2Lon, mark.left2Lat, 1,
+            mark.right2Lon, mark.right2Lat, 1,
+            mark.right1Lon, mark.right1Lat, 1,
+            mark.left1Lon, mark.left1Lat, 1,
+          ]
+          let markLine = this.viewer.entities.add({
+            id: markId,
+            show: true,
+            position: markPosition,
+            label: {
+              text: window.detectType[mark.type],
+              font: '16px sans-serif',
+              fillColor: DT.Cesium.Color.RED,
+              horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+              verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
+              disableDepthTestDistance: 10000,
+              showBackground: false,
+              backgroundColor: DT.Cesium.Color.BLACK,
+              style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
+              scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
+              distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 10000),
+            },
+            polyline: {
+              positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
+              // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
+              width: 1,
+              material: DT.Cesium.Color.RED,
+              depthFailMaterial: DT.Cesium.Color.RED,
+              zIndex: 3,
+            }
+          })
+          obj.markArr.push(markLine)
+        })
+      }
+      console.log('删除旧的')
+      layer.readyPromise.then(res => {
+        console.log('回调执行')
+        let addLayer  = this.viewer.cesiumViewer.imageryLayers.addImageryProvider(layer)
+        // 设置分屏显示
+        addLayer.splitDirection = DT.Cesium.ImagerySplitDirection.LEFT
+        obj.picture = addLayer
+        setTimeout(() => {
+          this.removePictureItem(image.payloadId, image.airlineId)
+          this.loaderPicture[image.payloadId].push(obj)
+        }, 500)
+
+      })
+      // this.removePictureItem(image.payloadId, image.airlineId)
+      // this.loaderPicture[image.payloadId].push(obj)
+      console.log('push新的')
+    }
+
+  }
+  toggleAllLoaderVisible(visible) {
+    for (let key in this.loaderPicture) {
+      this.loaderPicture[key].forEach(item => {
+        item.picture.show = visible
+        item.markArr.forEach(item => {
+          item.show = visible
+        })
+      })
+
+    }
+  }
+  toggleLoaderPictureVisible(payloadId,fileId) {
+    console.log('切换显隐', payloadId, fileId)
+    if (this.loaderPicture[payloadId]) {
+      let find = this.loaderPicture[payloadId].find(item => item.fileId + '' === fileId + '')
+      console.log('找到图片了吗', find)
+      if (find) {
+        let status = !find.picture.show
+        console.log('显示状态', status)
+        find.picture.show = status
+        find.markArr.forEach(mark => {
+          mark.show = status
+        })
+      }
+    }
+  }
+  toggleLoaderPictureActive(payloadId,fileId, active, visible = true) {
+    if (this.loaderPicture[payloadId]) {
+      let find = this.loaderPicture[payloadId].find(item => item.fileId + '' === fileId + '')
+      if (find) {
+        if (active) {
+          find.picture.polygon.outlineColor = DT.Cesium.Color.RED
+          find.picture.show = true
+          find.markArr.forEach(mark => {
+            mark.show = true
+          })
+        } else {
+          find.picture.polygon.outlineColor = DT.Cesium.Color.WHITE
+          find.picture.show = visible
+          find.markArr.forEach(mark => {
+            mark.show = visible
+          })
+        }
+      }
+    }
+  }
+  addPlanLine(data) {
+    if (data.length > 0) {
+      data.forEach((item, index) => {
+        let height = Math.max(item.endHeight - 1, 1)
+        item.positions = [item.startLon, item.startLat, item.startHeight + this.startAltitude, item.endLon, item.endLat, item.endHeight + this.startAltitude]
+        let positions = DT.Cesium.Cartesian3.fromDegreesArrayHeights(item.positions)
+        let id = `${this.jobId}~${this.uavId}~${item.id}-planLine-${index}`
+        let line = this.viewer.entities.add({
+          id,
+          position: positions[0],
+          label: {
+            text: `规划航线${index + 1}起点`,
+            disableDepthTestDistance: 10000,
+            font: '14px sans-serif',
+            fillColor: DT.Cesium.Color.RED,
+            horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
+            pixelOffset: new DT.Cesium.Cartesian2(10, -15),
+            showBackground: true,
+            scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
+            distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 10000),
+            backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.6)')
+          },
+          polyline: {
+            show: true,
+            positions,
+            width: 2,
+            zIndex: 0,
+            material: DT.Cesium.Color.RED,
+            depthFailMaterial: DT.Cesium.Color.RED,
+            arcType: DT.Cesium.ArcType.NONE
+          }
+        })
+        this.planLines.set(id, line)
+      })
+    }
+  }
+  removePicture() {
+    for (let key in this.loaderPicture) {
+      this.loaderPicture[key].forEach((item, index) => {
+        if (item.picture) {
+          // this.viewer.entities.remove(item.picture)
+          this.viewer.cesiumViewer.imageryLayers.remove(item.picture)
+        }
+        item.markArr.forEach(mark => {
+          this.viewer.entities.remove(mark)
+        })
+      })
+    }
+    this.loaderPicture = {}
+  }
+  removePictureItem(payloadId, airlineId) {
+    if (this.loaderPicture && this.loaderPicture[payloadId]) {
+      let findIndex = -1
+      this.loaderPicture[payloadId].forEach((item, index) => {
+        if (item.airlineId === airlineId) {
+          if (item.picture) {
+            this.viewer.cesiumViewer.imageryLayers.remove(item.picture)
+            item.markArr.forEach(mark => {
+              this.viewer.entities.remove(mark)
+            })
+          }
+          findIndex = index
+        }
+      })
+      if (findIndex > -1) {
+        this.loaderPicture[payloadId].splice(findIndex, 1)
+      }
+    }
+  }
+
+
+  removeAll() {
+    if (this.uavEntity) {
+      this.viewer.entities.remove(this.uavEntity)
+      this.uavEntity = null
+    }
+    for (let key in this.loaderPicture) {
+      this.loaderPicture[key].forEach((item, index) => {
+        if (item.picture) {
+          // this.viewer.entities.remove(item.picture)
+          this.viewer.cesiumViewer.imageryLayers.remove(item.picture)
+        }
+        item.markArr.forEach(mark => {
+          this.viewer.entities.remove(mark)
+        })
+      })
+    }
+    this.loaderPicture = null
+    this.planLines.values.forEach(item => {
+      this.viewer.entities.remove(item)
+    })
+    this.planLines.removeAll()
+  }
+  destroy() {
+    this.removeAll()
+  }
+}