323 lines
13 KiB
Vue
323 lines
13 KiB
Vue
<template>
|
|
<!-- 感知设备 ---- 设备管理 -->
|
|
<div class="app-container">
|
|
<TableModel
|
|
ref="tableRef"
|
|
:formLabel="formLabel"
|
|
:sendParams="sendParams"
|
|
:columnsList="columnsList"
|
|
:isSelectShow="false"
|
|
:request-api="getEquipmentManageListInDetailsAPI"
|
|
>
|
|
<template slot="btn">
|
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
|
|
新增
|
|
</el-button>
|
|
</template>
|
|
<template slot="handle" slot-scope="{ data }">
|
|
<el-button size="mini" type="primary" @click="handleAddOrOther(data, 2)" icon="el-icon-edit">
|
|
修改
|
|
</el-button>
|
|
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
|
|
<template slot="status" slot-scope="{ data }">
|
|
<el-tag size="mini">状态 </el-tag>
|
|
</template>
|
|
</TableModel>
|
|
|
|
<!-- 弹框 -->
|
|
<DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
|
|
<template slot="outerContent">
|
|
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
|
|
<el-form-item label="监测名称：" prop="attrName">
|
|
<el-input placeholder="请输入监测名称" v-model="addOrEditForm.attrName" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="编码：" prop="attrCode">
|
|
<el-input placeholder="请输入编码" v-model="addOrEditForm.attrCode" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="监测时间：" prop="updateTime">
|
|
<el-date-picker
|
|
type="datetime"
|
|
style="width: 100%"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
v-model="addOrEditForm.updateTime"
|
|
placeholder="请选择监测时间"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="采集值：" prop="attrVal">
|
|
<el-input placeholder="请输入采集值" v-model="addOrEditForm.attrVal" clearable />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="采集值类型：" prop="dataType">
|
|
<el-input placeholder="请输入采集值类型" v-model="addOrEditForm.dataType" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="采集值单位：" prop="unit">
|
|
<el-input placeholder="请输入采集值单位" v-model="addOrEditForm.unit" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="是否告警：" prop="isWarn">
|
|
<el-select v-model="addOrEditForm.isWarn" clearable filterable style="width: 100%">
|
|
<el-option label="是" value="1" />
|
|
<el-option label="否" value="0" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="变化值：" prop="changeVal">
|
|
<el-input placeholder="请输入变化值" v-model="addOrEditForm.changeVal" clearable />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="最大阈值：" prop="maxVal">
|
|
<el-input placeholder="请输入最大阈值" v-model="addOrEditForm.maxVal" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="最小阈值：" prop="minVal">
|
|
<el-input placeholder="请输入最小阈值" v-model="addOrEditForm.minVal" clearable />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="备注：" prop="remark">
|
|
<el-input placeholder="请输入编码" v-model="addOrEditForm.remark" clearable />
|
|
</el-form-item>
|
|
|
|
<el-form-item class="handle">
|
|
<el-button @click="onCancel"> 取消 </el-button>
|
|
<el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</DialogModel>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TableModel from '@/components/TableModel'
|
|
import DialogModel from '@/components/DialogModel'
|
|
|
|
import { formLabel, columnsList, dialogConfig } from './config'
|
|
import {
|
|
getEquipmentManageListInDetailsAPI,
|
|
addEquipmentManageDataInDetailsAPI,
|
|
editEquipmentManageDataInDetailsAPI,
|
|
deleteEquipmentManageDataInDetailsAPI,
|
|
} from '@/api/perception-devices/equipment-manage.js'
|
|
export default {
|
|
props: {
|
|
detailsId: {
|
|
type: [Number, String],
|
|
default: () => '',
|
|
},
|
|
},
|
|
components: {
|
|
TableModel,
|
|
DialogModel,
|
|
},
|
|
data() {
|
|
return {
|
|
formLabel,
|
|
columnsList,
|
|
dialogConfig,
|
|
getEquipmentManageListInDetailsAPI,
|
|
dialogType: 1,
|
|
// 新增或修改接口
|
|
addOrEditForm: {
|
|
devId: '', // 外层列表id
|
|
attrName: '', // 监测名称
|
|
updateTime: '', // 创建时间
|
|
attrVal: '', //采集值
|
|
dataType: '', // 采集值类型
|
|
unit: '', // 采集值单位
|
|
isWarn: '', // 是否告警
|
|
changeVal: '', // 变化值
|
|
maxVal: '', // 最大阈值
|
|
minVal: '', // 最小阈值
|
|
attrCode: '', // 设备级联编码
|
|
remark: '', // 备注
|
|
attrId: '',
|
|
},
|
|
addOrEditFormRules: {
|
|
attrName: [
|
|
{
|
|
required: true,
|
|
message: '请输入监测名称',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
attrCode: [
|
|
{
|
|
required: true,
|
|
message: '请输入编码',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
|
|
// 列表查询参数
|
|
sendParams: {
|
|
devId: '',
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleAddOrOther(data, type) {
|
|
const titleType = {
|
|
1: '新增',
|
|
2: '修改',
|
|
}
|
|
|
|
if (type === 2) {
|
|
const {
|
|
devId, // 外层列表id
|
|
attrName, // 监测名称
|
|
updateTime, // 创建时间
|
|
attrVal, //采集值
|
|
dataType, // 采集值类型
|
|
unit, // 采集值单位
|
|
isWarn, // 是否告警
|
|
changeVal, // 变化值
|
|
maxVal, // 最大阈值
|
|
minVal, // 最小阈值
|
|
attrCode, // 设备级联编码
|
|
remark, // 备注
|
|
attrId, // 列表id
|
|
} = data
|
|
|
|
Object.assign(this.addOrEditForm, {
|
|
devId, // 外层列表id
|
|
attrName, // 监测名称
|
|
updateTime, // 创建时间
|
|
attrVal, //采集值
|
|
dataType, // 采集值类型
|
|
unit, // 采集值单位
|
|
isWarn, // 是否告警
|
|
changeVal, // 变化值
|
|
maxVal, // 最大阈值
|
|
minVal, // 最小阈值
|
|
attrCode, // 设备级联编码
|
|
remark, // 备注
|
|
attrId, // 列表id
|
|
})
|
|
} else {
|
|
this.addOrEditForm = {
|
|
devId: '', // 外层列表id
|
|
attrName: '', // 监测名称
|
|
updateTime: '', // 创建时间
|
|
attrVal: '', //采集值
|
|
dataType: '', // 采集值类型
|
|
unit: '', // 采集值单位
|
|
isWarn: '', // 是否告警
|
|
changeVal: '', // 变化值
|
|
maxVal: '', // 最大阈值
|
|
minVal: '', // 最小阈值
|
|
attrCode: '', // 设备级联编码
|
|
remark: '', // 备注
|
|
attrId: '',
|
|
}
|
|
}
|
|
this.dialogType = type
|
|
this.dialogConfig.outerVisible = true
|
|
this.dialogConfig.outerTitle = titleType[type]
|
|
},
|
|
handleDeleteData(data) {
|
|
this.$modal
|
|
.confirm(`是否确认删除该条数据`)
|
|
.then(async () => {
|
|
const res = await deleteEquipmentManageDataInDetailsAPI({ attrId: data.attrId })
|
|
if (res.code === 200) {
|
|
this.$modal.msgSuccess('删除成功')
|
|
this.$refs.tableRef.getTableList()
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
/** 关闭外侧弹框 */
|
|
closeDialogOuter() {
|
|
this.$refs.addOrEditFormRef.resetFields()
|
|
this.dialogConfig.outerVisible = false
|
|
},
|
|
|
|
// 表单提交
|
|
onSubmitForm() {
|
|
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
|
if (valid) {
|
|
// this.dialogConfig.outerVisible = false
|
|
|
|
const {
|
|
devId, // 外层列表id
|
|
attrName, // 监测名称
|
|
updateTime, // 创建时间
|
|
attrVal, //采集值
|
|
dataType, // 采集值类型
|
|
unit, // 采集值单位
|
|
isWarn, // 是否告警
|
|
changeVal, // 变化值
|
|
maxVal, // 最大阈值
|
|
minVal, // 最小阈值
|
|
attrCode, // 设备级联编码
|
|
remark, // 备注
|
|
attrId,
|
|
} = this.addOrEditForm
|
|
const params = {
|
|
devId, // 外层列表id
|
|
attrName, // 监测名称
|
|
updateTime, // 创建时间
|
|
attrVal, //采集值
|
|
dataType, // 采集值类型
|
|
unit, // 采集值单位
|
|
isWarn, // 是否告警
|
|
changeVal, // 变化值
|
|
maxVal, // 最大阈值
|
|
minVal, // 最小阈值
|
|
attrCode, // 设备级联编码
|
|
remark, // 备注
|
|
}
|
|
|
|
// 当修改表单时需要传递列表id
|
|
if (this.dialogType === 2) {
|
|
params.attrId = attrId
|
|
}
|
|
|
|
params.devId = this.detailsId
|
|
console.log(
|
|
`%c🔍 感知设备详情属性${this.dialogType === 1 ? '新增' : '修改'}入参 %c`,
|
|
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
|
'',
|
|
params,
|
|
)
|
|
|
|
const API =
|
|
this.dialogType === 1 ? addEquipmentManageDataInDetailsAPI : editEquipmentManageDataInDetailsAPI
|
|
|
|
const res = await API(params)
|
|
|
|
if (res.code === 200) {
|
|
this.$modal.msgSuccess(this.dialogType === 1 ? '新增成功' : '修改成功')
|
|
this.$refs.tableRef.getTableList()
|
|
}
|
|
this.$refs.addOrEditFormRef.resetFields()
|
|
this.dialogConfig.outerVisible = false
|
|
}
|
|
})
|
|
},
|
|
|
|
// 取消按钮
|
|
onCancel() {
|
|
this.$refs.addOrEditFormRef.resetFields()
|
|
this.dialogConfig.outerVisible = false
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
detailsId: {
|
|
handler(newValue) {
|
|
this.sendParams.devId = newValue
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|