电子围栏功能添加

src/api/FenceManager/fence.ts

@@ -64,6 +64,34 @@ function DelFence(ids) {
     })
 }
 
+//添加终端
+function addTerminal(data){
+  return request({
+        url: '/api/equipment/geoFence/addTerminal',
+        method: 'post',
+        data: data
+    })
+}
+
+//删除终端
+function delTerminal(data){
+ return request({
+        url: '/api/equipment/geoFence/delTerminal',
+        method: 'post',
+        data:data
+    })
+}
+
+//查询终端
+function pageTerminal(data){
+    return request({
+        url:'api/device/pageTerminal',
+        method:'get',
+        params:data
+    });
+}
+
+
 export default{
     updateFence:updateFence,
     AddFence:AddFence,
@@ -71,7 +99,10 @@ export default{
     check:check,
     geoFenceById:geoFenceById,
     getList:getList,
-    DelFence:DelFence
+    DelFence:DelFence,
+    addTerminal:addTerminal,
+    delTerminal:delTerminal,
+    pageTerminal:pageTerminal
 }
 
 

src/api/FenceManager/mapOpt.ts

@@ -1,7 +1,7 @@
 var map = null;
 var circle = null;
 var polygon = null;
-
+import mapLocation from '@/assets/images/mapLocation.png';
 
 function initMap() {
     // let key = '90bc158992feb8ccd0145e168cab1307';
@@ -9,12 +9,18 @@ function initMap() {
         map = new AMap.Map("map", {
             viewMode: '2D', //默认使用 2D 模式
             zoom: 11, //地图级别
+              dragEnable: true, // 强制开启拖拽
+    zoomEnable: true, // 开启滚轮缩放（辅助验证）
             center: [114.420739, 30.487514], //地图中心点
         });
 
-        map.on('click',function(evt){
+        
-          alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
+setTimeout(() => {
-        });
+    map.resize();
+}, 1000);
+        // map.on('click',function(evt){
+        //   alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
+        // });
     }
     return new Promise((resolve, reject) => {
         if(map){
@@ -39,7 +45,7 @@ function AddPoint(point, index, dragEnd, click) {
             let center = point ? new AMap.LngLat(point.lng, point.lat) : map.getCenter();
 
             let marker = new AMap.Text({
-                icon: "http://wdxm.ztzhtech.com:8111/Script/Home/img/welComeImg/mapLocation.png",
+                icon: mapLocation,
                 position: center,
                 offset: new AMap.Pixel(-15, -24),
                 draggable: true,

src/views/fys-equipment/geoFence/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content" v-loading="Status.fullLoading">
-    <div class="percent100" v-show="!Status.showEdit">
+    <div class="percent100" v-show="!Status.showEdit && !Status.showDevice">
       <div class="topTool">
         <div class="button-row">
           <el-button type="primary" @click.stop="ShowEdit(null)"
@@ -80,6 +80,7 @@
         <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-button link type="primary" @click="ShowEdit(scope.row)">编辑</el-button>
+            <el-button link type="primary" @click="ShowDevice(scope.row)">终端管理</el-button>
             <el-button link type="danger" @click="DropFence(scope.row)">删除</el-button>
           </template>
         </el-table-column>
@@ -94,7 +95,10 @@
     </div>
 
     <!-- 围栏编辑弹出层 -->
-    <div class="editLayer percent100" v-show="Status.showEdit" :title="'编辑围栏'" :draggable="true">
+    <div class="editLayer percent100 popLayer" v-show="Status.showEdit" :title="'编辑围栏'">
+      <div class="abClose" @click="CloseEdit">
+        <el-icon><Close /></el-icon>
+      </div>
       <div>
         <el-form :inline="true" :model="cEdit" label-width="auto">
           <el-form-item label="服务id">
@@ -144,6 +148,118 @@
       </div>
     </div>
 
+    <!-- 终端维护的弹窗 -->
+    <div class="percent100 deviceLayer popLayer" v-show="Status.showDevice">
+      <div class="abClose" @click="CloseDevice">
+        <el-icon><Close /></el-icon>
+      </div>
+
+        
+
+      <div class="gridContent">
+        <div class="button-row">
+          <el-button type="primary" @click="showCheckDevice" class="fleft"
+            ><el-icon><Plus /></el-icon>添加</el-button
+          >
+          <el-button type="danger" @click="DropDevice(null)" class="fleft"
+            ><el-icon><Delete /></el-icon>删除</el-button
+          >
+          <div class="fright">
+          <el-form :inline="true">
+            <el-form-item label="" prop="checkedKey">
+              <el-input v-model="searchFilter.nocheckKey"  placeholder="imei查询" clearable @keyup.enter="SearchDevice" />
+            </el-form-item>
+            <!-- <el-form-item>
+              <el-button type="primary" icon="Search" @click="SearchDevice">搜索</el-button>
+            </el-form-item> -->
+          </el-form>
+        </div>
+        <div class="clear"></div>
+        </div>
+
+        <el-table ref="gridDevice" v-loading="Status.deviceLoading" border :data="DeviceList" @selection-change="ZDSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+            <!-- <el-table-column label="deviceId" align="center" prop="deviceId" />
+            <el-table-column label="id" align="center" prop="id" /> -->
+            <el-table-column label="设备类型" align="center" prop="typeName" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="IMEI" align="center" prop="deviceImei" />
+            <el-table-column label="Mac" align="center" prop="deviceMac" />
+            <el-table-column label="蓝牙名称" align="center" prop="bluetoothName" />
+            <!-- <el-table-column label="高德服务id" align="center" prop="sid" /> -->
+            <el-table-column label="高德终端id" align="center" prop="tid" />
+            <el-table-column label="高德轨迹id" align="center" prop="trid" />
+
+          <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-icon color="#FF0000" @click="DropDevice(scope.row)"><Delete /></el-icon>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="devicePage.total > 0"
+          v-model:page="devicePage.pageNum"
+          v-model:limit="devicePage.pageSize"
+          :total="devicePage.total"
+          @pagination="getList"
+        />
+      </div>
+      <div class="center footerBtn" style="margin-top: 20px">
+        <el-button type="danger" plain @click="CloseDevice"> 关闭 </el-button>
+      </div>
+    </div>
+
+    <el-dialog :title="'选择终端'" :draggable="true" footer-class="dilogFooter" v-model="Status.showCheckDevice" width="65%" append-to-body>
+      <div class="deviceContent">
+        <div class="filter">
+          <el-form :inline="true">
+            <el-form-item label="关键字" prop="checkedKey">
+              <el-input v-model="searchFilter.checkedKey" placeholder="imei查询" clearable @keyup.enter="searchZD" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="searchZD">搜索</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="checked">
+          <el-table
+            v-loading="Status.showCheckDeviceLoading"
+            border
+            :data="checkedDevices"
+            @selection-change="handleSelectionChange"
+            ref="multipleTableRef"
+            row-key="id"
+          >
+            <el-table-column type="selection" width="55" align="center" />
+            <!-- <el-table-column label="deviceId" align="center" prop="deviceId" />
+            <el-table-column label="id" align="center" prop="id" /> -->
+            <el-table-column label="设备类型" align="center" prop="typeName" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="IMEI" align="center" prop="deviceImei" />
+            <el-table-column label="Mac" align="center" prop="deviceMac" />
+            <el-table-column label="蓝牙名称" align="center" prop="bluetoothName" />
+            <!-- <el-table-column label="高德服务id" align="center" prop="sid" /> -->
+            <el-table-column label="高德终端id" align="center" prop="tid" />
+            <el-table-column label="高德轨迹id" align="center" prop="trid" />
+          </el-table>
+
+          <pagination
+            :total="checkedPageParams.total"
+            v-model:page="checkedPageParams.pageNum"
+            v-model:limit="checkedPageParams.pageSize"
+            @pagination="searchZD"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <div class="center footerBtn" style="margin-top: 20px">
+          <el-button type="primary" @click="SaveChecked"> 确定 </el-button>
+          <el-button type="danger" plain @click="CloseCheckDevice"> 关闭 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- 提示框 -->
     <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
       <span :class="Status.confirm.isWarn" v-html="Status.confirm.text"> </span>
@@ -164,7 +280,8 @@ import map from '@/api/FenceManager/mapOpt';
 import { listService } from '@/api/system/service/api';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-import { writeHeapSnapshot } from 'v8';
+import { getDevice } from '@/api/system/service/api';
+
 const mapApiKey = import.meta.env.VITE_AMAP_KEY;
 
 var grid = ref(null);
@@ -184,7 +301,12 @@ var Status = reactive({
     isWarn: false //是否警告色
   },
   showSearch: [], //是否显示高级查询
-  showEdit: false //是否显示编辑弹窗
+  showEdit: false, //是否显示编辑弹窗
+  showDevice: false, //是否显示终端维护
+  deviceLoading: false, //终端查询的loading
+
+  showCheckDevice: false, //是否显示选择终端
+  showCheckDeviceLoading: false
 });
 //查询的条件
 var queryParams = reactive({
@@ -206,15 +328,361 @@ var cEdit = reactive({
   sid: null,
   gfid: null
 });
-
+var checkGf = reactive({
+  //当前正在操作的数据
+  sid: null,
+  gfid: null
+});
 //页码控件数据
 var pagin = reactive({
   total: 0
 });
+var devicePage = reactive({
+  total: 0,
+  pageNum: 1,
+  pageSize: 10
+});
+
+var checkedPageParams = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  total: 0
+});
 
 //列表数据
 var List = ref<any[]>(null);
+
 var services = ref<any[]>(null);
+
+var DeviceList = ref<any[]>(null);
+
+const checkZd = ref<any>([]);
+
+var checkedDevices = ref([]);
+const searchFilter = ref({
+  nocheckKey: '',
+  checkedKey: ''
+});
+
+const ids = ref<any>([]);
+
+//显示终端
+function ShowDevice(item) {
+  Status.showDevice = true;
+  checkGf = item;
+  SearchDevice();
+}
+//选择终端
+
+function ZDSelectionChange(selection: any[]) {
+  checkZd.value = selection;
+}
+//查询已选择的终端
+function SearchDevice() {
+  Status.deviceLoading = true;
+
+  let searchMap = () => {
+    let json = {
+      key: mapApiKey,
+      sid: checkGf.sid,
+      gfid: checkGf.gfid
+    };
+    let formData = [];
+    if (json) {
+      let keys = Object.keys(json);
+      for (let index = 0; index < keys.length; index++) {
+        let key = keys[index];
+        let encodedKey = encodeURIComponent(key);
+        let encodedValue = encodeURIComponent(json[key]);
+        formData.push(`${encodedKey}=${encodedValue}`);
+      }
+    }
+
+    let queryString = formData.join('&'); // 拼接成 key1=value1&key2=value2
+
+    request({
+      url: 'https://tsapi.amap.com/v1/track/geofence/terminal/list?' + queryString,
+      method: 'GET',
+      data: ''
+    })
+      .then((res) => {
+        if (res && res.errcode === 10000) {
+          DeviceList.value = res.data.results;
+          devicePage.total = res.data.count;
+        }
+      })
+      .finally(() => {
+        Status.deviceLoading = false;
+      });
+  };
+
+  let searchSys = () => {
+    let json = {
+      fenceId: checkGf.gfid,
+      sid: checkGf.sid,
+      isTid: true,
+       pageNum: devicePage.pageNum,
+      pageSize: devicePage.pageSize,
+      deviceImei: searchFilter.value.nocheckKey
+    };
+    api
+      .pageTerminal(json)
+      .then((res) => {
+        if (res && res.code === 200) {
+          DeviceList.value = res.rows;
+          devicePage.total = res.total;
+          return;
+        }
+
+        DeviceList.value = [];
+        devicePage.total = 0;
+      })
+      .finally(() => {
+        Status.deviceLoading = false;
+      });
+  };
+
+  searchSys();
+}
+
+//关闭终端
+function CloseDevice() {
+  Status.showDevice = false;
+}
+//显示选择终端
+function showCheckDevice() {
+  Status.showCheckDevice = true;
+  searchZD();
+}
+
+//查询待选择的终端
+function searchZD() {
+  return new Promise((resolve, reject) => {
+    let json = {
+      fenceId: checkGf.gfid,
+      sid: checkGf.sid,
+      isTid: false,
+      pageNum: checkedPageParams.pageNum,
+      pageSize: checkedPageParams.pageSize,
+      deviceImei: searchFilter.value.checkedKey
+    };
+
+    api
+      .pageTerminal(json)
+      .then((res) => {
+        if (res.code === 200) {
+          checkedDevices.value = res.rows;
+          checkedPageParams.total = res.total;
+          resolve(res);
+          return;
+        }
+        resolve(null);
+      })
+      .catch((ex) => {
+        resolve(null);
+      })
+      .finally(() => {
+        Status.showCheckDeviceLoading = false;
+      });
+  });
+
+  // return new Promise((resolve, reject) => {
+  //   let para = {
+  //     deviceStatus: 1,
+  //     isTid: true,
+  //     sid: cEdit.sid,
+  //     pageNum: checkedPageParams.pageNum,
+  //     pageSize: checkedPageParams.pageSize,
+  //     deviceImei: searchFilter.value.checkedKey
+  //   };
+  //   checkedPageParams.total = 0;
+  //   Status.showCheckDeviceLoading = true;
+  //   getDevice(para)
+  //     .then((res) => {
+  //       console.log('查询已选择设备成功');
+  //       if (res.code === 200) {
+  //         checkedDevices.value = res.rows;
+  //         checkedPageParams.total = res.total;
+  //         resolve(res);
+  //         return;
+  //       }
+  //       resolve(null);
+  //     })
+  //     .catch((ex) => {
+  //       resolve(null);
+  //     })
+  //     .finally(() => {
+  //       Status.showCheckDeviceLoading = false;
+  //     });
+  // });
+}
+//关闭选择终端
+function CloseCheckDevice() {
+  Status.showCheckDevice = false;
+}
+//保存选择的终端
+function SaveChecked() {
+  if (ids.value.length === 0) {
+    alert('请选择终端');
+    return;
+  }
+  if (ids.value.length > 100) {
+    alert('最多只能选100条数据');
+    return;
+  }
+  let tids = ids.value
+    .map((v) => {
+      return v.tid;
+    })
+    .join(',');
+
+  let deviceIds = ids.value.map((v) => {
+    return v.deviceId;
+  });
+  let mapAdd = () => {
+    //先从高德添加数据，成功后再提交后台
+    return new Promise((resolve, reject) => {
+      let url = 'https://tsapi.amap.com/v1/track/geofence/terminal/bind';
+      let method = 'POST';
+      let data = {
+        key: mapApiKey,
+        sid: checkGf.sid,
+        gfid: checkGf.gfid,
+        tids: tids
+      };
+
+      request({ url: url, method: method, data: data })
+        .then((res) => {
+          if (res && res.errcode === 10000) {
+            resolve(res);
+            return;
+            // alert('操作成功');
+            //
+          } else {
+            alert(res.errmsg);
+            reject(res);
+          }
+        })
+        .catch((ex) => {
+          reject(ex);
+        });
+    });
+  };
+
+  mapAdd()
+    .then((res) => {
+      let json = {
+        sid: checkGf.sid,
+        fenceId: checkGf.gfid,
+        deviceIds: deviceIds
+      };
+      api
+        .addTerminal(json)
+        .then((result) => {
+          //高德添加成功了，提交到后台
+          if (result && result.code === 200) {
+            alert('操作成功');
+          } else {
+            alert('在高德保存成功，系统保存失败,失败数据:' + JSON.stringify(json));
+          }
+        })
+        .finally(() => {
+          SearchDevice();
+        });
+    })
+    .then((ex) => {});
+}
+
+//删除终端
+function DropDevice(row) {
+  let arr = [];
+  if (row) {
+    arr = [row];
+  } else {
+    arr = checkZd.value;
+  }
+  if (arr.length === 0) {
+    alert('请选择要删除的数据');
+    return;
+  }
+  if (arr.length > 100) {
+    alert('最多只能选择100条数据');
+    return;
+  }
+
+  let tids = arr
+    .map((v) => {
+      return v.tid;
+    })
+    .join(',');
+
+  let deviceIds = arr.map((v) => {
+    return v.deviceId;
+  });
+
+  let mapDrop = () => {
+    //从高德删除
+    return new Promise((resolve, reject) => {
+      let url = 'https://tsapi.amap.com/v1/track/geofence/terminal/unbind';
+
+      let data = {
+        key: mapApiKey,
+        sid: checkGf.sid,
+        gfid: checkGf.gfid,
+        tids: tids
+      };
+      request({
+        url: url,
+        method: 'POST',
+        data: data
+      })
+        .then((res) => {
+          if (res && res.errcode === 10000) {
+            resolve(res);
+            return;
+          } else {
+            alert(res.errmsg);
+            reject(res);
+          }
+        })
+        .catch((ex) => {
+          alert(JSON.stringify(ex));
+          reject(ex);
+        });
+    });
+  };
+  //先从高德删除，再从系统删除
+  let execDrop = () => {
+    mapDrop().then((res) => {
+      let json = {
+        sid: checkGf.sid,
+        fenceId: checkGf.gfid,
+        deviceIds: deviceIds
+      };
+      api
+        .delTerminal(json)
+        .then((result) => {
+          //从系统删除
+          if (result && result.code === 200) {
+            alert('操作成功');
+
+            return;
+          }
+          alert('<div class="red">从高德删除成功，但从系统删除失败了,失败数据:' + JSON.stringify(json) + '</div>');
+        })
+        .finally(() => {
+          SearchDevice();
+        });
+    });
+  };
+
+  confirm('<div class="red">删除后不可恢复，您确认删除所选数据吗？</div>', execDrop, null, '提示');
+}
+
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection;
+};
+
 //查询所有服务
 function getServices() {
   listService({ pageNum: 1, pageSize: 9999 }).then((res) => {
@@ -231,8 +699,8 @@ function showSearch() {
     Status.showSearch = ['1'];
   }
 }
+
 function ShowEdit(item) {
-  debugger;
   Status.showEdit = true;
   if (item) {
     let keys = Object.keys(item);
@@ -277,6 +745,7 @@ function ShowEdit(item) {
       });
   }, 500);
 }
+
 function CloseEdit() {
   Status.showEdit = false;
   let defCfg = {
@@ -445,8 +914,6 @@ function updateGeoFence() {
     method: 'POST',
     data: json
   });
-
-  
 }
 
 function dropGeoFence(arr) {
@@ -480,16 +947,12 @@ function dropGeoFence(arr) {
       gfids: gfids
     };
 
-
-
-
     const url = 'https://tsapi.amap.com/v1/track/geofence/delete';
     return request({
-      url:url,
+      url: url,
-      method:'POST',
+      method: 'POST',
-      data:json
+      data: json
     });
-    
   };
 
   let promises = [];
@@ -595,7 +1058,6 @@ function request(cfg) {
 
 //保存数据
 function SaveFormData() {
-  debugger;
   let err = [];
   if (!cEdit.sid) {
     err.push('请选择服务id');
@@ -655,7 +1117,6 @@ function SaveFormData() {
 }
 //删除围栏
 function DropFence(item) {
-  debugger;
   let arr = [];
   if (item) {
     arr = [item];
@@ -668,11 +1129,8 @@ function DropFence(item) {
   }
 
   let execDelete = () => {
-    debugger;
-
     //先从高德删除围栏，再从后台删除
     dropGeoFence(arr).then((res) => {
-      debugger;
       if (res.errcode === 10000) {
         let dropIds = res.data;
         if (!dropIds) {
@@ -879,7 +1337,7 @@ onMounted(() => {
   width: 100%;
   height: calc(100% - 200px);
   box-sizing: border-box;
-  border: 1px solid #7371719e;
+  border: 1px solid #ccc;
   border-radius: 8px;
   margin-top: 10px;
 }
@@ -919,4 +1377,32 @@ onMounted(() => {
   //  width: 100%;
   //  left: 0px;
 }
+
+.deviceLayer .gridContent {
+  width: 100%;
+  height: calc(100% - 50px);
+}
+.button-row {
+  margin-top: 10px;
+  width:auto;
+  height: 36px;
+  box-sizing: border-box;
+}
+
+.popLayer {
+  position: relative;
+}
+
+.popLayer .abClose {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  z-index: 9;
+  cursor: pointer;
+}
+
+.red,
+:deep .red {
+  color: #ff0000;
+}
 </style>