Revert "refactor: 摄像头管理页面移除状态栏、拉流和导出按钮"

This reverts commit fbfe2f9032.

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('导出失败') })
     }
   }
 }