feat(report): 新增设备报表相关组件及功能
- 新增设备故障分析报表页面，支持按设备编码、故障类型和时间范围查询 - 实现故障次数Top10柱状图展示及数据表格展示 - 新增设备OEE分析报表页面，支持按设备编码和时间范围查询 - 实现设备OEE对比柱状图及相关数据表展示，支持百分比格式化显示 - 新增维修工时统计报表页面，支持按执行人和时间范围查询 - 实现维修工时Top10柱状图及数据表格展示，展示工单数、合计工时和平均工时 - 各报表均实现查询、重置功能及加载状态显示 - 使用echarts实现柱状图可视化展示 - 统一样式及布局，保障用户体验一致性master
parent
fc5a25ad71
commit
e5f64dc5a9
@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
|
||||||
|
<el-form-item label="设备编码">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.deviceCode"
|
||||||
|
placeholder="请输入设备编码"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="故障类型">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.faultType"
|
||||||
|
placeholder="请输入故障类型"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间范围">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="daterangeBeginTime"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
style="width: 240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<div class="charts-container">
|
||||||
|
<el-card class="chart-card">
|
||||||
|
<div slot="header" class="chart-title">设备故障次数 Top10</div>
|
||||||
|
<div ref="barChart" class="chart-content"></div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="reportList" style="margin-top: 10px">
|
||||||
|
<el-table-column label="设备编码" align="center" prop="DEVICE_CODE" width="140" />
|
||||||
|
<el-table-column label="设备名称" align="center" prop="DEVICE_NAME" show-overflow-tooltip />
|
||||||
|
<el-table-column label="故障类型" align="center" prop="FAULT_TYPE" width="120" />
|
||||||
|
<el-table-column label="故障次数" align="center" prop="FAULT_COUNT" width="100" />
|
||||||
|
<el-table-column label="故障时长(分钟)" align="center" prop="FAULT_DURATION_MINUTES" width="140" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { deviceFaultAnalysisList } from '@/api/report/reportAPI'
|
||||||
|
import { parseTime } from '@/utils/ruoyi'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DeviceFaultAnalysisReport',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
showSearch: true,
|
||||||
|
reportList: [],
|
||||||
|
daterangeBeginTime: [],
|
||||||
|
queryParams: {
|
||||||
|
deviceCode: null,
|
||||||
|
faultType: null,
|
||||||
|
beginTime: null,
|
||||||
|
endTime: null
|
||||||
|
},
|
||||||
|
barChart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const today = parseTime(new Date(), '{y}-{m}-{d}')
|
||||||
|
this.daterangeBeginTime = [today, today]
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.barChart = echarts.init(this.$refs.barChart)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询报表数据 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
if (this.daterangeBeginTime && this.daterangeBeginTime.length === 2) {
|
||||||
|
this.queryParams.beginTime = this.daterangeBeginTime[0]
|
||||||
|
this.queryParams.endTime = this.daterangeBeginTime[1]
|
||||||
|
} else {
|
||||||
|
this.queryParams.beginTime = null
|
||||||
|
this.queryParams.endTime = null
|
||||||
|
}
|
||||||
|
deviceFaultAnalysisList(this.queryParams).then(res => {
|
||||||
|
this.reportList = res.data || []
|
||||||
|
this.initBarChart()
|
||||||
|
this.loading = false
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 搜索按钮 */
|
||||||
|
handleQuery() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
/** 重置按钮 */
|
||||||
|
resetQuery() {
|
||||||
|
this.queryParams.deviceCode = null
|
||||||
|
this.queryParams.faultType = null
|
||||||
|
const today = parseTime(new Date(), '{y}-{m}-{d}')
|
||||||
|
this.daterangeBeginTime = [today, today]
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
/** 初始化柱状图 */
|
||||||
|
initBarChart() {
|
||||||
|
if (!this.barChart) return
|
||||||
|
const topList = (this.reportList || []).slice(0, 10)
|
||||||
|
const xData = topList.map(item => item.DEVICE_NAME || item.DEVICE_CODE)
|
||||||
|
const yData = topList.map(item => item.FAULT_COUNT || 0)
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xData,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 30
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '故障次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: yData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.barChart.setOption(option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.charts-container {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.chart-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.chart-content {
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
.chart-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue