385 lines
11 KiB
Vue
385 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div class="lc-container">
|
|||
|
|
<div class="left-panel box-bg-color">
|
|||
|
|
<div class="title">{{ tLang('message', 'OEE综合设备效率') }}</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="oee-chart">
|
|||
|
|
<v-chart :option="oeeOption" theme="dark" style="width: 100%;height: 100%;" />
|
|||
|
|
</div>
|
|||
|
|
<div class="progress">
|
|||
|
|
<div class="progress-item">
|
|||
|
|
<div class="progress-title">
|
|||
|
|
<span>{{ tLang('message', '可用率') }}</span>
|
|||
|
|
<span class="progress-value">{{ 70 }}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<el-progress :percentage="70" status="warning" :stroke-width="16" :show-text="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-desc">
|
|||
|
|
<span>计划停机：{{ '45分钟' }}</span>
|
|||
|
|
<span>故障停机：{{ '1小时' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-item">
|
|||
|
|
<div class="progress-title">
|
|||
|
|
<span>{{ tLang('message', '性能率') }}</span>
|
|||
|
|
<span class="progress-value">{{ 70 }}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<el-progress :percentage="70" status="success" :stroke-width="16" :show-text="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-desc">
|
|||
|
|
<span>计划停机：{{ '45分钟' }}</span>
|
|||
|
|
<span>故障停机：{{ '1小时' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right-panel box-bg-color">
|
|||
|
|
<div class="right-title">
|
|||
|
|
<span class="text1">{{ tLang('message', '实时报警') }}<el-badge :show-zero="false" :value="1"
|
|||
|
|
class="item"><el-icon :size="20">
|
|||
|
|
<BellFilled />
|
|||
|
|
</el-icon></el-badge></span>
|
|||
|
|
<span class="text2">{{ tLang('message', '全部清除') }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="right-content">
|
|||
|
|
<div class="card-item">
|
|||
|
|
<div class="message-mine">
|
|||
|
|
<div class="message-title">主轴旋转异常，请检查机械部件</div>
|
|||
|
|
<div class="message-desc">
|
|||
|
|
<span>{{ tLang('message', '设备ID') }}: </span>
|
|||
|
|
<span>SWM5015</span>
|
|||
|
|
<span>2025-04-16 13:20:18</span>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="option">
|
|||
|
|
<el-button color="#DC2626" size="small">{{ tLang('message', '处理') }}</el-button>
|
|||
|
|
<el-button color="#e7e7e7" size="small">{{ tLang('message', '忽略') }}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="error-chart">
|
|||
|
|
|
|||
|
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
|
|||
|
|
const { proxy } = getCurrentInstance();
|
|||
|
|
let options = computed(() => {
|
|||
|
|
return {
|
|||
|
|
title: {
|
|||
|
|
text: proxy.tLang('message', '异常停机分类统计'),
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '15%',
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'left'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['40%', '70%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
padAngle: 5,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 10
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'center'
|
|||
|
|
},
|
|||
|
|
// emphasis: {
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// fontSize: 40,
|
|||
|
|
// fontWeight: 'bold'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: 1048, name: proxy.tLang('home', '维修') },
|
|||
|
|
{ value: 735, name: proxy.tLang('pms', '保养') },
|
|||
|
|
{ value: 580, name: proxy.tLang('message', '故障') },
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
let oeeOption = computed(() => {
|
|||
|
|
return {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'gauge',
|
|||
|
|
startAngle: 180,
|
|||
|
|
endAngle: 0,
|
|||
|
|
center: ['50%', '75%'],
|
|||
|
|
radius: '90%',
|
|||
|
|
min: 0,
|
|||
|
|
max: 1,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2,
|
|||
|
|
color: [
|
|||
|
|
[0.25, '#FF6E76'],
|
|||
|
|
[0.5, '#FDDD60'],
|
|||
|
|
[0.75, '#58D9F9'],
|
|||
|
|
[1, '#7CFFB2']
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
|||
|
|
length: '12%',
|
|||
|
|
width: 10,
|
|||
|
|
offsetCenter: [0, '-60%'],
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'auto'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
length: 5,
|
|||
|
|
distance: 3,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'auto',
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
length: 10,
|
|||
|
|
distance: 3,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#f7f7f7',
|
|||
|
|
distance: 3,
|
|||
|
|
fontSize: 12,
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return value * 100;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
offsetCenter: [0, '-10%'],
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
offsetCenter: [0, '-35%'],
|
|||
|
|
valueAnimation: true,
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return Math.round(value * 100) + '%';
|
|||
|
|
},
|
|||
|
|
color: 'inherit'
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: 0.7,
|
|||
|
|
name: 'OEE'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.box-bg-color {
|
|||
|
|
background-color: #192124;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
padding: 5px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 20px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #cfcfcf;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 20px);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lc-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.left-panel {
|
|||
|
|
width: 49%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.oee-chart {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.progress-item {
|
|||
|
|
height: 80px;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 5px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #1F2937;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
.progress-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #999898;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-desc {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #999898;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-panel {
|
|||
|
|
width: 49%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.right-title {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
margin: 0 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text1 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text2 {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #cfcfcf;
|
|||
|
|
margin-right: 25px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.card-item {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-left: #DC2626 4px solid;
|
|||
|
|
background-color: #2D2023;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.message-mine {
|
|||
|
|
width: 60%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
.message-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-desc {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #999898;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
margin-right: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option {
|
|||
|
|
width: 40%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-chart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 50px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|