diff --git a/web/src/views/HandDevice/Home/components/services/animation.service.ts b/web/src/views/HandDevice/Home/components/services/animation.service.ts
index 64de4bb..dba284c 100644
--- a/web/src/views/HandDevice/Home/components/services/animation.service.ts
+++ b/web/src/views/HandDevice/Home/components/services/animation.service.ts
@@ -138,7 +138,7 @@ export class AnimationService {
   }
 
   addAll(markers: MarkerData[]) {
-    console.time('animationService addAll')
+    // console.time('animationService addAll')
     this.statusColor.clear()
     this.statusColorStyleMap.clear()
     // this.clear()
@@ -151,12 +151,13 @@ export class AnimationService {
     markers.forEach((marker) => {
       const feature = new Feature({
         geometry: new Point(fromLonLat(marker.coordinates)),
-        markerData: marker
+        markerData: marker,
+        rippleColor: marker.statusColor
       })
 
       // 设置动画开始时间
       // feature.set('animationStart', Date.now())
-      feature.set('rippleColor', marker.statusColor)
+      // feature.set('rippleColor', marker.statusColor)
       features.push(feature)
       if (marker.statusColor) {
         this.statusColor.add(marker.statusColor)
@@ -164,7 +165,7 @@ export class AnimationService {
     })
     source?.addFeatures(features)
     this.rippleLayer?.setSource(source)
-    console.timeEnd('animationService addAll')
+    // console.timeEnd('animationService addAll')
   }
 
   show() {
diff --git a/web/src/views/HandDevice/Home/components/services/marker.service.ts b/web/src/views/HandDevice/Home/components/services/marker.service.ts
index 1904710..61d3605 100644
--- a/web/src/views/HandDevice/Home/components/services/marker.service.ts
+++ b/web/src/views/HandDevice/Home/components/services/marker.service.ts
@@ -42,7 +42,7 @@ export class MarkerService {
    * 更新标记数据
    */
   async updateData(markers: MarkerData[]) {
-    console.time('create features')
+    // console.time('create features')
     const features: Feature<Point>[] = []
     markers.forEach((marker) => {
       const feature = new Feature({
@@ -54,16 +54,16 @@ export class MarkerService {
       feature.setStyle(createMarkerStyle(statusColor))
       features.push(feature)
     })
-    console.timeEnd('create features')
+    // console.timeEnd('create features')
     await nextTick()
-    console.time('add features')
+    // console.time('add features')
     const vectorSource = new VectorSource()
 
     vectorSource.addFeatures(features)
  
     this.markerLayer?.getSource()?.setSource(vectorSource)
 
-    console.timeEnd('add features')
+    // console.timeEnd('add features')
     this.getSinglePointsInView()
   }
   setClusterDistance = debounce(() => {
@@ -79,6 +79,8 @@ export class MarkerService {
       distance = 80
     } else if (zoom <= 10) {
       distance = 50
+    } else if (zoom <= 14) {
+      distance = 40
     } else if (zoom <= 16) {
       distance = 20
     } else if (zoom <= 17) {
diff --git a/web/src/views/gas/handdetector/HandDetectorForm.vue b/web/src/views/gas/handdetector/HandDetectorForm.vue
index 645b1ad..b9ed089 100644
--- a/web/src/views/gas/handdetector/HandDetectorForm.vue
+++ b/web/src/views/gas/handdetector/HandDetectorForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" :scroll="true">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" :scroll="true" width="600px">
     <el-form
       ref="formRef"
       :model="formData"
@@ -11,7 +11,12 @@
         <el-input v-model="formData.sn" placeholder="请输入SN" />
       </el-form-item>
       <el-form-item label="持有人" prop="personId">
-        <el-select v-model="formData.personId" clearable placeholder="请选择持有人" @change="handlePersonIdChange">
+        <el-select
+          v-model="formData.personId"
+          clearable
+          placeholder="请选择持有人"
+          @change="handlePersonIdChange"
+        >
           <el-option
             v-for="person in personnelList"
             :key="person.id"
@@ -20,6 +25,22 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="部门" prop="deptId">
+        <el-cascader
+          class="w-[100%]"
+          v-model="formData.deptId"
+          :options="deptList"
+          :props="{
+            checkStrictly: true,
+            label: 'name',
+            value: 'id',
+            children: 'children',
+            emitPath: false
+          }"
+          clearable
+        />
+      </el-form-item>
+
       <!-- <el-form-item label="持有人" prop="name">
         <el-input v-model="formData.name" placeholder="请输入持有人" />
       </el-form-item> -->
@@ -117,6 +138,8 @@
 <script setup lang="ts">
 import { HandDetectorApi, HandDetector } from '@/api/gas/handdetector'
 import { PersonnelApi, Personnel } from '@/api/gas/personnel'
+import * as DeptApi from '@/api/system/dept'
+import { handleTree } from '@/utils/tree'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { Fence } from '@/api/gas/fence'
 import { Type } from '@/api/gas/gastype'
@@ -164,7 +187,7 @@ const formData = ref<HandDetector>({
 })
 const formRules = reactive({
   sn: [{ required: true, message: 'SN不能为空', trigger: 'blur' }],
-  personId: [{ required: true, message: '持有人不能为空', trigger: 'blur' }], 
+  personId: [{ required: true, message: '持有人不能为空', trigger: 'blur' }],
   // name: [{ required: true, message: '持有人不能为空', trigger: 'blur' }],
   gasTypeId: [{ required: true, message: '气体类型不能为空', trigger: 'blur' }],
   enableStatus: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }]
@@ -181,21 +204,28 @@ const getAllPersonnel = async () => {
 }
 /** 持有人改变时，应用持有人姓名 */
 const handlePersonIdChange = () => {
-  formData.value.name = personnelList.value.find((item) => item.id === formData.value.personId)?.name
-   formData.value.deptId = personnelList.value.find((item) => item.id === formData.value.personId)?.deptId
-
+  formData.value.name = personnelList.value.find(
+    (item) => item.id === formData.value.personId
+  )?.name
+  formData.value.deptId = personnelList.value.find(
+    (item) => item.id === formData.value.personId
+  )?.deptId
 }
 
-
-
-var selectFences=computed(()=>{
+var selectFences = computed(() => {
   return props.fences.filter((item) => item.type === formData.value.fenceType)
 })
 /** 围栏类型改变时，应用围栏列表也会改变 */
 const fenceTypeChange = () => {
   formData.value.fenceIdsArray = []
 }
+const deptList = ref<any[]>([]) // 部门列表
 
+function getDeptList() {
+  DeptApi.getSimpleDeptList().then((res) => {
+    deptList.value = handleTree(res || [])
+  })
+}
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -203,12 +233,15 @@ const open = async (type: string, id?: number) => {
   formType.value = type
   resetForm()
   getAllPersonnel()
+    getDeptList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
       formData.value = await HandDetectorApi.getHandDetector(id)
-      formData.value.fenceIdsArray = formData.value.fenceIds?formData.value.fenceIds?.split(',') : []
+      formData.value.fenceIdsArray = formData.value.fenceIds
+        ? formData.value.fenceIds?.split(',')
+        : []
     } finally {
       formLoading.value = false
     }