DeviceDeteils.vue

<template>
  <!-- 网元详细信息展示对话框 -->
  <el-dialog
    @close="close"
    v-dialogDrag
    style="text-align: center" width='900px' top="16vh"
    :title="$t('DeviceDetails.deviceDetailInfo')"
    v-if="deviceDetailsVisible"
    :visible.sync="deviceDetailsVisible">
    <div style="text-align: center;padding: 0px;">
      <table style="margin:auto" class="device-detail-tb">
        <tr style="line-height: 50px;">
          <td style="width: 90px;"><label>{{ $t('DeviceDetails.displayName') }}：</label></td>
          <td style="width: 180px; text-align: left;"><label v-text="showDevice.displayName"></label></td>
          <td style="width: 90px;"><label>{{ $t('DeviceDetails.deviceTypeKey') }}：</label></td>
          <td style="width: 180px; text-align: left;"><label v-text="showDevice.deviceTypeKey"></label></td>
          <td style="width: 90px;"><label>{{ $t('DeviceDetails.deviceModel') }}：</label></td>
          <td style="width: 180px; text-align: left;"><label v-text="showDevice.deviceModel"></label></td>
        </tr>
        <tr style="line-height: 50px;">
          <td><label>{{ $t('DeviceDetails.deviceVersion') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.deviceVersion"></label></td>
          <td><label>{{ $t('DeviceDetails.belongedSubnet') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.subnetKey"></label></td>
          <td><label>{{ $t('DeviceDetails.station') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.station"></label></td>
        </tr>
        <tr style="line-height: 50px;">
          <td><label>{{ $t('DeviceDetails.IPAddress') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.ipAddress"></label></td>
          <td><label>{{ $t('DeviceDetails.manageType') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.manageType"></label></td>
          <td><label>{{ $t('DeviceDetails.deviceStatus') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.deviceStatus"></label></td>
        </tr>
        <tr style="line-height: 50px;">
          <td><label>{{ $t('DeviceDetails.bussIPAddress') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.bussIpAddress"></label></td>
          <td><label>{{ $t('DeviceDetails.bussManageType') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.bussManageType"></label></td>
          <td><label>{{ $t('DeviceDetails.numberSerial') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.numberSerial"></label></td>
<!--          <td><label>{{ $t('DeviceDetails.MACAddress') }}：</label></td>-->
<!--          <td style="text-align: left;"><label v-text="showDevice.mac"></label></td>-->
        </tr>
        <tr style="line-height: 50px;">
          <td><label>{{ $t('DeviceDetails.deviceDetailInfo') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.description"></label></td>
          <td><label>{{ $t('DeviceDetails.startTime') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.startTime"></label></td>
        </tr>
        <tr style="line-height: 50px">
          <td>
            <el-button @click="show" size="mini">
              {{info}}
            </el-button>
          </td>
        </tr>
        <tr style="line-height: 50px" v-show="showBook">
          <td><label>{{ $t('DeviceDetails.manager') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.manager"></label></td>
          <td><label>{{ $t('DeviceDetails.managerPhone') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.managerPhone"></label></td>
          <td><label>{{ $t('DeviceDetails.brand') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.brand"></label></td>
        </tr>
        <tr style="line-height: 50px" v-show="showBook">
          <td><label>{{ $t('DeviceDetails.manufacturerLiaison') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.manufacturerLiaison"></label></td>
          <td><label>{{ $t('DeviceDetails.manufacturerPhone') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.manufacturerPhone"></label></td>
          <td><label>{{ $t('DeviceDetails.belongedLocation') }}：</label></td>
          <td style="text-align: left;"><label v-text="showDevice.locationName"></label></td>
        </tr>
      </table>
    </div>
    <div slot="footer" style="margin-left: -100px">
      <el-button type="primary" size="mini" @click="close">{{ $t('common.ok') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SubnetService from '../../../domain/services/SubnetService'
import HelperUtil from "../../../utils/HelperUtil";

export default {
  props: ['command'],
  data: function () {
    return {
      deviceDetailsVisible: true,
      device: this.command.target,
      showBook: false,
      showDevice: {
        displayName: '',
        deviceTypeKey: '',
        deviceModel: '',
        locationKey: '',
        cabinetKey: '',
        subnetKey: '',
        ipAddress: '',
        bussIpAddress: '',
        deviceStatus: '',
        brand: '',
        manufacturerLiaison: '',
        manufacturerPhone: '',
        manager: '',
        managerPhone: '',
        station: '',
        macAddress: '',
        manageType: '',
        bussManageType: '',
        numberSerial: '',
        locationName: ''
      },
      subnetCollection: {}
    }
  },
  methods: {
    /**
     * @Description  : 显示控制
     * @author       : ls
     * @date         : 2020/5/1 16:15
     * @param        :
     * @return       :
     */
    show: function () {
      this.showBook = !this.showBook
    },
    close () {
      this.command.done()
    },

    /***
       * @Description  : 初始化显示
       * @author       : zf
       * @date         : 2019/05/14 19:47
       */
    InitShow: function () {
      this.showDevice['displayName'] = this.device.displayName
      this.showDevice['deviceTypeKey'] = this.device.deviceTypeName
      this.showDevice['deviceModel'] = this.device.deviceModel
      this.showDevice['subnetKey'] = this.device.subnetKey
      this.showDevice['station'] = this.device.station
      this.showDevice['locationName'] = this.device.locationName
      this.showDevice['ipAddress'] = this.device.ipAddress
      this.showDevice['bussIpAddress'] = this.device.bussIpAddress
      this.showDevice['deviceStatus'] = this.device.deviceStatus
      this.showDevice['deviceVersion'] = this.device.deviceVersion
      this.showDevice['brand'] = this.device.brand
      this.showDevice['manufacturerLiaison'] = this.device.manufacturerLiaison
      this.showDevice['manufacturerPhone'] = this.device.manufacturerPhone
      this.showDevice['manager'] = this.device.manager
      this.showDevice['managerPhone'] = this.device.managerPhone
      this.showDevice['numberSerial'] = this.device.uuid
      this.showDevice['deviceDetailInfo'] = this.device.description
      this.showDevice['startTime'] = HelperUtil.timeTran(this.device.startTime)
      switch (this.device.manageType) {
        case 0:
          this.showDevice['manageType'] = 'SNMP'
          break
        case 1:
          this.showDevice['manageType'] = 'ICMP'
          break
        case 2:
          this.showDevice['manageType'] = 'IPMI'
          break
      }
      if (this.device.bussIpAddress !== '') {
        switch (this.device.bussManageType) {
          case 0:
            this.showDevice['bussManageType'] = 'SNMP'
            break
          case 1:
            this.showDevice['bussManageType'] = 'ICMP'
            break
          default:
            this.showDevice['bussManageType'] = ''
            break
        }
      } else {
        this.showDevice['bussManageType'] = ''
      }
      switch (this.showDevice.deviceStatus) {
        case 0:
          this.showDevice.deviceStatus = this.$t('DeviceDetails.inWork')
          break
        case 1:
          this.showDevice.deviceStatus = this.$t('DeviceDetails.noWork')
          break
        default:
          break
      }
    },

    /**
       * @Description  ：获取全部子网信息
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 14:06
       */
    getAllSubnet: function () {
      let _this = this
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        _this.subnetCollection = result
        if (_this.subnetCollection[_this.device.subnetKey] !== undefined) {
          _this.showDevice.subnetKey = _this.subnetCollection[_this.device.subnetKey].subnetName
        }
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    }
  },
  created () {
    this.getAllSubnet()
    this.InitShow()
  },

  computed: {
    info: function () {
      if (this.showBook === true) {
        return this.$t('BooKManagement.clickHide')
      } else {
        return this.$t('BooKManagement.clickShow')
      }
    }
  },
}
</script>
<style scoped>
  .device-detail-tb /deep/ td{
    text-align: right;
  }
</style>