增加设备配置功能页面
This commit is contained in:
wu
@@ -34,5 +34,42 @@ export default ({ service, request, serviceForMock, requestForMock, mock, faker,
|
||||
|
||||
QUERY_SERVERS () {
|
||||
return request({ url: '?query=servers' })
|
||||
}
|
||||
},
|
||||
|
||||
QUERY_SERVE_MONITORING(){
|
||||
return request({ url: '?query=working_subclasses' })
|
||||
},
|
||||
GET_DEVICE(serve_id){
|
||||
return request({ url: '?query=device_list&id='+serve_id })
|
||||
},
|
||||
GET_DEVICE_STATUS(serve_id){
|
||||
return request({ url: '?query=device_status&id='+serve_id })
|
||||
},
|
||||
ADD_DEVICE:(data) => handlePost(request, data),
|
||||
DEL_DEVICE:(data) => handlePost(request, data),
|
||||
GET_HSLSERVER_CONFIGURE (url, username, password) {
|
||||
return request({
|
||||
auth: {
|
||||
username: username,
|
||||
password: password
|
||||
},
|
||||
method: 'post',
|
||||
url: url + '/Admin/JsonSettingsRequest'
|
||||
})
|
||||
},
|
||||
SET_HSLSERVER_CONFIGURE(url, username, password, data) {
|
||||
return request({
|
||||
auth: {
|
||||
username: username,
|
||||
password: password
|
||||
},
|
||||
data: data,
|
||||
method: 'post',
|
||||
url: url + '/Admin/JsonSettingsModify'
|
||||
})
|
||||
},
|
||||
SET_DEVICE_CONFIGURE:(data) => handlePost(request, data),
|
||||
GET_DEVICE_CONFIGURE(id){
|
||||
return request({ url: '?query=device&id='+id })
|
||||
},
|
||||
})
|
||||
|
||||
547
src/views/edgeServer/edgeServerConfigure/device.vue
Normal file
547
src/views/edgeServer/edgeServerConfigure/device.vue
Normal 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>
|
||||
121
src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue
Normal file
121
src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" size="mini" label-position="right" class="demo-form-inline">
|
||||
<el-form-item label="设备">
|
||||
<el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
|
||||
<el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName">
|
||||
<template v-if="item.type === 'text'">
|
||||
<el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
|
||||
:placeholder="item.placeholder"></el-input>
|
||||
</template>
|
||||
|
||||
<template v-if="item.type === 'select'">
|
||||
<el-select v-model='deviceConfigureModelValue[item.key]' style="width:80px" :disabled="item.disabled"
|
||||
:placeholder="item.placeholder">
|
||||
<el-option v-for="index in item.option" :key="index.value" :label="index.label"
|
||||
:value="index.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<template v-if="item.type === 'time'">
|
||||
<el-date-picker v-model='deviceConfigureModelValue[item.key]' type="datetime" :placeholder="item.placeholder"
|
||||
defaultValue="2022-06-17 16:36:00" :disabled="item.disabled" style="width:180px">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import deviceConfigureFormItemData from './deviceSetting/index.json'
|
||||
import { each } from 'lodash'
|
||||
export default {
|
||||
name:'deviceConfigure',
|
||||
props: {
|
||||
loading: {
|
||||
default: false
|
||||
},
|
||||
defaultDeviceName: {
|
||||
default: Object.keys(deviceConfigureFormItemData)[0]
|
||||
},
|
||||
defaultFormData: {
|
||||
default: () => []
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
defaultDeviceName: {
|
||||
handler(val) {
|
||||
if(val){
|
||||
this.defaultDeviceTypeNameValue = val
|
||||
this.deviceChange(val)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
defaultFormData: {
|
||||
handler(val) {
|
||||
this.setDeviceDefaultFormItemValue(val)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceConfigureFormItem: [],
|
||||
defaultDeviceTypeNameValue: '',
|
||||
deviceConfigureModelValue: {},
|
||||
deviceSelectedVlaue: '',
|
||||
deviceTypeData: [
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange(e) {
|
||||
//获取所有字符串的key 用于v-model渲染
|
||||
let deviceConfigureModelValue = {}
|
||||
each(deviceConfigureFormItemData[e], (item) => {
|
||||
|
||||
if (item.type === 'time') {
|
||||
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
|
||||
} else {
|
||||
deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ""
|
||||
}
|
||||
})
|
||||
this.deviceConfigureModelValue = deviceConfigureModelValue
|
||||
this. deviceConfigureFormItem = deviceConfigureFormItemData[e]
|
||||
},
|
||||
setDeviceDefaultFormItemValue(val) {
|
||||
let deviceConfigureModelValue = {}
|
||||
each(deviceConfigureFormItemData[this.defaultDeviceTypeNameValue], (item) => {
|
||||
if (item.type === 'time') {
|
||||
deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : new Date()
|
||||
} else {
|
||||
deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : item.defaultValue
|
||||
}
|
||||
}
|
||||
)
|
||||
this.deviceConfigureModelValue = deviceConfigureModelValue
|
||||
},
|
||||
getDeviceType() {
|
||||
this.deviceTypeData = Object.keys(deviceConfigureFormItemData)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDeviceType()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
1136
src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json
Normal file
1136
src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -14,9 +14,28 @@
|
||||
@row-add="handleRowAdd"
|
||||
@row-edit="handleRowEdit"
|
||||
@row-remove="handleRowRemove"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
@dialog-cancel="handleDialogCancel"
|
||||
@set-device="drawerShow">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
</d2-crud>
|
||||
|
||||
<el-drawer
|
||||
size="95%"
|
||||
:append-to-body='true'
|
||||
:visible.sync="isDrawerShow"
|
||||
>
|
||||
<div slot="title" >
|
||||
<span class="title-text">前置服务 {{selectedServerData.name}} IP:{{selectedServerData.url}}</span>
|
||||
|
||||
<el-tag
|
||||
:color="serveStatus[selectedServerData.status].backgroundColor"
|
||||
:style="{color:serveStatus[selectedServerData.status].textColor,borderColor:serveStatus[selectedServerData.status].borderColor}"
|
||||
>
|
||||
{{serveStatus[selectedServerData.status].name}}
|
||||
</el-tag>
|
||||
</div>
|
||||
<device :server_id='server_id' @changeStatus='changeSelectedServerStatus'/>
|
||||
</el-drawer>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
@@ -26,6 +45,9 @@ import { assign, each } from 'lodash'
|
||||
const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16).toUpperCase()).join('')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Device: () => import('./device'),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
@@ -58,6 +80,28 @@ export default {
|
||||
key: 'note'
|
||||
}
|
||||
],
|
||||
isDrawerShow: false,
|
||||
server_id:0,
|
||||
serveStatus:{
|
||||
online:{
|
||||
name:'在线',
|
||||
textColor:'#67c23a',
|
||||
backgroundColor:'#f0f9eb',
|
||||
borderColor:'#e1f3d8'
|
||||
},
|
||||
offline:{
|
||||
name:'离线',
|
||||
textColor:'#67c23a',
|
||||
backgroundColor:'#f0f9eb',
|
||||
borderColor:'#e1f3d8'
|
||||
}
|
||||
},
|
||||
selectedServerData:{
|
||||
name:'',
|
||||
url:'',
|
||||
port:'',
|
||||
status:'offline'
|
||||
},
|
||||
data: [],
|
||||
serverSettings: {},
|
||||
rowHandle: {
|
||||
@@ -84,7 +128,14 @@ export default {
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
custom: [
|
||||
{
|
||||
text: '设备配置',
|
||||
size: 'small',
|
||||
emit: 'set-device',
|
||||
}
|
||||
]
|
||||
},
|
||||
addTemplate: {
|
||||
deviceName: {
|
||||
@@ -278,10 +329,35 @@ export default {
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
},
|
||||
drawerShow({row}){
|
||||
this.selectedServerData = {
|
||||
name:row.name,
|
||||
url:row.url,
|
||||
port:row.port,
|
||||
status:row.status ? row.status :'offline'
|
||||
}
|
||||
this.server_id = row.id
|
||||
this.isDrawerShow = true
|
||||
},
|
||||
changeSelectedServerStatus(status){
|
||||
|
||||
this.selectedServerData.status = status ? status : 'offline'
|
||||
}
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.getServers()
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.title-text{
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user