范围配置编辑

src/api/ConfigApi.ts

@@ -33,8 +33,22 @@ export interface IAreaConfigItem {
   lineId: number;
   areaName: string;
   deviceType: string;
+  alertTypes: string[];
   data: string;
 }
 export function deviceRangeSet(data: IAreaConfigItem) {
   return api.post('/api/config/device/area/save', data);
 }
+
+/**
+ * 根据id获取配置信息
+ * @param id 配置列表id
+ */
+export function queryDeviceRangeById(
+  id: number
+): Promise<IAreaConfig<IAreaConfigItem>> {
+  return api.get(`/api/config/device/area/${id}`);
+}
+interface IAreaConfig<T = unknown> {
+  data: T;
+}

src/components/rangeConfig.vue

@@ -21,6 +21,14 @@
           :emit-value="true"
           :rules="[(val) => val.trim() != '' || '设备类型不能为空']"
         />
+        <q-select
+          outlined
+          v-model="rangeConfig.alertTypes"
+          label="故障类型"
+          multiple
+          :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">
@@ -57,14 +65,19 @@ import { Station } from 'src/graphics/station/Station';
 import { Platform } from 'src/graphics/platform/Platform';
 import { QForm, useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import { deviceRangeSet, IAreaConfigItem } from 'src/api/ConfigApi';
+import {
-import { fromUint8Array } from 'js-base64';
+  deviceRangeSet,
+  IAreaConfigItem,
+  queryDeviceRangeById,
+} from 'src/api/ConfigApi';
+import { fromUint8Array, toUint8Array } from 'js-base64';
 import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
 import { StationData } from 'src/drawApp/graphics/StationInteraction';
 import { PlatformData } from 'src/drawApp/graphics/PlatformInteraction';
 import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { JlGraphic } from 'src/jl-graphic';
+import { GraphicData, JlGraphic } from 'src/jl-graphic';
+import { saveAlertTypeData, showAlertTypeData } from './alarm/alarmInfoEnum';
 
 const props = defineProps({
   rangeConfigEdit: {
@@ -79,10 +92,12 @@ const rangeConfig = reactive<{
   areaName: string;
   deviceType: `${DeviceType}` | '';
   device: string;
+  alertTypes: string[];
 }>({
   areaName: '',
   deviceType: '',
   device: '',
+  alertTypes: [],
 });
 const device = ref<string[]>([]);
 const handleState = ref('新建范围配置');
@@ -94,30 +109,44 @@ const optionsType = [
   { label: '站台', value: Platform.Type },
 ];
 
+const optionsAlertType = [
+  '蓝显',
+  '列车延误2分钟',
+  '列车延误10分钟',
+  '整侧站台门无关闭锁紧信号',
+  '整侧站台门无法打开',
+  '整侧站台门无法关闭',
+  '道岔失表',
+  '道岔均失表',
+  '道岔定位失表',
+  '道岔反位失表',
+  '计轴红光带',
+  '计轴大面积红光带',
+  '计轴橙光带',
+  '计轴大面积橙光带',
+];
+
 enum DeviceType {
   Station = 'DEVICE_TYPE_RTU',
   Turnout = 'DEVICE_TYPE_SWITCH',
   LogicSection = 'DEVICE_TYPE_TRACK',
   Platform = 'DEVICE_TYPE_PLATFORM',
 }
+enum DeviceTypeShow {
+  DEVICE_TYPE_RTU = 'station',
+  DEVICE_TYPE_SWITCH = 'Turnout',
+  DEVICE_TYPE_TRACK = 'LogicSection',
+  DEVICE_TYPE_PLATFORM = 'Platform',
+}
 
 watch(props, () => {
   handleState.value = '编辑范围配置';
-  rangeConfig.areaName = props.rangeConfigEdit?.areaName;
+  searchById();
-  rangeConfig.deviceType = props.rangeConfigEdit?.deviceType;
-  const select: JlGraphic[] = [];
-  props.rangeConfigEdit?.device.forEach((id: string) => {
-    const g = lineStore.getLineApp().queryStore.queryById(id);
-    select.push(g);
-    device.value.push(g.code);
-  });
-  lineStore.getLineApp().updateSelected(...select);
 });
 
 watch(
   () => lineStore.selectedGraphics,
   (val) => {
-    console.log(11);
     if (val && val.length > 0) {
       const deviceFilter = lineStore.selectedGraphics?.filter(
         (g) => g.type == rangeConfig.deviceType
@@ -154,10 +183,14 @@ async function onSubmit() {
     if (res) {
       try {
         const lineId = +route.params.id as number;
+        const alertTypes = rangeConfig.alertTypes.map(
+          (type) => (saveAlertTypeData as never)[type + '']
+        );
         const params: IAreaConfigItem = {
           lineId: lineId,
           areaName: rangeConfig.areaName,
           deviceType: (DeviceType as never)[rangeConfig.deviceType + ''],
+          alertTypes: alertTypes,
           data: rangeConfig.device,
         };
         if (handleState.value == '新建范围配置') {
@@ -181,9 +214,57 @@ async function onSubmit() {
   });
 }
 
+async function searchById() {
+  try {
+    const id = props.rangeConfigEdit?.id as number;
+    const response = await queryDeviceRangeById(id);
+    const datas: GraphicData[] = [];
+    if (response.data.data) {
+      const storage = graphicData.RtssGraphicStorage.deserialize(
+        toUint8Array(response.data.data)
+      );
+      storage.Platforms.forEach((platform) => {
+        datas.push(new PlatformData(platform));
+      });
+      storage.stations.forEach((station) => {
+        datas.push(new StationData(station));
+      });
+      storage.turnouts.forEach((turnout) => {
+        datas.push(new TurnoutData(turnout));
+      });
+      storage.logicSections.forEach((logicSection) => {
+        datas.push(new LogicSectionData(logicSection));
+      });
+    }
+    rangeConfig.areaName = response.data.areaName;
+    rangeConfig.deviceType = (DeviceTypeShow as never)[
+      response.data.deviceType + ''
+    ];
+    rangeConfig.alertTypes = response.data.alertTypes.map(
+      (type) => (showAlertTypeData as never)[type + '']
+    );
+    const select: JlGraphic[] = [];
+    datas
+      .map((data) => data.id)
+      .forEach((id: string) => {
+        const g = lineStore.getLineApp().queryStore.queryById(id);
+        select.push(g);
+        device.value.push(g.code);
+      });
+    lineStore.getLineApp().updateSelected(...select);
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '没有需要编辑的详细信息',
+    });
+  }
+}
+
 function onReset() {
+  handleState.value = '新建范围配置';
   rangeConfig.areaName = '';
   rangeConfig.deviceType = '';
   device.value = [];
+  rangeConfig.alertTypes = [];
 }
 </script>