告警管理接口联调，plc异常页面构建接口联调，实时视频流页面bug修复
张鑫
5 years ago
parent
c12238ea68
commit
42db7e0a83
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:row-key="record => record.id"
|
||||
:data-source="data"
|
||||
:pagination="pagination"
|
||||
@change="handleGetCameraIoList"
|
||||
>
|
||||
<span slot="status" slot-scope="text">
|
||||
{{text == false ? text ='连接异常':text ='没有PLC连接异常'}}
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="reconnection(record)">重新连接</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
// dataIndex: 'id',
|
||||
customRender: (text, record, index) => {
|
||||
return (
|
||||
(1 - 1) * 10 + index + 1
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'PLCID',
|
||||
dataIndex: 'plcId',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: {customRender: 'status'}
|
||||
},
|
||||
{
|
||||
title: '异常时间',
|
||||
dataIndex: 'time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'}
|
||||
},
|
||||
];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
data: [],
|
||||
pagination: {
|
||||
total: 0,
|
||||
current: 1,
|
||||
defaultPageSize: 10, // 默认每页显示数量
|
||||
showTotal: total => `共 ${total} 条数据`, // 显示总数
|
||||
showSizeChanger: true, // 显示可改变每页数量
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
onShowSizeChange: (current, pageSize) => this.pageSize = pageSize // 改变每页数量时更新显示
|
||||
},
|
||||
loading: false,
|
||||
columns,
|
||||
visible: false,
|
||||
modelType: '',
|
||||
modelData: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.handleGetCameraIoList()
|
||||
},
|
||||
methods: {
|
||||
handleGetCameraIoList(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.disPlcList({
|
||||
data: {
|
||||
page: this.pageNum,
|
||||
size: this.pageSize,
|
||||
}
|
||||
}).then(res => {
|
||||
const pagination = {...this.pagination};
|
||||
pagination.total = res.data.total;
|
||||
this.data = res.data;
|
||||
this.pagination = pagination;
|
||||
res.data.list.forEach((value, index) => {
|
||||
value.pageNumber = this.pagination.current
|
||||
});
|
||||
}).catch(err => {
|
||||
|
||||
});
|
||||
},
|
||||
reconnection(data) {
|
||||
console.log(data.streetId)
|
||||
var id = data.streetId
|
||||
this.$axios.get('/plc/tcp', {
|
||||
params: {id: id}
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success('连接成功');
|
||||
this.handleGetStreetList()
|
||||
} else {
|
||||
this.$message.error('连接失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.button-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.add {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue