道岔操作调整

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

@@ -1,48 +1,58 @@
 <template>
   <q-card flat bordered>
-    <q-card-section>
-      <div class="text-h6">道岔状态</div>
+    <q-card-section class="flex justify-between">
+      <span class="text-h6">道岔状态</span>
+      <q-btn-dropdown color="primary" label="操作">
+        <q-list>
+          <q-item
+            v-for="(item, index) in options"
+            :key="index"
+            clickable
+            v-close-popup
+            @click="toDo(item)"
+          >
+            <q-item-section>
+              <q-item-label>{{ item }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
     </q-card-section>
     <q-separator inset />
-    <q-form>
-      <q-input outlined readonly v-model="turnoutState.id" label="id" hint="" />
+    <q-card-section>
       <q-input
+        dense
         outlined
         readonly
-        v-model="turnoutState.index"
-        label="索引"
+        v-model="turnoutState.id"
+        label="id"
         hint=""
       />
       <q-input
+        dense
         outlined
         readonly
         v-model.number="turnoutState.code"
         label="名称"
+        hint=""
       />
-      <q-checkbox
-        v-model="turnoutState.normal"
-        outlined
-        label="是否定位"
-        :disable="turnoutState.reverse"
-      />
-      <q-checkbox
-        v-model="turnoutState.reverse"
-        outlined
-        label="是否反位"
-        :disable="turnoutState.normal"
-      />
-    </q-form>
-    <q-card-actions align="center">
-      <q-btn label="修改" type="submit" color="primary" @click="submitState" />
-      <q-btn
-        label="重置"
-        type="reset"
-        color="primary"
-        flat
-        class="q-ml-sm"
-        @click="onReset"
-      />
-    </q-card-actions>
+      <div>
+        <q-checkbox
+          v-model="turnoutState.normal"
+          outlined
+          label="定位"
+          :disable="true"
+        />
+      </div>
+      <div>
+        <q-checkbox
+          v-model="turnoutState.reverse"
+          outlined
+          label="反位"
+          :disable="true"
+        />
+      </div>
+    </q-card-section>
   </q-card>
 </template>
 <script setup lang="ts">
@@ -57,7 +67,6 @@ const $q = useQuasar();
 const lineStore = useLineStore();
 const turnoutState = ref({
   id: '',
-  index: 0,
   code: '',
   normal: false,
   reverse: false,
@@ -71,7 +80,6 @@ watch(
     } else {
       turnoutState.value = {
         id: '',
-        index: 0,
         code: '',
         normal: false,
         reverse: false,
@@ -82,21 +90,21 @@ watch(
 function setTurnoutState(turnout: Turnout) {
   turnoutState.value = {
     id: turnout.datas.id,
-    index: turnout.datas.index,
     code: turnout.datas.code,
     normal: turnout.states.normal || false,
     reverse: turnout.states.reverse || false,
   };
 }
-function submitState() {
+function changePosition(state: boolean) {
   if (lineStore.simulationId) {
-    setSwitchPosition({
+    const obj = {
       simulationId: lineStore.simulationId,
       mapId: lineStore.mapId as number,
       id: turnoutState.value.id,
-      turnNormal: turnoutState.value.normal,
-      turnReverse: turnoutState.value.reverse,
-    })
+      turnNormal: state,
+      turnReverse: !state,
+    };
+    setSwitchPosition(obj)
       .then(() => {
         $q.notify({ type: 'positive', message: '修改道岔状态成功' });
       })
@@ -109,15 +117,19 @@ function submitState() {
       });
   }
 }
-function onReset() {
-  if (lineStore.selectedGraphics) {
-    setTurnoutState(lineStore.selectedGraphics[0] as Turnout);
-  }
-}
 
 onMounted(() => {
   if (lineStore.selectedGraphics) {
     setTurnoutState(lineStore.selectedGraphics[0] as Turnout);
   }
 });
+
+const options = ['定操', '反操'];
+function toDo(item: string) {
+  if (item == '定操') {
+    changePosition(true);
+  } else if (item == '反操') {
+    changePosition(false);
+  }
+}
 </script>