feat:围栏，围栏组，高德

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/ZhiLian-Cloud.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
@@ -53,6 +54,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-amap": "^0.5.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",

public/index.html

@@ -9,6 +9,7 @@
   <title><%= webpackConfig.name %></title>
   <!--[if lt IE 11]>
   <script>window.location.href = '/html/ie.html';</script><![endif]-->
+  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1c2de9d182e461daabe3548b62471c24"></script>
   <style>
     html,
     body,

src/api/busin/business.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询企业列表
+export function listBusiness(data) {
+  return request({
+    url: '/business/business/list',
+    method: 'get',
+    params: data
+  })
+}
+
+// 查询企业详细
+export function getBusiness(id) {
+  return request({
+    url: '/business/business/' + id,
+    method: 'get'
+  })
+}
+
+// 新增企业
+export function addBusiness(data) {
+  return request({
+    url: '/business/business',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改企业
+export function updateBusiness(data) {
+  return request({
+    url: '/business/business',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除企业
+export function delBusiness(id) {
+  return request({
+    url: '/business/business/' + id,
+    method: 'delete'
+  })
+}

src/api/fence/fence.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询围栏列表
+export function listFence(query) {
+  return request({
+    url: '/vehicle/fence/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询围栏详细
+export function getFence(id) {
+  return request({
+    url: '/vehicle/fence/' + id,
+    method: 'get'
+  })
+}
+
+// 新增围栏
+export function addFence(data) {
+  return request({
+    url: '/vehicle/fence',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改围栏
+export function updateFence(data) {
+  return request({
+    url: '/vehicle/fence',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除围栏
+export function delFence(id) {
+  return request({
+    url: '/vehicle/fence/' + id,
+    method: 'delete'
+  })
+}

src/api/group/group.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询围栏组列表
+export function listGroup(query) {
+  return request({
+    url: '/vehicle/group/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询围栏组详细
+export function getGroup(id) {
+  return request({
+    url: '/vehicle/group/' + id,
+    method: 'get'
+  })
+}
+
+// 新增围栏组
+export function addGroup(data) {
+  return request({
+    url: '/vehicle/group',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改围栏组
+export function updateGroup(data) {
+  return request({
+    url: '/vehicle/group',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除围栏组
+export function delGroup(id) {
+  return request({
+    url: '/vehicle/group/' + id,
+    method: 'delete'
+  })
+}

src/api/vehicle/vehicle.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询车辆录入列表
+export function listVehicle(query) {
+  return request({
+    url: '/vehicle/vehicle/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询车辆录入详细
+export function getVehicle(id) {
+  return request({
+    url: '/vehicle/vehicle/' + id,
+    method: 'get'
+  })
+}
+
+// 新增车辆录入
+export function addVehicle(data) {
+  return request({
+    url: '/vehicle/vehicle',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改车辆录入
+export function updateVehicle(data) {
+  return request({
+    url: '/vehicle/vehicle',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除车辆录入
+export function delVehicle(id) {
+  return request({
+    url: '/vehicle/vehicle/' + id,
+    method: 'delete'
+  })
+}

src/main.js

@@ -84,3 +84,28 @@ new Vue({
   store,
   render: h => h(App)
 })
+// main.js全局引入高德插件
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+Vue.prototype.AMapLoader = AMapLoader
+
+//页面调用
+this.AMapLoader.load({
+  key: "1c2de9d182e461daabe3548b62471c24",
+  //此处填入我们注册账号后获取的Key
+  version: "2.0",
+  //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+  plugins: ['AMap.MarkerCluster'],
+  //需要使用的的插件服务列表，如比例尺'AMap.Scale'等
+}).then((AMap) => {
+  // 创建卫星图层
+  var satellite = new AMap.TileLayer.Satellite();
+
+  this.satelliteMap = new AMap.Map("需要绑定的节点ID", {
+    center: [114.223939, 22.699103],
+    zoom: 13,
+    layers: [
+      satellite
+    ]
+  });
+})

src/views/amap/tool/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="index">
+    <el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
+    <el-button type="primary" @click="editRectangle">编辑多边形</el-button>
+    <el-button type="primary" @click="deleRectangle">删除多边形</el-button>
+    <el-button type="primary" @click="handleAdd">添加电子围栏</el-button>
+    <div id="amapContainer"></div>
+    <!-- 添加或修改围栏对话框 -->
+    <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="围栏名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入围栏名称" />
+        </el-form-item>
+<!--        <el-form-item label="围栏经纬" prop="fenceLongitudeLatitude">-->
+<!--          <el-input v-model="form.fenceLongitudeLatitude" placeholder="请输入围栏经纬" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="围栏备注" prop="fenceDescription">
+          <el-input v-model="form.fenceDescription" placeholder="请输入围栏备注" />
+        </el-form-item>
+        <el-form-item label="围栏组">
+          <el-select v-model="form.groupId" placeholder="请选择围栏组">
+            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" ></el-option>
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="是否删除 0 不删除 1删除" prop="isDelete">-->
+<!--          <el-input v-model="form.isDelete" placeholder="请输入是否删除 0 不删除 1删除" />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="围栏状态" prop="fenceState">-->
+<!--          <el-input v-model="form.fenceState" placeholder="请输入围栏状态" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addRectangle">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addFence} from "@/api/fence/fence";
+import {listGroup} from "@/api/group/group";
+
+export default {
+  name: 'amapFence',
+  computed: {
+    rules() {
+      return rules
+    }
+  },
+  data () {
+    return {
+      rules: {
+      },
+      title: "",
+      form: {},
+      open: false,
+      path: [], // 当前绘制的多边形经纬度数组
+      polygonItem: [], // 地图上绘制的所有多边形对象
+      polyEditors: [] ,
+      groupList :[],// 所有编辑对象数组
+      reset() {
+        this.form = {
+          id: null,
+          name: null,
+          fenceLongitudeLatitude: null,
+          fenceDescription: null,
+          groupId: null,
+          isDelete: null,
+          fenceState: null,
+          remark: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null
+        };
+        this.resetForm("form");
+      },
+    }
+  },
+  props: {
+    paths: {} // 编辑
+  },
+  created() {
+    this.listGroup();
+  },
+  mounted () {
+
+    this.intAmap(() => {
+      if (this.paths) {
+        this.editRectangle(this.paths);
+      }
+    });
+  },
+  methods: {
+    // 地图初始化
+    intAmap (callBack) {
+      this.AMap = window.AMap;
+      this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function () {
+        //TODO  创建控件并添加
+      });
+      this.map = new this.AMap.Map("amapContainer", {
+        center: [116.434381, 39.898515],
+        zoom: 30,
+        mapStyle: 'amap://styles/light',
+        pitch: 0,
+        rotation: -15,
+        viewMode: '3D',//开启3D视图,默认为关闭
+        buildingAnimation: true,//楼块出现是否带动画
+      });
+      this.map.addControl(new this.AMap.ControlBar());
+      if (callBack && typeof callBack == 'function') {
+        callBack();
+      }
+    },
+    // 编辑围栏
+    editRectangle (paths) {
+      const path = paths;
+      const AMap = window.AMap;
+      var polygon = new this.AMap.Polygon({
+        path: path,
+        strokeColor: "#FF33FF",
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        fillColor: '#1791fc',
+        zIndex: 50,
+      });
+
+      this.map.add(polygon);
+      this.polygonItem.push(polygon);
+      // 缩放地图到合适的视野级别
+      this.map.setFitView([polygon]);
+
+      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
+      this.polyEditor.open();
+      this.polyEditors.push(this.polyEditor);
+
+      this.polyEditor.on('addnode', function (event) {
+        console.info('触发事件：addnode', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+      });
+
+      this.polyEditor.on('adjust', function (event) {
+        console.info('触发事件：adjust', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+      });
+
+      this.polyEditor.on('removenode', function (event) {
+        console.info('触发事件：removenode', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+      });
+
+      this.polyEditor.on('end', function (event) {
+        console.info('触发事件： end', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+        // event.target 即为编辑后的多边形对象
+      });
+    },
+    // 绘制多边形
+    drawRectangle () {
+      const vm = this;
+      this.mouseTool = new this.AMap.MouseTool(this.map);
+      const polygon = this.mouseTool.polygon({
+        strokeColor: 'red',
+        strokeOpacity: 0.5,
+        strokeWeight: 6,
+        fillColor: 'blue',
+        fillOpacity: 0.5,
+        // strokeStyle还支持 solid
+        strokeStyle: 'solid',
+        // strokeDasharray: [30,10],
+      });
+
+      this.mouseTool.on('draw', function (event) {
+        // event.obj 为绘制出来的覆盖物对象
+        var polygonItem = event.obj;
+        var paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
+        console.log('覆盖物对象绘制完成各个点的坐标', paths);
+        var path = [];  // 编辑的路径
+        paths.forEach(v => {
+          path.push([v.lng, v.lat])
+        });
+        vm.path = path;
+        vm.editRectangle(vm.path);
+        vm.polygonItem.push(event.obj);
+        vm.map.remove(event.obj); // 删除多边形
+        console.log(polygon, '------polygon-----');
+      });
+    },
+    listGroup() {
+      listGroup(this.queryParams).then(res=>{
+        this.groupList=res.data.rows
+      })
+    },
+    // 批量删除多边形
+    deleRectangle () {
+      // 取消编辑状态
+      this.polyEditors.forEach(v => {
+        v.close();
+      });
+      this.map.clearMap(); // 删除地图所有覆盖物
+    },
+    handleAdd(){
+      this.reset();
+      this.open = true;
+      this.title = "添加围栏";
+    },
+    addRectangle(){
+      this.form.path=this.path
+      console.log(this.form)
+
+      addFence(this.form).then(res=>{
+        console.log(res)
+      })
+      //取消编辑状态
+      this.polyEditors.forEach(v => {
+        v.close();
+      });
+      this.map.clearMap();
+      this.open=false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#amapContainer {
+  height: 800px;
+  width: 1000px;
+}
+</style>

src/views/business/busin/index.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="app-container">
+<!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
+<!--      <el-form-item label="企业名称" prop="name">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.name"-->
+<!--          placeholder="请输入企业名称"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="企业法定代表人" prop="businessPerson">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.businessPerson"-->
+<!--          placeholder="请输入企业法定代表人"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="营业编码" prop="businessLincenseNumber">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.businessLincenseNumber"-->
+<!--          placeholder="请输入营业编码"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="企业创建时间" prop="businessCreateTime">-->
+<!--        <el-date-picker clearable-->
+<!--          v-model="queryParams.businessCreateTime"-->
+<!--          type="date"-->
+<!--          value-format="yyyy-MM-dd"-->
+<!--          placeholder="请选择企业创建时间">-->
+<!--        </el-date-picker>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="企业电话" prop="businessPhone">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.businessPhone"-->
+<!--          placeholder="请输入企业电话"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="企业邮箱" prop="businessEmail">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.businessEmail"-->
+<!--          placeholder="请输入企业邮箱"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="企业状态" prop="businessStates">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.businessStates"-->
+<!--          placeholder="请输入企业状态"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="入驻车联网平台时间" prop="businessRegistrationDate">-->
+<!--        <el-date-picker clearable-->
+<!--          v-model="queryParams.businessRegistrationDate"-->
+<!--          type="date"-->
+<!--          value-format="yyyy-MM-dd"-->
+<!--          placeholder="请选择入驻车联网平台时间">-->
+<!--        </el-date-picker>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="服务等级" prop="serviceLevel">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.serviceLevel"-->
+<!--          placeholder="请输入服务等级"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="认证等级0/1" prop="authentication">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.authentication"-->
+<!--          placeholder="请输入认证等级0/1"-->
+<!--          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>-->
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:business:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:business:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:business:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:business:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="businessList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="企业主键" width="180">
+        <template slot-scope="scope">
+          <el-tag size="medium">{{ scope.row.id }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业名称" width="180">
+        <template slot-scope="scope">
+          <el-tag size="medium">{{ scope.row.name }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业法定代表人" width="180">
+        <template slot-scope="scope">
+          <el-tag size="medium">{{ scope.row.businessPerson }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="营业编码" width="180">
+        <template slot-scope="scope">
+          <el-tag size="medium">{{ scope.row.businessLincenseNumber }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业创建时间" align="center" prop="businessCreateTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.businessCreateTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业电话" width="180">
+        <template slot-scope="scope">
+          <el-tag size="medium">{{ scope.row.businessPhone }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业邮箱" width="180">
+        <template slot-scope="scope">
+          <el-tag size="medium">{{ scope.row.businessEmail }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业状态" width="180">
+        <template slot-scope="scope">
+            <span v-if="scope.row.businessStates==0" >待认证</span>
+            <span v-if="scope.row.businessStates==1" >待开通服务</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="入驻车联网平台时间" align="center" prop="businessRegistrationDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.businessRegistrationDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务等级" width="180">
+        <template slot-scope="scope">
+
+            <span v-if="scope.row.serviceLevel==0"  >免费服务</span>
+            <span v-if="scope.row.serviceLevel==1"  >VIP服务</span>
+            <span v-if="scope.row.serviceLevel==2"  >超级VIP服务</span>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.businessStates==0"
+                     size="mini"
+                     type="text"
+                     icon="el-icon-edit"
+                     @click="handleUpdateRen(scope.row)"
+          >认证</el-button>
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:business:edit']"
+          >修改</el-button>
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:business:remove']"
+          >删除</el-button>
+        </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="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="企业名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入企业名称" />
+        </el-form-item>
+        <el-form-item label="企业法定代表人" prop="businessPerson">
+          <el-input v-model="form.businessPerson" placeholder="请输入企业法定代表人" />
+        </el-form-item>
+        <el-form-item label="营业编码" prop="businessLincenseNumber">
+          <el-input v-model="form.businessLincenseNumber" placeholder="请输入营业编码" />
+        </el-form-item>
+        <el-form-item label="企业创建时间" prop="businessCreateTime">
+          <el-date-picker clearable
+            v-model="form.businessCreateTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择企业创建时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="企业电话" prop="businessPhone">
+          <el-input v-model="form.businessPhone" placeholder="请输入企业电话" />
+        </el-form-item>
+        <el-form-item label="企业邮箱" prop="businessEmail">
+          <el-input v-model="form.businessEmail" placeholder="请输入企业邮箱" />
+        </el-form-item>
+        <el-form-item label="围栏组">
+          <el-select v-model="form.groupId" placeholder="请选择围栏组">
+            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" ></el-option>
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="企业状态" prop="businessStates">-->
+<!--          <el-input v-model="form.businessStates" placeholder="请输入企业状态" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="入驻车联网平台时间" prop="businessRegistrationDate">
+          <el-date-picker clearable
+            v-model="form.businessRegistrationDate"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择入驻车联网平台时间">
+          </el-date-picker>
+        </el-form-item>
+<!--        <el-form-item label="服务等级" prop="serviceLevel">-->
+<!--          <el-input v-model="form.serviceLevel" placeholder="请输入服务等级" />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="认证等级" prop="authentication">-->
+<!--          <el-input v-model="form.authentication" placeholder="请输入认证等级" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" 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>
+  </div>
+</template>
+
+<script>
+import { listBusiness, getBusiness, delBusiness, addBusiness, updateBusiness } from "@/api/busin/business";
+import {listGroup} from "@/api/group/group";
+
+export default {
+  name: "Business",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企业表格数据
+      businessList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        "name": "",
+        "businessPerson": "",
+        "businessLincenseNumber": "",
+        "businessCreateTime": "",
+        "businessPhone": "",
+        "businessEmail": "",
+        "businessStates": "",
+        "businessRegistrationDate": "",
+        "serviceLevel": "",
+        "authentication": "",
+        "createBy": "",
+        "createTime": "",
+        "updateBy": "",
+        "updateTime": "",
+        "pageNum": 1,
+        "pageSize": 10,
+        "remark": ""
+      },
+      // 表单参数
+      form: {
+        "businessStates": "",
+      },
+      groupList:[],
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.listGroup()
+  },
+  methods: {
+    listGroup(){
+      listGroup(this.queryParams).then(res=>{
+        this.groupList=res.data.rows
+      })
+    },
+    /** 查询企业列表 */
+    getList() {
+      this.loading = true;
+      listBusiness(this.queryParams).then(response => {
+        this.businessList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        businessPerson: null,
+        businessLincenseNumber: null,
+        businessCreateTime: null,
+        businessPhone: null,
+        businessEmail: null,
+        businessStates: null,
+        businessRegistrationDate: null,
+        serviceLevel: null,
+        authentication: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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.reset();
+      this.open = true;
+      this.title = "添加企业";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getBusiness(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改企业";
+      });
+    },
+    handleUpdateRen(row){
+      row.businessStates=1
+      updateBusiness(row).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.open = false;
+        this.getList();
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateBusiness(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addBusiness(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 delBusiness(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/business/export', {
+        ...this.queryParams
+      }, `business_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/fen/fence/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="围栏名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入围栏名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="围栏经纬" prop="fenceLongitudeLatitude">
+        <el-input
+          v-model="queryParams.fenceLongitudeLatitude"
+          placeholder="请输入围栏经纬"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="围栏备注" prop="fenceDescription">
+        <el-input
+          v-model="queryParams.fenceDescription"
+          placeholder="请输入围栏备注"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否删除 0 不删除 1删除" prop="isDelete">
+        <el-input
+          v-model="queryParams.isDelete"
+          placeholder="请输入是否删除 0 不删除 1删除"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="围栏状态" prop="fenceState">
+        <el-input
+          v-model="queryParams.fenceState"
+          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>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+<!--        <el-button-->
+<!--          type="primary"-->
+<!--          plain-->
+<!--          icon="el-icon-plus"-->
+<!--          size="mini"-->
+<!--          @click="handleAdd"-->
+<!--          v-hasPermi="['system:fence:add']"-->
+<!--        >新增</el-button>-->
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:fence:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:fence:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:fence:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="围栏主键" align="center" prop="id" />
+      <el-table-column label="围栏名称" align="center" prop="name" />
+      <el-table-column label="围栏经纬" align="center" prop="fenceLongitudeLatitude" />
+      <el-table-column label="围栏组ID" align="center" prop="groupId" />
+      <el-table-column label="围栏备注" align="center" prop="fenceDescription" />
+      <el-table-column label="是否删除 0 不删除 1删除" align="center" prop="isDelete" />
+      <el-table-column label="围栏状态" align="center" prop="fenceState" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:fence:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:fence:remove']"
+          >删除</el-button>
+        </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="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="围栏名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入围栏名称" />
+        </el-form-item>
+        <el-form-item label="围栏组">
+          <el-select v-model="form.groupId" placeholder="请选择围栏组">
+            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="围栏经纬" prop="fenceLongitudeLatitude">
+          <el-input v-model="form.fenceLongitudeLatitude" readonly placeholder="请输入围栏经纬" />
+        </el-form-item>
+        <el-form-item label="围栏备注" prop="fenceDescription">
+          <el-input v-model="form.fenceDescription" placeholder="请输入围栏备注" />
+        </el-form-item>
+<!--        <el-form-item label="是否删除 0 不删除 1删除" prop="isDelete">-->
+<!--          <el-input v-model="form.isDelete" placeholder="请输入是否删除 0 不删除 1删除" />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="围栏状态" prop="fenceState">-->
+<!--          <el-input v-model="form.fenceState" placeholder="请输入围栏状态" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" 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>
+  </div>
+</template>
+
+<script>
+import { listFence, getFence, delFence, addFence, updateFence } from "@/api/fence/fence";
+import {listGroup} from "@/api/group/group";
+
+export default {
+  name: "Fence",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 围栏表格数据
+      fenceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        fenceLongitudeLatitude: null,
+        fenceDescription: null,
+        isDelete: null,
+        fenceState: null,
+      },
+      // 表单参数
+      form: {},
+      // 围栏组表格数据
+      groupList: [],
+      // 表单校验
+      rules: {
+      }
+
+    };
+  },
+  created() {
+    this.getList();
+    this.listGroup();
+  },
+  methods: {
+    listGroup(){
+      listGroup(this.queryParams).then(res=>{
+        this.groupList=res.data.rows
+      })
+    },
+    /** 查询围栏列表 */
+    getList() {
+      this.loading = true;
+      listFence(this.queryParams).then(response => {
+        this.fenceList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        fenceLongitudeLatitude: null,
+        fenceDescription: null,
+        isDelete: null,
+        fenceState: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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.reset();
+      this.open = true;
+      this.title = "添加围栏";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getFence(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改围栏";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      console.log(this.form)
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateFence(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addFence(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 delFence(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/fence/export', {
+        ...this.queryParams
+      }, `fence_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/gro/group/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="围栏组名称" prop="groupName">
+        <el-input
+          v-model="queryParams.groupName"
+          placeholder="请输入围栏组名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="修改时间" prop="updateTime">
+        <el-date-picker clearable
+          v-model="queryParams.updateTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择修改时间">
+        </el-date-picker>
+      </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>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:group:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:group:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:group:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:group:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="围栏组ID" align="center" prop="id" />
+      <el-table-column label="围栏组名称" align="center" prop="groupName" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="修改时间" align="center" prop="updateTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:group:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:group:remove']"
+          >删除</el-button>
+        </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="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="围栏组名称" prop="groupName">
+          <el-input v-model="form.groupName" placeholder="请输入围栏组名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="修改时间" prop="updateTime">
+          <el-date-picker clearable
+            v-model="form.updateTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择修改时间">
+          </el-date-picker>
+        </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>
+  </div>
+</template>
+
+<script>
+import { listGroup, getGroup, delGroup, addGroup, updateGroup } from "@/api/group/group";
+
+export default {
+  name: "Group",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 围栏组表格数据
+      groupList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        groupName: null,
+        updateTime: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询围栏组列表 */
+    getList() {
+      this.loading = true;
+      listGroup(this.queryParams).then(response => {
+        this.groupList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        groupName: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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.reset();
+      this.open = true;
+      this.title = "添加围栏组";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getGroup(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) {
+            updateGroup(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addGroup(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 delGroup(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/group/export', {
+        ...this.queryParams
+      }, `group_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">业务管理系统</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"

src/views/vehicle/veh/index.vue

@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="车辆vin" prop="number">
+        <el-input
+          v-model="queryParams.number"
+          placeholder="请输入车辆vin"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆类型" prop="typeId">
+        <el-input
+          v-model="queryParams.typeId"
+          placeholder="请输入车辆类型"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="电子围栏ID" prop="electonicId">
+        <el-input
+          v-model="queryParams.electonicId"
+          placeholder="请输入电子围栏ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="电机厂商" prop="motor">
+        <el-input
+          v-model="queryParams.motor"
+          placeholder="请输入电机厂商"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="电池厂商" prop="battery">
+        <el-input
+          v-model="queryParams.battery"
+          placeholder="请输入电池厂商"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="电机编号" prop="motorNumber">
+        <el-input
+          v-model="queryParams.motorNumber"
+          placeholder="请输入电机编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="电池编号" prop="batteryNumber">
+        <el-input
+          v-model="queryParams.batteryNumber"
+          placeholder="请输入电池编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+<!--      <el-form-item label="企业ID" prop="enterpriseId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.enterpriseId"-->
+<!--          placeholder="请输入企业ID"-->
+<!--          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>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:vehicle:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:vehicle:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:vehicle:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:vehicle:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="vehicleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="车辆主键" align="center" prop="id" />
+      <el-table-column label="车辆vin" align="center" prop="number" />
+      <el-table-column label="车辆类型" align="center" prop="typeId" />
+      <el-table-column label="电子围栏ID" align="center" prop="electonicId" />
+      <el-table-column label="围栏组ID" align="center" prop="groupId" />
+      <el-table-column label="电机厂商" align="center" prop="motor" />
+      <el-table-column label="电池厂商" align="center" prop="battery" />
+      <el-table-column label="电机编号" align="center" prop="motorNumber" />
+      <el-table-column label="电池编号" align="center" prop="batteryNumber" />
+<!--      <el-table-column label="企业ID" align="center" prop="enterpriseId" />-->
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:vehicle:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:vehicle:remove']"
+          >删除</el-button>
+        </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="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="车辆vin" prop="number">
+          <el-input v-model="form.number" placeholder="请输入车辆vin" />
+        </el-form-item>
+        <el-form-item label="车辆类型" prop="typeId">
+          <el-input v-model="form.typeId" placeholder="请输入车辆类型" />
+        </el-form-item>
+        <el-form-item label="电子围栏ID" prop="electonicId">
+          <el-input v-model="form.electonicId" placeholder="请输入电子围栏ID" />
+        </el-form-item>
+        <el-form-item label="围栏组">
+          <el-select v-model="form.groupId" placeholder="请选择围栏组">
+            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电机厂商" prop="motor">
+          <el-input v-model="form.motor" placeholder="请输入电机厂商" />
+        </el-form-item>
+        <el-form-item label="电池厂商" prop="battery">
+          <el-input v-model="form.battery" placeholder="请输入电池厂商" />
+        </el-form-item>
+        <el-form-item label="电机编号" prop="motorNumber">
+          <el-input v-model="form.motorNumber" placeholder="请输入电机编号" />
+        </el-form-item>
+        <el-form-item label="电池编号" prop="batteryNumber">
+          <el-input v-model="form.batteryNumber" placeholder="请输入电池编号" />
+        </el-form-item>
+<!--        <el-form-item label="企业ID" prop="enterpriseId">-->
+<!--          <el-input v-model="form.enterpriseId" placeholder="请输入企业ID" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" 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>
+  </div>
+</template>
+
+<script>
+import { listVehicle, getVehicle, delVehicle, addVehicle, updateVehicle } from "@/api/vehicle/vehicle";
+import {listGroup} from "@/api/group/group";
+
+export default {
+  name: "Vehicle",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 车辆录入表格数据
+      vehicleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        number: null,
+        typeId: null,
+        electonicId: null,
+        groupId: null,
+        motor: null,
+        battery: null,
+        motorNumber: null,
+        batteryNumber: null,
+        enterpriseId: null,
+      },
+      // 表单参数
+      form: {},
+      groupList: [],
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.listGroup();
+  },
+  methods: {
+    listGroup(){
+      listGroup(this.queryParams).then(res=>{
+        this.groupList=res.data.rows
+      })
+    },
+    /** 查询车辆录入列表 */
+    getList() {
+      this.loading = true;
+      listVehicle(this.queryParams).then(response => {
+        this.vehicleList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        number: null,
+        typeId: null,
+        electonicId: null,
+        groupId: null,
+        motor: null,
+        battery: null,
+        motorNumber: null,
+        batteryNumber: null,
+        enterpriseId: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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.reset();
+      this.open = true;
+      this.title = "添加车辆录入";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      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('system/vehicle/export', {
+        ...this.queryParams
+      }, `vehicle_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>