重构
This commit is contained in:
@ -7,10 +7,12 @@
|
||||
<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-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}" @change="changeType">
|
||||
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList"
|
||||
:key="index+'siteOptions'"></el-option>
|
||||
</el-select>
|
||||
<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%'}">
|
||||
@ -25,12 +27,6 @@
|
||||
:style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作状态" prop="communicationStatus">
|
||||
<el-select v-model="formData.communicationStatus" placeholder="请选择" :style="{width: '100%'}">
|
||||
<el-option :label="value" :value="key" v-for="(value,key) in communicationStatusOptions"
|
||||
:key="key+'communicationStatusOptions'"></el-option>
|
||||
</el-select>
|
||||
</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"
|
||||
@ -46,7 +42,7 @@
|
||||
</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 ? '请先选择站点' : '请选择'"
|
||||
: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>
|
||||
@ -86,50 +82,43 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- pcs配置-->
|
||||
<el-form v-if="isPcs" ref="pcsSettingForm" inline :model="pcsSetting" size="medium"
|
||||
label-width="120px" class="device-form pcs-form" :rules="pcsSettingRules">
|
||||
<div style="font-size: 14px;padding: 10px 0 20px;font-weight: 600;">PCS配置</div>
|
||||
<el-form-item label="开关机地址" prop="pointAddress">
|
||||
<el-input v-model="pcsSetting.pointAddress" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功率地址" prop="powerAddress">
|
||||
<el-input v-model="pcsSetting.powerAddress" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开机指令" prop="startCommand">
|
||||
<el-input v-model="pcsSetting.startCommand" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开机目标功率" prop="startPower">
|
||||
<el-input v-model="pcsSetting.startPower" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="关机指令" prop="stopCommand">
|
||||
<el-input v-model="pcsSetting.stopCommand" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="关机目标功率" prop="stopPower">
|
||||
<el-input v-model="pcsSetting.stopPower" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="倍率" prop="powerMultiplier">
|
||||
<el-input v-model="pcsSetting.powerMultiplier" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电池簇数" prop="clusterNum">
|
||||
<el-input v-model="pcsSetting.clusterNum" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<br>
|
||||
<template v-for="index in parseInt(pcsSetting.clusterNum) || 0">
|
||||
<el-form-item :label="'电池簇'+(index)+'地址'"
|
||||
prop="clusterPointAddress">
|
||||
<el-input v-model="pcsSetting.clusterPointAddress[index-1]" placeholder="请输入" clearable
|
||||
:style="{width: '100%'}">
|
||||
</el-input>
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
@ -141,7 +130,6 @@
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import {getAllSites} from '@/api/ems/zddt'
|
||||
import {validText} from '@/utils/validate'
|
||||
import {addDevice, getDeviceDetailInfo, getParentDeviceId, updateDevice} from "@/api/ems/site";
|
||||
import {getAllDeviceCategory} from '@/api/ems/search'
|
||||
@ -191,7 +179,6 @@ export default {
|
||||
dccDeviceCategoryList: ['CLUSTER', 'BATTERY'],//需要展示上级设备的设备类型
|
||||
dialogTableVisible: false,
|
||||
parentDeviceList: [],//上级设备列表 从接口获取数据
|
||||
siteList: [],//站点列表 从接口获取数据
|
||||
deviceCategoryList: [],//设备类别列表 从接口获取数据
|
||||
formData: {
|
||||
id: '',//设备唯一标识
|
||||
@ -199,7 +186,6 @@ export default {
|
||||
deviceId: '',//设备id
|
||||
deviceName: '',//设备名称
|
||||
description: '',//设备描述
|
||||
communicationStatus: '',//工作状态
|
||||
deviceType: '',//设备类型
|
||||
deviceCategory: '',//设备类别
|
||||
parentId: '',//上级设备id
|
||||
@ -226,7 +212,7 @@ export default {
|
||||
},
|
||||
rules: {
|
||||
siteId: [
|
||||
{required: true, message: '请选择站点', trigger: ['blur', 'change']}
|
||||
{required: true, message: '请先在顶部选择站点', trigger: ['blur', 'change']}
|
||||
],
|
||||
deviceId: [
|
||||
{required: true, message: '请输入设备id', trigger: 'blur'},
|
||||
@ -240,9 +226,6 @@ export default {
|
||||
{required: true, message: '请输入设备描述', trigger: 'blur'},
|
||||
{validator: validateText, trigger: 'blur'}
|
||||
],
|
||||
communicationStatus: [
|
||||
{required: true, message: '请选择工作状态', trigger: ['blur', 'change']}
|
||||
],
|
||||
deviceType: [
|
||||
{required: true, message: '请选择设备类型', trigger: ['blur', 'change']}
|
||||
],
|
||||
@ -312,7 +295,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
|
||||
deviceTypeOptions: state => state?.ems?.deviceTypeOptions || {}
|
||||
}),
|
||||
isPcs() {
|
||||
@ -324,12 +306,22 @@ export default {
|
||||
handler(newVal) {
|
||||
//打开弹窗
|
||||
if (newVal) {
|
||||
this.getZdList()
|
||||
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') {
|
||||
@ -355,20 +347,24 @@ export default {
|
||||
}
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
//获取站点列表
|
||||
getZdList() {
|
||||
this.loading += 1
|
||||
getAllSites().then(response => {
|
||||
this.siteList = response?.data || []
|
||||
}).finally(() => {
|
||||
this.loading -= 1
|
||||
})
|
||||
},
|
||||
// 获取设备类别
|
||||
getDeviceCategoryList() {
|
||||
this.loading += 1
|
||||
@ -381,7 +377,8 @@ export default {
|
||||
//获取上级id列表
|
||||
getParentDeviceList(init = false) {
|
||||
if (!this.formData.siteId) {
|
||||
return console.log('请先选择站点')
|
||||
this.$message.warning('请先在顶部选择站点')
|
||||
return
|
||||
}
|
||||
!init && (this.formData.parentId = '')
|
||||
this.loading = this.loading + 1
|
||||
@ -399,7 +396,6 @@ export default {
|
||||
deviceId = '',//设备id
|
||||
deviceName = '',//设备名称
|
||||
description = '',//设备描述
|
||||
communicationStatus = '',//工作状态
|
||||
deviceType = '',//设备类型
|
||||
deviceCategory = '',//设备类别
|
||||
parentId = '',//上级设备id
|
||||
@ -429,7 +425,6 @@ export default {
|
||||
deviceId,
|
||||
deviceName,
|
||||
description,
|
||||
communicationStatus,
|
||||
deviceType,
|
||||
deviceCategory,
|
||||
parentId,
|
||||
@ -503,7 +498,6 @@ export default {
|
||||
deviceId: '',//设备id
|
||||
deviceName: '',//设备名称
|
||||
description: '',//设备描述
|
||||
communicationStatus: '',//工作状态
|
||||
deviceType: '',//设备类型
|
||||
deviceCategory: '',//设备类别
|
||||
parentId: '',//上级设备id
|
||||
@ -516,6 +510,7 @@ export default {
|
||||
parity: '',//校验位
|
||||
slaveId: '',//从站地址
|
||||
}
|
||||
this.parentDeviceList = []
|
||||
this.pcsSetting = {
|
||||
deviceSettingId: '',
|
||||
powerAddress: '',//功率地址
|
||||
@ -538,24 +533,17 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.form-layout {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-layout.has-pcs {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.base-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-layout.has-pcs .base-form,
|
||||
.form-layout.has-pcs .pcs-form {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.device-form {
|
||||
::v-deep .el-form-item--medium .el-form-item__content {
|
||||
width: 260px;
|
||||
@ -567,7 +555,92 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.form-layout.has-pcs .device-form .el-form-item {
|
||||
width: 100%;
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user