|
|
|
|
|
<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" >
|
|
|
|
|
|
<a-form-item label="巷道">
|
|
|
|
|
|
<a-select :default-value="0" style="width: 100px" @change="handleChange">
|
|
|
|
|
|
巷道：
|
|
|
|
|
|
<a-select-option :value="0">
|
|
|
|
|
|
全部
|
|
|
|
|
|
</a-select-option>
|
|
|
|
|
|
<a-select-option v-for="(item,index) in streetList" :key="index" :value="item.id">
|
|
|
|
|
|
{{item.name}}
|
|
|
|
|
|
</a-select-option>
|
|
|
|
|
|
</a-select>
|
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
<a-col :span="10">
|
|
|
|
|
|
<a-form-item class="ageInput" label="告警时间">
|
|
|
|
|
|
<a-range-picker
|
|
|
|
|
|
@change="onTimeChange"
|
|
|
|
|
|
v-model="time"
|
|
|
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
|
|
:show-time="{defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],}"
|
|
|
|
|
|
>
|
|
|
|
|
|
<a-icon slot="suffixIcon" type="calendar"/>
|
|
|
|
|
|
</a-range-picker>
|
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
<a-col :span="10" 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="handleGetalarmLog"
|
|
|
|
|
|
>
|
|
|
|
|
|
<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="imgUrl+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>
|
|
|
|
|
|
|
|
|
|
|
|
</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: "alarmLog",
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
queryParam: {
|
|
|
|
|
|
startTime: moment().subtract(1, "weeks").format('YYYY-MM-DD HH:mm:ss'), //当前时间的前一个星期时间
|
|
|
|
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
|
},
|
|
|
|
|
|
time:[],
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
|
data: [],
|
|
|
|
|
|
pagination: {
|
|
|
|
|
|
total: 0,
|
|
|
|
|
|
defaultPageSize: 10, // 默认每页显示数量
|
|
|
|
|
|
current:1,
|
|
|
|
|
|
showTotal: total => `共 ${total} 条数据`, // 显示总数
|
|
|
|
|
|
showSizeChanger: true, // 显示可改变每页数量
|
|
|
|
|
|
pageSizeOptions: ['10', '20', '30'],
|
|
|
|
|
|
onShowSizeChange: (current, pageSize) => this.pageSize = pageSize // 改变每页数量时更新显示
|
|
|
|
|
|
},
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
imgUrl: imgUrl,
|
|
|
|
|
|
columns: [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '序号',
|
|
|
|
|
|
// dataIndex: 'id',
|
|
|
|
|
|
customRender: (text, record, index) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
(record.pageNumber - 1) * 10 + index + 1
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "告警信号",
|
|
|
|
|
|
dataIndex: "signal",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "告警时间",
|
|
|
|
|
|
dataIndex: "startTime",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "复位时间",
|
|
|
|
|
|
dataIndex: "endTime",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "巷道",
|
|
|
|
|
|
dataIndex: "streetName",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "涉及货位",
|
|
|
|
|
|
dataIndex: "location",
|
|
|
|
|
|
},
|
|
|
|
|
|
// TODO 日志合并
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "告警时长",
|
|
|
|
|
|
dataIndex: "timeLength",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "录像视频",
|
|
|
|
|
|
// dataIndex: "videoPath1",
|
|
|
|
|
|
scopedSlots: {customRender: 'videoPath1'}
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
visible: false,
|
|
|
|
|
|
vid1: '',
|
|
|
|
|
|
vid2: '',
|
|
|
|
|
|
streetList:[]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.getStreetList()
|
|
|
|
|
|
this.handleGetalarmLog()
|
|
|
|
|
|
console.log(this.imgUrl)
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
moment,
|
|
|
|
|
|
range(start, end) {
|
|
|
|
|
|
const result = [];
|
|
|
|
|
|
for (let i = start; i < end; i++) {
|
|
|
|
|
|
result.push(i);
|
|
|
|
|
|
}
|
|
|
|
|
|
return result;
|
|
|
|
|
|
},
|
|
|
|
|
|
getStreetList(){
|
|
|
|
|
|
this.$api.httpApi.getStreetList({
|
|
|
|
|
|
data: {
|
|
|
|
|
|
pageNum:0,
|
|
|
|
|
|
pageSize:0,
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
this.streetList = res.data.list;
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
handleChange(value) {
|
|
|
|
|
|
console.log(`selected ${value}`);
|
|
|
|
|
|
this.queryParam.streetId=value
|
|
|
|
|
|
},
|
|
|
|
|
|
handleSearch() {
|
|
|
|
|
|
console.log(this.queryParam)
|
|
|
|
|
|
this.handleGetalarmLog()
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
handleGetalarmLog(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.warnList({
|
|
|
|
|
|
data: {
|
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
|
...this.queryParam
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
const pagination = { ...this.pagination };
|
|
|
|
|
|
pagination.total = res.data.total;
|
|
|
|
|
|
this.data = res.data.list;
|
|
|
|
|
|
this.pagination = pagination;
|
|
|
|
|
|
res.data.list.forEach((value,index) => {
|
|
|
|
|
|
value.pageNumber = this.pagination.current
|
|
|
|
|
|
});
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
onTimeChange(date, dateString) {
|
|
|
|
|
|
this.handleReset()
|
|
|
|
|
|
console.log(date)
|
|
|
|
|
|
console.log(date[0].format('YYYY-MM-DD HH:mm:ss'))
|
|
|
|
|
|
this.queryParam.startTime = date[0].format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
|
this.queryParam.endTime = date[1].format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
|
},
|
|
|
|
|
|
handleReset() {
|
|
|
|
|
|
this.queryParam.startTime = ""
|
|
|
|
|
|
this.queryParam.endTime = ""
|
|
|
|
|
|
},
|
|
|
|
|
|
reset() {
|
|
|
|
|
|
this.queryParam.startTime = moment().subtract(1, "weeks").format('YYYY-MM-DD HH:mm:ss'), //当前时间的前一个星期时间
|
|
|
|
|
|
this.queryParam.endTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
|
this.queryParam.streetId = 0
|
|
|
|
|
|
this.time = []
|
|
|
|
|
|
this.handleGetalarmLog()
|
|
|
|
|
|
},
|
|
|
|
|
|
showModel(text) {
|
|
|
|
|
|
|
|
|
|
|
|
this.visible = true
|
|
|
|
|
|
this.vid1 = videoUrl + text.videoPath1;
|
|
|
|
|
|
this.vid2 = videoUrl + text.videoPath2;
|
|
|
|
|
|
console.log(this.vid1)
|
|
|
|
|
|
},
|
|
|
|
|
|
closeModel(visible, data) {
|
|
|
|
|
|
this.visible = visible
|
|
|
|
|
|
this.vid1 = data
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
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>
|
