<template>
|
<div>
|
<div class="info-block">
|
<p>采集器号：{{ info.collectorId }} <span :class="info.online === 1 ? 'green' : 'red'">{{ info.online === 1 ? '在线' : '离线' }}</span></p>
|
<p>表地址：{{ info.address }}</p>
|
<p>表名称：{{ info.name }}</p>
|
<p>电表类型：{{ info.type }}</p>
|
<p>关联房间：{{ info.roomNames }}</p>
|
<p>电表状态：{{ info.accountStatus === 1 ? '已开户' : '未开户' }}</p>
|
<p v-if="mode === 'recharge'">购电次数：{{ purchaseCount }}</p>
|
</div>
|
<el-form label-width="150px">
|
<el-form-item :label="mode === 'open' ? '开户金额' : '充值金额'">
|
<el-input-number v-model="form.money" :min="0" :precision="4" style="width: 200px"/>
|
</el-form-item>
|
<el-form-item :label="mode === 'open' ? '开户备注' : '充值备注'">
|
<el-input v-model="form.remark" :placeholder="mode === 'open' ? '开户备注，最多50个字符' : '充值备注，最多300个字符'" :maxlength="mode === 'open' ? 50 : 300" style="width: 400px"/>
|
</el-form-item>
|
<el-form-item label="当前总电量">
|
<span class="meter-read-row">
|
<span class="meter-read-value">{{ totalPower }}</span>
|
<el-button type="primary" size="small" class="read-meter-btn" :loading="isOperating" @click="$emit('read')">立即抄表并更新用量余额</el-button>
|
</span>
|
</el-form-item>
|
<el-form-item label="电量同步时间">{{ latest && latest.addTime ? latest.addTime : '-' }}</el-form-item>
|
<el-form-item label="当前剩余金额(元)">
|
<span class="meter-read-row">
|
<span class="meter-read-value">{{ latest && latest.ye != null ? latest.ye : '0.0000' }}</span>
|
<el-button type="primary" size="small" class="read-meter-btn" :loading="isOperating" @click="$emit('read')">立即抄表并更新用量余额</el-button>
|
</span>
|
</el-form-item>
|
<el-form-item label="剩余金额同步时间">{{ syncTime }}</el-form-item>
|
</el-form>
|
<div class="footer-btns">
|
<el-button type="primary" :loading="isOperating" @click="$emit('confirm')">{{ mode === 'open' ? '确认开户' : '确认充值' }}</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'AccountRechargePanel',
|
props: {
|
info: { type: Object, default: () => ({}) },
|
latest: { type: Object, default: null },
|
form: { type: Object, required: true },
|
isOperating: Boolean,
|
mode: { type: String, default: 'open' },
|
purchaseCount: { type: String, default: '0' }
|
},
|
computed: {
|
totalPower () {
|
if (!this.latest) return '0.00kWh'
|
const v = this.latest.zhygzdl || '0'
|
return String(v).toLowerCase().indexOf('kwh') >= 0 ? v : v + 'kWh'
|
},
|
syncTime () {
|
return (this.latest && this.latest.addTime) ? this.latest.addTime : (this.info.balanceTime || '-')
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.info-block p { margin: 4px 0; line-height: 26px; }
|
.green { color: #67c23a; }
|
.red { color: #f56c6c; }
|
.footer-btns { text-align: right; margin-top: 16px; }
|
.meter-read-row {
|
display: inline-flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
white-space: nowrap;
|
max-width: 100%;
|
}
|
.meter-read-value { margin-right: 12px; flex-shrink: 0; }
|
.read-meter-btn {
|
flex-shrink: 0;
|
width: auto;
|
white-space: nowrap;
|
}
|
</style>
|
