<template>
|
<!-- 面包屑导航区 -->
|
<div class="indexs">
|
<el-card>
|
<el-row>
|
<el-button type="success" plain @click="exportExcel" >导出Excel</el-button>
|
<el-button type="danger" @click="openAlarm">设备异常报警统计</el-button>
|
<el-select v-model="selectTypeValue" placeholder="选择设备名称" class="selectTypeValue" @change="selectChang">
|
<el-option
|
v-for="item in selectType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-date-picker
|
v-model="datatime"
|
size="large"
|
type="datetimerange"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="selectChang"
|
>
|
</el-date-picker>
|
<el-button type="success" plain @click="find" >查询</el-button>
|
<el-button type="info" plain @click="reset" >重置</el-button>
|
</el-row>
|
<el-dialog :visible.sync="alarmInfoShou" width="1600px" >
|
<div slot="title" >
|
<span style=" font-size: 35px;color: #ffdd11; background-color:#474d4b;">---------------------------------------------------------设备异常报警统计--------------------------------------------------</span>
|
<el-date-picker
|
v-model="datatimes"
|
type="month"
|
placeholder="选择月">
|
</el-date-picker> <el-button type="success" plain @click="alarmInfo" >查询</el-button>
|
<el-button type="info" plain @click="resetChild" >重置</el-button>
|
</div>
|
|
<el-table :data="alarmInfodata" :max-height="tableHeight" border stripe show-summary :cell-style="cellStyle" style="width: 1550px; font-size: 25px;">
|
<el-table-column label="序号" type="index" width="100"> </el-table-column>
|
<el-table-column property="DeviceName" label="设备名称" width="150"></el-table-column>
|
<el-table-column property="AlarmNum" label="故障次数" width="150"></el-table-column>
|
<el-table-column property="AlarmTime" label="故障时长(小时)" width="200"></el-table-column>
|
<el-table-column property="AlarmName1" label="故障1" width="250"></el-table-column>
|
<el-table-column property="AlarmName2" label="故障2" width="250"></el-table-column>
|
<el-table-column property="AlarmName3" label="故障3" width="250"></el-table-column>
|
</el-table>
|
</el-dialog>
|
<!-- 显示人员列表 -->
|
<el-table ref= "table" :data="TakeStocklist" bottom= "10%" border stripe show-summary :summary-method="getSummaries" >
|
<el-table-column
|
:reserve-selection="true"
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="100">
|
</el-table-column>
|
<el-table-column label="设备名称" prop="deviceName" width="300"></el-table-column>
|
<el-table-column label="设备报警信息" prop="alarmInfo" width="500"></el-table-column>
|
<el-table-column label="创建时间" prop="creatTime" width="200"></el-table-column>
|
<el-table-column label="持续时间" prop="continueTime" width="200"></el-table-column>
|
</el-table>
|
<el-pagination
|
:current-page="queryInfo.pagenum"
|
:page-sizes="[5,10, 15, 20,50,100,1000,10000]"
|
:page-size="queryInfo.pagesize"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
>
|
</el-pagination>
|
</el-card>
|
|
</div>
|
</template>
|
<script>
|
import { parseTime } from '@/utils'
|
import { getDate } from '@/utils/dateTime'
|
import { getThisWeekRange} from '@/utils/formatTime.js'
|
export default {
|
data() {
|
return {
|
tableHeight:window.innerHeight-204,
|
queryInfo: {
|
// 当前页
|
pagenum: 1,
|
// 每页显示多少条信息s
|
pagesize: 10
|
},
|
alarmInfoShou: false,
|
alarmInfodata: [],
|
TakeStocklist: [],
|
TakeStocklistAll: [],
|
total: 0,
|
datatime: '',
|
datatimes: '',
|
selectType: [
|
{ value: '5', label: '不筛选设备' },
|
{ value: '0', label: '堆垛机' },
|
{ value: '1', label: '输送线' },
|
{ value: '2', label: 'rgv' },
|
{ value: '3', label: '拆盘机/叠盘机' }
|
],
|
selectTypeValue: '5',
|
dialogFormVisible: false,
|
productList: [],
|
updateDate: null
|
}
|
},
|
created() {},
|
mounted() {
|
this.initTimeData();
|
this.find()
|
},
|
methods: {
|
initTimeData(){
|
this.datatime= '';
|
this.datatime= getThisWeekRange(30);//启用了
|
},
|
// 监听 pagesize 改变
|
handleSizeChange(newSizd) {
|
this.queryInfo.pagesize = newSizd
|
this.queryInfo.pagenum = 1
|
this.find()
|
},
|
// 监听 页码值改变
|
handleCurrentChange(newpage) {
|
this.queryInfo.pagenum = newpage
|
|
this.find()
|
},
|
|
getSummaries(param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计'
|
return
|
}
|
if (index != 8) {
|
sums[index] = ''
|
return
|
}
|
const values = data.map(item => Number(item[column.property]))
|
if (!values.every(value => isNaN(value))) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr)
|
if (!isNaN(value)) {
|
return prev + curr
|
} else {
|
return prev
|
}
|
}, 0)
|
sums[index] += ' '
|
} else {
|
sums[index] = 'N/A'
|
}
|
})
|
|
return sums
|
},
|
|
formatJson(filterVal, jsonData) {
|
return jsonData.map(v =>
|
filterVal.map(j => {
|
if (j === 'timestamp') {
|
return parseTime(v[j])
|
} else {
|
return v[j]
|
}
|
})
|
)
|
},
|
openAlarm() {
|
this.alarmInfoShou = true
|
this.alarmInfo()
|
},
|
alarmInfo() {
|
const url = '/api/task/findDeviceAlarms'
|
debugger
|
const params = {
|
month: this.datatimes
|
}
|
|
var callback = res => {
|
debugger
|
|
if (res.state == 200) {
|
this.alarmInfodata = res.data
|
} else {
|
return this.$message.success('没有本月数据')
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
},
|
|
find() {
|
const url = '/api/task/findDeviceAlarm'
|
const params = {
|
queryInfo: this.queryInfo, //分页
|
positionTypeValue: this.selectTypeValue, //下拉框的值
|
datatime: this.datatime //日期
|
}
|
var callback = res => {
|
//debugger
|
|
if (res.result === true) {
|
res.data.forEach(item => {
|
item.creatTime = getDate(item.creatTime)
|
})
|
this.TakeStocklist = res.data
|
this.TakeStocklistAll = res.data
|
this.total = res.countPrint
|
} else {
|
this.TakeStocklist = []
|
this.TakeStocklistAll = []
|
this.total = 0
|
return this.$message.success('当前条件 查不到数据!')
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
},
|
find_export() {
|
const url = '/api/task/findDeviceAlarm'
|
const params = {
|
IsLoadAllData:true,//加载全部
|
queryInfo: this.queryInfo, //分页
|
positionTypeValue: this.selectTypeValue, //下拉框的值
|
datatime: this.datatime //日期
|
}
|
var callback = res => {
|
//debugger
|
|
if (res.result === true) {
|
res.data2.forEach(item => {
|
item.creatTime = getDate(item.creatTime)
|
})
|
|
this.TakeStocklistAll = res.data2
|
this.do_exportExcel()
|
} else {
|
this.TakeStocklistAll = []
|
return this.$message.success('当前条件 查不到数据!')
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
},
|
do_exportExcel() {
|
// import("@/vendor/Export2Excel")
|
this.downloadLoading = true
|
import('@/vendor/Export2Excel').then(excel => {
|
const tHeader = ['设备名称', '设备报警信息', '创建时间', '持续时间']
|
const filterVal = ['deviceName', 'alarmInfo', 'creatTime', 'continueTime']
|
const data = this.formatJson(filterVal, this.TakeStocklistAll)
|
excel.export_json_to_excel({
|
header: tHeader,
|
data,
|
filename: '设备报警信息表'
|
})
|
this.downloadLoading = false
|
})
|
},
|
exportExcel() {
|
this.find_export()
|
},
|
reset() {
|
this.selectTypeValue = '1'
|
this.queryInfo.pagenum = 1
|
this.pagesize = 10
|
this.datatime = ''
|
this.initTimeData();//重置时间
|
this.find()
|
},
|
resetChild() {
|
this.datatimes = ''
|
},
|
selectChang() {
|
this.queryInfo.pagenum = 1
|
this.pagesize = 10
|
this.find()
|
},
|
selectChangChild() {
|
this.alarmInfo()
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.el-table .el-pagination {
|
margin-top: 10px;
|
line-height: 30px;
|
margin-bottom: 0%;
|
}
|
.el-row {
|
text-align: left;
|
}
|
.selectValues {
|
width: 420px;
|
}
|
.selectTypeValue {
|
width: 150px;
|
}
|
.el-card {
|
padding: 0%;
|
margin-bottom: 0%;
|
/* 84 = navbar + tags-view = 50 +34 */
|
max-height: calc(100vh - 104px);
|
}
|
thead .el-table-column--selection .cell {
|
display: none;
|
}
|
.el-scrollbar{
|
.el-scrollbar__bar.is-vertical {
|
opacity: 1;/* 改为0不显示滚动条*/
|
width:5;
|
}
|
}
|
</style>
|
