diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/operationRecord.vue b/src/views/home/device/device/components/operationRecord.vue
new file mode 100644
index 0000000..0280058
--- /dev/null
+++ b/src/views/home/device/device/components/operationRecord.vue
@@ -0,0 +1,57 @@
+<!--
+  Description: 设备详情-运维记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOperationRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+})
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '记录类型', value: '', align: 'center' },
+  { text: '最新状态', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作人组织机构', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getAlarmRecord(listQuery.value).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <!-- <table-container title=""> -->
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    :pagination="false"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+  <!-- </table-container> -->
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/operationRecord.vue b/src/views/home/device/device/components/operationRecord.vue
new file mode 100644
index 0000000..0280058
--- /dev/null
+++ b/src/views/home/device/device/components/operationRecord.vue
@@ -0,0 +1,57 @@
+<!--
+  Description: 设备详情-运维记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOperationRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+})
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '记录类型', value: '', align: 'center' },
+  { text: '最新状态', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作人组织机构', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getAlarmRecord(listQuery.value).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <!-- <table-container title=""> -->
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    :pagination="false"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+  <!-- </table-container> -->
+</template>
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
new file mode 100644
index 0000000..d58d515
--- /dev/null
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -0,0 +1,73 @@
+<!--
+  Description: 展示位置
+  Author: 李亚光
+  Date: 2024-09-03
+ -->
+<script lang="ts" setup name="showMapPosition">
+import AMap from '@/components/map/index.vue'
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const mapRef = ref()
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const init = ref(false)
+const position = ref<string[]>([])
+const initDialog = (location: string[]) => {
+  position.value = location
+  dialogFormVisible.value = true
+  if (completeMapFlag.value === true) {
+    mapRef.value.map.setCenter(location)
+    mapRef.value.addMarker({
+      position: location,
+      content: '',
+      label: '',
+    })
+  }
+  else {
+    init.value = true
+  }
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (init.value) {
+    mapRef.value.map.setCenter(position.value)
+    mapRef.value.addMarker({
+      position: position.value,
+      content: '',
+      label: '',
+    })
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="详细位置" append-to-body>
+    <div style="width: 100%;height: 300px;">
+      <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/operationRecord.vue b/src/views/home/device/device/components/operationRecord.vue
new file mode 100644
index 0000000..0280058
--- /dev/null
+++ b/src/views/home/device/device/components/operationRecord.vue
@@ -0,0 +1,57 @@
+<!--
+  Description: 设备详情-运维记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOperationRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+})
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '记录类型', value: '', align: 'center' },
+  { text: '最新状态', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作人组织机构', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getAlarmRecord(listQuery.value).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <!-- <table-container title=""> -->
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    :pagination="false"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+  <!-- </table-container> -->
+</template>
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
new file mode 100644
index 0000000..d58d515
--- /dev/null
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -0,0 +1,73 @@
+<!--
+  Description: 展示位置
+  Author: 李亚光
+  Date: 2024-09-03
+ -->
+<script lang="ts" setup name="showMapPosition">
+import AMap from '@/components/map/index.vue'
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const mapRef = ref()
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const init = ref(false)
+const position = ref<string[]>([])
+const initDialog = (location: string[]) => {
+  position.value = location
+  dialogFormVisible.value = true
+  if (completeMapFlag.value === true) {
+    mapRef.value.map.setCenter(location)
+    mapRef.value.addMarker({
+      position: location,
+      content: '',
+      label: '',
+    })
+  }
+  else {
+    init.value = true
+  }
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (init.value) {
+    mapRef.value.map.setCenter(position.value)
+    mapRef.value.addMarker({
+      position: position.value,
+      content: '',
+      label: '',
+    })
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="详细位置" append-to-body>
+    <div style="width: 100%;height: 300px;">
+      <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/device/device/components/statusReport.vue b/src/views/home/device/device/components/statusReport.vue
new file mode 100644
index 0000000..110d749
--- /dev/null
+++ b/src/views/home/device/device/components/statusReport.vue
@@ -0,0 +1,92 @@
+<!--
+  Description: 设备详情-状态上报
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailStatusReport">
+import dayjs from 'dayjs'
+// import { getDataSearch } from '@/api/home/device/device'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '采集间隔(分钟)', value: '', align: 'center' },
+  { text: '上报间隔(小时)', value: '', align: 'center' },
+  { text: '硬件版本号', value: '', align: 'center' },
+  { text: '软件版本号', value: '', align: 'center' },
+  { text: 'SIM卡号', value: '', align: 'center' },
+  { text: '模组IMEI号', value: '', align: 'center' },
+  { text: '上报时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  // listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  // loadingTable.value = true
+  // getDataSearch(listQuery.value).then((res) => {
+  //   list.value = res.data
+  //   loadingTable.value = false
+  // }).catch(() => {
+  loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  // getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+  //   deviceTypeList.value = res.data.rows
+  fetchData()
+  // })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/operationRecord.vue b/src/views/home/device/device/components/operationRecord.vue
new file mode 100644
index 0000000..0280058
--- /dev/null
+++ b/src/views/home/device/device/components/operationRecord.vue
@@ -0,0 +1,57 @@
+<!--
+  Description: 设备详情-运维记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOperationRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+})
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '记录类型', value: '', align: 'center' },
+  { text: '最新状态', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作人组织机构', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getAlarmRecord(listQuery.value).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <!-- <table-container title=""> -->
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    :pagination="false"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+  <!-- </table-container> -->
+</template>
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
new file mode 100644
index 0000000..d58d515
--- /dev/null
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -0,0 +1,73 @@
+<!--
+  Description: 展示位置
+  Author: 李亚光
+  Date: 2024-09-03
+ -->
+<script lang="ts" setup name="showMapPosition">
+import AMap from '@/components/map/index.vue'
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const mapRef = ref()
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const init = ref(false)
+const position = ref<string[]>([])
+const initDialog = (location: string[]) => {
+  position.value = location
+  dialogFormVisible.value = true
+  if (completeMapFlag.value === true) {
+    mapRef.value.map.setCenter(location)
+    mapRef.value.addMarker({
+      position: location,
+      content: '',
+      label: '',
+    })
+  }
+  else {
+    init.value = true
+  }
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (init.value) {
+    mapRef.value.map.setCenter(position.value)
+    mapRef.value.addMarker({
+      position: position.value,
+      content: '',
+      label: '',
+    })
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="详细位置" append-to-body>
+    <div style="width: 100%;height: 300px;">
+      <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/device/device/components/statusReport.vue b/src/views/home/device/device/components/statusReport.vue
new file mode 100644
index 0000000..110d749
--- /dev/null
+++ b/src/views/home/device/device/components/statusReport.vue
@@ -0,0 +1,92 @@
+<!--
+  Description: 设备详情-状态上报
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailStatusReport">
+import dayjs from 'dayjs'
+// import { getDataSearch } from '@/api/home/device/device'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '采集间隔(分钟)', value: '', align: 'center' },
+  { text: '上报间隔(小时)', value: '', align: 'center' },
+  { text: '硬件版本号', value: '', align: 'center' },
+  { text: '软件版本号', value: '', align: 'center' },
+  { text: 'SIM卡号', value: '', align: 'center' },
+  { text: '模组IMEI号', value: '', align: 'center' },
+  { text: '上报时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  // listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  // loadingTable.value = true
+  // getDataSearch(listQuery.value).then((res) => {
+  //   list.value = res.data
+  //   loadingTable.value = false
+  // }).catch(() => {
+  loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  // getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+  //   deviceTypeList.value = res.data.rows
+  fetchData()
+  // })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 663618b..9e7b316 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -11,6 +11,7 @@
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
+const $router = useRouter()
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -108,6 +109,16 @@
 // 新建或者编辑
 const addRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'detail') {
+    $router.push({
+      path: `/manage/${type}`,
+      query: {
+        id: row.id,
+        row: JSON.stringify(row),
+      },
+    })
+    return
+  }
   addRef.value.initDialog(type, row)
 }
 // 删除
@@ -132,6 +143,19 @@
     })
   })
 }
+// 撤防
+const changeDefense = (row: any) => {
+  ElMessageBox.confirm(
+    `确定要撤防${row.devcode}设备吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+  })
+}
 // 导出列表
 const exportList = () => {
   const loading = ElLoading.service({
@@ -202,7 +226,7 @@
 <template>
   <!-- 布局 -->
   <app-container>
-    <add-dialog ref="addRef" />
+    <add-dialog ref="addRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
@@ -304,7 +328,7 @@
           />
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <el-table-column label="操作" align="center" width="150">
             <template #default="scope">
               <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
                 查看
@@ -312,9 +336,12 @@
               <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="changeDefense(scope.row)">
                 撤防
               </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
             </template>
           </el-table-column>
         </template>

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/operationRecord.vue b/src/views/home/device/device/components/operationRecord.vue
new file mode 100644
index 0000000..0280058
--- /dev/null
+++ b/src/views/home/device/device/components/operationRecord.vue
@@ -0,0 +1,57 @@
+<!--
+  Description: 设备详情-运维记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOperationRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+})
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '记录类型', value: '', align: 'center' },
+  { text: '最新状态', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作人组织机构', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getAlarmRecord(listQuery.value).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <!-- <table-container title=""> -->
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    :pagination="false"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+  <!-- </table-container> -->
+</template>
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
new file mode 100644
index 0000000..d58d515
--- /dev/null
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -0,0 +1,73 @@
+<!--
+  Description: 展示位置
+  Author: 李亚光
+  Date: 2024-09-03
+ -->
+<script lang="ts" setup name="showMapPosition">
+import AMap from '@/components/map/index.vue'
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const mapRef = ref()
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const init = ref(false)
+const position = ref<string[]>([])
+const initDialog = (location: string[]) => {
+  position.value = location
+  dialogFormVisible.value = true
+  if (completeMapFlag.value === true) {
+    mapRef.value.map.setCenter(location)
+    mapRef.value.addMarker({
+      position: location,
+      content: '',
+      label: '',
+    })
+  }
+  else {
+    init.value = true
+  }
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (init.value) {
+    mapRef.value.map.setCenter(position.value)
+    mapRef.value.addMarker({
+      position: position.value,
+      content: '',
+      label: '',
+    })
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="详细位置" append-to-body>
+    <div style="width: 100%;height: 300px;">
+      <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/device/device/components/statusReport.vue b/src/views/home/device/device/components/statusReport.vue
new file mode 100644
index 0000000..110d749
--- /dev/null
+++ b/src/views/home/device/device/components/statusReport.vue
@@ -0,0 +1,92 @@
+<!--
+  Description: 设备详情-状态上报
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailStatusReport">
+import dayjs from 'dayjs'
+// import { getDataSearch } from '@/api/home/device/device'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '采集间隔(分钟)', value: '', align: 'center' },
+  { text: '上报间隔(小时)', value: '', align: 'center' },
+  { text: '硬件版本号', value: '', align: 'center' },
+  { text: '软件版本号', value: '', align: 'center' },
+  { text: 'SIM卡号', value: '', align: 'center' },
+  { text: '模组IMEI号', value: '', align: 'center' },
+  { text: '上报时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  // listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  // loadingTable.value = true
+  // getDataSearch(listQuery.value).then((res) => {
+  //   list.value = res.data
+  //   loadingTable.value = false
+  // }).catch(() => {
+  loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  // getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+  //   deviceTypeList.value = res.data.rows
+  fetchData()
+  // })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 663618b..9e7b316 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -11,6 +11,7 @@
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
+const $router = useRouter()
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -108,6 +109,16 @@
 // 新建或者编辑
 const addRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'detail') {
+    $router.push({
+      path: `/manage/${type}`,
+      query: {
+        id: row.id,
+        row: JSON.stringify(row),
+      },
+    })
+    return
+  }
   addRef.value.initDialog(type, row)
 }
 // 删除
@@ -132,6 +143,19 @@
     })
   })
 }
+// 撤防
+const changeDefense = (row: any) => {
+  ElMessageBox.confirm(
+    `确定要撤防${row.devcode}设备吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+  })
+}
 // 导出列表
 const exportList = () => {
   const loading = ElLoading.service({
@@ -202,7 +226,7 @@
 <template>
   <!-- 布局 -->
   <app-container>
-    <add-dialog ref="addRef" />
+    <add-dialog ref="addRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
@@ -304,7 +328,7 @@
           />
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <el-table-column label="操作" align="center" width="150">
             <template #default="scope">
               <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
                 查看
@@ -312,9 +336,12 @@
               <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="changeDefense(scope.row)">
                 撤防
               </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/device/instruction/components/editDialog.vue b/src/views/home/device/instruction/components/editDialog.vue
index fb7109b..a263304 100644
--- a/src/views/home/device/instruction/components/editDialog.vue
+++ b/src/views/home/device/instruction/components/editDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-15
  -->
 <script lang="ts" setup name="EditInstruction">
+import dayjs from 'dayjs'
 import type { FormRules } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getDictByCode } from '@/api/system/dict'
@@ -13,6 +14,12 @@
 import { getDeviceListPage } from '@/api/home/device/device'
 import useUserStore from '@/store/modules/user'
 const emits = defineEmits(['refresh'])
+const $route = useRoute()
+const $router = useRouter()
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const deviceList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
+const deviceAllList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const user = useUserStore()
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -31,10 +38,12 @@
   deviceTypeName: '',
   framecontent: '',
   framecontentDesc: '',
+  writetime: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
   add: '新增',
+  addOther: '新增',
   detail: '详情',
 } // 表头显示标题
 const rules: FormRules = {
@@ -61,6 +70,7 @@
     deviceTypeName: '',
     framecontent: '',
     framecontentDesc: '',
+    writetime: '',
   }
 }
 
@@ -75,6 +85,16 @@
     dataForm.value.operator = user.id
     dataForm.value.operatorName = user.name
   }
+  else if (dialogStatus.value === 'addOther') {
+    resetForm()
+    dataFormRef.value?.resetFields()
+    dataForm.value.operator = user.id
+    dataForm.value.operatorName = user.name
+    const data = JSON.parse($route.query.row as string)
+    dataForm.value.productId = data.productId
+    dataForm.value.devcode = data.devcode
+    dataForm.value.deviceType = data.deviceType
+  }
   else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
@@ -105,6 +125,9 @@
           setTimeout(() => {
             emits('refresh')
           })
+          if (dialogStatus.value === 'addOther') {
+            $router.back()
+          }
         }
       }).catch((_) => { // 异常情况，loading置为false
       })
@@ -126,20 +149,21 @@
 
 // 保存数据
 const saveData = () => {
+  dataForm.value.deviceTypeName = deviceTypeList.value[deviceTypeList.value.findIndex(citem => dataForm.value.deviceType === citem.value)].name
+  dataForm.value.writetime = dayjs().format('YYYY-MM-DD HH:mm:ss')
   if (dialogStatus.value === 'edit') {
     updateData()
   }
-  else if (dialogStatus.value === 'add') {
+  else if (dialogStatus.value === 'add' || dialogStatus.value === 'addOther') {
     createData()
   }
 }
 const cancel = () => {
   dialogFormVisible.value = false
+  if (dialogStatus.value === 'addOther') {
+    $router.back()
+  }
 }
-const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
-const deviceList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
-const deviceAllList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
-const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 
 // 获取字典
 const fetchDict = async () => {
@@ -167,7 +191,6 @@
       deviceType: item.deviceType,
       productId: item.productId,
     }))
-    console.log(deviceList.value, 'deviceList.value')
     deviceAllList.value = JSON.parse(JSON.stringify(deviceList.value))
   })
 }

diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index aa7dadc..e1220f7 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -47,3 +47,41 @@
     responseType: 'blob',
   })
 }
+
+// 详情
+export function getDeviceDetail(id: any) {
+  return request({
+    url: '/system/busDevice/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
+// 数据查询
+export function getDataSearch(data: any) {
+  return request({
+    url: '/system/busDevice/monitorData',
+    method: 'post',
+    data,
+  })
+}
+
+// 报警记录
+export function getAlarmRecord(data: any) {
+  return request({
+    url: '/system/busDevice/alarmRecords',
+    method: 'post',
+    data,
+  })
+}
+
+// 耗电分析
+export function getElectricityAnalyse(data: any) {
+  return request({
+    url: '/system/busDevice/cellAnalysis',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/instruction.ts b/src/api/home/device/instruction.ts
index bee99eb..29e3db4 100644
--- a/src/api/home/device/instruction.ts
+++ b/src/api/home/device/instruction.ts
@@ -3,7 +3,7 @@
  */
 import request from '@/api/index'
 
-// 设备管理基础列表
+// 基础列表
 export function getInstructionListPage(data: any) {
   return request({
     url: `/system/busConfig/listPage?limit=${data.limit}&offset=${data.offset}`,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 89fcd01..3baff06 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -323,6 +323,7 @@
     }
     option.series = newSeries
   }
+  console.log(option.series, 'option.series')
   return option
 }
 // 初始化图表
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index a32c37d..d9d0923 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -393,6 +393,19 @@
           auth: '/device/manage',
         },
       },
+      {
+        path: '/manage/:type',
+        component: () => import('@/views/home/device/device/components/detail.vue'),
+        name: 'DeviceManageDetail',
+        meta: {
+          title: '设备详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/device/manage',
+          auth: '/device/manage',
+        },
+      },
       // {
       //   path: 'operation',
       //   component: () => import('@/views/home/device/operation/index.vue'),
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index ef299f5..4c9f349 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -30,6 +30,8 @@
   watchObject: '',
   tagNumber: '', // 安装位号
   deptName: '',
+  lng: '',
+  lat: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
@@ -56,6 +58,8 @@
     tagNumber: '', // 安装位号
     watchObject: '',
     deptName: '',
+    lng: '',
+    lat: '',
   }
 }
 
@@ -196,6 +200,8 @@
   dataForm.value.tagNumber = data.tagNumber
   dataForm.value.position = data.position
   dataForm.value.deptName = data.deptName
+  dataForm.value.lat = data.latGaode
+  dataForm.value.lng = data.lngGaode
 }
 </script>
 
@@ -275,7 +281,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row v-if="dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="leftLength">
             <el-input v-model="dataForm.leftLength" placeholder="左侧指示带长度(m)" style="width: 100%;" clearable />
diff --git a/src/views/home/device/device/components/alarmRecord.vue b/src/views/home/device/device/components/alarmRecord.vue
new file mode 100644
index 0000000..687266f
--- /dev/null
+++ b/src/views/home/device/device/components/alarmRecord.vue
@@ -0,0 +1,115 @@
+<!--
+  Description: 设备详情-报警记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailAlarmRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  alarmType: '',
+  begTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '报警状态', value: '', align: 'center' },
+  { text: '现场确认', value: '', align: 'center' },
+  { text: '现场处置', value: '', align: 'center' },
+  { text: '处置人员', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getAlarmRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 查看详情
+const detail = (row: any) => {
+
+}
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+// 获取字典
+const fetchDict = async () => {
+  // 报警类型
+  getDictByCode('alarmType').then((res) => {
+    alarmTypeList.value = res.data
+  })
+}
+onMounted(() => {
+  fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-select v-model="listQuery.alarmType" placeholder="报警类型" filterable clearable class="select" style="width: 175px;">
+        <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+      </el-select>
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+      <template #columns>
+        <el-table-column label="操作" align="center" width="90">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/controlRecord.vue b/src/views/home/device/device/components/controlRecord.vue
new file mode 100644
index 0000000..185348e
--- /dev/null
+++ b/src/views/home/device/device/components/controlRecord.vue
@@ -0,0 +1,108 @@
+<!--
+  Description: 设备详情-控制记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailControlRecord">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '配置内容', value: 'framecontentDesc', align: 'center' },
+  { text: '下发状态', value: 'statusName', align: 'center' },
+  { text: '操作时间', value: 'writetime', align: 'center' },
+])
+const statusList = ref<{ id: string; name: string; value: string }[]>([]) // 下发状态
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      statusName: statusList.value[statusList.value.findIndex(citem => item.status === citem.value)].name,
+    }))
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 新建控制记录
+const $router = useRouter()
+const addControl = () => {
+  const data = JSON.parse($route.query.row as string)
+  console.log(data, 'data')
+  $router.push({
+    path: '/device/instruction',
+    query: {
+      row: $route.query.row,
+    },
+  })
+}
+// 获取字典
+const fetchDict = async () => {
+  const res2 = await getDictByCode('issuedStatus')
+  statusList.value = res2.data
+}
+onMounted(async () => {
+  await fetchDict()
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="操作开始时间"
+        end-placeholder="操作结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+    </template>
+    <template #btns-right>
+      <el-button type="primary" @click="addControl">
+        新建
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/dataSearch.vue b/src/views/home/device/device/components/dataSearch.vue
new file mode 100644
index 0000000..a7e37fa
--- /dev/null
+++ b/src/views/home/device/device/components/dataSearch.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备详情-数据查询
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailDataSearch">
+import dayjs from 'dayjs'
+import { getDataSearch } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+const deviceTypeList = ref<any[]>([])
+// 时间查询条件
+const timerangForCollect = ref<string[]>([])
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForCollect.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+})
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForCollect.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getDataSearch(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForCollect" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
new file mode 100644
index 0000000..354da6b
--- /dev/null
+++ b/src/views/home/device/device/components/detail.vue
@@ -0,0 +1,145 @@
+<!--
+  Description: 设备管理-详情
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+import showPosition from './showPosition.vue'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDeviceDetail } from '@/api/home/device/device'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'deviceTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'deviceModel',
+    align: 'center',
+  },
+  {
+    text: '设备厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经纬度',
+    value: 'lnglat',
+    align: 'center',
+  },
+  {
+    text: '安装日期',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '在用状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    loading.value = false
+    detailInfo.value = JSON.parse($route.query.row as string)
+    detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
+    detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || ''
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <!-- 地图展示位置弹窗 -->
+    <show-position ref="mapRef" />
+    <detail-page title="设备详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span :class="`${item.text === '经纬度' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/device/device/components/detailData.vue b/src/views/home/device/device/components/detailData.vue
new file mode 100644
index 0000000..764e3a5
--- /dev/null
+++ b/src/views/home/device/device/components/detailData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import dataSearch from './dataSearch.vue'
+import statusReport from './statusReport.vue'
+import alarmRecord from './alarmRecord.vue'
+import operationRecord from './operationRecord.vue'
+import controlRecord from './controlRecord.vue'
+import electricityAnalyse from './electricityAnalyse.vue'
+import offlineAnalyse from './offlineAnalyse.vue'
+const activeName = ref('数据查询')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="数据查询" name="数据查询">
+      <data-search v-if="activeName === '数据查询'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="状态上报" name="状态上报">
+      <status-report v-if="activeName === '状态上报'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="报警记录" name="报警记录">
+      <alarm-record v-if="activeName === '报警记录'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="运维记录" name="运维记录">
+      <operation-record v-if="activeName === '运维记录'" />
+    </el-tab-pane> -->
+    <el-tab-pane label="控制记录" name="控制记录">
+      <control-record v-if="activeName === '控制记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="耗电分析" name="耗电分析">
+      <electricity-analyse v-if="activeName === '耗电分析'" />
+    </el-tab-pane>
+    <!-- <el-tab-pane label="离线分析" name="离线分析">
+      <offline-analyse v-if="activeName === '离线分析'" />
+    </el-tab-pane> -->
+  </el-tabs>
+</template>
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
new file mode 100644
index 0000000..06d6a5a
--- /dev/null
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -0,0 +1,129 @@
+<!--
+  Description: 设备详情-耗电分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getElectricityAnalyse } from '@/api/home/device/device'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+  typeName: '',
+})
+const deviceTypeList = ref<any[]>([])
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const result = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = result.devcode
+  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === result.deviceType)[0]?.typeName || ''
+  loadingTable.value = true
+  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+
+    xAxisData.value = [
+      '2024-07-01 12:11:12',
+      '2024-07-02 12:11:12',
+      '2024-07-03 12:11:12',
+      '2024-07-04 12:11:12',
+      '2024-07-05 12:11:12',
+      '2024-07-06 12:11:12',
+      '2024-07-07 12:11:12',
+    ]
+    data.value = [
+      {
+        name: '电量',
+        data: ['100', '87', '73', '53', '41', '32', '17'],
+        symbol: 'none',
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows
+    fetchData()
+  })
+})
+</script>
+
+<template>
+  <div style="width: 100%;display: flex;">
+    <table-container title="" class="table">
+      <template #btns-left>
+        <!-- 查询条件 -->
+        <el-date-picker
+          v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+        />
+        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+          搜索
+        </el-button>
+        <el-button type="primary" style="margin-left: 10px;">
+          导出
+        </el-button>
+      </template>
+      <normal-table
+        :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        :pagination="false" :height="300"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <div style="width: 50%;height: 360px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data" :gradient="false" :smooth="false"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .table {
+//   ::v-deep(.table-container) {
+//     width: 50%;
+//   }
+// }
+::v-deep(.table-container) {
+  width: 50%;
+}
+</style>
diff --git a/src/views/home/device/device/components/localtionForPieple.vue b/src/views/home/device/device/components/localtionForPieple.vue
index d5494fe..6684c32 100644
--- a/src/views/home/device/device/components/localtionForPieple.vue
+++ b/src/views/home/device/device/components/localtionForPieple.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-管线
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -138,6 +138,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
   // 判断是否同意获取当前位置
   if (!sessionStorage.getItem('longitude')) {
     getLocation()
@@ -163,6 +164,8 @@
         emits('confirm', {
           ...dataForm.value,
           deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
+          latGaode: dataForm.value.latitude,
+          lngGaode: dataForm.value.longitude,
         })
         dialogFormVisible.value = false
       }
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index e08434e..adb73f2 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-场站
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -12,6 +12,8 @@
 // 表格数据
 const list = ref([])
 const total = ref(0)
+// 单选
+const select = ref(-1)
 // 初始展示列
 const columns = ref<any>([
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
@@ -73,6 +75,7 @@
 // 初始化对话框
 const initDialog = () => {
   dialogFormVisible.value = true
+  // select.value = -1
 }
 // 获取字典
 const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
@@ -86,8 +89,7 @@
 defineExpose({
   initDialog,
 })
-// 单选
-const select = ref(-1)
+
 // 保存数据
 const saveData = () => {
   if (select.value === -1) {
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index b061b8c..8058eab 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -1,7 +1,7 @@
 <!--
   Description: 安装位置-闸井
   Author: 李亚光
-  Date: 2024-09-22
+  Date: 2024-09-02
  -->
 <script lang="ts" setup name="LocaltionForWell">
 import { ElMessage } from 'element-plus'
@@ -14,6 +14,7 @@
 const list = ref([])
 const total = ref(0)
 const currentTagNum = ref() // 当前选中的位号
+const multiSelectData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
@@ -98,13 +99,14 @@
 fetchDict()
 // 初始化对话框
 const initDialog = () => {
+  // multiSelectData.value = []
   dialogFormVisible.value = true
 }
 defineExpose({
   initDialog,
 })
 // 多选逻辑
-const multiSelectData = ref([])
+
 const multiSelect = (data: any) => {
   if (!multiSelectData.value.length && data.length === 1) {
     // 禁用其他的位号
diff --git a/src/views/home/device/device/components/offlineAnalyse.vue b/src/views/home/device/device/components/offlineAnalyse.vue
new file mode 100644
index 0000000..43a0ce7
--- /dev/null
+++ b/src/views/home/device/device/components/offlineAnalyse.vue
@@ -0,0 +1,84 @@
+<!--
+  Description: 设备详情-离线分析
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
+import dayjs from 'dayjs'
+import { getInstructionListPage } from '@/api/home/device/instruction'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  beginTime: '',
+  endTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.beginTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '离线时间', value: '', align: 'center' },
+  { text: '离线原因', value: '', align: 'center' },
+  { text: '处置情况', value: '', align: 'center' },
+  { text: '离线天数', value: '', align: 'center' },
+  { text: '恢复时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getInstructionListPage({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/components/operationRecord.vue b/src/views/home/device/device/components/operationRecord.vue
new file mode 100644
index 0000000..0280058
--- /dev/null
+++ b/src/views/home/device/device/components/operationRecord.vue
@@ -0,0 +1,57 @@
+<!--
+  Description: 设备详情-运维记录
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailOperationRecord">
+import dayjs from 'dayjs'
+import { getAlarmRecord } from '@/api/home/device/device'
+import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+})
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '记录类型', value: '', align: 'center' },
+  { text: '最新状态', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作人组织机构', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  loadingTable.value = true
+  // getAlarmRecord(listQuery.value).then((res) => {
+  //   list.value = res.data
+  loadingTable.value = false
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <!-- <table-container title=""> -->
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    :pagination="false"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+  <!-- </table-container> -->
+</template>
diff --git a/src/views/home/device/device/components/showPosition.vue b/src/views/home/device/device/components/showPosition.vue
new file mode 100644
index 0000000..d58d515
--- /dev/null
+++ b/src/views/home/device/device/components/showPosition.vue
@@ -0,0 +1,73 @@
+<!--
+  Description: 展示位置
+  Author: 李亚光
+  Date: 2024-09-03
+ -->
+<script lang="ts" setup name="showMapPosition">
+import AMap from '@/components/map/index.vue'
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const mapRef = ref()
+// 地图是否加载完成
+const completeMapFlag = ref(false)
+const init = ref(false)
+const position = ref<string[]>([])
+const initDialog = (location: string[]) => {
+  position.value = location
+  dialogFormVisible.value = true
+  if (completeMapFlag.value === true) {
+    mapRef.value.map.setCenter(location)
+    mapRef.value.addMarker({
+      position: location,
+      content: '',
+      label: '',
+    })
+  }
+  else {
+    init.value = true
+  }
+}
+const completeMap = () => {
+  completeMapFlag.value = true
+  if (init.value) {
+    mapRef.value.map.setCenter(position.value)
+    mapRef.value.addMarker({
+      position: position.value,
+      content: '',
+      label: '',
+    })
+  }
+}
+defineExpose({
+  initDialog,
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="详细位置" append-to-body>
+    <div style="width: 100%;height: 300px;">
+      <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/device/device/components/statusReport.vue b/src/views/home/device/device/components/statusReport.vue
new file mode 100644
index 0000000..110d749
--- /dev/null
+++ b/src/views/home/device/device/components/statusReport.vue
@@ -0,0 +1,92 @@
+<!--
+  Description: 设备详情-状态上报
+  Author: 李亚光
+  Date: 2023-09-03
+ -->
+<script lang="ts" setup name="DeviceDetailStatusReport">
+import dayjs from 'dayjs'
+// import { getDataSearch } from '@/api/home/device/device'
+const $route = useRoute()
+const listQuery = ref({
+  devcode: '',
+  typeName: '',
+  logBegTime: '',
+  logEndTime: '',
+})
+// 时间查询条件
+const timerangForReport = ref<string[]>([])
+watch(() => timerangForReport.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${newVal[1]}`
+    }
+  }
+})
+timerangForReport.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '采集间隔(分钟)', value: '', align: 'center' },
+  { text: '上报间隔(小时)', value: '', align: 'center' },
+  { text: '硬件版本号', value: '', align: 'center' },
+  { text: '软件版本号', value: '', align: 'center' },
+  { text: 'SIM卡号', value: '', align: 'center' },
+  { text: '模组IMEI号', value: '', align: 'center' },
+  { text: '上报时间', value: '', align: 'center' },
+])
+const fetchData = () => {
+  const data = JSON.parse($route.query.row as string)
+  listQuery.value.devcode = data.devcode
+  // listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.id === data.deviceType)[0]?.typeName || ''
+  // loadingTable.value = true
+  // getDataSearch(listQuery.value).then((res) => {
+  //   list.value = res.data
+  //   loadingTable.value = false
+  // }).catch(() => {
+  loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  // getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+  //   deviceTypeList.value = res.data.rows
+  fetchData()
+  // })
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerangForReport" type="datetimerange" range-separator="至" start-placeholder="上报开始时间"
+        end-placeholder="上报结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button type="primary" style="margin-left: 10px;">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #preColumns>
+        <el-table-column label="序号" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 663618b..9e7b316 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -11,6 +11,7 @@
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
+const $router = useRouter()
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -108,6 +109,16 @@
 // 新建或者编辑
 const addRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'detail') {
+    $router.push({
+      path: `/manage/${type}`,
+      query: {
+        id: row.id,
+        row: JSON.stringify(row),
+      },
+    })
+    return
+  }
   addRef.value.initDialog(type, row)
 }
 // 删除
@@ -132,6 +143,19 @@
     })
   })
 }
+// 撤防
+const changeDefense = (row: any) => {
+  ElMessageBox.confirm(
+    `确定要撤防${row.devcode}设备吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+  })
+}
 // 导出列表
 const exportList = () => {
   const loading = ElLoading.service({
@@ -202,7 +226,7 @@
 <template>
   <!-- 布局 -->
   <app-container>
-    <add-dialog ref="addRef" />
+    <add-dialog ref="addRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
@@ -304,7 +328,7 @@
           />
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <el-table-column label="操作" align="center" width="150">
             <template #default="scope">
               <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
                 查看
@@ -312,9 +336,12 @@
               <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="changeDefense(scope.row)">
                 撤防
               </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/device/instruction/components/editDialog.vue b/src/views/home/device/instruction/components/editDialog.vue
index fb7109b..a263304 100644
--- a/src/views/home/device/instruction/components/editDialog.vue
+++ b/src/views/home/device/instruction/components/editDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-15
  -->
 <script lang="ts" setup name="EditInstruction">
+import dayjs from 'dayjs'
 import type { FormRules } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getDictByCode } from '@/api/system/dict'
@@ -13,6 +14,12 @@
 import { getDeviceListPage } from '@/api/home/device/device'
 import useUserStore from '@/store/modules/user'
 const emits = defineEmits(['refresh'])
+const $route = useRoute()
+const $router = useRouter()
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const deviceList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
+const deviceAllList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const user = useUserStore()
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -31,10 +38,12 @@
   deviceTypeName: '',
   framecontent: '',
   framecontentDesc: '',
+  writetime: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
   edit: '编辑',
   add: '新增',
+  addOther: '新增',
   detail: '详情',
 } // 表头显示标题
 const rules: FormRules = {
@@ -61,6 +70,7 @@
     deviceTypeName: '',
     framecontent: '',
     framecontentDesc: '',
+    writetime: '',
   }
 }
 
@@ -75,6 +85,16 @@
     dataForm.value.operator = user.id
     dataForm.value.operatorName = user.name
   }
+  else if (dialogStatus.value === 'addOther') {
+    resetForm()
+    dataFormRef.value?.resetFields()
+    dataForm.value.operator = user.id
+    dataForm.value.operatorName = user.name
+    const data = JSON.parse($route.query.row as string)
+    dataForm.value.productId = data.productId
+    dataForm.value.devcode = data.devcode
+    dataForm.value.deviceType = data.deviceType
+  }
   else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
@@ -105,6 +125,9 @@
           setTimeout(() => {
             emits('refresh')
           })
+          if (dialogStatus.value === 'addOther') {
+            $router.back()
+          }
         }
       }).catch((_) => { // 异常情况，loading置为false
       })
@@ -126,20 +149,21 @@
 
 // 保存数据
 const saveData = () => {
+  dataForm.value.deviceTypeName = deviceTypeList.value[deviceTypeList.value.findIndex(citem => dataForm.value.deviceType === citem.value)].name
+  dataForm.value.writetime = dayjs().format('YYYY-MM-DD HH:mm:ss')
   if (dialogStatus.value === 'edit') {
     updateData()
   }
-  else if (dialogStatus.value === 'add') {
+  else if (dialogStatus.value === 'add' || dialogStatus.value === 'addOther') {
     createData()
   }
 }
 const cancel = () => {
   dialogFormVisible.value = false
+  if (dialogStatus.value === 'addOther') {
+    $router.back()
+  }
 }
-const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
-const deviceList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
-const deviceAllList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
-const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 
 // 获取字典
 const fetchDict = async () => {
@@ -167,7 +191,6 @@
       deviceType: item.deviceType,
       productId: item.productId,
     }))
-    console.log(deviceList.value, 'deviceList.value')
     deviceAllList.value = JSON.parse(JSON.stringify(deviceList.value))
   })
 }
diff --git a/src/views/home/device/instruction/index.vue b/src/views/home/device/instruction/index.vue
index 266fb93..ea1eea6 100644
--- a/src/views/home/device/instruction/index.vue
+++ b/src/views/home/device/instruction/index.vue
@@ -10,6 +10,7 @@
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getProductListPage } from '@/api/home/device/product'
 import { getDictByCode } from '@/api/system/dict'
+const $route = useRoute()
 // 字典
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
@@ -44,16 +45,18 @@
   productId: '', // 产品
   status: '', // 下发状态
   operatorName: '', // 操作人员
+  beginTime: '',
+  endTime: '',
 })
 // 开始结束时间
 const datetimerange = ref()
 watch(() => datetimerange.value, (newVal) => {
-  // listQuery.createTimeStart = ''
-  // listQuery.createTimeEnd = ''
+  listQuery.value.beginTime = ''
+  listQuery.value.endTime = ''
   if (Array.isArray(newVal)) {
     if (newVal.length) {
-      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
-      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+      listQuery.value.beginTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
     }
   }
 })
@@ -82,6 +85,8 @@
     productId: '', // 产品
     status: '', // 下发状态
     operatorName: '', // 操作人员
+    beginTime: '',
+    endTime: '',
   }
   fetchData()
 }
@@ -146,6 +151,11 @@
 onMounted(async () => {
   await fetchDict()
   fetchData()
+
+  // 判断是否 从别处跳转过来
+  if ($route.query.row) {
+    editRef.value.initDialog('addOther', {})
+  }
 })
 </script>