diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>
diff --git a/src/components/map/components/track.vue b/src/components/map/components/track.vue
new file mode 100644
index 0000000..4835e3e
--- /dev/null
+++ b/src/components/map/components/track.vue
@@ -0,0 +1,136 @@
+<!-- 轨迹详情弹窗 -->
+<script lang="ts" setup name="TrackDialog">
+import { Clock, LocationInformation, Odometer } from '@element-plus/icons-vue'
+import useMapStore from '@/store/modules/map'
+const dialogVisible = ref(false)
+const mapStore = useMapStore() // 地图仓库
+const data = ref([])
+const initDialog = (list: any[]) => {
+  dialogVisible.value = true
+  data.value = list
+}
+const cancel = () => {
+  dialogVisible.value = false
+}
+defineExpose({ initDialog, cancel })
+const showTrack = () => {
+// 将数据存储到仓库中，首页绘制需要使用
+  mapStore.setDetailList(data.value)
+}
+</script>
+
+<template>
+  <div v-if="dialogVisible " class="container-track">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+        巡检轨迹时间轴
+        <el-button size="small" type="warning" style="margin-left: 10px;" @click="showTrack">
+          显示轨迹
+        </el-button>
+      </div>
+      <div class="close" @click="cancel">
+        x
+      </div>
+    </div>
+    <el-scrollbar style="height: 470px; margin-top: 10px;">
+      <!-- 具体要包裹的内容 -->
+      <el-timeline>
+        <el-timeline-item
+          v-for="(content, index) in data"
+          :key="index"
+          :timestamp="content.time"
+          color="#fff"
+          :hide-timestamp="true"
+        >
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><clock style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              {{ content.time }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><odometer style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.value }}(ppm·m)
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><bell style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.isAlarm }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><location-information style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="content.position"
+                placement="bottom"
+              >
+                {{ content.position }}
+              </el-tooltip>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.red {
+  color: #9f1919;
+  font-weight: 700;
+}
+
+.content-scroll {
+  color: #fff;
+  display: flex;
+
+  .value {
+    margin-left: 10px;
+    width: 270px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.container-track {
+  color: #fff;
+  width: 400px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>
diff --git a/src/components/map/components/track.vue b/src/components/map/components/track.vue
new file mode 100644
index 0000000..4835e3e
--- /dev/null
+++ b/src/components/map/components/track.vue
@@ -0,0 +1,136 @@
+<!-- 轨迹详情弹窗 -->
+<script lang="ts" setup name="TrackDialog">
+import { Clock, LocationInformation, Odometer } from '@element-plus/icons-vue'
+import useMapStore from '@/store/modules/map'
+const dialogVisible = ref(false)
+const mapStore = useMapStore() // 地图仓库
+const data = ref([])
+const initDialog = (list: any[]) => {
+  dialogVisible.value = true
+  data.value = list
+}
+const cancel = () => {
+  dialogVisible.value = false
+}
+defineExpose({ initDialog, cancel })
+const showTrack = () => {
+// 将数据存储到仓库中，首页绘制需要使用
+  mapStore.setDetailList(data.value)
+}
+</script>
+
+<template>
+  <div v-if="dialogVisible " class="container-track">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+        巡检轨迹时间轴
+        <el-button size="small" type="warning" style="margin-left: 10px;" @click="showTrack">
+          显示轨迹
+        </el-button>
+      </div>
+      <div class="close" @click="cancel">
+        x
+      </div>
+    </div>
+    <el-scrollbar style="height: 470px; margin-top: 10px;">
+      <!-- 具体要包裹的内容 -->
+      <el-timeline>
+        <el-timeline-item
+          v-for="(content, index) in data"
+          :key="index"
+          :timestamp="content.time"
+          color="#fff"
+          :hide-timestamp="true"
+        >
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><clock style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              {{ content.time }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><odometer style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.value }}(ppm·m)
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><bell style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.isAlarm }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><location-information style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="content.position"
+                placement="bottom"
+              >
+                {{ content.position }}
+              </el-tooltip>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.red {
+  color: #9f1919;
+  font-weight: 700;
+}
+
+.content-scroll {
+  color: #fff;
+  display: flex;
+
+  .value {
+    margin-left: 10px;
+    width: 270px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.container-track {
+  color: #fff;
+  width: 400px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/map/infoDialog.vue b/src/components/map/infoDialog.vue
new file mode 100644
index 0000000..d349809
--- /dev/null
+++ b/src/components/map/infoDialog.vue
@@ -0,0 +1,95 @@
+<!--
+  Description: 高德地图信息窗体
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import gas from './components/gas.vue'
+import car from './components/car.vue'
+import taskDetail from './components/taskDetail.vue'
+const overlay = ref()
+const infoWindow = ref()
+// 节点信息
+const info = ref()
+// 弹窗类型
+const type = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  // 节点信息
+  info.value = e.info
+  // 弹窗类型
+  type.value = e.info.dialog
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container" :class="type">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <gas v-if="type === 'gas'" :info="info" />
+    <car v-if="type === 'car'" :info="info" />
+    <task v-if="type === 'task'" :info="info" />
+    <task-detail v-if="type === 'taskDetail'" :info="info" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gas {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.car {
+  width: 300px !important;
+  height: 200px !important;
+}
+
+.task {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.taskDetail {
+  height: 200px !important;
+}
+
+.container {
+  color: #fff;
+  width: 470px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>
diff --git a/src/components/map/components/track.vue b/src/components/map/components/track.vue
new file mode 100644
index 0000000..4835e3e
--- /dev/null
+++ b/src/components/map/components/track.vue
@@ -0,0 +1,136 @@
+<!-- 轨迹详情弹窗 -->
+<script lang="ts" setup name="TrackDialog">
+import { Clock, LocationInformation, Odometer } from '@element-plus/icons-vue'
+import useMapStore from '@/store/modules/map'
+const dialogVisible = ref(false)
+const mapStore = useMapStore() // 地图仓库
+const data = ref([])
+const initDialog = (list: any[]) => {
+  dialogVisible.value = true
+  data.value = list
+}
+const cancel = () => {
+  dialogVisible.value = false
+}
+defineExpose({ initDialog, cancel })
+const showTrack = () => {
+// 将数据存储到仓库中，首页绘制需要使用
+  mapStore.setDetailList(data.value)
+}
+</script>
+
+<template>
+  <div v-if="dialogVisible " class="container-track">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+        巡检轨迹时间轴
+        <el-button size="small" type="warning" style="margin-left: 10px;" @click="showTrack">
+          显示轨迹
+        </el-button>
+      </div>
+      <div class="close" @click="cancel">
+        x
+      </div>
+    </div>
+    <el-scrollbar style="height: 470px; margin-top: 10px;">
+      <!-- 具体要包裹的内容 -->
+      <el-timeline>
+        <el-timeline-item
+          v-for="(content, index) in data"
+          :key="index"
+          :timestamp="content.time"
+          color="#fff"
+          :hide-timestamp="true"
+        >
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><clock style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              {{ content.time }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><odometer style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.value }}(ppm·m)
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><bell style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.isAlarm }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><location-information style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="content.position"
+                placement="bottom"
+              >
+                {{ content.position }}
+              </el-tooltip>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.red {
+  color: #9f1919;
+  font-weight: 700;
+}
+
+.content-scroll {
+  color: #fff;
+  display: flex;
+
+  .value {
+    margin-left: 10px;
+    width: 270px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.container-track {
+  color: #fff;
+  width: 400px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/map/infoDialog.vue b/src/components/map/infoDialog.vue
new file mode 100644
index 0000000..d349809
--- /dev/null
+++ b/src/components/map/infoDialog.vue
@@ -0,0 +1,95 @@
+<!--
+  Description: 高德地图信息窗体
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import gas from './components/gas.vue'
+import car from './components/car.vue'
+import taskDetail from './components/taskDetail.vue'
+const overlay = ref()
+const infoWindow = ref()
+// 节点信息
+const info = ref()
+// 弹窗类型
+const type = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  // 节点信息
+  info.value = e.info
+  // 弹窗类型
+  type.value = e.info.dialog
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container" :class="type">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <gas v-if="type === 'gas'" :info="info" />
+    <car v-if="type === 'car'" :info="info" />
+    <task v-if="type === 'task'" :info="info" />
+    <task-detail v-if="type === 'taskDetail'" :info="info" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gas {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.car {
+  width: 300px !important;
+  height: 200px !important;
+}
+
+.task {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.taskDetail {
+  height: 200px !important;
+}
+
+.container {
+  color: #fff;
+  width: 470px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/store/modules/map.ts b/src/store/modules/map.ts
index 396efbc..f250790 100644
--- a/src/store/modules/map.ts
+++ b/src/store/modules/map.ts
@@ -7,9 +7,14 @@
     state: () => ({
       amapSecurityCode: '182a2c5889f7fe6d90546d9b8f4781ad', // 安全密钥
       amapKey: 'e1733551f35b56f6d8e9c0a9d4c2523b', // 高德地图key
+      detailList: [] as any[], // 轨迹信息
     }),
     getters: {},
-    actions: {},
+    actions: {
+      setDetailList(data: any[]) {
+        this.detailList = data
+      },
+    },
   },
 )
 

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>
diff --git a/src/components/map/components/track.vue b/src/components/map/components/track.vue
new file mode 100644
index 0000000..4835e3e
--- /dev/null
+++ b/src/components/map/components/track.vue
@@ -0,0 +1,136 @@
+<!-- 轨迹详情弹窗 -->
+<script lang="ts" setup name="TrackDialog">
+import { Clock, LocationInformation, Odometer } from '@element-plus/icons-vue'
+import useMapStore from '@/store/modules/map'
+const dialogVisible = ref(false)
+const mapStore = useMapStore() // 地图仓库
+const data = ref([])
+const initDialog = (list: any[]) => {
+  dialogVisible.value = true
+  data.value = list
+}
+const cancel = () => {
+  dialogVisible.value = false
+}
+defineExpose({ initDialog, cancel })
+const showTrack = () => {
+// 将数据存储到仓库中，首页绘制需要使用
+  mapStore.setDetailList(data.value)
+}
+</script>
+
+<template>
+  <div v-if="dialogVisible " class="container-track">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+        巡检轨迹时间轴
+        <el-button size="small" type="warning" style="margin-left: 10px;" @click="showTrack">
+          显示轨迹
+        </el-button>
+      </div>
+      <div class="close" @click="cancel">
+        x
+      </div>
+    </div>
+    <el-scrollbar style="height: 470px; margin-top: 10px;">
+      <!-- 具体要包裹的内容 -->
+      <el-timeline>
+        <el-timeline-item
+          v-for="(content, index) in data"
+          :key="index"
+          :timestamp="content.time"
+          color="#fff"
+          :hide-timestamp="true"
+        >
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><clock style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              {{ content.time }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><odometer style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.value }}(ppm·m)
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><bell style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.isAlarm }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><location-information style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="content.position"
+                placement="bottom"
+              >
+                {{ content.position }}
+              </el-tooltip>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.red {
+  color: #9f1919;
+  font-weight: 700;
+}
+
+.content-scroll {
+  color: #fff;
+  display: flex;
+
+  .value {
+    margin-left: 10px;
+    width: 270px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.container-track {
+  color: #fff;
+  width: 400px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/map/infoDialog.vue b/src/components/map/infoDialog.vue
new file mode 100644
index 0000000..d349809
--- /dev/null
+++ b/src/components/map/infoDialog.vue
@@ -0,0 +1,95 @@
+<!--
+  Description: 高德地图信息窗体
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import gas from './components/gas.vue'
+import car from './components/car.vue'
+import taskDetail from './components/taskDetail.vue'
+const overlay = ref()
+const infoWindow = ref()
+// 节点信息
+const info = ref()
+// 弹窗类型
+const type = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  // 节点信息
+  info.value = e.info
+  // 弹窗类型
+  type.value = e.info.dialog
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container" :class="type">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <gas v-if="type === 'gas'" :info="info" />
+    <car v-if="type === 'car'" :info="info" />
+    <task v-if="type === 'task'" :info="info" />
+    <task-detail v-if="type === 'taskDetail'" :info="info" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gas {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.car {
+  width: 300px !important;
+  height: 200px !important;
+}
+
+.task {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.taskDetail {
+  height: 200px !important;
+}
+
+.container {
+  color: #fff;
+  width: 470px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/store/modules/map.ts b/src/store/modules/map.ts
index 396efbc..f250790 100644
--- a/src/store/modules/map.ts
+++ b/src/store/modules/map.ts
@@ -7,9 +7,14 @@
     state: () => ({
       amapSecurityCode: '182a2c5889f7fe6d90546d9b8f4781ad', // 安全密钥
       amapKey: 'e1733551f35b56f6d8e9c0a9d4c2523b', // 高德地图key
+      detailList: [] as any[], // 轨迹信息
     }),
     getters: {},
-    actions: {},
+    actions: {
+      setDetailList(data: any[]) {
+        this.detailList = data
+      },
+    },
   },
 )
 
diff --git a/src/views/home/components/date.vue b/src/views/home/components/date.vue
index 3ba2405..950b02d 100644
--- a/src/views/home/components/date.vue
+++ b/src/views/home/components/date.vue
@@ -12,39 +12,45 @@
   }
   if (type === 'month') {
     // 获取N月前
-    const date = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
+    const date = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'month')
   }
   else if (type === 'sixmonth') {
-    const date = dayjs().subtract(6, 'month').format('YYYY-MM-DD')
+    const date = dayjs().subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'sixmonth')
   }
   else if (type === 'year') {
-    const date = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
+    const date = dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'year')
   }
   else {
+    dateActive.value = dateSelect.value
     console.log(dateSelect.value, 'other')
   }
+  emits('confirm')
 }
+selectDate('month')
 watch(() => dateSelect.value, (newVal) => {
   if (newVal) {
     selectDate('other')
   }
 })
-defineExpose({ dateSelect })
+defineExpose({ dateSelect, dateActive })
 </script>
 
 <template>
   <div class="container-date">
     <div class="top-date">
-      <el-button @click="selectDate('month')">
+      <el-button :class="dateType === 'month' ? 'active' : ''" @click="selectDate('month')">
         近一月
       </el-button>
-      <el-button @click="selectDate('sixmonth')">
+      <el-button :class="dateType === 'sixmonth' ? 'active' : ''" @click="selectDate('sixmonth')">
         近6月
       </el-button>
-      <el-button @click="selectDate('year')">
+      <el-button :class="dateType === 'year' ? 'active' : ''" @click="selectDate('year')">
         近一年
       </el-button>
     </div>
@@ -54,7 +60,7 @@
         type="date"
         placeholder="选择日期(自定义)"
         style="width: 100%;"
-        value-format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD HH:mm:ss"
         format="YYYY-MM-DD"
       />
     </div>
@@ -67,7 +73,7 @@
   // display: flex;
   z-index: 999;
   top: 10px;
-  left: 80px;
+  left: 85px;
   padding: 10px;
   // width: 150px;
   background-color: rgba($color: #2f4261, $alpha: 70%);
@@ -80,4 +86,11 @@
     margin-bottom: 10px;
   }
 }
+
+.active {
+  color: #3d7eff;
+  outline: none;
+  background-color: #ecf2ff;
+  border-color: #c5d8ff;
+}
 </style>

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>
diff --git a/src/components/map/components/track.vue b/src/components/map/components/track.vue
new file mode 100644
index 0000000..4835e3e
--- /dev/null
+++ b/src/components/map/components/track.vue
@@ -0,0 +1,136 @@
+<!-- 轨迹详情弹窗 -->
+<script lang="ts" setup name="TrackDialog">
+import { Clock, LocationInformation, Odometer } from '@element-plus/icons-vue'
+import useMapStore from '@/store/modules/map'
+const dialogVisible = ref(false)
+const mapStore = useMapStore() // 地图仓库
+const data = ref([])
+const initDialog = (list: any[]) => {
+  dialogVisible.value = true
+  data.value = list
+}
+const cancel = () => {
+  dialogVisible.value = false
+}
+defineExpose({ initDialog, cancel })
+const showTrack = () => {
+// 将数据存储到仓库中，首页绘制需要使用
+  mapStore.setDetailList(data.value)
+}
+</script>
+
+<template>
+  <div v-if="dialogVisible " class="container-track">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+        巡检轨迹时间轴
+        <el-button size="small" type="warning" style="margin-left: 10px;" @click="showTrack">
+          显示轨迹
+        </el-button>
+      </div>
+      <div class="close" @click="cancel">
+        x
+      </div>
+    </div>
+    <el-scrollbar style="height: 470px; margin-top: 10px;">
+      <!-- 具体要包裹的内容 -->
+      <el-timeline>
+        <el-timeline-item
+          v-for="(content, index) in data"
+          :key="index"
+          :timestamp="content.time"
+          color="#fff"
+          :hide-timestamp="true"
+        >
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><clock style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              {{ content.time }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><odometer style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.value }}(ppm·m)
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><bell style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.isAlarm }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><location-information style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="content.position"
+                placement="bottom"
+              >
+                {{ content.position }}
+              </el-tooltip>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.red {
+  color: #9f1919;
+  font-weight: 700;
+}
+
+.content-scroll {
+  color: #fff;
+  display: flex;
+
+  .value {
+    margin-left: 10px;
+    width: 270px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.container-track {
+  color: #fff;
+  width: 400px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/map/infoDialog.vue b/src/components/map/infoDialog.vue
new file mode 100644
index 0000000..d349809
--- /dev/null
+++ b/src/components/map/infoDialog.vue
@@ -0,0 +1,95 @@
+<!--
+  Description: 高德地图信息窗体
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import gas from './components/gas.vue'
+import car from './components/car.vue'
+import taskDetail from './components/taskDetail.vue'
+const overlay = ref()
+const infoWindow = ref()
+// 节点信息
+const info = ref()
+// 弹窗类型
+const type = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  // 节点信息
+  info.value = e.info
+  // 弹窗类型
+  type.value = e.info.dialog
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container" :class="type">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <gas v-if="type === 'gas'" :info="info" />
+    <car v-if="type === 'car'" :info="info" />
+    <task v-if="type === 'task'" :info="info" />
+    <task-detail v-if="type === 'taskDetail'" :info="info" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gas {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.car {
+  width: 300px !important;
+  height: 200px !important;
+}
+
+.task {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.taskDetail {
+  height: 200px !important;
+}
+
+.container {
+  color: #fff;
+  width: 470px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/store/modules/map.ts b/src/store/modules/map.ts
index 396efbc..f250790 100644
--- a/src/store/modules/map.ts
+++ b/src/store/modules/map.ts
@@ -7,9 +7,14 @@
     state: () => ({
       amapSecurityCode: '182a2c5889f7fe6d90546d9b8f4781ad', // 安全密钥
       amapKey: 'e1733551f35b56f6d8e9c0a9d4c2523b', // 高德地图key
+      detailList: [] as any[], // 轨迹信息
     }),
     getters: {},
-    actions: {},
+    actions: {
+      setDetailList(data: any[]) {
+        this.detailList = data
+      },
+    },
   },
 )
 
diff --git a/src/views/home/components/date.vue b/src/views/home/components/date.vue
index 3ba2405..950b02d 100644
--- a/src/views/home/components/date.vue
+++ b/src/views/home/components/date.vue
@@ -12,39 +12,45 @@
   }
   if (type === 'month') {
     // 获取N月前
-    const date = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
+    const date = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'month')
   }
   else if (type === 'sixmonth') {
-    const date = dayjs().subtract(6, 'month').format('YYYY-MM-DD')
+    const date = dayjs().subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'sixmonth')
   }
   else if (type === 'year') {
-    const date = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
+    const date = dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'year')
   }
   else {
+    dateActive.value = dateSelect.value
     console.log(dateSelect.value, 'other')
   }
+  emits('confirm')
 }
+selectDate('month')
 watch(() => dateSelect.value, (newVal) => {
   if (newVal) {
     selectDate('other')
   }
 })
-defineExpose({ dateSelect })
+defineExpose({ dateSelect, dateActive })
 </script>
 
 <template>
   <div class="container-date">
     <div class="top-date">
-      <el-button @click="selectDate('month')">
+      <el-button :class="dateType === 'month' ? 'active' : ''" @click="selectDate('month')">
         近一月
       </el-button>
-      <el-button @click="selectDate('sixmonth')">
+      <el-button :class="dateType === 'sixmonth' ? 'active' : ''" @click="selectDate('sixmonth')">
         近6月
       </el-button>
-      <el-button @click="selectDate('year')">
+      <el-button :class="dateType === 'year' ? 'active' : ''" @click="selectDate('year')">
         近一年
       </el-button>
     </div>
@@ -54,7 +60,7 @@
         type="date"
         placeholder="选择日期(自定义)"
         style="width: 100%;"
-        value-format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD HH:mm:ss"
         format="YYYY-MM-DD"
       />
     </div>
@@ -67,7 +73,7 @@
   // display: flex;
   z-index: 999;
   top: 10px;
-  left: 80px;
+  left: 85px;
   padding: 10px;
   // width: 150px;
   background-color: rgba($color: #2f4261, $alpha: 70%);
@@ -80,4 +86,11 @@
     margin-bottom: 10px;
   }
 }
+
+.active {
+  color: #3d7eff;
+  outline: none;
+  background-color: #ecf2ff;
+  border-color: #c5d8ff;
+}
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f57a3b2..cb09fab 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,10 @@
 <!-- 首页 -->
 <script name="Home" setup lang="ts">
 import { ref } from 'vue'
+import dayjs from 'dayjs'
 import statisticsData from './components/statistics.vue'
 import dateSelect from './components/date.vue'
+import useMapStore from '@/store/modules/map'
 import MapComponent from '@/components/map/Map.vue'
 import homeIcon from '@/assets/images/点位图标/地图菜单/首页未选中.png'
 import gasIcon from '@/assets/images/点位图标/地图菜单/甲烷未选中.png'
@@ -16,8 +18,31 @@
 import occupyCheck from '@/assets/images/点位图标/地图菜单/占压选中.png'
 import couplingCheck from '@/assets/images/点位图标/地图菜单/耦合选中.png'
 import dateCheck from '@/assets/images/点位图标/地图菜单/日期选中.png'
+import gas1 from '@/assets/images/点位图标/点位图标/甲烷/甲烷已处置.png'
+import gas2 from '@/assets/images/点位图标/点位图标/甲烷/甲烷未处置.png'
+import car1 from '@/assets/images/点位图标/点位图标/首页/巡检车在线.png'
+import car2 from '@/assets/images/点位图标/点位图标/首页/巡检车离线.png'
+import task from '@/assets/images/点位图标/点位图标/首页/巡检任务.png'
+import { getCarList, getGasList, getTaskList } from '@/api/page/page'
+const mapRef = ref() // 地图实例
+const mapStore = useMapStore() // 地图仓库
+watch(() => mapStore.detailList, (newVal) => {
+  if (newVal) {
+    // 清空原来轨迹
+    mapRef.value.clearLine()
+    // 绘制轨迹
+    mapRef.value.drawLine(newVal)
+  }
+}, {
+  deep: true,
+})
 const center = ref([116.26759100, 39.91563500]) // 地图中心
 const zoom = ref(17) // 地图显示的缩放级别
+
+// 日期选择组件实例
+const dateRef = ref()
+// 日期选择top距离
+const dateTop = ref(0)
 // 菜单选中
 const select = ref(0)
 // 条件菜单选中
@@ -48,12 +73,12 @@
     menu: [
       {
         name: '已处置',
-        value: '0',
+        value: '1',
         color: '#2DBF00',
       },
       {
         name: '未处置',
-        value: '1',
+        value: '0',
         color: '#9F1919',
       },
     ],
@@ -160,14 +185,26 @@
     check: dateCheck,
   },
 ])
+
 // 切换菜单
 const change = (index: number) => {
-  select.value = index
   if (index === 5) {
+    const ele = document.getElementById('menu-item5')
+    dateTop.value = ele?.getBoundingClientRect().top as number
+    select.value = index
     return
+  }// 清空地图绘制
+  mapRef.value?.clearDraw()
+  if (select.value !== index) {
+    cselect.value = menu.value[index].menu.map((item: any) => item.value)
   }
-  cselect.value = menu.value[index].menu.map((item: any) => item.value)
+  select.value = index
 }
+// 日期选择top距离
+window.addEventListener('resize', () => {
+  const ele = document.getElementById('menu-item5')
+  dateTop.value = ele?.getBoundingClientRect().top as number
+})
 // 改变条件菜单
 const cchange = (value: string) => {
   if (cselect.value.includes(value)) {
@@ -176,7 +213,152 @@
   else {
     cselect.value.push(value)
   }
+  change(select.value)
 }
+// 确认日期
+const confirmData = () => {
+  change(0)
+}
+// 获取首页数据
+const fetchHome = async () => {
+  console.log(dateRef.value?.dateActive, 'dateRef.value?.dateActive')
+  // 清空地图绘制
+  mapRef.value?.clearDraw()
+  // 获取车辆列表
+  const fetchCar = async () => {
+    const res1 = await getCarList({})
+    console.log(res1, '车')
+    const data1 = res1.data.map((item: any) => {
+      return {
+        ...item,
+        lat: item.latitude,
+        lng: item.longitude,
+        // lng: '116.265872',
+        // lat: '39.914083',
+        dialog: 'car',
+        // 0 离线  1 在线
+        icon: item.status === '离线' ? car2 : car1,
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 绘制标记点
+    // mapRef.value.drawPonit(data1)
+    return data1
+  }
+  // 获取任务列表
+  const fetchTask = async () => {
+    const res2 = await getTaskList({
+      beginDate: dateRef.value?.dateActive,
+      endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    })
+    console.log(res2, '任务')
+    const data2 = res2.data.rows.map((item: any) => {
+      return {
+        ...item,
+        dialog: 'task',
+        lat: item.latitude,
+        lng: item.longitude,
+        icon: task,
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 绘制标记点
+    // mapRef.value.drawPonit(data2)
+    return data2
+  }
+  // 车0 任务1
+  if (cselect.value.length === 2) {
+    const res1 = await fetchCar()
+    const res2 = await fetchTask()
+    // 绘制标记点
+    mapRef.value.drawPonit([...res1, ...res2])
+  }
+  else if (cselect.value.length === 1) {
+    if (cselect.value.includes('0')) {
+      const res = await fetchCar()
+      mapRef.value.drawPonit(res)
+    }
+    else if (cselect.value.includes('1')) {
+      const res = await fetchTask()
+      mapRef.value.drawPonit(res)
+    }
+  }
+}
+// 清空折线轨迹
+const clearTrack = () => {
+  mapRef.value.clearLine()
+  mapStore.setDetailList([])
+}
+// 获取甲烷数据
+const fetchGas = () => {
+  // if (!cselect.value.length) {
+  //   // 清空地图绘制
+  //   mapRef.value?.clearDraw()
+  //   return
+  // }
+  getGasList({
+    alarmType: '1',
+    alarmStatus: cselect.value.length === 2 ? '' : cselect.value[0], // 报警状态
+    beginDate: dateRef.value?.dateActive, // 报警开始时间
+    endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 报警结束时间
+  }).then((res) => {
+    console.log(res.data, '甲烷数据')
+    // 整理数据
+    const data = res.data.rows.map((item: any) => {
+      return {
+        ...item,
+        lat: item.alarmLatitude,
+        lng: item.alarmLongitude,
+        icon: item.alarmStatus === '已处置' ? gas1 : gas2,
+        dialog: 'gas',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 绘制标记点
+    mapRef.value.drawPonit(data)
+  })
+}
+// 获取点位数据
+watch(() => [select.value, cselect.value], (newVal: any[], oldVal) => {
+  if (!mapRef.value?.isMap) {
+    console.log('初始化未完成')
+    return
+  }
+  if (!newVal[1].length) {
+    // 清空地图绘制
+    mapRef.value?.clearDraw()
+    return
+  }
+  switch (newVal[0]) {
+    case 0:
+      fetchHome()
+      console.log('首页')
+      break
+    case 1:
+      fetchGas()
+      console.log('甲烷')
+      break
+    case 2:
+      console.log('识别')
+      break
+    case 3:
+      console.log('占压')
+      break
+    case 4:
+      console.log('耦合')
+      break
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+// 监听地图是否初始化完成
+watch(() => mapRef.value?.isMap, (newVal) => {
+  if (newVal) {
+  // 初始化完成
+    fetchHome()
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
 </script>
 
 <template>
@@ -185,16 +367,20 @@
       <div class="title">
         地上地下一体化管线风险识别与预警地图看板
       </div>
-      <map-component :center="center" :zoom="zoom" />
+      <map-component ref="mapRef" :center="center" :zoom="zoom" />
       <!-- 主菜单 -->
       <div class="menu">
-        <div v-for="(item, index) in menu" :key="index" class="menu-item" @click="change(index)">
+        <div v-for="(item, index) in menu" :id="`menu-item${index}`" :key="index" class="menu-item" @click="change(index)">
           <img :src="select === index ? item.check : item.icon" width="70" height="70">
-          <date-select v-if="select === 5 && index === 5" class="date-select" />
         </div>
       </div>
+      <!-- 时间查询 -->
+      <date-select v-show="select === 5" ref="dateRef" class="date-select" :style="`top:${dateTop - 60}px`" @confirm="confirmData" />
       <!-- 条件菜单 -->
       <div class="cmenu">
+        <div v-if="select === 0 && mapStore.detailList.length" class="menu-child" style="background-color: #666;" @click="clearTrack">
+          清空轨迹
+        </div>
         <div v-for="(child, cindex) in menu[select].menu" :key="cindex" class="menu-child" :style="`background:${cselect.includes(child.value) ? child.color : '#666'};`" @click="cchange(child.value)">
           {{ child.name }}
         </div>
@@ -240,7 +426,7 @@
 .cmenu {
   position: absolute;
   right: 28%;
-  top: 10%;
+  top: 80px;
   z-index: 999;
   display: flex;
 

diff --git a/src/api/page/gas.ts b/src/api/page/gas.ts
index b24d651..a1a2075 100644
--- a/src/api/page/gas.ts
+++ b/src/api/page/gas.ts
@@ -18,3 +18,10 @@
     data: params,
   })
 }
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
new file mode 100644
index 0000000..91d0fab
--- /dev/null
+++ b/src/api/page/page.ts
@@ -0,0 +1,36 @@
+// 首页接口
+import request from '../index'
+// 燃气报警列表
+export function getGasList(params: any) {
+  return request({
+    url: '/alarm/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检车列表
+export function getCarList(params: any) {
+  return request({
+    url: '/system/busOverView/carList',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检任务列表
+export function getTaskList(params: any) {
+  return request({
+    url: '/system/busPatrolTask/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 巡检轨迹
+export function getTaskDetail(params: any) {
+  return request({
+    url: '/system/busPatrolTrack/listPage',
+    method: 'post',
+    data: params,
+  })
+}
+// 统计面板
+
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..226c815
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\346\234\252\351\200\211\344\270\255.png"
Binary files differ
diff --git "a/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png" "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
new file mode 100644
index 0000000..ea7afa6
--- /dev/null
+++ "b/src/assets/images/\347\202\271\344\275\215\345\233\276\346\240\207/\345\234\260\345\233\276\350\217\234\345\215\225/\350\200\246\345\220\210\351\200\211\344\270\255.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 9e39a76..f6461ac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,6 +22,7 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+    Car: typeof import('./components/map/components/car.vue')['default']
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
@@ -35,10 +36,12 @@
     ErrorDialog: typeof import('./components/dialog/errorDialog.vue')['default']
     FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    Gas: typeof import('./components/map/components/gas.vue')['default']
     IconButton: typeof import('./components/IconButton/index.vue')['default']
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    InfoDialog: typeof import('./components/map/infoDialog.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/Map.vue')['default']
     MeasureRecords: typeof import('./components/Sample/measureRecords.vue')['default']
@@ -63,6 +66,9 @@
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
     TableContainer: typeof import('./components/TableContainer/index.vue')['default']
+    Task: typeof import('./components/map/components/task.vue')['default']
+    TaskDetail: typeof import('./components/map/components/taskDetail.vue')['default']
+    Track: typeof import('./components/map/components/track.vue')['default']
     Trend: typeof import('./components/Trend/index.vue')['default']
   }
 }
diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
index 9768c56..2daf124 100644
--- a/src/components/map/Map.vue
+++ b/src/components/map/Map.vue
@@ -1,6 +1,7 @@
 <!-- 地图 -->
 <script lang="ts" name="Map" setup>
 import { load } from '@amap/amap-jsapi-loader'
+import infoDialog from './infoDialog.vue'
 import useMapStore from '@/store/modules/map'
 const props = defineProps({
   center: { // 地图中心点
@@ -11,11 +12,24 @@
     type: Number,
     default: 17,
   },
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+  // point: {
+  //   type: Array,
+  //   default: () => ([] as any[]),
+  // },
 })
 const mapInfo = useMapStore() // 地图信息
+const isMap = ref(false) // 是否初始话完成
 declare const window: any
 const map = ref() // 地图实例
 const AMapRef = ref<any>()
+const infoWindow = ref() // 信息窗体
+const windowInfoRef = ref() // 信息窗体实例
+const markerList = ref<any[]>([]) // 标记点实例
+const lineMarkerList = ref<any[]>([]) // 折线标记点实例
+const lineList = ref<any>() // 标记点实例
 const initMap = () => { // 初始化
   if (!window._AMapSecurityConfig) {
     // 安全码
@@ -41,12 +55,13 @@
       toolbar = new AMap.ToolBar() // 缩放工具条实例化
       map.value.addControl(toolbar)
     })
-    if (props.center?.length) {
-      const marker = new AMap.Marker({ // 标注
-        position: props.center, // 位置
-      })
-      map.value.add(marker) // 标注添加到地图
-    }
+    // if (props.center?.length) {
+    //   const marker = new AMap.Marker({ // 标注
+    //     position: props.center, // 位置
+    //   })
+    //   map.value.add(marker) // 标注添加到地图
+    // }
+    isMap.value = true
   })
 }
 // 根据经纬度查询位置信息
@@ -71,6 +86,159 @@
     initMap()
   }
 })
+// 绘制标记点
+const drawPonit = (arr: any[]) => {
+  // arr 为标记点数组信息数据
+  // 坐标点数组(包含左边点信息)
+  // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}]
+  // 必须含有坐标点数据icon
+
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  console.log(pointArr, 'pointArr')
+  // if (pointArr.length) {
+  //   map.value.setCenter(pointArr[0])
+  // }
+  map.value.setFitView()
+  const AMap = AMapRef.value
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义icon
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: arr[i].icon, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    markerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+}
+// 绘制折线(轨迹)
+const drawLine = (arr: any[]) => {
+  // 先绘制点
+  // 加工标记点数据
+  const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)]))
+  const AMap = AMapRef.value
+
+  // 标记点绘制
+  for (let i = 0; i < arr.length; i++) {
+    // 自定义标记点
+    const markerContent = ''
+        + '<div class="content-marker">'
+        + `${i + 1}`
+        + '</div>'
+    // 标记点
+    const marker = new AMap.Marker({
+      // zooms: [16, 20], // 缩放
+      position: pointArr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      content: markerContent,
+      offset: new AMap.Pixel(0, 0),
+    })
+    lineMarkerList.value.push(marker)
+    // 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    // 信息窗体点击事件
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        // 标记点详细信息
+        info: arr[i],
+      })
+    })
+    // 将标记点添加到地图
+    map.value.add([marker])
+  }
+  // 折线绘制
+  const polyline = new AMap.Polyline({
+    path: pointArr,
+    // isOutline: true,
+    strokeColor: '#ff0',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+    // 折线样式还支持 'dashed'
+    // strokeStyle: 'dashed',
+    // strokeStyle是dashed时有效
+    strokeDasharray: [10, 3],
+    lineJoin: 'round',
+    showDir: true,
+    // lineCap: 'square',
+    lineCap: 'round',
+    zIndex: 50,
+    // zooms: [16, 20],
+
+  })
+  lineList.value = polyline
+  polyline.setMap(map.value)
+  map.value.add(polyline)
+  map.value.setFitView()
+}
+// 清空所有绘制
+const clearDraw = () => {
+  map.value.setFitView()
+  map.value.clearMap()
+}
+// 清空标记点
+const clearPonit = () => {
+  map.value.setFitView()
+  if (markerList.value.length) {
+    map.value.remove(markerList.value)
+    markerList.value = []
+  }
+}
+// 清空折线(轨迹)
+const clearLine = () => {
+  map.value.setFitView()
+  // 先清空折线的标记点
+  if (lineMarkerList.value.length) {
+    map.value.remove(lineMarkerList.value)
+    lineMarkerList.value = []
+  }
+  // 再清空折线
+  if (lineList.value) {
+    map.value.remove(lineList.value)
+    lineList.value = ''
+  }
+}
+
+defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine })
 </script>
 
 <template>
@@ -78,4 +246,20 @@
   <!-- <div class="input-item">
     <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
   </div> -->
+  <!-- 信息窗体 -->
+  <info-dialog ref="windowInfoRef" />
 </template>
+
+<style lang="scss" scope>
+.content-marker {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(#ff0, 0.8);
+  border: 1px solid #ccc;
+  line-height: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/map/components/car.vue b/src/components/map/components/car.vue
new file mode 100644
index 0000000..c0af01c
--- /dev/null
+++ b/src/components/map/components/car.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="CarDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.carName }}</div>
+      <div>
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        状态:
+      </div>
+      <div class="value">
+        {{ info?.status }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.deviceModel }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.ts }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #9f1919;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/gas.vue b/src/components/map/components/gas.vue
new file mode 100644
index 0000000..617d58d
--- /dev/null
+++ b/src/components/map/components/gas.vue
@@ -0,0 +1,111 @@
+<!--
+  Description: 甲烷浓度报警窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="GasDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>甲烷浓度报警({{ info?.alarmCode }})</div>
+      <div class="flag" :class="`${info?.alarmStatus === '未处置' ? 'red' : 'green'}`">
+        {{ info?.alarmStatus }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        燃气浓度:
+      </div>
+      <div class="value">
+        {{ info?.alarmValue }}ppm·m
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检任务:
+      </div>
+      <div class="value">
+        {{ info?.taskName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        时间:
+      </div>
+      <div class="value">
+        {{ info?.alarmTime }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        位置:
+      </div>
+      <div class="value">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  padding: 4px 0;
+
+  .value {
+    margin-left: 6px;
+  }
+}
+
+.flag {
+  // padding: 4px;
+  border-radius: 10px;
+  padding: 0 8px;
+}
+
+.red {
+  background-color: #9f1919;
+}
+
+.green {
+  background-color: #2dbf00;
+}
+
+.container-gas {
+  color: #fff;
+  font-size: 18px;
+}
+
+// .item {
+//   padding: 0 5px;
+//   color: #111213;
+//   font-size: 14px;
+//   margin: 10px;
+//   border-bottom: 1px solid #ccc;
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/map/components/task.vue b/src/components/map/components/task.vue
new file mode 100644
index 0000000..c86d54a
--- /dev/null
+++ b/src/components/map/components/task.vue
@@ -0,0 +1,163 @@
+import { info } from 'console';
+<!--
+  Description:巡检任务窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDialog">
+import trackDialog from './track.vue'
+import { getTaskDetail } from '@/api/page/page'
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+const trackRef = ref() // 轨迹详情弹窗实例
+watch(() => $props.info, () => {
+  trackRef.value?.cancel()
+}, {
+  deep: true,
+})
+
+// 轨迹详情弹窗
+const trajectory = () => {
+  // const arr = [
+  //   [116.362209, 39.887487],
+  //   [116.422897, 39.878002],
+  //   [116.372105, 39.90651],
+  //   [116.428945, 39.89663],
+  // ]
+  getTaskDetail({ taskId: $props.info.id }).then((res) => {
+    const data = res.data.rows.splice(0, 4).map((item: any, index: number) => {
+      return {
+        ...item,
+
+        lat: item.lagitude,
+        lng: item.longitude,
+        // 数据问题 犯了
+        // lat: arr[index][1],
+        // lng: arr[index][0],
+        position: item.position,
+        isAlarm: item.isAlarm === '1' ? '是' : '否',
+        time: item.ts,
+        value: item.gas,
+        dialog: 'taskDetail',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 打开详情弹窗
+    trackRef.value?.initDialog(data)
+  })
+}
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div>{{ info?.taskName }}({{ info?.taskCode }})</div>
+      <div class="flag" :class="`${info?.statusName === '已完成' ? 'green' : 'red'}`">
+        {{ info?.statusName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        巡检车牌号:
+      </div>
+      <div class="value">
+        {{ info?.carPlate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        车载云台型号:
+      </div>
+      <div class="value">
+        {{ info?.modelName }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        开始时间:
+      </div>
+      <div class="value">
+        {{ info?.beginDate }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        结束时间:
+      </div>
+      <div class="value">
+        {{ info?.endDate }}
+      </div>
+    </div>
+    <div class="btn">
+      <el-button size="small" type="warning" @click="trajectory">
+        轨迹追踪
+      </el-button>
+    </div>
+    <!-- 轨迹详情弹窗 -->
+    <track-dialog ref="trackRef" class="track" />
+  </div>
+</template>
+
+ <style lang="scss" scoped>
+  .track {
+    position: absolute;
+    top: -35px;
+    left: 480px;
+  }
+
+  .btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    background-color: #f59a23;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+    position: relative;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+ </style>
diff --git a/src/components/map/components/taskDetail.vue b/src/components/map/components/taskDetail.vue
new file mode 100644
index 0000000..d68ce27
--- /dev/null
+++ b/src/components/map/components/taskDetail.vue
@@ -0,0 +1,124 @@
+<!--
+  Description: 巡检车窗体内容
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="TaskDetailDialog">
+const $props = defineProps({
+  // 具体信息
+  info: {
+    type: Object,
+    default: () => ({
+
+    }),
+  },
+})
+</script>
+
+<template>
+  <div class="container-gas">
+    <div class="top">
+      <div class="title">
+        巡检轨迹详情
+      </div>
+      <div class="flag" />
+    </div>
+    <div class="content">
+      <div class="name">
+        是否报警:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.isAlarm }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警气体浓度:
+      </div>
+      <div class="value" :class="`${info?.isAlarm === '是' ? 'red' : ''}`">
+        {{ info?.value }}(ppm·m)
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警时间:
+      </div>
+      <div class="value">
+        {{ info?.time }}
+      </div>
+    </div>
+    <div class="content">
+      <div class="name">
+        报警位置:
+      </div>
+      <div class="value value1">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="info.position"
+          placement="bottom"
+        >
+          {{ info?.position }}
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    display: flex;
+    padding: 4px 0;
+
+    .value {
+      margin-left: 6px;
+    }
+
+    .value1 {
+      width: 360px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .flag {
+    // padding: 4px;
+    border-radius: 10px;
+    padding: 0 8px;
+  }
+
+  .red {
+    color: #9f1919;
+    font-weight: 700;
+  }
+
+  .green {
+    background-color: #2dbf00;
+  }
+
+  .container-gas {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  // .item {
+  //   padding: 0 5px;
+  //   color: #111213;
+  //   font-size: 14px;
+  //   margin: 10px;
+  //   border-bottom: 1px solid #ccc;
+  //   display: flex;
+  //   justify-content: space-between;
+  // }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+  </style>
diff --git a/src/components/map/components/track.vue b/src/components/map/components/track.vue
new file mode 100644
index 0000000..4835e3e
--- /dev/null
+++ b/src/components/map/components/track.vue
@@ -0,0 +1,136 @@
+<!-- 轨迹详情弹窗 -->
+<script lang="ts" setup name="TrackDialog">
+import { Clock, LocationInformation, Odometer } from '@element-plus/icons-vue'
+import useMapStore from '@/store/modules/map'
+const dialogVisible = ref(false)
+const mapStore = useMapStore() // 地图仓库
+const data = ref([])
+const initDialog = (list: any[]) => {
+  dialogVisible.value = true
+  data.value = list
+}
+const cancel = () => {
+  dialogVisible.value = false
+}
+defineExpose({ initDialog, cancel })
+const showTrack = () => {
+// 将数据存储到仓库中，首页绘制需要使用
+  mapStore.setDetailList(data.value)
+}
+</script>
+
+<template>
+  <div v-if="dialogVisible " class="container-track">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+        巡检轨迹时间轴
+        <el-button size="small" type="warning" style="margin-left: 10px;" @click="showTrack">
+          显示轨迹
+        </el-button>
+      </div>
+      <div class="close" @click="cancel">
+        x
+      </div>
+    </div>
+    <el-scrollbar style="height: 470px; margin-top: 10px;">
+      <!-- 具体要包裹的内容 -->
+      <el-timeline>
+        <el-timeline-item
+          v-for="(content, index) in data"
+          :key="index"
+          :timestamp="content.time"
+          color="#fff"
+          :hide-timestamp="true"
+        >
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><clock style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              {{ content.time }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><odometer style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.value }}(ppm·m)
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><bell style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value" :class="`${content?.isAlarm === '是' ? 'red' : ''}`">
+              {{ content.isAlarm }}
+            </div>
+          </div>
+          <div class="content-scroll">
+            <div class="name">
+              <el-icon><location-information style="color: #fff;" /></el-icon>
+            </div>
+            <div class="value">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="content.position"
+                placement="bottom"
+              >
+                {{ content.position }}
+              </el-tooltip>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.red {
+  color: #9f1919;
+  font-weight: 700;
+}
+
+.content-scroll {
+  color: #fff;
+  display: flex;
+
+  .value {
+    margin-left: 10px;
+    width: 270px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.container-track {
+  color: #fff;
+  width: 400px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/map/infoDialog.vue b/src/components/map/infoDialog.vue
new file mode 100644
index 0000000..d349809
--- /dev/null
+++ b/src/components/map/infoDialog.vue
@@ -0,0 +1,95 @@
+<!--
+  Description: 高德地图信息窗体
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import gas from './components/gas.vue'
+import car from './components/car.vue'
+import taskDetail from './components/taskDetail.vue'
+const overlay = ref()
+const infoWindow = ref()
+// 节点信息
+const info = ref()
+// 弹窗类型
+const type = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  // 节点信息
+  info.value = e.info
+  // 弹窗类型
+  type.value = e.info.dialog
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container" :class="type">
+    <div class="title">
+      <div class="text">
+        <!-- 这是一个弹窗 -->
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <gas v-if="type === 'gas'" :info="info" />
+    <car v-if="type === 'car'" :info="info" />
+    <task v-if="type === 'task'" :info="info" />
+    <task-detail v-if="type === 'taskDetail'" :info="info" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gas {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.car {
+  width: 300px !important;
+  height: 200px !important;
+}
+
+.task {
+  width: 470px !important;
+  height: 200px !important;
+}
+
+.taskDetail {
+  height: 200px !important;
+}
+
+.container {
+  color: #fff;
+  width: 470px;
+  height: 510px;
+  padding: 10px;
+  // background-color: #fff;
+  background-color: rgba($color: #6692be, $alpha: 80%);
+  border: 1px solid #6d9ece;
+  border-radius: 8px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      // color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/store/modules/map.ts b/src/store/modules/map.ts
index 396efbc..f250790 100644
--- a/src/store/modules/map.ts
+++ b/src/store/modules/map.ts
@@ -7,9 +7,14 @@
     state: () => ({
       amapSecurityCode: '182a2c5889f7fe6d90546d9b8f4781ad', // 安全密钥
       amapKey: 'e1733551f35b56f6d8e9c0a9d4c2523b', // 高德地图key
+      detailList: [] as any[], // 轨迹信息
     }),
     getters: {},
-    actions: {},
+    actions: {
+      setDetailList(data: any[]) {
+        this.detailList = data
+      },
+    },
   },
 )
 
diff --git a/src/views/home/components/date.vue b/src/views/home/components/date.vue
index 3ba2405..950b02d 100644
--- a/src/views/home/components/date.vue
+++ b/src/views/home/components/date.vue
@@ -12,39 +12,45 @@
   }
   if (type === 'month') {
     // 获取N月前
-    const date = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
+    const date = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'month')
   }
   else if (type === 'sixmonth') {
-    const date = dayjs().subtract(6, 'month').format('YYYY-MM-DD')
+    const date = dayjs().subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'sixmonth')
   }
   else if (type === 'year') {
-    const date = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
+    const date = dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss')
+    dateActive.value = date
     console.log(date, 'year')
   }
   else {
+    dateActive.value = dateSelect.value
     console.log(dateSelect.value, 'other')
   }
+  emits('confirm')
 }
+selectDate('month')
 watch(() => dateSelect.value, (newVal) => {
   if (newVal) {
     selectDate('other')
   }
 })
-defineExpose({ dateSelect })
+defineExpose({ dateSelect, dateActive })
 </script>
 
 <template>
   <div class="container-date">
     <div class="top-date">
-      <el-button @click="selectDate('month')">
+      <el-button :class="dateType === 'month' ? 'active' : ''" @click="selectDate('month')">
         近一月
       </el-button>
-      <el-button @click="selectDate('sixmonth')">
+      <el-button :class="dateType === 'sixmonth' ? 'active' : ''" @click="selectDate('sixmonth')">
         近6月
       </el-button>
-      <el-button @click="selectDate('year')">
+      <el-button :class="dateType === 'year' ? 'active' : ''" @click="selectDate('year')">
         近一年
       </el-button>
     </div>
@@ -54,7 +60,7 @@
         type="date"
         placeholder="选择日期(自定义)"
         style="width: 100%;"
-        value-format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD HH:mm:ss"
         format="YYYY-MM-DD"
       />
     </div>
@@ -67,7 +73,7 @@
   // display: flex;
   z-index: 999;
   top: 10px;
-  left: 80px;
+  left: 85px;
   padding: 10px;
   // width: 150px;
   background-color: rgba($color: #2f4261, $alpha: 70%);
@@ -80,4 +86,11 @@
     margin-bottom: 10px;
   }
 }
+
+.active {
+  color: #3d7eff;
+  outline: none;
+  background-color: #ecf2ff;
+  border-color: #c5d8ff;
+}
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f57a3b2..cb09fab 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,10 @@
 <!-- 首页 -->
 <script name="Home" setup lang="ts">
 import { ref } from 'vue'
+import dayjs from 'dayjs'
 import statisticsData from './components/statistics.vue'
 import dateSelect from './components/date.vue'
+import useMapStore from '@/store/modules/map'
 import MapComponent from '@/components/map/Map.vue'
 import homeIcon from '@/assets/images/点位图标/地图菜单/首页未选中.png'
 import gasIcon from '@/assets/images/点位图标/地图菜单/甲烷未选中.png'
@@ -16,8 +18,31 @@
 import occupyCheck from '@/assets/images/点位图标/地图菜单/占压选中.png'
 import couplingCheck from '@/assets/images/点位图标/地图菜单/耦合选中.png'
 import dateCheck from '@/assets/images/点位图标/地图菜单/日期选中.png'
+import gas1 from '@/assets/images/点位图标/点位图标/甲烷/甲烷已处置.png'
+import gas2 from '@/assets/images/点位图标/点位图标/甲烷/甲烷未处置.png'
+import car1 from '@/assets/images/点位图标/点位图标/首页/巡检车在线.png'
+import car2 from '@/assets/images/点位图标/点位图标/首页/巡检车离线.png'
+import task from '@/assets/images/点位图标/点位图标/首页/巡检任务.png'
+import { getCarList, getGasList, getTaskList } from '@/api/page/page'
+const mapRef = ref() // 地图实例
+const mapStore = useMapStore() // 地图仓库
+watch(() => mapStore.detailList, (newVal) => {
+  if (newVal) {
+    // 清空原来轨迹
+    mapRef.value.clearLine()
+    // 绘制轨迹
+    mapRef.value.drawLine(newVal)
+  }
+}, {
+  deep: true,
+})
 const center = ref([116.26759100, 39.91563500]) // 地图中心
 const zoom = ref(17) // 地图显示的缩放级别
+
+// 日期选择组件实例
+const dateRef = ref()
+// 日期选择top距离
+const dateTop = ref(0)
 // 菜单选中
 const select = ref(0)
 // 条件菜单选中
@@ -48,12 +73,12 @@
     menu: [
       {
         name: '已处置',
-        value: '0',
+        value: '1',
         color: '#2DBF00',
       },
       {
         name: '未处置',
-        value: '1',
+        value: '0',
         color: '#9F1919',
       },
     ],
@@ -160,14 +185,26 @@
     check: dateCheck,
   },
 ])
+
 // 切换菜单
 const change = (index: number) => {
-  select.value = index
   if (index === 5) {
+    const ele = document.getElementById('menu-item5')
+    dateTop.value = ele?.getBoundingClientRect().top as number
+    select.value = index
     return
+  }// 清空地图绘制
+  mapRef.value?.clearDraw()
+  if (select.value !== index) {
+    cselect.value = menu.value[index].menu.map((item: any) => item.value)
   }
-  cselect.value = menu.value[index].menu.map((item: any) => item.value)
+  select.value = index
 }
+// 日期选择top距离
+window.addEventListener('resize', () => {
+  const ele = document.getElementById('menu-item5')
+  dateTop.value = ele?.getBoundingClientRect().top as number
+})
 // 改变条件菜单
 const cchange = (value: string) => {
   if (cselect.value.includes(value)) {
@@ -176,7 +213,152 @@
   else {
     cselect.value.push(value)
   }
+  change(select.value)
 }
+// 确认日期
+const confirmData = () => {
+  change(0)
+}
+// 获取首页数据
+const fetchHome = async () => {
+  console.log(dateRef.value?.dateActive, 'dateRef.value?.dateActive')
+  // 清空地图绘制
+  mapRef.value?.clearDraw()
+  // 获取车辆列表
+  const fetchCar = async () => {
+    const res1 = await getCarList({})
+    console.log(res1, '车')
+    const data1 = res1.data.map((item: any) => {
+      return {
+        ...item,
+        lat: item.latitude,
+        lng: item.longitude,
+        // lng: '116.265872',
+        // lat: '39.914083',
+        dialog: 'car',
+        // 0 离线  1 在线
+        icon: item.status === '离线' ? car2 : car1,
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 绘制标记点
+    // mapRef.value.drawPonit(data1)
+    return data1
+  }
+  // 获取任务列表
+  const fetchTask = async () => {
+    const res2 = await getTaskList({
+      beginDate: dateRef.value?.dateActive,
+      endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    })
+    console.log(res2, '任务')
+    const data2 = res2.data.rows.map((item: any) => {
+      return {
+        ...item,
+        dialog: 'task',
+        lat: item.latitude,
+        lng: item.longitude,
+        icon: task,
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 绘制标记点
+    // mapRef.value.drawPonit(data2)
+    return data2
+  }
+  // 车0 任务1
+  if (cselect.value.length === 2) {
+    const res1 = await fetchCar()
+    const res2 = await fetchTask()
+    // 绘制标记点
+    mapRef.value.drawPonit([...res1, ...res2])
+  }
+  else if (cselect.value.length === 1) {
+    if (cselect.value.includes('0')) {
+      const res = await fetchCar()
+      mapRef.value.drawPonit(res)
+    }
+    else if (cselect.value.includes('1')) {
+      const res = await fetchTask()
+      mapRef.value.drawPonit(res)
+    }
+  }
+}
+// 清空折线轨迹
+const clearTrack = () => {
+  mapRef.value.clearLine()
+  mapStore.setDetailList([])
+}
+// 获取甲烷数据
+const fetchGas = () => {
+  // if (!cselect.value.length) {
+  //   // 清空地图绘制
+  //   mapRef.value?.clearDraw()
+  //   return
+  // }
+  getGasList({
+    alarmType: '1',
+    alarmStatus: cselect.value.length === 2 ? '' : cselect.value[0], // 报警状态
+    beginDate: dateRef.value?.dateActive, // 报警开始时间
+    endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 报警结束时间
+  }).then((res) => {
+    console.log(res.data, '甲烷数据')
+    // 整理数据
+    const data = res.data.rows.map((item: any) => {
+      return {
+        ...item,
+        lat: item.alarmLatitude,
+        lng: item.alarmLongitude,
+        icon: item.alarmStatus === '已处置' ? gas1 : gas2,
+        dialog: 'gas',
+      }
+    }).filter((item: any) => item.lat && item.lng)
+    // 绘制标记点
+    mapRef.value.drawPonit(data)
+  })
+}
+// 获取点位数据
+watch(() => [select.value, cselect.value], (newVal: any[], oldVal) => {
+  if (!mapRef.value?.isMap) {
+    console.log('初始化未完成')
+    return
+  }
+  if (!newVal[1].length) {
+    // 清空地图绘制
+    mapRef.value?.clearDraw()
+    return
+  }
+  switch (newVal[0]) {
+    case 0:
+      fetchHome()
+      console.log('首页')
+      break
+    case 1:
+      fetchGas()
+      console.log('甲烷')
+      break
+    case 2:
+      console.log('识别')
+      break
+    case 3:
+      console.log('占压')
+      break
+    case 4:
+      console.log('耦合')
+      break
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+// 监听地图是否初始化完成
+watch(() => mapRef.value?.isMap, (newVal) => {
+  if (newVal) {
+  // 初始化完成
+    fetchHome()
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
 </script>
 
 <template>
@@ -185,16 +367,20 @@
       <div class="title">
         地上地下一体化管线风险识别与预警地图看板
       </div>
-      <map-component :center="center" :zoom="zoom" />
+      <map-component ref="mapRef" :center="center" :zoom="zoom" />
       <!-- 主菜单 -->
       <div class="menu">
-        <div v-for="(item, index) in menu" :key="index" class="menu-item" @click="change(index)">
+        <div v-for="(item, index) in menu" :id="`menu-item${index}`" :key="index" class="menu-item" @click="change(index)">
           <img :src="select === index ? item.check : item.icon" width="70" height="70">
-          <date-select v-if="select === 5 && index === 5" class="date-select" />
         </div>
       </div>
+      <!-- 时间查询 -->
+      <date-select v-show="select === 5" ref="dateRef" class="date-select" :style="`top:${dateTop - 60}px`" @confirm="confirmData" />
       <!-- 条件菜单 -->
       <div class="cmenu">
+        <div v-if="select === 0 && mapStore.detailList.length" class="menu-child" style="background-color: #666;" @click="clearTrack">
+          清空轨迹
+        </div>
         <div v-for="(child, cindex) in menu[select].menu" :key="cindex" class="menu-child" :style="`background:${cselect.includes(child.value) ? child.color : '#666'};`" @click="cchange(child.value)">
           {{ child.name }}
         </div>
@@ -240,7 +426,7 @@
 .cmenu {
   position: absolute;
   right: 28%;
-  top: 10%;
+  top: 80px;
   z-index: 999;
   display: flex;
 
diff --git a/src/views/inspection/task/list.vue b/src/views/inspection/task/list.vue
index c07d16d..880c09d 100644
--- a/src/views/inspection/task/list.vue
+++ b/src/views/inspection/task/list.vue
@@ -150,7 +150,7 @@
     },
   }).then(({ value }) => {
     // 发送修改请求
-    updateTask({ ...row, taskName: value }).then((res) => {
+    updateTask({ ...row, taskName: value, updateTime: undefined }).then((res) => {
       ElMessage({
         type: 'success',
         message: '修改成功',