设置演练故障

src/components/alarm/setAlarmMock.vue

@@ -0,0 +1,215 @@
+<template>
+  <draggable-dialog
+    v-if="showsetAlartText"
+    seamless
+    title="设置故障演练"
+    :width="300"
+    :height="0"
+  >
+    <template v-slot:footer>
+      <div>
+        <q-card class="q-gutter-sm q-px-sm q-mt-sm">
+          <q-form ref="myForm" @submit="onSubmit" @reset="onReset">
+            <q-input
+              outlined
+              label="线路ID"
+              v-model.number="setAlartTextData.lineId"
+              type="number"
+              lazy-rules
+              :rules="[(val) => val || '请输入线路ID！']"
+            />
+            <q-select
+              outlined
+              label="故障类型"
+              v-model="setAlartTextData.alertType"
+              :options="optionsAlertType"
+              :rules="[(val) => val.length > 0 || '请选择故障类型！']"
+            />
+            <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.deviceCodes"
+                      :key="item"
+                      square
+                      color="primary"
+                      text-color="white"
+                      removable
+                      @remove="removeSelect(item)"
+                    >
+                      {{ item }}
+                    </q-chip>
+                  </div>
+                  <q-btn
+                    v-show="setAlartTextData.deviceCodes.length > 0"
+                    style="width: 120px"
+                    label="清空框选的设备"
+                    color="red"
+                    @click="clearSelect"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <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" />
+            </div>
+          </q-form>
+        </q-card>
+      </div>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import DraggableDialog from '../common/DraggableDialog.vue';
+import { ref, watch } from 'vue';
+import { JlGraphic } from 'src/jl-graphic';
+import { Station } from 'src/graphics/station/Station';
+import { useLineStore } from 'src/stores/line-store';
+import { QForm, useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
+import { mockAlertSet } from 'src/api/AlertMock';
+import { saveAlertTypeData } from './alarmInfoEnum';
+
+const lineStore = useLineStore();
+const setAlartTextData = ref<{
+  lineId: string;
+  alertType: string;
+  deviceCodes: string[];
+}>({
+  lineId: '',
+  alertType: '',
+  deviceCodes: [],
+});
+const optionsAlertType = [
+  '蓝显',
+  '全线蓝显',
+  '整侧站台门无法打开',
+  '整侧站台门无法关闭',
+  '道岔失表',
+  '道岔大面积失表',
+  '计轴红光带',
+  '计轴大面积红光带',
+  '计轴橙光带',
+  '计轴大面积橙光带',
+  '列车信号故障',
+];
+const mapAlertType = new Map([
+  ['蓝显', ['station']],
+  ['全线蓝显', ['station']],
+  ['整侧站台门无法打开', ['Platform']],
+  ['整侧站台门无法关闭', ['Platform']],
+  ['道岔失表', ['Turnout']],
+  ['道岔大面积失表', ['Turnout']],
+  ['计轴红光带', ['LogicSection', 'Turnout']],
+  ['计轴大面积红光带', ['LogicSection', 'Turnout']],
+  ['计轴橙光带', ['LogicSection', 'Turnout']],
+  ['计轴大面积橙光带', ['LogicSection', 'Turnout']],
+  ['列车信号故障', ['LogicSection', 'Turnout']],
+  ['联锁区红光带', ['LogicSection', 'Turnout']],
+  ['联锁区橙光带', ['LogicSection', 'Turnout']],
+]);
+let selectGraphic: JlGraphic[] = [];
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val && val.length > 0) {
+      const deviceFilter = lineStore.selectedGraphics?.filter((g) => {
+        let select = false;
+        if (
+          g.type == Station.Type &&
+          (g as Station).datas.concentrationStations &&
+          setAlartTextData.value.alertType == '蓝显'
+        ) {
+          select = true;
+        }
+        if (
+          g.type !== Station.Type &&
+          mapAlertType.get(setAlartTextData.value.alertType)?.includes(g.type)
+        ) {
+          select = true;
+        }
+        return select;
+      }) as JlGraphic[];
+      if (
+        ['道岔失表', '计轴红光带', '计轴橙光带', '列车信号故障'].includes(
+          setAlartTextData.value.alertType
+        )
+      ) {
+        selectGraphic = [deviceFilter[0]];
+      } else {
+        selectGraphic.push(...deviceFilter);
+      }
+      selectGraphic = Array.from(new Set(selectGraphic));
+      lineStore.getLineApp().updateSelected(...selectGraphic);
+      setAlartTextData.value.deviceCodes = selectGraphic.map((g) => g.code);
+    }
+  }
+);
+
+const myForm = ref<QForm | null>(null);
+const showsetAlartText = ref(true);
+const $q = useQuasar();
+
+async function onSubmit() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      try {
+        const params = {
+          lineId: +setAlartTextData.value.lineId,
+          alertType: (saveAlertTypeData as never)[
+            setAlartTextData.value.alertType + ''
+          ],
+          deviceCodes: setAlartTextData.value.deviceCodes,
+        };
+        await mockAlertSet(params);
+        $q.notify({
+          type: 'positive',
+          message: '设置故障演练成功',
+        });
+        onReset();
+      } catch (err) {
+        const apiErr = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: apiErr.title,
+        });
+      } finally {
+        showsetAlartText.value = false;
+      }
+    }
+  });
+}
+
+function removeSelect(code: string) {
+  const removeIndex = setAlartTextData.value.deviceCodes.findIndex(
+    (item) => item == code
+  );
+  selectGraphic.splice(removeIndex, 1);
+  setAlartTextData.value.deviceCodes.splice(removeIndex, 1);
+  lineStore.getLineApp().updateSelected(...selectGraphic);
+}
+
+function clearSelect() {
+  setAlartTextData.value.deviceCodes = [];
+  selectGraphic = [];
+  lineStore.getLineApp().updateSelected();
+}
+
+function onReset() {
+  setAlartTextData.value = {
+    lineId: '',
+    alertType: '',
+    deviceCodes: [],
+  };
+}
+</script>

src/layouts/MainLayout.vue

@@ -17,11 +17,11 @@
         <q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
 
         <q-btn
-          v-show="route.path.includes('monitor')"
+          v-show="route.path.includes('line/monitor')"
           color="info"
           label="故障演练"
           class="q-mr-sm"
-          @click="alertSetShow = true"
+          @click="openSetAlarmMockDialog"
         />
         <q-btn
           v-if="showSetAlarmTextButton && route.path.includes('line/monitor')"
@@ -131,14 +131,9 @@ import SysMenu from 'src/components/SysMenu.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { Dialog, useQuasar } from 'quasar';
 import { clearJwtToken } from 'src/configs/TokenManage';
-import {
-  DeviceConfigItem,
-  getDeviceByAlarmType,
-  mockAlertSet,
-} from 'src/api/AlertMock';
 import commonAlarm from 'src/components/alarm/commonAlarm.vue';
 import setAlarmText from 'src/components/alarm/setAlarmText.vue';
-import { saveAlertTypeData } from 'src/components/alarm/alarmInfoEnum';
+import setAlarmMock from 'src/components/alarm/setAlarmMock.vue';
 import NCC from '/logo/NCC_白.png';
 import { getShowSetAlarmTextButton } from 'src/configs/UrlManage';
 
@@ -156,9 +151,6 @@ function onResize() {
   scrollWidth.value =
     window.innerWidth - (leftDrawerOpen.value ? leftDrawerSize.width : 0);
 }
-function backConfirm() {
-  router.replace('/monitor');
-}
 const headerSize = reactive({} as { width: number; height: number });
 function onHeaderResize(size: { width: number; height: number }) {
   headerSize.width = size.width;
@@ -171,6 +163,27 @@ function onLeftResize(size: { width: number; height: number }) {
   leftDrawerSize.height = size.height;
 }
 
+onMounted(() => {
+  if (getShowSetAlarmTextButton()) {
+    showSetAlarmTextButton.value = true;
+  }
+});
+
+//模拟报警
+const $q = useQuasar();
+function openSetAlarmMockDialog() {
+  $q.dialog({
+    component: setAlarmMock,
+  });
+}
+
+const showSetAlarmTextButton = ref(false);
+function openSetAlarmTextDialog() {
+  $q.dialog({
+    component: setAlarmText,
+  });
+}
+
 function logOut() {
   Dialog.create({
     title: '登出确认',
@@ -183,76 +196,7 @@ function logOut() {
   });
 }
 
-onMounted(() => {
+function backConfirm() {
-  if (getShowSetAlarmTextButton()) {
+  router.replace('/monitor');
-    showSetAlarmTextButton.value = true;
-  }
-});
-
-//模拟报警
-const $q = useQuasar();
-const alertSetShow = ref(false);
-const alertType = ref('');
-const lineId = ref();
-const optionsAlertType = [
-  '蓝显',
-  '全线蓝显',
-  '整侧站台门无法打开',
-  '整侧站台门无法关闭',
-  '道岔失表',
-  '道岔大面积失表',
-  '计轴红光带',
-  '计轴大面积红光带',
-  '计轴橙光带',
-  '计轴大面积橙光带',
-  '列车信号故障',
-  '联锁区红光带',
-  '联锁区橙光带',
-];
-let optionsAlertDevice = ref<string[]>([]);
-const alertDevice = ref<string[]>([]);
-let alertDeviceList: DeviceConfigItem[] = [];
-
-async function searchAlertDevice() {
-  try {
-    optionsAlertDevice.value = [];
-    alertDevice.value = [];
-    const type = (saveAlertTypeData as never)[alertType.value];
-    alertDeviceList = await getDeviceByAlarmType(3, type);
-    optionsAlertDevice.value = alertDeviceList.map((item) => item.name);
-  } catch (err) {
-    $q.notify({
-      type: 'negative',
-      message: '无法获取指定故障的设备列表',
-    });
-  }
-}
-
-async function alarmMockSet() {
-  try {
-    const type = (saveAlertTypeData as never)[alertType.value];
-    const Id = lineId.value;
-    let deviceCodes: string[] = [];
-    for (let i = 0; i < alertDevice.value.length; i++) {
-      const index = alertDeviceList.findIndex(
-        (item) => item.name == alertDevice.value[i]
-      );
-      deviceCodes.push(alertDeviceList[index].code);
-    }
-    await mockAlertSet({ lineId: Id, alertType: type, deviceCodes });
-    alertSetShow.value = false;
-  } catch (err) {
-    $q.notify({
-      type: 'negative',
-      message: '无法设置模拟故障',
-    });
-  }
-}
-
-const showSetAlarmTextButton = ref(false);
-function openSetAlarmTextDialog() {
-  $q.dialog({
-    component: setAlarmText,
-  });
 }
 </script>