diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index 772eb7d..a8fdf0a 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -1,41 +1,63 @@
 <template>
   <div>
     <div class="right">
-      <div style="height: 50px">
+      <div style="height: 40px">
         <div class="title">{{data.name}}
           <el-image :src="img" style="width: 30px;height: 30px;margin: 0px 5px"/>
           {{data.value}}
           <div class="btn" @click="setting">设 置</div>
+          <div class="alarm" @click="alarm"/>
         </div>
       </div>
       <overview style="flex: 1;width: 100%;"/>
     </div>
     <setting v-show="editShow" ref="setting" @watchChild="" />
+    <alarm v-show="alarmShow" ref="alarm" @watchChild="" />
   </div>
 </template>
 
 <script>
   import Overview from "./overview";
   import Setting from "../setting/setting";
+  import Alarm from "../alarm/alarm";
+  import { getSatelliteSignal } from "@/api/typhoon"
 export default {
   name: 'Right',
-  components: {Overview,Setting},
+  components: {Alarm, Overview,Setting},
   data() {
     return {
       img:require('@/assets/images/green.png'),
       editShow: false, // 编辑组件是否显示
+      alarmShow: false, // 编辑组件是否显示
       data:{
         name: '天通卫星通信',
-        value: '666kb/s'
-      }
+        value: 'kb/s'
+      },
+      timer:''
     }
   },
-  created() {
+  mounted() {
+    this.search()
+    this.timer = setInterval(this.search, 10000);
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
+    search(){
+      getSatelliteSignal().then(res => {
+        if (res.code === 200) {
+          this.data.value = res.data.signalValue + 'kb/s'
+        }
+      })
+    },
     setting(){
       this.editShow = true
       this.$refs.setting.initDialog('create')
+    },
+    alarm(){
+      this.alarmShow = true
+      this.$refs.alarm.initDialog('create')
     }
   }
 }
@@ -75,6 +97,16 @@
           color: #00f5ff;
         }
       }
+      .alarm{
+        cursor: pointer;
+        width: 25px;
+        margin-left: 15px;
+        height: 25px;
+        line-height: 25px;
+        background: url("../../assets/images/alarm.png") no-repeat;
+        -webkit-background-size: 100% 100%;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index 772eb7d..a8fdf0a 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -1,41 +1,63 @@
 <template>
   <div>
     <div class="right">
-      <div style="height: 50px">
+      <div style="height: 40px">
         <div class="title">{{data.name}}
           <el-image :src="img" style="width: 30px;height: 30px;margin: 0px 5px"/>
           {{data.value}}
           <div class="btn" @click="setting">设 置</div>
+          <div class="alarm" @click="alarm"/>
         </div>
       </div>
       <overview style="flex: 1;width: 100%;"/>
     </div>
     <setting v-show="editShow" ref="setting" @watchChild="" />
+    <alarm v-show="alarmShow" ref="alarm" @watchChild="" />
   </div>
 </template>
 
 <script>
   import Overview from "./overview";
   import Setting from "../setting/setting";
+  import Alarm from "../alarm/alarm";
+  import { getSatelliteSignal } from "@/api/typhoon"
 export default {
   name: 'Right',
-  components: {Overview,Setting},
+  components: {Alarm, Overview,Setting},
   data() {
     return {
       img:require('@/assets/images/green.png'),
       editShow: false, // 编辑组件是否显示
+      alarmShow: false, // 编辑组件是否显示
       data:{
         name: '天通卫星通信',
-        value: '666kb/s'
-      }
+        value: 'kb/s'
+      },
+      timer:''
     }
   },
-  created() {
+  mounted() {
+    this.search()
+    this.timer = setInterval(this.search, 10000);
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
+    search(){
+      getSatelliteSignal().then(res => {
+        if (res.code === 200) {
+          this.data.value = res.data.signalValue + 'kb/s'
+        }
+      })
+    },
     setting(){
       this.editShow = true
       this.$refs.setting.initDialog('create')
+    },
+    alarm(){
+      this.alarmShow = true
+      this.$refs.alarm.initDialog('create')
     }
   }
 }
@@ -75,6 +97,16 @@
           color: #00f5ff;
         }
       }
+      .alarm{
+        cursor: pointer;
+        width: 25px;
+        margin-left: 15px;
+        height: 25px;
+        line-height: 25px;
+        background: url("../../assets/images/alarm.png") no-repeat;
+        -webkit-background-size: 100% 100%;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index 4895eea..b0a4e70 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -11,22 +11,44 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean,getShelterPosition } from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Water',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'流场',value:'***',color:'#00f5ff'},
-        {name:'流速',value:'***',color:'#00f5ff'},
-        {name:'流向',value:'***',color:'#00f5ff'},
-        {name:'水深',value:'***',color:'#00f5ff'},
-        {name:'波浪预报',value:'*****************************************',color:'#50C55C'}
+        // {name:'流场',value:'***',color:'#00f5ff'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        // {name:'流向',value:'***',color:'#00f5ff'},
+        // {name:'水深',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'}
 
         ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            // this.data[0].value = res.data.
+            this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+            // this.data[3].value = res.data.
+            this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + '米\n' +
+              '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + '米'
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -41,10 +63,11 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
+      padding-right: 10px;
       display: flex;
       flex-direction: column;
       flex: 1;

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index 772eb7d..a8fdf0a 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -1,41 +1,63 @@
 <template>
   <div>
     <div class="right">
-      <div style="height: 50px">
+      <div style="height: 40px">
         <div class="title">{{data.name}}
           <el-image :src="img" style="width: 30px;height: 30px;margin: 0px 5px"/>
           {{data.value}}
           <div class="btn" @click="setting">设 置</div>
+          <div class="alarm" @click="alarm"/>
         </div>
       </div>
       <overview style="flex: 1;width: 100%;"/>
     </div>
     <setting v-show="editShow" ref="setting" @watchChild="" />
+    <alarm v-show="alarmShow" ref="alarm" @watchChild="" />
   </div>
 </template>
 
 <script>
   import Overview from "./overview";
   import Setting from "../setting/setting";
+  import Alarm from "../alarm/alarm";
+  import { getSatelliteSignal } from "@/api/typhoon"
 export default {
   name: 'Right',
-  components: {Overview,Setting},
+  components: {Alarm, Overview,Setting},
   data() {
     return {
       img:require('@/assets/images/green.png'),
       editShow: false, // 编辑组件是否显示
+      alarmShow: false, // 编辑组件是否显示
       data:{
         name: '天通卫星通信',
-        value: '666kb/s'
-      }
+        value: 'kb/s'
+      },
+      timer:''
     }
   },
-  created() {
+  mounted() {
+    this.search()
+    this.timer = setInterval(this.search, 10000);
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
+    search(){
+      getSatelliteSignal().then(res => {
+        if (res.code === 200) {
+          this.data.value = res.data.signalValue + 'kb/s'
+        }
+      })
+    },
     setting(){
       this.editShow = true
       this.$refs.setting.initDialog('create')
+    },
+    alarm(){
+      this.alarmShow = true
+      this.$refs.alarm.initDialog('create')
     }
   }
 }
@@ -75,6 +97,16 @@
           color: #00f5ff;
         }
       }
+      .alarm{
+        cursor: pointer;
+        width: 25px;
+        margin-left: 15px;
+        height: 25px;
+        line-height: 25px;
+        background: url("../../assets/images/alarm.png") no-repeat;
+        -webkit-background-size: 100% 100%;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index 4895eea..b0a4e70 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -11,22 +11,44 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean,getShelterPosition } from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Water',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'流场',value:'***',color:'#00f5ff'},
-        {name:'流速',value:'***',color:'#00f5ff'},
-        {name:'流向',value:'***',color:'#00f5ff'},
-        {name:'水深',value:'***',color:'#00f5ff'},
-        {name:'波浪预报',value:'*****************************************',color:'#50C55C'}
+        // {name:'流场',value:'***',color:'#00f5ff'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        // {name:'流向',value:'***',color:'#00f5ff'},
+        // {name:'水深',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'}
 
         ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            // this.data[0].value = res.data.
+            this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+            // this.data[3].value = res.data.
+            this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + '米\n' +
+              '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + '米'
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -41,10 +63,11 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
+      padding-right: 10px;
       display: flex;
       flex-direction: column;
       flex: 1;
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 082c0a2..32d5416 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -11,19 +11,57 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean, getTyphoonList,getShelterPosition} from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Weather',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'风向',value:'328.5°',color:'#00f5ff'},
-        {name:'气象指标',value:'6.7米/秒（四级风）',color:'#50C55C'},
+        {name:'风速风向',value:'***°',color:'#00f5ff'},
+        {name:'海温',value:'',color:'#50C55C'},
+        {name:'气压',value:'',color:'#50C55C'},
+        {name:'海拔',value:'',color:'#50C55C'},
+        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
         {name:'台风预报',value:'********************************************',color:'#50C55C'},
       ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            this.data[0].value =  res.data.windSpeed + 'm/s  '+res.data.windDir + '°'
+            this.data[1].value = res.data.temperature + '℃ '
+            this.data[2].value = res.data.pressure + 'hPa '
+            this.data[3].value = res.data.altitude + '米 '
+            this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + '米 '
+            this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + '米 '
+          }
+        })
+      }
+    })
+    getTyphoonList().then(res => {
+      if (res.code === 200) {
+         if(res.data.length===0) {this.data[6].value = '暂无台风'}
+         else {
+           this.data[6].value = ''
+           for(let i=0;i<res.data.length;i++){
+             this.data[6].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+           }
+         }
+      }
+    })
   },
   methods: {
   }
@@ -38,7 +76,7 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index 772eb7d..a8fdf0a 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -1,41 +1,63 @@
 <template>
   <div>
     <div class="right">
-      <div style="height: 50px">
+      <div style="height: 40px">
         <div class="title">{{data.name}}
           <el-image :src="img" style="width: 30px;height: 30px;margin: 0px 5px"/>
           {{data.value}}
           <div class="btn" @click="setting">设 置</div>
+          <div class="alarm" @click="alarm"/>
         </div>
       </div>
       <overview style="flex: 1;width: 100%;"/>
     </div>
     <setting v-show="editShow" ref="setting" @watchChild="" />
+    <alarm v-show="alarmShow" ref="alarm" @watchChild="" />
   </div>
 </template>
 
 <script>
   import Overview from "./overview";
   import Setting from "../setting/setting";
+  import Alarm from "../alarm/alarm";
+  import { getSatelliteSignal } from "@/api/typhoon"
 export default {
   name: 'Right',
-  components: {Overview,Setting},
+  components: {Alarm, Overview,Setting},
   data() {
     return {
       img:require('@/assets/images/green.png'),
       editShow: false, // 编辑组件是否显示
+      alarmShow: false, // 编辑组件是否显示
       data:{
         name: '天通卫星通信',
-        value: '666kb/s'
-      }
+        value: 'kb/s'
+      },
+      timer:''
     }
   },
-  created() {
+  mounted() {
+    this.search()
+    this.timer = setInterval(this.search, 10000);
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
+    search(){
+      getSatelliteSignal().then(res => {
+        if (res.code === 200) {
+          this.data.value = res.data.signalValue + 'kb/s'
+        }
+      })
+    },
     setting(){
       this.editShow = true
       this.$refs.setting.initDialog('create')
+    },
+    alarm(){
+      this.alarmShow = true
+      this.$refs.alarm.initDialog('create')
     }
   }
 }
@@ -75,6 +97,16 @@
           color: #00f5ff;
         }
       }
+      .alarm{
+        cursor: pointer;
+        width: 25px;
+        margin-left: 15px;
+        height: 25px;
+        line-height: 25px;
+        background: url("../../assets/images/alarm.png") no-repeat;
+        -webkit-background-size: 100% 100%;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index 4895eea..b0a4e70 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -11,22 +11,44 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean,getShelterPosition } from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Water',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'流场',value:'***',color:'#00f5ff'},
-        {name:'流速',value:'***',color:'#00f5ff'},
-        {name:'流向',value:'***',color:'#00f5ff'},
-        {name:'水深',value:'***',color:'#00f5ff'},
-        {name:'波浪预报',value:'*****************************************',color:'#50C55C'}
+        // {name:'流场',value:'***',color:'#00f5ff'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        // {name:'流向',value:'***',color:'#00f5ff'},
+        // {name:'水深',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'}
 
         ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            // this.data[0].value = res.data.
+            this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+            // this.data[3].value = res.data.
+            this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + '米\n' +
+              '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + '米'
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -41,10 +63,11 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
+      padding-right: 10px;
       display: flex;
       flex-direction: column;
       flex: 1;
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 082c0a2..32d5416 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -11,19 +11,57 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean, getTyphoonList,getShelterPosition} from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Weather',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'风向',value:'328.5°',color:'#00f5ff'},
-        {name:'气象指标',value:'6.7米/秒（四级风）',color:'#50C55C'},
+        {name:'风速风向',value:'***°',color:'#00f5ff'},
+        {name:'海温',value:'',color:'#50C55C'},
+        {name:'气压',value:'',color:'#50C55C'},
+        {name:'海拔',value:'',color:'#50C55C'},
+        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
         {name:'台风预报',value:'********************************************',color:'#50C55C'},
       ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            this.data[0].value =  res.data.windSpeed + 'm/s  '+res.data.windDir + '°'
+            this.data[1].value = res.data.temperature + '℃ '
+            this.data[2].value = res.data.pressure + 'hPa '
+            this.data[3].value = res.data.altitude + '米 '
+            this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + '米 '
+            this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + '米 '
+          }
+        })
+      }
+    })
+    getTyphoonList().then(res => {
+      if (res.code === 200) {
+         if(res.data.length===0) {this.data[6].value = '暂无台风'}
+         else {
+           this.data[6].value = ''
+           for(let i=0;i<res.data.length;i++){
+             this.data[6].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+           }
+         }
+      }
+    })
   },
   methods: {
   }
@@ -38,7 +76,7 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index 9878745..f387186 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -5,7 +5,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="台风报警">
-              <el-input v-model="form.windDistance">
+              <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -13,7 +13,7 @@
         </el-col>
         <el-col :span="10">
           <el-form-item label="风速报警">
-              <el-input v-model="form.windSpeed">
+              <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
               </el-input>
@@ -24,15 +24,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="船舶报警">
-              <el-input v-model="form.ship">
-                <template slot="prepend">小于</template>
-                <template slot="append">海里</template>
-              </el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="岛屿报警">
-              <el-input v-model="form.islands">
+              <el-input v-model="form.shipDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -43,7 +35,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="电量报警">
-              <el-input v-model="form.electric">
+              <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
               </el-input>
@@ -51,7 +43,7 @@
         </el-col>
         <el-col :span="10">
           <el-form-item label="位置报警">
-              <el-input v-model="form.position">
+              <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -62,7 +54,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="通信信号强度">
-              <el-input v-model="form.socket">
+              <el-input v-model="form.satelliteSignal">
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -80,6 +72,7 @@
 
 <script>
   import axios from 'axios'
+  import { alarmUpdate,alarmRecentValue } from "@/api/alarm"
   export default {
     name: 'Alarm',
     components: {},
@@ -87,13 +80,12 @@
       return {
         list: [],
         form: {
-          windDistance:'',
-          windSpeed:'',
-          ship:'',
-          islands:'',
-          electric :'',
-          position:'',
-          socket:''
+          typhoonDistance:'',
+          typhoonSpeed:'',
+          shipDistance:'',
+          robotBattery :'',
+          robotDistance:'',
+          satelliteSignal:''
         }
       }
     },
@@ -104,8 +96,21 @@
       this.init()
     },
     methods: {
+      onSubmit(){
+        alarmUpdate(this.form).then(res => {
+          if (res.code === 200) {
+            this.$message.success('阈值设置成功')
+             this.init()
+          }
+        })
+      },
       init(){
         console.log('获取当前值')
+        alarmRecentValue().then(res => {
+          if (res.code === 200) {
+            this.form = res.data
+          }
+        })
       },
       read(){
         var that = this

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index 772eb7d..a8fdf0a 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -1,41 +1,63 @@
 <template>
   <div>
     <div class="right">
-      <div style="height: 50px">
+      <div style="height: 40px">
         <div class="title">{{data.name}}
           <el-image :src="img" style="width: 30px;height: 30px;margin: 0px 5px"/>
           {{data.value}}
           <div class="btn" @click="setting">设 置</div>
+          <div class="alarm" @click="alarm"/>
         </div>
       </div>
       <overview style="flex: 1;width: 100%;"/>
     </div>
     <setting v-show="editShow" ref="setting" @watchChild="" />
+    <alarm v-show="alarmShow" ref="alarm" @watchChild="" />
   </div>
 </template>
 
 <script>
   import Overview from "./overview";
   import Setting from "../setting/setting";
+  import Alarm from "../alarm/alarm";
+  import { getSatelliteSignal } from "@/api/typhoon"
 export default {
   name: 'Right',
-  components: {Overview,Setting},
+  components: {Alarm, Overview,Setting},
   data() {
     return {
       img:require('@/assets/images/green.png'),
       editShow: false, // 编辑组件是否显示
+      alarmShow: false, // 编辑组件是否显示
       data:{
         name: '天通卫星通信',
-        value: '666kb/s'
-      }
+        value: 'kb/s'
+      },
+      timer:''
     }
   },
-  created() {
+  mounted() {
+    this.search()
+    this.timer = setInterval(this.search, 10000);
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
+    search(){
+      getSatelliteSignal().then(res => {
+        if (res.code === 200) {
+          this.data.value = res.data.signalValue + 'kb/s'
+        }
+      })
+    },
     setting(){
       this.editShow = true
       this.$refs.setting.initDialog('create')
+    },
+    alarm(){
+      this.alarmShow = true
+      this.$refs.alarm.initDialog('create')
     }
   }
 }
@@ -75,6 +97,16 @@
           color: #00f5ff;
         }
       }
+      .alarm{
+        cursor: pointer;
+        width: 25px;
+        margin-left: 15px;
+        height: 25px;
+        line-height: 25px;
+        background: url("../../assets/images/alarm.png") no-repeat;
+        -webkit-background-size: 100% 100%;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index 4895eea..b0a4e70 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -11,22 +11,44 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean,getShelterPosition } from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Water',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'流场',value:'***',color:'#00f5ff'},
-        {name:'流速',value:'***',color:'#00f5ff'},
-        {name:'流向',value:'***',color:'#00f5ff'},
-        {name:'水深',value:'***',color:'#00f5ff'},
-        {name:'波浪预报',value:'*****************************************',color:'#50C55C'}
+        // {name:'流场',value:'***',color:'#00f5ff'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        // {name:'流向',value:'***',color:'#00f5ff'},
+        // {name:'水深',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'}
 
         ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            // this.data[0].value = res.data.
+            this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+            // this.data[3].value = res.data.
+            this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + '米\n' +
+              '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + '米'
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -41,10 +63,11 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
+      padding-right: 10px;
       display: flex;
       flex-direction: column;
       flex: 1;
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 082c0a2..32d5416 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -11,19 +11,57 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean, getTyphoonList,getShelterPosition} from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Weather',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'风向',value:'328.5°',color:'#00f5ff'},
-        {name:'气象指标',value:'6.7米/秒（四级风）',color:'#50C55C'},
+        {name:'风速风向',value:'***°',color:'#00f5ff'},
+        {name:'海温',value:'',color:'#50C55C'},
+        {name:'气压',value:'',color:'#50C55C'},
+        {name:'海拔',value:'',color:'#50C55C'},
+        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
         {name:'台风预报',value:'********************************************',color:'#50C55C'},
       ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            this.data[0].value =  res.data.windSpeed + 'm/s  '+res.data.windDir + '°'
+            this.data[1].value = res.data.temperature + '℃ '
+            this.data[2].value = res.data.pressure + 'hPa '
+            this.data[3].value = res.data.altitude + '米 '
+            this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + '米 '
+            this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + '米 '
+          }
+        })
+      }
+    })
+    getTyphoonList().then(res => {
+      if (res.code === 200) {
+         if(res.data.length===0) {this.data[6].value = '暂无台风'}
+         else {
+           this.data[6].value = ''
+           for(let i=0;i<res.data.length;i++){
+             this.data[6].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+           }
+         }
+      }
+    })
   },
   methods: {
   }
@@ -38,7 +76,7 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index 9878745..f387186 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -5,7 +5,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="台风报警">
-              <el-input v-model="form.windDistance">
+              <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -13,7 +13,7 @@
         </el-col>
         <el-col :span="10">
           <el-form-item label="风速报警">
-              <el-input v-model="form.windSpeed">
+              <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
               </el-input>
@@ -24,15 +24,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="船舶报警">
-              <el-input v-model="form.ship">
-                <template slot="prepend">小于</template>
-                <template slot="append">海里</template>
-              </el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="岛屿报警">
-              <el-input v-model="form.islands">
+              <el-input v-model="form.shipDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -43,7 +35,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="电量报警">
-              <el-input v-model="form.electric">
+              <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
               </el-input>
@@ -51,7 +43,7 @@
         </el-col>
         <el-col :span="10">
           <el-form-item label="位置报警">
-              <el-input v-model="form.position">
+              <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -62,7 +54,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="通信信号强度">
-              <el-input v-model="form.socket">
+              <el-input v-model="form.satelliteSignal">
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -80,6 +72,7 @@
 
 <script>
   import axios from 'axios'
+  import { alarmUpdate,alarmRecentValue } from "@/api/alarm"
   export default {
     name: 'Alarm',
     components: {},
@@ -87,13 +80,12 @@
       return {
         list: [],
         form: {
-          windDistance:'',
-          windSpeed:'',
-          ship:'',
-          islands:'',
-          electric :'',
-          position:'',
-          socket:''
+          typhoonDistance:'',
+          typhoonSpeed:'',
+          shipDistance:'',
+          robotBattery :'',
+          robotDistance:'',
+          satelliteSignal:''
         }
       }
     },
@@ -104,8 +96,21 @@
       this.init()
     },
     methods: {
+      onSubmit(){
+        alarmUpdate(this.form).then(res => {
+          if (res.code === 200) {
+            this.$message.success('阈值设置成功')
+             this.init()
+          }
+        })
+      },
       init(){
         console.log('获取当前值')
+        alarmRecentValue().then(res => {
+          if (res.code === 200) {
+            this.form = res.data
+          }
+        })
       },
       read(){
         var that = this
diff --git a/src/views/setting/setting.vue b/src/views/setting/setting.vue
index 7eca3ee..163b5d3 100644
--- a/src/views/setting/setting.vue
+++ b/src/views/setting/setting.vue
@@ -50,7 +50,6 @@
   },
   methods: {
     handleClick(val) {
-      console.log(val.index)
       let ref = this.list[val.index]
       console.log(ref)
       this.$refs[`${ref}`].init()

diff --git a/public/config/alarm.json b/public/config/alarm.json
index c527de5..aeff693 100644
--- a/public/config/alarm.json
+++ b/public/config/alarm.json
@@ -1,9 +1,8 @@
 {
-  "windDistance":"",
-  "windSpeed":"",
-  "ship":"",
-  "islands":"",
-  "electric":"",
-  "position":"",
-  "socket":""
+  "typhoonDistance":"",
+  "typhoonSpeed":"",
+  "shipDistance":"",
+  "robotBattery":"",
+  "robotDistance":"",
+  "satelliteSignal":""
 }
diff --git a/public/config/socket.json b/public/config/socket.json
index 2a34a72..e729948 100644
--- a/public/config/socket.json
+++ b/public/config/socket.json
@@ -1,15 +1,6 @@
 {
-  "socketType": "天通卫星通信",
-  "aisAddress":"",
-  "aisTime":"",
-  "aisStatus":"",
-  "hydAddress":"",
-  "hydTime":"",
-  "hydStatus":"",
-  "swAddress":"",
-  "swTime":"",
-  "swStatus":"",
-  "flyAddress":"",
-  "flyTime":"",
-  "flyStatus":""
+  "aisIp":"",
+  "envIp":"",
+  "shelterIp":"",
+  "robotIp":""
 }
diff --git a/src/api/alarm.js b/src/api/alarm.js
new file mode 100644
index 0000000..574357e
--- /dev/null
+++ b/src/api/alarm.js
@@ -0,0 +1,32 @@
+/**
+ * 报警接口
+ */
+import request from '@/utils/request'
+
+
+// 修改当前阈值
+export function alarmUpdate(params) {
+  return request({
+    url: 'alarm/update',
+    method: 'post',
+    data:params
+  })
+}
+
+// 获取最新阈值
+export function alarmRecentValue() {
+  return request({
+    url: 'alarm/recentValue',
+    method: 'get',
+    params:{}
+  })
+}
+
+// 获取报警列表
+export function getAlarmList(params) {
+  return request({
+    url: 'alarm/alarmRecordsPage',
+    method: 'get',
+    params:params
+  })
+}
diff --git a/src/api/robot.js b/src/api/robot.js
index 71b8975..acd32c2 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -7,7 +7,7 @@
 // 水下机器人列表
 export function getRobotList() {
   return request({
-    url: 'robot/list',
+    url: 'shelter/robotList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,28 @@
 // 水下机器人详情
 export function getRobotDetail(robotId) {
   return request({
-    url: 'robot/detail/'+robotId,
+    url: 'shelter/robotDetail/'+robotId,
     method: 'get',
     params: {
       // robotId: robotId
     }
   })
 }
+
+// 历史轨迹
+export function getRobotHistory(params) {
+  return request({
+    url: 'shelter/routeHistory',
+    method: 'get',
+    params: params
+  })
+}
+
+// 机器人当前任务
+export function getRobotTask(robotId) {
+  return request({
+    url: 'task/robotTask/'+robotId,
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/api/ship.js b/src/api/ship.js
index 4e69d1d..9031ca2 100644
--- a/src/api/ship.js
+++ b/src/api/ship.js
@@ -16,13 +16,11 @@
   })
 }
 
-// 台风详情
-export function getTyphoonDetail(typhoonId) {
+//调用次数
+export function getShipLog() {
   return request({
-    url: 'typhoon/detail',
+    url: 'ship/log',
     method: 'get',
-    params: {
-      typhoonId: typhoonId
-    }
+    params:{}
   })
 }
diff --git a/src/api/typhoon.js b/src/api/typhoon.js
index 64cbc3d..d35c29a 100644
--- a/src/api/typhoon.js
+++ b/src/api/typhoon.js
@@ -7,7 +7,7 @@
 // 台风列表
 export function getTyphoonList() {
   return request({
-    url: 'typhoon/list',
+    url: 'environment/typhoonList',
     method: 'get',
     params:{}
   })
@@ -16,10 +16,46 @@
 // 台风详情
 export function getTyphoonDetail(typhoonId) {
   return request({
-    url: 'typhoon/detail',
+    url: 'environment/typhoonDetail',
     method: 'get',
     params: {
       typhoonId: typhoonId
     }
   })
 }
+
+// 洋流水文数据
+export function getTyphoonOcean(params) {
+  return request({
+    url: 'environment/ocean',
+    method: 'get',
+    params: params
+  })
+}
+
+// 方舱当前位置
+export function getShelterPosition() {
+  return request({
+    url: 'shelter/position',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 通信信号强度
+export function getSatelliteSignal() {
+  return request({
+    url: 'shelter/satelliteSignal',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 气象站
+export function getMeteorology() {
+  return request({
+    url: 'environment/meteorology',
+    method: 'get',
+    params: {}
+  })
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..c5e586f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,6 +15,7 @@
     if (store.getters.token) {
       console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
     }
     return config
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index e7c3f12..a610faf 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -7,37 +7,48 @@
     </div>
     <div ref="body" class="body">
       <left ref="left" class="left"/>
-      <div ref="right" class="right">
+      <div ref="right" class="middle">
         <div class="title">{{active}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
-        <div ref="demo1"/>
+        <div ref="device"/>
       </div>
+      <right ref="devright" class="right"/>
     </div>
   </div>
 </template>
 
 <script>
 
-import { getRobotList,getRobotDetail } from '@/api/robot'
+import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
 import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import OrbitControls from 'three-orbitcontrols'
 import dat from 'dat.gui'
+import Right from "./right";
+var refresh = false
 export default {
   name: 'Device',
-  components: { Left,ImageBlock, THREE, dat,OrbitControls},
+  components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
       active: '飞翼滑翔机一号',
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
+      arr:[],
       controls: null,
       scene: null,
+      gltf: null,
       camera: null,
       renderer: null,
       plane:null,
+      paramsThree: {
+        modelName: '', // .glb模型的文件名字
+        name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
+      },
       data:[
         // {name:'飞翼滑翔机一号',gltf:''},
         // {name:'飞翼滑翔机二号',gltf:''},
@@ -55,15 +66,32 @@
       this.init()
     })
   },
+  watch:{
+    'camera.rotation.x':{
+      handler: function() {
+        this.pitch = (this.camera.rotation.x/Math.PI*180+this.arr[1]).toFixed(2) + '°'
+        this.roll = (this.camera.rotation.y/Math.PI*180+this.arr[0]).toFixed(2) + '°'
+        this.heading = (this.camera.rotation.z/Math.PI*180+this.arr[2]).toFixed(2) + '°'
+      }
+    }
+  },
   methods: {
     btnClick(val){
       this.active = val.name
+      getRobotTask(val.id).then(res => {
+        if (res.code === 200) {
+          this.$refs.left.initTask(res.data)
+        }
+      })
       getRobotDetail(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.init(res.data)
+          this.$refs.devright.init(res.data)
           this.roll = res.data.rollAngle + '°'
           this.pitch = res.data.pitchAngle + '°'
           this.heading = res.data.headingAngle + '°'
+          this.arr = [res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle]
+          this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
         }
       })
     },
@@ -71,11 +99,58 @@
       this.initList()
       this.initMesh()
     },
+    initModel(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        if (objM) this.scene.remove(objM)
+        refresh = true
+      }
+      if(name==='') return
+      const loader = new STLLoader();
+      loader.load(`${process.env.BASE_URL}model/${name}.stl`, function ( geometry ) {
+
+        const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200 } );
+        const mesh = new THREE.Mesh( geometry, material );
+        mesh.name = name
+        mesh.position.set( 0,0,0);
+        mesh.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        mesh.scale.set( 0.03, 0.03, 0.03 );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        that.scene.add( mesh );
+        that.paramsThree.modelName = name
+        that.gltf = mesh
+      } );
+    },
+    addShadowedLight( x, y, z, color, intensity ) {
+
+      const directionalLight = new THREE.DirectionalLight( color, intensity );
+      directionalLight.position.set( x, y, z );
+      this.scene.add( directionalLight );
+
+      directionalLight.castShadow = true;
+
+      const d = 1;
+      directionalLight.shadow.camera.left = - d;
+      directionalLight.shadow.camera.right = d;
+      directionalLight.shadow.camera.top = d;
+      directionalLight.shadow.camera.bottom = - d;
+
+      directionalLight.shadow.camera.near = 1;
+      directionalLight.shadow.camera.far = 4;
+
+      directionalLight.shadow.bias = - 0.002;
+
+    },
     initList(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:''}
+            return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
           this.btnClick(this.data[0])
         }
@@ -84,40 +159,32 @@
     initMesh () {
       this.scene = new THREE.Scene() // 场景
       this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
-      this.camera.position.x = -20
-      this.camera.position.y = 40
-      this.camera.position.z = 30
+      this.camera.position.set( 0, 0, 30 );
       this.camera.lookAt(this.scene.position)
 
       this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
+      this.renderer.setClearColor(0x179AC6, 1); //设置背景颜色
       this.renderer.setSize(this.$refs.right.clientWidth,this.$refs.right.clientHeight)
       this.renderer.shadowMapEnabled = true // 开启阴影
 
-      let axes = new THREE.AxisHelper(20) // 坐标轴
+      this.scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
-      let planeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}) // 材质
-      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
-      this.plane.rotation.x = -0.5 * Math.PI
-      this.plane.position.x = 0
-      this.plane.position.y = 0
-      this.plane.position.z = 0
-      this.plane.receiveShadow = true
+      this.addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+      this.addShadowedLight( 0.5, 1, - 1, 0xffffff, 1 );
 
-
-      let spotLight = new THREE.SpotLight(0xffffff)
-      spotLight.position.set(-40, 60, -10)
-      spotLight.castShadow = true
-
-      this.scene.add(axes) // 场景添加坐标轴
-      this.scene.add(this.plane) // 向该场景中添加物体
-      this.scene.add(spotLight)
-
-      this.$refs.demo1.append(this.renderer.domElement)
+      this.$refs.device.append(this.renderer.domElement)
       this.renderer.render(this.scene, this.camera)
       this.controls = new OrbitControls(this.camera, this.renderer.domElement);  //摄像机和容器div   注意事div
+      this.controls.mouseButtons = {
+        //左键平移
+        LEFT: THREE.MOUSE.PAN,
+        //滚轮滑动
+        MIDDLE: THREE.MOUSE.DOLLY,
+        //右键旋转
+        RIGHT: THREE.MOUSE.ROTATE
+      }
       // 使动画循环使用时阻尼或自转 意思是否有惯性
-      this.controls.enableDamping = true;
+      this.controls.enableDamping = false;
       //是否可以缩放
       this.controls.enableZoom = true;
       //是否自动旋转
@@ -131,11 +198,13 @@
       this.renderScene()
     },
     renderScene () {
-      let {controls, plane, scene, camera, renderer} = this
-      // plane.rotation.x += controls.rotationSpeed
-      // plane.rotation.y += controls.rotationSpeed
-      // plane.rotation.z += controls.rotationSpeed
+      let {scene, camera, renderer} = this
       requestAnimationFrame(this.renderScene)
+      if(refresh){
+        refresh = false
+        camera.position.set( 0, 0, 30 )
+        camera.lookAt(scene.position)
+      }
       renderer.render(scene, camera)
     }
   }
@@ -158,7 +227,7 @@
       left: 360px;
     }
     .angle{
-      color: #00DAE2;
+      color: #2f3244;
       font-size: 17px;
       position: absolute;
       top: 80px;
@@ -190,6 +259,15 @@
         padding-bottom: 20px;
       }
       .right{
+        margin-left: 20px;
+        margin-right: 10px;
+        min-width: 200px;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+      }
+      .middle{
         flex: 1;
         /*background-color: #E6A23C;*/
         margin-left: 20px;
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 6146ed3..8015759 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="content block-flex" style="height: 40%">
-      <div style="width: 100%;height: 30px;display: flex;">
+    <div class="content block-flex" style="height: 70%">
+      <div style="width: 100%;height: 40px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px;"/>
         <div class="position">{{position.lng}},{{position.lat}}</div>
       </div>
@@ -9,24 +9,17 @@
         <item :data="value"/>
       </div>
     </div>
-    <div class="content block-flex" style="height: 60%">
-      <div style="height: 130px;width: 50%;margin-top: -10px" v-for="(value,key,index) in data" :key="index">
-        <guage :rate="value.data" :title="value.title"/>
-        <div class="guage-title">{{value.title}}</div>
-      </div>
-      <div style="height: 130px;width: 50%;margin: -20px 0px" v-for="(value,key,index) in data0" :key="index">
-        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
-      </div>
-      <div class="block" v-for="(value,key,index) in data1" :key="index">
+    <div class="content" style="height: 30%">
+      <item class="block" style="height: 40px" :data="task"/>
+      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
         <item :data="value"/>
       </div>
-    </div>
-    <div class="content" style="height: 130px">
-      <item class="block" style="height: 30px" :data="task"/>
-      <div class="block" style="height: 30px" v-for="(value,key,index) in list" :key="index">
-        <item :data="value"/>
+      <div style="color: white;font-size: 15px">
+        <div class="block" style="height: 25px">{{spend.name}}</div>
+        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
       </div>
-      <item class="block" style="height: 30px" :data="spend"/>
+
+
     </div>
   </div>
 </template>
@@ -54,6 +47,10 @@
         {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
         {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
+        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
+        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
+        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
+        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
       data:[
         {
@@ -96,17 +93,17 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
-      this.initTask()
+      // this.initTask()
   },
   methods: {
     init(val){
-          this.position.lat = val.lat
-          this.position.lng = val.lng
+          this.position.lat = val.lat.toFixed(7)
+          this.position.lng = val.lng.toFixed(7)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -120,29 +117,72 @@
           this.data0[0].data= val.instrumentV
           this.data0[1].data= val.powerV
           // this.data1[0].value= val.powerV
-          this.data1[1].value= val.targetDistance
-          this.data1[2].value= val.targetDirection
-          this.data1[3].value= val.targetHertz
+          this.device[7].value= val.targetDistance
+          this.device[8].value= val.targetDirection
+          this.device[9].value= val.targetHertz
     },
-    initTask(){
-      switch (this.task.value) {
-        case '驻留':
-          this.list = []
-          this.list.push(this.data2[2])
-          this.list.push(this.data2[3])
+    initTask(val){
+      console.log(val)
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      var dateBegin = new Date(val.createTime.replace(/-/g, "/"))
+      var dateEnd = new Date()
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
+      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
+      //计算相差分钟数
+      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
+      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
+      //计算相差秒数
+      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
+      var seconds=Math.round(leave3/1000)
+      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+      switch (val.taskType) {
+        case '1':
+          this.task.value='定向'
+          let str = ''
+          for(let i=0;i<val.directedTask.directCount;i++){
+            str = str + val.directedTask.headingAngle[i] + '°;'
+          }
+          this.list = [
+            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:str, unit:'',color:'#ffffff'}
+            ]
           break
-        case '投放':
-          this.list = []
-          this.list.push(this.data2[4])
-          this.list.push(this.data2[5])
+        case '2':
+          this.task.value='航路点'
+          this.list = [
+            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+          ]
           break
-        case '航路点':
-          this.list = []
-          this.list.push(this.data2[0])
+        case '3':
+          this.task.value='定深直航'
+          this.list = [
+            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
+          ]
+          break
+        case '4':
+          this.task.value='驻留'
+          this.list = [
+            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
+            ]
+          break
+        case '5':
+          this.task.value='投放'
+          this.list = [
+            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
+            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
+            ]
           break
         default:
-          this.list.push(this.data2[0])
-          this.list.push(this.data2[1])
+          this.task.value='任务终止'
+          this.list = []
           break
       }
     }
@@ -176,9 +216,9 @@
       flex-wrap: wrap;
     }
     .content{
-      margin: 5px 0px;
+      margin: 10px 0px;
       width: 100%;
-      padding: 10px 20px;
+      padding: 20px;
       background: url("../../assets/images/bg.png") no-repeat;
       -webkit-background-size: 100% 100%;
       background-size: 100% 100%;
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 8c62402..1db6259 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -50,7 +50,7 @@
     }
     .value{
       color: white;
-      width: 50px;
+      width: 60px;
       font-size: 15px;
     }
     .value1{
diff --git a/src/views/overview/components/item.vue b/src/views/overview/components/item.vue
index c8f047a..dca1ea3 100644
--- a/src/views/overview/components/item.vue
+++ b/src/views/overview/components/item.vue
@@ -45,10 +45,28 @@
     .value{
       flex: 1;
       float: left;
-      white-space:normal;
+      overflow:auto;
+      /*white-space:normal;*/
       word-break:break-all;
       word-wrap:break-word;
-      padding-left: 20px;
+      padding-left: 10px;
+      white-space:pre-wrap;
+      max-height: 90px;
     }
   }
+  //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+  ::-webkit-scrollbar{
+    width: 5px;
+    height: 5px;
+  }
+  //定义滑块 内阴影+圆角
+  ::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(93, 162, 180, 0.3) !important;
+  }
+  //定义滚动条轨道 内阴影+圆角
+  ::-webkit-scrollbar-track{
+    border-radius: 1em;
+    background-color: rgba(14, 57, 149, 0.1) !important;
+  }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 5cf0ab7..50fc0b3 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -2,10 +2,37 @@
   <div class="panel-container">
         <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <el-checkbox-group v-model="checked" @change="handleChecked">
+      <el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
         <el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
       </el-checkbox-group>
-
+      <el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
+        <el-option
+          v-for="item in resultList"
+          :key="item.time"
+          :label="item.time"
+          :value="item.time">
+        </el-option>
+      </el-select>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+        <el-option
+          v-for="item in taskList"
+          :key="item.id"
+          :label="item.createTime"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-model="timeRange"
+        @change="initroute(true)"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="轨迹开始日期"
+        end-placeholder="轨迹结束日期"
+        size="small"
+        style="margin: 0px 10px">
+      </el-date-picker>
     </div>
   </div>
 </template>
@@ -13,6 +40,8 @@
   import { getRobotList } from '@/api/robot'
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
+  import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
+  import { getRobotHistory } from '@/api/robot'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
@@ -25,22 +54,181 @@
       return {
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
+        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
+        route:null,
+        result:null,
         wind:null,
         ship:null,
         robot:null,
         map: null,
         reset_btn: null,
-        robotList:[]
+        robotList:[],
+        taskList:[],
+        resultList:[],
+        timeRange:[],
+        planTime:'',
+        taskId:''
       };
     },
     mounted() {
       this.initMap();
+      this.initOption()
     },
     methods: {
       handleChecked(val){
+        this.taskId = ''
+        this.planTime = ''
+        this.timeRange = []
         this.initwind(val.indexOf('台风数据')!==-1)
         this.initais(val.indexOf('AIS船只')!==-1)
+        this.initroute(val.indexOf('历史轨迹')!==-1)
+        this.initresult(val.indexOf('算法结果')!==-1)
+      },
+      initOption(){
+        getTaskList().then(res => {
+          if (res.code === 200) {
+            this.taskList = res.data
+          }
+        })
+        getTaskTimeList().then(res => {
+          if (res.code === 200) {
+            this.resultList = res.data
+          }
+        })
+    },
+      initroute(isShow){
+        if(this.route!==null){
+          this.route.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          taskId:this.taskId,
+          startDate:'',
+          endDate:''
+        }
+        if (this.timeRange && this.timeRange.length > 0) {
+          params.startDate = this.timeRange[0]
+          params.endDate = this.timeRange[1]
+        }
+        let myStyle = {
+          'color': '#409eff',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getRobotHistory(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            for (const robot of res.data) {
+              let pathlist=[]
+              for(const point of robot){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' +  point.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon })
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.route = L.layerGroup(layers)
+            this.map.addLayer(this.route)
+          }
+        })
+      },
+      initresult(isShow){
+        if(this.result!==null){
+          this.result.clearLayers()
+        }
+        if(!isShow) return
+        let params ={
+          planTime:this.planTime
+        }
+        let myStyle = {
+          'color': '#50c55c',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        let myStyle1 = {
+          'color': '#f98e11',
+          'weight': 4.5,
+          'opacity': 0.7
+        }
+        getCurrentPlan(params).then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            let pathlist=[]
+            // 规划区域 0：多边形  1：圆形
+            if(res.data.regionResult.contour==='0'){
+              for(const point of res.data.regionResult.regionPoints){
+                pathlist.push( [point.lat, point.lng])
+              }
+              let area = L.polygon(pathlist, myStyle1)
+              layers.push(area)
+            } else if(res.data.regionResult.contour==='1'){
+
+              let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 0.7,
+                radius: res.data.regionResult.regionRadius*1000
+              })
+              layers.push(area)
+            }
+            pathlist=[]
+
+            //机器规划点
+            let arr = res.data.regionResult.robotIds.split(',')
+            for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
+              let point = res.data.regionResult.robotTargets[i]
+              pathlist.push( [point.lat, point.lng])
+              var myIcon = L.divIcon({
+                html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' +  arr[i] + '</div>',
+                className: '',
+                iconSize:[25,25]
+              });
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 规划路线
+            console.log( res.data.routeResult )
+            for (const robot of res.data.routeResult) {
+              pathlist=[]
+              if(robot.routeModel==='') continue
+              for(const point of robot.routeModel.robotRoutes){
+                pathlist.push( [point.lat, point.lng])
+                var myIcon = L.divIcon({
+                  html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' +  robot.robotId + '</div>',
+                  className: '',
+                  iconSize:[25,25]
+                });
+                let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
+                     </div>`
+                let popup = L.popup().setContent(str)
+                let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
+                layers.push(marker)
+              }
+              let line = L.polyline(pathlist, myStyle)
+              layers.push(line)
+            }
+            this.result = L.layerGroup(layers)
+            this.map.addLayer(this.result)
+          }
+        })
       },
       initrobot(){
         let icon = L.icon({
@@ -121,11 +309,11 @@
           this.ship.clearLayers()
         }
         if(isShow){
+          let layers=[]
           for (let r = 0; r < this.robotList.length ;r++) {
             let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
             getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
-                let layers=[]
                 for (let i = 0; i < res.data.length; i++) {
                   const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
                   let str =  `
@@ -134,13 +322,7 @@
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	ais状态：</label>${aisStatus}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	Imo号：</label>${imoNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶呼号：</label>${shipCallNum}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	船舶类型：</label>${shipType}</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
@@ -149,21 +331,23 @@
                   let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
                   layers.push(marker)
                 }
-                this.ship = L.layerGroup(layers)
-                this.map.addLayer(this.ship)
+                if(r===  this.robotList.length-1){
+                  this.ship = L.layerGroup(layers)
+                  this.map.addLayer(this.ship)
+                }
               }
             })
           }
-
         }
       },
       initMap() {
         this.map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
         });
-        this.map.setView(this.center, 7);
+        // http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
+        this.map.setView(this.center, 2);
         var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
-          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
+          layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
           crs: L.CRS.EPSG3857,
@@ -195,14 +379,12 @@
   }
   .select-content{
     position:absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 150px;
-    width: 150px;
-    background-color: #90939955;
-    padding-top: 20px;
-    padding-left: 20px;
-    z-index: 10000;
+    left: 60px;
+    top: 0px;
+    height: 42px;
+    width: 1200px;
+    padding-top: 10px;
+    z-index: 1000;
+    display: flex;
   }
-
 </style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index 92ae1f6..ba9199d 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -3,6 +3,7 @@
     <div class="title">
       AIS数据接收
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
+      (调用{{times}}次)
     </div>
     <position class="position"/>
     <weather class="weather"/>
@@ -15,15 +16,39 @@
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
   import Water from '@/views/overview/water'
+  import { getShipShipsInCircle, getShipLog } from '@/api/ship'
+  import { getShelterPosition } from '@/api/typhoon'
 export default {
   name: 'Left',
   components: { Weather, Water, Position},
   data() {
     return {
-      color: '#00ff01'
+      color: '#00ff01',
+      times:0
     }
   },
   created() {
+    getShipLog().then(res =>{
+      if (res.code === 200) {
+        this.times = res.data
+      }
+    })
+    getShelterPosition().then(res => { // 方舱位置
+      if (res.code === 200) {
+        this.position.lat = res.data.lat.toFixed(6)
+        this.position.lng = res.data.lng.toFixed(6)
+        let rgn = res.data.lat.toFixed(6) * 600000 + ',' + res.data.lng.toFixed(6) * 600000 + ',80'
+        getShipShipsInCircle(rgn).then(res => {
+          if (res.code === 200) {
+            if(res.data.length === 0 ) this.color = '#dddddd'
+            else {
+              if(res.data[0].aisStatus	==='0') this.color = '#dddddd'
+              else  this.color = '#00ff01'
+            }
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -49,19 +74,19 @@
       }
     }
     .position{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 25%;
+      height: 38%;
     }
     .weather{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 30%;
+      height: 42%;
     }
     .water{
-      margin: 10px 0px;
+      margin: 5px 0px;
       width: 100%;
-      height: 45%;
+      height: 20%;
     }
   }
 </style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff33350..6246e33 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -32,12 +32,18 @@
   created() {
     this.initRobot()
   },
+  mounted() {
+    this.webSocket()
+  },
   methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
     initRobot(){
       getRobotList().then(res => {
         if (res.code === 200) {
           this.data = res.data.map(item => {
-            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
           })
         }
       })
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index c88b81f..9e3e813 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -16,6 +16,8 @@
 <script>
 
 import Item from "./components/item";
+import { getTyphoonOcean,getShelterPosition,getMeteorology } from "@/api/typhoon"
+import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Position',
   components: {Item},
@@ -27,14 +29,34 @@
         lat:'39.342181'
       },
       data:[
-        {name:'温度',value:'30.5°C',color:'#f3232c'},
-        {name:'海拔',value:'291',color:'#eacb18'},
-        {name:'气压',value:'1011.9hPa',color:'#00f5ff'},
-        {name:'浪高',value:'3.7m',color:'#50C55C'},
+        {name:'温度',value:'***°C',color:'#f3232c'},
+        {name:'湿度',value:'***',color:'#eacb18'},
+        {name:'气压',value:'***hPa',color:'#50C55C'},
+        {name:'风速风向',value:'***',color:'#00f5ff'},
+        {name:'累计降雨',value:'***',color:'#00f5ff'},
+        {name:'累计冰雹',value:'***',color:'#00f5ff'},
+        {name:'降雨时长',value:'***',color:'#00f5ff'},
+        {name:'冰雹时长',value:'***',color:'#00f5ff'},
+        {name:'降雨强度',value:'***',color:'#00f5ff'},
+        {name:'冰雹强度',value:'***',color:'#00f5ff'}
       ]
     }
   },
-  created() {
+  mounted() {
+    getMeteorology().then(res => {
+      if (res.code === 200) {
+        this.data[0].value = res.data.weather.temperature
+        this.data[1].value = res.data.weather.humidity
+        this.data[2].value = res.data.weather.pressure
+        this.data[3].value = res.data.wind.speed + ' ' +  res.data.wind.degree + '°'
+        this.data[4].value = res.data.rain.sumRain
+        this.data[5].value = res.data.rain.sumHail
+        this.data[6].value = res.data.rain.sumRainTime
+        this.data[7].value = res.data.rain.sumHailTime
+        this.data[8].value = res.data.rain.rainStrength
+        this.data[9].value = res.data.rain.hailStrength
+      }
+    })
   },
   methods: {
   }
@@ -49,7 +71,7 @@
     .title{
       color: #00f5ff;
       font-size: 17px;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index 772eb7d..a8fdf0a 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -1,41 +1,63 @@
 <template>
   <div>
     <div class="right">
-      <div style="height: 50px">
+      <div style="height: 40px">
         <div class="title">{{data.name}}
           <el-image :src="img" style="width: 30px;height: 30px;margin: 0px 5px"/>
           {{data.value}}
           <div class="btn" @click="setting">设 置</div>
+          <div class="alarm" @click="alarm"/>
         </div>
       </div>
       <overview style="flex: 1;width: 100%;"/>
     </div>
     <setting v-show="editShow" ref="setting" @watchChild="" />
+    <alarm v-show="alarmShow" ref="alarm" @watchChild="" />
   </div>
 </template>
 
 <script>
   import Overview from "./overview";
   import Setting from "../setting/setting";
+  import Alarm from "../alarm/alarm";
+  import { getSatelliteSignal } from "@/api/typhoon"
 export default {
   name: 'Right',
-  components: {Overview,Setting},
+  components: {Alarm, Overview,Setting},
   data() {
     return {
       img:require('@/assets/images/green.png'),
       editShow: false, // 编辑组件是否显示
+      alarmShow: false, // 编辑组件是否显示
       data:{
         name: '天通卫星通信',
-        value: '666kb/s'
-      }
+        value: 'kb/s'
+      },
+      timer:''
     }
   },
-  created() {
+  mounted() {
+    this.search()
+    this.timer = setInterval(this.search, 10000);
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
+    search(){
+      getSatelliteSignal().then(res => {
+        if (res.code === 200) {
+          this.data.value = res.data.signalValue + 'kb/s'
+        }
+      })
+    },
     setting(){
       this.editShow = true
       this.$refs.setting.initDialog('create')
+    },
+    alarm(){
+      this.alarmShow = true
+      this.$refs.alarm.initDialog('create')
     }
   }
 }
@@ -75,6 +97,16 @@
           color: #00f5ff;
         }
       }
+      .alarm{
+        cursor: pointer;
+        width: 25px;
+        margin-left: 15px;
+        height: 25px;
+        line-height: 25px;
+        background: url("../../assets/images/alarm.png") no-repeat;
+        -webkit-background-size: 100% 100%;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index 4895eea..b0a4e70 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -11,22 +11,44 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean,getShelterPosition } from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Water',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'流场',value:'***',color:'#00f5ff'},
-        {name:'流速',value:'***',color:'#00f5ff'},
-        {name:'流向',value:'***',color:'#00f5ff'},
-        {name:'水深',value:'***',color:'#00f5ff'},
-        {name:'波浪预报',value:'*****************************************',color:'#50C55C'}
+        // {name:'流场',value:'***',color:'#00f5ff'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        // {name:'流向',value:'***',color:'#00f5ff'},
+        // {name:'水深',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'}
 
         ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            // this.data[0].value = res.data.
+            this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+            // this.data[3].value = res.data.
+            this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + '米\n' +
+              '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + '米'
+          }
+        })
+      }
+    })
   },
   methods: {
   }
@@ -41,10 +63,11 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
+      padding-right: 10px;
       display: flex;
       flex-direction: column;
       flex: 1;
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 082c0a2..32d5416 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -11,19 +11,57 @@
 
 <script>
   import Item from "./components/item";
+  import { getTyphoonOcean, getTyphoonList,getShelterPosition} from "@/api/typhoon"
+  import { dateToString } from '@/utils/formatDate'
 export default {
   name: 'Weather',
   components: {Item},
   data() {
     return {
       data:[
-        {name:'风向',value:'328.5°',color:'#00f5ff'},
-        {name:'气象指标',value:'6.7米/秒（四级风）',color:'#50C55C'},
+        {name:'风速风向',value:'***°',color:'#00f5ff'},
+        {name:'海温',value:'',color:'#50C55C'},
+        {name:'气压',value:'',color:'#50C55C'},
+        {name:'海拔',value:'',color:'#50C55C'},
+        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
         {name:'台风预报',value:'********************************************',color:'#50C55C'},
       ]
     }
   },
-  created() {
+  mounted() {
+    getShelterPosition().then(res => {
+      if (res.code === 200) {
+        let params = {
+          lng: res.data.lng,
+          lat: res.data.lat,
+          date: dateToString(new Date(), 'y-m-d'),
+          days: 0,
+          hour: new Date().getHours()
+        }
+        getTyphoonOcean(params).then(res => {
+          if (res.code === 200) {
+            this.data[0].value =  res.data.windSpeed + 'm/s  '+res.data.windDir + '°'
+            this.data[1].value = res.data.temperature + '℃ '
+            this.data[2].value = res.data.pressure + 'hPa '
+            this.data[3].value = res.data.altitude + '米 '
+            this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + '米 '
+            this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + '米 '
+          }
+        })
+      }
+    })
+    getTyphoonList().then(res => {
+      if (res.code === 200) {
+         if(res.data.length===0) {this.data[6].value = '暂无台风'}
+         else {
+           this.data[6].value = ''
+           for(let i=0;i<res.data.length;i++){
+             this.data[6].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+           }
+         }
+      }
+    })
   },
   methods: {
   }
@@ -38,7 +76,7 @@
     .title{
       font-size: 17px;
       color: #00f5ff;
-      margin: 20px 0px 25px 20px;
+      margin: 10px 0px 10px 20px;
     }
     .content{
       padding: 0px 20px;
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index 9878745..f387186 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -5,7 +5,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="台风报警">
-              <el-input v-model="form.windDistance">
+              <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -13,7 +13,7 @@
         </el-col>
         <el-col :span="10">
           <el-form-item label="风速报警">
-              <el-input v-model="form.windSpeed">
+              <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
               </el-input>
@@ -24,15 +24,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="船舶报警">
-              <el-input v-model="form.ship">
-                <template slot="prepend">小于</template>
-                <template slot="append">海里</template>
-              </el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="岛屿报警">
-              <el-input v-model="form.islands">
+              <el-input v-model="form.shipDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -43,7 +35,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="电量报警">
-              <el-input v-model="form.electric">
+              <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
               </el-input>
@@ -51,7 +43,7 @@
         </el-col>
         <el-col :span="10">
           <el-form-item label="位置报警">
-              <el-input v-model="form.position">
+              <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -62,7 +54,7 @@
       <el-row>
         <el-col :span="10">
           <el-form-item label="通信信号强度">
-              <el-input v-model="form.socket">
+              <el-input v-model="form.satelliteSignal">
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -80,6 +72,7 @@
 
 <script>
   import axios from 'axios'
+  import { alarmUpdate,alarmRecentValue } from "@/api/alarm"
   export default {
     name: 'Alarm',
     components: {},
@@ -87,13 +80,12 @@
       return {
         list: [],
         form: {
-          windDistance:'',
-          windSpeed:'',
-          ship:'',
-          islands:'',
-          electric :'',
-          position:'',
-          socket:''
+          typhoonDistance:'',
+          typhoonSpeed:'',
+          shipDistance:'',
+          robotBattery :'',
+          robotDistance:'',
+          satelliteSignal:''
         }
       }
     },
@@ -104,8 +96,21 @@
       this.init()
     },
     methods: {
+      onSubmit(){
+        alarmUpdate(this.form).then(res => {
+          if (res.code === 200) {
+            this.$message.success('阈值设置成功')
+             this.init()
+          }
+        })
+      },
       init(){
         console.log('获取当前值')
+        alarmRecentValue().then(res => {
+          if (res.code === 200) {
+            this.form = res.data
+          }
+        })
       },
       read(){
         var that = this
diff --git a/src/views/setting/setting.vue b/src/views/setting/setting.vue
index 7eca3ee..163b5d3 100644
--- a/src/views/setting/setting.vue
+++ b/src/views/setting/setting.vue
@@ -50,7 +50,6 @@
   },
   methods: {
     handleClick(val) {
-      console.log(val.index)
       let ref = this.list[val.index]
       console.log(ref)
       this.$refs[`${ref}`].init()
diff --git a/src/views/setting/socket.vue b/src/views/setting/socket.vue
index dd08ffd..7d5ae09 100644
--- a/src/views/setting/socket.vue
+++ b/src/views/setting/socket.vue
@@ -1,84 +1,64 @@
 <template>
   <div>
-    <el-radio-group v-model="form.socketType" style="padding: 15px 50px">
-      <el-radio label="天通卫星通信">天通卫星通信</el-radio>
-      <el-radio label="北斗卫星通信">北斗卫星通信</el-radio>
-      <el-radio label="铱星卫星通信">铱星卫星通信</el-radio>
-      <el-radio label="无线通信">无线通信</el-radio>
-      <el-radio label="4G通信">4G通信</el-radio>
-    </el-radio-group>
     <el-row class="socket-title">
-      <el-col :span="8">
+      <el-col :span="11">
         采集地址
       </el-col>
-      <el-col :span="8" :offset="1">
-        创建时间
-      </el-col>
+      <!--<el-col :span="8" :offset="1">-->
+        <!--创建时间-->
+      <!--</el-col>-->
      <el-col :span="4" :offset="1">
         通信状态
       </el-col>
     </el-row>
-    <el-form ref="form" :model="form" label-width="150px">
+    <el-form ref="form" :model="form" label-width="250px">
       <el-form-item label="AIS通信">
-        <el-col :span="9">
-          <el-autocomplete class="inline-input" v-model="form.aisAddress"
+        <el-col :span="12">
+          <el-autocomplete class="inline-input" v-model="form.aisIp "
             :fetch-suggestions="querySearch" @focus="setlist(aislist)">
             <template slot="prepend">http://</template>
           </el-autocomplete>
         </el-col>
-        <el-col :span="8" :offset="1">
-          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.aisTime" style="width: 100%;"/>
-        </el-col>
        <el-col :span="2" :offset="1">
-          <el-switch v-model="form.aisStatus"/>
+          <el-switch disabled v-model="status"/>
         </el-col>
       </el-form-item>
       <el-form-item label="水文气象通信">
-        <el-col :span="9">
-          <el-autocomplete class="inline-input" v-model="form.hydAddress"
-                           :fetch-suggestions="querySearch" @focus="setlist(hydlist)">
+        <el-col :span="12">
+          <el-autocomplete class="inline-input" v-model="form.envIp "
+                           :fetch-suggestions="querySearch" @focus="setlist(envlist)">
             <template slot="prepend">http://</template>
           </el-autocomplete>
         </el-col>
-        <el-col :span="8" :offset="1">
-          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.hydTime" style="width: 100%;"/>
-        </el-col>
        <el-col :span="2" :offset="1">
-          <el-switch v-model="form.hydStatus"/>
+          <el-switch disabled v-model="status"/>
         </el-col>
       </el-form-item>
       <el-form-item label="方舱指控软件通信">
-        <el-col :span="9">
-          <el-autocomplete class="inline-input" v-model="form.swAddress"
-                           :fetch-suggestions="querySearch" @focus="setlist(swlist)">
+        <el-col :span="12">
+          <el-autocomplete class="inline-input" v-model="form.shelterIp "
+                           :fetch-suggestions="querySearch" @focus="setlist(shelterlist)">
             <template slot="prepend">http://</template>
           </el-autocomplete>
         </el-col>
-        <el-col :span="8" :offset="1">
-          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.swTime" style="width: 100%;"/>
-        </el-col>
        <el-col :span="2" :offset="1">
-          <el-switch v-model="form.swStatus"/>
+          <el-switch disabled v-model="status"/>
         </el-col>
       </el-form-item>
       <el-form-item label="飞翼滑翔机通信">
-        <el-col :span="9">
-          <el-autocomplete class="inline-input" v-model="form.flyAddress"
-                           :fetch-suggestions="querySearch" @focus="setlist(flylist)">
+        <el-col :span="12">
+          <el-autocomplete class="inline-input" v-model="form.robotIp "
+                           :fetch-suggestions="querySearch" @focus="setlist(robotlist)">
             <template slot="prepend">http://</template>
           </el-autocomplete>
         </el-col>
-        <el-col :span="8" :offset="1">
-          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.flyTime" style="width: 100%;"/>
-        </el-col>
        <el-col :span="2" :offset="1">
-          <el-switch v-model="form.flyStatus"/>
+          <el-switch disabled v-model="status"/>
         </el-col>
       </el-form-item>
       <div style="text-align: center;margin-top: 40px">
         <el-button class="setting-btn" type="primary" @click="onSubmit">应 用</el-button>
         <el-button class="setting-btn" @click="read" style="margin-left: 20px">读取配置</el-button>
-        <!--<el-button @click="save">保存配置</el-button>-->
       </div>
     </el-form>
   </div>
@@ -86,30 +66,23 @@
 
 <script>
   import axios from 'axios'
+  import {getSystemRecentAddress,systemUpdate,historyAddress} from '@/api/system'
 export default {
   name: 'Socket',
   components: {},
   data() {
     return {
       list: [],
+      status:true,
       aislist: [{value:'10.64.9.0'},{value:'127.0.0.1'}],
-      swlist: [{value:'11.64.9.0'},{value:'127.0.0.1'}],
-      hydlist: [{value:'12.64.9.0'},{value:'127.0.0.1'}],
-      flylist: [{value:'13.64.9.0'},{value:'127.0.0.1'}],
+      shelterlist: [{value:'11.64.9.0'},{value:'127.0.0.1'}],
+      envlist: [{value:'12.64.9.0'},{value:'127.0.0.1'}],
+      robotlist: [{value:'13.64.9.0'},{value:'127.0.0.1'}],
       form: {
-        socketType: '天通卫星通信',
-        aisAddress:'',
-        aisTime:'',
-        aisStatus:'',
-        hydAddress:'',
-        hydTime:'',
-        hydStatus:'',
-        swAddress:'',
-        swTime:'',
-        swStatus:'',
-        flyAddress:'',
-        flyTime:'',
-        flyStatus:''
+        aisIp :'',
+        envIp :'',
+        shelterIp :'',
+        robotIp :''
       }
     }
   },
@@ -122,9 +95,44 @@
   methods: {
     init(){
       console.log('获取缓存列表，当前值')
+      getSystemRecentAddress().then(response => {
+        if(response.code === 200){
+          this.form.aisIp = response.data.aisIp
+          this.form.envIp = response.data.envIp
+          this.form.robotIp = response.data.robotIp
+          this.form.shelterIp = response.data.shelterIp
+        }
+      })
+      historyAddress('aisIp').then(response => {
+        if(response.code === 200){
+          this.aislist = response.data.map(item => {
+            return { value : item.ip }
+          })
+        }
+      })
+      historyAddress('envIp').then(response => {
+        if(response.code === 200){
+          this.envlist = response.data.map(item => {
+            return { value : item.ip }
+          })
+        }
+      })
+      historyAddress('robotIp').then(response => {
+        if(response.code === 200){
+          this.robotlist = response.data.map(item => {
+            return { value : item.ip }
+          })
+        }
+      })
+      historyAddress('shelterIp').then(response => {
+        if(response.code === 200){
+          this.shelterlist = response.data.map(item => {
+            return { value : item.ip }
+          })
+        }
+      })
     },
     setlist(list){
-      console.log(list)
       this.list = list
     },
     querySearch(queryString, cb) {
@@ -140,6 +148,13 @@
     },
     onSubmit() {
       console.log('submit!');
+      systemUpdate(this.form).then(response => {
+        if(response.code === 200){
+          this.$message.success('通信地址设置成功')
+          this.init()
+        }
+      })
+
     },
     save(){
       var str = JSON.stringify(this.form);
@@ -147,7 +162,6 @@
       console.log(fs)
       fs.writeFile('./config/socket.json', str, (err) => {
         if (err) {console.log(err);return;}
-
         console.log(`写入成功`);
       })
     },
@@ -165,7 +179,7 @@
 
 <style rel="stylesheet/scss" lang="scss">
   .socket-title{
-    margin-left: 150px;
+    margin-left: 250px;
     padding: 20px 0px;
     font-weight: bold;
     text-align: center;