站台继电器区段道岔状态面板修改

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

@@ -1,78 +1,30 @@
 <template>
-  <QCard flat bordered>
-    <QCardSection>
+  <q-card flat bordered>
+    <q-card-section>
       <div class="text-h6">站台状态</div>
-    </QCardSection>
-    <QSeparator inset />
-    <QCardSection>
-      <QForm>
-        <QInput
-          outlined
-          readonly
-          v-model="platformState.id"
-          label="id"
-          hint=""
-        />
-        <QInput
-          outlined
-          readonly
-          v-model.number="platformState.code"
-          label="名称"
-        />
-      </QForm>
-    </QCardSection>
-    <QCardSection>
-      <QList dense bordered padding class="rounded-borders q-my-sm">
-        <QItem>
-          <QCheckbox
-            dense
-            v-model="platformState.empj"
-            outlined
-            label="EMP继电器状态"
-            disable
-          />
-        </QItem>
-        <template v-if="isSpksInfoShow">
-          <QSeparator class="q-mt-sm" />
-          <QItemLabel header>Spks继电器状态</QItemLabel>
-          <QItem>
-            <QItemSection>
-              <QCheckbox
-                v-for="item in platformState.spksState"
-                :key="item.id"
-                dense
-                v-model="item.xh"
-                :label="item.code"
-                disable
-              />
-            </QItemSection>
-          </QItem>
-        </template>
-        <template v-if="isMkxInfoShow">
-          <QSeparator class="q-mt-sm" />
-          <QItemLabel header
-            >门控箱继电器状态 ({{ platformState.mkxJState.code }})</QItemLabel
-          >
-          <QItem>
-            <QItemSection>
-              <QCheckbox
-                v-for="reply in platformState.mkxJState.replyState"
-                v-model="reply.xh"
-                :label="reply.code"
-                :key="reply.id"
-                dense
-                disable
-              />
-            </QItemSection>
-          </QItem>
-        </template>
-      </QList>
-    </QCardSection>
-  </QCard>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <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(platformState[item.key])
+                : platformState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, watchEffect, onUnmounted, computed } from 'vue';
+import { ref, watch, watchEffect, onUnmounted } from 'vue';
 import { Platform } from 'src/graphics/platform/Platform';
 import { state } from 'src/protos/device_state';
 import { PlatformState } from 'src/drawApp/graphics/PlatformInteraction';
@@ -92,6 +44,28 @@ const platformState = ref<{
   mkxJState: new state.MkxJState(),
 });
 
+interface KeyType {
+  label: string;
+  key: keyof PlatformState;
+  formatFn?(v: PlatformState[keyof PlatformState]): string;
+}
+
+const list: KeyType[] = [
+  { label: '站台索引', key: 'id' },
+  { label: '站台名称', key: 'code' },
+  { label: 'EMP继电器状态', key: 'empj', formatFn: getEMPRelayState },
+  { label: 'SPKSX旁路', key: 'spksState', formatFn: getSPKSXRelayState },
+  { label: 'SPKS1', key: 'spksState', formatFn: getSPKS1RelayState },
+  { label: 'SPKS3', key: 'spksState', formatFn: getSPKS3RelayState },
+  { label: '站台确认继电器', key: 'mkxJState', formatFn: getConfirmRelayState },
+  {
+    label: '站台关门继电器',
+    key: 'mkxJState',
+    formatFn: getCloseSPKS1RelayState,
+  },
+  { label: '站台开门继电器', key: 'mkxJState', formatFn: getOpenRelayState },
+];
+
 const stop = watchEffect(() => {
   if (
     lineStore.selectedGraphics?.length == 1 &&
@@ -100,7 +74,7 @@ const stop = watchEffect(() => {
     setPlatformState(lineStore.selectedGraphics[0] as Platform);
   }
 });
-onUnmounted(stop);
+
 watch(
   () => lineStore.socketStates,
   (val) => {
@@ -122,20 +96,6 @@ watch(
   }
 );
 
-const isSpksInfoShow = computed(() => {
-  const selected = lineStore.selectedGraphics;
-  if (!selected) return;
-  const platform = selected[0] as Platform;
-  return platform.states.spksState?.length !== 0;
-});
-
-const isMkxInfoShow = computed(() => {
-  const selected = lineStore.selectedGraphics;
-  if (!selected) return;
-  const platform = selected[0] as Platform;
-  return platform.states.mkxJState?.replyState?.length !== 0;
-});
-
 function setPlatformState(platform: Platform) {
   platformState.value = {
     id: platform.datas.id,
@@ -145,4 +105,44 @@ function setPlatformState(platform: Platform) {
     mkxJState: platform.states.mkxJState ?? new state.MkxJState(),
   };
 }
+
+function getEMPRelayState(v: boolean) {
+  if (v) return '吸起';
+  return '落下';
+}
+
+function getSPKSXRelayState(spksState: state.ReplyState[]) {
+  if (spksState.find((item) => item.code == 'SPKSX旁路')?.xh) return '吸起';
+  return '落下';
+}
+
+function getSPKS1RelayState(spksState: state.ReplyState[]) {
+  if (spksState.find((item) => item.code == 'SPKS1')?.xh) return '吸起';
+  return '落下';
+}
+
+function getSPKS3RelayState(spksState: state.ReplyState[]) {
+  if (spksState.find((item) => item.code == 'SPKS3')?.xh) return '吸起';
+  return '落下';
+}
+
+function getConfirmRelayState(mkxJState: state.MkxJState) {
+  if (mkxJState.replyState.find((item) => item.code == '站台确认继电器')?.xh)
+    return '吸起';
+  return '落下';
+}
+
+function getCloseSPKS1RelayState(mkxJState: state.MkxJState) {
+  if (mkxJState.replyState.find((item) => item.code == '站台关门继电器')?.xh)
+    return '吸起';
+  return '落下';
+}
+
+function getOpenRelayState(mkxJState: state.MkxJState) {
+  if (mkxJState.replyState.find((item) => item.code == '站台开门继电器')?.xh)
+    return '吸起';
+  return '落下';
+}
+
+onUnmounted(stop);
 </script>

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

@@ -23,16 +23,21 @@
       </q-btn-dropdown>
     </q-card-section>
     <q-separator inset />
-    <q-card-section class="q-gutter-sm">
-      <q-input outlined readonly v-model="relayState[index].id" label="id" />
-      <q-input
-        outlined
-        readonly
-        v-model="relayState[index].code"
-        label="名称"
-      />
-      <q-checkbox disable v-model="relayState[index].xh" label="是否吸合" />
-      <q-checkbox disable v-model="relayState[index].force" label="是否强制" />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, i) in list" :key="i">
+          <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(relayState[index][item.key])
+                : relayState[index][item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
     </q-card-section>
   </q-card>
 </template>
@@ -73,6 +78,19 @@ let operateOptions: {
 ];
 let copySelectGraphic: Relay[] | null = null;
 
+interface KeyType {
+  label: string;
+  key: keyof RelayState;
+  formatFn?(v: RelayState[keyof RelayState]): string;
+}
+
+const list: KeyType[] = [
+  { label: '继电器索引', key: 'id' },
+  { label: '继电器名称', key: 'code' },
+  { label: '是否吸合', key: 'xh', formatFn: getName },
+  { label: '是否强制', key: 'force', formatFn: getName },
+];
+
 watch(
   () => lineStore.selectedGraphics,
   (val, oldVal) => {
@@ -94,6 +112,11 @@ onMounted(() => {
   }
 });
 
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+
 function initRelayState(relays: Relay[]) {
   copySelectGraphic = toRaw(relays);
   relayState.value = [];

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

@@ -20,59 +20,17 @@
     </q-card-section>
     <q-separator inset />
     <q-card-section>
-      <q-form>
-        <q-input
-          outlined
-          readonly
-          v-model="sectionState.id"
-          label="id"
-          hint=""
-        />
-        <q-input outlined readonly v-model="sectionState.code" label="名称" />
-      </q-form>
-      <q-list dense bordered padding class="rounded-borders q-my-sm">
-        <q-item>
+      <q-list dense>
+        <q-item v-for="(item, index) in list" :key="index">
           <q-item-section>
-            <q-checkbox
-              dense
-              v-model="sectionState.occupied"
-              outlined
-              label="是否占用"
-              :disable="true"
-            />
+            <q-item-label>{{ item.label }}</q-item-label>
           </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="sectionState.axleFault"
-              outlined
-              label="是否计轴故障"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="sectionState.axleDrst"
-              outlined
-              label="是否计轴复位"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="sectionState.axlePdrst"
-              outlined
-              label="是否计轴预复位"
-              :disable="true"
-            />
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(sectionState[item.key])
+                : sectionState[item.key]
+            }}</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
@@ -88,6 +46,7 @@ import { Dialog } from 'quasar';
 import SectionOperation from 'src/components/draw-app/dialogs/SectionOperation.vue';
 import { setAxleSectionState } from 'src/api/Simulation';
 import { errorNotify } from 'src/utils/CommonNotify';
+import { SectionStates } from 'src/drawApp/graphics/SectionInteraction';
 
 const lineStore = useLineStore();
 const sectionState = ref({
@@ -100,6 +59,21 @@ const sectionState = ref({
 });
 let copySelectGraphic: Section | null = null;
 
+interface KeyType {
+  label: string;
+  key: keyof SectionStates;
+  formatFn?(v: SectionStates[keyof SectionStates]): string;
+}
+
+const list: KeyType[] = [
+  { label: '轨道索引', key: 'id' },
+  { label: '轨道名称', key: 'code' },
+  { label: '是否占用', key: 'axleFault', formatFn: getName },
+  { label: '是否计轴故障', key: 'occupied', formatFn: getName },
+  { label: '是否计轴复位', key: 'axleDrst', formatFn: getName },
+  { label: '是否计轴预复位', key: 'axlePdrst', formatFn: getName },
+];
+
 watch(
   () => lineStore.selectedGraphics,
   (val, oldVal) => {
@@ -129,6 +103,11 @@ onMounted(() => {
   }
 });
 
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+
 function initSectionState(section: Section) {
   copySelectGraphic = toRaw(section);
   sectionState.value = {

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

@@ -20,140 +20,20 @@
     </q-card-section>
     <q-separator inset />
     <q-card-section>
-      <q-input
-        dense
-        outlined
-        readonly
-        v-model="turnoutState.id"
-        label="id"
-        hint=""
-      />
-      <q-input dense outlined readonly v-model="name" label="名称" hint="" />
-      <q-list dense bordered padding class="rounded-borders q-my-sm">
-        <q-item>
+      <q-list dense>
+        <q-item v-for="(item, index) in list" :key="index">
           <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.normal"
-              outlined
-              label="定位(表示)"
-              :disable="true"
-            />
+            <q-item-label>{{ item.label }}</q-item-label>
           </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.reverse"
-              outlined
-              label="反位(表示)"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.dw"
-              outlined
-              label="定位(实际)"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.fw"
-              outlined
-              label="反位(实际)"
-              :disable="true"
-            />
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(turnoutState[item.key])
+                : turnoutState[item.key]
+            }}</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
-      <q-list dense bordered padding class="rounded-borders q-my-sm">
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.qdc"
-              outlined
-              label="联锁定操驱动"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.qfc"
-              outlined
-              label="联锁反操驱动"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.qyc"
-              outlined
-              label="联锁允许操驱动"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.dc"
-              outlined
-              label="是否定操采集"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.fc"
-              outlined
-              label="是否反操采集"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-checkbox
-              dense
-              v-model="turnoutState.yc"
-              outlined
-              label="是否允许操作采集"
-              :disable="true"
-            />
-          </q-item-section>
-        </q-item>
-      </q-list>
-      <div class="q-gutter-sm border-box">
-        <div>道岔强制：</div>
-        <q-radio
-          v-for="option in turnoutForceOption"
-          :key="option.value"
-          disable
-          v-model="forcePosition"
-          :val="option.value"
-          :label="option.label"
-        />
-      </div>
     </q-card-section>
   </q-card>
 </template>
@@ -191,6 +71,28 @@ const turnoutForceOption = [
 const options = [{ label: '设置参数' }];
 let copySelectGraphic: Turnout | null = null;
 
+interface KeyType {
+  label: string;
+  key: keyof TurnoutStates;
+  formatFn?(v: TurnoutStates[keyof TurnoutStates]): string;
+}
+
+const list: KeyType[] = [
+  { label: '道岔索引', key: 'code' },
+  { label: '道岔名称', key: 'code', formatFn: getNameFormat },
+  { label: '定位(表示)', key: 'normal', formatFn: getName },
+  { label: '反位(表示)', key: 'reverse', formatFn: getName },
+  { label: '定位(实际)', key: 'dw', formatFn: getName },
+  { label: '反位(实际)', key: 'fw', formatFn: getName },
+  { label: '联锁定操驱动', key: 'qdc', formatFn: getName },
+  { label: '联锁反操驱动', key: 'qfc', formatFn: getName },
+  { label: '联锁允许操驱动', key: 'qyc', formatFn: getName },
+  { label: '是否定操采集', key: 'dc', formatFn: getName },
+  { label: '是否反操采集', key: 'fc', formatFn: getName },
+  { label: '是否允许操作采集', key: 'yc', formatFn: getName },
+  { label: '道岔强制', key: 'param', formatFn: getForceName },
+];
+
 watch(
   () => lineStore.selectedGraphics,
   (val, oldVal) => {
@@ -214,6 +116,22 @@ onMounted(() => {
   }
 });
 
+function getNameFormat(v: number) {
+  if (v) {
+    return name.value;
+  }
+  return '';
+}
+
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+
+function getForceName(param: request.Points.Force) {
+  return turnoutForceOption.find((item) => item.value == param)?.label || '';
+}
+
 function initTurnoutState(turnout: Turnout) {
   copySelectGraphic = toRaw(turnout);
   turnoutState.value = turnout.states.clone() as TurnoutStates;