信号机应答器状态显示调整

src/components/line-app/states/SignalState.vue

@@ -20,47 +20,20 @@
     </q-card-section>
     <q-separator inset />
     <q-card-section>
-      <q-input
+      <q-list dense>
-        outlined
+        <q-item v-for="(item, index) in list" :key="index">
-        readonly
+          <q-item-section>
-        v-model="signalState.code"
+            <q-item-label>{{ item.label }}</q-item-label>
-        label="id"
+          </q-item-section>
-        hint=""
+          <q-item-section side>
-      />
+            <q-item-label caption>{{
-      <q-input outlined readonly v-model.number="code" label="名称" />
+              item.formatFn
-      <q-select
+                ? item.formatFn(signalState[item.key])
-        v-model="signalState.aspect"
+                : signalState[item.key]
-        style="margin-top: 10px"
+            }}</q-item-label>
-        label="灯亮状态"
+          </q-item-section>
-        outlined
+        </q-item>
-        :options="aspectOptions"
+      </q-list>
-        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-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) => {

src/components/line-app/states/TransponderState.vue

@@ -20,79 +20,51 @@
     </q-card-section>
     <q-separator inset />
     <q-card-section>
-      <q-input
+      <q-list dense>
-        outlined
+        <q-item v-for="(item, index) in list" :key="index">
-        readonly
+          <q-item-section>
-        v-model="transponderState.code"
+            <q-item-label>{{ item.label }}</q-item-label>
-        label="id"
+          </q-item-section>
-        hint=""
+          <q-item-section side>
-      />
+            <q-item-label caption>
-      <q-input outlined readonly v-model.number="code" label="名称" />
+              <div
-      <q-input
+                style="word-wrap: break-word; width: 150px; text-align: right"
-        outlined
+              >
-        style="margin-top: 10px"
+                {{
-        v-model="transponderState.km.coordinateSystem"
+                  item.formatFn
-        readonly
+                    ? item.formatFn(transponderState[item.key])
-        label="坐标系"
+                    : transponderState[item.key]
-      ></q-input>
+                }}
-      <q-input
+              </div>
-        outlined
+            </q-item-label>
-        style="margin-top: 10px"
+          </q-item-section>
-        v-model.number="kilometer"
+        </q-item>
-        readonly
+        <template
-        type="number"
+          v-if="
-        label="公里标(mm):"
+            transponderType === TransponderTypeEnum.VB ||
-      />
+            transponderType === TransponderTypeEnum.IB
-      <q-select
+          "
-        outlined
+        >
-        v-model="transponderState.km.direction"
+          <q-item v-for="(item, index) in list1" :key="index">
-        style="margin-top: 10px"
+            <q-item-section>
-        :options="directionOptions"
+              <q-item-label>{{ item.label }}</q-item-label>
-        readonly
+            </q-item-section>
-        :map-options="true"
+            <q-item-section side>
-        :emit-value="true"
+              <q-item-label caption
-        label="方向"
+                ><div
-      ></q-select>
+                  style="word-wrap: break-word; width: 150px; text-align: right"
-      <q-input
+                >
-        outlined
+                  {{
-        style="margin-top: 10px"
+                    item.formatFn
-        v-model="transponderState.fixedUserTelegram"
+                      ? item.formatFn(transponderState[item.key])
-        autogrow
+                      : transponderState[item.key]
-        readonly
+                  }}
-        label="固定用户报文"
+                </div></q-item-label
-      />
+              >
-      <q-input
+            </q-item-section>
-        outlined
+          </q-item>
-        style="margin-top: 10px"
+        </template>
-        v-model="transponderState.fixedTelegram"
+      </q-list>
-        autogrow
-        readonly
-        label="固定报文"
-      />
-      <q-input
-        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-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) => {