feat:定位查询

src/api/system/search_location.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function searchInfo(query) {
+  return request({
+    url: '/system/search/location/info/search',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】列表
+export function listInfo(query) {
+  return request({
+    url: '/system/search/location/info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function getInfo(id) {
+  return request({
+    url: '/system/search/location/info/' + id,
+    method: 'get'
+  })
+}
+
+// 新增【请填写功能名称】
+export function addInfo(data) {
+  return request({
+    url: '/system/search/location/info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改【请填写功能名称】
+export function updateInfo(data) {
+  return request({
+    url: '/system/search/location/info',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除【请填写功能名称】
+export function delInfo(id) {
+  return request({
+    url: '/system/search/location/info' + id,
+    method: 'delete'
+  })
+}

src/views/system/search_location/index.vue

@@ -0,0 +1,415 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="10">
+        <div class="grid-content bg-purple">
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
+          >
+            <el-form-item prop="searchValue">
+              <el-input
+                v-model="queryParams.searchValue"
+                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-table v-loading="loading" :data="infoList">
+            <el-table-column label="编号" width="55" type="index" />
+            <el-table-column
+              label="设备编码"
+              align="center"
+              prop="deviceIdCode"
+            />
+            <el-table-column
+              label="客户姓名"
+              align="center"
+              prop="userNickName"
+            />
+            <el-table-column label="电话" align="center" prop="deviceTel" />
+            <el-table-column
+              label="操作"
+              width="160px"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-location-outline"
+                  @click="handleDeviceLocation(scope.row)"
+                  >定位</el-button
+                >
+                <!-- <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleDeviceTrajectory(scope.row)"
+                  >轨迹</el-button
+                > -->
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleDeviceFence(scope.row)"
+                  >围栏</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getSearchInfoList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="content bg-purple-dark">
+          <div style="height: 1000px" id="map_container"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-dialog title="电子围栏" :visible.sync="dialogFenceVisible">
+      <el-table :data="fenceInfoList">
+        <el-table-column
+          property="id"
+          label="围栏ID"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          property="name"
+          label="围栏名称"
+          width="200"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          width="160px"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDeviceItemFence(scope.row)"
+              >查询围栏</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { searchInfo } from "@/api/system/search_location";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import axios from "axios";
+
+export default {
+  name: "Info",
+  data() {
+    return {
+      //要定位的点
+      lnglat: [],
+      //高德地图
+      amap: null,
+      // 电子围栏对象
+      fence: null,
+      //电子围栏点数据
+      fenceInfo: {},
+      //要定位的点
+      fenceInfoList: [],
+      //展示选择围栏列表
+      dialogFenceVisible: false,
+      // 遮罩层
+      loading: true,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 【请填写功能名称】表格数据
+      infoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        searchValue: null,
+        deviceId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        searchValue: [
+          { required: true, message: "查询内容不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    /**
+     * TODO 根据请求参数去调方法
+     */
+    // this.getSearchInfoList();
+    this.loading = false;
+    //创建地图
+    this.handleCreateMap();
+  },
+  methods: {
+    /** 查询【请填写功能名称】列表 */
+    getSearchInfoList() {
+      this.loading = true;
+      searchInfo(this.queryParams).then((response) => {
+        this.infoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.lnglat = null;
+      this.form = {
+        id: null,
+        userId: null,
+        searchValue: null,
+        deviceId: null,
+        createTime: null,
+        updateTime: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getSearchInfoList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.infoList = null;
+      this.total = 0;
+      this.loading = false;
+      this.lnglat = null;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/info/export",
+        {
+          ...this.queryParams,
+        },
+        `info_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 设备定位 */
+    handleDeviceLocation(rows) {
+      this.lnglat = [rows.gpsLong, rows.gpsLat];
+      this.handleCreateMap();
+    },
+    /** 创建地图 */
+    handleCreateMap() {
+      AMapLoader.load({
+        key: "c968deab485d6e688e7c68689722ffb4",
+        version: "2.0",
+      }).then((AMap) => {
+        this.amap = new AMap.Map("map_container", {
+          zoom: 15,
+        });
+        var geocoder;
+        AMap.plugin(["AMap.Scale", "AMap.Geocoder"], () => {
+          this.amap.addControl(new AMap.Scale());
+          geocoder = new AMap.Geocoder({
+            radius: 500, //范围，默认：500
+          });
+        });
+        /** 定位 */
+        let marker = new AMap.Marker();
+        if (this.lnglat.length) {
+          this.amap.setCenter(this.lnglat);
+          this.amap.add(marker);
+          marker.setPosition(this.lnglat);
+        }
+      });
+    },
+    /** 设备轨迹 */
+    handleDeviceTrajectory(rows) {
+      console.debug("您获取的围栏是：" + rows);
+    },
+    /** 设备围栏 */
+    handleDeviceFence(rows) {
+      this.dialogFenceVisible = true;
+      this.fenceInfoList = rows.aMapFenceList;
+      // console.debug("设备围栏数据：" + rows.aMapFenceList[0]);
+      // this.getFenceInfo(rows.aMapFenceList[0]).then((res) => {
+      //   if (res.data.results[0].shape.radius) {
+      //     console.debug(
+      //       "res.data.results[0].shape.radius:" +
+      //         res.data.results[0].shape.radius
+      //     );
+      //     // this.fenceInfo.center = res.data.results[0].shape.center;
+      //     // this.fenceInfo.radius = res.data.results[0].shape.radius;
+      //     // this.fenceInfo.geofence_type = 0;
+      //     // let lnglat = new AMap.LngLat(
+      //     //   res.data.results[0].shape.center.split(",")[0],
+      //     //   res.data.results[0].shape.center.split(",")[1]
+      //     // );
+      //     // this.fence = new AMap.Circle({
+      //     //   center: lnglat,
+      //     //   radius: res.data.results[0].shape.radius, //半径
+      //     //   borderWeight: 3,
+      //     //   fillOpacity: 0.4,
+      //     //   strokeStyle: "dashed",
+      //     //   strokeDasharray: [10, 10],
+      //     //   // 线样式还支持 'dashed'
+      //     //   fillColor: "#1791fc",
+      //     //   zIndex: 50,
+      //     // });
+      //     // this.map.add(this.fence);
+      //     // this.map.setCenter(lnglat);
+      //     // this.map.setFitView([this.fence]);
+      //   } else if (res.data.results[0].shape.points) {
+      //     // console.debug(
+      //     //   "res.data.results[0].shape.points:" +
+      //     //     res.data.results[0].shape.points
+      //     // );
+      //     let arr = res.data.results[0].shape.points.split(";");
+      //     let path = [];
+      //     arr.map((item) => {
+      //       path.push(item.split(","));
+      //     });
+      //     console.log("当前路径为：" + path);
+      //     this.fenceInfo.points = res.data.results[0].shape.points;
+      //     this.fenceInfo.geofence_type = 1;
+      //     this.fence = new AMap.Polygon({
+      //       path: path,
+      //       strokeColor: "#FF33FF",
+      //       strokeWeight: 6,
+      //       strokeOpacity: 0.2,
+      //       fillOpacity: 0.4,
+      //       fillColor: "#1791fc",
+      //       zIndex: 50,
+      //       bubble: true,
+      //       // draggable: true,
+      //     });
+      //     this.amap.add(this.fence);
+      //     this.amap.setFitView([this.fence]);
+      //   }
+      // });
+    },
+    /** 设备围栏 */
+    handleDeviceItemFence(rows) {
+      this.getFenceInfo(rows).then((res) => {
+        if (res.data.results[0].shape.radius) {
+          console.debug(
+            "res.data.results[0].shape.radius:" +
+              res.data.results[0].shape.radius
+          );
+          // this.fenceInfo.center = res.data.results[0].shape.center;
+          // this.fenceInfo.radius = res.data.results[0].shape.radius;
+          // this.fenceInfo.geofence_type = 0;
+          // let lnglat = new AMap.LngLat(
+          //   res.data.results[0].shape.center.split(",")[0],
+          //   res.data.results[0].shape.center.split(",")[1]
+          // );
+          // this.fence = new AMap.Circle({
+          //   center: lnglat,
+          //   radius: res.data.results[0].shape.radius, //半径
+          //   borderWeight: 3,
+          //   fillOpacity: 0.4,
+          //   strokeStyle: "dashed",
+          //   strokeDasharray: [10, 10],
+          //   // 线样式还支持 'dashed'
+          //   fillColor: "#1791fc",
+          //   zIndex: 50,
+          // });
+          // this.map.add(this.fence);
+          // this.map.setCenter(lnglat);
+          // this.map.setFitView([this.fence]);
+        } else if (res.data.results[0].shape.points) {
+          // console.debug(
+          //   "res.data.results[0].shape.points:" +
+          //     res.data.results[0].shape.points
+          // );
+          let arr = res.data.results[0].shape.points.split(";");
+          let path = [];
+          arr.map((item) => {
+            path.push(item.split(","));
+          });
+          console.log("当前路径为：" + path);
+          this.fenceInfo.points = res.data.results[0].shape.points;
+          this.fenceInfo.geofence_type = 1;
+          this.fence = new AMap.Polygon({
+            path: path,
+            strokeColor: "#FF33FF",
+            strokeWeight: 6,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            fillColor: "#1791fc",
+            zIndex: 50,
+            bubble: true,
+            // draggable: true,
+          });
+          this.amap.add(this.fence);
+          this.amap.setFitView([this.fence]);
+        }
+        this.dialogFenceVisible = false;
+      });
+    },
+    // 获取围栏信息
+    getFenceInfo(aMapFence) {
+      return new Promise((resolve, reject) => {
+        axios({
+          url: "https://tsapi.amap.com/v1/track/geofence/list",
+          method: "GET",
+          params: {
+            key: aMapFence.key,
+            sid: aMapFence.sid,
+            gfids: aMapFence.gfid,
+            outputshape: 1,
+          },
+        }).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+  },
+};
+</script>