<template>
<div id="menu-management" class="menu-management">
<!-- 表头查询 -->
<div class="contaniar-t">
<el-date-picker
v-model="searchForm.startTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间"
/>
<el-date-picker
v-model="searchForm.endTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择截至时间"
/>
<el-select
v-model="searchForm.deviceName"
placeholder="选择设备名称"
clearable
>
<el-option
v-for="item in deviceNameList"
:key="item.deviceName"
:label="item.deviceName"
:value="item.deviceName"
/>
</el-select>
<el-button type="primary" @click="handleSearch">查询</el-button>
</div>
<!-- 列表查询 -->
<div class="contaniar-b">
<el-table
v-loading="listLoading"
:data="tableData"
style="width: 100%"
>
<el-table-column
v-for="(item, index) in titleData"
:key="index"
:label="item.Name"
:property="item.Value"
/>
</el-table>
<el-pagination
v-if="titleData.length>0"
:current-page="pageNo"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script>
export default {
name: 'DeviceMaintenanceRecord',
components: {
},
data() {
return {
searchForm: {
startTime: '',
endTime: '',
deviceName: ''
},
deviceNameList: [],
total: 0, // 总数
pageNo: 1, // 第一页
pageSize: 50, // 每页条数
titleData: [],
tableData: [],
listLoading: false
}
},
created() {
// this.getRealTimeAlarmList()
this.getSelectData()
},
mounted() {
this.searchForm.endTime = this.getNow()
this.searchForm.startTime = new Date(new Date().setDate(new Date().getDate() - 1))
this.searchForm.startTime = this.dataFormat(this.searchForm.startTime)
},
methods: {
// 格式化时间
dataFormat(date) {
// date是传入的时间
let d = new Date(date)
let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
let times =
d.getFullYear() +
'-' +
month +
'-' +
day +
' ' +
hours +
':' +
min +
':' +
sec
return times
},
getNow() {
var date = new Date()
let y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? ('0' + MM) : MM
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
let h = date.getHours()
h = h < 10 ? ('0' + h) : h
let m = date.getMinutes()
m = m < 10 ? ('0' + m) : m
let s = date.getSeconds()
s = s < 10 ? ('0' + s) : s
var time = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
return time // 时间 2023-04-19 13:10:20 想要字符串可以转一下toString
},
// 获取列表数据
getRealTimeAlarmList() {
this.listLoading = true
let params = {
deviceName: this.searchForm.deviceName,
startTime: this.searchForm.startTime,
endTime: this.searchForm.endTime,
pagesIndex: this.pageNo,
pagesSize: this.pageSize
}
this.$api.curveParams.queryCurveAlarm(params)
.then(res => {
if (res.statusCode === 200) {
this.titleData = JSON.parse(res.data.titleData)
this.tableData = JSON.parse(res.data.tableColumns)
this.pageNo = res.data.pageIndex
this.pageSize = res.data.pageSize
this.total = res.data.resultCount
this.listLoading = false
} else {
this.listLoading = false
this.$message.error((res.extras === null ? '' : res.extras) + (res.errors === null ? '' : res.errors))
}
})
},
getSelectData() {
this.$api.ngcConfiguration.queryDeviceList()
.then(res => {
if (res.statusCode === 200) {
if (res.data && res.data.length > 0) {
this.deviceNameList = res.data
this.searchForm.deviceName = res.data[0].deviceName
this.getRealTimeAlarmList()
} else {
this.deviceNameList = []
}
} else {
this.$message.error((res.extras === null ? '' : res.extras) + (res.errors === null ? '' : res.errors))
}
})
},
handleSearch() {
this.getRealTimeAlarmList()
},
/**
* 分页处理
*/
handleSizeChange(val) {
this.pageSize = val
this.pageNo = 1
this.getRealTimeAlarmList()
},
handleCurrentChange(val) {
this.pageNo = val
this.getRealTimeAlarmList()
}
}
}
如何动态获取el-table表格中的列?
最新推荐文章于 2024-05-13 16:31:48 发布