From cd6403dc8d9160d0bbbcb7b0f03f5ab96107eee2 Mon Sep 17 00:00:00 2001 From: danshihao Date: Thu, 11 Apr 2024 15:09:40 +0800 Subject: [PATCH] =?UTF-8?q?[update]=20echarts=E5=85=AC=E5=85=B1=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=8A=BD=E7=A6=BB=EF=BC=8C=E4=BA=95=E5=8F=A3=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=9B=91=E6=8E=A7=E8=A1=A8=E6=A0=BC=E8=B0=83=E6=95=B4?= =?UTF-8?q?UI=E7=9B=B8=E5=90=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/charts.js | 199 +++++++ .../systemSettings/SystemSettings.vue | 16 +- .../WellheadDataMonitoring.vue | 560 +++++++----------- 3 files changed, 417 insertions(+), 358 deletions(-) create mode 100644 src/utils/charts.js diff --git a/src/utils/charts.js b/src/utils/charts.js new file mode 100644 index 0000000..784513d --- /dev/null +++ b/src/utils/charts.js @@ -0,0 +1,199 @@ +// 折线图点base64 +export const lineSymbolBase64 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=' +const styleObj = { + // x轴颜色 + xAxisLineColor: 'rgba(108,128,151,0.4)', + // x轴文字颜色 + xAxisFontColor: '#86909C', + // y轴文字颜色 + yAxisFontColor: '#6C8097', + // 图例文字颜色 + legendFontColor: 'rgba(255, 255, 255, 0.96)' +} +// 公共配置 +export function generateBaseOption () { + return { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + // type: 'cross', + // label: { + // backgroundColor: '#6a7985' + // } + } + }, + legend: { + data: [], // 图例 + align: 'left', + width: '80%', + top: 0, + right: 0, + itemHeight: 2, + itemWidth: 12, + itemGap: 16, + textStyle: { + color: styleObj.legendFontColor + } + }, + grid: { + top: '30px', + left: '0px', + right: '10px', + bottom: '0px', + containLabel: true + }, + xAxis: [ + { + type: 'category', + // name: '', + // nameLocation: 'end', + // nameTextStyle: { + // color: '#6C8097', + // align: 'right', + // verticalAlign: 'top', + // padding: [8, 4, 0, 0] + // }, + data: [], // 横坐标 + boundaryGap: false, + // 刻度线不显示 + axisTick: { + show: false + }, + // 轴标签样式 + axisLabel: { + color: styleObj.xAxisFontColor, + hideOverlap: true, + showMinLabel: false, + showMaxLabel: false + }, + // 轴线样式 + axisLine: { + lineStyle: { + color: styleObj.xAxisLineColor + } + } + } + ], + yAxis: [ + { + type: 'value', + name: '', + // 名称样式 + nameTextStyle: { + color: styleObj.yAxisFontColor + // padding: [0, 0, 0, 5] // 根据情况调整 + }, + // 轴标签样式 + axisLabel: { + color: styleObj.yAxisFontColor + }, + // 轴线样式 + splitLine: { + lineStyle: { + color: styleObj.xAxisLineColor, + type: 'dashed' + } + } + } + ] + } +} + +// 初始化 实时示功图 +// { +// series: [ +// { +// name: '上冲程', +// type: 'line', +// stack: 'upStroke', +// emphasis: { +// focus: 'series' +// }, +// color: '#FF5353', +// symbol: 'none', +// smooth: true, +// areaStyle: { +// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ +// { offset: 0, color: 'rgba(255,83,83,0.2)' }, +// { offset: 1, color: 'rgba(255,83,83,0)' } +// ]) +// }, +// data: data['上冲程'] +// }, +// { +// name: '下冲程', +// type: 'line', +// stack: 'downStroke', +// emphasis: { +// focus: 'series' +// }, +// color: '#0094FF', +// symbol: 'none', +// smooth: true, +// areaStyle: { +// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ +// { offset: 0, color: 'rgba(0,148,255,0.2)' }, +// { offset: 1, color: 'rgba(0,148,255,0)' } +// ]) +// }, +// data: data['下冲程'] +// } +// ] +// } +// { +// series: [ +// { +// name: '产油量(t/d)', +// type: 'line', +// stack: 'oilProduction', +// color: '#2EE4FD', +// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=', +// symbolSize: 15, +// smooth: true, +// areaStyle: { +// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ +// { offset: 0, color: 'rgba(46,228,253,0.2)' }, +// { offset: 1, color: 'rgba(46,228,253,0)' } +// ]) +// }, +// data: data.oilProduction +// }, +// { +// name: '产液量(m³/d)', +// type: 'line', +// stack: 'liquidProduction', +// color: '#0094FF', +// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=', +// symbolSize: 15, +// smooth: true, +// areaStyle: { +// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ +// { offset: 0, color: 'rgba(0,148,255,0.2)' }, +// { offset: 1, color: 'rgba(0,148,255,0)' } +// ]) +// }, +// data: data.liquidProduction +// } +// ] +// } +// { +// series: [ +// { +// name: '最大载荷(KN)', +// type: 'line', +// stack: 'maxLoad', +// color: '#FF5353', +// symbol: 'none', +// data: data['最大载荷'] +// }, +// { +// name: '最小载荷(KN)', +// type: 'line', +// stack: 'minLoad', +// color: '#FFC97A', +// symbol: 'none', +// data: data['最小载荷'] +// } +// ] +// } diff --git a/src/views/systemOverview/systemSettings/SystemSettings.vue b/src/views/systemOverview/systemSettings/SystemSettings.vue index b54931f..fca3852 100644 --- a/src/views/systemOverview/systemSettings/SystemSettings.vue +++ b/src/views/systemOverview/systemSettings/SystemSettings.vue @@ -65,10 +65,9 @@
{{ text || text === 0 ? text : global.emptyLine }}
 @@ -160,10 +159,9 @@
{{ text || text === 0 ? text : global.emptyLine }}
 @@ -562,4 +560,10 @@ export default { } } } +.width-118 { + width: 118px; +} +.width-76 { + width: 76px; +} diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue index 6c528f8..a7266a0 100644 --- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue +++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue @@ -129,32 +129,54 @@
- - +
+ + - - 确认 - 查看 - - + + 确认 + 查看 + + + +
+ + + +
+
+ { + leftTable.scrollTop = e.target.scrollTop +} +const leftTableScroll = (e) => { + borderTable.scrollTop = e.target.scrollTop +} export default { name: 'WellheadDataMonitoring', components: { CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard }, @@ -501,10 +533,22 @@ export default { }, mounted () { this.searchQuery() + this.$nextTick(() => { + /* 处理左侧表格滚动两个表格滚动同步 begin */ + // 还原UI图：左侧两个表格，其中一个只显示滚动条，任意一个滚动，两个表格双向绑定滚动事件 + borderTable = this.$refs.borderTable.$el.querySelector('.ant-table-body') + leftTable = this.$refs.leftTable.$el.querySelector('.ant-table-body') + borderTable.addEventListener('scroll', borderTableScroll) + leftTable.addEventListener('scroll', leftTableScroll) + /* 处理左侧表格滚动两个表格滚动同步 end */ + }) }, beforeDestroy () { // 离开页面前清除定时器 clearInterval(this.timer) + // 离开时清除事件 + borderTable.remove('scroll', borderTableScroll) + leftTable.remove('scroll', leftTableScroll) }, methods: { searchQuery () { @@ -581,130 +625,47 @@ export default { this.$refs.productionMonitoring.updateMyChartOption() return } - this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - // type: 'cross', - // label: { - // backgroundColor: '#6a7985' - // } - } - }, - legend: { - data: ['上冲程', '下冲程'], - align: 'left', - width: '80%', - top: 0, - right: 0, - itemHeight: 2, - itemWidth: 12, - itemGap: 16, - textStyle: { - color: 'rgba(255,255,255,0.96)' - } - }, - grid: { - top: '30px', - left: '0px', - right: '10px', - bottom: '0px', - containLabel: true - }, - xAxis: [ - { - type: 'category', - // name: '单位(m)', - // nameLocation: 'end', - // nameTextStyle: { - // color: '#6C8097', - // align: 'right', - // verticalAlign: 'top', - // padding: [8, 4, 0, 0] - // }, - data: data['X轴'], - boundaryGap: false, - // 刻度线不显示 - axisTick: { - show: false - }, - // 轴标签样式 - axisLabel: { - color: '#86909C', - hideOverlap: true, - showMinLabel: false, - showMaxLabel: false - }, - // 轴线样式 - axisLine: { - lineStyle: { - color: '#19314B' - } - } - } - ], - yAxis: [ - { - type: 'value', - name: '载荷(KN)', - // 名称样式 - nameTextStyle: { - color: '#6C8097', - padding: [0, 0, 0, 5] - }, - // 轴标签样式 - axisLabel: { - color: '#6C8097' - }, - // 轴线样式 - splitLine: { - lineStyle: { - color: '#152F49', - type: 'dashed' - } - } - } - ], - series: [ - { - name: '上冲程', - type: 'line', - stack: 'upStroke', - emphasis: { - focus: 'series' - }, - color: '#FF5353', - symbol: 'none', - smooth: true, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(255,83,83,0.2)' }, - { offset: 1, color: 'rgba(255,83,83,0)' } - ]) - }, - data: data['上冲程'] + // 获取基础配置 + const legendData = ['上冲程', '下冲程'] + const option = generateBaseOption() + option.legend.data = legendData + option.xAxis.data = data['X轴'] + option.yAxis[0].name = '载荷(KN)' + option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5] + option.series = [ + { + name: legendData[0], + type: 'line', + stack: 'upStroke', + color: '#FF5353', + symbol: 'none', + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(255,83,83,0.2)' }, + { offset: 1, color: 'rgba(255,83,83,0)' } + ]) }, - { - name: '下冲程', - type: 'line', - stack: 'downStroke', - emphasis: { - focus: 'series' - }, - color: '#0094FF', - symbol: 'none', - smooth: true, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(0,148,255,0.2)' }, - { offset: 1, color: 'rgba(0,148,255,0)' } - ]) - }, - data: data['下冲程'] - } - ] - }) + data: data['上冲程'] + }, + { + name: legendData[1], + type: 'line', + stack: 'downStroke', + color: '#0094FF', + symbol: 'none', + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(0,148,255,0.2)' }, + { offset: 1, color: 'rgba(0,148,255,0)' } + ]) + }, + data: data['下冲程'] + } + ] + // 设置数据 + this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option) }, // 初始化 功图计产监控 initProductionMonitoring (data) { @@ -717,119 +678,49 @@ export default { this.$refs.productionMonitoring.updateMyChartOption() return } - this.$refs.productionMonitoring.updateMyChartOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - // type: 'cross', - // label: { - // backgroundColor: '#6a7985' - // } - } - }, - legend: { - data: ['产油量(t/d)', '产液量(m³/d)'], - align: 'left', - width: '80%', - top: 0, - right: 0, - itemHeight: 2, - itemWidth: 12, - itemGap: 16, - textStyle: { - color: 'rgba(255,255,255,0.96)' - } - }, - grid: { - top: '30px', - left: '0px', - right: '10px', - bottom: '0px', - containLabel: true - }, - xAxis: [ - { - type: 'category', - data: data.xAxis, - boundaryGap: false, - // 刻度线不显示 - axisTick: { - show: false - }, - // 轴标签样式 - axisLabel: { - color: '#86909C', - hideOverlap: true, - showMinLabel: false, - showMaxLabel: false - }, - // 轴线样式 - axisLine: { - lineStyle: { - color: '#19314B' - } - } - } - ], - yAxis: [ - { - type: 'value', - name: '产油量(t/d) / 产液量(m³/d)', - // 名称样式 - nameTextStyle: { - color: '#6C8097', - align: 'center', - padding: [0, 0, 0, 105] - }, - // 轴标签样式 - axisLabel: { - color: '#6C8097' - }, - // 轴线样式 - splitLine: { - lineStyle: { - color: '#152F49', - type: 'dashed' - } - } - } - ], - series: [ - { - name: '产油量(t/d)', - type: 'line', - stack: 'oilProduction', - color: '#2EE4FD', - symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=', - symbolSize: 15, - smooth: true, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(46,228,253,0.2)' }, - { offset: 1, color: 'rgba(46,228,253,0)' } - ]) - }, - data: data.oilProduction + // 获取基础配置 + const legendData = ['产油量(t/d)', '产液量(m³/d)'] + const option = generateBaseOption() + option.legend.data = legendData + option.xAxis.data = data['X轴'] + option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)' + option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105] + option.series = [ + { + name: legendData[0], + type: 'line', + stack: 'oilProduction', + color: '#2EE4FD', + symbol: lineSymbolBase64, + symbolSize: 15, + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(46,228,253,0.2)' }, + { offset: 1, color: 'rgba(46,228,253,0)' } + ]) }, - { - name: '产液量(m³/d)', - type: 'line', - stack: 'liquidProduction', - color: '#0094FF', - symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=', - symbolSize: 15, - smooth: true, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(0,148,255,0.2)' }, - { offset: 1, color: 'rgba(0,148,255,0)' } - ]) - }, - data: data.liquidProduction - } - ] - }) + data: data.oilProduction + }, + { + name: legendData[1], + type: 'line', + stack: 'liquidProduction', + color: '#0094FF', + symbol: lineSymbolBase64, + symbolSize: 15, + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(0,148,255,0.2)' }, + { offset: 1, color: 'rgba(0,148,255,0)' } + ]) + }, + data: data.liquidProduction + } + ] + // 设置数据 + this.$refs.productionMonitoring.updateMyChartOption(option) }, // 初始化 载荷分布图 initLoadDistribution (data) { @@ -842,102 +733,33 @@ export default { this.$refs.productionMonitoring.updateMyChartOption() return } - this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - // type: 'cross', - // label: { - // backgroundColor: '#6a7985' - // } - } + // 获取基础配置 + const legendData = ['最大载荷(KN)', '最小载荷(KN)'] + const option = generateBaseOption() + option.legend.data = legendData + option.xAxis.data = data['X轴'] + option.yAxis[0].name = '载荷(KN)' + option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5] + option.series = [ + { + name: legendData[0], + type: 'line', + stack: 'maxLoad', + color: '#FF5353', + symbol: 'none', + data: data['最大载荷'] }, - legend: { - data: ['最大载荷(KN)', '最小载荷(KN)'], - align: 'left', - width: '80%', - top: 0, - right: 0, - itemHeight: 2, - itemWidth: 12, - itemGap: 16, - textStyle: { - color: 'rgba(255,255,255,0.96)' - } - }, - grid: { - top: '30px', - left: '0px', - right: '10px', - bottom: '0px', - containLabel: true - }, - xAxis: [ - { - type: 'category', - data: data['X轴'], - boundaryGap: false, - // 刻度线不显示 - axisTick: { - show: false - }, - // 轴标签样式 - axisLabel: { - color: '#86909C', - hideOverlap: true, - showMinLabel: false, - showMaxLabel: false - }, - // 轴线样式 - axisLine: { - lineStyle: { - color: '#19314B' - } - } - } - ], - yAxis: [ - { - type: 'value', - name: '载荷(KN)', - // 名称样式 - nameTextStyle: { - color: '#6C8097', - padding: [0, 0, 0, 5] - }, - // 轴标签样式 - axisLabel: { - color: '#6C8097' - }, - // 轴线样式 - splitLine: { - lineStyle: { - color: '#152F49', - type: 'dashed' - } - } - } - ], - series: [ - { - name: '最大载荷(KN)', - type: 'line', - stack: 'maxLoad', - color: '#FF5353', - symbol: 'none', - data: data['最大载荷'] - }, - { - name: '最小载荷(KN)', - type: 'line', - stack: 'minLoad', - color: '#FFC97A', - symbol: 'none', - data: data['最小载荷'] - } - ] - }) + { + name: legendData[1], + type: 'line', + stack: 'minLoad', + color: '#FFC97A', + symbol: 'none', + data: data['最小载荷'] + } + ] + // 设置数据 + this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption(option) }, // 油井工作状态 handleChangeWorkingCondition (status) { @@ -1115,7 +937,19 @@ export default { height: 100px; background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png"); } +.left-table { + display: inline-block; + margin-right: -7px; + width: calc(100% - 100px); + position: relative; + +} .right-fixed-table { + display: inline-block; + box-shadow: -6px 0 12px -4px black; + position: relative; + z-index: 2; + width: 107px; /deep/ th { height: 40px; border-radius: 0; @@ -1144,4 +978,26 @@ export default { } } } +// 左侧表格的滚动条 +.left-table-scrollbar { + position: absolute; + right: 10px; + top: 40px; + bottom: 0; + width: 6px; + overflow: hidden; + .border-table { + position: absolute; + z-index: 3; + right: 0; + top: 0; + bottom: 0; + width: 10px; + // 仅用于滚动条的表格，去掉背景色 + /deep/ .ant-table.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body, + /deep/ .ant-table .ant-table-tbody { + background: transparent; + } + } +}