站台状态

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

@@ -13,13 +13,6 @@
           label="id"
           hint=""
         />
-        <QInput
-          outlined
-          readonly
-          v-model="platformState.index"
-          label="索引"
-          hint=""
-        />
         <QInput
           outlined
           readonly
@@ -29,53 +22,65 @@
       </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>
-        <QSeparator class="q-mt-sm" />
-        <QItemLabel header>Spks继电器状态</QItemLabel>
-        <QItem>
-          <QItemSection>
+      <QList
+        dense
+        bordered
+        padding
+        class="rounded-borders q-my-sm"
+        v-if="isEmpjInfoShow || isSpksInfoShow || isMkxInfoShow"
+      >
+        <template v-if="isEmpjInfoShow">
+          <QItem>
             <QCheckbox
-              v-for="item in platformState.spksState"
-              :key="item.id"
               dense
-              v-model="item.xh"
-              :label="item.code"
+              v-model="platformState.empj"
+              outlined
+              label="EMP继电器状态"
               disable
             />
-          </QItemSection>
-        </QItem>
-        <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>
+          </QItem>
+        </template>
+        <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>
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, watchEffect, onUnmounted } from 'vue';
+import { ref, watch, watchEffect, onUnmounted, computed } from 'vue';
 import { Platform } from 'src/graphics/platform/Platform';
 import { state } from 'src/protos/device_state';
 import { PlatformState } from 'src/drawApp/graphics/PlatformInteraction';
@@ -83,14 +88,12 @@ import { PlatformState } from 'src/drawApp/graphics/PlatformInteraction';
 const lineStore = useLineStore();
 const platformState = ref<{
   id: string;
-  index: number;
   code: string;
   empj: boolean;
   spksState: state.ReplyState[];
   mkxJState: state.MkxJState;
 }>({
   id: '',
-  index: 0,
   code: '',
   empj: false,
   spksState: [],
@@ -126,10 +129,32 @@ watch(
     }
   }
 );
+
+const isSpksInfoShow = computed(() => {
+  const selected = lineStore.selectedGraphics;
+  if (!selected) return;
+  const platform = selected[0] as Platform;
+  console.log(platform.states);
+  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;
+});
+
+const isEmpjInfoShow = computed(() => {
+  const selected = lineStore.selectedGraphics;
+  if (!selected) return;
+  const platform = selected[0] as Platform;
+  return platform.states.empj;
+});
+
 function setPlatformState(platform: Platform) {
   platformState.value = {
     id: platform.datas.id,
-    index: platform.datas.index,
     code: platform.datas.code,
     empj: platform.states.empj ?? false,
     spksState: platform.states.spksState ?? [],

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

@@ -2,9 +2,7 @@
   <q-card flat bordered>
     <q-card-section class="row justify-between items-center q-pb-none">
       <div class="text-h6">车站状态</div>
-      <q-btn v-if="isIbpBtnShow" color="primary" @click="openIbp"
-        >打开IBP</q-btn
-      >
+      <q-btn color="primary" @click="openIbp">打开IBP</q-btn>
     </q-card-section>
     <q-separator inset />
     <q-card-section>
@@ -49,14 +47,6 @@ watch(
   }
 );
 
-const isIbpBtnShow = computed(() => {
-  const selected = lineStore.selectedGraphics;
-  if (!selected) return;
-  const station = selected[0] as Station;
-  if (!station) return;
-  return station.getPlatforms().some((p) => p.states.spksState?.length !== 0);
-});
-
 function openIbp() {
   const selected = lineStore.selectedGraphics;
   if (!selected) return;