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

2022-08-20 00:11:27 +08:00
parent fd060438bf
commit cf05ec7653
4 changed files with 252 additions and 90 deletions
--- a/src/api/modules/edgeServer.api.js
+++ b/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=' + deviceName
+      url: url + '/Edge/DeviceData?data=/'
    })
  },
  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'
+    })
+  }
 })
--- a/src/views/edgeServer/edgeServerConfigure/device.vue
+++ b/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
-          each(devicePointData, (item) => {
+          let devicePointData = this.devicePointData
+          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 })
-        this.$refs.deviceConfigure.deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue
+        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, userInfo.username, userInfo.password, { data: deviceConfigure.Content })
+        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 () {
-      this.$api.GET_DEVICE_STATUS(this.serverData.id).then(res => {
-        each(this.deviceData, (item) => {
-          if (item.id in res.device_status) {
-            item.status = res.device_status[item.id]
+    getUserInfo () {
+      const userInfo = sessionStorage.getItem(this.serverData.id)
+      if (!userInfo) {
+        this.dialogFormVisible = true
+        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>
--- a/src/views/edgeServer/edgeServerConfigure/index.vue
+++ b/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="setServerExec">确 定</el-button>
+        <el-button type="primary" @click="handleDialogFormVisible">确 定</el-button>
      </div>
    </el-dialog>

@@ -359,33 +360,43 @@ export default {
      })
      done()
    },
-    setServerExec () {
-      this.$refs.form.validate(async (valid) => {
+
+    async setServerExec ({ row }) {
+      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: row.id,
+          command: 'server_restart',
+          username: userInfo.username,
+          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) {
-          try {
-            await this.$api.SET_SERVER_EXEC({
-              action: 'exec',
-              server_id: this.dialogFormServerId,
-              command: 'server_restart',
-              username: this.form.username,
-              password: this.form.password
-            })
-            this.$message({
-              message: '服务应用请求成功，请求动作已添加至请求队列中，请从服务监控页面查看结果',
-              type: 'success'
-            })
-            this.dialogFormServerId = 0
-            this.dialogFormVisible = false
-          } catch (e) {
-            console.log(e)
-          }
+          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()
--- a/src/views/edgeServer/edgeServerMonitor/index.vue
+++ b/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 () {