Merge pull request 'server_2024_4_2_suzejing' (#5) from server_2024_4_2_suzejing into master

Reviewed-on: #5

src/api/system/fence.js

@@ -8,7 +8,7 @@ import fence from "@/views/system/fence/index.vue";
  */
 export function fenceList(data){
   return request({
-    url:'/fence/fence/list',
+    url:'/business/fence/list',
     method:"post",
     data:data
   })
@@ -22,9 +22,9 @@ export function fenceList(data){
  */
 export function fenceAdd(data) {
   return request({
-    url: '/fence/fence/fenceAdd',
+    url: '/business/fence/fenceAdd',
     method: 'post',
-    data
+    data:data
   })
 }
 
@@ -35,7 +35,7 @@ export function fenceAdd(data) {
  */
 export function fenceDelete(fenceId) {
   return request({
-    url: '/fence/fence/fenceDelete/'+fenceId,
+    url: '/business/fence/fenceDelete/'+fenceId,
     method: 'post'
   })
 }
@@ -48,16 +48,17 @@ export function fenceDelete(fenceId) {
  */
 export function fenceUpdate(data) {
   return request({
-    url: '/fence/fence/fenceUpdate',
+    url: '/business/fence/fenceUpdate',
     method: 'post',
     data
   })
 }
 
-export function saveFence(data) {
+export function fenceUpdateMap(data) {
   return request({
-    url: '/fence/fence/saveFence',
+    url: '/business/fence/fenceUpdateMap',
     method: 'post',
-    data:JSON.stringify(data),
+    data
   })
 }
+

src/api/system/markers.js

@@ -0,0 +1,83 @@
+import request from "@/utils/request";
+import fence from "@/views/system/fence/index.vue";
+
+/**
+ * 标识列表
+ * @param data
+ * @returns {*}
+ */
+export function markersList(data){
+  return request({
+    url:'/business/markers/list',
+    method:"post",
+    data:data
+  })
+}
+
+
+/**
+ * 新增标识
+ * @param data
+ * @returns {*}
+ */
+export function markersInsert(data) {
+  return request({
+    url: '/business/markers/insert',
+    method: 'post',
+    data:data
+  })
+}
+
+/**
+ * 绑定围栏
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function insertMarkersFence(data) {
+  return request({
+    url: '/business/markers/insertMarkersFence',
+    method: 'post',
+    data:data
+  })
+}
+
+/**
+ * 删除标识
+ * @param markersId
+ * @returns {*}
+ */
+export function markersDelete(markersId) {
+  return request({
+    url: '/business/markers/delete/'+markersId,
+    method: 'post'
+  })
+}
+
+/**
+ * 删除标识
+ * @param markersId
+ * @returns {*}
+ */
+export function markersFenceList(markersId) {
+  return request({
+    url: '/business/markers/markersFenceList/'+markersId,
+    method: 'post'
+  })
+}
+
+
+/**
+ * 修改标识
+ * @param data
+ * @returns {*}
+ */
+export function markersUpdate(data) {
+  return request({
+    url: '/business/markers/update',
+    method: 'post',
+    data
+  })
+}
+
+
+

src/api/system/vehicle.js

@@ -0,0 +1,69 @@
+import request from "@/utils/request";
+import fence from "@/views/system/fence/index.vue";
+
+/**
+ * 标识列表
+ * @param data
+ * @returns {*}
+ */
+export function vehicleList(data){
+  return request({
+    url:'/business/vehicle/list',
+    method:"post",
+    data:data
+  })
+}
+
+
+/**
+ * 新增标识
+ * @param data
+ * @returns {*}
+ */
+export function vehicleInsert(data) {
+  return request({
+    url: '/business/vehicle/vehicleInsert',
+    method: 'post',
+    data:data
+  })
+}
+
+/**
+ * 绑定围栏
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function insertMarkersFence(data) {
+  return request({
+    url: '/business/vehicle/insertMarkersFence',
+    method: 'post',
+    data:data
+  })
+}
+
+/**
+ * 删除标识
+ * @param fenceId
+ * @returns {*}
+ */
+export function vehicleDelete(fenceId) {
+  return request({
+    url: '/business/vehicle/vehicleDelete/'+fenceId,
+    method: 'post'
+  })
+}
+
+
+/**
+ * 修改标识
+ * @param data
+ * @returns {*}
+ */
+export function vehicleUpdate(data) {
+  return request({
+    url: '/business/vehicle/vehicleUpdate',
+    method: 'post',
+    data
+  })
+}
+

src/router/index.js

@@ -87,6 +87,34 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '',
+    component: Layout,
+    redirect: 'index',
+    children: [
+      {
+        path: '/markers',
+        component: () => import('@/views/system/markers/index'),
+        name: 'Index',
+        meta: {title: '车辆标识', icon: 'markers'}
+      }
+    ]
+  },
+
+  {
+    path: '',
+    component: Layout,
+    redirect: 'index',
+    children: [
+      {
+        path: '/vehicle',
+        component: () => import('@/views/system/vehicle/index'),
+        name: 'Index',
+        meta: {title: '车辆管理', icon: 'vehicle'}
+      }
+    ]
+  },
+
   {
     path: '/user',
     component: Layout,

src/views/system/fence/index.vue

@@ -1,25 +1,22 @@
 <template>
   <div>
 
-
-
     <div v-if="showMapp">
-      <el-form :inline="true" :model="fence" class="demo-form-inline">
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
 
         <el-form-item label="围栏名称">
-          <el-input v-model="fence.fenceName" placeholder="模糊查询围栏名称"></el-input>
+          <el-input v-model="queryParams.fenceName" placeholder="模糊查询围栏名称"></el-input>
         </el-form-item>
 
-
         <el-form-item label="围栏类型">
-          <el-select v-model="fence.fenceTypeId" placeholder="请选择围栏类型">
+          <el-select v-model="queryParams.fenceTypeId" placeholder="请选择围栏类型">
             <el-option label="驶出" value="1">驶出</el-option>
             <el-option label="驶入" value="2">驶入</el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="围栏状态">
-          <el-select v-model="fence.fenceState" placeholder="请选择围栏状态">
+          <el-select v-model="queryParams.fenceState" placeholder="请选择围栏状态">
             <el-option label="正常" value="1">正常</el-option>
             <el-option label="停用" value="2">停用</el-option>
           </el-select>
@@ -30,38 +27,13 @@
         </el-form-item>
       </el-form>
 
-
-
       <el-button type="primary" plain icon="el-icon-plus" @click="fencadd">新增</el-button>
 
+      <el-table :data="fenceList" style="width: 100%"  ref="multipleTable">
 
+        <el-table-column label="围栏名称" align="center" prop="fenceName" />
 
-      <el-table :data="tableData" style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
+        <el-table-column label="围栏类型"
-
-
-        <el-table-column
-          type="selection"
-          width="55">
-        </el-table-column>
-
-        <el-table-column
-          label="围栏ID"
-          width="180">
-          <template slot-scope="scope">
-            <span style="margin-left: 10px">{{ scope.row.fenceId }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column
-          label="围栏名称"
-          width="180">
-          <template slot-scope="scope">
-            <span style="margin-left: 10px">{{ scope.row.fenceName }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column
-          label="围栏类型"
           width="180">
           <template slot-scope="scope">
             <span style="margin-left: 10px" v-if="scope.row.fenceTypeId==1">驶出</span>
@@ -69,8 +41,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column
+        <el-table-column label="围栏状态"
-          label="围栏状态"
           width="180">
           <template slot-scope="scope">
             <span style="margin-left: 10px" v-if="scope.row.fenceState==1"><el-tag>正常</el-tag></span>
@@ -78,9 +49,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column
+        <el-table-column label="经纬度信息" width="280">
-          label="经纬度信息"
-          width="180">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.fenceMessage }}</span>
           </template>
@@ -98,19 +67,13 @@
         </el-table-column>
       </el-table>
 
-
+      <pagination
-
+        v-show="total>0"
-      <el-pagination
+        :total="total"
-        @size-change="handleSizeChange"
+        :page.sync="queryParams.pageNum"
-        @current-change="handleCurrentChange"
+        :limit.sync="queryParams.pageSize"
-        :current-page="fence.pageNum"
+        @pagination="getList"
-        :page-sizes="[1, 3, 5, 10]"
+      />
-        :page-size="fence.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total">
-      </el-pagination>
-
-
 
 
       <!--    围栏添加-->
@@ -130,16 +93,8 @@
             </el-select>
           </el-form-item>
 
-          <el-form-item label="围栏状态" :label-width="formLabelWidth">
-            <template>
-              <el-radio v-model="fences.fenceState" label="1">正常</el-radio>
-              <el-radio v-model="fences.fenceState" label="2">停用</el-radio>
-            </template>
-          </el-form-item>
-
         </el-form>
 
-
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
           <el-button type="primary" @click="addAll">新增</el-button>
@@ -151,16 +106,10 @@
       <el-dialog :title="title" :visible.sync="dialogFormVisible1">
 
         <el-form :model="fences">
-
-          <el-form-item label="围栏ID" :label-width="formLabelWidth1">
-            <el-input v-model="fences.fenceId" autocomplete="off"></el-input>
-          </el-form-item>
-
           <el-form-item label="围栏名称" :label-width="formLabelWidth1">
             <el-input v-model="fences.fenceName" autocomplete="off"></el-input>
           </el-form-item>
 
-
           <el-form-item label="围栏类型" :label-width="formLabelWidth1">
             <el-select v-model="fences.fenceTypeId" placeholder="请选择活动区域">
               <el-option label="驶出" value="1">驶出</el-option>
@@ -168,7 +117,6 @@
             </el-select>
           </el-form-item>
 
-
           <el-form-item label="围栏状态">
             <el-radio-group v-model="fences.fenceState" :label-width="formLabelWidth1">
               <el-radio :label="1">正常</el-radio>
@@ -177,7 +125,6 @@
           </el-form-item>
         </el-form>
 
-
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
           <el-button type="primary" @click="updateAll">修 改</el-button>
@@ -185,13 +132,8 @@
       </el-dialog>
 
     </div>
-
-
-
-
-
     <el-button @click="drawPolygon">绘制围栏</el-button>
-    <el-button @click="saveFenceData">保存围栏</el-button>
+<!--    <el-button @click="saveFenceData">保存围栏</el-button>-->
     <el-button @click="cleanFence">清除围栏</el-button>
 
     <div id="container" v-if="showMap"></div>
@@ -206,7 +148,7 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {fenceAdd, fenceDelete, fenceList, fenceUpdate, saveFence} from "@/api/system/fence";
+import {fenceAdd, fenceDelete, fenceList, fenceUpdate, fenceUpdateMap} from "@/api/system/fence";
 import mouseTool from "quill";
 export default {
   name: "map-view",
@@ -221,20 +163,18 @@ export default {
     //这里存放数据"
 
     return {
-      tableData:[],
+      queryParams: {
-      fence:{
         pageNum: 1,
-        pageSize:3,
+        pageSize: 10,
-        fenceName:'',
+        fenceName: null,
+        fenceTypeId: null,
+        fenceState: null,
       },
       total:0,
       dialogFormVisible:false,
       formLabelWidth:'120px',
       fences:{
-        fenceId:0,
+
-        fenceName:'',
-        fenceTypeId:0,
-        fenceState:0
       },
       title:'',
       dialogFormVisible1:false,
@@ -248,6 +188,7 @@ export default {
       showMap:false,
       showMapp:true,
 
+      fenceList: [],
 
       //保存围栏
       mapRequest:{
@@ -263,73 +204,18 @@ export default {
   watch: {},
   //方法集合",
   methods: {
-
+    //获取围栏列表
-    //围栏列表
+    getList() {
-    list() {
+      this.loading = true;
-      fenceList(this.fence).then(
+      fenceList(this.queryParams).then(res => {
-        res => {
+        this.fenceList = res.data.rows;
-          this.tableData = res.data.list
+        this.total = res.data.total;
-          this.total = res.data.total
+        this.loading = false;
-          console.log(this.tableData);
+      });
-          console.log(res)
-        }
-      )
     },
-
-    // //复选框
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-
-
     // 搜索框
     onSubmit() {
-      this.list()
+      this.getList()
-    },
-
-    //分页查询
-    handleSizeChange(val) {
-      this.fence.pageSize = val
-      this.list()
-    },
-
-    //分页查询
-    handleCurrentChange(val) {
-      this.fence.pageNum = val
-      this.list()
-    },
-
-
-    //新增
-    fencadd() {
-      this.fences = {}
-      this.dialogFormVisible = true
-      this.title = '新增页面'
-    },
-
-
-    addAll() {
-      fenceAdd(this.fences.data).then(
-        res => {
-          this.$message.success(res.msg)
-          this.list()
-        }
-      )
-      this.dialogFormVisible = false
-    },
-
-
-    //删除电子围栏
-    handleDelete(fenceId){
-      fenceDelete(fenceId,'deleted').then(
-        res=>{
-          this.$message.success(res.msg)
-          this.list()
-        }
-      ).catch(error=>{
-        console.error("逻辑删除失败",error);
-        this.$message.success("逻辑删除失败，请重试")
-      })
     },
 
     //修改电子围栏
@@ -345,36 +231,63 @@ export default {
       fenceUpdate(this.fences).then(
         res => {
           this.$message.success(res.msg)
-          this.list()
+          this.getList()
         }
       )
       this.dialogFormVisible1=false;
     },
+    //新增
+    fencadd() {
+      this.fences = {}
+      this.dialogFormVisible = true
+      this.title = '新增页面'
+    },
 
 
+    addAll() {
+      fenceAdd(this.fences).then(
+        res => {
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+      this.dialogFormVisible = false
+    },
+
+
+    //删除电子围栏
+    handleDelete(fenceId){
+      fenceDelete(fenceId,'deleted').then(
+        res=>{
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+    },
+
 
     //编辑围栏
-    handleWdit() {
+    handleWdit(obj) {
       this.showMap=true
       this.showMapp=false
+      this.fences = obj
       this.initAMap()
     },
 
 
-
     //初始化地图
     initAMap(){
 
       AMapLoader.load({
-        key:"fcd296bbfa904e3bf49d7316882a11bf",
+        key:"1666544c7b614ba063b4c58d5c148248",
         version:"2.0",
         plugins:["AMap.Scale","AMap.MouseTool"],
       })
         .then((AMap)=>{
-          this._Amap=AMap;
+          this.Amap=AMap;
           this.map=new AMap.Map("container",{
             //设置地图容器ID
-            viewMode:"3D",
+            viewMode:"2D",
             zoom:11,
             center: [116.397428, 39.90923],
           });
@@ -406,15 +319,27 @@ export default {
     drawReady(event){
       console.log(event)
       console.log(event.obj.getPath())
+      const coordinates = event.obj.getPath()
+
+      const coordinatesString = coordinates.map(coord => `${coord.lng},${coord.lat}`).join(';');
+      console.log(coordinatesString);
+      this.fences.fenceMessage = coordinatesString;
+
+
+
       console.info('覆盖物对象绘制完成')
 
-      // 获取绘制的围栏经纬度信息
+      // // 获取绘制的围栏经纬度信息
-      const path =event.obj.getPath()
+      // const path =event.obj.getPath()
-      // 将经纬度信息保存到 scope.row.fenceMessage 中
+      // // 将经纬度信息保存到 scope.row.fenceMessage 中
-      this.tableData.forEach(item=>{
+      // this.tableData.forEach(item=>{
-        if(item.fenceId === event.obj.fenceId){ // 假设 fenceId 是围栏的唯一标识符
+      //   if(item.fenceId === event.obj.fenceId){ // 假设 fenceId 是围栏的唯一标识符
-          item.fenceMessage = path.toString();  // 这里使用 toString() 方法将路径转换为字符串形式
+      //     item.fenceMessage = path.toString();  // 这里使用 toString() 方法将路径转换为字符串形式
-        }
+      //   }
+      // })
+      fenceUpdateMap(this.fences).then(res=>{
+        // this.$modal.msgSuccess("保存成功")
+        this.getList()
       })
     },
 
@@ -424,13 +349,13 @@ export default {
       this.mouseTool.close(true)
     },
 
-    //保存围栏
+    // //保存围栏
-    saveFenceData(){
+    // saveFenceData(){
-      console.log(this.mapRequest.jwd)
+    //   console.log(this.mapRequest.jwd)
-      saveFence(this.mapRequest).then(response=>{
+    //   saveFence(this.mapRequest).then(response=>{
-        // this.$modal.msgSuccess("保存成功")
+    //     // this.$modal.msgSuccess("保存成功")
-      })
+    //   })
-    },
+    // },
 
 
 
@@ -438,7 +363,8 @@ export default {
 
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
-    this.list()
+    // this.list();
+    this.getList();
     // this.mapRequest.fenceId=this.$router.query.fenceId
   },
   beforeCreate() {

src/views/system/markers/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div>
+
+    <div>
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+
+        <el-form-item label="标识名称">
+          <el-input v-model="queryParams.markersName" placeholder="模糊查询标识名称"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-button type="primary" plain icon="el-icon-plus" @click="markersAdd">新增</el-button>
+
+
+
+      <el-table :data="markersList" style="width: 100%"  ref="multipleTable">
+
+        <el-table-column label="标识编号" align="center" prop="markersId" />
+
+        <el-table-column label="标识名称" align="center" prop="markersName" />
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link type="primary" icon="el-icon-map-location" @click="handleWdit(scope.row)">绑定电子围栏</el-link>
+
+            <el-link type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-link>
+
+            <el-link type="primary" icon="el-icon-delete"  @click="handleDelete(scope.row.markersId)">删除</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+
+
+      <!--    围栏添加-->
+      <el-dialog :title="title" :visible.sync="dialogFormVisible">
+
+        <el-form :model="markers">
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="markers.markersName" autocomplete="off"></el-input>
+          </el-form-item>
+
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addAll">新增</el-button>
+        </div>
+      </el-dialog>
+
+
+      <!--    修改电子围栏-->
+      <el-dialog :title="title" :visible.sync="dialogFormVisible1">
+
+        <el-form :model="markers">
+          <el-form-item label="围栏名称" :label-width="formLabelWidth1">
+            <el-input v-model="markers.markersName" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="updateAll">修 改</el-button>
+        </div>
+      </el-dialog>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import { markersList, markersInsert, markersDelete, insertMarkersFence, markersUpdate, markersFenceList} from "@/api/system/markers";
+
+export default {
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        markersName: null
+      },
+      markersFences:[],
+      total: 0,
+      dialogFormVisible: false,
+      formLabelWidth: '120px',
+      markers: {},
+      title: '',
+      dialogFormVisible1: false,
+      formLabelWidth1: '120px',
+      markersList: [],
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //获取围栏列表
+    getList() {
+      this.loading = true;
+      markersList(this.queryParams).then(res => {
+        this.markersList = res.data.rows;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    markersFenceShow(){
+      markersFenceList().then(res => {
+        this.markersFences = res.data
+      })
+    },
+    // 搜索框
+    onSubmit() {
+      this.getList()
+    },
+
+    handleWdit(obj) {
+      this.markers = obj
+      this.markersFenceShow(obj.markersId)
+      console.log(this.markersFenceShow)
+    },
+
+    //修改标识
+    handleEdit(obj) {
+      this.dialogFormVisible1 = true
+      this.markers = obj
+      this.title = '修改标识'
+    },
+
+    updateAll() {
+      markersUpdate(this.markers).then(
+        res => {
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+      this.dialogFormVisible1 = false;
+    },
+    //新增
+    markersAdd() {
+      this.markers = {}
+      this.dialogFormVisible = true
+      this.title = '新增页面'
+    },
+
+    addAll() {
+      markersInsert(this.markers).then(
+        res => {
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+      this.dialogFormVisible = false
+    },
+
+    //删除电子围栏
+    handleDelete(markersId) {
+      markersDelete(markersId, 'deleted').then(
+        res => {
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+    },
+
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getList();
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+

src/views/system/vehicle/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <div>
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+
+        <el-form-item label="车辆VIN">
+          <el-input v-model="queryParams.vehicleVIN" placeholder="车辆VIN"></el-input>
+        </el-form-item>
+
+        <el-form-item label="车辆类型">
+          <el-input v-model="queryParams.vehicleTypeId" placeholder="车辆类型"></el-input>
+        </el-form-item>
+
+        <el-form-item label="电机厂商">
+          <el-input v-model="queryParams.motorBusiness" placeholder="电机厂商"></el-input>
+        </el-form-item>
+
+        <el-form-item label="电池厂商">
+          <el-input v-model="queryParams.batteryBusiness" placeholder="电池厂商"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="电机ID">
+          <el-input v-model="queryParams.MotorID" placeholder="电机ID"></el-input>
+        </el-form-item>
+
+        <el-form-item label="电池名称">
+          <el-input v-model="queryParams.BatteryID" placeholder="电池ID"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="车辆状态">
+          <el-select v-model="queryParams.vehicleState" placeholder="请选择围栏状态">
+            <el-option label="正常" value="1">正常</el-option>
+            <el-option label="停用" value="2">停用</el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-button type="primary" plain icon="el-icon-plus" @click="vehicleAdd">新增</el-button>
+
+
+
+      <el-table :data="vehicleList" style="width: 100%"  ref="multipleTable">
+
+        <el-table-column label="车辆VIN" align="center" prop="vehicleVIN" />
+        <el-table-column label="车辆VIN" align="center" prop="vehicleTypeId" />
+        <el-table-column label="车辆VIN" align="center" prop="motorBusiness" />
+        <el-table-column label="车辆VIN" align="center" prop="batteryBusiness" />
+        <el-table-column label="车辆VIN" align="center" prop="motorID" />
+        <el-table-column label="车辆VIN" align="center" prop="batteryID" />
+        <el-table-column label="车辆VIN" align="center" prop="" />
+        <el-table-column label="车辆VIN" align="center" prop="vehicleVIN" />
+        <el-table-column label="车辆VIN" align="center" prop="vehicleVIN" />
+
+        <el-table-column
+          label="围栏状态"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px" v-if="scope.row.vehicleState==1"><el-tag>正常</el-tag></span>
+            <span style="margin-left: 10px" v-if="scope.row.vehicleState==2"><el-tag>停用</el-tag></span>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link type="primary" icon="el-icon-map-location" @click="handleWdit(scope.row)">编辑围栏</el-link>
+
+            <el-link type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-link>
+
+            <el-link type="primary" icon="el-icon-delete"  @click="handleDelete(scope.row.fenceId)">删除</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+
+      <!--    围栏添加-->
+      <el-dialog :title="title" :visible.sync="dialogFormVisible">
+
+        <el-form :model="vehicle">
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+
+          <el-form-item label="围栏类型" :label-width="formLabelWidth">
+            <el-select v-model="vehicle.fenceTypeId" placeholder="请选择活动区域">
+              <el-option label="驶出" value="1">驶出</el-option>
+              <el-option label="驶入" value="2">驶入</el-option>
+            </el-select>
+          </el-form-item>
+
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addAll">新增</el-button>
+        </div>
+      </el-dialog>
+
+
+      <!--    修改电子围栏-->
+      <el-dialog :title="title" :visible.sync="dialogFormVisible1">
+
+        <el-form :model="vehicle">
+          <el-form-item label="围栏名称" :label-width="formLabelWidth1">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="vehicle.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+
+          <el-form-item label="围栏类型" :label-width="formLabelWidth1">
+            <el-select v-model="vehicle.fenceTypeId" placeholder="请选择活动区域">
+              <el-option label="驶出" value="1">驶出</el-option>
+              <el-option label="驶入" value="2">驶入</el-option>
+            </el-select>
+          </el-form-item>
+
+
+          <el-form-item label="围栏状态">
+            <el-radio-group v-model="vehicle.fenceState" :label-width="formLabelWidth1">
+              <el-radio :label="1">正常</el-radio>
+              <el-radio :label="2">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="updateAll">修 改</el-button>
+        </div>
+      </el-dialog>
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {vehicleInsert, insertMarkersFence, vehicleList, vehicleDelete, vehicleUpdate} from "@/api/system/vehicle";
+export default {
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        vehicleVIN: null,
+        vehicleTypeId: null,
+        motorBusiness: null,
+        batteryBusiness: null,
+        MotorID: null,
+        BatteryID: null,
+        vehicleState:null
+
+      },
+      total:0,
+      dialogFormVisible:false,
+      formLabelWidth:'120px',
+
+      vehicle:{},
+      title:'',
+      dialogFormVisible1:false,
+      formLabelWidth1:'120px',
+
+      vehicleList: [],
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //获取围栏列表
+    getList() {
+      this.loading = true;
+      vehicleList(this.queryParams).then(res => {
+        this.vehicleList = res.data.rows;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    // 搜索框
+    onSubmit() {
+      this.getList()
+    },
+
+    //修改电子围栏
+    handleEdit(obj) {
+      this.dialogFormVisible1 = true
+      this.vehicle = obj
+      this.title = '修改车辆信息'
+
+    },
+
+
+    updateAll() {
+      vehicleUpdate(this.vehicle).then(
+        res => {
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+      this.dialogFormVisible1=false;
+    },
+    //新增
+    vehicleAdd() {
+      this.vehicle = {}
+      this.dialogFormVisible = true
+      this.title = '新增页面'
+    },
+
+    addAll() {
+      vehicleInsert(this.vehicle).then(
+        res => {
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+      this.dialogFormVisible = false
+    },
+
+
+    //删除车辆信息
+    handleDelete(vehicleId){
+      vehicleDelete(vehicleId,'deleted').then(
+        res=>{
+          this.$message.success(res.msg)
+          this.getList()
+        }
+      )
+    },
+
+
+    //编辑车辆标识
+    handleWdit(obj) {
+      this.vehicle = obj
+    },
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getList();
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>