From 8e75a78f55d60565eb48b25eafd4eb07939ce2cc Mon Sep 17 00:00:00 2001
From: zenglf <18502938215@163.com>
Date: 星期四, 28 九月 2023 14:09:05 +0800
Subject: [PATCH] Merge branch 'master' into develop
---
src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysisBar.vue | 663 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 663 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysisBar.vue b/src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysisBar.vue
new file mode 100644
index 0000000..2cedc86
--- /dev/null
+++ b/src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysisBar.vue
@@ -0,0 +1,663 @@
+<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>
+</template>
+
+<script>
+ import * as echarts from 'echarts'
+ export default {
+ name: 'comparativeAnalysisBar',
+ props:{
+ dataList:''
+
+ },
+ data(){
+ return{
+ OpenCloseList:[],
+ openRate:[],
+ utilizationRate:[],
+ openLong:[],
+ closeLong:[],
+ equipmentList:[]
+ }
+ },
+ created(){
+
+ },
+ 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 = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: "shadow",
+ textStyle: {
+ color: "#fff"
+ }
+
+ }
+ },
+ legend: {
+ x: '4%',
+ top: '11%',
+ textStyle: {
+ color: '#90979c'
+ },
+ color: ['#6496e9', '#4fe1c5'],
+ data: ['寮�鏈虹巼', '鍒╃敤鐜�']
+ },
+ 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,
+ 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],
+ // barCategoryGap: '20%',
+ // barGap : '-10%',
+ markPoint : {
+ data : [
+ {type : 'max', name: '鏈�澶у��',symbolSize:70},
+ {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ ]
+ },
+ 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"
+ },
+ {
+ offset:1,
+ color:"#4ecee1"
+ }],false)
+ },
+ barBorderRadius: [5, 5, 0, 0],
+ }
+ },
+ data: [0],
+ markPoint : {
+ data : [
+ {type : 'max', name: '鏈�澶у��',symbolSize:70},
+ {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ ]
+ },
+ 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",
+ textStyle: {
+ color: "#fff"
+ }
+
+ }
+ },
+ legend: {
+ x: '4%',
+ top: '11%',
+ textStyle: {
+ color: '#90979c'
+ },
+ color:['#6496e9','#b4b8cc'],
+ data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿']
+ },
+ 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,
+ 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],
+ // barCategoryGap: '20%',
+ // barGap : '-10%',
+ markPoint : {
+ data : [
+ {type : 'max', name: '鏈�澶у��',symbolSize:70},
+ {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ ]
+ },
+ 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"
+ },
+ {
+ offset:1,
+ color:"#b4b8cc"
+ }],false)
+ },
+ barBorderRadius: [5, 5, 0, 0],
+ }
+ },
+ data: [0],
+ markPoint : {
+ data : [
+ {type : 'max', name: '鏈�澶у��',symbolSize:70},
+ {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ ]
+ },
+ 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()
+ })
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3