From d0223045d2dd1cccc26c995c972e80e60bd19b26 Mon Sep 17 00:00:00 2001
From: zhangherong <571457620@qq.com>
Date: 星期一, 02 六月 2025 08:45:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue | 541 +++++++++++++++--------------------------------------
1 files changed, 159 insertions(+), 382 deletions(-)
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
index 2cedc86..7ac1639 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
@@ -1,51 +1,46 @@
<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 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>
</template>
<script>
import * as echarts from 'echarts'
+
export default {
name: 'comparativeAnalysisBar',
- props:{
- dataList:''
-
- },
- data(){
- return{
- OpenCloseList:[],
- openRate:[],
- utilizationRate:[],
- openLong:[],
- closeLong:[],
- equipmentList:[]
+ props: {
+ dataList: {
+ type: Array
}
},
- created(){
-
+ data() {
+ return {
+ compAnalBar1: null,
+ compAnalBar2: null
+ }
},
- watch:{
- dataList(val){
- this.OpenCloseList = val
+ watch: {
+ dataList(val) {
this.drawTu()
- },
+ }
},
mounted() {
this.drawTu()
+ window.addEventListener('resize', this.handleWindowResize)
},
- methods:{
- drawTu(){
- let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
- let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
- let compAnalBarOption1 = {
+ methods: {
+ drawTu() {
+ this.compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
+ this.compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
+ let compAnalBarOption1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
textStyle: {
- color: "#fff"
+ color: '#fff'
}
}
@@ -60,12 +55,12 @@
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,
@@ -74,34 +69,34 @@
top: 110,
bottom: 95,
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: 0,
show: true,
- wigth:20,
+ wigth: 20,
splitNumber: 8,
textStyle: {
- fontFamily: "寰蒋闆呴粦",
+ 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,276 +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"],
- ];
- // return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:"#4fe1c5"
+ ['#4fe1c5', '#4ecee1']
+ ]
+ 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'
}
-
}
},
legend: {
@@ -438,16 +237,16 @@
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,
@@ -456,34 +255,34 @@
top: 110,
bottom: 95,
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: 0,
show: true,
- wigth:20,
+ wigth: 20,
splitNumber: 8,
textStyle: {
- fontFamily: "寰蒋闆呴粦",
+ fontFamily: '寰蒋闆呴粦',
fontSize: 12
}
},
- data : [0]
+ data: [0]
}
],
yAxis: [
@@ -519,14 +318,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,117 +341,95 @@
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){
- this.equipmentList = []
- 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)
- }
- compAnalBarOption1.xAxis[0].data = this.equipmentList
- compAnalBarOption1.series[0].data = this.openRate
- compAnalBarOption1.series[1].data = this.utilizationRate
- 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);
}
- window.addEventListener('resize', function() {
- compAnalBar1.resize()
- compAnalBar2.resize()
- })
+ console.log('dataList', this.dataList)
+ if (this.dataList != null) {
+ const equipmentList = this.dataList.map(item => item.equipmentId)
+ const openRate = this.dataList.map(item => (item.openRate * 100).toFixed(2))
+ const utilizationRate = this.dataList.map(item => (item.utilizationRate * 100).toFixed(2))
+ const openLong = this.dataList.map(item => item.openLong)
+ const closeLong = this.dataList.map(item => item.closeLong)
+
+ compAnalBarOption1.xAxis[0].data = equipmentList
+ compAnalBarOption1.series[0].data = openRate
+ compAnalBarOption1.series[1].data = utilizationRate
+
+ compAnalBarOption2.xAxis[0].data = equipmentList
+ compAnalBarOption2.series[0].data = openLong
+ compAnalBarOption2.series[1].data = closeLong
+ }
+ this.compAnalBar1.setOption(compAnalBarOption1,true)
+ this.compAnalBar2.setOption(compAnalBarOption2,true)
+ },
+
+ handleWindowResize() {
+ this.compAnalBar1.resize()
+ this.compAnalBar2.resize()
}
}
}
--
Gitblit v1.9.3