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-13 16:20:48 +08:00
parent 0c9b560ca7
commit b455bf6daf
5 changed files with 1920 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

547
src/views/edgeServer/edgeServerConfigure/device.vue Normal file
View File

@@ -0,0 +1,547 @@
<template>
<el-container>
<el-aside width="15%">
<div class="menu-box">
<el-card class="box-card">
<div slot="header" class="menu-header">
<div class="header-title">设备</div>
<el-dropdown size="small" style="vertical-align: middle;" @command="handleCommand">
<el-button type="primary" round >
<i class="el-icon-s-tools" style="font-size:14px;"></i><i
class="el-icon-arrow-down el-icon--right" style="font-size:14px;"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="add">新加设备</el-dropdown-item>
<el-dropdown-item command="del">删除设备</el-dropdown-item>
<el-dropdown-item>设备重启</el-dropdown-item>
<el-dropdown-item>导入配置</el-dropdown-item>
<el-dropdown-item>导出配置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-menu :style="{ 'borderRight': 'none' }" :defaultActive="deviceActiveStatus"
@select="getDeviceConfigure">
<el-menu-item class="serve-item" shadow="always" v-for="(item, i) in deviceData" :key="i"
:index="i + ''">
<div style="position:relative;">
<div style="display:inline-block;">{{ item.name }}</div>
<div
:class="{ 'device-status': true, 'device-status-online': item.status === 1, 'device-status-offline': item.status === 0 }">
</div>
</div>
</el-menu-item>
</el-menu>
</el-card>
</div>
</el-aside>
<el-main :style="{ padding: '10px' }">
<el-card class="box-card">
<div slot="header" style=" position: relative;">
<div class="header-title">设备配置</div>
<el-button class="header-button" type="primary" @click="setDeviceConfigure">应用</el-button>
</div>
<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"
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">
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
</d2-crud>
</el-card>
</el-main>
</el-container>
</template>
<script>
import { each,assign,omit } 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)
}
}
</script>
<style scoped>
.menu-box {
box-sizing: border-box;
padding: 10px;
vertical-align: middle;
}
.el-dropdown {
vertical-align: top;
}
.el-dropdown+.el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
.menu-header {
position: relative;
}
.header-title {
width: 60%;
display: inline-block;
font-weight: bold;
font-size: 20px;
color: black;
vertical-align: middle;
}
.header-button {
float: right;
vertical-align: middle;
}
.serve-item {
border: none;
margin-bottom: 10px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
overflow: hidden;
outline: 0;
border-radius: 4px;
}
.device-status {
width: 10px;
height: 10px;
border-radius: 50%;
right: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.device-status-online {
background-color: #67c23a;
}
.device-status-offline {
background-color: #ccc;
}
</style>