station-test-ui/src/views/device/hyd_equipment/detail.vue

<template>
  <el-drawer
    title="设备信息"
    :visible.sync="drawerVisible"
    :direction="direction"
    size="45%"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="设备信息" name="first">
        <el-divider content-position="left">基础信息</el-divider>
        <el-row>
          <div style="margin-bottom: 30px; margin-left: 50px">
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">设备分类：</pre>
                <span class="item">{{ record.classification }}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">设备型号：</pre>
                <span class="item">{{ record.equipment_model }}</span>
              </div>
              <div class="detail-item">
                <span>名称：</span>
                <span class="item">{{ record.name }}</span>
              </div>
              <div class="detail-item">
                <span>序列号：</span>
                <span class="item">{{ record.serial_number }}</span>
              </div>
               <div class="detail-item">
                <span>检验状态：</span>
                <span class="item">{{ record.check_status1}}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">设备类别：</pre>
                <span class="item">{{ record.equ_type_name }}</span>
              </div>
              <div class="detail-item">
                <span>发放单位：</span>
                <span class="item">{{ record.issue_unit}}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">固定资产编号：</pre>
                <span class="item">{{ record.fixed_asset_number }}</span>
              </div>
              <div class="detail-item">
                <span>上次校验时间：</span>
                <span class="item">{{ record.check_last_time}}</span>
              </div>
                <div class="detail-item">
                <span>设备状态：</span>
                <span class="item">{{ record.status1}}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">物料号：</pre>
                <span class="item">{{ record.material_number}}</span>
              </div>
              <div class="detail-item">
                <span>出厂编号：</span>
                <span class="item">{{ record.factory_number}}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">类固资产编号：</pre>
                <span class="item">{{ record.fixed_asset_number2 }}</span>
              </div>
               <div class="detail-item">
                <span>下次校验时间：</span>
                <span class="item">{{ record.check_next_time}}</span>
              </div>

            </el-col>
            <el-col :span="6"></el-col>
          </div>
        </el-row>
      </el-tab-pane>
      
    </el-tabs>
  </el-drawer>
</template>
<script>
import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
export default {
  props: ["detailVisible", "record"],
  mixins: [rlListOperate],
  data() {
    return {
      drawer: false,
      direction: "rtl",
      activeName: "first",
      nowData: [],
      queryParam: {
        device_number: "",
      }
    };
  },
  methods: {
    handleClick(){

    }
  },
  computed: {
    drawerVisible: {
      set(val) {
        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
      },
      get() {
        return this.detailVisible; // 表示获取父组件的值
      },
    },
  },
};
</script>
<style scoped>
.detail-item {
  width: 100%;
  padding: 15px 0px;
  list-style-type: none;
}
.item {
  font-size: 14px;
  color: black;
  margin-top: 5px;
}
.el-table .warning-row {
  background: oldlace !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}
.pagination-container{
  padding-left:25px;
  padding-right:25px;
}
</style>