[update] 移动端主页、管理
This commit is contained in:
danshihao
@@ -1,15 +1,551 @@
|
||||
<template>
|
||||
<div>
|
||||
Home
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 查询区域 -->
|
||||
<div class="mb-12 header-search">
|
||||
<a-form>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col flex="2.51rem">
|
||||
<a-form-item label="设备类型" :labelCol="{span:6}" :wrapperCol="{span:18}">
|
||||
<dict-picker :triggerChange="true"
|
||||
style="width: 100%"
|
||||
class="search-input"
|
||||
dictCode="device_type"
|
||||
:filter-dict-values="[deviceType.rtuController.value]"
|
||||
@change="changeDeviceType"
|
||||
v-model="queryParam.deviceType"
|
||||
placeholder="请选择设备类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0.88rem">
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue" type="primary" @click="searchQuery">
|
||||
<span class="btn-text">检索设备</span>
|
||||
</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div v-if="hasData" class="all-data-container">
|
||||
<!-- 井口设备 -->
|
||||
<template v-if="lastQuery.deviceType === deviceType.wellheadEquipment.value">
|
||||
<!-- 油井基础信息 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="油井基础信息">
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.oilWellLeft || []"
|
||||
:right-list="labelData.oilWellRight || []"
|
||||
gutter="12"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 油井实时参数 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="油井实时参数">
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.oilWellsRealTimeParamsLeft || []"
|
||||
:right-list="labelData.oilWellsRealTimeParamsRight || []"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 实时示功图 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="实时示功图">
|
||||
<div slot="extra" class="indicator-diagram-extra" v-if="oilWellRealTimeData['实时示功图']">
|
||||
<span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
|
||||
</div>
|
||||
<responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="2.03rem"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 底部查询 -->
|
||||
<div class="bottom-search">
|
||||
<a-form>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col flex="2.59rem">
|
||||
<a-form-item :labelCol="{span:2}" :wrapperCol="{span:22}">
|
||||
<span slot="label" class="vertical-label">油<br/>井</span>
|
||||
<dict-picker :triggerChange="true"
|
||||
class="search-input mb-8"
|
||||
style="width: 100%;"
|
||||
dictCode="wellhead_area"
|
||||
@change="changeWellSite"
|
||||
v-model="queryParam.wellheadArea"
|
||||
placeholder="请选择所属井场"/>
|
||||
<select-picker class="search-input"
|
||||
style="width: 100%"
|
||||
v-model="queryParam.singleWell"
|
||||
placeholder="请选择单井"
|
||||
label-key="wellheadName"
|
||||
:list="singleWellList"
|
||||
allowClear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0.8rem">
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
|
||||
<span class="btn-text">查询</span>
|
||||
</a-button>
|
||||
<div class="flex-between">
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="left" /></span>
|
||||
</a-button>
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="right" /></span>
|
||||
</a-button>
|
||||
</div>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 天然气远程终端 -->
|
||||
<template v-else-if="lastQuery.deviceType === deviceType.transmissionTerminal.value">
|
||||
<!-- 油井基础信息 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="门站信息">
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.gateStationLeft || []"
|
||||
:right-list="labelData.gateStationRight || []"
|
||||
gutter="12"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 实时运行参数 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="实时运行参数">
|
||||
<template v-for="(item, index) in allData.realTimeRunningParamsList">
|
||||
<common-card-info :data="item"
|
||||
:key="(item.id || item.channelNo) + 'info'"
|
||||
:left-list="labelData.realTimeRunningParamsLeft || []"
|
||||
:right-list="labelData.realTimeRunningParamsRight || []"/>
|
||||
<div class="divider-horizontal"
|
||||
v-if="index !== allData.realTimeRunningParamsList.length - 1"
|
||||
:key="(item.id || item.channelNo) + 'horizontal-line'"></div>
|
||||
</template>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 底部查询 -->
|
||||
<div class="bottom-search">
|
||||
<a-form>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col flex="2.59rem">
|
||||
<a-form-item :labelCol="{span:4}" :wrapperCol="{span:20}">
|
||||
<span slot="label" class="vertical-label">场站<br/>门站</span>
|
||||
<dict-picker :triggerChange="true"
|
||||
class="search-input mb-8"
|
||||
style="width: 100%"
|
||||
dictCode="wellhead_area"
|
||||
@change="changeWellSite"
|
||||
v-model="queryParam.wellheadArea"
|
||||
placeholder="请选择场站门站"/>
|
||||
<select-picker class="search-input"
|
||||
style="width: 100%"
|
||||
v-model="queryParam.singleWell"
|
||||
placeholder="请选择数采设备"
|
||||
label-key="wellheadName"
|
||||
:list="singleWellList"
|
||||
allowClear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0.8rem">
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
|
||||
<span class="btn-text">查询</span>
|
||||
</a-button>
|
||||
<div class="flex-between">
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="left" /></span>
|
||||
</a-button>
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="right" /></span>
|
||||
</a-button>
|
||||
</div>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 没有数据查询为空 -->
|
||||
<div v-else class="empty-box">
|
||||
<common-empty/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 默认写死数据
|
||||
import CommonCard from '@comp/CommonCard'
|
||||
import CommonCardInfo from '@comp/CommonCardInfo'
|
||||
import ResponsiveChart from '@comp/ResponsiveChart'
|
||||
import CommonEmpty from '@comp/CommonEmpty'
|
||||
import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
|
||||
import { generateBaseOption } from '@/utils/charts'
|
||||
import * as echarts from 'echarts'
|
||||
import { deviceType, wellheadType } from '@/enums/commonEnums'
|
||||
import DictPicker from '@comp/vant/DictPicker'
|
||||
import SelectPicker from '@comp/vant/SelectPicker'
|
||||
|
||||
const staticData = {
|
||||
wellName: '华H62-1',
|
||||
pumpingType: '抽油机',
|
||||
wellType: '水平井',
|
||||
wellField: '华H62井场',
|
||||
productionLayer: '长_7_2',
|
||||
productionDate: '2020-03-27',
|
||||
realTimeMoisture: '11.1',
|
||||
hourlyMoisture: '11.8',
|
||||
twentyFourHourMoisture: '12.3',
|
||||
dynamicLiquidPressure: '1.55',
|
||||
dynamicLiquidSoundVelocity: '370',
|
||||
dynamicLiquidDepth: '96',
|
||||
timeRate: '100',
|
||||
openingDuration: '15时0分',
|
||||
dailyWaterProduction: '4.34',
|
||||
dailyLiquidProduction: '19.09',
|
||||
dailyOilProduction: '14.75',
|
||||
electricityUsage: '0.00',
|
||||
wellCondition: '功图错误',
|
||||
pumpDepth: '1340',
|
||||
pumpDiameter: '57',
|
||||
pumpEfficiency: '20.05',
|
||||
comment: '当前工作状态良好，请按时检查',
|
||||
pumpType: '常规泵',
|
||||
// 门站信息
|
||||
stationName: '济源1#2号站',
|
||||
region: '济宁区域',
|
||||
terminalType: '电池供电设备',
|
||||
flowmetersNumber: '30',
|
||||
dataAcquisitionTerminals: '5',
|
||||
equipmentInstallationTime: '2024-12-25',
|
||||
// 实时运行参数
|
||||
realTimeRunningParamsList: [
|
||||
...new Array(4).fill(0).map((_, i) => {
|
||||
return {
|
||||
channelNo: '济源1#通道' + i,
|
||||
cumulativeFlow: '1232222',
|
||||
instantaneousStandardCondition: '236.33',
|
||||
realTimeTemperature: '35',
|
||||
realTimePressure: '1.23',
|
||||
instantaneousWorkingConditions: '256.33'
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Home'
|
||||
name: 'Home',
|
||||
components: { SelectPicker, DictPicker, CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
|
||||
data () {
|
||||
return {
|
||||
deviceType,
|
||||
loading: false,
|
||||
queryParam: {},
|
||||
lastQuery: {},
|
||||
defaultId: 'default', // 默认数据的id
|
||||
hasData: false, // 有没有请求到数据
|
||||
// 油井实时数据
|
||||
oilWellRealTimeData: {},
|
||||
// 所有面板展示的数据
|
||||
allData: {},
|
||||
// 定时器，用于10秒请求一次
|
||||
timer: null,
|
||||
// 页面显示label和对应数据字段
|
||||
labelData: {
|
||||
// 油井基础信息
|
||||
oilWellLeft: [
|
||||
{ label: '油井名称', valueField: 'wellName' },
|
||||
{ label: '机采类型', valueField: 'pumpingType' },
|
||||
{ label: '井型', valueField: 'wellType' }
|
||||
],
|
||||
oilWellRight: [
|
||||
{ label: '所属井场', valueField: 'wellField' },
|
||||
{ label: '开采层位', valueField: 'productionLayer' },
|
||||
{ label: '投产日期', valueField: 'productionDate' }
|
||||
],
|
||||
// 油井实时参数
|
||||
oilWellsRealTimeParamsLeft: [
|
||||
{ label: '油压', valueField: 'oilPressure', unit: 'MPa' },
|
||||
{ label: 'A相电流', valueField: 'currentA', unit: 'A' },
|
||||
{ label: 'B相电流', valueField: 'currentB', unit: 'A' },
|
||||
{ label: 'C相电流', valueField: 'currentC', unit: 'A' },
|
||||
{ label: '有功功率', valueField: 'activePower', unit: 'KW' },
|
||||
{ label: '功率因素', valueField: 'powerFactor', unit: '' },
|
||||
{ label: '最大载荷', valueField: 'maxLoad', unit: 'KN' },
|
||||
{ label: '冲程', valueField: 'stroke', unit: 'm' }
|
||||
],
|
||||
oilWellsRealTimeParamsRight: [
|
||||
{ label: '套压', valueField: 'casingPressure', unit: 'MPa' },
|
||||
{ label: 'A相电压', valueField: 'voltageA', unit: 'V' },
|
||||
{ label: 'B相电压', valueField: 'voltageB', unit: 'V' },
|
||||
{ label: 'C相电压', valueField: 'voltageC', unit: 'V' },
|
||||
{ label: '无功功率', valueField: 'reactivePower', unit: 'KW' },
|
||||
{ label: '输出频率', valueField: 'outputFrequency', unit: 'Hz' },
|
||||
{ label: '最小载荷', valueField: 'minLoad', unit: 'KN' },
|
||||
{ label: '冲次', valueField: 'strokeCount', unit: '次/分' }
|
||||
],
|
||||
// 门站信息
|
||||
gateStationLeft: [
|
||||
{ label: '场站名称', valueField: 'stationName' },
|
||||
{ label: '所属区域', valueField: 'region' },
|
||||
{ label: '终端类型', valueField: 'terminalType' }
|
||||
],
|
||||
gateStationRight: [
|
||||
{ label: '流量计数量', valueField: 'flowmetersNumber', unit: '台' },
|
||||
{ label: '数采终端数量', valueField: 'dataAcquisitionTerminals', unit: '台' },
|
||||
{ label: '设备安装时间', valueField: 'equipmentInstallationTime', unit: '' }
|
||||
],
|
||||
// 实时运行参数
|
||||
realTimeRunningParamsLeft: [
|
||||
{ label: '通道编号', valueField: 'channelNo', unit: '' },
|
||||
{ label: '累计流量', valueField: 'cumulativeFlow', unit: 'm³' },
|
||||
{ label: '标况瞬时', valueField: 'instantaneousStandardCondition', unit: 'm³/d' }
|
||||
],
|
||||
realTimeRunningParamsRight: [
|
||||
{ label: '实时温度', valueField: 'realTimeTemperature', unit: '℃' },
|
||||
{ label: '实时压力', valueField: 'realTimePressure', unit: 'Mpa' },
|
||||
{ label: '工况瞬时', valueField: 'instantaneousWorkingConditions', unit: 'm³/d' }
|
||||
]
|
||||
},
|
||||
// 油井下拉
|
||||
singleWellList: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.searchQuery()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
searchQuery () {
|
||||
const params = Object.assign({}, this.queryParam)
|
||||
// 保存最后一次搜索参数
|
||||
this.lastQuery = params
|
||||
// 根据设备类型区分
|
||||
switch (params.deviceType + '') {
|
||||
// 天然气数据远传终端
|
||||
case deviceType.transmissionTerminal.value:
|
||||
this.loadOilWellRealTimeData()
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
break
|
||||
// 井口设备
|
||||
case deviceType.wellheadEquipment.value:
|
||||
// 每10秒请求一次实时数据
|
||||
this.loadOilWellRealTimeData()
|
||||
clearInterval(this.timer)
|
||||
this.timer = setInterval(() => {
|
||||
this.loadOilWellRealTimeData()
|
||||
}, 1000 * 10)
|
||||
break
|
||||
default:
|
||||
// 如果没有就置空数据，不请求实时数据
|
||||
this.allData = {}
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
this.hasData = false
|
||||
return
|
||||
}
|
||||
},
|
||||
// 加载实时数据(实时示功图)(每10s请求一次)
|
||||
loadOilWellRealTimeData () {
|
||||
this.loading = true
|
||||
getOilWellRealTimeData({ id: this.defaultId }).then(res => {
|
||||
if (res.success) {
|
||||
this.hasData = !!res.result
|
||||
const data = res.result || {}
|
||||
this.oilWellRealTimeData = data
|
||||
// 将油井实时参数放进全部数据中
|
||||
this.allData = Object.assign({}, staticData, data['油井实时参数'])
|
||||
this.initIndicatorDiagram(data['实时示功图'])
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 初始化 实时示功图
|
||||
initIndicatorDiagram (data) {
|
||||
// 没有渲染出组件就不执行
|
||||
if (!this.$refs.indicatorDiagram) {
|
||||
return
|
||||
}
|
||||
// 置空数据
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
this.$refs.indicatorDiagram.updateMyChartOption()
|
||||
return
|
||||
}
|
||||
// 获取基础配置
|
||||
const legendData = ['上冲程', '下冲程']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis[0].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)' }
|
||||
])
|
||||
},
|
||||
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['下冲程']
|
||||
}
|
||||
]
|
||||
// 设置数据
|
||||
JSON.stringify(option).replaceAll('px', 'rem')
|
||||
this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
|
||||
},
|
||||
// 油井下拉
|
||||
loadOilWellList (wellheadArea) {
|
||||
getWellheadList({
|
||||
wellheadArea: wellheadArea,
|
||||
wellheadType: wellheadType.oil.value
|
||||
}).then(res => {
|
||||
if (res.success) {
|
||||
this.singleWellList = res.result || []
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改井场获取油井下拉
|
||||
changeWellSite (value) {
|
||||
if (value) {
|
||||
this.loadOilWellList(value)
|
||||
} else {
|
||||
this.singleWellList = []
|
||||
this.$set(this.queryParam, 'singleWell', undefined)
|
||||
}
|
||||
},
|
||||
// 修改设备类型把底部表单置空
|
||||
changeDeviceType (value) {
|
||||
this.queryParam = {
|
||||
deviceType: value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
.header-search {
|
||||
/deep/ .ant-form-item-label {
|
||||
line-height: 0.36rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
// 输入框错位
|
||||
/deep/ .ant-form-item-control {
|
||||
height: 0.36rem;
|
||||
}
|
||||
/deep/ .ant-form-item-control-wrapper {
|
||||
font-size: 0;
|
||||
}
|
||||
/deep/.van-cell {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.van-field__label {
|
||||
padding: 0.07rem 0;
|
||||
width: 0.56rem;
|
||||
height: 0.22rem;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
.van-field__value {
|
||||
padding: 0.07rem 0.12rem;
|
||||
width: 1.83rem;
|
||||
height: 0.36rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 展示数据的容器空出来底部搜索的高度
|
||||
.all-data-container {
|
||||
margin-bottom: 1.12rem;
|
||||
}
|
||||
|
||||
.bottom-search {
|
||||
height: 1.12rem;
|
||||
width: 100%;
|
||||
padding: 0.16rem 0.12rem;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
bottom: 0.56rem;
|
||||
background-color: #001125;
|
||||
|
||||
// 实现垂直居中 label
|
||||
/deep/.ant-form-item-label {
|
||||
padding: 0;
|
||||
}
|
||||
.vertical-label {
|
||||
display: block;
|
||||
margin: 0.18rem 0;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 0.22rem;
|
||||
text-align: left;
|
||||
}
|
||||
.bottom-search-btn {
|
||||
width: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 实时示功图头部
|
||||
.indicator-diagram-extra {
|
||||
|
||||
.info-row .info-label,
|
||||
.info-row .info-value,
|
||||
.time {
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.13rem;
|
||||
color: #D0DEEE;
|
||||
line-height: 0.15rem;
|
||||
}
|
||||
|
||||
.info-row .info-value {
|
||||
color: #2EE4FD;
|
||||
}
|
||||
.divider-vertical {
|
||||
width: 0.01rem;
|
||||
height: 0.12rem;
|
||||
background: rgba(108,128,151,0.3);
|
||||
margin: 0 0.12rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,591 @@
|
||||
<template>
|
||||
<div>manage</div>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="mb-12">
|
||||
<common-card title="系统设备概况">
|
||||
<div class="overview-grid">
|
||||
<div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
|
||||
<div class="title-background">
|
||||
<div class="title-background-text">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="overview-card-main custom-content-card">
|
||||
<div class="overview-card-img">
|
||||
<img :src="item.icon" alt=''>
|
||||
</div>
|
||||
<div class="overview-card-content">
|
||||
<div class="first-content" v-if="sysDeviceOverviewData[item.countField] || sysDeviceOverviewData[item.countField] === 0">
|
||||
<span class="big-number">{{sysDeviceOverviewData[item.countField]}}</span>台
|
||||
</div>
|
||||
<!-- 在线 -->
|
||||
<div v-if="sysDeviceOverviewData[item.onLineField] || sysDeviceOverviewData[item.onLineField] === 0"
|
||||
class="working">在线：{{ sysDeviceOverviewData[item.onLineField] }}台</div>
|
||||
<!-- 离线 -->
|
||||
<div v-if="sysDeviceOverviewData[item.offLineField] || sysDeviceOverviewData[item.offLineField] === 0"
|
||||
class="cease">离线：{{ sysDeviceOverviewData[item.offLineField] }}台</div>
|
||||
<!-- 其他数据 -->
|
||||
<template v-if="item.otherData">
|
||||
<div v-for="it in item.otherData" :key="it.id || it.label">
|
||||
{{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</common-card>
|
||||
</div>
|
||||
<div class="mb-12">
|
||||
<common-card title="设备列表" :isEmpty="deviceDataSource.length === 0">
|
||||
<div class="device-list">
|
||||
<div class="device-list-item custom-content-card"
|
||||
v-for="(item, index) in deviceDataSource"
|
||||
:key="item.id"
|
||||
:class="{ 'mb-8': index !== deviceDataSource.length - 1}">
|
||||
<div class="status mb-6"
|
||||
:class="getDeviceStatusClass(item.deviceStatus)"
|
||||
>{{ item.deviceStatus_dictText }}</div>
|
||||
<div class="device-list-item-main">
|
||||
<div class="device-list-item-main-img">
|
||||
<img :src="deviceOverview[0].icon" alt=''>
|
||||
</div>
|
||||
<div class="device-list-item-main-content">
|
||||
<p>{{ item.deviceName }}</p>
|
||||
<p>{{ item.deviceSn }}</p>
|
||||
<p>{{ item.wellheadId_dictText }}</p>
|
||||
</div>
|
||||
<div class="device-list-item-main-btns">
|
||||
<a-button type="primary" class="mr-6"
|
||||
@click="handleChangeStatus(item, index)"
|
||||
>{{ item.changeDeviceStatus_dictText }}</a-button>
|
||||
<a-button type="danger"
|
||||
@click="handleDelete(item, index)"
|
||||
>删除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据大于5条显示折叠 -->
|
||||
<div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList">
|
||||
{{deviceData.showAll ? '收起' : '展开'}}<div class="list-toggle-arrow" :class="`list-toggle-arrow-${deviceData.showAll ? 'up' : 'down'}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</common-card>
|
||||
</div>
|
||||
<div class="mb-12">
|
||||
<common-card title="添加设备">
|
||||
<a-form :form="deviceForm" class="custom-vertical-form">
|
||||
<div class="mb-12">
|
||||
<a-form-item label="设备名称">
|
||||
<a-input placeholder="请输入设备名称" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['deviceName', validatorRules.deviceName]"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型">
|
||||
<dict-picker :triggerChange="true"
|
||||
dictCode="device_type"
|
||||
v-decorator="['deviceType', validatorRules.deviceType]"
|
||||
placeholder="请选择设备类型"/>
|
||||
<!-- <j-dict-select-tag :triggerChange="true"-->
|
||||
<!-- dictCode="device_type"-->
|
||||
<!-- v-decorator="['deviceType', validatorRules.deviceType]"-->
|
||||
<!-- placeholder="请选择设备类型">-->
|
||||
<!-- </j-dict-select-tag>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="所属井口">
|
||||
<select-picker v-decorator="['wellheadId', validatorRules.wellheadId]"
|
||||
allowClear
|
||||
label-key="wellheadName"
|
||||
:list="wellheadList"
|
||||
placeholder="请选择所属井口"/>
|
||||
<!-- <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear-->
|
||||
<!-- placeholder="请选择所属井口">-->
|
||||
<!-- <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="设备描述">
|
||||
<a-textarea
|
||||
placeholder="请输入设备描述"
|
||||
:rows="4"
|
||||
:max-length="500"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex-center custom-btns-box">
|
||||
<a-button class="btn-blue btn-blue-155" @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;">
|
||||
<img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
|
||||
<span class="btn-text">重置</span>
|
||||
</a-button>
|
||||
<a-button class="btn-cyan btn-cyan-155" @click="handleAddDevice">
|
||||
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
|
||||
<span class="btn-text">添加</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</common-card>
|
||||
</div>
|
||||
<div class="mb-12">
|
||||
<common-card title="添加井口">
|
||||
<a-form :form="wellheadForm" class="custom-vertical-form">
|
||||
<div class="mb-12">
|
||||
<a-form-item label="所属作业区">
|
||||
<a-input placeholder="请输入所属作业区" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['operateArea', validatorRules.operateArea]"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属井场">
|
||||
<dict-picker :triggerChange="true"
|
||||
dictCode="wellhead_area"
|
||||
v-decorator="['wellheadArea', validatorRules.wellheadArea]"
|
||||
placeholder="请选择所属井场"/>
|
||||
<!-- <j-dict-select-tag :triggerChange="true"-->
|
||||
<!-- dictCode="wellhead_area"-->
|
||||
<!-- v-decorator="['wellheadArea', validatorRules.wellheadArea]"-->
|
||||
<!-- placeholder="请选择所属井场">-->
|
||||
<!-- </j-dict-select-tag>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="井口类型">
|
||||
<dict-picker :triggerChange="true"
|
||||
dictCode="wellhead_type"
|
||||
v-decorator="['wellheadType', validatorRules.wellheadType]"
|
||||
placeholder="请选择井口类型"/>
|
||||
<!-- <j-dict-select-tag :triggerChange="true"-->
|
||||
<!-- dictCode="wellhead_type"-->
|
||||
<!-- v-decorator="['wellheadType', validatorRules.wellheadType]"-->
|
||||
<!-- placeholder="请选择井口类型">-->
|
||||
<!-- </j-dict-select-tag>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="井口名称">
|
||||
<a-input placeholder="请输入井口名称" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex-center custom-btns-box">
|
||||
<a-button class="btn-cyan btn-cyan-327" @click="handleAddWellhead">
|
||||
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
|
||||
<span class="btn-text">添加</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</common-card>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonCard from '@comp/CommonCard'
|
||||
import {
|
||||
addDevice,
|
||||
addWellhead,
|
||||
delDevice,
|
||||
editDevice,
|
||||
getDevicePage,
|
||||
getSysDeviceOverview,
|
||||
getWellheadList
|
||||
} from '@api/systemOverview'
|
||||
import { deviceStatus } from '@/enums/commonEnums'
|
||||
import DictPicker from '@comp/vant/DictPicker'
|
||||
import SelectPicker from '@comp/vant/SelectPicker'
|
||||
export default {
|
||||
name: 'Manage'
|
||||
name: 'Manage',
|
||||
components: { SelectPicker, DictPicker, CommonCard },
|
||||
data () {
|
||||
return {
|
||||
deviceStatus,
|
||||
loading: false,
|
||||
// 系统设备概况
|
||||
deviceOverview: [
|
||||
{
|
||||
title: '设备总数',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/device.png'),
|
||||
countField: 'deviceCount',
|
||||
onLineField: 'onlineDeviceCount',
|
||||
offLineField: 'offlineDeviceCount'
|
||||
},
|
||||
{
|
||||
title: '井口数量',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/wellhead.png'),
|
||||
otherData: [
|
||||
{ label: '总井数', unit: '口', valueField: 'wellCount' },
|
||||
{ label: '水井数', unit: '口', valueField: 'waterWellCount' },
|
||||
{ label: '油井数', unit: '口', valueField: 'oilWellCount' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'RTU控制器数量',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/controller.png'),
|
||||
countField: 'rtuCount',
|
||||
onLineField: 'onlineRtuCount',
|
||||
offLineField: 'offlineRtuCount'
|
||||
},
|
||||
{
|
||||
title: '天然气数据远传终端数量',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/terminal.png'),
|
||||
countField: 'ngCount',
|
||||
onLineField: 'onlineNgCount',
|
||||
offLineField: 'offlineNgCount'
|
||||
}
|
||||
],
|
||||
// 系统设备概况数据
|
||||
sysDeviceOverviewData: {},
|
||||
// 设备列表相关
|
||||
deviceData: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
showAll: false // true显示全部，默认显示前五
|
||||
},
|
||||
// 添加设备表单
|
||||
deviceForm: this.$form.createForm(this),
|
||||
// 添加井口表单
|
||||
wellheadForm: this.$form.createForm(this),
|
||||
// 表单校验
|
||||
validatorRules: {
|
||||
deviceName: { rules: [{ required: true, message: '请输入设备名称' }], validateTrigger: 'blur' },
|
||||
deviceType: { rules: [{ required: true, message: '请选择设备类型' }], validateTrigger: 'change' },
|
||||
wellheadId: { rules: [{ required: true, message: '请选择所属井口' }], validateTrigger: 'change' },
|
||||
deviceDesc: { rules: [{ required: true, message: '请输入设备描述' }], validateTrigger: 'blur' },
|
||||
operateArea: { rules: [{ required: true, message: '请输入所属作业区' }], validateTrigger: 'blur' },
|
||||
wellheadArea: { rules: [{ required: true, message: '请选择所属井场' }], validateTrigger: 'change' },
|
||||
wellheadType: { rules: [{ required: true, message: '请选择井口类型' }], validateTrigger: 'change' },
|
||||
wellheadName: { rules: [{ required: true, message: '请输入井口名称' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 井口列表
|
||||
wellheadList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 展示的设备列表数据，默认显示前五
|
||||
deviceDataSource () {
|
||||
if (this.deviceData.showAll) {
|
||||
return this.deviceData.dataSource
|
||||
} else {
|
||||
return this.deviceData.dataSource.slice(0, 5)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPage()
|
||||
},
|
||||
methods: {
|
||||
// 加载全部数据
|
||||
loadPage () {
|
||||
// 下拉菜单
|
||||
this.loadWellheadList()
|
||||
// 页面数据
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
},
|
||||
// 加载系统设备概况数据
|
||||
loadSysDeviceOverview () {
|
||||
getSysDeviceOverview().then(res => {
|
||||
if (res.success) {
|
||||
this.sysDeviceOverviewData = res.result || {}
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 加载设备列表
|
||||
loadDeviceList () {
|
||||
this.deviceData.loading = true
|
||||
getDevicePage({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
const data = res.result.records || res.result || []
|
||||
// 翻译设备状态，加修改设备状态的字段
|
||||
this.deviceData.dataSource = data.map(item => {
|
||||
if (item.deviceStatus === deviceStatus.onLine.value) {
|
||||
item.deviceStatus_dictText = deviceStatus.onLine.label
|
||||
item.changeDeviceStatus = deviceStatus.offLine.value
|
||||
item.changeDeviceStatus_dictText = deviceStatus.offLine.label
|
||||
} else if (item.deviceStatus === deviceStatus.offLine.value) {
|
||||
item.deviceStatus_dictText = deviceStatus.offLine.label
|
||||
item.changeDeviceStatus = deviceStatus.onLine.value
|
||||
item.changeDeviceStatus_dictText = deviceStatus.onLine.label
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.deviceData.loading = false
|
||||
})
|
||||
},
|
||||
// 获取设备状态样式
|
||||
getDeviceStatusClass (status) {
|
||||
switch (status + '') {
|
||||
case deviceStatus.onLine.value:
|
||||
return 'working'
|
||||
case deviceStatus.offLine.value:
|
||||
return 'cease'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 设备状态改变
|
||||
handleChangeStatus (record) {
|
||||
const { id } = record
|
||||
this.$vantConfirm({
|
||||
title: '确认' + record.changeDeviceStatus_dictText + '设备',
|
||||
message: `确定要修改设备状态为${record.changeDeviceStatus_dictText}吗?`
|
||||
}).then(() => {
|
||||
const params = { id, deviceStatus: record.changeDeviceStatus }
|
||||
editDevice(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 删除设备
|
||||
handleDelete (record) {
|
||||
const { id } = record
|
||||
this.$vantConfirm({
|
||||
title: '确认删除',
|
||||
message: '确定要删除此条数据吗?'
|
||||
}).then(() => {
|
||||
delDevice({ id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 切换展开折叠列表
|
||||
toggleDeviceList () {
|
||||
this.deviceData.showAll = !this.deviceData.showAll
|
||||
},
|
||||
// 添加设备
|
||||
handleAddDevice () {
|
||||
this.deviceForm.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const formData = Object.assign({}, values)
|
||||
addDevice(formData).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
// 重置表单
|
||||
this.deviceForm.resetFields()
|
||||
// 更新系统设备概况和设备列表
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加井口
|
||||
handleAddWellhead () {
|
||||
this.wellheadForm.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const formData = Object.assign({}, values)
|
||||
addWellhead(formData).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
// 重置表单
|
||||
this.wellheadForm.resetFields()
|
||||
// 更新系统设备概况
|
||||
this.loadSysDeviceOverview()
|
||||
// 更新井口下拉
|
||||
this.loadWellheadList()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取井口下拉
|
||||
loadWellheadList () {
|
||||
getWellheadList().then(res => {
|
||||
if (res.success) {
|
||||
this.wellheadList = res.result || []
|
||||
}
|
||||
})
|
||||
},
|
||||
// 重置表单
|
||||
handleResetForm (form) {
|
||||
form && form.resetFields && form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/modifyLessVars.less";
|
||||
// 系统设备概况
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-gap: 0.08rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas: 'a b'
|
||||
'c d';
|
||||
}
|
||||
.overview-card {
|
||||
.overview-card-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.overview-card-img {
|
||||
flex: 0 0 0.56rem;
|
||||
margin-right: 0.1rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.overview-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
flex: auto;
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.12rem;
|
||||
color: @text-color;
|
||||
line-height: 0.14rem;
|
||||
|
||||
.first-content {
|
||||
padding-left: 0.16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设备列表
|
||||
.device-list {
|
||||
&-item {
|
||||
.status {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.14rem;
|
||||
}
|
||||
&-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
// 图片
|
||||
&-img {
|
||||
flex: 0 0 0.56rem;
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
margin-right: 0.12rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
&-content {
|
||||
flex: auto;
|
||||
margin: 0;
|
||||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.14rem;
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 0.06rem;
|
||||
// 内容宽度 = 100% - 按钮部分宽度 - 距离按钮间距
|
||||
width: calc(100% - 1.46rem - 0.08rem);
|
||||
}
|
||||
|
||||
& > p:first-child {
|
||||
width: 100%;
|
||||
min-height: 0.16rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.16rem;
|
||||
margin-bottom: 0.07rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮
|
||||
&-btns {
|
||||
width: 1.46rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 0.16rem;
|
||||
|
||||
/deep/.ant-btn {
|
||||
width: 0.7rem;
|
||||
height: 0.32rem;
|
||||
border: none;
|
||||
}
|
||||
/deep/.ant-btn-primary {
|
||||
background: url("~@assets/images/componentImg/btn-blue-70.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/.ant-btn-danger {
|
||||
background: url("~@assets/images/componentImg/btn-red-70.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-toggle {
|
||||
width: 0.48rem;
|
||||
height: 0.14rem;
|
||||
margin: 0.12rem auto 0;
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-size: 0.12rem;
|
||||
color: #A5B8CE;
|
||||
line-height: 0.14rem;
|
||||
|
||||
.list-toggle-arrow {
|
||||
display: inline-block;
|
||||
width: 0.18rem;
|
||||
height: 0.07rem;
|
||||
background: url("~@assets/images/icon/list-arrow.png");
|
||||
background-size: 100% 100%;
|
||||
margin-left: 0.06rem;
|
||||
|
||||
&-up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&-down {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-btns-box {
|
||||
/deep/.ant-btn {
|
||||
&.btn-blue.btn-blue-155 {
|
||||
width: 1.55rem;
|
||||
background-image: url("~@assets/images/componentImg/btn-blue-155.png");
|
||||
}
|
||||
&.btn-cyan.btn-cyan-155 {
|
||||
width: 1.55rem;
|
||||
background-image: url("~@assets/images/componentImg/btn-cyan-155.png");
|
||||
}
|
||||
&.btn-cyan.btn-cyan-327 {
|
||||
width: 3.27rem;
|
||||
background-image: url("~@assets/images/componentImg/btn-cyan-327.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<a-col flex="545px">
|
||||
<common-card title="系统设备概况">
|
||||
<div class="overview-grid">
|
||||
<div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
|
||||
<div class="overview-card custom-content-card" v-for="item in deviceOverview" :key="item.id || item.title">
|
||||
<div class="title-background">
|
||||
<div class="title-background-text">{{ item.title }}</div>
|
||||
</div>
|
||||
@@ -405,7 +405,6 @@ export default {
|
||||
if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
|
||||
this.deviceData.ipagination.current -= 1
|
||||
}
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
@@ -430,7 +429,6 @@ export default {
|
||||
if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
|
||||
this.deviceData.ipagination.current -= 1
|
||||
}
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
@@ -572,49 +570,6 @@ export default {
|
||||
'c d';
|
||||
}
|
||||
.overview-card {
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
|
||||
border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
// 伪元素装饰
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// 四个角
|
||||
&::before {
|
||||
top: -2px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 4px);
|
||||
background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top, left bottom, right top, right bottom;
|
||||
}
|
||||
// 两侧的边框
|
||||
&::after {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
|
||||
}
|
||||
|
||||
.overview-card-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</a-col>
|
||||
<a-col :xl="12" :xxl="6" class="mb-20">
|
||||
<common-card title="油井实时参数">
|
||||
<common-card-info :data="oilWellRealTimeData['油井实时参数']"
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.oilWellsRealTimeParamsLeft || []"
|
||||
:right-list="labelData.oilWellsRealTimeParamsRight || []"/>
|
||||
</common-card>
|
||||
@@ -554,7 +554,7 @@ export default {
|
||||
searchQuery () {
|
||||
const params = Object.assign({}, this.queryParam)
|
||||
// 没有条件恢复默认数据
|
||||
if (Object.values(params).length === 0) {
|
||||
if (Object.values(params).filter(item => item || item !== 0).length === 0) {
|
||||
this.allData = staticData
|
||||
this.dataSource = staticTableData
|
||||
setTimeout(() => {
|
||||
@@ -607,6 +607,8 @@ export default {
|
||||
if (res.success) {
|
||||
const data = res.result || {}
|
||||
this.oilWellRealTimeData = data
|
||||
// 将油井实时参数放进全部数据中
|
||||
this.allData = Object.assign({}, staticData, data['油井实时参数'])
|
||||
this.initIndicatorDiagram(data['实时示功图'])
|
||||
this.initLoadDistribution(data['载荷分布图'])
|
||||
} else {
|
||||
@@ -617,19 +619,19 @@ export default {
|
||||
// 初始化 实时示功图
|
||||
initIndicatorDiagram (data) {
|
||||
// 没有渲染出组件就不执行
|
||||
if (!this.$refs.productionMonitoring) {
|
||||
if (!this.$refs.indicatorDiagram) {
|
||||
return
|
||||
}
|
||||
// 置空数据
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
this.$refs.productionMonitoring.updateMyChartOption()
|
||||
this.$refs.indicatorDiagram.updateMyChartOption()
|
||||
return
|
||||
}
|
||||
// 获取基础配置
|
||||
const legendData = ['上冲程', '下冲程']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis.data = data['X轴']
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '载荷(KN)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||
option.series = [
|
||||
@@ -682,7 +684,7 @@ export default {
|
||||
const legendData = ['产油量(t/d)', '产液量(m³/d)']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis.data = data['X轴']
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
|
||||
option.series = [
|
||||
@@ -725,19 +727,19 @@ export default {
|
||||
// 初始化 载荷分布图
|
||||
initLoadDistribution (data) {
|
||||
// 没有渲染出组件就不执行
|
||||
if (!this.$refs.productionMonitoring) {
|
||||
if (!this.$refs.loadDistribution) {
|
||||
return
|
||||
}
|
||||
// 置空数据
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
this.$refs.productionMonitoring.updateMyChartOption()
|
||||
this.$refs.loadDistribution.updateMyChartOption()
|
||||
return
|
||||
}
|
||||
// 获取基础配置
|
||||
const legendData = ['最大载荷(KN)', '最小载荷(KN)']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis.data = data['X轴']
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '载荷(KN)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||
option.series = [
|
||||
@@ -984,7 +986,7 @@ export default {
|
||||
right: 10px;
|
||||
top: 40px;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
width: 5px;
|
||||
overflow: hidden;
|
||||
.border-table {
|
||||
position: absolute;
|
||||
|
||||
+12
-12
@@ -549,9 +549,9 @@ function isMobile () {
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
height: 2.4rem;
|
||||
background: url("~@/assets/mobile-login-bg.png") no-repeat;
|
||||
background-position-y: -0.88rem;
|
||||
background-position-y: -0.44rem;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -559,8 +559,8 @@ function isMobile () {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4rem;
|
||||
width: 3.84rem;
|
||||
top: 2rem;
|
||||
width: 1.92rem;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
@@ -570,32 +570,32 @@ function isMobile () {
|
||||
|
||||
// 移动端登录表单样式
|
||||
.login-form {
|
||||
padding: 5.62rem 0.48rem 0;
|
||||
padding: 2.81rem 0.24rem 0;
|
||||
|
||||
/deep/.ant-input-affix-wrapper .ant-input-prefix {
|
||||
left: 0;
|
||||
.prefix-icon {
|
||||
width: .48rem;
|
||||
width: 0.24rem;
|
||||
}
|
||||
}
|
||||
/deep/.ant-input {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none !important;
|
||||
border-bottom: 0.02rem solid rgba(0,148,255,0.4);
|
||||
border-bottom: 0.01rem solid rgba(0,148,255,0.4);
|
||||
box-shadow: none;
|
||||
height: .96rem;
|
||||
padding-left: .72rem;
|
||||
height: 0.48rem;
|
||||
padding-left: 0.36rem;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
line-height: 0.48rem;
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.24rem;
|
||||
}
|
||||
.login-btn {
|
||||
.ant-btn {
|
||||
background: url("~@assets/images/login-btn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 0.96rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user