Parcourir la source

修改特勤弹窗面板,点击立即执行,自动切换下一个路径面板;

画安 il y a 1 mois
Parent
commit
f789ed08e9

+ 5 - 1
src/components/ui/IntersectionControlCard.vue

@@ -14,7 +14,11 @@
                 <div class="info-item">驻留阶段:<span>{{ data.stage }}</span></div>
                 <div class="info-item">执行方式:<span>{{ data.mode }}</span></div>
                 <div class="info-item">剩余时间:<span class="time">{{ data.timeLeft }}s</span></div>
-                <button :class="{'btn btn-view margin-top-auto': data.btnType === 'normal', 'action-btn primary': data.btnType === 'primary'}">{{ data.btnText }}</button>
+                <button 
+                    @click="$emit('action-click', data)"
+                    :class="{'btn btn-view margin-top-auto': data.btnType === 'normal', 'action-btn primary': data.btnType === 'primary'}">
+                    {{ data.btnText }}
+                </button>
             </div>
         </div>
 

+ 33 - 0
src/components/ui/SpecialTaskMonitorPanel.vue

@@ -17,6 +17,7 @@
             v-if="item.card" 
             :data="item.card" 
             class="margin-top-20"
+            @action-click="handleCardAction"
           />
         </div>
         
@@ -78,6 +79,38 @@ export default {
       }
       return list;
     }
+  },
+  methods: {
+    // 处理卡片按钮点击事件
+    handleCardAction(cardData) {
+      if (cardData.btnText === '立即执行') {
+        // 1. 修改文案和按钮样式状态(可选:根据你的业务,让按钮退回普通样式)
+        cardData.btnText = '立即解锁';
+        cardData.btnType = 'normal'; 
+        
+        // 2. 自动切换到下一个
+        this.slideNext();
+        
+        // 3. (可选) 这里可以顺便发送请求给后端,告知该路口已执行
+        console.log(`路口 [${cardData.name}] 已执行特勤方案`);
+        
+      } else if (cardData.btnText === '立即解锁') {
+        // 如果再次点击(已经是解锁状态),可以重置回执行状态,按需保留
+        cardData.btnText = '立即执行';
+        cardData.btnType = 'primary';
+        
+        console.log(`路口 [${cardData.name}] 已解除特勤方案`);
+      }
+    },
+    
+    // 调用 Swiper 实例滑动到下一页
+    slideNext() {
+      // 兼容不同版本的 vue-awesome-swiper 实例获取方式
+      const swiperInstance = this.$refs.mySwiper.$swiper || this.$refs.mySwiper.swiper;
+      if (swiperInstance) {
+        swiperInstance.slideNext();
+      }
+    }
   }
 }
 </script>