diff --git a/README.md b/README.md
index 79d4ac0..f230621 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,9 @@ cd cloud-ui
 # 安装依赖
 npm install
 
+#高德题图第三方依赖
+npm install @amap/amap-jsapi-loader
+
 # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npmmirror.com
 
diff --git a/src/main.js b/src/main.js
index 8fc3cec..52d9fc3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -76,7 +76,19 @@ DictData.install()
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
+//高德地图相关配置
+import AMapLoader from '@amap/amap-jsapi-loader'
 
+Vue.prototype.$AMap = null
+AMapLoader.load({
+  key: '9a267a434f26f5dd5a87fb89d128f745',
+  version: '2.0',
+  //'AMap.Autocomplete', 'AMap.MoveAnimation','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'
+  plugins: [],
+
+}).then((AMap) => {
+  Vue.prototype.$AMap = AMap
+})
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/utils/request.js b/src/utils/request.js
index 475e117..df8e748 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -73,7 +73,6 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-  debugger
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息
diff --git a/src/views/MapStyle.css b/src/views/MapStyle.css
new file mode 100644
index 0000000..714f931
--- /dev/null
+++ b/src/views/MapStyle.css
@@ -0,0 +1,432 @@
+html {
+  font-size: 12px;
+}
+.amap-copyright{
+  box-sizing: content-box
+}
+* {
+  box-sizing: border-box
+}
+.input-textarea{
+  color:grey;
+  height:8em;
+  overflow:auto;
+  border-radius:0.4rem;
+  border:1px solid #ced4da;
+  margin-bottom:1rem;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  font-weight: 300;
+  color: #111213;
+}
+
+hr {
+  margin: 0.5rem 0;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, .1)
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.4rem;
+}
+
+label, .btn {
+  margin-left: 0;
+  font-size: 1rem;
+}
+
+button, input, select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none
+}
+
+[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type=checkbox], input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+}
+
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: .5rem
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor:pointer;
+}
+
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7
+}
+
+.btn:hover {
+  text-decoration: none
+}
+
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+
+.input-item:last-child {
+  margin-bottom: 0;
+}
+
+.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+
+.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0
+}
+
+.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0
+}
+
+.input-item-prepend {
+  margin-right: -1px;
+}
+
+.input-item-text, input[type=text],input[type=date], select {
+  height: calc(2.2rem + 2px);
+}
+
+.input-item-text {
+  width: 6rem;
+  text-align: justify;
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  text-justify: distribute-all-lines;
+  /*ie6-8*/
+  text-align-last: justify;
+  /* ie9*/
+  -moz-text-align-last: justify;
+  /*ff*/
+  -webkit-text-align-last: justify;
+  /*chrome 20+*/
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
+  margin-top: 0
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+
+.input-text {
+  line-height: 2rem;
+  margin-right: 2rem;
+}
+
+.info hr {
+  margin-right: 0;
+  margin-left: 0;
+  border-top-color: grey;
+}
+
+.info {
+  padding: .75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: .25rem;
+  position: fixed;
+  top: 1rem;
+  background-color: white;
+  width: auto;
+  min-width: 22rem;
+  border-width: 0;
+  right: 1rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+}
+
+.code {
+  left: 1.5rem;
+  right: 1.5rem;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  overflow: auto;
+  margin-bottom: 0rem;
+}
+
+.code .btn {
+  top: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+
+.code .result {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  bottom: 1rem;
+  position: absolute;
+  top: 5.5rem;
+  right: 1rem;
+  left: 1rem;
+  overflow: auto;
+}
+
+.code .status {
+  color: #80adff;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.code h4 {
+  display: inline-block;
+  max-width: 20rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+
+select, input[type=text], input[type=date] {
+  display: inline-block;
+  width: 100%;
+  padding: .375rem 1.75rem .375rem .75rem;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
+  background-size: 8px 10px;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none
+}
+
+input[type=text],input[type=date] {
+  background: #fff;
+  padding: .375rem .75rem;
+}
+
+select:focus, input[type=text]:focus, input[type=date]:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
+  color: #495057;
+  background-color: #fff
+}
+
+
+/* native toastr */
+.native-toast {
+  position: fixed;
+  background-color: rgba(50, 50, 50, .8);
+  border-radius: 33px;
+  color: white;
+  left: 50%;
+  text-align: center;
+  padding: 6px 12px;
+  opacity: 0;
+  z-index: 99999;
+  transition: transform .25s, opacity .25s, top .25s;
+  box-sizing: border-box;
+}
+
+.native-toast-bottom {
+  bottom: 50px;
+  -ms-transform: translateX(-50%) translateY(50px);
+  transform: translateX(-50%) translateY(50px)
+}
+
+.native-toast-bottom.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-bottom.native-toast-edge {
+  bottom: 0;
+}
+
+.native-toast-top {
+  top: 50px;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px)
+}
+
+.native-toast-top.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-top.native-toast-edge {
+  top: 0;
+}
+
+.native-toast-center {
+  top: 0;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px)
+}
+
+.native-toast-center.native-toast-shown {
+  opacity: 1;
+  top: 50%;
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.native-toast-edge {
+  border-radius: 0;
+  width: 100%;
+  text-align: left;
+}
+
+@media screen and (min-width: 40rem) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 18rem;
+  }
+}
+
+/*
+  max-width does not seem to work in small screen?
+*/
+
+/*@media screen and (max-width: 768px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 400px;
+  }
+}
+
+@media screen and (max-width: 468px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 300px;
+  }
+}*/
+
+/* types */
+
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px
+}
+
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}
diff --git a/src/views/allCar/operation.vue b/src/views/allCar/operation.vue
index 86566d0..eb77a03 100644
--- a/src/views/allCar/operation.vue
+++ b/src/views/allCar/operation.vue
@@ -1,1289 +1,160 @@
-<!--&lt;!&ndash;运行轨迹&ndash;&gt;-->
-<!--<template>-->
-<!--  <div class="app-container">-->
-<!--    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">-->
-<!--      <el-form-item label="车辆VIN" prop="vin">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.vin"-->
-<!--          placeholder="请输入车辆VIN"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="车辆类型" prop="vehicleType">-->
-<!--        <el-select v-model="queryParams.vehicleType" placeholder="请选择车辆类型" clearable>-->
-<!--          <el-option-->
-<!--            v-for="dict in dict.type.vehicle_type"-->
-<!--            :key="dict.value"-->
-<!--            :label="dict.label"-->
-<!--            :value="dict.value"-->
-<!--          />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="电子围栏" clearable prop="fenceId">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.fenceId"-->
-<!--          placeholder="请输入电子围栏ID"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="车辆状态" prop="vehicleStatus">-->
-<!--        <el-select v-model="queryParams.vehicleStatus" placeholder="请选择车辆状态" clearable>-->
-<!--          <el-option-->
-<!--            v-for="dict in dict.type.vehicle_status"-->
-<!--            :key="dict.value"-->
-<!--            :label="dict.label"-->
-<!--            :value="dict.value"-->
-<!--          />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="电机厂商" prop="motorManufacturer">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.motorManufacturer"-->
-<!--          placeholder="请输入电机厂商"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="电池厂商" prop="batteryManufacturer">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.batteryManufacturer"-->
-<!--          placeholder="请输入电池厂商"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="电机编号" prop="motorId">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.motorId"-->
-<!--          placeholder="请输入电机编号"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="电池编号" prop="batteryId">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.batteryId"-->
-<!--          placeholder="请输入电池编号"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item>-->
-<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
-<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
-<!--      </el-form-item>-->
-<!--    </el-form>-->
+<template>
+  <div>
+    <div id="container"></div>
+    <div class="input-card">
+      <h4>轨迹回放控制</h4>
+      <div class="input-item">
+        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
+        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
+      </div>
+      <div class="input-item">
+        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
+        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
+      </div>
+      <!--      <div class="input-item">-->
+      <!--        <el-button type="primary" round plain id="start" @click="startAnimation">开始动画</el-button>-->
+      <!--        <el-button type="primary" round plain id="pause" @click="pauseAnimation">暂停动画</el-button>-->
+      <!--      </div>-->
+      <!--      <div class="input-item">-->
+      <!--        <el-button type="primary" round plain id="resume" @click="resumeAnimation">继续动画</el-button>-->
+      <!--        <el-button type="primary" round plain id="stop" @click="send">实时轨迹</el-button>-->
+      <!--      </div>-->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  data(){
+    return {
+      map: null,
+      marker: null,
+      passedPolyline: null,
+      lineArr: [],
+      arr: []
 
-<!--    <el-row :gutter="10" class="mb8">-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          v-hasPermi="['vehicle:vehicle:add']"-->
-<!--          type="primary"-->
-<!--          plain-->
-<!--          icon="el-icon-plus"-->
-<!--          size="mini"-->
-<!--          @click="handleAdd"-->
-<!--        >新增</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          v-hasPermi="['vehicle:vehicle:edit']"-->
-<!--          type="success"-->
-<!--          plain-->
-<!--          icon="el-icon-edit"-->
-<!--          size="mini"-->
-<!--          :disabled="single"-->
-<!--          @click="handleUpdate"-->
-<!--        >修改</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          v-hasPermi="['vehicle:vehicle:remove']"-->
-<!--          type="danger"-->
-<!--          plain-->
-<!--          icon="el-icon-delete"-->
-<!--          size="mini"-->
-<!--          :disabled="multiple"-->
-<!--          @click="handleDelete"-->
-<!--        >删除</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          v-hasPermi="['vehicle:vehicle:export']"-->
-<!--          type="warning"-->
-<!--          plain-->
-<!--          icon="el-icon-download"-->
-<!--          size="mini"-->
-<!--          @click="handleExport"-->
-<!--        >导出</el-button>-->
-<!--      </el-col>-->
-<!--      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />-->
-<!--    </el-row>-->
+      // lineArr: [
+      //   [116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],
+      //   [116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],
+      //   [116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],
+      //   [116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],
+      //   [116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],
+      //   [116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],
+      //   [116.484648,39.999861]
+      //   ],
+    }
+  },
+  created() {
+    this.socket = new WebSocket('ws://10.100.1.8:9802/websocket/1234');
+  },
+  mounted(){
+    this.socket.onopen = this.handleOpen;
+    this.socket.onmessage = this.handleMessage;
+    this.socket.onerror = this.handleError;
+    setTimeout(() =>{
+      this.send()
+      this.initAMap();
+    },500);
 
-<!--    <el-table v-loading="loading" :data="vehicleList" @selection-change="handleSelectionChange">-->
-<!--      <el-table-column type="selection" width="55" align="center" />-->
-<!--      <el-table-column label="车辆VIN" width="160px" align="center" prop="vin" />-->
-<!--      <el-table-column label="车辆类型" align="center" prop="vehicleType">-->
-<!--        <template slot-scope="scope">-->
-<!--          <dict-tag :options="dict.type.vehicle_type" :value="scope.row.vehicleType" />-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="电子围栏" align="center" prop="fenceId">-->
-<!--        <template slot-scope="scope">-->
-<!--          <span v-if="scope.row.fenceId === '' || scope.row.fenceId === null">-->
-<!--            <el-tag type="warning">未规划</el-tag>-->
-<!--          </span>-->
-<!--          <span v-if="scope.row.fenceId !== '' && scope.row.fenceId !== null">-->
-<!--            <el-tag type="success">{{ scope.row.fenceId }}</el-tag>-->
-<!--          </span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="车辆状态" align="center" prop="vehicleStatus">-->
-<!--        <template slot-scope="scope">-->
-<!--          <dict-tag :options="dict.type.vehicle_status" :value="scope.row.vehicleStatus" />-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="电机厂商" align="center" prop="motorManufacturer" />-->
-<!--      <el-table-column label="电池厂商" align="center" prop="batteryManufacturer" />-->
-<!--      <el-table-column label="电机编号" width="160px" align="center" prop="motorId" />-->
-<!--      <el-table-column label="电池编号" align="center" prop="batteryId" />-->
-<!--      <el-table-column label="操作" width="200px" align="center" class-name="small-padding fixed-width">-->
-<!--        <template slot-scope="scope">-->
-<!--          <el-button-->
-<!--            :disabled="scope.row.vehicleStatus === 0"-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-map-location"-->
-<!--            @click="openTrack(scope.row.vin)"-->
-<!--          >实时轨迹</el-button>-->
-<!--          <el-button-->
-<!--            v-hasPermi="['vehicle:vehicle:edit']"-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-edit"-->
-<!--            @click="handleUpdate(scope.row)"-->
-<!--          >修改</el-button>-->
-<!--          <el-button-->
-<!--            v-hasPermi="['vehicle:vehicle:remove']"-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-delete"-->
-<!--            @click="handleDelete(scope.row)"-->
-<!--          >删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--    </el-table>-->
+  },
+  methods:{
+    send(){
+      //发送消息
+      this.socket.send('nihao');
+    },
+    handleOpen() {
+      console.log('WebSocket is open!');
+    },
+    //前端接收数据
+    handleMessage(event) {
+      let lastArr = [];
+      this.arr = JSON.parse(event.data)
+      let len = this.lineArr.length
+      if (len !== 0){
+        lastArr = this.lineArr[len-1];
+        this.lineArr.length = 0
+        this.lineArr.push(lastArr)
+      }
+      console.log(this.lineArr.toString())
+      this.lineArr.push(this.arr);   // 添加新的点数据
+      console.log(this.lineArr.toString())
+      this.startAnimation()
+    },
 
-<!--    <pagination-->
-<!--      v-show="total>0"-->
-<!--      :total="total"-->
-<!--      :page.sync="queryParams.pageNum"-->
-<!--      :limit.sync="queryParams.pageSize"-->
-<!--      @pagination="getList"-->
-<!--    />-->
+    handleError(error) {
+      console.log("异常")
+      // console.error(`Error occurred: ${error}`);
+    },
+    initAMap() {
+      // JSAPI2.0 使用覆盖物动画必须先加载动画插件
+      this.$AMap.plugin('AMap.MoveAnimation', () => {
+        this.map = new this.$AMap.Map("container", {
+          resizeEnable: true,
+          center: [116.478935,39.997761],
+          zoom: 17
+        });
+      });
 
-<!--    &lt;!&ndash; 添加或修改车辆信息管理对话框 &ndash;&gt;-->
-<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
-<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
-<!--        <el-form-item label="车辆VIN" prop="vin">-->
-<!--          <el-input v-model="form.vin" placeholder="请输入车辆VIN" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="车辆类型" prop="vehicleType">-->
-<!--          <el-select v-model="form.vehicleType" placeholder="请选择车辆类型">-->
-<!--            <el-option-->
-<!--              v-for="dict in dict.type.vehicle_type"-->
-<!--              :key="dict.value"-->
-<!--              :label="dict.label"-->
-<!--              :value="parseInt(dict.value)"-->
-<!--            />-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="电子围栏" prop="fenceId">-->
-<!--          <el-select v-model="form.fenceId" clearable placeholder="请选择">-->
-<!--            <el-option-->
-<!--              v-for="item in fenceList"-->
-<!--              :key="item.id"-->
-<!--              :label="item.fenceName"-->
-<!--              :value="item.id"-->
-<!--            />-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="电机厂商" prop="motorManufacturer">-->
-<!--          <el-input v-model="form.motorManufacturer" placeholder="请输入电机厂商" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="电池厂商" prop="batteryManufacturer">-->
-<!--          <el-input v-model="form.batteryManufacturer" placeholder="请输入电池厂商" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="电机编号" prop="motorId">-->
-<!--          <el-input v-model="form.motorId" placeholder="请输入电机编号" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="电池编号" prop="batteryId">-->
-<!--          <el-input v-model="form.batteryId" placeholder="请输入电池编号" />-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
-<!--      <div slot="footer" class="dialog-footer">-->
-<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
-<!--        <el-button @click="cancel">取 消</el-button>-->
-<!--      </div>-->
-<!--    </el-dialog>-->
+      this.marker = new this.$AMap.Marker({
+        map: this.map,
+        position: [116.478935,39.997761],
+        icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
+        offset: new this.$AMap.Pixel(-13, -26),
+        autoRotation: true,
+      });
 
-<!--    <el-dialog-->
-<!--      :fullscreen="true"-->
-<!--      :visible.sync="trajectoryVisible"-->
-<!--      :before-close="trajectoryClose"-->
-<!--    >-->
-<!--      <div style="width:100%;height:800px;">-->
-<!--        <el-row type="flex" style="height: 30px">-->
-<!--          <el-col :span="24">-->
-<!--            <div class="grid-content bg-purple-dark">-->
-<!--              <el-tag style="margin-left: 45%;font-size: 16px" size="medium">车辆轨迹：{{ this.vin }}</el-tag>-->
-<!--            </div>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-<!--        <el-row style="margin-top: 5px">-->
-<!--          <el-col :span="7" style="margin-left: 2.2%;"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card" shadow="hover">-->
-<!--              <div slot="header" class="clearfix" style="font-size: 8px">-->
-<!--                <span>车辆轨迹</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <el-amap-->
-<!--                  style="width: 450px;height: 300px"-->
-<!--                  class="amap-box"-->
-<!--                  :amap-manager="amapManager"-->
-<!--                  :vid="'amap-vue'"-->
-<!--                  :zoom="zoom"-->
-<!--                  :plugin="plugin"-->
-<!--                  :center="center"-->
-<!--                  :events="events"-->
-<!--                >-->
-<!--                  &lt;!&ndash; 标记 &ndash;&gt;-->
-<!--                  <el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events" />-->
-<!--                  <el-amap-info-window-->
-<!--                    :position="currentWindow.position"-->
-<!--                    :content="currentWindow.content"-->
-<!--                    :visible="currentWindow.visible"-->
-<!--                    :events="currentWindow.events"-->
-<!--                  />-->
-<!--                </el-amap>-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col :span="8" style="margin-left: 1.5%"><div class="grid-content bg-purple-light">-->
-<!--            <el-card class="box-card" shadow="hover">-->
-<!--              <div slot="header" class="clearfix" style="font-size: 8px">-->
-<!--                <span>车辆转速</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <div class="app-container homeIndex">-->
-<!--                  <div class="mineEcharts">-->
-<!--                    <div ref="mineEcharts" style="height: 260px" />-->
-<!--                  </div>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col :span="7" style="margin-left: 1.5%"><div class="grid-content bg-purple-light">-->
-<!--            <el-card class="box-card" shadow="hover">-->
-<!--              <div slot="header" class="clearfix" style="font-size: 8px;height: 10px">-->
-<!--                <span>电池温度/电压</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <div id="batteryTemperature" :style="{width: '460px', height: '150px'}" />-->
-<!--                <div id="cellVoltage" :style="{width: '470px', height: '150px'}" />-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--        </el-row>-->
-<!--        <el-row style="margin-top: 2%">-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>单体电池最低电压</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.lowestVoltageBattery }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电机电压</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.motorVoltage }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电机转速</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.motorSpeed }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>BMS自检计数器</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.selfCheckingCounter }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>总电压</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.totalVoltage }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--        </el-row>-->
-<!--        <el-row style="margin-top: 2%">-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>档位</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.gears }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电池剩余电量</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.dumpEnergy }}%-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电机电流</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.motorCurrent }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>制动踏板行程值</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.brakePedal }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>总电流</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.jointCurrent }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--        </el-row>-->
-<!--        <el-row style="margin-top: 2%">-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>单次最大电压</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.maximumVoltage }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>燃料消耗率</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.fuelRate }}L/百公里-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>绝缘电阻</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.insulationResistance }}Ω-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>最大反馈功率</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.maximumFeedbackPower }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>单体电池最高温度</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.maximumTemperatureBattery }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--        </el-row>-->
-<!--        <el-row style="margin-top: 2%">-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>动力电池可用容量</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.availableBatteryCapacity }}%-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电机温度</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.motorTemperature }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>充放电电流</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.chargingAndDischargingCurrent }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>最大放电功率</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.maximumDischargePower }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电机控制器温度</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.motorControllerTemperature }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--        </el-row>-->
-<!--        <el-row style="margin-top: 2%">-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电池负载端总电压</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.totalVoltageAtLoadEnd }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>里程</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.totalDistance }}KM-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>单体电池最低温度</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.lowestTemperatureBattery }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>加速踏板行程值</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.acceleratorPedal }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--          <el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">-->
-<!--            <el-card class="box-card">-->
-<!--              <div slot="header" class="clearfix">-->
-<!--                <span>电机转矩</span>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                {{ this.vehicleInfo.motorTorque }}-->
-<!--              </div>-->
-<!--            </el-card>-->
-<!--          </div></el-col>-->
-<!--        </el-row>-->
-<!--      </div>-->
-<!--    </el-dialog>-->
-<!--  </div>-->
-<!--</template>-->
+      this.marker.on('moving', (e) => {
+        this.passedPolyline.setPath(e.passedPath);
+        this.map.setCenter(e.target.getPosition(),true)
+      });
+      this.map.setFitView();
+    },
 
-<!--<script>-->
-<!--import { AMapManager,-->
-<!--  lazyAMapApiLoaderInstance } from 'vue-amap'-->
-<!--const amapManager = new AMapManager()-->
-<!--// import { listVehicle,-->
-<!--//   getVehicle,-->
-<!--//   delVehicle,-->
-<!--//   addVehicle,-->
-<!--//   updateVehicle,-->
-<!--//   fenceList,-->
-<!--//   getPosition } from '@/api/vehicle/vehicle'-->
-<!--import echarts from 'echarts'-->
-<!--import { carList } from '../../api/carList/list'-->
-<!--export default {-->
-<!--  name: 'Vehicle',-->
-<!--  dicts: ['vehicle_status', 'vehicle_type'],-->
-<!--  data() {-->
-<!--    return {-->
-<!--      chart: null,-->
-<!--      mineEcharts: null,-->
-<!--      carmarkers: [],-->
-<!--      currentWindow: {-->
-<!--        position: [10.396624, 47.908167],-->
-<!--        events: {},-->
-<!--        content: 1011,-->
-<!--        visible: true-->
-<!--      },-->
-<!--      address: null,-->
-<!--      searchKey: '',-->
-<!--      amapManager,-->
-<!--      markers: [],-->
-<!--      searchOption: {-->
-<!--        city: '全国',-->
-<!--        citylimit: true-->
-<!--      },-->
-<!--      vehicleInfo: {},-->
-<!--      center: [146.396624, 47.908167],-->
-<!--      zoom: 15,-->
-<!--      lng: 0,-->
-<!--      lat: 0,-->
-<!--      loaded: false,-->
-<!--      events: {-->
-<!--        init() {-->
-<!--          lazyAMapApiLoaderInstance.load().then(() => {-->
-<!--            self.initSearch()-->
-<!--          })-->
-<!--        },-->
-<!--        // 点击获取地址的数据-->
-<!--        click(e) {-->
-<!--          self.markers = []-->
-<!--          const { lng, lat } = e.lnglat-->
-<!--          self.lng = lng-->
-<!--          self.lat = lat-->
-<!--          self.center = [lng, lat]-->
-<!--          self.markers.push([lng, lat])-->
-<!--          // 这里通过高德 SDK 完成。-->
-<!--          const geocoder = new AMap.Geocoder({-->
-<!--            radius: 500,-->
-<!--            extensions: 'all'-->
-<!--          })-->
-<!--          console.log(lng + ',' + lat) // 控制台打印坐标-->
-<!--          geocoder.getAddress([lng, lat], function(status, result) {-->
-<!--            if (status === 'complete' && result.info === 'OK') {-->
-<!--              if (result && result.regeocode) {-->
-<!--                console.log(result.regeocode.formattedAddress) // 控制台打印地址-->
-<!--                self.address = result.regeocode.formattedAddress-->
-<!--                self.searchKey = result.regeocode.formattedAddress-->
-<!--                self.$nextTick()-->
-<!--              }-->
-<!--            }-->
-<!--          })-->
-<!--        }-->
-<!--      },-->
-<!--      // 一些工具插件-->
-<!--      plugin: [-->
-<!--        {-->
-<!--          pName: 'Geocoder',-->
-<!--          events: {-->
-<!--            init(o) {-->
-<!--              // console.log("一些工具插件&#45;&#45;地址"+o.getAddress())-->
-<!--            }-->
-<!--          }-->
-<!--        },-->
-<!--        {-->
-<!--          // 鹰眼-->
-<!--          pName: 'OverView',-->
-<!--          events: {-->
-<!--            init(instance) {-->
-<!--              // console.log("鹰眼:"+instance);-->
-<!--            }-->
-<!--          }-->
-<!--        },-->
-<!--        {-->
-<!--          // 地图类型-->
-<!--          pName: 'MapType',-->
-<!--          defaultType: 0,-->
-<!--          events: {-->
-<!--            init(instance) {-->
-<!--              // console.log("地图类型:"+instance);-->
-<!--            }-->
-<!--          }-->
-<!--        }-->
-<!--      ],-->
-<!--      trajectoryVisible: false,-->
-<!--      // 遮罩层-->
-<!--      loading: true,-->
-<!--      // 选中数组-->
-<!--      ids: [],-->
-<!--      // 非单个禁用-->
-<!--      single: true,-->
-<!--      // 非多个禁用-->
-<!--      multiple: true,-->
-<!--      // 显示搜索条件-->
-<!--      showSearch: true,-->
-<!--      // 总条数-->
-<!--      total: 0,-->
-<!--      // 车辆信息管理表格数据-->
-<!--      vehicleList: [],-->
-<!--      // 弹出层标题-->
-<!--      title: '',-->
-<!--      // 是否显示弹出层-->
-<!--      open: false,-->
-<!--      // 查询参数-->
-<!--      queryParams: {-->
-<!--        pageNum: 1,-->
-<!--        pageSize: 10,-->
-<!--        vin: null,-->
-<!--        vehicleType: null,-->
-<!--        fenceId: null,-->
-<!--        vehicleStatus: null,-->
-<!--        motorManufacturer: null,-->
-<!--        batteryManufacturer: null,-->
-<!--        motorId: null,-->
-<!--        batteryId: null-->
-<!--      },-->
-<!--      fenceList: [],-->
-<!--      // 表单参数-->
-<!--      form: {},-->
-<!--      // 表单校验-->
-<!--      rules: {-->
-<!--      },-->
-<!--      timer: null,-->
-<!--      vin: '',-->
-<!--      batteryTemperature: [],-->
-<!--      cellVoltage: []-->
-<!--    }-->
-<!--  },-->
-<!--  created() {-->
-<!--    this.getList()-->
-<!--  },-->
-<!--  mounted() {-->
-<!--    this.instrumentInfo()-->
-<!--    this.fetchData()-->
-<!--    // 图的大小自适应-->
-<!--    window.addEventListener('resize', () => {-->
-<!--      if (this.chart) {-->
-<!--        this.chart.resize()-->
-<!--      }-->
-<!--    })-->
-<!--  },-->
-<!--  methods: {-->
-<!--    batteryTemperatureLine() {-->
-<!--      const myChart = this.$echarts.init(document.getElementById('batteryTemperature'))-->
-<!--      var option-->
-<!--      option = {-->
-<!--        color: ['#FF0087'],-->
-<!--        title: {-->
-<!--          text: '电池温度'-->
-<!--        },-->
-<!--        tooltip: {-->
-<!--          trigger: 'axis',-->
-<!--          axisPointer: {-->
-<!--            type: 'cross',-->
-<!--            label: {-->
-<!--              backgroundColor: '#6a7985'-->
-<!--            }-->
-<!--          }-->
-<!--        },-->
-<!--        legend: {-->
-<!--          data: []-->
-<!--        },-->
-<!--        grid: {-->
-<!--          left: '1%',-->
-<!--          right: '1%',-->
-<!--          bottom: '1%',-->
-<!--          containLabel: true-->
-<!--        },-->
-<!--        xAxis: [-->
-<!--          {-->
-<!--            type: 'category',-->
-<!--            boundaryGap: false,-->
-<!--            data: []-->
-<!--          }-->
-<!--        ],-->
-<!--        yAxis: [-->
-<!--          {-->
-<!--            type: 'value'-->
-<!--          }-->
-<!--        ],-->
-<!--        series: [-->
-<!--          {-->
-<!--            name: '电池温度',-->
-<!--            type: 'line',-->
-<!--            stack: 'Total',-->
-<!--            smooth: true,-->
-<!--            lineStyle: {-->
-<!--              width: 0-->
-<!--            },-->
-<!--            showSymbol: false,-->
-<!--            areaStyle: {-->
-<!--              opacity: 0.8,-->
-<!--              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [-->
-<!--                {-->
-<!--                  offset: 0,-->
-<!--                  color: 'rgb(128, 255, 165)'-->
-<!--                },-->
-<!--                {-->
-<!--                  offset: 1,-->
-<!--                  color: 'rgb(1, 191, 236)'-->
-<!--                }-->
-<!--              ])-->
-<!--            },-->
-<!--            emphasis: {-->
-<!--              focus: 'series'-->
-<!--            },-->
-<!--            data: this.batteryTemperature-->
-<!--          }-->
-<!--        ]-->
-<!--      }-->
-<!--      myChart.setOption(option)-->
-<!--    },-->
-<!--    cellVoltageLine() {-->
-<!--      const myChart = this.$echarts.init(document.getElementById('cellVoltage'))-->
-<!--      var option-->
-<!--      option = {-->
-<!--        color: ['#FF0087'],-->
-<!--        title: {-->
-<!--          text: '电池电压'-->
-<!--        },-->
-<!--        tooltip: {-->
-<!--          trigger: 'axis',-->
-<!--          axisPointer: {-->
-<!--            type: 'cross',-->
-<!--            label: {-->
-<!--              backgroundColor: '#6a7985'-->
-<!--            }-->
-<!--          }-->
-<!--        },-->
-<!--        legend: {-->
-<!--          data: []-->
-<!--        },-->
+    //开始动画
+    startAnimation(){
+      this.marker.setPosition(this.arr)
+      this.marker.on('moving', (e) => {
+        this.passedPolyline.setPath(e.passedPath);
+        this.map.setCenter(e.target.getPosition(),true)
+      });
 
-<!--        grid: {-->
-<!--          left: '3%',-->
-<!--          right: '4%',-->
-<!--          bottom: '3%',-->
-<!--          containLabel: true-->
-<!--        },-->
-<!--        xAxis: [-->
-<!--          {-->
-<!--            type: 'category',-->
-<!--            boundaryGap: false,-->
-<!--            data: []-->
-<!--          }-->
-<!--        ],-->
-<!--        yAxis: [-->
-<!--          {-->
-<!--            type: 'value'-->
-<!--          }-->
-<!--        ],-->
-<!--        series: [-->
-<!--          {-->
-<!--            name: '电池电压',-->
-<!--            type: 'line',-->
-<!--            stack: 'Total',-->
-<!--            smooth: true,-->
-<!--            lineStyle: {-->
-<!--              width: 0-->
-<!--            },-->
-<!--            showSymbol: false,-->
-<!--            areaStyle: {-->
-<!--              opacity: 0.8,-->
-<!--              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [-->
-<!--                {-->
-<!--                  offset: 0,-->
-<!--                  color: 'rgb(255, 0, 135)'-->
-<!--                },-->
-<!--                {-->
-<!--                  offset: 1,-->
-<!--                  color: 'rgb(135, 0, 157)'-->
-<!--                }-->
-<!--              ])-->
-<!--            },-->
-<!--            emphasis: {-->
-<!--              focus: 'series'-->
-<!--            },-->
-<!--            data: this.cellVoltage-->
-<!--          }-->
-<!--        ]-->
-<!--      }-->
-<!--      myChart.setOption(option)-->
-<!--    },-->
-<!--    openSocket() {-->
-<!--      if (typeof WebSocket === 'undefined') {-->
-<!--        console.log('您的浏览器不支持WebSocket')-->
-<!--      } else {-->
-<!--        var _this = this-->
-<!--        console.log('您的浏览器支持WebSocket')-->
-<!--        // 实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接-->
-<!--        // 等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");-->
-<!--        // var socketUrl="${request.contextPath}/im/"+$("#userId").val();-->
-<!--        var socketUrl =-->
-<!--          'http://localhost:9601/vehicle/realTime/' + this.vin-->
-<!--        socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')-->
-<!--        console.log(socketUrl)-->
-<!--        if (this.socket != null) {-->
-<!--          this.socket.close()-->
-<!--          this.socket = null-->
-<!--        }-->
-<!--        this.socket = new WebSocket(socketUrl)-->
-<!--        // 打开事件-->
-<!--        this.socket = new WebSocket(socketUrl)-->
-<!--        // 打开事件-->
-<!--        this.socket.onopen = function() {-->
-<!--          console.log('websocket已打开')-->
-<!--        }-->
-<!--        // 获得消息事件-->
-<!--        this.socket.onmessage = function(msg) {-->
-<!--          var resp = JSON.parse(msg.data)-->
-<!--          console.log(resp)-->
-<!--          _this.toData(resp)-->
-<!--        }-->
-<!--        // 关闭事件-->
-<!--        this.socket.onclose = function() {-->
-<!--          console.log('websocket已关闭')-->
-<!--        }-->
-<!--        // 发生了错误事件-->
-<!--        this.socket.onerror = function() {-->
-<!--          console.log('websocket发生了错误')-->
-<!--        }-->
-<!--      }-->
-<!--    },-->
-<!--    toData(resp) {-->
-<!--      this.currentWindow.position = [resp.longitude, resp.latitude]-->
-<!--      this.center = [resp.longitude, resp.latitude]-->
-<!--      this.vehicleInfo = resp-->
-<!--      this.cellVoltage.push(resp.totalVoltage)-->
-<!--      this.batteryTemperature.push(resp.maximumTemperatureBattery)-->
-<!--      this.batteryTemperatureLine()-->
-<!--      this.cellVoltageLine()-->
-<!--      this.instrumentInfo()-->
-<!--      this.currentWindow = {-->
-<!--        position: [resp.longitude, resp.latitude],-->
-<!--        content: ``,-->
-<!--        events: {-->
-<!--          close: (e) => {-->
-<!--            this.currentWindow.visible = false-->
-<!--          }-->
-<!--        },-->
-<!--        visible: true }-->
-<!--      this.carmarkers = [-->
-<!--        {-->
-<!--          position: this.currentWindow.position,-->
-<!--          content: `<div><img src="http://webapi.amap.com/images/car.png"></div>`,-->
-<!--          events: {-->
-<!--            click: (e) => {-->
-<!--              this.currentWindow = {-->
-<!--                position: [resp.longitude, resp.latitude],-->
-<!--                content: `<div style="color: #1c84c6;"></div>`,-->
-<!--                events: {-->
-<!--                  close: (e) => {-->
-<!--                    this.currentWindow.visible = false-->
-<!--                  }-->
-<!--                },-->
-<!--                visible: true }-->
-<!--            }-->
-<!--          }-->
-<!--        }-->
-<!--      ]-->
-<!--    },-->
-<!--    openTrack(vin) {-->
-<!--      this.vin = vin-->
-<!--      this.trajectoryVisible = true-->
-<!--      this.openSocket()-->
-<!--    },-->
-<!--    instrumentInfo() {-->
-<!--      var chartDom = this.$refs.mineEcharts-->
-<!--      var myChart = echarts.init(chartDom)-->
-<!--      var option-->
-<!--      option = {-->
-<!--        // 鼠标悬停文字提示-->
-<!--        tooltip: {-->
-<!--          formatter: '{b} : {c}'-->
-<!--        },-->
-<!--        series: [-->
-<!--          {-->
-<!--            name: '',-->
-<!--            type: 'gauge',-->
-<!--            radius: '50%',-->
-<!--            center: ['15%', '55%'], // 第一个仪表盘的位置-->
-<!--            min: 0, // 显示的最小值和最大值-->
-<!--            max: 10000,-->
-<!--            axisLabel: { // 仪表盘刻度-->
-<!--              show: false-->
-<!--            },-->
-<!--            axisLine: { // 仪表盘宽度-->
-<!--              lineStyle: {-->
-<!--                width: 10-->
-<!--              }-->
-<!--            },-->
-<!--            pointer: { // 仪表盘的指针长度及宽度-->
-<!--              show: true,-->
-<!--              length: '70%',-->
-<!--              width: 4-->
-<!--            },-->
-<!--            title: { // 仪表盘的文字样式-->
-<!--              show: true,-->
-<!--              offsetCenter: [0, '100%'],-->
-<!--              textStyle: {-->
-<!--                color: '#667EFF',-->
-<!--                fontSize: 20-->
-<!--              }-->
-<!--            },-->
-<!--            detail: {-->
-<!--              formatter: '{value}转',-->
-<!--              textStyle: {-->
-<!--                fontSize: 14,-->
-<!--                color: '#00FF99'-->
-<!--              }-->
-<!--            },-->
-<!--            splitLine: { // 仪表盘的刻度线显示-->
-<!--              show: false-->
-<!--            },-->
-<!--            data: [-->
-<!--              {-->
-<!--                value: this.vehicleInfo.motorTorque,-->
-<!--                name: '电机转矩'-->
-<!--              }-->
-<!--            ]-->
-<!--          },-->
-<!--          {-->
-<!--            name: '',-->
-<!--            type: 'gauge',-->
-<!--            radius: '70%',-->
-<!--            center: ['50%', '48%'],-->
-<!--            min: 0,-->
-<!--            max: 300,-->
-<!--            axisLabel: {-->
-<!--              show: false-->
-<!--            },-->
-<!--            axisLine: {-->
-<!--              lineStyle: {-->
-<!--                width: 10-->
-<!--              }-->
-<!--            },-->
-<!--            pointer: {-->
-<!--              show: true,-->
-<!--              length: '70%',-->
-<!--              width: 4-->
-<!--              // 0,-->
-<!--            },-->
-<!--            splitLine: {-->
-<!--              show: false-->
-<!--            },-->
-<!--            title: {-->
-<!--              show: true,-->
-<!--              offsetCenter: [0, '92%'],-->
-<!--              textStyle: {-->
-<!--                color: '#667EFF',-->
-<!--                fontSize: 20-->
-<!--              }-->
-<!--            },-->
-<!--            detail: {-->
-<!--              formatter: '{value}KM/h',-->
-<!--              textStyle: {-->
-<!--                fontSize: 14,-->
-<!--                color: '#00FF99'-->
-<!--              }-->
-<!--            },-->
-<!--            data: [-->
-<!--              {-->
-<!--                value: this.vehicleInfo.speed,-->
-<!--                name: '车速'-->
-<!--              }-->
-<!--            ]-->
-<!--          },-->
-<!--          {-->
-<!--            name: '',-->
-<!--            type: 'gauge',-->
-<!--            radius: '50%',-->
-<!--            center: ['85%', '55%'],-->
-<!--            min: 0,-->
-<!--            max: 20,-->
-<!--            axisLabel: {-->
-<!--              show: false-->
-<!--            },-->
-<!--            axisLine: {-->
-<!--              lineStyle: {-->
-<!--                width: 10-->
-<!--              }-->
-<!--            },-->
-<!--            pointer: {-->
-<!--              show: true,-->
-<!--              length: '70%',-->
-<!--              width: 4-->
-<!--            },-->
-<!--            splitLine: {-->
-<!--              show: false-->
-<!--            },-->
-<!--            title: {-->
-<!--              show: true,-->
-<!--              offsetCenter: [0, '100%'],-->
-<!--              textStyle: {-->
-<!--                color: '#667EFF',-->
-<!--                fontSize: 20-->
-<!--              }-->
-<!--            },-->
-<!--            detail: {-->
-<!--              formatter: '{value}L/h',-->
-<!--              textStyle: {-->
-<!--                fontSize: 14,-->
-<!--                color: '#00FF99'-->
-<!--              }-->
-<!--            },-->
-<!--            data: [-->
-<!--              {-->
-<!--                value: this.vehicleInfo.fuelRate,-->
-<!--                name: '燃料消耗率'-->
-<!--              }-->
-<!--            ]-->
-<!--          }-->
-<!--        ]-->
-<!--      }-->
-<!--      option && myChart.setOption(option)-->
-<!--    },-->
-<!--    trajectoryClose() {-->
-<!--      clearInterval(this.timer)-->
-<!--      this.trajectoryVisible = false-->
-<!--      this.batteryTemperature = []-->
-<!--      this.cellVoltage = []-->
-<!--      this.socket.close()-->
-<!--    },-->
-<!--    // getPass() {-->
-<!--    //   this.timer = setInterval(() => {-->
-<!--    //     this.instrumentInfo()-->
-<!--    //     getPosition(this.vin).then(resp => {-->
-<!--    //       this.currentWindow.position = [resp.data.longitude, resp.data.latitude]-->
-<!--    //       this.center = [resp.data.longitude, resp.data.latitude]-->
-<!--    //       this.vehicleInfo = resp.data-->
-<!--    //       this.currentWindow = {-->
-<!--    //         position: [resp.data.longitude, resp.data.latitude],-->
-<!--    //         content: ``,-->
-<!--    //         events: {-->
-<!--    //           close: (e) => {-->
-<!--    //             this.currentWindow.visible = false-->
-<!--    //           }-->
-<!--    //         },-->
-<!--    //         visible: true }-->
-<!--    //       this.carmarkers = [-->
-<!--    //         {-->
-<!--    //           position: this.currentWindow.position,-->
-<!--    //           content: `<div><img src="http://webapi.amap.com/images/car.png"></div>`,-->
-<!--    //           events: {-->
-<!--    //             click: (e) => {-->
-<!--    //               this.currentWindow = {-->
-<!--    //                 position: [resp.data.longitude, resp.data.latitude],-->
-<!--    //                 content: `<div style="color: #1c84c6;"></div>`,-->
-<!--    //                 events: {-->
-<!--    //                   close: (e) => {-->
-<!--    //                     this.currentWindow.visible = false-->
-<!--    //                   }-->
-<!--    //                 },-->
-<!--    //                 visible: true }-->
-<!--    //             }-->
-<!--    //           }-->
-<!--    //         }-->
-<!--    //       ]-->
-<!--    //     })-->
-<!--    //   }, 1000)-->
-<!--    // },-->
-<!--    initSearch() {-->
-<!--      const vm = this-->
-<!--      const map = this.amapManager.getMap()-->
-<!--      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {-->
-<!--        var poiPicker = new PoiPicker({-->
-<!--          input: 'search',-->
-<!--          placeSearchOptions: {-->
-<!--            map: map,-->
-<!--            pageSize: 10-->
-<!--          },-->
-<!--          suggestContainer: 'searchTip',-->
-<!--          searchResultsContainer: 'searchTip'-->
-<!--        })-->
-<!--        vm.poiPicker = poiPicker-->
-<!--        // 监听poi选中信息-->
-<!--        poiPicker.on('poiPicked', function(poiResult) {-->
-<!--          // console.log(poiResult)-->
-<!--          const source = poiResult.source-->
-<!--          const poi = poiResult.item-->
-<!--          if (source !== 'search') {-->
-<!--            poiPicker.searchByKeyword(poi.name)-->
-<!--          } else {-->
-<!--            poiPicker.clearSearchResults()-->
-<!--            vm.markers = []-->
-<!--            const lng = poi.location.lng-->
-<!--            const lat = poi.location.lat-->
-<!--            const address = poi.cityname + poi.adname + poi.name-->
-<!--            vm.center = [lng, lat]-->
-<!--            vm.markers.push([lng, lat])-->
-<!--            vm.lng = lng-->
-<!--            vm.lat = lat-->
-<!--            vm.address = address-->
-<!--            vm.searchKey = address-->
-<!--          }-->
-<!--        })-->
-<!--      })-->
-<!--    },-->
-<!--    /** 查询车辆信息管理列表 */-->
-<!--    getList() {-->
-<!--      this.loading = true-->
-<!--      carList(this.queryParams).then(response => {-->
-<!--        this.vehicleList = response.rows-->
-<!--        this.total = response.total-->
-<!--        this.loading = false-->
-<!--      })-->
-<!--    },-->
-<!--    // 取消按钮-->
-<!--    cancel() {-->
-<!--      this.open = false-->
-<!--      this.reset()-->
-<!--    },-->
-<!--    // 表单重置-->
-<!--    reset() {-->
-<!--      this.form = {-->
-<!--        id: null,-->
-<!--        vin: null,-->
-<!--        vehicleType: null,-->
-<!--        fenceId: null,-->
-<!--        vehicleStatus: 0,-->
-<!--        motorManufacturer: null,-->
-<!--        batteryManufacturer: null,-->
-<!--        motorId: null,-->
-<!--        batteryId: null-->
-<!--      }-->
-<!--      this.resetForm('form')-->
-<!--    },-->
-<!--    /** 搜索按钮操作 */-->
-<!--    handleQuery() {-->
-<!--      this.queryParams.pageNum = 1-->
-<!--      this.getList()-->
-<!--    },-->
-<!--    /** 重置按钮操作 */-->
-<!--    resetQuery() {-->
-<!--      this.resetForm('queryForm')-->
-<!--      this.handleQuery()-->
-<!--    },-->
-<!--    // 多选框选中数据-->
-<!--    handleSelectionChange(selection) {-->
-<!--      this.ids = selection.map(item => item.id)-->
-<!--      this.single = selection.length !== 1-->
-<!--      this.multiple = !selection.length-->
-<!--    },-->
-<!--    /** 新增按钮操作 */-->
-<!--    handleAdd() {-->
-<!--      this.getFenceList()-->
-<!--      this.reset()-->
-<!--      this.open = true-->
-<!--      this.title = '添加车辆信息管理'-->
-<!--    }-->
-<!--    // /** 修改按钮操作 */-->
-<!--    // handleUpdate(row) {-->
-<!--    //   this.getFenceList()-->
-<!--    //   this.reset()-->
-<!--    //   const id = row.id || this.ids-->
-<!--    //   getVehicle(id).then(response => {-->
-<!--    //     this.form = response.data-->
-<!--    //     this.open = true-->
-<!--    //     this.title = '修改车辆信息管理'-->
-<!--    //   })-->
-<!--    // },-->
-<!--    // /** 提交按钮 */-->
-<!--    // submitForm() {-->
-<!--    //   this.$refs['form'].validate(valid => {-->
-<!--    //     if (valid) {-->
-<!--    //       if (this.form.id != null) {-->
-<!--    //         updateVehicle(this.form).then(response => {-->
-<!--    //           this.$modal.msgSuccess('修改成功')-->
-<!--    //           this.open = false-->
-<!--    //           this.getList()-->
-<!--    //         })-->
-<!--    //       } else {-->
-<!--    //         addVehicle(this.form).then(response => {-->
-<!--    //           this.$modal.msgSuccess('新增成功')-->
-<!--    //           this.open = false-->
-<!--    //           this.getList()-->
-<!--    //         })-->
-<!--    //       }-->
-<!--    //     }-->
-<!--    //   })-->
-<!--    // },-->
-<!--    // /** 删除按钮操作 */-->
-<!--    // handleDelete(row) {-->
-<!--    //   const ids = row.id || this.ids-->
-<!--    //   this.$modal.confirm('是否确认删除车辆信息管理编号为"' + ids + '"的数据项？').then(function() {-->
-<!--    //     return delVehicle(ids)-->
-<!--    //   }).then(() => {-->
-<!--    //     this.getList()-->
-<!--    //     this.$modal.msgSuccess('删除成功')-->
-<!--    //   }).catch(() => {})-->
-<!--    // },-->
-<!--    /** 导出按钮操作 */-->
-<!--    // handleExport() {-->
-<!--    //   this.download('vehicle/vehicle/export', {-->
-<!--    //     ...this.queryParams-->
-<!--    //   }, `vehicle_${new Date().getTime()}.xlsx`)-->
-<!--    // },-->
-<!--    // getFenceList() {-->
-<!--    //   fenceList().then(resp => {-->
-<!--    //     this.fenceList = resp.data-->
-<!--    //   })-->
-<!--    // }-->
-<!--  }-->
-<!--}-->
-<!--</script>-->
+      this.marker.moveAlong(this.lineArr,
+        {
+          duration: 2000
+        })
+    },
 
+    //暂停
+    pauseAnimation() {
+      this.marker.pauseMove();
+    },
+
+    //继续
+    resumeAnimation() {
+      this.marker.resumeMove();
+    },
+
+    //停止
+    stopAnimation() {
+      this.marker.stopMove();
+    },
+
+
+  },
+
+}
+</script>
+<style scoped>
+@import "../MapStyle.css";
+.input-card .btn{
+  margin-right: 1.2rem;
+  width: 9rem;
+}
+#container {
+  width: 100%;
+  height: 800px;
+}
+.input-card .btn:last-child{
+  margin-right: 0;
+}
+</style>