告警日志页面接口联调及其他一些页面布局优化
张鑫
5 years ago
parent
1031fc086c
commit
e6639fea14
@ -0,0 +1,5 @@
|
||||
.alarm{
|
||||
.ant-form-item-label{
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,256 @@
|
||||
<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-select :default-value="0" style="width: 180px" @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-col>
|
||||
<a-col :span="10">
|
||||
<a-form-item class="ageInput" label="告警时间">
|
||||
<a-range-picker @change="onTimeChange" v-model="time">
|
||||
<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: 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="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" v-if="text.videoPath1" @click="showModel(text.videoPath1)">
|
||||
查看视频
|
||||
</a-button>
|
||||
<span v-else>
|
||||
|
||||
</span>
|
||||
</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"
|
||||
:vid.sync="vid"
|
||||
@close="closeModel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {imgUrl, videoUrl} from "@/api/importExcel";
|
||||
import Model from "./model.vue"
|
||||
export default {
|
||||
name: "alarmLog",
|
||||
data() {
|
||||
return {
|
||||
queryParam: {},
|
||||
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",
|
||||
}
|
||||
],
|
||||
visible: false,
|
||||
vid: '',
|
||||
streetList:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getStreetList()
|
||||
this.handleGetalarmLog()
|
||||
console.log(this.imgUrl)
|
||||
},
|
||||
methods: {
|
||||
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 = ""
|
||||
this.queryParam.endTime = ""
|
||||
this.time = ""
|
||||
this.handleGetalarmLog()
|
||||
},
|
||||
showModel(data) {
|
||||
this.visible = true
|
||||
this.vid = videoUrl + data
|
||||
},
|
||||
closeModel(visible, data) {
|
||||
this.visible = visible
|
||||
this.vid = 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>
|
||||
Loading…
Reference in New Issue