[fix 84047] 底部查询不选择展示空

2024-04-26 14:55:27 +08:00
parent e7e5db0ace
commit af1e1656b3
4 changed files with 146 additions and 92 deletions
@@ -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 : [])
        ]
      }
    },
@@ -40,3 +40,8 @@ export const deviceType = {
  transmissionTerminal: { label: '天然气数据远传终端', value: '2' },
  wellheadEquipment: { label: '井口设备', value: '3' }
 }
+
+// 井场数据字典
+export const wellheadArea = {
+  tree101: { label: '树101井', value: '1' }
+}
@@ -26,7 +26,8 @@
        </a-row>
      </a-form>
    </div>
-    <div v-if="hasData" class="all-data-container">
+    <!--  设备类型有值就空出底部固定的高度  -->
+    <div v-if="hasData" class="all-data-container" :style="selectDeviceType && 'margin-bottom: 1.12rem;'">
      <!-- 井口设备 -->
      <template v-if="lastQuery.deviceType === deviceType.wellheadEquipment.value">
        <!-- 油井基础信息 -->
@@ -66,45 +67,6 @@
            <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"
-                               dictCode="wellhead_area"
-                               @change="changeWellSite"
-                               v-model="queryParam.wellheadArea"
-                               placeholder="请选择所属井场"/>
-                  <select-picker class="search-input"
-                                 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">
-                  <a-button class="bottom-search-btn mb-8" style="width: 0.8rem;" type="primary">
-                    <span class="btn-text">查询</span>
-                  </a-button>
-                  <div class="flex-between">
-                    <a-button class="icon-btn" style="margin-right: 0.08rem;" ghost type="primary">
-                      <span class="btn-text"><a-icon type="left" /></span>
-                    </a-button>
-                    <a-button class="icon-btn" ghost type="primary">
-                      <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">
@@ -131,30 +93,75 @@
            </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"
-                               dictCode="wellhead_area"
-                               @change="changeWellSite"
-                               v-model="queryParam.wellheadArea"
-                               placeholder="请选择场站门站"/>
-                  <select-picker class="search-input"
-                                 v-model="queryParam.singleWell"
-                                 placeholder="请选择数采设备"
-                                 label-key="wellheadName"
-                                 :list="singleWellList"
-                                 allowClear/>
-                </a-form-item>
-              </a-col>
-              <a-col flex="0.8rem">
+      </template>
+    </div>
+    <!--  没有数据查询为空  -->
+    <div v-else class="empty-box">
+      <common-empty/>
+    </div>
+    <!-- 井口设备-底部查询 -->
+    <div v-if="selectDeviceType === deviceType.wellheadEquipment.value" 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"
+                           dictCode="wellhead_area"
+                           @change="changeWellSite"
+                           v-model="queryParam.wellheadArea"
+                           placeholder="请选择所属井场"/>
+              <select-picker class="search-input"
+                             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">
-                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary">
+                  <a-button class="bottom-search-btn mb-8" style="width: 0.8rem;" type="primary" @click="loadWellheadEquipment">
+                    <span class="btn-text">查询</span>
+                  </a-button>
+                  <div class="flex-between">
+                    <a-button class="icon-btn" style="margin-right: 0.08rem;" ghost type="primary">
+                      <span class="btn-text"><a-icon type="left" /></span>
+                    </a-button>
+                    <a-button class="icon-btn" ghost type="primary">
+                      <span class="btn-text"><a-icon type="right" /></span>
+                    </a-button>
+                  </div>
+                </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 天然气远程终端-底部查询 -->
+    <div v-else-if="selectDeviceType === deviceType.transmissionTerminal.value" 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"
+                           dictCode="wellhead_area"
+                           @change="changeStationGateStation"
+                           v-model="queryParam.stationGateStation"
+                           placeholder="请选择场站门站"/>
+              <select-picker class="search-input"
+                             v-model="queryParam.dataAcquisitionEquipment"
+                             placeholder="请选择数采设备"
+                             label-key="wellheadName"
+                             :list="singleWellList"
+                             allowClear/>
+            </a-form-item>
+          </a-col>
+          <a-col flex="0.8rem">
+                <span class="search-operate-btns">
+                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="loadTransmissionTerminalData">
                    <span class="btn-text">查询</span>
                  </a-button>
                  <div class="flex-between">
@@ -166,15 +173,9 @@
                    </a-button>
                  </div>
                </span>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-      </template>
-    </div>
-    <!--  没有数据查询为空  -->
-    <div v-else class="empty-box">
-      <common-empty/>
+          </a-col>
+        </a-row>
+      </a-form>
    </div>
  </a-spin>
 </template>
@@ -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 {
@@ -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) {