132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<template>
|
|
<Card title="视频AI分析">
|
|
<div class="table">
|
|
<div class="thead">
|
|
<div class="row">
|
|
<div>抓拍照片</div>
|
|
<div>报警类型</div>
|
|
<div>抓拍时间</div>
|
|
</div>
|
|
</div>
|
|
<div class="tbody">
|
|
<vue-scroll style="width:95%">
|
|
<div class="row" v-for="(item, index) in aiList" :key="index">
|
|
<div>
|
|
<img :src="$store.state.FILEURL + item.imageUrl" />
|
|
</div>
|
|
<div class="carNum">{{ alarmTypeList[item.alarmType] }}</div>
|
|
<div class="datetime">{{ item.createTime }}</div>
|
|
</div>
|
|
<div
|
|
class="row"
|
|
v-if="aiList.length == 0
|
|
"
|
|
>
|
|
<div style="font-size: 14px;
|
|
color: #999;
|
|
text-align: center;
|
|
width: 100%;
|
|
line-height:250px;
|
|
"
|
|
>
|
|
暂无数据
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from "../components/Card.vue";
|
|
import { mapState } from 'vuex'
|
|
import {
|
|
|
|
selectNewPAiListApi
|
|
} from '@/assets/js/api/zhongjianFourth'
|
|
export default {
|
|
components: { Card },
|
|
data() {
|
|
return {
|
|
alarmTypeList: {
|
|
1: '烟感', 2: '明火', 3: '人员倒地', 4: '未戴安全帽', 5: '区域入侵', 6: '越界入侵', 7: '人员聚集衣', 8: '反光衣', 9: '裸土覆盖', 13: '口罩识别', 14: '徘徊预警', 15: '物体滞留监测', 16: '绊线监测'
|
|
},
|
|
aiList: [
|
|
{ imageUrl: require("../assets/images/common/bg_smk.png"), thingType: "3", createTime: "2022-01-23 15:30" },
|
|
{ imageUrl: require("../assets/images/common/bg_omk.png"), thingType: "2", createTime: "2022-01-23 15:30" },
|
|
{ imageUrl: require("../assets/images/common/bg_ymk.png"), thingType: "6", createTime: "2022-01-23 15:30" },
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['projectSn']),
|
|
},
|
|
created() {
|
|
this.getSelectNewPAiListApi()
|
|
},
|
|
methods: {
|
|
getSelectNewPAiListApi() {
|
|
selectNewPAiListApi({ projectSn: this.projectSn, count: 20 }).then(res => {
|
|
console.log(res, '=============ai分析')
|
|
// this.aiList = res.result.length>0?res.result:this.aiList;
|
|
this.aiList = res.result
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.table {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
|
|
.thead {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
color: #6ae3eb;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tbody {
|
|
height: calc(100% - 30px);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
div {
|
|
text-align: center;
|
|
|
|
&:last-child {
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
&:first-child {
|
|
width: 100px;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
width: 130px;
|
|
}
|
|
|
|
img {
|
|
width: 80px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|