From c0b1d057ecf7faf3c3988529878897ef897e8858 Mon Sep 17 00:00:00 2001
From: Yuan <yuanliyedefy@gmail.com>
Date: Fri, 13 Oct 2023 14:02:52 +0800
Subject: [PATCH] =?UTF-8?q?ibp=E7=BB=98=E5=88=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bj-rtss-message                               |   2 +-
 .../draw-app/dialogs/IBpRelatedDeviceList.vue | 135 +++++++
 .../draw-app/properties/RelateIbpConfig.vue   | 326 +++++++++++++++++
 src/drawApp/ibpDrawApp.ts                     |  65 +++-
 src/graphics/IBPButton/IBPButton.ts           |   1 -
 src/layouts/IBPDrawLayout.vue                 | 103 ++----
 src/protos/device_state.ts                    |  52 +++
 src/protos/ibpGraphics.ts                     | 343 +++++++++---------
 src/protos/pslGraphics.ts                     | 108 +-----
 src/protos/stationLayoutGraphics.ts           |  78 +++-
 src/stores/ibp-draw-store.ts                  |   3 +
 11 files changed, 847 insertions(+), 369 deletions(-)
 create mode 100644 src/components/draw-app/dialogs/IBpRelatedDeviceList.vue
 create mode 100644 src/components/draw-app/properties/RelateIbpConfig.vue

diff --git a/bj-rtss-message b/bj-rtss-message
index 5604ad8..7d027a7 160000
--- a/bj-rtss-message
+++ b/bj-rtss-message
@@ -1 +1 @@
-Subproject commit 5604ad84ed5c6af4206937f5bbba9b2debfbfb6f
+Subproject commit 7d027a7e5e284dc2f20e3380472efad533435ace
diff --git a/src/components/draw-app/dialogs/IBpRelatedDeviceList.vue b/src/components/draw-app/dialogs/IBpRelatedDeviceList.vue
new file mode 100644
index 0000000..d12e736
--- /dev/null
+++ b/src/components/draw-app/dialogs/IBpRelatedDeviceList.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { QTable, useQuasar } from 'quasar';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import {
+  RelateDevicelistItem,
+  deleteIbpRelateDevice,
+  loadIbpRelateDeviceList,
+} from 'src/drawApp/ibpDrawApp';
+import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import { ref } from 'vue';
+
+const $q = useQuasar();
+const tableRef = ref<QTable>();
+const rows = ref<RelateDevicelistItem[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+const deviceTypeMap = {
+  6: '车站',
+};
+const columns: QTable['columns'] = [
+  {
+    name: 'deviceType',
+    label: '设备类型',
+    field: (row) => deviceTypeMap[row.deviceType as keyof typeof deviceTypeMap],
+    align: 'center',
+  },
+  { name: 'code', label: '设备编号', field: 'code', align: 'center' },
+  {
+    name: 'combinationtypes',
+    label: '关联的组合类型',
+    field: (row: RelateDevicelistItem) => {
+      if (row.combinationtypes) {
+        return row.combinationtypes.map((type) => type.code).join('\\');
+      }
+    },
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+const ibpDrawStore = useIBPDrawStore();
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage } = props.pagination;
+  loading.value = true;
+  const data = loadIbpRelateDeviceList();
+  pagination.value.rowsNumber = data.length;
+  pagination.value.page = page;
+  pagination.value.rowsPerPage = rowsPerPage;
+  rows.value = data.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+  loading.value = false;
+};
+const onDialogShow = () => {
+  tableRef.value?.requestServerInteraction();
+  ibpDrawStore.table = tableRef.value;
+};
+const props = defineProps<{
+  onEditClick: (row: RelateDevicelistItem) => void;
+}>();
+function onEdit(row: RelateDevicelistItem) {
+  ibpDrawStore.showRelateDeviceConfig = true;
+  setTimeout(() => {
+    props.onEditClick(row);
+  }, 0);
+}
+function createData() {
+  ibpDrawStore.showRelateDeviceConfig = true;
+}
+function deleteData(row: RelateDevicelistItem) {
+  $q.dialog({ message: `确定删除 "${row.code}" 吗?`, cancel: true }).onOk(
+    async () => {
+      try {
+        deleteIbpRelateDevice(row);
+        successNotify('删除数据成功！');
+      } catch (err) {
+        errorNotify('删除失败:', err);
+      } finally {
+        tableRef.value?.requestServerInteraction();
+      }
+    }
+  );
+}
+</script>
+
+<template>
+  <DraggableDialog
+    seamless
+    @show="onDialogShow"
+    title="IBP关联的车站"
+    :width="600"
+    :height="0"
+  >
+    <template #footer>
+      <QTable
+        ref="tableRef"
+        ref_key="id"
+        v-model:pagination="pagination"
+        :rows="rows"
+        :columns="columns"
+        :loading="loading"
+        @request="onRequest"
+        :rows-per-page-options="[5, 10, 20, 50]"
+      >
+        <template v-slot:body-cell="props">
+          <QTd :props="props" class="custom-column">
+            {{ props.value }}
+          </QTd>
+        </template>
+        <template v-slot:body-cell-operations="props">
+          <QTd :props="props">
+            <div class="q-gutter-sm row justify-center">
+              <QBtn color="primary" label="编辑" @click="onEdit(props.row)" />
+              <QBtn color="red" label="删除" @click="deleteData(props.row)" />
+            </div>
+          </QTd> </template
+      ></QTable>
+    </template>
+    <template #titleButton>
+      <QBtn
+        color="primary"
+        label="新建"
+        class="q-mr-md"
+        @click="createData"
+      ></QBtn>
+    </template>
+  </DraggableDialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/draw-app/properties/RelateIbpConfig.vue b/src/components/draw-app/properties/RelateIbpConfig.vue
new file mode 100644
index 0000000..6a17cb6
--- /dev/null
+++ b/src/components/draw-app/properties/RelateIbpConfig.vue
@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { QForm, useQuasar } from 'quasar';
+import { JlGraphic } from 'src/jl-graphic';
+import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { IbpAlarm } from 'src/graphics/ibpAlarm/IbpAlarm';
+import { IBPButton } from 'src/graphics/IBPButton/IBPButton';
+import { IbpKey } from 'src/graphics/ibpKey/IbpKey';
+import { ibpGraphicData } from 'src/protos/ibpGraphics';
+import {
+  editIbpRelateDevice,
+  createIbpRelateDevice,
+  RelateDevicelistItem,
+} from 'src/drawApp/ibpDrawApp';
+
+defineExpose({ editRelateDevices });
+
+const ibpDrawStore = useIBPDrawStore();
+const $q = useQuasar();
+const showRangeConfig = ref(true);
+const relateDeviceConfig = ref<{
+  deviceType: graphicData.RelatedRef.DeviceType | undefined;
+  code: string;
+  combinationtypes: {
+    code: string;
+    refDevices: string[];
+    refDevicesCode: string[];
+    expanded: boolean;
+  }[];
+}>({
+  deviceType: undefined,
+  code: '',
+  combinationtypes: [
+    { code: '组合类型', refDevices: [], refDevicesCode: [], expanded: false },
+  ],
+});
+const handleState = ref('新建门控箱关联设备');
+
+const optionsType = [
+  { label: '车站', value: graphicData.RelatedRef.DeviceType.station },
+];
+
+let selectGraphic: JlGraphic[] = [];
+watch(
+  () => ibpDrawStore.selectedGraphics,
+  (val) => {
+    if (val && val.length > 0 && clickIndex !== null) {
+      const selectFilter = ibpDrawStore.selectedGraphics?.filter(
+        (g) =>
+          g.type == IBPButton.Type ||
+          g.type == IbpAlarm.Type ||
+          g.type == IbpKey.Type
+      ) as JlGraphic[];
+      selectGraphic.push(...selectFilter);
+      selectGraphic = Array.from(new Set(selectGraphic));
+      ibpDrawStore.getDrawApp().updateSelected(...selectGraphic);
+      relateDeviceConfig.value.combinationtypes[clickIndex].refDevicesCode =
+        selectGraphic.map((g) =>
+          (g as IBPButton | IbpAlarm | IbpKey).datas.code == ''
+            ? g.id
+            : (g as IBPButton | IbpAlarm | IbpKey).datas.code
+        );
+      relateDeviceConfig.value.combinationtypes[clickIndex].refDevices =
+        selectGraphic.map((g) => g.id) as string[];
+    }
+  }
+);
+
+onMounted(() => {
+  onReset();
+});
+
+const myForm = ref<QForm | null>(null);
+let editRow: RelateDevicelistItem;
+let handle = ref('');
+let handleError = ref('');
+async function onSubmit() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      try {
+        const combinationtypes: ibpGraphicData.Combinationtype[] = [];
+        relateDeviceConfig.value.combinationtypes.forEach((combinationtype) => {
+          combinationtypes.push(
+            new ibpGraphicData.Combinationtype({
+              code: combinationtype.code,
+              refDevices: combinationtype.refDevices,
+            })
+          );
+        });
+        const ibpRelateDevice = new ibpGraphicData.IbpRelatedDevice({
+          deviceType: relateDeviceConfig.value.deviceType,
+          code: relateDeviceConfig.value.code,
+          combinationtypes: combinationtypes,
+        });
+        if (handleState.value == '新建门控箱关联设备') {
+          handle.value = '创建成功';
+          handleError.value = '创建失败';
+          createIbpRelateDevice(ibpRelateDevice);
+        } else {
+          handle.value = '更新成功';
+          handleError.value = '更新失败';
+          editIbpRelateDevice(editRow, ibpRelateDevice);
+        }
+        ibpDrawStore.table?.requestServerInteraction();
+        $q.notify({
+          type: 'positive',
+          message: handle.value,
+        });
+        onReset();
+        showRangeConfig.value = false;
+      } catch (err) {
+        $q.notify({
+          type: 'negative',
+          message: handleError.value,
+        });
+      } finally {
+        setTimeout(() => {
+          showRangeConfig.value = true;
+        }, 0);
+      }
+    }
+  });
+}
+async function editRelateDevices(row: RelateDevicelistItem) {
+  try {
+    const drawApp = ibpDrawStore.getDrawApp();
+    handleState.value = '编辑门控箱关联设备';
+    selectGraphic = [];
+    drawApp.updateSelected();
+    editRow = row;
+    relateDeviceConfig.value.deviceType = row.deviceType;
+    relateDeviceConfig.value.code = row.code;
+    row.combinationtypes.forEach((combinationtype) => {
+      const refCode: string[] = [];
+      combinationtype.refDevices.forEach((id) => {
+        const g = drawApp.queryStore.queryById(id);
+        refCode.push(g.code);
+      });
+      combinationtype.refDevicesCode = refCode;
+      combinationtype.expanded = false;
+    });
+    relateDeviceConfig.value.combinationtypes = [];
+    row.combinationtypes.forEach((combinationtype) => {
+      const { code, refDevices, refDevicesCode, expanded } = combinationtype;
+      relateDeviceConfig.value.combinationtypes.push({
+        code,
+        refDevices,
+        refDevicesCode: refDevicesCode as string[],
+        expanded: expanded as boolean,
+      });
+    });
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '没有需要编辑的详细信息',
+    });
+  }
+}
+
+let clickIndex: null | number = null;
+function toggleItem(index: number) {
+  const drawApp = ibpDrawStore.getDrawApp();
+  selectGraphic = [];
+  drawApp.updateSelected();
+  const combinationtypes = relateDeviceConfig.value.combinationtypes;
+  if (combinationtypes[index].expanded == true) {
+    clickIndex = index;
+    const select: JlGraphic[] = [];
+    combinationtypes[index].refDevices.forEach((id: string) => {
+      const g = drawApp.queryStore.queryById(id);
+      select.push(g);
+    });
+    drawApp.updateSelected(...select);
+  } else {
+    clickIndex = null;
+  }
+}
+
+function removeSelect(code: string) {
+  const clickTarget =
+    relateDeviceConfig.value.combinationtypes[clickIndex as number];
+  const removeIndex = clickTarget.refDevicesCode.findIndex(
+    (item) => item == code
+  );
+  selectGraphic.splice(removeIndex, 1);
+  clickTarget.refDevicesCode.splice(removeIndex, 1);
+  clickTarget.refDevices.splice(removeIndex, 1);
+  ibpDrawStore.getDrawApp().updateSelected(...selectGraphic);
+}
+
+function clearAllSelect(index: number) {
+  relateDeviceConfig.value.combinationtypes[index].refDevices = [];
+  relateDeviceConfig.value.combinationtypes[index].refDevicesCode = [];
+  clearAllSelectAtCanvas();
+}
+
+function clearAllSelectAtCanvas() {
+  selectGraphic = [];
+  ibpDrawStore.getDrawApp().updateSelected();
+}
+
+function addCombinationtype() {
+  relateDeviceConfig.value.combinationtypes.push({
+    code: '组合类型',
+    refDevices: [],
+    refDevicesCode: [],
+    expanded: false,
+  });
+}
+
+function deleteCombinationtype(index: number) {
+  relateDeviceConfig.value.combinationtypes.splice(index, 1);
+  clearAllSelectAtCanvas();
+}
+
+function onReset() {
+  clickIndex = null;
+  handleState.value = '新建门控箱关联设备';
+  relateDeviceConfig.value = {
+    deviceType: undefined,
+    code: '',
+    combinationtypes: [
+      { code: '组合类型', refDevices: [], refDevicesCode: [], expanded: false },
+    ],
+  };
+  clearAllSelectAtCanvas();
+}
+
+function goBack() {
+  onReset();
+  ibpDrawStore.showRelateDeviceConfig = false;
+}
+</script>
+
+<template>
+  <div v-if="showRangeConfig">
+    <QCard class="q-gutter-sm q-pa-sm">
+      <QCardSection>
+        <div class="text-h6">{{ handleState }}</div>
+      </QCardSection>
+      <QSeparator inset></QSeparator>
+      <QForm ref="myForm" @submit="onSubmit" @reset="onReset">
+        <QSelect
+          outlined
+          v-model="relateDeviceConfig.deviceType"
+          :options="optionsType"
+          label="设备类型"
+          :map-options="true"
+          :emit-value="true"
+          :rules="[(val) => val != '' || '设备类型不能为空']"
+        />
+        <QInput
+          outlined
+          label="设备编号"
+          v-model="relateDeviceConfig.code"
+          :rules="[(val) => val.trim() != '' || '名称不能为空']"
+        />
+        <QList bordered separator class="rounded-borders">
+          <QExpansionItem
+            expand-separator
+            v-for="(
+              combinationtype, index
+            ) in relateDeviceConfig.combinationtypes"
+            :key="index"
+            v-model="combinationtype.expanded"
+            :label="combinationtype.code"
+            @click="toggleItem(index)"
+          >
+            <QCard>
+              <QItem>
+                <QItemSection no-wrap class="q-gutter-y-sm column">
+                  <QInput
+                    outlined
+                    v-model="combinationtype.code"
+                    label="组合类型"
+                    lazy-rules
+                  />
+                  <div class="q-gutter-sm row">
+                    <QChip
+                      v-for="item in combinationtype.refDevicesCode"
+                      :key="item"
+                      square
+                      color="primary"
+                      text-color="white"
+                      removable
+                      @remove="removeSelect(item)"
+                    >
+                      {{ item }}
+                    </QChip>
+                  </div>
+                  <div>
+                    <QBtn
+                      v-show="combinationtype.refDevicesCode.length > 0"
+                      style="width: 130px"
+                      label="清空框选的设备"
+                      color="red"
+                      class="q-mr-md"
+                      @click="clearAllSelect(index)"
+                    />
+                    <QBtn
+                      label="删除组合类型"
+                      color="secondary"
+                      @click="deleteCombinationtype(index)"
+                    />
+                  </div>
+                </QItemSection>
+              </QItem>
+            </QCard>
+          </QExpansionItem>
+        </QList>
+        <QBtn
+          class="q-mt-md"
+          label="增加组合类型"
+          color="secondary"
+          @click="addCombinationtype"
+        />
+        <div class="q-gutter-sm q-pa-md row justify-center">
+          <QBtn label="提交" type="submit" color="primary" class="q-mr-md" />
+          <QBtn label="重置" type="reset" color="primary" class="q-mr-md" />
+          <QBtn label="返回" color="primary" @click="goBack" />
+        </div>
+      </QForm>
+    </QCard>
+  </div>
+</template>
diff --git a/src/drawApp/ibpDrawApp.ts b/src/drawApp/ibpDrawApp.ts
index 60cac6d..f7cd79f 100644
--- a/src/drawApp/ibpDrawApp.ts
+++ b/src/drawApp/ibpDrawApp.ts
@@ -106,18 +106,6 @@ export function initIBPDrawApp() {
   return drawApp;
 }
 
-//所属集中站
-let uniqueIdPrefix = new ibpGraphicData.UniqueIdType();
-export function loadUniqueIdPrefix() {
-  return uniqueIdPrefix;
-}
-
-export function setUniqueIdPrefix(
-  newUniqueIdPrefix: ibpGraphicData.UniqueIdType
-) {
-  uniqueIdPrefix = newUniqueIdPrefix;
-}
-
 export function saveIBPDrawToServer(app: IDrawApp) {
   const base64 = saveIBPDrawDatas(app);
   const ibpDrawStore = useIBPDrawStore();
@@ -156,7 +144,6 @@ export function saveIBPDrawDatas(app: IDrawApp) {
       storage.IBPTexts.push(g.saveData<IbpTextData>().data);
     }
   });
-  storage.UniqueIdPrefix = uniqueIdPrefix;
   const base64 = fromUint8Array(storage.serialize());
   return base64;
 }
@@ -188,9 +175,6 @@ async function IBPDrawDataLoader() {
     storage.IBPTexts.forEach((ibpText) => {
       datas.push(new IbpTextData(ibpText));
     });
-    if (storage.UniqueIdPrefix) {
-      setUniqueIdPrefix(storage.UniqueIdPrefix);
-    }
     return {
       canvasProperty: storage.canvas,
       datas: datas,
@@ -201,3 +185,52 @@ async function IBPDrawDataLoader() {
     });
   }
 }
+
+export interface RelateDevicelistItem {
+  deviceType: graphicData.RelatedRef.DeviceType | undefined;
+  code: string;
+  combinationtypes: {
+    code: string;
+    refDevices: string[];
+    refDevicesCode?: string[];
+    expanded?: boolean;
+  }[];
+}
+
+const refDevicesList: ibpGraphicData.IbpRelatedDevice[] = [];
+export function loadIbpRelateDeviceList() {
+  return refDevicesList;
+}
+
+export function createIbpRelateDevice(row: ibpGraphicData.IbpRelatedDevice) {
+  refDevicesList.push(row);
+  drawApp?.emit('postdataloaded');
+}
+
+export function editIbpRelateDevice(
+  editRow: RelateDevicelistItem,
+  newData: ibpGraphicData.IbpRelatedDevice
+) {
+  for (let i = 0; i < refDevicesList.length; i++) {
+    if (
+      refDevicesList[i].deviceType == editRow.deviceType &&
+      refDevicesList[i].code == editRow.code
+    ) {
+      refDevicesList[i] = newData;
+      break;
+    }
+  }
+  drawApp?.emit('postdataloaded');
+}
+
+export function deleteIbpRelateDevice(row: RelateDevicelistItem) {
+  for (let i = 0; i < refDevicesList.length; i++) {
+    if (
+      refDevicesList[i].deviceType == row.deviceType &&
+      refDevicesList[i].code == row.code
+    ) {
+      refDevicesList.splice(i, 1);
+      break;
+    }
+  }
+}
diff --git a/src/graphics/IBPButton/IBPButton.ts b/src/graphics/IBPButton/IBPButton.ts
index d91a1a9..a5780cd 100644
--- a/src/graphics/IBPButton/IBPButton.ts
+++ b/src/graphics/IBPButton/IBPButton.ts
@@ -35,7 +35,6 @@ export class IBPButton extends JlGraphic {
   }
 
   doRepaint(): void {
-    console.log(1);
     this.sprite.texture = this.textures.get(this.datas.color, false, false);
   }
 }
diff --git a/src/layouts/IBPDrawLayout.vue b/src/layouts/IBPDrawLayout.vue
index 8ed67b9..805e4ff 100644
--- a/src/layouts/IBPDrawLayout.vue
+++ b/src/layouts/IBPDrawLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, shallowRef, toRaw, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { useIBPDrawStore } from '../stores/ibp-draw-store';
 import { useRoute, useRouter } from 'vue-router';
 import { IBPButton } from 'src/graphics/IBPButton/IBPButton';
@@ -8,14 +8,14 @@ import { IbpKey } from 'src/graphics/ibpKey/IbpKey';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import {
+  RelateDevicelistItem,
   getIBPDrawApp,
   saveIBPDrawToServer,
-  loadUniqueIdPrefix,
-  setUniqueIdPrefix,
-  saveIBPDrawDatas,
 } from 'src/drawApp/ibpDrawApp';
 import IbpDrawProperties from 'src/components/draw-app/IbpDrawProperties.vue';
-import { ibpGraphicData } from 'src/protos/ibpGraphics';
+import { DialogChainObject, useQuasar } from 'quasar';
+import IBpRelatedDeviceList from 'src/components/draw-app/dialogs/IBpRelatedDeviceList.vue';
+import RelateIbpConfig from 'src/components/draw-app/properties/RelateIbpConfig.vue';
 
 const ibpDrawStore = useIBPDrawStore();
 const route = useRoute();
@@ -127,22 +127,29 @@ function saveData() {
   }
 }
 
-const isPrefixDialogOpen = ref(false);
-const uniqueIdPrefix = ref(new ibpGraphicData.UniqueIdType().toObject());
-
-function openUniqueIdPrefixDialog() {
-  isPrefixDialogOpen.value = true;
-  uniqueIdPrefix.value = loadUniqueIdPrefix();
-}
-
-function saveUniqueIdPrefix() {
-  setUniqueIdPrefix(new ibpGraphicData.UniqueIdType(uniqueIdPrefix.value));
-  isPrefixDialogOpen.value = false;
-  saveData();
-}
 function backConfirm() {
   router.go(-1);
 }
+
+const $q = useQuasar();
+let relateDeviceDialogInstance: DialogChainObject | null = null;
+const relateDeviceConfigEdit = ref<InstanceType<typeof RelateIbpConfig>>();
+
+function openDeviceRelateList() {
+  if (relateDeviceDialogInstance) return;
+  relateDeviceDialogInstance = $q
+    .dialog({
+      component: IBpRelatedDeviceList,
+      componentProps: {
+        onEditClick: (row: RelateDevicelistItem) => {
+          relateDeviceConfigEdit.value?.editRelateDevices(row);
+        },
+      },
+    })
+    .onCancel(() => {
+      relateDeviceDialogInstance = null;
+    });
+}
 </script>
 
 <template>
@@ -156,13 +163,6 @@ function backConfirm() {
                 <QItem clickable @click="saveData" v-close-popup>
                   <QItemSection>保存</QItemSection>
                 </QItem>
-                <QItem
-                  clickable
-                  @click="openUniqueIdPrefixDialog"
-                  v-close-popup
-                >
-                  <QItemSection>UniqueId配置</QItemSection>
-                </QItem>
               </QList>
             </QMenu>
           </QBtn>
@@ -185,6 +185,19 @@ function backConfirm() {
             </template></QBtnToggle
           >
         </QToolbarTitle>
+        <QBtnDropdown
+          color="orange"
+          label="数据管理"
+          style="margin-right: 10px"
+        >
+          <QList>
+            <QItem clickable v-close-popup @click="openDeviceRelateList">
+              <QItemSection>
+                <QItemLabel>关联设备列表</QItemLabel>
+              </QItemSection>
+            </QItem>
+          </QList>
+        </QBtnDropdown>
         <QBtn color="info" label="返回" @click="backConfirm" />
         <QBtn dense flat round icon="menu" @click="toggleRightDrawer" />
       </QToolbar>
@@ -192,47 +205,11 @@ function backConfirm() {
     </QHeader>
     <QDrawer show-if-above bordered v-model="rightDrawerOpen" side="right">
       <QResizeObserver @resize="onRightResize" />
-      <IbpDrawProperties />
+      <IbpDrawProperties v-if="!ibpDrawStore.showRelateDeviceConfig" />
+      <RelateIbpConfig v-else ref="relateDeviceConfigEdit" />
     </QDrawer>
     <QPageContainer>
       <div id="draw-app-container" class="overflow-hidden"></div>
     </QPageContainer>
   </QLayout>
-  <QDialog
-    v-model="isPrefixDialogOpen"
-    persistent
-    transition-show="scale"
-    transition-hide="scale"
-  >
-    <QCard style="width: 300px">
-      <QCardSection>
-        <div class="text-h6">UniqueId配置</div>
-      </QCardSection>
-      <QCardSection>
-        <QInput
-          outlined
-          label="所属城市"
-          v-model="uniqueIdPrefix.city"
-          :rules="[(val) => val.trim() != '' || '城市不能为空']"
-        />
-        <QInput
-          outlined
-          label="线路号"
-          v-model="uniqueIdPrefix.lineId"
-          :rules="[(val) => val.trim() != '' || '线路号不能为空']"
-        />
-        <QInput
-          outlined
-          label="所属车站"
-          v-model="uniqueIdPrefix.belongsStation"
-          :rules="[(val) => val.trim() != '' || '所属车站不能为空']"
-        />
-      </QCardSection>
-
-      <QCardActions align="right">
-        <QBtn color="primary" label="提交" @click="saveUniqueIdPrefix()" />
-        <QBtn label="取消" v-close-popup />
-      </QCardActions>
-    </QCard>
-  </QDialog>
 </template>
diff --git a/src/protos/device_state.ts b/src/protos/device_state.ts
index a756e5e..1f37479 100644
--- a/src/protos/device_state.ts
+++ b/src/protos/device_state.ts
@@ -440,6 +440,58 @@ export namespace state {
             return SignalState.deserialize(bytes);
         }
     }
+    export class Signal extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {}) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") { }
+        }
+        static fromObject(data: {}): Signal {
+            const message = new Signal({});
+            return message;
+        }
+        toObject() {
+            const data: {} = {};
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Signal {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Signal();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Signal {
+            return Signal.deserialize(bytes);
+        }
+    }
+    export namespace Signal {
+        export enum Aspect {
+            OFF = 0,
+            ON = 1,
+            L = 2,
+            H = 3,
+            U = 4,
+            HU = 5,
+            B = 6,
+            A = 7
+        }
+    }
     export class PlatformState extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
diff --git a/src/protos/ibpGraphics.ts b/src/protos/ibpGraphics.ts
index 72193b4..2748105 100644
--- a/src/protos/ibpGraphics.ts
+++ b/src/protos/ibpGraphics.ts
@@ -15,10 +15,10 @@ export namespace ibpGraphicData {
             ibpKeys?: IbpKey[];
             ibpArrows?: IbpArrow[];
             IBPTexts?: IBPText[];
-            UniqueIdPrefix?: UniqueIdType;
+            ibpRelatedDevices?: IbpRelatedDevice[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 8], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -38,8 +38,8 @@ export namespace ibpGraphicData {
                 if ("IBPTexts" in data && data.IBPTexts != undefined) {
                     this.IBPTexts = data.IBPTexts;
                 }
-                if ("UniqueIdPrefix" in data && data.UniqueIdPrefix != undefined) {
-                    this.UniqueIdPrefix = data.UniqueIdPrefix;
+                if ("ibpRelatedDevices" in data && data.ibpRelatedDevices != undefined) {
+                    this.ibpRelatedDevices = data.ibpRelatedDevices;
                 }
             }
         }
@@ -82,14 +82,11 @@ export namespace ibpGraphicData {
         set IBPTexts(value: IBPText[]) {
             pb_1.Message.setRepeatedWrapperField(this, 6, value);
         }
-        get UniqueIdPrefix() {
-            return pb_1.Message.getWrapperField(this, UniqueIdType, 7) as UniqueIdType;
+        get ibpRelatedDevices() {
+            return pb_1.Message.getRepeatedWrapperField(this, IbpRelatedDevice, 8) as IbpRelatedDevice[];
         }
-        set UniqueIdPrefix(value: UniqueIdType) {
-            pb_1.Message.setWrapperField(this, 7, value);
-        }
-        get has_UniqueIdPrefix() {
-            return pb_1.Message.getField(this, 7) != null;
+        set ibpRelatedDevices(value: IbpRelatedDevice[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 8, value);
         }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
@@ -98,7 +95,7 @@ export namespace ibpGraphicData {
             ibpKeys?: ReturnType<typeof IbpKey.prototype.toObject>[];
             ibpArrows?: ReturnType<typeof IbpArrow.prototype.toObject>[];
             IBPTexts?: ReturnType<typeof IBPText.prototype.toObject>[];
-            UniqueIdPrefix?: ReturnType<typeof UniqueIdType.prototype.toObject>;
+            ibpRelatedDevices?: ReturnType<typeof IbpRelatedDevice.prototype.toObject>[];
         }): IBPGraphicStorage {
             const message = new IBPGraphicStorage({});
             if (data.canvas != null) {
@@ -119,8 +116,8 @@ export namespace ibpGraphicData {
             if (data.IBPTexts != null) {
                 message.IBPTexts = data.IBPTexts.map(item => IBPText.fromObject(item));
             }
-            if (data.UniqueIdPrefix != null) {
-                message.UniqueIdPrefix = UniqueIdType.fromObject(data.UniqueIdPrefix);
+            if (data.ibpRelatedDevices != null) {
+                message.ibpRelatedDevices = data.ibpRelatedDevices.map(item => IbpRelatedDevice.fromObject(item));
             }
             return message;
         }
@@ -132,7 +129,7 @@ export namespace ibpGraphicData {
                 ibpKeys?: ReturnType<typeof IbpKey.prototype.toObject>[];
                 ibpArrows?: ReturnType<typeof IbpArrow.prototype.toObject>[];
                 IBPTexts?: ReturnType<typeof IBPText.prototype.toObject>[];
-                UniqueIdPrefix?: ReturnType<typeof UniqueIdType.prototype.toObject>;
+                ibpRelatedDevices?: ReturnType<typeof IbpRelatedDevice.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -152,8 +149,8 @@ export namespace ibpGraphicData {
             if (this.IBPTexts != null) {
                 data.IBPTexts = this.IBPTexts.map((item: IBPText) => item.toObject());
             }
-            if (this.UniqueIdPrefix != null) {
-                data.UniqueIdPrefix = this.UniqueIdPrefix.toObject();
+            if (this.ibpRelatedDevices != null) {
+                data.ibpRelatedDevices = this.ibpRelatedDevices.map((item: IbpRelatedDevice) => item.toObject());
             }
             return data;
         }
@@ -173,8 +170,8 @@ export namespace ibpGraphicData {
                 writer.writeRepeatedMessage(5, this.ibpArrows, (item: IbpArrow) => item.serialize(writer));
             if (this.IBPTexts.length)
                 writer.writeRepeatedMessage(6, this.IBPTexts, (item: IBPText) => item.serialize(writer));
-            if (this.has_UniqueIdPrefix)
-                writer.writeMessage(7, this.UniqueIdPrefix, () => this.UniqueIdPrefix.serialize(writer));
+            if (this.ibpRelatedDevices.length)
+                writer.writeRepeatedMessage(8, this.ibpRelatedDevices, (item: IbpRelatedDevice) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -202,8 +199,8 @@ export namespace ibpGraphicData {
                     case 6:
                         reader.readMessage(message.IBPTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 6, IBPText.deserialize(reader), IBPText));
                         break;
-                    case 7:
-                        reader.readMessage(message.UniqueIdPrefix, () => message.UniqueIdPrefix = UniqueIdType.deserialize(reader));
+                    case 8:
+                        reader.readMessage(message.ibpRelatedDevices, () => pb_1.Message.addToRepeatedWrapperField(message, 8, IbpRelatedDevice.deserialize(reader), IbpRelatedDevice));
                         break;
                     default: reader.skipField();
                 }
@@ -713,102 +710,12 @@ export namespace ibpGraphicData {
             return IbpKey.deserialize(bytes);
         }
     }
-    export class Point extends pb_1.Message {
-        #one_of_decls: number[][] = [];
-        constructor(data?: any[] | {
-            x?: number;
-            y?: number;
-        }) {
-            super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
-            if (!Array.isArray(data) && typeof data == "object") {
-                if ("x" in data && data.x != undefined) {
-                    this.x = data.x;
-                }
-                if ("y" in data && data.y != undefined) {
-                    this.y = data.y;
-                }
-            }
-        }
-        get x() {
-            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
-        }
-        set x(value: number) {
-            pb_1.Message.setField(this, 1, value);
-        }
-        get y() {
-            return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
-        }
-        set y(value: number) {
-            pb_1.Message.setField(this, 2, value);
-        }
-        static fromObject(data: {
-            x?: number;
-            y?: number;
-        }): Point {
-            const message = new Point({});
-            if (data.x != null) {
-                message.x = data.x;
-            }
-            if (data.y != null) {
-                message.y = data.y;
-            }
-            return message;
-        }
-        toObject() {
-            const data: {
-                x?: number;
-                y?: number;
-            } = {};
-            if (this.x != null) {
-                data.x = this.x;
-            }
-            if (this.y != null) {
-                data.y = this.y;
-            }
-            return data;
-        }
-        serialize(): Uint8Array;
-        serialize(w: pb_1.BinaryWriter): void;
-        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
-            const writer = w || new pb_1.BinaryWriter();
-            if (this.x != 0)
-                writer.writeFloat(1, this.x);
-            if (this.y != 0)
-                writer.writeFloat(2, this.y);
-            if (!w)
-                return writer.getResultBuffer();
-        }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Point {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Point();
-            while (reader.nextField()) {
-                if (reader.isEndGroup())
-                    break;
-                switch (reader.getFieldNumber()) {
-                    case 1:
-                        message.x = reader.readFloat();
-                        break;
-                    case 2:
-                        message.y = reader.readFloat();
-                        break;
-                    default: reader.skipField();
-                }
-            }
-            return message;
-        }
-        serializeBinary(): Uint8Array {
-            return this.serialize();
-        }
-        static deserializeBinary(bytes: Uint8Array): Point {
-            return Point.deserialize(bytes);
-        }
-    }
     export class IbpArrow extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             common?: dependency_1.graphicData.CommonInfo;
             code?: string;
-            points?: Point[];
+            points?: dependency_1.graphicData.Point[];
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [3], this.#one_of_decls);
@@ -840,15 +747,15 @@ export namespace ibpGraphicData {
             pb_1.Message.setField(this, 2, value);
         }
         get points() {
-            return pb_1.Message.getRepeatedWrapperField(this, Point, 3) as Point[];
+            return pb_1.Message.getRepeatedWrapperField(this, dependency_1.graphicData.Point, 3) as dependency_1.graphicData.Point[];
         }
-        set points(value: Point[]) {
+        set points(value: dependency_1.graphicData.Point[]) {
             pb_1.Message.setRepeatedWrapperField(this, 3, value);
         }
         static fromObject(data: {
             common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
             code?: string;
-            points?: ReturnType<typeof Point.prototype.toObject>[];
+            points?: ReturnType<typeof dependency_1.graphicData.Point.prototype.toObject>[];
         }): IbpArrow {
             const message = new IbpArrow({});
             if (data.common != null) {
@@ -858,7 +765,7 @@ export namespace ibpGraphicData {
                 message.code = data.code;
             }
             if (data.points != null) {
-                message.points = data.points.map(item => Point.fromObject(item));
+                message.points = data.points.map(item => dependency_1.graphicData.Point.fromObject(item));
             }
             return message;
         }
@@ -866,7 +773,7 @@ export namespace ibpGraphicData {
             const data: {
                 common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
                 code?: string;
-                points?: ReturnType<typeof Point.prototype.toObject>[];
+                points?: ReturnType<typeof dependency_1.graphicData.Point.prototype.toObject>[];
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -875,7 +782,7 @@ export namespace ibpGraphicData {
                 data.code = this.code;
             }
             if (this.points != null) {
-                data.points = this.points.map((item: Point) => item.toObject());
+                data.points = this.points.map((item: dependency_1.graphicData.Point) => item.toObject());
             }
             return data;
         }
@@ -888,7 +795,7 @@ export namespace ibpGraphicData {
             if (this.code.length)
                 writer.writeString(2, this.code);
             if (this.points.length)
-                writer.writeRepeatedMessage(3, this.points, (item: Point) => item.serialize(writer));
+                writer.writeRepeatedMessage(3, this.points, (item: dependency_1.graphicData.Point) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -905,7 +812,7 @@ export namespace ibpGraphicData {
                         message.code = reader.readString();
                         break;
                     case 3:
-                        reader.readMessage(message.points, () => pb_1.Message.addToRepeatedWrapperField(message, 3, Point.deserialize(reader), Point));
+                        reader.readMessage(message.points, () => pb_1.Message.addToRepeatedWrapperField(message, 3, dependency_1.graphicData.Point.deserialize(reader), dependency_1.graphicData.Point));
                         break;
                     default: reader.skipField();
                 }
@@ -919,76 +826,76 @@ export namespace ibpGraphicData {
             return IbpArrow.deserialize(bytes);
         }
     }
-    export class UniqueIdType extends pb_1.Message {
+    export class IbpRelatedDevice extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
-            city?: string;
-            lineId?: string;
-            belongsStation?: string;
+            code?: string;
+            combinationtypes?: Combinationtype[];
+            deviceType?: dependency_1.graphicData.RelatedRef.DeviceType;
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
-                if ("city" in data && data.city != undefined) {
-                    this.city = data.city;
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
                 }
-                if ("lineId" in data && data.lineId != undefined) {
-                    this.lineId = data.lineId;
+                if ("combinationtypes" in data && data.combinationtypes != undefined) {
+                    this.combinationtypes = data.combinationtypes;
                 }
-                if ("belongsStation" in data && data.belongsStation != undefined) {
-                    this.belongsStation = data.belongsStation;
+                if ("deviceType" in data && data.deviceType != undefined) {
+                    this.deviceType = data.deviceType;
                 }
             }
         }
-        get city() {
+        get code() {
             return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
         }
-        set city(value: string) {
+        set code(value: string) {
             pb_1.Message.setField(this, 1, value);
         }
-        get lineId() {
-            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        get combinationtypes() {
+            return pb_1.Message.getRepeatedWrapperField(this, Combinationtype, 2) as Combinationtype[];
         }
-        set lineId(value: string) {
-            pb_1.Message.setField(this, 2, value);
+        set combinationtypes(value: Combinationtype[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 2, value);
         }
-        get belongsStation() {
-            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        get deviceType() {
+            return pb_1.Message.getFieldWithDefault(this, 3, dependency_1.graphicData.RelatedRef.DeviceType.Section) as dependency_1.graphicData.RelatedRef.DeviceType;
         }
-        set belongsStation(value: string) {
+        set deviceType(value: dependency_1.graphicData.RelatedRef.DeviceType) {
             pb_1.Message.setField(this, 3, value);
         }
         static fromObject(data: {
-            city?: string;
-            lineId?: string;
-            belongsStation?: string;
-        }): UniqueIdType {
-            const message = new UniqueIdType({});
-            if (data.city != null) {
-                message.city = data.city;
+            code?: string;
+            combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
+            deviceType?: dependency_1.graphicData.RelatedRef.DeviceType;
+        }): IbpRelatedDevice {
+            const message = new IbpRelatedDevice({});
+            if (data.code != null) {
+                message.code = data.code;
             }
-            if (data.lineId != null) {
-                message.lineId = data.lineId;
+            if (data.combinationtypes != null) {
+                message.combinationtypes = data.combinationtypes.map(item => Combinationtype.fromObject(item));
             }
-            if (data.belongsStation != null) {
-                message.belongsStation = data.belongsStation;
+            if (data.deviceType != null) {
+                message.deviceType = data.deviceType;
             }
             return message;
         }
         toObject() {
             const data: {
-                city?: string;
-                lineId?: string;
-                belongsStation?: string;
+                code?: string;
+                combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
+                deviceType?: dependency_1.graphicData.RelatedRef.DeviceType;
             } = {};
-            if (this.city != null) {
-                data.city = this.city;
+            if (this.code != null) {
+                data.code = this.code;
             }
-            if (this.lineId != null) {
-                data.lineId = this.lineId;
+            if (this.combinationtypes != null) {
+                data.combinationtypes = this.combinationtypes.map((item: Combinationtype) => item.toObject());
             }
-            if (this.belongsStation != null) {
-                data.belongsStation = this.belongsStation;
+            if (this.deviceType != null) {
+                data.deviceType = this.deviceType;
             }
             return data;
         }
@@ -996,29 +903,29 @@ export namespace ibpGraphicData {
         serialize(w: pb_1.BinaryWriter): void;
         serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
             const writer = w || new pb_1.BinaryWriter();
-            if (this.city.length)
-                writer.writeString(1, this.city);
-            if (this.lineId.length)
-                writer.writeString(2, this.lineId);
-            if (this.belongsStation.length)
-                writer.writeString(3, this.belongsStation);
+            if (this.code.length)
+                writer.writeString(1, this.code);
+            if (this.combinationtypes.length)
+                writer.writeRepeatedMessage(2, this.combinationtypes, (item: Combinationtype) => item.serialize(writer));
+            if (this.deviceType != dependency_1.graphicData.RelatedRef.DeviceType.Section)
+                writer.writeEnum(3, this.deviceType);
             if (!w)
                 return writer.getResultBuffer();
         }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): UniqueIdType {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new UniqueIdType();
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IbpRelatedDevice {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IbpRelatedDevice();
             while (reader.nextField()) {
                 if (reader.isEndGroup())
                     break;
                 switch (reader.getFieldNumber()) {
                     case 1:
-                        message.city = reader.readString();
+                        message.code = reader.readString();
                         break;
                     case 2:
-                        message.lineId = reader.readString();
+                        reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 2, Combinationtype.deserialize(reader), Combinationtype));
                         break;
                     case 3:
-                        message.belongsStation = reader.readString();
+                        message.deviceType = reader.readEnum();
                         break;
                     default: reader.skipField();
                 }
@@ -1028,8 +935,98 @@ export namespace ibpGraphicData {
         serializeBinary(): Uint8Array {
             return this.serialize();
         }
-        static deserializeBinary(bytes: Uint8Array): UniqueIdType {
-            return UniqueIdType.deserialize(bytes);
+        static deserializeBinary(bytes: Uint8Array): IbpRelatedDevice {
+            return IbpRelatedDevice.deserialize(bytes);
+        }
+    }
+    export class Combinationtype extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            code?: string;
+            refDevices?: string[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("refDevices" in data && data.refDevices != undefined) {
+                    this.refDevices = data.refDevices;
+                }
+            }
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get refDevices() {
+            return pb_1.Message.getFieldWithDefault(this, 2, []) as string[];
+        }
+        set refDevices(value: string[]) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            code?: string;
+            refDevices?: string[];
+        }): Combinationtype {
+            const message = new Combinationtype({});
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.refDevices != null) {
+                message.refDevices = data.refDevices;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                code?: string;
+                refDevices?: string[];
+            } = {};
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.refDevices != null) {
+                data.refDevices = this.refDevices;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.code.length)
+                writer.writeString(1, this.code);
+            if (this.refDevices.length)
+                writer.writeRepeatedString(2, this.refDevices);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Combinationtype {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Combinationtype();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.code = reader.readString();
+                        break;
+                    case 2:
+                        pb_1.Message.addToRepeatedField(message, 2, reader.readString());
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Combinationtype {
+            return Combinationtype.deserialize(bytes);
         }
     }
 }
diff --git a/src/protos/pslGraphics.ts b/src/protos/pslGraphics.ts
index c2463a0..2f946e8 100644
--- a/src/protos/pslGraphics.ts
+++ b/src/protos/pslGraphics.ts
@@ -687,7 +687,7 @@ export namespace pslGraphicData {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             code?: string;
-            combinationtypes?: Combinationtype[];
+            combinationtypes?: dependency_1.graphicData.DeviceCombinationtype[];
             deviceType?: dependency_1.graphicData.RelatedRef.DeviceType;
         }) {
             super();
@@ -711,9 +711,9 @@ export namespace pslGraphicData {
             pb_1.Message.setField(this, 1, value);
         }
         get combinationtypes() {
-            return pb_1.Message.getRepeatedWrapperField(this, Combinationtype, 2) as Combinationtype[];
+            return pb_1.Message.getRepeatedWrapperField(this, dependency_1.graphicData.DeviceCombinationtype, 2) as dependency_1.graphicData.DeviceCombinationtype[];
         }
-        set combinationtypes(value: Combinationtype[]) {
+        set combinationtypes(value: dependency_1.graphicData.DeviceCombinationtype[]) {
             pb_1.Message.setRepeatedWrapperField(this, 2, value);
         }
         get deviceType() {
@@ -724,7 +724,7 @@ export namespace pslGraphicData {
         }
         static fromObject(data: {
             code?: string;
-            combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
+            combinationtypes?: ReturnType<typeof dependency_1.graphicData.DeviceCombinationtype.prototype.toObject>[];
             deviceType?: dependency_1.graphicData.RelatedRef.DeviceType;
         }): GatedRelateDevice {
             const message = new GatedRelateDevice({});
@@ -732,7 +732,7 @@ export namespace pslGraphicData {
                 message.code = data.code;
             }
             if (data.combinationtypes != null) {
-                message.combinationtypes = data.combinationtypes.map(item => Combinationtype.fromObject(item));
+                message.combinationtypes = data.combinationtypes.map(item => dependency_1.graphicData.DeviceCombinationtype.fromObject(item));
             }
             if (data.deviceType != null) {
                 message.deviceType = data.deviceType;
@@ -742,14 +742,14 @@ export namespace pslGraphicData {
         toObject() {
             const data: {
                 code?: string;
-                combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
+                combinationtypes?: ReturnType<typeof dependency_1.graphicData.DeviceCombinationtype.prototype.toObject>[];
                 deviceType?: dependency_1.graphicData.RelatedRef.DeviceType;
             } = {};
             if (this.code != null) {
                 data.code = this.code;
             }
             if (this.combinationtypes != null) {
-                data.combinationtypes = this.combinationtypes.map((item: Combinationtype) => item.toObject());
+                data.combinationtypes = this.combinationtypes.map((item: dependency_1.graphicData.DeviceCombinationtype) => item.toObject());
             }
             if (this.deviceType != null) {
                 data.deviceType = this.deviceType;
@@ -763,7 +763,7 @@ export namespace pslGraphicData {
             if (this.code.length)
                 writer.writeString(1, this.code);
             if (this.combinationtypes.length)
-                writer.writeRepeatedMessage(2, this.combinationtypes, (item: Combinationtype) => item.serialize(writer));
+                writer.writeRepeatedMessage(2, this.combinationtypes, (item: dependency_1.graphicData.DeviceCombinationtype) => item.serialize(writer));
             if (this.deviceType != dependency_1.graphicData.RelatedRef.DeviceType.Section)
                 writer.writeEnum(3, this.deviceType);
             if (!w)
@@ -779,7 +779,7 @@ export namespace pslGraphicData {
                         message.code = reader.readString();
                         break;
                     case 2:
-                        reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 2, Combinationtype.deserialize(reader), Combinationtype));
+                        reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 2, dependency_1.graphicData.DeviceCombinationtype.deserialize(reader), dependency_1.graphicData.DeviceCombinationtype));
                         break;
                     case 3:
                         message.deviceType = reader.readEnum();
@@ -796,94 +796,4 @@ export namespace pslGraphicData {
             return GatedRelateDevice.deserialize(bytes);
         }
     }
-    export class Combinationtype extends pb_1.Message {
-        #one_of_decls: number[][] = [];
-        constructor(data?: any[] | {
-            code?: string;
-            refDevices?: string[];
-        }) {
-            super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
-            if (!Array.isArray(data) && typeof data == "object") {
-                if ("code" in data && data.code != undefined) {
-                    this.code = data.code;
-                }
-                if ("refDevices" in data && data.refDevices != undefined) {
-                    this.refDevices = data.refDevices;
-                }
-            }
-        }
-        get code() {
-            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
-        }
-        set code(value: string) {
-            pb_1.Message.setField(this, 1, value);
-        }
-        get refDevices() {
-            return pb_1.Message.getFieldWithDefault(this, 2, []) as string[];
-        }
-        set refDevices(value: string[]) {
-            pb_1.Message.setField(this, 2, value);
-        }
-        static fromObject(data: {
-            code?: string;
-            refDevices?: string[];
-        }): Combinationtype {
-            const message = new Combinationtype({});
-            if (data.code != null) {
-                message.code = data.code;
-            }
-            if (data.refDevices != null) {
-                message.refDevices = data.refDevices;
-            }
-            return message;
-        }
-        toObject() {
-            const data: {
-                code?: string;
-                refDevices?: string[];
-            } = {};
-            if (this.code != null) {
-                data.code = this.code;
-            }
-            if (this.refDevices != null) {
-                data.refDevices = this.refDevices;
-            }
-            return data;
-        }
-        serialize(): Uint8Array;
-        serialize(w: pb_1.BinaryWriter): void;
-        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
-            const writer = w || new pb_1.BinaryWriter();
-            if (this.code.length)
-                writer.writeString(1, this.code);
-            if (this.refDevices.length)
-                writer.writeRepeatedString(2, this.refDevices);
-            if (!w)
-                return writer.getResultBuffer();
-        }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Combinationtype {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Combinationtype();
-            while (reader.nextField()) {
-                if (reader.isEndGroup())
-                    break;
-                switch (reader.getFieldNumber()) {
-                    case 1:
-                        message.code = reader.readString();
-                        break;
-                    case 2:
-                        pb_1.Message.addToRepeatedField(message, 2, reader.readString());
-                        break;
-                    default: reader.skipField();
-                }
-            }
-            return message;
-        }
-        serializeBinary(): Uint8Array {
-            return this.serialize();
-        }
-        static deserializeBinary(bytes: Uint8Array): Combinationtype {
-            return Combinationtype.deserialize(bytes);
-        }
-    }
 }
diff --git a/src/protos/stationLayoutGraphics.ts b/src/protos/stationLayoutGraphics.ts
index 7a0545b..333002f 100644
--- a/src/protos/stationLayoutGraphics.ts
+++ b/src/protos/stationLayoutGraphics.ts
@@ -1731,6 +1731,7 @@ export namespace graphicData {
             concentrationStations?: boolean;
             kilometerSystem?: KilometerSystem;
             index?: number;
+            refIbpMapCode?: string;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -1750,6 +1751,9 @@ export namespace graphicData {
                 if ("index" in data && data.index != undefined) {
                     this.index = data.index;
                 }
+                if ("refIbpMapCode" in data && data.refIbpMapCode != undefined) {
+                    this.refIbpMapCode = data.refIbpMapCode;
+                }
             }
         }
         get common() {
@@ -1788,12 +1792,19 @@ export namespace graphicData {
         set index(value: number) {
             pb_1.Message.setField(this, 7, value);
         }
+        get refIbpMapCode() {
+            return pb_1.Message.getFieldWithDefault(this, 8, "") as string;
+        }
+        set refIbpMapCode(value: string) {
+            pb_1.Message.setField(this, 8, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             concentrationStations?: boolean;
             kilometerSystem?: ReturnType<typeof KilometerSystem.prototype.toObject>;
             index?: number;
+            refIbpMapCode?: string;
         }): Station {
             const message = new Station({});
             if (data.common != null) {
@@ -1811,6 +1822,9 @@ export namespace graphicData {
             if (data.index != null) {
                 message.index = data.index;
             }
+            if (data.refIbpMapCode != null) {
+                message.refIbpMapCode = data.refIbpMapCode;
+            }
             return message;
         }
         toObject() {
@@ -1820,6 +1834,7 @@ export namespace graphicData {
                 concentrationStations?: boolean;
                 kilometerSystem?: ReturnType<typeof KilometerSystem.prototype.toObject>;
                 index?: number;
+                refIbpMapCode?: string;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -1836,6 +1851,9 @@ export namespace graphicData {
             if (this.index != null) {
                 data.index = this.index;
             }
+            if (this.refIbpMapCode != null) {
+                data.refIbpMapCode = this.refIbpMapCode;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -1852,6 +1870,8 @@ export namespace graphicData {
                 writer.writeMessage(6, this.kilometerSystem, () => this.kilometerSystem.serialize(writer));
             if (this.index != 0)
                 writer.writeInt32(7, this.index);
+            if (this.refIbpMapCode.length)
+                writer.writeString(8, this.refIbpMapCode);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -1876,6 +1896,9 @@ export namespace graphicData {
                     case 7:
                         message.index = reader.readInt32();
                         break;
+                    case 8:
+                        message.refIbpMapCode = reader.readString();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -5577,6 +5600,7 @@ export namespace graphicData {
             flip?: boolean;
             index?: number;
             refScreenDoor?: string;
+            refGatedBoxMapCode?: string;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -5596,6 +5620,9 @@ export namespace graphicData {
                 if ("refScreenDoor" in data && data.refScreenDoor != undefined) {
                     this.refScreenDoor = data.refScreenDoor;
                 }
+                if ("refGatedBoxMapCode" in data && data.refGatedBoxMapCode != undefined) {
+                    this.refGatedBoxMapCode = data.refGatedBoxMapCode;
+                }
             }
         }
         get common() {
@@ -5631,12 +5658,19 @@ export namespace graphicData {
         set refScreenDoor(value: string) {
             pb_1.Message.setField(this, 5, value);
         }
+        get refGatedBoxMapCode() {
+            return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
+        }
+        set refGatedBoxMapCode(value: string) {
+            pb_1.Message.setField(this, 6, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             flip?: boolean;
             index?: number;
             refScreenDoor?: string;
+            refGatedBoxMapCode?: string;
         }): GatedBox {
             const message = new GatedBox({});
             if (data.common != null) {
@@ -5654,6 +5688,9 @@ export namespace graphicData {
             if (data.refScreenDoor != null) {
                 message.refScreenDoor = data.refScreenDoor;
             }
+            if (data.refGatedBoxMapCode != null) {
+                message.refGatedBoxMapCode = data.refGatedBoxMapCode;
+            }
             return message;
         }
         toObject() {
@@ -5663,6 +5700,7 @@ export namespace graphicData {
                 flip?: boolean;
                 index?: number;
                 refScreenDoor?: string;
+                refGatedBoxMapCode?: string;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -5679,6 +5717,9 @@ export namespace graphicData {
             if (this.refScreenDoor != null) {
                 data.refScreenDoor = this.refScreenDoor;
             }
+            if (this.refGatedBoxMapCode != null) {
+                data.refGatedBoxMapCode = this.refGatedBoxMapCode;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -5695,6 +5736,8 @@ export namespace graphicData {
                 writer.writeInt32(4, this.index);
             if (this.refScreenDoor.length)
                 writer.writeString(5, this.refScreenDoor);
+            if (this.refGatedBoxMapCode.length)
+                writer.writeString(6, this.refGatedBoxMapCode);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -5719,6 +5762,9 @@ export namespace graphicData {
                     case 5:
                         message.refScreenDoor = reader.readString();
                         break;
+                    case 6:
+                        message.refGatedBoxMapCode = reader.readString();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -6783,7 +6829,7 @@ export namespace graphicData {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             code?: string;
-            combinationtypes?: Combinationtype[];
+            combinationtypes?: DeviceCombinationtype[];
             deviceType?: RelatedRef.DeviceType;
         }) {
             super();
@@ -6807,9 +6853,9 @@ export namespace graphicData {
             pb_1.Message.setField(this, 1, value);
         }
         get combinationtypes() {
-            return pb_1.Message.getRepeatedWrapperField(this, Combinationtype, 2) as Combinationtype[];
+            return pb_1.Message.getRepeatedWrapperField(this, DeviceCombinationtype, 2) as DeviceCombinationtype[];
         }
-        set combinationtypes(value: Combinationtype[]) {
+        set combinationtypes(value: DeviceCombinationtype[]) {
             pb_1.Message.setRepeatedWrapperField(this, 2, value);
         }
         get deviceType() {
@@ -6820,7 +6866,7 @@ export namespace graphicData {
         }
         static fromObject(data: {
             code?: string;
-            combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
+            combinationtypes?: ReturnType<typeof DeviceCombinationtype.prototype.toObject>[];
             deviceType?: RelatedRef.DeviceType;
         }): StationRelateDevice {
             const message = new StationRelateDevice({});
@@ -6828,7 +6874,7 @@ export namespace graphicData {
                 message.code = data.code;
             }
             if (data.combinationtypes != null) {
-                message.combinationtypes = data.combinationtypes.map(item => Combinationtype.fromObject(item));
+                message.combinationtypes = data.combinationtypes.map(item => DeviceCombinationtype.fromObject(item));
             }
             if (data.deviceType != null) {
                 message.deviceType = data.deviceType;
@@ -6838,14 +6884,14 @@ export namespace graphicData {
         toObject() {
             const data: {
                 code?: string;
-                combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
+                combinationtypes?: ReturnType<typeof DeviceCombinationtype.prototype.toObject>[];
                 deviceType?: RelatedRef.DeviceType;
             } = {};
             if (this.code != null) {
                 data.code = this.code;
             }
             if (this.combinationtypes != null) {
-                data.combinationtypes = this.combinationtypes.map((item: Combinationtype) => item.toObject());
+                data.combinationtypes = this.combinationtypes.map((item: DeviceCombinationtype) => item.toObject());
             }
             if (this.deviceType != null) {
                 data.deviceType = this.deviceType;
@@ -6859,7 +6905,7 @@ export namespace graphicData {
             if (this.code.length)
                 writer.writeString(1, this.code);
             if (this.combinationtypes.length)
-                writer.writeRepeatedMessage(2, this.combinationtypes, (item: Combinationtype) => item.serialize(writer));
+                writer.writeRepeatedMessage(2, this.combinationtypes, (item: DeviceCombinationtype) => item.serialize(writer));
             if (this.deviceType != RelatedRef.DeviceType.Section)
                 writer.writeEnum(3, this.deviceType);
             if (!w)
@@ -6875,7 +6921,7 @@ export namespace graphicData {
                         message.code = reader.readString();
                         break;
                     case 2:
-                        reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 2, Combinationtype.deserialize(reader), Combinationtype));
+                        reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 2, DeviceCombinationtype.deserialize(reader), DeviceCombinationtype));
                         break;
                     case 3:
                         message.deviceType = reader.readEnum();
@@ -6892,7 +6938,7 @@ export namespace graphicData {
             return StationRelateDevice.deserialize(bytes);
         }
     }
-    export class Combinationtype extends pb_1.Message {
+    export class DeviceCombinationtype extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             code?: string;
@@ -6924,8 +6970,8 @@ export namespace graphicData {
         static fromObject(data: {
             code?: string;
             refDevices?: string[];
-        }): Combinationtype {
-            const message = new Combinationtype({});
+        }): DeviceCombinationtype {
+            const message = new DeviceCombinationtype({});
             if (data.code != null) {
                 message.code = data.code;
             }
@@ -6958,8 +7004,8 @@ export namespace graphicData {
             if (!w)
                 return writer.getResultBuffer();
         }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Combinationtype {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Combinationtype();
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): DeviceCombinationtype {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new DeviceCombinationtype();
             while (reader.nextField()) {
                 if (reader.isEndGroup())
                     break;
@@ -6978,8 +7024,8 @@ export namespace graphicData {
         serializeBinary(): Uint8Array {
             return this.serialize();
         }
-        static deserializeBinary(bytes: Uint8Array): Combinationtype {
-            return Combinationtype.deserialize(bytes);
+        static deserializeBinary(bytes: Uint8Array): DeviceCombinationtype {
+            return DeviceCombinationtype.deserialize(bytes);
         }
     }
 }
diff --git a/src/stores/ibp-draw-store.ts b/src/stores/ibp-draw-store.ts
index 3deffcb..6f7d547 100644
--- a/src/stores/ibp-draw-store.ts
+++ b/src/stores/ibp-draw-store.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { QTable } from 'quasar';
 import { getIBPDrawApp, initIBPDrawApp } from 'src/drawApp/ibpDrawApp';
 import { DrawAssistant, IDrawApp, IJlCanvas, JlGraphic } from 'src/jl-graphic';
 import { markRaw } from 'vue';
@@ -9,6 +10,8 @@ export const useIBPDrawStore = defineStore('ibpDraw', {
     selectedGraphics: null as JlGraphic[] | null,
     draftId: null as number | null,
     draftType: 'IBP',
+    showRelateDeviceConfig: false,
+    table: undefined as QTable | undefined,
   }),
   getters: {
     selectedObjName: (state) => {