warewms-project-web/src/views/trace/process/info.vue

<template>
  <div class="app-container" v-if="open">
    <el-card class="box-card">
      <el-descriptions title="铜管基本信息" :column="3" border>
        <el-descriptions-item label="追溯编号">{{ retroactiveInfo.retroactiveId }}</el-descriptions-item>
        <el-descriptions-item label="产线">{{ retroactiveInfo.productionLine }}</el-descriptions-item>
        <el-descriptions-item label="批次号">{{ retroactiveInfo.batchNo }}</el-descriptions-item>
        <el-descriptions-item label="重量(KG)">{{ retroactiveInfo.weight }}</el-descriptions-item>
        <el-descriptions-item label="生产状态">
          <template>
            <dict-tag :options="dict.type.process" :value="retroactiveInfo.status"/>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-steps style="margin:20px 0 0 30px" direction="vertical" :active="retroactiveInfo.status">
      <el-step title="称重工序">
        <template slot="description">
          <el-descriptions :column="2" border style="margin:10px 0 10px 0">
            <el-descriptions-item label="称重完成时间">{{
                this.retroactiveHisttoyrMap['1'][0].createTime
              }}
            </el-descriptions-item>
            <el-descriptions-item v-if="retroactiveInfo.status>1 && retroactiveHisttoyrMap['2'] !=null" label="至下个工序完成经历时间">
              <span style="color: #3A71A8"
                    v-text="parseTimeInterval(this.retroactiveHisttoyrMap['1'][0].createTime,this.retroactiveHisttoyrMap['2'][0].createTime)"/>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{
                this.retroactiveHisttoyrMap['1'][0].remark
              }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-step>
      <el-step title="倒角工序">
        <template slot="description">
          <el-descriptions v-if="retroactiveHisttoyrMap['2']" :column="2" border style="margin:10px 0 10px 0">
            <el-descriptions-item label="倒角完成时间">
              {{this.retroactiveHisttoyrMap['2'][0].createTime }}
            </el-descriptions-item>
            <el-descriptions-item v-if="retroactiveInfo.status>2 && retroactiveHisttoyrMap['3'] !=null" label="至下个工序完成经历时间">
              <span style="color: #3A71A8"
                    v-text="parseTimeInterval(this.retroactiveHisttoyrMap['2'][0].createTime,this.retroactiveHisttoyrMap['3'][0].createTime)"/>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{
                this.retroactiveHisttoyrMap['2'][0].remark
              }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-step>
      <el-step title="铣面工序">
        <template slot="description">
          <el-descriptions v-if="retroactiveHisttoyrMap['3']" :column="3" border style="margin:10px 0 10px 0">
            <el-descriptions-item label="铣面完成时间">
              {{ this.retroactiveHisttoyrMap['3'][0].createTime }}
            </el-descriptions-item>
            <el-descriptions-item v-if="retroactiveInfo.status>3 && retroactiveHisttoyrMap['4'] !=null" label="至下个工序完成经历时间">
              <span style="color: #3A71A8"
                    v-text="parseTimeInterval(this.retroactiveHisttoyrMap['3'][0].createTime,this.retroactiveHisttoyrMap['4'][0].createTime)"/>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{
                this.retroactiveHisttoyrMap['3'][0].remark
              }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-step>
      <el-step title="轧制工序">
        <template slot="description">
          <el-descriptions v-if="retroactiveHisttoyrMap['4']" :column="2" border style="margin:10px 0 10px 0">
            <el-descriptions-item label="轧制完成时间">
              {{ this.retroactiveHisttoyrMap['4'][0].createTime }}
            </el-descriptions-item>
            <el-descriptions-item v-if="retroactiveInfo.status>4 && retroactiveHisttoyrMap['5'] !=null" label="至下个工序完成经历时间">
              <span style="color: #3A71A8"
                    v-text="parseTimeInterval(this.retroactiveHisttoyrMap['4'][0].createTime,this.retroactiveHisttoyrMap['5'][0].createTime)"/>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{
                this.retroactiveHisttoyrMap['4'][0].remark
              }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-step>
      <el-step title="大散盘工序">
        <template slot="description" >
          <el-table :data="retroactiveHisttoyrMap['5']"  v-if="retroactiveHisttoyrMap['5']">
            <el-table-column label="序号" type="index" align="center"/>
            <el-table-column label="读码设备" prop="deviceId" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="大散盘产出设备编号" prop="sanPanDevice" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="托盘号" prop="lotNo" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="大散下料时间" prop="createTime" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="至下个工序完成经历时间" align="center" prop="createTime">
              <template slot-scope="scope">
                   <span style="color: #3A71A8"
                         v-text="parseTimeInterval(scope.row.createTime,getNextTime(retroactiveHisttoyrMap['6'],scope.row.lotNo))"/>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" align="center"/>
          </el-table>
        </template>
      </el-step>
      <el-step title="退货工序">
        <template slot="description">
          <el-table :data="retroactiveHisttoyrMap['6']"  v-if="retroactiveHisttoyrMap['6']">
            <el-table-column label="序号" type="index" align="center"/>
            <el-table-column label="托盘号" prop="lotNo" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="机组号" prop="uniuCode" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="料架号" prop="shelfNumber" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="料架列" prop="shelfNumber" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="料架层" prop="numberOfLayers" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="退火上料时间" prop="createTime" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="至下个工序完成经历时间" align="center" prop="createTime">
              <template slot-scope="scope">
                   <span style="color: #3A71A8"
                         v-text="parseTimeInterval(scope.row.createTime,getNextTime(retroactiveHisttoyrMap['7'],scope.row.lotNo))"/>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" align="center"/>
          </el-table>
        </template>
      </el-step>
      <el-step title="生产完成">
        <template slot="description">
          <el-table :data="retroactiveHisttoyrMap['7']" v-if="retroactiveHisttoyrMap['7']">
            <el-table-column label="序号" type="index" align="center"/>
            <el-table-column label="托盘号" prop="lotNo" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="退火下料时间" prop="createTime" :show-overflow-tooltip="true" align="center"/>
            <el-table-column label="生产完成总耗时" align="center" prop="createTime" >
              <template slot-scope="scope">
                   <span style="color: #3A71A8"
                         v-text="parseTimeInterval(this.retroactiveHisttoyrMap['1'][0].createTime,scope.row.createTime)"/>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" align="center"/>
          </el-table>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
import {getRetroactiveHistoryInfo, getRetroactiveNowInfo} from "@/api/trace/process";
import {parseTime} from "../../../utils/ruoyi";

export default {
  name: "info",
  dicts: ['process'],
  data() {
    return {
      retroactiveId: null,
      retroactiveInfo: {
        status:0,
      },
      retroactiveHisttoyrMap: {},
      poorProductionTime: [],
      open: false
    }
  },
  methods: {
    parseTime,
    getInfo() {
      getRetroactiveNowInfo({retroactiveId: this.retroactiveId}).then(response1 => {
        this.retroactiveInfo = response1.data
        getRetroactiveHistoryInfo({retroactiveId: this.retroactiveId}).then(response2 => {
          this.retroactiveHisttoyrMap = eval(response2.data);
          if (this.retroactiveInfo == null || this.retroactiveInfo==undefined) {
            this.retroactiveInfo = this.retroactiveHisttoyrMap['1']
            this.retroactiveInfo.lotNo = this.retroactiveHisttoyrMap['4'].lotNo
            this.retroactiveInfo.status = 7
          } else {
            this.retroactiveInfo.status = parseInt(this.retroactiveInfo.status)
          }
          this.open = true
        })
      })

    },
    parseTimeInterval(time1, time2) {
      if (time1==null ||time2==null){
        return '缺少数据!';
      }
      var stime = new Date(time1).getTime();
      var etime = new Date(time2).getTime();
      var usedTime = etime - stime;  //两个时间戳相差的毫秒数
      var days = Math.floor(usedTime / (24 * 3600 * 1000));
      //计算出小时数
      var leave1 = usedTime % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000));
      var time = days + "天" + hours + "时" + minutes + "分";
      //var time = days;
      return time
    },
    getNextTime(next,lotNo){
      if (!next){
        return null
      }
      let time = null;
      next.forEach(item=>{
        if (item.lotNo === lotNo){
          time = item.createTime
        }
      })
      return time;
    }
  },
  mounted() {
    this.retroactiveId = this.$route.params.retroactiveId
    this.getInfo()
  },
}
</script>