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