设备关联继电器初提交

src/components/common/DraggableDialog.vue

@@ -26,6 +26,7 @@
           {{ props.title }}
         </div>
         <q-space />
+        <div style="margin-right: 10px"><slot name="titleButton"></slot></div>
         <q-btn dense flat icon="sym_o_close" v-close-popup></q-btn>
       </q-bar>
       <q-scroll-area

src/components/draw-app/DrawRelayCabinetProperties.vue

@@ -23,9 +23,6 @@
           ></relay-property>
         </q-card-section>
       </template>
-      <template v-else>
-        <q-card-section> <select-relays-property /> </q-card-section>
-      </template>
     </q-card>
   </div>
 </template>
@@ -35,7 +32,6 @@ import CanvasRelayCabinetProperty from './properties/CanvasRelayCabinetProperty.
 import RelayCabinetProperty from './properties/RelayCabinetProperty.vue';
 import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
 import RelayProperty from './properties/RelayProperty.vue';
-import SelectRelaysProperty from './properties/SelectRelaysProperty.vue';
 import { Relay } from 'src/graphics/relay/Relay';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
 

src/components/draw-app/dialogs/DeviceRelateRelayList.vue

@@ -0,0 +1,147 @@
+<template>
+  <draggable-dialog
+    seamless
+    @show="onDialogShow"
+    title="设备关联的继电器"
+    :width="600"
+    :height="0"
+  >
+    <template v-slot:footer>
+      <q-table
+        ref="tableRef"
+        row-key="id"
+        v-model:pagination="pagination"
+        :loading="loading"
+        :rows="rows"
+        :columns="columns"
+        @request="onRequest"
+        :rows-per-page-options="[5, 10, 20, 50]"
+      >
+        <template v-slot:body-cell-operations="props">
+          <q-td :props="props">
+            <div class="q-gutter-sm row justify-center">
+              <q-btn color="primary" label="编辑" @click="onEdit(props.row)" />
+              <q-btn color="red" label="删除" @click="deleteData(props.row)" />
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </template>
+    <template v-slot:titleButton>
+      <q-btn
+        color="primary"
+        label="新建"
+        style="margin-right: 10px"
+        @click="relayCabinetStore.showRelateRelayConfig = true"
+      />
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { QTable, useQuasar } from 'quasar';
+import { errorNotify } from 'src/utils/CommonNotify';
+import {
+  loadDeviceRelateRelayList,
+  RelateRelaylistItem,
+  saveDrawToServer,
+} from 'src/drawApp/relayCabinetLayoutApp';
+import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
+import { Relay } from 'src/graphics/relay/Relay';
+
+const relayCabinetStore = useRelayCabinetStore();
+const $q = useQuasar();
+const tableRef = ref<QTable>();
+const deviceTypeMap = {
+  Turnout: '道岔',
+  signal: '信号机',
+};
+const columns: QTable['columns'] = [
+  {
+    name: 'type',
+    label: '设备类型',
+    field: (row) => deviceTypeMap[row.type as keyof typeof deviceTypeMap],
+    align: 'center',
+  },
+  { name: 'code', label: '设备编号', field: 'code', align: 'center' },
+  {
+    name: 'refRelay',
+    label: '关联的继电器',
+    field: (row) => {
+      if (row.refRelay) {
+        const ref: string[] = [];
+        row.refRelay.forEach((id: string) => {
+          const g = useRelayCabinetStore()
+            .getDrawApp()
+            .queryStore.queryById(id);
+          ref.push((g as Relay).datas.code);
+        });
+        return ref.join('\\');
+      }
+    },
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+const rows = ref<RelateRelaylistItem[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage } = props.pagination;
+  loading.value = true;
+  const storage = await loadDeviceRelateRelayList();
+  const refDatas = storage.datas;
+  pagination.value.rowsNumber = refDatas.length;
+  pagination.value.page = page;
+  pagination.value.rowsPerPage = rowsPerPage;
+  rows.value = refDatas.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+  loading.value = false;
+};
+
+const onDialogShow = () => {
+  tableRef.value?.requestServerInteraction();
+};
+
+const props = defineProps<{
+  onEditClick: (row: RelateRelaylistItem) => void;
+}>();
+
+function onEdit(row: RelateRelaylistItem) {
+  relayCabinetStore.showRelateRelayConfig = true;
+  setTimeout(() => {
+    props.onEditClick(row);
+  }, 0);
+}
+function deleteData(row: RelateRelaylistItem) {
+  $q.dialog({ message: `确定删除 "${row.code}" 吗?`, cancel: true }).onOk(
+    async () => {
+      try {
+        const listData = await loadDeviceRelateRelayList();
+        const datas = listData.datas;
+        for (let i = 0; i < datas.length; i++) {
+          if (datas[i].type == row.type && datas[i].code == row.code) {
+            datas.splice(i, 1);
+            break;
+          }
+        }
+        const drawApp = relayCabinetStore.getDrawApp();
+        saveDrawToServer(drawApp, [...datas]);
+      } catch (err) {
+        errorNotify('删除失败:', err);
+      } finally {
+        tableRef.value?.requestServerInteraction();
+      }
+    }
+  );
+}
+</script>
+

src/components/draw-app/properties/RelateRelayConfig.vue

@@ -0,0 +1,225 @@
+<template>
+  <div v-if="showRangeConfig">
+    <q-card class="q-gutter-sm q-pa-sm">
+      <q-card-section>
+        <div class="text-h6">{{ handleState }}</div>
+      </q-card-section>
+      <q-separator inset></q-separator>
+      <q-form ref="myForm" @submit="onSubmit" @reset="onReset">
+        <q-select
+          outlined
+          v-model="relateRelayConfig.type"
+          :options="optionsType"
+          label="设备类型"
+          :map-options="true"
+          :emit-value="true"
+          :rules="[(val) => val.trim() != '' || '设备类型不能为空']"
+        />
+        <q-input
+          outlined
+          label="设备编号"
+          v-model="relateRelayConfig.code"
+          :rules="[(val) => val.trim() != '' || '名称不能为空']"
+        />
+        <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 device"
+                  :key="item"
+                  square
+                  color="primary"
+                  text-color="white"
+                  removable
+                  @remove="removeSelect(item)"
+                >
+                  {{ item }}
+                </q-chip>
+              </div>
+              <q-btn
+                v-show="device.length > 0"
+                style="width: 130px"
+                label="清空框选的继电器"
+                color="red"
+                @click="clearSelect"
+              />
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <div class="q-gutter-sm q-pa-md row justify-center">
+          <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
+          <q-btn label="重置" type="reset" color="primary" class="q-mr-md" />
+          <q-btn
+            label="返回"
+            color="primary"
+            @click="relayCabinetStore.showRelateRelayConfig = false"
+          />
+        </div>
+      </q-form>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue';
+import { QForm, useQuasar } from 'quasar';
+import { JlGraphic } from 'src/jl-graphic';
+import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
+import { Turnout } from 'src/graphics/turnout/Turnout';
+import { Signal } from 'src/graphics/signal/Signal';
+import { Relay } from 'src/graphics/relay/Relay';
+import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
+import {
+  loadDeviceRelateRelayList,
+  RelateRelaylistItem,
+  saveDrawToServer,
+} from 'src/drawApp/relayCabinetLayoutApp';
+
+defineExpose({ editRelateRelays });
+
+const relayCabinetStore = useRelayCabinetStore();
+const $q = useQuasar();
+const showRangeConfig = ref(true);
+const relateRelayConfig = reactive<{
+  type: string;
+  code: string;
+  refRelay: string[];
+}>({
+  type: '',
+  code: '',
+  refRelay: [],
+});
+const device = ref<string[]>([]);
+const handleState = ref('新建设备关联继电器');
+
+const optionsType = [
+  { label: '道岔', value: Turnout.Type },
+  { label: '信号机', value: Signal.Type },
+];
+
+let selectGraphic: JlGraphic[] = [];
+watch(
+  () => relayCabinetStore.selectedGraphics,
+  (val) => {
+    if (val && val.length > 0) {
+      const selectFilter = relayCabinetStore.selectedGraphics?.filter(
+        (g) => g.type == Relay.Type
+      ) as JlGraphic[];
+      selectGraphic.push(...selectFilter);
+      selectGraphic = Array.from(new Set(selectGraphic));
+      relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
+      device.value = selectGraphic.map(
+        (g) => (g as Relay).datas.code
+      ) as string[];
+      relateRelayConfig.refRelay = selectGraphic.map((g) => g.id) as string[];
+    }
+  }
+);
+
+const myForm = ref<QForm | null>(null);
+let editRow: RelateRelaylistItem;
+let handle = ref('');
+let handleError = ref('');
+async function onSubmit() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      try {
+        const listData = await loadDeviceRelateRelayList();
+        const deviceRelateRelay = new relayCabinetGraphicData.DeviceRelateRelay(
+          {
+            type: relateRelayConfig.type,
+            code: relateRelayConfig.code,
+            refRelay: [...relateRelayConfig.refRelay],
+          }
+        );
+        const drawApp = relayCabinetStore.getDrawApp();
+        if (handleState.value == '新建设备关联继电器') {
+          handle.value = '创建成功';
+          handleError.value = '创建失败';
+          saveDrawToServer(drawApp, [...listData.datas, deviceRelateRelay]);
+        } else {
+          handle.value = '更新成功';
+          handleError.value = '更新失败';
+          const listData = await loadDeviceRelateRelayList();
+          const datas = listData.datas;
+          for (let i = 0; i < datas.length; i++) {
+            if (
+              datas[i].type == editRow.type &&
+              datas[i].code == editRow.code
+            ) {
+              datas[i] = deviceRelateRelay;
+              break;
+            }
+          }
+          const drawApp = relayCabinetStore.getDrawApp();
+          saveDrawToServer(drawApp, [...datas]);
+        }
+
+        $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 editRelateRelays(row: RelateRelaylistItem) {
+  try {
+    handleState.value = '编辑设备关联继电器';
+    clearSelect();
+    editRow = row;
+    relateRelayConfig.type = row.type;
+    relateRelayConfig.code = row.code;
+    relateRelayConfig.refRelay = row.refRelay;
+    const select: JlGraphic[] = [];
+    const drawApp = relayCabinetStore.getDrawApp();
+    relateRelayConfig.refRelay.forEach((id: string) => {
+      const g = drawApp.queryStore.queryById(id);
+      select.push(g);
+      device.value.push(g.code);
+    });
+    drawApp.updateSelected(...select);
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '没有需要编辑的详细信息',
+    });
+  }
+}
+
+function removeSelect(code: string) {
+  const removeIndex = device.value.findIndex((item) => item == code);
+  selectGraphic.splice(removeIndex, 1);
+  device.value.splice(removeIndex, 1);
+  relateRelayConfig.refRelay.splice(removeIndex, 1);
+  relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
+}
+
+function clearSelect() {
+  device.value = [];
+  selectGraphic = [];
+  relayCabinetStore.getDrawApp().updateSelected();
+}
+
+function onReset() {
+  handleState.value = '新建设备关联继电器';
+  relateRelayConfig.type = '';
+  relateRelayConfig.code = '';
+  relateRelayConfig.refRelay = [];
+  clearSelect();
+}
+</script>

src/components/draw-app/properties/RelayCabinetProperty.vue

@@ -5,7 +5,7 @@
       outlined
       v-model="relayCabinetModel.code"
       @blur="onUpdate"
-      label="继电器柜"
+      label="编号"
       lazy-rules
     />
   </q-form>

src/components/draw-app/properties/RelayProperty.vue

@@ -1,13 +1,20 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-md">
-    <q-input outlined readonly v-model="relayModel.id" label="id" hint="" />
+    <q-input outlined readonly v-model="relayModel.id" label="id" />
     <q-input
       outlined
       v-model="relayModel.code"
       @blur="onUpdate"
-      label="继电器"
+      label="编号"
       lazy-rules
     />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="relayModel.model"
+      :options="optionsModel"
+      label="型号"
+    />
   </q-form>
 </template>
 
@@ -19,8 +26,8 @@ import { onMounted, reactive, watch } from 'vue';
 
 const relayCabinetStore = useRelayCabinetStore();
 const relayModel = reactive(new RelayData());
+const optionsModel = ['JWXC-1700', 'JWXC-1000', 'JPXC-1000'];
 
-relayCabinetStore.$subscribe;
 watch(
   () => relayCabinetStore.selectedGraphic,
   (val) => {

src/components/draw-app/properties/SelectRelaysProperty.vue

@@ -1,24 +0,0 @@
-<template>
-  <q-form>
-    <q-input
-      outlined
-      v-model="sameRef"
-      @blur="onUpdate"
-      label="共同关联的设备"
-      lazy-rules
-    />
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { ref } from 'vue';
-
-const relayCabinetStore = useRelayCabinetStore();
-const sameRef = ref('');
-
-function onUpdate() {
-  const relays = relayCabinetStore.selectedGraphics;
-  //console.log(relays, 555);
-}
-</script>

src/drawApp/relayCabinetGraphics/RelayInteraction.ts

@@ -26,6 +26,12 @@ export class RelayData extends GraphicDataBase implements IRelayData {
   set code(v: string) {
     this.data.code = v;
   }
+  get model(): string {
+    return this.data.model;
+  }
+  set model(v: string) {
+    this.data.model = v;
+  }
   clone(): RelayData {
     return new RelayData(this.data.cloneMessage());
   }

src/drawApp/relayCabinetLayoutApp.ts

@@ -95,13 +95,22 @@ export function initDrawApp(): IDrawApp {
       global: true,
       combinations: [CombinationKey.Ctrl],
       onPress: () => {
-        saveDrawToServer(app);
+        saveDrawDatasOnly(app);
       },
     })
   );
   return drawApp;
 }
 
+export async function saveDrawDatasOnly(app: IDrawApp) {
+  try {
+    saveDrawToServer(app);
+    successNotify('保存数据成功！');
+  } catch (error) {
+    errorNotify('保存数据失败', '');
+  }
+}
+
 export function checkDataToServer(app: IDrawApp) {
   const base64 = saveDrawDatas(app);
   checkMapData({ mapProto: base64 })
@@ -129,23 +138,23 @@ export function checkDataToServer(app: IDrawApp) {
     });
 }
 
-export function saveDrawToServer(app: IDrawApp) {
+export function saveDrawToServer(
-  const base64 = saveDrawDatas(app);
+  app: IDrawApp,
+  deviceRelateRelay?: relayCabinetGraphicData.DeviceRelateRelay[] | undefined
+) {
+  const base64 = saveDrawDatas(app, deviceRelateRelay);
   const relayCabinetStore = useRelayCabinetStore();
   const id = relayCabinetStore.draftId;
   if (!id) {
     return;
   }
-  saveDraft(id as number, { proto: base64 })
+  saveDraft(id as number, { proto: base64 });
-    .then(() => {
-      successNotify('保存数据成功！');
-    })
-    .catch((err) => {
-      errorNotify(err.message, err);
-    });
 }
 
-export function saveDrawDatas(app: IDrawApp) {
+export function saveDrawDatas(
+  app: IDrawApp,
+  deviceRelateRelay?: relayCabinetGraphicData.DeviceRelateRelay[] | undefined
+) {
   const storage = new relayCabinetGraphicData.RelayCabinetGraphicStorage();
   const canvasData = app.canvas.saveData();
   storage.canvas = new graphicData.Canvas({
@@ -163,6 +172,9 @@ export function saveDrawDatas(app: IDrawApp) {
       storage.relays.push((relayData as RelayData).data);
     }
   });
+  if (deviceRelateRelay !== undefined) {
+    storage.deviceRelateRelayList.push(...deviceRelateRelay);
+  }
   const base64 = fromUint8Array(storage.serialize());
   console.log('保存数据', storage);
   // localStorage.setItem(StorageKey, base64);
@@ -199,3 +211,35 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
     });
   }
 }
+
+export interface RelateRelaylistItem {
+  type: string;
+  code: string;
+  refRelay: string[];
+}
+
+export async function loadDeviceRelateRelayList() {
+  const relayCabinetStore = useRelayCabinetStore();
+  const id = relayCabinetStore.draftId;
+  if (!id) {
+    throw new Error('获取数据异常：未获取到草稿地图ID');
+  }
+  const { proto: base64 } = await getDraft(id);
+  if (base64) {
+    const storage =
+      relayCabinetGraphicData.RelayCabinetGraphicStorage.deserialize(
+        toUint8Array(base64)
+      );
+    const datas: relayCabinetGraphicData.DeviceRelateRelay[] = [];
+    storage.deviceRelateRelayList.forEach((relay) => {
+      datas.push(relay);
+    });
+    return Promise.resolve({
+      datas: datas,
+    });
+  } else {
+    return Promise.resolve({
+      datas: [],
+    });
+  }
+}

src/graphics/relay/Relay.ts

@@ -9,6 +9,8 @@ import {
 export interface IRelayData extends GraphicData {
   get code(): string; // 编号
   set code(v: string);
+  get model(): string; // 型号
+  set model(v: string);
   clone(): IRelayData;
   copyFrom(data: IRelayData): void;
   eq(other: IRelayData): boolean;

src/layouts/RelayCabinetLayout.vue

@@ -64,6 +64,12 @@
             </q-input>
           </q-popup-edit>
         </q-btn>
+        <q-btn
+          color="orange"
+          label="数据管理"
+          style="margin-right: 10px"
+          @click="openDeviceRelateRelayList"
+        />
         <q-btn color="info" label="返回" @click="backConfirm" />
         <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
       </q-toolbar>
@@ -72,7 +78,13 @@
 
     <q-drawer show-if-above bordered v-model="rightDrawerOpen" side="right">
       <q-resize-observer @resize="onRightResize" />
-      <draw-relayCabinetProperties></draw-relayCabinetProperties>
+      <draw-relayCabinetProperties
+        v-if="!relayCabinetStore.showRelateRelayConfig"
+      ></draw-relayCabinetProperties>
+      <relate-relay-config
+        v-else
+        ref="relateRelayConfigEdit"
+      ></relate-relay-config>
     </q-drawer>
 
     <q-page-container>
@@ -89,7 +101,6 @@
         <q-card-section>
           <div class="text-h6">另存为</div>
         </q-card-section>
-
         <q-card-section>
           <q-input
             outlined
@@ -111,11 +122,14 @@
 <script setup lang="ts">
 import DrawRelayCabinetProperties from 'src/components/draw-app/DrawRelayCabinetProperties.vue';
 import BatchBuildRelayCabinetOrRelay from 'src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue';
+import DeviceRelateRelayList from 'src/components/draw-app/dialogs/DeviceRelateRelayList.vue';
+import RelateRelayConfig from 'src/components/draw-app/properties/RelateRelayConfig.vue';
 import {
   getDrawApp,
   saveDrawDatas,
-  saveDrawToServer,
   checkDataToServer,
+  RelateRelaylistItem,
+  saveDrawDatasOnly,
 } from 'src/drawApp/relayCabinetLayoutApp';
 import { IDrawApp } from 'src/jl-graphic';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
@@ -132,38 +146,8 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const searchId = ref('');
-
 const relayCabinetStore = useRelayCabinetStore();
 
-watch(
-  () => relayCabinetStore.drawMode,
-  (drawMode) => {
-    if (!drawMode) {
-      selectUtil.value = '';
-    }
-  }
-);
-watch(
-  () => searchId.value,
-  () => {
-    try {
-      if (searchId.value) {
-        const device = relayCabinetStore
-          .getDrawApp()
-          .queryStore.queryById(searchId.value);
-        relayCabinetStore.getDrawApp().makeGraphicCenterShow(device);
-        relayCabinetStore.getDrawApp().updateSelected(device);
-      }
-    } catch (err) {
-      $q.notify({
-        type: 'negative',
-        message: `未查找到id为【${searchId.value}】的设备`,
-      });
-    }
-  }
-);
-
-const leftDrawerOpen = ref(false);
 const rightDrawerOpen = ref(false);
 function toggleRightDrawer() {
   rightDrawerOpen.value = !rightDrawerOpen.value;
@@ -194,6 +178,34 @@ class ControlItem {
   }
 }
 
+watch(
+  () => relayCabinetStore.drawMode,
+  (drawMode) => {
+    if (!drawMode) {
+      selectUtil.value = '';
+    }
+  }
+);
+watch(
+  () => searchId.value,
+  () => {
+    try {
+      if (searchId.value) {
+        const device = relayCabinetStore
+          .getDrawApp()
+          .queryStore.queryById(searchId.value);
+        relayCabinetStore.getDrawApp().makeGraphicCenterShow(device);
+        relayCabinetStore.getDrawApp().updateSelected(device);
+      }
+    } catch (err) {
+      $q.notify({
+        type: 'negative',
+        message: `未查找到id为【${searchId.value}】的设备`,
+      });
+    }
+  }
+);
+
 onMounted(() => {
   console.log('绘制应用layout mounted');
   const dom = document.getElementById('draw-app-container');
@@ -225,7 +237,6 @@ onMounted(() => {
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
 const headerHeight = ref(0);
-const leftWidth = ref(0);
 const rightWidth = ref(0);
 
 function onHeaderResize(size: { height: number; width: number }) {
@@ -242,9 +253,7 @@ function onResize() {
   const clientWidth = document.documentElement.clientWidth;
   const clientHeight = document.documentElement.clientHeight;
   canvasWidth.value =
-    clientWidth -
+    clientWidth - (rightDrawerOpen.value ? rightWidth.value : 0);
-    (leftDrawerOpen.value ? leftWidth.value : 0) -
-    (rightDrawerOpen.value ? rightWidth.value : 0);
   canvasHeight.value = clientHeight - headerHeight.value;
   const dom = document.getElementById('draw-app-container');
   if (dom) {
@@ -277,9 +286,8 @@ async function saveAs(name: string) {
 
 function saveAllDrawDatas() {
   const drawApp = getDrawApp();
-  saveDrawToServer(drawApp as IDrawApp);
+  saveDrawDatasOnly(drawApp as IDrawApp);
 }
-
 function handleCheckData() {
   const drawApp = getDrawApp();
   checkDataToServer(drawApp as IDrawApp);
@@ -291,7 +299,6 @@ function buildRelations() {
 }
 
 let batchBuildDialogInstance: DialogChainObject | null = null;
-
 function batchBuild() {
   if (batchBuildDialogInstance) return;
   batchBuildDialogInstance = $q
@@ -301,6 +308,24 @@ function batchBuild() {
     });
 }
 
+let relateRelayDialogInstance: DialogChainObject | null = null;
+const relateRelayConfigEdit = ref<InstanceType<typeof RelateRelayConfig>>();
+function openDeviceRelateRelayList() {
+  if (relateRelayDialogInstance) return;
+  relateRelayDialogInstance = $q
+    .dialog({
+      component: DeviceRelateRelayList,
+      componentProps: {
+        onEditClick: (row: RelateRelaylistItem) => {
+          relateRelayConfigEdit.value?.editRelateRelays(row);
+        },
+      },
+    })
+    .onCancel(() => {
+      relateRelayDialogInstance = null;
+    });
+}
+
 function backConfirm() {
   router.go(-1);
 }

src/protos/relayCabinetLayoutGraphics.ts

@@ -12,9 +12,10 @@ export namespace relayCabinetGraphicData {
             canvas?: dependency_1.graphicData.Canvas;
             relayCabinets?: RelayCabinet[];
             relays?: Relay[];
+            deviceRelateRelayList?: DeviceRelateRelay[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -25,6 +26,9 @@ export namespace relayCabinetGraphicData {
                 if ("relays" in data && data.relays != undefined) {
                     this.relays = data.relays;
                 }
+                if ("deviceRelateRelayList" in data && data.deviceRelateRelayList != undefined) {
+                    this.deviceRelateRelayList = data.deviceRelateRelayList;
+                }
             }
         }
         get canvas() {
@@ -48,10 +52,17 @@ export namespace relayCabinetGraphicData {
         set relays(value: Relay[]) {
             pb_1.Message.setRepeatedWrapperField(this, 3, value);
         }
+        get deviceRelateRelayList() {
+            return pb_1.Message.getRepeatedWrapperField(this, DeviceRelateRelay, 4) as DeviceRelateRelay[];
+        }
+        set deviceRelateRelayList(value: DeviceRelateRelay[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
             relayCabinets?: ReturnType<typeof RelayCabinet.prototype.toObject>[];
             relays?: ReturnType<typeof Relay.prototype.toObject>[];
+            deviceRelateRelayList?: ReturnType<typeof DeviceRelateRelay.prototype.toObject>[];
         }): RelayCabinetGraphicStorage {
             const message = new RelayCabinetGraphicStorage({});
             if (data.canvas != null) {
@@ -63,6 +74,9 @@ export namespace relayCabinetGraphicData {
             if (data.relays != null) {
                 message.relays = data.relays.map(item => Relay.fromObject(item));
             }
+            if (data.deviceRelateRelayList != null) {
+                message.deviceRelateRelayList = data.deviceRelateRelayList.map(item => DeviceRelateRelay.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -70,6 +84,7 @@ export namespace relayCabinetGraphicData {
                 canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
                 relayCabinets?: ReturnType<typeof RelayCabinet.prototype.toObject>[];
                 relays?: ReturnType<typeof Relay.prototype.toObject>[];
+                deviceRelateRelayList?: ReturnType<typeof DeviceRelateRelay.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -80,6 +95,9 @@ export namespace relayCabinetGraphicData {
             if (this.relays != null) {
                 data.relays = this.relays.map((item: Relay) => item.toObject());
             }
+            if (this.deviceRelateRelayList != null) {
+                data.deviceRelateRelayList = this.deviceRelateRelayList.map((item: DeviceRelateRelay) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -92,6 +110,8 @@ export namespace relayCabinetGraphicData {
                 writer.writeRepeatedMessage(2, this.relayCabinets, (item: RelayCabinet) => item.serialize(writer));
             if (this.relays.length)
                 writer.writeRepeatedMessage(3, this.relays, (item: Relay) => item.serialize(writer));
+            if (this.deviceRelateRelayList.length)
+                writer.writeRepeatedMessage(4, this.deviceRelateRelayList, (item: DeviceRelateRelay) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -110,6 +130,9 @@ export namespace relayCabinetGraphicData {
                     case 3:
                         reader.readMessage(message.relays, () => pb_1.Message.addToRepeatedWrapperField(message, 3, Relay.deserialize(reader), Relay));
                         break;
+                    case 4:
+                        reader.readMessage(message.deviceRelateRelayList, () => pb_1.Message.addToRepeatedWrapperField(message, 4, DeviceRelateRelay.deserialize(reader), DeviceRelateRelay));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -220,6 +243,7 @@ export namespace relayCabinetGraphicData {
         constructor(data?: any[] | {
             common?: dependency_1.graphicData.CommonInfo;
             code?: string;
+            model?: string;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -230,6 +254,9 @@ export namespace relayCabinetGraphicData {
                 if ("code" in data && data.code != undefined) {
                     this.code = data.code;
                 }
+                if ("model" in data && data.model != undefined) {
+                    this.model = data.model;
+                }
             }
         }
         get common() {
@@ -247,9 +274,16 @@ export namespace relayCabinetGraphicData {
         set code(value: string) {
             pb_1.Message.setField(this, 2, value);
         }
+        get model() {
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        }
+        set model(value: string) {
+            pb_1.Message.setField(this, 3, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
             code?: string;
+            model?: string;
         }): Relay {
             const message = new Relay({});
             if (data.common != null) {
@@ -258,12 +292,16 @@ export namespace relayCabinetGraphicData {
             if (data.code != null) {
                 message.code = data.code;
             }
+            if (data.model != null) {
+                message.model = data.model;
+            }
             return message;
         }
         toObject() {
             const data: {
                 common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
                 code?: string;
+                model?: string;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -271,6 +309,9 @@ export namespace relayCabinetGraphicData {
             if (this.code != null) {
                 data.code = this.code;
             }
+            if (this.model != null) {
+                data.model = this.model;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -281,6 +322,8 @@ export namespace relayCabinetGraphicData {
                 writer.writeMessage(1, this.common, () => this.common.serialize(writer));
             if (this.code.length)
                 writer.writeString(2, this.code);
+            if (this.model.length)
+                writer.writeString(3, this.model);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -296,6 +339,9 @@ export namespace relayCabinetGraphicData {
                     case 2:
                         message.code = reader.readString();
                         break;
+                    case 3:
+                        message.model = reader.readString();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -308,4 +354,117 @@ export namespace relayCabinetGraphicData {
             return Relay.deserialize(bytes);
         }
     }
+    export class DeviceRelateRelay extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            type?: string;
+            code?: string;
+            refRelay?: string[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("type" in data && data.type != undefined) {
+                    this.type = data.type;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("refRelay" in data && data.refRelay != undefined) {
+                    this.refRelay = data.refRelay;
+                }
+            }
+        }
+        get type() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set type(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get refRelay() {
+            return pb_1.Message.getFieldWithDefault(this, 4, []) as string[];
+        }
+        set refRelay(value: string[]) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        static fromObject(data: {
+            type?: string;
+            code?: string;
+            refRelay?: string[];
+        }): DeviceRelateRelay {
+            const message = new DeviceRelateRelay({});
+            if (data.type != null) {
+                message.type = data.type;
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.refRelay != null) {
+                message.refRelay = data.refRelay;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                type?: string;
+                code?: string;
+                refRelay?: string[];
+            } = {};
+            if (this.type != null) {
+                data.type = this.type;
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.refRelay != null) {
+                data.refRelay = this.refRelay;
+            }
+            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.type.length)
+                writer.writeString(2, this.type);
+            if (this.code.length)
+                writer.writeString(3, this.code);
+            if (this.refRelay.length)
+                writer.writeRepeatedString(4, this.refRelay);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): DeviceRelateRelay {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new DeviceRelateRelay();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 2:
+                        message.type = reader.readString();
+                        break;
+                    case 3:
+                        message.code = reader.readString();
+                        break;
+                    case 4:
+                        pb_1.Message.addToRepeatedField(message, 4, reader.readString());
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): DeviceRelateRelay {
+            return DeviceRelateRelay.deserialize(bytes);
+        }
+    }
 }

src/stores/relayCabinet-store.ts

@@ -12,6 +12,7 @@ export const useRelayCabinetStore = defineStore('relayCabinet', {
     drawAssistant: null as DrawAssistant | null,
     selectedGraphics: null as JlGraphic[] | null,
     draftId: null as number | null,
+    showRelateRelayConfig: false,
   }),
   getters: {
     drawMode: (state) => state.drawAssistant != null,