yiliangyiyun-pc-jj/src/views/dynamicRport/components/checkConstructionReport.vue

<!-- 船员管理模块 船员详情页面 -->
<template>
  <div class="frame">
    <div style="height: 50px">
      <auditFlow show-history-flag="true"
                 :activities="activities"
                 :message="approveStatus"
                 :billNo="shipMan.status" />
    </div>
    <div class="app-container input-form"
         id="addConstuctionReport">
      <ws-form :model="shipMan"
               :show-message="false">
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">基本信息</span>
          </div>
          <div class="right">
            <ws-button class="editBtn"
                       @click="back">返 回</ws-button>
            <div class="divIcon"
                 @click="openState(openMsg[0].key)">
              <i v-show="openMsg[0].state"
                 class="iconfont iconopen" />
              <i v-show="!openMsg[0].state"
                 class="iconfont iconclose" />
              <!--              <svg-icon class="openCloseIcon" v-show="openMsg[0].state" icon-class="open" />-->
              <!--              <svg-icon class="openCloseIcon" v-show="!openMsg[0].state" icon-class="close" />-->
              <span class="openClose">{{ openMsg[0].value }}</span>
            </div>
          </div>
        </div>
        <transition name="draw">
          <div v-show="openMsg[0].state"
               class="crewMsg">
            <div>
              <ws-info-table>
                <ws-form-item label="报告类型"
                              span="1">
                  <span class="yhellipsis">{{
                   $ph(shipMan.reportType)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="船舶名称">
                  <span class="yhellipsis">{{
                    $ph(shipMan.vesselName)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="船舶呼号">
                  <span class="yhellipsis">{{
                     $ph(shipMan.callSign)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="报告日期">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDate)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="时区">
                  <span class="yhellipsis">{{
                    $ph(shipMan.timeZone)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="船舶状态">
                  <span class="yhellipsis">{{
                    $ph(shipMan.shipStatus)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="施工地点">
                  <span class="yhellipsis">{{
                     $ph(shipMan.constructionSite)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="备注">
                  <span class="yhellipsis">{{
                    $ph(shipMan.remarks)
                  }}</span>
                </ws-form-item>
              </ws-info-table>
            </div>
          </div>
        </transition>
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">天气及施工信息</span>
          </div>
          <div class="right"
               @click="openState(openMsg[1].key)">
            <i v-show="openMsg[1].state"
               class="iconfont iconopen" />
            <i v-show="!openMsg[1].state"
               class="iconfont iconclose" />
            <!--            <svg-icon class="openCloseIcon" v-show="openMsg[1].state" icon-class="open" />-->
            <!--            <svg-icon class="openCloseIcon" v-show="!openMsg[1].state" icon-class="close" />-->
            <span class="openClose">{{ openMsg[1].value }}</span>
          </div>
        </div>
        <transition name="draw">
          <div v-show="openMsg[1].state"
               class="crewMsg">
            <div>
              <ws-info-table>
                <ws-form-item label="海况">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.sea)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="浪高">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.swell)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="天气及视距">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.weatherStadia)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="风向及风力">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.windDirection)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="施工区段">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.constructionSection)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="工程量">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.quantityWork)
                  }}</span>
                  <div class="rightDiv">m³</div>
                </ws-form-item>
                <ws-form-item label="船次">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.shipTimes)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="停工时长">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.downtime)
                  }}</span>
                  <div class="rightDiv">h</div>
                </ws-form-item>
                <ws-form-item label="停工原因">
                  <span class="yhellipsis">{{
                   $ph(shipMan.reportDetail.downtimeReasons)
                  }}</span>
                </ws-form-item>
                <ws-form-item label="生产时长">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.runningTime)
                  }}</span>
                  <div class="rightDiv">h</div>
                </ws-form-item>
                <ws-form-item label="主机（左）运转时长">
                  <span class="yhellipsis">{{
                     $ph(shipMan.reportDetail.hostLeftRunningTime)
                  }}</span>
                  <div class="rightDiv">h</div>
                </ws-form-item>
                <ws-form-item label="主机（右）运转时长"
                              class="remark">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.hostRightRunningTime)
                  }}</span>
                  <div class="rightDiv">h</div>
                </ws-form-item>
                <ws-form-item label="副机运转时长">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.secondaryMachineRunningTime)
                  }}</span>
                  <div class="rightDiv">h</div>
                </ws-form-item>
              </ws-info-table>
            </div>
          </div>
        </transition>
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">油水存量、消耗及接收信息</span>
          </div>
          <div class="right"
               @click="openState(openMsg[2].key)">
            <i v-show="openMsg[2].state"
               class="iconfont iconopen" />
            <i v-show="!openMsg[2].state"
               class="iconfont iconclose" />
            <!--            <svg-icon class="openCloseIcon" v-show="openMsg[2].state" icon-class="open" />-->
            <!--            <svg-icon class="openCloseIcon" v-show="!openMsg[2].state" icon-class="close" />-->
            <span class="openClose">{{ openMsg[2].value }}</span>
          </div>
        </div>
        <transition name="draw">
          <div v-show="openMsg[2].state"
               class="crewMsg">
            <div>
              <ws-info-table>
                <ws-form-item label="重油补给">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.heavyOilSupply)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="轻油补给">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.lightOilSupply)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>

                <ws-form-item label="重油消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.heavyOilDeplete)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="轻油消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.lightOilDeplete)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="重油存量">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.heavyOilStock)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="轻油存量">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.lightOilStock)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="主机系统油补给">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.mainOilSupply)
                  }}</span>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="副机系统油补给">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.auxiliaryOilSupply)
                  }}</span>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="主机系统油消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.mainOilDeplete)
                  }}</span>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="副机系统油消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.auxiliaryOilDeplete)
                  }}</span>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="主机系统油存量">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.mainOilStock)
                  }}</span>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="副机系统油存量">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.auxiliaryOilStock)
                  }}</span>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="主机重油消耗">
                  <span class="yhellipsis">{{
                     $ph(shipMan.reportDetail.mainHeavyOilSupply)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="主机轻油消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.mainLightOilSupply)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="副机轻油消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.auxiliaryLightOilSupply)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="日用淡水补给">
                  <span class="yhellipsis">{{
                     $ph(shipMan.reportDetail.dailyWaterSupply)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="日用淡水消耗">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.dailyWaterDeplete)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="日用淡水存量">
                  <span class="yhellipsis">{{
                    $ph(shipMan.reportDetail.dailyWaterStock)
                  }}</span>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
              </ws-info-table>
            </div>
          </div>
        </transition>
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">附件</span>
          </div>
        </div>
        <transition name="draw">
          <div class="crewMsg">
            <div>
              <ws-upload ref="upload"
                         table-name="noonreport_dynamic_report_info"
                         oss-key="deploy"
                         class="upButton"
                         :comp-id="compId"
                         :appendix-ids="appendixIds" />
            </div>
          </div>
        </transition>
      </ws-form>
    </div>
  </div>
</template>
<script>
import { getReportInfoById, getDynamicHistorys } from '@/model/crew/index'
import WsUpload from '@/components/WsUpload'
import auditFlow from '@/components/WinseaCom/auditFlow.vue'
export default {
  components: { WsUpload, auditFlow },
  name: 'basicMsg',
  data () {
    return {
      compId: localStorage.getItem('ws-pf_compId'),
      seafarerId: localStorage.getItem('ws-pf_platformCrewSeafarerId'),
      openMsg: [
        {
          key: 0,
          value: '收起',
          state: true
        },
        {
          key: 1,
          value: '收起',
          state: true
        },
        {
          key: 2,
          value: '收起',
          state: true
        },
        {
          key: 3,
          value: '收起',
          state: true
        }
      ],
      shipMan: {
        reportType: '',
        reportDetail: ''
      },
      // 新上传
      oldAppendixIds: '',
      newAppendixs: [],
      onChangeFlag: false,
      appendixIds: '',
      activities: [],
      approveStatus: ''
    }
  },
  created () { },
  mounted () {
    this.initData()
    document.getElementById('addConstuctionReport').style.cssText =
      'background-color: white; overflow-y:scroll;height:' +
      (document.body.clientHeight - 40) +
      'px'
  },
  beforeDestroy () {
    localStorage.setItem('ws_dynamicReport_id', '')
  },
  props: [],
  methods: {
    initData () {
      getReportInfoById({
        id: localStorage.getItem('ws_dynamicReport_id')
      }).toPromise().then(response => {
        this.shipMan = response
        if (this.shipMan.appendixFileUrls) {
          this.appendixIds = this.shipMan.appendixFileUrls // 用于回显
          this.oldAppendixIds = this.shipMan.appendixFileUrls // 用于下一次点击保存给saveFiles接口传参
        }
        // 操作历史
        getDynamicHistorys({
          id: response.id
        }).toPromise().then(response => {
          this.activities = response
        })
      })
    },
    // 展开状态
    openState (key) {
      this.openMsg[key].state = !this.openMsg[key].state
      if (this.openMsg[key].state) {
        this.openMsg[key].value = '收起'
      } else {
        this.openMsg[key].value = '展开'
      }
    },
    back () {
      localStorage.setItem('ws_dynamicReport_id', '')
      this.$router.back(-1)
    }
  },
  watch: {
    state (val) {
      if (val == 'basicMsg') {
        this.getShipMsg()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.yhellipsis {
  width: 95%;
}
.frame {
  padding: 0px 15px 15px 15px;
  background-color: white;
}
.frameTitle {
  background-color: #fff;
}
.frameCenter {
  background-color: #fff;

  padding: 0px 15px 45px 15px;
  height: calc(100vh - 90px);
  overflow-y: auto;
}
.crewAddButton {
  height: 50px;
  line-height: 50px;
  padding-right: 10px;
}
.crewAddTitle {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
.left {
  float: left;
}
.right {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  float: right;
}
.crewAddTitleMsg::before {
  content: '▍';
  color: #1d6ced;
}
.uphead {
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
}
.img {
  position: absolute;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.kyc-passin0 {
  font-size: 14px;
  margin-left: 70px;
  color: #666666;
  position: absolute;
  top: 14px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.kyc-passin {
  width: 85px;
  opacity: 0;
  margin-left: 70px;
}
.talk {
  font-size: 12px;
  color: #999999;
}
.draw-enter-active,
.draw-leave-active {
  transition: all 0.4s;
}
.draw-enter,
.draw-leave-active {
  transform: translateY(-45px);
  opacity: 0;
}
.add {
  margin-right: 15px;
}
.add,
.openClose {
  display: inline-block;
}
/deep/ .edit-input .el-input__inner {
  width: 95%;
}
.certificateEdit .el-input--medium {
  border-left: none;
}
.el-dialog__body {
  padding: 10px;
}
.Yhsearch {
  margin-bottom: 10px;
}
.divIcon {
  display: inline-block;
}
.editBtn {
  margin-right: 10px;
}
/deep/ .labelDiv label {
  display: block;
}
.rightDiv {
  width: 5%;
  float: right;
}
.remark {
  border-bottom: 1px solid #cccccc;
}
.upButton {
  background: #ffffff;
  margin-top: -20px !important;
  /deep/.el-button--primary {
    display: none !important;
  }
  /deep/.tip {
    display: none !important;
  }
  /deep/.el-upload-list__item .el-icon-close {
    display: none !important;
  }
  /deep/.el-upload-list__item-delete:nth-last-of-type(1) {
    display: none !important;
  }
}
</style>