wyw/EdgeManager
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

设备配置增加规则验证、组件是否显示&修改设备节点添加、修改

Browse Source
This commit is contained in:
wu
2022-08-18 14:21:08 +08:00
parent aca5946dc2
commit bf18a739ae
3 changed files with 557 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/views/edgeServer/edgeServerConfigure/device.vue
View File

@@ -44,21 +44,10 @@
:defaultFormData="defaultFormData" /> :defaultFormData="defaultFormData" />
</el-card> </el-card>
<el-card class="box-card" style="margin-top:5px;"> <el-card class="box-card" style="margin-top:5px;">
<d2-crud ref="d2Crud" <d2-crud ref="d2Crud" :columns="columns" :data="devicePointData" :rowHandle="rowHandle" add-title="新增"
:columns="columns" edit-title="绑定" :add-template="addTemplate" :add-rules="addRules" :form-options="formOptions"
:data="devicePointData" @row-add="addDevicePoint" @row-edit="devicePointBandingNode" @row-remove="delDevicePoint"
:rowHandle="rowHandle" @dialog-cancel="handleDialogCancel" @banding="bandingNodeTemplate" @cell-data-change="handleCellDataChange"
add-title="新增"
edit-title="绑定"
:add-template="addTemplate"
:add-rules="addRules"
:form-options="formOptions"
@row-add="addDevicePoint"
@row-edit="devicePointBandingNode"
@row-remove="delDevicePoint"
@dialog-cancel="handleDialogCancel"
@banding="bandingNodeTemplate"
@cell-data-change="handleCellDataChange"
@form-data-change="handleFormDataChange"> @form-data-change="handleFormDataChange">
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button> <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
</d2-crud> </d2-crud>
@@ -85,7 +74,7 @@ export default {
components: { components: {
DeviceConfigure: () => import('./deviceConfigure') DeviceConfigure: () => import('./deviceConfigure')
}, },
data () { data() {
return { return {
active: '', active: '',
columns: [ columns: [
@@ -115,10 +104,33 @@ export default {
}, },
{ {
title: '类型', title: '类型',
key: '@RequestType', key: '@DataTypeCode',
component: { component: {
name: 'el-input', name: 'el-select',
size: 'small' size: 'small',
options: [
{
value: 'string',
label: 'string (字符串)'
},
{
value: 'int',
label: 'int (整数)'
},
{
value: 'float',
label: 'float (浮点数)'
},
{
value: 'short',
label: 'short'
},
{
value: 'bool',
label: 'bool (逻辑值)'
}
]
} }
}, },
{ {
@@ -161,7 +173,7 @@ export default {
text: '绑定', text: '绑定',
size: 'mini', size: 'mini',
emit: 'banding', emit: 'banding',
show (index, row) { show(index, row) {
if (row.showBindButton) { if (row.showBindButton) {
return true return true
} }
@@ -171,7 +183,7 @@ export default {
{ {
text: '发送', text: '发送',
size: 'mini', size: 'mini',
show (index, row) { show(index, row) {
if (row.showSendButton) { if (row.showSendButton) {
return true return true
} }
@@ -181,7 +193,7 @@ export default {
{ {
text: '复制', text: '复制',
size: 'mini', size: 'mini',
show (index, row) { show(index, row) {
if (row.showCopyButton) { if (row.showCopyButton) {
return true return true
} }
@@ -193,7 +205,7 @@ export default {
size: 'mini', size: 'mini',
confirm: true, confirm: true,
show (index, row) { show(index, row) {
if (row.showRemoveButton) { if (row.showRemoveButton) {
return true return true
} }
@@ -210,12 +222,45 @@ export default {
'@Name': { '@Name': {
title: '名称' title: '名称'
}, },
'@Address': { '@Address': {
title: '地址' title: '地址'
}, },
'@DisplayName': {
title: '显示名称'
},
'@RequestType': { '@RequestType': {
title: '类型' title: '请求类型'
},
'@DataTypeCode': {
title: '数据类型',
component: {
name: 'el-select',
options: [
{
value: 'string',
label: 'string (字符串)'
},
{
value: 'int',
label: 'int (整数)'
},
{
value: 'float',
label: 'float (浮点数)'
},
{
value: 'short',
label: 'short'
},
{
value: 'bool',
label: 'bool (逻辑值)'
}
],
span: 12
}
}, },
'@RequestInterval': { '@RequestInterval': {
title: '采集周期(ms)' title: '采集周期(ms)'
@@ -232,11 +277,12 @@ export default {
}, },
addRules: { addRules: {
'@Name': [{ required: true, type: 'string', message: '请输入名称', trigger: 'blur' }], '@Name': [{ required: true, type: 'string', message: '请输入名称', trigger: 'blur' }],
'@Address': [{ required: true, message: '请输入地址', trigger: 'blur' }], '@Address': [{ required: true, type: 'string', message: '请输入地址', trigger: 'blur' }],
'@RequestType': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }], '@DisplayName': [{ required: true, type: 'string', message: '请输入显示名称', trigger: 'blur' }],
'@RequestType': [{ required: true, type: 'string', message: '请输入请求类型', trigger: 'blur' }],
'@DataTypeCode': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
'@RequestInterval': [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }], '@RequestInterval': [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }],
'@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }], '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }]
'@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
}, },
serverData: {}, serverData: {},
devicePointData: [], devicePointData: [],
@@ -252,7 +298,7 @@ export default {
}, },
watch: { watch: {
server: { server: {
handler (val) { handler(val) {
this.serverData = val this.serverData = val
this.getDevice() this.getDevice()
}, },
@@ -260,23 +306,23 @@ export default {
} }
}, },
methods: { methods: {
addRow () { addRow() {
this.$refs.d2Crud.showDialog({ this.$refs.d2Crud.showDialog({
mode: 'add' mode: 'add'
}) })
}, },
handleFormDataChange ({ key }) { handleFormDataChange({ key }) {
if (key === 'workingSubclass') { if (key === 'workingSubclass') {
const { workingSubclass } = this.$refs.d2Crud.formData const { workingSubclass } = this.$refs.d2Crud.formData
this.getCodesByWorkingSubclass(workingSubclass) this.getCodesByWorkingSubclass(workingSubclass)
this.$refs.d2Crud.$forceUpdate() this.$refs.d2Crud.$forceUpdate()
} }
}, },
handleCellDataChange ({ rowIndex, row }) { handleCellDataChange({ rowIndex, row }) {
this.devicePointData[rowIndex] = row this.devicePointData[rowIndex] = row
this.setDeviceConfigure() this.setDeviceConfigure()
}, },
bandingNodeTemplate ({ index }) { bandingNodeTemplate({ index }) {
this.$refs.d2Crud.showDialog({ this.$refs.d2Crud.showDialog({
mode: 'edit', mode: 'edit',
rowIndex: index, rowIndex: index,
@@ -303,14 +349,14 @@ export default {
} }
}) })
}, },
handleDialogCancel (done) { handleDialogCancel(done) {
this.$message({ this.$message({
message: '用户取消保存', message: '用户取消保存',
type: 'warning' type: 'warning'
}) })
done() done()
}, },
handleCommand (command) { handleCommand(command) {
switch (command) { switch (command) {
case 'add': case 'add':
this.addDevice() this.addDevice()
@@ -320,7 +366,7 @@ export default {
break break
} }
}, },
async getCodesByWorkingSubclass (workingSubclass) { async getCodesByWorkingSubclass(workingSubclass) {
try { try {
const nodeCode = await this.$api.QUERY_CODES(workingSubclass) const nodeCode = await this.$api.QUERY_CODES(workingSubclass)
const nodeCodeData = [] const nodeCodeData = []
@@ -337,7 +383,7 @@ export default {
console.log(e) console.log(e)
} }
}, },
async getworkingSubclasses () { async getworkingSubclasses() {
try { try {
const workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES() const workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
const workingSubclassesData = [] const workingSubclassesData = []
@@ -350,7 +396,7 @@ export default {
console.log(e) console.log(e)
} }
}, },
async getDevice () { async getDevice() {
try { try {
this.deviceData = await this.$api.GET_DEVICE(this.serverData.id) this.deviceData = await this.$api.GET_DEVICE(this.serverData.id)
if (this.deviceData.length > 0) { if (this.deviceData.length > 0) {
@@ -360,7 +406,7 @@ export default {
console.log(e) console.log(e)
} }
}, },
async getDeviceConfigure (e) { async getDeviceConfigure(e) {
this.deviceActiveStatus = e this.deviceActiveStatus = e
this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空 this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空
this.defaultDeviceName = '' this.defaultDeviceName = ''
@@ -386,7 +432,7 @@ export default {
} }
} }
}, },
addDevice () { addDevice() {
const that = this const that = this
this.$prompt('输入设备名称', '新加设备', { this.$prompt('输入设备名称', '新加设备', {
confirmButtonText: '确定', confirmButtonText: '确定',
@@ -401,10 +447,8 @@ export default {
}) })
}) })
}, },
async delDevice () { async delDevice() {
const url = 'http://8.sctmes.com:20522' let deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456')
// 'http://'+ this.serverData.url +':'+ this.serverData.port
const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode
if (deviceNode !== undefined && isArray(deviceNode)) { if (deviceNode !== undefined && isArray(deviceNode)) {
deviceNode = filter(deviceNode, item => { deviceNode = filter(deviceNode, item => {
@@ -414,8 +458,9 @@ export default {
} else { } else {
unset(deviceConfigure, 'Content.Settings.GroupNode[0].DeviceNode') unset(deviceConfigure, 'Content.Settings.GroupNode[0].DeviceNode')
} }
try { try {
await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content }) await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456', { data: deviceConfigure.Content })
await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id }) await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
this.$message({ this.$message({
message: '删除设备成功', message: '删除设备成功',
@@ -426,7 +471,7 @@ export default {
console.log(e) console.log(e)
} }
}, },
async addDevicePoint (row, done) { async addDevicePoint(row, done) {
this.formOptions.saveLoading = true this.formOptions.saveLoading = true
if (!this.$refs.deviceConfigure.defaultDeviceTypeNameValue) { if (!this.$refs.deviceConfigure.defaultDeviceTypeNameValue) {
this.$message({ this.$message({
@@ -442,12 +487,14 @@ export default {
} }
this.formOptions.saveLoading = false this.formOptions.saveLoading = false
}, },
async delDevicePoint ({ index, row }, done) { async delDevicePoint({ index, row }, done) {
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData.splice(index, 1) this.devicePointData.splice(index, 1)
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
await this.setDeviceConfigure() await this.setDeviceConfigure()
done() done()
}, },
async getDevicePoint () { async getDevicePoint() {
const data = { action: 'add_node', server_id: this.serverData.id, device_id: this.deviceData[this.deviceActiveStatus].id } const data = { action: 'add_node', server_id: this.serverData.id, device_id: this.deviceData[this.deviceActiveStatus].id }
try { try {
this.devicePointData = await this.$api.GET_DEVICE_POINT(data) this.devicePointData = await this.$api.GET_DEVICE_POINT(data)
@@ -455,16 +502,20 @@ export default {
console.log(e) console.log(e)
} }
}, },
async devicePointBandingNode ({ index, row }, done) { async devicePointBandingNode({ index, row }, done) {
this.devicePointData[index]['@Binding'] = row.nodeCode this.devicePointData[index]['@Binding'] = row.nodeCode
this.setDeviceConfigure() this.setDeviceConfigure()
done() done()
}, },
async setDeviceConfigure () { async setDeviceConfigure() {
try { try {
const url = 'http://8.sctmes.com:20522' // 验证表单
// 'http://'+ this.serverData.url +':'+ this.serverData.port this.$refs.deviceConfigure.$refs.form.validate((valid) => {
const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456') if (!valid) {
return false
}
})
const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456')
if (this.devicePointData.length > 0) { if (this.devicePointData.length > 0) {
const devicePointData = this.devicePointData const devicePointData = this.devicePointData
each(devicePointData, (item) => { each(devicePointData, (item) => {
@@ -478,7 +529,6 @@ export default {
this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = devicePointData this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = devicePointData
} }
this.$refs.deviceConfigure.deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name this.$refs.deviceConfigure.deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name
let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode || [] let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode || []
let isExist = false let isExist = false
if (deviceNode !== undefined) { if (deviceNode !== undefined) {
@@ -495,10 +545,9 @@ export default {
if (!isExist) { if (!isExist) {
deviceNode.push(this.$refs.deviceConfigure.deviceConfigureModelValue) deviceNode.push(this.$refs.deviceConfigure.deviceConfigureModelValue)
} }
deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456', { data: deviceConfigure.Content })
this.$refs.deviceConfigure.deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue this.$refs.deviceConfigure.deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue
await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content })
const data = { const data = {
action: 'update_device', action: 'update_device',
conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue), conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),
@@ -513,7 +562,7 @@ export default {
console.log(e) console.log(e)
} }
}, },
getDeviceStatus () { getDeviceStatus() {
this.$api.GET_DEVICE_STATUS(this.serverData.id).then(res => { this.$api.GET_DEVICE_STATUS(this.serverData.id).then(res => {
each(this.deviceData, (item) => { each(this.deviceData, (item) => {
if (item.id in res.device_status) { if (item.id in res.device_status) {
@@ -524,7 +573,7 @@ export default {
}) })
} }
}, },
mounted () { mounted() {
this.getDevice() this.getDevice()
this.getworkingSubclasses() this.getworkingSubclasses()
// setInterval(this.getDeviceStatus, 2000) // setInterval(this.getDeviceStatus, 2000)

24
src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<el-form :inline="true" size="mini" label-position="right" class="demo-form-inline"> <el-form :inline="true" size="mini" :model="deviceConfigureModelValue" ref="form" :rules="rules"
label-position="right" class="demo-form-inline">
<el-form-item label="设备"> <el-form-item label="设备">
<el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择"> <el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
<el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item"> <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
@@ -8,7 +9,8 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName"> <template v-for="(item, i) in deviceConfigureFormItem">
<el-form-item :key="i" :label="item.labelName" :prop="item.key" v-if="!item.isShow">
<template v-if="item.type === 'text'"> <template v-if="item.type === 'text'">
<el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled" <el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
:placeholder="item.placeholder"></el-input> :placeholder="item.placeholder"></el-input>
@@ -23,18 +25,14 @@
</template> </template>
<template v-if="item.type === 'time'"> <template v-if="item.type === 'time'">
<el-date-picker <el-date-picker v-model='deviceConfigureModelValue[item.key]' type="datetime"
v-model='deviceConfigureModelValue[item.key]' :placeholder="item.placeholder" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss'
type="datetime" :disabled="item.disabled" style="width:180px">
:placeholder="item.placeholder"
value-format='yyyy-MM-dd HH:mm:ss'
format='yyyy-MM-dd HH:mm:ss'
:disabled="item.disabled"
style="width:180px">
</el-date-picker> </el-date-picker>
</template> </template>
</el-form-item> </el-form-item>
</template>
</el-form> </el-form>
</div> </div>
</template> </template>
@@ -79,6 +77,7 @@ export default {
deviceConfigureFormItem: [], deviceConfigureFormItem: [],
defaultDeviceTypeNameValue: '', defaultDeviceTypeNameValue: '',
deviceConfigureModelValue: {}, deviceConfigureModelValue: {},
rules: {},
deviceSelectedVlaue: '', deviceSelectedVlaue: '',
deviceTypeData: [ deviceTypeData: [
] ]
@@ -88,13 +87,18 @@ export default {
deviceChange (e) { deviceChange (e) {
// 获取所有字符串的key 用于v-model渲染 // 获取所有字符串的key 用于v-model渲染
const deviceConfigureModelValue = {} const deviceConfigureModelValue = {}
const rules = {}
each(deviceConfigureFormItemData[e], (item) => { each(deviceConfigureFormItemData[e], (item) => {
if (item.type === 'time') { if (item.type === 'time') {
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date() deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
} else { } else {
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : '' deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ''
} }
if (item.rules !== undefined) {
rules[item.key] = item.rules
}
}) })
this.rules = rules
this.deviceConfigureModelValue = deviceConfigureModelValue this.deviceConfigureModelValue = deviceConfigureModelValue
this.deviceConfigureFormItem = deviceConfigureFormItemData[e] this.deviceConfigureFormItem = deviceConfigureFormItemData[e]
}, },

568
src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json
View File

File diff suppressed because it is too large Load Diff