添加公里标长短链数据
This commit is contained in:
joylink_fanyuhong
parent
5313a00dc6
commit
3773aef4ac
@ -1 +1 @@
|
||||
Subproject commit 30f6530a925f672eb0e5e6e3654b72865c2598df
|
||||
Subproject commit 939b7a2604a29cb3d486199cc9491af49f81a2f3
|
||||
161
src/components/draw-app/dialogs/KmChainData.vue
Normal file
161
src/components/draw-app/dialogs/KmChainData.vue
Normal file
@ -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>
|
||||
194
src/components/draw-app/properties/KmChainDataConfig.vue
Normal file
194
src/components/draw-app/properties/KmChainDataConfig.vue
Normal file
@ -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>
|
||||
@ -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;
|
||||
@ -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 },
|
||||
|
||||
@ -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>>();
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user