|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="head-container"> |
|
|
|
<el-select v-model="optionVal" class="filter-item" style="width: 125px; height: 30px;margin:0 10px 0 0"> |
|
|
|
<el-select v-model="optionVal" class="filter-item" style="width: 125px; height: 30px;margin:0 10px 0 0" @change="crud.toQuery"> |
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
<date-range-picker v-model="queryTime" type="datetimerange" class="date-item el-date-range-picker" /> |
|
|
@ -9,32 +9,33 @@ |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="crud.loading" |
|
|
|
:data="crud.data" |
|
|
|
style="width: 100%;" |
|
|
|
:cell-class-name="cell" |
|
|
|
height="calc(100vh - 356px)" |
|
|
|
> |
|
|
|
<!-- :cell-class-name="cell" --> |
|
|
|
<el-table-column type="index" label="序号" width="80" align="center" /> |
|
|
|
<el-table-column prop="isdload" label="监控下载" min-width="100" align="center"> |
|
|
|
<!-- <el-table-column prop="isdload" label="监控下载" min-width="100" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.isdload===true" class="text">下载成功</span> |
|
|
|
<span v-if="scope.row.isdload===false" class="text">下载失败</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="storeroomName" label="所属区域" min-width="150" align="center" /> |
|
|
|
<el-table-column prop="camerName" label="设备" align="center" min-width="150" /> |
|
|
|
<el-table-column prop="" label="摄像头" align="center" min-width="150" /> |
|
|
|
<el-table-column prop="" label="事件" align="center" min-width="180" /> |
|
|
|
<el-table-column prop="" label="内容描述" align="center" min-width="180" /> |
|
|
|
<el-table-column prop="" label="事件发生时间" align="center" min-width="180"> |
|
|
|
</el-table-column> --> |
|
|
|
<el-table-column prop="deviceCamerBindId.storeroomName" label="所属区域" min-width="150" align="center" /> |
|
|
|
<el-table-column prop="deviceCamerBindId.deviceName" label="设备" align="center" min-width="150" /> |
|
|
|
<el-table-column prop="cameraName" label="摄像头" align="center" min-width="150" /> |
|
|
|
<el-table-column prop="event" label="事件" align="center" min-width="180" /> |
|
|
|
<el-table-column prop="description" label="内容描述" align="center" min-width="180" /> |
|
|
|
<el-table-column prop="create_time" label="事件发生时间" align="center" min-width="180"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.create_time | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="" label="操作" align="center" min-width="100"> |
|
|
|
<el-table-column prop="downloadLink" label="操作" align="center" min-width="100"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button v-if="scope.row.isdload===true" size="mini" style="background:#3A99FD;border:none" @click="handleListen">查看监控</el-button> |
|
|
|
<el-button v-if="scope.row.isdload===false" size="mini" style="background:#FD8042;border:none" @click="handleListen">重新下载</el-button> |
|
|
|
<el-button v-if="scope.row.downloadLink" size="mini" style="background:#3A99FD;border:none" @click="handleListen(scope.row.downloadLink)">查看监控</el-button> |
|
|
|
<el-button v-if="!scope.row.downloadLink" size="mini" style="background:#FD8042;border:none" @click="handleListen(scope.row.downloadLink)">重新下载</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
@ -56,6 +57,7 @@ import CRUD, { presenter, crud, header } from '@crud/crud' |
|
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
import data1 from '../module/data1' |
|
|
|
import { cameraDownload } from '@/api/storeManage/listenManage' |
|
|
|
// import qs from 'qs' |
|
|
|
export default { |
|
|
|
name: 'VideoListen', |
|
|
@ -63,19 +65,20 @@ export default { |
|
|
|
mixins: [presenter(), crud(), header()], |
|
|
|
cruds() { |
|
|
|
return CRUD({ |
|
|
|
url: 'api/videomonitorng/list' |
|
|
|
url: 'api/videos/list', |
|
|
|
optShow: {} |
|
|
|
}) |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [], |
|
|
|
lookVisible: false, |
|
|
|
optionVal: 0, |
|
|
|
optionVal: '全部', |
|
|
|
options: [ |
|
|
|
{ value: 0, label: '全部' }, |
|
|
|
{ value: 1, label: '密集架开架' }, |
|
|
|
{ value: 2, label: '密集架报警' }, |
|
|
|
{ value: 3, label: '通道门报警' } |
|
|
|
{ value: '全部', label: '全部' }, |
|
|
|
{ value: '密集架开架', label: '密集架开架' }, |
|
|
|
{ value: '密集架报警', label: '密集架报警' }, |
|
|
|
{ value: '通道门报警', label: '通道门报警' } |
|
|
|
], |
|
|
|
queryTime: null |
|
|
|
} |
|
|
@ -84,17 +87,39 @@ export default { |
|
|
|
this.tableData = data1.rows |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
cell({ row, columnIndex }) { |
|
|
|
if (row.isdload === true && columnIndex === 1) { |
|
|
|
return 'text-green' |
|
|
|
} else if (row.isdload === false && columnIndex === 1) { |
|
|
|
return 'text-red' |
|
|
|
// cell({ row, columnIndex }) { |
|
|
|
// if (row.isdload === true && columnIndex === 1) { |
|
|
|
// return 'text-green' |
|
|
|
// } else if (row.isdload === false && columnIndex === 1) { |
|
|
|
// return 'text-red' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
[CRUD.HOOK.beforeRefresh]() { |
|
|
|
// this.crud.downloadLoading = true |
|
|
|
this.crud.query.event = null |
|
|
|
this.crud.query.createTime = null |
|
|
|
if (this.optionVal === '全部') { |
|
|
|
this.crud.query.event = null |
|
|
|
} else { |
|
|
|
this.crud.query.event = this.optionVal |
|
|
|
} |
|
|
|
// this.crud.query.blurry = this.keyWord |
|
|
|
if (this.queryTime) { |
|
|
|
this.crud.query.createTime = this.queryTime |
|
|
|
} else { |
|
|
|
this.crud.query.createTime = null |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 查看监控 |
|
|
|
handleListen() { |
|
|
|
this.lookVisible = true |
|
|
|
handleListen(row) { |
|
|
|
// this.lookVisible = true |
|
|
|
console.log(row) |
|
|
|
const params = { |
|
|
|
'fileName': '1662714646.ts' |
|
|
|
} |
|
|
|
cameraDownload(params).then(res => { |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -103,12 +128,12 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import '~@/assets/styles/lend-manage.scss'; |
|
|
|
@import "~@/assets/styles/archives-manage.scss"; |
|
|
|
.text-green .text{ |
|
|
|
color: #1AAE93; |
|
|
|
} |
|
|
|
.text-red .text{ |
|
|
|
color:#F65163; |
|
|
|
} |
|
|
|
// .text-green .text{ |
|
|
|
// color: #1AAE93; |
|
|
|
// } |
|
|
|
// .text-red .text{ |
|
|
|
// color:#F65163; |
|
|
|
// } |
|
|
|
.head-container{ |
|
|
|
.date-item{ |
|
|
|
width: 350px !important; |
|
|
|