diff --git a/src/api/CategoryInfoApi.ts b/src/api/CategoryInfoApi.ts
new file mode 100644
index 0000000..9c2dbca
--- /dev/null
+++ b/src/api/CategoryInfoApi.ts
@@ -0,0 +1,79 @@
+import { api } from 'src/boot/axios';
+import { PageDto, PageQueryDto } from './ApiCommon';
+
+const UriBase = '/api/v1/category';
+
+export interface createParams {
+  name: string;
+  id?: number;
+  config?: string;
+}
+
+export interface CategoryItem extends createParams {
+  id: number;
+  created_at: string;
+  update_at: string;
+}
+
+export class PagingQueryParams extends PageQueryDto {
+  name?: string;
+}
+
+/**
+ * 分页查询
+ * @param params
+ * @returns
+ */
+export async function pageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<CategoryItem>> {
+  const response = await api.get(`${UriBase}/paging`, {
+    params: params,
+  });
+  return response.data;
+}
+
+/**
+ * 创建厂家
+ * @param params
+ * @returns
+ */
+export function createCategory(data: createParams) {
+  return api.post(`${UriBase}`, data);
+}
+
+/**
+ * 删除厂家
+ * @param id 厂家id
+ */
+export function deleteCategory(id: number) {
+  return api.delete(`${UriBase}/${id}`);
+}
+
+/**
+ * 修改厂家数据
+ * @param id 草稿id
+ */
+export function saveCategoryData(id: number, data: createParams) {
+  return api.put(`${UriBase}/${id}`, data);
+}
+
+/**
+ * 获取厂家数据详情
+ * @param params
+ * @returns
+ */
+export async function getCategoryInfo(id: number): Promise<CategoryItem> {
+  const response = await api.get(`${UriBase}/${id}`);
+  return response.data;
+}
+
+/**
+ * 获取厂家信息列表
+ * @param params
+ * @returns
+ */
+export async function getCategoryList(): Promise<Array<CategoryItem>> {
+  const response = await api.get(`${UriBase}/list`);
+  return response.data;
+}
diff --git a/src/api/DraftApi.ts b/src/api/DraftApi.ts
index 0f83bfe..16fb9e3 100644
--- a/src/api/DraftApi.ts
+++ b/src/api/DraftApi.ts
@@ -3,14 +3,15 @@ import { PageDto, PageQueryDto } from './ApiCommon';
 
 const DraftUriBase = '/api/v1/drafting';
 
-interface Item {
+export interface DraftItem {
   id: number;
   name: string;
   proto: string;
   type: string;
-  createdAt: string;
-  updateAt: string;
+  created_at: string;
+  update_at: string;
   creatorId?: number;
+  category?: number;
 }
 
 export class PagingQueryParams extends PageQueryDto {
@@ -24,7 +25,7 @@ export class PagingQueryParams extends PageQueryDto {
  */
 export async function pageQuery(
   params: PagingQueryParams
-): Promise<PageDto<Item>> {
+): Promise<PageDto<DraftItem>> {
   const response = await api.get(`${DraftUriBase}/paging`, {
     params: params,
   });
@@ -36,7 +37,7 @@ export async function pageQuery(
  * @param params
  * @returns
  */
-export function createDraft(draftData: { name: string; type: string }) {
+export function createDraft(draftData: { name: string; category: number }) {
   return api.post(`${DraftUriBase}`, draftData);
 }
 
@@ -53,7 +54,7 @@ export function deleteDraft(id: number) {
  * @param params
  * @returns
  */
-export async function getDraft(id: number): Promise<Item> {
+export async function getDraft(id: number): Promise<DraftItem> {
   const response = await api.get(`${DraftUriBase}/${id}`);
   return response.data;
 }
@@ -80,7 +81,7 @@ export function saveDraft(
 export async function saveAsDraft(
   id: number,
   data: { name: string; proto: string }
-): Promise<Item> {
+): Promise<DraftItem> {
   const response = await api.post(`${DraftUriBase}/${id}/saveAs`, data);
   return response.data;
 }
diff --git a/src/api/PublishApi.ts b/src/api/PublishApi.ts
index 679af58..cc4dd24 100644
--- a/src/api/PublishApi.ts
+++ b/src/api/PublishApi.ts
@@ -3,13 +3,13 @@ import { PageDto, PageQueryDto } from './ApiCommon';
 
 const PublishUriBase = '/api/v1/publishedGi';
 
-interface Item {
+export interface PublishItem {
   id: number;
   name: string;
   proto: string;
-  createdAt: string;
-  updateAt: string;
-  creatorId?: number;
+  note: string;
+  publishAt: string;
+  userID: number;
 }
 
 export class PagingQueryParams extends PageQueryDto {
@@ -18,11 +18,12 @@ export class PagingQueryParams extends PageQueryDto {
 
 /**
  * 草稿图发布
- * @param id 草稿id
+ * @param draftId 草稿id
+ * @param note 备注
  */
 export function publishDraft(data: {
   name: string;
-  lineId?: number;
+  note: string;
   draftId: number;
 }) {
   return api.post(`${PublishUriBase}/publish`, data);
@@ -33,7 +34,7 @@ export function publishDraft(data: {
  * @param params
  * @returns
  */
-export async function getDraft(): Promise<Item> {
+export async function getDraft(): Promise<PublishItem> {
   const response = await api.get(`${PublishUriBase}/list`);
   return response.data;
 }
@@ -45,7 +46,7 @@ export async function getDraft(): Promise<Item> {
  */
 export async function pageQuery(
   params: PagingQueryParams
-): Promise<PageDto<Item>> {
+): Promise<PageDto<PublishItem>> {
   const response = await api.get(`${PublishUriBase}/paging`, {
     params: params,
   });
@@ -54,7 +55,7 @@ export async function pageQuery(
 
 /**
  * 删除发布图
- * @param id 草稿id
+ * @param id 发布id
  */
 export function deletePublish(id: number) {
   return api.delete(`${PublishUriBase}/${id}`);
@@ -63,14 +64,14 @@ export function deletePublish(id: number) {
  * 获取发布地图详细信息
  * @param id 发布地图id
  */
-export async function getPublishMapInfoById(id: number): Promise<Item> {
+export async function getPublishMapInfoById(id: number): Promise<PublishItem> {
   const response = await api.get(`${PublishUriBase}/${id}`);
   return response.data;
 }
 /**
  * 获取已发布的线路地图数据
  */
-export async function getPublishLineNet(): Promise<Item> {
+export async function getPublishLineNet(): Promise<PublishItem> {
   const response = await api.get(`${PublishUriBase}/publish/lineNetwork/info`);
   return response.data;
 }
@@ -79,7 +80,22 @@ export async function getPublishLineNet(): Promise<Item> {
  * 获取发布地图详细信息
  * @param id 发布地图线路ID
  */
-export async function getPublishMapInfoByLineId(lineId: string): Promise<Item> {
+export async function getPublishMapInfoByLineId(
+  lineId: string
+): Promise<PublishItem> {
   const response = await api.get(`${PublishUriBase}/${lineId}`);
   return response.data;
 }
+
+/**
+ * 另存到草稿
+ * @param id 发布id
+ */
+export function saveToDraft(
+  id: number,
+  data: {
+    name: string;
+  }
+) {
+  return api.post(`${PublishUriBase}/saveAsDrafting/${id}`, data);
+}
diff --git a/src/components/SysMenu.vue b/src/components/SysMenu.vue
index 1f32531..b903b13 100644
--- a/src/components/SysMenu.vue
+++ b/src/components/SysMenu.vue
@@ -69,11 +69,11 @@ const list = reactive([
         label: '发布管理',
         icon: 'app_registration',
       },
-      // {
-      //   path: '/dataManage/lineInfo',
-      //   label: '线路信息管理',
-      //   icon: 'app_registration',
-      // },
+      {
+        path: '/dataManage/categoryInfo',
+        label: '厂家信息管理',
+        icon: 'app_registration',
+      },
     ],
   },
 ]);
diff --git a/src/components/draw-app/DrawProperties.vue b/src/components/draw-app/DrawProperties.vue
index eda9a2e..570548a 100644
--- a/src/components/draw-app/DrawProperties.vue
+++ b/src/components/draw-app/DrawProperties.vue
@@ -99,6 +99,9 @@
           <KiloMarkerProperty
             v-else-if="drawStore.selectedGraphicType === SlopeKiloMarker.Type"
           />
+          <slope-property
+            v-else-if="drawStore.selectedGraphicType === Slope.Type"
+          ></slope-property>
         </q-card-section>
       </template>
     </q-card>
@@ -148,6 +151,8 @@ import EsbButtonProperty from './properties/EsbButtonProperty.vue';
 import { EsbButton } from 'src/graphics/esbButton/EsbButton';
 import KiloMarkerProperty from './properties/KiloMarkerProperty.vue';
 import { SlopeKiloMarker } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
+import { Slope } from 'src/graphics/slope/Slope';
+import SlopeProperty from './properties/SlopeProperty.vue';
 
 const drawStore = useDrawStore();
 </script>
diff --git a/src/components/draw-app/dialogs/LayerControlDialog.vue b/src/components/draw-app/dialogs/LayerControlDialog.vue
index a8b7425..53bdf16 100644
--- a/src/components/draw-app/dialogs/LayerControlDialog.vue
+++ b/src/components/draw-app/dialogs/LayerControlDialog.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <q-dialog v-model="lineStore.showLayerDialog">
+  <q-dialog v-model="show" @hide="onDialogCancel">
     <q-card class="q-pa-md">
       <q-card-section> <div class="text-h6">显示控制</div> </q-card-section>
       <q-card-section>
@@ -16,7 +16,7 @@
         <div class="row">
           <q-checkbox
             class="col-4"
-            v-for="(item, index) in layerList"
+            v-for="(item, index) in props.layerList"
             :key="index"
             v-model="list"
             :label="item.label"
@@ -34,17 +34,29 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { layerList } from 'src/drawApp/lineApp';
 import { useLineStore } from 'src/stores/line-store';
+
+interface ItemData {
+  label: string;
+  value: string;
+}
+
 const lineStore = useLineStore();
 
 const list = ref<string[]>([]);
 const allList = ref(false);
+const show = ref(false);
+
+const props = defineProps<{
+  showDialog: boolean;
+  layerList: ItemData[];
+  showLayer: string[];
+}>();
 
 function allListFn() {
   const arr: string[] = [];
   if (allList.value) {
-    layerList.forEach((item) => {
+    props.layerList.forEach((item) => {
       arr.push(item.value);
     });
     list.value = arr;
@@ -54,34 +66,29 @@ function allListFn() {
 }
 
 watch(
-  () => lineStore.showLayerDialog,
+  () => props.showDialog,
   (val) => {
+    show.value = val;
     if (val) {
-      list.value = lineStore.showLayer;
-      allList.value = layerList.length == lineStore.showLayer.length;
+      list.value = props.showLayer;
+      allList.value = props.layerList.length == props.showLayer.length;
     }
   }
 );
 
+const emits = defineEmits(['setShowLayer', 'onDialogClose']);
+
 watch(
   () => list.value,
   (val) => {
     lineStore.setShowLayer(val);
-    allList.value = layerList.length == val.length;
-    const lineApp = lineStore.getLineApp();
-    const alllGraphic = lineApp.queryStore.getAllGraphics();
-    alllGraphic.forEach((g) => {
-      if (val.includes(g.type)) {
-        g.visible = true;
-      } else {
-        g.visible = false;
-      }
-    });
+    allList.value = props.layerList.length == val.length;
+    emits('setShowLayer', val);
   }
 );
 
 function onDialogCancel() {
-  lineStore.setShowLayerDialog(false);
+  emits('onDialogClose');
 }
 </script>
 <style scoped></style>
diff --git a/src/components/draw-app/properties/SignalProperty.vue b/src/components/draw-app/properties/SignalProperty.vue
index b28e52b..79b63f6 100644
--- a/src/components/draw-app/properties/SignalProperty.vue
+++ b/src/components/draw-app/properties/SignalProperty.vue
@@ -32,37 +32,125 @@
       @blur="onUpdate"
       label="公里标(mm):"
     />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="refDevData.deviceType"
+      :options="DeviceTypeOptions"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联设备类型:"
+    ></q-select>
+    <q-select
+      outlined
+      v-if="refDevData.deviceType === graphicData.RelatedRef.DeviceType.Section"
+      style="margin-top: 10px"
+      v-model="refDevData.id"
+      :options="sectionList"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联设备:"
+    ></q-select>
+    <q-select
+      outlined
+      v-if="refDevData.deviceType === graphicData.RelatedRef.DeviceType.Turnout"
+      style="margin-top: 10px"
+      v-model="refDevData.id"
+      :options="turnoutList"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联设备:"
+    ></q-select>
+    <q-select
+      outlined
+      v-if="refDevData.deviceType === graphicData.RelatedRef.DeviceType.Turnout"
+      style="margin-top: 10px"
+      v-model="refDevData.devicePort"
+      :options="DevicePortOptions"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联设备端口:"
+    ></q-select>
   </q-form>
 </template>
 
 <script setup lang="ts">
 import { SignalData } from 'src/drawApp/graphics/SignalInteraction';
+import { Section } from 'src/graphics/section/Section';
 import { Signal } from 'src/graphics/signal/Signal';
+import { Turnout } from 'src/graphics/turnout/Turnout';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
 const signalModel = reactive(new SignalData());
 const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
-
+const sectionList: { label: string; value: string }[] = reactive([]);
+const turnoutList: { label: string; value: string }[] = reactive([]);
+const refDevData = reactive({
+  id: '',
+  deviceType: graphicData.RelatedRef.DeviceType.Section,
+  devicePort: graphicData.RelatedRef.DevicePort.A,
+});
+const DeviceTypeOptions = [
+  { label: '区段', value: graphicData.RelatedRef.DeviceType.Section },
+  { label: '道岔', value: graphicData.RelatedRef.DeviceType.Turnout },
+];
+const DevicePortOptions = [
+  { label: 'A端', value: graphicData.RelatedRef.DevicePort.A },
+  { label: 'B端', value: graphicData.RelatedRef.DevicePort.B },
+  { label: 'C端', value: graphicData.RelatedRef.DevicePort.C },
+];
 const CoordinateSystemOptions = [
   { label: '车辆段', value: 'DEPOT' },
   { label: '停车场', value: 'PARKING_LOT' },
   { label: '正线', value: 'MAIN_LINE' },
   { label: '换线', value: 'TRANSFER' },
 ];
-
+function initRefData(signal: Signal) {
+  signalModel.copyFrom(signal.saveData());
+  if (signalModel.kilometerSystem) {
+    kilometerSystem.coordinateSystem =
+      signalModel.kilometerSystem.coordinateSystem;
+    kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
+  }
+  if (signalModel.refDev) {
+    refDevData.id = signalModel.refDev.id;
+    refDevData.devicePort = signalModel.refDev.devicePort;
+    refDevData.deviceType = signalModel.refDev.deviceType;
+  }
+}
+function initDeviceList() {
+  const sections = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Section>(Section.Type);
+  sections.forEach((sec) => {
+    sectionList.push({
+      label: `${sec.datas.code}[${sec.datas.index}]`,
+      value: sec.datas.id,
+    });
+  });
+  const trunouts = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Turnout>(Turnout.Type);
+  trunouts.forEach((tur) => {
+    turnoutList.push({
+      label: `${tur.datas.code}[${tur.datas.index}]`,
+      value: tur.datas.id,
+    });
+  });
+}
 drawStore.$subscribe;
 watch(
   () => drawStore.selectedGraphic,
   (val) => {
     if (val && val.type == Signal.Type) {
-      signalModel.copyFrom(val.saveData() as SignalData);
-      if (signalModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          signalModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
-      }
+      initRefData(val as Signal);
     }
   }
 );
@@ -70,12 +158,8 @@ watch(
 onMounted(() => {
   const signal = drawStore.selectedGraphic as Signal;
   if (signal) {
-    signalModel.copyFrom(signal.saveData());
-    if (signalModel.kilometerSystem) {
-      kilometerSystem.coordinateSystem =
-        signalModel.kilometerSystem.coordinateSystem;
-      kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
-    }
+    initDeviceList();
+    initRefData(signal);
   }
 });
 
@@ -85,6 +169,16 @@ function onUpdate() {
     coordinateSystem: kilometerSystem.coordinateSystem,
     kilometer: kilometerSystem.kilometer,
   };
+  if (refDevData.id) {
+    signalModel.refDev = new graphicData.RelatedRef({
+      id: refDevData.id,
+      deviceType: refDevData.deviceType,
+      devicePort:
+        refDevData.deviceType === graphicData.RelatedRef.DeviceType.Section
+          ? graphicData.RelatedRef.DevicePort.A
+          : refDevData.devicePort,
+    });
+  }
   if (signal) {
     drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel);
   }
diff --git a/src/components/draw-app/properties/SlopeProperty.vue b/src/components/draw-app/properties/SlopeProperty.vue
new file mode 100644
index 0000000..f65a275
--- /dev/null
+++ b/src/components/draw-app/properties/SlopeProperty.vue
@@ -0,0 +1,112 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="slopeModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      readonly
+      label="坡度长度"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="slopeModel.slopeLong"
+      lazy-rules
+      autogrow
+    />
+    <q-input
+      outlined
+      label="坡度值"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="slopeModel.slopeNumber"
+      lazy-rules
+      autogrow
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="direction"
+      :options="optionsDirection"
+      label="坡度方向"
+    />
+    <q-list bordered separator class="rounded-borders">
+      <q-item>
+        <q-item-section no-wrap class="q-gutter-y-sm column">
+          <q-item-label> 关联的设备 </q-item-label>
+          <div class="q-gutter-sm row">
+            <q-chip
+              v-for="item in axleCountingRelations"
+              :key="item"
+              square
+              color="primary"
+              text-color="white"
+            >
+              {{ item }}
+            </q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { SlopeData } from 'src/drawApp/graphics/SlopeInteraction';
+import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+import { Slope } from 'src/graphics/slope/Slope';
+import { useDrawStore } from 'src/stores/draw-store';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const slopeModel = reactive(new SlopeData());
+const direction = ref('');
+const optionsDirection = ['上坡', '下坡', '无坡度'];
+enum showSelect {
+  上坡 = 'up',
+  下坡 = 'down',
+  无坡度 = 'none',
+}
+enum showSelectData {
+  up = '上坡',
+  down = '下坡',
+  none = '无坡度',
+}
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Slope.Type) {
+      slopeModel.copyFrom(val.saveData() as SlopeData);
+      direction.value = (showSelectData as never)[slopeModel.slopeDirection];
+    }
+  }
+);
+
+onMounted(() => {
+  const slope = drawStore.selectedGraphic as Slope;
+  if (slope) {
+    slopeModel.copyFrom(slope.saveData());
+    direction.value = (showSelectData as never)[slopeModel.slopeDirection];
+  }
+});
+
+function onUpdate() {
+  slopeModel.slopeDirection = (showSelect as never)[direction.value];
+  const slope = drawStore.selectedGraphic as Slope;
+  if (slope) {
+    drawStore.getDrawApp().updateGraphicAndRecord(slope, slopeModel);
+  }
+}
+
+const axleCountingRelations = computed(() => {
+  const slope = drawStore.selectedGraphic as Slope;
+  const sectionRelations =
+    slope?.relationManage.getRelationsOfGraphicAndOtherType(
+      slope,
+      AxleCounting.Type
+    );
+  const ref = sectionRelations.map(
+    (relation) => `${relation.getOtherGraphic<AxleCounting>(slope).datas.code}`
+  );
+  return Array.from(new Set(ref));
+});
+</script>
diff --git a/src/components/draw-app/properties/StopPositionProperty.vue b/src/components/draw-app/properties/StopPositionProperty.vue
index da72175..6317a02 100644
--- a/src/components/draw-app/properties/StopPositionProperty.vue
+++ b/src/components/draw-app/properties/StopPositionProperty.vue
@@ -42,25 +42,42 @@
       @blur="onUpdate"
       label="公里标(mm):"
     />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="refDevData.id"
+      :options="sectionList"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联设备"
+    ></q-select>
   </q-form>
 </template>
 
 <script setup lang="ts">
 import { StopPositionData } from 'src/drawApp/graphics/StopPositionInteraction';
+import { Section } from 'src/graphics/section/Section';
 import { StopPosition, CoachNum } from 'src/graphics/stopPosition/StopPosition';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
 const stopPositionModel = reactive(new StopPositionData());
 const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
-
+const refDevData = reactive({
+  id: '',
+  deviceType: graphicData.RelatedRef.DeviceType.Section,
+  devicePort: graphicData.RelatedRef.DevicePort.A,
+});
 const CoordinateSystemOptions = [
   { label: '车辆段', value: 'DEPOT' },
   { label: '停车场', value: 'PARKING_LOT' },
   { label: '正线', value: 'MAIN_LINE' },
   { label: '换线', value: 'TRANSFER' },
 ];
+const sectionList: { label: string; value: string }[] = reactive([]);
 const optionsCoachNum = [
   {
     label: 4,
@@ -73,12 +90,7 @@ watch(
   () => drawStore.selectedGraphic,
   (val) => {
     if (val && val.type == StopPosition.Type) {
-      stopPositionModel.copyFrom(val.saveData() as StopPositionData);
-      if (stopPositionModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          stopPositionModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = stopPositionModel.kilometerSystem.kilometer;
-      }
+      initRefData(val as StopPosition);
     }
   }
 );
@@ -86,21 +98,44 @@ watch(
 onMounted(() => {
   const stopPosition = drawStore.selectedGraphic as StopPosition;
   if (stopPosition) {
-    stopPositionModel.copyFrom(stopPosition.saveData());
-    if (stopPositionModel.kilometerSystem) {
-      kilometerSystem.coordinateSystem =
-        stopPositionModel.kilometerSystem.coordinateSystem;
-      kilometerSystem.kilometer = stopPositionModel.kilometerSystem.kilometer;
-    }
+    const sections = drawStore
+      .getDrawApp()
+      .queryStore.queryByType<Section>(Section.Type);
+    sections.forEach((sec) => {
+      sectionList.push({
+        label: `${sec.datas.code}[${sec.datas.index}]`,
+        value: sec.datas.id,
+      });
+    });
+    initRefData(stopPosition);
   }
 });
 
+function initRefData(stopPosition: StopPosition) {
+  stopPositionModel.copyFrom(stopPosition.saveData());
+  if (stopPositionModel.kilometerSystem) {
+    kilometerSystem.coordinateSystem =
+      stopPositionModel.kilometerSystem.coordinateSystem;
+    kilometerSystem.kilometer = stopPositionModel.kilometerSystem.kilometer;
+  }
+  if (stopPositionModel.refDev) {
+    refDevData.id = stopPositionModel.refDev.id;
+  }
+}
+
 function onUpdate() {
   const stopPosition = drawStore.selectedGraphic as StopPosition;
   stopPositionModel.kilometerSystem = {
     coordinateSystem: kilometerSystem.coordinateSystem,
     kilometer: kilometerSystem.kilometer,
   };
+  if (refDevData.id) {
+    stopPositionModel.refDev = new graphicData.RelatedRef({
+      id: refDevData.id,
+      deviceType: refDevData.deviceType,
+      devicePort: refDevData.devicePort,
+    });
+  }
   if (stopPosition) {
     drawStore
       .getDrawApp()
diff --git a/src/drawApp/graphics/SignalInteraction.ts b/src/drawApp/graphics/SignalInteraction.ts
index ce0e54d..91491af 100644
--- a/src/drawApp/graphics/SignalInteraction.ts
+++ b/src/drawApp/graphics/SignalInteraction.ts
@@ -57,6 +57,12 @@ export class SignalData extends GraphicDataBase implements ISignalData {
   set index(v: number) {
     this.data.index = v;
   }
+  get refDev(): graphicData.RelatedRef {
+    return this.data.refDev;
+  }
+  set refDev(v: graphicData.RelatedRef) {
+    this.data.refDev = v;
+  }
   clone(): SignalData {
     return new SignalData(this.data.cloneMessage());
   }
diff --git a/src/drawApp/graphics/SlopeInteraction.ts b/src/drawApp/graphics/SlopeInteraction.ts
new file mode 100644
index 0000000..f253f85
--- /dev/null
+++ b/src/drawApp/graphics/SlopeInteraction.ts
@@ -0,0 +1,70 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import { ISlopeData, Slope } from 'src/graphics/slope/Slope';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { IPointData } from 'pixi.js';
+
+export class SlopeData extends GraphicDataBase implements ISlopeData {
+  constructor(data?: graphicData.Slope) {
+    let slope;
+    if (!data) {
+      slope = new graphicData.Slope({
+        common: GraphicDataBase.defaultCommonInfo(Slope.Type),
+      });
+    } else {
+      slope = data;
+    }
+    super(slope);
+  }
+  public get data(): graphicData.Slope {
+    return this.getData<graphicData.Slope>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.map(
+      (p) => new graphicData.Point({ x: p.x, y: p.y })
+    );
+  }
+  get slopeNumber(): string {
+    return this.data.slopeNumber;
+  }
+  set slopeNumber(v: string) {
+    this.data.slopeNumber = v;
+  }
+  get slopeDirection(): string {
+    return this.data.slopeDirection;
+  }
+  set slopeDirection(v: string) {
+    this.data.slopeDirection = v;
+  }
+  get slopeLong(): number {
+    return this.data.slopeLong;
+  }
+  set slopeLong(v: number) {
+    this.data.slopeLong = v;
+  }
+  get refDeviceId(): string[] {
+    return this.data.refDeviceId;
+  }
+  set refDeviceId(v: string[]) {
+    this.data.refDeviceId = v;
+  }
+
+  clone(): SlopeData {
+    return new SlopeData(this.data.cloneMessage());
+  }
+  copyFrom(data: SlopeData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SlopeData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
diff --git a/src/drawApp/graphics/StopPositionInteraction.ts b/src/drawApp/graphics/StopPositionInteraction.ts
index 4aa955d..c4151f5 100644
--- a/src/drawApp/graphics/StopPositionInteraction.ts
+++ b/src/drawApp/graphics/StopPositionInteraction.ts
@@ -62,6 +62,12 @@ export class StopPositionData extends GraphicDataBase implements IStopPosition {
   set kilometerSystem(v: KilometerSystem) {
     this.data.kilometerSystem = new graphicData.KilometerSystem(v);
   }
+  get refDev(): graphicData.RelatedRef {
+    return this.data.refDev;
+  }
+  set refDev(v: graphicData.RelatedRef) {
+    this.data.refDev = v;
+  }
   clone(): StopPositionData {
     return new StopPositionData(this.data.cloneMessage());
   }
diff --git a/src/drawApp/index.ts b/src/drawApp/index.ts
index 56d74f5..8b0c6f9 100644
--- a/src/drawApp/index.ts
+++ b/src/drawApp/index.ts
@@ -117,6 +117,10 @@ import {
   SlopeKiloMarkerTemplate,
 } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
 import { SlopeKiloMarkerData } from './graphics/SlopeKiloMarkerInteraction';
+import { SlopeDraw } from 'src/graphics/slope/SlopeAssistant';
+import { SlopeData } from './graphics/SlopeInteraction';
+import { Slope, SlopeTemplate } from 'src/graphics/slope/Slope';
+import { useLineStore } from 'src/stores/line-store';
 
 // export function fromStoragePoint(p: graphicData.Point): Point {
 //   return new Point(p.x, p.y);
@@ -157,49 +161,8 @@ const RedoOptions: MenuItemOptions = {
 const SelectAllOptions: MenuItemOptions = {
   name: '全选',
 };
-const AllOptions: MenuItemOptions = {
-  name: '全部图层',
-};
-const physicalSection: MenuItemOptions = {
-  name: '图层-物理区段',
-};
-const linkOptions: MenuItemOptions = {
-  name: '图层-Link',
-};
-const axleCountingSectionOptions: MenuItemOptions = {
-  name: '图层-计轴区段',
-};
-const LogicSectionOptions: MenuItemOptions = {
-  name: '图层-逻辑区段',
-};
-// [
-//   {
-//     name: '图层菜单',
-//     items: [
-//       AllOptions,
-//       linkOptions,
-//       axleCountingSectionOptions,
-//       LogicSectionOptions,
-//     ],
-//   },
-// ]
 const layerOptions: MenuItemOptions = {
-  name: '图层',
-  subMenu: {
-    name: '图层菜单',
-    groups: [
-      {
-        name: '图层菜单',
-        items: [
-          AllOptions,
-          physicalSection,
-          linkOptions,
-          axleCountingSectionOptions,
-          LogicSectionOptions,
-        ],
-      },
-    ],
-  },
+  name: '显示控制',
 };
 
 export const DefaultCanvasMenu = new ContextMenu({
@@ -230,6 +193,43 @@ export function destroyDrawApp(): void {
   }
 }
 
+const showType = [
+  // 默认显示的图层
+  Section.Type,
+  AxleCounting.Type,
+  Platform.Type,
+  Station.Type,
+  Turnout.Type,
+  Signal.Type,
+  Separator.Type,
+  StopPosition.Type,
+  SpksSwitch.Type,
+  GatedBox.Type,
+  EsbButton.Type,
+  Transponder.Type,
+  TrainWindow.Type,
+  Slope.Type,
+];
+export const drawLayerList = [
+  // 图层列表
+  { label: '区段', value: Section.Type },
+  { label: 'link', value: SectionLink.Type },
+  { label: '计轴', value: AxleCounting.Type },
+  { label: '站台', value: Platform.Type },
+  { label: '车站', value: Station.Type },
+  { label: '道岔', value: Turnout.Type },
+  { label: '信号机', value: Signal.Type },
+  { label: '分隔符', value: Separator.Type },
+  { label: '停车位置标', value: StopPosition.Type },
+  { label: 'Spks开关', value: SpksSwitch.Type },
+  { label: '门控箱', value: GatedBox.Type },
+  { label: '紧急关闭按钮', value: EsbButton.Type },
+  { label: '应答器', value: Transponder.Type },
+  { label: '车次窗', value: TrainWindow.Type },
+  { label: '计轴区段', value: AxleCountingSection.Type },
+  { label: '逻辑区段', value: LogicSection.Type },
+];
+
 export function initDrawApp(dom: HTMLElement): JlDrawApp {
   drawApp = new JlDrawApp(dom);
   const app = drawApp;
@@ -255,6 +255,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     | EsbButtonDraw
     | TransponderDraw
     | SlopeKiloMarkerDrawAssistant
+    | SlopeDraw
   )[] = [];
   if (draftType === 'Line') {
     drawAssistants = [
@@ -304,6 +305,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
         app,
         new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData())
       ),
+      new SlopeDraw(app, new SlopeTemplate(new SlopeData())),
     ];
     DrawSignalInteraction.init(app);
     DrawStopPositionInteraction.init(app);
@@ -330,23 +332,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     if (app._drawing) return;
     UndoOptions.disabled = !app.opRecord.hasUndo;
     RedoOptions.disabled = !app.opRecord.hasRedo;
-    const axleCountingSections =
-      app.queryStore.queryByType<AxleCountingSection>(AxleCountingSection.Type);
-    const logicSections = app.queryStore.queryByType<LogicSection>(
-      LogicSection.Type
-    );
-    const sections = app.queryStore.queryByType<Section>(Section.Type);
-    const sectionLinks = app.queryStore.queryByType<SectionLink>(
-      SectionLink.Type
-    );
-    const turnouts = app.queryStore.queryByType<Turnout>(Turnout.Type);
-    const disvisibleGraphics = [
-      ...sections,
-      ...turnouts,
-      ...sectionLinks,
-      ...axleCountingSections,
-      ...logicSections,
-    ];
+
     UndoOptions.handler = () => {
       app.opRecord.undo();
     };
@@ -356,45 +342,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     SelectAllOptions.handler = () => {
       app.selectAllGraphics();
     };
-    AllOptions.handler = () => {
-      disvisibleGraphics.forEach((g) => {
-        g.visible = true;
-      });
-    };
-    physicalSection.handler = () => {
-      disvisibleGraphics.forEach((g) => {
-        g.visible = false;
-      });
-      sections.forEach((axleCountingSection) => {
-        axleCountingSection.visible = true;
-      });
-      turnouts.forEach((axleCountingSection) => {
-        axleCountingSection.visible = true;
-      });
-    };
-    linkOptions.handler = () => {
-      disvisibleGraphics.forEach((g) => {
-        g.visible = false;
-      });
-      sectionLinks.forEach((axleCountingSection) => {
-        axleCountingSection.visible = true;
-      });
-    };
-    axleCountingSectionOptions.handler = () => {
-      disvisibleGraphics.forEach((g) => {
-        g.visible = false;
-      });
-      axleCountingSections.forEach((axleCountingSection) => {
-        axleCountingSection.visible = true;
-      });
-    };
-    LogicSectionOptions.handler = () => {
-      disvisibleGraphics.forEach((g) => {
-        g.visible = false;
-      });
-      logicSections.forEach((logicSection) => {
-        logicSection.visible = true;
-      });
+    const lineStore = useLineStore();
+    layerOptions.handler = () => {
+      lineStore.setShowLayerDialog(true);
     };
     DefaultCanvasMenu.open(e.global);
   });
@@ -521,6 +471,9 @@ export function saveDrawDatas(app: JlDrawApp) {
       storage.slopeKiloMarker.push(
         (slopeKiloMarkerData as SlopeKiloMarkerData).data
       );
+    } else if (Slope.Type === g.type) {
+      const slopeData = (g as Slope).saveData();
+      storage.slopes.push((slopeData as SlopeData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -607,27 +560,21 @@ export async function loadDrawDatas(app: GraphicApp) {
     storage.slopeKiloMarker.forEach((slopeKiloMarker) => {
       datas.push(new SlopeKiloMarkerData(slopeKiloMarker));
     });
+    storage.slopes.forEach((slope) => {
+      datas.push(new SlopeData(slope));
+    });
     await app.loadGraphic(datas);
   } else {
     app.loadGraphic([]);
   }
-  //隐藏计轴区段--Link
-  const axleCountingSections = app.queryStore.queryByType<AxleCountingSection>(
-    AxleCountingSection.Type
-  );
-  axleCountingSections.forEach((axleCountingSection) => {
-    axleCountingSection.visible = false;
-  });
-  const sectionLinks = app.queryStore.queryByType<SectionLink>(
-    SectionLink.Type
-  );
-  sectionLinks.forEach((sectionLink) => {
-    sectionLink.visible = false;
-  });
-  const logicSections = app.queryStore.queryByType<LogicSection>(
-    LogicSection.Type
-  );
-  logicSections.forEach((logicSection) => {
-    logicSection.visible = false;
+  const lineStore = useLineStore();
+  const alllGraphic = app.queryStore.getAllGraphics();
+  alllGraphic.forEach((g) => {
+    if (showType.includes(g.type)) {
+      g.visible = true;
+    } else {
+      g.visible = false;
+    }
   });
+  lineStore.setShowLayer(showType);
 }
diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index a0b48dd..a4fc7bf 100644
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@@ -116,6 +116,8 @@ const DefaultCanvasMenu = new ContextMenu({
   ],
 });
 const showType = [
+  // 默认显示的图层
+  Section.Type,
   Platform.Type,
   Station.Type,
   Turnout.Type,
@@ -128,9 +130,9 @@ const showType = [
   EsbButton.Type,
   Transponder.Type,
 ];
-const physicShowType = [...showType, Section.Type];
 
 export const layerList = [
+  // 图层列表
   { label: '区段', value: Section.Type },
   { label: 'link', value: SectionLink.Type },
   { label: '计轴', value: AxleCounting.Type },
@@ -280,7 +282,7 @@ export async function loadLineDatas(app: GraphicApp) {
 
     const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
     alllGraphic.forEach((g) => {
-      if (physicShowType.includes(g.type)) {
+      if (showType.includes(g.type)) {
         g.visible = true;
       } else {
         g.visible = false;
@@ -290,7 +292,7 @@ export async function loadLineDatas(app: GraphicApp) {
         (g as Transponder).labelGraphic.visible = false;
       }
     });
-    lineStore.setShowLayer(physicShowType);
+    lineStore.setShowLayer(showType);
     app.enableWsMassaging({
       engine: ClientEngine.Centrifugo,
       wsUrl: `${getWebsocketUrl()}`,
diff --git a/src/graphics/signal/Signal.ts b/src/graphics/signal/Signal.ts
index 753baae..bb57066 100644
--- a/src/graphics/signal/Signal.ts
+++ b/src/graphics/signal/Signal.ts
@@ -7,7 +7,7 @@ import {
 } from 'src/jl-graphic';
 import { calculateMirrorPoint } from 'src/jl-graphic';
 import { LampMainBody } from './LampMainBody';
-import { drawArrow } from '../CommonGraphics';
+import { drawArrow, IRelatedRefData } from '../CommonGraphics';
 import { SignalCode } from './SignalCode';
 
 export interface KilometerSystem {
@@ -16,7 +16,6 @@ export interface KilometerSystem {
   get kilometer(): number;
   set kilometer(v: number);
 }
-
 export interface ISignalData extends GraphicData {
   get code(): string; // 编号
   set code(v: string);
@@ -26,6 +25,8 @@ export interface ISignalData extends GraphicData {
   set kilometerSystem(v: KilometerSystem);
   get index(): number;
   set index(v: number);
+  get refDev(): IRelatedRefData;
+  set refDev(v: IRelatedRefData);
   clone(): ISignalData;
   copyFrom(data: ISignalData): void;
   eq(other: ISignalData): boolean;
diff --git a/src/graphics/slope/Slope.ts b/src/graphics/slope/Slope.ts
new file mode 100644
index 0000000..b566dcb
--- /dev/null
+++ b/src/graphics/slope/Slope.ts
@@ -0,0 +1,152 @@
+import { Graphics, IPointData } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+  calculateLineMidpoint,
+} from 'src/jl-graphic';
+
+export interface ITurnoutPosRefData {
+  get id(): string; //道岔的ID
+  set id(v: string);
+  get position(): number; //道岔的正反为，0是正位，1是反位
+  set position(v: number);
+}
+
+export interface ISlopeData extends GraphicData {
+  get code(): string; // 名称
+  set code(v: string);
+  get points(): IPointData[]; // 线坐标点
+  set points(points: IPointData[]);
+  get slopeNumber(): string; // 坡度的值
+  set slopeNumber(v: string);
+  get slopeDirection(): string; //坡度方向 有三种，无坡度--上坡--下坡
+  set slopeDirection(v: string);
+  get slopeLong(): number; //该坡度的长度--两端公里标的差值
+  set slopeLong(v: number);
+  get refDeviceId(): string[]; // 坡度关联的设备id
+  set refDeviceId(v: string[]);
+  clone(): ISlopeData;
+  copyFrom(data: ISlopeData): void;
+  eq(other: ISlopeData): boolean;
+}
+
+export const SlopeConsts = {
+  lineColor: '0xffffff',
+  lineWidth: 2,
+  height: 40,
+};
+
+export class Slope extends JlGraphic {
+  static Type = 'Slope';
+  lineGraphic: Graphics;
+  slopeNumber: VectorText;
+  slopeLong: VectorText;
+  constructor() {
+    super(Slope.Type);
+    this.lineGraphic = new Graphics();
+    this.slopeNumber = new VectorText();
+    this.slopeNumber.name = 'slopeNumber';
+    this.slopeLong = new VectorText();
+    this.slopeLong.name = 'slopeLong';
+    const vectorTexts = [this.slopeNumber, this.slopeLong];
+    vectorTexts.forEach((vectorText) => {
+      vectorText.setVectorFontSize(14);
+      vectorText.anchor.set(0.5);
+      vectorText.style.fill = '0xffffff';
+      vectorText.transformSave = true;
+    });
+    this.transformSave = true;
+    this.addChild(this.lineGraphic);
+    this.addChild(this.slopeNumber);
+    this.addChild(this.slopeLong);
+  }
+
+  get datas(): ISlopeData {
+    return this.getDatas<ISlopeData>();
+  }
+  doRepaint(): void {
+    if (this.datas.points.length < 2) {
+      throw new Error('Slope坐标数据异常');
+    }
+    this.lineGraphic.clear();
+    this.lineGraphic.lineStyle(SlopeConsts.lineWidth, SlopeConsts.lineColor);
+    let distanceY = 0;
+    switch (this.datas.slopeDirection) {
+      case 'up':
+        distanceY = -SlopeConsts.height / 2;
+        break;
+      case 'down':
+        distanceY = SlopeConsts.height / 2;
+        break;
+    }
+    this.datas.points.forEach((p, i) => {
+      if (i !== 0) {
+        this.lineGraphic.lineTo(p.x, p.y + distanceY);
+      } else {
+        this.lineGraphic.moveTo(p.x, p.y - distanceY);
+      }
+    });
+    //坡度值
+    this.slopeNumber.text = this.datas.slopeNumber;
+    const slopeNumberPosition = this.datas.childTransforms?.find(
+      (t) => t.name === this.slopeNumber.name
+    )?.transform.position;
+    if (slopeNumberPosition) {
+      this.slopeNumber.position.set(
+        slopeNumberPosition.x,
+        slopeNumberPosition.y
+      );
+    } else {
+      const centerPos = calculateLineMidpoint(
+        this.datas.points[0],
+        this.datas.points[this.datas.points.length - 1]
+      );
+      this.slopeNumber.position.set(centerPos.x, centerPos.y - 15);
+    }
+    //坡度长度
+    this.slopeLong.text = this.datas.slopeLong;
+    const slopeLongPosition = this.datas.childTransforms?.find(
+      (t) => t.name === this.slopeLong.name
+    )?.transform.position;
+    if (slopeLongPosition) {
+      this.slopeLong.position.set(slopeLongPosition.x, slopeLongPosition.y);
+    } else {
+      const centerPos = calculateLineMidpoint(
+        this.datas.points[0],
+        this.datas.points[this.datas.points.length - 1]
+      );
+      this.slopeLong.position.set(centerPos.x, centerPos.y + 15);
+    }
+  }
+  get linePoints(): IPointData[] {
+    return this.datas.points;
+  }
+  set linePoints(points: IPointData[]) {
+    const old = this.datas.clone();
+    old.points = points;
+    this.updateData(old);
+  }
+  loadRelations() {
+    if (this.datas.refDeviceId.length) {
+      this.datas.refDeviceId.forEach((id) => {
+        const section = this.queryStore.queryById(id);
+        this.relationManage.addRelation(this, section);
+      });
+    }
+  }
+}
+
+export class SlopeTemplate extends JlGraphicTemplate<Slope> {
+  constructor(dataTemplate: ISlopeData) {
+    super(Slope.Type, {
+      dataTemplate,
+    });
+  }
+  new(): Slope {
+    const slope = new Slope();
+    slope.loadData(this.datas);
+    return slope;
+  }
+}
diff --git a/src/graphics/slope/SlopeAssistant.ts b/src/graphics/slope/SlopeAssistant.ts
new file mode 100644
index 0000000..6c46148
--- /dev/null
+++ b/src/graphics/slope/SlopeAssistant.ts
@@ -0,0 +1,134 @@
+import { FederatedPointerEvent, IHitArea, Point } from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  GraphicIdGenerator,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+  linePoint,
+} from 'src/jl-graphic';
+
+import { ISlopeData, Slope, SlopeTemplate, SlopeConsts } from './Slope';
+import { AxleCounting } from '../axleCounting/AxleCounting';
+
+export interface ISlopeDrawOptions {
+  newData: () => ISlopeData;
+}
+export class SlopeDraw extends GraphicDrawAssistant<SlopeTemplate, ISlopeData> {
+  codeGraph: Slope;
+  constructor(app: JlDrawApp, template: SlopeTemplate) {
+    super(app, template, 'sym_o_circle', '不展示');
+    this.codeGraph = this.graphicTemplate.new();
+    this.container.addChild(this.codeGraph);
+    SlopeInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    this.codeGraph.loadData(this.graphicTemplate.datas);
+    this.codeGraph.doRepaint();
+  }
+
+  clearCache(): void {
+    //this.codeGraph.destroy();
+  }
+  onLeftDown(e: FederatedPointerEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.container.position.copyFrom(p);
+  }
+  prepareData(data: ISlopeData): boolean {
+    data.transform = this.container.saveTransform();
+    return true;
+  }
+  draw(graphics: AxleCounting[], map: Map<string, number>) {
+    if (
+      map.has(`${graphics[0].id}+${graphics[1].id}`) ||
+      map.has(`${graphics[1].id}+${graphics[0].id}`)
+    )
+      return;
+    map.set(`${graphics[0].id}+${graphics[1].id}`, 1);
+    const slope = new Slope();
+    slope.loadData(this.graphicTemplate.datas);
+    slope.datas.points = [graphics[0].position, graphics[1].position];
+    slope.id = GraphicIdGenerator.next();
+    slope.datas.refDeviceId = [graphics[0].id, graphics[1].id];
+    this.storeGraphic(slope);
+    slope.loadRelations();
+  }
+  oneGenerates() {
+    const map = new Map();
+    const slopes = this.app.queryStore.queryByType<Slope>(Slope.Type);
+    const axleCountings = this.app.queryStore.queryByType<AxleCounting>(
+      AxleCounting.Type
+    );
+    axleCountings.sort((a, b) => a.position.x - b.position.x);
+    const axleCountingsPos = axleCountings.map((g) => g.position.x);
+    //检验坡度有效性--是否有增加和删除
+    slopes.forEach((slope) => {
+      const pS = slope.datas.points[0].x;
+      const mapS = axleCountingsPos.findIndex((x) => x == pS);
+      const pE = slope.datas.points[1].x;
+      const mapE = axleCountingsPos.findIndex((x) => x == pE);
+      if (mapS !== -1 && mapE !== -1 && mapE - mapS == 1) {
+        map.set(
+          `${slope.datas.refDeviceId[0]}+${slope.datas.refDeviceId[1]}`,
+          1
+        );
+      } else {
+        this.app.deleteGraphics(slope);
+      }
+    });
+    for (let i = 0; i < axleCountings.length - 1; i++) {
+      this.draw([axleCountings[i], axleCountings[i + 1]], map);
+    }
+  }
+}
+class SlopeGraphicHitArea implements IHitArea {
+  slope: Slope;
+  constructor(slope: Slope) {
+    this.slope = slope;
+  }
+  contains(x: number, y: number): boolean {
+    for (let i = 1; i < this.slope.datas.points.length; i++) {
+      const p1 = this.slope.datas.points[i - 1];
+      const p2 = this.slope.datas.points[i];
+      if (linePoint(p1, p2, { x, y }, SlopeConsts.lineWidth)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export class SlopeInteraction extends GraphicInteractionPlugin<Slope> {
+  static Name = 'Slope_transform';
+  constructor(app: JlDrawApp) {
+    super(SlopeInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new SlopeInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Slope[] | undefined {
+    return grahpics.filter((g) => g.type === Slope.Type).map((g) => g as Slope);
+  }
+  bind(g: Slope): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.transformSave = true;
+    g.lineGraphic.eventMode = 'static';
+    g.lineGraphic.cursor = 'pointer';
+    g.lineGraphic.hitArea = new SlopeGraphicHitArea(g);
+  }
+  unbind(g: Slope): void {
+    g.eventMode = 'none';
+    g.lineGraphic.eventMode = 'none';
+    g.lineGraphic.draggable = false;
+    g.lineGraphic.selectable = false;
+    g.lineGraphic.transformSave = false;
+  }
+}
diff --git a/src/graphics/stopPosition/StopPosition.ts b/src/graphics/stopPosition/StopPosition.ts
index 1ea7fa2..4900454 100644
--- a/src/graphics/stopPosition/StopPosition.ts
+++ b/src/graphics/stopPosition/StopPosition.ts
@@ -5,6 +5,7 @@ import {
   JlGraphicTemplate,
   VectorText,
 } from 'src/jl-graphic';
+import { IRelatedRefData } from '../CommonGraphics';
 
 export enum CoachNum {
   Four = 0,
@@ -17,7 +18,6 @@ export interface KilometerSystem {
   get kilometer(): number;
   set kilometer(v: number);
 }
-
 export interface IStopPosition extends GraphicData {
   get code(): string;
   set code(v: string);
@@ -29,6 +29,8 @@ export interface IStopPosition extends GraphicData {
   set index(v: number);
   get kilometerSystem(): KilometerSystem;
   set kilometerSystem(v: KilometerSystem);
+  get refDev(): IRelatedRefData;
+  set refDev(v: IRelatedRefData);
   clone(): IStopPosition;
   copyFrom(data: IStopPosition): void;
   eq(other: IStopPosition): boolean;
diff --git a/src/layouts/DrawLayout.vue b/src/layouts/DrawLayout.vue
index 3aa2e9c..166cedc 100644
--- a/src/layouts/DrawLayout.vue
+++ b/src/layouts/DrawLayout.vue
@@ -43,6 +43,9 @@
                 <q-item clickable v-close-popup @click="oneClickLogicSection">
                   <q-item-section>一键生成逻辑区段</q-item-section>
                 </q-item>
+                <q-item clickable v-close-popup @click="oneClickSlope">
+                  <q-item-section>一键生成坡度</q-item-section>
+                </q-item>
               </q-list>
             </q-menu>
           </q-btn>
@@ -206,6 +209,13 @@
         </q-card-actions>
       </q-card>
     </q-dialog>
+    <LayerControlDialog
+      :showLayer="lineStore.showLayer"
+      :layerList="drawLayerList"
+      :showDialog="lineStore.showLayerDialog"
+      @setShowLayer="setShowLayer"
+      @onDialogClose="onDialogClose"
+    ></LayerControlDialog>
   </q-layout>
 </template>
 
@@ -236,7 +246,12 @@ import { SectionDraw } from 'src/graphics/section/SectionDrawAssistant';
 import { Section } from 'src/graphics/section/Section';
 import { LogicSection } from 'src/graphics/logicSection/LogicSection';
 import { LogicSectionDraw } from 'src/graphics/logicSection/LogicSectionDrawAssistant';
+import { Slope } from 'src/graphics/slope/Slope';
+import { SlopeDraw } from 'src/graphics/slope/SlopeAssistant';
 import { useQuasar } from 'quasar';
+import LayerControlDialog from 'src/components/draw-app/dialogs/LayerControlDialog.vue';
+import { drawLayerList } from 'src/drawApp/index';
+import { useLineStore } from 'src/stores/line-store';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -244,6 +259,7 @@ const router = useRouter();
 const searchId = ref('');
 
 const drawStore = useDrawStore();
+const lineStore = useLineStore();
 
 watch(
   () => drawStore.drawMode,
@@ -419,6 +435,13 @@ function oneClickLogicSection() {
     .getDrawAssistant(LogicSection.Type) as LogicSectionDraw;
   logicSectionDraw.oneGenerates();
 }
+function oneClickSlope() {
+  //一键生成坡度
+  const slopeDraw = drawStore
+    .getDrawApp()
+    .getDrawAssistant(Slope.Type) as SlopeDraw;
+  slopeDraw.oneGenerates();
+}
 function oneClickLink() {
   drawStore.oneClickType = 'SectionLink';
   const draw = drawStore
@@ -462,4 +485,20 @@ async function saveAs(name: string) {
 onUnmounted(() => {
   drawStore.destroy();
 });
+
+function setShowLayer(val: string[]) {
+  lineStore.setShowLayer(val);
+  const drawApp = drawStore.getDrawApp();
+  const alllGraphic = drawApp.queryStore.getAllGraphics();
+  alllGraphic.forEach((g) => {
+    if (val.includes(g.type)) {
+      g.visible = true;
+    } else {
+      g.visible = false;
+    }
+  });
+}
+function onDialogClose() {
+  lineStore.setShowLayerDialog(false);
+}
 </script>
diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue
index 595d7f5..63ab4fa 100644
--- a/src/layouts/LineLayout.vue
+++ b/src/layouts/LineLayout.vue
@@ -21,7 +21,13 @@
     <q-page-container>
       <div id="line-app-container"></div>
     </q-page-container>
-    <LayerControlDialog></LayerControlDialog>
+    <LayerControlDialog
+      :showLayer="lineStore.showLayer"
+      :layerList="layerList"
+      :showDialog="lineStore.showLayerDialog"
+      @setShowLayer="setShowLayer"
+      @onDialogClose="onDialogClose"
+    ></LayerControlDialog>
   </q-layout>
 </template>
 
@@ -35,6 +41,7 @@ import StateProperties from 'src/components/line-app/StateProperties.vue';
 // import { Train } from 'src/graphics/train/Train';
 // import { Turnout } from 'src/graphics/turnout/Turnout';
 import LayerControlDialog from 'src/components/draw-app/dialogs/LayerControlDialog.vue';
+import { layerList } from 'src/drawApp/lineApp';
 
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
@@ -103,4 +110,20 @@ watch(
     }
   }
 );
+
+function setShowLayer(val: string[]) {
+  lineStore.setShowLayer(val);
+  const lineApp = lineStore.getLineApp();
+  const alllGraphic = lineApp.queryStore.getAllGraphics();
+  alllGraphic.forEach((g) => {
+    if (val.includes(g.type)) {
+      g.visible = true;
+    } else {
+      g.visible = false;
+    }
+  });
+}
+function onDialogClose() {
+  lineStore.setShowLayerDialog(false);
+}
 </script>
diff --git a/src/pages/CategoryManage.vue b/src/pages/CategoryManage.vue
new file mode 100644
index 0000000..7c969c3
--- /dev/null
+++ b/src/pages/CategoryManage.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="厂家信息"
+      :style="{ height: tableHeight + 'px' }"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      :filter="filter"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <q-input
+          dense
+          debounce="1000"
+          v-model="filter.name"
+          label="名称"
+        ></q-input>
+        <q-btn flat round color="primary" icon="search" />
+        <q-btn color="primary" label="新建" @click="createFormShow = true" />
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="编辑"
+              @click="editData(props.row)"
+            />
+            <q-btn
+              color="red"
+              :disable="operateDisabled"
+              label="删除"
+              @click="deleteData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog
+      v-model="createFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <q-form
+            ref="myForm"
+            @submit="onCreate"
+            @reset="onReset"
+            class="q-gutter-md"
+          >
+            <div class="text-h6">
+              {{ editInfo.id ? '编辑厂家信息' : '新建厂家信息' }}
+            </div>
+            <q-input
+              outlined
+              label="名称"
+              v-model="editInfo.categoryName"
+              lazy-rules
+              :rules="[(val) => val.length > 0 || '请输入名称！']"
+            />
+            <q-input outlined label="配置" v-model="editInfo.config" />
+
+            <q-card-actions align="right">
+              <q-btn
+                color="primary"
+                :label="editInfo.id ? '修改' : '创建'"
+                type="submit"
+              />
+              <q-btn label="取消" type="reset" v-close-popup />
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn, QForm } from 'quasar';
+import {
+  pageQuery,
+  createCategory,
+  deleteCategory,
+  saveCategoryData,
+  createParams,
+  CategoryItem,
+  getCategoryInfo,
+} from '../api/CategoryInfoApi';
+import { ApiError } from 'src/boot/axios';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'name',
+    label: '名称',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'created_at',
+    label: '创建时间',
+    field: 'created_at',
+    align: 'center',
+  },
+  {
+    name: 'update_at',
+    label: '更新时间',
+    field: 'update_at',
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  name: '',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  const filter = props.filter;
+
+  loading.value = true;
+  try {
+    let response = await pageQuery({
+      current: page,
+      size: rowsPerPage,
+      name: filter.name,
+    });
+    const pageData = response;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const createFormShow = ref(false);
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      operateDisabled.value = true;
+      try {
+        const params: createParams = {
+          name: editInfo.categoryName,
+          config: JSON.stringify(editInfo.config),
+        };
+        if (editInfo.id) {
+          await saveCategoryData(+editInfo.id, params);
+        } else {
+          await createCategory(params);
+        }
+        onReset();
+        createFormShow.value = false;
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        const error = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: error.title,
+        });
+      } finally {
+        operateDisabled.value = false;
+      }
+    }
+  });
+}
+
+function onReset() {
+  editInfo.id = '';
+  editInfo.categoryName = '';
+  editInfo.config = '';
+  myForm.value?.resetValidation();
+}
+
+async function deleteData(row: CategoryItem) {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认删除厂家 "${row.name}" 吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await deleteCategory(row.id);
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        const error = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: error.title,
+        });
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+
+const editInfo = reactive({
+  id: '',
+  categoryName: '',
+  config: '',
+});
+function editData(row: CategoryItem) {
+  getCategoryInfo(row.id)
+    .then((res: CategoryItem) => {
+      editInfo.id = res.id + '';
+      editInfo.categoryName = res.name;
+      editInfo.config = res.config ? JSON.parse(res.config) : '';
+      createFormShow.value = true;
+    })
+    .catch((err) => {
+      const error = err as ApiError;
+      $q.notify({
+        type: 'negative',
+        message: error.title,
+      });
+    });
+}
+</script>
diff --git a/src/pages/DraftManage.vue b/src/pages/DraftManage.vue
index 6bdba87..79e5439 100644
--- a/src/pages/DraftManage.vue
+++ b/src/pages/DraftManage.vue
@@ -58,30 +58,32 @@
       transition-hide="scale"
     >
       <q-card style="width: 300px">
-        <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
-          <q-card-section>
+        <q-card-section>
+          <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
             <div class="text-h6">新建草稿图</div>
             <q-input
               outlined
-              label="名称"
+              label="名称 * "
               v-model="draftName"
               lazy-rules
               :rules="[(val) => val.length > 0 || '请输入名称！']"
             />
             <q-select
-              v-model="createType"
-              :options="typeOptions"
+              v-model="categoryId"
+              :options="categoryOptions"
               emit-value
               map-options
-              label="类型 * "
+              label="厂家 * "
+              lazy-rules
+              :rules="[(val) => val.length > 0 || '请选择厂家！']"
             />
-          </q-card-section>
 
-          <q-card-actions align="right">
-            <q-btn color="primary" label="创建" type="submit" />
-            <q-btn label="取消" v-close-popup />
-          </q-card-actions>
-        </q-form>
+            <q-card-actions align="right">
+              <q-btn color="primary" label="创建" type="submit" />
+              <q-btn label="取消" v-close-popup />
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
       </q-card>
     </q-dialog>
 
@@ -93,11 +95,8 @@
     >
       <q-card style="width: 300px">
         <q-card-section>
-          <div class="text-h6">草稿发布</div>
-        </q-card-section>
-
-        <q-form ref="pubForm" @submit="publishGraphics" class="q-gutter-md">
-          <q-card-section>
+          <q-form ref="pubForm" @submit="publishGraphics" class="q-gutter-md">
+            <div class="text-h6">草稿发布</div>
             <q-input
               outlined
               disable
@@ -111,23 +110,20 @@
               lazy-rules
               :rules="[(val) => val.length > 0 || '请输入名称！']"
             />
-            <!-- <q-select
-              v-if="publishForm.type == 'Line'"
-              v-model="publishForm.lineId"
-              :options="lineOptions"
-              emit-value
-              map-options
-              label="线路 * "
+            <q-input
+              outlined
+              label="备注 * "
+              v-model="publishForm.note"
               lazy-rules
-              :rules="[(val) => val || '请选择线路！']"
-            /> -->
-          </q-card-section>
+              :rules="[(val) => val.length > 0 || '请输入备注！']"
+            />
 
-          <q-card-actions align="right">
-            <q-btn color="primary" label="发布" type="submit" />
-            <q-btn label="取消" v-close-popup />
-          </q-card-actions>
-        </q-form>
+            <q-card-actions align="right">
+              <q-btn color="primary" label="发布" type="submit" />
+              <q-btn label="取消" v-close-popup />
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
       </q-card>
     </q-dialog>
   </div>
@@ -136,10 +132,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useQuasar, type QTableColumn, QForm } from 'quasar';
-import { pageQuery, createDraft, deleteDraft } from '../api/DraftApi';
+import {
+  pageQuery,
+  createDraft,
+  deleteDraft,
+  DraftItem,
+} from '../api/DraftApi';
 import { publishDraft } from '../api/PublishApi';
-// import { getLineList } from '../api/LineInfoApi';
 import { ApiError } from 'src/boot/axios';
+import { CategoryItem, getCategoryList } from 'src/api/CategoryInfoApi';
+
+interface OptionsItem {
+  label: string;
+  value: string;
+}
 
 const $q = useQuasar();
 
@@ -154,41 +160,9 @@ const tableHeight = computed(() => {
   return props.sizeHeight - 32;
 });
 
-const typeOptions = [
-  { label: '线路', value: 'Line' },
-  // { label: '线网', value: 'LineNetwork' },
-];
-const createType = ref('Line');
-
-// let lineOptions: Array<{ label: string; value: number }> = [];
-// function getAllLineList() {
-//   lineOptions = [];
-//   getLineList()
-//     .then((res) => {
-//       res.forEach((item) => {
-//         const obj = {
-//           label: item.name,
-//           value: item.lineId,
-//         };
-//         lineOptions.push(obj);
-//       });
-//     })
-//     .catch((err) => {
-//       console.log(err, '---err--');
-//     });
-// }
-
-// const typeOptionsMap = computed(() => {
-//   const obj: { [k: string]: string } = {};
-//   typeOptions.forEach((item: { value: string; label: string }) => {
-//     obj[item.value] = item.label;
-//   });
-//   return obj;
-// });
-
 onMounted(() => {
   tableRef.value.requestServerInteraction();
-  // getAllLineList();
+  getCategoryListFn();
 });
 
 const columnDefs: QTableColumn[] = [
@@ -200,14 +174,14 @@ const columnDefs: QTableColumn[] = [
     align: 'center',
   },
   // { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
-  // {
-  //   name: 'type',
-  //   label: '类型',
-  //   field: (row) => {
-  //     return typeOptionsMap.value[row.type];
-  //   },
-  //   align: 'center',
-  // },
+  {
+    name: 'category',
+    label: '厂家',
+    field: (row) => {
+      return categoryName(row.category);
+    },
+    align: 'center',
+  },
   {
     name: 'created_at',
     label: '创建时间',
@@ -277,7 +251,7 @@ function onCreate() {
       try {
         await createDraft({
           name: draftName.value,
-          type: createType.value,
+          category: +categoryId.value,
         });
         createFormShow.value = false;
         tableRef.value.requestServerInteraction(); // 刷新列表
@@ -299,25 +273,23 @@ const publishForm = reactive({
   id: '',
   draftName: '',
   pubName: '',
-  // lineId: '',
-  type: 'Line',
+  note: '',
 });
-function prePublish(row: any) {
+function prePublish(row: DraftItem) {
   publishFormShow.value = true;
-  publishForm.id = row.id;
+  publishForm.id = row.id + '';
   publishForm.draftName = row.name;
   publishForm.pubName = row.name;
-  // publishForm.lineId = '';
-  publishForm.type = row.type || 'Line';
 }
 
 async function publishGraphics() {
   pubForm.value?.validate().then(async (res) => {
     if (res) {
       try {
-        const params: { draftId: number; name: string; lineId?: number } = {
+        const params: { draftId: number; name: string; note: string } = {
           draftId: +publishForm.id,
           name: publishForm.pubName,
+          note: publishForm.note,
         };
         await publishDraft(params);
         publishFormShow.value = false;
@@ -336,7 +308,7 @@ async function publishGraphics() {
   });
 }
 
-async function deleteData(row: any) {
+async function deleteData(row: DraftItem) {
   operateDisabled.value = true;
   $q.dialog({
     title: '确认',
@@ -359,4 +331,28 @@ async function deleteData(row: any) {
       operateDisabled.value = false;
     });
 }
+
+const categoryOptions: OptionsItem[] = [];
+const categoryId = ref('');
+function categoryName(val?: number) {
+  let n = '';
+  if (val) {
+    const find = categoryOptions.find((item) => {
+      return item.value == val + '';
+    });
+    n = find ? find.label : '';
+  }
+  return n;
+}
+function getCategoryListFn() {
+  getCategoryList()
+    .then((res: CategoryItem[]) => {
+      res.forEach((item) => {
+        categoryOptions.push({ label: item.name, value: item.id + '' });
+      });
+    })
+    .catch((err) => {
+      console.log(err, '获取厂家列表失败！');
+    });
+}
 </script>
diff --git a/src/pages/PublishManage.vue b/src/pages/PublishManage.vue
index 4b462b9..a331839 100644
--- a/src/pages/PublishManage.vue
+++ b/src/pages/PublishManage.vue
@@ -32,6 +32,11 @@
               label="创建仿真"
               @click="create(props.row)"
             />
+            <q-btn
+              color="primary"
+              label="另存到草稿"
+              @click="showSaveToDraftFn(props.row)"
+            />
             <q-btn
               color="red"
               :disable="operateDisabled"
@@ -42,13 +47,50 @@
         </q-td>
       </template>
     </q-table>
+    <q-dialog
+      v-model="showDialog"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <q-form ref="pubForm" @submit="saveToDraftFn" class="q-gutter-md">
+            <div class="text-h6">另存到草稿</div>
+            <q-input
+              outlined
+              disable
+              label="发布图名称"
+              v-model="toDraftForm.name"
+            />
+            <q-input
+              outlined
+              label="草稿名称"
+              v-model="toDraftForm.draftName"
+              lazy-rules
+              :rules="[(val) => val.length > 0 || '请输入草稿名称！']"
+            />
+
+            <q-card-actions align="right">
+              <q-btn color="primary" label="确定" type="submit" />
+              <q-btn label="取消" v-close-popup />
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useQuasar, type QTableColumn } from 'quasar';
-import { pageQuery, deletePublish } from '../api/PublishApi';
+import {
+  pageQuery,
+  deletePublish,
+  saveToDraft,
+  PublishItem,
+} from '../api/PublishApi';
 import { useRouter } from 'vue-router';
 import { createSimulation } from 'src/api/Simulation';
 import { ApiError } from 'src/boot/axios';
@@ -79,6 +121,13 @@ const columnDefs: QTableColumn[] = [
     required: true,
     align: 'center',
   },
+  {
+    name: 'note',
+    label: '备注',
+    field: 'note',
+    required: true,
+    align: 'center',
+  },
   {
     name: 'publishAt',
     label: '发布时间',
@@ -133,7 +182,7 @@ async function onRequest(props: any) {
   }
 }
 
-async function create(row: any) {
+async function create(row: PublishItem) {
   createSimulation({ mapId: row.id })
     .then((res) => {
       const query = {
@@ -152,7 +201,7 @@ async function create(row: any) {
     });
 }
 
-async function deleteData(row: any) {
+async function deleteData(row: PublishItem) {
   operateDisabled.value = true;
   $q.dialog({
     title: '确认',
@@ -175,4 +224,30 @@ async function deleteData(row: any) {
       operateDisabled.value = false;
     });
 }
+
+const showDialog = ref(false);
+const toDraftForm = reactive({
+  id: '',
+  name: '',
+  draftName: '',
+});
+function showSaveToDraftFn(row: PublishItem) {
+  toDraftForm.id = row.id + '';
+  toDraftForm.name = row.name;
+  showDialog.value = true;
+}
+function saveToDraftFn() {
+  saveToDraft(+toDraftForm.id, { name: toDraftForm.draftName })
+    .then((res) => {
+      console.log(res, 'res');
+      showDialog.value = false;
+    })
+    .catch((err) => {
+      const error = err as ApiError;
+      $q.notify({
+        type: 'negative',
+        message: error.title,
+      });
+    });
+}
 </script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index c19f1d2..c803ffd 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -35,9 +35,9 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/PublishManage.vue'),
       },
       {
-        path: 'lineInfo',
-        name: 'lineInfo',
-        component: () => import('pages/LineInfoManage.vue'),
+        path: 'categoryInfo',
+        name: 'categoryInfo',
+        component: () => import('pages/CategoryManage.vue'),
       },
     ],
   },
diff --git a/src/stores/line-store.ts b/src/stores/line-store.ts
index 99559de..68079ec 100644
--- a/src/stores/line-store.ts
+++ b/src/stores/line-store.ts
@@ -10,8 +10,8 @@ export const useLineStore = defineStore('line', {
     simulationId: null as string | null,
     socketStates: null as GraphicState[] | null,
     stateProCount: 0,
-    showLayer: [] as string[], // 显示的图层
-    showLayerDialog: false, // 显示图层控制弹窗
+    showLayer: [] as string[], // 显示的图层（草稿和发布图公用）
+    showLayerDialog: false, // 显示图层控制弹窗（草稿和发布图公用）
   }),
   getters: {
     selectedGraphicType: (state) => {