调水电页面布局

zhangjiaqing

2026-03-11 fc798352edcce16a0c1ead4a89c7c6e6db559ae8

调水电页面布局

 public/pages/property/meterWaterManage/meterWaterManage.html

@@ -1,9 +1,9 @@
<div>
    <div class="row">
        <div class="col-md-1 " style="padding-right:0px;height: 95%; overflow-x: hidden; overflow-y: scroll; min-width: 120px; position: relative; z-index: 10;">
        <div class="col-md-1 " style="padding-right:0px; overflow-x: hidden; overflow-y: auto; min-width: 120px; position: relative; z-index: 10;">
            <vc:create path="property/roomTreeDiv" callBackListener="meterWaterManage"></vc:create>
        </div>
        <div class="col-md-11 margin-top-xs padding-l-0" style="min-width: 900px; overflow-x: auto; width: calc(100% - 120px);">
        <div class="col-md-11 margin-top-xs padding-l-0" style="min-width: 900px;">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
@@ -78,10 +78,15 @@
                        </button> -->
                    </div>
                    <!-- 表格区域 -->
                    <div class="hc-table-div" style="width: 100%; overflow-x: auto; margin-bottom: 15px; display: block;">
                        <table class="table table-stripped table-condensed" data-page-size="15" style="width: 100%; min-width: 1200px; table-layout: fixed;">
                    <div class="hc-table-div" :style="{'width':_computeTableDivWidth()}" style="overflow-x: auto; margin-bottom: 15px;">
                        <table class="table table-stripped table-condensed" data-page-size="15">
                            <thead>
                                <tr style="white-space: nowrap;">
                                    <!-- 操作列 -->
                                    <th class="text-center" style="position: sticky; left: 0; background-color: #fff; z-index: 10;">
                                        <vc:i18n name="操作" namespace="meterWaterManage"></vc:i18n>
                                    </th>
                                    <!-- 左侧列 -->
                                    <th class="text-center">
                                        <vc:i18n name="表ID" namespace="meterWaterManage"></vc:i18n>
                                    </th>
@@ -119,9 +124,6 @@
                                        户名
                                    </th>
                                    <th class="text-center">
                                        户号
                                    </th>
                                    <th class="text-center">
                                        电能表编号
                                    </th>
                                    <th class="text-center">
@@ -151,37 +153,12 @@
                                    <th class="text-center">
                                        <vc:i18n name="创建时间" namespace="meterWaterManage"></vc:i18n>
                                    </th>
                                    <th class="text-center" style="position: sticky; right: 0; background-color: #fff; z-index: 10;">
                                        <vc:i18n name="操作" namespace="meterWaterManage"></vc:i18n>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="meterWater in meterWaterManageInfo.meterWaters" style="white-space: nowrap;">
                                    <td class="text-center" style="width: 80px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.waterId}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.meterTypeName}}</td>
                                    <td class="text-center" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.objName}}</td>
                                    <td class="text-center" style="width: 80px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.meterType || '-'}}</td>
                                    <td class="text-center" style="width: 40px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.roadName || '-'}}</td>
                                    <td class="text-center" style="width: 80px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.householdName || '-'}}</td>
                                    <td class="text-center" style="width: 30px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.floorNum || '-'}}</td>
                                    <td class="text-center" style="width: 30px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.unitNum || '-'}}</td>
                                    <td class="text-center" style="width: 30px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.roomNum || '-'}}</td>
                                    <td class="text-center" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.chargeStart || '-'}}</td>
                                    <td class="text-center" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.chargeEtart || '-'}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.householdName || '-'}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.householdNumber || '-'}}</td>
                                    <td class="text-center" style="width: 80px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.electricMeterId || '-'}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.powerSupplyBureau || '-'}}</td>
                                    <td class="text-center" style="width: 40px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.multiplyingFactor || '-'}}</td>
                                    <td class="text-center" style="width: 40px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.unitPrice || '-'}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.invoiceAmount || '-'}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.preDegrees}}</td>
                                    <td class="text-center" style="width: 60px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.curDegrees}}</td>
                                    <td class="text-center" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.preReadingTime}}</td>
                                    <td class="text-center" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.curReadingTime}}</td>
                                    <td class="text-center" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{meterWater.createTime}}</td>
                                    <td class="text-center" style="width: 100px; position: sticky; right: 0; background-color: #fff; z-index: 5;">
                                    <!-- 操作列 -->
                                    <td class="text-center" style="position: sticky; left: 0; background-color: #fff; z-index: 10;">
                                        <div class="btn-group" style="margin-bottom: 5px;">
                                            <button class="btn-white btn btn-xs"
                                                @click="_openEditMeterWaterModel(meterWater)">
@@ -195,6 +172,29 @@
                                            </button>
                                        </div>
                                    </td>
                                    <!-- 左侧列 -->
                                    <td class="text-center">{{meterWater.waterId}}</td>
                                    <td class="text-center">{{meterWater.meterTypeName}}</td>
                                    <td class="text-center">{{meterWater.objName}}</td>
                                    <td class="text-center">{{meterWater.meterType || '-'}}</td>
                                    <td class="text-center">{{meterWater.roadName || '-'}}</td>
                                    <td class="text-center">{{meterWater.householdName || '-'}}</td>
                                    <td class="text-center">{{meterWater.floorNum || '-'}}</td>
                                    <td class="text-center">{{meterWater.unitNum || '-'}}</td>
                                    <td class="text-center">{{meterWater.roomNum || '-'}}</td>
                                    <td class="text-center">{{meterWater.chargeStart || '-'}}</td>
                                    <td class="text-center">{{meterWater.chargeEtart || '-'}}</td>
                                    <td class="text-center">{{meterWater.householdName || '-'}}</td>
                                    <td class="text-center">{{meterWater.electricMeterId || '-'}}</td>
                                    <td class="text-center">{{meterWater.powerSupplyBureau || '-'}}</td>
                                    <td class="text-center">{{meterWater.multiplyingFactor || '-'}}</td>
                                    <td class="text-center">{{meterWater.unitPrice || '-'}}</td>
                                    <td class="text-center">{{meterWater.invoiceAmount || '-'}}</td>
                                    <td class="text-center">{{meterWater.preDegrees}}</td>
                                    <td class="text-center">{{meterWater.curDegrees}}</td>
                                    <td class="text-center">{{meterWater.preReadingTime}}</td>
                                    <td class="text-center">{{meterWater.curReadingTime}}</td>
                                    <td class="text-center">{{meterWater.createTime}}</td>
                                </tr>
                            </tbody>
                        </table>

 public/pages/property/meterWaterManage/meterWaterManage.js

@@ -450,9 +450,9 @@
                vc.jumpToPage('/#/pages/property/meterTypeManage?tab=抄表类型');
            },
            _computeTableDivWidth: function () {
                // 直接设置一个足够大的宽度，确保所有列都能显示
                // 这样即使在100%缩放时也能看到操作列
                return '3000px';
                let mainWidth = document.getElementsByTagName('body')[0].clientWidth - document.getElementById('menu-nav').offsetWidth;
                mainWidth = mainWidth - 20 - 15 - 20;
                return mainWidth + 'px';
            }
        }
    });