<template>
|
<div class="electrical-warning-panel">
|
<div class="panel-header">
|
<h3 class="panel-header__title">日常电量管理报警信息</h3>
|
</div>
|
<div class="panel_body">
|
<div class="chart_box" v-loading="chartLoading">
|
<div ref="warningChart" class="warning_chart"></div>
|
<div v-if="!chartLoading && !chartData.length" class="chart_empty">暂无报警数据</div>
|
</div>
|
<div class="list_box">
|
<el-table
|
v-loading="listLoading"
|
:data="warningList"
|
stripe
|
highlight-current-row
|
class="warning_table"
|
@row-click="handleRowClick"
|
>
|
<el-table-column label="序号" width="60" align="center">
|
<template slot-scope="{ $index }">
|
{{ (pagination.page - 1) * pagination.pageSize + $index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="electricalName" label="电表名称" min-width="120" align="center" show-overflow-tooltip />
|
<el-table-column prop="deviceAddress" label="电表地址" min-width="120" align="center" show-overflow-tooltip />
|
<el-table-column label="报警项" min-width="160" align="center">
|
<template slot-scope="{ row }">
|
<span v-if="row.warningName" class="warn-tag">{{ row.warningName }}</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="报警时间" min-width="150" align="center">
|
<template slot-scope="{ row }">
|
{{ formatDateTime(row.startTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="msg" label="报警详情" min-width="160" align="center" show-overflow-tooltip />
|
</el-table>
|
<div class="pagination_wrap">
|
<Pagination
|
@size-change="handleSizeChange"
|
@current-change="loadWarningList"
|
:pagination="pagination"
|
/>
|
</div>
|
</div>
|
</div>
|
<YwElectricalRemote ref="remoteWindow" />
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import dayjs from 'dayjs'
|
import Pagination from '@/components/common/Pagination'
|
import { electricalWarningStats, electricalWarningPage } from '@/api/ywWorkDesk'
|
import YwElectricalRemote from '@/views/business/components/YwElectricalRemote'
|
|
const CHART_COLORS = ['#8EC5FF', '#FF8C69', '#6B5BFF', '#52C41A', '#FFB020', '#9254DE', '#36CFC9', '#F759AB']
|
|
export default {
|
name: 'ElectricalWarningWorkbench',
|
components: { Pagination, YwElectricalRemote },
|
data () {
|
return {
|
chartLoading: false,
|
listLoading: false,
|
chartData: [],
|
warningList: [],
|
chartInstance: null,
|
pagination: {
|
page: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
},
|
mounted () {
|
this.loadStats()
|
this.loadWarningList(1)
|
window.addEventListener('resize', this.handleResize)
|
},
|
beforeDestroy () {
|
window.removeEventListener('resize', this.handleResize)
|
if (this.chartInstance) {
|
this.chartInstance.dispose()
|
this.chartInstance = null
|
}
|
},
|
methods: {
|
loadStats () {
|
this.chartLoading = true
|
electricalWarningStats()
|
.then(res => {
|
this.chartData = (res || []).map((item, index) => ({
|
name: `【电能表】${item.warningName}(${item.count})`,
|
value: item.count,
|
itemStyle: { color: CHART_COLORS[index % CHART_COLORS.length] }
|
}))
|
this.$nextTick(() => {
|
this.renderChart()
|
})
|
})
|
.finally(() => {
|
this.chartLoading = false
|
})
|
},
|
loadWarningList (page) {
|
this.listLoading = true
|
if (page) {
|
this.pagination.page = page
|
}
|
electricalWarningPage({
|
page: this.pagination.page,
|
capacity: this.pagination.pageSize,
|
model: {}
|
})
|
.then(res => {
|
this.warningList = res.records || []
|
this.pagination.total = res.total || 0
|
})
|
.finally(() => {
|
this.listLoading = false
|
})
|
},
|
handleSizeChange (size) {
|
this.pagination.pageSize = size
|
this.loadWarningList(1)
|
},
|
renderChart () {
|
const chartDom = this.$refs.warningChart
|
if (!chartDom) {
|
return
|
}
|
if (!this.chartInstance) {
|
this.chartInstance = echarts.init(chartDom)
|
}
|
this.chartInstance.setOption({
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c} ({d}%)',
|
backgroundColor: 'rgba(255,255,255,0.96)',
|
borderColor: '#EEF2F8',
|
borderWidth: 1,
|
textStyle: { color: '#333', fontSize: 12 }
|
},
|
legend: {
|
type: 'scroll',
|
orient: 'vertical',
|
bottom: 8,
|
left: 'center',
|
height: 80,
|
pageButtonItemGap: 6,
|
pageIconSize: 10,
|
itemWidth: 12,
|
itemHeight: 12,
|
itemGap: 8,
|
textStyle: {
|
fontSize: 12,
|
color: '#666'
|
}
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['45%', '62%'],
|
center: ['50%', '38%'],
|
avoidLabelOverlap: true,
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
data: this.chartData
|
}
|
]
|
}, true)
|
},
|
handleResize () {
|
if (this.chartInstance) {
|
this.chartInstance.resize()
|
}
|
},
|
handleRowClick (row) {
|
if (!row.electricalId) {
|
this.$message.warning('该报警未关联电表，无法打开远程控制')
|
return
|
}
|
this.$refs.remoteWindow.open({ id: row.electricalId }, 'basic')
|
},
|
formatDateTime (value) {
|
if (!value) {
|
return '-'
|
}
|
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.electrical-warning-panel {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 10px;
|
padding: 20px;
|
box-sizing: border-box;
|
|
.panel-header {
|
margin-bottom: 16px;
|
|
&__title {
|
margin: 0;
|
padding-left: 10px;
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
line-height: 1.4;
|
border-left: 3px solid #3E80EF;
|
}
|
}
|
|
.panel_body {
|
display: flex;
|
align-items: stretch;
|
gap: 20px;
|
}
|
|
.chart_box {
|
position: relative;
|
width: 400px;
|
flex-shrink: 0;
|
min-height: 340px;
|
padding: 12px;
|
background: #FAFBFE;
|
border-radius: 8px;
|
border: 1px solid #EEF2F8;
|
box-sizing: border-box;
|
|
.warning_chart {
|
width: 100%;
|
height: 316px;
|
}
|
|
.chart_empty {
|
position: absolute;
|
inset: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #999;
|
font-size: 14px;
|
}
|
}
|
|
.list_box {
|
flex: 1;
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
padding-left: 4px;
|
border-left: 1px solid #EEF2F8;
|
}
|
|
.warning_table {
|
width: 100%;
|
|
::v-deep tbody tr {
|
cursor: pointer;
|
}
|
}
|
|
.pagination_wrap {
|
margin-top: 12px;
|
}
|
|
.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;
|
}
|
}
|
|
@media (max-width: 1200px) {
|
.electrical-warning-panel {
|
.panel_body {
|
flex-direction: column;
|
}
|
|
.chart_box {
|
width: 100%;
|
}
|
|
.list_box {
|
padding-left: 0;
|
border-left: none;
|
padding-top: 4px;
|
border-top: 1px solid #EEF2F8;
|
}
|
}
|
}
|
</style>
|
