添加账号密码录入&添加服务设备状态&优化代码

src/api/modules/edgeServer.api.js

@@ -72,18 +72,26 @@ export default ({ service, request, serviceForMock, requestForMock, mock, faker,
   GET_DEVICE_CONFIGURE (id) {
     return request({ url: '?query=device&id=' + id })
   },
-  GET_SERVE_DEVICE_MONITORING (url, username, password, deviceName) {
+  GET_SERVE_DEVICE_MONITORING (url, username, password) {
     return request({
       auth: {
         username: username,
         password: password
       },
-      method: 'get',
+      url: url + '/Edge/DeviceData?data=/'
-      url: url + '/Edge/DeviceData?data=' + deviceName
     })
   },
   GET_ALL_DEVICES () {
     return request({ url: '?query=all_devices' })
   },
-  SET_SERVER_EXEC: (data) => handlePost(request, data)
+  SET_SERVER_EXEC: (data) => handlePost(request, data),
+  GET_SERVER_DEVICE_STATUS (url, username, password) {
+    return request({
+      auth: {
+        username: username,
+        password: password
+      },
+      url: url + '/Edge/DeviceData?data=__status'
+    })
+  }
 })

src/views/edgeServer/edgeServerConfigure/device.vue

@@ -25,7 +25,7 @@
               <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 }">
+                  :class="{ 'device-status': true, 'device-status-online': item.status, 'device-status-offline': !item.status }">
                 </div>
               </div>
             </el-menu-item>
@@ -54,6 +54,21 @@
       </el-card>
     </el-main>
 
+    <el-dialog title="服务账号登录" :visible.sync="dialogFormVisible" :modal="false">
+    <el-alert  title="请先输入该服务的账号密码，再进行后续操作" type="warning" style="width:400px;display: inline-block;vertical-align: middle; margin-left: 5px;" :closable="false" />
+      <el-form :model="userForm" :rules="userRules" ref="userForm">
+        <el-form-item label="账号" prop="username">
+          <el-input v-model="userForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input type="password" v-model="userForm.password"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+
+        <el-button type="primary" @click="setUserInfo">确 定</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -284,6 +299,19 @@ export default {
         '@RequestInterval': [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }],
         '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }]
       },
+      dialogFormVisible: false,
+      userForm: {
+        username: '',
+        password: ''
+      },
+      userRules: {
+        username: [
+          { required: true, message: '请输入账号', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+      },
       serverData: {},
       devicePointData: [],
       nodeCodeData: [],
@@ -301,6 +329,9 @@ export default {
       handler (val) {
         this.serverData = val
         this.getDevice()
+        if (val.id) {
+          this.getDeviceStatus()
+        }
       },
       immediate: true
     }
@@ -433,14 +464,13 @@ export default {
       }
     },
     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.serverData.id })
-        that.getDevice()
+        this.getDevice()
         this.$message({
           message: '新加设备成功',
           type: 'success'
@@ -448,7 +478,10 @@ export default {
       })
     },
     async delDevice () {
-      const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456')
+      // 校验是否已经有账号和密码
+      const userInfo = this.getUserInfo()
+
+      const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, userInfo.username, userInfo.password)
       let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode
       if (deviceNode !== undefined && isArray(deviceNode)) {
         deviceNode = filter(deviceNode, item => {
@@ -460,7 +493,7 @@ export default {
       }
 
       try {
-        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456', { data: deviceConfigure.Content })
+        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, userInfo.username, userInfo.password, { data: deviceConfigure.Content })
         await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
         this.$message({
           message: '删除设备成功',
@@ -487,10 +520,10 @@ export default {
       }
       this.formOptions.saveLoading = false
     },
+
     async delDevicePoint ({ index, row }, done) {
       this.devicePointData.splice(index, 1)
       this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
-
       await this.setDeviceConfigure()
       done()
     },
@@ -507,7 +540,17 @@ export default {
       this.setDeviceConfigure()
       done()
     },
+    setUserInfo () {
+      this.$refs.userForm.validate((valid) => {
+        if (valid) {
+          sessionStorage.setItem(this.serverData.id, JSON.stringify(this.userForm))
+          this.dialogFormVisible = false
+        }
+      })
+    },
     async setDeviceConfigure () {
+      // 校验是否已经有账号和密码
+      const userInfo = this.getUserInfo()
       try {
         // 验证表单
         this.$refs.deviceConfigure.$refs.form.validate((valid) => {
@@ -515,10 +558,11 @@ export default {
             return false
           }
         })
-        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456')
+        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, userInfo.username, userInfo.password)
+        const deviceConfigureModelValue = this.$refs.deviceConfigure.deviceConfigureModelValue
         if (this.devicePointData.length > 0) {
-          const devicePointData = this.devicePointData
+          let devicePointData = this.devicePointData
-          each(devicePointData, (item) => {
+          devicePointData = each(devicePointData, (item) => {
             unset(item, 'id')
             unset(item, 'showBindButton')
             unset(item, 'showCopyButton')
@@ -526,9 +570,9 @@ export default {
             unset(item, 'showSendButton')
             item['@Binding'] = item['@Binding'] || ''
           })
-          this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = devicePointData
+          deviceConfigureModelValue.RequestNode = devicePointData
         }
-        this.$refs.deviceConfigure.deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name
+        deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name
         let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode || []
         let isExist = false
         if (deviceNode !== undefined) {
@@ -536,21 +580,21 @@ export default {
           deviceNode = map(deviceNode, (item) => {
             if (item['@Name'] === this.deviceData[this.deviceActiveStatus].name) {
               isExist = true
-              item = this.$refs.deviceConfigure.deviceConfigureModelValue
+              item = deviceConfigureModelValue
             }
             return item
           })
         }
 
         if (!isExist) {
-          deviceNode.push(this.$refs.deviceConfigure.deviceConfigureModelValue)
+          deviceNode.push(deviceConfigureModelValue)
         }
         deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
-        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456', { data: deviceConfigure.Content })
+        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, userInfo.username, userInfo.password, { data: deviceConfigure.Content })
-        this.$refs.deviceConfigure.deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue
+        deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue
         const data = {
           action: 'update_device',
-          conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),
+          conf: JSON.stringify(deviceConfigureModelValue),
           id: this.deviceData[this.deviceActiveStatus].id
         }
         this.$api.SET_DEVICE_CONFIGURE(data)
@@ -558,25 +602,45 @@ export default {
           message: '操作成功',
           type: 'success'
         })
+        this.$emit('changeServerConfig', 't')
       } catch (e) {
         console.log(e)
       }
     },
-    getDeviceStatus () {
+    getUserInfo () {
-      this.$api.GET_DEVICE_STATUS(this.serverData.id).then(res => {
+      const userInfo = sessionStorage.getItem(this.serverData.id)
-        each(this.deviceData, (item) => {
+      if (!userInfo) {
-          if (item.id in res.device_status) {
+        this.dialogFormVisible = true
-            item.status = res.device_status[item.id]
+        return false
+      }
+      return JSON.parse(userInfo)
+    },
+    async getDeviceStatus () {
+      const userInfo = this.getUserInfo()
+      const res = await this.$api.GET_SERVER_DEVICE_STATUS('http://' + this.serverData.url + ':' + this.serverData.port, userInfo.username, userInfo.password)
+      if (res) {
+        this.$emit('changeStatus', 'online')
+        const deviceStatus = {}
+        each(res.Content.__deviceList, (item) => {
+          deviceStatus[item.__name] = {
+            status: item.__requestEnable,
+            name: item.__name
           }
         })
-        this.$emit('changeStatus', res.server_status)
+        each(this.deviceData, (item) => {
+          if (deviceStatus[item.name]) {
+            item.status = deviceStatus[item.name].status
+          }
         })
+      } else {
+        this.$emit('changeStatus', false)
+      }
     }
   },
   mounted () {
     this.getDevice()
     this.getworkingSubclasses()
-    // setInterval(this.getDeviceStatus, 2000)
+    this.getDeviceStatus()
   }
 }
 </script>

src/views/edgeServer/edgeServerConfigure/index.vue

@@ -16,7 +16,7 @@
       @row-remove="handleRowRemove"
       @dialog-cancel="handleDialogCancel"
       @set-device="drawerShow"
-      @exec="handleDialogFormVisible">
+      @exec="setServerExec">
       <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
     </d2-crud>
 
@@ -24,6 +24,7 @@
       size="95%"
       :append-to-body='true'
       :visible.sync="isDrawerShow"
+      @close="closeDrawer"
       >
       <div slot="title" >
         <span class="title-text">前置服务 {{selectedServerData.name}}  URL:{{selectedServerData.url}}</span>
@@ -35,10 +36,11 @@
         </el-tag>
         <el-alert v-if="this.selectedServerData.updated === 't'" title="设备配置已更改，请在服务配置界面重启对应服务生效" type="warning" style="width:400px;display: inline-block;vertical-align: middle; margin-left: 5px;" :closable="false" />
       </div>
-      <device :server='server' @changeStatus='changeSelectedServerStatus'/>
+      <device :server='server' @changeStatus='changeSelectedServerStatus' @changeServerConfig='changeSelectedServerConfig' />
     </el-drawer>
 
-    <el-dialog title="配置应用" :visible.sync="dialogFormVisible">
+    <el-dialog title="服务账号登录" :visible.sync="dialogFormVisible">
+    <el-alert  title="请先输入该服务的账号密码，再进行后续操作" type="warning" style="width:400px;display: inline-block;vertical-align: middle; margin-left: 5px;" :closable="false" />
       <el-form :model="form" :rules="rules" ref="form">
         <el-form-item label="账号" prop="username">
           <el-input v-model="form.username" ></el-input>
@@ -48,8 +50,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-
+        <el-button type="primary" @click="handleDialogFormVisible">确 定</el-button>
-        <el-button type="primary" @click="setServerExec">确 定</el-button>
       </div>
     </el-dialog>
 
@@ -359,33 +360,43 @@ export default {
       })
       done()
     },
-    setServerExec () {
+
-      this.$refs.form.validate(async (valid) => {
+    async setServerExec ({ row }) {
-        if (valid) {
+      let userInfo = sessionStorage.getItem(row.id)
+      this.dialogFormServerId = row.id
+      if (!userInfo) {
+        this.dialogFormVisible = true
+        return false
+      }
+      userInfo = JSON.parse(userInfo)
+
       try {
         await this.$api.SET_SERVER_EXEC({
           action: 'exec',
-              server_id: this.dialogFormServerId,
+          server_id: row.id,
           command: 'server_restart',
-              username: this.form.username,
+          username: userInfo.username,
-              password: this.form.password
+          password: userInfo.password
         })
         this.$message({
           message: '服务应用请求成功，请求动作已添加至请求队列中，请从服务监控页面查看结果',
           type: 'success'
         })
         this.dialogFormServerId = 0
+        this.getServers()
         this.dialogFormVisible = false
       } catch (e) {
         console.log(e)
       }
+    },
+    handleDialogFormVisible () {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          sessionStorage.setItem(this.dialogFormServerId, JSON.stringify(this.form))
+          this.dialogFormVisible = false
         }
       })
     },
-    handleDialogFormVisible ({ row }) {
-      this.dialogFormServerId = row.id
-      this.dialogFormVisible = true
-    },
     handleDialogCancel (done) {
       this.$message({
         message: '用户放弃改动',
@@ -404,10 +415,16 @@ export default {
       this.server = { id: row.id, url: row.url, port: row.port }
       this.isDrawerShow = true
     },
+    closeDrawer () {
+      this.server = { id: 0, url: '', port: '' }
+    },
     changeSelectedServerStatus (status) {
       this.selectedServerData.status = status || 'offline'
+    },
+    changeSelectedServerConfig (updated) {
+      this.getServers()
+      this.selectedServerData.updated = updated || 'f'
     }
-
   },
   mounted () {
     this.getServers()

src/views/edgeServer/edgeServerMonitor/index.vue

@@ -1,6 +1,6 @@
 <template>
     <d2-container>
-        <div :key="key">
+        <div>
             <el-card class="box-card" v-for="(item, index) in serverData" :key="index">
                 <div slot="header" class="device-header">
                     <span>前置服务 {{ item.server_name }} ({{ item.url }}:{{ item.port }} )</span>
@@ -8,17 +8,15 @@
                 <el-row :gutter="12">
                     <el-col :span="6" v-for="(i, k) in item.devices" :key="k">
                         <el-popover placement="top" trigger="click">
-                            <el-menu @select="(index) => setServeStatus(i.id, index)"
+                            <el-menu @select="(index) => setServerExec(i, index, item)"
                                 :style="{ 'borderRight': 'none' }">
-                                <el-menu-item index="0">
+                                <el-menu-item index="device_stop">
                                     <span slot="title">暂停</span>
                                 </el-menu-item>
-                                <el-menu-item index="1">
+                                <el-menu-item index="device_continue">
-                                    <span slot="title">重启</span>
+                                    <span slot="title">启动</span>
-                                </el-menu-item>
-                                <el-menu-item index="2">
-                                    <span slot="title">关闭</span>
                                 </el-menu-item>
+
                             </el-menu>
                             <el-card slot="reference"
                                 :class="{ 'box-card': true, 'online': i.deviceStatus, 'offline': !i.deviceStatus }">
@@ -35,7 +33,7 @@
                                     <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
                                         <span>IP/端口</span>
                                     </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.config ? i.config[2] : "" }}
+                                    <el-col :span="14" style="padding-left:0px;">：{{ i.config }}
                                     </el-col>
                                 </el-row>
                                 <el-row :gutter="24">
@@ -72,50 +70,125 @@
                         </el-popover>
                     </el-col>
                 </el-row>
-
             </el-card>
         </div>
+
+        <el-dialog title="服务账号登录" :visible.sync="dialogFormVisible">
+            <el-alert title="请先输入该服务的账号密码，再进行后续操作" type="warning" :closable="false" />
+            <el-form :model="form" :rules="rules" ref="form">
+                <el-form-item label="账号" prop="username">
+                    <el-input v-model="form.username"></el-input>
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                    <el-input type="password" v-model="form.password"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+
+                <el-button type="primary" @click="setUserInfo">确 定</el-button>
+            </div>
+        </el-dialog>
     </d2-container>
 </template>
 <script>
 
+import { unset, map } from 'lodash'
 export default {
   data () {
     return {
-
+      dialogFormVisible: false,
+      form: {
+        username: '',
+        password: ''
+      },
+      rules: {
+        username: [
+          { required: true, message: '请输入账号', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+      },
       serverData: [],
       deviceData: [],
-      key: false
+      deviceCommand: {}
     }
   },
 
   methods: {
-    async getServe () {
+    setUserInfo () {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          sessionStorage.setItem(this.deviceCommand.serverId, JSON.stringify(this.form))
+          this.form = {
+            username: '',
+            password: ''
+          }
+          this.dialogFormVisible = false
+        }
+      })
+    },
+    async setServerExec (device, command, server) {
+      let userInfo = sessionStorage.getItem(server.id)
+      if (!userInfo) {
+        this.deviceCommand = {
+          serverId: server.id
+        }
+
+        this.dialogFormVisible = true
+        return false
+      }
+      userInfo = JSON.parse(userInfo)
       try {
-        this.serverData = Object.values(await this.$api.GET_ALL_DEVICES())
+        await this.$api.SET_SERVER_EXEC({
-        this.serverData.forEach((element, index) => {
+          action: 'exec',
-          element.devices.forEach((item, i) => {
+          server_id: server.id,
-            this.$api.GET_SERVE_DEVICE_MONITORING('http://' + element.url + ':' + element.port, 'admin', '123456', item.device_name).then(res => {
+          command: command,
-              if (res.IsSuccess) {
+          device_name: device.device_name,
-                const temp = {
+          username: userInfo.username,
-                  config: res.Content.__config.split(' '),
+          password: userInfo.password
-                  startTime: res.Content.__startTime,
-                  captureSpendTime: res.Content.__captureSpendTime,
-                  success: res.Content.__success,
-                  failed: res.Content.__failed,
-                  failedMsg: res.Content.__failedMsg,
-                  deviceStatus: res.Content.__deviceStatus,
-                  device_name: item.device_name,
-                  device_type: item.device_type
-                }
-                this.$set(this.serverData[index].devices, i, temp)
-              }
-            })
         })
+        this.$message({
+          message: '请求成功，请求动作已添加至请求队列中',
+          type: 'success'
         })
+        this.dialogFormVisible = false
+        this.getServe()
       } catch (e) {
         console.log(e)
       }
+    },
+    async getServe () {
+      this.serverData = await this.$api.QUERY_SERVERS()
+      this.serverData.forEach((element, index) => {
+        this.$api.GET_SERVE_DEVICE_MONITORING('http://' + element.url + ':' + element.port, 'admin', '123456').then((deviceStatus) => {
+          if (deviceStatus.IsSuccess) {
+            const data = deviceStatus.Content
+            unset(data, '__status')
+            const deviceData = map(data, element => {
+              const config = element.__config.split(' ')
+              return {
+                config: config.length > 0 ? config[2] : '',
+                startTime: element.__startTime,
+                captureSpendTime: element.__captureSpendTime,
+                success: element.__success,
+                failed: element.__failed,
+                failedMsg: element.__failedMsg,
+                deviceStatus: element.__requestEnable,
+                device_name: element.__name,
+                device_type: config.length > 0 ? config[0] : ''
+              }
+            })
+            this.$set(this.serverData[index], 'devices', deviceData)
+          }
+        }).catch(() => {
+          this.$message({
+            message: this.serverData[index].name + '服务请求失败',
+            type: 'error'
+          })
+          this.$delete(this.serverData, index)
+        })
+      })
     }
   },
   mounted () {