增加设备配置功能页面

src/api/modules/edgeServer.api.js

@@ -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 })
+  },
 })

src/views/edgeServer/edgeServerConfigure/device.vue

@@ -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>

src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue

@@ -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>

src/views/edgeServer/edgeServerConfigure/index.vue

@@ -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>