[update] 井口数据监控、系统设置
This commit is contained in:
danshihao
@@ -1,13 +1,446 @@
|
||||
<template>
|
||||
<div>1</div>
|
||||
<a-spin :spinning="loading">
|
||||
<a-row :gutter="20" type="flex" class="mb-20">
|
||||
<a-col flex="556px">
|
||||
<common-card title="系统设置">
|
||||
<a-form :form="sysSettingForm" class="custom-vertical-form flex-column-between">
|
||||
<div class="mb-20">
|
||||
<a-form-item label="服务器IP">
|
||||
<a-input placeholder="请输入服务器IP" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['serverIp', validatorRules.serverIp]"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器端口号">
|
||||
<a-input placeholder="请输入服务器端口号" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['serverPort', validatorRules.serverPort]"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="数据采集协议">
|
||||
<j-dict-select-tag :triggerChange="true"
|
||||
dictCode="data_acquisition_protocol"
|
||||
v-decorator="['dataAcquisitionProtocol', validatorRules.dataAcquisitionProtocol]"
|
||||
placeholder="请选择数据采集协议">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="数据采集周期">
|
||||
<j-dict-select-tag :triggerChange="true"
|
||||
dictCode="data_acquisition_cycle"
|
||||
v-decorator="['dataAcquisitionCycle', validatorRules.dataAcquisitionCycle]"
|
||||
placeholder="请选择数据采集周期">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex-center custom-btns-box">
|
||||
<a-button class="btn-blue-long" @click="handleResetSysSettingForm" style="margin-right: 16px;">
|
||||
<img :src="require('@assets/images/icon/refresh.png')" alt="恢复默认设置" class="btn-icon">
|
||||
<span class="btn-text">恢复默认设置</span>
|
||||
</a-button>
|
||||
<a-button class="btn-cyan-medium" @click="handleSaveSysSetting">
|
||||
<img :src="require('@assets/images/icon/save.png')" alt="保存设置" class="btn-icon">
|
||||
<span class="btn-text">保存设置</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</common-card>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<common-card title="用户信息">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:scroll="{x: true,y:200}"
|
||||
:columns="userInfo.columns"
|
||||
:dataSource="userInfo.dataSource"
|
||||
:pagination="userInfo.ipagination"
|
||||
@change="handleUserInfoTableChange($event, 'userInfo')">
|
||||
<template slot="text" slot-scope="text">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<span slot="action" slot-scope="text, record, index" class="operation-btns">
|
||||
<a class="primary" @click="handleChangeStatus(record, index)">编辑</a>
|
||||
<a class="danger" @click="handleDelete(record, index)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</common-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="20" type="flex" class="mb-20">
|
||||
<a-col flex="556px">
|
||||
<common-card title="添加用户">
|
||||
<a-form :form="addUserForm" class="custom-vertical-form flex-column-between">
|
||||
<a-form-item>
|
||||
<div class="upload-avatar-box">
|
||||
<j-image-upload v-decorator="['avatar', validatorRules.avatar]"
|
||||
class="upload-avatar"
|
||||
:number="1"
|
||||
uploadLimitHideBtn
|
||||
accept='.png,.PNG,.jpg,.JPG'></j-image-upload>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-row type="flex" :gutter="20" class="mb-20">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="用户名称">
|
||||
<a-input placeholder="请输入用户名称" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['username', validatorRules.username]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="用户类别">
|
||||
<j-dict-select-tag :triggerChange="true"
|
||||
dictCode="user_type"
|
||||
v-decorator="['userType', validatorRules.userType]"
|
||||
placeholder="请选择用户类别">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="所属单位">
|
||||
<j-select-depart
|
||||
placeholder="请选择所属单位"
|
||||
v-decorator="['selecteddeparts', validatorRules.selecteddeparts]"
|
||||
:backDepart="true"
|
||||
:treeOpera="true"></j-select-depart>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="联系方式">
|
||||
<a-input placeholder="请输入联系方式"
|
||||
v-decorator="['phone', validatorRules.phone]" />
|
||||
</a-form-model-item>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="flex-center custom-btns-box">
|
||||
<a-button class="btn-cyan" @click="handleAddUser">
|
||||
<img :src="require('@assets/images/icon/add.png')" alt="保存设置" class="btn-icon">
|
||||
<span class="btn-text">添加</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</common-card>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<common-card title="通讯日志">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:scroll="{x: true,y:200}"
|
||||
:columns="communicationLog.columns"
|
||||
:dataSource="communicationLog.dataSource"
|
||||
:pagination="communicationLog.ipagination"
|
||||
@change="handleCommunicationLogTableChange">
|
||||
<template slot="text" slot-scope="text">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<span slot="action" slot-scope="text, record, index" class="operation-btns">
|
||||
<a class="primary" @click="handleChangeStatus(record, index)">编辑</a>
|
||||
<a class="danger" @click="handleDelete(record, index)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</common-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonCard from '@comp/CommonCard'
|
||||
import { addUserInfo, getSysSetting, getUserPage, saveSysSetting } from '@api/systemOverview'
|
||||
import { dataAcquisitionCycle, dataAcquisitionProtocol } from '@/enums/commonEnums'
|
||||
import { getRSAPublicKey } from '@/utils/encryption'
|
||||
import { JSEncrypt } from 'jsencrypt'
|
||||
export default {
|
||||
name: 'SystemSettings'
|
||||
name: 'SystemSettings',
|
||||
components: { CommonCard },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
// 系统设置表单
|
||||
sysSettingForm: this.$form.createForm(this),
|
||||
// 添加用户表单
|
||||
addUserForm: this.$form.createForm(this),
|
||||
// 默认值
|
||||
sysSettingFormDefault: {
|
||||
id: 'default',
|
||||
serverIp: '11.13.105.96',
|
||||
serverPort: '1502',
|
||||
dataAcquisitionProtocol: dataAcquisitionProtocol.modbusRtu.value,
|
||||
dataAcquisitionCycle: dataAcquisitionCycle.tenSeconds.value
|
||||
},
|
||||
// 后端保存的值
|
||||
sysSettingFormData: {},
|
||||
// 表单校验
|
||||
validatorRules: {
|
||||
serverIp: { rules: [{ required: true, message: '请输入服务器IP' }], validateTrigger: 'blur' },
|
||||
serverPort: { rules: [{ required: true, message: '请选择服务器端口号' }], validateTrigger: 'blur' },
|
||||
dataAcquisitionProtocol: { rules: [{ required: true, message: '请选择数据采集协议' }], validateTrigger: 'change' },
|
||||
dataAcquisitionCycle: { rules: [{ required: true, message: '请输入数据采集周期' }], validateTrigger: 'change' },
|
||||
username: { rules: [{ required: true, message: '请输入用户名称' }], validateTrigger: 'blur' },
|
||||
userType: { rules: [{ required: true, message: '请选择用户类别' }], validateTrigger: 'change' },
|
||||
selecteddeparts: { rules: [{ required: true, message: '请选择所属单位' }], validateTrigger: 'change' },
|
||||
phone: { rules: [{ required: true, message: '请输入联系方式' }, { validator: this.validateMobile }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 用户信息相关
|
||||
userInfo: {
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'username',
|
||||
title: '用户名',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'phone',
|
||||
title: '联系方式',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'roleTxt',
|
||||
title: '用户类别',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'orgCodeTxt',
|
||||
title: '所属单位',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '用户管理',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
/* 排序参数 */
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
}
|
||||
},
|
||||
// 通讯日志相关
|
||||
communicationLog: {
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'deviceStatus_dictText',
|
||||
title: '时间',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'deviceName',
|
||||
title: '消息类型',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'deviceSn',
|
||||
title: '消息内容',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
dataSource: []
|
||||
},
|
||||
// 公钥
|
||||
rsaPublicKey: '',
|
||||
// 默认用户信息（调用系统加用户接口，默认密码123456）
|
||||
defaultUserInfo: {
|
||||
password: '123456',
|
||||
confirmpassword: '123456',
|
||||
userIdentity: '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPage()
|
||||
},
|
||||
methods: {
|
||||
// 恢复默认配置
|
||||
handleResetSysSettingForm () {
|
||||
this.sysSettingForm.resetFields()
|
||||
this.sysSettingForm.setFieldsValue(this.sysSettingFormDefault)
|
||||
// 回显表单上之后，保存到后端
|
||||
this.$nextTick(() => {
|
||||
this.handleSaveSysSetting()
|
||||
})
|
||||
},
|
||||
loadPage () {
|
||||
this.loadSysSetting()
|
||||
this.loadUserList()
|
||||
},
|
||||
// 获取默认配置
|
||||
loadSysSetting () {
|
||||
getSysSetting({ id: this.sysSettingFormDefault.id }).then(res => {
|
||||
if (res.success) {
|
||||
const data = res.result || {}
|
||||
this.sysSettingFormData = data
|
||||
this.sysSettingForm.setFieldsValue(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 保存设置
|
||||
handleSaveSysSetting () {
|
||||
this.sysSettingForm.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const formData = Object.assign({}, values)
|
||||
// 后端只保存一条数据id固定
|
||||
formData.id = this.sysSettingFormDefault.id
|
||||
saveSysSetting(formData).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 加载用户信息
|
||||
loadUserList (arg) {
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.userInfo.ipagination.current = 1
|
||||
}
|
||||
this.userInfo.loading = true
|
||||
const params = {
|
||||
pageNo: this.userInfo.ipagination.current,
|
||||
pageSize: this.userInfo.ipagination.pageSize,
|
||||
...this.userInfo.isorter
|
||||
}
|
||||
getUserPage(params).then((res) => {
|
||||
if (res.success) {
|
||||
// update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
this.userInfo.dataSource = res.result.records || res.result
|
||||
if (res.result.total) {
|
||||
this.userInfo.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.userInfo.ipagination.total = 0
|
||||
}
|
||||
// update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.userInfo.loading = false
|
||||
})
|
||||
},
|
||||
handleUserInfoTableChange () {
|
||||
console.log()
|
||||
},
|
||||
handleCommunicationLogTableChange () {
|
||||
console.log()
|
||||
},
|
||||
// 添加用户
|
||||
async handleAddUser () {
|
||||
// 获取公钥
|
||||
await getRSAPublicKey().then(res => {
|
||||
this.rsaPublicKey = res.result
|
||||
})
|
||||
// 校验表单
|
||||
this.addUserForm.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const formData = Object.assign({}, this.defaultUserInfo, values)
|
||||
formData.rsaPublicKey = this.rsaPublicKey
|
||||
// 对密码、手机号进行加密
|
||||
const encrypt = new JSEncrypt()
|
||||
encrypt.setPublicKey(this.rsaPublicKey)
|
||||
if (formData.password) {
|
||||
formData.password = encrypt.encrypt(formData.password)
|
||||
}
|
||||
if (formData.phone) {
|
||||
formData.phone = encrypt.encrypt(formData.phone)
|
||||
}
|
||||
addUserInfo(formData).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loadUserList()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 校验手机号
|
||||
validateMobile (rule, value, callback) {
|
||||
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('您的手机号码格式不正确'))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.upload-avatar-box {
|
||||
position: relative;
|
||||
width: calc(100% + 40px);
|
||||
height: 168px;
|
||||
margin: -13px -20px 0;
|
||||
background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
|
||||
background-size: 100%;
|
||||
|
||||
.upload-avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
// 隐藏上传组件
|
||||
/deep/.ant-upload-select {
|
||||
opacity: 0;
|
||||
}
|
||||
/deep/.ant-upload-list-picture-card .ant-upload-list-item {
|
||||
border: none;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
/deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
|
||||
/deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user