批量生成继电器操作方式修改

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

@@ -0,0 +1,121 @@
+<template>
+  <draggable-dialog seamless title="批量生成" :width="180" :height="0">
+    <template v-slot:footer>
+      <q-form class="q-gutter-md q-pa-md">
+        <q-input
+          outlined
+          v-model.number="oneClickRelayCabinets"
+          label="生成继电器柜数量"
+          type="number"
+          lazy-rules
+        />
+        <q-btn
+          color="primary"
+          label="向左生成继电器柜"
+          @click="oneClickRelayCabinet(-1)"
+        />
+        <q-btn
+          color="primary"
+          label="向右生成继电器柜"
+          @click="oneClickRelayCabinet(1)"
+        />
+        <q-input
+          outlined
+          v-model.number="oneClickRelays"
+          label="生成继电器数量"
+          type="number"
+          lazy-rules
+        />
+        <q-btn color="primary" label="一键生成继电器" @click="oneClickRelay" />
+      </q-form>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { RelayCabinetData } from 'src/drawApp/relayCabinetGraphics/RelayCabinetInteraction';
+import { RelayData } from 'src/drawApp/relayCabinetGraphics/RelayInteraction';
+import { Relay } from 'src/graphics/relay/Relay';
+import {
+  RelayCabinet,
+  relayCabinetConsts,
+} from 'src/graphics/relayCabinet/RelayCabinet';
+import { containBoth } from 'src/graphics/relayCabinet/RelayCabinetDrawAssistant';
+import { GraphicIdGenerator } from 'src/jl-graphic';
+import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
+import { onMounted, reactive, ref, watch } from 'vue';
+
+const relayCabinetStore = useRelayCabinetStore();
+const relayCabinetModel = reactive(new RelayCabinetData());
+const oneClickRelayCabinets = ref(1);
+const oneClickRelays = ref(32);
+
+relayCabinetStore.$subscribe;
+watch(
+  () => relayCabinetStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == RelayCabinet.Type) {
+      relayCabinetModel.copyFrom(val.saveData() as RelayCabinetData);
+    }
+  }
+);
+
+onMounted(() => {
+  const RelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  if (RelayCabinet) {
+    relayCabinetModel.copyFrom(RelayCabinet.saveData());
+  }
+});
+
+function oneClickRelayCabinet(direction: number) {
+  let offsetX = 300;
+  if (direction == -1) {
+    offsetX = -300;
+  }
+  const relayCabinets: RelayCabinet[] = [];
+  for (let i = 0; i < oneClickRelayCabinets.value; i++) {
+    const selectRelayCabinet =
+      relayCabinetStore.selectedGraphic as RelayCabinet;
+    const relayCabinet = new RelayCabinet();
+    relayCabinet.loadData(new RelayCabinetData());
+    relayCabinet.id = GraphicIdGenerator.next();
+    relayCabinet.position.set(
+      selectRelayCabinet.x + offsetX * (i + 1),
+      selectRelayCabinet.y
+    );
+    relayCabinets.push(relayCabinet);
+  }
+  const app = relayCabinetStore.getDrawApp();
+  app.addGraphicAndRecord(...relayCabinets);
+}
+
+function oneClickRelay() {
+  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  const containRelays = relayCabinet.queryStore
+    .queryByType<Relay>(Relay.Type)
+    .filter((g) => containBoth(relayCabinet, g));
+  if (!containRelays.length) {
+    const numRows = 4;
+    const numCols = Math.ceil(oneClickRelays.value / numRows);
+    const remainder = oneClickRelays.value % numRows;
+    const relays: Relay[][] = new Array(numRows);
+    for (let i = 0; i < numRows; i++) {
+      relays[i] = new Array(numCols);
+      for (let j = 0; j < numCols; j++) {
+        if (j == numCols - 1 && remainder !== 0 && i >= remainder) break;
+        const relay = new Relay();
+        relay.loadData(new RelayData());
+        relay.id = GraphicIdGenerator.next();
+        relay.position.set(
+          relayCabinet.x - relayCabinetConsts.width / 2 + 30 + i * 47,
+          relayCabinet.y - relayCabinetConsts.height / 2 + 30 + j * 49
+        );
+        relays[i][j] = relay;
+      }
+    }
+    const app = relayCabinetStore.getDrawApp();
+    app.addGraphicAndRecord(...relays.flat());
+  }
+}
+</script>

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

@@ -8,43 +8,17 @@
       label="继电器柜"
       lazy-rules
     />
-    <q-input
-      outlined
-      v-model.number="oneClickRelayCabinets"
-      label="生成继电器柜数量"
-      type="number"
-      lazy-rules
-    />
-    <q-btn color="primary" label="向左生成" @click="oneClickRelayCabinet(-1)" />
-    <q-btn color="primary" label="向右生成" @click="oneClickRelayCabinet(1)" />
-    <q-input
-      outlined
-      v-model.number="oneClickRelays"
-      label="生成继电器数量"
-      type="number"
-      lazy-rules
-    />
-    <q-btn color="primary" label="一键生成继电器" @click="oneClickRelay" />
   </q-form>
 </template>
 
 <script setup lang="ts">
 import { RelayCabinetData } from 'src/drawApp/relayCabinetGraphics/RelayCabinetInteraction';
-import { RelayData } from 'src/drawApp/relayCabinetGraphics/RelayInteraction';
+import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
-import { Relay } from 'src/graphics/relay/Relay';
-import {
-  RelayCabinet,
-  relayCabinetConsts,
-} from 'src/graphics/relayCabinet/RelayCabinet';
-import { containBoth } from 'src/graphics/relayCabinet/RelayCabinetDrawAssistant';
-import { GraphicCreateOperation, GraphicIdGenerator } from 'src/jl-graphic';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive, watch } from 'vue';
 
 const relayCabinetStore = useRelayCabinetStore();
 const relayCabinetModel = reactive(new RelayCabinetData());
-const oneClickRelayCabinets = ref(1);
-const oneClickRelays = ref(32);
 
 relayCabinetStore.$subscribe;
 watch(
@@ -71,61 +45,4 @@ function onUpdate() {
       .updateGraphicAndRecord(RelayCabinet, relayCabinetModel);
   }
 }
-
-function oneClickRelayCabinet(direction: number) {
-  let offsetX = 300;
-  if (direction == -1) {
-    offsetX = -300;
-  }
-  const relayCabinets: RelayCabinet[] = [];
-  for (let i = 0; i < oneClickRelayCabinets.value; i++) {
-    const selectRelayCabinet =
-      relayCabinetStore.selectedGraphic as RelayCabinet;
-    const relayCabinet = new RelayCabinet();
-    relayCabinet.loadData(new RelayCabinetData());
-    relayCabinet.id = GraphicIdGenerator.next();
-    relayCabinet.position.set(
-      selectRelayCabinet.x + offsetX * (i + 1),
-      selectRelayCabinet.y
-    );
-    relayCabinets.push(relayCabinet);
-  }
-  const app = relayCabinetStore.getDrawApp();
-  app.addGraphics(...relayCabinets);
-  app.opRecord.record(
-    new GraphicCreateOperation(relayCabinetStore.getDrawApp(), relayCabinets)
-  );
-}
-
-function oneClickRelay() {
-  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
-  const containRelays = relayCabinet.queryStore
-    .queryByType<Relay>(Relay.Type)
-    .filter((g) => containBoth(relayCabinet, g));
-  if (!containRelays.length) {
-    const numRows = 4;
-    const numCols = Math.ceil(oneClickRelays.value / numRows);
-    const remainder = oneClickRelays.value % numRows;
-    const relays: Relay[][] = new Array(numRows);
-    for (let i = 0; i < numRows; i++) {
-      relays[i] = new Array(numCols);
-      for (let j = 0; j < numCols; j++) {
-        if (j == numCols - 1 && remainder !== 0 && i >= remainder) break;
-        const relay = new Relay();
-        relay.loadData(new RelayData());
-        relay.id = GraphicIdGenerator.next();
-        relay.position.set(
-          relayCabinet.x - relayCabinetConsts.width / 2 + 30 + i * 47,
-          relayCabinet.y - relayCabinetConsts.height / 2 + 30 + j * 49
-        );
-        relays[i][j] = relay;
-      }
-    }
-    const app = relayCabinetStore.getDrawApp();
-    app.addGraphics(...relays.flat());
-    app.opRecord.record(
-      new GraphicCreateOperation(relayCabinetStore.getDrawApp(), relays.flat())
-    );
-  }
-}
 </script>

src/layouts/RelayCabinetLayout.vue

@@ -18,6 +18,9 @@
                 <q-item clickable v-close-popup @click="buildRelations">
                   <q-item-section>一键关联</q-item-section>
                 </q-item>
+                <q-item clickable v-close-popup @click="batchBuild">
+                  <q-item-section>批量生成继电器或继电器柜</q-item-section>
+                </q-item>
               </q-list>
             </q-menu>
           </q-btn>
@@ -107,6 +110,7 @@
 
 <script setup lang="ts">
 import DrawRelayCabinetProperties from 'src/components/draw-app/DrawRelayCabinetProperties.vue';
+import BatchBuildRelayCabinetOrRelay from 'src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue';
 import {
   getDrawApp,
   saveDrawDatas,
@@ -120,7 +124,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { errorNotify, successNotify } from 'src/utils/CommonNotify';
 import { saveAsDraft } from 'src/api/DraftApi';
 import { ApiError } from 'src/boot/axios';
-import { useQuasar } from 'quasar';
+import { DialogChainObject, useQuasar } from 'quasar';
 import { Relay } from 'src/graphics/relay/Relay';
 import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
 
@@ -248,24 +252,6 @@ function onResize() {
     dom.style.height = canvasHeight.value + 'px';
   }
 }
-function saveAllDrawDatas() {
-  const drawApp = getDrawApp();
-  saveDrawToServer(drawApp as IDrawApp);
-}
-
-function handleCheckData() {
-  const drawApp = getDrawApp();
-  checkDataToServer(drawApp as IDrawApp);
-}
-
-function buildRelations() {
-  const app = getDrawApp();
-  app?.detectRelations();
-}
-
-function backConfirm() {
-  router.go(-1);
-}
 
 const saveAsDialog = ref(false);
 const saveAsName = ref('');
@@ -289,7 +275,40 @@ async function saveAs(name: string) {
   }
 }
 
+function saveAllDrawDatas() {
+  const drawApp = getDrawApp();
+  saveDrawToServer(drawApp as IDrawApp);
+}
+
+function handleCheckData() {
+  const drawApp = getDrawApp();
+  checkDataToServer(drawApp as IDrawApp);
+}
+
+function buildRelations() {
+  const app = getDrawApp();
+  app?.detectRelations();
+}
+
+let batchBuildDialogInstance: DialogChainObject | null = null;
+
+function batchBuild() {
+  if (batchBuildDialogInstance) return;
+  batchBuildDialogInstance = $q
+    .dialog({ component: BatchBuildRelayCabinetOrRelay })
+    .onCancel(() => {
+      batchBuildDialogInstance = null;
+    });
+}
+
+function backConfirm() {
+  router.go(-1);
+}
+
 onUnmounted(() => {
   relayCabinetStore.destroy();
+  if (batchBuildDialogInstance) {
+    batchBuildDialogInstance.hide();
+  }
 });
 </script>