<template>
|
<div class="page-container">
|
<div class="content-container">
|
<div style="width: 25%" class="left-col">
|
<div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4">
|
<dv-decoration-7>上一级</dv-decoration-7>
|
</div>
|
<dv-border-box-9 style="padding: 30px 20px 0">
|
<div id="running_state_chart" style="width:100%;height: 400px;"></div>
|
<div id="efficiency_chart" style="width: 100%;height: 350px"></div>
|
</dv-border-box-9>
|
</div>
|
|
<div style="width: 42%" class="middle-col">
|
<dv-border-box-9 style="padding: 30px 20px 0">
|
<div style="display: flex">
|
<div id="tech_condition_chart" style="width:50%;height: 420px;"></div>
|
<div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>
|
</div>
|
<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 style="padding: 0 55px;margin-top: 50px">
|
<dv-scroll-board :config="maintenanceConfig" style="width:100%;height:80px"/>
|
</div>
|
</dv-border-box-9>
|
</div>
|
|
<div style="width: 32%">
|
<dv-border-box-9 style="padding: 30px 0 20px">
|
<div id="bar_chart" style="width:100%;height: 280px;"></div>
|
<div id="double_bar_chart" style="width:100%;height: 280px;"></div>
|
<div style="padding: 0 20px;">
|
<dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>
|
</div>
|
</dv-border-box-9>
|
</div>
|
|
<SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
|
:modalDataApiParams="modalDataApiParams"
|
@closeModal="modalVisible=false"/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import moment from 'moment'
|
import SignageModal from './modules/SignageModal'
|
|
export default {
|
name: 'BranchFactorySignage',
|
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: '运行' }
|
],
|
efficiencyChart: '',
|
efficiencyData: [],
|
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: '#5FE0AF',
|
apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
|
},
|
{
|
planTime: '本月完成',
|
planValueLabel: 'thisMonthMaintenanceRealNum',
|
backgroundColor: '#409EFF',
|
apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
|
},
|
{
|
planTime: '下月三保计划',
|
planValueLabel: 'nextMonthMaintenancePlanNum',
|
backgroundColor: '#D6BC52',
|
apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
|
},
|
{
|
planTime: '下下月三保计划',
|
planValueLabel: 'nextNextMonthMaintenancePlanNum',
|
backgroundColor: '#58D9F9',
|
apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
|
}
|
],
|
thisMonthMaintenancePlanNum: 0,
|
thisMonthMaintenanceRealNum: 0,
|
nextMonthMaintenancePlanNum: 0,
|
nextNextMonthMaintenancePlanNum: 0,
|
twoMaintenanceChartData: [],
|
barChart: '',
|
barChartData: [],
|
doubleBarChart: '',
|
doubleBarChartData: {},
|
workshopProblemChartData: [],
|
maintenanceConfig: {},
|
problemConfig: {},
|
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)
|
},
|
methods: {
|
/* 调用接口获取图表数据汇总方法 */
|
getChartDataByApi() {
|
this.getRunningStateDataByApi()
|
this.getEfficiencyDataByApi()
|
this.getTechConditionDataByApi()
|
this.getWarrantyMalfunctionDataByApi()
|
this.getMonthMaintenanceNumByApi()
|
this.getTwoMaintenanceChartDataByApi()
|
this.getBarChartDataByApi()
|
this.getDoubleBarChartDataByApi()
|
this.getWorkshopProblemChartDataByApi()
|
},
|
|
/* 调用接口获取设备运行状态 */
|
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.currentPageProductionId = res.result.productionId
|
this.runningStateChartDataRequireFinished = true
|
this.drawRunningStateChart(res.result.productionId)
|
}
|
})
|
},
|
|
/* 调用接口获取设备利用率 */
|
getEfficiencyDataByApi() {
|
this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
|
this.efficiencyChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentUtilizationStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) {
|
this.efficiencyData = res.result
|
this.drawEfficiencyChart()
|
}
|
})
|
},
|
|
/* 调用接口获取技术状态 */
|
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: '合格', technologyStatus: 'qualified' },
|
{ value: res.result[0].disabledCount, name: '禁用', technologyStatus: 'disabled' },
|
{ value: res.result[0].limitedUseCount, name: '限用', technologyStatus: 'limitedUse' }
|
]
|
this.techConditionChartRequireFinished = true
|
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: '报修', isStop: '' },
|
{ value: res.result[0].stopCount, name: '停机', isStop: '2' },
|
{ value: res.result[0].noStopCount, name: '运行', isStop: '1' }
|
]
|
this.warrantyMalfunctionChartRequireFinished = true
|
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
|
})
|
},
|
|
/* 调用接口获取二保计划 */
|
getTwoMaintenanceChartDataByApi() {
|
signageApi.getTwoMaintenancePlanListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
|
this.drawMaintenanceChart()
|
})
|
},
|
|
/* 调用接口获取设备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.getEquipmentOEEStatistics(this.productionCode)
|
.then(res => {
|
if (res.success && res.result && res.result.length > 0) {
|
this.barChartData = res.result
|
this.drawBarChart()
|
}
|
})
|
},
|
|
/* 调用接口获取设备OEE和利用率对比 */
|
getDoubleBarChartDataByApi() {
|
this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
|
this.doubleBarChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
signageApi.getEquipmentMonthStatisticsApi(this.productionCode)
|
.then(res => {
|
if (res.success) {
|
this.doubleBarChartData = res.result
|
this.drawDoubleBarChart()
|
}
|
})
|
},
|
|
/* 调用接口获取车间问题列表*/
|
getWorkshopProblemChartDataByApi() {
|
signageApi.getWorkshopProblemListApi(this.productionCode)
|
.then(res => {
|
if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime])
|
this.drawWorkshopProblemChart()
|
})
|
},
|
|
/* 绘制设备运行状态玫瑰饼图 */
|
drawRunningStateChart(productionId) {
|
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: 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: 25,
|
left: 0,
|
orient: 'vertical',
|
right: '10%',
|
// 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: this.pieChartRadius,
|
center: ['53%', '50%'],
|
color: [
|
'#8B8B8B',
|
'#F56436',
|
'#FFFF40',
|
'#0FC61A'
|
],
|
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: 10,
|
length: 10
|
},
|
data: this.runningStateData
|
}
|
]
|
}
|
this.runningStateChart.setOption(option, true)
|
this.runningStateChart.hideLoading()
|
|
this.runningStateChart.on('click', params => {
|
console.log('params', params)
|
this.$router.push({
|
name: 'mdc-base-DeviceBaseInfo',
|
params: { signageData: params.data, productionId }
|
})
|
})
|
},
|
|
/* 绘制设备利用率胶囊图 */
|
drawEfficiencyChart() {
|
const data = this.efficiencyData
|
const colorArray = [
|
{
|
top: '#79CEAA',
|
bottom: '#79CEAA'
|
},
|
{
|
top: '#F589A2',
|
bottom: '#F589A2'
|
},
|
{
|
top: '#6FBF9D',
|
bottom: '#6FBF9D'
|
},
|
{
|
top: '#66DFE2',
|
bottom: '#66DFE2'
|
}, {
|
top: '#A7F0C1',
|
bottom: '#A7F0C1'
|
},
|
{
|
top: '#FAE893',
|
bottom: '#FAE893'
|
},
|
{
|
top: '#F7B7A0',
|
bottom: '#F7B7A0'
|
}
|
]
|
const defaultData = []
|
const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
|
let yAxisMax
|
if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
|
else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
|
const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
|
data.forEach(item => defaultData.push(yAxisMax))
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '', // 主标题文本
|
x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '5%',
|
bottom: '0%',
|
top: '6%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'none'
|
},
|
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.colorStops[params[0].dataIndex].color + '"></span>' + params[0].seriesName + ' : ' + params[0].value + '%'
|
}
|
},
|
xAxis: {
|
name: '',
|
nameTextStyle: {
|
color: '#fff'
|
},
|
axisLabel: {
|
margin: 20,
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
show: true,
|
min: 0,
|
max: 'dataMax',
|
interval: yAxisInterval,
|
type: 'value',
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
yAxis: [{
|
type: 'category',
|
inverse: true,
|
triggerEvent: true,
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: '#fff',
|
fontSize: '14',
|
fontWeight: 'bolder'
|
},
|
formatter: function(value) {
|
return `${data.find(item => item.productionCode === value).name}`
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
show: false
|
},
|
data: data.map(item => item.productionCode)
|
}, {
|
type: 'category',
|
inverse: true,
|
axisTick: 'none',
|
axisLine: 'none',
|
show: true,
|
axisLabel: {
|
textStyle: {
|
color: '#ffffff',
|
fontSize: '14'
|
},
|
formatter: function(value) {
|
return `${value}%`
|
}
|
},
|
data: data
|
}],
|
series: [{
|
name: 'TEEP',
|
type: 'bar',
|
zlevel: 1,
|
itemStyle: {
|
barBorderRadius: 100,
|
color: function(params) {
|
let num = colorArray.length
|
return {
|
type: 'linear',
|
colorStops: [{
|
offset: 0,
|
color: colorArray[params.dataIndex % num].bottom
|
}, {
|
offset: 1,
|
color: colorArray[params.dataIndex % num].top
|
}, {
|
offset: 0,
|
color: colorArray[params.dataIndex % num].bottom
|
}, {
|
offset: 1,
|
color: colorArray[params.dataIndex % num].top
|
}, {
|
offset: 0,
|
color: colorArray[params.dataIndex % num].bottom
|
}, {
|
offset: 1,
|
color: colorArray[params.dataIndex % num].top
|
}, {
|
offset: 0,
|
color: colorArray[params.dataIndex % num].bottom
|
}, {
|
offset: 1,
|
color: colorArray[params.dataIndex % num].top
|
}, {
|
offset: 0,
|
color: colorArray[params.dataIndex % num].bottom
|
}, {
|
offset: 1,
|
color: colorArray[params.dataIndex % num].top
|
}, {
|
offset: 0,
|
color: colorArray[params.dataIndex % num].bottom
|
}]
|
}
|
}
|
},
|
barWidth: 12,
|
data: data
|
},
|
{
|
name: '背景',
|
type: 'bar',
|
barWidth: 12,
|
barGap: '-100%',
|
data: defaultData,
|
itemStyle: {
|
color: '#11294d',
|
barBorderRadius: 100
|
}
|
}
|
]
|
}
|
option.title.text = `${moment().subtract(1, 'days').format('M月D日')}TEEP`
|
this.efficiencyChart.setOption(option, true)
|
this.efficiencyChart.hideLoading()
|
|
this.efficiencyChart.on('click', params => {
|
// 点击触发的为柱状体，除此除外是标题
|
if (params.componentType === 'series') {
|
console.log('seriesParams===========', params)
|
let productionId
|
let tierName
|
// 点击的是柱体的值，否则点击的为柱体背景阴影
|
if (params.seriesIndex === 0) {
|
productionId = params.data.productionId
|
tierName = params.data.name
|
} else {
|
productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
|
tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
|
}
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: { isEquipment: false, productionId, tierName }
|
})
|
} else {
|
console.log('yAxisParams===========', params)
|
this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value })
|
}
|
})
|
},
|
|
/* 绘制技术状态饼图 */
|
drawTechConditionChart() {
|
const option = {
|
height: 300,
|
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: 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: 25,
|
orient: 'vertical',
|
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: this.pieChartRadius,
|
center: ['50%', '60%'],
|
color: [
|
'#0FC61A',
|
'#F56436',
|
'#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()
|
|
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 = {
|
height: 300,
|
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: 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: 25,
|
orient: 'vertical',
|
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: this.pieChartRadius,
|
center: ['50%', '60%'],
|
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()
|
|
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
|
})
|
},
|
|
/* 绘制车间保养滚动表 */
|
drawMaintenanceChart() {
|
this.maintenanceConfig = {
|
indexHeader: '序号',
|
header: ['车间', '日期', '内容'],
|
headerBGC: '#2C8BB2',
|
oddRowBGC: '#244B58',
|
evenRowBGC: '#295562',
|
rowNum: 1,
|
data: this.twoMaintenanceChartData,
|
index: true,
|
columnWidth: [100, 300, 300, 300],
|
align: ['center', 'center', 'center', 'center']
|
}
|
},
|
|
/* 绘制单柱图 */
|
drawBarChart() {
|
const defaultData = []
|
const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
|
const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value
|
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 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: '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 + '%'
|
},
|
// backgroundColor: 'rgba(9, 24, 48, 0.5)',
|
borderColor: 'rgba(75, 253, 238, 0.4)',
|
textStyle: {
|
// color: '#CFE3FC'
|
},
|
borderWidth: 1
|
},
|
grid: {
|
top: '15%',
|
left: '10%'
|
},
|
xAxis: [{
|
name: '',
|
nameLocation: 'middle',
|
nameGap: 40, // x轴name与横坐标轴线的间距
|
type: 'category',
|
data: this.barChartData.map(item => item.productionId),
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF'
|
}
|
},
|
axisLabel: {
|
show: true, // 是否显示刻度标签，默认显示
|
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
|
rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
|
inside: false, // 刻度标签是否朝内，默认朝外
|
margin: 10, // 刻度标签与轴线之间的距离
|
formatter: value => {
|
return `${this.barChartData.find(item => item.productionId === value).name}`
|
},
|
fontSize: 14
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
}],
|
yAxis: [{
|
name: '%',
|
min: 0,
|
max: yAxisMax,
|
interval: yAxisInterval,
|
axisLabel: {
|
formatter: '{value}',
|
color: '#fff',
|
fontSize: 14
|
},
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: '#FFFFFF'
|
}
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: 'rgba(255,255,255,0.12)'
|
}
|
}
|
}],
|
series: [{
|
type: 'bar',
|
data: this.barChartData,
|
barWidth: this.barChartData.length > 5 ? '40%' : 30,
|
itemStyle: {
|
color: function(params) {
|
let num = colorArray.length
|
return colorArray[params.dataIndex % num]
|
},
|
barBorderRadius: 100
|
},
|
zlevel: 1,
|
label: {
|
show: false,
|
lineHeight: 10,
|
formatter: params => {
|
if (+params.value === 0) return ''
|
else return params.value
|
},
|
position: 'top',
|
textStyle: {
|
color: '#fff',
|
fontSize: 16
|
}
|
}
|
},
|
{
|
name: '背景',
|
type: 'bar',
|
barWidth: this.barChartData.length > 5 ? '40%' : 30,
|
barGap: '-100%',
|
data: defaultData,
|
itemStyle: {
|
color: '#11294d',
|
barBorderRadius: 100
|
}
|
}]
|
}
|
option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
|
this.barChart.setOption(option, true)
|
this.barChart.hideLoading()
|
|
this.barChart.on('click', params => {
|
console.log('params', params)
|
let productionId
|
// 点击的是柱体的值，否则点击的为柱体背景阴影
|
if (params.seriesIndex === 0) productionId = params.data.productionId
|
else productionId = params.name
|
|
this.$router.push({
|
name: 'mdc-base-OEEAnalysis',
|
params: { isEquipment: false, productionId }
|
})
|
})
|
},
|
|
/* 绘制双柱图 */
|
drawDoubleBarChart() {
|
const option = {
|
color: ['#66DFE2', '#79CEAA'],
|
tooltip: {
|
confine: true,
|
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.seriesName + ' : ' + params.value + '%'
|
}
|
},
|
grid: {
|
left: '5%',
|
right: '4%',
|
bottom: '10%',
|
top: '20%',
|
containLabel: true
|
},
|
legend: {
|
icon: 'roundRect',
|
orient: 'horizontal',
|
left: 'center',
|
itemWidth: 14,
|
itemHeight: 14,
|
formatter: ['{a|{name}}'].join('\n'),
|
textStyle: {
|
fontSize: 14,
|
color: '#fff',
|
height: 8,
|
rich: {
|
a: {
|
verticalAlign: 'bottom'
|
}
|
}
|
},
|
data: ['OEE', 'TEEP']
|
},
|
xAxis: {
|
type: 'category',
|
data: this.doubleBarChartData.dateList,
|
axisLine: {
|
lineStyle: {
|
color: 'rgba(255,255,255,0.45)'
|
}
|
},
|
axisLabel: {
|
fontSize: 14,
|
color: '#fff'
|
},
|
axisTick: {
|
show: true
|
}
|
},
|
yAxis: [
|
{
|
name: '%',
|
nameTextStyle: {
|
color: '#fff'
|
},
|
type: 'value',
|
min: 0,
|
minInterval: 1,
|
axisLine: {
|
show: true
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: 'rgba(255, 255, 255, 0.15)'
|
// type: 'dashed', // dotted 虚线
|
}
|
},
|
axisLabel: {
|
fontSize: 14,
|
color: '#fff',
|
fontFamily: 'Bebas'
|
}
|
},
|
{
|
type: 'value',
|
axisLine: {
|
show: true
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
fontSize: 14,
|
formatter: '{value}%', // 右侧Y轴文字显示
|
fontFamily: 'Bebas',
|
color: '#6A93B9'
|
},
|
splitArea: {
|
show: false
|
}
|
}],
|
series: [{
|
type: 'bar',
|
barWidth: 15,
|
itemStyle: { barBorderRadius: 100 },
|
name: 'OEE',
|
data: this.doubleBarChartData.oeeList,
|
label: {
|
show: false,
|
lineHeight: 10,
|
formatter: params => {
|
if (+params.value === 0) return ''
|
else return params.value
|
},
|
position: 'inside',
|
textStyle: {
|
color: '#fff',
|
fontSize: 12
|
}
|
}
|
}, {
|
type: 'bar',
|
barWidth: 15,
|
itemStyle: { barBorderRadius: 100 },
|
name: 'TEEP',
|
data: this.doubleBarChartData.utilizationList,
|
label: {
|
show: false,
|
lineHeight: 10,
|
formatter: params => {
|
if (+params.value === 0) return ''
|
else return params.value
|
},
|
position: 'inside',
|
textStyle: {
|
color: '#fff',
|
fontSize: 12
|
}
|
}
|
}
|
]
|
}
|
this.doubleBarChart.setOption(option, true)
|
this.doubleBarChart.hideLoading()
|
},
|
|
/* 绘制问题滚动表 */
|
drawWorkshopProblemChart() {
|
this.problemConfig = {
|
indexHeader: '序号',
|
header: ['问题内容', '时间'],
|
headerBGC: '#86D186',
|
oddRowBGC: '#7CBF7C',
|
evenRowBGC: '#7CBF7C',
|
data: this.workshopProblemChartData,
|
index: true,
|
columnWidth: [100, 300, 150],
|
align: ['center']
|
}
|
},
|
|
/**
|
* 点击三保展示栏后打开弹窗
|
* @param record 点击当前三保信息
|
*/
|
openMaintenanceModal(record) {
|
this.modalTitle = record.planTime
|
this.modalDataApiParams = {
|
productionCode: this.productionCode
|
}
|
this.modalDataApiUrl = record.apiUrl
|
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.barChart) this.barChart.resize()
|
if (this.doubleBarChart) this.doubleBarChart.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 {
|
.first-title {
|
color: #00A8AC;
|
font-size: 20px;
|
text-align: center;
|
font-weight: bold;
|
}
|
}
|
|
.middle-col {
|
.first-title {
|
color: #00A8AC;
|
font-size: 20px;
|
text-align: center;
|
font-weight: bold;
|
}
|
|
.support-plan-container {
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
color: #fff;
|
padding: 0 40px;
|
|
.support-plan-item {
|
border-radius: 3px;
|
width: 45%;
|
padding: 5px 20px;
|
font-size: 20px;
|
margin-bottom: 10px;
|
cursor: pointer;
|
|
.plan-value-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.plan-value {
|
font-size: 35px;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
/deep/ .dv-scroll-board .header {
|
height: 35px;
|
}
|
</style>
|
