[update] echarts公共配置抽离，井口数据监控表格调整UI相同
This commit is contained in:
danshihao
@@ -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['最小载荷']
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
@@ -65,10 +65,9 @@
|
|||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||||
<div class="table-text"
|
<div class="table-text"
|
||||||
style="width: 76px;"
|
|
||||||
:class="{
|
:class="{
|
||||||
'tag-blue': record.userType === userType.admin.value,
|
'tag-blue width-76': record.userType === userType.admin.value,
|
||||||
'tag-cyan': record.userType === userType.common.value
|
'tag-cyan width-76': record.userType === userType.common.value
|
||||||
}">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
}">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
@@ -160,10 +159,9 @@
|
|||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||||
<div class="table-text"
|
<div class="table-text"
|
||||||
style="width: 118px;"
|
|
||||||
:class="{
|
:class="{
|
||||||
'tag-blue': text === msgType.hostToDevice.label,
|
'tag-blue width-118': text === msgType.hostToDevice.label,
|
||||||
'tag-cyan': text === msgType.deviceToHost.label
|
'tag-cyan width-118': text === msgType.deviceToHost.label
|
||||||
}">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
}">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
@@ -562,4 +560,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.width-118 {
|
||||||
|
width: 118px;
|
||||||
|
}
|
||||||
|
.width-76 {
|
||||||
|
width: 76px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -129,32 +129,54 @@
|
|||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<div>
|
<div>
|
||||||
<a-table
|
<div class="left-table">
|
||||||
style="width: calc(100% - 100px);display: inline-block;"
|
<a-table
|
||||||
bordered
|
bordered
|
||||||
ref="leftTable"
|
ref="leftTable"
|
||||||
size="middle"
|
size="middle"
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
:scroll="{y:120}"
|
:scroll="{y:120}"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:dataSource="dataSource"
|
:dataSource="dataSource"
|
||||||
:pagination="false">
|
:pagination="false">
|
||||||
<template slot="text" slot-scope="text">
|
<template slot="text" slot-scope="text">
|
||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
<span slot="action" slot-scope="text, record">
|
||||||
<a @click="handleConfirm(record)" :disabled="record.disabledConfirm" class="confirm mr-10">确认</a>
|
<a @click="handleConfirm(record)" :disabled="record.disabledConfirm" class="confirm mr-10">确认</a>
|
||||||
<a @click="handleShow(record)" class="show">查看</a>
|
<a @click="handleShow(record)" class="show">查看</a>
|
||||||
</span>
|
</span>
|
||||||
</a-table>
|
</a-table>
|
||||||
|
<!-- 左侧表格的滚动条 -->
|
||||||
|
<div class="left-table-scrollbar">
|
||||||
|
<a-table
|
||||||
|
bordered
|
||||||
|
class="border-table"
|
||||||
|
ref="borderTable"
|
||||||
|
size="middle"
|
||||||
|
rowKey="id"
|
||||||
|
:showHeader='false'
|
||||||
|
:scroll="{y:120}"
|
||||||
|
:columns="[columns[0]]"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:pagination="false">
|
||||||
|
<template slot="text" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||||
|
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 右侧固定表格 -->
|
||||||
<a-table
|
<a-table
|
||||||
bordered
|
bordered
|
||||||
class="right-fixed-table"
|
class="right-fixed-table"
|
||||||
style='display: inline-block; width: 100px'
|
|
||||||
ref="rightTable"
|
ref="rightTable"
|
||||||
size="middle"
|
size="middle"
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
@@ -182,6 +204,7 @@ import * as echarts from 'echarts'
|
|||||||
import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
|
import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
|
||||||
import { wellheadType } from '@/enums/commonEnums'
|
import { wellheadType } from '@/enums/commonEnums'
|
||||||
import CommonEmpty from '@comp/CommonEmpty'
|
import CommonEmpty from '@comp/CommonEmpty'
|
||||||
|
import { generateBaseOption, lineSymbolBase64 } from '@/utils/charts'
|
||||||
|
|
||||||
// 默认写死数据
|
// 默认写死数据
|
||||||
const staticData = {
|
const staticData = {
|
||||||
@@ -317,6 +340,15 @@ const staticMonitoringChart = {
|
|||||||
liquidProduction: [40, 25, 40, 50, 40, 60]
|
liquidProduction: [40, 25, 40, 50, 40, 60]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 左侧表格和滚动条表格dom和滚动事件
|
||||||
|
let borderTable = null
|
||||||
|
let leftTable = null
|
||||||
|
const borderTableScroll = (e) => {
|
||||||
|
leftTable.scrollTop = e.target.scrollTop
|
||||||
|
}
|
||||||
|
const leftTableScroll = (e) => {
|
||||||
|
borderTable.scrollTop = e.target.scrollTop
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
name: 'WellheadDataMonitoring',
|
name: 'WellheadDataMonitoring',
|
||||||
components: { CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
|
components: { CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
|
||||||
@@ -501,10 +533,22 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.searchQuery()
|
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 () {
|
beforeDestroy () {
|
||||||
// 离开页面前清除定时器
|
// 离开页面前清除定时器
|
||||||
clearInterval(this.timer)
|
clearInterval(this.timer)
|
||||||
|
// 离开时清除事件
|
||||||
|
borderTable.remove('scroll', borderTableScroll)
|
||||||
|
leftTable.remove('scroll', leftTableScroll)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
searchQuery () {
|
searchQuery () {
|
||||||
@@ -581,130 +625,47 @@ export default {
|
|||||||
this.$refs.productionMonitoring.updateMyChartOption()
|
this.$refs.productionMonitoring.updateMyChartOption()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption({
|
// 获取基础配置
|
||||||
tooltip: {
|
const legendData = ['上冲程', '下冲程']
|
||||||
trigger: 'axis',
|
const option = generateBaseOption()
|
||||||
axisPointer: {
|
option.legend.data = legendData
|
||||||
type: 'shadow'
|
option.xAxis.data = data['X轴']
|
||||||
// type: 'cross',
|
option.yAxis[0].name = '载荷(KN)'
|
||||||
// label: {
|
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||||
// backgroundColor: '#6a7985'
|
option.series = [
|
||||||
// }
|
{
|
||||||
}
|
name: legendData[0],
|
||||||
},
|
type: 'line',
|
||||||
legend: {
|
stack: 'upStroke',
|
||||||
data: ['上冲程', '下冲程'],
|
color: '#FF5353',
|
||||||
align: 'left',
|
symbol: 'none',
|
||||||
width: '80%',
|
smooth: true,
|
||||||
top: 0,
|
areaStyle: {
|
||||||
right: 0,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
itemHeight: 2,
|
{ offset: 0, color: 'rgba(255,83,83,0.2)' },
|
||||||
itemWidth: 12,
|
{ offset: 1, color: 'rgba(255,83,83,0)' }
|
||||||
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['上冲程']
|
|
||||||
},
|
},
|
||||||
{
|
data: data['上冲程']
|
||||||
name: '下冲程',
|
},
|
||||||
type: 'line',
|
{
|
||||||
stack: 'downStroke',
|
name: legendData[1],
|
||||||
emphasis: {
|
type: 'line',
|
||||||
focus: 'series'
|
stack: 'downStroke',
|
||||||
},
|
color: '#0094FF',
|
||||||
color: '#0094FF',
|
symbol: 'none',
|
||||||
symbol: 'none',
|
smooth: true,
|
||||||
smooth: true,
|
areaStyle: {
|
||||||
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
|
||||||
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
|
{ offset: 1, color: 'rgba(0,148,255,0)' }
|
||||||
{ offset: 1, color: 'rgba(0,148,255,0)' }
|
])
|
||||||
])
|
},
|
||||||
},
|
data: data['下冲程']
|
||||||
data: data['下冲程']
|
}
|
||||||
}
|
]
|
||||||
]
|
// 设置数据
|
||||||
})
|
this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
|
||||||
},
|
},
|
||||||
// 初始化 功图计产监控
|
// 初始化 功图计产监控
|
||||||
initProductionMonitoring (data) {
|
initProductionMonitoring (data) {
|
||||||
@@ -717,119 +678,49 @@ export default {
|
|||||||
this.$refs.productionMonitoring.updateMyChartOption()
|
this.$refs.productionMonitoring.updateMyChartOption()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.$refs.productionMonitoring.updateMyChartOption({
|
// 获取基础配置
|
||||||
tooltip: {
|
const legendData = ['产油量(t/d)', '产液量(m³/d)']
|
||||||
trigger: 'axis',
|
const option = generateBaseOption()
|
||||||
axisPointer: {
|
option.legend.data = legendData
|
||||||
type: 'shadow'
|
option.xAxis.data = data['X轴']
|
||||||
// type: 'cross',
|
option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
|
||||||
// label: {
|
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
|
||||||
// backgroundColor: '#6a7985'
|
option.series = [
|
||||||
// }
|
{
|
||||||
}
|
name: legendData[0],
|
||||||
},
|
type: 'line',
|
||||||
legend: {
|
stack: 'oilProduction',
|
||||||
data: ['产油量(t/d)', '产液量(m³/d)'],
|
color: '#2EE4FD',
|
||||||
align: 'left',
|
symbol: lineSymbolBase64,
|
||||||
width: '80%',
|
symbolSize: 15,
|
||||||
top: 0,
|
smooth: true,
|
||||||
right: 0,
|
areaStyle: {
|
||||||
itemHeight: 2,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
itemWidth: 12,
|
{ offset: 0, color: 'rgba(46,228,253,0.2)' },
|
||||||
itemGap: 16,
|
{ offset: 1, color: 'rgba(46,228,253,0)' }
|
||||||
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
|
|
||||||
},
|
},
|
||||||
{
|
data: data.oilProduction
|
||||||
name: '产液量(m³/d)',
|
},
|
||||||
type: 'line',
|
{
|
||||||
stack: 'liquidProduction',
|
name: legendData[1],
|
||||||
color: '#0094FF',
|
type: 'line',
|
||||||
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=',
|
stack: 'liquidProduction',
|
||||||
symbolSize: 15,
|
color: '#0094FF',
|
||||||
smooth: true,
|
symbol: lineSymbolBase64,
|
||||||
areaStyle: {
|
symbolSize: 15,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
smooth: true,
|
||||||
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
|
areaStyle: {
|
||||||
{ offset: 1, color: 'rgba(0,148,255,0)' }
|
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.liquidProduction
|
||||||
})
|
}
|
||||||
|
]
|
||||||
|
// 设置数据
|
||||||
|
this.$refs.productionMonitoring.updateMyChartOption(option)
|
||||||
},
|
},
|
||||||
// 初始化 载荷分布图
|
// 初始化 载荷分布图
|
||||||
initLoadDistribution (data) {
|
initLoadDistribution (data) {
|
||||||
@@ -842,102 +733,33 @@ export default {
|
|||||||
this.$refs.productionMonitoring.updateMyChartOption()
|
this.$refs.productionMonitoring.updateMyChartOption()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption({
|
// 获取基础配置
|
||||||
tooltip: {
|
const legendData = ['最大载荷(KN)', '最小载荷(KN)']
|
||||||
trigger: 'axis',
|
const option = generateBaseOption()
|
||||||
axisPointer: {
|
option.legend.data = legendData
|
||||||
type: 'shadow'
|
option.xAxis.data = data['X轴']
|
||||||
// type: 'cross',
|
option.yAxis[0].name = '载荷(KN)'
|
||||||
// label: {
|
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||||
// backgroundColor: '#6a7985'
|
option.series = [
|
||||||
// }
|
{
|
||||||
}
|
name: legendData[0],
|
||||||
|
type: 'line',
|
||||||
|
stack: 'maxLoad',
|
||||||
|
color: '#FF5353',
|
||||||
|
symbol: 'none',
|
||||||
|
data: data['最大载荷']
|
||||||
},
|
},
|
||||||
legend: {
|
{
|
||||||
data: ['最大载荷(KN)', '最小载荷(KN)'],
|
name: legendData[1],
|
||||||
align: 'left',
|
type: 'line',
|
||||||
width: '80%',
|
stack: 'minLoad',
|
||||||
top: 0,
|
color: '#FFC97A',
|
||||||
right: 0,
|
symbol: 'none',
|
||||||
itemHeight: 2,
|
data: data['最小载荷']
|
||||||
itemWidth: 12,
|
}
|
||||||
itemGap: 16,
|
]
|
||||||
textStyle: {
|
// 设置数据
|
||||||
color: 'rgba(255,255,255,0.96)'
|
this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption(option)
|
||||||
}
|
|
||||||
},
|
|
||||||
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['最小载荷']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
// 油井工作状态
|
// 油井工作状态
|
||||||
handleChangeWorkingCondition (status) {
|
handleChangeWorkingCondition (status) {
|
||||||
@@ -1115,7 +937,19 @@ export default {
|
|||||||
height: 100px;
|
height: 100px;
|
||||||
background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
|
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 {
|
.right-fixed-table {
|
||||||
|
display: inline-block;
|
||||||
|
box-shadow: -6px 0 12px -4px black;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: 107px;
|
||||||
/deep/ th {
|
/deep/ th {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 0;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user