diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 01fedde..d767c84 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -24,6 +24,7 @@
 })
 const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick'])
 const loading = ref(true)
+const publicPath = window.location.href.split('#')[0]
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
@@ -58,8 +59,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-const publicPath = import.meta.env.BASE_URL
-console.log(publicPath, 'publicPath')
+// const publicPath = import.meta.env.BASE_URL
+// console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -249,6 +250,7 @@
 // -------------------------------------点标记操作--------------------------------------------------
 // 点标记(一般点标记)数组
 const markerAllList = ref<any>([])
+const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
 // 添加点标记 (一般点标记)
 const addMarker = (data: any) => {
   /**
@@ -260,7 +262,7 @@
   var marker = new AMap.value.Marker({
     position: data.position,
     // 将 html 传给 content
-    content: data.content,
+    content: data.content || markerHtml,
     // 以 icon 的 [center bottom] 为原点
     offset: new AMap.value.Pixel(0, 0),
   })
@@ -294,7 +296,7 @@
 // 添加折线
 const addPolyline = (data: any) => {
   /**
-   * data
+   * data : {path: [],style: {}}
    * path: 折线点位数据  [[],[],[]]
    * style 折线样式
    *    style样式参考

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 01fedde..d767c84 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -24,6 +24,7 @@
 })
 const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick'])
 const loading = ref(true)
+const publicPath = window.location.href.split('#')[0]
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
@@ -58,8 +59,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-const publicPath = import.meta.env.BASE_URL
-console.log(publicPath, 'publicPath')
+// const publicPath = import.meta.env.BASE_URL
+// console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -249,6 +250,7 @@
 // -------------------------------------点标记操作--------------------------------------------------
 // 点标记(一般点标记)数组
 const markerAllList = ref<any>([])
+const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
 // 添加点标记 (一般点标记)
 const addMarker = (data: any) => {
   /**
@@ -260,7 +262,7 @@
   var marker = new AMap.value.Marker({
     position: data.position,
     // 将 html 传给 content
-    content: data.content,
+    content: data.content || markerHtml,
     // 以 icon 的 [center bottom] 为原点
     offset: new AMap.value.Pixel(0, 0),
   })
@@ -294,7 +296,7 @@
 // 添加折线
 const addPolyline = (data: any) => {
   /**
-   * data
+   * data : {path: [],style: {}}
    * path: 折线点位数据  [[],[],[]]
    * style 折线样式
    *    style样式参考
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
index d58d515..5979a62 100644
--- a/src/views/home/device/device/components/showPosition.vue
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -18,6 +18,7 @@
   dialogFormVisible.value = true
   if (completeMapFlag.value === true) {
     mapRef.value.map.setCenter(location)
+    mapRef.value.removeMarker()
     mapRef.value.addMarker({
       position: location,
       content: '',

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 01fedde..d767c84 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -24,6 +24,7 @@
 })
 const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick'])
 const loading = ref(true)
+const publicPath = window.location.href.split('#')[0]
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
@@ -58,8 +59,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-const publicPath = import.meta.env.BASE_URL
-console.log(publicPath, 'publicPath')
+// const publicPath = import.meta.env.BASE_URL
+// console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -249,6 +250,7 @@
 // -------------------------------------点标记操作--------------------------------------------------
 // 点标记(一般点标记)数组
 const markerAllList = ref<any>([])
+const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
 // 添加点标记 (一般点标记)
 const addMarker = (data: any) => {
   /**
@@ -260,7 +262,7 @@
   var marker = new AMap.value.Marker({
     position: data.position,
     // 将 html 传给 content
-    content: data.content,
+    content: data.content || markerHtml,
     // 以 icon 的 [center bottom] 为原点
     offset: new AMap.value.Pixel(0, 0),
   })
@@ -294,7 +296,7 @@
 // 添加折线
 const addPolyline = (data: any) => {
   /**
-   * data
+   * data : {path: [],style: {}}
    * path: 折线点位数据  [[],[],[]]
    * style 折线样式
    *    style样式参考
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
index d58d515..5979a62 100644
--- a/src/views/home/device/device/components/showPosition.vue
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -18,6 +18,7 @@
   dialogFormVisible.value = true
   if (completeMapFlag.value === true) {
     mapRef.value.map.setCenter(location)
+    mapRef.value.removeMarker()
     mapRef.value.addMarker({
       position: location,
       content: '',
diff --git a/src/views/home/operation/trajectory/detail.vue b/src/views/home/operation/trajectory/detail.vue
new file mode 100644
index 0000000..6b31c9f
--- /dev/null
+++ b/src/views/home/operation/trajectory/detail.vue
@@ -0,0 +1,191 @@
+<!--
+  Description: 设备轨迹展示详情
+  Author: 李亚光
+  Date: 2024-09-13
+ -->
+<script lang="ts" setup name="showDeviceTrajectory">
+import dayjs from 'dayjs'
+import AMap from '@/components/map/index.vue'
+import { shortcuts } from '@/utils/common'
+import { getTrajectoryDetail } from '@/api/home/operation/trajectory'
+const dialogFormVisible = ref(false) // 对话框是否显示
+const locationArr = ref<string[]>([])
+const mapRef = ref()
+const info = ref<any>({})
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+const loading = ref(true)
+const fetchData = (row: any) => {
+  if (!completeMapFlag.value) {
+    return
+  }
+  loading.value = true
+  getTrajectoryDetail({
+    begTime: listQuery.value.begTime,
+    endTime: listQuery.value.endTime,
+    devCode: row.devcode,
+  }).then((res) => {
+    loading.value = false
+    if (res.data.length >= 2) {
+      res.data.unshift({
+        ...res.data[0],
+        ALARM_TIME: res.data[0]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.startPosition || '',
+      })
+      res.data.push({
+        ...res.data[0],
+        ALARM_TIME: res.data[res.data.length - 1]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.currentPosition || '',
+      })
+      // 绘制轨迹
+      const trajectory = res.data.filter((item: any) => item.LONGITUDE_LATITUDE).map((item: any) => (item.LONGITUDE_LATITUDE || '').split(','))
+      console.log(trajectory, 'trajectory')
+      mapRef.value.addPolyline({
+        // path: [[116.307719, 39.979882], [116.295562, 39.978876]],
+        path: trajectory,
+        style: {
+          strokeColor: '#0D81F2',
+          strokeOpacity: 1,
+          strokeWeight: 3,
+        },
+      })
+      mapRef.value.map.setFitView()
+    }
+    else {
+      mapRef.value.removeMarker()
+      mapRef.value.removePolyline()
+    }
+    // 绘制起点终点，标记点
+    mapRef.value.addMarker({
+      position: (row.startPosition || '').split(','),
+      // position: [116.307719, 39.979882],
+      content: '<div class="icon-marker-dir icon-start">起</div>',
+      label: '',
+      data: res.data[0] || {},
+      type: 'start',
+    })
+    mapRef.value.addMarker({
+      position: (row.currentPosition || '').split(','),
+      // position: [116.295562, 39.978876],
+      content: '<div class="icon-marker-dir icon-end">终</div>',
+      label: '',
+      data: res.data[res.data.length - 1] || {},
+      type: 'end',
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 初始化对话框
+const initDialog = (row: any) => {
+  locationArr.value = []
+  datetimerange.value = datetimerange.value = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  info.value = row
+  dialogFormVisible.value = true
+  setTimeout(() => {
+    fetchData(info.value)
+  })
+}
+// 点击标记点
+const markerClick = (data: any) => {
+  var content = [
+    `<div><b>${data.data.type === 'start' ? '起点' : data.data.type === 'end' ? '终点' : ''}</b>`,
+    `<div>设备编号: ${data.data.data.DEVCODE}`,
+    `位置: ${data.data.data.LONGITUDE_LATITUDE}`,
+    `上报时间: ${data.data.data.ALARM_TIME} </div>`,
+  ]
+  const infoWindow = new mapRef.value.AMap.InfoWindow({
+    content: content.join('<br>'), // 传入字符串拼接的 DOM 元素
+  })
+  setTimeout(() => {
+    console.log(data.data, '1')
+    console.log(data.data.data?.LONGITUDE_LATITUDE.split(','))
+    infoWindow.open(data.map, data.data.data?.LONGITUDE_LATITUDE.split(',') || data.map.getCenter())
+  })
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (!locationArr.value.length && info.value.devcode) {
+    fetchData(info.value)
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="轨迹查看" append-to-body>
+    <search-area @search="fetchData(info)">
+      <search-item>
+        <el-date-picker
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="上报开始时间" end-placeholder="上报结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <div v-loading="loading" style="width: 100%;height: 300px;">
+      <a-map v-if="dialogFormVisible" ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
+
+<style lang="scss">
+.icon-marker-dir {
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  transform: translate(-9.5px, -14px) scale(1) rotate(0deg);
+  vertical-align: middle;
+}
+
+.icon-start {
+  background-color: #3d93fd;
+  border: 2px solid #0670f1;
+}
+
+.icon-end {
+  background-color: #f34234;
+  border: 2px solid #ff1303;
+}
+</style>

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 01fedde..d767c84 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -24,6 +24,7 @@
 })
 const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick'])
 const loading = ref(true)
+const publicPath = window.location.href.split('#')[0]
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
@@ -58,8 +59,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-const publicPath = import.meta.env.BASE_URL
-console.log(publicPath, 'publicPath')
+// const publicPath = import.meta.env.BASE_URL
+// console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -249,6 +250,7 @@
 // -------------------------------------点标记操作--------------------------------------------------
 // 点标记(一般点标记)数组
 const markerAllList = ref<any>([])
+const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
 // 添加点标记 (一般点标记)
 const addMarker = (data: any) => {
   /**
@@ -260,7 +262,7 @@
   var marker = new AMap.value.Marker({
     position: data.position,
     // 将 html 传给 content
-    content: data.content,
+    content: data.content || markerHtml,
     // 以 icon 的 [center bottom] 为原点
     offset: new AMap.value.Pixel(0, 0),
   })
@@ -294,7 +296,7 @@
 // 添加折线
 const addPolyline = (data: any) => {
   /**
-   * data
+   * data : {path: [],style: {}}
    * path: 折线点位数据  [[],[],[]]
    * style 折线样式
    *    style样式参考
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
index d58d515..5979a62 100644
--- a/src/views/home/device/device/components/showPosition.vue
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -18,6 +18,7 @@
   dialogFormVisible.value = true
   if (completeMapFlag.value === true) {
     mapRef.value.map.setCenter(location)
+    mapRef.value.removeMarker()
     mapRef.value.addMarker({
       position: location,
       content: '',
diff --git a/src/views/home/operation/trajectory/detail.vue b/src/views/home/operation/trajectory/detail.vue
new file mode 100644
index 0000000..6b31c9f
--- /dev/null
+++ b/src/views/home/operation/trajectory/detail.vue
@@ -0,0 +1,191 @@
+<!--
+  Description: 设备轨迹展示详情
+  Author: 李亚光
+  Date: 2024-09-13
+ -->
+<script lang="ts" setup name="showDeviceTrajectory">
+import dayjs from 'dayjs'
+import AMap from '@/components/map/index.vue'
+import { shortcuts } from '@/utils/common'
+import { getTrajectoryDetail } from '@/api/home/operation/trajectory'
+const dialogFormVisible = ref(false) // 对话框是否显示
+const locationArr = ref<string[]>([])
+const mapRef = ref()
+const info = ref<any>({})
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+const loading = ref(true)
+const fetchData = (row: any) => {
+  if (!completeMapFlag.value) {
+    return
+  }
+  loading.value = true
+  getTrajectoryDetail({
+    begTime: listQuery.value.begTime,
+    endTime: listQuery.value.endTime,
+    devCode: row.devcode,
+  }).then((res) => {
+    loading.value = false
+    if (res.data.length >= 2) {
+      res.data.unshift({
+        ...res.data[0],
+        ALARM_TIME: res.data[0]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.startPosition || '',
+      })
+      res.data.push({
+        ...res.data[0],
+        ALARM_TIME: res.data[res.data.length - 1]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.currentPosition || '',
+      })
+      // 绘制轨迹
+      const trajectory = res.data.filter((item: any) => item.LONGITUDE_LATITUDE).map((item: any) => (item.LONGITUDE_LATITUDE || '').split(','))
+      console.log(trajectory, 'trajectory')
+      mapRef.value.addPolyline({
+        // path: [[116.307719, 39.979882], [116.295562, 39.978876]],
+        path: trajectory,
+        style: {
+          strokeColor: '#0D81F2',
+          strokeOpacity: 1,
+          strokeWeight: 3,
+        },
+      })
+      mapRef.value.map.setFitView()
+    }
+    else {
+      mapRef.value.removeMarker()
+      mapRef.value.removePolyline()
+    }
+    // 绘制起点终点，标记点
+    mapRef.value.addMarker({
+      position: (row.startPosition || '').split(','),
+      // position: [116.307719, 39.979882],
+      content: '<div class="icon-marker-dir icon-start">起</div>',
+      label: '',
+      data: res.data[0] || {},
+      type: 'start',
+    })
+    mapRef.value.addMarker({
+      position: (row.currentPosition || '').split(','),
+      // position: [116.295562, 39.978876],
+      content: '<div class="icon-marker-dir icon-end">终</div>',
+      label: '',
+      data: res.data[res.data.length - 1] || {},
+      type: 'end',
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 初始化对话框
+const initDialog = (row: any) => {
+  locationArr.value = []
+  datetimerange.value = datetimerange.value = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  info.value = row
+  dialogFormVisible.value = true
+  setTimeout(() => {
+    fetchData(info.value)
+  })
+}
+// 点击标记点
+const markerClick = (data: any) => {
+  var content = [
+    `<div><b>${data.data.type === 'start' ? '起点' : data.data.type === 'end' ? '终点' : ''}</b>`,
+    `<div>设备编号: ${data.data.data.DEVCODE}`,
+    `位置: ${data.data.data.LONGITUDE_LATITUDE}`,
+    `上报时间: ${data.data.data.ALARM_TIME} </div>`,
+  ]
+  const infoWindow = new mapRef.value.AMap.InfoWindow({
+    content: content.join('<br>'), // 传入字符串拼接的 DOM 元素
+  })
+  setTimeout(() => {
+    console.log(data.data, '1')
+    console.log(data.data.data?.LONGITUDE_LATITUDE.split(','))
+    infoWindow.open(data.map, data.data.data?.LONGITUDE_LATITUDE.split(',') || data.map.getCenter())
+  })
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (!locationArr.value.length && info.value.devcode) {
+    fetchData(info.value)
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="轨迹查看" append-to-body>
+    <search-area @search="fetchData(info)">
+      <search-item>
+        <el-date-picker
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="上报开始时间" end-placeholder="上报结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <div v-loading="loading" style="width: 100%;height: 300px;">
+      <a-map v-if="dialogFormVisible" ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
+
+<style lang="scss">
+.icon-marker-dir {
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  transform: translate(-9.5px, -14px) scale(1) rotate(0deg);
+  vertical-align: middle;
+}
+
+.icon-start {
+  background-color: #3d93fd;
+  border: 2px solid #0670f1;
+}
+
+.icon-end {
+  background-color: #f34234;
+  border: 2px solid #ff1303;
+}
+</style>
diff --git a/src/views/home/operation/trajectory/index.vue b/src/views/home/operation/trajectory/index.vue
index 0a2feb3..9312fd7 100644
--- a/src/views/home/operation/trajectory/index.vue
+++ b/src/views/home/operation/trajectory/index.vue
@@ -5,8 +5,11 @@
  -->
 <script lang="ts" setup name="DeviceTrajectorySearch">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import deviceTrajectoryDetail from './detail.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type' // 设备类型列表
+import { getTrajectoryListPage } from '@/api/home/operation/trajectory'
 import { shortcuts } from '@/utils/common'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
 const deviceTypeList = ref<any[]>([])
 // 表格数据
 const list = ref([])
@@ -14,11 +17,11 @@
 // 初始展示列
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
-  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '管理单位', value: '', align: 'center' },
-  { text: '原始位置', value: '', align: 'center' },
-  { text: '当前位置', value: '', align: 'center' },
-  { text: '上报时间', value: '', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
+  { text: '原始位置', value: 'startPosition', align: 'center', isCustom: true },
+  { text: '当前位置', value: 'currentPosition', align: 'center', isCustom: true },
+  { text: '上报时间', value: 'createTime', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -31,38 +34,45 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  begTime: '',
+  endTime: '',
+  deptId: '',
+  devCode: '',
+  devTypeId: '',
 })
 // 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getTrajectoryListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    begTime: '',
+    endTime: '',
+    deptId: '',
+    devCode: '',
+    devTypeId: '',
   }
   fetchData()
 }
@@ -77,8 +87,22 @@
   fetchData()
 }
 // 查看轨迹详情
+const trajectoryRef = ref()
 const detail = (row: any) => {
-
+  trajectoryRef.value.initDialog(row)
+}
+// 查看位置
+const mapRef = ref()
+const viewPostion = (type: string, row: any) => {
+  if (type === '原始位置' && !row.startPosition) {
+    return
+  }
+  else if (type === '当前位置' && !row.currentPosition) {
+    return
+  }
+  // 展示位置
+  mapRef.value.initDialog(type === '原始位置' ? row.startPosition?.split(',') || [] : row.currentPosition?.split(',') || [])
+  console.log(type === '原始位置' ? row.startPosition?.split(',') || [] : row.currentPosition?.split(',') || [])
 }
 // 获取字典
 const fetchDict = async () => {
@@ -95,14 +119,18 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 展示坐标位置 -->
+    <show-position ref="mapRef" />
+    <!-- 展示轨迹 -->
+    <device-trajectory-detail ref="trajectoryRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="设备编号" clearable />
+        <el-input v-model="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="设备类型" clearable filterable class="select"
+          v-model="listQuery.devTypeId" placeholder="设备类型" clearable filterable class="select"
           style="width: 192px;"
         >
           <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
@@ -139,6 +167,13 @@
             </template>
           </el-table-column>
         </template>
+        <template #isCustom="{ scope, column }">
+          <span class="click" @click="viewPostion(column.text, scope.row)">
+            <span>
+              {{ column.text === '原始位置' ? scope.row.startPosition : scope.row.currentPosition }}
+            </span>
+          </span>
+        </template>
         <template #columns>
           <el-table-column label="操作" width="80" align="center">
             <template #default="scope">
@@ -152,3 +187,11 @@
     </table-container>
   </app-container>
 </template>
+
+<style lang="scss" scoped>
+.click {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 01fedde..d767c84 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -24,6 +24,7 @@
 })
 const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick'])
 const loading = ref(true)
+const publicPath = window.location.href.split('#')[0]
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
@@ -58,8 +59,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-const publicPath = import.meta.env.BASE_URL
-console.log(publicPath, 'publicPath')
+// const publicPath = import.meta.env.BASE_URL
+// console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -249,6 +250,7 @@
 // -------------------------------------点标记操作--------------------------------------------------
 // 点标记(一般点标记)数组
 const markerAllList = ref<any>([])
+const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
 // 添加点标记 (一般点标记)
 const addMarker = (data: any) => {
   /**
@@ -260,7 +262,7 @@
   var marker = new AMap.value.Marker({
     position: data.position,
     // 将 html 传给 content
-    content: data.content,
+    content: data.content || markerHtml,
     // 以 icon 的 [center bottom] 为原点
     offset: new AMap.value.Pixel(0, 0),
   })
@@ -294,7 +296,7 @@
 // 添加折线
 const addPolyline = (data: any) => {
   /**
-   * data
+   * data : {path: [],style: {}}
    * path: 折线点位数据  [[],[],[]]
    * style 折线样式
    *    style样式参考
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
index d58d515..5979a62 100644
--- a/src/views/home/device/device/components/showPosition.vue
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -18,6 +18,7 @@
   dialogFormVisible.value = true
   if (completeMapFlag.value === true) {
     mapRef.value.map.setCenter(location)
+    mapRef.value.removeMarker()
     mapRef.value.addMarker({
       position: location,
       content: '',
diff --git a/src/views/home/operation/trajectory/detail.vue b/src/views/home/operation/trajectory/detail.vue
new file mode 100644
index 0000000..6b31c9f
--- /dev/null
+++ b/src/views/home/operation/trajectory/detail.vue
@@ -0,0 +1,191 @@
+<!--
+  Description: 设备轨迹展示详情
+  Author: 李亚光
+  Date: 2024-09-13
+ -->
+<script lang="ts" setup name="showDeviceTrajectory">
+import dayjs from 'dayjs'
+import AMap from '@/components/map/index.vue'
+import { shortcuts } from '@/utils/common'
+import { getTrajectoryDetail } from '@/api/home/operation/trajectory'
+const dialogFormVisible = ref(false) // 对话框是否显示
+const locationArr = ref<string[]>([])
+const mapRef = ref()
+const info = ref<any>({})
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+const loading = ref(true)
+const fetchData = (row: any) => {
+  if (!completeMapFlag.value) {
+    return
+  }
+  loading.value = true
+  getTrajectoryDetail({
+    begTime: listQuery.value.begTime,
+    endTime: listQuery.value.endTime,
+    devCode: row.devcode,
+  }).then((res) => {
+    loading.value = false
+    if (res.data.length >= 2) {
+      res.data.unshift({
+        ...res.data[0],
+        ALARM_TIME: res.data[0]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.startPosition || '',
+      })
+      res.data.push({
+        ...res.data[0],
+        ALARM_TIME: res.data[res.data.length - 1]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.currentPosition || '',
+      })
+      // 绘制轨迹
+      const trajectory = res.data.filter((item: any) => item.LONGITUDE_LATITUDE).map((item: any) => (item.LONGITUDE_LATITUDE || '').split(','))
+      console.log(trajectory, 'trajectory')
+      mapRef.value.addPolyline({
+        // path: [[116.307719, 39.979882], [116.295562, 39.978876]],
+        path: trajectory,
+        style: {
+          strokeColor: '#0D81F2',
+          strokeOpacity: 1,
+          strokeWeight: 3,
+        },
+      })
+      mapRef.value.map.setFitView()
+    }
+    else {
+      mapRef.value.removeMarker()
+      mapRef.value.removePolyline()
+    }
+    // 绘制起点终点，标记点
+    mapRef.value.addMarker({
+      position: (row.startPosition || '').split(','),
+      // position: [116.307719, 39.979882],
+      content: '<div class="icon-marker-dir icon-start">起</div>',
+      label: '',
+      data: res.data[0] || {},
+      type: 'start',
+    })
+    mapRef.value.addMarker({
+      position: (row.currentPosition || '').split(','),
+      // position: [116.295562, 39.978876],
+      content: '<div class="icon-marker-dir icon-end">终</div>',
+      label: '',
+      data: res.data[res.data.length - 1] || {},
+      type: 'end',
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 初始化对话框
+const initDialog = (row: any) => {
+  locationArr.value = []
+  datetimerange.value = datetimerange.value = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  info.value = row
+  dialogFormVisible.value = true
+  setTimeout(() => {
+    fetchData(info.value)
+  })
+}
+// 点击标记点
+const markerClick = (data: any) => {
+  var content = [
+    `<div><b>${data.data.type === 'start' ? '起点' : data.data.type === 'end' ? '终点' : ''}</b>`,
+    `<div>设备编号: ${data.data.data.DEVCODE}`,
+    `位置: ${data.data.data.LONGITUDE_LATITUDE}`,
+    `上报时间: ${data.data.data.ALARM_TIME} </div>`,
+  ]
+  const infoWindow = new mapRef.value.AMap.InfoWindow({
+    content: content.join('<br>'), // 传入字符串拼接的 DOM 元素
+  })
+  setTimeout(() => {
+    console.log(data.data, '1')
+    console.log(data.data.data?.LONGITUDE_LATITUDE.split(','))
+    infoWindow.open(data.map, data.data.data?.LONGITUDE_LATITUDE.split(',') || data.map.getCenter())
+  })
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (!locationArr.value.length && info.value.devcode) {
+    fetchData(info.value)
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="轨迹查看" append-to-body>
+    <search-area @search="fetchData(info)">
+      <search-item>
+        <el-date-picker
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="上报开始时间" end-placeholder="上报结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <div v-loading="loading" style="width: 100%;height: 300px;">
+      <a-map v-if="dialogFormVisible" ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
+
+<style lang="scss">
+.icon-marker-dir {
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  transform: translate(-9.5px, -14px) scale(1) rotate(0deg);
+  vertical-align: middle;
+}
+
+.icon-start {
+  background-color: #3d93fd;
+  border: 2px solid #0670f1;
+}
+
+.icon-end {
+  background-color: #f34234;
+  border: 2px solid #ff1303;
+}
+</style>
diff --git a/src/views/home/operation/trajectory/index.vue b/src/views/home/operation/trajectory/index.vue
index 0a2feb3..9312fd7 100644
--- a/src/views/home/operation/trajectory/index.vue
+++ b/src/views/home/operation/trajectory/index.vue
@@ -5,8 +5,11 @@
  -->
 <script lang="ts" setup name="DeviceTrajectorySearch">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import deviceTrajectoryDetail from './detail.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type' // 设备类型列表
+import { getTrajectoryListPage } from '@/api/home/operation/trajectory'
 import { shortcuts } from '@/utils/common'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
 const deviceTypeList = ref<any[]>([])
 // 表格数据
 const list = ref([])
@@ -14,11 +17,11 @@
 // 初始展示列
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
-  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '管理单位', value: '', align: 'center' },
-  { text: '原始位置', value: '', align: 'center' },
-  { text: '当前位置', value: '', align: 'center' },
-  { text: '上报时间', value: '', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
+  { text: '原始位置', value: 'startPosition', align: 'center', isCustom: true },
+  { text: '当前位置', value: 'currentPosition', align: 'center', isCustom: true },
+  { text: '上报时间', value: 'createTime', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -31,38 +34,45 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  begTime: '',
+  endTime: '',
+  deptId: '',
+  devCode: '',
+  devTypeId: '',
 })
 // 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getTrajectoryListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    begTime: '',
+    endTime: '',
+    deptId: '',
+    devCode: '',
+    devTypeId: '',
   }
   fetchData()
 }
@@ -77,8 +87,22 @@
   fetchData()
 }
 // 查看轨迹详情
+const trajectoryRef = ref()
 const detail = (row: any) => {
-
+  trajectoryRef.value.initDialog(row)
+}
+// 查看位置
+const mapRef = ref()
+const viewPostion = (type: string, row: any) => {
+  if (type === '原始位置' && !row.startPosition) {
+    return
+  }
+  else if (type === '当前位置' && !row.currentPosition) {
+    return
+  }
+  // 展示位置
+  mapRef.value.initDialog(type === '原始位置' ? row.startPosition?.split(',') || [] : row.currentPosition?.split(',') || [])
+  console.log(type === '原始位置' ? row.startPosition?.split(',') || [] : row.currentPosition?.split(',') || [])
 }
 // 获取字典
 const fetchDict = async () => {
@@ -95,14 +119,18 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 展示坐标位置 -->
+    <show-position ref="mapRef" />
+    <!-- 展示轨迹 -->
+    <device-trajectory-detail ref="trajectoryRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="设备编号" clearable />
+        <el-input v-model="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="设备类型" clearable filterable class="select"
+          v-model="listQuery.devTypeId" placeholder="设备类型" clearable filterable class="select"
           style="width: 192px;"
         >
           <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
@@ -139,6 +167,13 @@
             </template>
           </el-table-column>
         </template>
+        <template #isCustom="{ scope, column }">
+          <span class="click" @click="viewPostion(column.text, scope.row)">
+            <span>
+              {{ column.text === '原始位置' ? scope.row.startPosition : scope.row.currentPosition }}
+            </span>
+          </span>
+        </template>
         <template #columns>
           <el-table-column label="操作" width="80" align="center">
             <template #default="scope">
@@ -152,3 +187,11 @@
     </table-container>
   </app-container>
 </template>
+
+<style lang="scss" scoped>
+.click {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/control/index.vue b/src/views/home/station/control/index.vue
index ea082ef..4510922 100644
--- a/src/views/home/station/control/index.vue
+++ b/src/views/home/station/control/index.vue
@@ -6,6 +6,7 @@
 <script lang="ts" setup name="StationDeviceControl">
 import dayjs from 'dayjs'
 import control from './components/control.vue'
+import { getDeptStation } from '@/api/home/station/station'
 import { toTreeList } from '@/utils/structure'
 import { getDeptTreeList } from '@/api/system/dept'
 
@@ -19,14 +20,31 @@
 
 // 点击树形结构
 const handleNodeClick = (data: any) => {
-
+  if (data.id === 'station') {
+    // 点击的设备(加载视频)
+    console.log('station')
+  }
 }
 // 获取组织列表树数据
 const fetchTreeData = () => {
   loadingTree.value = true
   getDeptTreeList({ deptType: '' }).then((res) => {
-    treeData.value = toTreeList(res.data, '0', true)
-    loadingTree.value = false
+    getDeptStation({}).then((res1) => {
+      const data = res1.data.map((item: any) => ({
+        ...item,
+        checked: false,
+        code: '',
+        id: 'station',
+        name: `${item.LEDGER_NAME}云台`,
+        open: false,
+        pCodes: '',
+        pid: item.DEPTID,
+        value: '',
+      }))
+      console.log(data)
+      treeData.value = toTreeList([...res.data, ...data], '0', true)
+      loadingTree.value = false
+    })
   }).catch(() => {
     loadingTree.value = false
   })

diff --git a/public/image/mark_bs.png b/public/image/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/public/image/mark_bs.png
Binary files differ
diff --git a/src/api/home/operation/trajectory.ts b/src/api/home/operation/trajectory.ts
new file mode 100644
index 0000000..7316dc0
--- /dev/null
+++ b/src/api/home/operation/trajectory.ts
@@ -0,0 +1,21 @@
+/**
+ * 轨迹查询
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getTrajectoryListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/tracksList?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function getTrajectoryDetail(data: any) {
+  return request({
+    url: '/system/alarmRecords/viewPlace',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index ce798e9..19375f6 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -30,3 +30,11 @@
     },
   })
 }
+// 获取不同公司的设备（云台）
+export function getDeptStation(data: any) {
+  return request({
+    url: '/monitor/station/treeList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/dir-marker.png b/src/assets/images/dir-marker.png
new file mode 100644
index 0000000..9784f36
--- /dev/null
+++ b/src/assets/images/dir-marker.png
Binary files differ
diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000..4f68e9a
--- /dev/null
+++ b/src/assets/images/mark_bs.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 01fedde..d767c84 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -24,6 +24,7 @@
 })
 const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick'])
 const loading = ref(true)
+const publicPath = window.location.href.split('#')[0]
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
@@ -58,8 +59,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-const publicPath = import.meta.env.BASE_URL
-console.log(publicPath, 'publicPath')
+// const publicPath = import.meta.env.BASE_URL
+// console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -249,6 +250,7 @@
 // -------------------------------------点标记操作--------------------------------------------------
 // 点标记(一般点标记)数组
 const markerAllList = ref<any>([])
+const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
 // 添加点标记 (一般点标记)
 const addMarker = (data: any) => {
   /**
@@ -260,7 +262,7 @@
   var marker = new AMap.value.Marker({
     position: data.position,
     // 将 html 传给 content
-    content: data.content,
+    content: data.content || markerHtml,
     // 以 icon 的 [center bottom] 为原点
     offset: new AMap.value.Pixel(0, 0),
   })
@@ -294,7 +296,7 @@
 // 添加折线
 const addPolyline = (data: any) => {
   /**
-   * data
+   * data : {path: [],style: {}}
    * path: 折线点位数据  [[],[],[]]
    * style 折线样式
    *    style样式参考
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
index d58d515..5979a62 100644
--- a/src/views/home/device/device/components/showPosition.vue
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -18,6 +18,7 @@
   dialogFormVisible.value = true
   if (completeMapFlag.value === true) {
     mapRef.value.map.setCenter(location)
+    mapRef.value.removeMarker()
     mapRef.value.addMarker({
       position: location,
       content: '',
diff --git a/src/views/home/operation/trajectory/detail.vue b/src/views/home/operation/trajectory/detail.vue
new file mode 100644
index 0000000..6b31c9f
--- /dev/null
+++ b/src/views/home/operation/trajectory/detail.vue
@@ -0,0 +1,191 @@
+<!--
+  Description: 设备轨迹展示详情
+  Author: 李亚光
+  Date: 2024-09-13
+ -->
+<script lang="ts" setup name="showDeviceTrajectory">
+import dayjs from 'dayjs'
+import AMap from '@/components/map/index.vue'
+import { shortcuts } from '@/utils/common'
+import { getTrajectoryDetail } from '@/api/home/operation/trajectory'
+const dialogFormVisible = ref(false) // 对话框是否显示
+const locationArr = ref<string[]>([])
+const mapRef = ref()
+const info = ref<any>({})
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+const loading = ref(true)
+const fetchData = (row: any) => {
+  if (!completeMapFlag.value) {
+    return
+  }
+  loading.value = true
+  getTrajectoryDetail({
+    begTime: listQuery.value.begTime,
+    endTime: listQuery.value.endTime,
+    devCode: row.devcode,
+  }).then((res) => {
+    loading.value = false
+    if (res.data.length >= 2) {
+      res.data.unshift({
+        ...res.data[0],
+        ALARM_TIME: res.data[0]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.startPosition || '',
+      })
+      res.data.push({
+        ...res.data[0],
+        ALARM_TIME: res.data[res.data.length - 1]?.ALARM_TIME || '',
+        LONGITUDE_LATITUDE: row.currentPosition || '',
+      })
+      // 绘制轨迹
+      const trajectory = res.data.filter((item: any) => item.LONGITUDE_LATITUDE).map((item: any) => (item.LONGITUDE_LATITUDE || '').split(','))
+      console.log(trajectory, 'trajectory')
+      mapRef.value.addPolyline({
+        // path: [[116.307719, 39.979882], [116.295562, 39.978876]],
+        path: trajectory,
+        style: {
+          strokeColor: '#0D81F2',
+          strokeOpacity: 1,
+          strokeWeight: 3,
+        },
+      })
+      mapRef.value.map.setFitView()
+    }
+    else {
+      mapRef.value.removeMarker()
+      mapRef.value.removePolyline()
+    }
+    // 绘制起点终点，标记点
+    mapRef.value.addMarker({
+      position: (row.startPosition || '').split(','),
+      // position: [116.307719, 39.979882],
+      content: '<div class="icon-marker-dir icon-start">起</div>',
+      label: '',
+      data: res.data[0] || {},
+      type: 'start',
+    })
+    mapRef.value.addMarker({
+      position: (row.currentPosition || '').split(','),
+      // position: [116.295562, 39.978876],
+      content: '<div class="icon-marker-dir icon-end">终</div>',
+      label: '',
+      data: res.data[res.data.length - 1] || {},
+      type: 'end',
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 初始化对话框
+const initDialog = (row: any) => {
+  locationArr.value = []
+  datetimerange.value = datetimerange.value = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  info.value = row
+  dialogFormVisible.value = true
+  setTimeout(() => {
+    fetchData(info.value)
+  })
+}
+// 点击标记点
+const markerClick = (data: any) => {
+  var content = [
+    `<div><b>${data.data.type === 'start' ? '起点' : data.data.type === 'end' ? '终点' : ''}</b>`,
+    `<div>设备编号: ${data.data.data.DEVCODE}`,
+    `位置: ${data.data.data.LONGITUDE_LATITUDE}`,
+    `上报时间: ${data.data.data.ALARM_TIME} </div>`,
+  ]
+  const infoWindow = new mapRef.value.AMap.InfoWindow({
+    content: content.join('<br>'), // 传入字符串拼接的 DOM 元素
+  })
+  setTimeout(() => {
+    console.log(data.data, '1')
+    console.log(data.data.data?.LONGITUDE_LATITUDE.split(','))
+    infoWindow.open(data.map, data.data.data?.LONGITUDE_LATITUDE.split(',') || data.map.getCenter())
+  })
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (!locationArr.value.length && info.value.devcode) {
+    fetchData(info.value)
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="轨迹查看" append-to-body>
+    <search-area @search="fetchData(info)">
+      <search-item>
+        <el-date-picker
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="上报开始时间" end-placeholder="上报结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <div v-loading="loading" style="width: 100%;height: 300px;">
+      <a-map v-if="dialogFormVisible" ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
+
+<style lang="scss">
+.icon-marker-dir {
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  transform: translate(-9.5px, -14px) scale(1) rotate(0deg);
+  vertical-align: middle;
+}
+
+.icon-start {
+  background-color: #3d93fd;
+  border: 2px solid #0670f1;
+}
+
+.icon-end {
+  background-color: #f34234;
+  border: 2px solid #ff1303;
+}
+</style>
diff --git a/src/views/home/operation/trajectory/index.vue b/src/views/home/operation/trajectory/index.vue
index 0a2feb3..9312fd7 100644
--- a/src/views/home/operation/trajectory/index.vue
+++ b/src/views/home/operation/trajectory/index.vue
@@ -5,8 +5,11 @@
  -->
 <script lang="ts" setup name="DeviceTrajectorySearch">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import deviceTrajectoryDetail from './detail.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type' // 设备类型列表
+import { getTrajectoryListPage } from '@/api/home/operation/trajectory'
 import { shortcuts } from '@/utils/common'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
 const deviceTypeList = ref<any[]>([])
 // 表格数据
 const list = ref([])
@@ -14,11 +17,11 @@
 // 初始展示列
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
-  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '管理单位', value: '', align: 'center' },
-  { text: '原始位置', value: '', align: 'center' },
-  { text: '当前位置', value: '', align: 'center' },
-  { text: '上报时间', value: '', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
+  { text: '原始位置', value: 'startPosition', align: 'center', isCustom: true },
+  { text: '当前位置', value: 'currentPosition', align: 'center', isCustom: true },
+  { text: '上报时间', value: 'createTime', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -31,38 +34,45 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  begTime: '',
+  endTime: '',
+  deptId: '',
+  devCode: '',
+  devTypeId: '',
 })
 // 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
+    }
+  }
+})
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getTrajectoryListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    begTime: '',
+    endTime: '',
+    deptId: '',
+    devCode: '',
+    devTypeId: '',
   }
   fetchData()
 }
@@ -77,8 +87,22 @@
   fetchData()
 }
 // 查看轨迹详情
+const trajectoryRef = ref()
 const detail = (row: any) => {
-
+  trajectoryRef.value.initDialog(row)
+}
+// 查看位置
+const mapRef = ref()
+const viewPostion = (type: string, row: any) => {
+  if (type === '原始位置' && !row.startPosition) {
+    return
+  }
+  else if (type === '当前位置' && !row.currentPosition) {
+    return
+  }
+  // 展示位置
+  mapRef.value.initDialog(type === '原始位置' ? row.startPosition?.split(',') || [] : row.currentPosition?.split(',') || [])
+  console.log(type === '原始位置' ? row.startPosition?.split(',') || [] : row.currentPosition?.split(',') || [])
 }
 // 获取字典
 const fetchDict = async () => {
@@ -95,14 +119,18 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 展示坐标位置 -->
+    <show-position ref="mapRef" />
+    <!-- 展示轨迹 -->
+    <device-trajectory-detail ref="trajectoryRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="设备编号" clearable />
+        <el-input v-model="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="设备类型" clearable filterable class="select"
+          v-model="listQuery.devTypeId" placeholder="设备类型" clearable filterable class="select"
           style="width: 192px;"
         >
           <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
@@ -139,6 +167,13 @@
             </template>
           </el-table-column>
         </template>
+        <template #isCustom="{ scope, column }">
+          <span class="click" @click="viewPostion(column.text, scope.row)">
+            <span>
+              {{ column.text === '原始位置' ? scope.row.startPosition : scope.row.currentPosition }}
+            </span>
+          </span>
+        </template>
         <template #columns>
           <el-table-column label="操作" width="80" align="center">
             <template #default="scope">
@@ -152,3 +187,11 @@
     </table-container>
   </app-container>
 </template>
+
+<style lang="scss" scoped>
+.click {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/control/index.vue b/src/views/home/station/control/index.vue
index ea082ef..4510922 100644
--- a/src/views/home/station/control/index.vue
+++ b/src/views/home/station/control/index.vue
@@ -6,6 +6,7 @@
 <script lang="ts" setup name="StationDeviceControl">
 import dayjs from 'dayjs'
 import control from './components/control.vue'
+import { getDeptStation } from '@/api/home/station/station'
 import { toTreeList } from '@/utils/structure'
 import { getDeptTreeList } from '@/api/system/dept'
 
@@ -19,14 +20,31 @@
 
 // 点击树形结构
 const handleNodeClick = (data: any) => {
-
+  if (data.id === 'station') {
+    // 点击的设备(加载视频)
+    console.log('station')
+  }
 }
 // 获取组织列表树数据
 const fetchTreeData = () => {
   loadingTree.value = true
   getDeptTreeList({ deptType: '' }).then((res) => {
-    treeData.value = toTreeList(res.data, '0', true)
-    loadingTree.value = false
+    getDeptStation({}).then((res1) => {
+      const data = res1.data.map((item: any) => ({
+        ...item,
+        checked: false,
+        code: '',
+        id: 'station',
+        name: `${item.LEDGER_NAME}云台`,
+        open: false,
+        pCodes: '',
+        pid: item.DEPTID,
+        value: '',
+      }))
+      console.log(data)
+      treeData.value = toTreeList([...res.data, ...data], '0', true)
+      loadingTree.value = false
+    })
   }).catch(() => {
     loadingTree.value = false
   })
diff --git a/src/views/home/station/video/index.vue b/src/views/home/station/video/index.vue
index 061afd1..0242c8f 100644
--- a/src/views/home/station/video/index.vue
+++ b/src/views/home/station/video/index.vue
@@ -6,7 +6,7 @@
 <script lang="ts" setup name="StationDeviceVideo">
 import { toTreeList } from '@/utils/structure'
 import { getDeptTreeList } from '@/api/system/dept'
-
+import { getDeptStation } from '@/api/home/station/station'
 const loadingTree = ref<boolean>(false)
 
 const defaultProps = {
@@ -17,14 +17,31 @@
 
 // 点击树形结构
 const handleNodeClick = (data: any) => {
-
+  if (data.id === 'station') {
+    // 点击的设备(加载视频)
+    console.log('station')
+  }
 }
 // 获取组织列表树数据
 const fetchTreeData = () => {
   loadingTree.value = true
   getDeptTreeList({ deptType: '' }).then((res) => {
-    treeData.value = toTreeList(res.data, '0', true)
-    loadingTree.value = false
+    getDeptStation({}).then((res1) => {
+      const data = res1.data.map((item: any) => ({
+        ...item,
+        checked: false,
+        code: '',
+        id: 'station',
+        name: `${item.LEDGER_NAME}云台`,
+        open: false,
+        pCodes: '',
+        pid: item.DEPTID,
+        value: '',
+      }))
+      console.log(data)
+      treeData.value = toTreeList([...res.data, ...data], '0', true)
+      loadingTree.value = false
+    })
   }).catch(() => {
     loadingTree.value = false
   })
@@ -58,7 +75,10 @@
       <div ref="tableContainer" class="table">
         <el-card class="box-card" shadow="always">
           <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
-            <video v-for="item in 4" :key="item" class="video" :class="`${item <= 2 ? 'mar-bottom' : ''}`" src="" controls autoplay />
+            <video
+              v-for="item in 4" :key="item" class="video" :class="`${item <= 2 ? 'mar-bottom' : ''}`" src=""
+              controls autoplay
+            />
           </div>
         </el-card>
       </div>