<template>
|
<div class="page-container">
|
<div class="content-container">
|
<div style="width: 18%" class="left-col">
|
<!--返回上一级-->
|
<div class="back-nav" @click="$emit('backToLastSignage','WorkshopSection')" v-if="userType!==1">
|
<dv-decoration-7>上一级</dv-decoration-7>
|
</div>
|
|
<!--当前设备编号-->
|
<dv-border-box-12 style="height: 80px;padding: 0 10px 0">
|
<div class="equipmentId-container">
|
{{equipmentId}}
|
</div>
|
</dv-border-box-12>
|
|
<!--设备列表-->
|
<div style="height: 721px;overflow: auto;margin-top: 20px;">
|
<table>
|
<tr>
|
<th>设备编号</th>
|
<th>型号</th>
|
</tr>
|
<tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
|
<td>{{item.equipmentId}}</td>
|
<td>{{item.equipmentType}}</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
|
<div style="width: 81.8%" class="right-col">
|
<!--右上设备各项信息区域-->
|
<dv-border-box-12 style="height: 50%" class="right-top-row">
|
<!--各项信息展示区域-->
|
<div style="display: flex;height: 70%">
|
<dv-border-box-11 title="设备信息" class="info-container" style="flex:5;">
|
<a-descriptions :column="3">
|
<a-descriptions-item label="统一编号">
|
{{equipmentInfo.equipmentId}}
|
</a-descriptions-item>
|
<a-descriptions-item label="ABC标识">
|
{{equipmentInfo.ABCSymbol}}
|
</a-descriptions-item>
|
<a-descriptions-item label="设备名称">
|
{{equipmentInfo.equipmentName}}
|
</a-descriptions-item>
|
<a-descriptions-item label="型号">
|
{{equipmentInfo.equipmentType}}
|
</a-descriptions-item>
|
<a-descriptions-item label="设备分类">
|
{{equipmentInfo.equipmentCategory}}
|
</a-descriptions-item>
|
<a-descriptions-item label="工区">
|
{{equipmentInfo.workArea}}
|
</a-descriptions-item>
|
<a-descriptions-item label="操作系统">
|
{{equipmentInfo.driveType}}
|
</a-descriptions-item>
|
<a-descriptions-item label="规格">
|
{{equipmentInfo.standard}}
|
</a-descriptions-item>
|
<a-descriptions-item label="维护部门">
|
{{equipmentInfo.depart}}
|
</a-descriptions-item>
|
<a-descriptions-item label="工段">
|
{{equipmentInfo.workshopSection}}
|
</a-descriptions-item>
|
<a-descriptions-item label="操作工">
|
{{equipmentInfo.operator}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</dv-border-box-11>
|
|
<dv-border-box-11 title="操作证信息" class="info-container" style="flex:2;">
|
<a-descriptions :column="1">
|
<a-descriptions-item label="操作证编号">
|
{{equipmentInfo.equipmentId}}
|
</a-descriptions-item>
|
<a-descriptions-item label="当前周期分数">
|
{{equipmentInfo.ABCSymbol}}
|
</a-descriptions-item>
|
<a-descriptions-item label="发证日期">
|
{{equipmentInfo.equipmentName}}
|
</a-descriptions-item>
|
<a-descriptions-item label="周期截止日期">
|
{{equipmentInfo.equipmentType}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</dv-border-box-11>
|
|
<dv-border-box-11 title="维护信息" class="info-container" style="flex:2;">
|
<a-descriptions :column="1">
|
<a-descriptions-item label="下次三保日期">
|
{{equipmentInfo.equipmentId}}
|
</a-descriptions-item>
|
<a-descriptions-item label="下次二保日期">
|
{{equipmentInfo.ABCSymbol}}
|
</a-descriptions-item>
|
<a-descriptions-item label="技术状态">
|
{{equipmentInfo.equipmentName}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</dv-border-box-11>
|
</div>
|
|
<!--功能按钮区域-->
|
<div style="display: flex;height: 30%;align-items: center;padding: 0 20px;color: #eee;">
|
<div style="display: flex;justify-content:space-evenly;flex: 1">
|
<div style="width: 45%;" class="info-card-container">
|
<div class="info-card-title">本月报修数量</div>
|
<div class="info-card-value" style="color: #EAC910">20</div>
|
</div>
|
|
<div style="width: 45%;" class="info-card-container">
|
<div class="info-card-title">设备状态（维修中等）</div>
|
<div class="info-card-value">维修中</div>
|
</div>
|
</div>
|
|
<div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
|
<dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">备件信息</dv-decoration-11>
|
<dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">保养计划</dv-decoration-11>
|
<dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">报修</dv-decoration-11>
|
<dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">设备班次</dv-decoration-11>
|
</div>
|
</div>
|
</dv-border-box-12>
|
|
<!--右下各项数据图表区域-->
|
<dv-border-box-12 style="height: 50%" class="right-bottom-row">
|
<div style="display: flex;justify-content:space-evenly;height: 100%">
|
<div style="display: flex;flex-wrap: wrap;width: 30%;height: 100%">
|
<div id="gauge_chart1" class="gauge-chart"></div>
|
<div id="gauge_chart2" class="gauge-chart"></div>
|
<div id="gauge_chart3" class="gauge-chart"></div>
|
<div id="gauge_chart4" class="gauge-chart"></div>
|
</div>
|
<div id="line_chart" style="width:40%;height: 100%;"></div>
|
<div style="width: 25%;height:100%;display: flex;align-items: center">
|
<a-descriptions :column="2">
|
<a-descriptions-item label="运行模式">
|
{{equipmentInfo.equipmentId}}
|
</a-descriptions-item>
|
<a-descriptions-item label="程序号">
|
{{equipmentInfo.ABCSymbol}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴转速">
|
{{equipmentInfo.equipmentName}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴负荷">
|
{{equipmentInfo.equipmentType}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴转速">
|
{{equipmentInfo.equipmentCategory}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴倍率">
|
{{equipmentInfo.workArea}}
|
</a-descriptions-item>
|
<a-descriptions-item label="进给倍率">
|
{{equipmentInfo.driveType}}
|
</a-descriptions-item>
|
<a-descriptions-item label="报警信息">
|
{{equipmentInfo.standard}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import moment from 'moment'
|
|
export default {
|
name: 'EquipmentSignage',
|
props: {
|
productionCode: {
|
type: String,
|
default: ''
|
},
|
userType: {
|
type: Number
|
}
|
},
|
data() {
|
return {
|
equipmentList: [
|
{
|
equipmentId: '2140223',
|
equipmentType: 'CV4160'
|
},
|
{
|
equipmentId: '2140224',
|
equipmentType: 'CV4161'
|
},
|
{
|
equipmentId: '2140225',
|
equipmentType: 'CV4162'
|
},
|
{
|
equipmentId: '2140226',
|
equipmentType: 'CV4163'
|
},
|
{
|
equipmentId: '2140227',
|
equipmentType: 'CV4164'
|
},
|
{
|
equipmentId: '2140227',
|
equipmentType: 'CV4165'
|
},
|
{
|
equipmentId: '2140228',
|
equipmentType: 'CV4166'
|
},
|
{
|
equipmentId: '2140229',
|
equipmentType: 'CV4167'
|
},
|
{
|
equipmentId: '2140230',
|
equipmentType: 'CV4168'
|
},
|
{
|
equipmentId: '2140231',
|
equipmentType: 'CV4169'
|
},
|
{
|
equipmentId: '2140232',
|
equipmentType: 'CV4170'
|
},
|
{
|
equipmentId: '2140233',
|
equipmentType: 'CV4171'
|
}
|
],
|
equipmentInfo: {
|
equipmentId: '2511563154',
|
ABCSymbol: '3312321421',
|
equipmentName: '机械中心',
|
equipmentType: 'CV4160',
|
equipmentCategory: '轧机',
|
workArea: 'A分区',
|
driveType: 'JSOWJDF',
|
standard: '无',
|
depart: '轧机中心',
|
workshopSection: '407一工段',
|
operator: 'admin'
|
},
|
lineChart: '',
|
lineChartData: [],
|
gaugeChart1: '',
|
gaugeChart2: '',
|
gaugeChart3: '',
|
gaugeChart4: '',
|
gaugeChartData1: [],
|
gaugeChartData2: [],
|
gaugeChartData3: [],
|
gaugeChartData4: [],
|
equipmentId: '2140223'
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.drawCharts()
|
this.getChartDataByApi()
|
},
|
activated() {
|
this.handleWindowResize()
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWindowResize)
|
},
|
methods: {
|
selectEquipment(record) {
|
this.equipmentId = record.equipmentId
|
},
|
|
getChartDataByApi() {
|
|
},
|
|
/* 绘制图表汇总方法 */
|
drawCharts() {
|
this.drawGaugeChart()
|
this.drawLineChart()
|
},
|
|
/* 绘制仪表盘图表 */
|
drawGaugeChart() {
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '', // 主标题文本
|
x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 10, // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#00A8AC',
|
fontWeight: 'bold'
|
}
|
},
|
tooltip: {
|
formatter: '{a} <br/>{b} : {c}%'
|
},
|
grid: {
|
left: '1%',
|
top: '1%',
|
right: '10%',
|
bottom: '1%'
|
},
|
series: [
|
{
|
name: '利用率',
|
type: 'gauge',
|
radius: '80%',
|
center: ['50%', '60%'], // 默认全局居中
|
pointer: {
|
width: 6,
|
length: '50%',
|
itemStyle: {
|
color: 'inherit'
|
}
|
},
|
splitLine: {
|
show: true,
|
length: 10,
|
lineStyle: {
|
color: '#fff',
|
width: 2
|
}
|
},
|
axisTick: {
|
length: 5,
|
lineStyle: {
|
color: '#fff',
|
width: 1
|
}
|
},
|
axisLabel: {
|
show: false,
|
fontSize: 18,
|
formatter: function(value) {
|
return value + '%'
|
}
|
},
|
axisLine: {
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [ //表盘颜色
|
[0.3, '#E7781E'],//0-30%处的颜色
|
[0.7, '#C5C039'],//30%-60%处的颜色
|
[1, '#21C77F']//90%-100%处的颜色
|
],
|
width: 15//表盘宽度
|
}
|
},
|
detail: {
|
formatter: '{score|{value}%}',
|
offsetCenter: [0, '50%'],
|
height: 30,
|
rich: {
|
score: {
|
fontSize: 20
|
}
|
}
|
},
|
data: [{ value: 100 }]
|
}
|
]
|
}
|
this.drawGaugeChart1(option)
|
this.drawGaugeChart2(option)
|
this.drawGaugeChart3(option)
|
this.drawGaugeChart4(option)
|
},
|
|
/* 绘制利用率仪表盘图表 */
|
drawGaugeChart1(opt) {
|
this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
|
const option = Object.assign({}, opt)
|
option.title.text = '利用率'
|
this.gaugeChart1.setOption(option, true)
|
},
|
|
/* 绘制开动率仪表盘图表 */
|
drawGaugeChart2(opt) {
|
this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
|
const option = Object.assign({}, opt)
|
option.title.text = '开动率'
|
this.gaugeChart2.setOption(option, true)
|
},
|
|
/* 绘制开机率仪表盘图表 */
|
drawGaugeChart3(opt) {
|
this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
|
const option = Object.assign({}, opt)
|
option.title.text = '开机率'
|
this.gaugeChart3.setOption(option, true)
|
},
|
|
/* 绘制OEE仪表盘图表 */
|
drawGaugeChart4(opt) {
|
this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
|
const option = Object.assign({}, opt)
|
option.title.text = 'OEE'
|
this.gaugeChart4.setOption(option, true)
|
},
|
|
/* 绘制折线图 */
|
drawLineChart() {
|
this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
|
const newData = {
|
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
yAxis: [
|
{
|
name: '利用率',
|
value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
|
},
|
{
|
name: '开动率',
|
value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
|
},
|
{
|
name: 'OEE',
|
value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
|
}
|
],
|
yAxisName: '整年度利用率'
|
}
|
let legendData = []
|
let seriesData = []
|
let colorArr = ['#09F39E', '#A5F10D', '#09B3F6']
|
legendData = newData.yAxis.map((item) => item.name)
|
seriesData = newData.yAxis.map((item1, index1) => {
|
return {
|
name: item1.name,
|
type: 'line',
|
symbol: 'circle',
|
symbolSize: 8,
|
itemStyle: {
|
color: colorArr[index1]
|
},
|
lineStyle: {
|
width: 2
|
},
|
yAxisIndex: 1,
|
data: item1.value // 折线图的数据
|
}
|
})
|
const option = {
|
grid: {
|
containLabel: true,
|
bottom: '3%',
|
top: '15%',
|
left: '2%',
|
right: '1%'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
top: 20,
|
right: 'center',
|
data: legendData,
|
itemGap: 10,
|
textStyle: {
|
fontSize: 14,
|
color: '#ccc'
|
}
|
},
|
xAxis: {
|
triggerEvent: true,
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 12,
|
color: '#50729A'
|
// rotate: -30,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#50729A'
|
}
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
},
|
yAxis: [
|
{
|
name: newData.yAxisName,
|
nameTextStyle: {
|
color: '#00A8AC',
|
fontSize: 18,
|
padding: [0, 0, 0, 90]
|
},
|
nameGap: 25,
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#50729A'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: '#3E4A82'
|
}
|
}
|
},
|
{
|
type: 'value',
|
position: 'right',
|
splitNumber: 5,
|
axisLabel: {
|
show: true,
|
color: '#50729A'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#50729A'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: '#3E4A82'
|
}
|
}
|
}
|
],
|
series: seriesData
|
}
|
this.lineChart.setOption(option, true)
|
},
|
|
/**
|
* 窗口尺寸变化时触发
|
* 调整图表尺寸以适应分辨率
|
*/
|
handleWindowResize() {
|
if (this.gaugeChart1) this.gaugeChart1.resize()
|
if (this.gaugeChart2) this.gaugeChart2.resize()
|
if (this.gaugeChart3) this.gaugeChart3.resize()
|
if (this.gaugeChart4) this.gaugeChart4.resize()
|
if (this.lineChart) this.lineChart.resize()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-container {
|
.content-container {
|
padding-top: 5px;
|
display: flex;
|
justify-content: space-between;
|
|
.left-col {
|
padding: 0 10px 0;
|
|
.back-nav {
|
width: 100px;
|
height: 30px;
|
color: #eee;
|
position: absolute;
|
top: 15px;
|
left: 15px;
|
cursor: pointer;
|
z-index: 9999
|
}
|
|
.equipmentId-container {
|
height: 100%;
|
color: #eee;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 30px
|
}
|
|
table {
|
color: #eee;
|
width: 100%;
|
border-collapse: collapse;
|
border-spacing: 0;
|
border: 1px dashed;
|
|
tr {
|
height: 60px;
|
text-align: center;
|
font-size: 18px;
|
position: relative;
|
|
th, td {
|
border: 1px dashed;
|
}
|
|
th {
|
font-weight: bold;
|
background-color: #10695D;
|
position: sticky;
|
z-index: 9999;
|
top: 0;
|
}
|
|
td {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
.right-col {
|
|
.right-top-row {
|
.info-container {
|
margin: 5px;
|
padding: 70px 0 0 30px;
|
height: 100%
|
}
|
|
.info-card-container {
|
background-color: #67C23A;
|
padding: 5px;
|
border-radius: 3px;
|
|
.info-card-title {
|
font-weight: bold;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden
|
}
|
|
.info-card-value {
|
text-align: center;
|
font-size: 30px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden
|
}
|
}
|
}
|
|
.right-bottom-row {
|
.gauge-chart {
|
width: 50%;
|
height: 50%;
|
}
|
}
|
}
|
}
|
}
|
|
/deep/ .ant-descriptions {
|
font-size: 16px;
|
}
|
|
/deep/ .ant-descriptions-item {
|
padding-bottom: 25px;
|
white-space: nowrap;
|
overflow: hidden;
|
-ms-text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
}
|
|
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
|
color: #eee;
|
font-size: 16px;
|
}
|
|
|
</style>
|
