更新一些小场景的适配
oldsheeppp
parent
646442dc69
commit
f8b728bc22
|
|
@ -111,15 +111,10 @@
|
||||||
<!-- 使用for循环嵌套轨迹 -->
|
<!-- 使用for循环嵌套轨迹 -->
|
||||||
<div style="height: 6vh; margin-top: 2%; ">
|
<div style="height: 6vh; margin-top: 2%; ">
|
||||||
<el-steps :active="active" finish-status="success" align-center >
|
<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"
|
<el-step v-for="(item) in TrajectoryData"
|
||||||
:title="item.address"
|
:title="item.address"
|
||||||
:description="item.ip">
|
:description="item.ip">
|
||||||
</el-step>
|
</el-step>
|
||||||
<!-- <el-step :title="item.IP" :description="item.lng"></el-step> -->
|
|
||||||
</el-steps>
|
</el-steps>
|
||||||
<el-button type="primary" style="margin-top: 12px" @click="next">下次检测点</el-button>
|
<el-button type="primary" style="margin-top: 12px" @click="next">下次检测点</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,25 +18,18 @@
|
||||||
<!-- 建议采用for循环读取摄像头信息 -->
|
<!-- 建议采用for循环读取摄像头信息 -->
|
||||||
<div style="width: 35%; float:left; height: 47vh;">
|
<div style="width: 35%; float:left; height: 47vh;">
|
||||||
<chartpanel style="height: 47vh; overflow:auto">
|
<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"
|
||||||
|
: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>
|
||||||
|
<!-- <chartpanel title="电子科大深圳-2号楼-4楼" style=" margin-top: 1vh;" id="carame4" @click="handlerChangeCarame($event)"> -->
|
||||||
<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)">
|
|
||||||
<!-- <img src="http://localhost:5001/video_start4" muted autoplay loop style="width: 100%; max-height: 42vh;"> -->
|
<!-- <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=""> -->
|
<!-- <img class="home-img" style="width: 100%;" src="https://www.uestc.edu.cn/1220e4192c26b879cb4132cd1141fc85.jpg?n=8e7z368tn51" alt=""> -->
|
||||||
</chartpanel>
|
<!-- </chartpanel> -->
|
||||||
</chartpanel>
|
</chartpanel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -74,6 +67,8 @@
|
||||||
import { VideoPlayer } from 'vue-video-player'
|
import { VideoPlayer } from 'vue-video-player'
|
||||||
import 'video.js/dist/video-js.css'
|
import 'video.js/dist/video-js.css'
|
||||||
import 'videojs-flash'
|
import 'videojs-flash'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { title } from 'process'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
lng: {
|
lng: {
|
||||||
|
|
@ -98,9 +93,19 @@
|
||||||
const points = ref([{ lng: n, lat: t }])
|
const points = ref([{ lng: n, lat: t }])
|
||||||
const markers = ref([])
|
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 = () => {
|
// window.onresize = () => {
|
||||||
// allchart && allchart.resize();
|
// allchart && allchart.resize();
|
||||||
|
|
|
||||||
|
|
@ -37,19 +37,19 @@
|
||||||
<chartpanel title="实时监控视频" style="height: 59vh; overflow:auto">
|
<chartpanel title="实时监控视频" style="height: 59vh; overflow:auto">
|
||||||
|
|
||||||
<div class="home-card" :v-if="isLoaded">
|
<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%;"
|
<img class="home-img" style="width: 100%;"
|
||||||
src="https://www.uestc.edu.cn/1220e4192c26b879cb4132cd1141fc85.jpg?n=8e7z368tn51"
|
src="https://www.uestc.edu.cn/1220e4192c26b879cb4132cd1141fc85.jpg?n=8e7z368tn51"
|
||||||
alt="">
|
alt="">
|
||||||
|
|
||||||
<videoPlayer class="vjs-custom-skin VueVideoPlayer" ref="VueVideoPlayer"
|
<videoPlayer class="vjs-custom-skin VueVideoPlayer" ref="VueVideoPlayer"
|
||||||
crossorigin="anonymous" :playsinline="true" :options="getPlayerOption(item)">
|
crossorigin="anonymous" :playsinline="true" :options="getPlayerOption(camera)">
|
||||||
</videoPlayer>
|
</videoPlayer>
|
||||||
|
|
||||||
<div class="home-right">
|
<div class="home-right">
|
||||||
<!-- <span style="color: #999; fontSize: 12px">{{ item.region }} - {{ item.label }}</span> -->
|
<!-- <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"> -10%</i> <span style="color: #999; fontSize: 12px">同比上月</span></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -63,17 +63,17 @@
|
||||||
<el-col :span="10" style="padding-left: 0px; width: 100%">
|
<el-col :span="10" style="padding-left: 0px; width: 100%">
|
||||||
<chartpanel title="跟踪结果" style="height: 31.5vh;width: 98%; ">
|
<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"
|
<div style="height: 16vh;"><img src="@/assets/TargetPerson.jpg"
|
||||||
style="height: 100%; margin: 0.2%;" /></div>
|
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>
|
</div>
|
||||||
</chartpanel>
|
</chartpanel>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -83,10 +83,10 @@
|
||||||
<chartpanel title="检索轨迹" style="height: 31.5vh;">
|
<chartpanel title="检索轨迹" style="height: 31.5vh;">
|
||||||
<div style="width: 100%; height: 60%; margin-top: 5%;">
|
<div style="width: 100%; height: 60%; margin-top: 5%;">
|
||||||
<el-steps :active="active" finish-status="success" align-center>
|
<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-steps>
|
||||||
<el-button type="primary" style="margin-top: 12px" @click="next">Next step</el-button>
|
<el-button type="primary" style="margin-top: 12px" @click="next">Next step</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -195,8 +195,12 @@
|
||||||
|
|
||||||
|
|
||||||
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且必须是深度监听，这种写法不仅可以监听数组本身的变化，也可以监听 数组元素的变化
|
watch(//这个时候不能用.value且必须是深度监听，这种写法不仅可以监听数组本身的变化，也可以监听 数组元素的变化
|
||||||
ShowCameraData,() => {
|
ShowCameraData,() => {
|
||||||
|
|
@ -210,20 +214,35 @@
|
||||||
let isLoaded = false
|
let isLoaded = false
|
||||||
let CameraData = ref(null)
|
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
|
||||||
|
} 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
|
isLoaded = true
|
||||||
} else {
|
} else {
|
||||||
console.error("Failed to fetch camera");
|
console.error("Failed to fetch camera");
|
||||||
}
|
}
|
||||||
console.log("getData", CameraData);
|
console.log("getData", CameraData);
|
||||||
|
const trjectoryResponse = await axios.get('http://localhost:8080/trajectory', {
|
||||||
|
params: {
|
||||||
|
id: ShowSingleDetectionResult.value.trajectory_detection_id
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
if (trjectoryResponse.data.code === 200) {
|
||||||
console.error('wrong:', error);
|
ShowTrajectory.value = trjectoryResponse.data.data.cameraArray;
|
||||||
});
|
isTrajectoryLoaded = true
|
||||||
|
} else {
|
||||||
|
console.error("Failed to fetch trajectory");
|
||||||
|
}
|
||||||
|
console.log("getData", ShowTrajectory);
|
||||||
});
|
});
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue