From 8839b3891152920dc828a8d4ffead65f667801f5 Mon Sep 17 00:00:00 2001
From: fan <fanyuhong@joylink.club>
Date: Fri, 2 Feb 2024 17:48:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E5=8F=B7=E6=9C=BA=E5=BA=94=E7=AD=94?=
 =?UTF-8?q?=E5=99=A8=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../line-app/states/SignalState.vue           |  96 ++++++-----
 .../line-app/states/TransponderState.vue      | 157 ++++++++++--------
 2 files changed, 139 insertions(+), 114 deletions(-)

diff --git a/src/components/line-app/states/SignalState.vue b/src/components/line-app/states/SignalState.vue
index 4ddfe38..790a00b 100644
--- a/src/components/line-app/states/SignalState.vue
+++ b/src/components/line-app/states/SignalState.vue
@@ -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) => {
diff --git a/src/components/line-app/states/TransponderState.vue b/src/components/line-app/states/TransponderState.vue
index c10c9c9..370f371 100644
--- a/src/components/line-app/states/TransponderState.vue
+++ b/src/components/line-app/states/TransponderState.vue
@@ -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
-        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-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
+          "
+        >
+          <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) => {