859 lines
26 KiB
Vue
859 lines
26 KiB
Vue
<template>
|
||
<a-spin :spinning="loading">
|
||
<!-- 查询区域 -->
|
||
<div class="mb-20">
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row type="flex">
|
||
<a-col flex="auto">
|
||
<a-form-item label="油井">
|
||
<a-select class="search-input" v-model="queryParam.wellSite" placeholder="请选择所属井场">
|
||
<a-select-option v-for="item in wellSiteList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
|
||
</a-select>
|
||
<a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井">
|
||
<a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
|
||
</a-select>
|
||
<span class="search-operate-btns custom-btns-box">
|
||
<a-button class="btn-blue" type="primary" @click="searchQuery">
|
||
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
|
||
<span class="btn-text">查询</span>
|
||
</a-button>
|
||
</span>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col flex="220px">
|
||
<!-- <a-input-search placeholder="请输入井口名称" v-model="queryParam.phone" class="search-input" />-->
|
||
<a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.phone">
|
||
<span slot="suffix" class="input-search-suffix" @click="searchQuery">
|
||
<img :src="require('@assets/images/icon/search-primary.png')" alt="查询">
|
||
</span>
|
||
</a-input>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<a-row :gutter="20" type="flex" class="mb-20">
|
||
<a-col :xl="12" :xxl="6">
|
||
<div class="flex-column">
|
||
<div class="mb-20">
|
||
<common-card title="油井基础信息">
|
||
<common-card-info :data="data.oilWells || []"/>
|
||
</common-card>
|
||
</div>
|
||
<div>
|
||
<common-card title="含水和动液面">
|
||
<common-card-info :data="data.waterContentAndDynamicLiquidLevel || []"/>
|
||
</common-card>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :xl="12" :xxl="6">
|
||
<common-card title="油井实时参数">
|
||
<common-card-info :data="data.oilWellsRealTimeParameters || []"/>
|
||
</common-card>
|
||
</a-col>
|
||
<a-col :xl="12" :xxl="6">
|
||
<common-card title="油井生产数据">
|
||
<!-- 泵型图 -->
|
||
<div class="pump-type mb-20">
|
||
<div class="pump-type-title">泵型：常规泵</div>
|
||
<div class="pump-type-remarks">备注：-----</div>
|
||
</div>
|
||
<common-card-info :data="data.oilWellProductionData || []"/>
|
||
</common-card>
|
||
</a-col>
|
||
<a-col :xl="12" :xxl="6">
|
||
<common-card title="油井工作状态">
|
||
<div slot="extra" class="info-row">
|
||
<div class="info-label">工作状态</div>
|
||
<div class="info-value">
|
||
<span class="working mr-12">运行</span>
|
||
<span class="cease">停止</span>
|
||
</div>
|
||
</div>
|
||
<div class="working-status-container">
|
||
<div class="working-status-title">名称：华h62-1</div>
|
||
<div class="working-status-img">
|
||
<img :src="workingStatus" alt="油井工作状态">
|
||
</div>
|
||
<div class="working-status-btns">
|
||
<a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">远程启井</a-button>
|
||
<a-button @click="handleChangeWorkingCondition(false)" class="danger-btn">远程停井</a-button>
|
||
<a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">频率控制</a-button>
|
||
</div>
|
||
</div>
|
||
</common-card>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="20" type="flex" class="mb-20">
|
||
<a-col :xl="8">
|
||
<common-card title="实时示功图">
|
||
<div slot="extra" class="indicator-diagram-extra">
|
||
<span class="time">2022-03-01 10:21:16</span>
|
||
<div class="divider-vertical"></div>
|
||
<span class="info-row info-row-inline">
|
||
<span class="info-label">冲程</span>
|
||
<span class="info-value">3.06m</span>
|
||
</span>
|
||
<div class="divider-vertical"></div>
|
||
<span class="info-row info-row-inline">
|
||
<span class="info-label">冲次</span>
|
||
<span class="info-value">4.96次/分</span>
|
||
</span>
|
||
</div>
|
||
<responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
|
||
</common-card>
|
||
</a-col>
|
||
<a-col :xl="8">
|
||
<common-card title="功图计产监控">
|
||
<responsive-chart ref="productionMonitoring" key="productionMonitoring" height="200px"/>
|
||
</common-card>
|
||
</a-col>
|
||
<a-col :xl="8">
|
||
<common-card title="载荷分布图">
|
||
<responsive-chart ref="loadDistribution" key="loadDistribution" height="200px"/>
|
||
</common-card>
|
||
</a-col>
|
||
</a-row>
|
||
<!-- <div class="mb-20">-->
|
||
<!-- <a-table-->
|
||
<!-- bordered-->
|
||
<!-- ref="table"-->
|
||
<!-- size="middle"-->
|
||
<!-- rowKey="id"-->
|
||
<!-- :scroll="{x:'100%', y:120}"-->
|
||
<!-- :columns="columns"-->
|
||
<!-- :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>-->
|
||
|
||
<!-- <span slot="action" slot-scope="text, record">-->
|
||
<!-- <a @click="handleConfirm(record)" class="confirm mr-10">确认</a>-->
|
||
<!-- <a @click="handleShow(record)" class="show">查看</a>-->
|
||
<!-- </span>-->
|
||
<!-- </a-table>-->
|
||
<!-- </div>-->
|
||
<div>
|
||
<a-table
|
||
style='display: inline-block; width: calc(100% - 110px)'
|
||
bordered
|
||
ref="table"
|
||
size="middle"
|
||
rowKey="id"
|
||
:scroll="{y:120}"
|
||
:columns="columns"
|
||
: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>
|
||
|
||
<span slot="action" slot-scope="text, record">
|
||
<a @click="handleConfirm(record)" class="confirm mr-10">确认</a>
|
||
<a @click="handleShow(record)" class="show">查看</a>
|
||
</span>
|
||
</a-table>
|
||
|
||
<a-table
|
||
bordered
|
||
style='display: inline-block; width: 100px'
|
||
ref="table"
|
||
size="middle"
|
||
rowKey="id"
|
||
:scroll="{y:120}"
|
||
:columns="[{
|
||
title: '批量操作',
|
||
dataIndex: 'actionBatch',
|
||
scopedSlots: { customRender: 'actionBatch' },
|
||
align: 'center',
|
||
// fixed: 'right',
|
||
// width: 100
|
||
}]"
|
||
:dataSource="this.dataSource.length ? [{}]: []"
|
||
:pagination="false">
|
||
<div slot="actionBatch" class="action-batch">
|
||
<a href='javascript:' class='all-alarms'></a>
|
||
</div>
|
||
</a-table>
|
||
</div>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script>
|
||
import CommonCard from '@comp/CommonCard'
|
||
import CommonCardInfo from '@comp/CommonCardInfo'
|
||
import ResponsiveChart from '@comp/ResponsiveChart'
|
||
import * as echarts from 'echarts'
|
||
export default {
|
||
name: 'WellheadDataMonitoring',
|
||
components: { ResponsiveChart, CommonCardInfo, CommonCard },
|
||
data () {
|
||
return {
|
||
// 暂停中图片
|
||
suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
|
||
// 工作中图片
|
||
working: require('@assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
|
||
// 是否工作中
|
||
workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
|
||
loading: false,
|
||
queryParam: {},
|
||
wellSiteList: [],
|
||
singleWellList: [],
|
||
columns: [
|
||
{
|
||
dataIndex: 'a',
|
||
title: '报警时间',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'b',
|
||
title: '恢复时间',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'c',
|
||
title: '报警设备',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'd',
|
||
title: '报警设备',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'e',
|
||
title: '报警描述',
|
||
align: 'center',
|
||
width: '20%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'f',
|
||
title: '报警类别',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'g',
|
||
title: '确认时间',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
dataIndex: 'h',
|
||
title: '确认人',
|
||
align: 'center',
|
||
width: '10%',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
scopedSlots: { customRender: 'action' },
|
||
align: 'center',
|
||
width: '10%'
|
||
}
|
||
// {
|
||
// title: '批量操作',
|
||
// dataIndex: 'actionBatch',
|
||
// customRender: (value, row, index) => {
|
||
// console.log(value, row, index, 'aaaaaa')
|
||
// const obj = {
|
||
// children: (
|
||
// <div>
|
||
// <a href='javascript:' class='all-alarms'></a>
|
||
// </div>
|
||
// ),
|
||
// attrs: {}
|
||
// }
|
||
// if (index === 0) {
|
||
// obj.attrs.rowSpan = this.dataSource.length
|
||
// } else {
|
||
// obj.attrs.rowSpan = 0
|
||
// }
|
||
// return obj
|
||
// },
|
||
// // scopedSlots: { customRender: 'actionBatch' },
|
||
// align: 'center',
|
||
// fixed: 'right',
|
||
// width: 100
|
||
// }
|
||
],
|
||
dataSource: new Array(10).fill(0).map((_, i) => ({ id: i + '' })),
|
||
data: {
|
||
oilWells: [
|
||
{ label: '油井名称', value: '华H62-1' },
|
||
{ label: '所属井场', value: '华H62井场' },
|
||
{ label: '机采类型', value: '抽油机' },
|
||
{ label: '开采层位', value: '长_7_2' },
|
||
{ label: '井型', value: '水平井' },
|
||
{ label: '投产日期', value: '2020-03-27' }
|
||
],
|
||
waterContentAndDynamicLiquidLevel: [
|
||
{ label: '实时含水', value: '11.1%' },
|
||
{ label: '动液面套压', value: '1.55 MPa' },
|
||
{ label: '小时含水率', value: '11.8%' },
|
||
{ label: '动液面声速', value: '370 m/s' },
|
||
{ label: '24小时含水率', value: '12.3%' },
|
||
{ label: '动液面声速', value: '96 m' }
|
||
],
|
||
oilWellsRealTimeParameters: [
|
||
{ label: '油压', value: '1.7 MPa' },
|
||
{ label: '套压', value: '1.7 MPa' },
|
||
{ label: 'A相电流', value: '18.51 A' },
|
||
{ label: 'A相电压', value: '217.2 V' },
|
||
{ label: 'B相电流', value: '15.85 A' },
|
||
{ label: 'B相电压', value: '215.1 V' },
|
||
{ label: 'C相电流', value: '16.46 A' },
|
||
{ label: 'C相电压', value: '215.6 V' },
|
||
{ label: '有功功率', value: '8.07 KW' },
|
||
{ label: '无功功率', value: '-0.04 KW' },
|
||
{ label: '功率因素', value: '0.99' },
|
||
{ label: '输出频率', value: '52.41 Hz' },
|
||
{ label: '最大载荷', value: '52.74 KN' },
|
||
{ label: '最小载荷', value: '24.22 KN' },
|
||
{ label: '冲程', value: '3.02 m' },
|
||
{ label: '冲次', value: '5 次/分' }
|
||
],
|
||
oilWellProductionData: [
|
||
{ label: '时率', value: '100 %' },
|
||
{ label: '用电量', value: '0.00 kw.h' },
|
||
{ label: '开井时长', value: '15时0分' },
|
||
{ label: '油井工况', value: '功图错误' },
|
||
{ label: '日产水量', value: '4.34 m³' },
|
||
{ label: '泵深', value: '1340 m' },
|
||
{ label: '日产液量', value: '19.09 m³' },
|
||
{ label: '泵型', value: '常规泵' },
|
||
{ label: '日产油量', value: '14.75 t' },
|
||
{ label: '泵径', value: '57 mm' },
|
||
{ label: '备注', value: '----' },
|
||
{ label: '泵效', value: '20.05%' }
|
||
|
||
]
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initIndicatorDiagram()
|
||
this.initProductionMonitoring()
|
||
this.initLoadDistribution()
|
||
},
|
||
methods: {
|
||
searchQuery () {
|
||
|
||
},
|
||
searchReset () {
|
||
|
||
},
|
||
handleConfirm () {
|
||
|
||
},
|
||
handleShow () {
|
||
|
||
},
|
||
// 初始化 实时示功图
|
||
initIndicatorDiagram () {
|
||
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: [0, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300],
|
||
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, 10]
|
||
},
|
||
// 轴标签样式
|
||
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: [40, 42, 25, 40, 42, 37, 39, 58, 42, 37, 40]
|
||
},
|
||
{
|
||
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: [40, 25, 40, 50, 40, 60, 80, 45, 40, 50, 40]
|
||
}
|
||
]
|
||
})
|
||
},
|
||
// 初始化 功图计产监控
|
||
initProductionMonitoring () {
|
||
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: ['01-31', '02-10', '02-15', '02-20', '02-25', '03-01'],
|
||
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',
|
||
padding: [0, 0, 0, 110]
|
||
},
|
||
// 轴标签样式
|
||
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: [40, 42, 25, 40, 42, 37]
|
||
},
|
||
{
|
||
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: [40, 25, 40, 50, 40, 60]
|
||
}
|
||
]
|
||
})
|
||
},
|
||
// 初始化 载荷分布图
|
||
initLoadDistribution () {
|
||
this.$refs.loadDistribution.updateMyChartOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
// type: 'cross',
|
||
// label: {
|
||
// backgroundColor: '#6a7985'
|
||
// }
|
||
}
|
||
},
|
||
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: [0.5, 1, 1, 1.5, 2, 2.5, 3],
|
||
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, 10]
|
||
},
|
||
// 轴标签样式
|
||
axisLabel: {
|
||
color: '#6C8097'
|
||
},
|
||
// 轴线样式
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#152F49',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '最大载荷(KN)',
|
||
type: 'line',
|
||
stack: 'maxLoad',
|
||
color: '#FF5353',
|
||
data: [40, 42, 25, 40, 42, 37, 10]
|
||
},
|
||
{
|
||
name: '最小载荷(KN)',
|
||
type: 'line',
|
||
stack: 'minLoad',
|
||
color: '#FFC97A',
|
||
data: [40, 25, 40, 50, 40, 60, 20]
|
||
}
|
||
]
|
||
})
|
||
},
|
||
// 油井工作状态
|
||
handleChangeWorkingCondition (status) {
|
||
if (status === true) {
|
||
this.workingStatus = this.working
|
||
} else if (status === false) {
|
||
this.workingStatus = this.suspend
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "~@/assets/less/modifyLessVars.less";
|
||
.search-operate-btns {
|
||
margin-left: 32px;
|
||
}
|
||
.search-input {
|
||
width: 220px;
|
||
}
|
||
|
||
.flex-column {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
& > div {
|
||
flex: auto;
|
||
}
|
||
}
|
||
|
||
.pump-type {
|
||
position: relative;
|
||
background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: left;
|
||
height: 84px;
|
||
width: 364px;
|
||
margin: 0 auto 20px;
|
||
|
||
&-title {
|
||
position: absolute;
|
||
left: 88px;
|
||
top: 18px;
|
||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||
font-weight: 400;
|
||
font-size: 15px;
|
||
color: rgba(255,255,255,0.96);
|
||
line-height: 18px;
|
||
}
|
||
&-remarks {
|
||
position: absolute;
|
||
left: 88px;
|
||
top: 50px;
|
||
font-family: Rubik, Rubik, sans-serif;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #D0DEEE;
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
|
||
// 工作状态相关样式
|
||
.working-status-container {
|
||
height: 100%;
|
||
|
||
.working-status-title {
|
||
background-size: 124px 16px;
|
||
background: url("~@/assets/images/text-bg.png") no-repeat 0 6px;
|
||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||
font-weight: 400;
|
||
font-size: 15px;
|
||
color: rgba(255,255,255,0.96);
|
||
line-height: 18px;
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.working-status-img {
|
||
height: 178px;
|
||
font-size: 0;
|
||
text-align: center;
|
||
margin: 12px auto 18px;
|
||
|
||
img {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.working-status-btns {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
button:not(:last-child) {
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 实时示功图头部
|
||
.indicator-diagram-extra {
|
||
|
||
.info-row .info-label,
|
||
.info-row .info-value,
|
||
.time {
|
||
font-family: Rubik, Rubik, sans-serif;
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
color: #D0DEEE;
|
||
line-height: 15px;
|
||
}
|
||
|
||
.info-row .info-value {
|
||
color: #2EE4FD;
|
||
}
|
||
.divider-vertical {
|
||
width: 1px;
|
||
height: 12px;
|
||
background: rgba(108,128,151,0.3);
|
||
margin: 0 12px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
// 确认
|
||
.confirm,
|
||
.confirm:hover {
|
||
color: #2BFF82;
|
||
}
|
||
// 查看
|
||
.show,
|
||
.show:hover {
|
||
color: #2EE4FD;
|
||
}
|
||
.action-batch {
|
||
height: 100px;
|
||
}
|
||
.all-alarms {
|
||
position: absolute;
|
||
top: 40px;
|
||
left: 50%;
|
||
transform: translate(-50%, -30%);
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 100px;
|
||
background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
|
||
}
|
||
</style>
|