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

<template>
  <view class="container py2">
    <view class="mx3 p3 bg-color-white" style="border-radius: 16rpx">
      <equipment-line title="状态" :content="statusMap[infoData.status]" />
      <equipment-line title="要求" :content="infoData.requirement" />
      <equipment-line title="执行标准" :content="infoData.remark" />
      <equipment-line title="实际开始" :content="infoData.actualStartTime" />
      <equipment-line title="完成时间" :content="infoData.actualEndTime" />
    </view>
    <view class="m3 p3 bg-color-white" style="border-radius: 16rpx">
      <view class="pb-3 border-bottom">
        <view class="f-size-30 main-color-text w200">检查项目</view>
        <view class="f-size-26 text-color-3 border-bottom py2" v-for="(item, index) in requirementList" :key="index">
          <view class="d-flex text-color-6">
            <view class="w180">保养周期：</view>
            <view class="text-color-3">{{ item.period }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w180">管理项目：</view>
            <view class="text-color-3">{{ item.manageItem }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w180">检查项目：</view>
            <view class="text-color-3">{{ item.checkItem }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">方法工具：</view>
            <view class="text-color-3">{{ item.method }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">保养级别：</view>
            <view class="text-color-3">{{ item.checkLevel }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">标准类型：</view>
            <view class="text-color-3">{{ item.sbTypeName }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">内容：</view>
            <view class="text-color-3">{{ item.remark }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">填报信息：</view>
            <view class="text-color-3 bold">{{ item.value }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">备注：</view>
            <view class="text-color-3">{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="m3 p3 bg-color-white" style="border-radius: 16rpx">
      <view class="d-flex py3 border-bottom">
        <view class="f-size-26 text-color-9 w200">标准图片</view>
        <view class="f-size-26 text-color-3 d-flex ">
          <block v-for="(item, index) in checkImgList" :key="index">
            <u-image width="100" class="mr-2" :src="item" @click="handlePre(index)" mode="widthFix"><u-loading
                slot="loading"></u-loading></u-image>
          </block>
        </view>
      </view>
    </view>
    <view class="m3 p3 bg-color-white" style="border-radius: 16rpx">
      <equipment-line title="检查结果" :content="infoData.feedback" />
    </view>
    <view class="p-fixed d-flex j-around a-center footer">
      <view v-if="infoData.status ===
        1 ||
        infoData.status ===
        4" class="main-color-bg text-color-white common" @tap="handleExecute">接收</view>
      <view v-if="infoData.status === 2 && displayTime === 0" class="main-color-bg text-color-white common2"
        @tap="handleStart">
        <u-icon name="play-circle-fill"></u-icon> 开始计时
      </view>
      <view v-if="infoData.status === 2 && displayTime > 0" class="main-color-bg text-color-white common2"
        @tap="handlePause">
        <u-icon name="play-circle-fill" v-if="timerStatus === 2"></u-icon><u-icon name="pause-circle-fill"
          v-else></u-icon> {{ time }}
      </view>
      <view v-if="infoData.status === 2" class="main-color-bg text-color-white common" @tap="handleFinish">完成</view>
      <view v-if="infoData.status === 3" class="main-color-bg text-color-white common" @tap="handleRepair">发起报修</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoData: {},
      detailId: '',
      statusMap: null,
      sbStatusMap: null,
      filter: 0,
      searchType: null,
      checkImgList: [],
      requirementList: [],
      displayTime: 0,
      timer: null,
      timerStatus: 0,
      time: '00:00:00'
    }
  },
  onLoad(options) {
    this.detailId = options.detailId
    this.searchType = options.searchType
    this.filter = options.filter
    this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.CHECK_JOB_STATUS)
    this.sbStatusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.SB_INFO_STATUS)
  },
  onShow() {
    this.initData()
  },

  methods: {
    handlePre(index) {
      uni.previewImage({
        urls: this.checkImgList,
        current: this.checkImgList[index],
        success() { }
      })
    },
    handleExecute() {
      this.$Http.execute(this.infoData).then(res => {
        this.initData()
        uni.showToast({ title: '已接收，请及时完成任务' })
      })
    },
    handleFinish() {
      uni.navigateTo({
        url: `/pages/maintain/finish?id=${this.infoData.id}&standardId=${this.infoData.standardId}`
      })
    },
    handleRepair() {
      uni.navigateTo({
        url: '/pages/repair-add/repair-add?detailId=' + this.infoData.sbId
      })
    },
    initData() {
      const that = this
      this.$Http
        .fetchCheckJob({
          id: this.detailId
        })
        .then(res => {
          this.infoData = res.data
          this.$Http.fetchCheckStandard({ id: res.data.standardId }).then(response => {
            if (res.data.conTask) {
              console.log(2)
              that.requirementList = JSON.parse(res.data.conTask)
            } else {
              that.requirementList = response.data.requirementList
            }
          })
          if (res.data.checkImgList.length > 0) {
            this.checkImgList = res.data.checkImgList.map(item => {
              return this.$BaseTool.UserUtil.getFileUrl(item.url)
            })
          }
          this.$Http.timerStatus({ referenceId: this.infoData.id }).then(resp => {
            this.timerStatus = resp.data.timerStatus
            this.$Http.timerAccumulatedTime({ referenceId: this.infoData.id }).then(res => {
              this.displayTime = res.data
              this.updateDisplay()
              if (resp.data.timerStatus === 1) {
                that.startLocalTimer()
              }
            })
          })
        })
    },
    handleStart() {
      this.$Http.timerStart({ referenceId: this.infoData.id }).then(res => {
        uni.showToast({ title: '已开始计时' })
        this.startLocalTimer()
      })
    },
    handlePause() {
      if (this.timerStatus === 2) {
        this.$Http.timerResume({ referenceId: this.infoData.id }).then(res => {
          this.timerStatus = res.data.timerStatus
          this.startLocalTimer()
        })
        return
      }
      this.$Http.timerPause({ referenceId: this.infoData.id }).then(res => {
        this.timerStatus = res.data.timerStatus
        clearInterval(this.timer)
      })
    },
    // 本地计时器（用于实时显示）
    startLocalTimer() {
      this.timer = setInterval(() => {
        this.displayTime += 1000
        this.updateDisplay()
      }, 1000)
    },
    updateDisplay() {
      const minutes = Math.floor(this.displayTime / 60000)
      const seconds = Math.floor((this.displayTime % 60000) / 1000)
      this.time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  }
}
</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 100rpx;
      border-radius: 30rpx;
      background-color: #0082ff;
      color: #fff;
    }

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