share-space-vue/src/views/system/equipment/equipment_detail.vue

<template>
  <div class="app-container">
    <!-- 基本信息卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">设施ID：</span>
            <span>{{ equipmentData.equipmentId }}</span>
          </div>
          <div class="info-item">
            <span class="label">设施名称：</span>
            <span>{{ equipmentData.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">设施类型：</span>
            <dict-tag :options="dict.type.ss_equipment_type" :value="equipmentData.type"/>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">所属店铺：</span>
            <span>{{ equipmentData.storeName }}</span>
          </div>
          <div class="info-item">
            <span class="label">所属房间：</span>
            <span>{{ equipmentData.roomName }}</span>
          </div>
          <div class="info-item">
            <span class="label">状态：</span>
            <dict-tag :options="dict.type.ss_equipment_status" :value="equipmentData.status"/>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span>{{ parseTime(equipmentData.createTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">更新时间：</span>
            <span>{{ parseTime(equipmentData.updateTime) }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 设备信息卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">设备ID：</span>
            <span>{{ equipmentData.deviceId }}</span>
          </div>
          <div class="info-item">
            <span class="label">MAC地址：</span>
            <span>{{ equipmentData.device ? equipmentData.device.mac : '-' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">SN：</span>
            <span>{{ equipmentData.device ? equipmentData.device.sn : '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">设备状态：</span>
            <dict-tag :options="dict.type.ss_device_status" :value="equipmentData.device ? equipmentData.device.status : ''"/>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getEquipment } from "@/api/system/equipment";

export default {
  name: "EquipmentDetail",
  dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_device_status'],
  data() {
    return {
      equipmentData: {}
    };
  },
  created() {
    const equipmentId = this.$route.params.equipmentId;
    this.getEquipmentData(equipmentId);
  },
  methods: {
    getEquipmentData(equipmentId) {
      getEquipment(equipmentId).then(response => {
        this.equipmentData = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .box-card {
    margin-bottom: 20px;
  }
  .info-item {
    margin-bottom: 15px;
    .label {
      color: #606266;
      margin-right: 10px;
      font-size: 14px;
    }
  }
}
</style>