<template>
|
<div class="page-container">
|
<div class="content-container">
|
<div style="width: 30%" class="left-col">
|
<div class="back-nav" @click="$emit('backToLastSignage','BranchFactory')" v-if="userType>=3">
|
<dv-decoration-7>上一级</dv-decoration-7>
|
</div>
|
|
<dv-border-box-9 style="padding: 15px 15px 0">
|
<div id="tech_condition_chart" style="width:100%;height: 240px;"></div>
|
<div id="warranty_malfunction_chart" style="width:100%;height: 240px;"></div>
|
<div>
|
<div style="display: flex;flex-direction:column;align-items: center">
|
<dv-decoration-11 style="width:45%;height:60px;color: #fff;font-size: 20px;align-self: flex-start">三保计划
|
</dv-decoration-11>
|
<div class="support-plan-container">
|
<div class="support-plan-item" style="background:#5FE0AF">
|
<div>三保本月计划</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
<div class="support-plan-item" style="background:#409EFF">
|
<div>本月完成量</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
<div class="support-plan-item" style="background:#FCAA29">
|
<div>延期</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{maintenanceExtensionNum}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
<div class="support-plan-item" style="background:#F56C6C">
|
<div>超期</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{maintenanceOverdueNum}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
<div class="support-plan-item" style="background:#D6BC52">
|
<div>下月计划</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
<div class="support-plan-item" style="background:#58D9F9">
|
<div>下下月计划</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div style="display: flex;margin-top: 10px;justify-content: space-between;align-items: center;">
|
<dv-decoration-11 style="width:45%;height:60px;font-size: 20px;color: #fff">二保计划</dv-decoration-11>
|
<div
|
style="flex:1;text-align:center;font-size: 25px;color: #9BD890;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
|
2024年4月1日大修
|
</div>
|
</div>
|
</div>
|
</dv-border-box-9>
|
</div>
|
|
<div style="width: 38%" class="middle-col">
|
<dv-border-box-9 style="padding: 15px">
|
<div id="running_state_chart" style="width:100%;height: 400px;"></div>
|
<div id="first7DaysEfficiency_chart" style="width:100%;height: 400px;"></div>
|
</dv-border-box-9>
|
</div>
|
|
<div style="width: 30%" class="right-col">
|
<dv-border-box-9 style="padding: 15px">
|
<a-form layout="inline"
|
@keyup.enter.native="switchToEquipmentSignage">
|
<a-form-item label="设备编号">
|
<a-auto-complete
|
@select="handleSelectChange"
|
placeholder="回车键查询"
|
:allowClear="true"
|
:filter-option="filterOption"
|
:dataSource="first7DaysEfficiencyData.mdcEquipmentList.map(item=>item.equipmentId)"
|
size="large"
|
/>
|
</a-form-item>
|
</a-form>
|
<div style="display: flex;flex-wrap: wrap">
|
<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="bar_chart" style="width:100%;height: 330px;"></div>
|
</dv-border-box-9>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import moment from 'moment'
|
|
export default {
|
name: 'WorkshopSectionSignage',
|
props: {
|
productionCode: {
|
type: String,
|
default: ''
|
},
|
userType: {
|
type: Number
|
}
|
},
|
data() {
|
return {
|
runningStateChart: '',
|
runningStateData: [
|
{ value: '0', name: '关机' },
|
{ value: '0', name: '报警' },
|
{ value: '0', name: '待机' },
|
{ value: '0', name: '运行' }
|
],
|
techConditionChart: '',
|
techConditionData: [
|
{ value: '0', name: '合格' },
|
{ value: '0', name: '禁用' },
|
{ value: '0', name: '限用' }
|
],
|
warrantyMalfunctionChart: '',
|
warrantyMalfunctionData: [
|
{ value: '0', name: '报修' },
|
{ value: '0', name: '停机' },
|
{ value: '0', name: '运行' }
|
],
|
thisMonthMaintenancePlanNum: 0,
|
thisMonthMaintenanceRealNum: 0,
|
maintenanceExtensionNum: 0,
|
maintenanceOverdueNum: 0,
|
nextMonthMaintenancePlanNum: 0,
|
nextNextMonthMaintenancePlanNum: 0,
|
first7DaysEfficiencyChart: '',
|
first7DaysEfficiencyData: {
|
dataList: [],
|
mdcEquipmentList: []
|
},
|
gaugeChart1: '',
|
gaugeChart2: '',
|
gaugeChart3: '',
|
gaugeChart4: '',
|
gaugeChartData: {
|
utilizationRate: 0,
|
startRate: 0,
|
openRate: 0,
|
overallEquipmentEfficiency: 0
|
},
|
barChart: '',
|
barChartData: [],
|
equipmentId: ''
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.getChartDataByApi()
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWindowResize)
|
if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
|
if (this.first7DaysEfficiencyChartCarouselTime) clearInterval(this.first7DaysEfficiencyChartCarouselTime)
|
},
|
methods: {
|
/* 调用接口获取图表数据汇总方法 */
|
getChartDataByApi() {
|
this.getTechConditionDataByApi()
|
this.getWarrantyMalfunctionDataByApi()
|
this.getRunningStateDataByApi()
|
this.getMonthMaintenanceNumByApi()
|
this.getFirst7DaysEfficiencyDataByApi()
|
this.getGaugeChartDataByApi()
|
this.getBarChartDataByApi()
|
},
|
|
/* 调用接口获取技术状态 */
|
getTechConditionDataByApi() {
|
this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
|
this.techConditionChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) {
|
this.techConditionData = [
|
{ value: res.result[0].qualifiedCount, name: '合格' },
|
{ value: res.result[0].disabledCount, name: '禁用' },
|
{ value: res.result[0].limitedUseCount, name: '限用' }
|
]
|
}
|
this.drawTechConditionChart()
|
})
|
},
|
|
/* 调用接口获取设备报修故障 */
|
getWarrantyMalfunctionDataByApi() {
|
this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
|
this.warrantyMalfunctionChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getReportRepairEquipmentListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) {
|
this.warrantyMalfunctionData = [
|
{ value: res.result[0].failurTotalCount, name: '报修' },
|
{ value: res.result[0].stopCount, name: '停机' },
|
{ value: res.result[0].noStopCount, name: '运行' }
|
]
|
}
|
this.drawWarrantyMalfunctionChart()
|
})
|
},
|
|
/* 调用接口获取三保计划 */
|
getMonthMaintenanceNumByApi() {
|
signageApi.getThisMonthMaintenanceListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount
|
})
|
signageApi.getThisMonthMaintenanceFinishListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount
|
})
|
signageApi.getNextMonthMaintenanceList(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount
|
})
|
signageApi.getNextNextMonthMaintenanceListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) this.nextNextMonthMaintenancePlanNum = res.result[0].totalCount
|
})
|
},
|
|
/* 调用接口获取设备运行状态 */
|
getRunningStateDataByApi() {
|
this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
|
this.runningStateChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) this.runningStateData = res.result.list
|
this.drawRunningStateChart(res.result.productionId)
|
})
|
},
|
|
/* 调用接口获取前7天利用率 */
|
getFirst7DaysEfficiencyDataByApi() {
|
this.first7DaysEfficiencyChart = this.$echarts.init(document.getElementById('first7DaysEfficiency_chart'))
|
this.first7DaysEfficiencyChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentDayUtilizationStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) this.first7DaysEfficiencyData = res.result
|
this.drawFirst7DaysEfficiencyDataChart()
|
})
|
},
|
|
/* 调用接口获取设备效率统计 */
|
getGaugeChartDataByApi() {
|
this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
|
this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
|
this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
|
this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
|
this.gaugeChart1.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
this.gaugeChart2.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
this.gaugeChart3.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
this.gaugeChart4.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) this.gaugeChartData = res.result
|
this.drawGaugeChart()
|
})
|
},
|
|
/* 调用接口获取上月OEE */
|
getBarChartDataByApi() {
|
this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
|
this.barChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) {
|
this.barChartData = res.result.map(item => {
|
return {
|
name: item.equipmentId,
|
value: item.overallEquipmentEfficiency
|
}
|
})
|
}
|
this.drawBarChart()
|
})
|
},
|
|
/* 绘制技术状态饼图 */
|
drawTechConditionChart() {
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '技术状态', // 主标题文本
|
x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: this.userType >= 3 ? '25' : 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE'
|
}
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: function(params) {
|
return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
|
'<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
|
}
|
},
|
legend: {
|
top: 'bottom',
|
orient: 'horizontal',
|
right: 0,
|
// bottom: "0",
|
itemWidth: 14,
|
itemHeight: 14,
|
icon: 'roundRect',
|
itemGap: 15,
|
textStyle: {
|
color: 'inherit',
|
fontSize: 14,
|
padding: [0, 0, 0, 0]
|
},
|
data: ['合格', '禁用', '限用']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
// selectedMode: "single",
|
radius: ['40%', '60%'],
|
center: ['50%', '50%'],
|
color: [
|
'#0FC61A',
|
'#0DAF15',
|
'#8B8B8B'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'inherit',
|
// textBorderColor: 'inherit',
|
// textBorderWidth: 1,
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 15,
|
length: 15
|
},
|
data: this.techConditionData
|
}
|
]
|
}
|
this.techConditionChart.setOption(option, true)
|
this.techConditionChart.hideLoading()
|
},
|
|
/* 绘制设备报修故障饼图 */
|
drawWarrantyMalfunctionChart() {
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '设备报修故障', // 主标题文本
|
x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE'
|
}
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: function(params) {
|
return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
|
'<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
|
}
|
},
|
legend: {
|
top: 'bottom',
|
orient: 'horizontal',
|
right: 0,
|
// bottom: "0",
|
itemWidth: 14,
|
itemHeight: 14,
|
icon: 'roundRect',
|
itemGap: 15,
|
textStyle: {
|
color: 'inherit',
|
fontSize: 14,
|
padding: [0, 0, 0, 0]
|
},
|
data: ['报修', '停机', '运行']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
// selectedMode: "single",
|
radius: ['40%', '60%'],
|
center: ['50%', '50%'],
|
color: [
|
'#24F2F5',
|
'#F56436',
|
'#FFFF40'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'inherit',
|
// textBorderColor: 'inherit',
|
// textBorderWidth: 1,
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 15,
|
length: 15
|
},
|
data: this.warrantyMalfunctionData
|
}
|
]
|
}
|
this.warrantyMalfunctionChart.setOption(option, true)
|
this.warrantyMalfunctionChart.hideLoading()
|
},
|
|
/* 绘制设备运行状态玫瑰饼图 */
|
drawRunningStateChart(productionId) {
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '设备状态', // 主标题文本
|
x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE'
|
}
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: function(params) {
|
return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
|
'<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
|
}
|
},
|
legend: {
|
top: 'bottom',
|
orient: 'horizontal',
|
right: 0,
|
// bottom: "0",
|
itemWidth: 14,
|
itemHeight: 14,
|
icon: 'roundRect',
|
itemGap: 15,
|
textStyle: {
|
color: 'inherit',
|
fontSize: 14,
|
padding: [0, 0, 0, 0]
|
},
|
data: ['关机', '报警', '待机', '运行']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
roseType: 'angle', // 玫瑰图
|
// selectedMode: "single",
|
radius: ['35%', '55%'],
|
center: ['50%', '50%'],
|
color: [
|
'#8B8B8B',
|
'#F56436',
|
'#FFFF40',
|
'#0FC61A'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'inherit',
|
// textBorderColor: 'inherit',
|
// textBorderWidth: 1,
|
fontSize: 30,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 20,
|
length: 30
|
},
|
data: this.runningStateData
|
}
|
]
|
}
|
this.runningStateChart.setOption(option, true)
|
this.runningStateChart.hideLoading()
|
|
this.runningStateChart.on('click', params => {
|
this.$router.push({
|
name: 'mdc-base-DeviceBaseInfo',
|
params: { signageData: params.data, productionId }
|
})
|
})
|
},
|
|
/* 绘制前7天利用率柱图 */
|
drawFirst7DaysEfficiencyDataChart() {
|
this.first7DaysEfficiencyData.mdcEquipmentList.forEach(item => {
|
if (!this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId).includes(item)) {
|
const equipmentIdObj = {
|
equipmentId: item.equipmentId,
|
equipmentName: item.equipmentName,
|
openRate: 0,
|
startRate: 0,
|
utilizationRate: 0
|
}
|
this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
|
}
|
})
|
const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
|
const newData = {
|
xAxis: equipmentIdList,
|
yAxis: [
|
{
|
name: '利用率',
|
value: this.first7DaysEfficiencyData.dataList.map(item => item.utilizationRate)
|
},
|
{
|
name: '开动率',
|
value: this.first7DaysEfficiencyData.dataList.map(item => item.startRate)
|
},
|
{
|
name: '开机率',
|
value: this.first7DaysEfficiencyData.dataList.map(item => item.openRate)
|
}
|
],
|
yAxisName: '前7天利用率(%)'
|
}
|
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: 'bar',
|
symbol: 'circle',
|
symbolSize: 8,
|
itemStyle: {
|
color: colorArr[index1]
|
},
|
lineStyle: {
|
width: 2
|
},
|
markPoint: {
|
show: true
|
},
|
yAxisIndex: 1,
|
data: item1.value // 折线图的数据
|
}
|
})
|
const option = {
|
grid: {
|
containLabel: true,
|
bottom: '1%',
|
top: '15%',
|
left: '2%',
|
right: '1%'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: function(params) {
|
let result = ''
|
params.forEach((item, index) => {
|
let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}：${item.value}%`
|
if (index === 0) {
|
result = `<span style="font-weight:bolder;">${item.name}</span>`
|
}
|
result += '<br />' + dom
|
})
|
return result
|
}
|
},
|
legend: {
|
top: 20,
|
right: 'center',
|
data: legendData,
|
itemGap: 10,
|
textStyle: {
|
fontSize: 14,
|
color: '#fff'
|
}
|
},
|
xAxis: {
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 12,
|
color: '#fff'
|
// rotate: -30,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
},
|
yAxis: [
|
{
|
name: newData.yAxisName,
|
nameTextStyle: {
|
color: '#1AD8DE',
|
fontSize: 18,
|
padding: [0, 0, 0, 110]
|
},
|
nameGap: 30,
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
{
|
type: 'value',
|
position: 'right',
|
splitNumber: 5,
|
max: 100,
|
axisLabel: {
|
show: true,
|
color: '#fff'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
],
|
series: seriesData,
|
dataZoom: {
|
show: false,
|
startValue: 0, // 从头开始。
|
endValue: 6 // 一次性展示几个
|
}
|
// toolbox: {
|
// show: true,
|
// feature: {
|
// mark: { show: true },
|
// magicType: { show: true, type: ['line', 'bar'] },
|
// restore: { show: true },
|
// saveAsImage: { show: true, name: '前7天利用率统计图', pixelRatio: 1 }
|
// }
|
// }
|
}
|
this.first7DaysEfficiencyChart.setOption(option, true)
|
this.first7DaysEfficiencyChart.hideLoading()
|
|
this.first7DaysEfficiencyChart.on('click', params => {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: true,
|
productionId: params.name,
|
tierName: this.first7DaysEfficiencyData.dataList.find(item => item.equipmentId === params.name).equipmentName
|
}
|
})
|
})
|
|
|
// 设备列表大于7个时开启自动轮播
|
if (this.first7DaysEfficiencyData.mdcEquipmentList.length <= 7) return
|
this.first7DaysEfficiencyChartCarouselTime = setInterval(() => {
|
newData.xAxis.push(newData.xAxis.shift())
|
newData.yAxis.forEach(item => item.value.push(item.value.shift()))
|
this.$nextTick(() => {
|
this.first7DaysEfficiencyChart.setOption(option, true)
|
})
|
}, 30000)
|
},
|
|
/* 绘制仪表盘图表 */
|
drawGaugeChart() {
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '', // 主标题文本
|
x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE',
|
}
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: params => {
|
return params.seriesName + '：' + params.value + '%'
|
}
|
},
|
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, '#F56436'],//0-30%处的颜色
|
[0.7, '#FFFF40'],//30%-60%处的颜色
|
[1, '#0FC61A']//90%-100%处的颜色
|
],
|
width: 15//表盘宽度
|
}
|
},
|
detail: {
|
formatter: '{score|{value}%}',
|
offsetCenter: [0, '50%'],
|
height: 30,
|
rich: {
|
score: {
|
fontSize: 20
|
}
|
}
|
},
|
data: []
|
}
|
]
|
}
|
this.drawGaugeChart1(option)
|
this.drawGaugeChart2(option)
|
this.drawGaugeChart3(option)
|
this.drawGaugeChart4(option)
|
},
|
|
/* 绘制利用率仪表盘图表 */
|
drawGaugeChart1(opt) {
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + `利用率`
|
option.series[0].name = '利用率'
|
option.series[0].data = [this.gaugeChartData.utilizationRate]
|
this.gaugeChart1.setOption(option, true)
|
this.gaugeChart1.hideLoading()
|
|
this.gaugeChart1.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: false,
|
productionId: this.gaugeChartData.productionId,
|
tierName: this.gaugeChartData.productionName
|
}
|
})
|
}
|
})
|
},
|
|
/* 绘制开动率仪表盘图表 */
|
drawGaugeChart2(opt) {
|
this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
|
option.series[0].name = '开动率'
|
option.series[0].data = [this.gaugeChartData.startRate]
|
this.gaugeChart2.setOption(option, true)
|
this.gaugeChart2.hideLoading()
|
|
this.gaugeChart2.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: false,
|
productionId: this.gaugeChartData.productionId,
|
tierName: this.gaugeChartData.productionName
|
}
|
})
|
}
|
})
|
},
|
|
/* 绘制开机率仪表盘图表 */
|
drawGaugeChart3(opt) {
|
this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
|
option.series[0].name = '开机率'
|
option.series[0].data = [this.gaugeChartData.openRate]
|
this.gaugeChart3.setOption(option, true)
|
this.gaugeChart3.hideLoading()
|
|
this.gaugeChart3.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: false,
|
productionId: this.gaugeChartData.productionId,
|
tierName: this.gaugeChartData.productionName
|
}
|
})
|
}
|
})
|
},
|
|
/* 绘制OEE仪表盘图表 */
|
drawGaugeChart4(opt) {
|
this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
|
option.series[0].name = 'OEE'
|
option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
|
this.gaugeChart4.setOption(option, true)
|
this.gaugeChart4.hideLoading()
|
|
this.gaugeChart4.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-OEEAnalysis',
|
params: { isEquipment: false, productionId: this.gaugeChartData.productionId }
|
})
|
}
|
})
|
},
|
|
/* 绘制单柱图 */
|
drawBarChart() {
|
const xAisData = this.barChartData.map(item => item.name)
|
const option = {
|
height: 260,
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '', // 主标题文本
|
x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE',
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
// backgroundColor: 'rgba(9, 24, 48, 0.5)',
|
borderColor: 'rgba(75, 253, 238, 0.4)',
|
textStyle: {
|
// color: '#CFE3FC'
|
},
|
borderWidth: 1
|
},
|
grid: {
|
top: '15%',
|
left: '6%',
|
right: '3%'
|
},
|
xAxis: [
|
{
|
// name: '上个月OEE',
|
// nameLocation: 'middle',
|
// nameGap: 40, // x轴name与横坐标轴线的间距
|
type: 'category',
|
data: xAisData,
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisLabel: {
|
show: true, // 是否显示刻度标签，默认显示
|
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
|
// rotate: this.barChartData.length >= 5 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
|
inside: false, // 刻度标签是否朝内，默认朝外
|
margin: 6 // 刻度标签与轴线之间的距离
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
}],
|
yAxis: [
|
{
|
name: '%',
|
// nameLocation: 'middle',
|
// nameGap: 30, // x轴name与横坐标轴线的间距
|
position: 'left',
|
axisLabel: {
|
formatter: '{value}',
|
color: '#fff'
|
},
|
axisTick: {
|
show: true
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: 'rgba(255,255,255,0.12)'
|
}
|
}
|
},
|
{
|
position: 'right',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
],
|
series: [{
|
type: 'bar',
|
data: this.barChartData,
|
barWidth: '25%',
|
itemStyle: {
|
color: '#17C1F0',
|
barBorderRadius: [10, 10, 10, 10]
|
},
|
label: {
|
show: false,
|
lineHeight: 10,
|
formatter: params => {
|
if (+params.value === 0) return ''
|
else return params.value
|
},
|
position: 'inside',
|
textStyle: {
|
color: '#fff',
|
fontSize: 18
|
}
|
}
|
}],
|
dataZoom: {
|
show: false,
|
startValue: 0, // 从头开始。
|
endValue: 5 // 一次性展示几个
|
}
|
}
|
option.title.text = `${moment().subtract(1, 'months').format('M')}月OEE`
|
this.barChart.setOption(option, true)
|
this.barChart.hideLoading()
|
|
this.barChart.on('click', params => {
|
const productionId = params.name
|
this.$router.push({
|
name: 'mdc-base-OEEAnalysis',
|
params: { isEquipment: true, productionId }
|
})
|
})
|
|
// 设备列表大于6个时开启自动轮播
|
if (this.barChartData.length <= 6) return
|
this.barChartCarouselTime = setInterval(() => {
|
this.barChartData.push(this.barChartData.shift())
|
xAisData.push(xAisData.shift())
|
this.$nextTick(() => {
|
this.barChart.setOption(option, true)
|
})
|
}, 3000)
|
},
|
|
handleSelectChange(value) {
|
this.equipmentId = value
|
},
|
|
filterOption(input, option) {
|
return (
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
)
|
},
|
|
switchToEquipmentSignage() {
|
if (this.equipmentId) {
|
this.$emit('switchToNextSignage', {
|
signageName: 'Equipment',
|
productionCode: this.equipmentId
|
})
|
}
|
},
|
|
/**
|
* 窗口尺寸变化时触发
|
* 调整图表尺寸以适应分辨率
|
*/
|
handleWindowResize() {
|
if (this.first7DaysEfficiencyChart) this.first7DaysEfficiencyChart.resize()
|
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.barChart) this.barChart.resize()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-container {
|
.page-title {
|
display: flex;
|
justify-content: space-evenly;
|
flex-wrap: wrap;
|
color: #fff;
|
margin-bottom: 10px;
|
|
}
|
|
.content-container {
|
padding-top: 5px;
|
display: flex;
|
justify-content: space-between;
|
|
.left-col {
|
.support-plan-container {
|
width: 100%;
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
color: #fff;
|
padding-top: 20px;
|
|
.support-plan-item {
|
border-radius: 3px;
|
width: 30%;
|
padding: 5px 10px;
|
margin-bottom: 10px;
|
|
.plan-value-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.plan-value {
|
margin-right: 20px;
|
font-size: 30px;
|
color: #EAC910;
|
}
|
}
|
}
|
}
|
}
|
|
.right-col {
|
.gauge-chart {
|
width: 50%;
|
height: 200px;
|
}
|
}
|
}
|
}
|
|
/deep/ .ant-form.ant-form-inline {
|
text-align: center;
|
margin-bottom: 20px;
|
}
|
|
/deep/ .ant-form .ant-form-item-label label {
|
color: #fff;
|
font-size: 18px;
|
}
|
|
/deep/ .ant-select-selection {
|
background: transparent !important;
|
}
|
|
/deep/ .ant-select-selection__clear {
|
background: transparent !important;
|
color: #fff;
|
}
|
|
/deep/ .ant-select {
|
color: #fff;
|
}
|
|
/deep/ .ant-input {
|
border: 1px solid #689ACA;
|
color: #fff;
|
background: transparent !important;
|
}
|
</style>
|
