diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index b0a4e70..896ac83 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -29,28 +29,31 @@
     }
   },
   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 + '米'
-          }
-        })
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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[3].value = res.data.
+              this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+            }
+          })
+        }
+      })
+    }
   }
 }
 </script>

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index b0a4e70..896ac83 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -29,28 +29,31 @@
     }
   },
   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 + '米'
-          }
-        })
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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[3].value = res.data.
+              this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+            }
+          })
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 32d5416..759380a 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="container">
-    <div class="title">气象指标</div>
+    <div class="title">洋流指标</div>
     <div class="content">
       <div class="block" v-for="(value,key,index) in data" :key="index">
-        <item :data="value"/>
+        <item :data="value" />
+      </div>
+    </div>
+    <div class="title" style="color:#50C55C">台风指标</div>
+    <div class="content">
+      <div class="block" v-for="(value,key,index) in data1" :key="index">
+        <item :data="value" />
       </div>
     </div>
   </div>
@@ -19,51 +25,62 @@
   data() {
     return {
       data:[
-        {name:'风速风向',value:'***°',color:'#00f5ff'},
-        {name:'海温',value:'',color:'#50C55C'},
-        {name:'气压',value:'',color:'#50C55C'},
-        {name:'海拔',value:'',color:'#50C55C'},
-        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'风速风向',value:'***°',color:'#50C55C'},
+        {name:'海温',value:'',color:'#00f5ff'},
+        {name:'气压',value:'',color:'#00f5ff'},
+        {name:'海拔',value:'',color:'#00f5ff'},
+        {name:'风浪方向/高度',value:'',color:'#50C55C'},
         {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
-        {name:'台风预报',value:'********************************************',color:'#50C55C'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'},
+      ],
+    data1:[
+      {name:'台风预报',value:'********************************************',color:'#50C55C'}
       ]
     }
   },
   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')
-           }
-         }
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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 + 'm '
+              this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + 'm '
+              this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + 'm '
+              this.data[6].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[7].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+
+            }
+          })
+        }
+      })
+      getTyphoonList().then(res => {
+        if (res.code === 200) {
+          if(res.data.length===0) {this.data1[0].value = '暂无台风'}
+          else {
+            this.data1[0].value = ''
+            for(let i=0;i<res.data.length;i++){
+              this.data1[0].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+            }
+          }
+        }
+      })
+    }
   }
 }
 </script>
@@ -77,6 +94,7 @@
       font-size: 17px;
       color: #00f5ff;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       padding: 0px 20px;
@@ -85,7 +103,7 @@
       flex: 1;
       .block{
         width: 100%;
-        height: 30px;
+        height: 38px;
       }
     }
   }

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index b0a4e70..896ac83 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -29,28 +29,31 @@
     }
   },
   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 + '米'
-          }
-        })
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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[3].value = res.data.
+              this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+            }
+          })
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 32d5416..759380a 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="container">
-    <div class="title">气象指标</div>
+    <div class="title">洋流指标</div>
     <div class="content">
       <div class="block" v-for="(value,key,index) in data" :key="index">
-        <item :data="value"/>
+        <item :data="value" />
+      </div>
+    </div>
+    <div class="title" style="color:#50C55C">台风指标</div>
+    <div class="content">
+      <div class="block" v-for="(value,key,index) in data1" :key="index">
+        <item :data="value" />
       </div>
     </div>
   </div>
@@ -19,51 +25,62 @@
   data() {
     return {
       data:[
-        {name:'风速风向',value:'***°',color:'#00f5ff'},
-        {name:'海温',value:'',color:'#50C55C'},
-        {name:'气压',value:'',color:'#50C55C'},
-        {name:'海拔',value:'',color:'#50C55C'},
-        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'风速风向',value:'***°',color:'#50C55C'},
+        {name:'海温',value:'',color:'#00f5ff'},
+        {name:'气压',value:'',color:'#00f5ff'},
+        {name:'海拔',value:'',color:'#00f5ff'},
+        {name:'风浪方向/高度',value:'',color:'#50C55C'},
         {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
-        {name:'台风预报',value:'********************************************',color:'#50C55C'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'},
+      ],
+    data1:[
+      {name:'台风预报',value:'********************************************',color:'#50C55C'}
       ]
     }
   },
   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')
-           }
-         }
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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 + 'm '
+              this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + 'm '
+              this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + 'm '
+              this.data[6].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[7].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+
+            }
+          })
+        }
+      })
+      getTyphoonList().then(res => {
+        if (res.code === 200) {
+          if(res.data.length===0) {this.data1[0].value = '暂无台风'}
+          else {
+            this.data1[0].value = ''
+            for(let i=0;i<res.data.length;i++){
+              this.data1[0].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+            }
+          }
+        }
+      })
+    }
   }
 }
 </script>
@@ -77,6 +94,7 @@
       font-size: 17px;
       color: #00f5ff;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       padding: 0px 20px;
@@ -85,7 +103,7 @@
       flex: 1;
       .block{
         width: 100%;
-        height: 30px;
+        height: 38px;
       }
     }
   }
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index f387186..6340c8e 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <el-form ref="form" :model="form" label-width="160px">
+    <el-form ref="dataForm" :model="form" :rules="rules" label-width="160px">
       <div class="alarm-title">气象水文</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="台风报警">
+          <el-form-item label="台风报警" prop="typhoonDistance">
               <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
@@ -12,7 +12,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="风速报警">
+          <el-form-item label="风速报警" prop="typhoonSpeed">
               <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
@@ -23,8 +23,8 @@
       <div class="alarm-title">AIS&电子海图</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="船舶报警">
-              <el-input v-model="form.shipDistance">
+          <el-form-item label="船舶报警" prop="shipDistance">
+              <el-input v-model="form.shipDistance" @keyup.native="value = oninput(value)">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -34,7 +34,7 @@
       <div class="alarm-title">水下机器人</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="电量报警">
+          <el-form-item label="电量报警" prop="robotBattery">
               <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
@@ -42,7 +42,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="位置报警">
+          <el-form-item label="位置报警" prop="robotDistance">
               <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
@@ -53,8 +53,8 @@
       <div class="alarm-title">通信信号</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="通信信号强度">
-              <el-input v-model="form.satelliteSignal">
+          <el-form-item label="通信信号强度" prop="satelliteSignal">
+              <el-input v-model="form.satelliteSignal" >
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -77,8 +77,23 @@
     name: 'Alarm',
     components: {},
     data() {
+      const validatePoint = (rule, value, callback) => {
+        if ((/^(([1-9][0-9]*|0)\.([0-9]{1,100})$)|^([1-9][0-9]*|0)$/).test(value) === false) {
+          callback(new Error('请输入正数'))
+        } else {
+          callback()
+        }
+      }
       return {
         list: [],
+        rules: {
+          satelliteSignal:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonSpeed:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          shipDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotBattery :[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }]
+        },
         form: {
           typhoonDistance:'',
           typhoonSpeed:'',
@@ -106,6 +121,9 @@
       },
       init(){
         console.log('获取当前值')
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
         alarmRecentValue().then(res => {
           if (res.code === 200) {
             this.form = res.data

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index b0a4e70..896ac83 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -29,28 +29,31 @@
     }
   },
   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 + '米'
-          }
-        })
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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[3].value = res.data.
+              this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+            }
+          })
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 32d5416..759380a 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="container">
-    <div class="title">气象指标</div>
+    <div class="title">洋流指标</div>
     <div class="content">
       <div class="block" v-for="(value,key,index) in data" :key="index">
-        <item :data="value"/>
+        <item :data="value" />
+      </div>
+    </div>
+    <div class="title" style="color:#50C55C">台风指标</div>
+    <div class="content">
+      <div class="block" v-for="(value,key,index) in data1" :key="index">
+        <item :data="value" />
       </div>
     </div>
   </div>
@@ -19,51 +25,62 @@
   data() {
     return {
       data:[
-        {name:'风速风向',value:'***°',color:'#00f5ff'},
-        {name:'海温',value:'',color:'#50C55C'},
-        {name:'气压',value:'',color:'#50C55C'},
-        {name:'海拔',value:'',color:'#50C55C'},
-        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'风速风向',value:'***°',color:'#50C55C'},
+        {name:'海温',value:'',color:'#00f5ff'},
+        {name:'气压',value:'',color:'#00f5ff'},
+        {name:'海拔',value:'',color:'#00f5ff'},
+        {name:'风浪方向/高度',value:'',color:'#50C55C'},
         {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
-        {name:'台风预报',value:'********************************************',color:'#50C55C'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'},
+      ],
+    data1:[
+      {name:'台风预报',value:'********************************************',color:'#50C55C'}
       ]
     }
   },
   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')
-           }
-         }
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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 + 'm '
+              this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + 'm '
+              this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + 'm '
+              this.data[6].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[7].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+
+            }
+          })
+        }
+      })
+      getTyphoonList().then(res => {
+        if (res.code === 200) {
+          if(res.data.length===0) {this.data1[0].value = '暂无台风'}
+          else {
+            this.data1[0].value = ''
+            for(let i=0;i<res.data.length;i++){
+              this.data1[0].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+            }
+          }
+        }
+      })
+    }
   }
 }
 </script>
@@ -77,6 +94,7 @@
       font-size: 17px;
       color: #00f5ff;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       padding: 0px 20px;
@@ -85,7 +103,7 @@
       flex: 1;
       .block{
         width: 100%;
-        height: 30px;
+        height: 38px;
       }
     }
   }
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index f387186..6340c8e 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <el-form ref="form" :model="form" label-width="160px">
+    <el-form ref="dataForm" :model="form" :rules="rules" label-width="160px">
       <div class="alarm-title">气象水文</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="台风报警">
+          <el-form-item label="台风报警" prop="typhoonDistance">
               <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
@@ -12,7 +12,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="风速报警">
+          <el-form-item label="风速报警" prop="typhoonSpeed">
               <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
@@ -23,8 +23,8 @@
       <div class="alarm-title">AIS&电子海图</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="船舶报警">
-              <el-input v-model="form.shipDistance">
+          <el-form-item label="船舶报警" prop="shipDistance">
+              <el-input v-model="form.shipDistance" @keyup.native="value = oninput(value)">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -34,7 +34,7 @@
       <div class="alarm-title">水下机器人</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="电量报警">
+          <el-form-item label="电量报警" prop="robotBattery">
               <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
@@ -42,7 +42,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="位置报警">
+          <el-form-item label="位置报警" prop="robotDistance">
               <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
@@ -53,8 +53,8 @@
       <div class="alarm-title">通信信号</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="通信信号强度">
-              <el-input v-model="form.satelliteSignal">
+          <el-form-item label="通信信号强度" prop="satelliteSignal">
+              <el-input v-model="form.satelliteSignal" >
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -77,8 +77,23 @@
     name: 'Alarm',
     components: {},
     data() {
+      const validatePoint = (rule, value, callback) => {
+        if ((/^(([1-9][0-9]*|0)\.([0-9]{1,100})$)|^([1-9][0-9]*|0)$/).test(value) === false) {
+          callback(new Error('请输入正数'))
+        } else {
+          callback()
+        }
+      }
       return {
         list: [],
+        rules: {
+          satelliteSignal:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonSpeed:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          shipDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotBattery :[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }]
+        },
         form: {
           typhoonDistance:'',
           typhoonSpeed:'',
@@ -106,6 +121,9 @@
       },
       init(){
         console.log('获取当前值')
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
         alarmRecentValue().then(res => {
           if (res.code === 200) {
             this.form = res.data
diff --git a/src/views/setting/log.vue b/src/views/setting/log.vue
index 94da006..33e0dc8 100644
--- a/src/views/setting/log.vue
+++ b/src/views/setting/log.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <el-radio-group v-model="type" style="padding: 5px 50px;margin-bottom: 10px" @change="fetchData(false)">
-      <el-radio label="水下机器人交互日志">水下机器人交互日志</el-radio>
-      <el-radio label="岸基控制交互日志">岸基控制交互日志</el-radio>
-      <el-radio label="系统操作日志">系统操作日志</el-radio>
+      <el-radio label="水下机器人发送">水下机器人发送</el-radio>
+      <el-radio label="水下机器人接收">水下机器人接收</el-radio>
+      <el-radio label="岸基控制发送">岸基控制发送</el-radio>
+      <el-radio label="岸基控制接收">岸基控制接收</el-radio>
+      <!--<el-radio label="系统操作日志">系统操作日志</el-radio>-->
     </el-radio-group>
     <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" @change="changePage">
       <template slot="columns"/>
@@ -12,40 +14,37 @@
 </template>
 
 <script>
-  import { getBizLogList, getBizLogDetail, getLogType, delLog } from '@/api/system/log'
+  import { getBizLogList, getBizLogDetail, getLogType, delLog, logListPage } from '@/api/system/log'
 export default {
   name: 'Log',
   components: {},
   data() {
     return {
-      type:'水下机器人交互日志',
+      type:'水下机器人发送',
       listQuery: {
-        keywords: '',
-        beginTime: '',
-        endTime: '',
-        logType: '业务日志',
+        type: '',
         offset: 1,
         limit: '10',
-        sort: '',
-        order: ''
       },
       columns: [
         {
-          text: '日志名称',
-          value: 'logName',
+          text: '内容',
+          value: 'dataContent'
+        },
+        {
+          text: '日志类型',
+          value: 'logType',
           width: 150
         },
         {
-          text: '用户',
-          value: 'userName'
+          text: '状态',
+          value: 'statusName',
+          width: 80
         },
         {
           text: '时间',
-          value: 'createTime'
-        },
-        {
-          text: '详细信息',
-          value: 'message'
+          value: 'createTime',
+          width: 150
         }
       ],
       list: [],
@@ -60,18 +59,59 @@
     this.fetchData(false)
   },
   methods: {
+  //   <el-radio label="水下机器人发送">水下机器人发送</el-radio>
+  // <el-radio label="水下机器人接收">水下机器人接收</el-radio>
+  // <el-radio label="岸基控制发送">岸基控制发送</el-radio>
+  // <el-radio label="岸基控制接收">岸基控制接收</el-radio>
     fetchData(isNowPage = true) {
       this.listLoading = true
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      if(this.type==='水下机器人交互日志'){
-      }else if(this.type==='岸基控制交互日志'){
-
-      }else if(this.type==='系统操作日志'){
-        getBizLogList(this.listQuery).then(response => {
+      if(this.type==='水下机器人发送'){
+        this.listQuery.type = '1'
+        logListPage(this.listQuery).then(response => {
           this.list = response.data.rows
-          if(this.list.length>10) this.list.length = 10  //后端bug
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='水下机器人接收'){
+        this.listQuery.type = '0'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='岸基控制发送'){
+        this.listQuery.type = '3'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='岸基控制接收'){
+        this.listQuery.type = '2'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
           this.total = parseInt(response.data.total)
           this.listLoading = false
         })

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index b0a4e70..896ac83 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -29,28 +29,31 @@
     }
   },
   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 + '米'
-          }
-        })
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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[3].value = res.data.
+              this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+            }
+          })
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 32d5416..759380a 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="container">
-    <div class="title">气象指标</div>
+    <div class="title">洋流指标</div>
     <div class="content">
       <div class="block" v-for="(value,key,index) in data" :key="index">
-        <item :data="value"/>
+        <item :data="value" />
+      </div>
+    </div>
+    <div class="title" style="color:#50C55C">台风指标</div>
+    <div class="content">
+      <div class="block" v-for="(value,key,index) in data1" :key="index">
+        <item :data="value" />
       </div>
     </div>
   </div>
@@ -19,51 +25,62 @@
   data() {
     return {
       data:[
-        {name:'风速风向',value:'***°',color:'#00f5ff'},
-        {name:'海温',value:'',color:'#50C55C'},
-        {name:'气压',value:'',color:'#50C55C'},
-        {name:'海拔',value:'',color:'#50C55C'},
-        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'风速风向',value:'***°',color:'#50C55C'},
+        {name:'海温',value:'',color:'#00f5ff'},
+        {name:'气压',value:'',color:'#00f5ff'},
+        {name:'海拔',value:'',color:'#00f5ff'},
+        {name:'风浪方向/高度',value:'',color:'#50C55C'},
         {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
-        {name:'台风预报',value:'********************************************',color:'#50C55C'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'},
+      ],
+    data1:[
+      {name:'台风预报',value:'********************************************',color:'#50C55C'}
       ]
     }
   },
   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')
-           }
-         }
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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 + 'm '
+              this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + 'm '
+              this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + 'm '
+              this.data[6].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[7].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+
+            }
+          })
+        }
+      })
+      getTyphoonList().then(res => {
+        if (res.code === 200) {
+          if(res.data.length===0) {this.data1[0].value = '暂无台风'}
+          else {
+            this.data1[0].value = ''
+            for(let i=0;i<res.data.length;i++){
+              this.data1[0].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+            }
+          }
+        }
+      })
+    }
   }
 }
 </script>
@@ -77,6 +94,7 @@
       font-size: 17px;
       color: #00f5ff;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       padding: 0px 20px;
@@ -85,7 +103,7 @@
       flex: 1;
       .block{
         width: 100%;
-        height: 30px;
+        height: 38px;
       }
     }
   }
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index f387186..6340c8e 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <el-form ref="form" :model="form" label-width="160px">
+    <el-form ref="dataForm" :model="form" :rules="rules" label-width="160px">
       <div class="alarm-title">气象水文</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="台风报警">
+          <el-form-item label="台风报警" prop="typhoonDistance">
               <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
@@ -12,7 +12,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="风速报警">
+          <el-form-item label="风速报警" prop="typhoonSpeed">
               <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
@@ -23,8 +23,8 @@
       <div class="alarm-title">AIS&电子海图</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="船舶报警">
-              <el-input v-model="form.shipDistance">
+          <el-form-item label="船舶报警" prop="shipDistance">
+              <el-input v-model="form.shipDistance" @keyup.native="value = oninput(value)">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -34,7 +34,7 @@
       <div class="alarm-title">水下机器人</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="电量报警">
+          <el-form-item label="电量报警" prop="robotBattery">
               <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
@@ -42,7 +42,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="位置报警">
+          <el-form-item label="位置报警" prop="robotDistance">
               <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
@@ -53,8 +53,8 @@
       <div class="alarm-title">通信信号</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="通信信号强度">
-              <el-input v-model="form.satelliteSignal">
+          <el-form-item label="通信信号强度" prop="satelliteSignal">
+              <el-input v-model="form.satelliteSignal" >
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -77,8 +77,23 @@
     name: 'Alarm',
     components: {},
     data() {
+      const validatePoint = (rule, value, callback) => {
+        if ((/^(([1-9][0-9]*|0)\.([0-9]{1,100})$)|^([1-9][0-9]*|0)$/).test(value) === false) {
+          callback(new Error('请输入正数'))
+        } else {
+          callback()
+        }
+      }
       return {
         list: [],
+        rules: {
+          satelliteSignal:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonSpeed:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          shipDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotBattery :[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }]
+        },
         form: {
           typhoonDistance:'',
           typhoonSpeed:'',
@@ -106,6 +121,9 @@
       },
       init(){
         console.log('获取当前值')
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
         alarmRecentValue().then(res => {
           if (res.code === 200) {
             this.form = res.data
diff --git a/src/views/setting/log.vue b/src/views/setting/log.vue
index 94da006..33e0dc8 100644
--- a/src/views/setting/log.vue
+++ b/src/views/setting/log.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <el-radio-group v-model="type" style="padding: 5px 50px;margin-bottom: 10px" @change="fetchData(false)">
-      <el-radio label="水下机器人交互日志">水下机器人交互日志</el-radio>
-      <el-radio label="岸基控制交互日志">岸基控制交互日志</el-radio>
-      <el-radio label="系统操作日志">系统操作日志</el-radio>
+      <el-radio label="水下机器人发送">水下机器人发送</el-radio>
+      <el-radio label="水下机器人接收">水下机器人接收</el-radio>
+      <el-radio label="岸基控制发送">岸基控制发送</el-radio>
+      <el-radio label="岸基控制接收">岸基控制接收</el-radio>
+      <!--<el-radio label="系统操作日志">系统操作日志</el-radio>-->
     </el-radio-group>
     <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" @change="changePage">
       <template slot="columns"/>
@@ -12,40 +14,37 @@
 </template>
 
 <script>
-  import { getBizLogList, getBizLogDetail, getLogType, delLog } from '@/api/system/log'
+  import { getBizLogList, getBizLogDetail, getLogType, delLog, logListPage } from '@/api/system/log'
 export default {
   name: 'Log',
   components: {},
   data() {
     return {
-      type:'水下机器人交互日志',
+      type:'水下机器人发送',
       listQuery: {
-        keywords: '',
-        beginTime: '',
-        endTime: '',
-        logType: '业务日志',
+        type: '',
         offset: 1,
         limit: '10',
-        sort: '',
-        order: ''
       },
       columns: [
         {
-          text: '日志名称',
-          value: 'logName',
+          text: '内容',
+          value: 'dataContent'
+        },
+        {
+          text: '日志类型',
+          value: 'logType',
           width: 150
         },
         {
-          text: '用户',
-          value: 'userName'
+          text: '状态',
+          value: 'statusName',
+          width: 80
         },
         {
           text: '时间',
-          value: 'createTime'
-        },
-        {
-          text: '详细信息',
-          value: 'message'
+          value: 'createTime',
+          width: 150
         }
       ],
       list: [],
@@ -60,18 +59,59 @@
     this.fetchData(false)
   },
   methods: {
+  //   <el-radio label="水下机器人发送">水下机器人发送</el-radio>
+  // <el-radio label="水下机器人接收">水下机器人接收</el-radio>
+  // <el-radio label="岸基控制发送">岸基控制发送</el-radio>
+  // <el-radio label="岸基控制接收">岸基控制接收</el-radio>
     fetchData(isNowPage = true) {
       this.listLoading = true
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      if(this.type==='水下机器人交互日志'){
-      }else if(this.type==='岸基控制交互日志'){
-
-      }else if(this.type==='系统操作日志'){
-        getBizLogList(this.listQuery).then(response => {
+      if(this.type==='水下机器人发送'){
+        this.listQuery.type = '1'
+        logListPage(this.listQuery).then(response => {
           this.list = response.data.rows
-          if(this.list.length>10) this.list.length = 10  //后端bug
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='水下机器人接收'){
+        this.listQuery.type = '0'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='岸基控制发送'){
+        this.listQuery.type = '3'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='岸基控制接收'){
+        this.listQuery.type = '2'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
           this.total = parseInt(response.data.total)
           this.listLoading = false
         })
diff --git a/src/views/setting/setting.vue b/src/views/setting/setting.vue
index 163b5d3..3779530 100644
--- a/src/views/setting/setting.vue
+++ b/src/views/setting/setting.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="系统设置" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog title="系统设置" :visible.sync="dialogFormVisible" append-to-body width="1000px">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane  v-for="value in data" :name="value.name" :label="value.name">
          <span slot="label">

diff --git a/package.json b/package.json
index acd3267..b52bf53 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "newfront",
+  "name": "fc",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.0",
     "jsencrypt": "^3.2.1",
     "leaflet": "^1.7.1",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 9f14282..c476196 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,10 +2,13 @@
   "title": "方舱态势显示软件",
   "subtitle": "",
   "theme":"blue",
+  "mapserverUrl": "http://111.198.10.15:13003/",
+  "webSocketUrl": "ws://111.198.10.15:12209/websocket/",
   "baseUrl": "http://111.198.10.15:12209/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
   "singleSys": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "webType":"client"
 }
diff --git a/src/api/robot.js b/src/api/robot.js
index acd32c2..06c72d6 100644
--- a/src/api/robot.js
+++ b/src/api/robot.js
@@ -33,6 +33,15 @@
   })
 }
 
+export function getRouteByTaskId(params) {
+  return request({
+    url: 'shelter/routeByTaskId',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 机器人当前任务
 export function getRobotTask(robotId) {
   return request({
diff --git a/src/api/system/log.js b/src/api/system/log.js
index 58ad81d..3e73567 100644
--- a/src/api/system/log.js
+++ b/src/api/system/log.js
@@ -64,6 +64,13 @@
     params
   })
 }
+export function logListPage(params) {
+  return request({
+    url: 'system/logListPage',
+    method: 'get',
+    params
+  })
+}
 // 删除日志
 export function delLoginLog() {
   return request({
diff --git a/src/assets/images/green.png b/src/assets/images/green.png
index 6e16540..31c0d4e 100644
--- a/src/assets/images/green.png
+++ b/src/assets/images/green.png
Binary files differ
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 906da04..bbc799f 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -73,7 +73,7 @@
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
-        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index" />
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" width="90" type="index" />
         <!--内容列, 若columns存在且长度大于0-->
         <template v-if="columnsFiltered && columnsFiltered.length>0">
           <el-table-column
diff --git a/src/components/clock/Clock.vue b/src/components/clock/Clock.vue
index 0a169d4..923f7bc 100644
--- a/src/components/clock/Clock.vue
+++ b/src/components/clock/Clock.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-08-08
  -->
 <template>
-  <div class="topTime" style="display: block;width: 18em;">
+  <div class="topTime" style="display: block;">
     <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
     <a class="gradient-text">{{time}}</a>
-    <span style="text-align: right;float: right">{{week}}</span>
+    <!--<span style="text-align: right;float: right">{{week}}</span>-->
   </div>
 </template>
 
@@ -47,22 +47,25 @@
   @import '../../assets/css/variable.scss';
   // 整体白色字
   .topTime{
+    position: absolute;
+    right: 10px;
+    top: 20px;
     color: #fff;
-    font-size: .12rem;
-    margin-left: .05rem;
-    width: 2.2rem;
-    letter-spacing: .005rem;
+    font-size: 20px;
+    width: 400px;
+    letter-spacing: 5px;
     font-family: $digitalFamily;
-    padding-left: .1rem;
+    padding-left: 10px;
+    font-weight: bold;
   }
   .topTime a{
     font-weight: bolder;
     font-family: $digitalFamily;
   }
   .topTime a{
-    font-size: .155rem;
+    font-size: 20px;
   }
   .topTime span{
-    font-size: .12rem;
+    font-size: 20px;
   }
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b70a3a1..0a10b2d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -68,8 +68,9 @@
       }
     }
     .right{
-      flex: 1;
+      /*flex: 1;*/
       padding-left: 20px;
+      width: calc(100vw - 350px);
       /*background-color: #E6A23C;*/
     }
   }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index b803ab4..75d0045 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -5,14 +5,16 @@
     <div class="block" style="transform: rotatey(-180deg);"/>
     <div class="block1"/>
     <div class="block1" style="transform: rotatey(-180deg);"/>
+    <clock/>
   </el-header>
 </template>
 
 <script>
 
+import Clock from "../../components/clock/Clock";
 export default {
   name: 'AppHeader',
-  components: {  },
+  components: {Clock  },
   data() {
     return {
       title: this.baseConfig.title, // 标题
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..05ea552 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -48,3 +48,12 @@
   }
   return fmt
 }
+
+export function getDaysTime(day = 1){
+  const startTime = new Date(new Date().getTime() - day * 24 * 3600 * 1000).Format('yyyy-MM-dd hh:mm:ss')
+  const endTime = getToday('yyyy-MM-dd hh:mm:ss')
+  return {
+    startTime,
+    endTime
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index c5e586f..713a13c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,6 @@
 service.interceptors.request.use(
   config => {
     if (store.getters.token) {
-      console.log('request.js  gettoken')
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       // config.headers['contentType']= 'application/json'
       console.log(config.headers['token'])
diff --git a/src/views/device/device.vue b/src/views/device/device.vue
index a610faf..e01925d 100644
--- a/src/views/device/device.vue
+++ b/src/views/device/device.vue
@@ -8,8 +8,14 @@
     <div ref="body" class="body">
       <left ref="left" class="left"/>
       <div ref="right" class="middle">
-        <div class="title">{{active}}</div>
+        <div class="title">{{active.name}}</div>
         <div class="angle">横滚角： {{roll}} <br/>俯仰角： {{pitch}} <br/>航向角： {{heading}} </div>
+        <div class="fresh">
+          实时姿态：
+          <el-switch
+            v-model="value"/>
+        </div>
+
         <div ref="device"/>
       </div>
       <right ref="devright" class="right"/>
@@ -22,6 +28,7 @@
 import { getRobotList,getRobotDetail,getRobotTask } from '@/api/robot'
 import ImageBlock from "./components/imageBlock";
 import Left from './left'
+import { Notification } from 'element-ui'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -34,16 +41,21 @@
   components: {Right, Left,ImageBlock, THREE, dat,OrbitControls,GLTFLoader,STLLoader},
   data() {
     return {
-      active: '飞翼滑翔机一号',
+      active: {name:''},
+      clock: 10, // 定时时间
       roll: '45.21°',
       pitch: '51.41°',
       heading: '93.00°',
       arr:[],
+      value: false,
+      socket: null,
       controls: null,
       scene: null,
       gltf: null,
+      modelName:'',
       camera: null,
       renderer: null,
+      timer: null, // 定时器
       plane:null,
       paramsThree: {
         modelName: '', // .glb模型的文件名字
@@ -58,14 +70,20 @@
         // {name:'飞翼滑翔机六号',gltf:''},
         // {name:'飞翼滑翔机七号',gltf:''},
         // {name:'飞翼滑翔机八号',gltf:''}
-      ]
+      ],
+      jumpTo:[]
     }
   },
   created() {
     this.$nextTick(() => {
       this.init()
+      this.initWebSocket()
     })
   },
+  beforeDestroy(){
+    this.stopTimer()
+    this.destoryWebSocket()
+  },
   watch:{
     'camera.rotation.x':{
       handler: function() {
@@ -73,11 +91,123 @@
         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) + '°'
       }
+    },
+    'camera.rotation.y':{
+      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) + '°'
+      }
+    },
+    'camera.rotation.z':{
+      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: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }
+          else if(msgdata.type === 'robotInfo'){
+            let data = msgdata.messageObject
+            for(let i=0;i<that.data.length;i++){
+              let item = that.data[i]
+              if(item.id === data.robotId && that.active.id !== data.robotId){
+                 if(!that.jumpTo[i]){
+                   that.btnClick(item)
+                   that.jumpTo[i] = true
+                 }
+                break
+              }
+            }
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    openTimer(){
+      this.timer = setInterval(() => {
+        if(this.value){
+          this.btnClick(this.active)
+        }
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     btnClick(val){
-      this.active = val.name
+      this.active = val
+      let that = this
       getRobotTask(val.id).then(res => {
         if (res.code === 200) {
           this.$refs.left.initTask(res.data)
@@ -91,7 +221,13 @@
           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)
+          if(that.modelName!==val.gltf){
+            this.initModel(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }else{
+            console.log('changePos')
+            this.changePos(val.gltf,res.data.rollAngle,res.data.pitchAngle,res.data.headingAngle)
+          }
+
         }
       })
     },
@@ -99,6 +235,35 @@
       this.initList()
       this.initMesh()
     },
+    changePos(name,roll,pitch,heading){
+      let that = this
+      this.gltf = null
+      if(this.scene&&this.paramsThree.modelName!==''){
+        // debugger
+        let objM = this.scene.getObjectByName(this.paramsThree.modelName)
+        objM.position.set( 0,0,0);
+        objM.rotation.set( pitch*Math.PI/180, roll*Math.PI/180, heading*Math.PI/180 );
+        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
+      // } );
+    },
     initModel(name,roll,pitch,heading){
       let that = this
       this.gltf = null
@@ -124,6 +289,7 @@
         that.scene.add( mesh );
         that.paramsThree.modelName = name
         that.gltf = mesh
+        that.modelName = name
       } );
     },
     addShadowedLight( x, y, z, color, intensity ) {
@@ -152,7 +318,10 @@
           this.data = res.data.map(item => {
             return {name:'飞翼滑翔机'+item.robotId+'号',id:item.robotId,gltf:item.modelType}
           })
-          this.btnClick(this.data[0])
+          this.active = this.data[0]
+          this.jumpTo = this.data.map(item => {return false})
+          this.btnClick(this.active)
+          this.openTimer()
         }
       })
     },
@@ -233,6 +402,16 @@
       top: 80px;
       left: 360px;
       line-height: 25px;
+      font-weight: bold;
+    }
+    .fresh{
+      color: white;
+      font-size: 17px;
+      position: absolute;
+      top: 40px;
+      right: 300px;
+      line-height: 25px;
+      font-weight: bold;
     }
     .top{
       margin: 10px 30px;
@@ -242,6 +421,7 @@
         width: 12.5%;
         height: 30px;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
     .body{
diff --git a/src/views/device/left.vue b/src/views/device/left.vue
index 8015759..ee076a8 100644
--- a/src/views/device/left.vue
+++ b/src/views/device/left.vue
@@ -52,6 +52,8 @@
         {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
         {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
       ],
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {
           title:'仪表电容量',
@@ -93,17 +95,20 @@
         {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
       ],
       task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
-      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'', unit:'',color:'#ffffff'},
+      spend: {name:'当前剖面耗时(任务开始正计时)',value:'', unit:'',color:'#ffffff'},
       list:[]
     }
   },
   created() {
       // this.initTask()
   },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   methods: {
     init(val){
-          this.position.lat = val.lat.toFixed(7)
-          this.position.lng = val.lng.toFixed(7)
+          this.position.lat = val.lat.toFixed(8)
+          this.position.lng = val.lng.toFixed(8)
           this.device[0].value= val.navigateState
           this.device[1].value= val.buoyancy
           this.device[2].value= val.position
@@ -121,15 +126,12 @@
           this.device[8].value= val.targetDirection
           this.device[9].value= val.targetHertz
     },
-    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, "/"))
+    setTime(createTime,endTime){
+      var dateBegin = new Date(createTime.replace(/-/g, "/"))
       var dateEnd = new Date()
+      if(endTime!==''){
+        dateEnd = new Date(endTime.replace(/-/g, "/"))
+      }
       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
       var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
       var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
@@ -141,6 +143,30 @@
       var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
       var seconds=Math.round(leave3/1000)
       this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
+    },
+    openTimer(createTime){
+      let that = this
+      this.timer = setInterval(function(){
+        that.setTime(createTime,'')
+      }, 1000);
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    initTask(val){
+      this.stopTimer()
+      if(val===''){
+        this.list = []
+        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
+        this.spend.value = ''
+      }
+      this.setTime(val.createTime,val.endTime)
+      if(val.endTime === ''){
+        this.openTimer(val.createTime)
+      }
       switch (val.taskType) {
         case '1':
           this.task.value='定向'
@@ -149,14 +175,18 @@
             str = str + val.directedTask.headingAngle[i] + '°;'
           }
           this.list = [
-            {name:'任务深度',value:val.directedTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
             {name:'航向角',value:str, unit:'',color:'#ffffff'}
             ]
           break
         case '2':
           this.task.value='航路点'
+          // const tmp = val.routeTask.robotRoutes.toString()
           this.list = [
             {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
+            {name:'航路点',
+              value: val.routeTask.routeCount,
+              unit:'个',color:'#ffffff'},
           ]
           break
         case '3':
diff --git a/src/views/overview/components/imageBlock.vue b/src/views/overview/components/imageBlock.vue
index 1db6259..6be7d2e 100644
--- a/src/views/overview/components/imageBlock.vue
+++ b/src/views/overview/components/imageBlock.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="name">{{data.name}}</div>
-    <div class="value">{{data.electric}}</div>
-    <div class="value">{{data.distance}}</div>
-    <div class="value1">{{data.lng}}，{{data.lat}}</div>
+    <div class="value" style="width: 25%">{{data.electric}}</div>
+    <div class="value" style="width: 50%">{{data.distance}}</div>
+    <div class="value1">{{data.lng}},{{data.lat}}</div>
   </div>
 </template>
 
@@ -34,6 +34,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .container{
+    min-width: 185px;
+    margin-right: 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -43,21 +45,27 @@
     background-size: 100% 100%;
     line-height: 20px;
     text-align: center;
-    padding: 2px 10px;
+    padding: 2px 0px;
     .name{
+      white-space:nowrap;
       color: red;
-      width: 35px;
+      width: 25%;
+      overflow: hidden;
     }
     .value{
+      white-space:nowrap;
       color: white;
-      width: 60px;
       font-size: 15px;
+      overflow: hidden;
     }
     .value1{
+      white-space:nowrap;
       color: #00f5ff;
       width: 100%;
       font-size: 14px;
       text-align: center;
+      overflow-x: visible;
+
     }
   }
 </style>
diff --git a/src/views/overview/leafletMap.vue b/src/views/overview/leafletMap.vue
index 50fc0b3..ead0854 100644
--- a/src/views/overview/leafletMap.vue
+++ b/src/views/overview/leafletMap.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="panel-container">
-        <div class="mapBox" id="leaflet-map"></div>
+    <div class="mapBox" id="leaflet-map"></div>
     <div class="select-content">
-      <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-group v-model="checked" @change="handleChecked" style="width:480px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
+        <el-checkbox :disabled="!shipClickable" label="AIS船只">AIS船只</el-checkbox>
         <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-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px;width: 180px" v-show="checked.indexOf('算法结果')!==-1"  @change="initresult(true)">
         <el-option
           v-for="item in resultList"
           :key="item.time"
@@ -13,26 +14,43 @@
           :value="item.time">
         </el-option>
       </el-select>
-      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1"  @change="initroute(true)">
+      <el-switch
+        v-show="checked.indexOf('历史轨迹')!==-1"
+        style="padding-top: 10px;padding-right: 10px"
+        v-model="value"
+        @change="initroute(true)"
+        active-text="任务筛选"
+        inactive-text="时间筛选"/>
+      <el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small"  v-show="checked.indexOf('历史轨迹')!==-1&&value"  @change="initroute(true)" style="width:230px">
         <el-option
           v-for="item in taskList"
           :key="item.id"
-          :label="item.createTime"
+          :label="item.showLabel"
           :value="item.id">
         </el-option>
       </el-select>
       <el-date-picker
-        v-show="checked.indexOf('历史轨迹')!==-1"
+        v-show="checked.indexOf('历史轨迹')!==-1&&!value"
         v-model="timeRange"
+        :disabled="!routeClickable"
         @change="initroute(true)"
+        style="width: 260px;"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="至"
         start-placeholder="轨迹开始日期"
         end-placeholder="轨迹结束日期"
-        size="small"
-        style="margin: 0px 10px">
+        size="small">
       </el-date-picker>
+      <el-select v-model="taskRobot" placeholder="展示机器人选择" size="small"  style="width: 190px;margin-left: 10px" v-show="checked.indexOf('历史轨迹')!==-1" @change="selectRobot()" multiple>
+        <el-option
+          v-for="item in taskRobotList"
+          :key="item"
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
+      <el-image :src="img" v-show="checked.indexOf('历史轨迹')!==-1" style="width: 25px;height: 25px;margin: 3px 10px;cursor: pointer" @click="selectRobot()"/>
     </div>
   </div>
 </template>
@@ -41,10 +59,21 @@
   import { getTyphoonList } from '@/api/typhoon'
   import { getShipShipsInCircle } from '@/api/ship'
   import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
-  import { getRobotHistory } from '@/api/robot'
+  import { getRobotHistory, getRouteByTaskId } from '@/api/robot'
+  import { getDaysTime } from '@/utils/dateutils'
 
   import Leaflet from "leaflet";
   import 'leaflet/dist/leaflet.css'
+  import 'leaflet-canvas-marker'
+  var colors = ['#ff0000','#ff7e00', '#ffcc00', '#00a642', '#00bae2', '#0054ff','#b000aa','#ff2dcb', '#13c2c2','#56ca95' ]
+  var _minTime = null
+  var _maxTime = null
+  var ship = null
+  var route = null
+  var routeline = null
+  var routepoint = []
+  var routelinearr = []
+  var map = null
   export default {
     name: 'LeafletMap',
     components: {
@@ -52,25 +81,79 @@
     },
     data() {
       return {
+        img:require('@/assets/images/refresh.png'),
+        //定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
+        // pickerOptions: {
+        //   onPick(time) {
+        //     //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
+        //     //以下判断是只选择了一个值的时候，也就是默认的开始值。
+        //     if (!time.maxDate&&time.minDate) {
+        //       //时间跨度为1天，1天转化成毫秒就是   24 * 3600 * 1000
+        //       let timeRange = 1 * 24 * 60 * 60 * 1000
+        //       //最小值为选择的日期-跨度值
+        //       _minTime = time.minDate.getTime() - timeRange
+        //       //最大值为选择的日期+跨度值
+        //       _maxTime = time.minDate.getTime() + timeRange
+        //     } else if(!time.maxDate&&!time.minDate){
+        //       //如果两个值都已经选择了，也就是已经选择完成，则将最大值和最小值设置为null
+        //       _minTime = _maxTime = null
+        //     }
+        //   },
+        //   disabledDate(time) {
+        //     //当已经选择了两个日期时
+        //     if (_minTime && _maxTime) {
+        //       //如果已经选择了两个日期，则小于最小值和大于最大值的都要禁用
+        //       return time.getTime() < _minTime || time.getTime() > _maxTime || time.getTime() > (Date.now())
+        //     } else {
+        //       //如果没有选择两个值，即选择了一个或者什么都没有选择的初始状态，禁用的日期是当前日期之前的日期
+        //       return time.getTime() > (Date.now())
+        //     }
+        //   }
+        // },
         center: [30, 125],
         checked: ['台风数据'],
-        options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
-        route:null,
+        options: [ '台风数据', '算法结果', '历史轨迹'],
         result:null,
         wind:null,
-        ship:null,
         robot:null,
-        map: null,
+        shipClickable: true,
+        routeClickable: true,
         reset_btn: null,
+        taskRobot:[],
+        taskRobotList:[1,2,3,4,5,6,7,8],
         robotList:[],
         taskList:[],
         resultList:[],
         timeRange:[],
+        value: false,
         planTime:'',
-        taskId:''
+        taskId:'',
+        timer: null, // 定时器
+        timer1: null, // 定时器
+        clock: 5, // 定时时间
+        taskTypeList:[
+          '','定向','航路点','定深直航','驻留','投放','任务终止'
+        ]
       };
     },
+    watch: {
+      timeRange(val) {
+        if (val && val.length > 0) {
+
+        } else {
+          _minTime = null
+          _maxTime = null
+        }
+      }
+    },
+    beforeDestroy(){
+      this.stopTimer()
+    },
     mounted() {
+      const { startTime, endTime } = getDaysTime()
+      this.timeRange = [startTime, endTime]
+      _minTime = new Date(startTime)
+      _maxTime = new Date(endTime)
       this.initMap();
       this.initOption()
     },
@@ -78,16 +161,108 @@
       handleChecked(val){
         this.taskId = ''
         this.planTime = ''
-        this.timeRange = []
+        const { startTime, endTime } = getDaysTime()
+        this.timeRange = [startTime, endTime]
+        // this.initOption()
         this.initwind(val.indexOf('台风数据')!==-1)
-        this.initais(val.indexOf('AIS船只')!==-1)
-        this.initroute(val.indexOf('历史轨迹')!==-1)
-        this.initresult(val.indexOf('算法结果')!==-1)
+        if(val.indexOf('AIS船只')!==-1){
+          this.initais(true)
+        }else{
+          if(ship!==null && this.shipClickable){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+        }
+
+        if(val.indexOf('历史轨迹')!==-1){
+          getTaskList().then(res => {
+            if (res.code === 200) {
+              this.taskList = res.data.map(item => {
+                if(item.taskType !== '')
+                  item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+                else item.showLabel = item.createTime
+                return item
+              })
+              if(this.taskList.length!==0){
+                this.taskId = this.taskList[0].id
+                this.initroute(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initroute(false)
+        }
+        if(val.indexOf('算法结果')!==-1){
+          getTaskTimeList().then(res => {
+            if (res.code === 200) {
+              this.resultList = res.data
+              if(this.resultList.length!==0){
+                this.planTime = this.resultList[0].time
+                this.initresult(true)
+              }
+            }
+          })
+        }
+        else{
+          this.initresult(false)
+        }
+      },
+      async initrobot(){
+        let icon = L.icon({
+          iconUrl: require('@/assets/images/robot.png'),
+          iconSize: [20, 20]
+        })
+        getRobotList().then(res => {
+          if (res.code === 200) {
+            let layers=[]
+            this.robotList = res.data
+            for (let i = 0; i < res.data.length; i++) {
+              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
+              let str =  `
+                      <div style="font-size: 15px;width:300px;">
+                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng.toFixed(8)},${lat.toFixed(8)}</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
+                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
+                     </div>`
+              let popup = L.popup().setContent(str)
+              if(this.timer === null && i === 0){
+                map.setView([lat, lng], 6)
+              }
+              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
+              layers.push(marker)
+            }
+            // 加上新的
+            let layerGroup = L.layerGroup(layers)
+            map.addLayer(layerGroup)
+
+            //删去旧的
+            if(this.robot!==null){
+              map.removeLayer(this.robot)
+              this.robot.clearLayers()
+            }
+
+            // 赋值
+            this.robot = layerGroup
+            this.openTimer()
+          }
+        })
+
       },
       initOption(){
         getTaskList().then(res => {
           if (res.code === 200) {
-            this.taskList = res.data
+            this.taskList = res.data.map(item => {
+              if(item.taskType !== '')
+                item.showLabel = item.createTime + ' '+ this.taskTypeList[Number(item.taskType)]
+              else item.showLabel = item.createTime
+              return item
+            })
+            if(this.taskList.length!==0)
+              this.taskId = this.taskList[0].id
           }
         })
         getTaskTimeList().then(res => {
@@ -95,51 +270,306 @@
             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){
+      async selectRobot(){
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                    continue
+                  }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initroute(isShow){
+        // 不展示
+        if(!isShow) {
+          if(routepoint.length!==0){
+            routepoint.map(item=>{
+              route.removeLayer(item)
+            })
+            if(route!== null){
+              map.removeLayer(route)
+            }
+          }
+          if(routeline!==null){
+            map.removeLayer(routeline)
+            routeline.clearLayers()
+          }
+          return
+        }
+        if(!this.value){
+          if(this.timeRange && this.timeRange.length === 0){
+            return
+          }
+          if(!this.timeRange){
+            return
+          }
+          // if(new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()> 1*24*60*60*1000){
+          //   this.$message.warning('时间范围请勿超过一天')
+          //   return
+          // }
+        }
+        // this.taskRobotList = []
+        this.taskRobot = []
+        if(route!==null){
+          routepoint.map(item=>{
+            route.removeLayer(item);
+          })
+        }
+        if(routeline!==null){
+          map.removeLayer(routeline)
+          routeline.clearLayers()
+        }
+        let params
+        if(this.value){ // 任务选择
+          params ={
+            taskId:this.taskId,
+          }
+        }else{
+          if (this.timeRange && this.timeRange.length > 0) {
+            params ={
+              startDate: this.timeRange[0],
+              endDate: this.timeRange[1]
+            }
+          }else{
+            return
+          }
+        }
+        routepoint = []
+        routelinearr = []
+        this.routeClickable = false
+        try {
+          if(!this.value){
+            await getRobotHistory(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot = res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+          else {
+            await getRouteByTaskId(params).then(res => {
+              if (res.code === 200) {
+                if(res.data.length === 0) {
+                  this.routeClickable = true
+                  return
+                }
+                //this.taskRobotList = res.data.map(item => item[0])
+                this.taskRobot =  res.data.map(item =>item[0].robotId)
+                for (let i=0; i<res.data.length;i++) {
+                  let robot = res.data[i]
+                  // if(this.taskRobot.indexOf(robot[0].robotId)===-1){
+                  //   continue
+                  // }
+                  let myStyle = {
+                    'color': colors[i]+'33',
+                    'weight': 3,
+                    'opacity': 0.7,
+                    'name': robot[0].robotId
+                  }
+                  let pathlist=[]
+                  for(const point of robot){
+                    pathlist.push( [point.lat, point.lng])
+                    let iconUrl = require(`@/assets/images/${point.robotId}.png`)
+                    let icon = window.L.icon({
+                      iconUrl: iconUrl,
+                      iconSize: [20, 20],
+                      iconAnchor: [10,10]
+                    })
+                    let marker=L.marker([point.lat,point.lng], { icon: icon, name: point.robotId })
+                    if(routepoint.length === 0){
+                      // map.panTo([point.lat,point.lng], {
+                      //   animate: true
+                      // })
+                      map.setView([point.lat,point.lng], 7);
+                      if (route === null){
+                        route = L.canvasIconLayer({}).addTo(map)
+                      }
+                    }
+                    routepoint.push(marker)
+                    route.addLayer(marker)
+                  }
+                  let line = L.polyline(pathlist, myStyle)
+                  routelinearr.push(line)
+                }
+                routeline = L.layerGroup(routelinearr)
+                map.addLayer(routeline)
+                this.routeClickable = true
+              }
+            })
+          }
+        }catch (e) {
+          this.routeClickable = true
+        }
+      },
+      async initresult(isShow){
         if(this.result!==null){
+          map.removeLayer(this.result)
           this.result.clearLayers()
         }
         if(!isShow) return
@@ -147,14 +577,14 @@
           planTime:this.planTime
         }
         let myStyle = {
-          'color': '#50c55c',
-          'weight': 4.5,
+          'color': '#56ca95',
+          'weight': 3,
           'opacity': 0.7
         }
         let myStyle1 = {
-          'color': '#f98e11',
-          'weight': 4.5,
-          'opacity': 0.7
+          'color': '#7ba6e9',
+          'weight': 2,
+          'opacity': 0.9
         }
         getCurrentPlan(params).then(res => {
           if (res.code === 200) {
@@ -165,41 +595,57 @@
               for(const point of res.data.regionResult.regionPoints){
                 pathlist.push( [point.lat, point.lng])
               }
-              let area = L.polygon(pathlist, myStyle1)
-              layers.push(area)
+              layers.push( L.polygon(pathlist, myStyle1))
+              for(const point of pathlist){
+                layers.push( L.circle(point, {
+                  color: '#f98e11',
+                  fillColor: '#f98e11',
+                  fillOpacity: 1,
+                  radius: 10
+                }))
+              }
             } 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',
+              layers.push(L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#7ba6e9',
+                fillColor: '#7ba6e9',
                 fillOpacity: 0.7,
                 radius: res.data.regionResult.regionRadius*1000
-              })
-              layers.push(area)
+              })) // 区域
+              layers.push( L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
+                color: '#f98e11',
+                fillColor: '#f98e11',
+                fillOpacity: 1,
+                radius: 10
+              })) // 圆心
             }
             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 =  `
+            if(res.data.regionResult!==''){
+              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: 10px; width: 0;' +
+                    'height: 0;' +
+                    'border-left: 10px solid transparent;' +
+                    'border-right: 10px solid transparent;' +
+                    'border-bottom: 20px solid #50c55c;' +
+                    'text-align:center;color: white"/> ', // +  arr[i] + '</div>',
+                  className: '',
+                  iconSize:[20,20]
+                });
+                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 style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng.toFixed(8)},${point.lat.toFixed(8)}</div>
                      </div>`
-              let popup = L.popup().setContent(str)
-              let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
-              layers.push(marker)
+                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
@@ -226,48 +672,17 @@
               layers.push(line)
             }
             this.result = L.layerGroup(layers)
-            this.map.addLayer(this.result)
+            map.addLayer(this.result)
           }
         })
       },
-      initrobot(){
-        let icon = L.icon({
-          iconUrl: require('@/assets/images/robot.png'),
-          iconSize: [20, 20]
-        })
-        if(this.robot!==null){
-          this.robot.clearLayers()
-        }
-        getRobotList().then(res => {
-          if (res.code === 200) {
-            let layers=[]
-            this.robotList = res.data
-            for (let i = 0; i < res.data.length; i++) {
-              const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
-              let str =  `
-                      <div style="font-size: 15px;width:300px;">
-                        <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">	航行状态：</label>${navigateState}</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>${instrumentE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
-                        <div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
-                     </div>`
-              let popup = L.popup().setContent(str)
-              let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
-              layers.push(marker)
-            }
-            this.robot = L.layerGroup(layers)
-            this.map.addLayer(this.robot)
-          }
-        })
-      },
-      initwind(isShow) {
+      async initwind(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/wind.png'),
           iconSize: [20, 20]
         })
         if(this.wind!==null){
+          map.removeLayer(this.wind)
           this.wind.clearLayers()
         }
         if(isShow){
@@ -281,10 +696,10 @@
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">	台风中心气压：</label>${centerPressure}百帕</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</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>${lng.toFixed(8)},${lat.toFixed(8)}</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</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>${speed}m/s</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
                         <div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
@@ -295,24 +710,27 @@
                 layers.push(marker)
               }
               this.wind = L.layerGroup(layers)
-              this.map.addLayer(this.wind)
+              map.addLayer(this.wind)
             }
           })
         }
       },
-      initais(isShow) {
+      async initais(isShow) {
         let icon = L.icon({
           iconUrl: require('@/assets/images/ship.png'),
           iconSize: [30, 30]
         })
-        if(this.ship!==null){
-          this.ship.clearLayers()
-        }
-        if(isShow){
+
+        if(isShow && this.shipClickable){
+          if(ship!==null){
+            map.removeLayer(ship)
+            ship.clearLayers()
+          }
+          this.shipClickable = false
           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 => {
+            let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',50'
+            await getShipShipsInCircle(rgn).then(res => {
               if (res.code === 200) {
                 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]
@@ -320,9 +738,9 @@
                       <div style="font-size: 15px;width:300px;">
                         <div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
                         <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>${lng.toFixed(8)},${lat.toFixed(8)}</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}m/s</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>${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>
@@ -332,28 +750,51 @@
                   layers.push(marker)
                 }
                 if(r===  this.robotList.length-1){
-                  this.ship = L.layerGroup(layers)
-                  this.map.addLayer(this.ship)
+                  ship = L.layerGroup(layers)
+                  map.addLayer(ship)
+                  this.shipClickable = true
                 }
               }
             })
           }
         }
       },
+      openTimer(){
+        this.timer = setTimeout(() => {
+          this.initrobot()
+        }, this.clock * 1000)
+      }, // 停止定时器
+      stopTimer(){
+        if (this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
+      stopTimer1(){
+        if (this.timer1){
+          clearTimeout(this.timer1)
+          this.timer1 = null
+        }
+      },
       initMap() {
-        this.map = L.map('leaflet-map', {
+        map = L.map('leaflet-map', {
           crs: L.CRS.EPSG3857
-        });
-        // 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", {
+        })
+        map.setView(this.center, 6);
+        var myDemo = L.tileLayer.wms(this.baseConfig.mapserverUrl + "cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
           layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
           format: 'image/png',
           transparent: false,
+          tileSize: 2048,
+          zoomOffset: 1,
           crs: L.CRS.EPSG3857,
-          minZoom:4
+          minZoom: 6
         });
-        myDemo.addTo(this.map);
+        myDemo.addTo(map);
         this.initrobot()
         this.initwind(true)
       },
@@ -382,9 +823,16 @@
     left: 60px;
     top: 0px;
     height: 42px;
-    width: 1200px;
+    width: 1400px;
     padding-top: 10px;
     z-index: 1000;
     display: flex;
   }
 </style>
+<style>
+  .el-select__tags {
+    height: 100% !important;
+    /*top: 0% !important;*/
+    /*transform: translateY(-35%) !important;*/
+}
+</style>
diff --git a/src/views/overview/left.vue b/src/views/overview/left.vue
index ba9199d..60f925f 100644
--- a/src/views/overview/left.vue
+++ b/src/views/overview/left.vue
@@ -5,9 +5,9 @@
       <div ref="circle" class="circle" :style="{'background-color': color}"/>
       (调用{{times}}次)
     </div>
-    <position class="position"/>
-    <weather class="weather"/>
-    <water class="water"/>
+    <position ref="position" class="position"/>
+    <weather ref="weather" class="weather"/>
+    <!--<water ref="water" class="water"/>-->
   </div>
 </template>
 
@@ -15,16 +15,17 @@
 
   import Position from '@/views/overview/position'
   import Weather from '@/views/overview/weather'
-  import Water from '@/views/overview/water'
+  import { Notification } from 'element-ui'
+  // 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},
+  components: { Weather, Position, Notification},
   data() {
     return {
       color: '#00ff01',
-      times:0
+      times:0,
+      socket: null
     }
   },
   created() {
@@ -33,24 +34,92 @@
         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'
-            }
-          }
-        })
-      }
-    })
+  },
+  mounted(){
+    this.initWebSocket()
+  },
+  beforeDestroy(){
+    this.destoryWebSocket()
   },
   methods: {
+    initWebSocket() {
+      let that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.baseConfig.webSocketUrl + this.$store.getters.id
+        console.log(socketUrl,'*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const msgdata = JSON.parse(msg.data)
+          console.log(msgdata)
+          const data = msgdata.messageObject
+          if (msgdata.type === 'alarm') {
+            let message
+            switch (data.alarmType) {
+              case '1':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '%'
+                break
+              case '2':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '3':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'm/s'
+                break
+              case '4':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '5':
+                message = data.robotId + '号' + data.alarmTypeName + ':' + data.alarmValue + '海里'
+                break
+              case '6':
+                message = data.alarmTypeName + ':' + data.alarmValue + 'kb/s'
+                break
+            }
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning',
+            })
+          }else if(msgdata.type === 'shelterPosition'){
+            that.init()
+          }
+        }
+        // 监听socket错误
+        that.socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        that.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    destoryWebSocket(){
+      this.socket.close()
+    },
+    init(){
+      this.$refs.position.init()
+      this.$refs.weather.init()
+      // this.$refs.water.init()
+    }
   }
 }
 </script>
@@ -60,7 +129,7 @@
     display: flex;
     flex-direction: column;
     .title{
-      margin: 10px 0px 0px 50px;
+      margin: 10px 0px 0px 30px;
       color: white;
       font-size: 18px;
       display: flex;
@@ -81,7 +150,7 @@
     .weather{
       margin: 5px 0px;
       width: 100%;
-      height: 42%;
+      height: 62%;
     }
     .water{
       margin: 5px 0px;
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 6246e33..f9a595d 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -17,6 +17,7 @@
   components: {LeafletMap, ImageBlock},
   data() {
     return {
+      timer:'',
       data:[
         // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
         // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
@@ -29,21 +30,27 @@
       ]
     }
   },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
   created() {
     this.initRobot()
+    this.timer = setInterval(this.initRobot, 2000);
   },
   mounted() {
-    this.webSocket()
+    // this.webSocket()
   },
   methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
+    // 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.toFixed(2)+'海里',lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
+            let distance = '-'
+            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
+            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
           })
         }
       })
@@ -54,20 +61,12 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .overview{
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     padding-right: 30px;
     width: 100%;
     height: 100%;
-    .top{
-      display: flex;
-      flex-direction: row;
-      .block{
-        width: 12.5%;
-        height: 45px;
-        margin-right: 10px;
-      }
-    }
     .map{
       width: 100%;
       flex: 1;
@@ -75,4 +74,36 @@
       margin: 10px 0px;
     }
   }
+  .top{
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+    .block{
+      width: 190px;
+      height: 45px;
+    }
+    height: 55px;
+    width: 100%;
+    overflow-x: auto;
+  }
+  .top::-webkit-scrollbar
+  {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
+  }
+  .top::-webkit-scrollbar-thumb
+  {
+    /*滚动条里面小方块*/
+    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
+  }
+  //滚动条底层颜色!
+  .top::-webkit-scrollbar-track
+  {
+    border-radius: 10px;  background: #4a8ad499;
+
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>
diff --git a/src/views/overview/position.vue b/src/views/overview/position.vue
index 9e3e813..395b5cc 100644
--- a/src/views/overview/position.vue
+++ b/src/views/overview/position.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="title">当前位置</div>
+    <div class="title">气象指标</div>
     <div class="content">
       <div style="width: 100%;height: 30px;display: flex;">
         <el-image :src="img" style="width: 30px;height: 30px"/>
@@ -28,6 +28,8 @@
         lng:'116.876473',
         lat:'39.342181'
       },
+      timer: null, // 定时器
+      clock: 1, // 定时时间
       data:[
         {name:'温度',value:'***°C',color:'#f3232c'},
         {name:'湿度',value:'***',color:'#eacb18'},
@@ -42,6 +44,12 @@
       ]
     }
   },
+  created(){
+    this.init()
+  },
+  beforeDestroy(){
+    this.stopTimer()
+  },
   mounted() {
     getMeteorology().then(res => {
       if (res.code === 200) {
@@ -59,6 +67,26 @@
     })
   },
   methods: {
+    init(){
+      getShelterPosition().then(res => {
+        if (res.code === 200) {
+          this.position.lat = res.data.lat.toFixed(8)
+          this.position.lng = res.data.lng.toFixed(8)
+        }
+      })
+      // this.openTimer()
+    },
+    openTimer(){
+      this.timer = setTimeout(() => {
+        this.init()
+      }, this.clock * 1000)
+    }, // 停止定时器
+    stopTimer(){
+      if (this.timer){
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
   }
 }
 </script>
@@ -72,6 +100,7 @@
       color: #00f5ff;
       font-size: 17px;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       display: flex;
diff --git a/src/views/overview/right.vue b/src/views/overview/right.vue
index a8fdf0a..709683d 100644
--- a/src/views/overview/right.vue
+++ b/src/views/overview/right.vue
@@ -33,7 +33,8 @@
         name: '天通卫星通信',
         value: 'kb/s'
       },
-      timer:''
+      timer:'',
+      type: this.baseConfig.webType
     }
   },
   mounted() {
@@ -48,6 +49,19 @@
       getSatelliteSignal().then(res => {
         if (res.code === 200) {
           this.data.value = res.data.signalValue + 'kb/s'
+          if(this.type === 'client'){
+            if(Number(res.data.signalValue)<3){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }else if(this.type === 'service'){
+            if(Number(res.data.signalValue)<10){
+              this.img = require('@/assets/images/red.png')
+            }else{
+              this.img = require('@/assets/images/green.png')
+            }
+          }
         }
       })
     },
diff --git a/src/views/overview/water.vue b/src/views/overview/water.vue
index b0a4e70..896ac83 100644
--- a/src/views/overview/water.vue
+++ b/src/views/overview/water.vue
@@ -29,28 +29,31 @@
     }
   },
   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 + '米'
-          }
-        })
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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[3].value = res.data.
+              this.data[0].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[1].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+            }
+          })
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/overview/weather.vue b/src/views/overview/weather.vue
index 32d5416..759380a 100644
--- a/src/views/overview/weather.vue
+++ b/src/views/overview/weather.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="container">
-    <div class="title">气象指标</div>
+    <div class="title">洋流指标</div>
     <div class="content">
       <div class="block" v-for="(value,key,index) in data" :key="index">
-        <item :data="value"/>
+        <item :data="value" />
+      </div>
+    </div>
+    <div class="title" style="color:#50C55C">台风指标</div>
+    <div class="content">
+      <div class="block" v-for="(value,key,index) in data1" :key="index">
+        <item :data="value" />
       </div>
     </div>
   </div>
@@ -19,51 +25,62 @@
   data() {
     return {
       data:[
-        {name:'风速风向',value:'***°',color:'#00f5ff'},
-        {name:'海温',value:'',color:'#50C55C'},
-        {name:'气压',value:'',color:'#50C55C'},
-        {name:'海拔',value:'',color:'#50C55C'},
-        {name:'风浪方向/高度',value:'',color:'#00f5ff'},
+        {name:'风速风向',value:'***°',color:'#50C55C'},
+        {name:'海温',value:'',color:'#00f5ff'},
+        {name:'气压',value:'',color:'#00f5ff'},
+        {name:'海拔',value:'',color:'#00f5ff'},
+        {name:'风浪方向/高度',value:'',color:'#50C55C'},
         {name:'涌浪方向/高度',value:'',color:'#00f5ff'},
-        {name:'台风预报',value:'********************************************',color:'#50C55C'},
+        {name:'流向/流速',value:'***',color:'#00f5ff'},
+        {name:'波浪预报',value:'*****************************************',color:'#00f5ff'},
+      ],
+    data1:[
+      {name:'台风预报',value:'********************************************',color:'#50C55C'}
       ]
     }
   },
   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')
-           }
-         }
-      }
-    })
+    this.init()
   },
   methods: {
+    init(){
+      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 + 'm '
+              this.data[4].value = res.data.waveDir + '° '+ res.data.waveHeight + 'm '
+              this.data[5].value = res.data.swellDir + '° '+ res.data.swellHeight + 'm '
+              this.data[6].value = res.data.oceanDir + '° '+ res.data.speed + 'm/s'
+              this.data[7].value = '风浪：' + res.data.forecast.waveDir + '° '+ res.data.forecast.waveHeight + 'm\n' +
+                '涌浪：' + res.data.forecast.swellDir + '° '+res.data.forecast.swellHeight + 'm'
+
+            }
+          })
+        }
+      })
+      getTyphoonList().then(res => {
+        if (res.code === 200) {
+          if(res.data.length===0) {this.data1[0].value = '暂无台风'}
+          else {
+            this.data1[0].value = ''
+            for(let i=0;i<res.data.length;i++){
+              this.data1[0].value += (res.data[i].name+'台风（'+res.data[i].lng+','+res.data[i].lat+'),'+ res.data[i].power +'级风 \n')
+            }
+          }
+        }
+      })
+    }
   }
 }
 </script>
@@ -77,6 +94,7 @@
       font-size: 17px;
       color: #00f5ff;
       margin: 10px 0px 10px 20px;
+      font-weight: bold;
     }
     .content{
       padding: 0px 20px;
@@ -85,7 +103,7 @@
       flex: 1;
       .block{
         width: 100%;
-        height: 30px;
+        height: 38px;
       }
     }
   }
diff --git a/src/views/setting/alarm.vue b/src/views/setting/alarm.vue
index f387186..6340c8e 100644
--- a/src/views/setting/alarm.vue
+++ b/src/views/setting/alarm.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <el-form ref="form" :model="form" label-width="160px">
+    <el-form ref="dataForm" :model="form" :rules="rules" label-width="160px">
       <div class="alarm-title">气象水文</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="台风报警">
+          <el-form-item label="台风报警" prop="typhoonDistance">
               <el-input v-model="form.typhoonDistance">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
@@ -12,7 +12,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="风速报警">
+          <el-form-item label="风速报警" prop="typhoonSpeed">
               <el-input v-model="form.typhoonSpeed">
                 <template slot="prepend">大于</template>
                 <template slot="append">m/s</template>
@@ -23,8 +23,8 @@
       <div class="alarm-title">AIS&电子海图</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="船舶报警">
-              <el-input v-model="form.shipDistance">
+          <el-form-item label="船舶报警" prop="shipDistance">
+              <el-input v-model="form.shipDistance" @keyup.native="value = oninput(value)">
                 <template slot="prepend">小于</template>
                 <template slot="append">海里</template>
               </el-input>
@@ -34,7 +34,7 @@
       <div class="alarm-title">水下机器人</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="电量报警">
+          <el-form-item label="电量报警" prop="robotBattery">
               <el-input v-model="form.robotBattery">
                 <template slot="prepend">小于</template>
                 <template slot="append">%</template>
@@ -42,7 +42,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="10">
-          <el-form-item label="位置报警">
+          <el-form-item label="位置报警" prop="robotDistance">
               <el-input v-model="form.robotDistance">
                 <template slot="prepend">大于</template>
                 <template slot="append">海里</template>
@@ -53,8 +53,8 @@
       <div class="alarm-title">通信信号</div>
       <el-row>
         <el-col :span="10">
-          <el-form-item label="通信信号强度">
-              <el-input v-model="form.satelliteSignal">
+          <el-form-item label="通信信号强度" prop="satelliteSignal">
+              <el-input v-model="form.satelliteSignal" >
                 <template slot="prepend">小于</template>
                 <template slot="append">kb/s</template>
               </el-input>
@@ -77,8 +77,23 @@
     name: 'Alarm',
     components: {},
     data() {
+      const validatePoint = (rule, value, callback) => {
+        if ((/^(([1-9][0-9]*|0)\.([0-9]{1,100})$)|^([1-9][0-9]*|0)$/).test(value) === false) {
+          callback(new Error('请输入正数'))
+        } else {
+          callback()
+        }
+      }
       return {
         list: [],
+        rules: {
+          satelliteSignal:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          typhoonSpeed:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          shipDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotBattery :[{validator: validatePoint, trigger: ['blur', 'change'] }],
+          robotDistance:[{validator: validatePoint, trigger: ['blur', 'change'] }]
+        },
         form: {
           typhoonDistance:'',
           typhoonSpeed:'',
@@ -106,6 +121,9 @@
       },
       init(){
         console.log('获取当前值')
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
         alarmRecentValue().then(res => {
           if (res.code === 200) {
             this.form = res.data
diff --git a/src/views/setting/log.vue b/src/views/setting/log.vue
index 94da006..33e0dc8 100644
--- a/src/views/setting/log.vue
+++ b/src/views/setting/log.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <el-radio-group v-model="type" style="padding: 5px 50px;margin-bottom: 10px" @change="fetchData(false)">
-      <el-radio label="水下机器人交互日志">水下机器人交互日志</el-radio>
-      <el-radio label="岸基控制交互日志">岸基控制交互日志</el-radio>
-      <el-radio label="系统操作日志">系统操作日志</el-radio>
+      <el-radio label="水下机器人发送">水下机器人发送</el-radio>
+      <el-radio label="水下机器人接收">水下机器人接收</el-radio>
+      <el-radio label="岸基控制发送">岸基控制发送</el-radio>
+      <el-radio label="岸基控制接收">岸基控制接收</el-radio>
+      <!--<el-radio label="系统操作日志">系统操作日志</el-radio>-->
     </el-radio-group>
     <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" @change="changePage">
       <template slot="columns"/>
@@ -12,40 +14,37 @@
 </template>
 
 <script>
-  import { getBizLogList, getBizLogDetail, getLogType, delLog } from '@/api/system/log'
+  import { getBizLogList, getBizLogDetail, getLogType, delLog, logListPage } from '@/api/system/log'
 export default {
   name: 'Log',
   components: {},
   data() {
     return {
-      type:'水下机器人交互日志',
+      type:'水下机器人发送',
       listQuery: {
-        keywords: '',
-        beginTime: '',
-        endTime: '',
-        logType: '业务日志',
+        type: '',
         offset: 1,
         limit: '10',
-        sort: '',
-        order: ''
       },
       columns: [
         {
-          text: '日志名称',
-          value: 'logName',
+          text: '内容',
+          value: 'dataContent'
+        },
+        {
+          text: '日志类型',
+          value: 'logType',
           width: 150
         },
         {
-          text: '用户',
-          value: 'userName'
+          text: '状态',
+          value: 'statusName',
+          width: 80
         },
         {
           text: '时间',
-          value: 'createTime'
-        },
-        {
-          text: '详细信息',
-          value: 'message'
+          value: 'createTime',
+          width: 150
         }
       ],
       list: [],
@@ -60,18 +59,59 @@
     this.fetchData(false)
   },
   methods: {
+  //   <el-radio label="水下机器人发送">水下机器人发送</el-radio>
+  // <el-radio label="水下机器人接收">水下机器人接收</el-radio>
+  // <el-radio label="岸基控制发送">岸基控制发送</el-radio>
+  // <el-radio label="岸基控制接收">岸基控制接收</el-radio>
     fetchData(isNowPage = true) {
       this.listLoading = true
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      if(this.type==='水下机器人交互日志'){
-      }else if(this.type==='岸基控制交互日志'){
-
-      }else if(this.type==='系统操作日志'){
-        getBizLogList(this.listQuery).then(response => {
+      if(this.type==='水下机器人发送'){
+        this.listQuery.type = '1'
+        logListPage(this.listQuery).then(response => {
           this.list = response.data.rows
-          if(this.list.length>10) this.list.length = 10  //后端bug
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='水下机器人接收'){
+        this.listQuery.type = '0'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='岸基控制发送'){
+        this.listQuery.type = '3'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        })
+      }else if(this.type==='岸基控制接收'){
+        this.listQuery.type = '2'
+        logListPage(this.listQuery).then(response => {
+          if(response.data.rows === '')  this.list = []
+          else this.list = response.data.rows
+          this.list.map(item => {
+            item.statusName = item.status === '1'? '成功':'失败'
+            return  item
+          })
           this.total = parseInt(response.data.total)
           this.listLoading = false
         })
diff --git a/src/views/setting/setting.vue b/src/views/setting/setting.vue
index 163b5d3..3779530 100644
--- a/src/views/setting/setting.vue
+++ b/src/views/setting/setting.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="系统设置" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog title="系统设置" :visible.sync="dialogFormVisible" append-to-body width="1000px">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane  v-for="value in data" :name="value.name" :label="value.name">
          <span slot="label">
diff --git a/src/views/system/user/editUser.vue b/src/views/system/user/editUser.vue
index c13700d..e3ffa3a 100644
--- a/src/views/system/user/editUser.vue
+++ b/src/views/system/user/editUser.vue
@@ -96,7 +96,7 @@
         name: '', // 姓名
         email: '', // 邮箱，
         phone: '', // 手机号，
-        deptId: '', // 组织机构编号
+        deptId: '24', // 组织机构编号
         roleid: '', // 角色
         password: '', // 密码
         rePassword: '', // 重复密码
@@ -189,7 +189,7 @@
           name: row.name, // 姓名
           email: row.email, // 邮箱，
           phone: row.phone, // 手机号，
-          deptId: row.deptId, // 组织机构编号
+          deptId: '24', // 组织机构编号
           roleid: row.roleid, // 角色
           birthday: row.birthday, // 生日
           sex: row.sex // 性别
@@ -218,7 +218,7 @@
         name: '', // 姓名
         email: '', // 邮箱，
         phone: '', // 手机号，
-        deptId: '', // 组织机构编号
+        deptId: '24', // 组织机构编号
         roleid: '', // 角色
         password: '', // 密码
         rePassword: '' // 重复密码