<template>
|
<j-modal
|
:switchFullscreen='false'
|
:confirm-loading='confirmLoading1'
|
:visible='visible1'
|
:width='1050'
|
title='实时数据'
|
@cancel='handleCancel'
|
@ok='handleCancel'
|
:fullscreen='true'
|
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
|
cancelText='关闭'
|
>
|
<a-layout>
|
<a-layout-sider style='background: #fff' width='250'>
|
<a-tree :expandedKeys.sync='expandedKeys' :tree-data='treeData' default-expand-all
|
show-icon @select='onSelect'>
|
<template #title='{ key: treeKey, title }'>
|
<a-dropdown :trigger="['contextmenu']">
|
<span>{{ title }}</span>
|
<template #overlay>
|
<a-menu @click='({ key: menuKey }) => addProjectModal(treeKey, menuKey)'>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</template>
|
<a-icon slot='switcherIcon' type='down' />
|
<a-icon slot='iot' type="home" theme="filled" :style="{ color: 'rgb(24, 144, 255)' }" />
|
<a-icon slot='classify' type='folder' theme="filled" :style="{ color: 'rgb(24, 144, 255)' }" />
|
<a-icon slot='project' type="cloud" theme="filled" :style="{ color: 'rgb(24, 144, 255)' }"/>
|
<a-icon slot='empty' type='code-sandbox-square' theme="filled" :style="{ color: 'rgb(24, 144, 255)' }" />
|
<a-icon slot='solid' type='instagram' theme="filled" :style="{ color: 'rgb(24, 144, 255)' }" />
|
<a-icon slot='equipment' type='sliders' :style="{ color: 'rgb(24, 144, 255)' }" />
|
<a-icon slot='group' type='file-text' :style="{ color: 'rgb(24, 144, 255)' }" />
|
</a-tree>
|
</a-layout-sider>
|
<a-layout style='padding: 0 0 0 1px;overflow: hidden'>
|
<a-layout :style="{ background: '#fff', padding: '1px', minHeight: '100%' }">
|
<equipment v-if='indexStyle===2' ref='equipment' :parameter-group-id='parameterGroupId' />
|
<parameter-group v-if='indexStyle===5' ref='equipment' :parameter-group-id='parameterGroupId' />
|
<empty-parameter v-if='indexStyle===7' ref='equipment' :parameter-group-id='parameterGroupId' />
|
<solid-parameter v-if='indexStyle===6' ref='equipment' :parameter-group-id='parameterGroupId'
|
:parameters='parameters' @ok='saveParameters' />
|
</a-layout>
|
|
</a-layout>
|
</a-layout>
|
<mqtt-iot ref='mqtt' :server-id='serverId' />
|
<!-- <mqtt-connection-util />-->
|
</j-modal>
|
</template>
|
|
<script>
|
import MqttIot from './MqttIot'
|
import MqttConnectionUtil from './MqttConnectionUtil'
|
import Equipment from './Equipment'
|
import SolidParameter from './SolidParameter'
|
import EmptyParameter from './EmptyParameter'
|
import ParameterGroup from './ParameterGroup'
|
import ParameterGroupModel from '../equipment/solid/SolidParameterModel'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import JDictSelectTag from '@/components/dict/JDictSelectTag'
|
import JInput from '@/components/jeecg/JInput'
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
import ProjectModal from '../../dashboard/ProjectModal'
|
import Server from '../server/Server'
|
import pick from 'lodash.pick'
|
import { getAction, httpAction } from '@/api/manage'
|
|
export default {
|
name: 'ParameterAddress',
|
mixins: [JeecgListMixin],
|
components: {
|
MqttConnectionUtil,
|
MqttIot,
|
EmptyParameter,
|
SolidParameter,
|
ParameterGroup,
|
Equipment,
|
ProjectModal,
|
Server,
|
ParameterGroupModel,
|
JDictSelectTag,
|
JInput,
|
JEllipsis
|
},
|
data() {
|
return {
|
projectId: '',
|
parameterGroupId: '',
|
indexStyle: 2,
|
expandedKeys: ['0'],
|
selectedKeys: [],
|
currentSelectedKeys: [],
|
visible1: false,
|
confirmLoading1: false,
|
visible: false,
|
disableSubmit: true,
|
treeData: [],
|
load: false,
|
url: {
|
tree: '/equipment/tree/collect',
|
queryByProjectCode: '/projectClassify/queryByProjectCode',
|
queryByServe: '/serve/deploy/queryByProjectCode',
|
addBatch: '/empty/parameter/addBatch',
|
edit: '/empty/parameter/edit'
|
},
|
form: this.$form.createForm(this),
|
model: {},
|
parameters: []
|
}
|
},
|
props: ['serverId'],
|
watch: {
|
serverId: {
|
handler() {
|
this.loadData()
|
}
|
}
|
},
|
methods: {
|
openMqtt() {
|
this.visible1 = true
|
// 连接mqtt
|
this.$nextTick(()=>{
|
// debugger
|
if (this.$refs.mqtt){
|
this.$refs.mqtt.initMqtt()
|
}
|
})
|
// this.$refs.mqtt.handleConnect()
|
},
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
const key = node.key
|
this.expandedKeys.push(key)
|
if (node.children) {
|
this.generateList(node.children)
|
}
|
}
|
},
|
// 查询终端列表
|
loadData() {
|
if (this.serverId){
|
this.parameterGroupId = this.serverId
|
// 根据虚设备id查询
|
getAction(this.url.tree, { id: this.serverId }).then((res) => {
|
if (res.success) {
|
this.treeData = res.result
|
this.generateList(this.treeData)
|
}
|
if (res.code === 510) {
|
this.$message.warning(res.message)
|
}
|
this.loading = false
|
})
|
}
|
},
|
clickThenSelect(record) {
|
return {
|
on: {
|
click: () => {
|
this.onSelectChange(record.id.split(','), [record])
|
}
|
}
|
}
|
},
|
onSelectChange(selectedRowKeys) {
|
this.selectedRowKeys = selectedRowKeys
|
},
|
modalFormOk(val) {
|
// 调用父组件方法
|
this.$emit('tree')
|
// 新增/修改 成功时，重载列表
|
this.loadData()
|
this.selectedRowKeys = [val.id]
|
},
|
saveParameters(val) {
|
let index = this.parameters.find(item => item.id === this.parameterGroupId)
|
if (index !== -1 && index !== undefined && index !== null) {
|
this.parameters.splice(index, 1)
|
}
|
this.model = {}
|
this.model.id = this.parameterGroupId
|
this.model.parametersList = val
|
this.parameters.push(this.model)
|
},
|
searchQuery() {
|
this.loadData()
|
this.onClearSelected()
|
},
|
searchReset() {
|
this.queryParam = {}
|
this.loadData()
|
this.onClearSelected()
|
},
|
handleCancel() {
|
this.visible1 = false
|
// 断开mqtt
|
this.$refs.mqtt.disconnectMqtt()
|
this.visible1 = false
|
},
|
add() {
|
this.indexStyle = 2
|
this.edit({})
|
this.parameters = []
|
if (this.indexStyle === 2) {
|
// 展示设备页面
|
getAction(this.url.queryByServe, { projectCode: this.treeData[0].key.split('_')[1] }).then((res) => {
|
if (res.success) {
|
this.parameterGroupId = res.result.id
|
this.indexStyle = 2
|
}
|
})
|
}
|
},
|
edit(record) {
|
this.form.resetFields()
|
this.model = Object.assign({}, record)
|
this.visible = true
|
this.$nextTick(() => {
|
this.form.setFieldsValue(pick(this.model, 'parameterCode', 'parameterName', 'parameterDescribe', 'address'))
|
})
|
},
|
handleOk() {
|
if (this.parameters.length === 0) {
|
this.$message.warning('请选择虚设备参数')
|
}
|
let emptyParameter = []
|
this.parameters.forEach(p => {
|
p.parametersList.forEach(s => {
|
s.type = 1
|
s.parameterId = s.id
|
s.id = null
|
s.equipmentId = this.serverId
|
s.address = null
|
s.address = 'IOT.' + s.serverCode + '.' + s.groupCode + '.' + s.parameterCode
|
emptyParameter.push(s)
|
})
|
})
|
const that = this
|
// 触发表单验证
|
that.confirmLoading = true
|
httpAction(this.url.addBatch, emptyParameter, 'post').then((res) => {
|
this.visible1 = false
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok', res.result)
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
},
|
onSelect(selectedKeys) {
|
if (selectedKeys.length === 0) {
|
return
|
}
|
this.currentSelectedKeys = selectedKeys
|
switch (selectedKeys[0].split('_')[0]) {
|
case 'fwq':
|
getAction(this.url.queryByServe, { projectCode: selectedKeys[0].split('_')[1] }).then((res) => {
|
if (res.success) {
|
this.parameterGroupId = res.result.id
|
this.indexStyle = 2
|
}
|
})
|
break
|
case 'group':
|
// 参数组
|
this.parameterGroupId = selectedKeys[0].split('_')[1]
|
this.indexStyle = 5
|
break
|
case 'ssb':
|
this.parameterGroupId = selectedKeys[0].split('_')[1]
|
this.indexStyle = 6
|
break
|
// 传入选中的参数
|
case 'xxb':
|
this.parameterGroupId = selectedKeys[0].split('_')[1]
|
this.indexStyle = 7
|
break
|
}
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
}
|
}
|
}
|
</script>
|
<style lang='less' scoped>
|
/deep/ .ant-modal {
|
height: 80%;
|
|
.ant-modal-content {
|
height: 100%;
|
|
.ant-modal-body {
|
height: calc(100% - 52.8px - 54.8px);
|
|
|
.ant-layout {
|
height: 100%;
|
|
.ant-layout-sider {
|
height: 100%;
|
overflow: auto;
|
}
|
}
|
|
}
|
}
|
}
|
</style>
|
