状态监控页面特勤Tab交互重构与确认弹窗增强

  1. 特勤操作按钮增加确认流程
     - 点击立即执行/立即结束/重新开始时，先打开详情弹窗，再弹出确认对话框
     - 确认后同步更新左侧列表和详情弹窗Header的状态数据
     - openDutyDetailDialog 返回 panelData 供确认回调使用

  2. MessageDialog 组件增强
     - 新增 showCancel/cancelText 属性，支持取消+确认双按钮
     - 新增 noBackdrop 属性，去除背景遮罩，确认弹窗不遮挡底层内容
     - z-index 从外层 overlay 控制，基础值提高到 9000，确保始终在 SmartDialog 之上
     - 新增 cancel 方法和 onCancel 回调

src/components/ui/MessageDialog/MessageDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="message-fade">
-    <div v-if="localVisible" class="message-overlay" @click.self="handleOverlayClick">
-      <div class="message-box" :style="zIndexStyle">
+    <div v-if="localVisible" class="message-overlay" :class="{ 'no-backdrop': noBackdrop }" :style="zIndexStyle" @click.self="handleOverlayClick">
+      <div class="message-box">
         
         <div class="message-header">
           <span class="message-title">{{ title }}</span>
@@ -14,6 +14,7 @@
 
         <div class="message-footer" v-if="showConfirm">
             <div class="message-btn-group">
+                <button v-if="showCancel" class="message-btn message-btn-cancel" @click="cancel">{{ cancelText }}</button>
                 <button class="message-btn" @click="confirm">{{ confirmText }}</button>
             </div>
         </div>
@@ -38,16 +39,20 @@ export default {
     showConfirm: { type: Boolean, default: true },
     confirmText: { type: String, default: "确认" },
     closeOnClickModal: { type: Boolean, default: false },
-    
+    showCancel: { type: Boolean, default: false },
+    cancelText: { type: String, default: "取消" },
+    noBackdrop: { type: Boolean, default: false },
+
     // 如果依然保留函数回调方式（主要用于命令式调用）
     onClose: { type: Function, default: null },
-    onConfirm: { type: Function, default: null }
+    onConfirm: { type: Function, default: null },
+    onCancel: { type: Function, default: null }
   },
   data() {
     return {
       // 内部变量，避免直接修改 prop(visible) 报错
-      localVisible: this.visible, 
-      zIndex: 2000, 
+      localVisible: this.visible,
+      zIndex: 9000,
       timer: null
     };
   },
@@ -78,7 +83,7 @@ export default {
       this.startTimer();
     }
     // 实例化时增加全局 zIndex，解决堆叠问题
-    Vue.prototype.$msgZIndex = (Vue.prototype.$msgZIndex || 2000) + 1;
+    Vue.prototype.$msgZIndex = (Vue.prototype.$msgZIndex || 9000) + 1;
     this.zIndex = Vue.prototype.$msgZIndex;
   },
   methods: {
@@ -108,6 +113,13 @@ export default {
       this.$emit("confirm");
       this.close();
     },
+    cancel() {
+      if (typeof this.onCancel === "function") {
+        this.onCancel();
+      }
+      this.$emit("cancel");
+      this.close();
+    },
     handleOverlayClick() {
       if (this.closeOnClickModal) {
         this.close();
@@ -225,7 +237,9 @@ export default {
     top: 0;
 }
 .message-btn-group {
-    padding: 16px 16px 16px 16px;
+    padding: 16px;
+    display: flex;
+    gap: 10px;
 }
 
 .message-btn {
@@ -245,6 +259,26 @@ export default {
   box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
 }
 
+.message-btn-cancel {
+  background: transparent;
+  border: 1px solid rgba(130, 150, 190, 0.4);
+}
+.message-btn-cancel:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(130, 150, 190, 0.8);
+  box-shadow: none;
+}
+
+.message-overlay.no-backdrop {
+  background: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  pointer-events: none;
+}
+.no-backdrop .message-box {
+  pointer-events: auto;
+}
+
 .message-fade-enter-active, .message-fade-leave-active {
   transition: opacity 0.3s, transform 0.3s;
 }

src/views/StatusMonitoring.vue

@@ -541,22 +541,53 @@ export default {
                     }
                 }
             });
+            return panelData;
         },
         handleSpecialTaskView(row) {
             console.log('查看特勤线路，当前数据：', row);
             this.openDutyDetailDialog(row);
         },
-        handleSpecialTaskStart(row) {
+        async handleSpecialTaskStart(row) {
             console.log('立即执行特勤任务：', row);
-            row.status = '进行中';
+            const panelData = await this.openDutyDetailDialog(row);
+            this.$msg({
+                title: '操作确认',
+                message: `确认立即执行任务「${row.name}」？`,
+                duration: 0,
+                showConfirm: true,
+                showCancel: true,
+                confirmText: '确认执行',
+                noBackdrop: true,
+                onConfirm: () => { row.status = '进行中'; panelData.taskInfo.status = '进行中'; }
+            });
         },
-        handleSpecialTaskEnd(row) {
+        async handleSpecialTaskEnd(row) {
             console.log('立即结束特勤任务：', row);
-            row.status = '已完成';
+            const panelData = await this.openDutyDetailDialog(row);
+            this.$msg({
+                title: '操作确认',
+                message: `确认立即结束任务「${row.name}」？`,
+                duration: 0,
+                showConfirm: true,
+                showCancel: true,
+                confirmText: '确认结束',
+                noBackdrop: true,
+                onConfirm: () => { row.status = '已完成'; panelData.taskInfo.status = '已完成'; }
+            });
         },
-        handleSpecialTaskRestart(row) {
+        async handleSpecialTaskRestart(row) {
             console.log('重新开始特勤任务：', row);
-            row.status = '进行中';
+            const panelData = await this.openDutyDetailDialog(row);
+            this.$msg({
+                title: '操作确认',
+                message: `确认重新开始任务「${row.name}」？`,
+                duration: 0,
+                showConfirm: true,
+                showCancel: true,
+                confirmText: '确认开始',
+                noBackdrop: true,
+                onConfirm: () => { row.status = '进行中'; panelData.taskInfo.status = '进行中'; }
+            });
         },