<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
v-dialogDrag
:visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="110px"
style="margin-top: -0.275rem;background-color: #fff;border: 0px solid #DCDFE6;">
<el-form-item label="电池编号" prop="hwid">
<el-input :disabled="true" v-model="dataForm.hwid" placeholder="电池编号"></el-input>
</el-form-item>
<el-form-item label="电芯类型" prop="batteryCellId">
<!-- <el-input v-model="dataForm.batteryCellId" placeholder="电芯类型id"></el-input> -->
<el-select v-model="dataForm.batteryCellId" placeholder="选择电芯类型">
<el-option
v-for="item in batteryCellIds"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电池类型" prop="batteryKind">
<el-select v-model="dataForm.batteryKind" placeholder="选择电池类型">
<el-option
v-for="item in batteryKinds"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电芯封装" prop="batteryCellPackageId">
<!-- <el-input v-model="dataForm.batteryCellPackageId" placeholder="电芯封装id"></el-input> -->
<el-select v-model="dataForm.batteryCellPackageId" placeholder="选择电芯封装">
<el-option
v-for="item in batteryCellPackageIds"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电池串数" prop="batteryBunchs">
<el-input v-model="dataForm.batteryBunchs" placeholder="电池串数"></el-input>
</el-form-item>
<el-form-item label="电池并数" prop="batteryUnions">
<el-input v-model="dataForm.batteryUnions" placeholder="电池并数"></el-input>
</el-form-item>
<el-form-item label="单体电压(V)" prop="singleBatteryVoltage">
<el-input v-model="dataForm.singleBatteryVoltage" placeholder="单体电压"></el-input>
</el-form-item>
<el-form-item label="额定总压(V)" prop="ratedTotalPressure">
<el-input v-model="dataForm.ratedTotalPressure" placeholder="额定总压"></el-input>
</el-form-item>
<el-form-item label="额定电流(A)" prop="ratedCurrent">
<el-input v-model="dataForm.ratedCurrent" placeholder="额定电流"></el-input>
</el-form-item>
<el-form-item label="额定容量(Ah)" prop="ratedCapacity">
<el-input v-model="dataForm.ratedCapacity" placeholder="额定容量"></el-input>
</el-form-item>
<el-form-item label="额定能量(kWh)" prop="ratedEnergy">
<el-input v-model="dataForm.ratedEnergy" placeholder="额定能量"></el-input>
</el-form-item>
<el-form-item label="电池箱数" prop="batteryQuantity">
<el-input v-model="dataForm.batteryQuantity" placeholder="电池箱数"></el-input>
</el-form-item>
<el-form-item label="电池厂商" prop="batteryFirm">
<el-input v-model="dataForm.batteryFirm" placeholder="电池厂商"></el-input>
</el-form-item>
<el-form-item label="激活日期" prop="activationDate">
<!-- <el-input v-model="dataForm.activationDate" placeholder="激活日期"></el-input> -->
<el-date-picker
v-model="dataForm.activationDate"
type="date"
:disabled="true"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="BMS编号" prop="bmsNum">
<el-input v-model="dataForm.bmsNum" placeholder="BMS编号"></el-input>
</el-form-item>
<el-form-item label="电芯编码" prop="batteryCellNum">
<el-input v-model="dataForm.batteryCellNum" placeholder="电芯编码"></el-input>
</el-form-item>
<el-form-item label="标称容量(Ah)" prop="nominalCapacity">
<el-input v-model="dataForm.nominalCapacity" placeholder="标称容量"></el-input>
</el-form-item>
<el-form-item label="系统状态" prop="sysStatus">
<!-- <el-input v-model="dataForm.sysStatus" placeholder="系统状态:1 充电,2 放电,3 搁置,4空载"></el-input> -->
<el-select v-model="dataForm.sysStatus" placeholder="系统状态">
<el-option
v-for="item in sysStatuses"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="警报状态" prop="alarmStatus">
<!-- <el-input v-model="dataForm.alarmStatus" placeholder="警报状态:0:正常,1:报警"></el-input> -->
<el-select v-model="dataForm.alarmStatus" placeholder="报警状态">
<el-option
v-for="item in alarmStatuses"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属项目" prop="projectId">
<!-- <el-input v-model="dataForm.projectId" placeholder="所属项目"></el-input> -->
<el-select v-model="dataForm.projectId" placeholder="所属项目">
<el-option
v-for="item in projectIds"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="城市" prop="cityId" style="display: flex;flex-direction: row;">
<!-- <el-input v-model="dataForm.cityId" placeholder=""></el-input> -->
<div style="margin-left: -110px;">
<el-select v-model="dataForm.proviceId" placeholder="省份" @change="handleChange">
<el-option
v-for="item in provices"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
<el-select v-model="dataForm.cityId" placeholder="城市" @change="handleChange2">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
<el-select v-model="dataForm.districtId" placeholder="区县">
<el-option
v-for="item in districts"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="软件版本" prop="softVersion">
<el-input v-model="dataForm.softVersion" placeholder="软件版本"></el-input>
</el-form-item>
<el-form-item label="硬件版本" prop="hardwareVersion">
<el-input v-model="dataForm.hardwareVersion" placeholder="硬件版本"></el-input>
</el-form-item>
<el-form-item label="动力类型" prop="powerTypeId">
<!-- <el-input v-model="dataForm.powerTypeId" placeholder="动力类型"></el-input> -->
<el-select v-model="dataForm.powerTypeId" placeholder="选择动力类型">
<el-option
v-for="item in powerTypeIds"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="二维码" prop="qrCode">
<el-input v-model="dataForm.qrCode" placeholder="二维码"></el-input>
</el-form-item>
<el-form-item label="SCID" prop="scid">
<el-input v-model="dataForm.scid" placeholder="SCID"></el-input>
</el-form-item>
<el-form-item label="PLMN" prop="plmn">
<el-input v-model="dataForm.plmn" placeholder="PLMN"></el-input>
</el-form-item>
<el-form-item label="LAC" prop="lac">
<el-input v-model="dataForm.lac" placeholder="LAC"></el-input>
</el-form-item>
<el-form-item label="CID" prop="cid">
<el-input v-model="dataForm.cid" placeholder="CID"></el-input>
</el-form-item>
<el-form-item label="IMEI" prop="imei">
<el-input v-model="dataForm.imei" placeholder="IMEI"></el-input>
</el-form-item>
<el-form-item label="ICCID" prop="iccid">
<el-input v-model="dataForm.iccid" placeholder="ICCID"></el-input>
</el-form-item>
<el-form-item label="CCID" prop="ccid">
<el-input v-model="dataForm.ccid" placeholder="CCID"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataForm: {
id: 0,
hwid: '',
batteryCellId: [],
batteryKind: [],
batteryCellPackageId: [],
batteryBunchs: '',
batteryUnions: '',
singleBatteryVoltage: '',
ratedTotalPressure: '',
ratedCurrent: '',
ratedCapacity: '',
ratedEnergy: '',
batteryQuantity: '',
batteryFirm: '',
activationDate: '',
bmsNum: '',
batteryCellNum: '',
batteryChassisNum: '',
nominalCapacity: '',
sysStatus: '',
alarmStatus: '',
projectId: '',
cityId: '',
softVersion: '',
hardwareVersion: '',
powerTypeId: '',
qrCode: '',
scid: '',
plmn: '',
lac: '',
cid: '',
imei: '',
iccid: '',
ccid: '',
// sysStatus: [],
// cityId: [],
districtId:[],
proviceId:[],
// tempproviceId: '',
// softVersion: '',
// alarmStatus: [],
// projectId: [],
// powerTypeId: []
},
dataRule: {
hwid: [
{ required: true, message: '电池编号不能为空', trigger: 'blur' }
],
batteryCellId: [
{ required: true, message: '电芯类型id不能为空', trigger: 'blur' }
],
batteryKind: [
{ required: true, message: '电池类型id不能为空', trigger: 'blur' }
],
batteryCellPackageId: [
{ required: true, message: '电芯封装id不能为空', trigger: 'blur' }
],
batteryBunchs: [
{ required: true, message: '电池串数不能为空', trigger: 'blur' }
],
batteryUnions: [
{ required: true, message: '电池并数不能为空', trigger: 'blur' }
],
singleBatteryVoltage: [
{ required: true, message: '单体电压不能为空', trigger: 'blur' }
],
ratedTotalPressure: [
{ required: true, message: '额定总压不能为空', trigger: 'blur' }
],
ratedCurrent: [
{ required: true, message: '额定电流不能为空', trigger: 'blur' }
],
ratedCapacity: [
{ required: true, message: '额定容量不能为空', trigger: 'blur' }
],
ratedEnergy: [
{ required: true, message: '额定能量不能为空', trigger: 'blur' }
],
batteryQuantity: [
{ required: true, message: '电池箱数不能为空', trigger: 'blur' }
],
batteryFirm: [
{ required: true, message: '电池厂商不能为空', trigger: 'blur' }
],
activationDate: [
{ required: true, message: '激活日期不能为空', trigger: 'blur' }
],
bmsNum: [
{ required: true, message: 'BMS编号不能为空', trigger: 'blur' }
],
batteryCellNum: [
{ required: true, message: '电芯编码不能为空', trigger: 'blur' }
],
// batteryChassisNum: [
// { required: true, message: '底盘编号不能为空', trigger: 'blur' }
// ],
nominalCapacity: [
{ required: true, message: '标称容量不能为空', trigger: 'blur' }
],
capacity: [
{ required: true, message: '容量不能为空', trigger: 'blur' }
],
// createTime: [
// { required: true, message: '不能为空', trigger: 'blur' }
// ],
// updateTime: [
// { required: true, message: '更新时间不能为空', trigger: 'blur' }
// ]
sysStatus: [
{ required: true, message: '系统状态不能为空', trigger: 'blur' }
],
// alarmStatus: [
// { required: true, message: '警报状态不能为空', trigger: 'blur' }
// ],
// projectId: [
// { required: true, message: '所属项目不能为空', trigger: 'blur' }
// ],
// cityId: [
// { required: true, message: '城市不能为空', trigger: 'blur' }
// ],
softVersion: [
{ required: true, message: '软件版本不能为空', trigger: 'blur' }
],
// hardwareVersion: [
// { required: true, message: '硬件版本不能为空', trigger: 'blur' }
// ],
powerTypeId: [
{ required: true, message: '动力类型不能为空', trigger: 'blur' }
],
// qrCode: [
// { required: true, message: '二维码不能为空', trigger: 'blur' }
// ],
// scid: [
// { required: true, message: 'scid不能为空', trigger: 'blur' }
// ],
// plmn: [
// { required: true, message: 'plmn不能为空', trigger: 'blur' }
// ],
// lac: [
// { required: true, message: 'lac不能为空', trigger: 'blur' }
// ],
// cid: [
// { required: true, message: 'cid不能为空', trigger: 'blur' }
// ],
// imei: [
// { required: true, message: 'imei不能为空', trigger: 'blur' }
// ],
// iccid: [
// { required: true, message: 'iccid不能为空', trigger: 'blur' }
// ],
// ccid: [
// { required: true, message: 'ccid不能为空', trigger: 'blur' }
// ]
},
batteryCellIds: [],
batteryKinds:[{
value: 0,
label: '运营'
},{
value: 1,
label: '售后'
},{
value: 2,
label: '内测'
},{
value: 3,
label: '报废'
}],
batteryCellPackageIds: [],
provices: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶',
disabled: true
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value:'',
cities: [],
districts: [],
sysStatuses: [],
powerTypeIds: [],
projectIds:[],
customIds:[],
alarmStatuses:[]
}
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/battery/bmsbatteryinfo/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.provices = data.data.provices
this.cities = data.data.cities
this.districts = data.data.districts
this.sysStatuses = data.data.sysStatuses
this.powerTypeIds = data.data.powers
this.alarmStatuses = data.data.alarmStatuses
this.projectIds = data.data.projectIds
this.batteryCellIds = data.data.batteryCellIds
this.batteryCellPackageIds = data.data.batteryCellPackageIds
const socitem = data.data.bmsBatteryInfo
// this.dataForm.batteryNum = data.bmsBatteryInfo.batteryNum
this.dataForm.hwid = socitem.hwid
this.dataForm.batteryCellId = socitem.batteryCellId
this.dataForm.batteryKind = socitem.batteryKind
this.dataForm.batteryCellPackageId = socitem.batteryCellPackageId
this.dataForm.batteryBunchs = socitem.batteryBunchs
this.dataForm.batteryUnions = socitem.batteryUnions
this.dataForm.singleBatteryVoltage = socitem.singleBatteryVoltage
this.dataForm.ratedTotalPressure = socitem.ratedTotalPressure
this.dataForm.ratedCurrent = socitem.ratedCurrent
this.dataForm.ratedCapacity = socitem.ratedCapacity
this.dataForm.ratedEnergy = socitem.ratedEnergy
this.dataForm.batteryQuantity = socitem.batteryQuantity
this.dataForm.batteryFirm = socitem.batteryFirm
this.dataForm.activationDate = socitem.activationDate
this.dataForm.bmsNum = socitem.bmsNum
this.dataForm.batteryCellNum = socitem.batteryCellNum
// this.dataForm.batteryChassisNum = socitem.batteryChassisNum
this.dataForm.nominalCapacity = socitem.nominalCapacity
// this.dataForm.capacity = socitem.capacity
this.dataForm.sysStatus = socitem.sysStatus
this.dataForm.alarmStatus = socitem.alarmStatus
this.dataForm.projectId = socitem.projectId
this.dataForm.cityId = socitem.cityId
this.dataForm.districtId = socitem.districtId
this.dataForm.proviceId = socitem.proviceId
this.dataForm.softVersion = socitem.softVersion
this.dataForm.hardwareVersion = socitem.hardwareVersion
this.dataForm.powerTypeId = socitem.powerTypeId
this.dataForm.qrCode = socitem.qrCode
this.dataForm.scid = socitem.scid
this.dataForm.plmn = socitem.plmn
this.dataForm.lac = socitem.lac
this.dataForm.cid = socitem.cid
this.dataForm.imei = socitem.imei
this.dataForm.iccid = socitem.iccid
this.dataForm.ccid = socitem.ccid
this.dataForm.createTime = socitem.createTime
this.dataForm.updateTime = socitem.updateTime
}
})
}else{
this.$http({
url: this.$http.adornUrl(`/battery/bmsbatteryinfo/getmenus`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.provices = data.data.provices
// this.cities = data.data.cities
// this.districts = data.data.districts
this.sysStatuses = data.data.sysStatuses
this.powerTypeIds = data.data.powers
this.alarmStatuses = data.data.alarmStatuses
this.projectIds = data.data.projectIds
this.batteryCellIds = data.data.batteryCellIds
this.batteryCellPackageIds = data.data.batteryCellPackageIds
}
})
}
})
},
mouseblur() {
// alert("鼠标失去焦点,检查HWID是否重复");
},
handleChange(value) {
// alert("鼠标"+value);
this.dataForm.cityId = ''
this.dataForm.districtId = ''
this.getCities(value, 2)
},
handleChange2(value) {
// alert("鼠标===="+value);
this.dataForm.districtId = ''
this.getCities(value, 3)
},
getCities(pid, level) {
this.$http({
url: this.$http.adornUrl('/battery/bmsdistrictarea/getCitiesByPid'),
method: 'get',
params: this.$http.adornParams({
'level': level,
'pid': pid
})
}).then(({data}) => {
if (data && data.code === 0) {
if(level==1){
this.provices = data.data
}
if(level==2){
this.cities = data.data
}
if(level==3){
this.districts = data.data
}
} else {
this.provices = []
this.cities = []
this.districts = []
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/battery/bmsbatteryinfo/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'hwid': this.dataForm.hwid,
'batteryCellId': this.dataForm.batteryCellId,
'batteryKind': this.dataForm.batteryKind,
'batteryCellPackageId': this.dataForm.batteryCellPackageId,
'batteryBunchs': this.dataForm.batteryBunchs,
'batteryUnions': this.dataForm.batteryUnions,
'singleBatteryVoltage': this.dataForm.singleBatteryVoltage,
'ratedTotalPressure': this.dataForm.ratedTotalPressure,
'ratedCurrent': this.dataForm.ratedCurrent,
'ratedCapacity': this.dataForm.ratedCapacity,
'ratedEnergy': this.dataForm.ratedEnergy,
'batteryQuantity': this.dataForm.batteryQuantity,
'batteryFirm': this.dataForm.batteryFirm,
// 'activationDate': this.dataForm.activationDate,
'activateDateFormat': this.dataForm.activationDate,
'bmsNum': this.dataForm.bmsNum,
'batteryCellNum': this.dataForm.batteryCellNum,
// 'batteryChassisNum': this.dataForm.batteryChassisNum,
'nominalCapacity': this.dataForm.nominalCapacity,
// 'capacity': this.dataForm.capacity,
'sysStatus': this.dataForm.sysStatus,
'alarmStatus': this.dataForm.alarmStatus,
'projectId': this.dataForm.projectId,
'cityId': this.dataForm.cityId,
'districtId': this.dataForm.districtId,
'proviceId': this.dataForm.proviceId,
'softVersion': this.dataForm.softVersion,
'hardwareVersion': this.dataForm.hardwareVersion,
'powerTypeId': this.dataForm.powerTypeId,
'qrCode': this.dataForm.qrCode,
'scid': this.dataForm.scid,
'plmn': this.dataForm.plmn,
'lac': this.dataForm.lac,
'cid': this.dataForm.cid,
'imei': this.dataForm.imei,
'iccid': this.dataForm.iccid,
'ccid': this.dataForm.ccid,
'createTime': this.dataForm.createTime,
'updateTime': this.dataForm.updateTime
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>
优化此页面结构和ui,横向分模块展示