地图轨迹

h5app/public/index.html

@@ -23,6 +23,9 @@
 
     <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
 
+    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=e9ece4c8c4db9f3f7a7511c595eceb67"></script>
+
+
     <style type="text/css">
         .appLoading {
             width: 100%;

h5app/src/api/position/index.ts

@@ -1,12 +1,29 @@
 import {request} from '@/utils/request';
 
-export function saveLongitudeLatitude(data:any) {
+export function saveLongitudeLatitude(data: any) {
     return request(
         {
             url: 'longitudeLatitude/save',
             method: 'post',
             data: data,
         },
-        { isNew: true },
+        {isNew: true},
+    );
+}
+
+export function getLongitudeLatitudeList(userId: string, startDate: any, endDate: any) {
+    return request<any>(
+        {
+            url: 'longitudeLatitude/list',
+            method: 'get',
+            params: {
+                userId: userId,
+                startDate: startDate,
+                endDate: endDate
+            },
+        },
+        {
+            isNew: true,
+        },
     );
 }

h5app/src/router/index.ts

@@ -145,6 +145,10 @@ const routes: Array<RouteRecordRaw> = [
                 path: 'tabWork',
                 component: () => import('@/views/sapp/tabWork.vue'),
             },
+            {
+                path: 'tabWork/work/track/index',
+                component: () => import('@/views/pages/work/track/index.vue')
+            },
             {
                 path: 'tabUser',
                 component: () => import('@/views/sapp/tabUser.vue')

h5app/src/views/pages/demo/edit.vue

@@ -95,6 +95,8 @@
              </div>-->
 
       <b-image :file-ref-id="fileRefId" :readonly="false" :is-single="false"></b-image>
+
+      <div id='mapDiv' style='position: absolute; width: 100%; height: 100%; z-index: 100'></div>
     </ion-content>
 
   </ion-page>
@@ -110,6 +112,26 @@ export default defineComponent({
   components: {BQrScan, BImage},
   setup() {
     const fileRefId = "11111";//文件关键业务ID
+    const initMap = () => {
+      const T = window.T;
+      const zoom = 12;
+
+      //初始化地图对象
+      const map = new T.Map("mapDiv");
+      //设置显示地图的中心点和级别
+      map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
+      const points = [];
+      points.push(new T.LngLat(116.41239, 39.97569));
+      points.push(new T.LngLat(116.412799, 39.9068));
+      points.push(new T.LngLat(116.32970, 39.92940));
+      points.push(new T.LngLat(116.385440, 39.90610));
+      //创建线对象
+      const line = new T.Polyline(points);
+      //向地图上添加线
+      map.addOverLay(line);
+    }
+
+    window.onload = initMap;
     return {
       fileRefId
     }

h5app/src/views/pages/work/track/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <ion-page class="list-page">
+    <ion-header class="header-theme2 header-theme3">
+      <ion-toolbar>
+        <ion-title>工作轨迹</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-item class="search-item">
+        <ion-input type="date" v-model="startDate"></ion-input>
+        <ion-button slot="end"
+                    style="height: 33px;width: 70px;margin-left: 10px;--box-shadow: none;--border-radius: 14px;"
+                    @click="search">查询
+        </ion-button>
+      </ion-item>
+      <div id='mapDiv' style='position: absolute; width: 100%; height: 100%; z-index: 100'></div>
+    </ion-content>
+
+  </ion-page>
+</template>
+<script>
+import {defineComponent, ref} from "vue";
+import {getLongitudeLatitudeList} from "../../../../api/position";
+import {alertController, onIonViewDidEnter} from "@ionic/vue";
+import {useUserStore} from "../../../../store/modules/user";
+import dayjs from 'dayjs';
+
+const presentAlert = async (header, message) => {
+  const alert = await alertController.create({
+    header: header,
+    message: message,
+    buttons: [
+      '确定'
+    ],
+  });
+
+  await alert.present();
+}
+
+export default defineComponent({
+  name: 'user_track',
+  setup() {
+    const userStore = useUserStore();
+    const user = ref(userStore.getUserInfo);
+    const startDate = ref(dayjs(new Date()).format('YYYY-MM-DD'));
+    let trackList = [];
+    const T = window.T;
+    const zoom = 14;
+    let map = null;
+    let line = null;
+
+    const getTrackList = async () => {
+      trackList = await getLongitudeLatitudeList(user.value.userID, startDate.value, startDate.value);
+    };
+
+    const setLine = async () => {
+      //删除线
+      if (line != null)
+        map.removeOverLay(line);
+
+      try {
+        await getTrackList();
+      } catch (e) { /* empty */
+      }
+
+      if (trackList.length == 0) {
+        presentAlert('提示', '当日无轨迹');
+        //设置显示地图的中心点和级别
+        map.centerAndZoom(new T.LngLat(114.40, 23.08), zoom);//惠州市
+        return;
+      }
+
+      const center = trackList[0];
+
+      map.centerAndZoom(new T.LngLat(center.longitude, center.latitude), zoom);
+
+      const points = trackList.map(track => {
+        return new T.LngLat(track.longitude, track.latitude)
+      });
+
+      //创建线对象
+      line = new T.Polyline(points, {
+        color: "#c00020"
+      });
+
+      //向地图上添加线
+      map.addOverLay(line);
+
+    }
+
+    const initMap = () => {
+      //初始化地图对象
+      map = new T.Map("mapDiv");
+
+      setLine();
+    }
+
+    const search = () => {
+      setLine();
+    };
+
+    /*window.onload = initMap;*/
+
+    onIonViewDidEnter(() => {
+      initMap();
+    });
+
+    return {
+      startDate,
+      search
+    }
+  }
+});
+</script>
+<style lang="less">
+.search-item {
+  ion-input {
+    border: 1px solid #f2f2f5;
+    border-radius: 14px;
+    width: 150px !important;
+    --padding-start: 10px !important;
+    --padding-top: 7px !important;
+    --padding-bottom: 5px !important;
+  }
+}
+</style>

h5app/src/views/sapp/tabWork.vue

@@ -126,12 +126,18 @@
                </div>
                <div class="tool-title">驿站地图</div>
              </a>
-             <a class="tool-item box-line"  @click="router.push('/tabs/tabMain/demo/edit')">
+             <a class="tool-item box-line"  @click="router.push('/tabs/tabWork/work/track/index')">
                <div class="tool-img">
                  <img src="@/assets/icon/map.png">
                </div>
-               <div class="tool-title">表单样式</div>
+               <div class="tool-title">工作轨迹</div>
              </a>
+<!--             <a class="tool-item box-line"  @click="router.push('/tabs/tabMain/demo/edit')">
+               <div class="tool-img">
+                 <img src="@/assets/icon/map.png">
+               </div>
+               <div class="tool-title">表单样式</div>
+             </a>-->
            </div>
          </div>
        </div>

h5app/vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
 
     devServer: {
         port: 8202,
-        https:true,
+        https: false,
         client: {
             progress: true,
         },

src/main/java/com/hz/employmentsite/controller/LongitudeLatitudeController.java

@@ -4,12 +4,12 @@ import com.hz.employmentsite.filter.exception.BaseResponse;
 import com.hz.employmentsite.filter.exception.RespGenerstor;
 import com.hz.employmentsite.model.PcLongitudeLatitude;
 import com.hz.employmentsite.services.service.LongitudeLatitudeService;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import com.hz.employmentsite.vo.taskAndLog.PcLongitudeLatitudeVo;
+import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
+import java.util.Date;
+import java.util.List;
 
 @RestController
 @RequestMapping("/api/longitudeLatitude")
@@ -23,4 +23,9 @@ public class LongitudeLatitudeController {
         return RespGenerstor.success(longitudeLatitudeService.save(data));
     }
 
+    @GetMapping("list")
+    public BaseResponse<List<PcLongitudeLatitudeVo>> list(@RequestParam("userId") String userId, @RequestParam("startDate") Date startDate, @RequestParam("endDate") Date endDate) {
+        return RespGenerstor.success(longitudeLatitudeService.list(userId, startDate, endDate));
+    }
+
 }

src/main/java/com/hz/employmentsite/mapper/cquery/LongitudeLatitudeCQuery.java

@@ -0,0 +1,13 @@
+package com.hz.employmentsite.mapper.cquery;
+
+import com.hz.employmentsite.vo.taskAndLog.PcLongitudeLatitudeVo;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.Date;
+import java.util.List;
+
+public interface LongitudeLatitudeCQuery {
+
+    List<PcLongitudeLatitudeVo> selectList(@Param("userName") String userName, @Param("userId") String userId, @Param("startDate") Date startDate, @Param("endDate") Date endDate);
+
+}

src/main/java/com/hz/employmentsite/services/impl/LongitudeLatitudeServiceImpl.java

@@ -1,11 +1,16 @@
 package com.hz.employmentsite.services.impl;
 
 import com.hz.employmentsite.mapper.PcLongitudeLatitudeMapper;
+import com.hz.employmentsite.mapper.cquery.LongitudeLatitudeCQuery;
 import com.hz.employmentsite.model.PcLongitudeLatitude;
 import com.hz.employmentsite.services.service.LongitudeLatitudeService;
+import com.hz.employmentsite.vo.taskAndLog.PcLongitudeLatitudeVo;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
+import java.util.Date;
+import java.util.List;
 import java.util.UUID;
 
 @Service
@@ -14,6 +19,9 @@ public class LongitudeLatitudeServiceImpl implements LongitudeLatitudeService {
     @Resource
     private PcLongitudeLatitudeMapper pcLongitudeLatitudeMapper;
 
+    @Autowired
+    private LongitudeLatitudeCQuery longitudeLatitudeCQuery;
+
     @Override
     public Integer save(PcLongitudeLatitude data) {
         Integer result = 0;
@@ -22,4 +30,9 @@ public class LongitudeLatitudeServiceImpl implements LongitudeLatitudeService {
 
         return result;
     }
+
+    @Override
+    public List<PcLongitudeLatitudeVo> list(String userId, Date startDate, Date endDate) {
+        return longitudeLatitudeCQuery.selectList(null, userId, startDate, endDate);
+    }
 }

src/main/java/com/hz/employmentsite/services/service/LongitudeLatitudeService.java

@@ -1,7 +1,13 @@
 package com.hz.employmentsite.services.service;
 
 import com.hz.employmentsite.model.PcLongitudeLatitude;
+import com.hz.employmentsite.vo.taskAndLog.PcLongitudeLatitudeVo;
+
+import java.util.Date;
+import java.util.List;
 
 public interface LongitudeLatitudeService {
     Integer save(PcLongitudeLatitude data);
+
+    List<PcLongitudeLatitudeVo> list(String userId, Date startDate,Date endDate);
 }

src/main/java/com/hz/employmentsite/vo/taskAndLog/PcLongitudeLatitudeVo.java

@@ -0,0 +1,9 @@
+package com.hz.employmentsite.vo.taskAndLog;
+
+import com.hz.employmentsite.model.PcLongitudeLatitude;
+import lombok.Data;
+
+@Data
+public class PcLongitudeLatitudeVo extends PcLongitudeLatitude {
+    public String userName;
+}

src/main/resources/mapping/cquery/LongitudeLatitudeCQuery.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
+<mapper namespace="com.hz.employmentsite.mapper.cquery.LongitudeLatitudeCQuery">
+    <select id="selectList" resultType="com.hz.employmentsite.vo.taskAndLog.PcLongitudeLatitudeVo">
+        select l.longitudeLatitudeId,l.userId,l.time,l.longitude,l.latitude,us.Name as userName
+        from pc_longitude_latitude l
+        inner join sys_user us on l.userID = us.userID
+        where 1=1
+        <if test="userName!='' and userName!=null">
+            and us.name like Concat('%',#{userName},'%')
+        </if>
+        <if test="userId!='' and userId!=null">
+            and us.userId = #{userId}
+        </if>
+        <if test="startDate != null">
+            and l.Time <![CDATA[ >= ]]> #{startDate}
+        </if>
+        <if test="endDate != null ">
+            and l.Time <![CDATA[ < ]]> date_add(#{endDate}, interval 1 day)
+        </if>
+        order by l.Time
+    </select>
+</mapper>