<template>
|
<a-modal :confirmLoading='confirmLoading' :height='600' :maskClosable='false'
|
:okButtonProps='{ props: {disabled: disableSubmit} }' :title='title' :visible='visible'
|
:width='700'
|
cancelText='关闭' class='ant-modal-body' @cancel='handleCancel' @ok='handleOk'>
|
<a-layout id='components-layout-demo-custom-trigger'>
|
<a-layout-sider id='ant-layout-sider' :trigger='null' collapsible>
|
<a-menu :default-selected-keys='defaultSelectedKeys' :selectable='false' mode='inline' theme='light'>
|
<a-menu-item key='1'>
|
<a-icon type='user' />
|
<span>设备基础信息</span>
|
</a-menu-item>
|
<a-menu-item key='2'>
|
<a-icon type='video-camera' />
|
<span>驱动信息</span>
|
</a-menu-item>
|
<a-menu-item key='3'>
|
<a-icon type='upload' />
|
<span>采集设置</span>
|
</a-menu-item>
|
</a-menu>
|
</a-layout-sider>
|
<a-layout>
|
<a-layout-content :style="{ background: '#fff', minHeight: '280px' }">
|
<a-spin :spinning='confirmLoading'>
|
<div>
|
<!-- 设备基础信息-->
|
<a-table v-if='indexStyle===1' :columns='columns' :data-source='equipmentData' :pagination='false'
|
:showHeader='false' bordered>
|
<template slot='value' slot-scope='text, record' class='ant-table'>
|
<span v-if='record.key == 1'>
|
<a-input v-model='record.value' :disabled='disableSubmit' :readOnly='disableSubmit'
|
allow-clear placeholder='请输入设备编号' />
|
</span>
|
<span v-if='record.key == 2'>
|
<a-input v-model='record.value' :disabled='disableSubmit' :readOnly='disableSubmit'
|
allow-clear placeholder='请输入设备名称' />
|
</span>
|
<span v-if='record.key == 3'>
|
<a-input v-model='record.value' :disabled='disableSubmit' :readOnly='disableSubmit'
|
allow-clear placeholder='请输入设备型号' />
|
</span>
|
<span v-if='record.key == 4'>
|
<a-input v-model='record.value' :disabled='disableSubmit' :readOnly='disableSubmit'
|
allow-clear placeholder='请输入设备描述' />
|
</span>
|
<span v-if='record.key == 5'>
|
<a-select v-model='record.value' style='width: 287px' @change='handleSystemType'>
|
<a-select-option v-for='type in record.systemTypeList' :key='type.name'>
|
{{ type.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<!-- <span v-else>-->
|
<!-- <editable-cell :text='text' @change="onCellChange(record.key, 'value', $event)" />-->
|
<!-- </span>-->
|
</template>
|
</a-table>
|
<!-- 驱动信息-->
|
<a-table v-if='indexStyle===2' :columns='columns' :data-source='driveData' :pagination='false'
|
:showHeader='false' bordered>
|
<template slot='value' slot-scope='text, record' class='ant-table'>
|
<!--控制系统-->
|
<span v-if='record.key == 1'>
|
<a-select v-model='record.value' style='width: 287px' @change='handleControl'>
|
<a-select-option v-for='city in record.controlSystemList' :key='city.name'>
|
{{ city.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<!--系统版本-->
|
<span v-else-if='record.key == 2'>
|
<a-select v-model='record.value' style='width: 287px' @change='handleProtocol'>
|
<a-select-option v-for='protocol in record.protocolList' :key='protocol.name'>
|
{{ protocol.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<!--驱动类型-->
|
<span v-else-if='record.key == 3'>
|
<a-select v-model='record.value' style='width: 287px' @change='handleDriveType'>
|
<a-select-option v-for='drive in record.driveTypeList' :key='drive.name'>
|
{{ drive.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<span v-else-if='record.nodeAttributeList != null'>
|
<a-select v-model='record.value' style='width: 287px'>
|
<a-select-option v-for='drive in record.nodeAttributeList' :key='drive.name'>
|
{{ drive.describe }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<span v-else>
|
<a-input v-model='record.value' :disabled='disableSubmit' :readOnly='disableSubmit'
|
allow-clear />
|
<!-- <editable-cell :text='text' @change="onDriveChange(record.key, 'value', $event)" />-->
|
</span>
|
</template>
|
</a-table>
|
<!-- 采集设备-->
|
<a-table v-if='indexStyle===3' :columns='columns' :data-source='collectData' :pagination='false'
|
:showHeader='false' bordered>
|
<template slot='value' slot-scope='text, record' class='ant-table'>
|
<span v-if='record.key == 1'>
|
<a-select v-model='record.value' style='width: 287px'>
|
<a-select-option v-for='drive in record.collectGrade' :key='drive.key'>
|
{{ drive.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<span v-else-if='record.key == 2'>
|
<a-select v-model='record.value' style='width: 287px'>
|
<a-select-option v-for='drive in record.reconnectGrade' :key='drive.key'>
|
{{ drive.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<span v-else-if='record.key == 3'>
|
<a-select v-model='record.value' style='width: 287px'>
|
<a-select-option v-for='drive in record.whetherGrade' :key='drive.key'>
|
{{ drive.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<span v-else-if='record.key == 4'>
|
<a-select v-model='record.value' style='width: 287px'>
|
<a-select-option v-for='type in record.byteOrderList' :key='type.name'>
|
{{ type.name }}
|
</a-select-option>
|
</a-select>
|
</span>
|
<span v-else>
|
<editable-cell :text='text' @change="onCollectChange(record.key, 'value', $event)" />
|
</span>
|
</template>
|
</a-table>
|
</div>
|
</a-spin>
|
</a-layout-content>
|
</a-layout>
|
</a-layout>
|
|
<template v-if='indexStyle===1' slot='footer'>
|
<a-button type='primary' @click='titleClick(2)'>下一步</a-button>
|
</template>
|
<template v-if='indexStyle===2' slot='footer'>
|
<a-button type='primary' @click='titleClick(1)'>上一步</a-button>
|
<a-button type='primary' @click='titleClick(3)'>下一步</a-button>
|
</template>
|
<template v-if='indexStyle===3' slot='footer'>
|
<a-button type='primary' @click='titleClick(2)'>上一步</a-button>
|
<a-button v-if='disableSubmit===false' type='primary' @click='handleOk'>确定</a-button>
|
</template>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { getAction, httpAction } from '@/api/manage'
|
import EditableCell from './EditableCell'
|
|
|
export default {
|
components: {
|
EditableCell
|
},
|
|
name: 'EquipmentModel',
|
props: [
|
'serverId',
|
{ record: String }
|
],
|
data() {
|
return {
|
validatorRules: {
|
password: {
|
rules: [{
|
required: true,
|
message: '请输入密码'
|
}]
|
}
|
},
|
nodeAttributeList: [],
|
defaultSelectedKeys: ['1'],
|
indexStyle: 1,
|
parameterList: [], // 连接信息
|
equipmentData: [
|
{
|
key: '1',
|
name: '设备编号',
|
value: ''
|
},
|
{
|
key: '2',
|
name: '设备名称',
|
value: ''
|
},
|
{
|
key: '3',
|
name: '设备型号',
|
value: ''
|
},
|
{
|
key: '4',
|
name: '设备描述',
|
value: ''
|
},
|
{
|
key: '5',
|
name: '设备类型',
|
value: '',
|
systemTypeList: []
|
}
|
|
],
|
driveData: [
|
{
|
key: '1',
|
name: '控制系统',
|
value: '',
|
controlSystemList: []
|
},
|
{
|
key: '2',
|
name: '系统版本',
|
value: '',
|
protocolList: []
|
},
|
{
|
key: '3',
|
name: '驱动类型',
|
value: '',
|
driveTypeList: []
|
}
|
],
|
collectData: [
|
{
|
key: '1',
|
name: '采集等级',
|
value: '',
|
collectGrade: [
|
{
|
key: '1000',
|
name: '一级(1000)'
|
},
|
{
|
key: '5000',
|
name: '二级(5000)'
|
},
|
{
|
key: '10000',
|
name: '三级(10000)'
|
}
|
]
|
},
|
{
|
key: '2',
|
name: '重连等级',
|
value: '',
|
reconnectGrade: [
|
{
|
key: '10000',
|
name: '一级(10000)'
|
},
|
{
|
key: '50000',
|
name: '二级(50000)'
|
},
|
{
|
key: '100000',
|
name: '三级(100000)'
|
}
|
]
|
},
|
{
|
key: '3',
|
name: '是否采集',
|
value: '',
|
whetherGrade: [
|
{
|
key: 'Y',
|
name: '是'
|
},
|
{
|
key: 'N',
|
name: '否'
|
}
|
]
|
},
|
{
|
key: '4',
|
name: '字节顺序',
|
value: '',
|
byteOrderList: []
|
}
|
],
|
columns: [
|
{
|
title: 'Name',
|
dataIndex: 'name',
|
key: 'name',
|
width: 180
|
},
|
{
|
title: 'Value',
|
dataIndex: 'value',
|
key: 'value',
|
scopedSlots: { customRender: 'value' }
|
}
|
],
|
title: '',
|
visible: false,
|
model: {},
|
confirmLoading: false,
|
form: this.$form.createForm(this),
|
url: {
|
add: '/equipment/add',
|
edit: '/equipment/edit',
|
systemType: '/equipment/querySystemType',
|
controlSystem: '/equipment/queryControlSystem',
|
byteOrder: '/equipment/queryByteOrder'
|
},
|
disableSubmit: false
|
}
|
},
|
|
methods: {
|
// 查询系统列表
|
findSystemType(value) {
|
if (value == null) {
|
value = this.equipmentData[4].value
|
}
|
getAction(this.url.controlSystem, { type: value }).then((res) => {
|
if (res.success) {
|
// 控制系统
|
this.driveData[0].controlSystemList = res.result
|
this.driveData[0].value = res.result[0].name
|
// 系统版本
|
this.driveData[1].protocolList = this.driveData[0].controlSystemList[0].protocolList
|
this.driveData[1].value = this.driveData[1].protocolList[0].name
|
// 驱动类型
|
this.driveData[2].driveTypeList = this.driveData[1].protocolList[0].driveTypeList
|
this.driveData[2].value = this.driveData[2].driveTypeList[0].name
|
// 处理连接信息
|
this.driveData.splice(3, this.driveData.length)
|
this.driveData[2].driveTypeList[0].connectionInfoList[0].parameterList.forEach(c => {
|
if (c.nodeAttributeList == null) {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.default1
|
})
|
} else {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.nodeAttributeList[0].name,
|
nodeAttributeList: c.nodeAttributeList
|
})
|
}
|
})
|
if (this.model.id) {
|
// 驱动信息
|
this.driveData[0].value = this.model.controlSystem // 系统名称
|
this.driveData[1].value = this.model.protocol // 驱动协议
|
this.driveData[2].value = this.model.driveType // 驱动类型
|
// 连接信息处理
|
let arr = this.model.address.split(':')
|
for (let i in arr) {
|
this.driveData[parseInt(i) + 3].value = arr[i]
|
}
|
}
|
}
|
})
|
},
|
// 查询系统列表
|
findSystemTypeEdit(value) {
|
if (value == null) {
|
value = this.equipmentData[4].value
|
}
|
getAction(this.url.controlSystem, { type: value }).then((res) => {
|
if (res.success) {
|
// 控制系统
|
this.driveData[0].controlSystemList = res.result
|
this.driveData[0].value = this.model.controlSystem
|
|
// 系统版本遍历
|
this.driveData[0].controlSystemList.forEach(c => {
|
if (c.name == this.driveData[0].value) {
|
this.driveData[1].protocolList = c.protocolList
|
this.driveData[1].value = this.model.protocol // 驱动协议
|
// 驱动类型遍历
|
this.driveData[1].protocolList.forEach(p => {
|
if (p.name == this.driveData[1].value) {
|
// 驱动类型
|
this.driveData[2].driveTypeList = p.driveTypeList
|
this.driveData[2].value =this.model.driveType // 驱动类型
|
}
|
})
|
}
|
})
|
|
|
// 处理连接信息
|
this.driveData.splice(3, this.driveData.length)
|
this.driveData[2].driveTypeList[0].connectionInfoList[0].parameterList.forEach(c => {
|
if (c.nodeAttributeList == null) {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.default1
|
})
|
} else {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.nodeAttributeList[0].name,
|
nodeAttributeList: c.nodeAttributeList
|
})
|
}
|
})
|
if (this.model.id) {
|
// 驱动信息
|
this.driveData[0].value = this.model.controlSystem // 系统名称
|
this.driveData[1].value = this.model.protocol // 驱动协议
|
this.driveData[2].value = this.model.driveType // 驱动类型
|
// 连接信息处理
|
let arr = this.model.address.split(':')
|
for (let i in arr) {
|
this.driveData[parseInt(i) + 3].value = arr[i]
|
}
|
}
|
}
|
})
|
},
|
// 上一步下一步切换
|
titleClick(key) {
|
if (key == 2) {
|
if (this.equipmentData[0].value === '') {
|
this.$message.warning('请输入设备编号！')
|
return
|
}
|
if (this.equipmentData[1].value === '') {
|
this.$message.warning('请输入设备名称！')
|
return
|
}
|
if (this.equipmentData[2].value === '') {
|
this.$message.warning('请输入设备型号！')
|
return
|
}
|
}
|
this.indexStyle = key
|
this.defaultSelectedKeys.splice(0, 1)
|
this.defaultSelectedKeys.push(key + '')
|
},
|
// 点击设备类型
|
handleSystemType(value) {
|
this.findSystemType(value)
|
},
|
// 点击控制系统
|
handleControl(value) {
|
this.driveData[0].controlSystemList.forEach(control => {
|
if (control.name == value) {
|
// 系统版本
|
this.driveData[1].protocolList = control.protocolList
|
this.driveData[1].value = this.driveData[1].protocolList[0].name
|
// 驱动类型
|
this.driveData[2].driveTypeList = this.driveData[1].protocolList[0].driveTypeList
|
this.driveData[2].value = this.driveData[2].driveTypeList[0].name
|
// 处理连接信息
|
this.driveData.splice(3, this.driveData.length)
|
this.driveData[2].driveTypeList[0].connectionInfoList[0].parameterList.forEach(c => {
|
if (c.nodeAttributeList == null) {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.default1
|
})
|
} else {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.nodeAttributeList[0].name,
|
nodeAttributeList: c.nodeAttributeList
|
})
|
}
|
})
|
}
|
})
|
},
|
// 点击系统版本
|
handleProtocol(value) {
|
this.driveData[1].protocolList.forEach(control => {
|
if (control.name == value) {
|
// 驱动类型
|
this.driveData[2].driveTypeList = control.driveTypeList
|
this.driveData[2].value = this.driveData[2].driveTypeList[0].name
|
// 处理连接信息
|
this.driveData.splice(3, this.driveData.length)
|
this.driveData[2].driveTypeList[0].connectionInfoList[0].parameterList.forEach(c => {
|
if (c.nodeAttributeList == null) {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.default1
|
})
|
} else {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.nodeAttributeList[0].name,
|
nodeAttributeList: c.nodeAttributeList
|
})
|
}
|
})
|
}
|
})
|
},
|
// 点击驱动类型
|
handleDriveType(value) {
|
this.driveData[2].driveTypeList.forEach(control => {
|
if (control.name == value) {
|
// 处理连接信息
|
this.driveData.splice(3, this.driveData.length)
|
control.connectionInfoList[0].parameterList.forEach(c => {
|
if (c.nodeAttributeList == null) {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.default1
|
})
|
} else {
|
this.driveData.push({
|
key: c.name,
|
name: c.describe,
|
value: c.nodeAttributeList[0].name,
|
nodeAttributeList: c.nodeAttributeList
|
})
|
}
|
})
|
}
|
})
|
},
|
// 编辑表格事件
|
onCellChange(key, dataIndex, value) {
|
const equipmentData = [...this.equipmentData]
|
const target = equipmentData.find(item => item.key === key)
|
if (target) {
|
target[dataIndex] = value
|
this.equipmentData = equipmentData
|
}
|
},
|
onDriveChange(key, dataIndex, value) {
|
const driveData = [...this.driveData]
|
const target = driveData.find(item => item.key === key)
|
if (target) {
|
target[dataIndex] = value
|
this.driveData = driveData
|
}
|
},
|
onCollectChange(key, dataIndex, value) {
|
const collectData = [...this.collectData]
|
const target = collectData.find(item => item.key === key)
|
if (target) {
|
target[dataIndex] = value
|
this.collectData = collectData
|
}
|
},
|
add() {
|
this.indexStyle = 1
|
this.defaultSelectedKeys.splice(0, 1)
|
this.defaultSelectedKeys.push(1 + '')
|
// 基础信息
|
this.equipmentData[0].value = '' // 设备编号
|
this.equipmentData[1].value = '' // 设备名称
|
this.equipmentData[2].value = '' // 设备型号
|
this.equipmentData[3].value = '' //设备描述
|
this.edit({})
|
},
|
edit(record) {
|
this.form.resetFields()
|
this.model = Object.assign({}, record)
|
// 查询系统类型
|
getAction(this.url.systemType).then((res) => {
|
if (res.success) {
|
this.equipmentData[4].systemTypeList = res.result[0].typeList
|
if (this.model.id) {
|
this.equipmentData[4].value = this.model.eqptType // 设备类型
|
} else {
|
this.equipmentData[4].value = res.result[0].typeList[0].name
|
}
|
if (this.model.id) {
|
this.findSystemTypeEdit()
|
} else {
|
this.findSystemType()
|
}
|
|
}
|
})
|
// 处理默认数据
|
this.collectData[0].value = this.collectData[0].collectGrade[0].key
|
this.collectData[1].value = this.collectData[1].reconnectGrade[0].key
|
this.collectData[2].value = this.collectData[2].whetherGrade[0].key
|
// 查询字节顺序
|
getAction(this.url.byteOrder).then((res) => {
|
if (res.success) {
|
this.collectData[3].byteOrderList = res.result[0].typeList
|
if (this.model.id) {
|
this.collectData[3].value = this.model.floatPosition // 浮点数字节顺序
|
} else {
|
this.collectData[3].value = res.result[0].typeList[0].name
|
}
|
}
|
})
|
if (this.model.id) {
|
// 基础信息
|
this.equipmentData[0].value = this.model.eqptCode // 设备编号
|
this.equipmentData[1].value = this.model.eqptName // 设备名称
|
this.equipmentData[2].value = this.model.eqptModel // 设备型号
|
this.equipmentData[3].value = this.model.eqptDescribe //设备描述
|
// 采集信息
|
this.collectData[0].value = this.model.collectionCycle // 采集周期
|
this.collectData[1].value = this.model.reconnectCycle // 重连周期
|
this.collectData[2].value = this.model.isCollection // 是否采集
|
|
|
}
|
this.visible = true
|
this.$nextTick(() => {
|
this.form.setFieldsValue(pick(this.model, 'serverAddress', 'serverName', 'serverPort', 'remark'))
|
})
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
// 表单提交
|
handleOk() {
|
const that = this
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true
|
let formData = Object.assign(this.model, values)
|
// 基础信息
|
formData.eqptCode = this.equipmentData[0].value // 设备编号
|
formData.eqptName = this.equipmentData[1].value // 设备名称
|
formData.eqptModel = this.equipmentData[2].value // 设备型号
|
formData.eqptDescribe = this.equipmentData[3].value //设备描述
|
formData.eqptType = this.equipmentData[4].value // 设备类型
|
// 驱动信息
|
formData.controlSystem = this.driveData[0].value // 系统名称
|
formData.protocol = this.driveData[1].value // 驱动协议
|
formData.driveType = this.driveData[2].value // 驱动类型
|
// 采集信息
|
formData.collectionCycle = this.collectData[0].value // 采集周期
|
formData.reconnectCycle = this.collectData[1].value // 重连周期
|
formData.isCollection = this.collectData[2].value // 是否采集
|
formData.floatPosition = this.collectData[3].value // 浮点数字节顺序
|
// 连接信息处理
|
let address = ''
|
this.driveData.forEach(c => {
|
if (c.key != 1 && c.key != 2 && c.key != 3) {
|
// 拼接连接信息
|
address += c.value + ':'
|
}
|
})
|
formData.address = address.slice(0, address.length - 1) // 连接地址
|
this.driveData[1].protocolList.forEach(p => {
|
if (p.name == this.driveData[1].value) {
|
formData.libraryName = p.libraryName // 驱动库名称
|
formData.className = p.class1 // 类名称
|
formData.libraryVersion = p.version //驱动库版本
|
}
|
})
|
// 采集信息
|
let obj
|
if (!this.model.id) {
|
formData.serverId = this.serverId
|
obj = httpAction(this.url.add, formData, 'post')
|
} else {
|
obj = httpAction(this.url.edit, formData, 'put')
|
}
|
obj.then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
this.$emit('ok', res.result)
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
#components-layout-demo-custom-trigger .trigger {
|
font-size: 18px;
|
line-height: 64px;
|
padding: 0 24px;
|
cursor: pointer;
|
/*transition: color 0.3s;*/
|
}
|
|
#components-layout-demo-custom-trigger .trigger:hover {
|
color: #1890ff;
|
}
|
|
#components-layout-demo-custom-trigger .logo {
|
height: 32px;
|
/*background: rgba(255, 255, 255, 0.2);*/
|
/*margin: 16px;*/
|
}
|
|
.ant-modal-body {
|
padding: 0px;
|
font-size: 14px;
|
line-height: 1.5;
|
word-wrap: break-word;
|
}
|
|
.ant-layout-sider {
|
position: relative;
|
min-width: 0;
|
background: rgba(255, 255, 255, 255);
|
transition: all 0.2s;
|
}
|
|
.editable-cell {
|
position: relative;
|
}
|
|
.editable-cell-input-wrapper,
|
.editable-cell-text-wrapper {
|
padding-right: 24px;
|
}
|
|
.editable-cell-text-wrapper {
|
padding: 5px 24px 5px 5px;
|
}
|
|
.editable-cell-icon,
|
.editable-cell-icon-check {
|
position: absolute;
|
right: 0;
|
width: 20px;
|
cursor: pointer;
|
}
|
|
.editable-cell-icon {
|
line-height: 18px;
|
display: none;
|
}
|
|
.editable-cell-icon-check {
|
line-height: 28px;
|
}
|
|
.editable-cell:hover .editable-cell-icon {
|
display: inline-block;
|
}
|
|
.editable-cell-icon:hover,
|
.editable-cell-icon-check:hover {
|
color: #108ee9;
|
}
|
|
.editable-add-btn {
|
margin-bottom: 8px;
|
}
|
|
/deep/ .ant-table-tbody > tr > td {
|
padding: 0px !important;
|
}
|
|
.ant-table {
|
|
line-height: 0.5;
|
}
|
|
</style>
|
