[1078] 增加立即拍摄
This commit is contained in:
lin
@@ -1,121 +1,113 @@
|
||||
<template>
|
||||
<div id="configInfo">
|
||||
<el-dialog
|
||||
v-el-drag-dialog
|
||||
title="存储多媒体数据检索"
|
||||
width="60%"
|
||||
top="2rem"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="showDialog"
|
||||
:destroy-on-close="true"
|
||||
@close="close()"
|
||||
>
|
||||
<el-form :inline="true" size="mini" @submit.native.prevent>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
v-model="type"
|
||||
style="width: 8rem; margin-right: 1rem;"
|
||||
placeholder="请选择类型"
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="图像" :value="0" />
|
||||
<el-option label="音频" :value="1" />
|
||||
<el-option label="视频" :value="2" />
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="chanelId"
|
||||
style="width: 8rem; margin-right: 1rem;"
|
||||
placeholder="请选择通道"
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="平台下发指令" :value="0" />
|
||||
<el-option label="定时动作" :value="1" />
|
||||
<el-option label="抢劫报警触发" :value="2" />
|
||||
<el-option label="碰撞侧翻报警触发" :value="3" />
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="event"
|
||||
style="width: 8rem; margin-right: 1rem;"
|
||||
placeholder="请选择事件"
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="所有通道" :value="0" />
|
||||
<el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
<el-form :inline="true" size="mini" @submit.native.prevent>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
v-model="type"
|
||||
style="width: 8rem; margin-right: 1rem;"
|
||||
placeholder="请选择类型"
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="图像" :value="0" />
|
||||
<el-option label="音频" :value="1" />
|
||||
<el-option label="视频" :value="2" />
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="event"
|
||||
style="width: 8rem; margin-right: 1rem;"
|
||||
placeholder="请选择事件"
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="平台下发指令" :value="0" />
|
||||
<el-option label="定时动作" :value="1" />
|
||||
<el-option label="抢劫报警触发" :value="2" />
|
||||
<el-option label="碰撞侧翻报警触发" :value="3" />
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="chanelId"
|
||||
style="width: 8rem; margin-right: 1rem;"
|
||||
placeholder="请选择通道"
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="所有通道" :value="0" />
|
||||
<el-option v-for="item in channelList" :key="item.channelId" :label="item.name" :value="item.channelId" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH-mm-ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="removeRow(scope.$index)" >
|
||||
检索
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="queryLoading" icon="el-icon-search" @click="search()" >
|
||||
检索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="mediaDataInfoList" :height="500" stripe style="width: 100%" empty-text="暂无数据">
|
||||
<el-table-column prop="id" label="ID" />
|
||||
<el-table-column prop="type" label="类型" >
|
||||
<template v-slot:default="scope">
|
||||
{{typeLabel(scope.row.type)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="事件" >
|
||||
<template v-slot:default="scope">
|
||||
{{eventCodeLabel(scope.row.eventCode)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="channelId" label="通道ID" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template v-slot:default="scope">
|
||||
<el-button
|
||||
size="medium"
|
||||
type="text"
|
||||
icon="el-icon-location-information"
|
||||
:loading="scope.row.addRegionLoading"
|
||||
@click="showPositionInfo(scope.row)"
|
||||
>
|
||||
位置汇报
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="mediaDataInfoList" :height="500" stripe style="width: 100%" empty-text="暂无数据">
|
||||
<el-table-column prop="ID" label="ID" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column label="事件" >
|
||||
<template v-slot:default="scope">
|
||||
{{eventCodeLabel(scope.row.eventCode)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="channelId" label="通道ID" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template v-slot:default="scope">
|
||||
<el-button
|
||||
size="medium"
|
||||
type="text"
|
||||
style="color: #f56c6c"
|
||||
icon="el-icon-delete"
|
||||
:loading="scope.row.addRegionLoading"
|
||||
@click="removeRow(scope.$index)"
|
||||
>
|
||||
位置汇报
|
||||
</el-button>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="text"
|
||||
style="color: #f56c6c"
|
||||
icon="el-icon-delete"
|
||||
:loading="scope.row.addRegionLoading"
|
||||
@click="removeRow(scope.$index)"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-dialog>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="text"
|
||||
icon="el-icon-download"
|
||||
:loading="scope.row.addRegionLoading"
|
||||
@click="download(scope.row)"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<position ref="position"></position>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as XLSX from 'xlsx'
|
||||
import elDragDialog from '@/directive/el-drag-dialog'
|
||||
import position from './position.vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
name: 'ConfigInfo',
|
||||
directives: { elDragDialog },
|
||||
props: {},
|
||||
components: { position },
|
||||
props: ['phoneNumber', 'deviceId', 'channelList'],
|
||||
data() {
|
||||
return {
|
||||
deviceId: null,
|
||||
phoneNumber: null,
|
||||
showDialog: false,
|
||||
queryLoading: false,
|
||||
type: 0,
|
||||
chanelId: 0,
|
||||
event: 0,
|
||||
channelList: [],
|
||||
mediaDataInfoList: [],
|
||||
timeRange: '',
|
||||
pickerOptions: {
|
||||
@@ -160,30 +152,29 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openDialog: function(phoneNumber, deviceId) {
|
||||
this.showDialog = true
|
||||
this.phoneNumber = phoneNumber
|
||||
this.deviceId = deviceId
|
||||
this.mediaDataInfoList = []
|
||||
this.$store.dispatch('jtDevice/queryChannels', {
|
||||
page: 1,
|
||||
count: 1000,
|
||||
deviceId: this.deviceId
|
||||
})
|
||||
.then(data => {
|
||||
this.channelList = data.list
|
||||
})
|
||||
},
|
||||
close: function() {
|
||||
this.showDialog = false
|
||||
this.mediaDataInfoList = []
|
||||
this.channelList = []
|
||||
this.type = 0
|
||||
this.chanelId = 0
|
||||
this.event = 0
|
||||
},
|
||||
typeLabel: function(type) {
|
||||
switch (type){
|
||||
case 0:
|
||||
return '图像'
|
||||
case 1:
|
||||
return '音频'
|
||||
case 2:
|
||||
return '视频'
|
||||
default:
|
||||
return type
|
||||
}
|
||||
},
|
||||
eventCodeLabel: function(eventCode) {
|
||||
switch (eventCode){
|
||||
case 0:
|
||||
@@ -205,6 +196,70 @@ export default {
|
||||
default:
|
||||
return eventCode
|
||||
}
|
||||
},
|
||||
search: function() {
|
||||
this.mediaDataInfoList = []
|
||||
this.queryLoading = true
|
||||
console.log(this.timeRange)
|
||||
this.$store.dispatch('jtDevice/queryMediaData', {
|
||||
phoneNumber: this.phoneNumber,
|
||||
queryMediaDataCommand: {
|
||||
type: this.type,
|
||||
channelId: this.chanelId,
|
||||
event: this.event,
|
||||
startTime: this.timeRange === '' ? null : this.timeRange[0],
|
||||
endTime: this.timeRange === '' ? null : this.timeRange[1]
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
if (data.length === 0) {
|
||||
this.$message.info('未查询到相关记录')
|
||||
}
|
||||
this.mediaDataInfoList = data
|
||||
})
|
||||
.finally(() => {
|
||||
this.queryLoading = false
|
||||
})
|
||||
},
|
||||
showPositionInfo: function(row) {
|
||||
this.$refs.position.openDialog(row.positionBaseInfo)
|
||||
},
|
||||
download: function(row) {
|
||||
this.$message.success('已申请截图,完成后自动下载', { closed: true })
|
||||
// 文件下载地址
|
||||
const baseUrl = window.baseUrl ? window.baseUrl : ''
|
||||
const fileUrl = ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl) + `/api/jt1078/media/upload/one?phoneNumber=${this.phoneNumber}&mediaId=${row.id}`
|
||||
let controller = new AbortController()
|
||||
let signal = controller.signal
|
||||
// 设置请求头
|
||||
const headers = new Headers()
|
||||
headers.append('access-token', this.$store.getters.token) // 设置授权头，替换YourAccessToken为实际的访问令牌
|
||||
// 发起 请求
|
||||
fetch(fileUrl, {
|
||||
method: 'GET',
|
||||
headers: headers,
|
||||
signal: signal
|
||||
})
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
console.log(blob)
|
||||
// 创建一个虚拟的链接元素，模拟点击下载
|
||||
const link = document.createElement('a')
|
||||
link.href = window.URL.createObjectURL(blob)
|
||||
link.download = `${this.device.phoneNumber}-${row.channelId}-${dayjs().format('YYYYMMDDHHmmss')}.jpg` // 设置下载文件名，替换filename.ext为实际的文件名和扩展名
|
||||
document.body.appendChild(link)
|
||||
// 模拟点击
|
||||
link.click()
|
||||
// 移除虚拟链接元素
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
.catch(error => console.error('下载失败：', error))
|
||||
|
||||
setTimeout(() => {
|
||||
this.$message.error('下载超时', { closed: true })
|
||||
controller.abort('timeout')
|
||||
}, 15000)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -214,4 +269,9 @@ export default {
|
||||
>>> .el-upload {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-slider__marks-text {
|
||||
margin-top: -36px;
|
||||
font-size: 12px;
|
||||
width: 2rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user