信号机应答器状态显示调整
This commit is contained in:
fan
parent
c487a649d4
commit
8839b38911
@ -20,47 +20,20 @@
|
||||
</q-card-section>
|
||||
<q-separator inset />
|
||||
<q-card-section>
|
||||
<q-input
|
||||
outlined
|
||||
readonly
|
||||
v-model="signalState.code"
|
||||
label="id"
|
||||
hint=""
|
||||
/>
|
||||
<q-input outlined readonly v-model.number="code" label="名称" />
|
||||
<q-select
|
||||
v-model="signalState.aspect"
|
||||
style="margin-top: 10px"
|
||||
label="灯亮状态"
|
||||
outlined
|
||||
:options="aspectOptions"
|
||||
emitValue
|
||||
mapOptions
|
||||
:disable="true"
|
||||
>
|
||||
</q-select>
|
||||
<div class="q-gutter-sm border-box">
|
||||
<div>信号机强制：</div>
|
||||
<q-radio
|
||||
v-for="option in signalForceOptions"
|
||||
:key="option.value"
|
||||
disable
|
||||
v-model="signalState.param.force"
|
||||
:val="option.value"
|
||||
:label="option.label"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-gutter-sm border-box">
|
||||
<div>信号机断丝：</div>
|
||||
<q-checkbox
|
||||
v-for="option in signalDsOptions"
|
||||
:key="option.value"
|
||||
disable
|
||||
v-model="signalState.param.dsList"
|
||||
:val="option.value"
|
||||
:label="option.label"
|
||||
/>
|
||||
</div>
|
||||
<q-list dense>
|
||||
<q-item v-for="(item, index) in list" :key="index">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{
|
||||
item.formatFn
|
||||
? item.formatFn(signalState[item.key])
|
||||
: signalState[item.key]
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
@ -155,6 +128,47 @@ const aspectOptions = [
|
||||
const options = [{ label: '设置参数' }];
|
||||
let copySelectGraphic: Signal | null = null;
|
||||
|
||||
interface KeyType {
|
||||
label: string;
|
||||
key: keyof SignalState;
|
||||
formatFn?(v: SignalState[keyof SignalState]): string;
|
||||
}
|
||||
|
||||
const list: KeyType[] = [
|
||||
{ label: '信号机索引', key: 'code' },
|
||||
{ label: '信号机名称', key: 'code', formatFn: getNameFormat },
|
||||
{ label: '灯亮状态', key: 'aspect', formatFn: getAspectName },
|
||||
{ label: '信号机强制', key: 'param', formatFn: getForceName },
|
||||
{ label: '信号机断丝', key: 'param', formatFn: getDsName },
|
||||
];
|
||||
|
||||
function getNameFormat(v: number) {
|
||||
if (v) {
|
||||
return code.value;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function getAspectName(aspect: state.Signal.Aspect) {
|
||||
return aspectOptions.find((item) => item.value == aspect)?.label || '';
|
||||
}
|
||||
function getForceName(param: request.SignalParam) {
|
||||
return (
|
||||
signalForceOptions.value.find((item) => item.value == param.force)?.label ||
|
||||
''
|
||||
);
|
||||
}
|
||||
function getDsName(param: request.SignalParam) {
|
||||
let s = '';
|
||||
signalDsOptions.value.forEach((item) => {
|
||||
if (param.dsList.includes(item.value)) {
|
||||
const label = s ? item.label + '、' : item.label;
|
||||
s += label;
|
||||
}
|
||||
});
|
||||
return s || '无';
|
||||
}
|
||||
|
||||
watch(
|
||||
() => lineStore.selectedGraphics,
|
||||
(val, oldVal) => {
|
||||
|
||||
@ -20,79 +20,51 @@
|
||||
</q-card-section>
|
||||
<q-separator inset />
|
||||
<q-card-section>
|
||||
<q-input
|
||||
outlined
|
||||
readonly
|
||||
v-model="transponderState.code"
|
||||
label="id"
|
||||
hint=""
|
||||
/>
|
||||
<q-input outlined readonly v-model.number="code" label="名称" />
|
||||
<q-input
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="transponderState.km.coordinateSystem"
|
||||
readonly
|
||||
label="坐标系"
|
||||
></q-input>
|
||||
<q-input
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model.number="kilometer"
|
||||
readonly
|
||||
type="number"
|
||||
label="公里标(mm):"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
v-model="transponderState.km.direction"
|
||||
style="margin-top: 10px"
|
||||
:options="directionOptions"
|
||||
readonly
|
||||
:map-options="true"
|
||||
:emit-value="true"
|
||||
label="方向"
|
||||
></q-select>
|
||||
<q-input
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="transponderState.fixedUserTelegram"
|
||||
autogrow
|
||||
readonly
|
||||
label="固定用户报文"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="transponderState.fixedTelegram"
|
||||
autogrow
|
||||
readonly
|
||||
label="固定报文"
|
||||
/>
|
||||
<q-input
|
||||
<q-list dense>
|
||||
<q-item v-for="(item, index) in list" :key="index">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>
|
||||
<div
|
||||
style="word-wrap: break-word; width: 150px; text-align: right"
|
||||
>
|
||||
{{
|
||||
item.formatFn
|
||||
? item.formatFn(transponderState[item.key])
|
||||
: transponderState[item.key]
|
||||
}}
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<template
|
||||
v-if="
|
||||
transponderType === TransponderTypeEnum.VB ||
|
||||
transponderType === TransponderTypeEnum.IB
|
||||
"
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="transponderState.variableUserTelegram"
|
||||
autogrow
|
||||
readonly
|
||||
label="可变用户报文"
|
||||
/>
|
||||
<q-input
|
||||
v-if="
|
||||
transponderType === TransponderTypeEnum.VB ||
|
||||
transponderType === TransponderTypeEnum.IB
|
||||
"
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="transponderState.variableTelegram"
|
||||
autogrow
|
||||
readonly
|
||||
label="可变报文"
|
||||
/>
|
||||
>
|
||||
<q-item v-for="(item, index) in list1" :key="index">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption
|
||||
><div
|
||||
style="word-wrap: break-word; width: 150px; text-align: right"
|
||||
>
|
||||
{{
|
||||
item.formatFn
|
||||
? item.formatFn(transponderState[item.key])
|
||||
: transponderState[item.key]
|
||||
}}
|
||||
</div></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
@ -112,6 +84,7 @@ import {
|
||||
resetMessageTransponder,
|
||||
resetPositionTransponder,
|
||||
} from 'src/api/Simulation';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
|
||||
const lineStore = useLineStore();
|
||||
const transponderState = ref<TransponderState>(new TransponderState());
|
||||
@ -150,6 +123,44 @@ const directionOptions = [
|
||||
];
|
||||
let copySelectGraphic: Transponder | null = null;
|
||||
|
||||
interface KeyType {
|
||||
label: string;
|
||||
key: keyof TransponderState;
|
||||
formatFn?(v: TransponderState[keyof TransponderState]): string;
|
||||
}
|
||||
|
||||
const list: KeyType[] = [
|
||||
{ label: '应答器索引', key: 'code' },
|
||||
{ label: '应答器名称', key: 'code', formatFn: getNameFormat },
|
||||
{ label: '坐标系', key: 'km', formatFn: getCoordinateSystemFormat },
|
||||
{ label: '公里标', key: 'km', formatFn: getKilometerFormat },
|
||||
{ label: '方向', key: 'km', formatFn: getDirectionFormat },
|
||||
{ label: '固定用户报文', key: 'fixedUserTelegram' },
|
||||
{ label: '固定报文', key: 'fixedTelegram' },
|
||||
];
|
||||
const list1: KeyType[] = [
|
||||
{
|
||||
label: '可变用户报文',
|
||||
key: 'variableUserTelegram',
|
||||
},
|
||||
{ label: '可变报文', key: 'variableTelegram' },
|
||||
];
|
||||
|
||||
function getNameFormat(v: string) {
|
||||
return v;
|
||||
}
|
||||
function getCoordinateSystemFormat(v: graphicData.KilometerSystem) {
|
||||
return v.coordinateSystem;
|
||||
}
|
||||
function getKilometerFormat(v: graphicData.KilometerSystem) {
|
||||
return v.kilometer + 'mm';
|
||||
}
|
||||
function getDirectionFormat(v: graphicData.KilometerSystem) {
|
||||
return (
|
||||
directionOptions.find((item) => item.value == v.direction)?.label || ''
|
||||
);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => lineStore.selectedGraphics,
|
||||
(val, oldVal) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user