|
|
@@ -1,40 +1,52 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-row :gutter="20">
|
|
|
+ <!-- 左侧树形选择器 -->
|
|
|
<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"
|
|
|
- @input="filterTree"
|
|
|
+ <el-input
|
|
|
+ v-model="areaName"
|
|
|
+ placeholder="请输入区域名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ @input="filterTree"
|
|
|
/>
|
|
|
</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">
|
|
|
- <!-- 自定义节点内容：字符标识+名称 -->
|
|
|
- <template #default="{ data }">
|
|
|
- <div class="tree-node">
|
|
|
- <!-- 区域节点添加 ▶ 符号 -->
|
|
|
- <span v-if="data.type === 'area'" class="node-symbol area-symbol">▶</span>
|
|
|
- <!-- 设备节点添加 ◬ 符号 -->
|
|
|
- <span v-if="data.type === 'device'" class="node-symbol device-symbol">◬</span>
|
|
|
+ <div class="head-container tree-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"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
</template>
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
+
|
|
|
+ <!-- 右侧内容区域 -->
|
|
|
<el-col :span="20" :xs="24">
|
|
|
+ <!-- Tab切换 -->
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
|
|
- <el-tab-pane label="电表读数" name="first">
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="水表读数" name="second">
|
|
|
- </el-tab-pane>
|
|
|
+ <el-tab-pane label="电表读数" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="水表读数" name="second"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <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="80px">
|
|
|
<el-form-item label="抄表周期">
|
|
|
<el-date-picker
|
|
|
v-model="daterangeRecordTime"
|
|
|
@@ -44,127 +56,121 @@
|
|
|
range-separator="-"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
@change="handleQuery"
|
|
|
- ></el-date-picker>
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <!-- 用电统计数据表格 -->
|
|
|
- <el-card class="box-card" v-if="activeTab==='first' && numElecMeterHData">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>用电统计</span>
|
|
|
+ <!-- 用电统计卡片 -->
|
|
|
+ <div v-if="activeTab === 'first' && numElecMeterHData">
|
|
|
+ <!-- 汇总统计区域 -->
|
|
|
+ <div class="summary-container">
|
|
|
+ <!-- 总量统计卡片 -->
|
|
|
+ <div class="summary-row">
|
|
|
+ <el-card class="summary-inline-card">
|
|
|
+ <div class="inline-card-content">
|
|
|
+ <div class="inline-card-left">
|
|
|
+ <i class="el-icon-lightning inline-icon elec-icon"></i>
|
|
|
+ <span class="inline-label">总用电量</span>
|
|
|
+ </div>
|
|
|
+ <div class="inline-card-right">
|
|
|
+ <span class="inline-value">{{ formatNumber(numElecMeterHData.total.quantity) }}</span>
|
|
|
+ <span class="inline-unit">kWh</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="summary-inline-card">
|
|
|
+ <div class="inline-card-content">
|
|
|
+ <div class="inline-card-left">
|
|
|
+ <i class="el-icon-money inline-icon cost-icon"></i>
|
|
|
+ <span class="inline-label">总电费</span>
|
|
|
+ </div>
|
|
|
+ <div class="inline-card-right">
|
|
|
+ <span class="inline-value">{{ formatNumber(numElecMeterHData.total.useCost, 2) }}</span>
|
|
|
+ <span class="inline-unit">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 动态峰谷电统计卡片 - 仅在有数据时显示 -->
|
|
|
+ <div v-if="supportedMeterTypes && supportedMeterTypes.length > 0" class="peak-valley-row">
|
|
|
+ <el-card
|
|
|
+ v-for="meterType in supportedMeterTypes"
|
|
|
+ :key="meterType.value"
|
|
|
+ class="peak-inline-card"
|
|
|
+ >
|
|
|
+ <div class="peak-inline-content">
|
|
|
+ <div class="peak-inline-header">
|
|
|
+ <span class="peak-type-badge" :class="meterType.tagClass">{{ meterType.tagName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="peak-inline-body">
|
|
|
+ <div class="peak-inline-info">
|
|
|
+ <span class="peak-label">电量</span>
|
|
|
+ <span class="peak-value">{{ formatNumber(getMeterTypeData(meterType.value, 'quantity')) }}</span>
|
|
|
+ <span class="peak-unit">kWh</span>
|
|
|
+ </div>
|
|
|
+ <div class="peak-inline-info">
|
|
|
+ <span class="peak-label">费用</span>
|
|
|
+ <span class="peak-value">{{ formatNumber(getMeterTypeData(meterType.value, 'useCost'), 2) }}</span>
|
|
|
+ <span class="peak-unit">元</span>
|
|
|
+ </div>
|
|
|
+ <div class="peak-percentage">
|
|
|
+ 占比 {{ calculatePercentage(getMeterTypeData(meterType.value, 'quantity'), numElecMeterHData.total.quantity) }}%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-table :data="[numElecMeterHData]" border style="width: 100%">
|
|
|
- <!-- 第一行：用电量 -->
|
|
|
- <el-table-column label="" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ '电量（千瓦时）' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="合计" align="center" class-name="total-column">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="total-value">{{ scope.row.total.quantity ? scope.row.total.quantity.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="平段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.normalElec.quantity ? scope.row.normalElec.quantity.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="谷段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.lowElec.quantity ? scope.row.lowElec.quantity.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="峰段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.highElec.quantity ? scope.row.highElec.quantity.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="尖峰段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.peakElec.quantity ? scope.row.peakElec.quantity.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- 第二行：总金额 -->
|
|
|
- <el-table :data="[numElecMeterHData]" border style="width: 100%; margin-top: 10px" :show-header="false">
|
|
|
- <el-table-column label="" align="center" >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ '金额（元）' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="合计" align="center" class-name="total-column">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="total-value">{{ scope.row.total.useCost ? scope.row.total.useCost.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="平峰-金额(元)" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.normalElec.useCost ? scope.row.normalElec.useCost.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="低谷段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.lowElec.useCost ? scope.row.lowElec.useCost.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="高峰段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.highElec.useCost ? scope.row.highElec.useCost.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="尖峰段" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.peakElec.useCost ? scope.row.peakElec.useCost.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <!-- 用水统计数据表格 -->
|
|
|
- <el-card class="box-card" v-if="activeTab==='second' && numWaterMeterHData">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>用水统计</span>
|
|
|
+ <!-- 用水统计卡片 -->
|
|
|
+ <div v-if="activeTab === 'second'">
|
|
|
+ <!-- 汇总统计区域 -->
|
|
|
+ <div class="summary-container">
|
|
|
+ <div class="summary-row">
|
|
|
+ <el-card class="summary-inline-card">
|
|
|
+ <div class="inline-card-content">
|
|
|
+ <div class="inline-card-left">
|
|
|
+ <i class="el-icon-set-up inline-icon water-icon"></i>
|
|
|
+ <span class="inline-label">总用水量</span>
|
|
|
+ </div>
|
|
|
+ <div class="inline-card-right">
|
|
|
+ <span class="inline-value">{{ formatNumber(getWaterTotal('quantity')) }}</span>
|
|
|
+ <span class="inline-unit">m³</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="summary-inline-card">
|
|
|
+ <div class="inline-card-content">
|
|
|
+ <div class="inline-card-left">
|
|
|
+ <i class="el-icon-money inline-icon cost-icon"></i>
|
|
|
+ <span class="inline-label">总水费</span>
|
|
|
+ </div>
|
|
|
+ <div class="inline-card-right">
|
|
|
+ <span class="inline-value">{{ formatNumber(getWaterTotal('useCost'), 2) }}</span>
|
|
|
+ <span class="inline-unit">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-table :data="[numWaterMeterHData]" border style="width: 100%">
|
|
|
- <!-- 第一行：用水量 -->
|
|
|
- <el-table-column label="" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ '水量（吨）' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="合计" align="center" class-name="total-column">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="total-value">{{ scope.row.quantity ? scope.row.quantity.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- 第二行：总金额 -->
|
|
|
- <el-table :data="[numWaterMeterHData]" border style="width: 100%; margin-top: 10px" :show-header="false">
|
|
|
- <el-table-column label="" align="center" >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ '金额（元）' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="合计" align="center" class-name="total-column">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="total-value">{{ scope.row.useCost ? scope.row.useCost.toFixed(2) : '0.00' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-table v-if="activeTab === 'first'" v-loading="loading" :data="elecMeterHList">
|
|
|
- <el-table-column label="表计名称" align="left" prop="deviceName" width="250px"/>
|
|
|
- <el-table-column label="表计编号" align="left" prop="deviceCode"/>
|
|
|
+ <!-- 电表数据表格 -->
|
|
|
+ <el-table v-if="activeTab === 'first'" v-loading="loading" :data="elecMeterHList" style="margin-top: 20px">
|
|
|
+ <el-table-column label="表计名称" align="left" prop="deviceName" width="250px" />
|
|
|
+ <el-table-column label="表计编号" align="left" prop="deviceCode" />
|
|
|
<el-table-column label="抄表时间" align="center" prop="recordTime" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ formatDateTime(scope.row.recordTime) }}</span>
|
|
|
@@ -172,135 +178,127 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="计量时段" align="center" prop="meterType">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ getElecMeterType(scope.row.meterType) + "( " + scope.row.meterUnitPrice + " )"}}</span>
|
|
|
+ <el-tag :type="getMeterTypeTagType(scope.row.meterType)" size="small">
|
|
|
+ {{ getElecMeterType(scope.row.meterType) }}
|
|
|
+ </el-tag>
|
|
|
+ <span style="margin-left: 5px; color: #909399;">{{ scope.row.meterUnitPrice }} 元/kWh</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="用电量(kW·h)" align="center" prop="elecQuantity">
|
|
|
+ <el-table-column label="用电量(kWh)" align="center" prop="elecQuantity">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ scope.row.elecQuantity ? scope.row.elecQuantity.toFixed(2) : '0.00' }}</span>
|
|
|
+ <span>{{ formatNumber(scope.row.elecQuantity) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="小时电费" align="center" prop="useElecCost">
|
|
|
+ <el-table-column label="小时电费(元)" align="center" prop="useElecCost">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ scope.row.useElecCost ? scope.row.useElecCost.toFixed(2) : '0.00' }}</span>
|
|
|
+ <span>{{ formatNumber(scope.row.useElecCost, 2) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
- <el-table v-if="activeTab === 'second'" v-loading="loading" :data="waterMeterHList">
|
|
|
- <el-table-column type="selection" width="55" align="center"/>
|
|
|
- <el-table-column label="表计名称" align="left" prop="deviceName" width="250"/>
|
|
|
- <el-table-column label="表计编号" align="left" prop="deviceCode"/>
|
|
|
+ <!-- 水表数据表格 -->
|
|
|
+ <el-table v-if="activeTab === 'second'" v-loading="loading" :data="waterMeterHList" style="margin-top: 20px">
|
|
|
+ <el-table-column label="表计名称" align="left" prop="deviceName" width="250" />
|
|
|
+ <el-table-column label="表计编号" align="left" prop="deviceCode" />
|
|
|
<el-table-column label="抄表时间" align="center" prop="recordTime" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ formatDateTime(scope.row.recordTime) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="时间序列" align="center" prop="timeIndex"/>
|
|
|
- <el-table-column label="用水量(t)" align="center" prop="waterQuantity"/>
|
|
|
- <el-table-column label="单位水价" align="center" prop="meterUnitPrice"/>
|
|
|
- <el-table-column label="小时水费" align="center" prop="useWaterCost"/>
|
|
|
+ <el-table-column label="时间序列" align="center" prop="timeIndex" />
|
|
|
+ <el-table-column label="用水量(m³)" align="center" prop="waterQuantity">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ formatNumber(scope.row.waterQuantity) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="单位水价(元/m³)" align="center" prop="meterUnitPrice">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ formatNumber(scope.row.meterUnitPrice, 2) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小时水费(元)" align="center" prop="useWaterCost">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ formatNumber(scope.row.useWaterCost, 2) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
<pagination
|
|
|
- v-show="total>0"
|
|
|
+ v-show="total > 0"
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getElecList"
|
|
|
+ @pagination="getList"
|
|
|
/>
|
|
|
-
|
|
|
- <!-- 添加或修改用电计量-小时对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
- <el-form-item label="园区代码" prop="areaCode">
|
|
|
- <el-input v-model="form.areaCode" placeholder="请输入园区代码"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="计量设备" prop="deviceCode">
|
|
|
- <el-input v-model="form.deviceCode" placeholder="请输入计量设备"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="记录时间" prop="recordTime">
|
|
|
- <el-input v-model="form.recordTime" placeholder="记录时间"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="日期" prop="date">
|
|
|
- <el-date-picker clearable
|
|
|
- v-model="form.date"
|
|
|
- type="date"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- placeholder="请选择日期 yyyy-MM-dd"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="时间" prop="time">
|
|
|
- <el-time-picker clearable
|
|
|
- v-model="form.time"
|
|
|
- type="date"
|
|
|
- value-format="HH:mm:ss"
|
|
|
- placeholder="请选择时间 HH:mm:ss"
|
|
|
- >
|
|
|
- </el-time-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="时间序列" prop="timeIndex">
|
|
|
- <el-input v-model="form.timeIndex" placeholder="请输入时间序列"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="用电量" prop="elecQuantity">
|
|
|
- <el-input v-model="form.elecQuantity" placeholder="请输入用电量 单位：kW-h"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="单位电价" prop="meterUnitPrice">
|
|
|
- <el-input v-model="form.meterUnitPrice" placeholder="请输入单位电价"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="小时电费" prop="useElecCost">
|
|
|
- <el-input v-model="form.useElecCost" placeholder="请输入小时电费"/>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
- <el-button @click="cancel">取 消</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listElecMeterH, delElecMeterH, addElecMeterH, updateElecMeterH, getNumElecMeterH } from '@/api/device/elecMeterH'
|
|
|
+import { listElecMeterH, getNumElecMeterH, getElecDayAvg } from '@/api/device/elecMeterH'
|
|
|
import { listWaterMeterH, getNumWaterMeterH } from '@/api/device/waterMeterH'
|
|
|
import { getDeviceTree } from '@/api/device/meterDevice'
|
|
|
+import { getElechourTypes } from '@/api/device/energyConsumption'
|
|
|
|
|
|
export default {
|
|
|
- name: 'ElecMeterH',
|
|
|
+ name: 'MeterReading',
|
|
|
data() {
|
|
|
return {
|
|
|
// 存储用电统计数据
|
|
|
numElecMeterHData: null,
|
|
|
// 存储用水统计数据
|
|
|
numWaterMeterHData: null,
|
|
|
+ // 当前激活的标签页
|
|
|
activeTab: 'first',
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
- // 选中数组
|
|
|
- ids: [],
|
|
|
- // 非单个禁用
|
|
|
- single: true,
|
|
|
- // 非多个禁用
|
|
|
- multiple: true,
|
|
|
// 显示搜索条件
|
|
|
showSearch: true,
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
- eleCTotal:0,
|
|
|
- waterTotal:0,
|
|
|
// 用电计量-小时表格数据
|
|
|
elecMeterHList: [],
|
|
|
// 用水计量-小时表格数据
|
|
|
waterMeterHList: [],
|
|
|
- // 弹出层标题
|
|
|
- title: '',
|
|
|
- // 是否显示弹出层
|
|
|
- open: false,
|
|
|
// 小时电费时间范围
|
|
|
daterangeRecordTime: [],
|
|
|
+ // 支持的电量类型
|
|
|
+ supportedMeterTypes: [],
|
|
|
+ // 电量类型映射
|
|
|
+ meterTypeMap: {
|
|
|
+ '-2': {
|
|
|
+ name: '深谷电量',
|
|
|
+ tagName: '深谷',
|
|
|
+ tagClass: 'deep-valley-tag',
|
|
|
+ field: 'deepValleyElec'
|
|
|
+ },
|
|
|
+ '-1': {
|
|
|
+ name: '谷段电量',
|
|
|
+ tagName: '谷段',
|
|
|
+ tagClass: 'valley-tag',
|
|
|
+ field: 'lowElec'
|
|
|
+ },
|
|
|
+ '0': {
|
|
|
+ name: '平段电量',
|
|
|
+ tagName: '平段',
|
|
|
+ tagClass: 'normal-tag',
|
|
|
+ field: 'normalElec'
|
|
|
+ },
|
|
|
+ '1': {
|
|
|
+ name: '峰段电量',
|
|
|
+ tagName: '峰段',
|
|
|
+ tagClass: 'high-peak-tag',
|
|
|
+ field: 'highElec'
|
|
|
+ },
|
|
|
+ '2': {
|
|
|
+ name: '尖峰电量',
|
|
|
+ tagName: '尖峰',
|
|
|
+ tagClass: 'peak-tag',
|
|
|
+ field: 'peakElec'
|
|
|
+ }
|
|
|
+ },
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
@@ -320,95 +318,141 @@ export default {
|
|
|
children: 'children',
|
|
|
label: 'label'
|
|
|
},
|
|
|
- // 表单参数
|
|
|
- form: {},
|
|
|
- // 表单校验
|
|
|
- rules: {
|
|
|
- areaCode: [
|
|
|
- { required: true, message: '园区代码不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- deviceCode: [
|
|
|
- { required: true, message: '计量设备不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- recordTime: [
|
|
|
- { required: true, message: '记录时间不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- date: [
|
|
|
- { required: true, message: '日期 yyyy-MM-dd不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- time: [
|
|
|
- { required: true, message: '时间 HH:mm:ss不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- timeIndex: [
|
|
|
- { required: true, message: '时间序列不能为空', trigger: 'blur' }
|
|
|
- ]
|
|
|
+ // 日期选择器配置
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- // 初始化默认查询时间范围
|
|
|
- this.initDefaultDateRange();
|
|
|
-
|
|
|
+ this.initDefaultDateRange()
|
|
|
this.getAreaTreeSelect().then(() => {
|
|
|
- /** 获取第一个有效的设备节点 */
|
|
|
- const firstValidNode = this.findFirstValidNode(this.areaOptions);
|
|
|
+ const firstValidNode = this.findFirstValidNode(this.areaOptions)
|
|
|
if (firstValidNode) {
|
|
|
- this.queryParams.deviceCode = firstValidNode.id;
|
|
|
- this.handleQuery();
|
|
|
+ this.queryParams.deviceCode = firstValidNode.id
|
|
|
+ this.handleQuery()
|
|
|
} else {
|
|
|
- this.getElecList();
|
|
|
+ this.getList()
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化默认查询时间范围：当月1号到今天
|
|
|
initDefaultDateRange() {
|
|
|
- const today = new Date();
|
|
|
- const currentYear = today.getFullYear();
|
|
|
- const currentMonth = today.getMonth();
|
|
|
+ const today = new Date()
|
|
|
+ const currentYear = today.getFullYear()
|
|
|
+ const currentMonth = today.getMonth()
|
|
|
+ const startDate = new Date(currentYear, currentMonth, 1)
|
|
|
+ const endDate = new Date(today)
|
|
|
|
|
|
- // 当月1号
|
|
|
- const startDate = new Date(currentYear, currentMonth, 1);
|
|
|
+ const formatDate = (date) => {
|
|
|
+ const year = date.getFullYear()
|
|
|
+ const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
|
|
+ const day = date.getDate().toString().padStart(2, '0')
|
|
|
+ return `${year}-${month}-${day}`
|
|
|
+ }
|
|
|
|
|
|
- // 当天
|
|
|
- const endDate = new Date(today);
|
|
|
+ this.daterangeRecordTime = [formatDate(startDate), formatDate(endDate)]
|
|
|
+ },
|
|
|
|
|
|
- // 格式化为日期字符串 yyyy-MM-dd
|
|
|
- const formatDate = (date) => {
|
|
|
- const year = date.getFullYear();
|
|
|
- const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
- const day = date.getDate().toString().padStart(2, '0');
|
|
|
- return `${year}-${month}-${day}`;
|
|
|
- };
|
|
|
+ // 加载支持的电量类型
|
|
|
+ async loadSupportedMeterTypes() {
|
|
|
+ if (this.activeTab !== 'first' || !this.queryParams.deviceCode) {
|
|
|
+ this.supportedMeterTypes = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const query = {
|
|
|
+ objCode: this.queryParams.deviceCode,
|
|
|
+ objType: 2, // 设备类型
|
|
|
+ startRecTime: this.queryParams.startRecTime,
|
|
|
+ endRecTime: this.queryParams.endRecTime
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试获取支持的电量类型
|
|
|
+ const response = await getElechourTypes(query)
|
|
|
|
|
|
- this.daterangeRecordTime = [formatDate(startDate), formatDate(endDate)];
|
|
|
+ if (response.data && Array.isArray(response.data)) {
|
|
|
+ const types = response.data
|
|
|
+ .filter(type => type !== null && type !== undefined && this.meterTypeMap[type])
|
|
|
+ .sort((a, b) => Number(b) - Number(a))
|
|
|
+ .map(type => ({
|
|
|
+ value: type,
|
|
|
+ ...this.meterTypeMap[type]
|
|
|
+ }))
|
|
|
+
|
|
|
+ this.supportedMeterTypes = types.length > 0 ? types : this.getDefaultMeterTypes()
|
|
|
+ } else {
|
|
|
+ this.supportedMeterTypes = this.getDefaultMeterTypes()
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载电量类型失败:', error)
|
|
|
+ this.supportedMeterTypes = this.getDefaultMeterTypes()
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
+ // 获取默认的电量类型
|
|
|
+ getDefaultMeterTypes() {
|
|
|
+ // 根据已有数据判断支持的类型
|
|
|
+ const availableTypes = []
|
|
|
+ if (this.numElecMeterHData) {
|
|
|
+ if (this.numElecMeterHData.peakElec && this.numElecMeterHData.peakElec.quantity > 0) {
|
|
|
+ availableTypes.push('2')
|
|
|
+ }
|
|
|
+ if (this.numElecMeterHData.highElec && this.numElecMeterHData.highElec.quantity > 0) {
|
|
|
+ availableTypes.push('1')
|
|
|
+ }
|
|
|
+ if (this.numElecMeterHData.normalElec && this.numElecMeterHData.normalElec.quantity > 0) {
|
|
|
+ availableTypes.push('0')
|
|
|
+ }
|
|
|
+ if (this.numElecMeterHData.lowElec && this.numElecMeterHData.lowElec.quantity > 0) {
|
|
|
+ availableTypes.push('-1')
|
|
|
+ }
|
|
|
+ // 深谷电量暂不支持，需要后端提供
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有任何数据，返回空数组
|
|
|
+ return availableTypes.length > 0
|
|
|
+ ? availableTypes.map(type => ({ value: type, ...this.meterTypeMap[type] }))
|
|
|
+ : []
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取指定类型的电量数据
|
|
|
+ getMeterTypeData(meterType, field) {
|
|
|
+ if (!this.numElecMeterHData) return 0
|
|
|
+ const typeMapping = {
|
|
|
+ '-2': 'deepValleyElec',
|
|
|
+ '-1': 'lowElec',
|
|
|
+ '0': 'normalElec',
|
|
|
+ '1': 'highElec',
|
|
|
+ '2': 'peakElec'
|
|
|
+ }
|
|
|
+ const typeName = typeMapping[meterType]
|
|
|
+ return typeName && this.numElecMeterHData[typeName]
|
|
|
+ ? (this.numElecMeterHData[typeName][field] || 0)
|
|
|
+ : 0
|
|
|
+ },
|
|
|
+
|
|
|
+ // Tab切换处理
|
|
|
handleTabChange() {
|
|
|
if (this.activeTab === 'first') {
|
|
|
- // 电表读数
|
|
|
- this.queryParams.meterCls = '45';
|
|
|
+ this.queryParams.meterCls = '45'
|
|
|
} else if (this.activeTab === 'second') {
|
|
|
- // 水表读数
|
|
|
- this.queryParams.meterCls = '70';
|
|
|
+ this.queryParams.meterCls = '70'
|
|
|
}
|
|
|
|
|
|
- // 重新加载树结构并重置设备选择
|
|
|
this.getAreaTreeSelect().then(() => {
|
|
|
- // 切换tab后重新选择第一个设备节点
|
|
|
- const firstValidNode = this.findFirstValidNode(this.areaOptions);
|
|
|
+ const firstValidNode = this.findFirstValidNode(this.areaOptions)
|
|
|
if (firstValidNode) {
|
|
|
- this.queryParams.deviceCode = firstValidNode.id;
|
|
|
- this.handleQuery();
|
|
|
+ this.queryParams.deviceCode = firstValidNode.id
|
|
|
+ this.handleQuery()
|
|
|
} else {
|
|
|
- // 如果没有找到设备节点，则清空数据
|
|
|
- if (this.activeTab === 'first') {
|
|
|
- this.getElecList();
|
|
|
- } else {
|
|
|
- this.getWaterList();
|
|
|
- }
|
|
|
+ this.getList()
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
// 筛选节点
|
|
|
@@ -416,63 +460,43 @@ export default {
|
|
|
if (!value) return true
|
|
|
return data.label.indexOf(value) !== -1
|
|
|
},
|
|
|
+
|
|
|
// 过滤树节点
|
|
|
filterTree() {
|
|
|
- this.$refs.tree.filter(this.areaName);
|
|
|
+ this.$refs.tree.filter(this.areaName)
|
|
|
},
|
|
|
+
|
|
|
// 节点单击事件
|
|
|
handleNodeClick(data) {
|
|
|
// 仅处理设备节点
|
|
|
if (data.type === 'device') {
|
|
|
- this.queryParams.deviceCode = data.id;
|
|
|
- this.handleQuery();
|
|
|
+ this.queryParams.deviceCode = data.id
|
|
|
+ this.handleQuery()
|
|
|
}
|
|
|
- // 区域节点不做处理
|
|
|
},
|
|
|
- /** 查找第一个设备节点 */
|
|
|
+
|
|
|
+ // 查找第一个设备节点
|
|
|
findFirstValidNode(nodes) {
|
|
|
for (const node of nodes) {
|
|
|
if (node.type === 'device') {
|
|
|
- return node;
|
|
|
+ return node
|
|
|
}
|
|
|
if (node.children && node.children.length > 0) {
|
|
|
- const foundNode = this.findFirstValidNode(node.children);
|
|
|
- if (foundNode) return foundNode;
|
|
|
+ const foundNode = this.findFirstValidNode(node.children)
|
|
|
+ if (foundNode) return foundNode
|
|
|
}
|
|
|
}
|
|
|
- return null;
|
|
|
+ return null
|
|
|
},
|
|
|
- /** 树结构加载 */
|
|
|
+
|
|
|
+ // 树结构加载
|
|
|
async getAreaTreeSelect() {
|
|
|
await getDeviceTree(0, this.queryParams.meterCls, 0).then(response => {
|
|
|
- this.areaOptions = response.data;
|
|
|
- // 为树节点添加类型标识以便样式控制
|
|
|
- this.$nextTick(() => {
|
|
|
- this.addTypeToNodeAttrs();
|
|
|
- });
|
|
|
+ this.areaOptions = response.data
|
|
|
})
|
|
|
},
|
|
|
- /** 为树节点DOM添加type属性用于样式控制 */
|
|
|
- addTypeToNodeAttrs() {
|
|
|
- if (!this.$refs.tree) return;
|
|
|
-
|
|
|
- const addAttr = (nodes) => {
|
|
|
- nodes.forEach(node => {
|
|
|
- if (node.data && node.data.type) {
|
|
|
- const el = this.$refs.tree.$el.querySelector(`[data-node-key="${node.key}"] .el-tree-node__content`);
|
|
|
- if (el) {
|
|
|
- el.setAttribute('data-type', node.data.type);
|
|
|
- }
|
|
|
- }
|
|
|
- if (node.children && node.children.length > 0) {
|
|
|
- addAttr(node.children);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- addAttr(this.$refs.tree.store.root.children);
|
|
|
- },
|
|
|
|
|
|
+ // 格式化日期时间
|
|
|
formatDateTime(dateTime) {
|
|
|
if (!dateTime) return ''
|
|
|
const date = new Date(dateTime)
|
|
|
@@ -483,7 +507,17 @@ export default {
|
|
|
const minutes = date.getMinutes().toString().padStart(2, '0')
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|
|
},
|
|
|
- /** 查询用电计量-小时列表 */
|
|
|
+
|
|
|
+ // 获取列表数据
|
|
|
+ getList() {
|
|
|
+ if (this.activeTab === 'first') {
|
|
|
+ this.getElecList()
|
|
|
+ } else {
|
|
|
+ this.getWaterList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查询用电计量-小时列表
|
|
|
getElecList() {
|
|
|
this.loading = true
|
|
|
listElecMeterH(this.queryParams).then(response => {
|
|
|
@@ -493,7 +527,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- /** 查询用水计量-小时列表 */
|
|
|
+ // 查询用水计量-小时列表
|
|
|
getWaterList() {
|
|
|
this.loading = true
|
|
|
listWaterMeterH(this.queryParams).then(response => {
|
|
|
@@ -503,51 +537,26 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.open = false
|
|
|
- this.Elecreset()
|
|
|
- },
|
|
|
- // 表单重置
|
|
|
- Elecreset() {
|
|
|
- this.form = {
|
|
|
- id: null,
|
|
|
- areaCode: null,
|
|
|
- deviceCode: null,
|
|
|
- recordTime: null,
|
|
|
- date: null,
|
|
|
- time: null,
|
|
|
- timeIndex: null,
|
|
|
- elecQuantity: null,
|
|
|
- meterType: null,
|
|
|
- meterUnitPrice: null,
|
|
|
- useElecCost: null,
|
|
|
- createTime: null
|
|
|
- }
|
|
|
- this.resetForm('form')
|
|
|
- },
|
|
|
-
|
|
|
- /** 搜索按钮操作 */
|
|
|
- handleQuery() {
|
|
|
- // 处理日期范围，自动拼接时分秒
|
|
|
+ // 搜索按钮操作
|
|
|
+ async handleQuery() {
|
|
|
+ // 处理日期范围
|
|
|
if (this.daterangeRecordTime && this.daterangeRecordTime.length === 2) {
|
|
|
- this.queryParams.startRecTime = this.daterangeRecordTime[0] + ' 00:00:00';
|
|
|
- this.queryParams.endRecTime = this.daterangeRecordTime[1] + ' 23:59:59';
|
|
|
+ this.queryParams.startRecTime = this.daterangeRecordTime[0] + ' 00:00:00'
|
|
|
+ this.queryParams.endRecTime = this.daterangeRecordTime[1] + ' 23:59:59'
|
|
|
} else {
|
|
|
- this.queryParams.startRecTime = null;
|
|
|
- this.queryParams.endRecTime = null;
|
|
|
+ this.queryParams.startRecTime = null
|
|
|
+ this.queryParams.endRecTime = null
|
|
|
}
|
|
|
|
|
|
if (this.activeTab === 'first') {
|
|
|
this.queryParams.meterCls = '45'
|
|
|
+ await this.loadSupportedMeterTypes()
|
|
|
this.getElecList()
|
|
|
- // 获取用电统计数据
|
|
|
- this.getNumElecMeterH();
|
|
|
+ this.getNumElecMeterH()
|
|
|
} else if (this.activeTab === 'second') {
|
|
|
this.queryParams.meterCls = '70'
|
|
|
this.getWaterList()
|
|
|
- // 获取用水统计数据
|
|
|
- this.getNumWaterMeterH();
|
|
|
+ this.getNumWaterMeterH()
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -556,13 +565,15 @@ export default {
|
|
|
const query = {
|
|
|
deviceCode: this.queryParams.deviceCode,
|
|
|
startRecTime: this.queryParams.startRecTime,
|
|
|
- endRecTime: this.queryParams.endRecTime,
|
|
|
- };
|
|
|
+ endRecTime: this.queryParams.endRecTime
|
|
|
+ }
|
|
|
try {
|
|
|
- const response = await getNumElecMeterH(query);
|
|
|
- this.numElecMeterHData = response.data;
|
|
|
+ const response = await getNumElecMeterH(query)
|
|
|
+ this.numElecMeterHData = response.data
|
|
|
+ // 重新加载支持的电量类型
|
|
|
+ await this.loadSupportedMeterTypes()
|
|
|
} catch (error) {
|
|
|
- this.$message.error("获取用电统计数据失败");
|
|
|
+ this.$message.error('获取用电统计数据失败')
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -571,178 +582,459 @@ export default {
|
|
|
const query = {
|
|
|
deviceCode: this.queryParams.deviceCode,
|
|
|
startRecTime: this.queryParams.startRecTime,
|
|
|
- endRecTime: this.queryParams.endRecTime,
|
|
|
- };
|
|
|
+ endRecTime: this.queryParams.endRecTime
|
|
|
+ }
|
|
|
try {
|
|
|
- const response = await getNumWaterMeterH(query);
|
|
|
- this.numWaterMeterHData = response.data;
|
|
|
+ const response = await getNumWaterMeterH(query)
|
|
|
+ this.numWaterMeterHData = response.data
|
|
|
} catch (error) {
|
|
|
- this.$message.error("获取用水统计数据失败");
|
|
|
+ this.$message.error('获取用水统计数据失败')
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- /** 重置按钮操作 */
|
|
|
+ // 重置按钮操作
|
|
|
resetQuery() {
|
|
|
this.daterangeRecordTime = []
|
|
|
this.resetForm('queryForm')
|
|
|
- // 重置时重新初始化默认时间范围
|
|
|
- this.initDefaultDateRange();
|
|
|
+ this.initDefaultDateRange()
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
- /** 新增按钮操作 */
|
|
|
- handleAdd() {
|
|
|
- this.Elecreset()
|
|
|
- this.open = true
|
|
|
- this.title = '添加用电计量-小时'
|
|
|
- },
|
|
|
- /** 提交按钮 */
|
|
|
- submitForm() {
|
|
|
- this.$refs['form'].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- if (this.form.id != null) {
|
|
|
- updateElecMeterH(this.form).then(response => {
|
|
|
- this.$modal.msgSuccess('修改成功')
|
|
|
- this.open = false
|
|
|
- this.getElecList()
|
|
|
- })
|
|
|
- } else {
|
|
|
- addElecMeterH(this.form).then(response => {
|
|
|
- this.$modal.msgSuccess('新增成功')
|
|
|
- this.open = false
|
|
|
- this.getElecList()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /** 导出按钮操作 */
|
|
|
+
|
|
|
+ // 导出按钮操作
|
|
|
handleExport() {
|
|
|
- this.download('ems/elecMeterH/export', {
|
|
|
- ...this.queryParams
|
|
|
- }, `elecMeterH_${new Date().getTime()}.xlsx`)
|
|
|
+ const filename = this.activeTab === 'first'
|
|
|
+ ? `电表读数_${new Date().getTime()}.xlsx`
|
|
|
+ : `水表读数_${new Date().getTime()}.xlsx`
|
|
|
+
|
|
|
+ const url = this.activeTab === 'first'
|
|
|
+ ? 'ems/elecMeterH/export'
|
|
|
+ : 'ems/waterMeterH/export'
|
|
|
+
|
|
|
+ this.download(url, { ...this.queryParams }, filename)
|
|
|
},
|
|
|
+
|
|
|
+ // 获取电表类型名称
|
|
|
getElecMeterType(meterType) {
|
|
|
const meterTypeMap = {
|
|
|
+ '-2': '深谷',
|
|
|
'-1': '谷段',
|
|
|
'0': '平段',
|
|
|
'1': '峰段',
|
|
|
- '2': '尖峰段'
|
|
|
+ '2': '尖峰'
|
|
|
}
|
|
|
return meterTypeMap[meterType] || '未知'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取电表类型标签颜色
|
|
|
+ getMeterTypeTagType(meterType) {
|
|
|
+ const typeMap = {
|
|
|
+ '-2': 'primary',
|
|
|
+ '-1': 'success',
|
|
|
+ '0': 'info',
|
|
|
+ '1': 'warning',
|
|
|
+ '2': 'danger'
|
|
|
+ }
|
|
|
+ return typeMap[meterType] || 'info'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 计算百分比
|
|
|
+ calculatePercentage(value, total) {
|
|
|
+ if (!value || !total || total === 0) {
|
|
|
+ return '0.0'
|
|
|
+ }
|
|
|
+ const percentage = (value / total) * 100
|
|
|
+ return percentage.toFixed(1)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取用水总计数据
|
|
|
+ getWaterTotal(field) {
|
|
|
+ if (this.numWaterMeterHData && this.numWaterMeterHData[field]) {
|
|
|
+ return this.numWaterMeterHData[field]
|
|
|
+ }
|
|
|
+ // 如果没有统计数据，尝试从列表数据计算
|
|
|
+ if (this.waterMeterHList && this.waterMeterHList.length > 0) {
|
|
|
+ if (field === 'quantity') {
|
|
|
+ return this.waterMeterHList.reduce((sum, item) => sum + (item.waterQuantity || 0), 0)
|
|
|
+ } else if (field === 'useCost') {
|
|
|
+ return this.waterMeterHList.reduce((sum, item) => sum + (item.useWaterCost || 0), 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return 0
|
|
|
+ },
|
|
|
+
|
|
|
+ // 格式化数字
|
|
|
+ formatNumber(num, decimals = 2) {
|
|
|
+ if (num === null || num === undefined || isNaN(num)) {
|
|
|
+ return '0.' + '0'.repeat(decimals)
|
|
|
+ }
|
|
|
+ return Number(num).toFixed(decimals)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+/* 树容器样式 */
|
|
|
+.tree-container {
|
|
|
+ height: calc(100vh - 200px);
|
|
|
+ overflow-y: auto;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
/* 树节点样式 */
|
|
|
.tree-node {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 6px; /* 符号与文字之间的间距 */
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 2px 0;
|
|
|
+ transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
-/* 字符标识样式 */
|
|
|
-.node-symbol {
|
|
|
- display: inline-block;
|
|
|
- width: 16px; /* 固定宽度确保对齐 */
|
|
|
- text-align: center;
|
|
|
+.node-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ transition: color 0.3s;
|
|
|
}
|
|
|
|
|
|
-/* 区域节点符号样式 */
|
|
|
-.area-symbol {
|
|
|
- color: #666; /* 深灰色 */
|
|
|
+.area-icon {
|
|
|
+ color: #909399;
|
|
|
}
|
|
|
|
|
|
-/* 设备节点符号样式 */
|
|
|
-.device-symbol {
|
|
|
- color: #337ab7; /* 蓝色 */
|
|
|
+.device-icon {
|
|
|
+ color: #409EFF;
|
|
|
}
|
|
|
|
|
|
.node-label {
|
|
|
- vertical-align: middle;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
-/* 鼠标样式控制 */
|
|
|
-.el-tree-node__content[data-type="area"] {
|
|
|
+/* 区域节点样式 - 不可点击 */
|
|
|
+.area-node {
|
|
|
cursor: not-allowed;
|
|
|
- opacity: 0.9;
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+
|
|
|
+.area-node:hover {
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+.area-node:hover .area-icon {
|
|
|
+ color: #909399;
|
|
|
}
|
|
|
|
|
|
-.el-tree-node__content[data-type="device"] {
|
|
|
+/* 设备节点样式 - 可点击 */
|
|
|
+.device-node {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-/* 优化树节点hover效果 */
|
|
|
-.el-tree-node__content:hover {
|
|
|
- background-color: #f5f7fa;
|
|
|
+.device-node:hover {
|
|
|
+ background-color: #f0f7ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding-left: 4px;
|
|
|
}
|
|
|
|
|
|
-.el-tree-node__content[data-type="area"]:hover {
|
|
|
- background-color: #f5f7fa;
|
|
|
+.device-node:hover .device-icon {
|
|
|
+ color: #2b7bff;
|
|
|
+ transform: scale(1.1);
|
|
|
}
|
|
|
|
|
|
-/* 强调合计列的样式 - 若依框架适配 */
|
|
|
-/deep/ .total-column {
|
|
|
- background-color: #f0f9ff !important;
|
|
|
+/* 高亮当前选中的节点 */
|
|
|
+/deep/ .el-tree-node.is-current > .el-tree-node__content .device-node {
|
|
|
+ background-color: #e6f7ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding-left: 4px;
|
|
|
}
|
|
|
|
|
|
-/deep/ .total-column .cell {
|
|
|
- position: relative;
|
|
|
- padding-left: 12px !important;
|
|
|
+/deep/ .el-tree-node.is-current > .el-tree-node__content .device-icon {
|
|
|
+ color: #1890ff;
|
|
|
}
|
|
|
|
|
|
-/deep/ .total-column .cell::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 4px;
|
|
|
- height: 60%;
|
|
|
- background-color: #409eff;
|
|
|
- border-radius: 2px;
|
|
|
+/* 压缩卡片高度 */
|
|
|
+.compact-card {
|
|
|
+ min-height: auto !important;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
|
+ transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
-.total-value {
|
|
|
- font-weight: bold !important;
|
|
|
- font-size: 16px !important;
|
|
|
- color: #2c3e50 !important;
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 横向紧凑卡片样式 */
|
|
|
+.summary-inline-card {
|
|
|
+ flex: 1;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-inline-card:hover {
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.summary-inline-card .el-card__body {
|
|
|
+ padding: 12px 20px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-card-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-card-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-icon {
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.elec-icon {
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.water-icon {
|
|
|
+ color: #67C23A;
|
|
|
+}
|
|
|
+
|
|
|
+.cost-icon {
|
|
|
+ color: #E6A23C;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-card-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-unit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+/* 峰谷电横向紧凑卡片 */
|
|
|
+.peak-valley-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-inline-card {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 200px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-inline-card:hover {
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.peak-inline-card .el-card__body {
|
|
|
+ padding: 10px 15px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-inline-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-inline-header {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-type-badge {
|
|
|
display: inline-block;
|
|
|
+ padding: 4px 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: white;
|
|
|
+ font-weight: 500;
|
|
|
+ min-width: 40px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-.total-value::before {
|
|
|
- content: '[';
|
|
|
- margin-right: 2px;
|
|
|
- color: #409eff !important;
|
|
|
- font-weight: bold !important;
|
|
|
- font-size: 16px;
|
|
|
+/* 峰谷电类型标签样式 */
|
|
|
+.deep-valley-tag {
|
|
|
+ background: linear-gradient(135deg, #409EFF 0%, #1976D2 100%);
|
|
|
}
|
|
|
|
|
|
-.total-value::after {
|
|
|
- content: ']';
|
|
|
- margin-left: 2px;
|
|
|
- color: #409eff !important;
|
|
|
- font-weight: bold !important;
|
|
|
- font-size: 16px;
|
|
|
+.valley-tag {
|
|
|
+ background: linear-gradient(135deg, #67C23A 0%, #4CAF50 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.normal-tag {
|
|
|
+ background: linear-gradient(135deg, #909399 0%, #606266 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.high-peak-tag {
|
|
|
+ background: linear-gradient(135deg, #E6A23C 0%, #FF9800 100%);
|
|
|
}
|
|
|
|
|
|
-/* 若依框架下的表格样式增强 */
|
|
|
-/deep/ .el-table .total-column {
|
|
|
- background-color: #f0f9ff !important;
|
|
|
+.peak-tag {
|
|
|
+ background: linear-gradient(135deg, #F56C6C 0%, #f44336 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.peak-inline-body {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
}
|
|
|
|
|
|
-/deep/ .el-table .total-column td {
|
|
|
- background-color: #f0f9ff !important;
|
|
|
+.peak-inline-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-value {
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-unit {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.peak-percentage {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ padding: 2px 8px;
|
|
|
+ background-color: #f4f4f5;
|
|
|
+ border-radius: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 汇总卡片样式 - 已删除 */
|
|
|
+
|
|
|
+/* 峰谷电卡片样式 - 已删除旧样式 */
|
|
|
+
|
|
|
+/* 响应式布局 */
|
|
|
+@media (max-width: 1680px) {
|
|
|
+ .inline-value {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-value {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1366px) {
|
|
|
+ .peak-valley-row .peak-inline-card {
|
|
|
+ flex: 1 1 calc(50% - 6px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .inline-value {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-inline-body {
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .summary-row {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-valley-row .peak-inline-card {
|
|
|
+ flex: 1 1 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-inline-body {
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .inline-card-content {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-inline-content {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-inline-body {
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peak-percentage {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-/* 确保样式在若依主题下生效 */
|
|
|
-.app-container /deep/ .el-table .total-column {
|
|
|
- background-color: #f0f9ff !important;
|
|
|
+/* 过渡动画 */
|
|
|
+.el-card {
|
|
|
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
}
|
|
|
|
|
|
-.app-container /deep/ .el-table .total-column .cell {
|
|
|
- font-weight: bold !important;
|
|
|
+/* 加载动画优化 */
|
|
|
+.el-loading-mask {
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
}
|
|
|
+</style>
|
