故障测试修改

src/api/AlertMock.ts

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

src/components/alarm/setAlarmText.vue

@@ -26,51 +26,78 @@
               :options="optionsAlertType"
               :rules="[(val) => val.length > 0 || '请选择故障类型！']"
             />
-            <q-input
-              v-if="setAlartTextData.alertType == '列车信号故障'"
-              outlined
-              label="车组号"
-              v-model.number="setAlartTextData.groupId"
-              type="number"
-              lazy-rules
-              :rules="[(val) => val || '请输入车组号！']"
-            />
-            <q-select
-              outlined
-              label="故障测试状态"
-              v-model="setAlartTextData.status"
-              :options="optionsStatus"
-              :rules="[(val) => val.length > 0 || '请选择故障类型！']"
-              map-options
-              emit-value
-            />
             <q-list bordered separator class="rounded-borders">
-              <q-item>
+              <q-expansion-item
-                <q-item-section no-wrap class="q-gutter-y-sm column">
+                bordered
-                  <q-item-label> 框选的设备 </q-item-label>
+                expand-separator
-                  <div class="q-gutter-sm row">
+                v-for="(configItem, index) in setAlartTextData.groupList"
-                    <q-chip
+                :key="configItem"
-                      v-for="item in setAlartTextData.deviceInfos"
+                v-model="configItem.expanded"
-                      :key="item.deviceName"
+                :label="configItem.groupName"
-                      square
+                @click="toggleItem(index)"
-                      color="primary"
+              >
-                      text-color="white"
+                <q-card>
-                      removable
+                  <q-item no-wrap class="q-gutter-y-sm column">
-                      @remove="removeSelect(item)"
+                    <q-input
-                    >
+                      v-if="setAlartTextData.alertType == '列车信号故障'"
-                      {{ item.deviceName }}
+                      outlined
-                    </q-chip>
+                      label="车组号"
-                  </div>
+                      v-model.number="configItem.groupId"
-                  <q-btn
+                      type="number"
-                    v-show="setAlartTextData.deviceInfos.length > 0"
+                      lazy-rules
-                    style="width: 120px"
+                      :rules="[(val) => val || '请输入车组号！']"
-                    label="清空框选的设备"
+                    />
-                    color="red"
+                    <q-select
-                    @click="clearSelect"
+                      outlined
-                  />
+                      label="故障测试状态"
-                </q-item-section>
+                      v-model="configItem.status"
-              </q-item>
+                      :options="optionsStatus"
+                      :rules="[(val) => val.length > 0 || '请选择故障类型！']"
+                      map-options
+                      emit-value
+                    />
+                    <div class="q-gutter-sm row">
+                      <q-chip
+                        v-for="(item, selectIndex) in configItem.deviceInfos"
+                        :key="item"
+                        square
+                        color="primary"
+                        text-color="white"
+                        removable
+                        @remove="removeSelect(selectIndex)"
+                        clickable
+                        @click="clickSelectCenter(selectIndex)"
+                      >
+                        {{ item.deviceName }}
+                      </q-chip>
+                    </div>
+                    <div>
+                      <q-btn
+                        v-show="configItem.deviceInfos.length > 0"
+                        style="width: 100px"
+                        label="清空选择"
+                        color="red"
+                        class="q-mr-md"
+                        @click="clearAllSelect(index)"
+                      />
+                      <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: {
-  status: string;
+    groupName: string;
-  groupId: string;
+    groupId?: string;
+    status: string;
+    deviceInfos: {
+      groupId?: string;
+      deviceName: string;
+      deviceType: string;
+      status: string;
+    }[];
+    expanded: boolean;
+  }[];
 }>({
   lineId: '',
   alertType: '',
-  deviceInfos: [],
+  groupList: [
-  status: '',
+    {
-  groupId: '',
+      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 + ''],
+            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: '',
+      {
-    groupId: '',
+        groupName: '测试组',
+        groupId: '',
+        status: '',
+        deviceInfos: [],
+        expanded: false,
+      },
+    ],
   };
   selectGraphic = [];
 }