|
|
|
|
@ -1,14 +1,16 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- <transition appear enter-active-class="animated fadeIn"> -->
|
|
|
|
|
<q-card>
|
|
|
|
|
<q-card-section class="q-pa-sm" :style="{ height: '100%' }">
|
|
|
|
|
<div class="row q-col-gutter-sm">
|
|
|
|
|
<q-card style="height:100%;width: 100%;">
|
|
|
|
|
<q-card-section class="q-pa-sm" style="height:100%;width: 100%;">
|
|
|
|
|
<div class="row q-col-gutter-sm" style="height:100%;width: 100%;">
|
|
|
|
|
<div :class="Platform.is.android ? 'col-xl-4' : 'col-xl-4 col-lg-4 col-sm-4'">
|
|
|
|
|
<!-- <div class="row"> -->
|
|
|
|
|
<!-- 设备运行状态总览 -->
|
|
|
|
|
<!-- <div class="col-xl-12 col-lg-12 col-sm-12"> -->
|
|
|
|
|
<!-- (Number(Screen.height) - 65)) + 'px' -->
|
|
|
|
|
<div ref="equipmentStateViewRef" :style="{
|
|
|
|
|
width: (Platform.is.android ? '620px' : '100%'), height: (Platform.is.android ? screenStore.CurrentAppFullscreen == true ? '980' : '930' : (Number(Screen.height) - 65)) + 'px'
|
|
|
|
|
width: (Platform.is.android ? '620px' : '100%'),
|
|
|
|
|
height: (Platform.is.android ? (screenStore.CurrentAppFullscreen == true ? '980' : '930') : (Number(Screen.height) + 100)) + 'px'
|
|
|
|
|
}">
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
@ -17,35 +19,46 @@
|
|
|
|
|
<div class="col-xl-8 col-lg-8 col-sm-8">
|
|
|
|
|
<div class="row q-col-gutter-sm">
|
|
|
|
|
<!-- 月度运行数据 -->
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
|
|
|
|
|
<div ref="equipmentRecordStateMonthTotalRef" :style="{
|
|
|
|
|
width: (Platform.is.android ? '1250px' : '100%'), height: (Platform.is.android ? '420' : (Number(Screen.height) / 2 - 50)) + 'px'
|
|
|
|
|
width: (Platform.is.android ? '625px' : '100%'),
|
|
|
|
|
height: (Platform.is.android ? '420' : (Number(Screen.height) / 2 + 50)) + 'px'
|
|
|
|
|
}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 月度OEE统计 -->
|
|
|
|
|
<div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
|
|
|
|
|
<div ref="equipmentRecordOEEMonthTotalRef" :style="{
|
|
|
|
|
width: (Platform.is.android ? '625px' : '100%'),
|
|
|
|
|
height: (Platform.is.android ? '420' : (Number(Screen.height) / 2 + 50)) + 'px'
|
|
|
|
|
}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
|
|
|
|
|
<div ref="equipmentRecordFurnaceMonthTotalRef"
|
|
|
|
|
:style="{ width: (Platform.is.android ? '600px' : '100%'), height: (Platform.is.android ? '470' : (Number(Screen.height) / 2 - 10)) + 'px' }">
|
|
|
|
|
<div ref="equipmentRecordFurnaceMonthTotalRef" :style="{
|
|
|
|
|
width: (Platform.is.android ? '600px' : '100%'),
|
|
|
|
|
height: (Platform.is.android ? '470' : (Number(Screen.height) / 2 + 50)) + 'px'
|
|
|
|
|
}">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
|
|
|
|
|
<!-- <div ref="deviceRef3" style="width: 100%; height: 400px"></div> -->
|
|
|
|
|
<div class="row q-col-gutter-sm">
|
|
|
|
|
<!--<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div :style="'width: 100%; height:' + (Number(Screen.height) / 2 - 100) + 'px'">
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div class="text-weight-bold q-pb-md" style="font-size:18px;color: #464646;">设备正常运行率
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12" align="center">
|
|
|
|
|
<q-circular-progress show-value font-size="50px" :value="66" size="270px"
|
|
|
|
|
:thickness="0.34" color="blue" track-color="grey-3"
|
|
|
|
|
class="q-ml-md q-mr-md q-mb-md q-mt-xs text-weight-bold">
|
|
|
|
|
66%
|
|
|
|
|
</q-circular-progress>
|
|
|
|
|
<!-- <div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div :style="'width: 100%; height:' + (Number(Screen.height) / 2 - 100) + 'px'">
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div class="text-weight-bold q-pb-md" style="font-size:18px;color: #464646;">
|
|
|
|
|
设备正常运行率
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12" align="center">
|
|
|
|
|
<q-circular-progress show-value font-size="50px" :value="66" size="270px"
|
|
|
|
|
:thickness="0.34" color="blue" track-color="grey-3"
|
|
|
|
|
class="q-ml-md q-mr-md q-mb-md q-mt-xs text-weight-bold">
|
|
|
|
|
66%
|
|
|
|
|
</q-circular-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<div class="text-weight-bold" style="font-size:18px;color: #464646;">当前报警发生设备
|
|
|
|
|
@ -126,15 +139,18 @@ const equipmentStateViewRef = ref() // 使用ref创建虚拟DOM引用，使用
|
|
|
|
|
const equipmentRecordFurnaceMonthTotalRef = ref() // 月度开炉次数统计
|
|
|
|
|
// const deviceRef3 = ref() // 利用率 废弃
|
|
|
|
|
const equipmentRecordStateMonthTotalRef = ref() // 月度时长统计
|
|
|
|
|
const equipmentRecordOEEMonthTotalRef = ref(); // 月度OEE统计
|
|
|
|
|
|
|
|
|
|
// 黄 红 绿
|
|
|
|
|
const color = ref(['#ffcb05', '#ff2e55', '#58a65b'])
|
|
|
|
|
let equipmentStateViewEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
|
|
|
|
|
let equipmentRecordStateMonthTotalEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
|
|
|
|
|
let equipmentRecordOEEMonthTotalEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
|
|
|
|
|
let equipmentRecordFurnaceMonthTotalEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
|
|
|
|
|
|
|
|
|
|
let equipmentStateViewTimer: NodeJS.Timer | null = null; // 设备运行状态总览
|
|
|
|
|
let equipmentRecordStateMonthTotalTimer: NodeJS.Timer | null = null; // 月度时长统计
|
|
|
|
|
let equipmentRecordOEEMonthTotalTimer: NodeJS.Timer | null = null; // 月度OEE统计
|
|
|
|
|
let equipmentRecordFurnaceMonthTotalTimer: NodeJS.Timer | null = null; // 月度开炉次数统计
|
|
|
|
|
let getEquipmentAlarmListTimer: NodeJS.Timer | null = null; // 当前报警发生设备
|
|
|
|
|
|
|
|
|
|
@ -155,6 +171,13 @@ onMounted(() => {
|
|
|
|
|
EquipmentRecordStateMonthTotal();
|
|
|
|
|
}, 10000);
|
|
|
|
|
|
|
|
|
|
// 月度OEE统计
|
|
|
|
|
equipmentRecordOEEMonthTotalEcharts = echarts.init(equipmentRecordOEEMonthTotalRef.value);// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
EquipmentRecordOEEMonthTotal();
|
|
|
|
|
equipmentRecordOEEMonthTotalTimer = setInterval(() => {
|
|
|
|
|
EquipmentRecordOEEMonthTotal();
|
|
|
|
|
}, 10000);
|
|
|
|
|
|
|
|
|
|
// 月度开炉次数统计
|
|
|
|
|
equipmentRecordFurnaceMonthTotalEcharts = echarts.init(equipmentRecordFurnaceMonthTotalRef.value); // 基于准备好的dom，初始化echarts实例
|
|
|
|
|
EquipmentRecordFurnaceMonthTotal();
|
|
|
|
|
@ -173,6 +196,7 @@ onBeforeUnmount(() => {
|
|
|
|
|
// 清理定时器要处理 timer 的类型
|
|
|
|
|
clearInterval(Number(equipmentStateViewTimer))
|
|
|
|
|
clearInterval(Number(equipmentRecordStateMonthTotalTimer))
|
|
|
|
|
clearInterval(Number(equipmentRecordOEEMonthTotalTimer)) // 月度OEE统计
|
|
|
|
|
clearInterval(Number(equipmentRecordFurnaceMonthTotalTimer))
|
|
|
|
|
clearInterval(Number(getEquipmentAlarmListTimer))
|
|
|
|
|
})
|
|
|
|
|
@ -462,6 +486,7 @@ const EquipmentRecordStateMonthTotal = () => {
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: 1,
|
|
|
|
|
right: '2%',
|
|
|
|
|
data: ['运行时间', '待机时间', '报警时间']
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
@ -563,6 +588,155 @@ const EquipmentRecordStateMonthTotal = () => {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 月度OEE统计
|
|
|
|
|
const EquipmentRecordOEEMonthTotal = () => {
|
|
|
|
|
let oeeData: any = []; // 运行
|
|
|
|
|
let month: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
|
|
|
|
|
|
|
|
// 获取设备记录OEE月度统计
|
|
|
|
|
equipmentRecordApi.getEquipmentRecordOEEMonthTotal().then((res: any) => {
|
|
|
|
|
month.forEach((m: any) => {
|
|
|
|
|
res.forEach((item: any) => {
|
|
|
|
|
if (item.totalMonth == m) {
|
|
|
|
|
oeeData.push(item.oee);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
oeeData.push(0);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
|
let equipmentRecordOEEMonthTotalOption = {
|
|
|
|
|
title: {
|
|
|
|
|
text: 'OEE月度统计'
|
|
|
|
|
},
|
|
|
|
|
// 网格
|
|
|
|
|
grid: {
|
|
|
|
|
x: 45,
|
|
|
|
|
// y: 50,
|
|
|
|
|
x2: 5,
|
|
|
|
|
y2: 40,
|
|
|
|
|
// width: {totalWidth} - x - x2,
|
|
|
|
|
// height: {totalHeight} - y - y2,
|
|
|
|
|
// backgroundColor: 'rgba(0,0,0,0)',
|
|
|
|
|
// borderWidth: 1,
|
|
|
|
|
// borderColor: '#ccc'
|
|
|
|
|
},
|
|
|
|
|
color: ['#176bbf'],
|
|
|
|
|
tooltip: {
|
|
|
|
|
enable: true,
|
|
|
|
|
show: true,
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
// // type: 'cross',
|
|
|
|
|
// crossStyle: {
|
|
|
|
|
// color: '#999'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// formatter: function (params: any) {
|
|
|
|
|
// debugger
|
|
|
|
|
// let name = params.name // 名称
|
|
|
|
|
// let percent = params.percent // 百分比
|
|
|
|
|
// let value = params.value[params.encode.value[0]] // 当前值
|
|
|
|
|
// return echarts.format.addCommas(`${name}: ${value} 台 ${percent}%`); // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
feature: {
|
|
|
|
|
dataView: { show: false, readOnly: false },
|
|
|
|
|
magicType: { show: false, type: ['line', 'bar'] },
|
|
|
|
|
restore: { show: false },
|
|
|
|
|
saveAsImage: { show: false }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: 1,
|
|
|
|
|
right: '2%',
|
|
|
|
|
data: ['OEE数据']
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
// type: 'shadow'
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: 'OEE data',
|
|
|
|
|
// position: 'left',
|
|
|
|
|
alignTicks: true,
|
|
|
|
|
// min: 0,
|
|
|
|
|
// max: 50,
|
|
|
|
|
// interval: 5,
|
|
|
|
|
boundaryGap: ['0%', '10%'],
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#6e7079'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value}'
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true //显示分隔线
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: 'OEE数据',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: oeeData,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
label: {
|
|
|
|
|
color: '#176bbf',
|
|
|
|
|
position: 'top', //在上方显示
|
|
|
|
|
show: true // 在折线拐点上显示数据
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
areaStyle: { // 区域填充样式
|
|
|
|
|
color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#176bbf', // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#5398dd' // 100% 处的颜色
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
global: false, // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
xAxisIndex: 0,
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value: any) {
|
|
|
|
|
return value + ' %';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
equipmentRecordOEEMonthTotalEcharts.setOption(equipmentRecordOEEMonthTotalOption);
|
|
|
|
|
categoryEcharts(equipmentRecordOEEMonthTotalEcharts, equipmentRecordOEEMonthTotalOption);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 月度开炉次数统计
|
|
|
|
|
const EquipmentRecordFurnaceMonthTotal = () => {
|
|
|
|
|
let Balzers: any = [];
|
|
|
|
|
|
liuhr
2 years ago