BottleInfo.vue

<template>
  <el-form ref="bottleInfo" :model="bottleInfo" label-width="120px">
    <div style="color: #1890ff;margin-bottom: 15px">气瓶基本信息</div>
    <el-row>
      <el-col :span="8">
        <el-form-item label="储配站">
          <span>{{ bottleInfo.stationName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="气瓶条码">
          <span>{{ bottleInfo.bottleCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="自有编号">
          <span>{{ bottleInfo.myselfNum }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="在站/离站">
          <span v-if="bottleInfo.currentStatus == '0'">在站</span>
          <span v-if="bottleInfo.currentStatus == '1'">离站</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="气瓶状态">
          <span v-if="bottleInfo.bottleStatus == '1'">正常</span>
          <span v-if="bottleInfo.bottleStatus == '2'">逾期未检</span>
          <span v-if="bottleInfo.bottleStatus == '3'">报废</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="空满状态">
          <span v-if="bottleInfo.emptyType == '0'">空瓶</span>
          <span v-if="bottleInfo.emptyType == '1'">满瓶</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="登记日期">
          <span>{{ bottleInfo.registerDate }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="下检日期">
          <span>{{ bottleInfo.nextCheckDate }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报废日期">
          <span>{{ bottleInfo.scrapDate }}</span>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="8">
        <el-form-item label="使用登记代码">
          <span>{{ bottleInfo.useRegisterCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="充装介质">
          <span>{{ bottleInfo.chargeMedium }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <div style="color: #1890ff;margin-bottom: 15px ">气瓶规格参数</div>

    <el-row>
      <el-col :span="8">
        <el-form-item label="制造单位">
          <span>{{ bottleInfo.produceUnit }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="制造年月">
          <span>{{ bottleInfo.produceDate }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="出厂编号">
          <span>{{ bottleInfo.produceCode }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="气瓶规格Kg/MPa">
          <span>{{ bottleInfo.bottleSpecs }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="气瓶容积L">
          <span>{{ bottleInfo.bottleCapacity }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="公称压力Mpa">
          <span>{{ bottleInfo.ratedPresure }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="壁厚">
          <span>{{ bottleInfo.wallThickness }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="皮重">
          <span>{{ bottleInfo.tare }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { getInfo } from "@/api/gasBottleTrack/gasBottleManage";
  export default {
    name: "bottle-info",
    props:{
      bottleId: {
        type: Number
      }
    },
    data(){
      return{
        bottleInfo: {}
      }
    },
    created(){
      this.getBottleInfo();
    },
    methods:{
      getBottleInfo(){
        getInfo(this.bottleId).then(res =>{
          if(res.code == 200){
            this.bottleInfo = res.data;
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>