抄表

Signed-off-by: hsshuxian <3049816743@qq.com>

ems-ui-cloud/src/api/device/meterDevice.js

@@ -17,6 +17,20 @@ export function listAreaDevice(query) {
   })
 }
 
+//根据设施获取设备树结构
+export function getDeviceTree(parentCode , meterCls, colMode) {
+  return request({
+    url: '/ems/meterDevice/getTreeByArea',
+    method: 'get',
+    params: {
+      parentCode,
+      meterCls,
+      colMode
+    }
+  })
+}
+
+
 // 查询计量设备详细
 export function getDevice(id) {
   return request({

ems-ui-cloud/src/views/basecfg/device/index.vue

@@ -94,10 +94,6 @@
           <el-table-column label="子系统" align="center" prop="subsystemName"/>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-info" @click="handleDevProcess(scope.row)"
-                         v-hasPermi="['basecfg:device:edit']" v-if="shouldShowDevProcessButton(scope.row)"
-              >器件
-              </el-button>
               <el-button size="mini" type="text" icon="el-icon-s-tools" @click="handleDetail(scope.row)"
                          v-hasPermi="['basecfg:device:edit']"
               >管理
@@ -110,80 +106,13 @@
                     :limit.sync="queryParams.pageSize"
                     @pagination="getList"
         />
-        <!-- 调用日志弹窗 -->
-        <el-dialog :visible.sync="callLog" title="调用日志" width="60%">
-          <el-form inline>
-            <el-form-item label="记录时间">
-              <el-date-picker
-                v-model="callDaterangeTime"
-                style="width: 240px"
-                value-format="yyyy-MM-dd HH:mm"
-                type="datetimerange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              ></el-date-picker>
-            </el-form-item>
-            <el-form-item label="能力标识">
-              <el-select v-model="callLogQueryParams.abilityKey" placeholder="请选择能力标识" clearable>
-                <el-option
-                  v-for="item in abilityData"
-                  :key="item.abilityKey"
-                  :label="item.abilityName"
-                  :value="item.abilityKey"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="调用状态">
-              <el-select v-model="callLogQueryParams.callStatus" placeholder="请选择调用状态" clearable>
-                <el-option
-                  v-for="(value, key) in callStatusOptions"
-                  :key="key"
-                  :label="value"
-                  :value="key"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleCallLogQuery">查询</el-button>
-              <el-button @click="resetCallLogQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <el-table :data="callLogData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
-            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
-            <el-table-column label="对象编号" prop="objCode"></el-table-column>
-            <el-table-column label="对象名称" prop="objName"></el-table-column>
-            <el-table-column label="对象能力" prop="abilityName"></el-table-column>
-            <el-table-column label="调用时间" prop="callTime"></el-table-column>
-            <el-table-column label="调用结果" align="center" width="100">
-              <template slot-scope="scope">
-                <span>{{ formatCallStatus(scope.row.callStatus) }}</span>
-              </template>
-            </el-table-column>            <el-table-column label="操作" align="center" width="100">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleCallLogDetail(scope.row)">详情
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination
-            v-show="callLogQueryTotal > 0"
-            :total="callLogQueryTotal"
-            :page.sync="callLogQueryParams.pageNum"
-            :limit.sync="callLogQueryParams.pageSize"
-            @pagination="handleCallLogQuery"
-          />
-        </el-dialog>
-
         <!-- 调用日志详情弹窗 -->
         <el-dialog :visible.sync="callLogDetailDialog" title="调用日志详情" width="50%">
           <div v-if="callLogDetailData">
             <p><strong>对象编号：</strong>{{ callLogDetailData.objCode }}</p>
             <p><strong>对象名称：</strong>{{ callLogDetailData.objName }}</p>
-            <p><strong>对象类型：</strong>{{ formatObjType(callLogDetailData.objType) }}</p>
-            <p><strong>模型代码：</strong>{{ callLogDetailData.modelCode }}</p>
-            <p><strong>能力标识：</strong>{{ callLogDetailData.abilityKey }}</p>
-            <p><strong>对象能力：</strong>{{ callLogDetailData.abilityName }}</p>
+            <p><strong>设备模型：</strong>{{ callLogDetailData.modelName }}({{ callLogDetailData.modelCode }})</p>
+            <p><strong>对象能力：</strong>{{ callLogDetailData.abilityName }}({{ callLogDetailData.abilityKey}})</p>
             <p><strong>调用时间：</strong>{{ callLogDetailData.callTime }}</p>
             <p><strong>响应时间：</strong>{{ callLogDetailData.resTime }}</p>
             <p><strong>调用结果：</strong>{{ formatCallStatus(callLogDetailData.callStatus) }}</p>
@@ -196,53 +125,12 @@
           </div>
         </el-dialog>
 
-        <!-- 设备日志弹窗 -->
-        <el-dialog :visible.sync="reportLog" title="设备日志" width="60%">
-          <el-form inline>
-            <el-form-item label="记录时间">
-              <el-date-picker
-                v-model="logDaterangeTime"
-                style="width: 240px"
-                value-format="yyyy-MM-dd HH:mm"
-                type="datetimerange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleLogQuery">查询</el-button>
-              <el-button @click="resetLogQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <el-table :data="reportLogData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
-            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
-            <el-table-column label="对象编号" prop="objCode"></el-table-column>
-            <el-table-column label="对象名称" prop="objName"></el-table-column>
-            <el-table-column label="消息类型" prop="msgDesc"></el-table-column>
-            <el-table-column label="上报时间" prop="reportTime" width="180"></el-table-column>
-            <el-table-column label="操作" align="center" width="100">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleReportLogDetail(scope.row)">详情
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination
-            v-show="logQueryTotal > 0"
-            :total="logQueryTotal"
-            :page.sync="logQueryParams.pageNum"
-            :limit.sync="logQueryParams.pageSize"
-            @pagination="handleLogQuery"
-          />
-        </el-dialog>
-
         <!-- 设备日志详情弹窗 -->
         <el-dialog :visible.sync="reportDetailDialog" title="设备日志详情" width="50%">
           <div v-if="reportDetailData">
             <p><strong>对象编号：</strong>{{ reportDetailData.objCode }}</p>
             <p><strong>对象名称：</strong>{{ reportDetailData.objName }}</p>
-            <p><strong>对象类型：</strong>{{ formatObjType(reportDetailData.objType) }}</p>
+            <p><strong>设备模型：</strong>{{ reportDetailData.modelName }}({{ reportDetailData.modelCode }})</p>
             <p><strong>消息类型：</strong>{{ reportDetailData.msgDesc }}</p>
             <p><strong>上报时间：</strong>{{ reportDetailData.reportTime }}</p>
             <p><strong>上报载体：</strong></p>
@@ -257,20 +145,24 @@
             <div>
               <el-form-item label="归属设施" prop="refFacs">
                 <el-select v-model="form.refFacs" placeholder="请选择归属设施" @change="handleFacilityChange">
-                  <el-option v-for="item in facsOptions" :key="item.facsCode" :label="item.facsName" :value="item.facsCode"></el-option>
+                  <el-option v-for="item in facsOptions" :key="item.facsCode" :label="item.facsName"
+                             :value="item.facsCode"
+                  ></el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="归属区域" prop="areaCode" v-if="queryParams.deviceCategory === 'W' || queryParams.deviceCategory === 'Z'">
+              <el-form-item label="归属区域" prop="areaCode">
                 <el-select v-model="form.areaCode" placeholder="请选择归属区域" @change="handleAreaChange">
-                  <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
+                  <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id"
+                  ></el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="归属子区" prop="locationRef" v-if="queryParams.deviceCategory === 'W' || queryParams.deviceCategory === 'Z'">
+              <el-form-item label="归属子区" prop="locationRef">
                 <el-select v-model="form.locationRef" placeholder="请选择归属子区">
-                  <el-option v-for="item in subAreaOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
+                  <el-option v-for="item in subAreaOptions" :key="item.id" :label="item.label" :value="item.id"
+                  ></el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="安装位置" prop="location" v-if="queryParams.deviceCategory === 'W' || queryParams.deviceCategory === 'Z'">
+              <el-form-item label="安装位置" prop="location">
                 <el-input v-model="form.location" placeholder="请输入安装位置"></el-input>
               </el-form-item>
               <el-form-item label="设备代码" prop="deviceCode">
@@ -287,6 +179,7 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="设备模型" prop="deviceModel">
+
                 <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange" clearable>
                   <el-option
                     v-for="item in modelList"
@@ -401,10 +294,10 @@
                 </template>
               </el-table-column>
             </el-table>
-            <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
-                        :limit.sync="queryComponentParams.pageSize"
-                        @pagination="getComponentList"
-            />
+<!--            <pagination v-show="componentTotal>0" :total="componentTotal" :page.sync="queryComponentParams.pageNum"-->
+<!--                        :limit.sync="queryComponentParams.pageSize"-->
+<!--                        @pagination="getComponentList"-->
+<!--            />-->
 
             <!-- 添加或修改设备器件对话框 -->
             <el-dialog :title="title" :visible.sync="componentOpen" width="600px" append-to-body>
@@ -460,21 +353,7 @@
         </el-drawer>
 
         <!-- 详情弹框 -->
-        <el-dialog :visible.sync="showDrawer" title="设备状态详情" custom-class="detail-dialog">
-          <div class="button-group">
-            <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="handleUpdate(curRow)"
-                       v-hasPermi="['ems:device:edit']"
-            >修改
-            </el-button>
-            <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(curRow)"
-                       v-hasPermi="['ems:device:remove']"
-            >删除
-            </el-button>
-            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="showCallLog(curRow)">调用日志
-            </el-button>
-            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="showReportLog(curRow)">设备日志
-            </el-button>
-          </div>
+        <el-dialog :visible.sync="showDrawer" title="设备详情" custom-class="detail-dialog">
           <div v-if="curRow">
             <!-- 分页导航 -->
             <el-tabs v-model="activeTab">
@@ -482,20 +361,37 @@
               <el-tab-pane label="设备参数" name="attr"></el-tab-pane>
               <el-tab-pane label="设备事件" name="event"></el-tab-pane>
               <el-tab-pane label="设备能力" name="ability"></el-tab-pane>
+              <el-tab-pane label="调用日志" name="callLog"></el-tab-pane>
+              <el-tab-pane label="设备日志" name="reportLog"></el-tab-pane>
             </el-tabs>
 
             <!-- 设备基本信息 -->
             <div v-if="activeTab === 'basic'">
               <el-card class="box-card">
                 <div slot="header" class="clearfix">
-                  <span class="section-title">设备状态基本信息</span>
+                  <span class="section-title">设备基本信息</span>
                 </div>
                 <div>
                   <p><span class="bold">设备名称：</span>{{ curRow.deviceName }}</p>
                   <p><span class="bold">设备代码：</span>{{ curRow.deviceCode }}</p>
                   <p><span class="bold">子系统：</span>{{ curRow.subsystemName }}</p>
                   <p><span class="bold">设备类型：</span>{{ curRow.deviceCategoryName }}</p>
-                  <p><span class="bold">归属设施：</span>{{ curRow.refFacsName }}</p>
+                  <p><span class="bold">归属区域：</span>{{ getAreaNameByCode(curRow.areaCode) }}</p>
+                  <p><span class="bold">归属子区：</span>{{ curRow.locationRefName }}</p>
+                  <p><span class="bold">安装位置：</span>{{ curRow.location}}</p>
+
+
+                </div>
+                <div class="footer">
+                  <div class="footer">
+                    <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="handleUpdate(curRow)"
+                               v-hasPermi="['ems:device:edit']">修改</el-button>
+                    <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(curRow)"
+                               v-hasPermi="['ems:device:remove']">删除</el-button>
+                    <el-button type="warning" plain icon="el-icon-s-tools" size="mini" @click="handleDevProcess(curRow)"
+                               v-hasPermi="['ems:device:edit']" v-if="shouldShowDevProcessButton(curRow)">器件</el-button>
+                  </div>
+
                 </div>
               </el-card>
             </div>
@@ -581,6 +477,113 @@
                 </el-table>
               </el-card>
             </div>
+            <!-- 调用日志    -->
+            <div v-if="activeTab === 'callLog'">
+              <!-- 调用日志表格 -->
+                <el-form inline>
+                  <el-form-item label="记录时间">
+                    <el-date-picker
+                      v-model="callDaterangeTime"
+                      style="width: 240px"
+                      value-format="yyyy-MM-dd HH:mm"
+                      type="datetimerange"
+                      range-separator="-"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                    ></el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="能力标识">
+                    <el-select v-model="callLogQueryParams.abilityKey" placeholder="请选择能力标识" clearable>
+                      <el-option
+                        v-for="item in abilityData"
+                        :key="item.abilityKey"
+                        :label="item.abilityName"
+                        :value="item.abilityKey"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="调用状态">
+                    <el-select v-model="callLogQueryParams.callStatus" placeholder="请选择调用状态" clearable>
+                      <el-option
+                        v-for="(value, key) in callStatusOptions"
+                        :key="key"
+                        :label="value"
+                        :value="key"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" @click="handleCallLogQuery">查询</el-button>
+                    <el-button @click="resetCallLogQuery">重置</el-button>
+                  </el-form-item>
+                </el-form>
+                <el-table :data="callLogData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
+                  <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                  <el-table-column label="对象编号" prop="objCode"></el-table-column>
+                  <el-table-column label="对象名称" prop="objName"></el-table-column>
+                  <el-table-column label="对象能力" prop="abilityName"></el-table-column>
+                  <el-table-column label="调用时间" prop="callTime"></el-table-column>
+                  <el-table-column label="调用结果" align="center" width="100">
+                    <template slot-scope="scope">
+                      <span>{{ formatCallStatus(scope.row.callStatus) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" align="center" width="100">
+                    <template slot-scope="scope">
+                      <el-button type="text" size="mini" icon="el-icon-info" @click="handleCallLogDetail(scope.row)">详情
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination
+                  v-show="callLogQueryTotal > 0"
+                  :total="callLogQueryTotal"
+                  :page.sync="callLogQueryParams.pageNum"
+                  :limit.sync="callLogQueryParams.pageSize"
+                  @pagination="handleCallLogQuery"
+                />
+            </div>
+            <!-- 设备日志 -->
+            <div v-if="activeTab === 'reportLog'">
+              <el-form inline>
+                <el-form-item label="记录时间">
+                  <el-date-picker
+                    v-model="logDaterangeTime"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd HH:mm"
+                    type="datetimerange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleLogQuery">查询</el-button>
+                  <el-button @click="resetLogQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table :data="reportLogData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
+                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                <el-table-column label="对象编号" prop="objCode"></el-table-column>
+                <el-table-column label="对象名称" prop="objName"></el-table-column>
+                <el-table-column label="消息类型" prop="msgDesc"></el-table-column>
+                <el-table-column label="上报时间" prop="reportTime" width="180"></el-table-column>
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="mini" icon="el-icon-info" @click="handleReportLogDetail(scope.row)">详情
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="logQueryTotal > 0"
+                :total="logQueryTotal"
+                :page.sync="logQueryParams.pageNum"
+                :limit.sync="logQueryParams.pageSize"
+                @pagination="handleLogQuery"
+              />
+            </div>
+
           </div>
         </el-dialog>
       </el-col>
@@ -590,7 +593,7 @@
 
 <script>
 import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
-import { areaTreeSelect,getAreaTreeSelect} from '@/api/basecfg/area'
+import { areaTreeSelect, getAreaTreeSelect } from '@/api/basecfg/area'
 import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
 import { listSubsystemAll } from '@/api/adapter/subsystem'
 import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
@@ -707,7 +710,7 @@ export default {
         deviceSubCategory: '',
         deviceCategory: 'E',
         locationRef: null,
-        locationRefName:null,
+        locationRefName: null,
         refFacs: null,
         customAttrs: null,
         areaCode: null,
@@ -717,6 +720,7 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
+      componentTotal:0,
       objComTypeMapping: {
         1: '总开',
         2: '照明',
@@ -743,7 +747,7 @@ export default {
       },
       // 表单参数
       form: {
-        customAttrs: [],
+        customAttrs: []
       },
 
       // 表单校验
@@ -778,6 +782,15 @@ export default {
     // 根据名称筛选区域树
     areaName(val) {
       this.$refs.tree.filter(val)
+    },
+    // 监听 activeTab 的变化
+    activeTab(newVal) {
+      if (newVal === 'callLog') {
+        // 当切换到“调用日志”时，调用查询接口
+        this.handleCallLogQuery()
+      }else if(newVal ==='reportLog'){
+        this.handleLogQuery()
+      }
     }
   },
   created() {
@@ -798,34 +811,39 @@ export default {
     // 设置默认日期范围
     this.callDaterangeTime = [this.formatDate(startOfDay), this.formatDate(endOfDay)]
     this.logDaterangeTime = [this.formatDate(startOfDay), this.formatDate(endOfDay)]
-    this.loadAreaOptions(); // 加载归属区域数据
+    this.loadAreaOptions() // 加载归属区域数据
   },
   methods: {
+    // 根据区域代码获取区域名称
+    getAreaNameByCode(areaCode) {
+      const area = this.areaOptions.find(a => a.id === areaCode);
+      return area ? area.label : '未知区域';
+    },
     /** 归属设施*/
     handleFacilityChange(selectedFacilityCode) {
-      const selectedFacility = this.facsOptions.find(f => f.facsCode === selectedFacilityCode);
+      const selectedFacility = this.facsOptions.find(f => f.facsCode === selectedFacilityCode)
       if (selectedFacility) {
-        this.form.areaName = selectedFacility.refAreaName;
-        this.form.areaCode = selectedFacility.refArea;
-        this.loadSubAreaOptions(selectedFacility.refArea);
+        this.form.areaName = selectedFacility.refAreaName
+        this.form.areaCode = selectedFacility.refArea
+        this.loadSubAreaOptions(selectedFacility.refArea)
       }
     },
     /** 归属设施*/
     handleAreaChange(value) {
-      this.form.locationRef = null;
-      this.loadSubAreaOptions(value);
+      this.form.locationRef = null
+      this.loadSubAreaOptions(value)
     },
     /**下拉归属区域*/
     loadAreaOptions() {
-      getAreaTreeSelect('0', 1 ).then(response => {
-        this.areaOptions = response.data || [];
-      });
+      getAreaTreeSelect('0', 1).then(response => {
+        this.areaOptions = response.data || []
+      })
     },
     /**下拉归属子区*/
     loadSubAreaOptions(rootCode) {
-      getAreaTreeSelect(rootCode,  2 ).then(response => {
-        this.subAreaOptions = response.data || [];
-      });
+      getAreaTreeSelect(rootCode, 2).then(response => {
+        this.subAreaOptions = response.data || []
+      })
     },
     getFacsOptions() {
       const getFacsParams = {
@@ -847,12 +865,6 @@ export default {
       const seconds = date.getSeconds().toString().padStart(2, '0')
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
     },
-    formatObjType(value) {
-      const objTypeMap = {
-        2: '设备'
-      }
-      return objTypeMap[value] || '未知类型'
-    },
     formatCallStatus(status) {
       const statusMap = {
         0: '成功',
@@ -861,26 +873,13 @@ export default {
       }
       return statusMap[status] || '未知状态'
     },
-
-    /**日志*/
-    showCallLog(row) {
-      this.curRow = row
-      this.getCallLog(row.deviceCode, this.callLogQueryParams.startTime, this.callLogQueryParams.endTime)
-      this.callLog = true
-    },
-    showReportLog(row) {
-      this.curRow = row
-      // 加载设备日志数据
-      this.getReportLog(row.deviceCode, this.logQueryParams.startTime, this.logQueryParams.endTime)
-      this.reportLog = true
-    },
     /**重置调用日志*/
     resetCallLogQuery() {
       this.callDaterangeTime = []
       this.callLogQueryParams.abilityKey = ''
       this.callLogQueryParams.callStatus = ''
-      this.callLogQueryParams.pageNum = 1;
-      this.callLogQueryParams.pageSize = 10;
+      this.callLogQueryParams.pageNum = 1
+      this.callLogQueryParams.pageSize = 10
       this.handleCallLogQuery()
     },
     /**查询调用日志*/
@@ -907,7 +906,7 @@ export default {
       }
       listCallLog(query).then(response => {
         this.callLogData = response.rows || []
-        this.callLogQueryTotal = response.total;
+        this.callLogQueryTotal = response.total
       })
     },
     /**调用日志详情*/
@@ -921,8 +920,8 @@ export default {
     /**重置设备日志*/
     resetLogQuery() {
       this.logDaterangeTime = []
-      this.logQueryParams.pageNum = 1;
-      this.logQueryParams.pageSize = 10;
+      this.logQueryParams.pageNum = 1
+      this.logQueryParams.pageSize = 10
       this.handleLogQuery() // 重新查询
     },
     /** 查询设备日志*/
@@ -946,7 +945,7 @@ export default {
       }
       listReportLog(query).then(response => {
         this.reportLogData = response.rows || []
-        this.logQueryTotal = response.total;
+        this.logQueryTotal = response.total
       })
     },
 
@@ -1029,10 +1028,11 @@ export default {
       this.componentOpen = false
       this.componentReset()
     },
-    /**查询部件列表*/
+    /**查询器件列表*/
     getComponentList(deviceCode) {
       listByDevice(deviceCode).then(response => {
         this.ComponentList = response.data
+        // this.componentTotal=response.total
       })
     },
     /** 查询区域树结构 */
@@ -1103,9 +1103,9 @@ export default {
     reset() {
       this.form = {
         id: null,
-        areaCode:null,
-        location:null,
-        locationRef:null,
+        areaCode: null,
+        location: null,
+        locationRef: null,
         deviceCode: null,
         deviceName: null,
         deviceType: null,
@@ -1165,7 +1165,7 @@ export default {
       this.form.customAttrs = []
       this.attrValuesMap = {}
       // 加载归属子区
-      this.loadSubAreaOptions(this.form.areaCode);
+      this.loadSubAreaOptions(this.form.areaCode)
     },
     /**设备器件按钮*/
     handleDevProcess(row) {
@@ -1186,7 +1186,7 @@ export default {
     handleDetail(row) {
       this.showDrawer = true
       this.curRow = row
-      console.log("设备详情",this.curRow)
+      console.log('设备详情', this.curRow)
       this.subKey = this.$options.data().subKey
       getModelByCode(this.curRow.deviceModel).then(response => {
         this.eventData = response.data?.eventList || []
@@ -1208,7 +1208,7 @@ export default {
       getDevice(id).then(response => {
         this.form = response.data
         // 加载归属子区
-        this.loadSubAreaOptions(this.form.areaCode);
+        this.loadSubAreaOptions(this.form.areaCode)
         console.log('this.form', this.form)
         this.open = true
         this.title = '修改能源设备'
@@ -1268,13 +1268,12 @@ export default {
             updateDevice(this.form).then(response => {
               this.$modal.msgSuccess('修改成功')
               this.open = false
-              this.showDrawer=false
+              this.showDrawer = false
               this.getList()
               if (this.showDrawer && this.curRow && this.curRow.id === this.form.id) {
                 this.handleDetail(this.form)
               }
 
-
             })
 
             if (dataToSubmit.length > 0) {
@@ -1513,4 +1512,10 @@ export default {
   border-color: #e4e7ed;
   color: #c0c4cc;
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
 </style>

ems-ui-cloud/src/views/devmgr/meterData/index.vue

@@ -24,25 +24,7 @@
           </el-tab-pane>
         </el-tabs>
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-                 label-width="68px"
-        >
-          <el-form-item label="表计编号" prop="deviceCode">
-            <el-input
-              v-model="queryParams.deviceCode"
-              placeholder="请输入计量设备"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="表计名称" prop="deviceName">
-            <el-input
-              v-model="queryParams.deviceName"
-              placeholder="请输入表计名称"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-
+                 label-width="68px">
           <el-form-item label="记录时间">
             <el-date-picker
               v-model="daterangeRecordTime"
@@ -166,6 +148,7 @@ import {
   listWaterMeterH
 } from '@/api/device/elecMeterH'
 import { areaTreeSelect } from '@/api/basecfg/area'
+import { getDeviceTree } from '@/api/device/meterDevice'
 
 export default {
   name: 'ElecMeterH',
@@ -239,19 +222,23 @@ export default {
     }
   },
   created() {
-    this.getAreaTreeSelect('0', false)
+     this.getAreaTreeSelect()
     this.getElecList()
   },
   methods: {
+
     handleTabChange() {
       // 根据newTabName给someParam赋值
       if (this.activeTab === 'first') {
         // 电表读数
+        this.queryParams.meterCls = '45'
         this.getElecList()
       } else if (this.activeTab === 'second') {
         // 水表读数
+        this.queryParams.meterCls = '70'
         this.getWaterList()
       }
+      this.getAreaTreeSelect()
       this.handleQuery()
     },
     // 筛选节点
@@ -261,16 +248,20 @@ export default {
     },
     // 节点单击事件
     handleNodeClick(data) {
-      this.queryParams.areaCode = data.id
-      console.log('this.queryParams.areaCode ', this.queryParams.areaCode)
+      if (data.id === null) {
+        this.$message.warning('该节点不是设备不可点击');
+        return;
+      }
+      this.queryParams.deviceCode = data.id
       this.handleQuery()
     },
     /**树结构*/
-    async getAreaTreeSelect(areaCode, recursion) {
-      await areaTreeSelect(areaCode, recursion).then(response => {
+    async getAreaTreeSelect() {
+      await getDeviceTree(0, this.queryParams.meterCls, 0).then(response => {
         this.areaOptions = response.data
       })
     },
+
     formatDateTime(dateTime) {
       if (!dateTime) return ''
       const date = new Date(dateTime)