电子区域和电子围栏、坐标转换联调完成，编辑提示name重复，区域无法删除已反馈电信

src/api/rails/rails.js

@@ -52,7 +52,19 @@ export const railsAdd = (token, data) => {
 //围栏编辑
 export const railsUpdate = (token, data) => {
   return request({
-    url: baseUrl + '/api/electronicFencePlatform/editRail',
+    url: baseUrl + '/api/electronicFencePlatform/editRail/' + data.id,
+    method: 'put',
+    headers: {
+      Authorization: token
+    },
+    data: data,
+    authorization: false
+  })
+}
+//围栏使用
+export const useRail = (token, data) => {
+  return request({
+    url: baseUrl + '/api/electronicFencePlatform/useRail',
     method: 'put',
     headers: {
       Authorization: token

src/api/wirelessintrusion/wirelessintrusion.js

@@ -159,3 +159,11 @@ export const terminalList = (token, params) => {
     authorization: false
   })
 }
+//定位设备列表
+export const coordinateToWGS84 = (params) => {
+  return request({
+    url: '/api/appData/coordinateToWGS84',
+    method: 'get',
+    params: params
+  })
+}

src/router/axios.js

@@ -93,8 +93,8 @@ const whiteList = [
   '/system/dict/data/type/device_status',
   '/api/bizDevice/list',
   '/api/deviceTerminal/device/terminal',
-  '/api/electronicFencePlatform',
+  '/api/electronicFencePlatform/rail/page',
-  '/api/electronicFencePlatform'
+  '/api/electronicFencePlatform/region/page'
 ];//物联网平台白名单接口
 function checkWhiteList(message) {
   let ret = true;

src/views/alarmcenter/peopleposition/list.vue

@@ -37,6 +37,7 @@ export default {
         total: 0
       },
       option: {
+        height: 'auto',
         calcHeight: 30,
         tip: false,
         searchShow: true,

src/views/map/index.vue

@@ -6,6 +6,7 @@
 
 <script>
 import Img from "@/assets/image/position_icon.png";
+import { coordinateToWGS84 } from "@/api/wirelessintrusion/wirelessintrusion";
 export default {
 	name: "map",
 	props: {
@@ -35,12 +36,11 @@ export default {
 		window.map = null;
 	},
 	mounted() {
-		console.log('点位标注', this.sn);
 		window.map = new jsmapbase.JSMap({
 			container: 'mapContainer',
 			mapServerURL: 'data/map'
 		});
-		window.map.openMapById('0001');
+		window.map.openMapById('0002');
 		window.map.on("loadComplete", e => {
 			var floorControl = new jsmapbase.JSFloorControl({
 				position: jsmapbase.JSControlPosition.LEFT_TOP,//控件在容器中的位置
@@ -55,30 +55,36 @@ export default {
 			window.map.addControl(floorControl);
 			if(this.sn && this.floorNo && this.x && this.y) {
 				window.map._map.focusFloorId = this.floorNo;
-				let tool = new jsmapbase.JSMapCoordTool(window.map);
+				coordinateToWGS84({ x:this.x, y:this.y, minX: 13439311, maxY:3667244.25 }).then(res => {
-				let pixel = tool.screenToMapCoordinate({x: this.x, y: this.y});
+					//点位标注
-				console.log(this.x);
+					if(res.data.code == 200) {
-				//点位标注
+						var imagerMarker = new jsmapbase.JSImageMarker({
-				var imagerMarker = new jsmapbase.JSImageMarker({
+							id: 'iamgeMareker1',//id
-					id: 'iamgeMareker1',//id
+							image: Img,//图片路径
-					image: Img,//图片路径
+							position: new jsmapbase.JSPoint(res.data.data.lng, res.data.data.lat, 0),//坐标位置
-					position: new jsmapbase.JSPoint(pixel, 0),//坐标位置
+							width: 55,//尺寸-宽
-					width: 55,//尺寸-宽
+							height: 55,//尺寸-高
-					height: 55,//尺寸-高
+							floorId: this.floorNo,//楼层id
-					floorId: this.floorNo,//楼层id
+							offset: jsmapbase.JSControlPosition.RIGHT_BOTTOM,//偏移位置
-					offset: jsmapbase.JSControlPosition.RIGHT_BOTTOM,//偏移位置
+							depthTest: false,//是否开启深度检测
-					depthTest: false,//是否开启深度检测
+							show: true,  //是否显示
-					show: true,  //是否显示
+							properties: {
-					properties: {
+								name: 'test'
-						name: 'test'
+							},//属性设置
-					},//属性设置
+							callback: (node) => {
-					callback: (node) => {
+								console.log(node);
-						console.log(node);
+							}//回调
-					}//回调
+						});
-				});
+						window.map.addMarker(imagerMarker);
-				window.map.addMarker(imagerMarker);
+					}
+				})
 			}
 		});
+		//地图点击事件
+		window.map.on('mapClickNode', event => {
+			console.log(map._map.focusFloorId, map._map.allLayers);
+			console.log('===========', event);
+		});
 	},
 	methods: {
 

src/views/rails/arealist.vue

@@ -18,17 +18,17 @@
     </avue-crud>
     <!-- 新增 编辑 详情 -->
     <el-dialog :title="title" :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false"
-      :close-on-press-escape="false" width="800px">
+      :close-on-press-escape="false" custom-class="dia_box" width="950px">
       <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="建筑ID" prop="buildingId">
-              <el-input v-model="addForm.buildingId" placeholder="请输入建筑ID" disabled maxlength="10" />
+              <el-input v-model="addForm.buildingId" placeholder="请输入建筑ID" maxlength="10" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="区域名称" prop="name">
-              <el-input v-model="addForm.name" placeholder="请输入围栏名称" :disabled="type == 'view'" maxlength="30" />
+              <el-input v-model="addForm.name" placeholder="请输入围栏名称" :disabled="type == 'view'" maxlength="30" clearable />
             </el-form-item>
           </el-col>
         </el-row><el-form-item label="选择电子围栏：">
@@ -55,7 +55,7 @@
         <el-row :gutter="20">
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
-              <el-input v-model="addForm.remark" placeholder="请输入备注" :disabled="type == 'view'" maxlength="200"
+              <el-input v-model="addForm.remark" placeholder="请输入备注" :disabled="type == 'view'" maxlength="200" :autosize="{ minRows: 2, maxRows: 4}" clearable
                 show-word-limit />
             </el-form-item>
           </el-col>
@@ -73,7 +73,6 @@
 import { bizLogin } from "@/api/wirelessintrusion/wirelessintrusion";
 import { getRegionRailsList, regionDelete, regionAdd, regionUpdate, getRailsList } from "@/api/rails/rails";
 import { mapGetters } from "vuex";
-import { dateFormat } from "../../util/date"
 
 export default {
   data() {
@@ -133,7 +132,7 @@ export default {
           {
             label: "备注",
             prop: "remark",
-            overHide: true
+            overHidden: true
           },
         ]
       },
@@ -169,18 +168,19 @@ export default {
     },
     //查看详情
     rowView(row) {
-      this.addForm = row;
+      this.addForm = JSON.parse(JSON.stringify(row));
+      this.addForm.railIds = row.rails;
       this.title = '围栏详情';
       this.type = 'view';
       this.dialogVisible = true;
-      // this.$refs.addForm.resetFields();
       this.diaPage.currentPage = 1;
       this.$nextTick(() => {
+        this.$refs.addForm.clearValidate();
         this.queryRailsList(this.diaPage);
       })
     },
     //新增
-    rowAdd(row) {
+    rowAdd() {
       this.addForm = {
         buildingId: this.buildingId,
         railIds: [],
@@ -191,19 +191,23 @@ export default {
       this.multipleSelection = [];
       this.diaPage.currentPage = 1;
       this.dialogVisible = true;
-      // this.$refs.addForm.resetFields();
       this.$nextTick(() => {
         this.queryRailsList(this.diaPage);
+        this.$refs.addForm.clearValidate();
       })
     },
     //编辑
     rowEdit(row) {
-      this.addForm = row;
+      this.addForm = JSON.parse(JSON.stringify(row));
       this.addForm.railIds = row.rails;
       this.title = '围栏编辑';
       this.type = 'edit';
+      this.diaPage.currentPage = 1;
       this.dialogVisible = true;
-      // this.$refs.addForm.resetFields();
+      this.$nextTick(() => {
+        this.queryRailsList(this.diaPage);
+        this.$refs.addForm.clearValidate();
+      })
     },
     //保存
     submitForm() {
@@ -221,11 +225,9 @@ export default {
             return;
           }
           this.submitLoading = true;
-          console.log(this.addForm.id)
           this.addForm.railIds = this.multipleSelection.map(item => {return item._id});
-          console.log(this.addForm);
+          if (this.addForm._id != undefined) {
-          if (this.addForm.id != undefined) {
+            regionUpdate(token, { ...this.addForm, id: this.addForm._id}).then(res => {
-            regionUpdate(token, this.addForm).then(res => {
               this.submitLoading = false;
               if (res.data.code == 401) {
                 window.sessionStorage.removeItem('bizToken');
@@ -241,8 +243,13 @@ export default {
                   type: "success",
                   message: "操作成功!"
                 });
+              }else {
+                this.$message({
+                  type: "error",
+                  message: res.data.msg
+                });
               }
-            }, err => {
+            }, () => {
               this.submitLoading = false;
             })
           } else {
@@ -262,8 +269,13 @@ export default {
                   type: "success",
                   message: "操作成功!"
                 });
+              }else {
+                this.$message({
+                  type: "error",
+                  message: res.data.msg
+                });
               }
-            }, err => {
+            }, () => {
               this.submitLoading = false;
             })
           }
@@ -289,7 +301,7 @@ export default {
           if (token == 'undefined' || !token) {
             return;
           }
-          regionDelete(token, { "buildingId": row.buildingId, "ids": [row.id] }).then(res => {
+          regionDelete(token, { "buildingId": row.buildingId, "ids": [row._id] }).then(res => {
             if (res.data.code == 401) {
               window.sessionStorage.removeItem('bizToken');
               bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res2 => {
@@ -300,7 +312,9 @@ export default {
           });
         })
         .then(() => {
-          this.onLoad(this.page);
+          setTimeout(() => {
+            this.onLoad(this.page);
+          }, 300)
           this.$message({
             type: "success",
             message: "操作成功!"
@@ -366,6 +380,10 @@ export default {
         });
       }
     },
+    //设备列表多选框禁选
+    selectable() {
+      return this.type == 'view' ? false : true;
+    },
     //电子围栏列表
     queryRailsList(page, params = {}) {
       let values = {
@@ -380,12 +398,11 @@ export default {
             this.diaPage.total = data.totalElements;
             this.tableData = data.content;
             this.$refs.multipleTable.clearSelection();
-            let multipleSelection = this.addForm.railIds ? this.addForm.railIds.split(",") : [];
+            if (this.addForm.railIds.length > 0) { // 判断是否存在勾选过的数据
-            if (multipleSelection.length > 0) { // 判断是否存在勾选过的数据
               this.$nextTick(() => {
                 this.tableData.forEach(row => {  // 获取数据列表接口请求到的数据
-                  multipleSelection.forEach(item => {  // 勾选到的数据
+                  this.addForm.railIds.forEach(item => {  // 勾选到的数据
-                    if (row._id === parseInt(item)) {
+                    if (row._id === item) {
                       this.$refs.multipleTable.toggleRowSelection(row, true); // 若有重合，则回显该条数据
                     }
                   });
@@ -406,12 +423,11 @@ export default {
             this.diaPage.total = data.totalElements;
             this.tableData = data.content;
             this.$refs.multipleTable.clearSelection();
-            let multipleSelection = this.addForm.railIds ? this.addForm.railIds.split(",") : [];
+            if (this.addForm.railIds.length > 0) { // 判断是否存在勾选过的数据
-            if (multipleSelection.length > 0) { // 判断是否存在勾选过的数据
               this.$nextTick(() => {
                 this.tableData.forEach(row => {  // 获取数据列表接口请求到的数据
-                  multipleSelection.forEach(item => {  // 勾选到的数据
+                  this.addForm.railIds.forEach(item => {  // 勾选到的数据
-                    if (row._id === parseInt(item)) {
+                    if (row._id === item) {
                       this.$refs.multipleTable.toggleRowSelection(row, true); // 若有重合，则回显该条数据
                     }
                   });
@@ -441,4 +457,40 @@ export default {
 .el-table th.el-table__cell {
   background: #F7F8FA;
 }
+.table_box {
+  th.el-table__cell {
+    background: #F7F8FA;
+  }
+}
+
+.dia_box {
+  height: 700px;
+  overflow: auto;
+
+  .el-table {
+    width: 100% !important;
+    border: 1px solid #D6D8DF;
+  }
+
+  .el-table th.el-table__cell {
+    background: #F7F8FA;
+  }
+
+  .dialog-footer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .page_box {
+    width: 90%;
+    margin-left: 9%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15px;
+  }
+}
 </style>

src/views/rails/list.vue

@@ -2,10 +2,12 @@
   <basic-container>
     <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" :page.sync="page"
       :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
-      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"  @selection-change="selectionChange">
       <template slot="menuLeft">
         <el-button type="primary" size="small" icon="el-icon-plus" plain @click="rowAdd">新增
         </el-button>
+        <!-- <el-button type="primary" size="small" icon="el-icon-connection" plain @click="rowUse">使用围栏
+        </el-button> -->
       </template>
       <template #menu="{ row, index }">
         <el-button type="text" icon="el-icon-view" size="small" @click="rowView(row)">详情
@@ -23,17 +25,19 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="建筑ID" prop="buildingId">
-              <el-input v-model="addForm.buildingId" placeholder="请输入建筑ID" disabled maxlength="10" />
+              <el-input v-model="addForm.buildingId" placeholder="请输入建筑ID" maxlength="10" />
             </el-form-item>
             <el-form-item label="围栏名称" prop="name">
-              <el-input v-model="addForm.name" placeholder="请输入围栏名称" :disabled="type == 'view'" maxlength="30" />
+              <el-input v-model="addForm.name" placeholder="请输入围栏名称" :disabled="type == 'view'" maxlength="30"
+                clearable />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="围栏类型" prop="type">
-              <el-select v-model="addForm.type" placeholder="请选择" :disabled="type == 'view'">
+              <el-select v-model="addForm.type" placeholder="请选择" :disabled="type == 'view'" style="width:100%;"
-                <el-option value="0" label="跨楼层"></el-option>
+                clearable>
-                <el-option value="1" label="当前楼层"></el-option>
+                <el-option v-for="item in railsType" :key="'railsType' + item.value" :value="item.value"
+                  :label="item.label"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="楼层" prop="floorNo" :rules="addForm.type == 1 ? rules.floorNo : [{ required: false }]">
@@ -50,14 +54,14 @@
             <el-table-column label="坐标x">
               <template slot-scope="{row,$index}">
                 <el-form-item :prop="`coordinates.${$index}.x`" label-width="0" :rules="rules.x">
-                  <el-input v-model="row.x" placeholder="请输入坐标x" :disabled="type == 'view'" maxlength="10" />
+                  <el-input v-model="row.x" placeholder="请输入坐标x" :disabled="type == 'view'" maxlength="10" clearable />
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="坐标y">
               <template slot-scope="{row,$index}">
                 <el-form-item :prop="`coordinates.${$index}.y`" label-width="0" :rules="rules.x">
-                  <el-input v-model="row.y" placeholder="请输入坐标y" :disabled="type == 'view'" maxlength="10" />
+                  <el-input v-model="row.y" placeholder="请输入坐标y" :disabled="type == 'view'" maxlength="10" clearable />
                 </el-form-item>
               </template>
             </el-table-column>
@@ -71,8 +75,8 @@
         <el-row :gutter="20">
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
-              <el-input v-model="addForm.remark" placeholder="请输入备注" :disabled="type == 'view'" maxlength="200"
+              <el-input v-model="addForm.remark" placeholder="请输入备注" :disabled="type == 'view'" maxlength="200" clearable
-                show-word-limit />
+                :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit />
             </el-form-item>
           </el-col>
         </el-row>
@@ -82,14 +86,26 @@
         <el-button v-if="type != 'view'" type="primary" @click="submitForm" :loading="submitLoading">确认</el-button>
       </div>
     </el-dialog>
+    <!-- 使用围栏 -->
+    <el-dialog title="使用围栏" :visible.sync="dialogVisible2" :append-to-body="true" :close-on-click-modal="false"
+      :close-on-press-escape="false" width="800px">
+      <el-form ref="addForm2" :model="addForm2" :rules="rules2" label-width="80px">
+        <el-form-item label="建筑ID" prop="buildingId">
+          <el-input v-model="addForm2.buildingId" placeholder="请输入建筑ID" maxlength="10" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible2 = false">取 消</el-button>
+        <el-button type="primary" @click="doRailsUse" :loading="submitLoading">确认</el-button>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
 import { bizLogin } from "@/api/wirelessintrusion/wirelessintrusion";
-import { getRailsList, railsDelete, railsAdd, railsUpdate } from "@/api/rails/rails";
+import { getRailsList, railsDelete, railsAdd, railsUpdate, useRail } from "@/api/rails/rails";
 import { mapGetters } from "vuex";
-import { dateFormat } from "../../util/date"
 
 export default {
   data() {
@@ -121,6 +137,10 @@ export default {
         current: 1,
         total: 0
       },
+      //围栏类型字典
+      railsType: [
+        { value: 0, label: '跨楼层' }, { value: 1, label: '当前楼层' }
+      ],
       option: {
         height: 'auto',
         calcHeight: 30,
@@ -146,6 +166,15 @@ export default {
             ],
             prop: "type",
           },
+          {
+            label: "是否使用",
+            type: 'switch',
+            prop: "own",
+            slot: true,
+            dicData: [
+              { value: 'true', label: '是' }, { value: 'false', label: '否' }
+            ]
+          },
           {
             label: "建筑 id",
             prop: "buildingId",
@@ -157,13 +186,26 @@ export default {
           {
             label: "备注",
             prop: "remark",
-            overHide: true
+            overHidden: true
           },
         ]
       },
       data: [],
       submitLoading: false,
       buildingId: 202861,//建筑id
+      //围栏使用
+      selectionList: [],
+      ids: [],
+      addForm2: {
+        buildingId: '',
+        id: ''
+      },
+      dialogVisible2: false,
+      rules2: {
+        buildingId: [
+          { required: true, message: "请输入建筑id", trigger: "blur" }
+        ]
+      }
     };
   },
   computed: {
@@ -176,34 +218,86 @@ export default {
         editBtn: false
       };
     },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
   },
   methods: {
+    //多选
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    //围栏使用
+    rowUse() {
+
+    },
+    doRailsUse() {
+      console.log(val, row);
+      if(val) {
+        return
+      }
+      let token = window.sessionStorage.getItem('bizToken');
+      if (token == 'undefined' || !token) {
+        return;
+      }
+      useRail(token, { "buildingId": row.buildingId, "id": [row._id] }).then(res => {
+        if (res.data.code == 401) {
+          window.sessionStorage.removeItem('bizToken');
+          bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res2 => {
+            window.sessionStorage.setItem('bizToken', res2.data.data.token);
+            this.changeOwn(val, row);
+          })
+        } else if(res.data.code == 0) {
+          setTimeout(() => {
+            this.onLoad(this.page);
+          }, 300);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        }
+      });
+    },
     //查看详情
     rowView(row) {
       this.addForm = row;
       this.title = '围栏详情';
       this.type = 'view';
       this.dialogVisible = true;
-      this.$refs.addForm.resetFields();
+      this.$nextTick(() => {
+        this.$refs.addForm.clearValidate();
+      })
     },
     //新增
-    rowAdd(row) {
+    rowAdd() {
       this.addForm = {
+        type: "",
+        name: "",
         coordinates: [{ "x": 0, "y": 0 }],
-        buildingId: this.buildingId
+        buildingId: this.buildingId,
+        floorNo: "",
+        remark: ""
       };
       this.title = '围栏新增';
       this.type = 'add';
       this.dialogVisible = true;
-      this.$refs.addForm.resetFields();
+      this.$nextTick(() => {
+        this.$refs.addForm.clearValidate();
+      })
     },
     //编辑
     rowEdit(row) {
-      this.addForm = row;
+      this.addForm = JSON.parse(JSON.stringify(row));
       this.title = '围栏编辑';
       this.type = 'edit';
       this.dialogVisible = true;
-      this.$refs.addForm.resetFields();
+      this.$nextTick(() => {
+        this.$refs.addForm.clearValidate();
+      })
     },
     //保存
     submitForm() {
@@ -223,7 +317,7 @@ export default {
           this.submitLoading = true;
           console.log(this.addForm._id)
           if (this.addForm._id != undefined) {
-            railsUpdate(token, { ...this.addForm, id: this.addForm._id}).then(res => {
+            railsUpdate(token, { ...this.addForm, id: this.addForm._id, type: this.addForm.type ? Number(this.addForm.type) : '', floorNo: this.addForm.floorNo ? Number(this.addForm.floorNo) : '' }).then(res => {
               this.submitLoading = false;
               if (res.data.code == 401) {
                 window.sessionStorage.removeItem('bizToken');
@@ -239,12 +333,17 @@ export default {
                   type: "success",
                   message: "操作成功!"
                 });
+              } else {
+                this.$message({
+                  type: "error",
+                  message: res.data.msg
+                });
               }
-            }, err => {
+            }, () => {
               this.submitLoading = false;
             })
           } else {
-            railsAdd(token, this.addForm).then(res => {
+            railsAdd(token, { ...this.addForm, type: this.addForm.type ? Number(this.addForm.type) : '', floorNo: this.addForm.floorNo ? Number(this.addForm.floorNo) : '' }).then(res => {
               this.submitLoading = false;
               if (res.data.code == 401) {
                 window.sessionStorage.removeItem('bizToken');
@@ -260,8 +359,13 @@ export default {
                   type: "success",
                   message: "操作成功!"
                 });
+              } else {
+                this.$message({
+                  type: "error",
+                  message: res.data.msg
+                });
               }
-            }, err => {
+            }, () => {
               this.submitLoading = false;
             })
           }
@@ -298,7 +402,9 @@ export default {
           });
         })
         .then(() => {
-          this.onLoad(this.page);
+          setTimeout(() => {
+            this.onLoad(this.page);
+          }, 300);
           this.$message({
             type: "success",
             message: "操作成功!"