安装swiper和vue-awesome-swiper插件；新增特勤页面相关的VideoMonitorBox,TaskMonitorHeader,SpecialTaskMonitorPanel,IntersectionControlCard组件；修改StatusMonitoring页面的特勤显示；

package-lock.json

@@ -16,8 +16,10 @@
         "echarts": "^5.6.0",
         "echarts-gl": "^2.0.9",
         "konva": "^10.2.0",
+        "swiper": "^5.4.5",
         "three": "^0.183.1",
         "vue": "^2.6.14",
+        "vue-awesome-swiper": "^4.1.1",
         "vue-router": "^3.6.5"
       },
       "devDependencies": {
@@ -5352,6 +5354,14 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -10950,6 +10960,11 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -11150,6 +11165,23 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/vladimirkharlampidi"
+      }
+    },
     "node_modules/table": {
       "version": "6.9.0",
       "resolved": "https://registry.npmmirror.com/table/-/table-6.9.0.tgz",
@@ -11714,6 +11746,18 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "swiper": "^5.2.0",
+        "vue": "2.x"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

package.json

@@ -16,8 +16,10 @@
     "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
     "konva": "^10.2.0",
+    "swiper": "^5.4.5",
     "three": "^0.183.1",
     "vue": "^2.6.14",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.6.5"
   },
   "devDependencies": {

src/components/ui/IntersectionControlCard.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="control-card">
+        <div class="card-header">
+            <span class="dot" :style="{ background: data.statusColor }"></span>
+            <span class="road-name">{{ data.name }}</span>
+        </div>
+
+        <div class="card-body">
+            <div class="micro-map-container">
+                <IntersectionMapVideos v-if="data.mapData" :mapData="data.mapData" :videoUrls="data.videoUrls || {}" />
+            </div>
+
+            <div class="info-panel">
+                <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': data.btnType === 'normal', 'action-btn primary': data.btnType === 'primary'}">{{ data.btnText }}</button>
+            </div>
+        </div>
+
+        <div class="card-footer">
+            <div 
+                v-for="phase in data.phases" 
+                :key="phase.id" 
+                class="phase-box" 
+                :class="{ 'is-active': phase.active }"
+                @click="selectPhase(phase)"
+            >
+                <img v-if="phase.img" :src="phase.img" alt="phase-img" class="phase-image" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import IntersectionMapVideos from '@/components/ui/IntersectionMapVideos.vue';
+
+export default {
+    name: 'IntersectionControlCard',
+    components: { IntersectionMapVideos },
+    props: { 
+        data: { type: Object, required: true } 
+    },
+    methods: {
+        // 单选逻辑处理
+        selectPhase(selectedPhase) {
+            // 1. 如果点击的已经是激活状态，不做处理 (或者你也可以让它可以取消选中，看业务需求)
+            if (selectedPhase.active) return;
+
+            // 2. 排他操作：把当前卡片下的所有 phase 的 active 置为 false
+            this.data.phases.forEach(p => {
+                p.active = false;
+            });
+
+            // 3. 将当前点击的置为 true
+            selectedPhase.active = true;
+
+            // 4. (可选) 向父组件派发事件，告知哪个路口切换了哪个相位，方便父组件发送请求给后端
+            this.$emit('phase-changed', {
+                cardId: this.data.id,
+                phaseId: selectedPhase.id
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+.control-card {
+    background: #112445;
+    padding: 16px;
+    border-radius: 6px;
+    border: 1px solid rgba(68, 138, 255, 0.15);
+    display: flex;
+    flex-direction: column;
+}
+
+.card-header {
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    box-shadow: 0 0 5px currentColor;
+}
+
+.road-name {
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.card-body {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.micro-map-container {
+    width: 140px;
+    height: 140px;
+    background: #050a17;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.info-panel {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 13px;
+    display: flex;
+    flex-direction: column;
+}
+
+.info-item {
+    margin-bottom: 10px;
+    color: #6CFFD2;
+}
+
+.info-item span {
+    color: #6CFFD2;
+    font-weight: bold;
+}
+
+.info-item .time {
+    color: #6CFFD2;
+}
+
+.action-btn {
+    margin-top: auto;
+    width: 100%;
+    padding: 5px 8px;
+    border: none;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+    transition: opacity 0.3s;
+}
+
+.action-btn:hover {
+    opacity: 0.8;
+}
+
+.action-btn.primary {
+    background: #1E6AFF;
+}
+
+/* ================== 【修改】底部相位按钮组样式 ================== */
+.card-footer {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: auto;
+}
+
+.phase-box {
+    position: relative;
+    flex: 0 0 56px; 
+    height: 56px;
+    background: #E6F0FF; 
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+/* 保证图片居中且自适应大小 */
+.phase-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.phase-box::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* 这里设置蒙层的颜色，比如主题蓝 #1E6AFF 的 50% 透明度 */
+    background: rgba(30, 106, 255, 0.5); 
+    opacity: 0; /* 默认隐藏 */
+    transition: opacity 0.3s ease;
+    pointer-events: none; /* 关键：让鼠标点击穿透蒙层，防止阻挡点击事件 */
+}
+
+/* 激活状态下的样式 */
+.phase-box.is-active {
+    
+}
+
+/* 激活时，让透明遮罩层显示出来 */
+.phase-box.is-active::after {
+    opacity: 1; 
+}
+</style>

src/components/ui/SpecialTaskMonitorPanel.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="special-task-panel">
+    
+    <swiper class="my-swiper" :options="swiperOptions" ref="mySwiper">
+      <swiper-slide v-for="(item, index) in combinedList" :key="index" class="custom-slide">
+        
+        <VideoMonitorBox 
+          v-if="item.video" 
+          :videoUrl="item.video.url" 
+        />
+        <div v-else class="empty-placeholder"></div>
+
+        <IntersectionControlCard 
+          v-if="item.card" 
+          :data="item.card" 
+          class="margin-top-20"
+        />
+        
+      </swiper-slide>
+    </swiper>
+
+    <div class="nav-btn left-btn swiper-button-prev"></div>
+    <div class="nav-btn right-btn swiper-button-next"></div>
+
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import 'swiper/css/swiper.css'; 
+
+import VideoMonitorBox from './VideoMonitorBox.vue';
+import IntersectionControlCard from './IntersectionControlCard.vue';
+
+export default {
+  name: 'SpecialTaskMonitorPanel',
+  components: { Swiper, SwiperSlide, VideoMonitorBox, IntersectionControlCard },
+  props: {
+    panelData: { type: Object, required: true }
+  },
+  data() {
+    return {
+      swiperOptions: {
+        slidesPerView: 3,      // 显示 3 列
+        slidesPerGroup: 3,     // 每次滑动 3 列
+        spaceBetween: 20,      // 列间距 20px
+        simulateTouch: true,   // 允许鼠标拖拽
+        speed: 600,            // 滑动动画 600ms，更加优雅
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    };
+  },
+  computed: {
+    // 将独立的两组数据合并为 "列数据"，方便 swiper 渲染
+    combinedList() {
+      if (!this.panelData) return [];
+      const videos = this.panelData.videos || [];
+      const cards = this.panelData.intersections || [];
+      const maxLen = Math.max(videos.length, cards.length);
+      
+      const list = [];
+      for (let i = 0; i < maxLen; i++) {
+        list.push({
+          video: videos[i] || null,
+          card: cards[i] || null
+        });
+      }
+      return list;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.special-task-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 20px 60px; /* 给左右箭头留出足够空间 */
+  box-sizing: border-box;
+}
+
+.my-swiper {
+  width: 100%;
+  height: 100%;
+  padding: 10px 5px; /* 防止子元素的阴影被裁切 */
+}
+
+.custom-slide {
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-placeholder {
+  height: 220px; /* 需与 VideoMonitorBox 的高度一致 */
+  background: rgba(255,255,255,0.02);
+  border-radius: 6px;
+  border: 1px dashed rgba(255,255,255,0.1);
+}
+
+.margin-top-20 {
+  margin-top: 20px;
+}
+
+/* ================= 自定义左右箭头样式 ================= */
+.swiper-button-prev:after, .swiper-button-next:after { display: none; } /* 隐藏默认箭头 */
+
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  margin-top: -22px; /* 替代 translateY 居中，防止和 rotate 冲突 */
+  width: 44px;
+  height: 44px;
+  background-color: transparent;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+  z-index: 10;
+  transition: filter 0.3s ease; /* 动画过渡 */
+}
+
+/* ---------------- 左侧按钮逻辑 ---------------- */
+.left-btn {
+  left: 10px;
+  /* 正常可用状态：借用右可用图，旋转 180 度变成向左 */
+  background-image: url('@/assets/main/main-right.png');
+  transform: rotate(180deg);
+}
+.left-btn.swiper-button-disabled {
+  /* 禁用状态：使用原生的左禁用图，不旋转 */
+  background-image: url('@/assets/main/main-left.png');
+  transform: rotate(0deg);
+  cursor: not-allowed;
+}
+
+/* ---------------- 右侧按钮逻辑 ---------------- */
+.right-btn {
+  right: 10px;
+  /* 正常可用状态：直接使用右可用图，不旋转 */
+  background-image: url('@/assets/main/main-right.png');
+  transform: rotate(0deg);
+}
+.right-btn.swiper-button-disabled {
+  /* 禁用状态：借用左禁用图，旋转 180 度变成向右 */
+  background-image: url('@/assets/main/main-left.png');
+  transform: rotate(180deg);
+  cursor: not-allowed;
+}
+
+/* ---------------- 悬停特效 (仅对可用状态生效) ---------------- */
+/* 左按钮悬停：保持 180 度旋转并放大 */
+.left-btn:not(.swiper-button-disabled):hover {
+  transform: rotate(180deg) scale(1.1);
+  filter: drop-shadow(0 0 8px rgba(68, 138, 255, 0.6));
+}
+/* 右按钮悬停：保持 0 度旋转并放大 */
+.right-btn:not(.swiper-button-disabled):hover {
+  transform: rotate(0deg) scale(1.1);
+  filter: drop-shadow(0 0 8px rgba(68, 138, 255, 0.6));
+}
+</style>

src/components/ui/TaskMonitorHeader.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="task-header">
+        <div class="left-info">
+            <span class="status-dot" :style="{ background: taskData.statusColor }"></span>
+            <span class="title">{{ taskData.name }}</span>
+            <span class="info-text">{{ taskData.time }}</span>
+            <span class="info-text">{{ taskData.manager }}</span>
+            <span class="level-tag">{{ taskData.level }}</span>
+            <span class="info-text">{{ taskData.status }}</span>
+            <button class="btn btn-view" @click="handleEnd">立即结束</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TaskMonitorHeader',
+    props: {
+        taskData: { type: Object, required: true },
+        onEndTask: { type: Function }
+    },
+    methods: {
+        handleEnd() {
+            if (this.onEndTask) this.onEndTask();
+        }
+    }
+}
+</script>
+
+<style scoped>
+.task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding-right: 20px;
+}
+
+.left-info {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    color: #fff;
+    font-size: 14px;
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    box-shadow: 0 0 8px currentColor;
+}
+
+.title {
+    font-weight: bold;
+    font-size: 16px;
+    letter-spacing: 1px;
+}
+
+.info-text {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.level-tag {
+    color: #ff4d4f;
+    border: 1px solid rgba(255, 77, 79, 0.5);
+    background: rgba(255, 77, 79, 0.1);
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+</style>

src/components/ui/VideoMonitorBox.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="video-box">
+    <template v-if="videoSrc">
+      <video :src="videoSrc" autoplay loop muted class="real-video"></video>
+      <div class="close-btn" title="关闭视频" @click="handleClose">
+        ×
+      </div>
+    </template>
+    
+    <template v-else>
+      <div class="empty-state" @click="handleOpen" title="点击关联视频">
+        <span class="empty-tag">关联视频</span>
+        <img :src="require('@/assets/images/camera.png')" alt="camera" class="camera-image" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VideoMonitorBox',
+  props: {
+    videoUrl: { type: String, default: '' }
+  },
+  data() {
+    return {
+        videoSrc: null,
+    }
+  },
+  methods: {
+    // 处理关闭/关联视频的事件
+    handleClose() {
+      this.$emit('close');
+      this.videoSrc = null;
+    },
+    handleOpen() {
+      this.$emit('open');
+      this.videoSrc = this.videoUrl;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.video-box {
+  background: #112445;
+  border-radius: 6px;
+  height: 220px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(68, 138, 255, 0.15);
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
+}
+.real-video { width: 100%; height: 100%; object-fit: cover; }
+
+.close-btn { 
+  position: absolute; 
+  top: 10px; 
+  right: 10px; 
+  background: rgba(0,0,0,0.6); 
+  color: #fff; 
+  width: 24px; 
+  height: 24px; 
+  border-radius: 50%; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  cursor: pointer; 
+  transition: background 0.3s; 
+  z-index: 10; 
+}
+.close-btn:hover { background: rgba(0, 0, 0, 1) }
+.empty-state { 
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+  justify-content: center; 
+  height: 100%; 
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.empty-state:hover {
+  background: rgba(68, 138, 255, 0.1);
+}
+.empty-state:hover .empty-tag {
+  background: rgba(68, 138, 255, 1);
+  box-shadow: 0 0 10px rgba(68, 138, 255, 0.5);
+}
+.empty-state:hover .camera-image {
+  transform: scale(1.05);
+  transition: transform 0.3s ease;
+}
+
+.empty-tag { 
+  background: rgba(68, 138, 255, 0.8); 
+  color: #fff; 
+  padding: 4px 16px; 
+  border-radius: 4px; 
+  font-size: 14px; 
+  margin-bottom: 20px; 
+  letter-spacing: 1px; 
+  transition: all 0.3s ease;
+}
+
+.camera-image {
+  width: 80px; 
+  height: 80px; 
+  object-fit: contain; 
+  opacity: 0.8; 
+  margin-bottom: 20px; 
+}
+</style>

src/layouts/DashboardLayout.vue

@@ -92,6 +92,8 @@ import DeviceRestart from '@/components/ui/DeviceRestart.vue';
 import DeviceUpgrade from '@/components/ui/DeviceUpgrade.vue';
 import OnlineStatusTabs from '@/components/ui/OnlineStatusTabs.vue';
 import DeviceStatusTabs from '@/components/ui/DeviceStatusTabs.vue';
+import TaskMonitorHeader from '@/components/ui/TaskMonitorHeader.vue';
+import SpecialTaskMonitorPanel from '@/components/ui/SpecialTaskMonitorPanel.vue';
 
 export default {
     name: 'DashboardLayout',
@@ -112,7 +114,9 @@ export default {
         DeviceRestart,
         DeviceUpgrade,
         OnlineStatusTabs,
-        DeviceStatusTabs
+        DeviceStatusTabs,
+        TaskMonitorHeader,
+        SpecialTaskMonitorPanel
     },
     provide() {
         return {

src/views/StatusMonitoring.vue

@@ -29,10 +29,10 @@
                     <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
                         <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleMenuClick">
-                            <template #label="{ node }">
-                                <span v-if="node.children && node.children.length > 0">{{ node.label }}</span>
-                                <span v-else>{{ node.label }} 绿波带</span>
-                            </template>
+                        <template #label="{ node }">
+                            <span v-if="node.children && node.children.length > 0">{{ node.label }}</span>
+                            <span v-else>{{ node.label }} 绿波带</span>
+                        </template>
                         </MenuItem>
                     </TechTabPane>
                     <TechTabPane label="特勤" name="specialDuty">
@@ -64,6 +64,9 @@ import TongzhouTrafficMap from '@/components/TongzhouTrafficMap.vue';
 import MenuItem from '@/components/ui/MenuItem.vue';
 import ButtonGroup from '@/components/ui/ButtonGroup.vue';
 import { makeTrafficTimeSpaceData } from '@/mock/data';
+import testVideo1 from '@/assets/videos/video1.mp4';
+import testVideo2 from '@/assets/videos/video2.mp4';
+import testImg1 from '@/assets/test_img1.png';
 
 
 export default {
@@ -226,12 +229,12 @@ export default {
     mounted() {
         // 组件挂载时检查路由
         this.checkRouteParams();
-        
+
         // 初始显示顶部图表（如果没有路由参数覆盖的话）
         if (Object.keys(this.$route.query).length === 0) {
-            this.showTopChartDalogs(); 
+            this.showTopChartDalogs();
         }
-        
+
     },
     methods: {
         // 模式切换
@@ -297,7 +300,7 @@ export default {
             } else if (this.activeLeftTab === 'trunkLine') { // 干线
                 // TODO: 干线Tab的顶部图表
             } else if (this.activeLeftTab === 'specialDuty') { // 特勤
-                // TODO: 特勤Tab的顶部图表
+                this.openDutyDetailDialog();
             }
         },
         // 显示总览弹窗组
@@ -453,9 +456,9 @@ export default {
         showSpecialDutyDalogs(nodeData) {
             console.log('显示干线弹窗组', nodeData.id, nodeData.label);
         },
-        // === 新增：解析路由参数并执行对应操作 ===
+        // === 解析路由参数并执行对应操作 ===
         checkRouteParams() {
-            // 【修正】统一参数接收：特勤接收 id，路口接收 intersectionName 和 plan
+            // 统一参数接收：特勤接收 id，路口接收 intersectionName 和 plan
             const { tab, action, id, } = this.$route.query;
 
             if (!tab) return; // 如果没有传递 tab 参数，说明是正常访问，不处理
@@ -465,14 +468,14 @@ export default {
                 this.activeLeftTab = 'specialDuty'; // 切换到左侧【特勤】Tab
                 this.handleTabClick('specialDuty'); // 手动触发 Tab 切换事件，更新顶部图表
 
-                // 【修正】这里判断的条件改为 id
+                // 这里判断的条件改为 id
                 if (action === 'open-dialog' && id) {
                     this.$nextTick(() => {
                         this.openDutyDetailDialog(id); // 打开特勤弹窗
                     });
                 }
-            } 
-            
+            }
+
             // 2. 处理“关键路口”跳转
             else if (tab === 'crossing') {
                 this.activeLeftTab = 'crossing'; // 切换到左侧【路口】Tab
@@ -490,24 +493,134 @@ export default {
             }
         },
 
-        // === 新增：特勤详情弹窗 (你需要根据实际组件名替换) ===
-        openDutyDetailDialog(dutyId) {
+        // === 特勤详情弹窗 (你需要根据实际组件名替换) ===
+        async openDutyDetailDialog(dutyId) {
             console.log('准备打开特勤线路详情，ID：', dutyId);
-            // 这里仿照你原有的开窗逻辑，打开对应的组件
+            // 1. 获取数据
+            const panelData = await this.fetchSpecialTaskData();
+
+            // 2. 呼出弹窗
             this.$refs.layout.openDialog({
-                id: 'special-duty-detail-' + dutyId,
-                title: '勤务执行详情',
-                component: 'SecurityRoutePanelSwitch', // 注意：请替换为你项目中真实的特勤弹窗组件名
-                width: 1200,
-                height: 600,
-                center: true,
-                showClose: true,
-                data: { 
-                    id: dutyId 
+                id: 'special-task-dialog',
+                title: ' ', // 留空以隐藏默认标题，使用自定义 Header
+                width: 1400, // 弹窗宽一点，容纳 3 列
+                height: 700,
+                center: false,
+                showClose: false,
+                noPadding: true, // 去除默认内边距，让内部组件自己控制
+                position: {x: 200, y: 150},
+                // 挂载主体组件和数据
+                component: 'SpecialTaskMonitorPanel',
+                data: { panelData: panelData },
+
+                // 挂载自定义 Header 和数据
+                headerComponent: 'TaskMonitorHeader',
+                headerProps: {
+                    taskData: panelData.taskInfo,
+                    onEndTask: () => {
+                        console.log('点击了结束任务');
+                        this.$refs.layout.handleDialogClose('special-task-dialog');
+                    }
                 }
             });
         },
 
+        // 模拟从后端拉取数据
+        async fetchSpecialTaskData() {
+            // 模拟 API 请求延迟
+            await new Promise(resolve => setTimeout(resolve, 500));
+
+            // 这是后端返回的完整数据结构
+            return {
+                // 1. 头部任务信息
+                taskInfo: {
+                    name: '北京路演唱会特勤路线',
+                    time: '12:00-14:00',
+                    manager: '张飞',
+                    level: '一级',
+                    status: '进行中',
+                    statusColor: '#ff4d4f' // 红色状态灯
+                },
+                // 2. 视频流列表 (支持有源和无源)
+                videos: [
+                    { id: 1, url: testVideo1 }, // 有视频
+                    { id: 2, url: testVideo2 }, // 无视频，展示占位
+                    { id: 3, url: testVideo1 },
+                    { id: 4, url: testVideo2 } // 第4个，用于测试轮播翻页
+                ],
+                // 3. 路口控制卡片列表
+                intersections: [
+                    {
+                        id: 'INT_01',
+                        name: '京原路与北宫路交叉口1',
+                        statusColor: '#ffaa00', // 黄色状态灯
+                        stage: 3,
+                        mode: '步进',
+                        timeLeft: 30,
+                        btnText: '立即解锁',
+                        btnType: 'normal',
+                        phases: [
+                            { id: 1, icon: '↑', img: testImg1, active: false },
+                            { id: 2, icon: '↰', img: testImg1, active: false },
+                            { id: 3, icon: '↑', img: testImg1, active: true }, // 当前激活相位
+                            { id: 4, icon: '↰', img: testImg1, active: false }
+                        ],
+                        // 传给你原有的 IntersectionMapVideos 组件的数据
+                        mapData: {
+                            armsConfig: {
+                                N: { lanes: ['L', 'S', 'R'], cameraType: 1 },
+                                S: { lanes: ['L', 'S', 'R'], cameraType: 1 },
+                                E: { lanes: ['L', 'S', 'R'], cameraType: 2 },
+                                W: { lanes: ['L', 'S', 'R'], cameraType: 2 }
+                            },
+                            signals: {
+                                ns: { isGreen: true, time: 30, phaseName: '南北直行' },
+                                ew: { isGreen: false, time: 45, phaseName: '东西直行' }
+                            }
+                        },
+                        videoUrls: {
+                            nw: testVideo1,
+                            ne: testVideo2,
+                            sw: testVideo1,
+                            se: testVideo2
+                        }
+                    },
+                    // 为了演示，这里复制上面的数据作为第2、3、4个路口
+                    ...Array.from({ length: 3 }).map((_, i) => ({
+                        id: `INT_0${i + 2}`,
+                        name: `京原路与北宫路交叉口${i + 2}`,
+                        statusColor: '#00e5ff',
+                        stage: 2, mode: '系统', timeLeft: 15,
+                        btnText: '立即执行', btnType: 'primary',
+                        phases: [
+                            { id: 1, icon: '↑', img: testImg1, active: true },
+                            { id: 2, icon: '↰', img: testImg1, active: false },
+                            { id: 3, icon: '↑', img: testImg1, active: false },
+                            { id: 4, icon: '↰', img: testImg1, active: false }
+                        ],
+                        mapData: {
+                            armsConfig: {
+                                N: { lanes: ['L', 'S', 'R'], cameraType: 1 },
+                                S: { lanes: ['L', 'S', 'R'], cameraType: 1 },
+                                E: { lanes: ['L', 'S', 'R'], cameraType: 2 },
+                                W: { lanes: ['L', 'S', 'R'], cameraType: 2 }
+                            },
+                            signals: {
+                                ns: { isGreen: true, time: 30, phaseName: '南北直行' },
+                                ew: { isGreen: false, time: 45, phaseName: '东西直行' }
+                            }
+                        },
+                        videoUrls: {
+                            nw: testVideo1,
+                            ne: testVideo2,
+                            sw: testVideo2,
+                            se: testVideo1
+                        }
+                    }))
+                ]
+            };
+        },
+
     }
 }
 </script>