|
|
|
|
@ -1,50 +1,37 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="history bg-white">
|
|
|
|
|
<a-input-search
|
|
|
|
|
class="mb24"
|
|
|
|
|
style="width: 40%;"
|
|
|
|
|
placeholder="请输入工单号搜索"
|
|
|
|
|
v-model="search"
|
|
|
|
|
enter-button="搜索"
|
|
|
|
|
@search="handleSearch"
|
|
|
|
|
></a-input-search>'
|
|
|
|
|
<a-table :rowKey="record => record.id" :columns="columns" :dataSource="dataSource">
|
|
|
|
|
<div slot="mediaPath" slot-scope="text, record">
|
|
|
|
|
<a :href="record.mediaPath" target="_blank">
|
|
|
|
|
<img
|
|
|
|
|
v-if="imglist.some(item => record.mediaType.toLowerCase() === item)"
|
|
|
|
|
:src="record.mediaPath"
|
|
|
|
|
alt="内容图片"
|
|
|
|
|
style="width: 140px; cursor:pointer;"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<span v-else style="color: #40a9ff; cursor:pointer;">{{ record.mediaPath }}</span>
|
|
|
|
|
</a>
|
|
|
|
|
<div class="ant-advanced-search-form">
|
|
|
|
|
<a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" :form="queryParam">
|
|
|
|
|
<a-row :gutter="12">
|
|
|
|
|
<a-col :span="8" style="text-align: left">
|
|
|
|
|
<a-form-item label="工单号">
|
|
|
|
|
<a-input v-model="queryParam.con_code" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="8">
|
|
|
|
|
<a-form-item class="ageInput" label="时间">
|
|
|
|
|
<a-range-picker @change="onTimeChange" v-model="queryParam.time" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="8" style="text-align: right">
|
|
|
|
|
<a-button type="primary" @click="handleSearch">搜索</a-button>
|
|
|
|
|
<!-- <a-button style="margin-left: 8px" @click="reset">重置</a-button>-->
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-form>
|
|
|
|
|
</div>
|
|
|
|
|
<a-table
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:row-key="record => record.id"
|
|
|
|
|
:data-source="data"
|
|
|
|
|
:pagination="pagination"
|
|
|
|
|
@change="handleGetHistoryList"
|
|
|
|
|
>
|
|
|
|
|
</a-table>
|
|
|
|
|
<a-drawer placement="bottom" :visible="drawer" @close="onClose">
|
|
|
|
|
<img
|
|
|
|
|
v-if="showDrawer.type === 'image'"
|
|
|
|
|
:src="showDrawer.url"
|
|
|
|
|
alt="内容图片"
|
|
|
|
|
style="height: 500px"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<!-- <video-player
|
|
|
|
|
v-else
|
|
|
|
|
class="flex"
|
|
|
|
|
style="height: 500px;"
|
|
|
|
|
ref="videoPlayer"
|
|
|
|
|
:options="playerOptions"
|
|
|
|
|
></video-player>-->
|
|
|
|
|
</a-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// require styles
|
|
|
|
|
// import "video.js/dist/video-js.css";
|
|
|
|
|
// import { videoPlayer } from "vue-video-player";
|
|
|
|
|
export default {
|
|
|
|
|
name: "historyMonitoring",
|
|
|
|
|
components: {
|
|
|
|
|
@ -52,94 +39,113 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
playerOptions: {
|
|
|
|
|
autoplay: true,
|
|
|
|
|
muted: true,
|
|
|
|
|
language: "zh-CN",
|
|
|
|
|
height: 500,
|
|
|
|
|
sources: [
|
|
|
|
|
{
|
|
|
|
|
src: ""
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
labelCol: { span: 6 },
|
|
|
|
|
wrapperCol: { span: 18 },
|
|
|
|
|
queryParam: {},
|
|
|
|
|
pageNum:1,
|
|
|
|
|
pageSize:10,
|
|
|
|
|
data: [],
|
|
|
|
|
pagination:{
|
|
|
|
|
total:0,
|
|
|
|
|
defaultPageSize:10, // 默认每页显示数量
|
|
|
|
|
showTotal: total => `共 ${total} 条数据`, // 显示总数
|
|
|
|
|
showSizeChanger:true, // 显示可改变每页数量
|
|
|
|
|
pageSizeOptions: ['10', '20', '30'],
|
|
|
|
|
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
|
|
|
|
|
},
|
|
|
|
|
search: "",
|
|
|
|
|
loading: false,
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
title: "工单号",
|
|
|
|
|
dataIndex: "orderNum",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "巷道",
|
|
|
|
|
dataIndex: "str",
|
|
|
|
|
width: 90
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "仓位号",
|
|
|
|
|
dataIndex: "positionNum",
|
|
|
|
|
width: 170
|
|
|
|
|
title: "货架类型",
|
|
|
|
|
dataIndex: "type",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "创建时间",
|
|
|
|
|
dataIndex: "createTime",
|
|
|
|
|
width: 200
|
|
|
|
|
title: "货位",
|
|
|
|
|
dataIndex: "address",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "内容",
|
|
|
|
|
dataIndex: "mediaPath",
|
|
|
|
|
scopedSlots: {
|
|
|
|
|
customRender: "mediaPath"
|
|
|
|
|
title: "时间",
|
|
|
|
|
dataIndex: "time",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "照片（入库 货位 出库）",
|
|
|
|
|
dataIndex: "pic",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "视频状态",
|
|
|
|
|
dataIndex: "status",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "视频时长",
|
|
|
|
|
dataIndex: "mediaTime",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "球机1",
|
|
|
|
|
dataIndex: "camera1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "球机2",
|
|
|
|
|
dataIndex: "camera2",
|
|
|
|
|
},
|
|
|
|
|
width: 300
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
dataSource: [],
|
|
|
|
|
imglist: ["png", "jpg", "jpeg", "bmp", "gif"],
|
|
|
|
|
videolist: [
|
|
|
|
|
"mp4",
|
|
|
|
|
"m2v",
|
|
|
|
|
"mkv",
|
|
|
|
|
"rmvb",
|
|
|
|
|
"wmv",
|
|
|
|
|
"avi",
|
|
|
|
|
"flv",
|
|
|
|
|
"mov",
|
|
|
|
|
"m4v"
|
|
|
|
|
],
|
|
|
|
|
drawer: false,
|
|
|
|
|
showDrawer: {}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.handleGetHistoryList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleSearch() {
|
|
|
|
|
console.log(this.$api)
|
|
|
|
|
this.query();
|
|
|
|
|
handleSearch(){
|
|
|
|
|
delete this.queryParam.time
|
|
|
|
|
console.log(this.queryParam)
|
|
|
|
|
if(this.queryParam.con_code || this.queryParam.start_time && this.queryParam.end_time ){
|
|
|
|
|
this.handleGetHistoryList()
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error('请输入搜索条件')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleGetHistoryList(pagination) {
|
|
|
|
|
console.log(pagination)
|
|
|
|
|
if(pagination){
|
|
|
|
|
this.pagination.current = pagination.current;
|
|
|
|
|
this.pagination.pageSize = pagination.pageSize;
|
|
|
|
|
this.pageNum = pagination.current;
|
|
|
|
|
this.pageSize = pagination.pageSize;
|
|
|
|
|
}
|
|
|
|
|
this.request();
|
|
|
|
|
},
|
|
|
|
|
query() {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.queryList({
|
|
|
|
|
request() {
|
|
|
|
|
this.$api.httpApi.queryList({
|
|
|
|
|
data: {
|
|
|
|
|
orderNum: this.search
|
|
|
|
|
pageNum:this.pageNum,
|
|
|
|
|
pageSize:this.pageSize,
|
|
|
|
|
...this.queryParam
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(res => {
|
|
|
|
|
// res.data[1].mediaPath =
|
|
|
|
|
// "http://gitlab.zhehekeji.com/security_check/security_front/raw/1.0.0/src/assets/video/video2.mp4";
|
|
|
|
|
this.dataSource = res.data;
|
|
|
|
|
}).then(res => {
|
|
|
|
|
console.log(res)
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handlePopup(type, url) {
|
|
|
|
|
this.drawer = true;
|
|
|
|
|
this.showDrawer.type = type;
|
|
|
|
|
this.playerOptions.sources[0].src = url;
|
|
|
|
|
onTimeChange(date, dateString) {
|
|
|
|
|
console.log(date)
|
|
|
|
|
console.log(date[0].format('X'))
|
|
|
|
|
this.queryParam.start_time = date[0].format('X')
|
|
|
|
|
this.queryParam.end_time = date[1].format('X')
|
|
|
|
|
},
|
|
|
|
|
onClose() {
|
|
|
|
|
this.drawer = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.history {
|
|
|
|
|
padding: 24px;
|
|
|
|
|
}
|
|
|
|
|
@ -149,4 +155,8 @@ export default {
|
|
|
|
|
.ant-drawer-body {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.ant-advanced-search-form .ant-form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
张鑫
5 years ago