From 9ec7f73ff20608b117e1231ce6693683a9a7cde2 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Thu, 26 Oct 2023 17:43:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A9=B1=E9=87=87=E5=88=97=E8=A1=A8=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/draw-app/dialogs/CiCjList.vue  | 72 ++++++++++++---
 src/components/draw-app/dialogs/CiQdList.vue  | 68 +++++++++++---
 .../draw-app/properties/CiCjConfig.vue        | 92 +++++++++++--------
 .../draw-app/properties/CiQdConfig.vue        | 28 +-----
 src/drawApp/relayCabinetLayoutApp.ts          | 19 +++-
 5 files changed, 184 insertions(+), 95 deletions(-)

diff --git a/src/components/draw-app/dialogs/CiCjList.vue b/src/components/draw-app/dialogs/CiCjList.vue
index 15ad5ad..4662c2a 100644
--- a/src/components/draw-app/dialogs/CiCjList.vue
+++ b/src/components/draw-app/dialogs/CiCjList.vue
@@ -1,18 +1,27 @@
 <template>
-  <draggable-dialog seamless title="采集列表" :width="600" :height="485">
-    <div class="row" v-for="row in setCellMessage.rows" :key="row">
+  <draggable-dialog seamless title="采集列表" :width="865" :height="485">
+    <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
       <div
         class="ceil"
         :class="{
           heightLight:
             !setCellDialog &&
-            ciCjList?.cjList[col - 1].bitList[row - 1].refRelays.length,
+            row > 1 &&
+            col > 1 &&
+            ciCjList?.cjList[col - 2].bitList[row - 2].refRelays.length,
+          changeCellSize: col == 1,
         }"
-        v-for="col in setCellMessage.cols"
+        v-for="col in showSetCellMessage.cols"
         :key="col"
         @click="handleCellClick(row, col)"
       >
-        {{ row + '-' + col }}
+        <span v-if="row == 1 && col == 1"> 位置</span>
+        <span v-else-if="row == 1 || col == 1">
+          {{ row == 1 ? col - 1 : row - 1 }}</span
+        >
+        <span v-else>
+          {{ map.get(`${row - 1}-${col - 1}`) }}
+        </span>
       </div>
     </div>
     <template v-slot:titleButton>
@@ -62,11 +71,16 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { loadCiCjList, creatCiCjList } from 'src/drawApp/relayCabinetLayoutApp';
+import {
+  loadCiCjList,
+  creatCiCjList,
+  refRelaysListMap,
+} from 'src/drawApp/relayCabinetLayoutApp';
 import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
+import { Relay } from 'src/graphics/relay/Relay';
 
 const relayCabinetStore = useRelayCabinetStore();
 const setCellDialog = ref(false);
@@ -74,7 +88,15 @@ const setCellMessage = ref<{ rows: number; cols: number }>({
   rows: 32,
   cols: 8,
 });
+const showSetCellMessage = computed(() => {
+  return {
+    rows: setCellMessage.value.rows + 1,
+    cols: setCellMessage.value.cols + 1,
+  };
+});
+
 let ciCjList: relayCabinetGraphicData.CiCj | undefined;
+const map = new Map<string, string>();
 
 watch(
   () => relayCabinetStore.updateCiCjList,
@@ -83,6 +105,7 @@ watch(
       relayCabinetStore.updateCiCjList = false;
       setCellDialog.value = true;
       setCellDialog.value = false;
+      updateMap();
     }
   }
 );
@@ -96,12 +119,14 @@ onMounted(() => {
     setCellMessage.value.rows = ciCjList.dsCount;
     setCellMessage.value.cols = ciCjList.cjList.length;
   }
+  updateMap();
 });
 
 function handleCellClick(row: number, col: number) {
+  if (row == 1 || col == 1) return;
   relayCabinetStore.showCiQdConfig = false;
   relayCabinetStore.showCiCjConfig = true;
-  relayCabinetStore.setEditCiCjConfig({ row, col });
+  relayCabinetStore.setEditCiCjConfig({ row: row - 1, col: col - 1 });
 }
 
 function setCellListConfig() {
@@ -119,22 +144,43 @@ function cancelSetCellListConfig() {
     ciCjList as relayCabinetGraphicData.CiCj
   ).cjList.length;
 }
+
+function updateMap() {
+  ciCjList?.cjList.forEach((cjDataSet, i) => {
+    cjDataSet.bitList.forEach((cjData, j) => {
+      const ref = cjData.refRelays.map((refRelay) => {
+        const conbinationData = refRelaysListMap.get(refRelay.relayId);
+        const relay = relayCabinetStore
+          .getDrawApp()
+          .queryStore.queryById<Relay>(refRelay.relayId);
+        const pos =
+          refRelay.position == relayCabinetGraphicData.CjDataItem.PostionType.Q
+            ? 'Q'
+            : 'H';
+        return `${conbinationData?.device}_${conbinationData?.combinationtype}_${relay.datas.code}_${pos}`;
+      });
+      map.set(`${j + 1}-${i + 1}`, ref.join('\\'));
+    });
+  });
+}
 </script>
 
 <style scoped>
-.row {
-  display: flex;
-}
 .ceil {
-  width: 60px;
+  width: 120px;
   height: 30px;
   border: solid 1px red;
   margin: 7px;
   cursor: pointer;
   text-align: center;
   line-height: 30px;
+  word-break: break-all;
+  overflow: hidden;
+}
+.changeCellSize {
+  width: 40px;
 }
 .heightLight {
-  background-color: red;
+  background-color: orange;
 }
 </style>
diff --git a/src/components/draw-app/dialogs/CiQdList.vue b/src/components/draw-app/dialogs/CiQdList.vue
index 4eb3c9c..de62423 100644
--- a/src/components/draw-app/dialogs/CiQdList.vue
+++ b/src/components/draw-app/dialogs/CiQdList.vue
@@ -1,18 +1,27 @@
 <template>
-  <draggable-dialog seamless title="驱动列表" :width="600" :height="485">
-    <div class="row" v-for="row in setCellMessage.rows" :key="row">
+  <draggable-dialog seamless title="驱动列表" :width="865" :height="485">
+    <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
       <div
         class="ceil"
         :class="{
           heightLight:
             !setCellDialog &&
-            ciQdList?.qdList[col - 1].bitList[row - 1].refRelays.length,
+            row > 1 &&
+            col > 1 &&
+            ciQdList?.qdList[col - 2].bitList[row - 2].refRelays.length,
+          changeCellSize: col == 1,
         }"
-        v-for="col in setCellMessage.cols"
+        v-for="col in showSetCellMessage.cols"
         :key="col"
         @click="handleCellClick(row, col)"
       >
-        {{ row + '-' + col }}
+        <span v-if="row == 1 && col == 1"> 位置</span>
+        <span v-else-if="row == 1 || col == 1">
+          {{ row == 1 ? col - 1 : row - 1 }}</span
+        >
+        <span v-else>
+          {{ map.get(`${row - 1}-${col - 1}`) }}
+        </span>
       </div>
     </div>
     <template v-slot:titleButton>
@@ -62,11 +71,16 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { loadCiQdList, creatCiQdList } from 'src/drawApp/relayCabinetLayoutApp';
+import {
+  loadCiQdList,
+  creatCiQdList,
+  refRelaysListMap,
+} from 'src/drawApp/relayCabinetLayoutApp';
 import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
+import { Relay } from 'src/graphics/relay/Relay';
 
 const relayCabinetStore = useRelayCabinetStore();
 const setCellDialog = ref(false);
@@ -74,7 +88,15 @@ const setCellMessage = ref<{ rows: number; cols: number }>({
   rows: 32,
   cols: 4,
 });
+const showSetCellMessage = computed(() => {
+  return {
+    rows: setCellMessage.value.rows + 1,
+    cols: setCellMessage.value.cols + 1,
+  };
+});
+
 let ciQdList: relayCabinetGraphicData.CiQd | undefined;
+const map = new Map<string, string>();
 
 watch(
   () => relayCabinetStore.updateCiCjList,
@@ -83,6 +105,7 @@ watch(
       relayCabinetStore.updateCiCjList = false;
       setCellDialog.value = true;
       setCellDialog.value = false;
+      updateMap();
     }
   }
 );
@@ -96,12 +119,14 @@ onMounted(() => {
     setCellMessage.value.rows = ciQdList.dsCount;
     setCellMessage.value.cols = ciQdList.qdList.length;
   }
+  updateMap();
 });
 
 function handleCellClick(row: number, col: number) {
+  if (row == 1 || col == 1) return;
   relayCabinetStore.showCiCjConfig = false;
   relayCabinetStore.showCiQdConfig = true;
-  relayCabinetStore.setEditCiCjConfig({ row, col });
+  relayCabinetStore.setEditCiCjConfig({ row: row - 1, col: col - 1 });
 }
 
 function setCellListConfig() {
@@ -119,22 +144,39 @@ function cancelSetCellListConfig() {
     ciQdList as relayCabinetGraphicData.CiQd
   ).qdList.length;
 }
+
+function updateMap() {
+  ciQdList?.qdList.forEach((cjDataSet, i) => {
+    cjDataSet.bitList.forEach((cjData, j) => {
+      const ref = cjData.refRelays.map((refRelay) => {
+        const conbinationData = refRelaysListMap.get(refRelay);
+        const relay = relayCabinetStore
+          .getDrawApp()
+          .queryStore.queryById<Relay>(refRelay);
+        return `${conbinationData?.device}_${conbinationData?.combinationtype}_${relay.datas.code}`;
+      });
+      map.set(`${j + 1}-${i + 1}`, ref.join('\\'));
+    });
+  });
+}
 </script>
 
 <style scoped>
-.row {
-  display: flex;
-}
 .ceil {
-  width: 60px;
+  width: 120px;
   height: 30px;
   border: solid 1px red;
   margin: 7px;
   cursor: pointer;
   text-align: center;
   line-height: 30px;
+  word-break: break-all;
+  overflow: hidden;
+}
+.changeCellSize {
+  width: 40px;
 }
 .heightLight {
-  background-color: red;
+  background-color: orange;
 }
 </style>
diff --git a/src/components/draw-app/properties/CiCjConfig.vue b/src/components/draw-app/properties/CiCjConfig.vue
index 17a35c9..a3e680c 100644
--- a/src/components/draw-app/properties/CiCjConfig.vue
+++ b/src/components/draw-app/properties/CiCjConfig.vue
@@ -19,18 +19,27 @@
               <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">
+                  <div
+                    v-for="(item, index) in collectionConfig.refRelaysCode"
+                    :key="item"
+                  >
                     <q-chip
-                      v-for="item in collectionConfig.refRelaysCode"
-                      :key="item"
                       square
                       color="primary"
                       text-color="white"
                       removable
-                      @remove="removeSelect(item)"
+                      @remove="removeSelect(index)"
                     >
-                      {{ item }}
+                      {{ item.code }}
                     </q-chip>
+                    <q-select
+                      outlined
+                      v-model="item.pos"
+                      :options="positionOptions"
+                      :map-options="true"
+                      :emit-value="true"
+                      label="位置"
+                    ></q-select>
                   </div>
                 </q-item-section>
               </q-item>
@@ -75,12 +84,16 @@ const showCollectionConfig = ref(true);
 const collectionConfig = ref<{
   code: string;
   refRelays: string[];
-  refRelaysCode: string[];
+  refRelaysCode: { code: string; pos: number }[];
 }>({
   code: '',
   refRelays: [],
   refRelaysCode: [],
 });
+const positionOptions = [
+  { label: 'Q', value: 0 },
+  { label: 'H', value: 1 },
+];
 
 //监听框选
 let selectGraphic: JlGraphic[] = [];
@@ -94,9 +107,14 @@ watch(
       selectGraphic.push(...selectFilter);
       selectGraphic = Array.from(new Set(selectGraphic));
       relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
-      collectionConfig.value.refRelaysCode = selectGraphic.map(
-        (g) => (g as Relay).datas.code
-      ) as string[];
+      collectionConfig.value.refRelaysCode = selectGraphic.map((g) => {
+        const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+        const hasChoose = map
+          .get(`${click.row}-${click.col}`)
+          ?.find((cjDataItem) => cjDataItem.relayId == g.id);
+        const pos = hasChoose?.position || 0;
+        return { code: (g as Relay).datas.code, pos };
+      });
       collectionConfig.value.refRelays = selectGraphic.map(
         (g) => g.id
       ) as string[];
@@ -105,6 +123,7 @@ watch(
 );
 
 //监听编辑
+const map = new Map<string, relayCabinetGraphicData.CjDataItem[]>();
 watch(
   () => relayCabinetStore.editCiCjConfigIndex,
   (val) => {
@@ -124,21 +143,31 @@ function getEditData() {
   const app = relayCabinetStore.getDrawApp();
   app.updateSelected();
   collectionConfig.value.refRelays = [];
+  collectionConfig.value.refRelaysCode = [];
+  const select: JlGraphic[] = [];
   const ciCjList = loadCiCjList();
   const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
   ciCjList.cjList[click.col - 1].bitList[click.row - 1].refRelays.forEach(
     (relay) => {
       collectionConfig.value.refRelays.push(relay.relayId);
+      const g = app.queryStore.queryById(relay.relayId) as Relay;
+      select.push(g);
+      collectionConfig.value.refRelaysCode.push({
+        code: g.datas.code,
+        pos: relay.position,
+      });
     }
   );
-  collectionConfig.value.refRelaysCode = [];
-  const select: JlGraphic[] = [];
-  collectionConfig.value.refRelays.forEach((id) => {
-    const g = app.queryStore.queryById(id) as Relay;
-    select.push(g);
-    collectionConfig.value.refRelaysCode.push(g.datas.code);
-  });
   app.updateSelected(...select);
+  updateMap(ciCjList);
+}
+
+function updateMap(ciCjList: relayCabinetGraphicData.CiCj) {
+  ciCjList.cjList.forEach((cjDataSet, i) => {
+    cjDataSet.bitList.forEach((cjData, j) => {
+      map.set(`${j + 1}-${i + 1}`, cjData.refRelays);
+    });
+  });
 }
 
 const myForm = ref<QForm | null>(null);
@@ -147,28 +176,14 @@ async function onSubmit() {
     if (res) {
       try {
         const ciCjList = loadCiCjList();
-        const map = new Map<string, string>();
-        ciCjList.cjList.forEach((cjDataSet, i) => {
-          cjDataSet.bitList.forEach((cjData, j) => {
-            cjData.refRelays.forEach((refRelay) => {
-              map.set(refRelay.relayId, `${j + 1}-${i + 1}`);
-            });
-          });
-        });
-        collectionConfig.value.refRelays.forEach((refRelayId) => {
-          const hasSet = map.get(refRelayId);
-          if (hasSet) {
-            const refRelayCode = relayCabinetStore
-              .getDrawApp()
-              .queryStore.queryById<Relay>(refRelayId).datas.code;
-            throw `在采集列表${hasSet}中已经选择了编号为${refRelayCode}的继电器`;
-          }
-        });
         const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
         ciCjList.cjList[click.col - 1].bitList[click.row - 1].refRelays = [];
-        collectionConfig.value.refRelays.forEach((relayId) => {
+        collectionConfig.value.refRelays.forEach((relayId, index) => {
           ciCjList.cjList[click.col - 1].bitList[click.row - 1].refRelays.push(
-            new relayCabinetGraphicData.CjDataItem({ relayId, position: 0 })
+            new relayCabinetGraphicData.CjDataItem({
+              relayId,
+              position: collectionConfig.value.refRelaysCode[index].pos,
+            })
           );
         });
         relayCabinetStore.updateCiCjList = true;
@@ -180,7 +195,7 @@ async function onSubmit() {
       } catch (err) {
         $q.notify({
           type: 'negative',
-          message: err as string,
+          message: '更新失败',
         });
       } finally {
         setTimeout(() => {
@@ -191,10 +206,7 @@ async function onSubmit() {
   });
 }
 
-function removeSelect(code: string) {
-  const removeIndex = collectionConfig.value.refRelaysCode.findIndex(
-    (item) => item == code
-  );
+function removeSelect(removeIndex: number) {
   selectGraphic.splice(removeIndex, 1);
   collectionConfig.value.refRelaysCode.splice(removeIndex, 1);
   collectionConfig.value.refRelays.splice(removeIndex, 1);
diff --git a/src/components/draw-app/properties/CiQdConfig.vue b/src/components/draw-app/properties/CiQdConfig.vue
index 403895a..aad0482 100644
--- a/src/components/draw-app/properties/CiQdConfig.vue
+++ b/src/components/draw-app/properties/CiQdConfig.vue
@@ -21,13 +21,13 @@
                   <q-item-label> 驱动的继电器 </q-item-label>
                   <div class="q-gutter-sm row">
                     <q-chip
-                      v-for="item in collectionConfig.refRelaysCode"
+                      v-for="(item, index) in collectionConfig.refRelaysCode"
                       :key="item"
                       square
                       color="primary"
                       text-color="white"
                       removable
-                      @remove="removeSelect(item)"
+                      @remove="removeSelect(index)"
                     >
                       {{ item }}
                     </q-chip>
@@ -142,23 +142,6 @@ async function onSubmit() {
     if (res) {
       try {
         const ciQdList = loadCiQdList();
-        const map = new Map<string, string>();
-        ciQdList.qdList.forEach((qdDataSet, i) => {
-          qdDataSet.bitList.forEach((qdData, j) => {
-            qdData.refRelays.forEach((refRelay) => {
-              map.set(refRelay, `${j + 1}-${i + 1}`);
-            });
-          });
-        });
-        collectionConfig.value.refRelays.forEach((refRelayId) => {
-          const hasSet = map.get(refRelayId);
-          if (hasSet) {
-            const refRelayCode = relayCabinetStore
-              .getDrawApp()
-              .queryStore.queryById<Relay>(refRelayId).datas.code;
-            throw `在驱动列表${hasSet}中已经选择了编号为${refRelayCode}的继电器`;
-          }
-        });
         const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
         ciQdList.qdList[click.col - 1].bitList[click.row - 1].refRelays =
           collectionConfig.value.refRelays;
@@ -171,7 +154,7 @@ async function onSubmit() {
       } catch (err) {
         $q.notify({
           type: 'negative',
-          message: err as string,
+          message: '更新失败',
         });
       } finally {
         setTimeout(() => {
@@ -182,10 +165,7 @@ async function onSubmit() {
   });
 }
 
-function removeSelect(code: string) {
-  const removeIndex = collectionConfig.value.refRelaysCode.findIndex(
-    (item) => item == code
-  );
+function removeSelect(removeIndex: number) {
   selectGraphic.splice(removeIndex, 1);
   collectionConfig.value.refRelaysCode.splice(removeIndex, 1);
   collectionConfig.value.refRelays.splice(removeIndex, 1);
diff --git a/src/drawApp/relayCabinetLayoutApp.ts b/src/drawApp/relayCabinetLayoutApp.ts
index ee00c21..91bedd6 100644
--- a/src/drawApp/relayCabinetLayoutApp.ts
+++ b/src/drawApp/relayCabinetLayoutApp.ts
@@ -75,6 +75,10 @@ export function destroyDrawApp(): void {
   }
 }
 
+export const refRelaysListMap = new Map<
+  string,
+  { combinationtype: string; device: string }
+>();
 export function initDrawApp(): IDrawApp {
   drawApp = newDrawApp({
     dataLoader: loadDrawDatas,
@@ -120,31 +124,36 @@ export function initDrawApp(): IDrawApp {
     })
   );
   app.on('postdataloaded', () => {
-    const map = new Map<string, string>();
     refRelaysList.forEach((device) => {
       device.combinationtypes.forEach((combinationtype) => {
         combinationtype.refRelays.forEach((relayId) => {
-          map.set(relayId, device.code);
+          refRelaysListMap.set(relayId, {
+            combinationtype: combinationtype.code,
+            device: device.code,
+          });
         });
       });
     });
     const relays = app.queryStore.queryByType<Relay>(Relay.Type);
     relays.forEach((relay) => {
-      relay.refDevice.text = map.get(relay.id)?.replace(/_/g, '\n') as string;
+      relay.refDevice.text = refRelaysListMap
+        .get(relay.id)
+        ?.device.replace(/_/g, '\n') as string;
     });
     const phaseFailureProtectors =
       app.queryStore.queryByType<PhaseFailureProtector>(
         PhaseFailureProtector.Type
       );
     phaseFailureProtectors.forEach((phaseFailureProtector) => {
-      phaseFailureProtector.refDevice.text = map.get(
+      phaseFailureProtector.refDevice.text = refRelaysListMap.get(
         phaseFailureProtector.id
-      ) as string;
+      )?.device as string;
     });
   });
   app.on('destroy', () => {
     refRelaysList = [];
     combinationTypeList = [];
+    refRelaysListMap.clear();
   });
   return drawApp;
 }