xiamen-sb-uniapp/pages/lubrication-detail/lubrication-detail.vue

<template>
  <view class="container py2">
    <view class="mx3 p3 bg-color-white" style="border-radius: 16rpx">
      <!-- <view class="f-size-32 f-weight-6 py2 mb-2 title">任务信息</view> -->
      <equipment-line title="任务名称" :content="infoData.name" />
      <equipment-line title="计划名称" :content="infoData.planName" />
      <equipment-line title="设备" :content="infoData.sbName" />
      <equipment-line title="部件" :content="infoData.partName" />
      <equipment-line title="部件编号" :content="infoData.partNo" />
      <equipment-line title="任务开始时间" :content="infoData.startTime" />
      <equipment-line title="任务结束时间" :content="infoData.endTime" />
      <equipment-line
        title="实际开始时间"
        :content="infoData.actualStartTime"
      />
      <equipment-line title="实际结束时间" :content="infoData.actualEndTime" />
      <equipment-line
        title="设备状态"
        :content="sbStatusMap[infoData.sbStatus]"
      />
      <equipment-line title="任务状态" :content="statusMap[infoData.status]" />
      <equipment-line title="要求" :content="infoData.requirement" />
      <equipment-line title="备注" :content="infoData.remark" />
      <equipment-line title="检查结果" :content="infoData.feedback" />
    </view>
    <view class="p-fixed d-flex j-around a-center footer">
      <view class="main-color-bg text-color-white common" @tap="handleUpdate"
        >修改</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoData: {},
      detailId: "",
      statusMap: null,
      sbStatusMap: null,
    };
  },
  onLoad(options) {
    this.detailId = options.detailId;
    this.statusMap = this.$DictCache.getLabelByValueMapByType(
      this.$DictCache.TYPE.CHECK_JOB_STATUS
    );
    this.sbStatusMap = this.$DictCache.getLabelByValueMapByType(
      this.$DictCache.TYPE.CHECK_JOB_SB_STATUS
    );
  },
  onShow() {
    this.initData();
  },
  methods: {
    handleUpdate() {
      uni.navigateTo({
        url: "/pages/lubrication-add/lubrication-add?detailId=" + this.detailId,
      });
    },
    initData() {
      this.$Http
        .fetchCheckJob({
          id: this.detailId,
        })
        .then((res) => {
          this.infoData = res.data;
        });
    },
  },
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}

.container {
  padding-bottom: 100rpx;

  .footer {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10000;
  }

  .title {
    border-bottom: 1rpx solid #f4f4f4;
  }

  .img {
    width: 100rpx;
    height: 100rpx;
  }

  .p-fixed {
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

    .common {
      padding: 15rpx 200rpx;
      border-radius: 30rpx;
      background-color: #0082ff;
      color: #fff;
    }
  }
}
</style>