告警日志页面接口联调及其他一些页面布局优化
张鑫
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