关联继电器增加组合类型

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

@@ -54,7 +54,6 @@ import {
   RelateRelaylistItem,
 } from 'src/drawApp/relayCabinetLayoutApp';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { Relay } from 'src/graphics/relay/Relay';
 
 const relayCabinetStore = useRelayCabinetStore();
 const $q = useQuasar();
@@ -72,17 +71,13 @@ const columns: QTable['columns'] = [
   },
   { name: 'code', label: '设备编号', field: 'code', align: 'center' },
   {
-    name: 'refRelay',
+    name: 'combinationtypes',
-    label: '关联的继电器',
+    label: '关联的组合类型',
-    field: (row) => {
+    field: (row: RelateRelaylistItem) => {
-      if (row.refRelay) {
+      if (row.combinationtypes) {
-        const ref: string[] = [];
+        const ref = row.combinationtypes.map(
-        row.refRelay.forEach((id: string) => {
+          (combinationtype) => combinationtype.code
-          const g = useRelayCabinetStore()
+        );
-            .getDrawApp()
-            .queryStore.queryById(id);
-          ref.push((g as Relay).datas.code);
-        });
         return ref.join('\\');
       }
     },

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

@@ -22,32 +22,56 @@
           :rules="[(val) => val.trim() != '' || '名称不能为空']"
         />
         <q-list bordered separator class="rounded-borders">
-          <q-item>
+          <q-expansion-item
-            <q-item-section no-wrap class="q-gutter-y-sm column">
+            expand-separator
-              <q-item-label> 关联的继电器 </q-item-label>
+            v-for="(
-              <div class="q-gutter-sm row">
+              combinationtype, index
-                <q-chip
+            ) in relateRelayConfig.combinationtypes"
-                  v-for="item in device"
+            :key="combinationtype"
-                  :key="item"
+            v-model="combinationtype.expanded"
-                  square
+            :label="combinationtype.code"
-                  color="primary"
+            @click="toggleItem(index)"
-                  text-color="white"
+          >
-                  removable
+            <q-card>
-                  @remove="removeSelect(item)"
+              <q-item>
-                >
+                <q-item-section no-wrap class="q-gutter-y-sm column">
-                  {{ item }}
+                  <q-input
-                </q-chip>
+                    outlined
-              </div>
+                    v-model="combinationtype.code"
-              <q-btn
+                    label="组合类型"
-                v-show="device.length > 0"
+                    lazy-rules
-                style="width: 130px"
+                  />
-                label="清空框选的继电器"
+                  <div class="q-gutter-sm row">
-                color="red"
+                    <q-chip
-                @click="clearSelect"
+                      v-for="item in combinationtype.refRelaysCode"
-              />
+                      :key="item"
-            </q-item-section>
+                      square
-          </q-item>
+                      color="primary"
+                      text-color="white"
+                      removable
+                      @remove="removeSelect(item)"
+                    >
+                      {{ item }}
+                    </q-chip>
+                  </div>
+                  <q-btn
+                    v-show="combinationtype.refRelaysCode.length > 0"
+                    style="width: 130px"
+                    label="清空框选的继电器"
+                    color="red"
+                    @click="clearAllSelect(index)"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-card>
+          </q-expansion-item>
         </q-list>
+        <q-btn
+          class="q-mt-md"
+          label="增加组合类型"
+          color="secondary"
+          @click="addCombinationtype"
+        />
         <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" />
@@ -59,7 +83,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { QForm, useQuasar } from 'quasar';
 import { JlGraphic } from 'src/jl-graphic';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
@@ -78,16 +102,22 @@ defineExpose({ editRelateRelays });
 const relayCabinetStore = useRelayCabinetStore();
 const $q = useQuasar();
 const showRangeConfig = ref(true);
-const relateRelayConfig = reactive<{
+const relateRelayConfig = ref<{
   type: string;
   code: string;
-  refRelay: string[];
+  combinationtypes: {
+    code: string;
+    refRelays: string[];
+    refRelaysCode: string[];
+    expanded: boolean;
+  }[];
 }>({
   type: '',
   code: '',
-  refRelay: [],
+  combinationtypes: [
+    { code: '组合类型', refRelays: [], refRelaysCode: [], expanded: false },
+  ],
 });
-const device = ref<string[]>([]);
 const handleState = ref('新建设备关联继电器');
 
 const optionsType = [
@@ -99,17 +129,17 @@ let selectGraphic: JlGraphic[] = [];
 watch(
   () => relayCabinetStore.selectedGraphics,
   (val) => {
-    if (val && val.length > 0) {
+    if (val && val.length > 0 && clickIndex !== null) {
       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(
+      relateRelayConfig.value.combinationtypes[clickIndex].refRelaysCode =
-        (g) => (g as Relay).datas.code
+        selectGraphic.map((g) => (g as Relay).datas.code) as string[];
-      ) as string[];
+      relateRelayConfig.value.combinationtypes[clickIndex].refRelays =
-      relateRelayConfig.refRelay = selectGraphic.map((g) => g.id) as string[];
+        selectGraphic.map((g) => g.id) as string[];
     }
   }
 );
@@ -126,11 +156,20 @@ async function onSubmit() {
   myForm.value?.validate().then(async (res) => {
     if (res) {
       try {
+        const combinationtypes: relayCabinetGraphicData.Combinationtype[] = [];
+        relateRelayConfig.value.combinationtypes.forEach((combinationtype) => {
+          combinationtypes.push(
+            new relayCabinetGraphicData.Combinationtype({
+              code: combinationtype.code,
+              refRelays: combinationtype.refRelays,
+            })
+          );
+        });
         const deviceRelateRelay = new relayCabinetGraphicData.DeviceRelateRelay(
           {
-            type: relateRelayConfig.type,
+            type: relateRelayConfig.value.type,
-            code: relateRelayConfig.code,
+            code: relateRelayConfig.value.code,
-            refRelay: [...relateRelayConfig.refRelay],
+            combinationtypes: combinationtypes,
           }
         );
         if (handleState.value == '新建设备关联继电器') {
@@ -162,23 +201,30 @@ async function onSubmit() {
     }
   });
 }
-
 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) => {
+    handleState.value = '编辑设备关联继电器';
-      const g = drawApp.queryStore.queryById(id);
+    selectGraphic = [];
-      select.push(g);
+    drawApp.updateSelected();
-      device.value.push(g.code);
+    editRow = row;
+    relateRelayConfig.value.type = row.type;
+    relateRelayConfig.value.code = row.code;
+    row.combinationtypes.forEach((combinationtype) => {
+      const refCode: string[] = [];
+      combinationtype.refRelays.forEach((id) => {
+        const g = drawApp.queryStore.queryById(id);
+        refCode.push(g.code);
+      });
+      combinationtype.refRelaysCode = refCode;
+      combinationtype.expanded = false;
     });
-    drawApp.updateSelected(...select);
+    relateRelayConfig.value.combinationtypes = row.combinationtypes as {
+      code: string;
+      refRelays: string[];
+      refRelaysCode: string[];
+      expanded: boolean;
+    }[];
   } catch (err) {
     $q.notify({
       type: 'negative',
@@ -187,30 +233,70 @@ async function editRelateRelays(row: RelateRelaylistItem) {
   }
 }
 
-function goBack() {
+let clickIndex: null | number = null;
-  clearSelect();
+function toggleItem(index: number) {
-  relayCabinetStore.showRelateRelayConfig = false;
+  const drawApp = relayCabinetStore.getDrawApp();
+  selectGraphic = [];
+  drawApp.updateSelected();
+  const combinationtypes = relateRelayConfig.value.combinationtypes;
+  if (combinationtypes[index].expanded == true) {
+    clickIndex = index;
+    const select: JlGraphic[] = [];
+    combinationtypes[index].refRelays.forEach((id: string) => {
+      const g = drawApp.queryStore.queryById(id);
+      select.push(g);
+    });
+    drawApp.updateSelected(...select);
+  } else {
+    clickIndex = null;
+  }
 }
 
 function removeSelect(code: string) {
-  const removeIndex = device.value.findIndex((item) => item == code);
+  const clickTarget =
+    relateRelayConfig.value.combinationtypes[clickIndex as number];
+  const removeIndex = clickTarget.refRelaysCode.findIndex(
+    (item) => item == code
+  );
   selectGraphic.splice(removeIndex, 1);
-  device.value.splice(removeIndex, 1);
+  clickTarget.refRelaysCode.splice(removeIndex, 1);
-  relateRelayConfig.refRelay.splice(removeIndex, 1);
+  clickTarget.refRelays.splice(removeIndex, 1);
   relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
+  relayCabinetStore.getDrawApp()?.emit('postdataloaded');
 }
 
-function clearSelect() {
+function clearAllSelect(index: number) {
-  device.value = [];
+  relateRelayConfig.value.combinationtypes[index].refRelays = [];
+  relateRelayConfig.value.combinationtypes[index].refRelaysCode = [];
   selectGraphic = [];
   relayCabinetStore.getDrawApp().updateSelected();
 }
 
+function addCombinationtype() {
+  relateRelayConfig.value.combinationtypes.push({
+    code: '组合类型',
+    refRelays: [],
+    refRelaysCode: [],
+    expanded: false,
+  });
+}
+
 function onReset() {
+  clickIndex = null;
   handleState.value = '新建设备关联继电器';
-  relateRelayConfig.type = '';
+  relateRelayConfig.value = {
-  relateRelayConfig.code = '';
+    type: '',
-  relateRelayConfig.refRelay = [];
+    code: '',
-  clearSelect();
+    combinationtypes: [
+      { code: '组合类型', refRelays: [], refRelaysCode: [], expanded: false },
+    ],
+  };
+  selectGraphic = [];
+  relayCabinetStore.getDrawApp().updateSelected();
+}
+
+function goBack() {
+  onReset();
+  relayCabinetStore.showRelateRelayConfig = false;
 }
 </script>

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

@@ -4,7 +4,8 @@
     <q-input
       outlined
       v-model="relayCabinetModel.code"
-      @blur="onUpdate"
+      :emit-value="true"
+      @update:model-value="onUpdate"
       label="编号"
       lazy-rules
     />

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

@@ -5,14 +5,18 @@
       outlined
       v-model="relayModel.code"
       @blur="onUpdate"
+      :emit-value="true"
+      @update:model-value="onUpdate"
       label="编号"
       lazy-rules
     />
     <q-select
       outlined
-      @blur="onUpdate"
       v-model="relayModel.model"
       :options="optionsModel"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
       label="型号"
     />
   </q-form>

src/drawApp/relayCabinetLayoutApp.ts

@@ -102,8 +102,10 @@ export function initDrawApp(): IDrawApp {
   app.on('postdataloaded', async () => {
     const map = new Map<string, string>();
     refRelaysList.forEach((device) => {
-      device.refRelay.forEach((relayId) => {
+      device.combinationtypes.forEach((combinationtype) => {
-        map.set(relayId, device.code);
+        combinationtype.refRelays.forEach((relayId) => {
+          map.set(relayId, device.code);
+        });
       });
     });
     const relays = app.queryStore.queryByType<Relay>(Relay.Type);
@@ -111,6 +113,9 @@ export function initDrawApp(): IDrawApp {
       relay.refDevice.text = map.get(relay.id) as string;
     });
   });
+  app.on('destroy', async () => {
+    refRelaysList = [];
+  });
   return drawApp;
 }
 
@@ -221,11 +226,16 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
 export interface RelateRelaylistItem {
   type: string;
   code: string;
-  refRelay: string[];
+  combinationtypes: {
+    code: string;
+    refRelays: string[];
+    refRelaysCode?: string[];
+    expanded?: boolean;
+  }[];
 }
 
 //关联继电器列表的增删改查
-const refRelaysList: relayCabinetGraphicData.DeviceRelateRelay[] = [];
+let refRelaysList: relayCabinetGraphicData.DeviceRelateRelay[] = [];
 export function loadDeviceRelateRelayList() {
   return refRelaysList;
 }

src/protos/relayCabinetLayoutGraphics.ts

@@ -382,10 +382,10 @@ export namespace relayCabinetGraphicData {
         constructor(data?: any[] | {
             type?: string;
             code?: string;
-            refRelay?: string[];
+            combinationtypes?: Combinationtype[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [5], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("type" in data && data.type != undefined) {
                     this.type = data.type;
@@ -393,8 +393,8 @@ export namespace relayCabinetGraphicData {
                 if ("code" in data && data.code != undefined) {
                     this.code = data.code;
                 }
-                if ("refRelay" in data && data.refRelay != undefined) {
+                if ("combinationtypes" in data && data.combinationtypes != undefined) {
-                    this.refRelay = data.refRelay;
+                    this.combinationtypes = data.combinationtypes;
                 }
             }
         }
@@ -410,16 +410,16 @@ export namespace relayCabinetGraphicData {
         set code(value: string) {
             pb_1.Message.setField(this, 3, value);
         }
-        get refRelay() {
+        get combinationtypes() {
-            return pb_1.Message.getFieldWithDefault(this, 4, []) as string[];
+            return pb_1.Message.getRepeatedWrapperField(this, Combinationtype, 5) as Combinationtype[];
         }
-        set refRelay(value: string[]) {
+        set combinationtypes(value: Combinationtype[]) {
-            pb_1.Message.setField(this, 4, value);
+            pb_1.Message.setRepeatedWrapperField(this, 5, value);
         }
         static fromObject(data: {
             type?: string;
             code?: string;
-            refRelay?: string[];
+            combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
         }): DeviceRelateRelay {
             const message = new DeviceRelateRelay({});
             if (data.type != null) {
@@ -428,8 +428,8 @@ export namespace relayCabinetGraphicData {
             if (data.code != null) {
                 message.code = data.code;
             }
-            if (data.refRelay != null) {
+            if (data.combinationtypes != null) {
-                message.refRelay = data.refRelay;
+                message.combinationtypes = data.combinationtypes.map(item => Combinationtype.fromObject(item));
             }
             return message;
         }
@@ -437,7 +437,7 @@ export namespace relayCabinetGraphicData {
             const data: {
                 type?: string;
                 code?: string;
-                refRelay?: string[];
+                combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
             } = {};
             if (this.type != null) {
                 data.type = this.type;
@@ -445,8 +445,8 @@ export namespace relayCabinetGraphicData {
             if (this.code != null) {
                 data.code = this.code;
             }
-            if (this.refRelay != null) {
+            if (this.combinationtypes != null) {
-                data.refRelay = this.refRelay;
+                data.combinationtypes = this.combinationtypes.map((item: Combinationtype) => item.toObject());
             }
             return data;
         }
@@ -458,8 +458,8 @@ export namespace relayCabinetGraphicData {
                 writer.writeString(2, this.type);
             if (this.code.length)
                 writer.writeString(3, this.code);
-            if (this.refRelay.length)
+            if (this.combinationtypes.length)
-                writer.writeRepeatedString(4, this.refRelay);
+                writer.writeRepeatedMessage(5, this.combinationtypes, (item: Combinationtype) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -475,8 +475,8 @@ export namespace relayCabinetGraphicData {
                     case 3:
                         message.code = reader.readString();
                         break;
-                    case 4:
+                    case 5:
-                        pb_1.Message.addToRepeatedField(message, 4, reader.readString());
+                        reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 5, Combinationtype.deserialize(reader), Combinationtype));
                         break;
                     default: reader.skipField();
                 }
@@ -490,4 +490,94 @@ export namespace relayCabinetGraphicData {
             return DeviceRelateRelay.deserialize(bytes);
         }
     }
+    export class Combinationtype extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            code?: string;
+            refRelays?: 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 ("refRelays" in data && data.refRelays != undefined) {
+                    this.refRelays = data.refRelays;
+                }
+            }
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get refRelays() {
+            return pb_1.Message.getFieldWithDefault(this, 2, []) as string[];
+        }
+        set refRelays(value: string[]) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            code?: string;
+            refRelays?: string[];
+        }): Combinationtype {
+            const message = new Combinationtype({});
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.refRelays != null) {
+                message.refRelays = data.refRelays;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                code?: string;
+                refRelays?: string[];
+            } = {};
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.refRelays != null) {
+                data.refRelays = this.refRelays;
+            }
+            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.refRelays.length)
+                writer.writeRepeatedString(2, this.refRelays);
+            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);
+        }
+    }
 }