<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: rgba(0,0,0,.45);font-size: 20px;align-self: flex-start">三保计划
|
</dv-decoration-11>
|
<div class="support-plan-container">
|
<div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item"
|
:style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)">
|
<div>{{item.planTime}}</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{$data[item.planValueLabel]}}</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: rgba(0,0,0,.45)">二保计划
|
</dv-decoration-11>
|
<div
|
style="flex:1;text-align:center;font-size: 25px;color: rgba(0,0,0,.45);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>
|
|
<SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
|
:modalDataApiParams="modalDataApiParams"
|
@closeModal="modalVisible=false"/>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import moment from 'moment'
|
import SignageModal from './modules/SignageModal'
|
import * as echarts from 'echarts'
|
|
export default {
|
name: 'WorkshopSectionSignage',
|
components: { SignageModal },
|
props: {
|
productionCode: {
|
type: String,
|
default: ''
|
},
|
userType: {
|
type: Number
|
}
|
},
|
data() {
|
return {
|
firstEnterClientWidth: null,
|
pieChartRadius: ['40%', '60%'],
|
normalPieChartRadius: ['40%', '60%'],
|
currentPageProductionId: null,
|
runningStateChart: '',
|
runningStateChartDataRequireFinished: false,
|
runningStateData: [
|
{ value: '0', name: '关机' },
|
{ value: '0', name: '报警' },
|
{ value: '0', name: '待机' },
|
{ value: '0', name: '运行' }
|
],
|
techConditionChart: '',
|
techConditionChartRequireFinished: false,
|
techConditionData: [
|
{ value: '0', name: '合格' },
|
{ value: '0', name: '禁用' },
|
{ value: '0', name: '限用' }
|
],
|
warrantyMalfunctionChart: '',
|
warrantyMalfunctionChartRequireFinished: false,
|
warrantyMalfunctionData: [
|
{ value: '0', name: '报修' },
|
{ value: '0', name: '停机' },
|
{ value: '0', name: '运行' }
|
],
|
supportPlanList: [
|
{
|
planTime: '本月三保计划',
|
planValueLabel: 'thisMonthMaintenancePlanNum',
|
backgroundColor: '#719D8E',
|
code: 'bysbzs'
|
},
|
{
|
planTime: '本月完成量',
|
planValueLabel: 'thisMonthMaintenanceRealNum',
|
backgroundColor: '#409EFF',
|
code: 'bwc'
|
},
|
{
|
planTime: '延期',
|
planValueLabel: 'maintenanceExtensionNum',
|
backgroundColor: '#E89D29',
|
code: ''
|
},
|
{
|
planTime: '超期',
|
planValueLabel: 'maintenanceOverdueNum',
|
backgroundColor: '#F56C6C',
|
code: ''
|
},
|
{
|
planTime: '下月计划',
|
planValueLabel: 'nextMonthMaintenancePlanNum',
|
backgroundColor: '#A8985D',
|
code: 'xysb'
|
},
|
{
|
planTime: '下下月计划',
|
planValueLabel: 'nextNextMonthMaintenancePlanNum',
|
backgroundColor: '#58D9F9',
|
code: 'xxysb'
|
}
|
],
|
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: '',
|
modalVisible: false,
|
modalTitle: '',
|
modalDataApiUrl: '',
|
modalTableColumns: [],
|
modalDataApiParams: {}
|
}
|
},
|
mounted() {
|
this.firstEnterClientWidth = document.body.clientWidth || document.documentElement.clientWidth
|
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.getTechConditionAndWarrantyMalfunctionDataByApi()
|
this.getRunningStateDataByApi()
|
this.getThirdMaintenanceNumByApi()
|
this.getFirst7DaysEfficiencyDataByApi()
|
this.getGaugeChartDataByApi()
|
this.getBarChartDataByApi()
|
},
|
|
/* 调用接口获取技术状态与故障报修 */
|
getTechConditionAndWarrantyMalfunctionDataByApi() {
|
this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
|
this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
|
this.techConditionChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0, 0, 0, .45)'
|
})
|
this.warrantyMalfunctionChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0, 0, 0, .45)'
|
})
|
signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) {
|
this.techConditionData = [
|
{
|
value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'QUALIFIED').value : 0,
|
name: '合格',
|
technologyStatus: 'QUALIFIED'
|
},
|
{
|
value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'RESTRICTED').value : 0,
|
name: '限用',
|
technologyStatus: 'RESTRICTED'
|
},
|
{
|
value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0,
|
name: '禁用',
|
technologyStatus: 'PROHIBITED'
|
}
|
]
|
this.warrantyMalfunctionData = [
|
{
|
value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0,
|
name: '运行',
|
code: 'run'
|
},
|
{
|
value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'stop').value : 0,
|
name: '停机',
|
code: 'stop'
|
},
|
{
|
value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0,
|
name: '报修',
|
code: 'bx'
|
}
|
]
|
this.techConditionChartRequireFinished = true
|
this.warrantyMalfunctionChartRequireFinished = true
|
this.drawTechConditionChart()
|
this.drawWarrantyMalfunctionChart()
|
}
|
})
|
},
|
|
/* 调用接口获取三保计划 */
|
getThirdMaintenanceNumByApi() {
|
signageApi.getThirdMaintenanceConditionApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) {
|
this.thisMonthMaintenancePlanNum = res.result.find(item => item.code === 'bysbzs').value
|
this.thisMonthMaintenanceRealNum = res.result.find(item => item.code === 'bwc').value
|
this.nextMonthMaintenancePlanNum = res.result.find(item => item.code === 'xysb').value
|
this.nextNextMonthMaintenancePlanNum = res.result.find(item => item.code === 'xxysb').value
|
}
|
})
|
},
|
|
/* 调用接口获取设备运行状态 */
|
getRunningStateDataByApi() {
|
this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
|
this.runningStateChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0,0,0,.45)'
|
})
|
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) {
|
this.runningStateData = res.result.list
|
this.currentPageProductionId = res.result.productionId
|
this.runningStateChartDataRequireFinished = true
|
this.drawRunningStateChart(res.result.productionId)
|
}
|
})
|
},
|
|
/* 调用接口获取前7天利用率 */
|
getFirst7DaysEfficiencyDataByApi() {
|
this.first7DaysEfficiencyChart = this.$echarts.init(document.getElementById('first7DaysEfficiency_chart'))
|
this.first7DaysEfficiencyChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0,0,0,.45)'
|
})
|
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: 'rgba(0,0,0,.45)'
|
})
|
this.gaugeChart2.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0,0,0,.45)'
|
})
|
this.gaugeChart3.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0,0,0,.45)'
|
})
|
this.gaugeChart4.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: 'rgba(0,0,0,.45)'
|
})
|
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: 'rgba(0,0,0,.45)'
|
})
|
signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result) {
|
const res = {
|
result: [
|
{
|
equipmentId: '2140311',
|
overallEquipmentEfficiency: 12
|
},
|
{
|
equipmentId: '2140511',
|
overallEquipmentEfficiency: 32
|
},
|
{
|
equipmentId: '2420011',
|
overallEquipmentEfficiency: 15
|
},
|
{
|
equipmentId: '2140023',
|
overallEquipmentEfficiency: 62
|
},
|
{
|
equipmentId: '2110011',
|
overallEquipmentEfficiency: 46
|
},
|
{
|
equipmentId: '2140211',
|
overallEquipmentEfficiency: 75
|
},
|
{
|
equipmentId: '2144011',
|
overallEquipmentEfficiency: 86
|
},
|
{
|
equipmentId: '2140021',
|
overallEquipmentEfficiency: 97
|
},
|
{
|
equipmentId: '2145031',
|
overallEquipmentEfficiency: 57
|
}
|
]
|
}
|
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,
|
itemWidth: 14,
|
itemHeight: 14,
|
icon: 'roundRect',
|
itemGap: 15,
|
textStyle: {
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 14
|
},
|
data: ['合格', '限用', '禁用']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: this.pieChartRadius,
|
center: ['50%', '50%'],
|
color: [
|
'#0AA012',
|
'#247F49',
|
'#757160'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 15,
|
length: 15,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
data: this.techConditionData
|
}
|
]
|
}
|
this.techConditionChart.setOption(option, true)
|
this.techConditionChart.hideLoading()
|
|
this.techConditionChart.on('click', params => {
|
this.modalTitle = `技术状态（${params.name}）`
|
this.modalDataApiParams = {
|
technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus,
|
productionCode: this.productionCode
|
}
|
this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
|
this.modalVisible = true
|
})
|
},
|
|
/* 绘制设备报修故障情况饼图 */
|
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,
|
itemWidth: 14,
|
itemHeight: 14,
|
icon: 'roundRect',
|
itemGap: 15,
|
textStyle: {
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 14
|
},
|
data: ['报修', '停机', '运行']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: this.pieChartRadius,
|
center: ['50%', '50%'],
|
color: [
|
'#00CED1',
|
'#B85B38',
|
'#FFFF88'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 15,
|
length: 15,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
data: this.warrantyMalfunctionData
|
}
|
]
|
}
|
this.warrantyMalfunctionChart.setOption(option, true)
|
this.warrantyMalfunctionChart.hideLoading()
|
|
this.warrantyMalfunctionChart.on('click', params => {
|
this.modalTitle = `报修故障（${params.name}）`
|
this.modalDataApiParams = {
|
isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop,
|
productionCode: this.productionCode
|
}
|
this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
|
this.modalVisible = true
|
})
|
},
|
|
/* 绘制设备运行状态玫瑰饼图 */
|
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,
|
itemWidth: 14,
|
itemHeight: 14,
|
icon: 'roundRect',
|
itemGap: 15,
|
textStyle: {
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 14
|
},
|
data: ['运行', '待机', '报警', '关机']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
roseType: 'angle', // 玫瑰图
|
radius: this.pieChartRadius,
|
center: ['50%', '50%'],
|
color: [
|
'#686869',
|
'#AA6349',
|
'#FFFF88',
|
'#5D975D'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 20,
|
length: 30,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
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: 84,
|
startRate: 70,
|
utilizationRate: 42
|
}
|
this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
|
}
|
})
|
const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
|
const newData = {
|
xAxis: equipmentIdList,
|
yAxis: [
|
{
|
name: 'TEEP',
|
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)
|
}
|
]
|
}
|
let legendData = []
|
let seriesData = []
|
let colorArr = ['#1890FF', '#2EC35C', '#EA967B']
|
legendData = newData.yAxis.map((item) => item.name)
|
seriesData = newData.yAxis.map((item1, index1) => {
|
return {
|
name: item1.name,
|
type: 'bar',
|
symbol: 'circle',
|
barGap: '0%',
|
symbolSize: 8,
|
itemStyle: {
|
color: colorArr[index1],
|
barBorderRadius: 4
|
},
|
lineStyle: {
|
width: 2
|
},
|
markPoint: {
|
show: true
|
},
|
yAxisIndex: 1,
|
data: item1.value,// 折线图的数据
|
label: {
|
show: true,
|
lineHeight: 10,
|
formatter: params => {
|
if (+params.value === 0) return ''
|
else return params.value
|
},
|
position: index1 % 2 === 0 ? 'top' : 'inside',
|
textStyle: {
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 10
|
}
|
}
|
}
|
})
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '前7天TEEP(%)', // 主标题文本
|
x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE'
|
}
|
},
|
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: 'rgba(0,0,0,.45)'
|
}
|
},
|
xAxis: {
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 14,
|
margin: 10,
|
color: 'rgba(0,0,0,.45)'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
},
|
yAxis: [
|
{
|
name: newData.yAxisName,
|
nameTextStyle: {
|
color: '#1AD8DE',
|
fontSize: 18
|
},
|
nameGap: 30,
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
{
|
type: 'value',
|
position: 'right',
|
splitNumber: 5,
|
max: 100,
|
axisLabel: {
|
show: true,
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 14
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
}
|
],
|
series: seriesData,
|
dataZoom: {
|
show: false,
|
startValue: 0, // 从头开始。
|
endValue: 6 // 一次性展示几个
|
}
|
}
|
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(() => {
|
colorArr.push(colorArr.shift())
|
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: 'rgba(0,0,0,.45)',
|
width: 2
|
}
|
},
|
axisTick: {
|
length: 5,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)',
|
width: 1
|
}
|
},
|
axisLabel: {
|
show: false,
|
fontSize: 18,
|
formatter: function(value) {
|
return value + '%'
|
}
|
},
|
axisLine: {
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [ //表盘颜色
|
[0.3, '#F56436'],//0-30%处的颜色
|
[0.6, '#FFFF40'],//30%-60%处的颜色
|
[1, '#0FC61A']//60%-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)
|
|
signageApi.getGaugeColorByTypeApi('lyl')
|
.then(res => {
|
if (res.success) {
|
const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
|
option.series[0].axisLine.lineStyle.color = colorRange
|
}
|
})
|
.finally(() => {
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + `TEEP`
|
option.series[0].name = 'TEEP'
|
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) {
|
const option = Object.assign({}, opt)
|
|
signageApi.getGaugeColorByTypeApi('kdl')
|
.then(res => {
|
if (res.success) {
|
const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
|
option.series[0].axisLine.lineStyle.color = colorRange
|
}
|
})
|
.finally(() => {
|
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) {
|
const option = Object.assign({}, opt)
|
|
signageApi.getGaugeColorByTypeApi('kdl')
|
.then(res => {
|
if (res.success) {
|
const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
|
option.series[0].axisLine.lineStyle.color = colorRange
|
}
|
})
|
.finally(() => {
|
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) {
|
const option = Object.assign({}, opt)
|
|
signageApi.getGaugeColorByTypeApi('lyl')
|
.then(res => {
|
if (res.success) {
|
const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
|
option.series[0].axisLine.lineStyle.color = colorRange
|
}
|
})
|
.finally(() => {
|
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 defaultData = []
|
const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
|
let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE']
|
let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF']
|
const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
|
let yAxisMax
|
if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
|
else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
|
const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
|
this.barChartData.forEach(item => defaultData.push(yAxisMax))
|
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'
|
},
|
formatter: function(params) {
|
return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
|
'<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
|
},
|
borderColor: 'rgba(75, 253, 238, 0.4)',
|
borderWidth: 1
|
},
|
grid: {
|
top: '15%',
|
left: '6%',
|
right: '3%'
|
},
|
xAxis: {
|
type: 'category',
|
data: xAisData,
|
axisLine: {
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
axisLabel: {
|
show: true, // 是否显示刻度标签，默认显示
|
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
|
inside: false, // 刻度标签是否朝内，默认朝外
|
margin: 10, // 刻度标签与轴线之间的距离
|
fontSize: 14
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
},
|
yAxis: [
|
{
|
name: '%',
|
min: 0,
|
max: yAxisMax,
|
interval: yAxisInterval,
|
position: 'left',
|
axisLabel: {
|
formatter: '{value}',
|
color: 'rgba(0,0,0,.45)',
|
fontSize: 14
|
},
|
axisTick: {
|
show: true
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
{
|
position: 'right',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
}
|
}
|
],
|
series: [
|
{
|
type: 'pictorialBar',
|
symbolSize: [26, 10],
|
symbolOffset: [0, -5],
|
z: 12,
|
itemStyle: {
|
color: function(params) {
|
return barBottomColor[params.dataIndex % barBottomColor.length]
|
}
|
},
|
label: {
|
show: true,
|
position: 'top',
|
fontSize: 12,
|
color: 'rgba(0,0,0,.45)'
|
},
|
symbolPosition: 'end',
|
data: this.barChartData
|
},
|
{
|
type: 'pictorialBar',
|
symbolSize: [26, 10],
|
symbolOffset: [0, 5],
|
z: 12,
|
itemStyle: {
|
color: function(params) {
|
return barTopColor[params.dataIndex % barTopColor.length]
|
}
|
},
|
data: this.barChartData
|
},
|
{
|
type: 'bar',
|
itemStyle: {
|
color: function(params) {
|
return new echarts.graphic.LinearGradient(
|
0, 0, 0, 1,
|
[{
|
offset: 1,
|
color: barTopColor[params.dataIndex % barTopColor.length]
|
},
|
{
|
offset: 0,
|
color: barBottomColor[params.dataIndex % barBottomColor.length]
|
}
|
]
|
)
|
},
|
opacity: .9
|
},
|
z: 16,
|
barWidth: 26,
|
barGap: '-100%',
|
data: this.barChartData
|
}
|
],
|
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())
|
barTopColor.push(barTopColor.shift())
|
barBottomColor.push(barBottomColor.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
|
})
|
}
|
},
|
|
/**
|
* 点击三保展示栏后打开弹窗
|
* @param record 点击当前三保信息
|
*/
|
openMaintenanceModal(record) {
|
this.modalTitle = record.planTime
|
this.modalDataApiParams = {
|
productionCode: this.productionCode,
|
code: record.code
|
}
|
this.modalDataApiUrl = '/eam/home/maintenanceList'
|
this.modalVisible = true
|
},
|
|
re_drawPieChart() {
|
const clientWidth = document.body.clientWidth || document.documentElement.clientWidth
|
if (this.firstEnterClientWidth != 1920) {
|
this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / 1920)) + '%')
|
} else {
|
this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / this.firstEnterClientWidth)) + '%')
|
}
|
console.log('pieChartRadius', this.pieChartRadius)
|
this.$nextTick(() => {
|
// 数据未加载完成无需重绘图表，不然无法区分接口返回正常与否
|
if (this.runningStateChartDataRequireFinished) this.drawRunningStateChart(this.currentPageProductionId)
|
if (this.techConditionChartRequireFinished) this.drawTechConditionChart()
|
if (this.warrantyMalfunctionChartRequireFinished) this.drawWarrantyMalfunctionChart()
|
})
|
},
|
|
/**
|
* 窗口尺寸变化时触发
|
* 调整图表尺寸以适应分辨率
|
*/
|
handleWindowResize() {
|
this.re_drawPieChart()
|
if (this.runningStateChart) this.runningStateChart.resize()
|
if (this.efficiencyChart) this.efficiencyChart.resize()
|
if (this.techConditionChart) this.techConditionChart.resize()
|
if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
|
if (this.first7DaysEfficiencyChart) this.first7DaysEfficiencyChart.resize()
|
if (this.barChart) this.barChart.resize()
|
if (this.doubleBarChart) this.doubleBarChart.resize()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-container {
|
.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;
|
cursor: pointer;
|
|
.plan-value-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.plan-value {
|
margin-right: 20px;
|
font-size: 30px;
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
|
.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: rgba(0, 0, 0, .45);
|
font-size: 18px;
|
}
|
|
/deep/ .ant-select-selection {
|
background: transparent !important;
|
}
|
|
/deep/ .ant-select-selection__clear {
|
background: transparent !important;
|
color: rgba(0, 0, 0, .45);
|
}
|
|
/deep/ .ant-select {
|
color: rgba(0, 0, 0, .45);
|
}
|
|
/deep/ .ant-input {
|
border: 1px solid rgba(0, 0, 0, .45);
|
color: rgba(0, 0, 0, .45);
|
background: transparent !important;
|
}
|
</style>
|
