vue-element-equipment-master/src/views/basicInfo/index.vue

<template>
  <div class="pagemain">
    <div class="pageTitle">
      {{ $t("route.basicInfo") }}
    </div>
    <div class="pageCon">
      <el-form
        class="detail-form info-form"
        label-width="160px"
        label-position="right"
        :model="formData"
      >
        <el-form-item :label="$t('table.productName')">
          <el-input v-model="formData.name" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.productMode')">
          <el-input v-model="formData.model" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.macAddress')">
          <el-input v-model="formData.mac" disabled />
        </el-form-item>
        <!-- <el-form-item :label="$t('table.serialNumber')">
          <el-input v-model="formData.serialNum" disabled />
        </el-form-item> -->
        <el-form-item :label="$t('table.firmwareVercion')">
          <el-input v-model="formData.version" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.deviceID')">
          <el-input v-model="formData.id" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.deviceIP')">
          <el-input v-model="formData.ip" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.gatewal')">
          <el-input v-model="formData.gateway" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.suonetMask')">
          <el-input v-model="formData.subnet" disabled />
        </el-form-item>

        <el-form-item :label="$t('table.aiVol')">
          <el-input v-model="formData.aiVol" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.aoVol')">
          <el-input v-model="formData.aoVol" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.dhcp')">
          <!-- <el-input v-model="formData.dhcp" disabled /> -->
          <span v-if="formData.dhcp == 'on'" style="padding-left: 12px;">{{ $t("table.on") }}</span>
          <span v-if="formData.dhcp == 'off'" style="padding-left: 12px;">{{ $t("table.off") }}</span>
        </el-form-item>
        <el-form-item :label="$t('table.playStatus')">
          <el-input v-model="formData.playStatus" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.DNS1')">
          <el-input v-model="formData.dns0" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.DNS2')">
          <el-input v-model="formData.dns1" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.WAN_IP_AddressIP')">
          <el-input v-model="formData.wanInfo" disabled />
        </el-form-item>
        <!-- <el-form-item :label="$t('table.aiVol')" class="volformbox">
          <el-slider v-model="formData.aiVol" :step="1" :max="10" disabled />
          <span class="volspan">{{ formData.aiVol }}</span>
        </el-form-item>
        <el-form-item :label="$t('table.aoVol')" class="volformbox">
          <el-slider v-model="formData.aoVol" :step="1" :max="10" disabled />
          <span class="volspan">{{ formData.aoVol }}</span>
        </el-form-item> -->

        <!-- <el-form-item :label="$t('table.storageSpaces')">
          <el-input v-model="formData.cunchu" disabled />
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { deviceInfo } from '@/api/index.js'
export default {
  name: 'BasicInfo',
  data() {
    return {
      formData: {
        id: '', // 设备编号
        version: '', // 版本号
        ip: '', // IP地址
        gateway: '', // IP网关
        subnet: '', // 子网掩码
        mac: '', // MAC地址
        instructPort: '', // 指令端口
        corestreamPort: '', // 码流端口
        functionType: '', // 功能类型
        sipUsername: '', // SIP用户名称
        sipPassword: '', // SIP用户密码
        sipAddress: '', // SIP服务器地址
        microphone: '', // 内置麦克凤开关
        name: '',
        model: '', // 设备型号
        sip: '', // SIP启用状态
        udp: '', // UDP启用状态
        onvif: '', // ONVIF启用状态
        serverIp: '', // 服务端IP

        aiVol: 0, // 音频输入音量（播放音量）
        aoVol: 0, // 音频输出音量（录音音量）
        dhcp: 'on',

        playStatus: '',// 播放状态
        dns0: '',// dns1
        dns1: '',// dns2
        wanDomainName: '',// Wan域名
        wanIP: '',// wan IP
        wanInfo: '',// wan信息
      }
    }
  },
  mounted() {
    this.getDeviceInfo()
  },
  methods: {
    getDeviceInfo() {
      deviceInfo({}).then((res) => {
        if (res.code === 200) {
          this.formData = res.data
          this.formData.aiVol = parseInt(res.data.aiVol) || 0
          this.formData.aoVol = parseInt(res.data.aoVol) || 0
          this.formData.dns0 = res.data.dns0 || ''
          this.formData.dns1 = res.data.dns1 || ''
          this.formData.wanIP = res.data.wanIP || ''
          if(res.data.wanDomainName !== undefined){
            this.formData.wanDomainName = res.data.wanDomainName || ''
            console.log('AAA', res)
          }
          this.formData.wanInfo = `${this.formData.wanDomainName} (${this.formData.wanIP})`

        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .info-form .el-slider {
  width: 30%;
  margin-left: 16px;
}
::v-deep .info-form .el-radio {
  margin-left: 16px;
}
::v-deep .volformbox .el-form-item__content {
  display: flex;
  .volspan {
    padding-left: 16px;
  }
}
</style>