From 08c67b11011afe5b013f16cc0f1e8d34388dfd70 Mon Sep 17 00:00:00 2001
From: 16337 <1633794139@qq.com>
Date: Tue, 10 Mar 2026 11:13:59 +0800
Subject: [PATCH] =?UTF-8?q?Revert=20"refactor:=20=E6=91=84=E5=83=8F?=
 =?UTF-8?q?=E5=A4=B4=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E3=80=81=E6=8B=89=E6=B5=81=E5=92=8C?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E6=8C=89=E9=92=AE"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit fbfe2f903222c2244ee23c9a16bb4bda012fc0b2.
---
 web/src/views/cameraConfig/index.vue | 48 ++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/web/src/views/cameraConfig/index.vue b/web/src/views/cameraConfig/index.vue
index 6f1e38674..6a4fe4f72 100644
--- a/web/src/views/cameraConfig/index.vue
+++ b/web/src/views/cameraConfig/index.vue
@@ -6,6 +6,10 @@
 
     <div class="search-bar">
       <el-input v-model="searchQuery" placeholder="搜索摄像头名称/地址" size="small" style="width: 250px" clearable @clear="loadData" @keyup.enter.native="loadData"></el-input>
+      <el-select v-model="searchPulling" placeholder="拉流状态" size="small" style="width: 130px; margin-left: 10px" clearable @change="loadData">
+        <el-option label="拉流中" :value="true"></el-option>
+        <el-option label="未拉流" :value="false"></el-option>
+      </el-select>
       <el-button size="small" type="primary" style="margin-left: 10px" @click="loadData">查询</el-button>
     </div>
 
@@ -13,6 +17,13 @@
       <el-table-column prop="app" label="应用名" width="100"></el-table-column>
       <el-table-column prop="stream" label="流ID" width="120"></el-table-column>
       <el-table-column prop="srcUrl" label="拉流地址" min-width="280" show-overflow-tooltip></el-table-column>
+      <el-table-column label="状态" width="100">
+        <template slot-scope="scope">
+          <el-tag size="mini" :type="scope.row.pulling ? 'success' : 'info'">
+            {{ scope.row.pulling ? '拉流中' : '未拉流' }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="ROI数量" width="90">
         <template slot-scope="scope">
           <el-badge :value="roiCounts[scope.row.app + '/' + scope.row.stream] || 0" type="primary" class="roi-badge">
@@ -20,9 +31,13 @@
           </el-badge>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="120" fixed="right">
+      <el-table-column label="操作" width="260" fixed="right">
         <template slot-scope="scope">
           <el-button size="mini" type="success" @click="handleRoiConfig(scope.row)">ROI配置</el-button>
+          <el-button size="mini" :type="scope.row.pulling ? 'warning' : 'primary'" @click="toggleStream(scope.row)">
+            {{ scope.row.pulling ? '停止' : '拉流' }}
+          </el-button>
+          <el-button size="mini" type="info" @click="handleExport(scope.row)">导出</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -41,8 +56,9 @@
 </template>
 
 <script>
-import { queryCameraList } from '@/api/cameraConfig'
+import { queryCameraList, startCamera, stopCamera } from '@/api/cameraConfig'
 import { queryRoiByCameraId } from '@/api/aiRoi'
+import { exportConfig } from '@/api/aiConfig'
 
 export default {
   name: 'CameraConfig',
@@ -55,6 +71,7 @@ export default {
       count: 15,
       total: 0,
       searchQuery: '',
+      searchPulling: null
     }
   },
   mounted() {
@@ -67,6 +84,7 @@ export default {
         page: this.page,
         count: this.count,
         query: this.searchQuery || null,
+        pulling: this.searchPulling
       }).then(res => {
         const data = res.data
         this.cameraList = data.list || []
@@ -99,6 +117,32 @@ export default {
     handleRoiConfig(row) {
       const cameraId = row.app + '/' + row.stream
       this.$router.push({ path: `/cameraConfig/roi/${encodeURIComponent(cameraId)}`, query: { srcUrl: row.srcUrl, app: row.app, stream: row.stream } })
+    },
+    toggleStream(row) {
+      if (row.pulling) {
+        stopCamera(row.id).then(() => {
+          this.$message.success('已停止')
+          this.loadData()
+        }).catch(() => { this.$message.error('操作失败') })
+      } else {
+        startCamera(row.id).then(() => {
+          this.$message.success('开始拉流')
+          this.loadData()
+        }).catch(() => { this.$message.error('操作失败') })
+      }
+    },
+    handleExport(row) {
+      const cameraId = row.app + '/' + row.stream
+      exportConfig(cameraId).then(res => {
+        const json = JSON.stringify(res.data, null, 2)
+        const blob = new Blob([json], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `config_${row.app}_${row.stream}.json`
+        a.click()
+        URL.revokeObjectURL(url)
+      }).catch(() => { this.$message.error('导出失败') })
     }
   }
 }