|
|
@@ -6,7 +6,14 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<form-container v-model="visible" :title="`行为轨迹查看`" form-size="800px" @close="onClose"> |
|
|
|
<ProTable ref="proTable" title="行为轨迹" height="500px" :data="tableData" :columns="columns"></ProTable> |
|
|
|
<ProTable |
|
|
|
ref="proTable1" |
|
|
|
:request-auto="false" |
|
|
|
title="行为轨迹" |
|
|
|
height="500px" |
|
|
|
:request-api="attendanceApi.getBehaviorTrace" |
|
|
|
:columns="columns" |
|
|
|
></ProTable> |
|
|
|
<template #footer> |
|
|
|
<el-button @click="onClose"> 关闭 </el-button> |
|
|
|
</template> |
|
|
@@ -21,7 +28,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="tsx" name="attendanceBehaviorTrace"> |
|
|
|
import { AttendanceBehaviorTrace, attendanceBehaviorTrace } from "@/api"; |
|
|
|
import { AttendanceBehaviorTrace, attendanceBehaviorTrace,attendanceApi } from "@/api"; |
|
|
|
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; |
|
|
|
import { FormOptEnum } from "@/enums"; |
|
|
|
|
|
|
@@ -32,92 +39,25 @@ const propsInfo = reactive<FormProps.Base<AttendanceBehaviorTrace.behaviorTraceI |
|
|
|
record: {}, //弹框数据 |
|
|
|
disabled: false |
|
|
|
}); |
|
|
|
/** |
|
|
|
* 打开弹框 |
|
|
|
* @param props 弹框参数 |
|
|
|
*/ |
|
|
|
function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) { |
|
|
|
Object.assign(propsInfo, props); //合并参数 |
|
|
|
visible.value = true; //显示弹框 |
|
|
|
if (props.record.id) { |
|
|
|
//如果传了id,就去请求api获取record |
|
|
|
attendanceBehaviorTrace.detail({ id: props.record.id }).then(res => { |
|
|
|
propsInfo.record = res.data; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const tableData = ref([ |
|
|
|
{ |
|
|
|
faces: [ |
|
|
|
{ |
|
|
|
faceUrl: |
|
|
|
"http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/dfield-cruising/online/person-set/quanjiang/DEMO00001/8746a847ecd64c1696b37f4cdf617a18/5dc35e4c7af84b3fb5aab70156574873.jpg?Expires=1721375257&OSSAccessKeyId=STS.NTfeBHwzU7kivsSS2EypREace&Signature=c1aTbDc1hNISq%2BV05o0slEfoCTI%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fTLvj8mqV0gKmCdFXitzIQdf9%2BqqTIhzz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4x49TRng0s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxORK3yyybb5sa3aTR6942p%2F%2FF5VxFNPqOx1rmCMf4znuW4yrvNkAVvNcuIqdR8aLhaLIEbHzoKxuEKRnrfsIeBqAAUB%2FCKIuI1UaCj4LYX8DyIYOI8tUKFsMguPHpPENaK9Lcz5ZhB%2BrX6BcQfNWOLhDx7KyRE28vtEs2uolAhLTRaZsZFjbAZE5Ngt09%2FbSXdD%2FR%2BOlGMpQdp752x5lOlvPsJp1skuFLbramyqY4oj4tVwv1OLWpcsEc3AEosPalpAuIAA%3D" |
|
|
|
}, |
|
|
|
], |
|
|
|
time:'2024-07-16 18:20:12', |
|
|
|
name:'大厅(魔豆)', |
|
|
|
}, |
|
|
|
{ |
|
|
|
faces: [ |
|
|
|
{ |
|
|
|
faceUrl: |
|
|
|
"http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/dfield-cruising/online/person-set/quanjiang/DEMO00001/8746a847ecd64c1696b37f4cdf617a18/5dc35e4c7af84b3fb5aab70156574873.jpg?Expires=1721375257&OSSAccessKeyId=STS.NTfeBHwzU7kivsSS2EypREace&Signature=c1aTbDc1hNISq%2BV05o0slEfoCTI%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fTLvj8mqV0gKmCdFXitzIQdf9%2BqqTIhzz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4x49TRng0s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxORK3yyybb5sa3aTR6942p%2F%2FF5VxFNPqOx1rmCMf4znuW4yrvNkAVvNcuIqdR8aLhaLIEbHzoKxuEKRnrfsIeBqAAUB%2FCKIuI1UaCj4LYX8DyIYOI8tUKFsMguPHpPENaK9Lcz5ZhB%2BrX6BcQfNWOLhDx7KyRE28vtEs2uolAhLTRaZsZFjbAZE5Ngt09%2FbSXdD%2FR%2BOlGMpQdp752x5lOlvPsJp1skuFLbramyqY4oj4tVwv1OLWpcsEc3AEosPalpAuIAA%3D" |
|
|
|
}, |
|
|
|
], |
|
|
|
time:'2024-07-16 18:20:12', |
|
|
|
name:'教室(海康)', |
|
|
|
}, |
|
|
|
{ |
|
|
|
faces: [ |
|
|
|
{ |
|
|
|
faceUrl: |
|
|
|
"http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/dfield-cruising/online/person-set/quanjiang/DEMO00001/8746a847ecd64c1696b37f4cdf617a18/5dc35e4c7af84b3fb5aab70156574873.jpg?Expires=1721375257&OSSAccessKeyId=STS.NTfeBHwzU7kivsSS2EypREace&Signature=c1aTbDc1hNISq%2BV05o0slEfoCTI%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fTLvj8mqV0gKmCdFXitzIQdf9%2BqqTIhzz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4x49TRng0s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxORK3yyybb5sa3aTR6942p%2F%2FF5VxFNPqOx1rmCMf4znuW4yrvNkAVvNcuIqdR8aLhaLIEbHzoKxuEKRnrfsIeBqAAUB%2FCKIuI1UaCj4LYX8DyIYOI8tUKFsMguPHpPENaK9Lcz5ZhB%2BrX6BcQfNWOLhDx7KyRE28vtEs2uolAhLTRaZsZFjbAZE5Ngt09%2FbSXdD%2FR%2BOlGMpQdp752x5lOlvPsJp1skuFLbramyqY4oj4tVwv1OLWpcsEc3AEosPalpAuIAA%3D" |
|
|
|
}, |
|
|
|
], |
|
|
|
time:'2024-07-16 18:20:12', |
|
|
|
name:'大厅(魔豆)', |
|
|
|
}, |
|
|
|
{ |
|
|
|
faces: [ |
|
|
|
{ |
|
|
|
faceUrl: |
|
|
|
"http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/dfield-cruising/online/person-set/quanjiang/DEMO00001/8746a847ecd64c1696b37f4cdf617a18/5dc35e4c7af84b3fb5aab70156574873.jpg?Expires=1721375257&OSSAccessKeyId=STS.NTfeBHwzU7kivsSS2EypREace&Signature=c1aTbDc1hNISq%2BV05o0slEfoCTI%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fTLvj8mqV0gKmCdFXitzIQdf9%2BqqTIhzz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4x49TRng0s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxORK3yyybb5sa3aTR6942p%2F%2FF5VxFNPqOx1rmCMf4znuW4yrvNkAVvNcuIqdR8aLhaLIEbHzoKxuEKRnrfsIeBqAAUB%2FCKIuI1UaCj4LYX8DyIYOI8tUKFsMguPHpPENaK9Lcz5ZhB%2BrX6BcQfNWOLhDx7KyRE28vtEs2uolAhLTRaZsZFjbAZE5Ngt09%2FbSXdD%2FR%2BOlGMpQdp752x5lOlvPsJp1skuFLbramyqY4oj4tVwv1OLWpcsEc3AEosPalpAuIAA%3D" |
|
|
|
}, |
|
|
|
], |
|
|
|
time:'2024-07-16 18:20:12', |
|
|
|
name:'教室(海康)', |
|
|
|
}, |
|
|
|
{ |
|
|
|
faces: [ |
|
|
|
{ |
|
|
|
faceUrl: |
|
|
|
"http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/dfield-cruising/online/person-set/quanjiang/DEMO00001/8746a847ecd64c1696b37f4cdf617a18/5dc35e4c7af84b3fb5aab70156574873.jpg?Expires=1721375257&OSSAccessKeyId=STS.NTfeBHwzU7kivsSS2EypREace&Signature=c1aTbDc1hNISq%2BV05o0slEfoCTI%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fTLvj8mqV0gKmCdFXitzIQdf9%2BqqTIhzz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4x49TRng0s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxORK3yyybb5sa3aTR6942p%2F%2FF5VxFNPqOx1rmCMf4znuW4yrvNkAVvNcuIqdR8aLhaLIEbHzoKxuEKRnrfsIeBqAAUB%2FCKIuI1UaCj4LYX8DyIYOI8tUKFsMguPHpPENaK9Lcz5ZhB%2BrX6BcQfNWOLhDx7KyRE28vtEs2uolAhLTRaZsZFjbAZE5Ngt09%2FbSXdD%2FR%2BOlGMpQdp752x5lOlvPsJp1skuFLbramyqY4oj4tVwv1OLWpcsEc3AEosPalpAuIAA%3D" |
|
|
|
}, |
|
|
|
], |
|
|
|
time:'2024-07-16 18:20:12', |
|
|
|
name:'大厅(魔豆)', |
|
|
|
} |
|
|
|
]); |
|
|
|
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) |
|
|
|
const proTable = ref<ProTableInstance>(); |
|
|
|
const proTable1 = ref<ProTableInstance>(); |
|
|
|
// 表格配置项 |
|
|
|
const columns: ColumnProps[] = [ |
|
|
|
{ |
|
|
|
prop: "time", |
|
|
|
prop: "tick", |
|
|
|
label: "经过摄像头时间" |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "name", |
|
|
|
prop: "cameraName", |
|
|
|
label: "摄像头名称", |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "faces", |
|
|
|
prop: "snapshoturl", |
|
|
|
label: "快照", |
|
|
|
render: scope => { |
|
|
|
return ( |
|
|
|
<img |
|
|
|
src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ""} |
|
|
|
src={scope.row?scope.row.snapshotUrl:''} |
|
|
|
onClick={() => viewHeadImage(scope)} |
|
|
|
style="width:50px;height:50px;cursor:pointer" |
|
|
|
alt="" |
|
|
@@ -126,11 +66,24 @@ const columns: ColumnProps[] = [ |
|
|
|
} |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
/** |
|
|
|
* 打开弹框 |
|
|
|
* @param props 弹框参数 |
|
|
|
*/ |
|
|
|
function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) { |
|
|
|
visible.value = true; //显示弹框 |
|
|
|
nextTick(()=>{ |
|
|
|
Object.assign(propsInfo, props); //合并参数 |
|
|
|
proTable1.value!.searchParam.PersonId = props.record.personId; |
|
|
|
proTable1.value!.search(); |
|
|
|
}) |
|
|
|
} |
|
|
|
// 图片预览 |
|
|
|
const imgVisible = ref(false); |
|
|
|
const faceUrl = ref(''); |
|
|
|
const viewHeadImage = (scope: any) => { |
|
|
|
faceUrl.value = scope.row.faces[0].faceUrl; |
|
|
|
faceUrl.value = scope.row.snapshotUrl |
|
|
|
imgVisible.value = true |
|
|
|
}; |
|
|
|
/** 关闭表单*/ |
|
|
|