抄表界面优化

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

@@ -19,14 +19,15 @@ export function listAreaDevice(query) {
 }
 
 //根据设施获取设备树结构
-export function getDeviceTree(parentCode, meterCls, colMode) {
+export function getDeviceTree(parentCode, meterCls, colMode, deviceEnable) {
     return request({
         url: '/ems/meterDevice/getTreeByArea',
         method: 'get',
         params: {
             parentCode,
             meterCls,
-            colMode
+            colMode,
+            deviceEnable
         }
     })
 }

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

@@ -1248,12 +1248,18 @@ export default {
 
     // 获取设备状态类型
     getDeviceStatusType(device) {
-      return 'info';
+      // 根据 deviceEnable 字段返回不同的标签类型
+      // 1: 正常（绿色） - success
+      // 0: 未启用（灰色） - info
+      return device.deviceEnable === 1 ? 'success' : 'info';
     },
 
     // 获取设备状态文本
     getDeviceStatusText(device) {
-      return '正常';
+      // 根据 deviceEnable 字段返回对应的文本
+      // 1: 正常
+      // 0: 未启用
+      return device.deviceEnable === 1 ? '正常' : '未启用';
     },
 
     // 格式化字典值

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

@@ -5,11 +5,15 @@
       <el-col :span="4" :xs="24">
         <div class="head-container">
           <el-input v-model="areaName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
-            style="margin-bottom: 20px" />
+                    style="margin-bottom: 20px"
+          />
         </div>
         <div class="head-container">
-          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
-            node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
+          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree"
+                   node-key="id" default-expand-all highlight-current @node-click="handleNodeClick"
+                   style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
         </div>
       </el-col>
 
@@ -19,12 +23,18 @@
       </el-tabs>
 
       <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <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-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-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable
+                      @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
           <el-form-item label="表计标签" prop="objTag">
             <el-select v-model="queryParams.objTag" placeholder="请选择表计标签" clearable>
@@ -46,28 +56,44 @@
 
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['ems:device:add']">新增
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                       v-hasPermi="['ems:device:add']"
+            >新增
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-              v-hasPermi="['ems:device:edit']">修改</el-button>
+                       v-hasPermi="['ems:device:edit']"
+            >修改
+            </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-              v-hasPermi="['ems:device:remove']">删除</el-button>
+                       v-hasPermi="['ems:device:remove']"
+            >删除
+            </el-button>
           </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
         <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55" align="center" />
-          <el-table-column label="设备编号" align="left" prop="deviceCode" />
-          <el-table-column label="设备名称" align="left" prop="deviceName" width="250px"/>
-          <el-table-column label="安装位置" align="left" prop="location" width="200px"/>
+          <el-table-column type="selection" width="55" align="center"/>
+          <el-table-column label="设备编号" align="left" prop="deviceCode"/>
+          <el-table-column label="设备名称" align="left" prop="deviceName" width="200px"/>
+          <el-table-column label="安装位置" align="left" prop="location" width="180px"/>
+          <el-table-column label="启用状态" align="center" prop="deviceEnable" width="90px">
+            <template slot-scope="scope">
+              <el-tag
+                :type="scope.row.deviceEnable === 1 ? 'success' : 'info'"
+                size="small"
+              >
+                {{ scope.row.deviceEnable === 1 ? '正常' : '未启用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
           <el-table-column label="计量标签" align="center" prop="objTag">
             <template slot-scope="scope">
-              {{formatDict(scope.row.objTag,'objTagOptions')}}
+              {{ formatDict(scope.row.objTag, 'objTagOptions') }}
             </template>
           </el-table-column>
           <el-table-column label="采集方式" align="center" prop="colMode">
@@ -78,17 +104,24 @@
 
           <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-edit" @click="handleUpdate(scope.row)" v-hasPermi="['basecfg:device:edit']">
-                修改</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']">
-                删除</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                         v-hasPermi="['basecfg:device:edit']"
+              >
+                修改
+              </el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                         @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+              >
+                删除
+              </el-button>
 
             </template>
           </el-table-column>
         </el-table>
 
         <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-          @pagination="getList" />
+                    @pagination="getList"
+        />
 
         <!-- 添加或修改计量设备对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -96,48 +129,64 @@
             <!-- 归属区域 -->
             <el-form-item label="归属区域" prop="areaCode">
               <el-select v-model="form.areaCode" placeholder="请选择归属区域" @change="handleAreaChange">
-                <el-option v-for="item in areaOptions" :label="item.label" :value="item.id" :key="item.id" />
+                <el-option v-for="item in areaOptions" :label="item.label" :value="item.id" :key="item.id"/>
               </el-select>
             </el-form-item>
             <el-form-item label="归属子区" prop="locationRef">
               <el-select v-model="form.locationRef" placeholder="请选择归属子区">
-                <el-option v-for="item in subAreaOptions" :label="item.label" :value="item.id" :key="item.id" />
+                <el-option v-for="item in subAreaOptions" :label="item.label" :value="item.id" :key="item.id"/>
               </el-select>
             </el-form-item>
             <el-form-item label="设备编号" prop="deviceCode">
-              <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
+              <el-input v-model="form.deviceCode" placeholder="请输入设备编号"/>
             </el-form-item>
             <el-form-item label="设备名称" prop="deviceName">
-              <el-input v-model="form.deviceName" placeholder="请输入设备代码" />
+              <el-input v-model="form.deviceName" placeholder="请输入设备代码"/>
             </el-form-item>
             <el-form-item label="设备分组" prop="group">
-              <el-input v-model="form.group" placeholder="请输入设备分组" />
+              <el-input v-model="form.group" placeholder="请输入设备分组"/>
             </el-form-item>
             <el-form-item label="安装位置" prop="location">
-              <el-input v-model="form.location" placeholder="请输入设备安装位置" />
+              <el-input v-model="form.location" placeholder="请输入设备安装位置"/>
+            </el-form-item>
+            <el-form-item label="启用状态" prop="deviceEnable">
+              <el-switch
+                v-model="form.deviceEnable"
+                :active-value="1"
+                :inactive-value="0"
+                active-text="正常"
+                inactive-text="未启用"
+                active-color="#13ce66"
+                inactive-color="#909399"
+              >
+              </el-switch>
             </el-form-item>
             <el-form-item label="表计标签" prop="objTag">
               <el-radio-group v-model="form.objTag" size="medium">
-                <el-radio v-for="(item, index) in objTagOptions" :key="index" :label="item.code" :disabled="item.disabled">{{item.name}}
+                <el-radio v-for="(item, index) in objTagOptions" :key="index" :label="item.code"
+                          :disabled="item.disabled"
+                >{{ item.name }}
                 </el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="采集方式" prop="colMode">
               <el-radio-group v-model="form.colMode" size="medium" @change="colModeChange">
-                <el-radio v-for="(item, index) in colModeOptions" :key="index" :label="item.code" :disabled="item.disabled">{{item.name}}
+                <el-radio v-for="(item, index) in colModeOptions" :key="index" :label="item.code"
+                          :disabled="item.disabled"
+                >{{ item.name }}
                 </el-radio>
               </el-radio-group>
             </el-form-item>
 
             <!-- 周期时长 -->
             <el-form-item v-if="form.colMode === 0" label="周期时长" prop="colCycle">
-              <el-input v-model="form.colCycle" :min="1" :max="86400" placeholder="请输入周期时长（秒）" />
+              <el-input v-model="form.colCycle" :min="1" :max="86400" placeholder="请输入周期时长（秒）"/>
             </el-form-item>
             <el-form-item label="倍率" prop="magnification">
-              <el-input-number v-model="form.magnification" :min="0" :max="99" ></el-input-number>
+              <el-input-number v-model="form.magnification" :min="0" :max="99"></el-input-number>
             </el-form-item>
             <el-form-item label="规格描述" prop="specDesc">
-              <el-input v-model="form.specDesc" placeholder="请输入规格描述" />
+              <el-input v-model="form.specDesc" placeholder="请输入规格描述"/>
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
@@ -199,7 +248,7 @@ export default {
       objTagOptions: [
         { code: 0, name: '无标签' },
         { code: 1, name: '个户表' },
-        { code: 2, name: '公摊表' },
+        { code: 2, name: '公摊表' }
       ],
       colCycleOptions: [
         { code: 0, name: '实时' },
@@ -219,23 +268,26 @@ export default {
         areaCode: null,
         bldgCode: null,
         deviceCode: null,
-        locationRef:null,
+        deviceName: null,
+        locationRef: null,
         meterCls: null,
         objTag: null,
         colCycle: null,
         colMode: null,
         magnification: null,
-        specDesc: null
+        specDesc: null,
+        deviceEnable: null  // 添加启用状态查询参数
       },
       // 表单参数
       form: {
         areaCode: null,
+        deviceEnable: 1  // 默认启用
       },
       // 表单校验
       rules: {
         areaCode: [{ required: true, message: '选择服务区', trigger: 'blur' }],
         deviceCode: [{ required: true, message: '设备代码不能为空', trigger: 'blur' }],
-        meterCls: [{ required: true, message: '计量类别不能为空', trigger: 'blur' }],
+        meterCls: [{ required: true, message: '计量类别不能为空', trigger: 'blur' }]
       }
     }
   },
@@ -255,16 +307,16 @@ export default {
     /**归属子区*/
     loadSubAreaOptions(areaCode) {
       areaTreeSelect(areaCode, 2).then((response) => {
-        this.subAreaOptions = response.data || [];
+        this.subAreaOptions = response.data || []
       })
     },
     /**归属区域*/
     handleAreaChange() {
-      this.loadSubAreaOptions(this.form.areaCode);
+      this.loadSubAreaOptions(this.form.areaCode)
     },
     handleTabClick(tab) {
-      this.activeTab = tab.name;
-      this.getList();
+      this.activeTab = tab.name
+      this.getList()
     },
     colModeChange(val) {
       if (val === 1) {
@@ -275,25 +327,28 @@ export default {
     },
     /** 查询计量设备列表 */
     getList() {
-      this.loading = true;
-      let meterCls = '';
+      this.loading = true
+      let meterCls = ''
       if (this.activeTab === '电表') {
-        meterCls = 45;
+        meterCls = 45
       } else if (this.activeTab === '水表') {
-        meterCls = 70;
+        meterCls = 70
       }
       const params = {
         locationRef: this.queryParams.locationRef,
+        deviceCode: this.queryParams.deviceCode,
+        deviceName: this.queryParams.deviceName,
         meterCls,
         objTag: this.queryParams.objTag,
         colMode: this.queryParams.colMode,
+        deviceEnable: this.queryParams.deviceEnable,  // 添加启用状态参数
         pageNum: this.queryParams.pageNum,
         pageSize: this.queryParams.pageSize
-      };
+      }
       listAreaDevice(params).then(response => {
-        this.deviceList = response.rows;
-        this.total = response.total;
-        this.loading = false;
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
       })
     },
     // 取消按钮
@@ -307,14 +362,15 @@ export default {
         id: null,
         deviceCode: null,
         deviceName: null,
-        deviceLocation:null,
-        locationRef:null,
-        location:null,
+        deviceLocation: null,
+        locationRef: null,
+        location: null,
         meterCls: null,
         colCycle: null,
         colMode: null,
         specDesc: null,
-        magnification :1
+        magnification: 1,
+        deviceEnable: 1  // 重置时默认为启用
       }
       this.objCode = null
       this.areaMod = false
@@ -337,18 +393,19 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.areaMod = true;
-      this.form.magnification = 1;
+      this.reset()
+      this.open = true
+      this.areaMod = true
+      this.form.magnification = 1
+      this.form.deviceEnable = 1  // 新增时默认启用
       /** 加载归属子区*/
-      this.loadSubAreaOptions(this.form.areaCode);
+      this.loadSubAreaOptions(this.form.areaCode)
       if (this.activeTab === '电表') {
-        this.title = '添加电表';
-        this.form.meterCls = 45;
+        this.title = '添加电表'
+        this.form.meterCls = 45
       } else if (this.activeTab === '水表') {
-        this.title = '添加水表';
-        this.form.meterCls = 70;
+        this.title = '添加水表'
+        this.form.meterCls = 70
       }
     },
     /** 修改按钮操作 */
@@ -356,14 +413,18 @@ export default {
       this.reset()
       const id = row.id || this.ids
       getDevice(id).then(response => {
-        this.form = response.data;
+        this.form = response.data
+        // 确保deviceEnable有默认值
+        if (this.form.deviceEnable === undefined || this.form.deviceEnable === null) {
+          this.form.deviceEnable = 1
+        }
         /** 加载归属子区*/
-        this.loadSubAreaOptions(this.form.areaCode);
-        this.open = true;
+        this.loadSubAreaOptions(this.form.areaCode)
+        this.open = true
         if (this.activeTab === '电表') {
-          this.title = '修改电表';
+          this.title = '修改电表'
         } else if (this.activeTab === '水表') {
-          this.title = '修改水表';
+          this.title = '修改水表'
         }
       })
     },
@@ -399,7 +460,8 @@ export default {
           this.getList()
           this.$modal.msgSuccess('删除成功')
         })
-        .catch(() => {})
+        .catch(() => {
+        })
     },
     formatDict(val, options, key = 'code', text = 'name') {
       let name = ''
@@ -420,19 +482,19 @@ export default {
     /** 查询区域树结构 */
     getAreaTree(areaCode, layer) {
       areaTreeSelect(areaCode, layer).then(response => {
-        this.areaOptions = response.data || [];
+        this.areaOptions = response.data || []
         this.$nextTick(() => {
           //触发第一个节点
-          this.triggerFirstNodeClick();
-        });
+          this.triggerFirstNodeClick()
+        })
       })
     },
     triggerFirstNodeClick() {
-      const tree = this.$refs.tree;
-      const firstNode = this.areaOptions[0];
+      const tree = this.$refs.tree
+      const firstNode = this.areaOptions[0]
       if (firstNode) {
-        tree.setCurrentKey(firstNode.id);
-        this.handleNodeClick(firstNode);
+        tree.setCurrentKey(firstNode.id)
+        this.handleNodeClick(firstNode)
       }
     },
 
@@ -443,10 +505,16 @@ export default {
     },
     // 节点单击事件
     handleNodeClick(data) {
-      this.queryParams.areaCode = data.id;
-      this.queryParams.locationRef = data.id;
-      this.handleQuery();
+      this.queryParams.areaCode = data.id
+      this.queryParams.locationRef = data.id
+      this.handleQuery()
     }
   }
 }
 </script>
+
+<style scoped>
+.deleteBtn {
+  color: #f56c6c;
+}
+</style>

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

@@ -27,13 +27,21 @@
             @node-click="handleNodeClick"
           >
             <template #default="{ node, data }">
-              <div class="tree-node"
-                   :class="{ 'device-node': data.type === 'device', 'area-node': data.type === 'area' }"
+              <el-tooltip
+                class="tree-node-tooltip"
+                effect="dark"
+                :content="data.label"
+                placement="right"
+                :disabled="!isTextOverflow(data.label)"
               >
-                <i v-if="data.type === 'area'" class="el-icon-folder node-icon area-icon"></i>
-                <i v-if="data.type === 'device'" class="el-icon-monitor node-icon device-icon"></i>
-                <span class="node-label">{{ data.label }}</span>
-              </div>
+                <div class="tree-node"
+                     :class="{ 'device-node': data.type === 'device', 'area-node': data.type === 'area' }"
+                >
+                  <i v-if="data.type === 'area'" class="el-icon-folder node-icon area-icon"></i>
+                  <i v-if="data.type === 'device'" class="el-icon-monitor node-icon device-icon"></i>
+                  <span class="node-label">{{ data.label }}</span>
+                </div>
+              </el-tooltip>
             </template>
           </el-tree>
         </div>
@@ -47,6 +55,16 @@
           <el-tab-pane label="水表读数" name="second"></el-tab-pane>
         </el-tabs>
 
+        <!-- 当前选中设备信息 -->
+        <div class="selected-info" v-if="selectedDevice">
+          <el-alert
+            :title="`当前选中设备：${selectedDevice.label}`"
+            type="info"
+            :closable="false"
+            show-icon
+          />
+        </div>
+
         <!-- 查询表单 -->
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                  label-width="80px"
@@ -85,7 +103,7 @@
                     <span class="inline-label">总用电量</span>
                   </div>
                   <div class="inline-card-right">
-                    <span class="inline-value">{{ formatNumber(numElecMeterHData && numElecMeterHData.total ? numElecMeterHData.total.quantity : 0) }}</span>
+                    <span class="inline-value">{{ formatNumber(numElecMeterHData ? numElecMeterHData.totalElecQuantity : 0) }}</span>
                     <span class="inline-unit">kWh</span>
                   </div>
                 </div>
@@ -98,7 +116,7 @@
                     <span class="inline-label">总电费</span>
                   </div>
                   <div class="inline-card-right">
-                    <span class="inline-value">{{ formatNumber(numElecMeterHData && numElecMeterHData.total ? numElecMeterHData.total.useCost : 0, 2) }}</span>
+                    <span class="inline-value">{{ formatNumber(numElecMeterHData ? numElecMeterHData.totalElecCost : 0, 2) }}</span>
                     <span class="inline-unit">元</span>
                   </div>
                 </div>
@@ -125,7 +143,7 @@
 
                     <div class="peak-percentage">
                       占比 {{
-                        numElecMeterHData && numElecMeterHData.total && numElecMeterHData.total.quantity > 0 ? calculatePercentage(getMeterTypeData(meterType.value, 'quantity'), numElecMeterHData.total.quantity) : '0.0'
+                        numElecMeterHData && numElecMeterHData.totalElecQuantity > 0 ? calculatePercentage(getMeterTypeData(meterType.value, 'quantity'), numElecMeterHData.totalElecQuantity) : '0.0'
                       }}%
                     </div>
                   </div>
@@ -260,6 +278,8 @@ export default {
       waterMeterHList: [],
       // 小时电费时间范围
       daterangeRecordTime: [],
+      // 选中的设备节点
+      selectedDevice: null,
       // 支持的电量类型
       supportedMeterTypes: [],
       // 电量类型映射
@@ -327,6 +347,7 @@ export default {
     this.getAreaTreeSelect().then(() => {
       const firstValidNode = this.findFirstValidNode(this.areaOptions)
       if (firstValidNode) {
+        this.selectedDevice = firstValidNode
         this.queryParams.deviceCode = firstValidNode.id
         this.handleQuery()
       } else {
@@ -396,23 +417,23 @@ export default {
       const availableTypes = []
       if (this.numElecMeterHData) {
         // 尖峰电量
-        if (this.numElecMeterHData.peakElec && this.numElecMeterHData.peakElec.quantity > 0) {
+        if (this.numElecMeterHData.sharpPeakQuantity > 0) {
           availableTypes.push('2')
         }
         // 峰段电量
-        if (this.numElecMeterHData.highElec && this.numElecMeterHData.highElec.quantity > 0) {
+        if (this.numElecMeterHData.peakQuantity > 0) {
           availableTypes.push('1')
         }
         // 平段电量
-        if (this.numElecMeterHData.normalElec && this.numElecMeterHData.normalElec.quantity > 0) {
+        if (this.numElecMeterHData.normalQuantity > 0) {
           availableTypes.push('0')
         }
         // 谷段电量
-        if (this.numElecMeterHData.lowElec && this.numElecMeterHData.lowElec.quantity > 0) {
+        if (this.numElecMeterHData.valleyQuantity > 0) {
           availableTypes.push('-1')
         }
         // 深谷电量
-        if (this.numElecMeterHData.deepValleyElec && this.numElecMeterHData.deepValleyElec.quantity > 0) {
+        if (this.numElecMeterHData.deepValleyQuantity > 0) {
           availableTypes.push('-2')
         }
       }
@@ -426,17 +447,22 @@ export default {
     // 获取指定类型的电量数据
     getMeterTypeData(meterType, field) {
       if (!this.numElecMeterHData) return 0
-      const typeMapping = {
-        '-2': 'deepValleyElec',
-        '-1': 'lowElec',
-        '0': 'normalElec',
-        '1': 'highElec',
-        '2': 'peakElec'
+
+      // 直接从扁平结构读取数据
+      if (field === 'quantity') {
+        const quantityMap = {
+          '-2': 'deepValleyQuantity',
+          '-1': 'valleyQuantity',
+          '0': 'normalQuantity',
+          '1': 'peakQuantity',
+          '2': 'sharpPeakQuantity'
+        }
+        const fieldName = quantityMap[meterType]
+        return fieldName ? (this.numElecMeterHData[fieldName] || 0) : 0
       }
-      const typeName = typeMapping[meterType]
-      return typeName && this.numElecMeterHData[typeName]
-        ? (this.numElecMeterHData[typeName][field] || 0)
-        : 0
+
+      // 费用数据暂时无法从新接口获取细分类型，返回0
+      return 0
     },
 
     // Tab切换处理
@@ -458,6 +484,7 @@ export default {
       this.getAreaTreeSelect().then(() => {
         const firstValidNode = this.findFirstValidNode(this.areaOptions)
         if (firstValidNode) {
+          this.selectedDevice = firstValidNode
           this.queryParams.deviceCode = firstValidNode.id
           this.handleQuery()
         } else {
@@ -481,6 +508,7 @@ export default {
     handleNodeClick(data) {
       // 仅处理设备节点
       if (data.type === 'device') {
+        this.selectedDevice = data
         this.queryParams.deviceCode = data.id
         this.handleQuery()
       }
@@ -502,9 +530,15 @@ export default {
 
     // 树结构加载
     async getAreaTreeSelect() {
-      await getDeviceTree(0, this.queryParams.meterCls, 0).then(response => {
-        this.areaOptions = response.data
-      })
+      try {
+        await getDeviceTree(0, this.queryParams.meterCls, 0, 1).then(response => {
+          // 处理空数据情况
+          this.areaOptions = response.data || []
+        })
+      } catch (error) {
+        console.error('加载设备树失败:', error)
+        this.areaOptions = []
+      }
     },
 
     // 格式化日期时间
@@ -532,8 +566,14 @@ export default {
     getElecList() {
       this.loading = true
       getElecMdevHourList(this.queryParams).then(response => {
-        this.elecMeterHList = response.rows
-        this.total = response.total
+        // 处理空数据情况
+        this.elecMeterHList = response.rows || []
+        this.total = response.total || 0
+        this.loading = false
+      }).catch(error => {
+        console.error('获取用电列表失败:', error)
+        this.elecMeterHList = []
+        this.total = 0
         this.loading = false
       })
     },
@@ -541,9 +581,15 @@ export default {
     // 查询用水计量-小时列表
     getWaterList() {
       this.loading = true
-      listWaterMeterH(this.queryParams).then(response => {
-        this.waterMeterHList = response.rows
-        this.total = response.total
+      getWaterMdevHourList(this.queryParams).then(response => {
+        // 处理空数据情况
+        this.waterMeterHList = response.rows || []
+        this.total = response.total || 0
+        this.loading = false
+      }).catch(error => {
+        console.error('获取用水列表失败:', error)
+        this.waterMeterHList = []
+        this.total = 0
         this.loading = false
       })
     },
@@ -580,73 +626,21 @@ export default {
       }
       try {
         const response = await getElecMdevHourSummary(query)
-        // 处理空数据情况
+        // 直接使用扁平结构数据
         if (!response.data || (typeof response.data === 'object' && Object.keys(response.data).length === 0)) {
+          // 设置默认空数据
           this.numElecMeterHData = {
-            total: {
-              quantity: 0,
-              useCost: 0
-            },
-            deepValleyElec: { quantity: 0, useCost: 0 },
-            lowElec: { quantity: 0, useCost: 0 },
-            normalElec: { quantity: 0, useCost: 0 },
-            highElec: { quantity: 0, useCost: 0 },
-            peakElec: { quantity: 0, useCost: 0 }
+            totalElecQuantity: 0,
+            totalElecCost: 0,
+            sharpPeakQuantity: 0,
+            peakQuantity: 0,
+            normalQuantity: 0,
+            valleyQuantity: 0,
+            deepValleyQuantity: 0
           }
         } else {
-          const flatData = response.data
-
-          // 将扁平数据转换为原来的嵌套结构
-          this.numElecMeterHData = {
-            total: {
-              areaCode: flatData.areaCode,
-              objType: flatData.objType,
-              objCode: flatData.objCode,
-              objName: flatData.objName,
-              quantity: flatData.totalElecQuantity || 0,
-              useCost: flatData.totalElecCost || 0
-            },
-            deepValleyElec: {
-              areaCode: flatData.areaCode,
-              objType: flatData.objType,
-              objCode: '-2',
-              objName: 'deepValleyElec',
-              quantity: flatData.deepValleyQuantity || 0,
-              useCost: 0 // 深谷费用暂时无法直接从新接口获取，设置为0
-            },
-            lowElec: {
-              areaCode: flatData.areaCode,
-              objType: flatData.objType,
-              objCode: '-1',
-              objName: 'lowElec',
-              quantity: flatData.valleyQuantity || 0,
-              useCost: 0 // 谷段费用暂时无法直接从新接口获取，设置为0
-            },
-            normalElec: {
-              areaCode: flatData.areaCode,
-              objType: flatData.objType,
-              objCode: '0',
-              objName: 'normalElec',
-              quantity: flatData.normalQuantity || 0,
-              useCost: 0 // 平段费用暂时无法直接从新接口获取，设置为0
-            },
-            highElec: {
-              areaCode: flatData.areaCode,
-              objType: flatData.objType,
-              objCode: '1',
-              objName: 'highElec',
-              quantity: flatData.peakQuantity || 0,
-              useCost: 0 // 峰段费用暂时无法直接从新接口获取，设置为0
-            },
-            peakElec: {
-              areaCode: flatData.areaCode,
-              objType: flatData.objType,
-              objCode: '2',
-              objName: 'peakElec',
-              quantity: flatData.sharpPeakQuantity || 0,
-              useCost: 0 // 尖峰费用暂时无法直接从新接口获取，设置为0
-            }
-          }
+          // 直接使用响应数据
+          this.numElecMeterHData = response.data
         }
 
         // 重新加载支持的电量类型
@@ -654,12 +648,13 @@ export default {
       } catch (error) {
         // 出错时设置默认空数据结构
         this.numElecMeterHData = {
-          total: { quantity: 0, useCost: 0 },
-          deepValleyElec: { quantity: 0, useCost: 0 },
-          lowElec: { quantity: 0, useCost: 0 },
-          normalElec: { quantity: 0, useCost: 0 },
-          highElec: { quantity: 0, useCost: 0 },
-          peakElec: { quantity: 0, useCost: 0 }
+          totalElecQuantity: 0,
+          totalElecCost: 0,
+          sharpPeakQuantity: 0,
+          peakQuantity: 0,
+          normalQuantity: 0,
+          valleyQuantity: 0,
+          deepValleyQuantity: 0
         }
         this.$message.error('获取用电统计数据失败')
       }
@@ -767,57 +762,19 @@ export default {
       return 0
     },
 
+    // 判断文本是否溢出（需要显示tooltip）
+    isTextOverflow(text) {
+      // 简单判断：超过一定字符数就显示tooltip
+      // 可以根据实际情况调整这个数值
+      return text && text.length > 8
+    },
+
     // 格式化数字
     formatNumber(num, decimals = 2) {
       if (num === null || num === undefined || isNaN(num)) {
         return '0.' + '0'.repeat(decimals)
       }
       return Number(num).toFixed(decimals)
-    },
-
-    // 查询用电计量-小时列表
-    getElecList() {
-      this.loading = true
-      getElecMdevHourList(this.queryParams).then(response => {
-        // 处理空数据情况
-        this.elecMeterHList = response.rows || []
-        this.total = response.total || 0
-        this.loading = false
-      }).catch(error => {
-        console.error('获取用电列表失败:', error)
-        this.elecMeterHList = []
-        this.total = 0
-        this.loading = false
-      })
-    },
-
-    // 查询用水计量-小时列表
-    getWaterList() {
-      this.loading = true
-      getWaterMdevHourList(this.queryParams).then(response => {
-        // 处理空数据情况
-        this.waterMeterHList = response.rows || []
-        this.total = response.total || 0
-        this.loading = false
-      }).catch(error => {
-        console.error('获取用水列表失败:', error)
-        this.waterMeterHList = []
-        this.total = 0
-        this.loading = false
-      })
-    },
-
-    // 树结构加载
-    async getAreaTreeSelect() {
-      try {
-        await getDeviceTree(0, this.queryParams.meterCls, 0).then(response => {
-          // 处理空数据情况
-          this.areaOptions = response.data || []
-        })
-      } catch (error) {
-        console.error('加载设备树失败:', error)
-        this.areaOptions = []
-      }
     }
   }
 }
@@ -834,6 +791,15 @@ export default {
   background-color: #fafafa;
 }
 
+/* 选中信息提示样式 */
+.selected-info {
+  margin: 16px 0;
+}
+
+.selected-info .el-alert {
+  border-radius: 4px;
+}
+
 /* 树节点样式 */
 .tree-node {
   display: flex;
@@ -860,6 +826,9 @@ export default {
 .node-label {
   flex: 1;
   font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* 区域节点样式 - 不可点击 */
@@ -903,28 +872,6 @@ export default {
   color: #1890ff;
 }
 
-/* 压缩卡片高度 */
-.compact-card {
-  min-height: auto !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s;
-}
-
-.compact-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-}
-
-.compact-card .el-card__header {
-  padding: 12px 15px !important;
-  border-bottom: 1px solid #f0f0f0;
-  background: linear-gradient(to right, #f7f8fa, #ffffff);
-}
-
-.compact-card .el-card__body {
-  padding: 20px 15px !important;
-}
-
 /* 新的汇总统计容器 */
 .summary-container {
   margin-bottom: 20px;
@@ -1109,10 +1056,6 @@ export default {
   white-space: nowrap;
 }
 
-/* 汇总卡片样式 - 已删除 */
-
-/* 峰谷电卡片样式 - 已删除旧样式 */
-
 /* 响应式布局 */
 @media (max-width: 1680px) {
   .inline-value {

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

@@ -27,11 +27,21 @@
             @node-click="handleNodeClick"
           >
             <template #default="{ node, data }">
-              <div class="tree-node" :class="{ 'device-node': data.type === 'device', 'area-node': data.type === 'area' }">
-                <i v-if="data.type === 'area'" class="el-icon-folder node-icon area-icon"></i>
-                <i v-if="data.type === 'device'" class="el-icon-monitor node-icon device-icon"></i>
-                <span class="node-label">{{ data.label }}</span>
-              </div>
+              <el-tooltip
+                class="tree-node-tooltip"
+                effect="dark"
+                :content="data.label"
+                placement="right"
+                :disabled="!isTextOverflow(data.label)"
+              >
+                <div class="tree-node"
+                     :class="{ 'device-node': data.type === 'device', 'area-node': data.type === 'area' }"
+                >
+                  <i v-if="data.type === 'area'" class="el-icon-folder node-icon area-icon"></i>
+                  <i v-if="data.type === 'device'" class="el-icon-monitor node-icon device-icon"></i>
+                  <span class="node-label">{{ data.label }}</span>
+                </div>
+              </el-tooltip>
             </template>
           </el-tree>
         </div>
@@ -52,16 +62,26 @@
 
         <!-- 有设备时显示操作区域 -->
         <div v-if="hasManualDevices">
-          <!-- 填报按钮 -->
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            size="mini"
-            @click="handleRecord"
-            :disabled="!currentDevice"
-          >
-            填报
-          </el-button>
+          <!-- 当前选中设备信息和操作按钮 -->
+          <div class="selected-info-bar">
+            <el-alert
+              :title="`当前选中设备：${currentDeviceName || '请选择设备'}`"
+              type="info"
+              :closable="false"
+              show-icon
+              class="selected-alert"
+            />
+            <el-button
+              type="primary"
+              icon="el-icon-edit"
+              size="small"
+              @click="handleRecord"
+              :disabled="!currentDevice"
+              class="fill-button"
+            >
+              填报
+            </el-button>
+          </div>
 
           <!-- 历史抄表记录 -->
           <el-form ref="recListForm" :model="recListForm" label-width="100px" style="margin-top: 20px">
@@ -76,10 +96,6 @@
               />
             </el-form-item>
 
-            <el-form-item label="计量设备" prop="deviceCode">
-              <el-input disabled :value="currentDeviceName" placeholder="请选择左侧设备" />
-            </el-form-item>
-
             <el-form-item label="抄表历史" prop="recList">
               <el-table v-loading="loading" :data="recListForm.recList" max-height="400px">
                 <el-table-column label="年份" align="center" prop="year" width="80" />
@@ -361,7 +377,7 @@ export default {
       this.loading = true
       try {
         // colMode=1 表示获取手动抄表类型的设备
-        const response = await getDeviceTree(0, this.queryParams.meterCls, 1)
+        const response = await getDeviceTree(0, this.queryParams.meterCls, 1, 1)
         this.areaOptions = response.data || []
 
         // 判断是否有手动抄表设备
@@ -725,6 +741,13 @@ export default {
       return node.areaCode || node.parentCode || ''
     },
 
+    // 判断文本是否溢出
+    isTextOverflow(text) {
+      // 简单判断：超过一定字符数就显示tooltip
+      // 可以根据实际情况调整这个数值
+      return text && text.length > 8
+    },
+
     // 格式化数字
     formatNumber(value, decimals = 2) {
       if (value === null || value === undefined || value === '') return '-'
@@ -759,6 +782,26 @@ export default {
   background-color: #fafafa;
 }
 
+/* 选中信息栏样式 */
+.selected-info-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.selected-alert {
+  flex: 1;
+}
+
+.selected-alert .el-alert__content {
+  padding-right: 0;
+}
+
+.fill-button {
+  flex-shrink: 0;
+}
+
 /* 树节点样式 */
 .tree-node {
   display: flex;
@@ -785,6 +828,9 @@ export default {
 .node-label {
   flex: 1;
   font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* 区域节点样式 */
@@ -884,13 +930,8 @@ export default {
   margin-bottom: 18px;
 }
 
-/* 按钮组样式 */
-.button-group {
-  margin-bottom: 15px;
-}
-
 /* 月份选择器样式 */
- .el-date-editor.el-input {
+.el-date-editor.el-input {
   width: 100%;
 }
 
@@ -903,5 +944,15 @@ export default {
   .el-col-xs-24 {
     margin-bottom: 20px;
   }
+
+  .selected-info-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .fill-button {
+    width: 100%;
+    margin-top: 8px;
+  }
 }
 </style>