lynn
5 months ago
parent
6aaa72859f
commit
ae1aba3583
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="warning-page">
|
||||
<div class="filter-header">
|
||||
<el-form :inline="true" class="filter-form">
|
||||
<el-form-item label="监控点">
|
||||
<el-input v-model="filterForm.camera_name" placeholder="请输入监控点名称" clearable @clear="handleClear"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column label="监控点" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.detail && scope.row.detail.gas_config ? scope.row.detail.gas_config.name : scope.row.detail.camera_name || '未知监控点' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备ID" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.detail && scope.row.detail.gas_config ? scope.row.detail.gas_config.device_id : scope.row.detail.device_id || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="节点ID" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.detail && scope.row.detail.gas_config ? scope.row.detail.gas_config.node_id : scope.row.detail.node_id || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预警内容" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getWarningContent(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="监测值" width="280">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.detail && scope.row.detail.gas_data">
|
||||
<div>CO浓度: {{ scope.row.detail.gas_data.co_concentration || '-' }} ppm</div>
|
||||
<div>温度: {{ scope.row.detail.gas_data.temperature || '-' }} ℃</div>
|
||||
<div>湿度: {{ scope.row.detail.gas_data.humidity || '-' }} %</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阈值信息" width="278">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.detail && scope.row.detail.gas_config">
|
||||
<div>CO阈值: {{ scope.row.detail.gas_config.co_threshold }} ppm</div>
|
||||
<div>温度: {{ scope.row.detail.gas_config.temperature_low_threshold }}-{{ scope.row.detail.gas_config.temperature_high_threshold }}°C</div>
|
||||
<div>湿度: {{ scope.row.detail.gas_config.humidity_low_threshold }}-{{ scope.row.detail.gas_config.humidity_high_threshold }}%</div>
|
||||
</div>
|
||||
<div v-else-if="scope.row.detail">
|
||||
<div>CO阈值: {{ scope.row.detail.co_threshold }} ppm</div>
|
||||
<div>温度: {{ scope.row.detail.temperature_low_threshold }}-{{ scope.row.detail.temperature_high_threshold }}°C</div>
|
||||
<div>湿度: {{ scope.row.detail.humidity_low_threshold }}-{{ scope.row.detail.humidity_high_threshold }}%</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="预警时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ formatDateTime(scope.row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import qs from 'qs'
|
||||
import { getNotificationsList } from '@/api/monitor'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
filterForm: {
|
||||
camera_name: ''
|
||||
},
|
||||
tableData: [],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const response = await getNotificationsList({
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
type: 'GasAlarm'
|
||||
})
|
||||
this.tableData = response.data || []
|
||||
this.total = response.total || 0
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error)
|
||||
this.$message.error('加载数据失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async handleSearch() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
page: this.currentPage,
|
||||
page_size: this.pageSize,
|
||||
type: 'GasAlarm',
|
||||
name: this.filterForm.camera_name
|
||||
// filter: [{
|
||||
// key: 'name',
|
||||
// op: 'eq',
|
||||
// value: this.filterForm.camera_name
|
||||
// }]
|
||||
}
|
||||
const response = await getNotificationsList(params, {
|
||||
paramsSerializer: params => qs.stringify(params, { arrayFormat: 'indices' })
|
||||
})
|
||||
this.tableData = response.data || []
|
||||
this.total = response.total || 0
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
this.$message.error('搜索失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.filterForm = {
|
||||
camera_name: ''
|
||||
}
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.loadData()
|
||||
},
|
||||
handleClear() {
|
||||
this.resetForm()
|
||||
},
|
||||
|
||||
getWarningContent(row) {
|
||||
try {
|
||||
if (row.data) {
|
||||
const data = JSON.parse(row.data)
|
||||
return data.content || '未知预警'
|
||||
}
|
||||
return '未知预警'
|
||||
} catch (error) {
|
||||
return '未知预警'
|
||||
}
|
||||
},
|
||||
formatDateTime(dateTimeStr) {
|
||||
if (!dateTimeStr) return ''
|
||||
const date = new Date(dateTimeStr)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.warning-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue