修复设备配置页面测试出现的多个BUG
This commit is contained in:
@@ -45,19 +45,19 @@
|
||||
<device-configure ref="deviceConfigure" :defaultDeviceName="defaultDeviceName" :defaultFormData="defaultFormData" />
|
||||
</el-card>
|
||||
<el-card class="box-card" style="margin-top:5px;">
|
||||
<d2-crud ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="devicePointData"
|
||||
:rowHandle="rowHandle"
|
||||
<d2-crud ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="devicePointData"
|
||||
:rowHandle="rowHandle"
|
||||
add-title="新增"
|
||||
edit-title="绑定"
|
||||
:add-template="addTemplate"
|
||||
:add-rules="addRules"
|
||||
edit-title="绑定"
|
||||
:add-template="addTemplate"
|
||||
:add-rules="addRules"
|
||||
:form-options="formOptions"
|
||||
@row-add="addDevicePoint"
|
||||
@row-edit="devicePointBandingNode"
|
||||
@row-remove="delDevicePoint"
|
||||
@dialog-cancel="handleDialogCancel"
|
||||
@dialog-cancel="handleDialogCancel"
|
||||
@banding="bandingNodeTemplate"
|
||||
@cell-data-change="handleCellDataChange"
|
||||
@form-data-change="handleFormDataChange">
|
||||
@@ -66,415 +66,422 @@
|
||||
</el-card>
|
||||
</el-main>
|
||||
|
||||
|
||||
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { each,assign,omit } from 'lodash'
|
||||
import { each, assign } from 'lodash'
|
||||
export default {
|
||||
props: {
|
||||
server_id: {
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DeviceConfigure: () => import('./deviceConfigure'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: '',
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: '@Name',
|
||||
component: {
|
||||
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '绑定',
|
||||
key: '@Binding',
|
||||
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: '@Address',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: '@RequestType',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '采集周期',
|
||||
key: '@RequestInterval',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '长度',
|
||||
key: '@Length',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: '@Description',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '当前值',
|
||||
key: '@Value',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
minWidth: '200',
|
||||
custom: [
|
||||
{
|
||||
text: '绑定',
|
||||
size: 'mini',
|
||||
emit: 'banding',
|
||||
show(index, row) {
|
||||
if (row.showBindButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '发送',
|
||||
size: 'mini',
|
||||
show(index, row) {
|
||||
if (row.showSendButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '复制',
|
||||
size: 'mini',
|
||||
show(index, row) {
|
||||
if (row.showCopyButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
],
|
||||
remove: {
|
||||
size: 'mini',
|
||||
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
},
|
||||
formOptions: {
|
||||
modal: false,
|
||||
saveLoading: false,
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
addTemplate: {
|
||||
"@Name": {
|
||||
title: '名称'
|
||||
},
|
||||
|
||||
"@Address": {
|
||||
title: '地址'
|
||||
},
|
||||
"@RequestType": {
|
||||
title: '类型'
|
||||
},
|
||||
"@RequestInterval": {
|
||||
title: '采集周期(ms)'
|
||||
},
|
||||
"@Length": {
|
||||
title: '长度'
|
||||
},
|
||||
"@Description": {
|
||||
title: '说明'
|
||||
},
|
||||
"@Value": {
|
||||
title: '当前值'
|
||||
}
|
||||
},
|
||||
addRules: {
|
||||
"@Name": [{ required: true, type: 'string', message: '请输入名称', trigger: 'blur' }],
|
||||
"@Address": [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||||
"@RequestType": [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
|
||||
"@RequestInterval": [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }],
|
||||
"@Length": [{ required: true, message: '请输入长度', trigger: 'blur' }],
|
||||
"@Value": [{ required: true, message: '请输入当前值', trigger: 'blur' }],
|
||||
},
|
||||
serverId: 0,
|
||||
devicePointData: [],
|
||||
nodeCodeData: [],
|
||||
workingSubclasses: [],
|
||||
dialogVisible: false,
|
||||
deviceActiveStatus: '0',
|
||||
defaultDeviceName: '',
|
||||
defaultFormData: {},
|
||||
deviceData: [],
|
||||
deviceConfigure:{}
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
server_id: {
|
||||
handler(val) {
|
||||
this.serverId = val
|
||||
this.getDevice()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addRow() {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
handleFormDataChange({ key }) {
|
||||
if (key === 'working_subclass') {
|
||||
const { working_subclass } = this.$refs.d2Crud.formData
|
||||
this.getCodesByWorkingSubclass(working_subclass)
|
||||
this.$refs.d2Crud.$forceUpdate()
|
||||
}
|
||||
},
|
||||
handleCellDataChange ({ rowIndex, key, value, row }) {
|
||||
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode[rowIndex]
|
||||
this.setDeviceConfigure()
|
||||
},
|
||||
bandingNodeTemplate() {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'edit',
|
||||
template: {
|
||||
working_subclass: {
|
||||
title: '工序编码',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: this.workingSubclasses,
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
node_code: {
|
||||
title: '节点名称',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: this.nodeCodeData,
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDialogCancel(done) {
|
||||
this.$message({
|
||||
message: '用户取消保存',
|
||||
type: 'warning'
|
||||
});
|
||||
done()
|
||||
},
|
||||
handleCommand(command) {
|
||||
switch (command) {
|
||||
case 'add':
|
||||
this.addDevice()
|
||||
break
|
||||
case 'del':
|
||||
this.delDevice()
|
||||
break
|
||||
}
|
||||
},
|
||||
async getCodesByWorkingSubclass(workingSubclass) {
|
||||
try {
|
||||
const nodeCode = await this.$api.QUERY_CODES(workingSubclass)
|
||||
let nodeCodeData = []
|
||||
each(nodeCode, (o) => {
|
||||
nodeCodeData.push({ value: o, label: o })
|
||||
}
|
||||
)
|
||||
this.nodeCodeData = nodeCodeData
|
||||
this.$nextTick(() => {
|
||||
this.$refs.d2Crud.handleFormTemplateMode('node_code').component.options = this.nodeCodeData
|
||||
this.$refs.d2Crud.$forceUpdate()
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
},
|
||||
async getworkingSubclasses() {
|
||||
try {
|
||||
const workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
|
||||
let workingSubclassesData = []
|
||||
each(workingSubclasses, (o) => {
|
||||
workingSubclassesData.push({ value: o, label: o })
|
||||
}
|
||||
)
|
||||
this.workingSubclasses = workingSubclassesData
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async getDevice() {
|
||||
try {
|
||||
this.deviceData = await this.$api.GET_DEVICE(this.serverId)
|
||||
if(this.deviceData.length >0 ){
|
||||
this.getDeviceConfigure(this.deviceActiveStatus)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async getDeviceConfigure(e) {
|
||||
this.deviceActiveStatus = e
|
||||
this.devicePointData =[] //当切换设备时把保存configure、point的数据清空
|
||||
this.defaultDeviceName =[]
|
||||
const deviceData = await this.$api.GET_DEVICE_CONFIGURE(this.deviceData[e].id)
|
||||
if(deviceData[0].conf){
|
||||
let conf = JSON.parse(deviceData[0].conf)
|
||||
if(conf["@Name"] != undefined){
|
||||
this.defaultDeviceName = conf["@Name"]
|
||||
this.defaultFormData = conf
|
||||
}
|
||||
//获取point信息
|
||||
if(conf.RequestNode != undefined && conf.RequestNode.length > 0){
|
||||
this.devicePointData = each(conf.RequestNode, (o,i) => (
|
||||
assign(o, {
|
||||
id:i+1,
|
||||
showBindButton: true,
|
||||
showSendButton: true,
|
||||
showCopyButton: true,
|
||||
showRemoveButton: true
|
||||
})
|
||||
))
|
||||
}
|
||||
}
|
||||
},
|
||||
addDevice() {
|
||||
const that = this
|
||||
this.$prompt('输入设备名称', '新加设备', {
|
||||
confirmButtonText: '确定',
|
||||
inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
|
||||
inputErrorMessage: '请输入设备名称'
|
||||
}).then(({ value }) => {
|
||||
this.$api.ADD_DEVICE({ action: "add_device", name: value, server_id: this.serverId })
|
||||
that.getDevice()
|
||||
this.$message({
|
||||
message: '新加设备成功',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
async delDevice() {
|
||||
try {
|
||||
await this.$api.DEL_DEVICE({ action: "remove_device", id: this.deviceData[this.deviceActiveStatus].id })
|
||||
this.$message({
|
||||
message: '删除设备成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getDevice()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async addDevicePoint(row, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
this.devicePointData.push(row)
|
||||
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
|
||||
await this.setDeviceConfigure()
|
||||
await this.getDevice()
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
},
|
||||
async delDevicePoint({ index, row }, done){
|
||||
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData.splice(index,1)
|
||||
await this.setDeviceConfigure()
|
||||
done()
|
||||
},
|
||||
async getDevicePoint() {
|
||||
const data = {action: 'add_node', server_id: this.serverId, device_id:this.deviceData[this.deviceActiveStatus].id}
|
||||
try {
|
||||
this.devicePointData = await this.$api.GET_DEVICE_POINT(data)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async devicePointBandingNode({ index, row }) {
|
||||
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode[index]['@binding'] = row.node_code
|
||||
this.setDeviceConfigure()
|
||||
},
|
||||
async setDeviceConfigure(){
|
||||
try {
|
||||
let deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522','admin','123456')
|
||||
deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = [this.$refs.deviceConfigure.deviceConfigureModelValue]
|
||||
await this.$api.SET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522','admin','123456',{data: deviceConfigure.Content })
|
||||
const data = {
|
||||
"action": "update_device",
|
||||
"conf": JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),
|
||||
"id": this.deviceData[this.deviceActiveStatus].id
|
||||
}
|
||||
this.$api.SET_DEVICE_CONFIGURE(data)
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
getDeviceStatus(){
|
||||
this.$api.GET_DEVICE_STATUS(this.serverId).then(res=>{
|
||||
each(this.deviceData,(item)=>{
|
||||
if(res.devices[item.id] ){
|
||||
item.status = data.devices[item.id]
|
||||
}
|
||||
})
|
||||
this.$emit('changeStatus',res.server)
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDevice()
|
||||
this.getworkingSubclasses()
|
||||
setInterval(this.getDeviceStatus,2000)
|
||||
props: {
|
||||
server_id: {
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DeviceConfigure: () => import('./deviceConfigure')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: '',
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: '@Name',
|
||||
component: {
|
||||
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '绑定',
|
||||
key: '@Binding'
|
||||
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: '@Address',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: '@RequestType',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '采集周期',
|
||||
key: '@RequestInterval',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '长度',
|
||||
key: '@Length',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: '@Description',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '当前值',
|
||||
key: '@Value',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
minWidth: '200',
|
||||
custom: [
|
||||
{
|
||||
text: '绑定',
|
||||
size: 'mini',
|
||||
emit: 'banding',
|
||||
show (index, row) {
|
||||
if (row.showBindButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '发送',
|
||||
size: 'mini',
|
||||
show (index, row) {
|
||||
if (row.showSendButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '复制',
|
||||
size: 'mini',
|
||||
show (index, row) {
|
||||
if (row.showCopyButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
],
|
||||
remove: {
|
||||
size: 'mini',
|
||||
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
modal: false,
|
||||
saveLoading: false,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
addTemplate: {
|
||||
'@Name': {
|
||||
title: '名称'
|
||||
},
|
||||
|
||||
'@Address': {
|
||||
title: '地址'
|
||||
},
|
||||
'@RequestType': {
|
||||
title: '类型'
|
||||
},
|
||||
'@RequestInterval': {
|
||||
title: '采集周期(ms)'
|
||||
},
|
||||
'@Length': {
|
||||
title: '长度'
|
||||
},
|
||||
'@Description': {
|
||||
title: '说明'
|
||||
},
|
||||
'@Value': {
|
||||
title: '当前值'
|
||||
}
|
||||
},
|
||||
addRules: {
|
||||
'@Name': [{ required: true, type: 'string', message: '请输入名称', trigger: 'blur' }],
|
||||
'@Address': [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||||
'@RequestType': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
|
||||
'@RequestInterval': [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }],
|
||||
'@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }],
|
||||
'@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
|
||||
},
|
||||
serverId: 0,
|
||||
devicePointData: [],
|
||||
nodeCodeData: [],
|
||||
workingSubclasses: [],
|
||||
dialogVisible: false,
|
||||
deviceActiveStatus: '0',
|
||||
defaultDeviceName: '',
|
||||
defaultFormData: {},
|
||||
deviceData: [],
|
||||
deviceConfigure: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
server_id: {
|
||||
handler (val) {
|
||||
this.serverId = val
|
||||
this.getDevice()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addRow () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
handleFormDataChange ({ key }) {
|
||||
if (key === 'workingSubclass') {
|
||||
const { workingSubclass } = this.$refs.d2Crud.formData
|
||||
this.getCodesByWorkingSubclass(workingSubclass)
|
||||
this.$refs.d2Crud.$forceUpdate()
|
||||
}
|
||||
},
|
||||
handleCellDataChange ({ rowIndex, row }) {
|
||||
this.devicePointData[rowIndex] = row
|
||||
this.setDeviceConfigure()
|
||||
},
|
||||
bandingNodeTemplate () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'edit',
|
||||
template: {
|
||||
workingSubclass: {
|
||||
title: '工序编码',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: this.workingSubclasses,
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
nodeCode: {
|
||||
title: '节点名称',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: this.nodeCodeData,
|
||||
span: 12
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '用户取消保存',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
},
|
||||
handleCommand (command) {
|
||||
switch (command) {
|
||||
case 'add':
|
||||
this.addDevice()
|
||||
break
|
||||
case 'del':
|
||||
this.delDevice()
|
||||
break
|
||||
}
|
||||
},
|
||||
async getCodesByWorkingSubclass (workingSubclass) {
|
||||
try {
|
||||
const nodeCode = await this.$api.QUERY_CODES(workingSubclass)
|
||||
const nodeCodeData = []
|
||||
each(nodeCode, (o) => {
|
||||
nodeCodeData.push({ value: o, label: o })
|
||||
}
|
||||
)
|
||||
this.nodeCodeData = nodeCodeData
|
||||
this.$nextTick(() => {
|
||||
this.$refs.d2Crud.handleFormTemplateMode('nodeCode').component.options = this.nodeCodeData
|
||||
this.$refs.d2Crud.$forceUpdate()
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async getworkingSubclasses () {
|
||||
try {
|
||||
const workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
|
||||
const workingSubclassesData = []
|
||||
each(workingSubclasses, (o) => {
|
||||
workingSubclassesData.push({ value: o, label: o })
|
||||
}
|
||||
)
|
||||
this.workingSubclasses = workingSubclassesData
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async getDevice () {
|
||||
try {
|
||||
this.deviceData = await this.$api.GET_DEVICE(this.serverId)
|
||||
if (this.deviceData.length > 0) {
|
||||
this.getDeviceConfigure(this.deviceActiveStatus)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async getDeviceConfigure (e) {
|
||||
this.deviceActiveStatus = e
|
||||
this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空
|
||||
this.defaultDeviceName = ''
|
||||
const deviceData = await this.$api.GET_DEVICE_CONFIGURE(this.deviceData[e].id)
|
||||
if (deviceData[0].conf) {
|
||||
const conf = JSON.parse(deviceData[0].conf)
|
||||
if (conf['@Name'] !== undefined) {
|
||||
this.defaultDeviceName = conf['@Name']
|
||||
this.defaultFormData = conf
|
||||
}
|
||||
// 获取point信息
|
||||
if (conf.RequestNode !== undefined && conf.RequestNode.length > 0) {
|
||||
this.devicePointData = each(conf.RequestNode, (o, i) => (
|
||||
assign(o, {
|
||||
id: i + 1,
|
||||
showBindButton: true,
|
||||
showSendButton: true,
|
||||
showCopyButton: true,
|
||||
showRemoveButton: true
|
||||
})
|
||||
))
|
||||
}
|
||||
}
|
||||
},
|
||||
addDevice () {
|
||||
const that = this
|
||||
this.$prompt('输入设备名称', '新加设备', {
|
||||
confirmButtonText: '确定',
|
||||
inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
|
||||
inputErrorMessage: '请输入设备名称'
|
||||
}).then(({ value }) => {
|
||||
this.$api.ADD_DEVICE({ action: 'add_device', name: value, server_id: this.serverId })
|
||||
that.getDevice()
|
||||
this.$message({
|
||||
message: '新加设备成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
},
|
||||
async delDevice () {
|
||||
try {
|
||||
await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
|
||||
this.$message({
|
||||
message: '删除设备成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getDevice()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async addDevicePoint (row, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
if (!this.$refs.defaultDeviceTypeNameValue) {
|
||||
this.$message({
|
||||
message: '请先应用设备配置',
|
||||
type: 'error'
|
||||
})
|
||||
done(false)
|
||||
} else {
|
||||
this.devicePointData.push(row)
|
||||
await this.setDeviceConfigure()
|
||||
await this.getDevice()
|
||||
done()
|
||||
}
|
||||
this.formOptions.saveLoading = false
|
||||
},
|
||||
async delDevicePoint ({ index, row }, done) {
|
||||
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData.splice(index, 1)
|
||||
await this.setDeviceConfigure()
|
||||
done()
|
||||
},
|
||||
async getDevicePoint () {
|
||||
const data = { action: 'add_node', server_id: this.serverId, device_id: this.deviceData[this.deviceActiveStatus].id }
|
||||
try {
|
||||
this.devicePointData = await this.$api.GET_DEVICE_POINT(data)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async devicePointBandingNode ({ index, row }, done) {
|
||||
this.devicePointData[index]['@Binding'] = row.nodeCode
|
||||
this.setDeviceConfigure()
|
||||
done()
|
||||
},
|
||||
async setDeviceConfigure () {
|
||||
try {
|
||||
const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456')
|
||||
if (this.devicePointData.length > 0) {
|
||||
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
|
||||
}
|
||||
console.log(this.$refs.deviceConfigure.deviceConfigureModelValue)
|
||||
deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = [this.$refs.deviceConfigure.deviceConfigureModelValue]
|
||||
await this.$api.SET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456', { data: deviceConfigure.Content })
|
||||
const data = {
|
||||
action: 'update_device',
|
||||
conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),
|
||||
id: this.deviceData[this.deviceActiveStatus].id
|
||||
}
|
||||
|
||||
this.$api.SET_DEVICE_CONFIGURE(data)
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
getDeviceStatus () {
|
||||
this.$api.GET_DEVICE_STATUS(this.serverId).then(res => {
|
||||
each(this.deviceData, (item) => {
|
||||
if (item.id in res.device_status) {
|
||||
item.status = res.device_status[item.id]
|
||||
}
|
||||
})
|
||||
this.$emit('changeStatus', res.server_status)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDevice()
|
||||
this.getworkingSubclasses()
|
||||
setInterval(this.getDeviceStatus, 2000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -29,7 +29,6 @@
|
||||
</el-date-picker>
|
||||
</template>
|
||||
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -39,83 +38,80 @@
|
||||
import deviceConfigureFormItemData from './deviceSetting/index.json'
|
||||
import { each } from 'lodash'
|
||||
export default {
|
||||
name:'deviceConfigure',
|
||||
props: {
|
||||
loading: {
|
||||
default: false
|
||||
},
|
||||
defaultDeviceName: {
|
||||
default: Object.keys(deviceConfigureFormItemData)[0]
|
||||
},
|
||||
defaultFormData: {
|
||||
default: () => []
|
||||
}
|
||||
|
||||
name: 'deviceConfigure',
|
||||
props: {
|
||||
loading: {
|
||||
default: false
|
||||
},
|
||||
computed: {
|
||||
|
||||
defaultDeviceName: {
|
||||
default: ''
|
||||
},
|
||||
watch: {
|
||||
defaultDeviceName: {
|
||||
handler(val) {
|
||||
if(val){
|
||||
this.defaultDeviceTypeNameValue = val
|
||||
this.deviceChange(val)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
defaultFormData: {
|
||||
handler(val) {
|
||||
this.setDeviceDefaultFormItemValue(val)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceConfigureFormItem: [],
|
||||
defaultDeviceTypeNameValue: '',
|
||||
deviceConfigureModelValue: {},
|
||||
deviceSelectedVlaue: '',
|
||||
deviceTypeData: [
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange(e) {
|
||||
//获取所有字符串的key 用于v-model渲染
|
||||
let deviceConfigureModelValue = {}
|
||||
each(deviceConfigureFormItemData[e], (item) => {
|
||||
|
||||
if (item.type === 'time') {
|
||||
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
|
||||
} else {
|
||||
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ""
|
||||
}
|
||||
})
|
||||
this.deviceConfigureModelValue = deviceConfigureModelValue
|
||||
this. deviceConfigureFormItem = deviceConfigureFormItemData[e]
|
||||
},
|
||||
setDeviceDefaultFormItemValue(val) {
|
||||
let deviceConfigureModelValue = {}
|
||||
each(deviceConfigureFormItemData[this.defaultDeviceTypeNameValue], (item) => {
|
||||
if (item.type === 'time') {
|
||||
deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : new Date()
|
||||
} else {
|
||||
deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : item.defaultValue
|
||||
}
|
||||
}
|
||||
)
|
||||
this.deviceConfigureModelValue = deviceConfigureModelValue
|
||||
},
|
||||
getDeviceType() {
|
||||
this.deviceTypeData = Object.keys(deviceConfigureFormItemData)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDeviceType()
|
||||
defaultFormData: {
|
||||
default: () => []
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
defaultDeviceName: {
|
||||
handler (val) {
|
||||
this.defaultDeviceTypeNameValue = val
|
||||
this.deviceChange(val)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
defaultFormData: {
|
||||
handler (val) {
|
||||
this.setDeviceDefaultFormItemValue(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
deviceConfigureFormItem: [],
|
||||
defaultDeviceTypeNameValue: '',
|
||||
deviceConfigureModelValue: {},
|
||||
deviceSelectedVlaue: '',
|
||||
deviceTypeData: [
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange (e) {
|
||||
// 获取所有字符串的key 用于v-model渲染
|
||||
const deviceConfigureModelValue = {}
|
||||
each(deviceConfigureFormItemData[e], (item) => {
|
||||
if (item.type === 'time') {
|
||||
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
|
||||
} else {
|
||||
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ''
|
||||
}
|
||||
})
|
||||
this.deviceConfigureModelValue = deviceConfigureModelValue
|
||||
this.deviceConfigureFormItem = deviceConfigureFormItemData[e]
|
||||
},
|
||||
setDeviceDefaultFormItemValue (val) {
|
||||
const deviceConfigureModelValue = {}
|
||||
each(deviceConfigureFormItemData[this.defaultDeviceTypeNameValue], (item) => {
|
||||
if (item.type === 'time') {
|
||||
deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : new Date()
|
||||
} else {
|
||||
deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : item.defaultValue
|
||||
}
|
||||
}
|
||||
)
|
||||
this.deviceConfigureModelValue = deviceConfigureModelValue
|
||||
},
|
||||
getDeviceType () {
|
||||
this.deviceTypeData = Object.keys(deviceConfigureFormItemData)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDeviceType()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
@set-device="drawerShow">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
</d2-crud>
|
||||
|
||||
|
||||
<el-drawer
|
||||
size="95%"
|
||||
:append-to-body='true'
|
||||
@@ -26,10 +26,10 @@
|
||||
>
|
||||
<div slot="title" >
|
||||
<span class="title-text">前置服务 {{selectedServerData.name}} IP:{{selectedServerData.url}}</span>
|
||||
|
||||
<el-tag
|
||||
:color="serveStatus[selectedServerData.status].backgroundColor"
|
||||
:style="{color:serveStatus[selectedServerData.status].textColor,borderColor:serveStatus[selectedServerData.status].borderColor}"
|
||||
|
||||
<el-tag
|
||||
:color="serveStatus[selectedServerData.status].backgroundColor"
|
||||
:style="{color:serveStatus[selectedServerData.status].textColor,borderColor:serveStatus[selectedServerData.status].borderColor}"
|
||||
>
|
||||
{{serveStatus[selectedServerData.status].name}}
|
||||
</el-tag>
|
||||
@@ -46,7 +46,7 @@ const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() *
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Device: () => import('./device'),
|
||||
Device: () => import('./device')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -81,26 +81,26 @@ export default {
|
||||
}
|
||||
],
|
||||
isDrawerShow: false,
|
||||
server_id:0,
|
||||
serveStatus:{
|
||||
online:{
|
||||
name:'在线',
|
||||
textColor:'#67c23a',
|
||||
backgroundColor:'#f0f9eb',
|
||||
borderColor:'#e1f3d8'
|
||||
server_id: 0,
|
||||
serveStatus: {
|
||||
online: {
|
||||
name: '在线',
|
||||
textColor: '#67c23a',
|
||||
backgroundColor: '#f0f9eb',
|
||||
borderColor: '#e1f3d8'
|
||||
},
|
||||
offline:{
|
||||
name:'离线',
|
||||
textColor:'#67c23a',
|
||||
backgroundColor:'#f0f9eb',
|
||||
borderColor:'#e1f3d8'
|
||||
offline: {
|
||||
name: '离线',
|
||||
textColor: '#67c23a',
|
||||
backgroundColor: '#f0f9eb',
|
||||
borderColor: '#e1f3d8'
|
||||
}
|
||||
},
|
||||
selectedServerData:{
|
||||
name:'',
|
||||
url:'',
|
||||
port:'',
|
||||
status:'offline'
|
||||
selectedServerData: {
|
||||
name: '',
|
||||
url: '',
|
||||
port: '',
|
||||
status: 'offline'
|
||||
},
|
||||
data: [],
|
||||
serverSettings: {},
|
||||
@@ -133,7 +133,7 @@ export default {
|
||||
{
|
||||
text: '设备配置',
|
||||
size: 'small',
|
||||
emit: 'set-device',
|
||||
emit: 'set-device'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -330,25 +330,23 @@ export default {
|
||||
})
|
||||
done()
|
||||
},
|
||||
drawerShow({row}){
|
||||
drawerShow ({ row }) {
|
||||
this.selectedServerData = {
|
||||
name:row.name,
|
||||
url:row.url,
|
||||
port:row.port,
|
||||
status:row.status ? row.status :'offline'
|
||||
name: row.name,
|
||||
url: row.url,
|
||||
port: row.port,
|
||||
status: row.status ? row.status : 'offline'
|
||||
}
|
||||
this.server_id = row.id
|
||||
this.isDrawerShow = true
|
||||
},
|
||||
changeSelectedServerStatus(status){
|
||||
|
||||
this.selectedServerData.status = status ? status : 'offline'
|
||||
changeSelectedServerStatus (status) {
|
||||
this.selectedServerData.status = status || 'offline'
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.getServers()
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -360,4 +358,4 @@ export default {
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user