|
@@ -60,8 +60,8 @@
|
|
|
</a-row>
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item label="人员名称" :label-col="{ span: 8 }" name="userName">
|
|
|
- <a-input v-model:value="searchParams.userName" placeholder="" :allow-clear="true" />
|
|
|
+ <a-form-item label="人员名称" :label-col="{ span: 8 }" name="siteUserName">
|
|
|
+ <a-input v-model:value="searchParams.userName" placeholder="" :allow-clear="true"/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -81,9 +81,11 @@
|
|
|
<script lang="ts">
|
|
|
import { defineComponent, onMounted, ref } from 'vue';
|
|
|
import dayjs from 'dayjs';
|
|
|
- import type { FormInstance, SelectProps } from 'ant-design-vue';
|
|
|
+ import {type FormInstance, message, type SelectProps} from 'ant-design-vue';
|
|
|
import { getRegionCodeList } from '@/api/system/area/index';
|
|
|
import { getSiteList } from '@/api/baseSettings/siteInfo';
|
|
|
+ import {getLongitudeLatitudeNewAllList} from "@/api/taskAndLog/longitudeLatitude";
|
|
|
+ import thIcon from '@/assets/images/th.jpg';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'PositionMapIndex',
|
|
@@ -92,9 +94,15 @@
|
|
|
const T = (window as any).T;
|
|
|
const zoom = 14;
|
|
|
let map = null;
|
|
|
+ let markerList = new Array<any>([]);
|
|
|
+ let labelList = new Array<any>([]);
|
|
|
+ const trackList = ref<Array<any>>([])
|
|
|
const regionList = ref<SelectProps['options']>();
|
|
|
const allSites = ref<any>([]);
|
|
|
const searchParams = ref({
|
|
|
+ regionCode: "",
|
|
|
+ siteID: "",
|
|
|
+ userName: "",
|
|
|
startDate: dayjs(new Date()).format('YYYY-MM-DD'),
|
|
|
});
|
|
|
|
|
@@ -119,6 +127,69 @@
|
|
|
if (map != null) (map as any).centerAndZoom(new T.LngLat(114.4, 23.08), zoom); //惠州市
|
|
|
};
|
|
|
|
|
|
+ async function getTrackList() {
|
|
|
+ // 清空数据
|
|
|
+ trackList.value = [];
|
|
|
+
|
|
|
+ // 查询经纬度数据
|
|
|
+ await getLongitudeLatitudeNewAllList(searchParams.value.userName, searchParams.value.startDate, searchParams.value.regionCode, searchParams.value.siteID).then((result: any) => {
|
|
|
+ trackList.value = result;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查询运动轨迹
|
|
|
+ async function onSearch() {
|
|
|
+ // 删除已有标点
|
|
|
+ if (markerList.length > 0) {
|
|
|
+ for (let i = 0; i < markerList.length; i++) {
|
|
|
+ (map as any).removeOverLay(markerList[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (labelList.length > 0) {
|
|
|
+ for (let i = 0; i < labelList.length; i++) {
|
|
|
+ (map as any).removeOverLay(labelList[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ await getTrackList()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (trackList.value.length == 0) {
|
|
|
+ message.info('当日无轨迹');
|
|
|
+ //设置显示地图的中心点和级别
|
|
|
+ (map as any).centerAndZoom(new T.LngLat(114.40, 23.08), zoom);//惠州市
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置中心点,以第一条数据的定位为显示中心
|
|
|
+ const center = trackList.value[0];
|
|
|
+ (map as any).centerAndZoom(new T.LngLat(center.longitude, center.latitude), zoom);
|
|
|
+
|
|
|
+ const icon = new T.Icon({
|
|
|
+ iconUrl: thIcon,
|
|
|
+ iconSize: new T.Point(30, 30),
|
|
|
+ iconAnchor: new T.Point(10, 56)
|
|
|
+ })
|
|
|
+ trackList.value.map((item: any) => {
|
|
|
+ const label = new T.Label({
|
|
|
+ text: item.siteName + item.userName, //文本标注的内容
|
|
|
+ position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
|
|
|
+ offset: new T.Point(-50, 20) //文本标注的位置偏移值
|
|
|
+ })
|
|
|
+ const point = new T.LngLat(item.longitude, item.latitude, {
|
|
|
+ icon: icon
|
|
|
+ })
|
|
|
+ const marker = new T.Marker(point); // 创建标注
|
|
|
+ (map as any).addOverLay(label); // 将标注添加到地图中
|
|
|
+ (map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
+ labelList.push(label);
|
|
|
+ markerList.push(marker);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
initMap();
|
|
|
getRegionList();
|
|
@@ -131,6 +202,7 @@
|
|
|
formRef,
|
|
|
regionList,
|
|
|
allSites,
|
|
|
+ onSearch
|
|
|
};
|
|
|
},
|
|
|
created() {},
|