|
|
|
|
@ -6,9 +6,18 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 监控点配置 -->
|
|
|
|
|
<el-form ref="monitorForm" :model="monitorPoints" label-width="120px">
|
|
|
|
|
<el-form ref="monitorForm" label-width="120px">
|
|
|
|
|
<!-- 添加监控点按钮 -->
|
|
|
|
|
<div class="add-monitor-section">
|
|
|
|
|
<el-button type="primary" @click="addMonitorPoint" icon="el-icon-plus">
|
|
|
|
|
添加监控点
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-for="(point, index) in monitorPoints" :key="`point-${index}`" class="monitor-point-config">
|
|
|
|
|
<div class="point-header">监控点 {{ point.name }}</div>
|
|
|
|
|
<div class="point-header">
|
|
|
|
|
<span>监控点 {{ point.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 视频配置 -->
|
|
|
|
|
<el-form-item :label="`摄像头地址`">
|
|
|
|
|
@ -19,10 +28,19 @@
|
|
|
|
|
<el-input v-model="point.videoName" placeholder="请输入摄像头名称" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 环境监测阈值 -->
|
|
|
|
|
<el-divider content-position="left">环境监测阈值</el-divider>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="CO浓度阈值(ppm)">
|
|
|
|
|
|
|
|
|
|
<el-form-item label="设备地址">
|
|
|
|
|
<el-input v-model="point.deviceAddress" placeholder="请输入设备地址" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="节点ID">
|
|
|
|
|
<el-input v-model="point.nodeId" placeholder="请输入节点ID" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 环境监测阈值 -->
|
|
|
|
|
<el-divider content-position="left">环境监测阈值（超过此值将触发预警）</el-divider>
|
|
|
|
|
<el-form-item label="CO浓度阈值">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="point.coThreshold"
|
|
|
|
|
:min="0"
|
|
|
|
|
@ -31,9 +49,9 @@
|
|
|
|
|
:precision="1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
/>
|
|
|
|
|
<span class="description">超过此值将触发预警</span>
|
|
|
|
|
<span class="threshold-label">PPM</span>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="温度阈值(℃)">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="11">
|
|
|
|
|
@ -79,6 +97,28 @@
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 监控点配置保存按钮 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="saveMonitorSettings(index)" :loading="saveLoading" icon="el-icon-check">
|
|
|
|
|
保存
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="point.id"
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="deleteMonitorPoint(index)"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
>
|
|
|
|
|
删除
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
v-else
|
|
|
|
|
@click="cancelAddMonitorPoint(index)"
|
|
|
|
|
icon="el-icon-close"
|
|
|
|
|
>
|
|
|
|
|
取消
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
@ -112,62 +152,55 @@
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="saveSettings">保存设置</el-button>
|
|
|
|
|
<el-button @click="resetForm">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getGasConfig, saveGasConfig, destroyGasConfig } from '@/api/monitor'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'WarningSetting',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
monitorPoints: [
|
|
|
|
|
{
|
|
|
|
|
name: 'A',
|
|
|
|
|
videoName: '摄像头1',
|
|
|
|
|
videoUrl: 'ezopen://open.ys7.com/203751922/1.cga',
|
|
|
|
|
coThreshold: 5.0,
|
|
|
|
|
tempMinThreshold: 15,
|
|
|
|
|
tempMaxThreshold: 30,
|
|
|
|
|
humidityMinThreshold: 30,
|
|
|
|
|
humidityMaxThreshold: 70
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'B',
|
|
|
|
|
videoName: '摄像头2',
|
|
|
|
|
videoUrl: 'ezopen://open.ys7.com/F59651352/1.cga',
|
|
|
|
|
coThreshold: 5.0,
|
|
|
|
|
tempMinThreshold: 15,
|
|
|
|
|
tempMaxThreshold: 30,
|
|
|
|
|
humidityMinThreshold: 30,
|
|
|
|
|
humidityMaxThreshold: 70
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'C',
|
|
|
|
|
videoName: '摄像头3',
|
|
|
|
|
videoUrl: 'ezopen://open.ys7.com/G39410642/1.cga',
|
|
|
|
|
coThreshold: 5.0,
|
|
|
|
|
tempMinThreshold: 15,
|
|
|
|
|
tempMaxThreshold: 30,
|
|
|
|
|
humidityMinThreshold: 30,
|
|
|
|
|
humidityMaxThreshold: 70
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
monitorPoints: [],
|
|
|
|
|
warningForm: {
|
|
|
|
|
phoneNumber: '',
|
|
|
|
|
receivers: [
|
|
|
|
|
{ phone: '13800138000', name: '张三' },
|
|
|
|
|
{ phone: '13900139000', name: '李四' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
saveLoading: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.loadMonitorConfig()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 加载监控点配置
|
|
|
|
|
async loadMonitorConfig() {
|
|
|
|
|
try {
|
|
|
|
|
const response = await getGasConfig()
|
|
|
|
|
// 适配分页结构
|
|
|
|
|
const list = response.data ? response.data : []
|
|
|
|
|
this.monitorPoints = list.map(item => ({
|
|
|
|
|
id: item.id,
|
|
|
|
|
videoUrl: item.camera_url,
|
|
|
|
|
videoName: item.camera_name,
|
|
|
|
|
coThreshold: Number(item.co_threshold),
|
|
|
|
|
tempMinThreshold: Number(item.temperature_low_threshold),
|
|
|
|
|
tempMaxThreshold: Number(item.temperature_high_threshold),
|
|
|
|
|
humidityMinThreshold: Number(item.humidity_low_threshold),
|
|
|
|
|
humidityMaxThreshold: Number(item.humidity_high_threshold),
|
|
|
|
|
deviceAddress: item.device_id,
|
|
|
|
|
nodeId: item.node_id
|
|
|
|
|
}))
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('加载监控点配置失败:', error)
|
|
|
|
|
this.$message.error('加载监控点配置失败')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
addReceiver() {
|
|
|
|
|
if (!this.warningForm.phoneNumber) {
|
|
|
|
|
this.$message.warning('请输入手机号')
|
|
|
|
|
@ -205,6 +238,76 @@ export default {
|
|
|
|
|
// 重置表单为初始值
|
|
|
|
|
this.$refs.monitorForm && this.$refs.monitorForm.resetFields()
|
|
|
|
|
this.$refs.warningForm && this.$refs.warningForm.resetFields()
|
|
|
|
|
},
|
|
|
|
|
addMonitorPoint() {
|
|
|
|
|
this.monitorPoints.push({
|
|
|
|
|
name: '监控点',
|
|
|
|
|
videoName: '',
|
|
|
|
|
videoUrl: '',
|
|
|
|
|
deviceAddress: '',
|
|
|
|
|
nodeId: '',
|
|
|
|
|
coThreshold: 5.0,
|
|
|
|
|
tempMinThreshold: 15,
|
|
|
|
|
tempMaxThreshold: 30,
|
|
|
|
|
humidityMinThreshold: 30,
|
|
|
|
|
humidityMaxThreshold: 70
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
async saveMonitorSettings(index) {
|
|
|
|
|
this.saveLoading = true
|
|
|
|
|
try {
|
|
|
|
|
const point = this.monitorPoints[index]
|
|
|
|
|
const param = {
|
|
|
|
|
id: point.id,
|
|
|
|
|
camera_url: point.videoUrl,
|
|
|
|
|
camera_name: point.videoName,
|
|
|
|
|
co_threshold: point.coThreshold,
|
|
|
|
|
temperature_low_threshold: point.tempMinThreshold,
|
|
|
|
|
temperature_high_threshold: point.tempMaxThreshold,
|
|
|
|
|
humidity_low_threshold: point.humidityMinThreshold,
|
|
|
|
|
humidity_high_threshold: point.humidityMaxThreshold,
|
|
|
|
|
device_id: point.deviceAddress,
|
|
|
|
|
node_id: point.nodeId
|
|
|
|
|
}
|
|
|
|
|
await saveGasConfig(param)
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '监控点配置保存成功',
|
|
|
|
|
type: 'success'
|
|
|
|
|
})
|
|
|
|
|
await this.loadMonitorConfig()
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('保存监控点配置失败:', error)
|
|
|
|
|
this.$message.error('保存监控点配置失败')
|
|
|
|
|
} finally {
|
|
|
|
|
this.saveLoading = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async deleteMonitorPoint(index) {
|
|
|
|
|
try {
|
|
|
|
|
await this.$confirm('确定要删除此监控点吗？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const pointToDelete = this.monitorPoints[index]
|
|
|
|
|
console.log(pointToDelete)
|
|
|
|
|
await destroyGasConfig({ id: pointToDelete.id })
|
|
|
|
|
|
|
|
|
|
this.monitorPoints.splice(index, 1)
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功!'
|
|
|
|
|
})
|
|
|
|
|
} catch (error) {
|
|
|
|
|
if (error !== 'cancel') {
|
|
|
|
|
console.error('删除监控点失败:', error)
|
|
|
|
|
this.$message.error('删除监控点失败')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
cancelAddMonitorPoint(index) {
|
|
|
|
|
this.monitorPoints.splice(index, 1)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -237,6 +340,18 @@ export default {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -251,5 +366,9 @@ export default {
|
|
|
|
|
color: #909399;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.add-monitor-section {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
lynn
3 months ago