From 93de43267e1663031fe5dc2f5ae40d128a182a76 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 18 六月 2026 17:24:51 +0800
Subject: [PATCH] 新增智能电表、空调管理
---
h5/pages/customer/electricity/list.vue | 194 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 136 insertions(+), 58 deletions(-)
diff --git a/h5/pages/customer/electricity/list.vue b/h5/pages/customer/electricity/list.vue
index 97e7891..c6e5e9b 100644
--- a/h5/pages/customer/electricity/list.vue
+++ b/h5/pages/customer/electricity/list.vue
@@ -1,95 +1,173 @@
<template>
- <view class="cu-page">
- <view class="cu-filters">
- <picker :range="typeOptions" range-key="label" @change="onTypeChange">
- <view class="cu-filter">{{ typeLabel }} 鈻�</view>
- </picker>
- <picker :range="statusOptions" range-key="label" @change="onStatusChange">
- <view class="cu-filter">{{ statusLabel }} 鈻�</view>
- </picker>
- </view>
+ <view class="cu-page cu-page--with-fab cu-device-page">
+ <view class="cu-device-page__header">
+ <view class="cu-device-type-tabs">
+ <view
+ :class="['cu-device-type-card', 'cu-device-type-card--electric', tabIdx === 0 ? 'cu-device-type-card--active' : '']"
+ @click="switchTab(0)"
+ >
+ <view class="cu-device-type-card__icon-wrap">
+ <text class="cu-device-type-card__icon">鈿�</text>
+ </view>
+ <view class="cu-device-type-card__text">
+ <text class="cu-device-type-card__label">鐢佃〃</text>
+ <text class="cu-device-type-card__hint">鏅鸿兘鐢佃〃</text>
+ </view>
+ </view>
+ <view
+ :class="['cu-device-type-card', 'cu-device-type-card--conditioner', tabIdx === 1 ? 'cu-device-type-card--active' : '']"
+ @click="switchTab(1)"
+ >
+ <view class="cu-device-type-card__icon-wrap">
+ <text class="cu-device-type-card__icon">鉂勶笍</text>
+ </view>
+ <view class="cu-device-type-card__text">
+ <text class="cu-device-type-card__label">绌鸿皟</text>
+ <text class="cu-device-type-card__hint">绌鸿皟璁惧</text>
+ </view>
+ </view>
+ </view>
- <view class="cu-list-header">
- <text class="cu-list-header__count">鍏� {{ list.length }} 鍙拌澶�</text>
+ <view v-if="tabIdx === 1" class="cu-ac-balance-card">
+ <view class="cu-ac-balance-card__main">
+ <text class="cu-ac-balance-card__label">绌鸿皟鐢佃垂浣欓</text>
+ <text :class="['cu-ac-balance-card__value', acBalanceTone ? 'cu-ac-balance-card__value--' + acBalanceTone : '']">{{ acBalanceText }}</text>
+ </view>
+ <view class="cu-ac-balance-card__btn" @click="goAcRecharge">鍘诲厖鍊�</view>
+ </view>
+
+ <view class="cu-list-header cu-list-header--inline">
+ <text class="cu-list-header__count">鍏� {{ list.length }} 鍙皗{ tabIdx === 0 ? '鐢佃〃' : '绌鸿皟' }}</text>
+ </view>
</view>
<view class="cu-list-wrap">
- <view v-for="item in list" :key="item.deviceType + '-' + item.deviceId" class="cu-list-card">
- <view class="cu-list-card__head">
- <view :class="['cu-list-card__icon', item.deviceType === 0 ? 'cu-list-card__icon--electric' : 'cu-list-card__icon--conditioner']">
- {{ item.deviceType === 0 ? '鈿�' : '鉂勶笍' }}
- </view>
- <view class="cu-list-card__main">
- <view class="cu-list-card__title-row">
- <text class="cu-list-card__title">{{ item.deviceName }}</text>
- <text :class="['cu-status', item.statusCode === 1 ? 'cu-status--ok' : 'cu-status--bad']">{{ item.statusText }}</text>
+ <template v-if="tabIdx === 0">
+ <view v-for="item in list" :key="item.deviceType + '-' + item.deviceId" class="cu-list-card">
+ <view class="cu-list-card__head">
+ <view class="cu-list-card__icon cu-list-card__icon--electric">鈿�</view>
+ <view class="cu-list-card__main">
+ <view class="cu-list-card__title-row">
+ <view class="cu-list-card__title-wrap">
+ <text class="cu-list-card__title">{{ item.deviceName }}</text>
+ </view>
+ <text :class="['cu-status', item.statusCode === 1 ? 'cu-status--ok' : 'cu-status--bad']">{{ item.statusText }}</text>
+ </view>
+ <text class="cu-list-card__sub">{{ item.roomInfo || '鏆傛棤鎴块棿淇℃伅' }}</text>
</view>
- <text class="cu-list-card__sub">{{ item.roomInfo || '鏆傛棤鎴块棿淇℃伅' }}</text>
+ </view>
+
+ <view v-if="item.alarmTags && item.alarmTags.length" class="cu-list-card__tags">
+ <text v-for="tag in item.alarmTags" :key="tag" class="cu-tag">{{ tag }}</text>
+ </view>
+
+ <view class="cu-info-grid">
+ <view class="cu-info-cell">
+ <text class="cu-info-cell__label">鐢佃〃鍦板潃</text>
+ <text class="cu-info-cell__value">{{ item.meterAddress || '-' }}</text>
+ </view>
+ <view class="cu-info-cell">
+ <text class="cu-info-cell__label">璐︽埛浣欓</text>
+ <text :class="['cu-info-cell__value', balanceToneClass(item.balance)]">{{ formatBalance(item.balance) }}</text>
+ </view>
+ </view>
+
+ <view class="cu-list-card__foot">
+ <text class="cu-time">鏇存柊 {{ formatTime(item.updateTime) }}</text>
+ <text class="cu-list-card__arrow" @click="goElectricRecharge(item)">鍘诲厖鍊� 鈫�</text>
</view>
</view>
+ </template>
- <view v-if="item.alarmTags && item.alarmTags.length" class="cu-list-card__tags">
- <text v-for="tag in item.alarmTags" :key="tag" class="cu-tag">{{ tag }}</text>
- </view>
-
- <view class="cu-info-grid">
- <view v-if="item.deviceType === 0" class="cu-info-cell">
- <text class="cu-info-cell__label">鐢佃〃鎴峰彿</text>
- <text class="cu-info-cell__value">{{ item.meterAccountNo || '-' }}</text>
+ <template v-else>
+ <view v-for="item in list" :key="item.deviceType + '-' + item.deviceId" class="cu-list-card cu-list-card--readonly">
+ <view class="cu-list-card__head">
+ <view class="cu-list-card__icon cu-list-card__icon--conditioner">鉂勶笍</view>
+ <view class="cu-list-card__main">
+ <view class="cu-list-card__title-row">
+ <view class="cu-list-card__title-wrap">
+ <text class="cu-list-card__title">{{ item.deviceName }}</text>
+ </view>
+ <text :class="['cu-status', item.statusCode === 1 ? 'cu-status--ok' : 'cu-status--bad']">{{ item.statusText }}</text>
+ </view>
+ <text class="cu-list-card__sub">{{ item.roomInfo || '鏆傛棤鎴块棿淇℃伅' }}</text>
+ </view>
</view>
- <view :class="['cu-info-cell', item.deviceType !== 0 ? 'cu-info-cell--full' : '']">
- <text class="cu-info-cell__label">璐︽埛浣欓</text>
- <text :class="['cu-info-cell__value', item.balanceLow ? 'cu-info-cell__value--danger' : '']">{{ item.balance }}</text>
+
+ <view class="cu-list-card__meta-row">
+ <text class="cu-time">鏇存柊 {{ formatTime(item.updateTime) }}</text>
</view>
</view>
+ </template>
- <view class="cu-list-card__foot">
- <text class="cu-time">鏇存柊 {{ formatTime(item.updateTime) }}</text>
- <text class="cu-list-card__arrow" @click="goRecharge(item)">鍘诲厖鍊� 鈫�</text>
- </view>
- </view>
- <u-empty v-if="!list.length" text="鏆傛棤璁惧" margin-top="80" />
+ <u-empty v-if="!list.length" :text="tabIdx === 0 ? '鏆傛棤鐢佃〃' : '鏆傛棤绌鸿皟璁惧'" margin-top="80" />
</view>
+ <cu-workbench-fab />
</view>
</template>
<script>
-import { customerDevicePage } from '@/api'
+import { customerDevicePage, customerHome } from '@/api'
+import { getBalanceTone } from '@/utils/utils.js'
+
export default {
data () {
return {
list: [],
- typeOptions: [{ label: '鍏ㄩ儴绫诲瀷', value: null }, { label: '鐢佃〃', value: 0 }, { label: '绌鸿皟', value: 1 }],
- statusOptions: [{ label: '鍏ㄩ儴鐘舵��', value: null }, { label: '姝ｅ父', value: 1 }, { label: '寮傚父', value: 2 }],
- typeIdx: 0,
- statusIdx: 0,
+ tabIdx: 0,
+ gsBalance: null,
page: 1
}
},
computed: {
- typeLabel () { return this.typeOptions[this.typeIdx].label },
- statusLabel () { return this.statusOptions[this.statusIdx].label }
+ acBalanceText () {
+ if (this.gsBalance === null || this.gsBalance === undefined || this.gsBalance === '') return '-'
+ return this.formatBalance(this.gsBalance)
+ },
+ acBalanceTone () {
+ return getBalanceTone(this.gsBalance)
+ }
},
- onShow () { this.load() },
+ onShow () {
+ this.load()
+ if (this.tabIdx === 1) this.loadGsBalance()
+ },
methods: {
load () {
customerDevicePage({
page: this.page,
- capacity: 20,
- model: {
- deviceType: this.typeOptions[this.typeIdx].value,
- statusFilter: this.statusOptions[this.statusIdx].value
- }
+ capacity: 200,
+ model: { deviceType: this.tabIdx === 0 ? 0 : 1 }
}).then(res => { this.list = (res.data && res.data.records) || [] })
},
- onTypeChange (e) { this.typeIdx = Number(e.detail.value); this.load() },
- onStatusChange (e) { this.statusIdx = Number(e.detail.value); this.load() },
+ loadGsBalance () {
+ customerHome().then(res => {
+ const gs = res.data && res.data.gsConfig
+ this.gsBalance = gs ? gs.leftMoney : null
+ })
+ },
+ switchTab (i) {
+ if (this.tabIdx === i) return
+ this.tabIdx = i
+ this.list = []
+ this.load()
+ if (i === 1) this.loadGsBalance()
+ },
+ formatBalance (val) {
+ if (val === null || val === undefined || val === '') return '-'
+ const n = Number(val)
+ return Number.isNaN(n) ? val : n.toFixed(2)
+ },
+ balanceToneClass (val) {
+ const tone = getBalanceTone(val)
+ return tone ? `cu-info-cell__value--${tone}` : ''
+ },
formatTime (t) { return t ? String(t).replace('T', ' ').substring(0, 19) : '-' },
- goRecharge (item) {
- const url = item.deviceType === 0
- ? `/pages/customer/electricity/recharge?id=${item.deviceId}`
- : `/pages/customer/conditioner/recharge?id=${item.deviceId}`
- uni.navigateTo({ url })
+ goElectricRecharge (item) {
+ uni.navigateTo({ url: `/pages/customer/electricity/recharge?id=${item.deviceId}` })
+ },
+ goAcRecharge () {
+ uni.navigateTo({ url: '/pages/customer/conditioner/recharge' })
}
}
}
--
Gitblit v1.9.3