<template>
|
<div class="table_logList">
|
<a-table ref="table" bordered :rowKey="(record,index)=>{return index}" :columns="columns"
|
:dataSource="dataList" :pagination="ipagination" :loading="loading" @change="handleTableChange"
|
:customRow="rowClick">
|
<template slot="status" slot-scope="status">
|
<div v-if="status == '3' || status == '23'" style="color: #00ee00;width: 100%; height: 100%;">运行</div>
|
<div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">待机</div>
|
<div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">关机</div>
|
<div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">报警</div>
|
<div v-else-if="status == '25'" style="color: #C11900;width: 100%; height: 100%;">故障</div>
|
</template>
|
</a-table>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
|
export default {
|
name: 'LogList',
|
props: {
|
dataList: {
|
type: Array,
|
required: true,
|
default: []
|
},
|
loading: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {},
|
data() {
|
return {
|
ipagination: {
|
current: 1,
|
pageSize: 100,
|
pageSizeOptions: ['100', '500', '1000'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
columns: [
|
{
|
title: '状态',
|
align: 'center',
|
dataIndex: 'status',
|
scopedSlots: { customRender: 'status' }
|
},
|
{
|
title: '开始时间',
|
align: 'center',
|
dataIndex: 'startTime'
|
// defaultSortOrder:'descend',
|
// sorter: (a, b) => {return a.startTime>b.startTime?1:-1}
|
},
|
{
|
title: '结束时间',
|
align: 'center',
|
dataIndex: 'endTime'
|
// defaultSortOrder:'descend',
|
// sorter: (a, b) => {return a.endTime>b.endTime?1:-1}
|
},
|
{
|
title: '持续时间',
|
align: 'center',
|
dataIndex: 'duration',
|
customRender: (t, r, index) => {
|
// console.log(t)
|
var ss = parseInt(t)
|
if (ss >= 3600) {
|
// 根据秒数转换成对应的时分秒
|
const hour = parseInt(ss / 3600) < 10 ? '0' + parseInt(ss / 3600) : parseInt(ss / 3600)
|
const min = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
|
const sec = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
|
if (min == '00') {
|
if (sec == '00') {
|
return hour + '小时'
|
} else {
|
return hour + '小时' + sec + '秒'
|
}
|
|
} else {
|
if (sec == '00') {
|
return hour + '小时' + min + '分'
|
} else {
|
return hour + '小时' + min + '分' + sec + '秒'
|
}
|
}
|
} else if (60 < ss && ss < 3600) {
|
const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
|
const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
|
return min1 + '分' + sec1 + '秒'
|
} else {
|
const sec2 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
|
return sec2 + '秒'
|
}
|
}
|
// defaultSortOrder:'descend',
|
// sorter: (a, b) => {return a.duration>b.duration?1:-1}
|
},
|
{
|
title: '程序号',
|
align: 'center',
|
dataIndex: 'sequenceNumber'
|
}
|
]
|
}
|
},
|
methods: {
|
handleTableChange(pagination, filters, sorter) {
|
//分页、排序、筛选变化时触发
|
//TODO 筛选
|
if (Object.keys(sorter).length > 0) {
|
this.isorter.column = sorter.field
|
this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
|
}
|
this.ipagination = pagination
|
},
|
/**
|
* 给设备日志表格中的行添加点击事件
|
* @param record 点击的当前行数据
|
* @returns {{on: {click: on.click}}} 添加事件对象
|
*/
|
rowClick(record) {
|
return {
|
style: {
|
cursor: 'pointer'
|
},
|
on: {
|
click: () => {
|
// 关机状态设备日志不弹出工作曲线
|
if (record.status === 0) return
|
const timeObj = {
|
start: moment(record.startTime),
|
end: moment(record.endTime)
|
}
|
this.$bus.$emit('tableRowRecord', timeObj)
|
}
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@import '~@assets/less/common.less';
|
|
@media screen and (min-width: 1920px) {
|
.table_logList {
|
height: 417px !important;
|
overflow: auto;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
.table_logList {
|
height: 417px !important;
|
overflow: auto;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
.table_logList {
|
height: 266px !important;
|
overflow: auto;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
.table_logList {
|
height: 360px !important;
|
overflow: auto;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
.table_logList {
|
height: 170px !important;
|
overflow: auto;
|
}
|
}
|
</style>
|
