|
|
@@ -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 {
|
