diff --git a/src/api/ConfigApi.ts b/src/api/ConfigApi.ts
index e217487..4fcc968 100644
--- a/src/api/ConfigApi.ts
+++ b/src/api/ConfigApi.ts
@@ -43,7 +43,7 @@ export interface IAreaConfigItem {
   areaName: string;
   deviceType: string;
   alertTypes: string[];
-  data: string;
+  data: string[];
 }
 export function deviceRangeSet(data: IAreaConfigItem) {
   return api.post('/api/config/device/area/save', data);
@@ -61,3 +61,9 @@ export function queryDeviceRangeById(
 interface IAreaConfig<T = unknown> {
   data: T;
 }
+
+export async function getAllDeviceArea() {
+  return await api.get<PageDto<IAreaConfigListItem>>(
+    '/api/config/device/area/page'
+  );
+}
diff --git a/src/components/rangeConfig.vue b/src/components/rangeConfig.vue
index 6ca7e18..87cf8ed 100644
--- a/src/components/rangeConfig.vue
+++ b/src/components/rangeConfig.vue
@@ -44,6 +44,13 @@
                   {{ item }}
                 </q-chip>
               </div>
+              <q-btn
+                v-show="device.length > 0"
+                style="width: 120px"
+                label="清空框选的设备"
+                color="red"
+                @click="clearSelect"
+              />
             </q-item-section>
           </q-item>
         </q-list>
@@ -70,18 +77,11 @@ import {
   IAreaConfigItem,
   queryDeviceRangeById,
 } from 'src/api/ConfigApi';
-import { fromUint8Array, toUint8Array } from 'js-base64';
-import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
-import { StationData } from 'src/drawApp/graphics/StationInteraction';
-import { PlatformData } from 'src/drawApp/graphics/PlatformInteraction';
-import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction';
-import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { GraphicData, JlGraphic } from 'src/jl-graphic';
+import { JlGraphic } from 'src/jl-graphic';
 import { saveAlertTypeData, showAlertTypeData } from './alarm/alarmInfoEnum';
+import { Section, SectionType } from 'src/graphics/section/Section';
 
-const props = defineProps({
-  rangeConfigEdit: Number,
-});
+defineExpose({ searchById });
 
 const route = useRoute();
 const lineStore = useLineStore();
@@ -89,12 +89,12 @@ const $q = useQuasar();
 const rangeConfig = reactive<{
   areaName: string;
   deviceType: `${DeviceType}` | '';
-  device: string;
+  device: string[];
   alertTypes: string[];
 }>({
   areaName: '',
   deviceType: '',
-  device: '',
+  device: [],
   alertTypes: [],
 });
 const device = ref<string[]>([]);
@@ -137,45 +137,28 @@ enum DeviceTypeShow {
   DEVICE_TYPE_PLATFORM = 'Platform',
 }
 
-watch(props, () => {
-  handleState.value = '编辑范围配置';
-  searchById();
-});
-
 watch(
   () => lineStore.selectedGraphics,
   (val) => {
     if (val && val.length > 0) {
       const deviceFilter = lineStore.selectedGraphics?.filter(
-        (g) => g.type == rangeConfig.deviceType
+        (g) =>
+          g.type == rangeConfig.deviceType ||
+          (g.type == Section.Type &&
+            (g as Section).datas.sectionType === SectionType.TurnoutPhysical &&
+            rangeConfig.deviceType == LogicSection.Type)
       ) as JlGraphic[];
       lineStore.getLineApp().updateSelected(...deviceFilter);
-      device.value = deviceFilter?.map((g) => g.code) as string[];
-
-      const storage = new graphicData.RtssGraphicStorage();
-      deviceFilter?.forEach((g) => {
-        if (LogicSection.Type === g.type) {
-          const logicSectionData = (g as LogicSection).saveData();
-          storage.logicSections.push(
-            (logicSectionData as LogicSectionData).data
-          );
-        } else if (Station.Type === g.type) {
-          const stationData = (g as Station).saveData();
-          storage.stations.push((stationData as StationData).data);
-        } else if (Platform.Type === g.type) {
-          const platformData = (g as Platform).saveData();
-          storage.Platforms.push((platformData as PlatformData).data);
-        } else if (Turnout.Type === g.type) {
-          const turnoutData = (g as Turnout).saveData();
-          storage.turnouts.push((turnoutData as TurnoutData).data);
-        }
-      });
-      rangeConfig.device = fromUint8Array(storage.serialize());
+      device.value.push(...(deviceFilter?.map((g) => g.code) as string[]));
+      device.value = Array.from(new Set(device.value));
+      rangeConfig.device.push(...(deviceFilter?.map((g) => g.id) as string[]));
+      rangeConfig.device = Array.from(new Set(rangeConfig.device));
     }
   }
 );
 
 const myForm = ref<QForm | null>(null);
+let editId: number;
 async function onSubmit() {
   myForm.value?.validate().then(async (res) => {
     if (res) {
@@ -194,7 +177,7 @@ async function onSubmit() {
         if (handleState.value == '新建范围配置') {
           await deviceRangeSet(params);
         } else {
-          params.id = props.rangeConfigEdit;
+          params.id = editId;
           await deviceRangeSet(params);
         }
 
@@ -212,28 +195,11 @@ async function onSubmit() {
   });
 }
 
-async function searchById() {
+async function searchById(id: number) {
   try {
-    const id = props.rangeConfigEdit as number;
+    handleState.value = '编辑范围配置';
+    editId = id;
     const response = await queryDeviceRangeById(id);
-    const datas: GraphicData[] = [];
-    if (response.data.data) {
-      const storage = graphicData.RtssGraphicStorage.deserialize(
-        toUint8Array(response.data.data)
-      );
-      storage.Platforms.forEach((platform) => {
-        datas.push(new PlatformData(platform));
-      });
-      storage.stations.forEach((station) => {
-        datas.push(new StationData(station));
-      });
-      storage.turnouts.forEach((turnout) => {
-        datas.push(new TurnoutData(turnout));
-      });
-      storage.logicSections.forEach((logicSection) => {
-        datas.push(new LogicSectionData(logicSection));
-      });
-    }
     rangeConfig.areaName = response.data.areaName;
     rangeConfig.deviceType = (DeviceTypeShow as never)[
       response.data.deviceType + ''
@@ -242,13 +208,11 @@ async function searchById() {
       (type) => (showAlertTypeData as never)[type + '']
     );
     const select: JlGraphic[] = [];
-    datas
-      .map((data) => data.id)
-      .forEach((id: string) => {
-        const g = lineStore.getLineApp().queryStore.queryById(id);
-        select.push(g);
-        device.value.push(g.code);
-      });
+    response.data.data.forEach((id: string) => {
+      const g = lineStore.getLineApp().queryStore.queryById(id);
+      select.push(g);
+      device.value.push(g.code);
+    });
     lineStore.getLineApp().updateSelected(...select);
   } catch (err) {
     $q.notify({
@@ -258,6 +222,10 @@ async function searchById() {
   }
 }
 
+function clearSelect() {
+  device.value = [];
+}
+
 function onReset() {
   handleState.value = '新建范围配置';
   rangeConfig.areaName = '';
diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue
index fda6ebf..35ba279 100644
--- a/src/layouts/LineLayout.vue
+++ b/src/layouts/LineLayout.vue
@@ -15,13 +15,13 @@
       <div id="line-app-container"></div>
     </q-page-container>
     <q-drawer side="right" v-model="drawerRight" show-if-above bordered>
-      <range-config :rangeConfigEdit="rangeConfigEdit"></range-config>
+      <range-config ref="rangeConfigEdit"></range-config>
     </q-drawer>
   </q-layout>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed, reactive } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import { useLineNetStore } from 'src/stores/line-net-store';
 import { useRoute, useRouter } from 'vue-router';
@@ -42,7 +42,7 @@ const mapType = ref(route.params.type as string);
 const lineStore = useLineStore();
 const lineNetStore = useLineNetStore();
 const drawerRight = ref();
-const rangeConfigEdit = ref();
+const rangeConfigEdit = ref<{ searchById: (id: number) => void } | null>(null);
 
 const mapName = computed(() => lineStore.lineName || lineNetStore.lineNetName);
 
@@ -100,7 +100,7 @@ function openRangeList() {
     componentProps: {
       onEditClick: (row: IAreaConfigListItem) => {
         dialog.hide();
-        rangeConfigEdit.value = row.id;
+        rangeConfigEdit.value?.searchById(row.id);
       },
     },
   });