From af1e1656b34367e46b635dd4c61ed79b45915d22 Mon Sep 17 00:00:00 2001 From: danshihao Date: Fri, 26 Apr 2024 14:55:27 +0800 Subject: [PATCH] =?UTF-8?q?[fix=2084047]=20=E5=BA=95=E9=83=A8=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=E4=B8=8D=E9=80=89=E6=8B=A9=E5=B1=95=E7=A4=BA=E7=A9=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/vant/SelectPicker.vue | 3 +- src/enums/commonEnums.js | 5 + src/views/mobile/home/Home.vue | 222 +++++++++++------- .../WellheadDataMonitoring.vue | 8 +- 4 files changed, 146 insertions(+), 92 deletions(-) diff --git a/src/components/vant/SelectPicker.vue b/src/components/vant/SelectPicker.vue index c5d02e5..bcafe78 100644 --- a/src/components/vant/SelectPicker.vue +++ b/src/components/vant/SelectPicker.vue @@ -74,10 +74,11 @@ export default { watch: { list: { deep: true, + immediate: true, handler (val) { this.options = [ { [this.labelKey]: '请选择', [this.valueKey]: undefined }, - ...val + ...(Array.isArray(val) ? val : []) ] } }, diff --git a/src/enums/commonEnums.js b/src/enums/commonEnums.js index 4e75d45..95f4d15 100644 --- a/src/enums/commonEnums.js +++ b/src/enums/commonEnums.js @@ -40,3 +40,8 @@ export const deviceType = { transmissionTerminal: { label: '天然气数据远传终端', value: '2' }, wellheadEquipment: { label: '井口设备', value: '3' } } + +// 井场数据字典 +export const wellheadArea = { + tree101: { label: '树101井', value: '1' } +} diff --git a/src/views/mobile/home/Home.vue b/src/views/mobile/home/Home.vue index cad4335..410654c 100644 --- a/src/views/mobile/home/Home.vue +++ b/src/views/mobile/home/Home.vue @@ -26,7 +26,8 @@ -
+ +
- -
- - - - - 场站
门站 - - - - - + +
+ +
+ +
+ +
+ + + + + 油
井 + + + + + - + + 查询 + +
+ + + + + + +
+ + + + +
+ +
+ + + + + 场站
门站 + + + + + + + 查询
@@ -166,15 +173,9 @@
- - - -
- -
- -
- + + +
@@ -187,7 +188,7 @@ import ResponsiveChart from '@comp/ResponsiveChart' import CommonEmpty from '@comp/CommonEmpty' import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview' import { generateBaseOption } from '@/utils/charts' -import { deviceType, wellheadType } from '@/enums/commonEnums' +import { deviceType, wellheadArea, wellheadType } from '@/enums/commonEnums' import DictPicker from '@comp/vant/DictPicker' import SelectPicker from '@comp/vant/SelectPicker' @@ -244,6 +245,7 @@ export default { data () { return { deviceType, + selectDeviceType: undefined, // 选择的设备类型（控制显示子搜索框） loading: false, queryParam: {}, lastQuery: {}, @@ -318,6 +320,7 @@ export default { }, mounted () { // 默认搜索井口设备 + this.selectDeviceType = deviceType.wellheadEquipment.value this.$set(this.queryParam, 'deviceType', deviceType.wellheadEquipment.value) this.searchQuery() }, @@ -333,27 +336,62 @@ export default { switch (params.deviceType + '') { // 天然气数据远传终端 case deviceType.transmissionTerminal.value: - this.loadOilWellRealTimeData() clearInterval(this.timer) this.timer = null + // 默认回显井场和单井 + this.$set(this.queryParam, 'stationGateStation', wellheadArea.tree101.value) + this.loadOilWellList(wellheadArea.tree101.value).then(() => { + this.$set(this.queryParam, 'dataAcquisitionEquipment', this.singleWellList[0].id) + // 查询数据 + this.loadTransmissionTerminalData() + }) break // 井口设备 case deviceType.wellheadEquipment.value: - // 每10秒请求一次实时数据 - this.loadOilWellRealTimeData() - clearInterval(this.timer) - this.timer = setInterval(() => { - this.loadOilWellRealTimeData() - }, 1000 * 10) + this.loadWellheadEquipment() + // 默认回显井场和单井 + this.$set(this.queryParam, 'wellheadArea', wellheadArea.tree101.value) + this.loadOilWellList(wellheadArea.tree101.value).then(() => { + this.$set(this.queryParam, 'singleWell', this.singleWellList[0].id) + // 查询数据 + this.loadWellheadEquipment() + }) break default: // 如果没有就置空数据，不请求实时数据 - this.allData = {} - clearInterval(this.timer) - this.timer = null - this.hasData = false + this.clearPageData() } }, + // 获取天然气数据远传终端页面数据 + loadTransmissionTerminalData () { + // 如果没有选择数采设备就置空 + if (!this.queryParam.dataAcquisitionEquipment) { + this.clearPageData() + return + } + this.loadOilWellRealTimeData() + }, + // 获取井口设备页面数据 + loadWellheadEquipment () { + // 如果没有选择单井，就置空 + if (!this.queryParam.singleWell) { + this.clearPageData() + return + } + // 每10秒请求一次实时数据 + this.loadOilWellRealTimeData() + clearInterval(this.timer) + this.timer = setInterval(() => { + this.loadOilWellRealTimeData() + }, 1000 * 10) + }, + // 置空页面数据 + clearPageData () { + this.allData = {} + clearInterval(this.timer) + this.timer = null + this.hasData = false + }, // 加载实时数据(实时示功图)(每10s请求一次) loadOilWellRealTimeData () { getOilWellRealTimeData({ id: this.defaultId }).then(res => { @@ -415,7 +453,7 @@ export default { }, // 油井下拉 loadOilWellList (wellheadArea) { - getWellheadList({ + return getWellheadList({ column: 'createTime', order: 'desc', wellheadArea: wellheadArea, @@ -424,7 +462,7 @@ export default { if (res.success) { this.singleWellList = res.result || [] } - }) + }).finally(() => {}) }, // 修改井场获取油井下拉 changeWellSite (value) { @@ -435,8 +473,18 @@ export default { this.$set(this.queryParam, 'singleWell', undefined) } }, + // 修改场站门站 + changeStationGateStation (value) { + if (value) { + this.loadOilWellList(value) + } else { + this.singleWellList = [] + this.$set(this.queryParam, 'dataAcquisitionEquipment', undefined) + } + }, // 修改设备类型把底部表单置空 changeDeviceType (value) { + this.selectDeviceType = value this.queryParam = { deviceType: value } @@ -487,7 +535,7 @@ export default { } // 展示数据的容器空出来底部搜索的高度 .all-data-container { - margin-bottom: 1.12rem; + //margin-bottom: 1.12rem; } .bottom-search { diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue index 23ec93a..dd93d8c 100644 --- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue +++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue @@ -205,7 +205,7 @@ import CommonCard from '@comp/CommonCard' import CommonCardInfo from '@comp/CommonCardInfo' import ResponsiveChart from '@comp/ResponsiveChart' import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview' -import { wellheadType } from '@/enums/commonEnums' +import { wellheadArea, wellheadType } from '@/enums/commonEnums' import CommonEmpty from '@comp/CommonEmpty' import { generateBaseOption, lineSymbolBase64 } from '@/utils/charts' @@ -528,8 +528,8 @@ export default { } }, mounted () { - this.$set(this.queryParam, 'wellheadArea', '1') - this.loadOilWellList('1').then(() => { + this.$set(this.queryParam, 'wellheadArea', wellheadArea.tree101.value) + this.loadOilWellList(wellheadArea.tree101.value).then(() => { this.$set(this.queryParam, 'singleWell', this.singleWellList[0].id) this.searchQuery() }) @@ -790,7 +790,7 @@ export default { if (res.success) { this.singleWellList = res.result || [] } - }) + }).finally(() => {}) }, // 修改井场获取油井下拉 changeWellSite (value) {