From accebdce93486d3b4f26e55ffdea047549cce20c Mon Sep 17 00:00:00 2001
From: cuijian <cuijian@xalxzn.com>
Date: 星期一, 28 七月 2025 21:12:38 +0800
Subject: [PATCH] Merge branch 'master' of http://125.76.225.53:18448/r/xhj/vue_mdc_xhj
---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue | 440 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 440 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..7ac1639
--- /dev/null
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
@@ -0,0 +1,440 @@
+<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: {
+ type: Array
+ }
+ },
+ data() {
+ return {
+ compAnalBar1: null,
+ compAnalBar2: null
+ }
+ },
+ watch: {
+ dataList(val) {
+ this.drawTu()
+ }
+ },
+ mounted() {
+ this.drawTu()
+ window.addEventListener('resize', this.handleWindowResize)
+ },
+ 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',
+ 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']
+ ]
+ 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],
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
+ ]
+ },
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
+ ]
+ }
+ },
+ {
+ name: '鍒╃敤鐜�',
+ type: 'bar',
+ barWidth: 25,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ['#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)
+ },
+ 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'
+ },
+ 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']
+ ]
+ 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],
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
+ ]
+ },
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
+ ]
+ }
+ },
+ {
+ name: '鍏虫満鏃堕棿',
+ type: 'bar',
+ barWidth: 25,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ['#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)
+ },
+ barBorderRadius: [5, 5, 0, 0]
+ }
+ },
+ data: [0],
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
+ ]
+ },
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
+ ]
+ }
+ }
+ ]
+ }
+ 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()
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3