fase()故障，电子围栏优化

src/api/goods/breakdown.js

@@ -1,11 +1,11 @@
 import request from '@/utils/request'
 
 // 查询测试信息列表
-export function listBreakdown(data) {
+export function listBreakdown(query) {
   return request({
     url: '/rule/breakdown/list',
     method: 'get',
-    data
+    params: query
   })
 }
 

src/api/goods/map.js

@@ -18,7 +18,7 @@ export function selectFence(data) {
   })
 }
 
-// 查询企业列表
+// 查询车辆绑定围栏组及下属围栏
 export function selectFenceGroupsById(carId) {
   return request({
     url: '/rule/map/selectFenceGroupsById/' + carId,
@@ -58,3 +58,13 @@ export function updateFence(fenceId) {
     method: 'post'
   })
 }
+
+export function dbx(data) {
+  return request({
+    url: 'https://tsapi.amap.com/v1/track/geofence/add/polygon',
+    method: 'post',
+    data
+  })
+}
+
+

src/views/client/car/index.vue

@@ -151,9 +151,10 @@
           >删除</el-button>
         </template>
       </el-table-column>
-      <el-table-column label="查看围栏">
+      <el-table-column label="查看服务">
         <span slot-scope="scope">
           <el-button type="text" @click="fence(scope.row.carId)">查看围栏</el-button>
+          <el-button type="text" @click="breakdown(scope.row.vin)">查看故障报警</el-button>
         </span>
       </el-table-column>
       <el-table-column label="查看实时坐标">
@@ -288,6 +289,9 @@ export default {
     fence(carId) {
       this.$router.push({path: '/client/sever/fence',query:{carId:carId}})
     },
+    breakdown(vin) {
+      this.$router.push({path: '/client/sever/breakdown',query:{vin:vin}})
+    },
     realTime(vin) {
       this.$router.push({path: '/client/sever/random',query:{vin:vin}})
 

src/views/client/sever/breakdown/index.vue

@@ -1,5 +1,34 @@
 <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="faultCode">
+        <el-input
+          v-model="queryParams.vin"
+          placeholder="请输入故障码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="故障产生时间" prop="faultStartTime">
+        <el-date-picker clearable
+                        v-model="queryParams.faultStartTime"
+                        type="date"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        placeholder="请开始时间区间">
+        </el-date-picker>-------------
+        <el-date-picker clearable
+                        v-model="queryParams.faultEndTime"
+                        type="date"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        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-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-date-picker
         v-model="formInline.faultStartTime"
@@ -44,11 +73,12 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-    <div id="main" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
+    <div class="container">
+      <div id="main" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
     align-items: center;justify-content: center"></div>
-    <div id="main2" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
+      <div id="main2" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
     align-items: center;justify-content: center"></div>
-
+    </div>
 
   </div>
 </template>
@@ -71,9 +101,13 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
+        vin: this.$route.query.vin,
+        faultStartTime: null,
+        faultEndTime: null
       },
       formInline: {
+        vin: this.$route.query.vin,
         faultStartTime: null,
         faultEndTime: null
       },
@@ -82,7 +116,6 @@ export default {
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNum = 1;
-        console.log(this.queryParams)
         this.getList();
       },
       /** 重置按钮操作 */
@@ -138,11 +171,6 @@ export default {
           this.c = res.data
       })
 
-      // setTimeout(() => {
-      //   this.par()
-      //   this.pie()
-      // },5000)
-
 
     },
     //柱状图
@@ -249,5 +277,18 @@ export default {
 }
 </script>
 <style scoped>
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+}
+
+.centered-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 如果需要间隔，可以添加 margin */
+  margin-right: 10px; /* 右侧间隔，最后一个元素可以设置为0或者使用margin-left在左侧元素上 */
+}
 
 </style>

src/views/client/sever/fence/index.vue

@@ -1,36 +1,37 @@
 <template>
   <div>
     <el-button type="text" @click="addGroups(dialogFormVisible = true)">增加围栏组</el-button>
-<!--    <el-table :data="fenceGroups">-->
+    <el-button type="text" @click="mapFence()">增加围栏</el-button>
-<!--      <el-table-column prop="groupsName" label="围栏组名称"></el-table-column>-->
+    <el-table :data="fenceGroups">
-<!--      <el-table-column prop="fenceName" label="围栏名称"></el-table-column>-->
+      <el-table-column prop="groupsName" label="围栏组名称"></el-table-column>
-<!--      <el-table-column prop="fenceType" label="围栏类型"></el-table-column>-->
+      <el-table-column prop="fenceName" label="围栏名称"></el-table-column>
-<!--      <el-table-column prop="eventType" label="驶入驶出">-->
+      <el-table-column prop="fenceType" label="围栏类型"></el-table-column>
-<!--        <span slot-scope="scope">-->
+      <el-table-column prop="eventType" label="驶入驶出">
-<!--          <span v-if="scope.row.eventType === 'Y'">驶入</span>-->
+        <span slot-scope="scope">
-<!--          <span v-if="scope.row.eventType === 'N'">驶出</span>-->
+          <span v-if="scope.row.eventType === 'Y'">驶入</span>
-<!--        </span>-->
+          <span v-if="scope.row.eventType === 'N'">驶出</span>
-<!--      </el-table-column>-->
+        </span>
-<!--      <el-table-column prop="staut" label="围栏状态">-->
+      </el-table-column>
-<!--        <span slot-scope="scope">-->
+      <el-table-column prop="staut" label="围栏状态">
-<!--          <span v-if="scope.row.staut === 'Y'">启用</span>-->
+        <span slot-scope="scope">
-<!--          <span v-if="scope.row.staut === 'N'">禁止</span>-->
+          <span v-if="scope.row.staut === 'Y'">启用</span>
-<!--        </span>-->
+          <span v-if="scope.row.staut === 'N'">禁止</span>
-<!--      </el-table-column>-->
+        </span>
-<!--      <el-table-column prop="polygonPoints" label="坐标"></el-table-column>-->
+      </el-table-column>
-<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
+      <el-table-column prop="polygonPoints" label="坐标"></el-table-column>
-<!--        <span slot-scope="scope">-->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-<!--          <span v-if="scope.row.staut === 'Y'">-->
+        <span slot-scope="scope">
-<!--            <el-button type="text" icon="el-icon-edit" @click="query(scope.row.fenceId)">禁止</el-button>-->
+          <span v-if="scope.row.staut === 'Y'">
-<!--          </span>-->
+            <el-button type="text" icon="el-icon-edit" @click="query(scope.row.fenceId)">禁止</el-button>
-<!--          <span v-if="scope.row.staut === 'N'">-->
+          </span>
-<!--            <el-button type="text" icon="el-icon-edit" @click="query(scope.row.fenceId)">启用</el-button>-->
+          <span v-if="scope.row.staut === 'N'">
-<!--          </span>-->
+            <el-button type="text" icon="el-icon-edit" @click="query(scope.row.fenceId)">启用</el-button>
-<!--          <br>-->
+          </span>
-<!--          <el-button size="mini" icon="el-icon-delete" type="text" @click="del(scope.row.fenceId)">删除</el-button>-->
+          <br>
-<!--        </span>-->
+          <el-button size="mini" icon="el-icon-delete" type="text" @click="del(scope.row.fenceId)">删除</el-button>
-<!--      </el-table-column>-->
+        </span>
-<!--    </el-table>-->
+      </el-table-column>
+    </el-table>
 
     <el-dialog title="新增围栏组" :visible.sync="dialogFormVisible">
       <el-form :model="groups">
@@ -78,7 +79,7 @@ export default {
       selectFenceGroupsById(this.carId).then(res => {
         this.fenceGroups = res.data
         console.log(1)
-        console.log(res.data)
+        console.log(this.fenceGroups)
       })
     },
     //删除
@@ -100,6 +101,10 @@ export default {
         this.$message.success(res.data)
         this.getInfo()
       })
+    },
+    //围栏
+    mapFence() {
+      this.$router.push({path: '/client/sever/map'})
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）",

src/views/client/sever/map/MapContainer.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { getSel } from "@/api/goods/map";
+import { getSel, dbx } from "@/api/goods/map";
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 export default {
@@ -21,7 +21,7 @@ export default {
   data() {
     // 这里存放数据"
     return {
-      groupsId: this.$route.query.groupsId,
+      // groupsId: this.$route.query.groupsId,
       path: [], //当前绘制多边形经纬度数组
       polygonItem: [], // 地图上绘制所有的多边形对象
       polyEditors: [], //所有编辑对象的数组
@@ -38,9 +38,10 @@ export default {
   methods: {
     sel() {// 获取坐标传输给电子围栏
       this.pences.list = this.polygonItem[0].w.path;
-      getSel(this.pences).then(res => {
+      getSel(this.pences.list).then(res => {
-        console.log(res.data)
+        console.log(res)
       })
+      console.log(this.pences.list)
     },
     // 地图初始化
     intAmap (callBack) {
@@ -120,7 +121,6 @@ export default {
         strokeStyle: 'solid',
         // strokeDasharray: [30,10],
       });
-
       this.mouseTool.on('draw', function (event) {
         // event.obj 为绘制出来的覆盖物对象
         var polygonItem = event.obj;
@@ -134,7 +134,7 @@ export default {
         vm.editRectangle(vm.path);
         vm.polygonItem.push(event.obj);
         vm.map.remove(event.obj); // 删除多边形
-        console.log(polygon, '------polygon-----');
+        console.log("覆盖物对象绘制完成的坐标点",event.obj.getPath())
       });
     },
     // 批量删除多边形