删除画线

src/api/device/video.js

@@ -45,3 +45,12 @@ export function recordingVideoAPI(data) {
     })
 }
 
+// 设备管理->视频监控->删除画线接口
+export function deleteLineAPI(data) {
+    return request({
+        url: '/smartCar/data/line/deleteLine',
+        method: 'POST',
+        data
+    })
+}
+

src/views/device/video/index.vue

@@ -4,7 +4,7 @@
             <div class="top-bar">
                 <div class="status-bar">
                     <span class="status-text">{{ lineInfo.equipmentName }}</span>
-                    <span class="status-indicator">
+                    <span class="status-indicator" :class="statusClass">
                         {{ statusText }}
                     </span>
                 </div>
@@ -23,7 +23,7 @@
                             icon="el-icon-edit">
                             画线
                         </el-button>
-                    
+
                         <template v-else>
                             <el-button type="success" class="save-line-btn" @click="handleSaveLines"
                                 icon="el-icon-check" :loading="saving">
@@ -98,7 +98,7 @@
 </template>
 
 <script>
-import { getLineDetailAPI, updateLineAPI, getVideoStreamAPI, operDeviceAPI, recordingVideoAPI,deleteLineAPI } from '@/api/device/video'
+import { getLineDetailAPI, updateLineAPI, getVideoStreamAPI, operDeviceAPI, recordingVideoAPI, deleteLineAPI } from '@/api/device/video'
 
 export default {
     name: 'VideoMonitor',
@@ -154,6 +154,15 @@ export default {
                 '3': '升级中'
             }
             return statusMap[this.lineInfo.equipmentStatus] || '未知'
+        },
+        statusClass() {
+            const classMap = {
+                '1': 'online',
+                '0': 'offline',
+                '2': 'standby',
+                '3': 'upgrading'
+            }
+            return classMap[this.lineInfo.equipmentStatus] || ''
         }
     },
     mounted() {
@@ -1035,4 +1044,87 @@ video::-internal-media-controls-download-button {
         opacity: 1;
     }
 }
+
+.status-indicator {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 14px; /* 稍微加宽一点 */
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    transition: all 0.3s ease;
+    
+    /* 核心修改：圆点变大，不再依赖文字颜色 */
+    &::before {
+        content: '';
+        display: inline-block;
+        width: 10px;  /* 增大尺寸 */
+        height: 10px; /* 增大尺寸 */
+        border-radius: 50%;
+        margin-right: 8px;
+        flex-shrink: 0; /* 防止圆点被挤压 */
+    }
+
+    /* 在线：高亮绿 + 强力扩散动画 */
+    &.online {
+        background-color: #e1f3d8; /* 浅绿背景 */
+        color: #67c23a;            /* 绿色文字 */
+        border: 1px solid #c2e7b0;
+
+        &::before {
+            background-color: #529b2e; /* 圆点颜色比文字更深，更实 */
+            box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7); /* 初始阴影 */
+            animation: deep-pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
+        }
+    }
+
+    /* 离线：灰色实心点 */
+    &.offline {
+        background-color: #f4f4f5;
+        color: #909399;
+        border: 1px solid #dcdfe6;
+
+        &::before {
+            background-color: #909399;
+        }
+    }
+
+    /* 待机 */
+    &.standby {
+        background-color: #fdf6ec;
+        color: #e6a23c;
+        border: 1px solid #f5dab1;
+        &::before { background-color: #e6a23c; }
+    }
+
+    /* 升级中 */
+    &.upgrading {
+        background-color: #ecf5ff;
+        color: #409eff;
+        border: 1px solid #d9ecff;
+        &::before {
+            background-color: #409eff;
+            animation: blink 1s infinite;
+        }
+    }
+}
+
+/* 更有力的呼吸动画 */
+@keyframes deep-pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 8px rgba(82, 155, 46, 0); /* 扩散范围更大 */
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(82, 155, 46, 0);
+    }
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
 </style>