增加视频流地址功能

src/api/camera/camera-overview.ts

@@ -56,6 +56,8 @@ export interface CameraDetailServer {
   networkingState: number;
   /** 状态: 0-启用, 1-禁用 */
   status: number;
+  /** 相机流 */
+  pushstreamIp: string;
 }
 
 export const getCameraList = (params: CameraQueryParams) => {

src/api/camera/camera-preview.ts

@@ -22,6 +22,7 @@ export interface CameraTree {
   code: string;
   children: CameraTree[];
   nodeType: CameraTreeNodeType;
+  pushstreamIp: string;
 }
 
 /** 获取摄像头所在的树状结构 */

src/views/cameras/preview/components/CameraLiveVideo/CameraLiveVideo.vue

@@ -1,11 +1,23 @@
 <template>
-  <LiveVideo :url="url" />
+  <LiveVideo
+    :url="cameraDetailStore.detail?.pushstreamIp"
+    v-if="cameraDetailStore.detail?.pushstreamIp"
+  />
+  <div v-if="!cameraDetailStore.detail?.pushstreamIp" class="noPushStreamIpTip"
+    >暂无相机视频流地址</div
+  >
 </template>
 <script lang="ts" setup>
   // import bg from '@/assets/images/camera/video-live.png';
   import LiveVideo from '@/components/LiveVideo/LiveVideo.vue';
-  import { ref } from 'vue';
-  // const url = ref('http://10.94.4.184:8080/live/DHH150.flv');
-  // const url = ref('http://10.94.4.184:8080/live/JJ-GH-03.flv');
-  const url = ref('http://172.16.26.11:8080/live/FC-DM-01.flv');
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  const cameraDetailStore = useCameraDetailStore();
 </script>
+
+<style>
+  .noPushStreamIpTip {
+    font-size: 40px;
+    margin-top: 300px;
+    text-align: center;
+  }
+</style>

src/views/cameras/preview/hooks/useCameraTree.ts

@@ -1,8 +1,34 @@
-import { getCameraTree } from '@/api/camera/camera-preview';
+import { CameraTree, getCameraTree } from '@/api/camera/camera-preview';
 import { useRequest } from 'vue-hooks-plus';
+import useCameraDetailStore from '../store/useCameraDetailStore';
+
+function getCameraDetail(tree: CameraTree[], cameraId: number) {
+  let detail: CameraTree | null = null;
+
+  function getDetail(t: CameraTree[]) {
+    t.forEach((x) => {
+      if (x.nodeType === 'camera' && x.id === cameraId) {
+        detail = x;
+      } else if (x.children && x.children.length > 0) {
+        getDetail(x.children);
+      }
+    });
+  }
+
+  getDetail(tree);
+
+  return detail;
+}
 
 const useCameraTree = () => {
-  const { data, loading } = useRequest(getCameraTree);
+  const cameraDetailStore = useCameraDetailStore();
+  const { data, loading } = useRequest(getCameraTree, {
+    onSuccess: (d) => {
+      if (cameraDetailStore.cameraId) {
+        cameraDetailStore.detail = getCameraDetail(d, cameraDetailStore.cameraId);
+      }
+    },
+  });
   return { data, loading };
 };