更新一些小场景的适配

Code/frontend/src/pages/Detection.vue

@@ -111,15 +111,10 @@
         <!-- 使用for循环嵌套轨迹 -->
         <div style="height: 6vh; margin-top: 2%; ">
             <el-steps :active="active" finish-status="success" align-center >
-                <!-- <el-step :title="currentPerson.locus[0].lng" description="IP：192.168.205.251"/>
-                <el-step title="深研院-2号楼-3楼" description="IP：192.168.205.252"/>
-                <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/>
-                <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/> -->
                 <el-step v-for="(item) in TrajectoryData"
                             :title="item.address"
                             :description="item.ip">
                 </el-step>
-                <!-- <el-step :title="item.IP" :description="item.lng"></el-step> -->
             </el-steps>
             <el-button type="primary" style="margin-top: 12px" @click="next">下次检测点</el-button>
         </div>

Code/frontend/src/pages/Index.vue

@@ -18,25 +18,18 @@
             <!-- 建议采用for循环读取摄像头信息 -->
             <div style="width: 35%;  float:left;  height: 47vh;">
                 <chartpanel style="height: 47vh; overflow:auto">
-                    <!-- <div style="height: height: 32vh;"> -->
-                        <chartpanel title="电子科大深圳-室外" style="" id="carame1" @click="handlerChangeCarame($event)">
-                            <img src="http://localhost:5001/video_start2" muted autoplay loop style="width: 100%; max-height: 42vh">
-                            <!-- 注意： 这里的img中的max-height设置为targetCarame的最大height 因为在handlerChangeCarame的过程中，元素的所有属性全都跟过去了，所以需要使用这个属性来约束tarCarame框框中的视频长宽 -->
-                        </chartpanel>
-                    <!-- </div> -->
 
-                    <chartpanel title="电子科大深圳-宿舍楼" style=" margin-top: 1vh;" id="carame2" @click="handlerChangeCarame($event)">
+					<chartpanel v-for="(camera, display_name) in cameraData" 
-                        <img src="http://localhost:5001/video_start1" muted autoplay loop style="width: 100%; max-height: 42vh;">
+						:key="display_name" 
-                    </chartpanel>
+						:title="camera.display_name" 
-
+						style="margin-top: 1vh;" 
-                    <chartpanel title="电子科大深圳-2号楼-1楼" style="margin-top: 1vh;" id="carame3" @click="handlerChangeCarame($event)">
+						:id=camera.id @click="handlerChangeCarame($event)">
-                        <!-- <img src="http://localhost:5001/video_start3" muted autoplay loop style="width: 100%; max-height: 42vh;"> -->
+						<img :src="camera.ip_address" style="width: 100%; max-height: 42vh;">
-                        <!-- <img class="home-img" style="width: 100%;" src="https://www.uestc.edu.cn/1220e4192c26b879cb4132cd1141fc85.jpg?n=8e7z368tn51" alt=""> -->
+					</chartpanel>
-                    </chartpanel>
+                    <!-- <chartpanel title="电子科大深圳-2号楼-4楼" style=" margin-top: 1vh;" id="carame4" @click="handlerChangeCarame($event)"> -->
-                    <chartpanel title="电子科大深圳-2号楼-4楼" style=" margin-top: 1vh;" id="carame4" @click="handlerChangeCarame($event)">
                         <!-- <img src="http://localhost:5001/video_start4" muted autoplay loop style="width: 100%; max-height: 42vh;"> -->
                         <!-- <img class="home-img" style="width: 100%;" src="https://www.uestc.edu.cn/1220e4192c26b879cb4132cd1141fc85.jpg?n=8e7z368tn51" alt=""> -->
-                    </chartpanel>
+                    <!-- </chartpanel> -->
                 </chartpanel>
             </div>
 
@@ -74,6 +67,8 @@
     import { VideoPlayer } from 'vue-video-player'
     import 'video.js/dist/video-js.css'
     import 'videojs-flash'
+	import axios from 'axios'
+    import { title } from 'process'
 
     const props = defineProps({
         lng: {
@@ -98,9 +93,19 @@
     const points = ref([{ lng: n, lat: t }])
     const markers = ref([])
 	
-	onMounted(() => {
+	let cameraData = ref([])
-        initMapMark();
 
+	let isLoaded = false
+	onMounted(async () => {
+        initMapMark()
+		const cameraResponse = await axios.get('http://localhost:8080/camerasOnly')
+        if (cameraResponse.data.code === 200) {
+            cameraData.value = cameraResponse.data.data
+            isLoaded = true
+        } else {
+            console.error("Failed to fetch camera")
+        }
+		console.log("getData", cameraData)
 		//图表尺寸自适应
 		// window.onresize = () => {
 		// 	allchart && allchart.resize();

Code/frontend/src/pages/Monitoring.vue

@@ -37,19 +37,19 @@
                 <chartpanel title="实时监控视频" style="height: 59vh; overflow:auto">
 
                     <div class="home-card" :v-if="isLoaded">
-                        <div class="home-item" v-for="(item, display_name) in ShowCameraData" :key="display_name">
+                        <div class="home-item" v-for="(camera, display_name) in ShowCameraData" :key="display_name">
                             <img class="home-img" style="width: 100%;"
                                 src="https://www.uestc.edu.cn/1220e4192c26b879cb4132cd1141fc85.jpg?n=8e7z368tn51"
                                 alt="">
 
                             <videoPlayer class="vjs-custom-skin VueVideoPlayer" ref="VueVideoPlayer"
-                                crossorigin="anonymous" :playsinline="true" :options="getPlayerOption(item)">
+                                crossorigin="anonymous" :playsinline="true" :options="getPlayerOption(camera)">
                             </videoPlayer>
 
                             <div class="home-right">
                                 <!-- <span style="color: #999; fontSize: 12px">{{ item.region }} - {{ item.label }}</span> -->
-                                <span class='home-num'>{{ item.display_name }}</span>
+                                <span class='home-num'>{{ camera.display_name }}</span>
-                                <span class='home-num'>{{ item.ip_address }}</span>
+                                <span class='home-num'>{{ camera.ip_address }}</span>
                                 <!-- <span><i class="el-icon-caret-bottom" style="color: red; fontSize: 12px" ></i> <i style="color: red">&nbsp;-10%</i>&nbsp;&nbsp;  <span style="color: #999; fontSize: 12px">同比上月</span></span> -->
                             </div>
                         </div>
@@ -63,17 +63,17 @@
                     <el-col :span="10" style="padding-left: 0px; width: 100%">
                         <chartpanel title="跟踪结果" style="height: 31.5vh;width: 98%; ">
                             <!-- 一个可交互性的部分 -->
-                            <div style="height: 25vh;">
+                            <div v-if="isRecordLoaded" style="height: 25vh;">
                                 <div style="height: 16vh;"><img src="@/assets/TargetPerson.jpg"
                                         style="height: 100%; margin: 0.2%;" /></div>
-                                <div><span>序号：</span> <span>111</span></div>
+                                <div><span>行人检索序号：</span> <span>{{ ShowSingleDetectionResult.id }}</span></div>
-                                <div><span>行人检索ID: </span> <span>12</span></div>
+                                <div><span>行人ID: </span> <span>{{ ShowSingleDetectionResult.person_id }}</span></div>
-                                <div><span>初次出现地点: </span> <span>根地区-电子科技大学(深圳)高等研究院</span></div>
+                                <div><span>出现地点: </span> <span>{{ ShowSingleDetectionResult.address }}</span></div>
-                                <div><span>报警类型: </span> <span>尾随</span></div>
+                                <div><span>报警类型: </span> <span>{{ ShowSingleDetectionResult.alarm_type }}</span></div>
-                                <div><span>行人类别: </span> <span>白名单</span></div>
+                                <div><span>行人类别: </span> <span>{{ ShowSingleDetectionResult.person_type }}</span></div>
-                                <div><span>初次出现时间: </span> <span>2024.1.1</span></div>
+                                <div><span>出现时间: </span> <span>{{ ShowSingleDetectionResult.detect_time }}</span></div>
-                                <div><span>摄像头IP: </span> <span>192.168.205.251</span></div>
+                                <div><span>摄像头IP: </span> <span>{{ ShowSingleDetectionResult.ip_address }}</span></div>
-                                <div><span>处理进度: </span> <span>...</span></div>
+                                <div><span>处理进度: </span> <span>{{ ShowSingleDetectionResult.process_status }}</span></div>
                             </div>
                         </chartpanel>
                     </el-col>
@@ -83,10 +83,10 @@
                         <chartpanel title="检索轨迹" style="height: 31.5vh;">
                             <div style="width: 100%; height: 60%; margin-top: 5%;">
                                 <el-steps :active="active" finish-status="success" align-center>
-                                    <el-step title="深研院宿舍" description="IP：192.168.205.251" />
+                                    <el-step v-for="(item) in ShowTrajectory"
-                                    <el-step title="深研院-2号楼-3楼" description="IP：192.168.205.252" />
+                                        :title="item.address"
-                                    <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46" />
+                                        :description="item.ip">
-                                    <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46" />
+                                    </el-step>
                                 </el-steps>
                                 <el-button type="primary" style="margin-top: 12px" @click="next">Next step</el-button>
                             </div>
@@ -194,9 +194,13 @@
     }
 
 
-    let ShowCameraData=ref([])
+    let ShowCameraData = ref([])
-    // console.log(demoData);
 
+    let ShowSingleDetectionResult = ref(null)
+    let isRecordLoaded = ref(false)
+
+    let ShowTrajectory = ref(null)
+    let isTrajectoryLoaded = ref(false)
 
     watch(//这个时候不能用.value且必须是深度监听，这种写法不仅可以监听数组本身的变化，也可以监听 数组元素的变化
     ShowCameraData,() => {
@@ -210,20 +214,35 @@
     let isLoaded = false
     let CameraData = ref(null)    
 	//挂
-	onMounted(() => {
+	onMounted(async () => {
-        axios.get('http://localhost:8080/camerasList')
+        const detectionResponse = await axios.get('http://localhost:8080/detection/single')
-    .then(response => {
+        if (detectionResponse.data.code === 200) {
-      if (response.data.code === 200) {
+            ShowSingleDetectionResult.value = detectionResponse.data.data;
-        CameraData.value = response.data.data;
+            isRecordLoaded.value = true
-        isLoaded = true
+        } else {
-      } else {
+            console.error("Failed to fetch record")
-        console.error("Failed to fetch camera");
+        }
-      }
+        console.log("getData", ShowSingleDetectionResult)
-      console.log("getData", CameraData);
+        const cameraResponse = await axios.get('http://localhost:8080/camerasList')
-    })
+        if (cameraResponse.data.code === 200) {
-    .catch(error => {
+            CameraData.value = cameraResponse.data.data;
-        console.error('wrong:', error);
+            isLoaded = true
-        });
+        } else {
+            console.error("Failed to fetch camera");
+        }
+        console.log("getData", CameraData);
+        const trjectoryResponse = await axios.get('http://localhost:8080/trajectory', {
+            params: {
+                id: ShowSingleDetectionResult.value.trajectory_detection_id
+            }
+        })
+        if (trjectoryResponse.data.code === 200) {
+            ShowTrajectory.value = trjectoryResponse.data.data.cameraArray;
+            isTrajectoryLoaded = true
+        } else {
+            console.error("Failed to fetch trajectory");
+        }
+        console.log("getData", ShowTrajectory);
 	});
 	onBeforeUnmount(() => {