kd-aiot-frontend-eam/src/views/ledgerAssets/subDevice/components/detail.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="附属设备详情"
    width="1100px"
    append-to-body
    @close="cancel"
  >
    <el-form ref="form" :model="form" disabled label-width="120px" v-loading="loading">
      <el-row>
        <el-col :span="8">
          <el-form-item label="设备编号">
            <span>{{ form.deviceCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备类型">
            <span>{{ form.classifyName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称">
            <span>{{ form.name }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="设备品牌">
            <span>{{ form.brandName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备型号">
            <span>{{ form.modelName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="排序号">
            <span>{{ form.deviceSort }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态">
            <span :style="{ color: form.activityStatus == 1 ? '#0F83FF' : 'red' }">
              {{ form.activityStatus == 1 ? '启用' : '停用' }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="tit">连接配置</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="IP">
            <span>{{ form.extraInfo?.ip }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="端口">
            <span>{{ form.extraInfo?.port }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="账号">
            <span>{{ form.extraInfo?.account }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密码">
            <span>{{ form.extraInfo?.password }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="cancel">关 闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
import * as DeviceApi from '@/api/ledgerAssets/device'

export default {
  name: 'SubDeviceDetail',
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        name: undefined,
        deviceCode: undefined,
        classifyName: undefined,
        brandName: undefined,
        modelName: undefined,
        deviceSort: undefined,
        activityStatus: undefined,
        extraInfo: {
          ip: undefined,
          port: undefined,
          account: undefined,
          password: undefined
        }
      }
    }
  },
  methods: {
    /** 打开弹窗 */
    open(id) {
      this.visible = true
      this.loading = true

      DeviceApi.getDevice(id)
        .then((res) => {
          this.form = res
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
        .finally(() => {
          this.loading = false
        })
    },

    /** 取消 */
    cancel() {
      this.resetForm()
      this.visible = false
    },

    /** 重置表单 */
    resetForm() {
      this.form = {
        name: undefined,
        deviceCode: undefined,
        classifyName: undefined,
        brandName: undefined,
        modelName: undefined,
        deviceSort: undefined,
        activityStatus: undefined,
        extraInfo: {
          ip: undefined,
          port: undefined,
          account: undefined,
          password: undefined
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tit {
  margin-left: 10px;
  font-weight: bold;
  border-left: 3px solid #9266f9;
  padding-left: 10px;
  margin-bottom: 14px;
}
</style>