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

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">
-                                    <span slot="title">重启</span>
-                                </el-menu-item>
-                                <el-menu-item index="2">
-                                    <span slot="title">关闭</span>
+                                <el-menu-item index="device_continue">
+                                    <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())
-        this.serverData.forEach((element, index) => {
-          element.devices.forEach((item, i) => {
-            this.$api.GET_SERVE_DEVICE_MONITORING('http://' + element.url + ':' + element.port, 'admin', '123456', item.device_name).then(res => {
-              if (res.IsSuccess) {
-                const temp = {
-                  config: res.Content.__config.split(' '),
-                  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)
-              }
-            })
-          })
+        await this.$api.SET_SERVER_EXEC({
+          action: 'exec',
+          server_id: server.id,
+          command: command,
+          device_name: device.device_name,
+          username: userInfo.username,
+          password: userInfo.password
         })
+        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 () {