From 0e4f543434daa0f1ed912309cf7e5c2d1b20058d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 7 Oct 2025 10:02:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=B7=A1=E6=A3=80=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rtsp-vue/src/views/index.vue                  | 243 +++++++++---------
 rtsp-vue/src/views/video/inspection/index.vue |   7 +
 .../src/views/video/inspection/record.vue     |  12 +-
 rtsp-vue/vite.config.js                       |   2 +-
 4 files changed, 141 insertions(+), 123 deletions(-)

diff --git a/rtsp-vue/src/views/index.vue b/rtsp-vue/src/views/index.vue
index 860a71b..7d80de6 100644
--- a/rtsp-vue/src/views/index.vue
+++ b/rtsp-vue/src/views/index.vue
@@ -1,139 +1,140 @@
 <template>
-  <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>RTSP视频分析平台</h2>
-        <p>
-          RTSP视频分析平台。项目集成了虹软SDK，实现了人脸识别、活体检测、3D角度分析、年龄及性别识别等功能；同时，利用JavaCV进行高效的视频处理。后端采用SpringBoot框架，前端则运用了Vue3框架，确保系统的稳定与用户体验的流畅。<br>
-        </p>
-      </el-col>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备类型" prop="type">
+        <el-radio-group type="button" v-model="queryParams.type" @change="handleQuery">
+          <el-radio-button :label="undefined">全部</el-radio-button>
+          <el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
 
-      <el-col :sm="24" :lg="12" style="padding-left: 50px">
-        <el-row>
-          <el-col :span="12">
-            <h2>技术选型</h2>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <h4>后端技术</h4>
-            <ul>
-              <li>SpringBoot</li>
-              <li>Spring Security</li>
-              <li>JWT</li>
-              <li>MyBatis</li>
-              <li>Druid</li>
-              <li>JavaCv</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-          <el-col :span="6">
-            <h4>前端技术</h4>
-            <ul>
-              <li>Vue</li>
-              <li>Vite</li>
-              <li>Element-Plus</li>
-              <li>Axios</li>
-              <li>Sass</li>
-              <li>Xgplayer</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-divider />
-    <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="12" :lg="8">
-        <el-card class="update-log">
-          <template v-slot:header>
-            <div class="clearfix">
-              <span>更新日志</span>
-            </div>
-          </template>
-          <el-collapse accordion>
-            <el-collapse-item title="v1.0.0 - 2025-01-16">
-              <ol>
-                <li>RTSP视频分析平台正式发布</li>
-                <li>rtsp转http-flv和ws-flv</li>
-                <li>javaCV抽帧转换</li>
-              </ol>
-            </el-collapse-item>
-          </el-collapse>
-        </el-card>
-      </el-col>
-    </el-row>
+    <div style="display: flex;">
+      <div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
+        <div class="card-image"></div>
+        <div class="category"><dict-tag :options="device_type" :value="item.type"/></div>
+        <div class="heading"> 
+          {{ item.ip }}
+          <!-- <div class="author"> By <span class="name">Abi</span> 4 days ago</div> -->
+        </div>
+      </div>
+    </div>
+
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
   </div>
 </template>
-<script setup name="Index">
-const version = ref('3.8.9')
 
-function goTarget(url) {
-  window.open(url, '__blank')
+<script setup name="Device">
+import router from '@/router'
+import { listDevice } from "@/api/video/device";
+
+const { proxy } = getCurrentInstance();
+const { device_on_status, device_type } = proxy.useDict('device_on_status', 'device_type');
+
+const deviceList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 20,
+    type: undefined,
+  },
+});
+
+const { queryParams } = toRefs(data);
+
+const handleVideoCameraFilled = (row) => {
+  router.push({ path: "/video/flv", query: { deviceId: row.deviceId } });
 }
+
+/** 查询设备列表 */
+function getList() {
+  loading.value = true;
+  listDevice(queryParams.value).then(response => {
+    deviceList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.deviceId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+getList();
 </script>
 
-<style scoped lang="scss">
-.home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
+<style scoped>
+/* From Uiverse.io by alexmaracinaru */
+.card {
+  width: 190px;
+  background: white;
+  padding: .4em;
+  border-radius: 6px;
+}
 
-  ul {
-    padding: 0;
-    margin: 0;
-  }
+.card-image {
+  background-color: rgb(236, 236, 236);
+  width: 100%;
+  height: 130px;
+  border-radius: 6px 6px 0 0;
+}
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
+.card-image:hover {
+  transform: scale(0.98);
+}
 
-  ul {
-    list-style-type: none;
-  }
+.category {
+  text-transform: uppercase;
+  font-size: 0.7em;
+  font-weight: 600;
+  color: rgb(63, 121, 230);
+  padding: 10px 7px 0;
+}
 
-  h4 {
-    margin-top: 0px;
-  }
+.category:hover {
+  cursor: pointer;
+}
 
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
+.heading {
+  font-weight: 600;
+  color: rgb(88, 87, 87);
+  padding: 7px;
+}
 
-  p {
-    margin-top: 10px;
+.heading:hover {
+  cursor: pointer;
+}
 
-    b {
-      font-weight: 700;
-    }
-  }
+.author {
+  color: gray;
+  font-weight: 400;
+  font-size: 11px;
+  padding-top: 20px;
+}
 
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
-    }
-  }
+.name {
+  font-weight: 600;
+}
+
+.name:hover {
+  cursor: pointer;
 }
 </style>
-
diff --git a/rtsp-vue/src/views/video/inspection/index.vue b/rtsp-vue/src/views/video/inspection/index.vue
index fea49b4..d070023 100644
--- a/rtsp-vue/src/views/video/inspection/index.vue
+++ b/rtsp-vue/src/views/video/inspection/index.vue
@@ -103,6 +103,7 @@
           <el-button link type="warning" icon="VideoPause" @click="handleStop(scope.row)" v-hasPermi="['video:inspection:stop']" v-if="scope.row.status === '0'">停止</el-button>
           <el-button link type="success" icon="CaretRight" @click="handleExecute(scope.row)" v-hasPermi="['video:inspection:execute']">执行</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspection:remove']">删除</el-button>
+          <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)" v-hasPermi="['video:inspection:video']">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -171,6 +172,8 @@
 import { listInspection, getInspection, delInspection, addInspection, updateInspection, startTask, stopTask, executeTask } from "@/api/video/inspection";
 import { listDevice } from "@/api/video/device";
 
+import router from '@/router'
+
 const { proxy } = getCurrentInstance();
 const { sys_normal_disable } = proxy.useDict('sys_normal_disable');
 
@@ -290,6 +293,10 @@ function handleUpdate(row) {
   });
 }
 
+function handleDetail(row) {
+  router.push({ path: "/insrecord", query: { taskId: row.taskId } });
+}
+
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["inspectionRef"].validate(valid => {
diff --git a/rtsp-vue/src/views/video/inspection/record.vue b/rtsp-vue/src/views/video/inspection/record.vue
index c91b0ca..982116c 100644
--- a/rtsp-vue/src/views/video/inspection/record.vue
+++ b/rtsp-vue/src/views/video/inspection/record.vue
@@ -161,6 +161,9 @@ import { listInspection } from "@/api/video/inspection";
 const { proxy } = getCurrentInstance();
 const { ins_record_status } = proxy.useDict('ins_record_status');
 
+const route = useRoute();
+const taskId = route.query.taskId;
+
 const inspectionList = ref([]);
 const inspectionRecordList = ref([]);
 const open = ref(false);
@@ -177,7 +180,7 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 20,
-    taskId: null,
+    taskId: taskId ? parseInt(taskId) : null,
     executeTime: null,
     duration: null,
     accessory: null,
@@ -188,6 +191,13 @@ const data = reactive({
   }
 });
 
+watch(() => taskId, (newVal) => {
+  if (newVal) {
+    queryParams.value.taskId = parseInt(newVal);
+    getList();
+  }
+});
+
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询巡检任务记录列表 */
diff --git a/rtsp-vue/vite.config.js b/rtsp-vue/vite.config.js
index 795a97a..20e8094 100644
--- a/rtsp-vue/vite.config.js
+++ b/rtsp-vue/vite.config.js
@@ -31,7 +31,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:10081',
+          target: 'http://49.232.154.205:10082',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },