Merge branch 'master' of https://git.code.tencent.com/xian-ncc-da/xian-ncc-da-client

src/api/AlarmTipTimeConfig.ts

@@ -0,0 +1,56 @@
+import { api } from 'src/boot/axios';
+import { PageDto, PageQueryDto } from './ApiCommon';
+
+const BaseUrl = '/api/alert/tip/time';
+
+export interface TimeConfigItem {
+  id?: number;
+  timeName: string;
+  startHour: string;
+  endHour: string;
+  timeType: string;
+  publicPeak?: string;
+}
+
+export enum TipTimeConfig {
+  假期早高峰 = 'HOLIDAYS_MORN_PEAK',
+  假期晚高峰 = 'HOLIDAYS_EVENING_PEAK',
+  早高峰 = 'MORN_PEAK',
+  晚高峰 = 'EVENING_PEARK',
+  低峰 = 'NORMAL_UNPEARK',
+}
+export enum ShowTipTimeConfig {
+  HOLIDAYS_MORN_PEAK = '假期早高峰',
+  HOLIDAYS_EVENING_PEAK = '假期晚高峰',
+  MORN_PEAK = '早高峰',
+  EVENING_PEARK = '晚高峰',
+  NORMAL_UNPEARK = '低峰',
+}
+
+/**
+ * 创建/修改时间配置
+ * @param data
+ * @returns
+ */
+export function creatOrEditTimeConfig(data: TimeConfigItem) {
+  return api.post(`${BaseUrl}`, data);
+}
+
+class PageQueryParams extends PageQueryDto {
+  timeName?: string;
+  timeType?: string;
+}
+
+/**
+ * 获取报警提示时间配置列表
+ * @param params
+ * @returns
+ */
+export async function alarmTipTimeConfigPageQuery(
+  params: PageQueryParams
+): Promise<PageDto<TimeConfigItem>> {
+  const response = await api.post(`${BaseUrl}/page`, {
+    params: params,
+  });
+  return response.data;
+}

src/api/AlertMock.ts

@@ -4,6 +4,21 @@ import { AlarmInfo } from './DecisionInfo';
 
 const alertUriBase = '/api/alert/mock';
 
+//故障测试
+export function mockLocalDemoTestSet(
+  alertType: string,
+  data: {
+    lineId: number;
+    rtuId: number;
+    deviceInfos: { deviceName: string; deviceType: string }[];
+    status: string;
+    groupId?: string;
+  }
+) {
+  return api.post(`${alertUriBase}/localDemoTest/${alertType}`, data);
+}
+
+//故障演练
 export function mockAlertSet(data: {
   lineId: number;
   alertType: string;

src/api/DecisionInfo.ts

@@ -1,11 +1,13 @@
 import { api } from 'src/boot/axios';
 import { PageDto, PageQueryDto } from './ApiCommon';
+import { TimeConfigItem } from './AlarmTipTimeConfig';
 
 const AlertTipUriBase = '/api/alertTip';
 
 interface AlarmInfoCreateParams {
+  id: number;
   alertType: string;
-  timeType: string;
+  tipTimeIds: string[];
   areaConfigId: number;
   drivingInfo: string;
   submissionInfo: string;
@@ -14,13 +16,17 @@ interface AlarmInfoCreateParams {
 export interface AlarmInfoListItem {
   id: number;
   alertType: string;
-  timeType: string;
+  timeConfigList: TimeConfigItem[];
   areaConfigId: number;
   drivingInfo: string;
   submissionInfo: string;
   areaConfigName?: string;
 }
 
+export interface AlarmInfo<T = unknown> {
+  data: T;
+}
+
 export class PagingQueryParams extends PageQueryDto {
   alertType?: string;
   timeType?: string;
@@ -62,7 +68,7 @@ export function queryAlarmInfoByType(
 }
 
 /**
- * 创建决策信息
+ * 创建或编辑决策信息
  * @param params
  * @returns
  */
@@ -78,19 +84,6 @@ export function deleteAlarmInfo(id: number) {
   return api.delete(`${AlertTipUriBase}/id/${id}`);
 }
 
-/**
- * 更新决策信息
- * @param data
- * @returns
- */
-export function updataAlarmInfo(id: number, data: AlarmInfoListItem) {
-  return api.put(`${AlertTipUriBase}/id`, data);
-}
-
-export interface AlarmInfo<T = unknown> {
-  data: T;
-}
-
 /**
  * 根据故障类型获取对应的范围配置
  * @param id 线路id

src/components/DrawAppFormUtils.ts

@@ -0,0 +1,30 @@
+import { type GraphicDataBase } from 'src/drawApp/graphics/GraphicDataBase';
+import { IDrawApp, JlGraphic } from 'src/jl-graphic';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, onUnmounted, reactive } from 'vue';
+
+const drawStore = useDrawStore();
+
+export function useFormData<T extends GraphicDataBase>(
+  source: T,
+  app: IDrawApp
+) {
+  const data = reactive<T>(source);
+
+  onMounted(() => {
+    app.bindFormData(data);
+  });
+
+  onUnmounted(() => {
+    app.unbindFormData(data);
+  });
+
+  function onUpdate() {
+    const graphic = drawStore.selectedGraphic as JlGraphic;
+    if (graphic) {
+      app.updateGraphicAndRecord(graphic, data);
+    }
+  }
+
+  return { data, onUpdate };
+}

src/components/SysMenu.vue

@@ -84,6 +84,11 @@ const list = reactive([
         label: '报警故障阈值配置',
         icon: 'format_indent_increase',
       },
+      {
+        path: '/dataManage/alarmTipTimeConfig',
+        label: '报警提示时间配置',
+        icon: 'access_time',
+      },
     ],
   },
   {

src/components/alarm/alarmInfoEnum.ts

@@ -19,6 +19,8 @@ export enum showAlertTypeData {
   '道岔大面积失表',
   '列车信号故障',
   '全线蓝显',
+  '联锁区红光带',
+  '联锁区橙光带',
   I = 'I类信息',
   II = 'II类信息',
   III = 'III类信息',
@@ -45,6 +47,8 @@ export enum showAlertTypeData {
   SWITCH_LOST_MOST = '道岔大面积失表',
   TRAIN_EB_ATP = '列车信号故障',
   ALL_LINE_BLUE_DISPLAY = '全线蓝显',
+  AXLE_LED_RED_INTERLOCK_AREA = '联锁区红光带',
+  AXLE_LED_ORANGE_INTERLOCK_AREA = '联锁区橙光带',
 }
 
 export enum saveAlertTypeData {
@@ -70,6 +74,8 @@ export enum saveAlertTypeData {
   道岔大面积失表 = 'SWITCH_LOST_MOST',
   列车信号故障 = 'TRAIN_EB_ATP',
   全线蓝显 = 'ALL_LINE_BLUE_DISPLAY',
+  联锁区红光带 = 'AXLE_LED_RED_INTERLOCK_AREA',
+  联锁区橙光带 = 'AXLE_LED_ORANGE_INTERLOCK_AREA',
 }
 
 export const GuardConfigTypeData = {
@@ -101,3 +107,10 @@ export const GuardConfigTypeData = {
     deviceType: '信号',
   },
 };
+
+export function isArraysEqual(arr1: string[], arr2: string[]) {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  return arr1.sort().join(',') === arr2.sort().join(',');
+}

src/components/alarm/setAlarmMock.vue

@@ -0,0 +1,240 @@
+<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 { onMounted, 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 { isArraysEqual, saveAlertTypeData } from './alarmInfoEnum';
+import { Section, SectionType } from 'src/graphics/section/Section';
+import { LogicSection } from 'src/graphics/logicSection/LogicSection';
+
+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 selectGraphicId = selectGraphic.map((g) => g.id);
+      const appSelectedGraphicsId = lineStore.selectedGraphics?.map(
+        (g) => g.id
+      );
+      if (
+        appSelectedGraphicsId !== undefined &&
+        isArraysEqual(selectGraphicId, appSelectedGraphicsId)
+      ) {
+        return;
+      }
+      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)) ||
+          (g.type == Section.Type &&
+            (g as Section).datas.sectionType === SectionType.TurnoutPhysical &&
+            mapAlertType
+              .get(setAlartTextData.value.alertType)
+              ?.includes(LogicSection.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);
+    }
+  }
+);
+
+onMounted(() => {
+  clearSelect();
+  onReset();
+});
+
+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: [],
+  };
+  selectGraphic = [];
+}
+</script>

src/components/alarm/setAlarmText.vue

@@ -0,0 +1,262 @@
+<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-input
+              outlined
+              label="集中站ID"
+              v-model.number="setAlartTextData.rtuId"
+              type="number"
+              lazy-rules
+              :rules="[(val) => val || '请输入集中站ID！']"
+            />
+            <q-select
+              outlined
+              label="故障类型"
+              v-model="setAlartTextData.alertType"
+              :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-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"
+                      :key="item.deviceName"
+                      square
+                      color="primary"
+                      text-color="white"
+                      removable
+                      @remove="removeSelect(item)"
+                    >
+                      {{ item.deviceName }}
+                    </q-chip>
+                  </div>
+                  <q-btn
+                    v-show="setAlartTextData.deviceInfos.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 { mockLocalDemoTestSet } from 'src/api/AlertMock';
+import { isArraysEqual, saveAlertTypeData } from './alarmInfoEnum';
+
+const lineStore = useLineStore();
+const setAlartTextData = ref<{
+  lineId: string;
+  rtuId: string;
+  alertType: string;
+  deviceInfos: { deviceName: string; deviceType: string }[];
+  status: string;
+  groupId: string;
+}>({
+  lineId: '',
+  rtuId: '',
+  alertType: '',
+  deviceInfos: [],
+  status: '',
+  groupId: '',
+});
+const optionsAlertType = [
+  '蓝显',
+  '道岔失表',
+  '计轴红光带',
+  '计轴橙光带',
+  '列车信号故障',
+];
+const mapAlertType = new Map([
+  ['蓝显', ['station']],
+  ['道岔失表', ['Turnout']],
+  ['计轴红光带', ['LogicSection', 'Turnout']],
+  ['计轴橙光带', ['LogicSection', 'Turnout']],
+  ['列车信号故障', ['LogicSection', 'Turnout']],
+]);
+enum DeviceType {
+  station = 'DEVICE_TYPE_RTU',
+  Turnout = 'DEVICE_TYPE_SWITCH',
+  LogicSection = 'DEVICE_TYPE_TRACK',
+}
+const optionsStatus = [
+  { label: '正常', value: 'NORMAL' },
+  { label: '设置', value: 'BEGIN' },
+  { label: '报警', value: 'ALERT' },
+];
+let selectGraphic: JlGraphic[] = [];
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val && val.length > 0) {
+      const selectGraphicId = selectGraphic.map((g) => g.id);
+      const appSelectedGraphicsId = lineStore.selectedGraphics?.map(
+        (g) => g.id
+      );
+      if (
+        appSelectedGraphicsId !== undefined &&
+        isArraysEqual(selectGraphicId, appSelectedGraphicsId)
+      ) {
+        return;
+      }
+      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 (setAlartTextData.value.alertType !== '列车信号故障') {
+        selectGraphic.push(...deviceFilter);
+      } else {
+        selectGraphic = [deviceFilter[0]];
+      }
+      selectGraphic = Array.from(new Set(selectGraphic));
+      lineStore.getLineApp().updateSelected(...selectGraphic);
+      setAlartTextData.value.deviceInfos = [];
+      selectGraphic.forEach((g) => {
+        setAlartTextData.value.deviceInfos.push({
+          deviceName: g.code,
+          deviceType: (DeviceType as never)[g.type + ''],
+        });
+      });
+    }
+  }
+);
+
+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,
+          rtuId: +setAlartTextData.value.rtuId,
+          deviceInfos: setAlartTextData.value.deviceInfos,
+          status: setAlartTextData.value.status,
+          groupId: setAlartTextData.value.groupId,
+        };
+        const alertType = (saveAlertTypeData as never)[
+          setAlartTextData.value.alertType + ''
+        ];
+        await mockLocalDemoTestSet(alertType, 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: { deviceName: string; deviceType: string }) {
+  const removeIndex = setAlartTextData.value.deviceInfos.findIndex(
+    (item) => item == code
+  );
+  selectGraphic.splice(removeIndex, 1);
+  setAlartTextData.value.deviceInfos.splice(removeIndex, 1);
+  lineStore.getLineApp().updateSelected(...selectGraphic);
+}
+
+function clearSelect() {
+  setAlartTextData.value.deviceInfos = [];
+  selectGraphic = [];
+  lineStore.getLineApp().updateSelected();
+}
+
+function onReset() {
+  setAlartTextData.value = {
+    lineId: '',
+    rtuId: '',
+    alertType: '',
+    deviceInfos: [],
+    status: '',
+    groupId: '',
+  };
+  selectGraphic = [];
+}
+</script>

src/components/draw-app/DrawProperties.vue

@@ -19,9 +19,6 @@
         <template v-if="drawStore.drawGraphicType === Station.Type">
           <station-template></station-template>
         </template>
-        <!-- <template v-if="drawStore.drawGraphicType === Train.Type">
-          <train-template></train-template>
-        </template> -->
       </q-card-section>
     </q-card>
   </div>
@@ -54,9 +51,6 @@
           <station-line-property
             v-if="drawStore.selectedGraphicType === StationLine.Type"
           ></station-line-property>
-          <!-- <train-property
-            v-if="drawStore.selectedGraphicType === Train.Type"
-          ></train-property> -->
           <iscs-fan-property
             v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
           ></iscs-fan-property>

src/components/draw-app/properties/AxleCountingProperty.vue

@@ -19,7 +19,7 @@
     <q-select
       outlined
       style="margin-top: 10px"
-      v-model="kilometerSystem.coordinateSystem"
+      v-model="axleCountingModel.kilometerSystem.coordinateSystem"
       :options="CoordinateSystemOptions"
       :map-options="true"
       :emit-value="true"
@@ -29,7 +29,7 @@
     <q-input
       outlined
       style="margin-top: 10px"
-      v-model.number="kilometerSystem.kilometer"
+      v-model.number="axleCountingModel.kilometerSystem.kilometer"
       type="number"
       @blur="onUpdate"
       label="公里标(mm):"
@@ -72,17 +72,19 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { AxleCountingData } from 'src/drawApp/graphics/AxleCountingInteraction';
 import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
 import { Section } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed } from 'vue';
 
 const drawStore = useDrawStore();
-const axleCountingModel = reactive(new AxleCountingData());
+const { data: axleCountingModel, onUpdate } = useFormData(
-const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
+  new AxleCountingData(),
-
+  drawStore.getDrawApp()
+);
 const CoordinateSystemOptions = [
   { label: '车辆段', value: 'DEPOT' },
   { label: '停车场', value: 'PARKING_LOT' },
@@ -90,46 +92,6 @@ const CoordinateSystemOptions = [
   { label: '换线', value: 'TRANSFER' },
 ];
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == AxleCounting.Type) {
-      axleCountingModel.copyFrom(val.saveData() as AxleCountingData);
-      if (axleCountingModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          axleCountingModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = axleCountingModel.kilometerSystem.kilometer;
-      }
-    }
-  }
-);
-
-onMounted(() => {
-  const axleCounting = drawStore.selectedGraphic as AxleCounting;
-  if (axleCounting) {
-    axleCountingModel.copyFrom(axleCounting.saveData());
-    if (axleCountingModel.kilometerSystem) {
-      kilometerSystem.coordinateSystem =
-        axleCountingModel.kilometerSystem.coordinateSystem;
-      kilometerSystem.kilometer = axleCountingModel.kilometerSystem.kilometer;
-    }
-  }
-});
-
-function onUpdate() {
-  const axleCounting = drawStore.selectedGraphic as AxleCounting;
-  axleCountingModel.kilometerSystem = {
-    coordinateSystem: kilometerSystem.coordinateSystem,
-    kilometer: kilometerSystem.kilometer,
-  };
-  if (axleCounting) {
-    drawStore
-      .getDrawApp()
-      .updateGraphicAndRecord(axleCounting, axleCountingModel);
-  }
-}
-
 const sectionRelations = computed(() => {
   const axleCounting = drawStore.selectedGraphic as AxleCounting;
   const sectionRelations =

src/components/draw-app/properties/LinkProperty.vue

@@ -59,38 +59,13 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { LinkData } from 'src/drawApp/graphics/LinkInteraction';
-import { Link } from 'src/graphics/link/Link';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const linkModel = reactive(new LinkData());
+const { data: linkModel, onUpdate } = useFormData(
-
+  new LinkData(),
-drawStore.$subscribe;
+  drawStore.getDrawApp()
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Link.Type) {
-      // console.log('link变更');
-      linkModel.copyFrom(val.saveData() as LinkData);
-    }
-  }
 );
-
-onMounted(() => {
-  // console.log('link 属性表单 mounted');
-  const link = drawStore.selectedGraphic as Link;
-  if (link) {
-    linkModel.copyFrom(link.saveData());
-  }
-});
-
-function onUpdate() {
-  console.log('link 属性更新');
-  const link = drawStore.selectedGraphic as Link;
-  if (link) {
-    drawStore.getDrawApp().updateGraphicAndRecord(link, linkModel);
-  }
-}
 </script>

src/components/draw-app/properties/LogicSectionProperty.vue

@@ -1,9 +1,15 @@
 <template>
   <q-form>
-    <q-input outlined readonly v-model="sectionModel.id" label="id" hint="" />
     <q-input
       outlined
-      v-model="sectionModel.code"
+      readonly
+      v-model="logicSectionModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      v-model="logicSectionModel.code"
       @blur="onUpdate"
       label="编号"
     />
@@ -11,26 +17,13 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
-import { LogicSection } from 'src/graphics/logicSection/LogicSection';
 import { useDrawStore } from 'src/stores/draw-store';
-import { shallowRef, watchEffect } from 'vue';
 
 const drawStore = useDrawStore();
-
+const { data: logicSectionModel, onUpdate } = useFormData(
-const sectionModel = shallowRef(new LogicSectionData());
+  new LogicSectionData(),
-
+  drawStore.getDrawApp()
-watchEffect(() => {
+);
-  const section = drawStore.selectedGraphic;
-  if (section && section instanceof LogicSection) {
-    sectionModel.value = section.saveData();
-  }
-});
-
-const onUpdate = () => {
-  const section = drawStore.selectedGraphic as LogicSection;
-  if (section) {
-    drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value);
-  }
-};
 </script>

src/components/draw-app/properties/PathLineProperty.vue

@@ -52,24 +52,17 @@
   </q-form>
 </template>
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { PathLineData } from 'src/drawApp/graphics/PathLineInteraction';
-import { PathLine } from 'src/graphics/pathLine/PathLine';
 import { useDrawStore } from 'src/stores/draw-store';
-import { reactive, onMounted, watch } from 'vue';
+import { reactive, onMounted } from 'vue';
 import { getLineList } from 'src/api/LineInfoApi';
 const drawStore = useDrawStore();
-const pathLineModel = reactive(new PathLineData());
+const { data: pathLineModel, onUpdate } = useFormData(
-const lineList: { label: string; value: string }[] = reactive([]);
+  new PathLineData(),
-
+  drawStore.getDrawApp()
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == PathLine.Type) {
-      pathLineModel.copyFrom(val.saveData() as PathLineData);
-    }
-  }
 );
+const lineList: { label: string; value: string }[] = reactive([]);
 
 onMounted(() => {
   getLineList()
@@ -81,16 +74,5 @@ onMounted(() => {
     .catch((err) => {
       console.error('获取线路列表失败：' + err.message);
     });
-  const pathLine = drawStore.selectedGraphic as PathLine;
-  if (pathLine) {
-    pathLineModel.copyFrom(pathLine.saveData());
-  }
 });
-
-function onUpdate() {
-  const pathLine = drawStore.selectedGraphic as PathLine;
-  if (pathLine) {
-    drawStore.getDrawApp().updateGraphicAndRecord(pathLine, pathLineModel);
-  }
-}
 </script>

src/components/draw-app/properties/PlatformProperty.vue

@@ -13,23 +13,29 @@
     <q-select
       outlined
       @blur="onUpdate"
-      v-model="hasDoor"
+      v-model="platformModel.hasdoor"
       :options="optionsDoor"
       label="是否有屏蔽门"
+      map-options
+      emit-value
     />
     <q-select
       outlined
       @blur="onUpdate"
-      v-model="direction"
+      v-model="platformModel.direction"
       :options="optionsDirection"
       label="方向"
+      map-options
+      emit-value
     />
     <q-select
       outlined
       @blur="onUpdate"
-      v-model="upAndDown"
+      v-model="platformModel.up"
       :options="optionsUpAndDown"
       label="上下行"
+      map-options
+      emit-value
     />
     <q-list bordered separator class="rounded-borders">
       <q-item>
@@ -47,68 +53,35 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { PlatformData } from 'src/drawApp/graphics/PlatformInteraction';
 import { Platform } from 'src/graphics/platform/Platform';
 import { Station } from 'src/graphics/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const drawStore = useDrawStore();
-const platformModel = reactive(new PlatformData());
+const { data: platformModel, onUpdate } = useFormData(
-const hasDoor = ref('是');
+  new PlatformData(),
-const optionsDoor = ['是', '否'];
+  drawStore.getDrawApp()
-const direction = ref('向上');
-const upAndDown = ref('');
-const optionsDirection = ['向上', '向下'];
-const optionsUpAndDown = ['上行', '下行'];
-const stationName = ref('');
-enum showSelect {
-  是 = 'true',
-  否 = 'false',
-  向上 = 'up',
-  向下 = 'down',
-}
-enum showUp {
-  上行 = 'true',
-  下行 = 'false',
-}
-enum showSelectData {
-  true = '是',
-  false = '否',
-  up = '向上',
-  down = '向下',
-}
-enum showUpData {
-  true = '上行',
-  false = '下行',
-}
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Platform.Type) {
-      platformModel.copyFrom(val.saveData() as PlatformData);
-      hasDoor.value = (showSelectData as never)[platformModel.hasdoor + ''];
-      direction.value = (showSelectData as never)[platformModel.direction];
-      upAndDown.value = (showUpData as never)[platformModel.up + ''];
-      if (platformModel.refStation) {
-        const refStation = val.queryStore.queryById<Station>(
-          platformModel.refStation
-        ) as Station;
-        stationName.value = refStation.datas.name;
-      }
-    }
-  }
 );
+const stationName = ref('');
+const optionsDoor = [
+  { label: '是', value: true },
+  { label: '否', value: false },
+];
+const optionsDirection = [
+  { label: '向上', value: 'up' },
+  { label: '向下', value: 'down' },
+];
+const optionsUpAndDown = [
+  { label: '上行', value: true },
+  { label: '下行', value: false },
+];
 
 onMounted(() => {
   const platform = drawStore.selectedGraphic as Platform;
   if (platform) {
-    platformModel.copyFrom(platform.saveData());
-    hasDoor.value = (showSelectData as never)[platformModel.hasdoor + ''];
-    direction.value = (showSelectData as never)[platformModel.direction];
-    upAndDown.value = (showUpData as never)[platformModel.up + ''];
     if (platformModel.refStation) {
       const refStation = platform.queryStore.queryById<Station>(
         platformModel.refStation
@@ -117,14 +90,4 @@ onMounted(() => {
     }
   }
 });
-
-function onUpdate() {
-  platformModel.hasdoor = JSON.parse((showSelect as never)[hasDoor.value]);
-  platformModel.direction = (showSelect as never)[direction.value];
-  platformModel.up = JSON.parse((showUp as never)[upAndDown.value]);
-  const platform = drawStore.selectedGraphic as Platform;
-  if (platform) {
-    drawStore.getDrawApp().updateGraphicAndRecord(platform, platformModel);
-  }
-}
 </script>

src/components/draw-app/properties/RectProperty.vue

@@ -66,35 +66,13 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { RectData } from 'src/drawApp/graphics/RectInteraction';
-import { Rect } from 'src/graphics/rect/Rect';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const rectModel = reactive(new RectData());
+const { data: rectModel, onUpdate } = useFormData(
-
+  new RectData(),
-drawStore.$subscribe;
+  drawStore.getDrawApp()
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Rect.Type) {
-      rectModel.copyFrom(val.saveData() as RectData);
-    }
-  }
 );
-
-onMounted(() => {
-  const Rect = drawStore.selectedGraphic as Rect;
-  if (Rect) {
-    rectModel.copyFrom(Rect.saveData());
-  }
-});
-
-function onUpdate() {
-  const Rect = drawStore.selectedGraphic as Rect;
-  if (Rect) {
-    drawStore.getDrawApp().updateGraphicAndRecord(Rect, rectModel);
-  }
-}
 </script>

src/components/draw-app/properties/RunLineProperty.vue

@@ -118,10 +118,11 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { RunLineData } from 'src/drawApp/graphics/RunLineInteraction';
 import { RunLine } from 'src/graphics/runLine/RunLine';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch, ref } from 'vue';
+import { onMounted, reactive } from 'vue';
 import { Point } from 'pixi.js';
 import {
   IStationLineData,
@@ -130,20 +131,13 @@ import {
 import { getLineList } from 'src/api/LineInfoApi';
 
 const drawStore = useDrawStore();
-const runLineModel = reactive(new RunLineData());
+const { data: runLineModel, onUpdate } = useFormData(
+  new RunLineData(),
+  useDrawStore().getDrawApp()
+);
 const stationLines: IStationLineData[] = reactive([]);
 const lineList: { label: string; value: string }[] = reactive([]);
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == RunLine.Type) {
-      runLineModel.copyFrom(val.saveData() as RunLineData);
-    }
-  }
-);
-
 onMounted(() => {
   getLineList()
     .then((res) => {
@@ -154,22 +148,12 @@ onMounted(() => {
     .catch((err) => {
       console.error('获取线路列表失败：' + err.message);
     });
-  const runLine = drawStore.selectedGraphic as RunLine;
   const stations = drawStore
     .getDrawApp()
     .queryStore.queryByType(StationLine.Type) as StationLine[];
   stations.forEach((item) => stationLines.push(item.datas));
-  if (runLine) {
-    runLineModel.copyFrom(runLine.saveData());
-  }
 });
 
-function onUpdate() {
-  const runLine = drawStore.selectedGraphic as RunLine;
-  if (runLine) {
-    drawStore.getDrawApp().updateGraphicAndRecord(runLine, runLineModel);
-  }
-}
 function generatePathLine() {
   const runLine = drawStore.selectedGraphic as RunLine;
   if (runLine) {
@@ -180,6 +164,7 @@ function generatePathLine() {
     runLine.generatePathLine(points1);
   }
 }
+
 function generateContainSta() {
   const runLine = drawStore.selectedGraphic as RunLine;
   if (runLine) {

src/components/draw-app/properties/SectionProperty.vue

@@ -73,16 +73,19 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { SectionData } from 'src/drawApp/graphics/SectionInteraction';
 import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
 import { Section, SectionType } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, shallowRef, watchEffect } from 'vue';
+import { computed } from 'vue';
 
 const drawStore = useDrawStore();
-
+const { data: sectionModel, onUpdate } = useFormData(
-const sectionModel = shallowRef(new SectionData());
+  new SectionData(),
+  drawStore.getDrawApp()
+);
 
 const sectionRelations = computed(() => {
   const section = drawStore.selectedGraphic as Section;
@@ -137,17 +140,4 @@ const axleCountingRelations = computed(() => {
     (relation) => relation.getOtherGraphic<AxleCounting>(section).datas.code
   );
 });
-watchEffect(() => {
-  const section = drawStore.selectedGraphic;
-  if (section && section instanceof Section) {
-    sectionModel.value = section.saveData();
-  }
-});
-
-const onUpdate = () => {
-  const section = drawStore.selectedGraphic as Section;
-  if (section) {
-    drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value);
-  }
-};
 </script>

src/components/draw-app/properties/SeparatorProperty.vue

@@ -16,13 +16,16 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { SeparatorData } from 'src/drawApp/graphics/SeparatorInteraction';
-import { Separator, separatorTypeEnum } from 'src/graphics/separator/Separator';
+import { separatorTypeEnum } from 'src/graphics/separator/Separator';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const separatorModel = reactive(new SeparatorData());
+const { data: separatorModel, onUpdate } = useFormData(
+  new SeparatorData(),
+  drawStore.getDrawApp()
+);
 
 const typeOptions = [
   { label: '区段分隔符', value: separatorTypeEnum.section },
@@ -30,28 +33,4 @@ const typeOptions = [
   { label: '左断路分隔符', value: separatorTypeEnum.endA },
   { label: '右断路分隔符', value: separatorTypeEnum.endB },
 ];
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Separator.Type) {
-      separatorModel.copyFrom(val.saveData() as SeparatorData);
-    }
-  }
-);
-
-onMounted(() => {
-  const Separator = drawStore.selectedGraphic as Separator;
-  if (Separator) {
-    separatorModel.copyFrom(Separator.saveData());
-  }
-});
-
-function onUpdate() {
-  const Separator = drawStore.selectedGraphic as Separator;
-  if (Separator) {
-    drawStore.getDrawApp().updateGraphicAndRecord(Separator, separatorModel);
-  }
-}
 </script>

src/components/draw-app/properties/SignalProperty.vue

@@ -10,7 +10,7 @@
     <q-select
       outlined
       style="margin-top: 10px"
-      v-model="kilometerSystem.coordinateSystem"
+      v-model="signalModel.kilometerSystem.coordinateSystem"
       :options="CoordinateSystemOptions"
       :map-options="true"
       :emit-value="true"
@@ -20,7 +20,7 @@
     <q-input
       outlined
       style="margin-top: 10px"
-      v-model.number="kilometerSystem.kilometer"
+      v-model.number="signalModel.kilometerSystem.kilometer"
       type="number"
       @blur="onUpdate"
       label="公里标(mm):"
@@ -29,14 +29,15 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { SignalData } from 'src/drawApp/graphics/SignalInteraction';
-import { Signal } from 'src/graphics/signal/Signal';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const signalModel = reactive(new SignalData());
+const { data: signalModel, onUpdate } = useFormData(
-const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
+  new SignalData(),
+  drawStore.getDrawApp()
+);
 
 const CoordinateSystemOptions = [
   { label: '车辆段', value: 'DEPOT' },
@@ -44,42 +45,4 @@ const CoordinateSystemOptions = [
   { label: '正线', value: 'MAIN_LINE' },
   { label: '换线', value: 'TRANSFER' },
 ];
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Signal.Type) {
-      signalModel.copyFrom(val.saveData() as SignalData);
-      if (signalModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          signalModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
-      }
-    }
-  }
-);
-
-onMounted(() => {
-  const signal = drawStore.selectedGraphic as Signal;
-  if (signal) {
-    signalModel.copyFrom(signal.saveData());
-    if (signalModel.kilometerSystem) {
-      kilometerSystem.coordinateSystem =
-        signalModel.kilometerSystem.coordinateSystem;
-      kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
-    }
-  }
-});
-
-function onUpdate() {
-  const signal = drawStore.selectedGraphic as Signal;
-  signalModel.kilometerSystem = {
-    coordinateSystem: kilometerSystem.coordinateSystem,
-    kilometer: kilometerSystem.kilometer,
-  };
-  if (signal) {
-    drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel);
-  }
-}
 </script>

src/components/draw-app/properties/StationLineProperty.vue

@@ -24,64 +24,27 @@
     <q-select
       outlined
       @blur="onUpdate"
-      v-model="hasTransfer"
+      v-model="stationLineModel.hasTransfer"
       :options="optionsCircle"
       label="是否有换乘"
+      map-options
+      emit-value
     />
   </q-form>
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { StationLineData } from 'src/drawApp/graphics/StationLineInteraction';
-import { StationLine } from 'src/graphics/stationLine/StationLine';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const stationLineModel = reactive(new StationLineData());
+const { data: stationLineModel, onUpdate } = useFormData(
-const hasTransfer = ref('是');
+  new StationLineData(),
-const optionsCircle = ['是', '否'];
+  drawStore.getDrawApp()
-enum showSelect {
-  是 = 'true',
-  否 = 'false',
-}
-enum showSelectData {
-  true = '是',
-  false = '否',
-}
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == StationLine.Type) {
-      stationLineModel.copyFrom(val.saveData() as StationLineData);
-      hasTransfer.value = (showSelectData as never)[
-        stationLineModel.hasTransfer + ''
-      ];
-    }
-  }
 );
-
+const optionsCircle = [
-onMounted(() => {
+  { label: '是', value: true },
-  const stationLine = drawStore.selectedGraphic as StationLine;
+  { label: '否', value: false },
-  if (stationLine) {
+];
-    stationLineModel.copyFrom(stationLine.saveData());
-    hasTransfer.value = (showSelectData as never)[
-      stationLineModel.hasTransfer + ''
-    ];
-  }
-});
-
-function onUpdate() {
-  stationLineModel.hasTransfer = JSON.parse(
-    (showSelect as never)[hasTransfer.value]
-  );
-  const stationLine = drawStore.selectedGraphic as StationLine;
-  if (stationLine) {
-    drawStore
-      .getDrawApp()
-      .updateGraphicAndRecord(stationLine, stationLineModel);
-  }
-}
 </script>

src/components/draw-app/properties/StationProperty.vue

@@ -22,7 +22,7 @@
     <q-select
       outlined
       style="margin-top: 10px"
-      v-model="kilometerSystem.coordinateSystem"
+      v-model="stationModel.kilometerSystem.coordinateSystem"
       :options="CoordinateSystemOptions"
       :map-options="true"
       :emit-value="true"
@@ -32,7 +32,7 @@
     <q-input
       outlined
       style="margin-top: 10px"
-      v-model.number="kilometerSystem.kilometer"
+      v-model.number="stationModel.kilometerSystem.kilometer"
       type="number"
       @blur="onUpdate"
       label="公里标(mm):"
@@ -40,40 +40,38 @@
     <q-select
       outlined
       @blur="onUpdate"
-      v-model="hasControl"
+      v-model="stationModel.hasControl"
       :options="optionsControl"
       label="是否有控制"
+      map-options
+      emit-value
     />
     <q-select
       outlined
       @blur="onUpdate"
-      v-model="concentrationStations"
+      v-model="stationModel.concentrationStations"
       :options="optionsControl"
       label="是否集中站"
+      map-options
+      emit-value
     />
   </q-form>
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { StationData } from 'src/drawApp/graphics/StationInteraction';
-import { Station } from 'src/graphics/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const stationModel = reactive(new StationData());
+const { data: stationModel, onUpdate } = useFormData(
-const hasControl = ref('是');
+  new StationData(),
-const concentrationStations = ref('否');
+  drawStore.getDrawApp()
-const optionsControl = ['是', '否'];
+);
-enum showSelect {
+const optionsControl = [
-  是 = 'true',
+  { label: '是', value: true },
-  否 = 'false',
+  { label: '否', value: false },
-}
+];
-enum showSelectData {
-  true = '是',
-  false = '否',
-}
-const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
 
 const CoordinateSystemOptions = [
   { label: '车辆段', value: 'DEPOT' },
@@ -81,56 +79,4 @@ const CoordinateSystemOptions = [
   { label: '正线', value: 'MAIN_LINE' },
   { label: '换线', value: 'TRANSFER' },
 ];
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Station.Type) {
-      stationModel.copyFrom(val.saveData() as StationData);
-      hasControl.value = (showSelectData as never)[
-        stationModel.hasControl + ''
-      ];
-      concentrationStations.value = (showSelectData as never)[
-        stationModel.concentrationStations + ''
-      ];
-      if (stationModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          stationModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = stationModel.kilometerSystem.kilometer;
-      }
-    }
-  }
-);
-
-onMounted(() => {
-  const station = drawStore.selectedGraphic as Station;
-  if (station) {
-    stationModel.copyFrom(station.saveData());
-    hasControl.value = (showSelectData as never)[stationModel.hasControl + ''];
-    concentrationStations.value = (showSelectData as never)[
-      stationModel.concentrationStations + ''
-    ];
-    if (stationModel.kilometerSystem) {
-      kilometerSystem.coordinateSystem =
-        stationModel.kilometerSystem.coordinateSystem;
-      kilometerSystem.kilometer = stationModel.kilometerSystem.kilometer;
-    }
-  }
-});
-
-function onUpdate() {
-  stationModel.hasControl = JSON.parse((showSelect as never)[hasControl.value]);
-  stationModel.concentrationStations = JSON.parse(
-    (showSelect as never)[concentrationStations.value]
-  );
-  stationModel.kilometerSystem = {
-    coordinateSystem: kilometerSystem.coordinateSystem,
-    kilometer: kilometerSystem.kilometer,
-  };
-  const station = drawStore.selectedGraphic as Station;
-  if (station) {
-    drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
-  }
-}
 </script>

src/components/draw-app/properties/TrainProperty.vue

@@ -1,84 +0,0 @@
-<template>
-  <q-form>
-    <q-input outlined readonly v-model="trainModel.id" label="id" hint="" />
-    <q-input
-      outlined
-      v-model="trainModel.code"
-      label="车号"
-      hint=""
-      @blur="onUpdate"
-    />
-    <q-select
-      outlined
-      @blur="onUpdate"
-      v-model="hasBorder"
-      :options="optionsDoor"
-      label="是否有边框"
-    />
-    <q-select
-      outlined
-      @blur="onUpdate"
-      v-model="trainDirection"
-      :options="optionsDirection"
-      label="行驶方向"
-    />
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { TrainData } from 'src/drawApp/graphics/TrainInteraction';
-import { Train } from 'src/graphics/train/Train';
-import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
-
-const drawStore = useDrawStore();
-const trainModel = reactive(new TrainData());
-const hasBorder = ref('是');
-const optionsDoor = ['是', '否'];
-const trainDirection = ref('向左');
-const optionsDirection = ['向左', '向右'];
-enum showSelect {
-  是 = 'true',
-  否 = 'false',
-  向左 = 'left',
-  向右 = 'right',
-}
-enum showSelectData {
-  true = '是',
-  false = '否',
-  left = '向左',
-  right = '向右',
-}
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Train.Type) {
-      trainModel.copyFrom(val.saveData() as TrainData);
-      hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
-      trainDirection.value = (showSelectData as never)[
-        trainModel.trainDirection
-      ];
-    }
-  }
-);
-
-onMounted(() => {
-  const train = drawStore.selectedGraphic as Train;
-  if (train) {
-    trainModel.copyFrom(train.saveData());
-    hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
-    trainDirection.value = (showSelectData as never)[trainModel.trainDirection];
-  }
-});
-
-function onUpdate() {
-  trainModel.hasBorder = JSON.parse((showSelect as never)[hasBorder.value]);
-  trainModel.trainDirection = (showSelect as never)[trainDirection.value];
-  const train = drawStore.selectedGraphic as Train;
-  if (train) {
-    drawStore.getDrawApp().updateGraphicAndRecord(train, trainModel);
-  }
-}
-</script>

src/components/draw-app/properties/TrainWindowProperty.vue

@@ -55,42 +55,20 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { TrainWindowData } from 'src/drawApp/graphics/TrainWindowInteraction';
 import { LogicSection } from 'src/graphics/logicSection/LogicSection';
 import { Section } from 'src/graphics/section/Section';
 import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed } from 'vue';
 
 const drawStore = useDrawStore();
-const trainWindowModel = reactive(new TrainWindowData());
+const { data: trainWindowModel, onUpdate } = useFormData(
-
+  new TrainWindowData(),
-drawStore.$subscribe;
+  drawStore.getDrawApp()
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == TrainWindow.Type) {
-      trainWindowModel.copyFrom(val.saveData() as TrainWindowData);
-    }
-  }
 );
 
-onMounted(() => {
-  const trainWindow = drawStore.selectedGraphic as TrainWindow;
-  if (trainWindow) {
-    trainWindowModel.copyFrom(trainWindow.saveData());
-  }
-});
-
-function onUpdate() {
-  const trainWindow = drawStore.selectedGraphic as TrainWindow;
-  if (trainWindow) {
-    drawStore
-      .getDrawApp()
-      .updateGraphicAndRecord(trainWindow, trainWindowModel);
-  }
-}
-
 const relatedLogicSection = computed((): LogicSection[] => {
   if (
     drawStore.selectedGraphic &&

src/components/draw-app/properties/TurnoutProperty.vue

@@ -10,7 +10,7 @@
     <q-select
       outlined
       style="margin-top: 10px"
-      v-model="kilometerSystem[0].coordinateSystem"
+      v-model="turnoutModel.kilometerSystem[0].coordinateSystem"
       :options="CoordinateSystemOptions"
       :map-options="true"
       :emit-value="true"
@@ -20,7 +20,7 @@
     <q-input
       outlined
       style="margin-top: 10px"
-      v-model.number="kilometerSystem[0].kilometer"
+      v-model.number="turnoutModel.kilometerSystem[0].kilometer"
       type="number"
       @blur="onUpdate"
       label="公里标(mm):"
@@ -28,7 +28,7 @@
     <q-select
       outlined
       style="margin-top: 10px"
-      v-model="kilometerSystem[1].coordinateSystem"
+      v-model="turnoutModel.kilometerSystem[1].coordinateSystem"
       :options="CoordinateSystemOptions"
       :map-options="true"
       :emit-value="true"
@@ -38,7 +38,7 @@
     <q-input
       outlined
       style="margin-top: 10px"
-      v-model.number="kilometerSystem[1].kilometer"
+      v-model.number="turnoutModel.kilometerSystem[1].kilometer"
       type="number"
       @blur="onUpdate"
       label="公里标(mm):"
@@ -71,24 +71,24 @@
 </template>
 
 <script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction';
 import { Section } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, reactive, shallowRef, watchEffect } from 'vue';
+import { computed } from 'vue';
 
 const drawStore = useDrawStore();
+const { data: turnoutModel, onUpdate } = useFormData(
+  new TurnoutData(),
+  drawStore.getDrawApp()
+);
 const CoordinateSystemOptions = [
   { label: '车辆段', value: 'DEPOT' },
   { label: '停车场', value: 'PARKING_LOT' },
   { label: '正线', value: 'MAIN_LINE' },
   { label: '换线', value: 'TRANSFER' },
 ];
-const turnoutModel = shallowRef(new TurnoutData());
-const kilometerSystem = reactive([
-  { coordinateSystem: '', kilometer: 0 },
-  { coordinateSystem: '', kilometer: 0 },
-]);
 
 const sectionRelations = computed(() => {
   const turnout = drawStore.selectedGraphic as Turnout;
@@ -124,29 +124,4 @@ const turnoutRelations = computed(() => {
       }(${relation.getOtherRelationParam(turnout).param})`
   );
 });
-
-watchEffect(() => {
-  const turnout = drawStore.selectedGraphic;
-  if (turnout && turnout instanceof Turnout) {
-    turnoutModel.value = turnout.saveData();
-    if (turnoutModel.value.kilometerSystem.length > 0) {
-      kilometerSystem.forEach((ks, i) => {
-        ks.coordinateSystem =
-          turnoutModel.value.kilometerSystem[i].coordinateSystem;
-        ks.kilometer = turnoutModel.value.kilometerSystem[i].kilometer;
-      });
-    }
-  }
-});
-
-const onUpdate = () => {
-  const turnout = drawStore.selectedGraphic as Turnout;
-  turnoutModel.value.kilometerSystem = kilometerSystem.map((ks) => ({
-    coordinateSystem: ks.coordinateSystem,
-    kilometer: ks.kilometer,
-  }));
-  if (turnout) {
-    drawStore.getDrawApp().updateGraphicAndRecord(turnout, turnoutModel.value);
-  }
-};
 </script>

src/components/rangeConfigApp/RangeConfig.vue

@@ -130,6 +130,8 @@ const optionsAlertType = [
   '计轴大面积橙光带',
   '道岔大面积失表',
   '列车信号故障',
+  '联锁区红光带',
+  '联锁区橙光带',
 ];
 
 enum DeviceType {

src/components/rangeConfigApp/RangeList.vue

@@ -52,28 +52,25 @@ watch(
 const onRequest: QTable['onRequest'] = async (props) => {
   const { page, rowsPerPage } = props.pagination;
   loading.value = true;
-  let resp;
   try {
-    resp = await getDeviceAreaList({
+    const resp = await getDeviceAreaList({
       lineId,
       current: page,
       size: rowsPerPage,
       areaName: searchAreaName.value,
     });
-  } catch (error) {
+    pagination.value.page = resp.current;
-    errorNotify('没有所查区域名称', '');
+    pagination.value.rowsNumber = resp.total;
-    resp = await getDeviceAreaList({
+    pagination.value.rowsPerPage = resp.size;
-      lineId,
+    rows.value = resp.records;
-      current: page,
+  } catch (err) {
-      size: rowsPerPage,
+    $q.notify({
+      type: 'negative',
+      message: '无法获取范围列表',
     });
+  } finally {
+    loading.value = false;
   }
-  pagination.value.page = resp.current;
-  pagination.value.rowsNumber = resp.total;
-  pagination.value.rowsPerPage = resp.size;
-
-  rows.value = resp.records;
-  loading.value = false;
 };
 
 const onDialogShow = () => {

src/configs/UrlManage.ts

@@ -13,3 +13,12 @@ export function getHttpBase() {
 export function getWebsocketUrl() {
   return `ws://${getHost()}/ws-default`;
 }
+
+export function getShowSetAlarmTextButton() {
+  let show = false;
+  const host = window.location.hostname;
+  if (process.env.NODE_ENV == 'development' || host == '192.168.3.233') {
+    show = true;
+  }
+  return show;
+}

src/drawApp/graphics/AxleCountingInteraction.ts

@@ -33,6 +33,9 @@ export class AxleCountingData
     this.data.code = v;
   }
   get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem) {
+      this.data.kilometerSystem = new graphicData.KilometerSystem();
+    }
     return this.data.kilometerSystem;
   }
   set kilometerSystem(v: KilometerSystem) {

src/drawApp/graphics/LinkInteraction.ts

@@ -6,7 +6,7 @@ import { GraphicDataBase } from './GraphicDataBase';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
@@ -119,12 +119,12 @@ const EpEditMenu: ContextMenu = ContextMenu.init({
 
 export class DrawLinkPlugin extends GraphicInteractionPlugin<Link> {
   static Name = 'link_draw_right_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(DrawLinkPlugin.Name, app);
     app.registerMenu(LinkEditMenu);
     app.registerMenu(EpEditMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new DrawLinkPlugin(app);
   }
   filter(...grahpics: JlGraphic[]): Link[] | undefined {

src/drawApp/graphics/LogicSectionInteraction.ts

@@ -10,7 +10,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
 import { state } from 'src/protos/device_status';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
@@ -81,14 +81,14 @@ const LogicSectionMenu = ContextMenu.init({
 
 export class LogicSectionOperationPlugin extends GraphicInteractionPlugin<LogicSection> {
   static Name = 'logic_section_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(LogicSectionOperationPlugin.Name, app);
     app.registerMenu(LogicSectionMenu);
   }
   filter(...grahpics: JlGraphic[]): LogicSection[] | undefined {
     return grahpics.filter((g): g is LogicSection => g instanceof LogicSection);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new LogicSectionOperationPlugin(app);
   }
   bind(g: LogicSection): void {

src/drawApp/graphics/PlatformInteraction.ts

@@ -10,7 +10,7 @@ import { state } from 'src/protos/device_status';
 import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
@@ -224,11 +224,11 @@ const PlatformOperateMenu: ContextMenu = ContextMenu.init({
 
 export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platform> {
   static Name = 'platform_operate_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(PlatformOperateInteraction.Name, app);
     app.registerMenu(PlatformOperateMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new PlatformOperateInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Platform[] | undefined {

src/drawApp/graphics/PolygonInteraction.ts

@@ -4,7 +4,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase } from './GraphicDataBase';
 import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
@@ -128,12 +128,12 @@ const EpEditMenu: ContextMenu = ContextMenu.init({
 
 export class DrawPolygonPlugin extends GraphicInteractionPlugin<Polygon> {
   static Name = 'polygon_draw_right_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(DrawPolygonPlugin.Name, app);
     app.registerMenu(PolygonEditMenu);
     app.registerMenu(EpEditMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new DrawPolygonPlugin(app);
   }
   filter(...grahpics: JlGraphic[]): Polygon[] | undefined {

src/drawApp/graphics/RunLineInteraction.ts

@@ -8,7 +8,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase } from './GraphicDataBase';
 import {
   GraphicInteractionPlugin,
-  GraphicApp,
+  IGraphicApp,
   JlGraphic,
 } from 'src/jl-graphic';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
@@ -133,12 +133,12 @@ const EpEditMenu: ContextMenu = ContextMenu.init({
 
 export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
   static Name = 'runline_draw_right_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(DrawRunLinePlugin.Name, app);
     app.registerMenu(RunLineEditMenu);
     app.registerMenu(EpEditMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new DrawRunLinePlugin(app);
   }
   filter(...grahpics: JlGraphic[]): RunLine[] | undefined {
@@ -221,11 +221,11 @@ export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
 
 export class RunLineOperateInteraction extends GraphicInteractionPlugin<RunLine> {
   static Name = 'runLine_operate_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(RunLineOperateInteraction.Name, app);
     app.registerMenu(EpEditMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new RunLineOperateInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): RunLine[] | undefined {

src/drawApp/graphics/SignalInteraction.ts

@@ -9,7 +9,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import {
   GraphicInteractionPlugin,
-  GraphicApp,
+  IGraphicApp,
   JlGraphic,
 } from 'src/jl-graphic';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
@@ -48,6 +48,9 @@ export class SignalData extends GraphicDataBase implements ISignalData {
     this.data.mirror = v;
   }
   get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem) {
+      this.data.kilometerSystem = new graphicData.KilometerSystem();
+    }
     return this.data.kilometerSystem;
   }
   set kilometerSystem(v: KilometerSystem) {
@@ -283,11 +286,11 @@ const SignalOperateMenu: ContextMenu = ContextMenu.init({
 });
 export class DrawSignalInteraction extends GraphicInteractionPlugin<Signal> {
   static Name = 'signal_draw_right_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(DrawSignalInteraction.Name, app);
     app.registerMenu(SignalEditMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new DrawSignalInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Signal[] | undefined {
@@ -316,11 +319,11 @@ export class DrawSignalInteraction extends GraphicInteractionPlugin<Signal> {
 
 export class SignalOperateInteraction extends GraphicInteractionPlugin<Signal> {
   static Name = 'signal_operate_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(SignalOperateInteraction.Name, app);
     app.registerMenu(SignalOperateMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new SignalOperateInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Signal[] | undefined {

src/drawApp/graphics/StationInteraction.ts

@@ -10,7 +10,7 @@ import { state } from 'src/protos/device_status';
 import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
@@ -42,6 +42,9 @@ export class StationData extends GraphicDataBase implements IStationData {
     this.data.code = v;
   }
   get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem) {
+      this.data.kilometerSystem = new graphicData.KilometerSystem();
+    }
     return this.data.kilometerSystem;
   }
   set kilometerSystem(v: KilometerSystem) {
@@ -160,11 +163,11 @@ const StationOperateMenu: ContextMenu = ContextMenu.init({
 
 export class StationOperateInteraction extends GraphicInteractionPlugin<Station> {
   static Name = 'station_operate_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(StationOperateInteraction.Name, app);
     app.registerMenu(StationOperateMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new StationOperateInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Station[] | undefined {

src/drawApp/graphics/TrainInteraction.ts

@@ -7,7 +7,7 @@ import { train } from 'src/protos/train';
 import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
   VectorText,
@@ -269,12 +269,12 @@ const TrainOperateMenu: ContextMenu = ContextMenu.init({
 export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
   static Name = 'train_operate_menu';
   hoverLaber: TrainHoverLabel;
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(TrainOperateInteraction.Name, app);
     this.hoverLaber = new TrainHoverLabel();
     app.registerMenu(TrainOperateMenu);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new TrainOperateInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Train[] | undefined {

src/drawApp/graphics/TurnoutInteraction.ts

@@ -10,7 +10,7 @@ import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
 import { KilometerSystem } from 'src/graphics/signal/Signal';
 import { state } from 'src/protos/device_status';
 import {
-  GraphicApp,
+  IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
@@ -139,14 +139,14 @@ const TurnoutOperateMenu = ContextMenu.init({
 
 export class TurnoutOperationPlugin extends GraphicInteractionPlugin<Turnout> {
   static Name = 'turnout_operate_menu';
-  constructor(app: GraphicApp) {
+  constructor(app: IGraphicApp) {
     super(TurnoutOperationPlugin.Name, app);
     app.registerMenu(TurnoutOperateMenu);
   }
   filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
     return grahpics.filter((g): g is Turnout => g instanceof Turnout);
   }
-  static init(app: GraphicApp) {
+  static init(app: IGraphicApp) {
     return new TurnoutOperationPlugin(app);
   }
   bind(g: Turnout): void {
@@ -314,7 +314,12 @@ export class TurnoutData extends GraphicDataBase implements ITurnoutData {
     this.data.pcRef = ref;
   }
   get kilometerSystem(): KilometerSystem[] {
-    return this.data.kilometerSystem;
+    return this.data.kilometerSystem.length > 0
+      ? this.data.kilometerSystem
+      : (this.data.kilometerSystem = [
+          new graphicData.KilometerSystem(),
+          new graphicData.KilometerSystem(),
+        ]);
   }
   set kilometerSystem(value: KilometerSystem[]) {
     this.data.kilometerSystem = value.map(

src/layouts/MainLayout.vue

@@ -17,11 +17,18 @@
         <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="故障设置"
+          label="故障演练"
           class="q-mr-sm"
-          @click="alertSetShow = true"
+          @click="openSetAlarmMockDialog"
+        />
+        <q-btn
+          v-if="showSetAlarmTextButton && route.path.includes('line/monitor')"
+          color="info"
+          label="故障测试"
+          class="q-mr-sm"
+          @click="openSetAlarmTextDialog"
         />
 
         <div class="q-gutter-sm row items-center no-wrap">
@@ -84,7 +91,7 @@
   >
     <q-card style="width: 300px" class="q-pa-md">
       <q-form ref="myForm" @submit="alarmMockSet" class="q-gutter-md">
-        <div class="text-h6">设置模拟故障</div>
+        <div class="text-h6">设置故障演练</div>
         <q-input
           outlined
           label="线路ID"
@@ -119,19 +126,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 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 { saveAlertTypeData } from 'src/components/alarm/alarmInfoEnum';
+import setAlarmText from 'src/components/alarm/setAlarmText.vue';
+import setAlarmMock from 'src/components/alarm/setAlarmMock.vue';
 import NCC from '/logo/NCC_白.png';
+import { getShowSetAlarmTextButton } from 'src/configs/UrlManage';
 
 const leftDrawerOpen = ref(false);
 const router = useRouter();
@@ -147,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;
@@ -162,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: '登出确认',
@@ -174,61 +196,7 @@ function logOut() {
   });
 }
 
-//模拟报警
+function backConfirm() {
-const $q = useQuasar();
+  router.replace('/monitor');
-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: '无法设置模拟故障',
-    });
-  }
 }
 </script>

src/pages/AlarmInfoList.vue

@@ -233,6 +233,8 @@ const optionsAlertType = [
   '计轴大面积橙光带',
   '道岔大面积失表',
   '列车信号故障',
+  '联锁区红光带',
+  '联锁区橙光带',
 ];
 function searchDecisionInfo() {
   searchDialog.value = false;

src/pages/AlarmTipTimeConfig.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="报警提示时间配置"
+      :style="{ height: tableHeight + 'px' }"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <q-btn color="primary" label="新建" @click="createFormShow = true" />
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="编辑"
+              @click="editData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog
+      v-model="createFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 350px">
+        <q-form
+          ref="myForm"
+          @submit="onCreate"
+          @reset="onReset"
+          class="q-gutter-md"
+        >
+          <q-card-section class="q-gutter-sm">
+            <div class="text-h6">
+              {{ creatForm.id ? '编辑时间配置' : '新建时间配置' }}
+            </div>
+            <!--  <q-input
+              outlined
+              label="时间名称"
+              v-model="creatForm.timeName"
+              lazy-rules
+              :rules="[(val) => val.trim() != '' || '时间名称不能为空']"
+            /> -->
+            <q-input
+              outlined
+              label="开始时间"
+              type="number"
+              v-model.number="creatForm.startHour"
+              lazy-rules
+              :rules="[(val) => val != '' || '时间名称不能为空']"
+            />
+            <q-input
+              outlined
+              label="结束时间"
+              type="number"
+              v-model.number="creatForm.endHour"
+              lazy-rules
+              :rules="[(val) => val != '' || '时间名称不能为空']"
+            />
+            <q-select
+              outlined
+              label="时间类型"
+              v-model="creatForm.timeType"
+              :options="optionsTimeType"
+              :rules="[(val) => val.trim() != '' || '时间类型不能为空']"
+            />
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn color="primary" label="创建" type="submit" />
+            <q-btn label="取消" type="reset" v-close-popup />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn, QForm, QTable } from 'quasar';
+import {
+  alarmTipTimeConfigPageQuery,
+  TimeConfigItem,
+  creatOrEditTimeConfig,
+  ShowTipTimeConfig,
+  TipTimeConfig,
+} from '../api/AlarmTipTimeConfig';
+import { ApiError } from 'src/boot/axios';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'id',
+    label: '编号',
+    field: 'id',
+    required: true,
+    align: 'center',
+  },
+  /* {
+    name: 'timeName',
+    label: '时间名称',
+    field: 'timeName',
+    align: 'center',
+  }, */
+  {
+    name: 'startHour',
+    label: '开始小时',
+    field: 'startHour',
+    align: 'center',
+  },
+  {
+    name: 'endHour',
+    label: '结束小时',
+    field: 'endHour',
+    align: 'center',
+  },
+  {
+    name: 'timeType',
+    label: '时间类型',
+    field: (row) => {
+      if (row.timeType) {
+        return (ShowTipTimeConfig as never)[row.timeType + ''];
+      }
+    },
+    align: 'center',
+  },
+
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  loading.value = true;
+  try {
+    let response = await alarmTipTimeConfigPageQuery({
+      current: page,
+      size: rowsPerPage,
+    });
+
+    const pageData = response;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取时间配置列表',
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    tableRef.value.requestServerInteraction();
+  });
+});
+
+const createFormShow = ref(false);
+const myForm = ref<QForm | null>(null);
+const creatForm = reactive({
+  id: '',
+  timeName: '',
+  startHour: '',
+  endHour: '',
+  timeType: '',
+  publicPeak: '',
+});
+const optionsTimeType = ['早高峰', '晚高峰', '低峰'];
+
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      operateDisabled.value = true;
+      try {
+        const params = {
+          id: +creatForm.id,
+          timeName: creatForm.timeName,
+          startHour: creatForm.startHour,
+          endHour: creatForm.endHour,
+          timeType: (TipTimeConfig as never)[creatForm.timeType],
+        };
+        await creatOrEditTimeConfig(params);
+        onReset();
+        createFormShow.value = false;
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        const apiErr = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: apiErr.title,
+        });
+      } finally {
+        operateDisabled.value = false;
+      }
+    }
+  });
+}
+
+function editData(row: TimeConfigItem) {
+  creatForm.id = row.id + '';
+  creatForm.timeName = row.timeName;
+  creatForm.startHour = row.startHour;
+  creatForm.endHour = row.endHour;
+  creatForm.timeType = (ShowTipTimeConfig as never)[row.timeType + ''];
+  createFormShow.value = true;
+}
+
+function onReset() {
+  creatForm.id = '';
+  creatForm.timeName = '';
+  creatForm.startHour = '';
+  creatForm.endHour = '';
+  creatForm.timeType = '';
+  creatForm.publicPeak = '';
+  myForm.value?.resetValidation();
+}
+</script>

src/pages/DecisionInfoManage.vue

@@ -31,7 +31,7 @@
           class="q-mr-md"
           color="primary"
           label="查询"
-          @click="searchDialog = true"
+          @click="openSearchDialog"
         />
         <q-btn color="primary" label="新建" @click="createFormShow = true" />
       </template>
@@ -81,12 +81,13 @@
               :rules="[(val) => val.length > 0 || '请选择故障类型！']"
               @blur="searchLocationType"
             />
-            <!--  <q-select
+            <q-select
               outlined
               label="时间定义类型"
-              v-model="creatForm.timeType"
+              v-model="creatForm.tipTimeIds"
+              multiple
               :options="optionsTimeType"
-            /> -->
+            />
             <q-select
               outlined
               label="地点定义类型"
@@ -158,7 +159,6 @@ import {
   alarmInfoPageQuery,
   deleteAlarmInfo,
   createAlarmInfo,
-  updataAlarmInfo,
   AlarmInfoListItem,
   getDeviceAreaByAlarmType,
   AreaConfigItem,
@@ -167,6 +167,8 @@ import {
   showAlertTypeData,
   saveAlertTypeData,
 } from 'src/components/alarm/alarmInfoEnum';
+import { ApiError } from 'src/boot/axios';
+import { ShowTipTimeConfig, TipTimeConfig } from 'src/api/AlarmTipTimeConfig';
 
 const $q = useQuasar();
 
@@ -199,12 +201,19 @@ const columnDefs: QTableColumn[] = [
     },
     align: 'center',
   },
-  /*   {
+  {
     name: 'timeType',
     label: '时间定义类型',
-    field: 'timeType',
+    field: (row: AlarmInfoListItem) => {
+      if (row.timeConfigList) {
+        const ref = row.timeConfigList.map(
+          (timeConfig) => (ShowTipTimeConfig as never)[timeConfig.timeType + '']
+        );
+        return ref.join('\\');
+      }
+    },
     align: 'center',
-  }, */
+  },
   {
     name: 'areaConfigId',
     label: '地点定义类型',
@@ -284,15 +293,13 @@ const filter = ref({
   alertType: '',
   areaConfigName: '',
 });
+function openSearchDialog() {
+  filter.value = { alertType: '', areaConfigName: '' };
+  searchDialog.value = true;
+}
 function searchDecisionInfo() {
   searchDialog.value = false;
-  try {
+  tableRef.value.requestServerInteraction();
-    tableRef.value.requestServerInteraction();
-  } finally {
-    setTimeout(() => {
-      filter.value = { alertType: '', areaConfigName: '' };
-    });
-  }
 }
 
 const createFormShow = ref(false);
@@ -300,7 +307,7 @@ const myForm = ref<QForm | null>(null);
 const creatForm = reactive({
   id: '',
   alertType: '',
-  timeType: '',
+  tipTimeIds: [],
   areaConfigId: '',
   drivingInfo: '',
   submissionInfo: '',
@@ -323,20 +330,10 @@ const optionsAlertType = [
   '计轴大面积橙光带',
   '道岔大面积失表',
   '列车信号故障',
+  '联锁区红光带',
+  '联锁区橙光带',
 ];
-const optionsTimeType = ['CLOCK_7_9', 'CLOCK_7_9_AND_19_21', '无'];
 let optionsLocationType = ref<string[]>([]);
-
-function onReset() {
-  creatForm.id = '';
-  creatForm.alertType = '';
-  creatForm.timeType = '';
-  creatForm.areaConfigId = '';
-  creatForm.drivingInfo = '';
-  creatForm.submissionInfo = '';
-  myForm.value?.resetValidation();
-}
-
 let optionsLocationList: AreaConfigItem[] = [];
 async function searchLocationType() {
   try {
@@ -354,6 +351,8 @@ async function searchLocationType() {
   }
 }
 
+const optionsTimeType = ['早高峰', '晚高峰', '低峰'];
+
 function onCreate() {
   myForm.value?.validate().then(async (res) => {
     if (res) {
@@ -366,10 +365,14 @@ function onCreate() {
             break;
           }
         }
+        const tipTimeIds: string[] = [];
+        creatForm.tipTimeIds?.forEach((tipTimeId) => {
+          tipTimeIds.push((TipTimeConfig as never)[tipTimeId + '']);
+        });
         const params = {
           id: +creatForm.id,
           alertType: (saveAlertTypeData as never)[creatForm.alertType],
-          timeType: creatForm.timeType,
+          tipTimeIds: tipTimeIds,
           areaConfigId: areaConfigId as number,
           drivingInfo: creatForm.drivingInfo,
           submissionInfo: creatForm.submissionInfo,
@@ -380,18 +383,15 @@ function onCreate() {
         if (creatForm.submissionInfo) {
           params.submissionInfo = JSON.stringify(creatForm.submissionInfo);
         }
-        if (creatForm.id) {
+        await createAlarmInfo(params);
-          await updataAlarmInfo(+creatForm.id, params);
-        } else {
-          await createAlarmInfo(params);
-        }
         onReset();
         createFormShow.value = false;
         tableRef.value.requestServerInteraction(); // 刷新列表
       } catch (err) {
+        const apiErr = err as ApiError;
         $q.notify({
           type: 'negative',
-          message: '创建或修改决策信息错误',
+          message: apiErr.title,
         });
       } finally {
         operateDisabled.value = false;
@@ -403,7 +403,9 @@ function onCreate() {
 function editData(row: AlarmInfoListItem) {
   creatForm.id = row.id + '';
   creatForm.alertType = (showAlertTypeData as never)[row.alertType + ''];
-  creatForm.timeType = row.timeType || '';
+  creatForm.tipTimeIds = row.timeConfigList?.map(
+    (timeConfig) => (ShowTipTimeConfig as never)[timeConfig.timeType + '']
+  );
   creatForm.areaConfigId = row.areaConfigName as string;
   creatForm.drivingInfo = row.drivingInfo ? JSON.parse(row.drivingInfo) : '';
   creatForm.submissionInfo = row.submissionInfo
@@ -434,6 +436,16 @@ async function deleteData(row: AlarmInfoListItem) {
       operateDisabled.value = false;
     });
 }
+
+function onReset() {
+  creatForm.id = '';
+  creatForm.alertType = '';
+  creatForm.tipTimeIds = [];
+  creatForm.areaConfigId = '';
+  creatForm.drivingInfo = '';
+  creatForm.submissionInfo = '';
+  myForm.value?.resetValidation();
+}
 </script>
 
 <style scoped>

src/router/routes.ts

@@ -50,6 +50,11 @@ const routes: RouteRecordRaw[] = [
         name: 'thresholdValue',
         component: () => import('pages/AlarmThresholdValue.vue'),
       },
+      {
+        path: 'alarmTipTimeConfig',
+        name: 'alarmTipTimeConfig',
+        component: () => import('pages/AlarmTipTimeConfig.vue'),
+      },
     ],
   },
   {

src/stores/draw-store.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { destroyDrawApp, getDrawApp, initDrawApp } from 'src/drawApp';
 import { DrawAssistant, IJlCanvas, IDrawApp, JlGraphic } from 'src/jl-graphic';
+import { markRaw } from 'vue';
 
 export const useDrawStore = defineStore('draw', {
   state: () => ({
@@ -65,8 +66,8 @@ export const useDrawStore = defineStore('draw', {
           }
         }
       });
-      app.on('graphicselectedchange', () => {
+      app.on('graphicselected', (graphics) => {
-        this.selectedGraphics = app.selectedGraphics;
+        this.selectedGraphics = markRaw(graphics);
       });
       this.selectedGraphics = [];
       return app;

src/stores/line-net-store.ts

@@ -5,6 +5,7 @@ import {
   getLineNetApp,
   destroyLineNetApp,
 } from 'src/drawApp/lineNetApp';
+import { markRaw } from 'vue';
 export interface AlarmInfo {
   id: string;
   level: string;
@@ -57,8 +58,8 @@ export const useLineNetStore = defineStore('lineNet', {
     },
     initLineNetApp() {
       const app = initLineNetApp();
-      app.on('graphicselectedchange', () => {
+      app.on('graphicselected', (graphics) => {
-        this.selectedGraphics = app.selectedGraphics;
+        this.selectedGraphics = markRaw(graphics);
       });
       this.selectedGraphics = [];
       return app;

src/stores/line-store.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { IJlCanvas, JlGraphic, IGraphicApp } from 'src/jl-graphic';
 import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp';
+import { markRaw } from 'vue';
 
 export const useLineStore = defineStore('line', {
   state: () => ({
@@ -39,8 +40,8 @@ export const useLineStore = defineStore('line', {
     initLineApp(lineId: number) {
       this.setLineId(lineId);
       const app = initLineApp(lineId);
-      app.on('graphicselectedchange', () => {
+      app.on('graphicselected', (graphics) => {
-        this.selectedGraphics = app.selectedGraphics;
+        this.selectedGraphics = markRaw(graphics);
       });
       this.selectedGraphics = [];
       return app;