Files
emsfront/src/views/ems/site/sblb/AddDevice.vue
2026-02-15 16:24:29 +08:00

647 lines
22 KiB
Vue

<template>
<el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false"
:show-close="false" destroy-on-close lock-scroll append-to-body width="800px" class="ems-dialog"
:title="mode === 'add'?'新增设备':`编辑设备` ">
<div v-loading="loading>0">
<div class="form-layout" :class="{ 'has-pcs': isPcs }">
<el-form v-loading="loading>0" ref="addTempForm" inline :model="formData" :rules="rules" size="medium"
label-width="120px" class="device-form base-form">
<el-form-item label="站点" prop="siteId">
<el-input
v-model="formData.siteId"
placeholder="请先在顶部选择站点"
disabled
:style="{width: '100%'}"
/>
</el-form-item>
<el-form-item label="设备id" prop="deviceId">
<el-input v-model="formData.deviceId" placeholder="请输入" maxlength="60" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="formData.deviceName" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="设备描述" prop="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable
:style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="formData.deviceType" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions"
:key="key+'deviceTypeOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类别" prop="deviceCategory">
<el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}"
@change="changeType">
<el-option :label="item.name" :value="item.code" v-for="(item,index) in deviceCategoryList"
:key="index+'deviceCategoryList'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="上级设备" prop="parentId" v-if="dccDeviceCategoryList.includes(formData.deviceCategory)">
<el-select v-model="formData.parentId"
:placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先在顶部选择站点' : '请选择'"
:style="{width: '100%'}">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList"
:key="index+'parentDeviceList'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="TCP设备的ip地址" prop="ipAddress" v-if="formData.deviceType === 'TCP'">
<el-input v-model="formData.ipAddress" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="TCP设备的端口号" prop="ipPort" v-if="formData.deviceType === 'TCP'">
<el-input v-model="formData.ipPort" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="从站地址" prop="slaveId" v-if="formData.deviceType === 'TCP'">
<el-input v-model="formData.slaveId" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="串口路径" prop="serialPort">
<el-input v-model="formData.serialPort" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="波特率" prop="baudRate">
<el-input v-model="formData.baudRate" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="数据位" prop="dataBits">
<el-input v-model="formData.dataBits" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="停止位" prop="stopBits">
<el-input v-model="formData.stopBits" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="校验位" prop="parity">
<el-input v-model="formData.parity" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-form>
<!-- pcs配置-->
<el-form v-if="isPcs" ref="pcsSettingForm" :model="pcsSetting" size="medium"
label-position="top" class="pcs-form" :rules="pcsSettingRules">
<div class="pcs-form__title">PCS配置</div>
<div class="pcs-form__grid">
<el-form-item label="开关机地址" prop="pointAddress" class="pcs-form__item">
<el-input v-model="pcsSetting.pointAddress" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="功率地址" prop="powerAddress" class="pcs-form__item">
<el-input v-model="pcsSetting.powerAddress" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="开机指令" prop="startCommand" class="pcs-form__item">
<el-input v-model="pcsSetting.startCommand" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="关机指令" prop="stopCommand" class="pcs-form__item">
<el-input v-model="pcsSetting.stopCommand" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="开机目标功率" prop="startPower" class="pcs-form__item">
<el-input v-model="pcsSetting.startPower" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="关机目标功率" prop="stopPower" class="pcs-form__item">
<el-input v-model="pcsSetting.stopPower" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="倍率" prop="powerMultiplier" class="pcs-form__item">
<el-input v-model="pcsSetting.powerMultiplier" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item label="电池簇数" prop="clusterNum" class="pcs-form__item">
<el-input v-model="pcsSetting.clusterNum" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
</div>
<div v-if="(parseInt(pcsSetting.clusterNum) || 0) > 0" class="pcs-form__cluster">
<div class="pcs-form__cluster-title">电池簇地址</div>
<template v-for="index in parseInt(pcsSetting.clusterNum) || 0">
<el-form-item :key="'clusterAddress' + index" :label="'电池簇' + index + '地址'" prop="clusterPointAddress">
<el-input v-model="pcsSetting.clusterPointAddress[index - 1]" placeholder="请输入" clearable :style="{width: '100%'}" />
</el-form-item>
</template>
</div>
</el-form>
</div>
</div>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveDialog">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState} from "vuex";
import {validText} from '@/utils/validate'
import {addDevice, getDeviceDetailInfo, getParentDeviceId, updateDevice} from "@/api/ems/site";
import {getAllDeviceCategory} from '@/api/ems/search'
export default {
props: {
mode: {
type: String,
default: "add"
},
id: {
type: String | Number,
required: false
}
},
data() {
const validateText = (rule, value, callback) => {
if (value !== '' && !validText(value)) {
callback(new Error('只能输入中文、英文、数字和特殊字符!'));
} else {
callback();
}
}
const validateDeviceId = (rule, value, callback) => {
if (value !== '' && !/^[a-zA-Z0-9]+$/.test(value)) {
callback(new Error('只能输入英文和数字!'));
} else {
callback();
}
}
const validateNumber = (rule, value, callback) => {
if (value !== '' && !/^[0-9]+$/.test(value)) {
callback(new Error('只能输入数字!'));
} else {
callback();
}
}
const validateDecimal = (rule, value, callback) => {
if (value !== '' && !/^(0|[1-9]\d*)(\.\d+)?$/.test(value)) {
callback(new Error('只能输入非负数字!'));
} else {
callback();
}
}
return {
loading: 0,
dccDeviceCategoryList: ['CLUSTER', 'BATTERY'],//需要展示上级设备的设备类型
dialogTableVisible: false,
parentDeviceList: [],//上级设备列表 从接口获取数据
deviceCategoryList: [],//设备类别列表 从接口获取数据
formData: {
id: '',//设备唯一标识
siteId: '',//站点ID
deviceId: '',//设备id
deviceName: '',//设备名称
description: '',//设备描述
deviceType: '',//设备类型
deviceCategory: '',//设备类别
parentId: '',//上级设备id
ipAddress: '',//TCP设备的ip地址
ipPort: "",//TCP端口号
serialPort: '',//串口路径
baudRate: '',//波特率
dataBits: '',//数据位
stopBits: '',//停止位
parity: '',//校验位
slaveId: '',//从站地址
},
pcsSetting: {
deviceSettingId: '',
powerAddress: '',//功率地址
pointAddress: "",//开关机地址
startCommand: "",//开机指令
stopCommand: "",//关机指令
startPower: '',//开机目标功率
stopPower: '',//关机目标功率
powerMultiplier: '',//目标功率倍率
clusterNum: '',//电池簇数
clusterPointAddress: []//电池簇地址
},
rules: {
siteId: [
{required: true, message: '请先在顶部选择站点', trigger: ['blur', 'change']}
],
deviceId: [
{required: true, message: '请输入设备id', trigger: 'blur'},
{validator: validateDeviceId, trigger: 'blur'}
],
deviceName: [
{required: true, message: '请输入设备名称', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
description: [
{required: true, message: '请输入设备描述', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
deviceType: [
{required: true, message: '请选择设备类型', trigger: ['blur', 'change']}
],
deviceCategory: [
{required: true, message: '请选择设备类别', trigger: ['blur', 'change']}
],
ipAddress: [
{validator: validateText, trigger: 'blur'}
],
ipPort: [
{validator: validateText, trigger: 'blur'}
],
slaveId: [
{validator: validateNumber, trigger: 'blur'}
],
serialPort: [
{validator: validateText, trigger: 'blur'}
],
baudRate: [
{validator: validateText, trigger: 'blur'}
],
dataBits: [
{validator: validateText, trigger: 'blur'}
],
stopBits: [
{validator: validateText, trigger: 'blur'}
],
parity: [
{validator: validateText, trigger: 'blur'}
],
},
pcsSettingRules: {
pointAddress: [
{required: true, message: '请输入开关机地址', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
powerAddress: [
{validator: validateText, trigger: 'blur'}
],
startCommand: [
{required: true, message: '请输入开机指令', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
startPower: [
{validator: validateText, trigger: 'blur'}
],
stopCommand: [
{required: true, message: '请输入关机指令', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
stopPower: [
{validator: validateText, trigger: 'blur'}
],
powerMultiplier: [
{validator: validateDecimal, trigger: 'blur'}
],
clusterNum: [
{required: true, message: '请输入电池簇数', trigger: 'blur'},
{validator: validateNumber, trigger: 'blur'}
],
clusterPointAddress: [
{required: true, message: '请输入电池簇地址', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
]
}
}
},
computed: {
...mapState({
deviceTypeOptions: state => state?.ems?.deviceTypeOptions || {}
}),
isPcs() {
return this.formData.deviceCategory === 'PCS'
}
},
watch: {
dialogTableVisible: {
handler(newVal) {
//打开弹窗
if (newVal) {
if (this.mode === 'add') {
this.syncSiteFromRoute(true)
}
this.getDeviceCategoryList()
}
},
immediate: true,
},
'$route.query.siteId': {
handler() {
if (!this.dialogTableVisible || this.mode !== 'add') {
return
}
this.syncSiteFromRoute(true)
}
},
id: {
handler(newVal) {
if ((newVal || newVal === 0) && this.mode !== 'add') {
this.loading += 1
getDeviceDetailInfo(newVal).then(response => {
const {pcsSetting, ...data} = JSON.parse(JSON.stringify(response?.data || {}))
this.formData = data;
if (pcsSetting && JSON.stringify(pcsSetting) !== '{}') {
this.pcsSetting = JSON.parse(JSON.stringify({
...pcsSetting,
clusterPointAddress: JSON.parse(pcsSetting.clusterPointAddress || [])
}));
}
if (this.dccDeviceCategoryList.includes(this.formData.deviceCategory)) {
this.getParentDeviceList(true)
}
}).finally(() => {
this.loading -= 1
})
}
},
immediate: true,
}
},
methods: {
syncSiteFromRoute(force = false) {
const routeSiteId = this.$route?.query?.siteId
const normalizedSiteId = routeSiteId === undefined || routeSiteId === null ? '' : String(routeSiteId).trim()
if (!normalizedSiteId) {
if (force) {
this.formData.siteId = ''
}
return
}
if (force || !this.formData.siteId) {
this.formData.siteId = normalizedSiteId
}
},
changeType() {
if (this.dccDeviceCategoryList.includes(this.formData.deviceCategory)) {
this.getParentDeviceList()
}
},
// 获取设备类别
getDeviceCategoryList() {
this.loading += 1
getAllDeviceCategory().then(response => {
this.deviceCategoryList = response?.data || []
}).finally(() => {
this.loading -= 1
})
},
//获取上级id列表
getParentDeviceList(init = false) {
if (!this.formData.siteId) {
this.$message.warning('请先在顶部选择站点')
return
}
!init && (this.formData.parentId = '')
this.loading = this.loading + 1
getParentDeviceId({siteId: this.formData.siteId, deviceCategory: this.formData.deviceCategory}).then(response => {
this.parentDeviceList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {
this.loading = this.loading - 1
})
},
saveData() {
this.loading += 1
const {
id = '',
siteId = '',//站点ID
deviceId = '',//设备id
deviceName = '',//设备名称
description = '',//设备描述
deviceType = '',//设备类型
deviceCategory = '',//设备类别
parentId = '',//上级设备id
ipAddress = '',//TCP设备的ip地址
ipPort = "",//TCP端口号
serialPort = '',//串口路径
baudRate = '',//波特率
dataBits = '',//数据位
stopBits = '',//停止位
parity = '',//校验位
slaveId = '',//从站地址
} = this.formData;
const {
deviceSettingId,
powerAddress,
pointAddress,
startCommand,
stopCommand,
startPower,
stopPower,
powerMultiplier,
clusterNum,
clusterPointAddress
} = this.pcsSetting
let params = {
siteId,
deviceId,
deviceName,
description,
deviceType,
deviceCategory,
parentId,
ipAddress,
ipPort,
serialPort,
baudRate,
dataBits,
stopBits,
parity,
slaveId,
}
if (this.isPcs) {
params.pcsSetting = {
powerAddress,
pointAddress,
startCommand,
stopCommand,
startPower,
stopPower,
powerMultiplier,
clusterNum,
clusterPointAddress: JSON.stringify(!clusterNum ? [] : (clusterPointAddress || []).slice(0, clusterNum))
}
}
if (this.mode === 'add') {
addDevice(params).then(response => {
if (response.code === 200) {
//新增成功
// 关闭弹窗 更新表格
this.$emit('update')
this.closeDialog()
}
}).finally(() => {
this.loading -= 1
})
} else {
params.id = id
params.pcsSetting && (params.pcsSetting.deviceSettingId = deviceSettingId)
updateDevice(params).then(response => {
if (response.code === 200) {
//新增成功
// 关闭弹窗 更新表格
this.$emit('update')
this.closeDialog()
}
}).finally(() => {
this.loading -= 1
})
}
},
saveDialog() {
this.$refs.addTempForm.validate(valid => {
if (!valid) return
if (this.isPcs) {
this.$refs.pcsSettingForm.validate(pcsValidate => {
if (!pcsValidate) return
this.saveData()
})
} else {
this.saveData()
}
})
},
closeDialog() {
this.$emit('clear')
// 清空所有数据
this.formData = {
id: '',//设备唯一标识
siteId: '',//站点ID
deviceId: '',//设备id
deviceName: '',//设备名称
description: '',//设备描述
deviceType: '',//设备类型
deviceCategory: '',//设备类别
parentId: '',//上级设备id
ipAddress: '',//TCP设备的ip地址
ipPort: "",//TCP端口号
serialPort: '',//串口路径
baudRate: '',//波特率
dataBits: '',//数据位
stopBits: '',//停止位
parity: '',//校验位
slaveId: '',//从站地址
}
this.parentDeviceList = []
this.pcsSetting = {
deviceSettingId: '',
powerAddress: '',//功率地址
pointAddress: "",//开关机地址
startCommand: "",//开机指令
stopCommand: "",//关机指令
startPower: '',//开机目标功率
stopPower: '',//关机目标功率
powerMultiplier: '',//目标功率倍率
clusterNum: '',//电池簇数
clusterPointAddress: []//电池簇地址
}
this.$refs.addTempForm.resetFields()
this.$refs?.pcsSettingForm?.resetFields()
this.dialogTableVisible = false
}
}
}
</script>
<style scoped lang="scss">
.form-layout {
position: relative;
}
.form-layout.has-pcs {
overflow: visible;
}
.base-form {
width: 100%;
}
.device-form {
::v-deep .el-form-item--medium .el-form-item__content {
width: 260px;
}
.el-form-item {
width: 50%;
margin-right: 0;
}
}
.pcs-form {
position: absolute;
top: 0;
right: -360px;
width: 340px;
max-height: 520px;
overflow-y: auto;
padding: 14px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
box-shadow: none;
z-index: 2;
}
.pcs-form__title {
margin-bottom: 12px;
padding-bottom: 10px;
font-size: 14px;
font-weight: 600;
color: #303133;
border-bottom: 1px solid #ebeef5;
}
.pcs-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 10px;
}
.pcs-form__item {
margin-bottom: 0;
}
.pcs-form__cluster {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ebeef5;
}
.pcs-form__cluster-title {
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #606266;
}
.pcs-form {
::v-deep .el-form-item {
width: 100%;
margin-right: 0;
margin-bottom: 18px;
}
::v-deep .el-form-item__label {
line-height: 20px;
padding-bottom: 4px;
font-size: 14px;
color: #606266;
}
::v-deep .el-form-item__content {
width: 100%;
line-height: normal;
}
::v-deep .el-input__inner {
height: 34px;
line-height: 34px;
}
::v-deep .el-form-item__error {
position: static;
line-height: 1.2;
padding-top: 4px;
}
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
margin-right: 3px;
}
}
.ems-dialog {
::v-deep .el-dialog,
::v-deep .el-dialog__body {
overflow: visible;
}
}
</style>