<template>
|
<TableLayout :permissions="['business:ywelectrical:query']">
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
|
<el-form-item label="电表信息" prop="meterKeyword">
|
<el-input v-model="searchForm.meterKeyword" placeholder="请输入电表名称/地址" @keypress.enter.native="search" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="在线状态" prop="online">
|
<el-select v-model="searchForm.online" clearable placeholder="全部" style="min-width: 120px">
|
<el-option label="离线" :value="0"></el-option>
|
<el-option label="在线" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="开户状态" prop="accountStatus">
|
<el-select v-model="searchForm.accountStatus" clearable placeholder="全部" style="min-width: 120px">
|
<el-option label="未开户" :value="0"></el-option>
|
<el-option label="已开户" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<section>
|
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
|
<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<template v-slot:table-wrap>
|
<ul class="toolbar">
|
<li>
|
<el-button type="primary" @click="handleSync" :loading="isSyncing" v-permissions="['business:ywelectrical:device']">同步电表</el-button>
|
</li>
|
</ul>
|
<el-table v-loading="isWorking.search" :data="tableData.list" stripe>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="name" label="电表名称" fixed min-width="140" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="address" label="电表地址" min-width="130" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="accountId" label="开户号" min-width="100" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column label="开户状态" min-width="100" align="center">
|
<template slot-scope="{ row }">
|
<span :class="row.accountStatus === 1 ? 'green' : 'red'">{{ formatAccountStatus(row.accountStatus) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="roomNames" label="绑定房间" min-width="160" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="paramName" label="电表参数名" min-width="140" align="center" show-overflow-tooltip>
|
<template slot-scope="{ row }">{{ row.paramName || '-' }}</template>
|
</el-table-column>
|
<el-table-column label="电表倍率" min-width="100" align="center">
|
<template slot-scope="{ row }">{{ formatRate(row.rate) }}</template>
|
</el-table-column>
|
<el-table-column prop="balanceBattery" label="累计用电量" min-width="120" align="center">
|
<template slot-scope="{ row }">{{ formatBattery(row.balanceBattery) }}</template>
|
</el-table-column>
|
<el-table-column label="账户余额" min-width="110" align="center">
|
<template slot-scope="{ row }">
|
<span :class="{ red: isBalanceLow(row.balance) }">{{ formatBalance(row.balance) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createDate" label="创建时间" min-width="160" align="center"></el-table-column>
|
<el-table-column label="在线状态" min-width="90" align="center">
|
<template slot-scope="{ row }">
|
<span :class="row.online === 1 ? 'green' : 'red'">{{ row.online === 1 ? '在线' : '离线' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="继电器状态" min-width="100" align="center">
|
<template slot-scope="{ row }">
|
<span v-if="row.relayStatus === '0' || row.relayStatus === 0" class="red">断开</span>
|
<span v-else-if="row.relayStatus === '1' || row.relayStatus === 1" class="green">闭合</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="预警情况" min-width="200" align="center">
|
<template slot-scope="{ row }">
|
<template v-if="warnTypeLabels(row).length">
|
<span
|
v-for="(label, index) in warnTypeLabels(row)"
|
:key="index"
|
class="warn-tag"
|
>{{ label }}</span>
|
</template>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" min-width="220" fixed="right">
|
<template slot-scope="{ row }">
|
<el-button type="text" @click="openEdit(row)" v-permissions="['business:ywelectrical:update']">编辑</el-button>
|
<el-button type="text" @click="openRemote(row, 'recharge')" v-permissions="['business:ywelectrical:update']">充值</el-button>
|
<el-button type="text" @click="openRemote(row, 'basic')" v-permissions="['business:ywelectrical:update']">远程控制</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"></pagination>
|
</template>
|
<YwElectricalEdit ref="editWindow" @success="handlePageChange"></YwElectricalEdit>
|
<YwElectricalRemote ref="remoteWindow" @success="handlePageChange"></YwElectricalRemote>
|
</TableLayout>
|
</template>
|
|
<script>
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import Pagination from '@/components/common/Pagination'
|
import * as electricalApi from '@/api/business/ywelectrical'
|
import YwElectricalEdit from './components/YwElectricalEdit'
|
import YwElectricalRemote from './components/YwElectricalRemote'
|
|
export default {
|
name: 'YwElectrical',
|
extends: BaseTable,
|
components: { TableLayout, Pagination, YwElectricalEdit, YwElectricalRemote },
|
data () {
|
return {
|
searchForm: {
|
meterKeyword: '',
|
online: '',
|
accountStatus: ''
|
},
|
isSyncing: false
|
}
|
},
|
created () {
|
this.api = electricalApi
|
this.module = '电表设备信息'
|
this.configData['field.id'] = 'id'
|
this.configData['field.main'] = 'name'
|
this.search()
|
},
|
methods: {
|
handlePageChange (pageIndex) {
|
this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
|
this.isWorking.search = true
|
electricalApi.fetchList({
|
page: this.tableData.pagination.pageIndex,
|
capacity: this.tableData.pagination.pageSize,
|
model: this.buildSearchModel(),
|
sorts: this.tableData.sorts
|
})
|
.then(data => {
|
this.tableData.list = data.records
|
this.tableData.pagination.total = data.total
|
})
|
.catch(() => {})
|
.finally(() => { this.isWorking.search = false })
|
},
|
buildSearchModel () {
|
const model = {}
|
if (this.searchForm.meterKeyword) model.meterKeyword = this.searchForm.meterKeyword
|
if (this.searchForm.online !== '' && this.searchForm.online !== null && this.searchForm.online !== undefined) {
|
model.online = this.searchForm.online
|
}
|
if (this.searchForm.accountStatus !== '' && this.searchForm.accountStatus !== null && this.searchForm.accountStatus !== undefined) {
|
model.accountStatus = this.searchForm.accountStatus
|
}
|
return model
|
},
|
reset () {
|
this.searchForm = { meterKeyword: '', online: '', accountStatus: '' }
|
this.search()
|
},
|
formatBattery (val) {
|
if (!val) return '-'
|
return String(val).indexOf('kwh') >= 0 || String(val).indexOf('kWh') >= 0 ? val : val + 'kwh'
|
},
|
formatRate (val) {
|
if (val === null || val === undefined || val === '') return '-'
|
const n = Number(val)
|
return isNaN(n) ? val : n.toFixed(2)
|
},
|
formatBalance (val) {
|
if (val === null || val === undefined || val === '') return '-'
|
const n = Number(val)
|
if (isNaN(n)) return val
|
return `${n.toFixed(2)}元`
|
},
|
isBalanceLow (val) {
|
if (val === null || val === undefined || val === '') return false
|
const n = Number(val)
|
return !isNaN(n) && n <= 0
|
},
|
warnTypeLabels (row) {
|
const text = row.warnTypeName || row.warnType || ''
|
if (!text) return []
|
return text.split(',').map(item => item.trim()).filter(Boolean)
|
},
|
formatAccountStatus (val) {
|
if (val === 1 || val === '1') return '已开户'
|
if (val === 0 || val === '0') return '未开户'
|
return val == null || val === '' ? '-' : '未开户'
|
},
|
handleSync () {
|
this.$dialog.actionConfirm('确认从三方平台同步全部电表数据吗？', '同步电表')
|
.then(() => {
|
this.isSyncing = true
|
electricalApi.syncAll({})
|
.then(res => {
|
this.$tip.apiSuccess(res || '同步成功')
|
this.search()
|
})
|
.catch(e => this.$tip.apiFailed(e))
|
.finally(() => { this.isSyncing = false })
|
})
|
.catch(() => {})
|
},
|
openEdit (row) {
|
this.$refs.editWindow.open(row)
|
},
|
openRemote (row, tab) {
|
this.$refs.remoteWindow.open(row, tab)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.green { color: #67c23a; }
|
.red { color: #f56c6c; }
|
.warn-tag {
|
display: inline-block;
|
color: #f56c6c;
|
border: 1px solid #f56c6c;
|
border-radius: 4px;
|
padding: 0 6px;
|
margin: 2px;
|
font-size: 12px;
|
line-height: 20px;
|
white-space: nowrap;
|
}
|
</style>
|
