diff --git a/Code/frontend/src/pages/Detection.vue b/Code/frontend/src/pages/Detection.vue index 1d5089b..76c3453 100644 --- a/Code/frontend/src/pages/Detection.vue +++ b/Code/frontend/src/pages/Detection.vue @@ -111,15 +111,10 @@
- - 下次检测点
diff --git a/Code/frontend/src/pages/Index.vue b/Code/frontend/src/pages/Index.vue index fc4e7ff..a97ac6a 100644 --- a/Code/frontend/src/pages/Index.vue +++ b/Code/frontend/src/pages/Index.vue @@ -18,25 +18,18 @@
- - - - - - - - - - - - - - - + + + + - +
@@ -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: { @@ -97,10 +92,20 @@ // const map = ref() const points = ref([{ lng: n, lat: t }]) const markers = ref([]) - - onMounted(() => { - initMapMark(); + + let cameraData = ref([]) + 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(); diff --git a/Code/frontend/src/pages/Monitoring.vue b/Code/frontend/src/pages/Monitoring.vue index 5e77a16..fe63f24 100644 --- a/Code/frontend/src/pages/Monitoring.vue +++ b/Code/frontend/src/pages/Monitoring.vue @@ -37,19 +37,19 @@
-
+
+ crossorigin="anonymous" :playsinline="true" :options="getPlayerOption(camera)">
- {{ item.display_name }} - {{ item.ip_address }} + {{ camera.display_name }} + {{ camera.ip_address }}
@@ -63,17 +63,17 @@ -
+
-
序号： 111
-
行人检索ID: 12
-
初次出现地点: 根地区-电子科技大学(深圳)高等研究院
-
报警类型: 尾随
-
行人类别: 白名单
-
初次出现时间: 2024.1.1
-
摄像头IP: 192.168.205.251
-
处理进度: ...
+
行人检索序号： {{ ShowSingleDetectionResult.id }}
+
行人ID: {{ ShowSingleDetectionResult.person_id }}
+
出现地点: {{ ShowSingleDetectionResult.address }}
+
报警类型: {{ ShowSingleDetectionResult.alarm_type }}
+
行人类别: {{ ShowSingleDetectionResult.person_type }}
+
出现时间: {{ ShowSingleDetectionResult.detect_time }}
+
摄像头IP: {{ ShowSingleDetectionResult.ip_address }}
+
处理进度: {{ ShowSingleDetectionResult.process_status }}
@@ -83,10 +83,10 @@
- - - - + + Next step
@@ -194,9 +194,13 @@ } - let ShowCameraData=ref([]) - // console.log(demoData); + let ShowCameraData = ref([]) + 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(() => { - axios.get('http://localhost:8080/camerasList') - .then(response => { - if (response.data.code === 200) { - CameraData.value = response.data.data; - isLoaded = true - } else { - console.error("Failed to fetch camera"); - } - console.log("getData", CameraData); - }) - .catch(error => { - console.error('wrong:', error); - }); + onMounted(async () => { + const detectionResponse = await axios.get('http://localhost:8080/detection/single') + if (detectionResponse.data.code === 200) { + ShowSingleDetectionResult.value = detectionResponse.data.data; + isRecordLoaded.value = true + } else { + console.error("Failed to fetch record") + } + console.log("getData", ShowSingleDetectionResult) + const cameraResponse = await axios.get('http://localhost:8080/camerasList') + if (cameraResponse.data.code === 200) { + CameraData.value = cameraResponse.data.data; + 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(() => {