KH/kh-device-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 井口数据监控

Browse Source
This commit is contained in:
danshihao
2024-04-08 09:08:58 +08:00
parent de2f5e877a
commit dc33ddd796
26 changed files with 1372 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+854 -3
View File
@@ -1,13 +1,864 @@
<template>
<div>1</div>
<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">
<a-button class="search-btn" type="primary" @click="searchQuery">
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="search-btn-icon">
<span class="search-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="isWorking ? working : suspend" alt="油井工作状态">
</div>
<div class="working-status-btns">
<a-button class="primary-btn">远程启井</a-button>
<a-button class="danger-btn">远程停井</a-button>
<a-button 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 class='mb-20'>
<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'
name: 'WellheadDataMonitoring',
components: { ResponsiveChart, CommonCardInfo, CommonCard },
data () {
return {
// 是否工作中
isWorking: true,
// 工作中图片
suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
// 暂停中图片
working: 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]
}
]
})
}
}
}
</script>
<style scoped>
<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;
}
}
// 表格样式
// 表头字体
/deep/ .ant-table-thead tr > th {
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
// 表头边框错位
/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
margin-right: -11px;
}
// 确认
.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>