<template>
|
<GlobalWindow title="电表远程控制" :visible.sync="visible" width="780px" :show-confirm="false">
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="基本操作" name="basic">
|
<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>
|
</div>
|
<div class="btn-row">
|
<el-button type="primary" :loading="isOperating" @click="doOperate('resetPrepay', '确认清零并切换到预付费模式吗？')">清零并切换到预付费模式</el-button>
|
<el-button type="primary" :loading="isOperating" @click="doOperate('resetPostpay', '确认清零并切换到后付费模式吗？')">清零并切换到后付费模式</el-button>
|
<el-button type="primary" :loading="isOperating" @click="doOperate('trip', '确认拉闸吗？')">拉闸</el-button>
|
<el-button type="primary" :loading="isOperating" @click="doOperate('close', '确认合闸吗？')">合闸</el-button>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="开户" name="open">
|
<account-recharge-panel
|
:info="info"
|
:latest="latest"
|
:form="form"
|
:is-operating="isOperating"
|
mode="open"
|
@read="readMeter"
|
@confirm="doOperate('openAccount', '确认开户吗？')"
|
/>
|
</el-tab-pane>
|
<el-tab-pane label="充值" name="recharge">
|
<account-recharge-panel
|
:info="info"
|
:latest="latest"
|
:form="form"
|
:is-operating="isOperating"
|
:purchase-count="purchaseCount"
|
mode="recharge"
|
@read="readMeter"
|
@confirm="doOperate('recharge', '确认充值吗？')"
|
/>
|
</el-tab-pane>
|
</el-tabs>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getRemoteInfo, operate } from '@/api/business/ywelectrical'
|
import AccountRechargePanel from './AccountRechargePanel'
|
|
export default {
|
name: 'YwElectricalRemote',
|
components: { GlobalWindow, AccountRechargePanel },
|
data () {
|
return {
|
visible: false,
|
activeTab: 'basic',
|
electricalId: null,
|
info: {},
|
latest: null,
|
purchaseCount: '0',
|
form: { money: 0, remark: '' },
|
isOperating: false
|
}
|
},
|
methods: {
|
open (row, tab) {
|
this.electricalId = row.id
|
this.activeTab = tab || 'basic'
|
this.form = { money: 0, remark: '' }
|
this.visible = true
|
this.loadInfo()
|
},
|
loadInfo () {
|
getRemoteInfo(this.electricalId).then(res => {
|
this.info = res.electrical || {}
|
this.latest = res.latestData
|
this.purchaseCount = res.purchaseCount || '0'
|
}).catch(e => this.$tip.apiFailed(e))
|
},
|
readMeter () {
|
this.submitOperate('readMeter', true)
|
},
|
doOperate (action, msg) {
|
this.$dialog.actionConfirm(msg, '操作确认')
|
.then(() => this.submitOperate(action, false))
|
.catch(() => {})
|
},
|
submitOperate (action, silent) {
|
this.isOperating = true
|
operate({
|
electricalId: this.electricalId,
|
action,
|
money: this.form.money,
|
remark: this.form.remark
|
})
|
.then(res => {
|
this.$tip.apiSuccess(res || (silent ? '抄表请求已提交' : '提交成功，请在【日常用电管理-充值记录】中查看充值结果'))
|
this.loadInfo()
|
this.$emit('success')
|
})
|
.catch(e => this.$tip.apiFailed(e))
|
.finally(() => { this.isOperating = false })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.info-block { margin-bottom: 16px; line-height: 28px; color: #303133; }
|
.btn-row .el-button { margin: 0 8px 8px 0; }
|
</style>
|
