闸机控制增加状态

src/api/gate.js

@@ -15,4 +15,12 @@ export function controlGateByBigInv(command) {
         url: '/api/GateResource/controlGateByBigInv?command=' + command  + '&warehouseId=' + warehouseId,
         method: 'get',
     });
+}
+
+// 获取闸机状态
+export function getGateStatus() {
+    return request({
+        url: '/api/FareGate/api/GetStatus',
+        method: 'get',
+    });
 }

src/gate/ControlGate.vue

@@ -11,7 +11,12 @@
         <span>主页</span>
       </button>
       <h1 class="page-title">闸机控制</h1>
-      <div class="header-actions" />
+      <div class="header-actions">
+        <button class="action-btn refresh-btn" @click="getStatus">
+          <i class="fas fa-sync-alt" />
+          <span>获取状态</span>
+        </button>
+      </div>
     </div>
 
     <!-- 主内容区域 -->
@@ -26,6 +31,10 @@
             <h2>闸机操作</h2>
             <p>选择以下操作来控制闸机</p>
           </div>
+          <div class="panel-status">
+            <h2>{{ status }}</h2>
+            <!-- <p>闸机状态正常</p> -->
+          </div>
         </div>
 
         <!-- 操作按钮网格 -->
@@ -69,13 +78,13 @@
               <i class="fas fa-arrow-left" />
             </div>
             <div class="btn-text">
-              <span class="btn-title">左闸机开门</span>
-              <span class="btn-desc">开启左侧闸机</span>
+              <span class="btn-title">闸机短开</span>
+              <span class="btn-desc">闸机短开</span>
             </div>
           </button>
 
           <!-- 右闸机开门 -->
-          <button class="control-btn right-btn" :disabled="loading" @click="handleControl('RIGHTOPEN', '右闸机开门', false)">
+          <!-- <button class="control-btn right-btn" :disabled="loading" @click="handleControl('RIGHTOPEN', '右闸机开门', false)">
             <div class="btn-icon">
               <i class="fas fa-arrow-right" />
             </div>
@@ -83,7 +92,7 @@
               <span class="btn-title">右闸机开门</span>
               <span class="btn-desc">开启右侧闸机</span>
             </div>
-          </button>
+          </button> -->
 
           <!-- 重启闸机 -->
           <button class="control-btn reboot-btn" :disabled="loading" @click="handleControl('REBOOT', '重启闸机', false)">
@@ -132,10 +141,10 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { showNotify } from 'vant';
-import { controlGate, controlGateByBigInv } from '../api/gate.js';
+import { controlGate, controlGateByBigInv, getGateStatus } from '../api/gate.js';
 
 // 图片资源
 import bgImg from '../assets/images/bj.png';
@@ -145,6 +154,8 @@ const router = useRouter();
 // 加载状态
 const loading = ref(false);
 
+const status = ref('');
+
 // 返回主页
 const goHome = () => {
     router.push('/home');
@@ -179,6 +190,29 @@ const handleControl = async (command, actionName, isBigInv) => {
         loading.value = false;
     }
 };
+
+// 获取闸机状态
+const getStatus = async () => {
+    loading.value = true;
+    try {
+        let res = await getGateStatus();
+        if (res.errorCode === 0) {
+            showNotify({ type: 'success', message: `闸机状态: ${res.data.gateStatus}`, duration: 3000 });
+            status.value = res.data.gateStatus;
+        } else {
+            showNotify({ type: 'danger', message: res.errorMessage || '闸机状态获取失败', duration: 3000 });
+        }
+    } catch (error) {
+        console.error('闸机状态获取失败:', error);
+        showNotify({ type: 'danger', message: '闸机状态获取失败', duration: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(() => {
+    getStatus();
+});
 </script>
 
 <style scoped>
@@ -255,7 +289,8 @@ const handleControl = async (command, actionName, isBigInv) => {
 }
 
 .header-actions {
-  width: 100px;
+  width: 160px;
+  margin-top: 14px;
 }
 
 /* ========== 主内容区域 ========== */
@@ -315,6 +350,24 @@ const handleControl = async (command, actionName, isBigInv) => {
   margin: 0;
 }
 
+.panel-status {
+  flex: 1;
+  text-align: right;
+}
+
+.panel-status h2 {
+  font-size: 28px;
+  font-weight: 600;
+  color: #7ec8ff;
+  margin: 0 0 8px 0;
+}
+
+.panel-status p {
+  font-size: 16px;
+  color: #7ec8ff;
+  margin: 0;
+}
+
 /* ========== 控制按钮网格 ========== */
 .control-grid {
   display: grid;
@@ -541,7 +594,10 @@ const handleControl = async (command, actionName, isBigInv) => {
   font-size: 18px;
   color: #7ec8ff;
 }
-
+.action-btn {
+  color: #7ec8ff !important;
+  font-size: 16px !important;
+}
 /* ========== 响应式 - 横屏 1920*1080 ========== */
 @media screen and (orientation: landscape) {
   .header-section {
@@ -557,6 +613,16 @@ const handleControl = async (command, actionName, isBigInv) => {
     font-size: 14px;
   }
 
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    gap: 6px;
+  }
+
+  .action-btn i {
+    font-size: 14px;
+  }
+
   .main-content {
     padding: 20px 40px;
     justify-content: center;