You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
11 KiB
Vue
334 lines
11 KiB
Vue
<template>
|
|
<div class="history bg-white">
|
|
<div class="ant-advanced-search-form">
|
|
<a-form layout="inline" :form="queryParam">
|
|
<a-row :gutter="24">
|
|
|
|
<a-col :span="4" style="text-align: left">
|
|
<a-form-item label="设备名">
|
|
<a-select @change="handleChangeStreet" :value="queryParam.streetId" style="width:100px">
|
|
<a-select-option :value="0">
|
|
全部
|
|
</a-select-option>
|
|
<a-select-option v-for="i in listData" :key="i.name" :value="i.id">
|
|
{{i.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="5" style="text-align: left">
|
|
<a-form-item label="工单号">
|
|
<a-input v-model="queryParam.orderNum" placeholder="请输入" style="width:200px;"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
<a-col :span="4" style="text-align: left">
|
|
<a-form-item label="是否缺烟">
|
|
<a-select
|
|
ref="select"
|
|
v-model="queryParam.status"
|
|
style="width: 120px"
|
|
@focus="focus"
|
|
>
|
|
|
|
<a-select-option value="">全部</a-select-option>
|
|
<a-select-option value="1">缺烟</a-select-option>
|
|
<a-select-option value="0">正常</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="7">
|
|
<a-form-item class="ageInput" label="时间">
|
|
<a-range-picker
|
|
@change="onTimeChange"
|
|
v-model="time"
|
|
format="YYYY-MM-DD HH:mm"
|
|
:show-time="{
|
|
defaultValue: [moment('00:00', 'HH:mm'), moment('23:59', 'HH:mm')],
|
|
//defaultValue: [moment('00:00', 'YYYY-MM-DD HH:mm'), moment('23:59', 'YYYY-MM-DD HH:mm')],
|
|
}"
|
|
>
|
|
<a-icon slot="suffixIcon" type="calendar"/>
|
|
</a-range-picker>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="3" style="text-align: right">
|
|
<a-button type="primary" @click="handleSearch">搜索</a-button>
|
|
<a-button style="margin-left: 15px" @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"
|
|
>
|
|
<span slot="streetType" slot-scope="text">
|
|
{{ text === null ? '-' : text === 0 ? '单伸' : '双伸' }}
|
|
</span>
|
|
<span slot="pics" slot-scope="text" style="width:auto">
|
|
|
|
<template>
|
|
<span v-if="text.pics" style="height:100%;">
|
|
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
|
|
<viewer :images="text.pics">
|
|
<img class="historyImg" v-for="(src,index) in text.pics" :src="src"
|
|
:key="index"/>
|
|
</viewer>
|
|
</happy-scroll>
|
|
</span>
|
|
<span v-else>
|
|
暂无图片
|
|
</span>
|
|
</template>
|
|
|
|
</span>
|
|
<span slot="status" slot-scope="text">
|
|
<!-- <span :style="text.status == 1 ?' color:red': ''">
|
|
{{ text.status == null ? ' ' : text.status == 0 ? '正常' : '告警' }}
|
|
</span> -->
|
|
否
|
|
</span>
|
|
<span slot="videoPath1" slot-scope="text">
|
|
<a-button type="link" @click="showModel(text)">
|
|
查看视频
|
|
</a-button>
|
|
|
|
</span>
|
|
<!-- <span slot="videoPath2" slot-scope="text">
|
|
<a-button type="link" v-if="text.videoPath2" @click="showModel(text.videoPath2)">
|
|
查看视频
|
|
</a-button>
|
|
<span v-else>
|
|
--
|
|
</span>
|
|
</span> -->
|
|
</a-table>
|
|
<Model
|
|
:visible.sync="visible"
|
|
:vid1.sync="vid1"
|
|
:vid2.sync="vid2"
|
|
@close="closeModel"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {imgUrl, videoUrl} from "@/api/importExcel";
|
|
import Model from "./model.vue"
|
|
import moment from 'moment';
|
|
export default {
|
|
name: "historyMonitoring",
|
|
data() {
|
|
return {
|
|
queryParam: {
|
|
orderNum: '',
|
|
status: '',
|
|
streetId: '',
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
time:[],
|
|
listData:[],
|
|
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 // 改变每页数量时更新显示
|
|
},
|
|
loading: false,
|
|
imgUrl: imgUrl,
|
|
columns: [
|
|
{
|
|
title: "工单号",
|
|
dataIndex: "orderNum",
|
|
},
|
|
{
|
|
title: "巷道",
|
|
dataIndex: "streetName",
|
|
width: 90
|
|
},
|
|
|
|
{
|
|
title: "时间",
|
|
dataIndex: "startTime",
|
|
},
|
|
{
|
|
title: "照片",
|
|
// dataIndex: "pic",
|
|
scopedSlots: {customRender: 'pics'},
|
|
width:320,
|
|
},
|
|
{
|
|
title: "是否缺箱",
|
|
// dataIndex: "status",
|
|
scopedSlots: {customRender: 'status'},
|
|
width: 90
|
|
},
|
|
{
|
|
title: "工单时长",
|
|
dataIndex: "timeLength",
|
|
},
|
|
{
|
|
title: "视频录像",
|
|
// dataIndex: "videoPath1",
|
|
scopedSlots: {customRender: 'videoPath1'}
|
|
}
|
|
|
|
],
|
|
visible: false,
|
|
vid1: '',
|
|
vid2: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getStreetList()
|
|
this.handleGetHistoryList()
|
|
console.log(this.imgUrl)
|
|
if (this.$route.params.orderNum) {
|
|
console.log(this.$route.params.orderNum)
|
|
this.queryParam.orderNum = this.$route.params.orderNum
|
|
}
|
|
},
|
|
methods: {
|
|
moment,
|
|
//获取巷道列表
|
|
getStreetList() {
|
|
this.$api.httpApi.getAllStreet({
|
|
}).then(res => {
|
|
this.listData = res.data;
|
|
}).catch(err => {
|
|
console.error(err);
|
|
});
|
|
},
|
|
|
|
handleChangeStreet(value) {
|
|
console.log(value);
|
|
if(value === 0){
|
|
this.select = "全部";
|
|
this.queryParam.streetId = value
|
|
} else {
|
|
for (let item of this.listData) {
|
|
if (item.id == value){
|
|
this.select = item.name
|
|
this.queryParam.streetId = value
|
|
}
|
|
}
|
|
}
|
|
},
|
|
range(start, end) {
|
|
const result = [];
|
|
for (let i = start; i < end; i++) {
|
|
result.push(i);
|
|
}
|
|
return result;
|
|
},
|
|
handleSearch() {
|
|
console.log(this.queryParam)
|
|
this.pageNum = 1
|
|
this.request()
|
|
|
|
},
|
|
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();
|
|
},
|
|
request() {
|
|
this.$api.httpApi.getHistoryList({
|
|
data: {
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
...this.queryParam
|
|
}
|
|
}).then(res => {
|
|
console.log(res.data)
|
|
const pagination = {...this.pagination};
|
|
pagination.total = res.data.total;
|
|
this.pagination = pagination;
|
|
this.data = res.data.list
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
onTimeChange(date, dateString) {
|
|
this.handleReset()
|
|
console.log(date)
|
|
console.log(dateString)
|
|
console.log(date[0].format('YYYY-MM-DD HH:mm'))
|
|
this.pageNum = 1
|
|
|
|
this.queryParam.startTimestamp = date[0].format('YYYY-MM-DD HH:mm:ss')
|
|
this.queryParam.endTimestamp = date[1].format('YYYY-MM-DD HH:mm:ss')
|
|
},
|
|
handleReset() {
|
|
this.queryParam.startTimestamp = ""
|
|
this.queryParam.endTimestamp = ""
|
|
this.pageNum = 1
|
|
this.pageSize = 10
|
|
|
|
},
|
|
showModel(record) {
|
|
this.visible = true
|
|
this.vid1 = videoUrl + record.videoPath1;
|
|
console.log(this.vid1)
|
|
this.vid2 = videoUrl + record.videoPath2;
|
|
|
|
},
|
|
closeModel(visible, data) {
|
|
this.visible = visible
|
|
this.vid1 = data
|
|
},
|
|
reset() {
|
|
this.queryParam.startTimestamp = ""
|
|
this.queryParam.endTimestamp = ""
|
|
this.queryParam.orderNum = ""
|
|
this.time = []
|
|
this.pageNum = 1
|
|
this.pageSize = 10
|
|
this.handleGetHistoryList()
|
|
},
|
|
},
|
|
components: {
|
|
Model
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.history {
|
|
padding: 24px;
|
|
}
|
|
.ant-drawer-content-wrapper {
|
|
height: auto !important;
|
|
}
|
|
|
|
.ant-drawer-body {
|
|
text-align: center;
|
|
}
|
|
|
|
.ant-advanced-search-form .ant-form-item {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.historyImg {
|
|
width: 80px;
|
|
height:auto;
|
|
margin: 5px;
|
|
}
|
|
</style>
|