<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>电表采集管理</span>
|
<el-button style="float: right; padding: 3px 0" link @click="refreshData">
|
<i class="el-icon-refresh"></i> 刷新
|
</el-button>
|
</div>
|
|
<!-- 测试按钮 -->
|
<el-row :gutter="20" style="margin-bottom: 15px;">
|
<el-col :span="24">
|
<el-button @click="addTestData" type="primary" size="small">添加测试数据</el-button>
|
<el-button @click="clearData" type="danger" size="small">清空数据</el-button>
|
<el-button @click="testChart" type="success" size="small">测试图表</el-button>
|
</el-col>
|
</el-row>
|
|
<!-- 搜索区域 -->
|
<el-row :gutter="20" class="search-row">
|
<el-col :span="6">
|
<el-input
|
v-model="searchForm.meterNo"
|
placeholder="请输入电表编号"
|
clearable
|
@keyup.enter.native="handleSearch"
|
>
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
</el-col>
|
<el-col :span="6">
|
<el-select v-model="searchForm.location" placeholder="请选择位置" clearable>
|
<el-option label="生产车间A" value="车间A"></el-option>
|
<el-option label="生产车间B" value="车间B"></el-option>
|
<el-option label="办公区域" value="办公区"></el-option>
|
<el-option label="配电室" value="配电室"></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="6">
|
<el-date-picker
|
v-model="searchForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
/>
|
</el-col>
|
<el-col :span="6">
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</el-col>
|
</el-row>
|
|
<!-- 电表列表 -->
|
<el-table
|
:data="meterList"
|
style="width: 100%"
|
v-loading="loading"
|
border
|
stripe
|
height="calc(100vh - 22em)"
|
>
|
<el-table-column prop="meterNo" label="电表编号" width="120" />
|
<el-table-column prop="location" label="安装位置" width="120" />
|
<el-table-column prop="meterType" label="电表类型" width="120" />
|
<el-table-column prop="voltage" label="电压等级" width="100" />
|
<el-table-column prop="currentReading" label="当前读数(kWh)" width="140" />
|
<el-table-column prop="lastReading" label="上次读数(kWh)" width="140" />
|
<el-table-column prop="consumption" label="用电量(kWh)" width="120" />
|
<el-table-column prop="power" label="功率(kW)" width="100" />
|
<el-table-column prop="powerFactor" label="功率因数" width="100" />
|
<el-table-column prop="status" label="状态" width="80">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="lastUpdateTime" label="最后更新时间" width="160" />
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
<template #default="scope">
|
<el-button link @click="viewDetails(scope.row)">
|
查看详情
|
</el-button>
|
<el-button link @click="manualCollection(scope.row)">
|
手动采集
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<pagination
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="pagination.currentPage"
|
:limit="pagination.pageSize"
|
@pagination="handleCurrentChange"
|
/>
|
</el-card>
|
|
<!-- 详情对话框 -->
|
<el-dialog
|
title="电表详情"
|
v-model="detailDialogVisible"
|
width="60%"
|
@opened="onDialogOpened"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>电表编号:</label>
|
<span>{{ currentMeter.meterNo }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>安装位置:</label>
|
<span>{{ currentMeter.location }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>电表类型:</label>
|
<span>{{ currentMeter.meterType }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>电压等级:</label>
|
<span>{{ currentMeter.voltage }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>当前读数:</label>
|
<span>{{ currentMeter.currentReading }} kWh</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>上次读数:</label>
|
<span>{{ currentMeter.lastReading }} kWh</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>用电量:</label>
|
<span>{{ currentMeter.consumption }} kWh</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>功率:</label>
|
<span>{{ currentMeter.power }} kW</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>功率因数:</label>
|
<span>{{ currentMeter.powerFactor }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>状态:</label>
|
<el-tag :type="currentMeter.status === '正常' ? 'success' : 'danger'">
|
{{ currentMeter.status }}
|
</el-tag>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="detail-item">
|
<label>最后更新时间:</label>
|
<span>{{ currentMeter.lastUpdateTime }}</span>
|
</div>
|
</el-col>
|
</el-row>
|
|
<!-- 用电趋势图 -->
|
<div style="margin-top: 20px;">
|
<h4>24小时用电趋势</h4>
|
<div ref="chartContainer" style="height: 300px;"></div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
|
export default {
|
name: 'MeterCollection',
|
data() {
|
return {
|
loading: false,
|
searchForm: {
|
meterNo: '',
|
location: '',
|
dateRange: []
|
},
|
meterList: [],
|
pagination: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
detailDialogVisible: false,
|
currentMeter: {},
|
chart: null
|
}
|
},
|
created() {
|
// 立即生成一些测试数据
|
this.meterList = [
|
{
|
id: 1,
|
meterNo: 'M001',
|
location: '车间A',
|
meterType: '智能电表',
|
voltage: '380V',
|
currentReading: 8500,
|
lastReading: 8400,
|
consumption: 100,
|
power: '75.5',
|
powerFactor: '0.85',
|
status: '正常',
|
lastUpdateTime: '2024-01-15 10:30:00'
|
},
|
{
|
id: 2,
|
meterNo: 'M002',
|
location: '车间B',
|
meterType: '多功能电表',
|
voltage: '220V',
|
currentReading: 6200,
|
lastReading: 6100,
|
consumption: 100,
|
power: '45.2',
|
powerFactor: '0.92',
|
status: '正常',
|
lastUpdateTime: '2024-01-15 10:25:00'
|
}
|
]
|
this.pagination.total = this.meterList.length
|
},
|
mounted() {
|
// 延迟一点时间再调用，确保DOM已经渲染
|
this.$nextTick(() => {
|
this.getMeterList()
|
})
|
},
|
watch: {
|
meterList: {
|
handler(newVal) {
|
console.log('meterList数据变化:', newVal)
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
// 获取电表列表
|
getMeterList() {
|
this.loading = true
|
// 模拟API调用
|
setTimeout(() => {
|
const mockData = this.generateMockData()
|
this.meterList = mockData
|
this.pagination.total = this.meterList.length
|
this.loading = false
|
}, 500)
|
},
|
|
// 生成模拟数据
|
generateMockData() {
|
const locations = ['车间A', '车间B', '办公区', '配电室']
|
const meterTypes = ['智能电表', '多功能电表', '普通电表']
|
const voltages = ['220V', '380V', '10kV']
|
const statuses = ['正常', '异常']
|
|
const data = []
|
for (let i = 1; i <= 25; i++) {
|
const currentReading = Math.floor(Math.random() * 10000) + 5000
|
const lastReading = currentReading - Math.floor(Math.random() * 100) - 10
|
const consumption = currentReading - lastReading
|
const power = Math.random() * 100 + 20
|
const powerFactor = (Math.random() * 0.3 + 0.7).toFixed(2)
|
|
data.push({
|
id: i,
|
meterNo: `M${String(i).padStart(3, '0')}`,
|
location: locations[Math.floor(Math.random() * locations.length)],
|
meterType: meterTypes[Math.floor(Math.random() * meterTypes.length)],
|
voltage: voltages[Math.floor(Math.random() * voltages.length)],
|
currentReading: currentReading,
|
lastReading: lastReading,
|
consumption: consumption,
|
power: power.toFixed(2),
|
powerFactor: powerFactor,
|
status: statuses[Math.floor(Math.random() * statuses.length)],
|
lastUpdateTime: this.formatDate(new Date(Date.now() - Math.random() * 86400000))
|
})
|
}
|
return data
|
},
|
|
// 格式化日期
|
formatDate(date) {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
const hours = String(date.getHours()).padStart(2, '0')
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
},
|
|
// 搜索
|
handleSearch() {
|
this.pagination.currentPage = 1
|
this.getMeterList()
|
},
|
|
// 重置搜索
|
resetSearch() {
|
this.searchForm = {
|
meterNo: '',
|
location: '',
|
dateRange: []
|
}
|
this.handleSearch()
|
},
|
|
// 查看详情
|
viewDetails(row) {
|
this.currentMeter = row
|
this.detailDialogVisible = true
|
},
|
|
// 对话框打开后初始化图表
|
onDialogOpened() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.initChart()
|
}, 100)
|
})
|
},
|
|
// 手动采集
|
manualCollection(row) {
|
this.$message.success(`正在采集电表 ${row.meterNo} 的数据...`)
|
// 模拟采集过程
|
setTimeout(() => {
|
row.currentReading = Math.floor(Math.random() * 100) + row.currentReading
|
row.lastUpdateTime = this.formatDate(new Date())
|
this.$message.success('数据采集完成')
|
}, 1000)
|
},
|
|
// 刷新数据
|
refreshData() {
|
this.getMeterList()
|
this.$message.success('数据已刷新')
|
},
|
|
// 添加测试数据
|
addTestData() {
|
const testData = {
|
id: Date.now(),
|
meterNo: `M${String(this.meterList.length + 1).padStart(3, '0')}`,
|
location: '测试位置',
|
meterType: '测试电表',
|
voltage: '220V',
|
currentReading: Math.floor(Math.random() * 10000) + 1000,
|
lastReading: Math.floor(Math.random() * 5000) + 500,
|
consumption: Math.floor(Math.random() * 100) + 10,
|
power: (Math.random() * 100 + 10).toFixed(2),
|
powerFactor: (Math.random() * 0.3 + 0.7).toFixed(2),
|
status: '正常',
|
lastUpdateTime: this.formatDate(new Date())
|
}
|
this.meterList.push(testData)
|
this.pagination.total = this.meterList.length
|
this.$message.success('测试数据已添加')
|
},
|
|
// 清空数据
|
clearData() {
|
this.meterList = []
|
this.pagination.total = 0
|
this.$message.success('数据已清空')
|
},
|
|
// 测试图表
|
testChart() {
|
this.$message.info('图表测试功能')
|
// 创建一个测试对话框来测试图表
|
this.currentMeter = {
|
meterNo: 'TEST001',
|
location: '测试位置',
|
meterType: '测试电表',
|
voltage: '220V',
|
currentReading: 1000,
|
lastReading: 900,
|
consumption: 100,
|
power: '50.0',
|
powerFactor: '0.85',
|
status: '正常',
|
lastUpdateTime: '2024-01-15 12:00:00'
|
}
|
this.detailDialogVisible = true
|
},
|
|
// 分页大小改变
|
handleSizeChange(val) {
|
this.pagination.pageSize = val
|
this.getMeterList()
|
},
|
|
// 当前页改变
|
handleCurrentChange(val) {
|
this.pagination.pageSize = val.limit
|
this.pagination.currentPage = val.page
|
this.getMeterList()
|
},
|
|
// 初始化图表
|
initChart() {
|
try {
|
if (this.chart) {
|
this.chart.dispose()
|
this.chart = null
|
}
|
|
// 确保DOM元素存在
|
if (!this.$refs.chartContainer) {
|
console.error('图表容器不存在，等待DOM更新...')
|
// 如果容器不存在，等待一下再试
|
setTimeout(() => {
|
this.initChart()
|
}, 100)
|
return
|
}
|
|
// 检查容器尺寸
|
const container = this.$refs.chartContainer
|
if (container.offsetWidth === 0 || container.offsetHeight === 0) {
|
setTimeout(() => {
|
this.initChart()
|
}, 100)
|
return
|
}
|
this.chart = echarts.init(container)
|
|
// 生成24小时模拟数据
|
const hours = []
|
const consumption = []
|
for (let i = 0; i < 24; i++) {
|
hours.push(`${i}:00`)
|
consumption.push(Math.floor(Math.random() * 50) + 20)
|
}
|
|
const option = {
|
title: {
|
text: '24小时用电量趋势',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: '{b}<br/>用电量: {c} kWh'
|
},
|
xAxis: {
|
type: 'category',
|
data: hours,
|
axisLabel: {
|
rotate: 45
|
}
|
},
|
yAxis: {
|
type: 'value',
|
name: '用电量 (kWh)'
|
},
|
series: [{
|
data: consumption,
|
type: 'line',
|
smooth: true,
|
areaStyle: {
|
opacity: 0.3
|
},
|
itemStyle: {
|
color: '#409EFF'
|
}
|
}]
|
}
|
|
this.chart.setOption(option)
|
} catch (error) {
|
console.error('图表初始化失败:', error)
|
this.$message.error('图表初始化失败: ' + error.message)
|
}
|
}
|
},
|
|
beforeUnmount() {
|
if (this.chart) {
|
try {
|
this.chart.dispose()
|
this.chart = null
|
} catch (error) {
|
console.error('清理图表失败:', error)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.search-row {
|
margin-bottom: 20px;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
text-align: right;
|
}
|
|
.el-table {
|
margin-top: 20px;
|
}
|
|
.detail-item {
|
margin-bottom: 15px;
|
padding: 10px;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
background-color: #fafafa;
|
}
|
|
.detail-item label {
|
font-weight: bold;
|
color: #606266;
|
margin-right: 10px;
|
min-width: 100px;
|
display: inline-block;
|
}
|
|
.detail-item span {
|
color: #303133;
|
}
|
|
.detail-item .el-tag {
|
margin-left: 0;
|
}
|
</style>
|
