feat():初始化

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",

src/api/car/car.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询车辆基础信息列表
+export function listCar(query) {
+  return request({
+    url: '/saas/car/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询车辆基础信息详细
+export function getCar(id) {
+  return request({
+    url: '/saas/car/' + id,
+    method: 'get'
+  })
+}
+
+// 新增车辆基础信息
+export function addCar(data) {
+  return request({
+    url: '/saas/car',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改车辆基础信息
+export function updateCar(data) {
+  return request({
+    url: '/saas/car',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除车辆基础信息
+export function delCar(id) {
+  return request({
+    url: '/saas/car/' + id,
+    method: 'delete'
+  })
+}

src/api/car/message/template.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 报文模版列表
+export function templateList() {
+  return request({
+    url: 'saas/messageTemplate/list',
+    method: 'POST',
+  })
+}
+
+//添加报文模版
+export function addTemplate(data) {
+  return request({
+    url: 'saas/messageTemplate/',
+    method: 'POST',
+    data: data
+  })
+}
+
+// 报文数据列表
+export function valueList(data) {
+  return request({
+    url: 'saas/messageValue/list',
+    method: 'POST',
+    data: data
+  })
+}
+
+// 添加报文数据
+export function addValue(data) {
+  return request({
+    url: 'saas/messageValue/',
+    method: 'POST',
+    data: data
+  })
+}

src/api/electronic/index.js

@@ -0,0 +1,128 @@
+import request from '@/utils/request'
+
+// liebiao
+export function selectCarFenceList(data) {
+  return request({
+    url: '/saas/carFence/selectConnect',
+    method: 'post',
+    data:data
+  })
+}
+//添加围栏
+export function addCarFence(data) {
+  return request({
+    url: '/saas/carFence/addCarFence',
+    method: 'post',
+    data
+  })
+}
+// 添加多对多
+export function addFenceGroupMidddle(fenceGroupId,carFence) {
+  return request({
+    url: '/saas/middle/addCarFence',
+    method: 'post',
+    params:{fenceGroupId},
+    data:carFence,
+  })
+}
+// 添加中间
+export function addMiddle(data) {
+  return request({
+    url: '/saas/middle/addMiddle',
+    method: 'post',
+    data:data
+  })
+}
+
+// 刷新方法
+export function clazzList() {
+  return request({
+    url: '/saas/carFenceClazz/selectClazz',
+    method: 'post',
+  })
+}
+
+// 刷新方法
+export function typeList(data) {
+  return request({
+    url: '/saas/carFenceType/selectType',
+    method: 'post',
+  })
+}
+// 刷新方法
+export function carAddList(data) {
+  return request({
+    url: '/saas/carFence/carAddList',
+    method: 'post',
+  })
+}
+
+// 查询所有车名称
+export function selectCarInformationIdAndLicensePlate() {
+  return request({
+    url: '/saas/carFence/selectCarInformationIdAndLicensePlate',
+    method: 'get',
+  })
+}
+// 围栏组列表
+export function group(data) {
+  return request({
+    url: '/saas/fenceGroup/fenceGroupList',
+    method: 'post',
+    data
+  })
+}
+// 围栏组添加
+export function addFenceGroup(data) {
+  return request({
+    url: '/saas/fenceGroup/addFenceGroup',
+    method: 'POST',
+    data
+  })
+}
+//修改围栏组状态
+export function updateFenceGroupById(groupId){
+  return request({
+    url:'/saas/middle/updateFenceGroupById?groupId='+groupId,
+    method:'get',
+    data:groupId
+  })
+}
+//启动修改围栏状态
+export function activate(groupId){
+  return request({
+    url:'/saas/middle/activate?groupId='+groupId,
+    method:'get',
+    data:groupId
+  })
+}
+
+//根据围栏组的id查询绑定的围栏的中间表
+export function BoundFenceGroup(groupId){
+  return request({
+    url:'/saas/middle/BoundFenceGroup',
+    method:'get',
+    params:{groupId}
+  })
+}
+
+//根据围栏组的id 添加车辆的中间表
+export function  AddFenceGroupAddCar(carId,fenceGroup){
+  return request({
+    url:'/saas/middle/addFenceGroupAddCarMiddle',
+    method:'post',
+    params:{carId},
+    data:fenceGroup
+  })
+}
+/* 查询绑定的围栏组 */
+export function  selectBoundGFenceGroup(carId){
+  return request({
+    url:'/saas/middle/selectBoundGFenceGroup',
+    method:'get',
+    params:{carId},
+
+  })
+
+
+}

src/api/manage/fenceAPI.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request'
+
+export function geofenceList(){
+
+}

src/api/platform/logs.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询预警日志列表
+export function listLogs(query) {
+  return request({
+    url: '/warn/logs/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预警日志详细
+export function getLogs(id) {
+  return request({
+    url: '/warn/logs/' + id,
+    method: 'get'
+  })
+}
+
+// 新增预警日志
+export function addLogs(data) {
+  return request({
+    url: '/warn/logs',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改预警日志
+export function updateLogs(data) {
+  return request({
+    url: '/warn/logs',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除预警日志
+export function delLogs(id) {
+  return request({
+    url: '/warn/logs/' + id,
+    method: 'delete'
+  })
+}

src/api/platform/rule.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询预警规则列表
+export function listRule(query) {
+  return request({
+    url: '/warn/rule/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预警规则详细
+export function getRule(id) {
+  return request({
+    url: '/warn/rule/' + id,
+    method: 'get'
+  })
+}
+
+// 新增预警规则
+export function addRule(data) {
+  return request({
+    url: '/warn/rule',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改预警规则
+export function updateRule(data) {
+  return request({
+    url: '/warn/rule',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除预警规则
+export function delRule(id) {
+  return request({
+    url: '/warn/rule/' + id,
+    method: 'delete'
+  })
+}

src/api/platform/strategy.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+//  //根据车辆类型
+// export function findBySysTypeId(id) {
+//   return request({
+//     url: 'car/sysType/findBySysTypeId/' + id,
+//     method: "POST"
+//   })
+// }
+
+// 查询预警策略列表
+export function listStrategy(query) {
+  return request({
+    url: '/warn/strategy/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预警策略详细
+export function getStrategy(id) {
+  return request({
+    url: '/warn/strategy/' + id,
+    method: 'get'
+  })
+}
+
+// 新增预警策略
+export function addStrategy(data) {
+  return request({
+    url: '/warn/strategy',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改预警策略
+export function updateStrategy(data) {
+  return request({
+    url: '/warn/strategy',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除预警策略
+export function delStrategy(id) {
+  return request({
+    url: '/warn/strategy/' + id,
+    method: 'delete'
+  })
+
+
+
+
+
+
+
+
+}

src/router/index.js

@@ -119,6 +119,21 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/carFence',
+    component: Layout,
+    hidden: true,
+    permissions: ['carFence:fence:index'],
+    children: [
+      {
+        path: 'fence-MapContainer/:Id(\\d+)',
+        // path: 'fence-MapContainer',
+        component: () => import('@/views/carFence/fence/MapContainer'),
+        name: 'MapContainer',
+        meta: {title: '地图', activeMenu: '/carFence/fence'}
+      }
+    ]
+  },
   {
     path: '/system/dict-data',
     component: Layout,

src/views/car/car/index.vue

@@ -0,0 +1,539 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="82px">
+      <el-form-item label="车辆VIN码" prop="carVin">
+        <el-input
+          v-model="queryParams.carVin"
+          placeholder="请输入车辆VIN码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆车牌号" prop="carPlate">
+        <el-input
+          v-model="queryParams.carPlate"
+          placeholder="请输入车辆车牌号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="启用状态" prop="state">
+        <el-input
+          v-model="queryParams.state"
+          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="['car:car: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="['car:car: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="['car:car: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="['car:car:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="carList" @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="carVin" />
+      <el-table-column label="车辆车牌号" align="center" prop="carPlate" />
+      <el-table-column label="车辆品牌" align="center" prop="carBrand" />
+      <el-table-column label="车辆型号" align="center" prop="carModel" />
+      <el-table-column label="车辆车型" align="center" prop="carType" />
+      <el-table-column label="围栏组编码" align="center" prop="groupCode" >
+
+      </el-table-column>
+      <el-table-column label="启用状态" align="center" prop="state" />
+      <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="['car:car:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['car:car:remove']"
+          >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-s-order"
+            @click="handleAddStrategy(scope.row)"
+          >详细信息</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="addFenceGroupAddCarMiddle(scope.row.id)"
+          >添加围栏组</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="selectBoundGFenceGroup(scope.row.id)">
+            查询绑定的围栏组
+          </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="650px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="82px">
+        <el-form-item label="车辆VIN码" prop="carVin">
+          <el-input v-model="form.carVin" placeholder="请输入车辆VIN码" />
+        </el-form-item>
+        <el-form-item label="车辆车牌号" prop="carPlate">
+          <el-input v-model="form.carPlate" placeholder="请输入车辆车牌号" />
+        </el-form-item>
+        <el-form-item label="车辆品牌" prop="carBrand">
+          <el-input v-model="form.carBrand" placeholder="请输入车辆品牌" />
+        </el-form-item>
+        <el-form-item label="车辆型号" prop="carModel">
+          <el-input v-model="form.carModel" placeholder="请输入车辆型号" />
+        </el-form-item>
+        <el-form-item label="车辆车型" prop="carType">
+          <el-input v-model="form.carType" placeholder="请输入车辆车型" />
+        </el-form-item>
+        <el-form-item label="围栏组编码" prop="groupCode">
+          <el-input v-model="form.groupCode" placeholder="请输入围栏组编码" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="state">
+          <el-input v-model="form.state" placeholder="请输入启用状态" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" 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>
+
+    <!-- 添加预警策略对话框 -->
+    <el-dialog :title="title" :visible.sync="beginOpen" width="500px" append-to-body>
+      <el-form ref="formList" :model="formList" :rules="rules" label-width="80px">
+          <el-form-item label="车辆类型id" prop="carTypeId">
+            <el-input v-model="formList.carTypeId" placeholder="请输入车辆类型id" />
+          </el-form-item>
+         <el-form-item label="策略名称" prop="strategyName">
+           <el-input v-model="formList.strategyName" placeholder="请输入策略名称" />
+         </el-form-item>
+        <el-form-item label="报文模版id" prop="msgId">
+<!--          <el-input v-model="formList.msgId" placeholder="请输入报文模版id" />-->
+          <el-select v-model="formList.msgId" placeholder="请选择报文模版id">
+            <el-option
+              v-for="item in templateList"
+              :key="item.messageTemplateId"
+              :label="item.messageTemplateName"
+              :value="item.messageTemplateId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 围栏组的添加  -->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose">
+      <template>
+        <el-table ref="multipleTable"
+                  :data="fenceGroup"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  @selection-change="handleSelectionChanges">
+
+          <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.groupId }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="名称" width="180">
+            <template slot-scope="scope" >
+              <span style="margin-left: 10px">{{ scope.row.groupName }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="180">
+            <template slot-scope="scope">
+              <el-switch
+                v-if="scope.row.groupStates ==0"
+                v-model="groupStates"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+              <el-switch
+                v-if="scope.row.groupStates ==1"
+                v-model="groupStatestwo"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+
+            </template>
+          </el-table-column>
+
+
+        </el-table>
+      </template>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="AddFenceGroupAddCar">确 定</el-button>
+      </span>
+        </el-dialog>
+
+    <!-- 查询绑定的围栏组 -->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisibleBound"
+      width="30%"
+      :before-close="handleClose">
+      <el-table :data="boundGFenceGroup" style="width: 100%">
+        <el-table-column label="id" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupId }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="名称" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupName }}</span>
+          </template>
+        </el-table-column>
+
+      </el-table>
+
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisibleBound = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisibleBound = false">确 定</el-button>
+  </span>
+    </el-dialog>
+
+
+  </div>
+</template>
+
+<script>
+import {listCar, getCar, delCar, addCar, updateCar} from "/src/api/car/car";
+import {templateList} from "@/api/car/message/template";
+import {addStrategy} from "@/api/platform/strategy";
+import {
+  addFenceGroup,
+  AddFenceGroupAddCar,
+  addFenceGroupAddCarMiddle,
+  group,
+  selectBoundGFenceGroup
+} from '@/api/electronic'
+
+export default {
+  name: "Car",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 车辆基础信息表格数据
+      carList: [],
+      templateList:[],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      beginOpen:false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        carVin: null,
+        carPlate: null,
+        carBrand: null,
+        carModel: null,
+        carType: null,
+        state: null,
+      },
+      // 表单参数
+      form: {},
+      formList:{},
+      // 表单校验
+      rules: {
+      },
+      /* 多选围栏组 */
+      multipleSelections: [],
+      //围栏组
+      fenceGroup:[],
+      //开关
+      groupStatestwo:false,
+      groupStates:true,
+      //围栏组列表
+      dialogVisible:false,
+      //车辆id
+      carid:'',
+      //绑定的围栏组
+      boundGFenceGroup:[],
+      //绑定的围栏组对话框
+      dialogVisibleBound:false,
+    };
+  },
+  created() {
+    this.getList();
+    this.group()
+  },
+  methods: {
+
+    /** 查询车辆基础信息列表 */
+    getList() {
+      this.loading = true;
+      listCar(this.queryParams).then(response => {
+        console.log(response)
+        this.carList = response.data.rows
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        carVin: null,
+        carPlate: null,
+        carBrand: null,
+        carModel: null,
+        carType: null,
+        groupCode: null,
+        state: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    //初始化
+    init() {
+      this.formList= {
+        carTypeId: null,
+        strategyName: null,
+        msgId: null
+      };
+
+    },
+    /** 搜索按钮操作 */
+    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 = "添加车辆基础信息";
+    },
+    /** 添加策略信息按钮 **/
+    handleAddStrategy(row) {
+      this.init();
+      const id = row.id || this.ids
+      getCar(id).then(response => {
+        this.formList.carTypeId = response.data.id;
+        this.beginOpen = true;
+        this.title ="添加策略信息";
+      });
+      templateList().then(response => {
+        this.templateList = response.data;
+        console.log(this.templateList);
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getCar(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) {
+            updateCar(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addCar(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 添加策略信息**/
+    submitAddForm(){
+      addStrategy(this.formList).then(response => {
+        this.$modal.msgSuccess("添加策略信息成功");
+        this.beginOpen = false;
+        this.getList();
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除车辆基础信息编号为"' + ids + '"的数据项？').then(function() {
+        return delCar(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('car/car/export', {
+        ...this.queryParams
+      }, `car_${new Date().getTime()}.xlsx`)
+    },
+    /* 多选框 选择围栏组数据 */
+    handleSelectionChanges(val) {
+      this.multipleSelections = val;
+    },
+    //围栏组列表
+    group(){
+      group().then(res=>{
+        console.log(res)
+        this.fenceGroup = res.data
+      })
+    },
+    /* 打开围栏组和车辆中间表对话框  */
+    addFenceGroupAddCarMiddle(id){
+      this.dialogVisible = true
+      this.carid = id
+
+    },
+    /* 添加围栏组和车辆中间表 */
+    AddFenceGroupAddCar(){
+      AddFenceGroupAddCar(this.carid,this.multipleSelections).then(res=>{
+          if (200 == res.code){
+            this.$message.success("成功")
+            this.dialogVisible = false
+          }
+      })
+    },
+    /* 查询绑定的围栏组 */
+    selectBoundGFenceGroup(ids){
+      this.dialogVisibleBound = true
+      selectBoundGFenceGroup(ids).then(res=>{
+        console.log(res)
+        this.boundGFenceGroup = res.data
+      })
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+
+
+  }
+};
+</script>

src/views/car/message/index.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="app-container">
+    <el-container>
+      <el-aside width="400px">
+        <el-button @click="handleAddTemplate">添加模版报文</el-button>
+        <el-empty description="暂无报文模版" v-if="templateList.length == 0"></el-empty>
+        <el-col :span="24" v-for="template in templateList" v-if="templateList.length != 0">
+          <el-card class="box-card" style="margin-top: 20px">
+            <div slot="header" class="text">
+              <span>{{ template.messageTemplateName }}</span>
+              <el-button style="float: right" type="text" @click="handleArrange(template.messageTemplateId)">模版配置
+              </el-button>
+            </div>
+            <div class="text">
+              <span>{{ template.messageTemplateDescribe }}</span>
+            </div>
+          </el-card>
+        </el-col>
+      </el-aside>
+      <el-container v-if="this.queryParam.messageTemplateId != 0">
+        <el-header>
+          <el-form :inline="true" ref="queryParams" :model="addParams" class="demo-form-inline">
+            <el-form-item label="报文类别" size="mini">
+              <el-select
+                v-model="addParams.messageType"
+                clearable
+                placeholder="报文类别"
+              >
+                <el-option
+                  v-for="dict in dict.type.car_message_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="编码" size="mini">
+              <el-input v-model="addParams.messageCode" placeholder="编码"></el-input>
+            </el-form-item>
+            <el-form-item label="标签" size="mini">
+              <el-input v-model="addParams.messageLabel" placeholder="标签"></el-input>
+            </el-form-item>
+            <el-form-item label="起始位" size="mini">
+              <el-input v-model="addParams.messageStartIndex" placeholder="起始位"></el-input>
+            </el-form-item>
+            <el-form-item label="终止位" size="mini">
+              <el-input v-model="addParams.messageEndIndex" placeholder="终止位"></el-input>
+            </el-form-item>
+            <el-form-item label="数据类型" size="mini">
+              <el-select
+                v-model="addParams.messageDataType"
+                clearable
+                placeholder="数据类型"
+              >
+                <el-option
+                  v-for="dict in dict.type.car_message_data_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="固定值" size="mini" v-if="this.addParams.messageDataType == 'fixed'">
+              <el-input v-model="addParams.fixedValue" placeholder="固定值"></el-input>
+            </el-form-item>
+            <el-form-item label="最小值" size="mini" v-if="this.addParams.messageDataType == 'range'">
+              <el-input v-model="addParams.minimumValue" placeholder="最小值"></el-input>
+            </el-form-item>
+            <el-form-item label="最大值" size="mini" v-if="this.addParams.messageDataType == 'range'">
+              <el-input v-model="addParams.maximumValue" placeholder="最大值"></el-input>
+            </el-form-item>
+            <el-form-item size="mini">
+              <el-button type="primary" @click="handleAddValue">添加</el-button>
+              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-header>
+        <el-main style="margin-top: 35px">
+          <el-tabs v-model="queryParam.messageType" @tab-click="handleClick">
+            <el-tab-pane label="基础" name="basics">
+              <el-table :data="valueList">
+                <el-table-column label="编码" prop="messageCode" align="center"/>
+                <el-table-column label="标签" prop="messageLabel" align="center"/>
+                <el-table-column label="起始位" prop="messageStartIndex" align="center"/>
+                <el-table-column label="终止位" prop="messageEndIndex" align="center"/>
+                <el-table-column align="center" label="数据类型" prop="messageDataType">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.car_message_data_type" :value="scope.row.messageDataType"/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="固定值" prop="fixedValue" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.fixedValue?scope.row.fixedValue:'-'}}
+                  </template>
+                </el-table-column>
+                <el-table-column label="最小值" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.minimumValue?scope.row.minimumValue:'-'}}
+                  </template>
+                </el-table-column>
+                <el-table-column label="最大值" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.maximumValue?scope.row.maximumValue:'-'}}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="数据" name="info">
+              <el-table :data="valueList">
+                <el-table-column label="编码" prop="messageCode" align="center"/>
+                <el-table-column label="标签" prop="messageLabel" align="center"/>
+                <el-table-column label="起始位" prop="messageStartIndex" align="center"/>
+                <el-table-column label="终止位" prop="messageEndIndex" align="center"/>
+                <el-table-column align="center" label="数据类型" prop="messageDataType">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.car_message_data_type" :value="scope.row.messageDataType"/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="固定值" prop="fixedValue" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.fixedValue?scope.row.fixedValue:'-'}}
+                  </template>
+                </el-table-column>
+                <el-table-column label="最小值" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.minimumValue?scope.row.minimumValue:'-'}}
+                  </template>
+                </el-table-column>
+                <el-table-column label="最大值" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.maximumValue?scope.row.maximumValue:'-'}}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="状态" name="status">
+              <el-table :data="valueList">
+                <el-table-column label="编码" prop="messageCode" align="center"/>
+                <el-table-column label="标签" prop="messageLabel" align="center"/>
+                <el-table-column label="起始位" prop="messageStartIndex" align="center"/>
+                <el-table-column label="终止位" prop="messageEndIndex" align="center"/>
+                <el-table-column label="数据类型" prop="messageDataType" align="center"/>
+                <el-table-column label="固定值" prop="fixedValue" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.fixedValue?scope.row.fixedValue:'-'}}
+                  </template>
+                </el-table-column>
+                <el-table-column label="最小值" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.minimumValue?scope.row.minimumValue:'-'}}
+                  </template>
+                </el-table-column>
+                <el-table-column label="最大值" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.maximumValue?scope.row.maximumValue:'-'}}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </el-main>
+      </el-container>
+    </el-container>
+
+    <el-dialog title="添加报文模版" :visible.sync="open" append-to-body>
+      <el-form :model="form">
+        <el-form-item label="模版名称">
+          <el-input v-model="form.messageTemplateName" placeholder="模版名称"></el-input>
+        </el-form-item>
+        <el-form-item label="模版描述">
+          <el-input v-model="form.messageTemplateDescribe" placeholder="模版描述"></el-input>
+        </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 {
+  templateList,
+  addTemplate,
+  valueList,
+  addValue
+} from "/src/api/car/message/template";
+
+export default {
+  name: "MessageTemplateValue",
+  dicts: ['car_message_type', 'car_message_data_type'],
+  data() {
+    return {
+      // 报文模版列表
+      templateList: [],
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+      // 报文数据列表参数
+      queryParam: {
+        // 报文模版外键
+        messageTemplateId: 0,
+        // 选项卡参数
+        messageType: '',
+      },
+      // 报文数据列表
+      valueList: [],
+      // 添加报文数据参数
+      addParams: {
+        templateId: 0,
+      },
+    };
+  },
+  created() {
+    // 获取报文模版列表
+    this.getTemplateList();
+  },
+  methods: {
+    /** 获取报文模版列表 */
+    getTemplateList() {
+      templateList().then(response => {
+        this.templateList = response.data;
+      })
+    },
+    /** 添加报文模版 */
+    handleAddTemplate() {
+      this.open = true
+    },
+    /** 提交按钮 */
+    submitForm() {
+      addTemplate(this.form).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.open = false;
+        this.getTemplateList();
+      })
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 模版配置 */
+    handleArrange(messageTemplateId) {
+      this.queryParam.messageTemplateId = messageTemplateId;
+      this.addParams.templateId = messageTemplateId;
+    },
+    /** 切换选项卡 */
+    handleClick() {
+      valueList(this.queryParam).then(response => {
+        this.valueList = response.data
+      })
+    },
+    /** 添加报文数据 */
+    handleAddValue(){
+      if (this.addParams.messageType == null){
+        this.$modal.msgError("请选择报文类别");
+      }else {
+        addValue(this.addParams).then(response => {
+          this.$modal.msgSuccess("添加成功");
+          valueList(this.queryParam).then(response => {
+            this.valueList = response.data
+          })
+        })
+      }
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.addParams = {
+        messageType: '',
+        messageCode: '',
+        messageLabel: '',
+        messageStartIndex: '',
+        messageEndIndex: '',
+        messageDataType: '',
+        fixedValue: '',
+        minimumValue: '',
+        maximumValue: ''
+      }
+    },
+  }
+};
+</script>
+<style>
+.el-header {
+  //background-color: #B3C0D1;
+  //color: #333;
+  text-align: center;
+}
+
+.el-aside {
+  //background-color: #D3DCE6;
+  //color: #333;
+}
+
+.el-main {
+  //background-color: #E9EEF3;
+  //color: #333;
+  text-align: center;
+}
+
+.text {
+  line-height: 30px;
+}
+
+.box-card {
+  width: 350px;
+  margin-top: 15px;
+}
+
+</style>

src/views/carFence/fence/MapContainer.vue

@@ -0,0 +1,397 @@
+<template>
+  <!-- 控制按钮组 -->
+  <div class="main">
+
+    <section class="section">
+      {{this.paths}}
+      <!-- 地图 -->
+      <div id="map_container" style="width: 100%; height: 100vh;"></div>
+
+      <!-- 控制按钮组 -->
+      <div class="ebox">
+        <el-button-group>
+          <el-button v-if="this.testId==0" type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
+          <el-button v-if="this.testId!=0" type="primary" icon="el-icon-edit" @click="editRectangle">编辑围栏</el-button>
+          <el-button type="warning" icon="el-icon-delete" @click="cancelRectangle">取消编辑</el-button>
+          <el-button type="success" icon="el-icon-success" @click="saveRectangle">保存围栏</el-button>
+          <el-button type="danger" icon="el-icon-delete" @click="deleRectangle">删除围栏</el-button>
+        </el-button-group>
+      </div>
+    </section>
+      <!-- Form -->
+
+      <el-dialog title="新增围栏" :visible.sync="dialogFormVisible">
+        <el-form :model="carFence">
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="carFence.name" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏类型" :label-width="formLabelWidth">
+            <el-select v-model="carFence.clazzId" placeholder="请选择">
+              <el-option
+                v-for="item in type"
+                :key="item.clazzId"
+                :label="item.clazzName"
+                :value="item.clazzId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="围栏类型" :label-width="formLabelWidth">
+            <el-select v-model="carFence.typeId" placeholder="请选择">
+              <el-option
+                v-for="item in clazz"
+                :key="item.typeId"
+                :label="item.typeName"
+                :value="item.typeId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="围栏经纬度" :label-width="formLabelWidth">
+            <el-input v-model="carFence.fenceText" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏开始时间" :label-width="formLabelWidth">
+
+            <div class="block">
+              <el-date-picker
+                v-model="carFence.fenceStart"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择日期时间">
+              </el-date-picker>
+            </div>
+          </el-form-item>
+
+          <el-form-item label="围栏结束时间" :label-width="formLabelWidth">
+
+            <div class="block">
+              <el-date-picker
+                v-model="carFence.fenceEnd"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择日期时间">
+              </el-date-picker>
+            </div>
+          </el-form-item>
+
+          <el-form-item label="创建时间" :label-width="formLabelWidth">
+
+            <div class="block">
+              <el-date-picker
+                v-model="carFence.fenceCreate"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择日期时间">
+              </el-date-picker>
+            </div>
+          </el-form-item>
+
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addCarFence">确 定</el-button>
+        </div>
+      </el-dialog>
+  </div>
+
+
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { geofenceList } from '@/api/manage/fenceAPI.js'
+import { addCarFence, clazzList, typeList, group, addMiddle } from '@/api/electronic' //获取围栏数据
+window._AMapSecurityConfig = {
+  securityJsCode: "4f3846d5cf6d8f35fbddff03827111c5",
+};
+
+export default {
+  name: "MapContainer",
+  data() {
+    return {
+      multipleSelection: [],
+      form:{},
+      fenceGroup:[],
+      type:[],
+      clazz:[],
+      carFence:{
+        fenceText:'',
+      },
+      carFences:[],
+      formData: {
+        testId:0,
+        carId: '',
+        pageNum: 1,//当前页
+        pageSize: 10,//页长
+        pageTotal: 0,//总数
+      },
+
+      map: null,
+      centerArr: [113.760234, 23.048884],//地图中心位置，不能为空数组【为空数组会报错】
+      path: [],//以前绘制的数据
+      paths: [], // 当前绘制的多边形经纬度数组
+      test: [], // 当前绘制的多边形经纬度数组
+      polygonItem: [], // 地图上绘制的所有多边形对象
+      polyEditors: [],// 新增数据=>所有编辑对象数组
+      polyEditorsBefore: [],// 以前历史数据=>进入编辑对象数组
+      dialogFormVisible: false,
+      formLabelWidth:'120px',
+    };
+  },
+  mounted() {
+    this.initAMap();
+    this.init();
+
+  },
+  created(){
+
+      this.testId = this.$route.params.Id;
+      this.clazzList()
+      this.typeList()
+      this.group();
+    // console.log(this.testId)
+  },
+  methods: {
+    //禁用
+    forbidden(){
+
+    },
+    //围栏组列表
+    group(){
+      group().then(res=>{
+        // console.log(res)
+        this.fenceGroup = res.data
+      })
+    },
+    clazzList(){
+      clazzList().then(res=>{
+        this.type = res.data
+      })
+    },
+    typeList(){
+      typeList().then(res=>{
+        this.clazz = res.data
+      })
+    },
+    initAMap() {
+      AMapLoader.load({
+        key: "d617205580ad1f43884deefb6ea53eb2",
+        version: "2.0",
+        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
+          'AMap.MapType', 'AMap.MouseTool', 'AMap.Polygon', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+      }).then((AMap) => {
+        this.map = new AMap.Map("map_container", {
+          resizeEnable: true,
+          viewMode: '3D', // 注意这里的引号
+          zoom: 17,
+          // 移除 pitch 属性，如果不需要特殊倾斜角度
+          // pitch: 55,
+          showBuildingBlock: true, // 注意这个属性可能在某些版本中不起作用
+        });
+        // 添加工具栏
+        this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
+          const toolbar = new AMap.ToolBar()// 工具条
+          const scale = new AMap.Scale()// 比例尺
+          this.map.addControl(toolbar)
+          this.map.addControl(scale)
+        })
+      }).catch((e) => {
+        console.error('地图加载失败:', e);
+      });
+    },
+    // 绘制多边形
+    drawRectangle() {
+      const This = this;
+      let mouseTool = new AMap.MouseTool(this.map);
+      const polygon = mouseTool.polygon({
+        //polygon：绘制多边形【线段：polyline;矩形：rectangle;圆：circle】
+        strokeColor: 'red',
+        strokeOpacity: 0.4,
+        strokeWeight: 6,
+        fillColor: '#1791fc',
+        fillOpacity: 0.2,
+        // strokeStyle还支持 solid
+        strokeStyle: 'solid',
+        // strokeDasharray: [30,10],
+      });
+      mouseTool.on('draw', function (event) {
+        // event.obj 为绘制出来的覆盖物对象
+        let polygonItem = event.obj;
+        let paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
+        // console.log('覆盖物对象绘制完成各个点的坐标', paths, event);
+
+        let path = [];  // 编辑的路径
+        paths.forEach(v => {
+          path.push([v.lng, v.lat])
+        });
+        This.paths = path
+        // this.paths = path.toString() //将新增数据放入paths数组里
+        // This.editRectangle();//绘制完成,默认进入编辑状态
+        This.polygonItem.push(event.obj);
+        //  console.log(9999,this.paths)
+        // sessionStorage.setItem("paths","")
+        // sessionStorage.setItem("paths",path.toString());
+
+        // This.map.remove(event.obj); // 删除多边形
+        // console.log(polygon, '------polygon-----');
+        console.log(paths);//控制台打印坐标
+      });
+    },
+    // 编辑围栏
+    editRectangle() {
+      console.log(2,this.paths)
+      const path = this.paths;
+      //新增的进入编辑状态
+      let polygon = new AMap.Polygon({
+        path: path,
+        strokeColor: "#FF33FF",
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.2,
+        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);
+
+      //历史围栏的进入编辑状态
+      let polygonBefore = new AMap.Polygon({
+        path: this.path,
+        strokeColor: "#FF33FF",
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.2,
+        fillColor: '#1791fc',
+        zIndex: 50,
+      });
+      this.map.add(polygonBefore);
+      this.polygonItem.push(polygonBefore);
+      // 缩放地图到合适的视野级别
+      this.map.setFitView([polygonBefore]);
+
+      this.polyEditorBefore = new AMap.PolyEditor(this.map, polygonBefore);
+      this.polyEditorBefore.open();
+      this.polyEditorsBefore.push(this.polyEditorBefore);
+      console.log(this.polyEditorBefore)
+
+      // 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('end修改后的经纬度：', polygon.getPath())
+      //     // event.target 即为编辑后的多边形对象
+      // });
+    },
+    // 取消编辑状态
+    cancelRectangle() {
+      this.polyEditors.forEach(item => { item.close(); });//新增
+      this.polyEditorsBefore.forEach(item => { item.close(); });//历史
+    },
+    //添加围栏
+    addCarFence(){
+      addCarFence(this.carFence).then(res=>{
+        // console.log(this.carFence)
+        this.$modal.msgSuccess("成功");
+        this.dialogFormVisible = false
+      })
+
+    },
+    //保存围栏
+    saveRectangle() {
+
+      // let item1 = sessionStorage.getItem("paths")
+      // console.log(9,paths)
+      this.carFence.fenceCreate = new Date().toLocaleString()
+      var s = JSON.stringify(this.paths)
+      this.carFence.fenceText=s
+      console.log(this.carFence.fenceText)
+      // 取消编辑状态
+      this.polyEditors.forEach(item => { item.close(); });
+      this.polyEditorsBefore.forEach(item => { item.close(); });
+      this.dialogFormVisible = true
+      // 保存  console.log(this.paths,this.path)=>成功（重新刷新页面）
+    // ...
+    },
+    // 删除围栏
+    deleRectangle() {
+      this.polyEditors.forEach(item => { item.close(); });// 取消编辑状态
+      this.polyEditorsBefore.forEach(item => { item.close(); });// 取消编辑状态
+      this.map.clearMap(); // 删除地图所有覆盖物
+      //删除=>成功（重新刷新页面）
+    // ...
+    },
+    //获取后台数据
+    init() {
+      const that = this
+      let param = {
+        carId: this.formData.carId,//string true carID
+        pageNum: this.formData.pageNum,//string false 当前页数
+        pageSize: this.formData.pageSize,//string false 每页条数
+      }
+      geofenceList({ param }).then(res => {
+        if (res.data.code == 0) {
+          if (res.data.data.list.length==0) {
+            this.$message.error('没有围栏数据')
+            return
+          }
+          that.path=[]
+          that.map.clearMap(); // 删除地图所有覆盖物
+          res.data.data.list.forEach((item, index) => { //同时展示多个围栏
+            that.path.push(item.points)//编辑时，可以一起编辑
+            // this.centerArr = that.path[0]
+            // this.initMap()
+
+            that.map.add(new AMap.Polygon({
+              path: item.points,
+              strokeColor: "#FF33FF",
+              strokeWeight: 6,
+              strokeOpacity: 0.2,
+              fillOpacity: 0.4,
+              fillColor: "#1791fc",
+              zIndex: 50,
+            }));
+            that.map.setFitView();
+          })
+        } else {
+          this.$message.error(res.data.msg)
+        }
+      })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#map_container {
+  width: 100%;
+  height: 100vh;
+}
+.ebox {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1000; /* 确保按钮在地图之上 */
+}
+</style>

src/views/carFence/fence/fenceGroups.vue

@@ -0,0 +1,366 @@
+<template>
+  <div>
+    <template>
+      <el-form ref="form" :model="form" label-width="80px">
+<!--        <el-form-item label="活动名称">-->
+<!--          <el-input v-model="form.name"></el-input>-->
+<!--        </el-form-item>-->
+      </el-form>
+
+      <el-button type="primary" @click="toAddFenceGroup">添加围栏组</el-button>
+
+      <!--围栏组列表-->
+      <el-table :data="fenceGroup" tooltip-effect="dark" style="width: 100%">
+
+
+        <el-table-column label="id" width="180" >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupId }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="名称" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="180">
+          <template slot-scope="scope">
+            <el-switch
+              v-if="scope.row.groupStates ==0"
+              v-model="groupStates"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+              v-if="scope.row.groupStates ==1"
+              v-model="groupStatestwo"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
+
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="updateFenceGroupById(scope.row.groupId)" v-if="scope.row.groupStates ==0">禁用</el-button>
+            <el-button size="mini" @click="activate(scope.row.groupId)" v-if="scope.row.groupStates ==1">启动</el-button>
+            <el-button size="mini" @click="addGroup(scope.row.groupId)" v-if="scope.row.groupStates ==0">添加围栏</el-button>
+            <el-button size="mini" @click="BoundFence(scope.row.groupId)" v-if="scope.row.groupStates ==0">查看绑定的围栏</el-button>
+          </template>
+        </el-table-column>
+
+      </el-table>
+    </template>
+<!--多对多的添加-->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="85%"
+      :before-close="handleClose">
+
+      <template>
+        <el-table
+          ref="multipleTable"
+          :data="carFence"
+          tooltip-effect="dark"
+          :style="{width: tableWidth}" @selection-change="handleSelectionChange">
+
+          <el-table-column
+            type="selection"
+            width="55">
+          </el-table-column>
+
+          <el-table-column
+            label="围栏主键">
+            <template slot-scope="scope">{{ scope.row.id }}</template>
+          </el-table-column>
+          <el-table-column
+            label="围栏名称">
+            <template slot-scope="scope">{{ scope.row.name }}</template>
+          </el-table-column>
+          <el-table-column
+            label="业务类型">
+            <template slot-scope="scope">{{ scope.row.clazzName }}</template>
+          </el-table-column>
+          <el-table-column
+            label="围栏类型">
+            <template slot-scope="scope">{{ scope.row.typeName }}</template>
+          </el-table-column>
+          <el-table-column
+            label="围栏开始时间">
+            <template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
+          </el-table-column>
+          <el-table-column
+            label="围栏结束时间">
+            <template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
+          </el-table-column>
+          <el-table-column
+            label="创建时间">
+            <template slot-scope="scope">{{ scope.row.fenceStart }}</template>
+          </el-table-column>
+
+        </el-table>
+      </template>
+
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="addMiddls">确 定</el-button>
+  </span>
+    </el-dialog>
+
+<!--//围栏组添加-->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisibles"
+      width="85%"
+      :before-close="handleClose">
+
+      <el-form ref="form" :model="fenceGroupAdd" label-width="100px">
+        <el-form-item label="围栏组名称">
+          <el-input v-model="fenceGroupAdd.groupName"></el-input>
+        </el-form-item>
+
+        <el-form-item label="围栏组状态">
+          <el-switch
+            v-model="fenceGroupAdd.groupStates"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+        </el-form-item>
+
+
+
+
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisibles = false">取 消</el-button>
+    <el-button type="primary" @click="doAddFenceGroup">确 定</el-button>
+  </span>
+    </el-dialog>
+
+<!--已经绑定的围栏-->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisibless"
+      width="85%"
+      :before-close="handleClose">
+        <template>
+          <el-table
+            ref="multipleTable"
+            :data="carFences"
+            tooltip-effect="dark"
+            :style="{width: tableWidth}">
+
+            <el-table-column
+              label="围栏主键">
+              <template slot-scope="scope">{{ scope.row.id }}</template>
+            </el-table-column>
+
+            <el-table-column
+              label="围栏名称">
+              <template slot-scope="scope">{{ scope.row.name }}</template>
+            </el-table-column>
+
+            <el-table-column
+              label="业务类型">
+              <template slot-scope="scope">{{ scope.row.clazzName }}</template>
+            </el-table-column>
+
+            <el-table-column
+              label="围栏类型">
+              <template slot-scope="scope">{{ scope.row.typeName }}</template>
+            </el-table-column>
+
+            <el-table-column
+              label="围栏开始时间">
+              <template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
+            </el-table-column>
+
+            <el-table-column
+              label="围栏结束时间">
+              <template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
+            </el-table-column>
+
+            <el-table-column
+              label="创建时间">
+              <template slot-scope="scope">{{ scope.row.fenceStart }}</template>
+            </el-table-column>
+          </el-table>
+        </template>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibless = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisibless = false">确 定</el-button>
+      </span>
+    </el-dialog>
+
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {
+  activate,
+  addFenceGroup,
+  addFenceGroupMidddle, BoundFenceGroup,
+  group,
+  selectCarFenceList,
+  updateFenceGroupById
+} from '@/api/electronic'
+import log from '@/views/monitor/job/log.vue'
+
+export default {
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        //绑定的围栏列表
+        carFences:[],
+
+        groupStates:true,
+        groupStatestwo:false,
+        fenceGroupAdd:{
+          groupStates:true
+        },
+        fenceGroup:[],
+        dialogVisible: false,
+        dialogVisibles: false,
+        dialogVisibless: false,
+        carFence:[],
+        form:{},
+        multipleSelection: [],
+        fenceGroupId:'',
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      //根据围栏组的id查询绑定的围栏的中间表 并 获取围栏组绑定的围栏列表
+      BoundFence(groupId){
+        this.dialogVisibless = true
+        BoundFenceGroup(groupId).then(res=>{
+
+          this.carFences=res.data
+        })
+      },
+      //启动围栏状态
+      activate(groupId){
+        activate(groupId).then(res=>{
+          if (200 == res.code){
+            this.$message.success("成功")
+            this.group()
+          }
+        })
+      },
+      //修改围栏状态
+      updateFenceGroupById(groupId){
+        updateFenceGroupById(groupId).then(res=>{
+          if (200 == res.code){
+            this.$message.success("成功")
+            this.group()
+          }
+        })
+      },
+      //多对多添加
+      addMiddls(){
+          addFenceGroupMidddle(this.fenceGroupId,this.multipleSelection).then(res=>{
+            this.$modal.msgSuccess("成功");
+            this.dialogVisible = false
+            this.selectCarFenceList();
+          })
+      },
+      //添加围栏组
+      doAddFenceGroup(){
+        if (this.fenceGroupAdd.groupStates = true){
+          this.fenceGroupAdd.groupStates = 0
+        }else {
+          this.fenceGroupAdd.groupStates = 1
+        }
+        // console.log(this.fenceGroupAdd.groupStates)
+        addFenceGroup(this.fenceGroupAdd).then(res=>{
+          if (200 == res.code ){
+            this.$message.success("成功");
+            this.dialogVisibles=false
+            this.group()
+          }
+        })
+      },
+      //开启围栏组添加对话框
+      toAddFenceGroup(){
+       this.dialogVisibles=true
+
+      },
+      //获取围栏组的id
+      addGroup(id){
+        this.multipleSelection = []
+        this.fenceGroupId = id
+        this.dialogVisible = true
+      },
+      //获取围栏的Id值 多对多
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+
+      },
+      //围栏组列表
+      group(){
+        group().then(res=>{
+          // console.log(res)
+          this.fenceGroup = res.data
+        })
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      //围栏列表
+      selectCarFenceList(){
+        selectCarFenceList(this.form).then(res=>{
+          this.carFence=res.data.records
+        })
+      },
+
+
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.group()
+      this.selectCarFenceList();
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>

src/views/carFence/fence/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="活动名称">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <router-link :to="'/carFence/fence-MapContainer/'+0" class="link-type">
+      <span>添加围栏</span>
+    </router-link>
+
+    <template>
+      <el-table
+        ref="multipleTable"
+        :data="carFence"
+        tooltip-effect="dark"
+        :style="{width: tableWidth}">
+        <el-table-column>
+<!--          <el-button @click="show = !show">Click Me</el-button>-->
+<!--          <div style="display: flex; margin-top: 20px; height: 100px;">-->
+<!--            <transition name="el-fade-in-linear">-->
+<!--              <div v-show="show" class="transition-box">.el-fade-in-linear</div>-->
+<!--            </transition>-->
+<!--          </div>-->
+        </el-table-column>
+        <el-table-column
+          label="围栏主键">
+          <template slot-scope="scope">{{ scope.row.id }}</template>
+        </el-table-column>
+        <el-table-column
+          label="围栏名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+        <el-table-column
+          label="业务类型">
+          <template slot-scope="scope">{{ scope.row.clazzName }}</template>
+        </el-table-column>
+        <el-table-column
+          label="围栏类型">
+          <template slot-scope="scope">{{ scope.row.typeName }}</template>
+        </el-table-column>
+        <el-table-column
+          label="围栏开始时间">
+          <template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
+        </el-table-column>
+        <el-table-column
+          label="围栏结束时间">
+          <template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间">
+          <template slot-scope="scope">{{ scope.row.fenceStart }}</template>
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          label="中间ID"-->
+<!--          width="120">-->
+<!--          <template slot-scope="scope">{{ scope.row.date }}</template>-->
+<!--        </el-table-column>-->
+        <el-table-column
+          label="操作">
+          <template slot-scope="scope">
+<!--            <el-button v-hasPermi="['carFence:fence-MapContainer:MapContainer']"-->
+<!--            icon="el-icon-s-platform"-->
+<!--            size="mini"-->
+<!--            type="text">-->
+              <router-link :to="'/carFence/fence-MapContainer/'+scope.row.id" class="link-type">
+                <span>查看地图</span>
+              </router-link>
+            <el-button type="text" @click="addCarList(scope.row)">绑定车辆</el-button>
+<!--            </el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <!-- Form -->
+
+
+    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+      <el-form :model="carMiddle">
+
+        <el-form-item label="车辆名称" :label-width="formLabelWidth">
+<!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
+            <div v-for="car in carInformationIdAndLicensePlate" :key="car.id">
+              <input
+                type="checkbox"
+                :id="`checkbox-${car.id}`"
+                :value="car.id"
+                v-model="selectedCarIds"
+                @change="handleSelectionChange"
+              >
+              <label :for="`checkbox-${car.id}`">{{ car.name }}</label>
+            </div>
+            <!-- 显示选中的用户 -->
+            <div>{{ selectedCarIds }}</div>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="carAddList">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import { carAddList, selectCarFenceList, selectCarInformationIdAndLicensePlate } from '@/api/electronic'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      carMiddle:{},
+      carInformationIdAndLicensePlate:[],
+      // 用于存储选中的用户ID
+      selectedCarIds: [],
+      dialogFormVisible: false,
+      formLabelWidth: '120px',
+      show: true,
+      form:{},
+      carFence:[],
+      tableWidth: '100%',
+    }
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    carAddList,
+    handleSelectionChange(val) {
+      this.selectedCarIds = val;
+    },
+    selectCarFenceList(){
+      selectCarFenceList(this.form).then(res=>{
+        this.carFence=res.data.records
+      })
+    },
+    addCarList(row){
+      this.carMiddle.carFenceId = row.id
+      this.dialogFormVisible=true
+    },
+    carList(){
+      carAddList(this.carMiddle).then(res=>{
+        this.$modal.msgSuccess(res.msg);
+        this.dialogFormVisible=false
+      })
+    },
+    /* 调用车辆信息 */
+    selectCarInformationIdAndLicensePlate(){
+      selectCarInformationIdAndLicensePlate().then(res=>{
+        this.carInformationIdAndLicensePlate=res.data
+      })
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.selectCarFenceList();
+    // this.selectCarInformationIdAndLicensePlate();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+}
+</script>
+<style>
+.transition-box {
+  margin-bottom: 10px;
+  width: 200px;
+  height: 100px;
+  border-radius: 4px;
+  background-color: #409EFF;
+  text-align: center;
+  color: #fff;
+  padding: 40px 20px;
+  box-sizing: border-box;
+  margin-right: 20px;
+}
+</style>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://127.0.0.1:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''