EdgeManager/src/views/edgeServer/edgeServerMonitor/index.vue

<template>
  <d2-container>
    <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 }} )
            <el-tag
              :color="serveStatus[item.status].backgroundColor"
              :style="{color:serveStatus[item.status].textColor,borderColor:serveStatus[item.status].borderColor}"
            >
              {{ serveStatus[item.status].name }}
            </el-tag>
          </span>
        </div>
        <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) => setDeviceExec(i, index, item)"
                :style="{ borderRight: 'none' }"
              >
                <el-menu-item index="device_stop">
                  <span slot="title">暂停</span>
                </el-menu-item>
                <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,
                }"
              >
                <div slot="header" class="header-title">
                  <span>{{ i.device_name }}</span>
                </div>
                <el-row :gutter="24">
                  <el-col
                    :span="5"
                    style="padding-right: 0px; margin-bottom: 5px"
                  >
                    <span>设备类型</span>
                  </el-col>
                  <el-col :span="14" style="padding-left: 0px"
                    >：{{ i.device_type }}</el-col
                  >
                </el-row>
                <el-row :gutter="24">
                  <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 }}
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col
                    :span="5"
                    style="padding-right: 0px; margin-bottom: 5px"
                  >
                    <span>活动时间</span>
                  </el-col>
                  <el-col :span="14" style="padding-left: 0px"
                    >：{{ i.startTime }}</el-col
                  >
                </el-row>
                <el-row :gutter="24">
                  <el-col
                    :span="5"
                    style="padding-right: 0px; margin-bottom: 5px"
                  >
                    <span>采集耗时</span>
                  </el-col>
                  <el-col :span="14" style="padding-left: 0px"
                    >：{{ i.captureSpendTime }}</el-col
                  >
                </el-row>
                <el-row :gutter="24">
                  <el-col
                    :span="5"
                    style="padding-right: 0px; margin-bottom: 5px"
                  >
                    <span>成功次数</span>
                  </el-col>
                  <el-col :span="14" style="padding-left: 0px"
                    >：{{ i.success }}</el-col
                  >
                </el-row>
                <el-row :gutter="24">
                  <el-col
                    :span="5"
                    style="padding-right: 0px; margin-bottom: 5px"
                  >
                    <span>失败次数</span>
                  </el-col>
                  <el-col :span="14" style="padding-left: 0px"
                    >：{{ i.failed }}</el-col
                  >
                </el-row>
                <el-row :gutter="24">
                  <el-alert
                    v-if="i.failedMsg"
                    :title="i.failedMsg"
                    type="error"
                    :closable="false"
                  >
                  </el-alert>
                  <div v-else style="height: 35px"></div>
                </el-row>
              </el-card>
            </el-popover>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </d2-container>
</template>
<script>
import { unset, map } from 'lodash'
export default {
  data () {
    return {
      serverData: [],
      deviceData: [],
      deviceCommand: {},
      serveStatus: {
        online: {
          name: '在线',
          textColor: '#67c23a',
          backgroundColor: '#f0f9eb',
          borderColor: '#e1f3d8'
        },
        offline: {
          name: '离线',
          textColor: '#67c23a',
          backgroundColor: '#f0f9eb',
          borderColor: '#e1f3d8'
        }
      }
    }
  },

  methods: {
    async setDeviceExec (device, command, server) {
      try {
        await this.$api.SET_SERVER_EXEC({
          action: 'exec',
          server_id: server.id,
          command: command,
          device_name: device.device_name,
          username: 'admin',
          password: process.env.VUE_APP_HSLSERVER_PASSWORD
        })
        this.$message({
          message: '请求成功，请求动作已添加至请求队列中',
          type: 'success'
        })
        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',
            process.env.VUE_APP_HSLSERVER_PASSWORD
          )
          .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)
              this.$set(this.serverData[index], 'status', 'online')
            }
          })
          .catch(() => {
            this.$message({
              message: this.serverData[index].name + '服务请求失败',
              type: 'error'
            })
            this.$set(this.serverData[index], 'status', 'offline')
          })
      })
    }
  },
  mounted () {
    this.getServe()
    setInterval(()=>{
      this.getServe()
    }, 30000)
  }
}
</script>
<style scoped>
.box-card {
  margin: 5px 0px;
  color: #fff;
  font-weight: bold;
}

.device-header {
  color: #000;
  font-weight: bold;
  font-size: 18px;
}

.online {
  background-color: #67c23a;
}

.offline {
  background-color: #666;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.header-title {
  font-size: 18px;
}
</style>