故障测试修改

src/api/AlertMock.ts

@@ -9,9 +9,12 @@ export function mockLocalDemoTestSet(
   alertType: string,
   data: {
     lineId: number;
-    deviceInfos: { deviceName: string; deviceType: string }[];
+    deviceInfos: {
+      deviceName: string;
+      deviceType: string;
       status: string;
       groupId?: string;
+    }[][];
   }
 ) {
   return api.post(`${alertUriBase}/localDemoTest/${alertType}`, data);

src/components/alarm/setAlarmText.vue

@@ -26,11 +26,23 @@
               :options="optionsAlertType"
               :rules="[(val) => val.length > 0 || '请选择故障类型！']"
             />
+            <q-list bordered separator class="rounded-borders">
+              <q-expansion-item
+                bordered
+                expand-separator
+                v-for="(configItem, index) in setAlartTextData.groupList"
+                :key="configItem"
+                v-model="configItem.expanded"
+                :label="configItem.groupName"
+                @click="toggleItem(index)"
+              >
+                <q-card>
+                  <q-item no-wrap class="q-gutter-y-sm column">
                     <q-input
                       v-if="setAlartTextData.alertType == '列车信号故障'"
                       outlined
                       label="车组号"
-              v-model.number="setAlartTextData.groupId"
+                      v-model.number="configItem.groupId"
                       type="number"
                       lazy-rules
                       :rules="[(val) => val || '请输入车组号！']"
@@ -38,39 +50,54 @@
                     <q-select
                       outlined
                       label="故障测试状态"
-              v-model="setAlartTextData.status"
+                      v-model="configItem.status"
                       :options="optionsStatus"
                       :rules="[(val) => val.length > 0 || '请选择故障类型！']"
                       map-options
                       emit-value
                     />
-            <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 setAlartTextData.deviceInfos"
+                        v-for="(item, selectIndex) in configItem.deviceInfos"
-                      :key="item.deviceName"
+                        :key="item"
                         square
                         color="primary"
                         text-color="white"
                         removable
-                      @remove="removeSelect(item)"
+                        @remove="removeSelect(selectIndex)"
+                        clickable
+                        @click="clickSelectCenter(selectIndex)"
                       >
                         {{ item.deviceName }}
                       </q-chip>
                     </div>
+                    <div>
                       <q-btn
-                    v-show="setAlartTextData.deviceInfos.length > 0"
+                        v-show="configItem.deviceInfos.length > 0"
-                    style="width: 120px"
+                        style="width: 100px"
-                    label="清空框选的设备"
+                        label="清空选择"
                         color="red"
-                    @click="clearSelect"
+                        class="q-mr-md"
+                        @click="clearAllSelect(index)"
                       />
-                </q-item-section>
+                      <q-btn
+                        v-if="setAlartTextData.alertType == '列车信号故障'"
+                        label="删除测试组"
+                        color="secondary"
+                        @click="deleteSelectConfig(index)"
+                      />
+                    </div>
                   </q-item>
+                </q-card>
+              </q-expansion-item>
             </q-list>
+            <q-btn
+              v-if="setAlartTextData.alertType == '列车信号故障'"
+              class="q-mt-md"
+              label="增加测试组"
+              color="secondary"
+              @click="addSelectConfig"
+            />
             <div class="q-gutter-sm q-pa-md row justify-center">
               <q-btn
                 label="提交"
@@ -102,15 +129,30 @@ const lineStore = useLineStore();
 const setAlartTextData = ref<{
   lineId: string;
   alertType: string;
-  deviceInfos: { deviceName: string; deviceType: string }[];
+  groupList: {
+    groupName: string;
+    groupId?: string;
     status: string;
-  groupId: string;
+    deviceInfos: {
+      groupId?: string;
+      deviceName: string;
+      deviceType: string;
+      status: string;
+    }[];
+    expanded: boolean;
+  }[];
 }>({
   lineId: '',
   alertType: '',
-  deviceInfos: [],
+  groupList: [
-  status: '',
+    {
+      groupName: '测试组',
       groupId: '',
+      status: '',
+      deviceInfos: [],
+      expanded: false,
+    },
+  ],
 });
 const optionsAlertType = [
   '蓝显',
@@ -141,7 +183,12 @@ let selectGraphic: JlGraphic[] = [];
 watch(
   () => lineStore.selectedGraphics,
   (val) => {
-    if (val && val.length > 0 && setAlartTextData.value.alertType) {
+    if (
+      val &&
+      val.length > 0 &&
+      setAlartTextData.value.alertType &&
+      clickIndex !== null
+    ) {
       const selectGraphicId = selectGraphic.map((g) => g.id);
       const appSelectedGraphicsId = lineStore.selectedGraphics?.map(
         (g) => g.id
@@ -176,12 +223,19 @@ watch(
       }
       selectGraphic = Array.from(new Set(selectGraphic));
       lineStore.getLineApp().updateSelected(...selectGraphic);
-      setAlartTextData.value.deviceInfos = [];
+      setAlartTextData.value.groupList[clickIndex].deviceInfos = [];
+      const status = setAlartTextData.value.groupList[clickIndex].status;
+      const groupId =
+        setAlartTextData.value.groupList[clickIndex].groupId || '';
       selectGraphic.forEach((g) => {
-        setAlartTextData.value.deviceInfos.push({
+        setAlartTextData.value.groupList[clickIndex as number].deviceInfos.push(
+          {
             deviceName: g.code,
             deviceType: (DeviceType as never)[g.type + ''],
-        });
+            status,
+            groupId,
+          }
+        );
       });
     }
   }
@@ -196,7 +250,6 @@ onMounted(() => {
       wheelZoom: true,
     },
   });
-  clearSelect();
   onReset();
   setAlartTextData.value.lineId = lineStore.lineId as unknown as string;
 });
@@ -211,9 +264,9 @@ async function onSubmit() {
       try {
         const params = {
           lineId: +setAlartTextData.value.lineId,
-          deviceInfos: setAlartTextData.value.deviceInfos,
+          deviceInfos: setAlartTextData.value.groupList.map(
-          status: setAlartTextData.value.status,
+            (item) => item.deviceInfos
-          groupId: setAlartTextData.value.groupId,
+          ),
         };
         const alertType = (saveAlertTypeData as never)[
           setAlartTextData.value.alertType + ''
@@ -237,17 +290,52 @@ async function onSubmit() {
   });
 }
 
-function removeSelect(code: { deviceName: string; deviceType: string }) {
+let clickIndex: null | number = null;
-  const removeIndex = setAlartTextData.value.deviceInfos.findIndex(
+function toggleItem(index: number) {
-    (item) => item == code
+  const lineApp = lineStore.getLineApp();
+  selectGraphic = [];
+  lineApp.updateSelected();
+  if (setAlartTextData.value.groupList[index].expanded == true) {
+    clickIndex = index;
+    const select: JlGraphic[] = [];
+    setAlartTextData.value.groupList[index].deviceInfos.forEach(
+      (deviceInfo) => {
+        const g = lineApp.queryStore.queryById(deviceInfo.deviceName);
+        select.push(g);
+      }
     );
+    lineApp.updateSelected(...select);
+  } else {
+    clickIndex = null;
+  }
+}
+
+function removeSelect(removeIndex: number) {
+  const clickTarget = setAlartTextData.value.groupList[clickIndex as number];
   selectGraphic.splice(removeIndex, 1);
-  setAlartTextData.value.deviceInfos.splice(removeIndex, 1);
+  clickTarget.deviceInfos.splice(removeIndex, 1);
+  clickTarget.deviceInfos.splice(removeIndex, 1);
   lineStore.getLineApp().updateSelected(...selectGraphic);
 }
 
-function clearSelect() {
+function clearAllSelect(index: number) {
-  setAlartTextData.value.deviceInfos = [];
+  setAlartTextData.value.groupList[index].deviceInfos = [];
+  selectGraphic = [];
+  lineStore.getLineApp().updateSelected();
+}
+
+function addSelectConfig() {
+  setAlartTextData.value.groupList.push({
+    groupName: '测试组',
+    groupId: '',
+    status: '',
+    deviceInfos: [],
+    expanded: false,
+  });
+}
+
+function deleteSelectConfig(index: number) {
+  setAlartTextData.value.groupList.splice(index, 1);
   selectGraphic = [];
   lineStore.getLineApp().updateSelected();
 }
@@ -256,9 +344,15 @@ function onReset() {
   setAlartTextData.value = {
     lineId: lineStore.lineId as unknown as string,
     alertType: '',
-    deviceInfos: [],
+    groupList: [
-    status: '',
+      {
+        groupName: '测试组',
         groupId: '',
+        status: '',
+        deviceInfos: [],
+        expanded: false,
+      },
+    ],
   };
   selectGraphic = [];
 }