更新一些小场景的适配
oldsheeppp
parent
646442dc69
commit
f8b728bc22
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)">
|
||||
<img src="http://localhost:5001/video_start1" muted autoplay loop style="width: 100%; max-height: 42vh;">
|
||||
</chartpanel>
|
||||
|
||||
<chartpanel title="电子科大深圳-2号楼-1楼" style="margin-top: 1vh;" id="carame3" @click="handlerChangeCarame($event)">
|
||||
<!-- <img src="http://localhost:5001/video_start3" 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 title="电子科大深圳-2号楼-4楼" style=" margin-top: 1vh;" id="carame4" @click="handlerChangeCarame($event)">
|
||||
<chartpanel v-for="(camera, display_name) in cameraData"
|
||||
:key="display_name"
|
||||
:title="camera.display_name"
|
||||
style="margin-top: 1vh;"
|
||||
:id=camera.id @click="handlerChangeCarame($event)">
|
||||
<img :src="camera.ip_address" style="width: 100%; max-height: 42vh;">
|
||||
</chartpanel>
|
||||
<!-- <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: {
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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'>{{ item.ip_address }}</span>
|
||||
<span class='home-num'>{{ camera.display_name }}</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"> -10%</i> <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>行人检索ID: </span> <span>12</span></div>
|
||||
<div><span>初次出现地点: </span> <span>根地区-电子科技大学(深圳)高等研究院</span></div>
|
||||
<div><span>报警类型: </span> <span>尾随</span></div>
|
||||
<div><span>行人类别: </span> <span>白名单</span></div>
|
||||
<div><span>初次出现时间: </span> <span>2024.1.1</span></div>
|
||||
<div><span>摄像头IP: </span> <span>192.168.205.251</span></div>
|
||||
<div><span>处理进度: </span> <span>...</span></div>
|
||||
<div><span>行人检索序号：</span> <span>{{ ShowSingleDetectionResult.id }}</span></div>
|
||||
<div><span>行人ID: </span> <span>{{ ShowSingleDetectionResult.person_id }}</span></div>
|
||||
<div><span>出现地点: </span> <span>{{ ShowSingleDetectionResult.address }}</span></div>
|
||||
<div><span>报警类型: </span> <span>{{ ShowSingleDetectionResult.alarm_type }}</span></div>
|
||||
<div><span>行人类别: </span> <span>{{ ShowSingleDetectionResult.person_type }}</span></div>
|
||||
<div><span>出现时间: </span> <span>{{ ShowSingleDetectionResult.detect_time }}</span></div>
|
||||
<div><span>摄像头IP: </span> <span>{{ ShowSingleDetectionResult.ip_address }}</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 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 ShowTrajectory"
|
||||
:title="item.address"
|
||||
:description="item.ip">
|
||||
</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([])
|
||||
// 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(() => {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue