<template>
|
<view>
|
<view class="tabs" id="tabs">
|
<view :class="tabs == 0 ? 'on':''" @tap="switchTab(0)">待维修</view>
|
<view :class="tabs == 1 ? 'on':''" @tap="switchTab(1)">已维修</view>
|
<!-- <view :class="tabs == 2 ? 'on':''" @tap="switchTab(2)">全部任务</view> -->
|
</view>
|
|
<!-- 设备维修任务列表列表 -->
|
<view v-show="tabs == 0">
|
<view class="list" v-for="(item,index) in reportBillsDisplay" :key="index">
|
<uni-card :title="item.故障登记单号" :extra="`日期: ${dayjs(item.设备故障日期).format('YYYY-MM-DD')}`"
|
style="margin: 10px;">
|
<view class="card-detail">
|
<view class="detail" v-for="(field, index) in CommonUtils.emptyValueFilter(item, HFieldList)"
|
:key="index">
|
<text>{{field.ColmCols}}：</text>{{item[field.ColmCols]}}
|
</view>
|
</view>
|
</uni-card>
|
</view>
|
<view class="over" v-if="reportBillsDisplay.length == 0">暂无数据</view>
|
</view>
|
<!-- OEE 折线图 -->
|
<view v-show="tabs == 1" class="graph-container" style="padding: 40rpx 0; text-align: center;">
|
<view class="graph"><l-echart ref="chartRef" @finished="initChart()"></l-echart>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getUserInfo
|
} from '../../../utils/auth';
|
import {
|
CommonUtils
|
} from '../../../utils/common';
|
import dayjs from 'dayjs';
|
import * as echarts from 'echarts'
|
export default {
|
// 设备状态 模块
|
name: 'Sc_OEEStatusReport',
|
data() {
|
return {
|
dayjs,
|
CommonUtils,
|
tabs: 0,
|
HEquipID: 0,
|
HEquipNumber: "",
|
reportBillsDisplay: [],
|
reportBills: [], // 待维修
|
HFieldList: [], // 字段列表
|
}
|
},
|
methods: {
|
switchTab(tabIndex) {
|
this.tabs = tabIndex
|
switch (tabIndex) {
|
case 0:
|
this.reportBillsDisplay = this.reportBills;
|
break;
|
// case 1:
|
// this.reportBillsDisplay = this.reportBillsRepaired;
|
// break;
|
// case 2:
|
// this.reportBillsDisplay = this.reportBillsAll;
|
// break;
|
}
|
},
|
async getEquipFileMain(HInterID) {
|
try {
|
let res = await CommonUtils.doRequest2Sync({
|
url: "/Sb_PDA_EquipDotCheckBill/txtHBarCode_KeyDown_ListByHEquipID",
|
data: {
|
HEquipID: HInterID,
|
},
|
})
|
|
|
if (!res) {
|
return
|
}
|
|
let {
|
data,
|
count,
|
Message
|
} = res.data
|
|
if (count == 1) {
|
console.log('data: ', data);
|
// this.hform.HQty = 1
|
this.HEquipID = data[0]["hmainid"]
|
this.HEquipNumber = data[0]["设备编码"]
|
this.enableEdit = false
|
} else {
|
CommonUtils.showTips({
|
title: "温馨提示",
|
message: Message
|
})
|
}
|
|
} catch (err) {
|
CommonUtils.showTips({
|
title: "温馨提示",
|
message: err
|
})
|
}
|
},
|
async getReportList() {
|
try {
|
let res = await CommonUtils.doRequest2Async({
|
url: '/Sc_OEEReport/list',
|
data: {
|
sWhere: `4,'${this.HEquipNumber}','','','','${dayjs(new Date()).subtract(2, 'weeks').format("YYYY-MM-DD")}', '${dayjs(new Date()).format("YYYY-MM-DD")}'`,
|
user: getUserInfo()["Czymc"]
|
}
|
})
|
|
let {
|
count,
|
data,
|
Message,
|
list
|
} = res.data
|
if (count == 1) {
|
// console.log('data: ', data);
|
this.reportBills = data
|
|
let fieldList = CommonUtils.fieldListFilterRole({
|
ExcludeKeys: ['设备编码'],
|
FieldList: list
|
})
|
|
if (fieldList.status == false) {
|
CommonUtils.showTips({
|
title: '温馨提示',
|
message: `获取表单结构失败: ${fieldList.Message}`
|
})
|
}
|
|
this.HFieldList = fieldList.data
|
|
this.switchTab(0)
|
} else {
|
CommonUtils.showTips({
|
title: '温馨提示',
|
message: `获取设备OEE异常: ${Message}`
|
})
|
}
|
|
} catch (err) {
|
CommonUtils.showTips({
|
title: '温馨提示',
|
message: `获取维修单异常: ${err}`
|
})
|
}
|
},
|
async initChart() {
|
let option_ZZT1 = {}
|
var H_X1 = []; //X轴标题
|
var HOEE = []; //设备OEE
|
var PerformanceUtilizationRate = []; //性能稼动率
|
var TimeUtilizationRate = []; //时间稼动率
|
var HTitle = "设备OEE"; //图形标题
|
if (this.reportBills.length > 0) {
|
for (let i = 0; i < this.reportBills.length; i++) {
|
H_X1.push(this.reportBills[i].日期);
|
}
|
// 填充数据
|
for (let i = 0; i < this.reportBills.length; i++) {
|
|
HOEE.push((this.reportBills[i].OEE).replace('%', ''));
|
PerformanceUtilizationRate.push((this.reportBills[i].性能稼动率).replace('%', ''));
|
TimeUtilizationRate.push((this.reportBills[i].时间稼动率).replace('%', ''));
|
}
|
}
|
option_ZZT1 = {
|
title: {
|
text: HTitle,
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: function(params) {
|
let tooltipHtml = params[0].axisValue + '<br>'; // X轴数值
|
|
params.forEach(function(item) {
|
let valueToShow = parseFloat(item.value); // 将字符串转换为数值
|
tooltipHtml += item.seriesName + ': ' + valueToShow.toFixed(3) +
|
'%' + '<br>'; // Y轴数值，并添加百分号
|
});
|
|
return tooltipHtml;
|
}
|
},
|
legend: {
|
data: ['OEE', '性能稼动率', '时间稼动率'],
|
top: 'bottom',
|
left: 'center'
|
},
|
toolbox: {
|
show: false,
|
orient: 'vertical',
|
left: 'right',
|
top: 'center',
|
feature: {
|
mark: {
|
show: true
|
},
|
dataView: {
|
show: true,
|
readOnly: false
|
},
|
magicType: {
|
show: true,
|
type: ['line', 'bar', 'stack']
|
},
|
restore: {
|
show: true
|
},
|
saveAsImage: {
|
show: true
|
}
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
axisTick: {
|
show: false
|
},
|
data: H_X1
|
}],
|
yAxis: [{
|
type: 'value',
|
axisLabel: {
|
formatter: '{value} %'
|
}
|
}],
|
series: [{
|
name: 'OEE',
|
type: 'line',
|
label: {
|
show: true,
|
formatter: '{c}%'
|
},
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#00FF00' // 设置线条颜色为绿色
|
},
|
color: '#00FF00' // 设置线条颜色为绿色
|
}
|
},
|
data: HOEE
|
},
|
{
|
name: '性能稼动率',
|
type: 'line',
|
label: {
|
show: true,
|
formatter: '{c}%'
|
},
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#FF0000' // 设置线条颜色为红色
|
},
|
color: '#FF0000' // 设置线条颜色为红色
|
}
|
},
|
data: PerformanceUtilizationRate
|
},
|
{
|
name: '时间稼动率',
|
type: 'line',
|
label: {
|
show: true,
|
formatter: '{c}%'
|
},
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#00FFFF' // 设置线条颜色为青色
|
},
|
color: '#00FFFF' // 设置线条颜色为青色
|
}
|
},
|
data: TimeUtilizationRate
|
}
|
]
|
};
|
// chart 图表实例不能存在data里
|
const chart = await this.$refs.chartRef.init(echarts);
|
chart.setOption(option_ZZT1)
|
}
|
},
|
async onLoad(e) {
|
if (e.HEquipID) {
|
await this.getEquipFileMain(e.HEquipID)
|
await this.$nextTick()
|
await this.getReportList()
|
await this.initChart()
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import "@/pages/MJGL/style/MJBillStyle.scss"
|
</style>
|
