完善监控功能

src/views/monitoring/manage/VideoEditDialog.vue

@@ -1,45 +1,79 @@
 <template>
   <el-dialog
     :visible.sync="visible"
-    title="编辑视频"
+    :title="formData.id ? '编辑视频' : '新增视频'"
     width="800px"
     @close="handleCancel"
     custom-class="custom-dialog"
   >
-    <!-- 表单区域 -->
     <el-form
       ref="editForm"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      label-width="120px"
       label-position="right"
       style="background-color: #003c68"
     >
-      <el-form-item label="视频名称：" prop="videoName">
+      <el-form-item label="视频名称：" prop="name">
         <el-input v-model="formData.name" />
       </el-form-item>
-      <el-form-item label="视频地址：" prop="videoUrl">
-        <el-input v-model="formData.url" />
-      </el-form-item>
-      <el-form-item label="视频播放地址：" prop="videoUrl">
-        <el-input v-model="formData.playUrl" />
+
+      <el-form-item label="设备类型：" prop="deviceType">
+        <el-select v-model="formData.deviceType" placeholder="选择设备类型">
+          <el-option label="IPC" value="IPC" />
+          <el-option label="MINMOE" value="MINMOE" />
+          <el-option label="LPR_GATE" value="LPR_GATE" />
+          <el-option label="TURNSTILE" value="TURNSTILE" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="视频IP：" prop="videoIp">
+
+      <el-form-item label="视频IP：" prop="ip">
         <el-input v-model="formData.ip" />
       </el-form-item>
+
       <el-form-item label="端口号：" prop="port">
         <el-input v-model.number="formData.port" type="number" />
       </el-form-item>
+
       <el-form-item label="用户名：" prop="username">
         <el-input v-model="formData.username" />
       </el-form-item>
+
       <el-form-item label="密码：" prop="password">
         <el-input v-model="formData.password" type="password" show-password />
       </el-form-item>
+
+      <el-form-item label="通道号：" prop="channel">
+        <el-input-number v-model="formData.channel" :min="1" />
+      </el-form-item>
+
       <el-form-item label="通道名称：" prop="channelName">
         <el-input v-model="formData.channelName" />
       </el-form-item>
+
+      <el-form-item label="RTSP地址：" prop="rtspUrl">
+        <el-input v-model="formData.rtspUrl" />
+      </el-form-item>
+
+      <el-form-item label="取流方式：" prop="previewType">
+        <el-select v-model="formData.previewType" placeholder="选择取流方式">
+          <el-option label="RTSP" value="RTSP" />
+          <el-option label="SDK" value="SDK" />
+          <el-option label="ISAPI" value="ISAPI" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="启用：" prop="enable">
+        <el-switch
+          v-model="formData.enable"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          :active-value="true"
+          :inactive-value="false"
+        />
+      </el-form-item>
     </el-form>
+
     <span slot="footer">
       <el-button @click="handleCancel">取消</el-button>
       <el-button type="primary" @click="handleSubmit">保存</el-button>
@@ -60,25 +94,50 @@ export default {
   data() {
     return {
       formData: {
-        videoName: "",
-        videoUrl: "",
-        videoIp: "",
-        port: null,
+        id: null,
+        name: "",
+        deviceType: "IPC",
+        ip: "",
+        port: 554,
         username: "",
         password: "",
+        channel: 1,
         channelName: "",
+        rtspUrl: "",
+        previewType: "RTSP",
+        enable: 1,
       },
       formRules: {
-        videoName: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
-        videoUrl: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
-        videoIp: [{ required: true, message: "请输入视频IP", trigger: "blur" }],
+        name: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
+        deviceType: [
+          { required: true, message: "请选择设备类型", trigger: "change" },
+        ],
+        ip: [{ required: true, message: "请输入视频IP", trigger: "blur" }],
         port: [
           { required: true, message: "请输入端口号", trigger: "blur" },
           { type: "number", message: "端口号必须是数字" },
         ],
-        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-        channelName: [{ required: true, message: "请输入通道名称", trigger: "blur" }],
+        channel: [
+          {
+            required: true,
+            type: "number",
+            message: "请输入通道号",
+            trigger: "blur",
+          },
+        ],
+        channelName: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+        ],
+        rtspUrl: [
+          { required: true, message: "请输入RTSP地址", trigger: "blur" },
+        ],
+        previewType: [
+          { required: true, message: "请选择取流方式", trigger: "change" },
+        ],
       },
     };
   },
@@ -86,18 +145,54 @@ export default {
     videoData: {
       immediate: true,
       handler(newVal) {
-        this.formData = { ...newVal }; // 回填父组件传入的数据
+        if (!newVal || Object.keys(newVal).length === 0) {
+          console.log("新增");
+          // 新增时重置为默认值
+          this.formData = {
+            id: null,
+            name: "",
+            deviceType: "IPC",
+            ip: "",
+            port: 554,
+            username: "",
+            password: "",
+            channel: 1,
+            channelName: "",
+            rtspUrl: "",
+            previewType: "RTSP",
+            enable: 1,
+          };
+        } else {
+          console.log("修改", this.formData);
+          this.formData = { ...this.formData, ...newVal };
+        }
       },
     },
+    // 监听关键字段自动生成RTSP
+    "formData.ip": "updateRtsp",
+    "formData.port": "updateRtsp",
+    "formData.username": "updateRtsp",
+    "formData.password": "updateRtsp",
+    "formData.channel": "updateRtsp",
   },
   methods: {
+    updateRtsp() {
+      if (this.formData.ip && this.formData.port && this.formData.channel) {
+        const user = this.formData.username || "admin";
+        const pass = this.formData.password || "12345";
+        const channel = this.formData.channel;
+        this.formData.rtspUrl = `rtsp://${user}:${pass}@${this.formData.ip}:${this.formData.port}/channel${channel}`;
+      } else {
+        this.formData.rtspUrl = "";
+      }
+    },
     handleCancel() {
       this.$emit("cancel");
     },
     handleSubmit() {
       this.$refs.editForm.validate((valid) => {
         if (valid) {
-          this.$emit("submit", { ...this.formData }); // 提交表单数据到父组件
+          this.$emit("submit", { ...this.formData });
         } else {
           this.$message.error("请检查表单填写项");
           return false;

src/views/monitoring/manage/index.vue

@@ -1,19 +1,35 @@
 <template>
   <div style="padding: 10px">
-    <div style="height: 50px; display: flex; align-items: center">
+    <!-- 搜索和新增 -->
+    <div style="height: 50px; display: flex; align-items: center; gap: 10px">
       <el-input
         v-model="searchName"
-        placeholder="请输入视频名称"
+        placeholder="视频名称"
         size="small"
-        style="width: 200px"
+        style="width: 150px"
       />
+      <el-select
+        v-model="searchDeviceType"
+        placeholder="设备类型"
+        size="small"
+        style="width: 130px"
+        clearable
+      >
+        <el-option label="IPC" value="IPC" />
+        <el-option label="MINMOE" value="MINMOE" />
+        <el-option label="LPR_GATE" value="LPR_GATE" />
+        <el-option label="TURNSTILE" value="TURNSTILE" />
+      </el-select>
       <el-button type="primary" size="small" @click="handleSearch"
         >查询</el-button
       >
       <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
     </div>
-    <el-table :data="tableData" border style="width: 100%">
+
+    <!-- 视频表格 -->
+    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
       <el-table-column type="index" label="序号" width="60" align="center" />
+
       <el-table-column
         prop="name"
         label="视频名称"
@@ -21,28 +37,35 @@
         align="center"
       />
       <el-table-column
-        prop="playUrl"
-        label="播放地址"
-        min-width="150"
+        prop="deviceType"
+        label="设备类型"
+        min-width="100"
         align="center"
-      >
-        <template #default="{ row }">
-          <a :href="row.playUrl" target="_blank">{{ row.playUrl }}</a>
-        </template>
-      </el-table-column>
+      />
       <el-table-column
-        prop="url"
-        label="原始RTSP地址"
-        min-width="250"
+        prop="channel"
+        label="通道号"
+        min-width="60"
         align="center"
       />
       <el-table-column
-        prop="ip"
-        label="视频IP"
+        prop="channelName"
+        label="通道名称"
         min-width="100"
         align="center"
       />
-      <el-table-column prop="port" label="端口号"  min-width="50"  align="center" />
+      <el-table-column
+        prop="ip"
+        label="IP地址"
+        min-width="120"
+        align="center"
+      />
+      <el-table-column
+        prop="port"
+        label="端口号"
+        min-width="60"
+        align="center"
+      />
       <el-table-column
         prop="username"
         label="用户名"
@@ -56,33 +79,51 @@
         align="center"
       />
       <el-table-column
-        prop="channelName"
-        label="通道名称"
-        width="120"
+        prop="rtspUrl"
+        label="RTSP地址"
+        min-width="250"
         align="center"
-      />
-      <el-table-column label="操作" fixed="right" min-width="80" align="center">
+      >
+        <template #default="{ row }">
+          <a :href="row.rtspUrl" target="_blank">{{ row.rtspUrl }}</a>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="playUrl"
+        label="播放地址"
+        min-width="250"
+        align="center"
+      >
+        <template #default="{ row }">
+          <a :href="row.playUrl" target="_blank">{{ row.playUrl }}</a>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="enable" label="启用" width="80" align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.enable ? 'success' : 'danger'">{{
+            row.enable ? "启用" : "禁用"
+          }}</el-tag>
+        </template>
+      </el-table-column>
+
+      <!-- 操作列 -->
+      <el-table-column label="操作" fixed="right" width="120" align="center">
         <template #default="{ row }">
-          <el-button
-            type="text"
-            size="small"
-            class="edit-btn"
-            @click="handleEdit(row)"
+          <el-button type="text" size="small" @click="handleEdit(row)"
             >编辑</el-button
           >
-          <el-button
-            type="text"
-            size="small"
-            class="delete-btn"
-            @click="handleDelete(row)"
+          <el-button type="text" size="small" @click="handleDelete(row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 分页 -->
     <el-pagination
       style="margin-top: 20px; text-align: right"
-      v-model:currentPage="currentPage"
+      v-model:current-page="currentPage"
       :page-size="pageSize"
       :total="total"
       layout="total, prev, pager, next, jumper"
@@ -108,11 +149,14 @@ export default {
   components: { VideoEditDialog },
   data() {
     return {
+      searchName: "",
+      searchDeviceType: "",
+
       tableData: [],
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      searchName: "",
+
       dialogVisible: false,
       currentVideoData: {},
     };
@@ -129,18 +173,31 @@ export default {
           page: this.currentPage,
           size: this.pageSize,
           name: this.searchName,
+          deviceType: this.searchDeviceType,
         },
       });
       this.tableData = res.list;
       this.total = res.total;
-      console.log("获取视频流信息", res);
     },
     handleSearch() {
       this.currentPage = 1;
       this.getVideoInfo();
     },
     handleAdd() {
-      this.currentVideoData = {};
+      this.currentVideoData = {
+        id: null,
+        name: "",
+        deviceType: "IPC",
+        ip: "",
+        port: 554,
+        username: "",
+        password: "",
+        channel: 1,
+        channelName: "",
+        rtspUrl: "",
+        previewType: "RTSP",
+        enable: true,
+      };
       this.dialogVisible = true;
     },
     handleEdit(row) {
@@ -148,7 +205,7 @@ export default {
       this.dialogVisible = true;
     },
     async handleDelete(row) {
-      const res = await request({
+      await request({
         url: `/video/delete/${row.id}`,
         method: "DELETE",
       });