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> |