diff --git a/components.d.ts b/components.d.ts index 7153f90..24e13f9 100644 --- a/components.d.ts +++ b/components.d.ts @@ -45,6 +45,7 @@ declare module '@vue/runtime-core' { ElUpload: typeof import('element-plus/es')['ElUpload'] Header: typeof import('./src/components/header.vue')['default'] InfoWindow: typeof import('./src/components/InfoWindow.vue')['default'] + LocationList: typeof import('./src/components/locationList.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SectionDate: typeof import('./src/components/sectionDate.vue')['default'] diff --git a/src/components/locationList.vue b/src/components/locationList.vue new file mode 100644 index 0000000..d98cca4 --- /dev/null +++ b/src/components/locationList.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/src/layout/index.vue b/src/layout/index.vue index da85188..7b92497 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -50,20 +50,20 @@ const onMessage = (res) => { }; onMounted(() => { - const isReload = localStorage.getItem("isReload"); - if (isReload !== "true") { - ElMessageBox.alert("由于浏览器安全策略，用户必须点击屏幕才能播放告警声音", "提示", { - confirmButtonText: "OK", - callback: () => { - localStorage.setItem("isReload", "true"); - }, - }); - } + // const isReload = localStorage.getItem("isReload"); + // if (isReload !== "true") { + // ElMessageBox.alert("由于浏览器安全策略，用户必须点击屏幕才能播放告警声音", "提示", { + // confirmButtonText: "OK", + // callback: () => { + // localStorage.setItem("isReload", "true"); + // }, + // }); + // } - if (ws.socket == null) { - ws.connect(); - } - ws.onMessage(onMessage); + // if (ws.socket == null) { + // ws.connect(); + // } + // ws.onMessage(onMessage); window.addEventListener("beforeunload", handleBeforeUnload); }); diff --git a/src/utils/mapCustom.js b/src/utils/mapCustom.js index 702a004..5ea669b 100644 --- a/src/utils/mapCustom.js +++ b/src/utils/mapCustom.js @@ -149,11 +149,12 @@ export class MapCustom { anchor: 'bottom-center', isCustom: true, content: document.querySelector('.infoBox'), - offset: new AMap.Pixel(-2, -40), + offset: new AMap.Pixel(-2, -30), ...option }) } + //绘制轨迹线条 polyline(list) { this.clearMap() diff --git a/src/views/alarmCenter/index.vue b/src/views/alarmCenter/index.vue index 127364a..6dbe838 100644 --- a/src/views/alarmCenter/index.vue +++ b/src/views/alarmCenter/index.vue @@ -80,9 +80,10 @@ const handleSearch = () => { let columns = ref([ { type: "index", label: "序号", width: 55, align: "center" }, { prop: "deviceId", label: "手铐IMEI号" }, - { prop: "adminName", label: "绑定用户" }, - { prop: "username", label: "警员号" }, { prop: "userNumber", label: "佩戴者" }, + { prop: "adminName", label: "绑定用户" }, + { prop: "adminPhone", label: "用户号码" }, + { prop: "username", label: "警员号" }, { prop: "warnType", label: "事件类型" }, { prop: "createTime", label: "时间" }, { prop: "status", label: "处理状态" }, diff --git a/src/views/monitoringCenter/deviceLocationMap.vue b/src/views/monitoringCenter/deviceLocationMap.vue index 681a061..d6e8196 100644 --- a/src/views/monitoringCenter/deviceLocationMap.vue +++ b/src/views/monitoringCenter/deviceLocationMap.vue @@ -4,6 +4,7 @@ +
@@ -21,10 +22,13 @@ import startMarker from "@/assets/img/start-marker.png"; import fullScreen from "@/assets/img/fullScreen.png"; import narrow from "@/assets/img/narrow.png"; import { useFullScreen } from "@/utils/hooks"; +import LocationList from "@/components/locationList.vue"; +import { TLocateRecord } from "@/api/index.d"; let InfoWin = null; let newMap = null; let locationInfo = ref({}); +let locationRecord = ref([]); const { isFullScreen, toggleFullScreen } = useFullScreen(); const props = defineProps({ deviceId: { @@ -50,6 +54,7 @@ const getLocateRecord = () => { endDate: `${format(d, "YYYY-MM-DD")} 23:59:59`, }).then((res) => { newMap.clearMap(); + locationRecord.value = res; if (res && res.length) { let list = res; newMap.setCenter([list[0].lng, list[0].lat]); @@ -68,46 +73,65 @@ const getLocateRecord = () => { }); let markers = []; list.forEach((item, index) => { - if (list.length < 50) { - let marker: any = ""; - if (index == 0) { - marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else if (index == list.length - 1) { - marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else { - marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 }); - } + let marker: any = ""; + if (index == 0) { + marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); + } else if (index == list.length - 1) { + marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); + } + if (marker) { marker.on("click", () => { locationInfo.value = item; InfoWin = newMap.infoWindow(); InfoWin.open(newMap.map, marker.getPosition()); }); markers.push(marker); - } else { - if (index % 5 == 0) { - let marker: any = ""; - if (index == 0) { - marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else if (index == list.length - 1) { - marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else { - marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 }); - } - marker.on("click", () => { - locationInfo.value = item; - InfoWin = newMap.infoWindow(); - InfoWin.open(newMap.map, marker.getPosition()); - }); - - markers.push(marker); - } } + + // if (list.length < 50) { + // let marker: any = ""; + // if (index == 0) { + // marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); + // } else if (index == list.length - 1) { + // marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); + // } else { + // marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 }); + // } + // marker.on("click", () => { + // locationInfo.value = item; + // InfoWin = newMap.infoWindow(); + // InfoWin.open(newMap.map, marker.getPosition()); + // }); + // markers.push(marker); + // } else { + // if (index % 5 == 0) { + // let marker: any = ""; + // if (index == 0) { + // marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); + // } else if (index == list.length - 1) { + // marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); + // } else { + // marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 }); + // } + // marker.on("click", () => { + // locationInfo.value = item; + // InfoWin = newMap.infoWindow(); + // InfoWin.open(newMap.map, marker.getPosition()); + // }); + + // markers.push(marker); + // } + // } }); newMap.map.add(markers); } }); }; - +const handleClick = (val) => { + locationInfo.value = val; + InfoWin = newMap.infoWindow({ offset: "" }); + InfoWin.open(newMap.map, newMap.lngLat(val.lng, val.lat)); +}; onMounted(() => { newMap = new MapCustom({ dom: "mapcontainer" }); getLocateRecord(); @@ -119,19 +143,28 @@ onMounted(() => { height: 400px; flex-shrink: 0; position: relative; + display: flex; + flex-direction: column; .toolbox { - width: 32px; - height: 32px; - padding: 5px; + width: 30px; + height: 30px; + overflow: hidden; position: absolute; - right: 20px; - top: 20px; + right: 10px; + top: 10px; // padding: 5px; background: #fff; border-radius: 4px; z-index: 2; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + img { + width: 15px; + height: 15px; + } } } diff --git a/src/views/synthesizeManage/deviceInfo/deviceHistory.vue b/src/views/synthesizeManage/deviceInfo/deviceHistory.vue index f7ed9ae..1cafe3f 100644 --- a/src/views/synthesizeManage/deviceInfo/deviceHistory.vue +++ b/src/views/synthesizeManage/deviceInfo/deviceHistory.vue @@ -179,9 +179,9 @@ const getLocateRecord = () => { if (list.length < 50) { let marker: any = ""; if (index == 0) { - marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else if (index == list.length - 1) { marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); + } else if (index == list.length - 1) { + marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); } else { marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 }); } diff --git a/src/views/synthesizeManage/deviceInfo/index.vue b/src/views/synthesizeManage/deviceInfo/index.vue index ee1767e..f5deb1d 100644 --- a/src/views/synthesizeManage/deviceInfo/index.vue +++ b/src/views/synthesizeManage/deviceInfo/index.vue @@ -164,6 +164,7 @@ const viewHistory = (row: TDevice.IUseRecordRes) => { }; onUnmounted(() => { sessionStorage.removeItem("query"); + console.log(111); }); diff --git a/src/views/synthesizeManage/mapLocation/index.vue b/src/views/synthesizeManage/mapLocation/index.vue index 04da840..9177ef2 100644 --- a/src/views/synthesizeManage/mapLocation/index.vue +++ b/src/views/synthesizeManage/mapLocation/index.vue @@ -5,7 +5,9 @@ 时间区间：
-
+
+ +
@@ -26,11 +28,13 @@ import ViaMarker from "@/assets/img/via-marker.png"; import endMarker from "@/assets/img/end-marker.png"; import startMarker from "@/assets/img/start-marker.png"; import SectionDate from "@/components/sectionDate.vue"; +import LocationList from "@/components/locationList.vue"; const { query } = useRoute(); let d = new Date(); let newMap = null; let deviceInfo = ref({}); +let locationRecord = ref([]); let InfoWin = null; const params = reactive({ @@ -48,7 +52,7 @@ const sectionDateChange = (val) => { const getLocateRecord = () => { locateRecord(params).then((res) => { newMap.clearMap(); - + locationRecord.value = res; if (res && res.length) { let list = res; newMap.setCenter([list[0].lng, list[0].lat]); @@ -61,31 +65,32 @@ const getLocateRecord = () => { image: endMarker, size: [20, 29], }); - let ViaIcon = newMap.newIcon({ - image: ViaMarker, - size: [20, 29], - }); - + let markers = []; list.forEach((item, index) => { let marker: any = ""; if (index == 0) { - marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else if (index == list.length - 1) { marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 }); - } else { - marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 }); + } else if (index == list.length - 1) { + marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 }); + } + if (marker) { + marker.on("click", () => { + deviceInfo.value = item; + InfoWin = newMap.infoWindow(); + InfoWin.open(newMap.map, marker.getPosition()); + }); + markers.push(marker); } - marker.setMap(newMap.map); - marker.on("click", () => { - deviceInfo.value = item; - InfoWin = newMap.infoWindow(); - InfoWin.open(newMap.map, marker.getPosition()); - }); }); - } else { + newMap.map.add(markers); } }); }; +const handleClick = (val) => { + deviceInfo.value = val; + InfoWin = newMap.infoWindow({ offset: "" }); + InfoWin.open(newMap.map, newMap.lngLat(val.lng, val.lat)); +}; onMounted(() => { try { @@ -99,6 +104,11 @@ onMounted(() => {