From f1ce06843ba7498ff0966d506304670e687c29ae Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 05 九月 2025 17:47:57 +0800
Subject: [PATCH] 1、mdc首页工段级看板删除二保计划 2、调整mdc首页整体背景颜色
---
src/views/dashboard/IndexSignage.vue | 185 ++++++++++++++++++++-------------------------
1 files changed, 82 insertions(+), 103 deletions(-)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 949d5f3..6f4b45e 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -148,7 +148,7 @@
this.getEfficiencyDataByApi()
this.getTechConditionAndWarrantyMalfunctionDataByApi()
this.getThirdMaintenanceConditionByApi()
- this.getTwoMaintenanceChartDataByApi()
+ this.getSecondMaintenanceChartDataByApi()
this.getBarChartDataByApi()
this.getDoubleBarChartDataByApi()
this.getWorkshopProblemChartDataByApi()
@@ -160,8 +160,7 @@
this.runningStateChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentStatusStatisticsApi()
.then(res => {
@@ -180,8 +179,7 @@
this.efficiencyChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentUtilizationStatisticsApi()
.then(res => {
@@ -199,14 +197,12 @@
this.techConditionChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
this.warrantyMalfunctionChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi()
.then(res => {
@@ -218,21 +214,21 @@
technologyStatus: 'QUALIFIED'
},
{
- value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0,
- name: '绂佺敤',
- technologyStatus: 'PROHIBITED'
- },
- {
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 === 'bx').value : 0,
- name: '鎶ヤ慨',
- code: 'bx'
+ 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,
@@ -240,9 +236,9 @@
code: 'stop'
},
{
- 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 === 'bx').value : 0,
+ name: '鎶ヤ慨',
+ code: 'bx'
}
]
this.techConditionChartRequireFinished = true
@@ -267,8 +263,8 @@
},
/* 璋冪敤鎺ュ彛鑾峰彇浜屼繚璁″垝 */
- getTwoMaintenanceChartDataByApi() {
- signageApi.getTwoMaintenancePlanListApi()
+ getSecondMaintenanceChartDataByApi() {
+ signageApi.getSecondMaintenancePlanListApi()
.then(res => {
if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.factoryName, item.monthPlan, '浜岀骇淇濆吇'])
this.drawMaintenanceChart()
@@ -281,8 +277,7 @@
this.barChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentOEEStatistics()
.then(res => {
@@ -299,8 +294,7 @@
this.doubleBarChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentMonthStatisticsApi()
.then(res => {
@@ -354,10 +348,9 @@
itemGap: 15,
textStyle: {
color: 'rgba(0,0,0,.45)',
- fontSize: 14,
- padding: [0, 0, 0, 0]
+ fontSize: 14
},
- data: ['鍏虫満', '鎶ヨ', '寰呮満', '杩愯']
+ data: ['杩愯', '寰呮満', '鎶ヨ', '鍏虫満']
},
grid: {
containLabel: true
@@ -366,7 +359,6 @@
{
type: 'pie',
roseType: 'angle', // 鐜懓鍥�
- // selectedMode: "single",
radius: this.pieChartRadius,
center: ['50%', '60%'],
color: [
@@ -379,8 +371,6 @@
position: 'outside',
show: true,
color: 'rgba(0,0,0,.45)',
- // textBorderColor: 'inherit',
- // textBorderWidth: 1,
fontSize: 16,
formatter: function(params) {
if (params.name !== '') {
@@ -413,6 +403,7 @@
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
drawEfficiencyChart() {
+ const data = this.efficiencyData
const colorArray = [
{
top: '#EA967B',
@@ -431,14 +422,11 @@
bottom: '#8DCCEF'
}
]
- const data = this.efficiencyData
- const defaultData = []
const dataMax = data.length > 0 ? +data.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浠�
- data.forEach(item => defaultData.push(yAxisMax))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -482,7 +470,7 @@
},
show: true,
min: 0,
- max: 'dataMax',
+ max: dataMax,
interval: yAxisInterval,
type: 'value',
axisTick: {
@@ -627,17 +615,15 @@
top: 25,
orient: 'vertical',
right: 0,
- // bottom: "0",
itemWidth: 14,
itemHeight: 14,
icon: 'roundRect',
itemGap: 15,
textStyle: {
color: 'rgba(0,0,0,.45)',
- fontSize: 14,
- padding: [0, 0, 0, 0]
+ fontSize: 14
},
- data: ['鍚堟牸', '绂佺敤', '闄愮敤']
+ data: ['鍚堟牸', '闄愮敤', '绂佺敤']
},
grid: {
containLabel: true
@@ -645,7 +631,6 @@
series: [
{
type: 'pie',
- // selectedMode: "single",
radius: this.pieChartRadius,
center: ['45%', '60%'],
color: [
@@ -657,8 +642,6 @@
position: 'outside',
show: true,
color: 'rgba(0,0,0,.45)',
- // textBorderColor: 'inherit',
- // textBorderWidth: 1,
fontSize: 16,
formatter: function(params) {
if (params.name !== '') {
@@ -734,7 +717,6 @@
series: [
{
type: 'pie',
- // selectedMode: "single",
radius: this.pieChartRadius,
center: ['45%', '60%'],
color: [
@@ -795,14 +777,6 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- const defaultData = []
- 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))
- console.log('bar', this.barChartData)
let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE']
let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF']
const option = {
@@ -933,7 +907,8 @@
barWidth: 26,
barGap: '-100%',
data: this.barChartData
- }]
+ }
+ ]
}
option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
@@ -957,10 +932,20 @@
const option = {
color: ['#1890FF', '#2EC35C'],
tooltip: {
- confine: true,
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
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 + '%'
+ 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
}
},
grid: {
@@ -1061,47 +1046,49 @@
show: false
}
}],
- series: [{
- type: 'bar',
- barWidth: 20,
- barGap: '0%',
- itemStyle: { barBorderRadius: 4 },
- name: 'OEE',
- data: this.doubleBarChartData.oeeList,
- label: {
- show: true,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
- },
- position: 'top',
- textStyle: {
- color: 'rgba(0,0,0,.45)',
- fontSize: 10
+ series: [
+ {
+ type: 'bar',
+ barWidth: 20,
+ barGap: '0%',
+ itemStyle: { barBorderRadius: 4 },
+ name: 'OEE',
+ data: this.doubleBarChartData.oeeList,
+ label: {
+ show: true,
+ lineHeight: 10,
+ formatter: params => {
+ if (+params.value === 0) return ''
+ else return params.value
+ },
+ position: 'top',
+ textStyle: {
+ color: 'rgba(0,0,0,.45)',
+ fontSize: 10
+ }
+ }
+ },
+ {
+ type: 'bar',
+ barWidth: 20,
+ barGap: '0%',
+ itemStyle: { barBorderRadius: 4 },
+ name: 'TEEP',
+ data: this.doubleBarChartData.utilizationList,
+ label: {
+ show: true,
+ lineHeight: 10,
+ formatter: params => {
+ if (+params.value === 0) return ''
+ else return params.value
+ },
+ position: 'inside',
+ textStyle: {
+ color: 'rgba(0,0,0,.45)',
+ fontSize: 10
+ }
}
}
- }, {
- type: 'bar',
- barWidth: 20,
- barGap: '0%',
- itemStyle: { barBorderRadius: 4 },
- name: 'TEEP',
- data: this.doubleBarChartData.utilizationList,
- label: {
- show: true,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
- },
- position: 'inside',
- textStyle: {
- color: 'rgba(0,0,0,.45)',
- fontSize: 10
- }
- }
- }
]
}
this.doubleBarChart.setOption(option, true)
@@ -1168,14 +1155,6 @@
<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;
--
Gitblit v1.9.3