From 243e5057db958ebcd484b0fecef6866122c31215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E5=87=AF?= <371894675@qq.com>
Date: Sun, 26 Nov 2023 11:20:02 +0800
Subject: [PATCH] record

---
 src/views/company/firm.vue                 |  14 +++
 src/views/electronicFence/MapContainer.vue |   4 +-
 src/views/fault/index.vue                  |  11 ++
 src/views/vehicle/record.vue               | 132 ++++++++++++++++++++-
 4 files changed, 156 insertions(+), 5 deletions(-)
 create mode 100644 src/views/company/firm.vue
 create mode 100644 src/views/fault/index.vue

diff --git a/src/views/company/firm.vue b/src/views/company/firm.vue
new file mode 100644
index 0000000..e367465
--- /dev/null
+++ b/src/views/company/firm.vue
@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <el-button>点击公司</el-button>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/electronicFence/MapContainer.vue b/src/views/electronicFence/MapContainer.vue
index 19ece64..5b0fcaa 100644
--- a/src/views/electronicFence/MapContainer.vue
+++ b/src/views/electronicFence/MapContainer.vue
@@ -12,8 +12,8 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
   export default {
     //import引入的组件需要注入到对象中才能使用"
-    components: {},
-    props: {},
+      components: {},
+      props: {},
     data() {
       //这里存放数据"
 
diff --git a/src/views/fault/index.vue b/src/views/fault/index.vue
new file mode 100644
index 0000000..762e8b7
--- /dev/null
+++ b/src/views/fault/index.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/vehicle/record.vue b/src/views/vehicle/record.vue
index 762e8b7..93ad389 100644
--- a/src/views/vehicle/record.vue
+++ b/src/views/vehicle/record.vue
@@ -1,9 +1,135 @@
-<script setup>
-
+<script >
+import path from "path";
+import AMapLoader from '@amap/amap-jsapi-loader';
+window._AMapSecurityConfig = {
+  securityJsCode:'6dc027fe91257ed0b06af9924201212c'
+}
+export default {
+  components: {},
+  props: {},
+   data() {
+     return{
+       AMap: null,
+       map: null,
+       mouseTool: null,
+       historyList:[
+         {
+           carVin:"VIN123465798",
+           startTime:"2023-01-01 12:01:59",
+           endTime:"2023-01-01 12:10:21"
+         }
+       ],
+       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]],
+     }
+   },
+   mounted() {
+   },
+   created() {
+    this.initAMap()
+   },
+   methods: {
+     doDo(){
+       // this.$router.push('/cmpany/firm')
+       this.initAMap()
+     },
+     initAMap() {
+       AMapLoader.load({
+         key: 'e31845f75485d475ad64b1946691f717',
+         version: '2.0',
+         plugins: ['AMap.MouseTool','AMap.LngLat', 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar', 'AMap.Geocoder', 'AMap.Marker',
+           'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow', 'AMap.PolyEditor','AMap.MouseTool','AMap.PlaceSearch'],
+       }).then((AMap) => {
+         this.map = new AMap.Map('container', {
+           resizeEnable: true,
+           viewMode: '2D',
+           zoomEnable: true,
+           dragEnable: true,
+           doubleClickZoom: true,
+           zoom: 17,
+           showBuildingBlock: true,
+           pitch: 55,
+         })
+       }).catch(e => {
+         console.log(e)
+       })
+     },
+     startAnimation () {
+       setTimeout(()=>{
+         AMap.plugin('AMap.MoveAnimation', () => {
+           console.log('开始回放')
+           this.marker.moveAlong(this.lineArr, {
+             // 每一段的时长
+             duration: this.duration,//可根据实际采集时间间隔设置
+             // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+             autoRotation: true,
+           });
+         })
+       },2000)
+     },
+   },
+ }
 </script>
 
 <template>
-
+<div>
+  <div id="container"></div>
+  <el-form>
+    <table style="width: 100% ">
+      <tr>
+        <td>VIN</td>
+        <td><el-input  placeholder="请输入车辆VIN"></el-input></td>
+        <td>开始时间</td>
+        <td><el-input  placeholder="请输入开始时间"></el-input></td>
+        <td>结束时间</td>
+        <td><el-input  placeholder="请输入结束时间"></el-input></td>
+        <td>
+          <el-button type="primary">搜索</el-button>
+          <el-button type="danger">重置</el-button>
+        </td>
+      </tr>
+    </table>
+  </el-form>
+  <el-table :data="historyList">
+    <el-table-column label="VIN">
+        <template slot-scope="scope">
+          {{scope.row.carVin}}
+        </template>
+    </el-table-column>
+    <el-table-column label="开始时间">
+      <template slot-scope="scope">
+        {{scope.row.startTime}}
+      </template>
+    </el-table-column>
+    <el-table-column label="结束时间">
+      <template slot-scope="scope">
+        {{scope.row.endTime}}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <el-button @click="doDo" type="text">历史轨迹</el-button>
+      <el-button type="warning">删除</el-button>
+    </el-table-column>
+  </el-table>
+</div>
 </template>
 
 <style scoped lang="scss">