新增智能电表、空调管理

doum

2026-06-18 93de43267e1663031fe5dc2f5ae40d128a182a76

 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' })
    }
  }
}