merge

rts-sim-testing-message

@@ -1 +1 @@
-Subproject commit b7336a5bbe670add791fd42ebcfe21bf58df6bc4
+Subproject commit 939b7a2604a29cb3d486199cc9491af49f81a2f3

src/components/draw-app/dialogs/KmChainData.vue

@@ -0,0 +1,161 @@
+<template>
+  <draggable-dialog
+    seamless
+    title="公里标设计-实测数据"
+    :width="600"
+    :height="0"
+  >
+    <template v-slot:titleButton>
+      <q-btn
+        color="primary"
+        label="新建"
+        style="margin-right: 10px"
+        @click="createKilometerConvert"
+      />
+    </template>
+    <template v-slot:footer>
+      <q-table
+        ref="tableRef"
+        style="max-height: 600px"
+        v-model:pagination="pagination"
+        :loading="loading"
+        :rows="rows"
+        :columns="columns"
+        @request="onRequest"
+        :rows-per-page-options="[5, 10, 20, 50]"
+      >
+        <template v-slot:body-cell="props">
+          <q-td :props="props" class="custom-column">
+            {{ props.value }}
+          </q-td>
+        </template>
+        <template v-slot:body-cell-operations="props">
+          <q-td :props="props">
+            <div class="q-gutter-sm row justify-center">
+              <q-btn
+                color="primary"
+                label="编辑"
+                @click="editData(props.rowIndex)"
+              />
+              <q-btn
+                color="red"
+                label="删除"
+                @click="deleteData(props.rowIndex)"
+              />
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { QTable, useQuasar } from 'quasar';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import {
+  loadKmChainDataList,
+  editKmChainData,
+  deleteKmChainData,
+} from 'src/drawApp/commonApp';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { useDrawStore } from 'src/stores/draw-store';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+
+const drawStore = useDrawStore();
+
+const $q = useQuasar();
+const tableRef = ref<QTable>();
+const columns: QTable['columns'] = [
+  {
+    name: 'designKm',
+    label: '设计公里标',
+    field: (row) => getKMName(row.designKm),
+    align: 'center',
+  },
+  {
+    name: 'actualKm',
+    label: '实际公里标',
+    field: (row) => getKMName(row.actualKm),
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+const rows = ref<graphicData.KilometerMarkCalibration[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const onRequest: QTable['onRequest'] = () => {
+  getList();
+};
+function getList() {
+  loading.value = true;
+  const refDatas = loadKmChainDataList();
+  rows.value = refDatas;
+  pagination.value.rowsNumber = refDatas.length;
+  pagination.value.rowsPerPage = refDatas.length;
+  loading.value = false;
+}
+
+function deleteData(index: number) {
+  const row = rows.value[index];
+  const name = getKMName(row.designKm);
+  $q.dialog({
+    message: `确定删除 "${name}" 吗?`,
+    cancel: true,
+  }).onOk(async () => {
+    try {
+      if (drawStore.editKmChainDataIndex == index) {
+        drawStore.setEditKmChainDataIndex(-1);
+      }
+      deleteKmChainData(index);
+      successNotify('删除数据成功！');
+    } catch (err) {
+      errorNotify('删除失败:', err);
+    } finally {
+      tableRef.value?.requestServerInteraction();
+    }
+  });
+}
+
+onMounted(() => {
+  getList();
+});
+
+watch(
+  () => drawStore.showEditKmChainData,
+  (val) => {
+    if (!val) {
+      tableRef.value?.requestServerInteraction();
+    }
+  }
+);
+function createKilometerConvert() {
+  drawStore.setEditKmChainDataIndex(loadKmChainDataList().length);
+}
+
+function editData(index: number) {
+  drawStore.setEditKmChainDataIndex(index);
+}
+
+function getKMName(km: KilometerSystem) {
+  return km.coordinateSystem + '_' + km.kilometer;
+}
+</script>
+
+<style scoped>
+.custom-column {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,194 @@
+<template>
+  <div v-if="showRangeConfig">
+    <q-card class="q-pa-sm" flat>
+      <q-card-section>
+        <div class="text-h6">{{ handleState }}公里标设计-实测数据</div>
+      </q-card-section>
+      <q-form
+        ref="myForm"
+        @submit="onSubmit"
+        @reset="onReset"
+        class="q-gutter-md"
+      >
+        <q-card class="q-pa-sm">
+          <q-card-section>
+            <div class="text-subtitle1">设计公里标</div>
+          </q-card-section>
+          <q-item-section no-wrap class="q-gutter-y-sm column">
+            <q-input
+              style="margin-top: 10px"
+              v-model="data.designKm.coordinateSystem"
+              label="坐标系"
+            ></q-input>
+            <q-select
+              outlined
+              v-model="data.designKm.direction"
+              :options="directionOptions"
+              :map-options="true"
+              :emit-value="true"
+              label="方向"
+            ></q-select>
+            <q-input
+              style="margin-top: 10px"
+              v-model.number="data.designKm.kilometer"
+              type="number"
+              label="公里标(mm):"
+            />
+          </q-item-section>
+        </q-card>
+        <q-card class="q-pa-sm">
+          <q-card-section>
+            <div class="text-subtitle1">实测公里标</div>
+          </q-card-section>
+          <q-item-section no-wrap class="q-gutter-y-sm column">
+            <q-input
+              style="margin-top: 10px"
+              v-model="data.actualKm.coordinateSystem"
+              label="坐标系"
+            ></q-input>
+            <q-select
+              outlined
+              v-model="data.actualKm.direction"
+              :options="directionOptions"
+              :map-options="true"
+              :emit-value="true"
+              label="方向"
+            ></q-select>
+            <q-input
+              style="margin-top: 10px"
+              v-model.number="data.actualKm.kilometer"
+              type="number"
+              label="公里标(mm):"
+            />
+          </q-item-section>
+        </q-card>
+
+        <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" class="q-mr-md" />
+          <q-btn label="返回" color="primary" @click="goBack" />
+        </div>
+      </q-form>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from 'vue';
+import { QForm, useQuasar } from 'quasar';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import {
+  loadKmChainDataList,
+  createKmChainData,
+  editKmChainData,
+} from 'src/drawApp/commonApp';
+import { useDrawStore } from 'src/stores/draw-store';
+
+const $q = useQuasar();
+const showRangeConfig = ref(true);
+const handleState = ref('新建');
+const drawStore = useDrawStore();
+
+interface IKmChainData {
+  designKm: KilometerSystem;
+  actualKm: KilometerSystem;
+}
+
+const data = reactive<IKmChainData>({
+  designKm: {
+    coordinateSystem: 'MAIN_LINE',
+    kilometer: 0,
+    direction: 0,
+  },
+  actualKm: {
+    coordinateSystem: 'MAIN_LINE',
+    kilometer: 0,
+    direction: 0,
+  },
+});
+
+const directionOptions = [
+  { label: '左行', value: 0 },
+  { label: '右行', value: 1 },
+];
+
+onMounted(() => {
+  getData();
+});
+
+watch(
+  () => drawStore.editKmChainDataIndex,
+  (val) => {
+    if (val > -1) {
+      getData();
+    }
+  }
+);
+
+const myForm = ref<QForm | null>(null);
+async function onSubmit() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      try {
+        const designKm = new graphicData.KilometerSystem(data.designKm);
+        const actualKm = new graphicData.KilometerSystem(data.actualKm);
+        const obj = {
+          designKm,
+          actualKm,
+        };
+        const convert = new graphicData.KilometerMarkCalibration(
+          obj as graphicData.KilometerMarkCalibration
+        );
+        if (handleState.value == '新建') {
+          createKmChainData(convert);
+        } else {
+          editKmChainData(convert);
+        }
+        onReset();
+        showRangeConfig.value = false;
+        drawStore.setEditKmChainDataIndex(-1);
+      } catch (err) {
+        console.log(err);
+        $q.notify({
+          type: 'negative',
+          message: `${handleState.value}公里标设计-实测编辑失败！`,
+        });
+      }
+    }
+  });
+}
+
+function onReset() {
+  data.designKm.coordinateSystem = 'MAIN_LINE';
+  data.designKm.kilometer = 0;
+  data.designKm.direction = 0;
+  data.actualKm.coordinateSystem = 'MAIN_LINE';
+  data.actualKm.kilometer = 0;
+  data.actualKm.direction = 0;
+}
+
+function goBack() {
+  onReset();
+  drawStore.setEditKmChainDataIndex(-1);
+}
+
+function getData() {
+  const index = drawStore.editKmChainDataIndex;
+  const kmChainData = loadKmChainDataList()[index];
+  console.log(index, kmChainData, '=========');
+  if (kmChainData?.designKm || kmChainData?.actualKm) {
+    handleState.value = '编辑';
+  } else {
+    handleState.value = '新建';
+  }
+  data.designKm.coordinateSystem =
+    kmChainData?.designKm?.coordinateSystem || 'MAIN_LINE';
+  data.designKm.kilometer = kmChainData?.designKm?.kilometer || 0;
+  data.designKm.direction = kmChainData?.designKm?.direction || 0;
+  data.actualKm.coordinateSystem =
+    kmChainData?.actualKm?.coordinateSystem || 'MAIN_LINE';
+  data.actualKm.kilometer = kmChainData?.actualKm?.kilometer || 0;
+  data.actualKm.direction = kmChainData?.actualKm?.direction || 0;
+}
+</script>

src/drawApp/commonApp.ts

@@ -91,10 +91,22 @@ import {
   SpksSwitchData,
   DrawSpksSwitchInteraction,
 } from './graphics/SpksSwitchInteraction';
-import { HoldButton, HoldButtonTemplate } from 'src/graphics/holdButton/HoldButton';
-import { DrawHoldButtonInteraction, HoldButtonData } from './graphics/HoldButtonInteraction';
-import { UnattengedButton, UnattengedButtonTemplate } from 'src/graphics/unattengedButton/UnattengedButton';
-import { UnattengedButtonData, DrawUnattengedButtonInteraction } from './graphics/UnattengedButtonInteraction';
+import {
+  HoldButton,
+  HoldButtonTemplate,
+} from 'src/graphics/holdButton/HoldButton';
+import {
+  DrawHoldButtonInteraction,
+  HoldButtonData,
+} from './graphics/HoldButtonInteraction';
+import {
+  UnattengedButton,
+  UnattengedButtonTemplate,
+} from 'src/graphics/unattengedButton/UnattengedButton';
+import {
+  UnattengedButtonData,
+  DrawUnattengedButtonInteraction,
+} from './graphics/UnattengedButtonInteraction';
 import { GatedBox, GatedBoxTemplate } from 'src/graphics/gatedBox/GatedBox';
 import {
   GatedBoxData,
@@ -235,7 +247,10 @@ export function initCommonDrawApp(app: IDrawApp) {
   new StopPositionDraw(app, new StopPositionTemplate(new StopPositionData()));
   new SpksSwitchDraw(app, new SpksSwitchTemplate(new SpksSwitchData()));
   new HoldButtonDraw(app, new HoldButtonTemplate(new HoldButtonData()));
-  new UnattengedButtonDraw(app, new UnattengedButtonTemplate(new UnattengedButtonData()));
+  new UnattengedButtonDraw(
+    app,
+    new UnattengedButtonTemplate(new UnattengedButtonData())
+  );
   new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData()));
   // new EsbButtonDraw(
   //   app,
@@ -307,6 +322,7 @@ export function initCommonDrawApp(app: IDrawApp) {
     kilometerConvertList = [];
     sectionCodePointList = [];
     otherLineList = [];
+    kmChainDataList = [];
   });
   // KeyA 用于区段复制--控制生成的区段位置
   const graphicCopyPlugin = app.app.graphicCopyPlugin;
@@ -362,10 +378,10 @@ export function initCommonDrawApp(app: IDrawApp) {
                   prev.localToCanvasPoint(prev.getStartPoint()),
                   mousePos
                 ) >
-                distance2(
-                  cur.localToCanvasPoint(cur.getStartPoint()),
-                  mousePos
-                ))
+                  distance2(
+                    cur.localToCanvasPoint(cur.getStartPoint()),
+                    mousePos
+                  ))
               ? cur
               : prev;
           });
@@ -415,6 +431,7 @@ export function loadCommonDrawDatas(
     lianSuoData = storage.lianSuoData;
   }
   kilometerConvertList = storage.kilometerConvertList;
+  kmChainDataList = storage.kilometerMarkCalibrations;
   sectionCodePointList = storage.sectionCodePointList;
   otherLineList = storage.otherLineList;
   refDevicesList = storage.stationRelateDeviceList;
@@ -459,10 +476,10 @@ export function loadCommonDrawDatas(
   });
   storage.holdButtons.forEach((holdButton) => {
     datas.push(new HoldButtonData(holdButton));
-  })
+  });
   storage.unattengedButtons.forEach((unattengedButton) => {
     datas.push(new UnattengedButtonData(unattengedButton));
-  })
+  });
   storage.gateBoxs.forEach((gatedBox) => {
     datas.push(new GatedBoxData(gatedBox));
   });
@@ -721,6 +738,7 @@ export function saveCommonDrawDatas(app: IDrawApp) {
   storage.otherLineList = otherLineList;
   storage.stationRelateDeviceList = refDevicesList;
   storage.lianSuoData = lianSuoData;
+  storage.kilometerMarkCalibrations = kmChainDataList;
   // if (storage.generateAxleCountingConfig?.bbConnect) {
   //   storage.generateAxleCountingConfig.newbbConnect =
   //     storage.generateAxleCountingConfig.bbConnect.map((item) => +item);
@@ -815,6 +833,24 @@ export function editKilometerConvert(row: graphicData.KilometerConvert) {
 export function deleteKilometerConvert(index: number) {
   kilometerConvertList.splice(index, 1);
 }
+//公里标设计-实测数据增删改查
+let kmChainDataList: graphicData.KilometerMarkCalibration[] = [];
+export function loadKmChainDataList() {
+  return kmChainDataList;
+}
+export function createKmChainData(row: graphicData.KilometerMarkCalibration) {
+  kmChainDataList.push(row);
+}
+export function editKmChainData(row: graphicData.KilometerMarkCalibration) {
+  const drawStore = useDrawStore();
+  const findIndex = drawStore.editKmChainDataIndex;
+  if (findIndex >= 0) {
+    kmChainDataList.splice(findIndex, 1, row);
+  }
+}
+export function deleteKmChainData(index: number) {
+  kmChainDataList.splice(index, 1);
+}
 // 公里标转换趋势
 export const sameTrendOptions = [
   { label: '相反', value: false },

src/layouts/DrawLayout.vue

@@ -87,6 +87,9 @@
       <KilometerConvertConfig
         v-if="drawStore.showEditKilometerConvert"
       ></KilometerConvertConfig>
+      <KmChainDataConfig
+        v-else-if="drawStore.showEditKmChainData"
+      ></KmChainDataConfig>
       <SectionCodePointConfig
         v-else-if="drawStore.showEditSectionCodePoint"
       ></SectionCodePointConfig>
@@ -249,7 +252,9 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import KilometerConvertList from 'src/components/draw-app/dialogs/KilometerConvertList.vue';
 import LoadTransponderData from 'src/components/draw-app/dialogs/LoadTransponderData.vue';
 import LianSuoBianHao from 'src/components/draw-app/dialogs/LianSuoBianHao.vue';
+import KmChainData from 'src/components/draw-app/dialogs/KmChainData.vue';
 import KilometerConvertConfig from 'src/components/draw-app/properties/KilometerConvertConfig.vue';
+import KmChainDataConfig from 'src/components/draw-app/properties/KmChainDataconfig.vue';
 import SectionCodePointList from 'src/components/draw-app/dialogs/SectionCodePointList.vue';
 import SectionCodePointConfig from 'src/components/draw-app/properties/SectionCodePointConfig.vue';
 import StationRelateDeviceConfig from 'src/components/draw-app/properties/StationRelateDeviceConfig.vue';
@@ -415,6 +420,10 @@ const dataManageConfig = [
     label: '联锁编号映射数据',
     click: lianSuoBianHao,
   },
+  {
+    label: '公里标长短链数据',
+    click: kmChainData,
+  },
 ];
 
 onMounted(() => {
@@ -1115,6 +1124,10 @@ onUnmounted(() => {
   if (otherLineDialog.value) {
     otherLineDialog.value.hide();
   }
+  drawStore.setEditKmChainDataIndex(-1);
+  if (kmChainDataDialog.value) {
+    kmChainDataDialog.value.hide();
+  }
   drawStore.setEditOtherLineIndex(-1);
   drawStore.destroy();
   drawStore.setCategoryType(null);
@@ -1208,6 +1221,18 @@ function lianSuoBianHao() {
     });
 }
 
+let kmChainDataDialog = ref();
+function kmChainData() {
+  if (kmChainDataDialog.value) return;
+  kmChainDataDialog.value = $q
+    .dialog({
+      component: KmChainData,
+    })
+    .onCancel(() => {
+      kmChainDataDialog.value = null;
+    });
+}
+
 let relateDeviceDialogInstance: DialogChainObject | null = null;
 const relateDeviceConfigEdit =
   ref<InstanceType<typeof StationRelateDeviceConfig>>();

src/stores/draw-store.ts

@@ -35,6 +35,7 @@ export const useDrawStore = defineStore('draw', {
     editKilometerConvertIndex: -1,
     editSectionCodePointIndex: -1,
     editOtherLineIndex: -1,
+    editKmChainDataIndex: -1,
     table: undefined as QTable | undefined,
     showRelateDeviceConfig: false,
     showDirectionConfig: '' as string,
@@ -98,6 +99,9 @@ export const useDrawStore = defineStore('draw', {
     showEditOtherLine: (state) => {
       return state.editOtherLineIndex >= 0;
     },
+    showEditKmChainData: (state) => {
+      return state.editKmChainDataIndex >= 0;
+    },
   },
   actions: {
     getDrawApp(): IDrawApp {
@@ -186,5 +190,8 @@ export const useDrawStore = defineStore('draw', {
     setDirectionConfigVisible(visible: string) {
       this.showDirectionConfig = visible;
     },
+    setEditKmChainDataIndex(index: number) {
+      this.editKmChainDataIndex = index;
+    },
   },
 });