yclw/src/views/groupPage/districtPageModules/pipeUnitInfo/BaseInfo.vue

<template>
  <div class="unitInfo">
    <div class="baseInfo">
      <div class="item" v-for="info in infos" :key="info.title">
        <span class="title" :title="info.title">{{ info.title }}:</span>
        <el-input class="value" :value="info.value" size="small"></el-input>
      </div>
    </div>
    <div class="twoBaseInfo">
      <div class="qrcodeItem">
        <el-image style="width: 100%; height: 100%" :src="qrUrl" :preview-src-list="qrUrlPreview"> </el-image>
      </div>
    </div>
    <div class="processTime">
      <div class="remake">
        <div class="remakeColor"></div>
        <div class="remakeTitle">进度信息</div>
      </div>
      <div class="progress-items">
        <span class="itemTitle">工程计划开始时间：</span>
        <el-input type="text" class="jhStart" readonly="readonly" :value="planBeginTime" size="small"></el-input>
        <span class="itemTitle">工程计划结束时间：</span>
        <el-input type="text" class="jhEnd" readonly="readonly" :value="planEndTime" size="small"></el-input>
      </div>
      <div class="progress-items">
        <span class="itemTitle">部件实际开始时间：</span>
        <el-input type="text" class="sjStart" readonly="readonly" :value="begintime" size="small"></el-input>
        <span class="itemTitle endTime">{{ lastimeText }}</span>
        <el-input type="text" class="sjEnd" readonly="readonly" :value="lastime" size="small"></el-input>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import apis from '@/api/PipeUnitInfo'
import axios from '@/utils/request'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { setNullAndUndefined } from '@/views/groupPage/util'
//部件查看---概述
@Component({ name: 'UnitBaseInfo' })
export default class UnitBaseInfo extends Vue {
  @Prop({}) apiUrls!: any
  @Prop({}) currentUnit!: any
  qrUrl: String = '' //部件二维码URL
  qrUrlPreview = []
  infos = [] //部件概览信息
  planBeginTime: String = '/' //部件计划开始时间
  planEndTime: String = '/' //部件计划结束时间
  begintime: String = '/' //部件实际开始时间
  lastime: String = '/' //部件实际结束时间
  isFinish: String = '' //部件是否完工
  get lastimeText() {
    return this.isFinish === '1' ? '部件实际结束时间：' : '部件最后扫码时间：'
  }
  /**
   * 展示概述页面
   * @param result 请求的获取的所有数据
   * @param info 展示的属性的数据
   */
  showUnitInfoPage(result, info) {
    this.initUnitBaseInfo(result, info)
    this.getWbsInfo(result.code)
  }
  /**
   * 该方法用于初始化管线基础属性信息
   * @param info 属性信息
   */
  initUnitBaseInfo(result, info) {
    //基础信息展示
    this.infos = info.map((item) => {
      let titleStr = setNullAndUndefined(item.title)
      let valueStr = setNullAndUndefined(item.value)
      return { title: titleStr, value: valueStr }
    })
    //二维码前面的信息
    //请求后台，获取部件二维码
    const url = this.currentUnit.geoType === 'LINE' ? this.apiUrls.createPicPipe : this.apiUrls.createPicNode
    const options = {
      pbs: this.currentUnit.code
    }
    this.qrUrl =
      axios.defaults.baseURL + url + '?pbs=' + options.pbs + '&access_token=' + sessionStorage.getItem('token')
    this.qrUrlPreview = []
    this.qrUrlPreview.push(this.qrUrl)
  }
  /**
   * 获取计划开始事件和结束事件
   * */
  getWbsInfo(pbs) {
    let data = {
      pbs: pbs
    }
    apis.getWbsInfo(data).then((result) => {
      if (result.result) {
        if (result.result.planBeginTime) {
          this.planBeginTime = result.result.planBeginTime
        }
        if (result.result.planEndTime) {
          this.planEndTime = result.result.planEndTime
        }
      }
    })
    apis.getPartsTime({ code: pbs }).then((result) => {
      if (result.result) {
        this.isFinish = result.result.isFinish
        if (result.result.begintime) {
          this.begintime = result.result.begintime
        }
        if (result.result.lastime) {
          this.lastime = result.result.lastime
        }
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.unitInfo {
  height: 100%;
  width: 100%;
  font-family: Source Han Sans CN;
  .baseInfo {
    width: 75%;
    position: relative;
    float: left;
    .item {
      position: relative;
      float: left;
      width: 45%;
      display: flex;
      align-items: center;
      padding: 5px;
    }
  }
  .twoBaseInfo {
    position: relative;
    float: left;
    width: 20%;
    left: 2.5%;
    padding: 5px;
    .qrcodeItem {
      position: relative;
      float: left;
      height: 225px;
      width: 160px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .projectName {
        position: relative;
        float: left;
        width: 100%;
        display: block;
        text-align: left;
        margin-left: 10px;
        padding: 0px 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 10px;
        font-weight: 700;
      }

      .qrcode {
        position: relative;
        float: left;
        width: 100%;
        top: 20px;
      }
    }
  }
  .processTime {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
    .remake {
      position: relative;
      float: left;
      width: 100%;
      padding: 10px 0;
      .remakeColor {
        float: left;
        height: 0.083333rem /* 16/192 */;
        width: 0.078125rem /* 15/192 */;
        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
        background-size: 100% 100%;
      }
      .remakeTitle {
        position: relative;
        float: left;
        left: 0.052083rem /* 10/192 */;
        font-size: 0.083333rem /* 16/192 */;
        font-weight: 400;
        color: #0ea7ff;
      }
    }
    .progress-items {
      display: flex;
      align-items: center;
      padding: 10px;
    }
    .itemTitle {
      position: relative;
      float: left;
      padding: 6px;
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      color: #82bae2;
      white-space: nowrap;
    }

    .jhStart,
    .jhEnd,
    .sjStart,
    .sjEnd {
      position: relative;
      float: left;
      text-align: left;
      color: black;
      padding-left: 10px;
      border: none;
    }
  }
}
</style>