<template>
|
<a-spin :spinning='load'>
|
<a-card :bordered='false'>
|
<!-- 查询区域 -->
|
<div class='table-page-search-wrapper'>
|
<a-form layout='inline' @keyup.enter.native='searchQuery'>
|
<a-row :gutter='24'>
|
<a-col :md='5' :sm='8'>
|
<a-form-item label='参数编号'>
|
<a-input v-model='queryParam.parameterCode' placeholder='请输入参数编号'></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :md='5' :sm='8'>
|
<a-form-item label='参数名称'>
|
<a-input v-model='queryParam.parameterName' placeholder='请输入参数名称'></a-input>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md='5' :sm='8'>
|
<span class='table-page-search-submitButtons' style='float: left;overflow: hidden;'>
|
<a-button icon='search' type='primary' @click='searchQuery'>查询</a-button>
|
<a-button icon='reload' style='margin-left: 8px' type='primary' @click='searchReset'>重置</a-button>
|
<a-button icon='plus' style='margin-left: 8px' type='primary' @click='handleAdd'>新增</a-button>
|
<a-button icon='file-sync' style='margin-left: 8px' type='primary' @click='canonicalParameter'>标准参数</a-button>
|
<a-upload :action='importExcelUrl' :beforeUpload='beforeUpload' :data='extraParams' :headers='tokenHeader'
|
:multiple='false' :showUploadList='false'
|
accept='.csv'
|
name='file' @change='handleImportExcel'>
|
<a-button icon='import' style='margin-left: 8px' type='primary'>导入</a-button>
|
</a-upload>
|
<a-button icon='download' style='margin-left: 8px' type='primary'
|
@click="handleExportXls('设备参数')">导出</a-button>
|
<a-button icon='area-chart' style='margin-left: 8px' type='primary'
|
@click="collectData()">实时数据</a-button>
|
|
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<div>
|
<!-- 操作按钮区域 -->
|
<div class='table-operator' style='border-top: 5px'>
|
<template v-if='toggleSearchStatus'>
|
<a-button icon='download' type='primary'
|
@click="handleExportXls('设备参数')">导出
|
</a-button>
|
<a-button icon='file-sync' type='primary'
|
@click='canonicalParameter'>标准参数
|
</a-button>
|
</template>
|
</div>
|
|
<!-- <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>-->
|
<!-- <i class='anticon anticon-info-circle ant-alert-icon'></i> 已选择 <a-->
|
<!-- style='font-weight: 600'>{{ selectedRowKeys.length }}</a>项-->
|
<!-- <a style='margin-left: 24px' @click='onClearSelected'>清空</a>-->
|
<!-- </div>-->
|
<a-table
|
ref='table'
|
:columns='columns'
|
:customRow='clickThenSelect'
|
:dataSource='dataSource'
|
:loading='loading'
|
:pagination='ipagination'
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
|
bordered
|
class='j-table-force-nowrap'
|
rowKey='id'
|
size='small'
|
@change='handleTableChange'
|
>
|
<!--状态栏个性展示-->
|
<span slot='action' slot-scope='text, record'>
|
<a href='javascript:' @click='handleEdit(record)'>编辑</a>
|
<a-divider type='vertical' />
|
<a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
|
<a>删除</a>
|
</a-popconfirm>
|
</span>
|
</a-table>
|
</div>
|
<!-- table区域-end -->
|
|
<!-- 表单区域 -->
|
<parameter-group-model ref='modalForm' :server-id='serverId' @ok='modalFormOk' />
|
<!-- 实时数据 -->
|
<parameter-address ref='modalAddress' @ok='modalFormOk' :server-id='server' />
|
</a-card>
|
</a-spin>
|
</template>
|
|
<script>
|
import { downFile, getAction } from '@/api/manage'
|
import ParameterGroupModel from './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 ParameterAddress from '../../collectData/ParameterAddress'
|
|
export default {
|
name: 'SolidParameter',
|
mixins: [JeecgListMixin],
|
components: {
|
ParameterAddress,
|
ParameterGroupModel,
|
JDictSelectTag,
|
JInput,
|
JEllipsis
|
},
|
computed: {
|
importExcelUrl: function() {
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
|
}
|
},
|
data() {
|
return {
|
items: [
|
"ssb_1934877025252777985",
|
],
|
server:'1934863338148306945',
|
/* 排序参数 */
|
isorter: {
|
column: 'parameterCode',
|
order: 'desc'
|
},
|
extraParams: {
|
param1: this.serverId // 参数组编号
|
},
|
columns: [
|
{
|
title: '参数编号',
|
align: 'center',
|
dataIndex: 'parameterCode'
|
},
|
{
|
title: '参数名称',
|
align: 'center',
|
dataIndex: 'parameterName'
|
},
|
{
|
title: '描述',
|
align: 'center',
|
dataIndex: 'parameterDescribe'
|
},
|
{
|
title: '数据类型',
|
align: 'center',
|
dataIndex: 'parameterType'
|
},
|
{
|
title: '地址',
|
align: 'center',
|
dataIndex: 'address'
|
},
|
{
|
title: '读写类型',
|
align: 'center',
|
dataIndex: 'readWriteType'
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align: 'center',
|
scopedSlots: { customRender: 'action' }
|
}
|
],
|
load: false,
|
url: {
|
list: '/real/parameter/list',
|
delete: '/real/parameter/delete',
|
exportXlsUrl: '/real/parameter/exportXls',
|
importExcelUrl: '/real/parameter/importExcel',
|
canonicalParameter: '/real/parameter/canonicalParameter'
|
}
|
}
|
},
|
props: ['serverId', 'tree'],
|
watch: {
|
serverId: {
|
handler() {
|
this.loadData()
|
}
|
}
|
},
|
methods: {
|
collectData() {
|
var that = this
|
if (this.dataSource == null) {
|
that.$message.warning('当前参数组暂无参数')
|
} else {
|
this.server = this.dataSource[0].serverId
|
this.$refs.modalAddress.openMqtt()
|
this.$refs.modalAddress.onSelect(['ssb_'+ this.dataSource[0].parameterGroupId])
|
}
|
},
|
// 标准参数
|
canonicalParameter() {
|
var that = this
|
// 根据服务器id获取mqtt连接参数
|
getAction(this.url.canonicalParameter, { id: this.serverId }).then((res) => {
|
if (res.success && res.result != null) {
|
that.$message.success(res.message)
|
} else {
|
that.$message.warning(res.message)
|
}
|
})
|
},
|
beforeUpload(file) {
|
this.loading = true
|
return true
|
},
|
/* 导入 */
|
handleImportExcel(info) {
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList)
|
}
|
if (info.file.status === 'done') {
|
if (info.file.response.success) {
|
// this.$message.success(`${info.file.name} 文件上传成功`);
|
if (info.file.response.code === 201) {
|
let { message, result: { msg, fileUrl, fileName } } = info.file.response
|
let href = window._CONFIG['domianURL'] + fileUrl
|
this.$warning({
|
title: message,
|
content: (
|
<div>
|
<span>{msg}</span><br />
|
<span>具体详情请 <a href={href} target='_blank' download={fileName}>点击下载</a> </span>
|
</div>
|
)
|
})
|
} else {
|
this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
|
}
|
this.loadData()
|
} else {
|
this.$message.error(`${info.file.name} ${info.file.response.message}.`)
|
}
|
} else if (info.file.status === 'error') {
|
this.loading = false
|
this.$message.error(`文件上传失败: ${info.file.msg} `)
|
}
|
},
|
/* 导出 */
|
handleExportXls(fileName) {
|
if (!fileName || typeof fileName != 'string') {
|
fileName = '导出文件'
|
}
|
let param = { ...this.queryParam }
|
param.parameterGroupId = this.extraParams.param1
|
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
|
param['selections'] = this.selectedRowKeys.join(',')
|
}
|
console.log('导出参数', param)
|
downFile(this.url.exportXlsUrl, param).then((data) => {
|
if (!data) {
|
this.$message.warning('文件下载失败')
|
return
|
}
|
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
|
} else {
|
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
|
let link = document.createElement('a')
|
link.style.display = 'none'
|
link.href = url
|
link.setAttribute('download', fileName + '.csv')
|
document.body.appendChild(link)
|
link.click()
|
document.body.removeChild(link) //下载完成移除元素
|
window.URL.revokeObjectURL(url) //释放掉blob对象
|
}
|
})
|
},
|
// 查询终端列表
|
loadData(arg) {
|
this.extraParams.param1 = this.serverId
|
//加载数据 若传入参数1则加载第一页的内容
|
if (arg === 1) {
|
this.ipagination.current = 1
|
}
|
this.onClearSelected()
|
var params = this.getQueryParams()//查询条件
|
params.parameterGroupId = this.serverId
|
this.loading = true
|
getAction(this.url.list, params).then((res) => {
|
if (res.success) {
|
this.dataSource = res.result.records
|
this.ipagination.total = res.result.total
|
}
|
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]
|
},
|
searchQuery() {
|
this.loadData()
|
this.onClearSelected()
|
},
|
searchReset() {
|
this.queryParam = {}
|
this.loadData()
|
this.onClearSelected()
|
},
|
handleEdit(record) {
|
this.$refs.modalForm.edit(record)
|
this.$refs.modalForm.title = '编辑'
|
this.$refs.modalForm.disableSubmit = false
|
}
|
}
|
}
|
</script>
|
<style>
|
</style>
|
