From 3a097696dbc536ad29ccf60b7cf381a08e1bebf0 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 26 六月 2025 17:41:30 +0800
Subject: [PATCH] 1、设备日利用率以及设备日利用率对比页面优化图表加载展示区域及代码 2、调整操作工终端登录页背景图片
---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue | 526 ++++++++++++++++-----------------------------------------
1 files changed, 149 insertions(+), 377 deletions(-)
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
index 2cedc86..b8e1c50 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
@@ -1,51 +1,52 @@
<template>
- <div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll">
- <div id="compAnalBar1" style="flex: 1;"></div>
- <div id="compAnalBar2" style="flex: 1;"></div>
- </div>
+ <div style="height: 100%;overflow: auto">
+ <div id="compAnalBar1" style="height: 400px"></div>
+ <div id="compAnalBar2" style="height: 400px"></div>
+ </div>
</template>
<script>
import * as echarts from 'echarts'
+
export default {
name: 'comparativeAnalysisBar',
- props:{
- dataList:''
+ props: {
+ dataList: ''
},
- data(){
- return{
- OpenCloseList:[],
- openRate:[],
- utilizationRate:[],
- openLong:[],
- closeLong:[],
- equipmentList:[]
+ data() {
+ return {
+ OpenCloseList: [],
+ openRate: [],
+ utilizationRate: [],
+ openLong: [],
+ closeLong: [],
+ equipmentList: []
}
},
- created(){
+ created() {
},
- watch:{
- dataList(val){
+ watch: {
+ dataList(val) {
this.OpenCloseList = val
this.drawTu()
- },
+ }
},
mounted() {
this.drawTu()
},
- methods:{
- drawTu(){
- let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
- let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
- let compAnalBarOption1 = {
+ methods: {
+ drawTu() {
+ let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
+ let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
+ let compAnalBarOption1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
textStyle: {
- color: "#fff"
+ color: '#fff'
}
}
@@ -60,48 +61,42 @@
data: ['寮�鏈虹巼', '鍒╃敤鐜�']
},
toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true,name:'璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�'}
+ show: true,
+ feature: {
+ mark: { show: true },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true, name: '璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�' }
}
},
calculable: true,
grid: {
borderWidth: 0,
top: 110,
- bottom: 95,
+ bottom: 110,
textStyle: {
- color: "#fff"
+ color: '#fff'
}
},
xAxis: [
{
type: 'category',
splitLine: {
- "show": false
+ 'show': false
},
axisTick: {
- "show": false
+ 'show': false
},
splitArea: {
show: false
},
- boundaryGap : true,
- axisLabel : {
- interval : 0,
- rotate : 0,
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ rotate: 45,
show: true,
- wigth:20,
- splitNumber: 8,
- textStyle: {
- fontFamily: "寰蒋闆呴粦",
- fontSize: 12
- }
},
- data : [0]
+ data: [0]
}
],
yAxis: [
@@ -137,14 +132,14 @@
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
- color: "#d3dee5"
+ color: '#d3dee5'
},
textStyle: {
- color: "#fff"
+ color: '#fff'
},
- borderColor: "#90979c"
+ borderColor: '#90979c'
}, {
- type: "inside",
+ type: 'inside',
show: true,
height: 15,
start: 1,
@@ -160,274 +155,80 @@
normal: {
color: function(params) {
let colorList = [
- ["#6496e9","#6bded3"],
- // ["#849db8","#b4b8cc"],
- // ["#4fe1c5","#4ecee1"],
- // // ["#9978fa","#88a1fa"],
- // ["#ffbb65","#fdc68b"],
- ];
- // return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:'#6496e9'
+ ['#6496e9', '#6bded3']
+ ]
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#6496e9'
},
{
- offset:1,
- color:"#6bded3"
- }],false)
+ offset: 1,
+ color: '#6bded3'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- // barCategoryGap: '20%',
- // barGap : '-10%',
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
},
{
name: '鍒╃敤鐜�',
type: 'bar',
- //barWidth: 30,
barWidth: 25,
- // barCategoryGap: '20%',
- // barGap : '-10%',
itemStyle: {
normal: {
color: function(params) {
let colorList = [
- // ["#6496e9","#6bded3"],
- // ["#849db8","#b4b8cc"],
- ["#4fe1c5","#4ecee1"],
- // ["#9978fa","#88a1fa"],
- // ["#ffbb65","#fdc68b"],
- ];
+ ['#4fe1c5', '#4ecee1']
+ ]
// return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:"#4fe1c5"
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#4fe1c5'
},
{
- offset:1,
- color:"#4ecee1"
- }],false)
+ offset: 1,
+ color: '#4ecee1'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
}
]
- };
- // let compAnalBarOption2 = {
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: "shadow",
- // textStyle: {
- // color: "#fff"
- // }
- //
- // }
- // },
- // legend: {
- // x: '4%',
- // top: '11%',
- // textStyle: {
- // color: '#90979c'
- // },
- // data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿'],
- // color:['#6496e9','#b4b8cc']
- // },
- // toolbox: {
- // show : true,
- // feature : {
- // mark : {show: true},
- // magicType : {show: true, type: ['line', 'bar']},
- // restore : {show: true},
- // saveAsImage : {show: true,name:'璁惧杩愯鏃堕棿瀵规瘮鍒嗘瀽鍥�'}
- // }
- // },
- // calculable: true,
- // grid: {
- // borderWidth: 0,
- // top: 110,
- // bottom: 95,
- // textStyle: {
- // color: "#fff"
- // }
- // },
- // xAxis: [
- // {
- // type: 'category',
- // splitLine: {
- // "show": false
- // },
- // axisTick: {
- // "show": false
- // },
- // splitArea: {
- // show: false
- // },
- // boundaryGap : true,
- // axisLabel : {
- // interval : 0,
- // rotate : 0,
- // show: true,
- // wigth:20,
- // splitNumber: 8,
- // textStyle: {
- // fontFamily: "寰蒋闆呴粦",
- // fontSize: 12
- // }
- // },
- // data : [0]
- // }
- // ],
- // yAxis: [
- // {
- // type: 'value',
- // splitLine: {
- // show: false
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#90979c'
- // }
- // },
- // axisTick: {
- // show: false
- // },
- // axisLabel: {
- // interval: 0
- //
- // },
- // splitArea: {
- // show: false
- // }
- // }
- // ],
- // dataZoom: [{
- // show: true,
- // height: 30,
- // xAxisIndex: [0],
- // bottom: 30,
- // start: 0,
- // end: 100,
- // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
- // handleSize: '110%',
- // handleStyle: {
- // color: "#d3dee5"
- // },
- // textStyle: {
- // color: "#fff"
- // },
- // borderColor: "#90979c"
- // }, {
- // type: "inside",
- // show: true,
- // height: 15,
- // start: 1,
- // end: 35
- // }],
- // series: [
- // {
- // name: '寮�鏈烘椂闂�',
- // type: 'bar',
- // //barWidth: 30,
- // barWidth: 25,
- // // stack: 'sum',
- // // barCategoryGap: '20%',
- // itemStyle: {
- // normal: {
- // color: function(params) {
- // let colorList = [
- // ["#6496e9","#6bded3"],
- // // ["#849db8","#b4b8cc"],
- // // ["#4fe1c5","#4ecee1"],
- // // // ["#9978fa","#88a1fa"],
- // // ["#ffbb65","#fdc68b"],
- // ];
- // // return colorList[params.dataIndex];
- // let colorItem = colorList[params.dataIndex];
- // return new echarts.graphic.LinearGradient(0,0,0,1,[{
- // offset:0,
- // color:'#6496e9'
- // },
- // {
- // offset:1,
- // color:"#6bded3"
- // }],false)
- // },
- // barBorderRadius: [5, 5, 0, 0],
- // }
- // },
- // data: [0]
- // },
- // {
- // name: '鍏虫満鏃堕棿',
- // type: 'bar',
- // //barWidth: 30,
- // barWidth: 25,
- // // stack: 'sum',
- // // barCategoryGap: '20%',
- // itemStyle: {
- // normal: {
- // color: function(params) {
- // let colorList = [
- // // ["#6496e9","#6bded3"],
- // ["#849db8","#b4b8cc"],
- // // ["#4fe1c5","#4ecee1"],
- // // // ["#9978fa","#88a1fa"],
- // // ["#ffbb65","#fdc68b"],
- // ];
- // // return colorList[params.dataIndex];
- // let colorItem = colorList[params.dataIndex];
- // return new echarts.graphic.LinearGradient(0,0,0,1,[{
- // offset:0,
- // color:'#849db8'
- // },
- // {
- // offset:1,
- // color:"#b4b8cc"
- // }],false)
- // },
- // barBorderRadius: [5, 5, 0, 0],
- // }
- // },
- // data: [0]
- // }
- // ]
- // };
+ }
let compAnalBarOption2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
textStyle: {
- color: "#fff"
+ color: '#fff'
}
}
@@ -438,52 +239,46 @@
textStyle: {
color: '#90979c'
},
- color:['#6496e9','#b4b8cc'],
+ color: ['#6496e9', '#b4b8cc'],
data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿']
},
toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true,name:'璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�'}
+ show: true,
+ feature: {
+ mark: { show: true },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true, name: '璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�' }
}
},
calculable: true,
grid: {
borderWidth: 0,
top: 110,
- bottom: 95,
+ bottom: 110,
textStyle: {
- color: "#fff"
+ color: '#fff'
}
},
xAxis: [
{
type: 'category',
splitLine: {
- "show": false
+ 'show': false
},
axisTick: {
- "show": false
+ 'show': false
},
splitArea: {
show: false
},
- boundaryGap : true,
- axisLabel : {
- interval : 0,
- rotate : 0,
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ rotate: 45,
show: true,
- wigth:20,
- splitNumber: 8,
- textStyle: {
- fontFamily: "寰蒋闆呴粦",
- fontSize: 12
- }
},
- data : [0]
+ data: [0]
}
],
yAxis: [
@@ -519,14 +314,14 @@
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
- color: "#d3dee5"
+ color: '#d3dee5'
},
textStyle: {
- color: "#fff"
+ color: '#fff'
},
- borderColor: "#90979c"
+ borderColor: '#90979c'
}, {
- type: "inside",
+ type: 'inside',
show: true,
height: 15,
start: 1,
@@ -542,100 +337,84 @@
normal: {
color: function(params) {
let colorList = [
- ["#6496e9","#6bded3"],
- // ["#849db8","#b4b8cc"],
- // ["#4fe1c5","#4ecee1"],
- // // ["#9978fa","#88a1fa"],
- // ["#ffbb65","#fdc68b"],
- ];
- // return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:'#6496e9'
+ ['#6496e9', '#6bded3']
+ ]
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#6496e9'
},
{
- offset:1,
- color:"#6bded3"
- }],false)
+ offset: 1,
+ color: '#6bded3'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- // barCategoryGap: '20%',
- // barGap : '-10%',
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
},
{
name: '鍏虫満鏃堕棿',
type: 'bar',
- //barWidth: 30,
barWidth: 25,
- // barCategoryGap: '20%',
- // barGap : '-10%',
itemStyle: {
normal: {
color: function(params) {
let colorList = [
- // ["#6496e9","#6bded3"],
- ["#849db8","#b4b8cc"],
- // ["#4fe1c5","#4ecee1"],
- // ["#9978fa","#88a1fa"],
- // ["#ffbb65","#fdc68b"],
- ];
- // return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:"#849db8"
+ ['#849db8', '#b4b8cc']
+ ]
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#849db8'
},
{
- offset:1,
- color:"#b4b8cc"
- }],false)
+ offset: 1,
+ color: '#b4b8cc'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
}
]
- };
- if(this.OpenCloseList != null){
+ }
+ if (this.OpenCloseList != null) {
this.equipmentList = []
- this.openRate =[]
- this.utilizationRate =[]
+ this.openRate = []
+ this.utilizationRate = []
this.openLong = []
this.closeLong = []
- for(var i = 0;i<this.OpenCloseList.length;i++){
- this.equipmentList.push(this.OpenCloseList[i].equipmentId)
- this.openRate.push((this.OpenCloseList[i].openRate*100).toFixed(2))
- // (this.openRate * 100).toFixed(2)
- this.utilizationRate.push((this.OpenCloseList[i].utilizationRate*100).toFixed(2))
- this.openLong.push(this.OpenCloseList[i].openLong)
- this.closeLong.push(this.OpenCloseList[i].closeLong)
+ for (var i = 0; i < this.OpenCloseList.length; i++) {
+ this.equipmentList.push(this.OpenCloseList[i].equipmentId)
+ this.openRate.push((this.OpenCloseList[i].openRate * 100).toFixed(2))
+ this.utilizationRate.push((this.OpenCloseList[i].utilizationRate * 100).toFixed(2))
+ this.openLong.push(this.OpenCloseList[i].openLong)
+ this.closeLong.push(this.OpenCloseList[i].closeLong)
}
compAnalBarOption1.xAxis[0].data = this.equipmentList
compAnalBarOption1.series[0].data = this.openRate
@@ -643,12 +422,9 @@
compAnalBarOption2.xAxis[0].data = this.equipmentList
compAnalBarOption2.series[0].data = this.openLong
compAnalBarOption2.series[1].data = this.closeLong
- compAnalBar1.setOption(compAnalBarOption1);
- compAnalBar2.setOption(compAnalBarOption2);
- }else{
- compAnalBar1.setOption(compAnalBarOption1);
- compAnalBar2.setOption(compAnalBarOption2);
}
+ compAnalBar1.setOption(compAnalBarOption1)
+ compAnalBar2.setOption(compAnalBarOption2)
window.addEventListener('resize', function() {
compAnalBar1.resize()
compAnalBar2.resize()
@@ -656,8 +432,4 @@
}
}
}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
--
Gitblit v1.9.3