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

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 : [])
         ]
       }
     },

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' }
+}

src/views/mobile/home/Home.vue

@@ -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>
-        <!-- 底部查询 -->
+      </template>
-        <div class="bottom-search">
+    </div>
-          <a-form>
+    <!--  没有数据查询为空  -->
-            <a-row type="flex" justify="space-between">
+    <div v-else class="empty-box">
-              <a-col flex="2.59rem">
+      <common-empty/>
-                <a-form-item :labelCol="{span:4}" :wrapperCol="{span:20}">
+    </div>
-                  <span slot="label" class="vertical-label">场站<br/>门站</span>
+    <!-- 井口设备-底部查询 -->
-                  <dict-picker :triggerChange="true"
+    <div v-if="selectDeviceType === deviceType.wellheadEquipment.value" class="bottom-search">
-                               class="search-input mb-8"
+      <a-form>
-                               dictCode="wellhead_area"
+        <a-row type="flex" justify="space-between">
-                               @change="changeWellSite"
+          <a-col flex="2.59rem">
-                               v-model="queryParam.wellheadArea"
+            <a-form-item :labelCol="{span:2}" :wrapperCol="{span:22}">
-                               placeholder="请选择场站门站"/>
+              <span slot="label" class="vertical-label">油<br/>井</span>
-                  <select-picker class="search-input"
+              <dict-picker :triggerChange="true"
-                                 v-model="queryParam.singleWell"
+                           class="search-input mb-8"
-                                 placeholder="请选择数采设备"
+                           dictCode="wellhead_area"
-                                 label-key="wellheadName"
+                           @change="changeWellSite"
-                                 :list="singleWellList"
+                           v-model="queryParam.wellheadArea"
-                                 allowClear/>
+                           placeholder="请选择所属井场"/>
-                </a-form-item>
+              <select-picker class="search-input"
-              </a-col>
+                             v-model="queryParam.singleWell"
-              <a-col flex="0.8rem">
+                             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-col>
-            </a-row>
+        </a-row>
-          </a-form>
+      </a-form>
-        </div>
-      </template>
-    </div>
-    <!--  没有数据查询为空  -->
-    <div v-else class="empty-box">
-      <common-empty/>
     </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.loadWellheadEquipment()
-          this.loadOilWellRealTimeData()
+          // 默认回显井场和单井
-          clearInterval(this.timer)
+          this.$set(this.queryParam, 'wellheadArea', wellheadArea.tree101.value)
-          this.timer = setInterval(() => {
+          this.loadOilWellList(wellheadArea.tree101.value).then(() => {
-            this.loadOilWellRealTimeData()
+            this.$set(this.queryParam, 'singleWell', this.singleWellList[0].id)
-          }, 1000 * 10)
+            // 查询数据
+            this.loadWellheadEquipment()
+          })
           break
         default:
           // 如果没有就置空数据，不请求实时数据
-          this.allData = {}
+          this.clearPageData()
-          clearInterval(this.timer)
-          this.timer = null
-          this.hasData = false
       }
     },
+    // 获取天然气数据远传终端页面数据
+    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 {

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.$set(this.queryParam, 'wellheadArea', wellheadArea.tree101.value)
-    this.loadOilWellList('1').then(() => {
+    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) {