ghjg-digital-twin/src/views/home/cpns/boatPanel/BoatPjyl.vue

<template>
  <div class="boat-info" :class="{'bg-hxyl': bottomType==='preview'}">
    <div class="bi-header">
      <span class="bih-title">{{ props.boatInfo.shipNameCn || '未查到信息' }}</span>
      <div class="bih-btns">
        <span :class="{'highlight': cameraType==='down'}" @click="toggleCamera('down')">船身</span>
        <span :class="{'highlight': cameraType==='in'}" @click="toggleCamera('in')">船舱</span>
        <span :class="{'highlight': cameraType==='follow'}" @click="toggleCamera('follow')">船尾</span>
      </div>
    </div>
    <div class="dialog-tab bi-tab" :class="{'bottom-divider': currentTab==='lshb'}">
      <div :class="{'highlight': currentTab==='cbxx'}" @click="changeTab('cbxx')"><span>船舶信息</span></div>
      <div :class="{'highlight': currentTab==='lshb'}" @click="changeTab('lshb')"><span>历史航班</span></div>
    </div>
    <div class="content-cbxx" v-if="currentTab==='cbxx'">
      <div class="cbxx-top bottom-divider">
        <span>今日航班运营时间：</span><span>{{ props.boatInfo.scheduleTime? props.boatInfo.scheduleTime.slice(11,16) : '-'}}</span>
      </div>
      <ul class="boat-fields bottom-divider">
        <li><span>船舶编码：</span><span>{{ props.boatInfo.mmsi }}</span></li>
        <li><span>行驶速度：</span><span>{{ props.boatInfo.velocity }}节</span></li>
        <li><span>船舶长度：</span><span>{{ props.boatInfo.shipLength }}米</span></li>
        <li><span>船舶宽度：</span><span>{{ props.boatInfo.shipBreadth }}米</span></li>
        <li><span>船舶类型：</span><span>{{ props.boatInfo.shipTypeName }}</span></li>
        <li><span>航班类型：</span><span>{{ props.boatInfo.typeName || '-' }}</span></li>
        <li style="margin-bottom: 0;"><span>满载吃水：</span><span>{{ props.boatInfo.loadedDraft || '-' }}</span></li>
        <li style="margin-bottom: 0;"><span>空载吃水：</span><span>{{ props.boatInfo.noLoadedDraft || '-' }}</span></li>
      </ul>
      <div class="cbxx-sales bottom-divider">
        <div><span>本次航线售票数</span><span>{{ props.boatInfo.saleNum || '-' }}</span></div>
        <div><span>本次航线登船数</span><span>{{ props.boatInfo.checkNum || '-' }}</span></div>
      </div>
      <div class="boat-playback">
        <div class="cb-row1">
          <span :class="{'highlight': bottomType==='playback'}" @click="toggleBottom('playback')">轨迹回放</span>
          <span :class="{'highlight': bottomType==='preview'}" @click="toggleBottom('preview')">航线预览</span>
        </div>
        <template v-if="bottomType==='playback'">
          <div class="cb-time">
            <div>
              <i class="cbt-icon"></i>
              <el-date-picker
                v-model="timeRange.time1"
                type="datetime"
                placeholder="请选择"
                size="small"
                popper-class="date-popper"
                class="date-picker-custom1"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </div>
            <div>
              <i class="cbt-icon"></i>
              <el-date-picker
                v-model="timeRange.time2"
                type="datetime"
                placeholder="请选择"
                size="small"
                popper-class="date-popper"
                class="date-picker-custom1"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </div>
          </div>
          <div class="cb-play">
            <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>
            <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>
            <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>
            <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="track_play">播放</span>
            <span class="play-btn" v-show="playState===1||playState===2" @click="track_stop">停止</span>
            <span class="play-btn" v-show="playState===1" @click="track_pause">暂停</span>
            <span class="play-btn" v-show="playState===2" @click="track_resume">继续</span>
          </div>
        </template>
        <div class="content-hxyl" v-else-if="bottomType==='preview'">
          <span class="play-btn" :class="{'btn-disabled': previewState===-1}" v-show="previewState<1" @click="preview_play">开始</span>
          <span class="play-btn" v-show="previewState===1||previewState===2" @click="preview_stop">结束</span>
          <span class="play-btn" v-show="previewState===1" @click="preview_pause">接管</span>
          <span class="play-btn" v-show="previewState===2" @click="preview_resume">托管</span>
        </div>
      </div>
    </div>
    <ul class="content-lshb" v-if="currentTab==='lshb'">
      <li v-for="item,index in historyList.value">
        <span>{{ formatIndex(index+1) }}</span>
        <div>
          <div>
            <div>
              <span>{{ item.routeType }}</span>
              <span>{{ item.routeTime }}</span>
            </div>
            <template v-if="historyCurrent===null || historyCurrent===index">
              <span class="cl-btn" :class="{'btn-disabled': historyState===-1}" v-show="historyState<1" @click="history_play(item,index)">预览</span>
              <span class="cl-btn" v-show="historyState===1||historyState===2" @click="history_stop">停止</span>
            </template>
          </div>
          <div>
            <div>
              <span>售票数</span>
              <span>{{ item.saleNum }}</span>
              <i></i>
              <span>登船数</span>
              <span>{{ item.checkNum }}</span>
            </div>
            <template v-if="historyCurrent===index">
              <span class="cl-btn" v-show="historyState===1" @click="history_pause">暂停</span>
              <span class="cl-btn" v-show="historyState===2" @click="history_resume">继续</span>
            </template>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BoatPjyl',
}
</script>

<script setup>
  import { reactive, ref, watch, onBeforeUnmount } from 'vue'
  import { ElDatePicker } from 'element-plus'
  import { GetLshb } from '../../../../apis/ssky'
  import 'element-plus/es/components/date-picker/style/css'
  import bus from '@/utils/bus'
  import { 
    ueCallBoatGuiji, ueCallSetBoatDriveSpeed, ueCallBoatDrive, ueCallBoatCloseDrive, ueCallBoatStop, ueCallBoatContinue,
    ueCallInitAll, ueCallFindJinghua, ueCallRunJinghua, ueCallRunOpJinghua, ueCallFindZhuanhang, ueCallRunZhuanhang, ueCallRunOpZhuanhang,
    ueCallChangeTrackType, ueCallHistoryRun, ueCallHistoryStop, ueCallHistoryAgain, ueCallHistoryClear,ueCallClearAllAi
  } from '@/utils/UIInteractions'
  import { useDateFormat } from '@vueuse/core'
  
  const props = defineProps(['boat-info'])

  const cameraType = ref('follow')
  function toggleCamera(type) {
    cameraType.value = type
    ueCallChangeTrackType(type)
  }
  
  const currentTab = ref('cbxx')
  
  const timeRange = reactive({
    time1: '',
    time2: ''
  })

  bus.on('ueRec_boatGuiji', (data) => {
    if(data.isOk=='true') {
      playState.value=0
    }
    else {
      alert("此船舶该时段未查到轨迹点")
      this.$message({
        message:'此船舶该时段未查到轨迹点',
        type:'warning'
      });
    }
  })

  const bottomType = ref('playback')

  bus.on('ueRec_pujiangInit', (data) => {
    if(data.isOk=='true') {
      previewState.value=0
    }
  })

  function toggleBottom(type) {
    bottomType.value = type
    if(type==='preview') {
      ueCallInitAll()
      previewState.value = -1
    }
  }

  const playSpeed = ref(1)
  const playState = ref(0)    /* 0--未开始/已结束； 1--播放中； 2--已暂停; -1--禁用状态 */

  function ChangePlaySpeed(s) {
    playSpeed.value = s===playSpeed.value? 1: s
    ueCallSetBoatDriveSpeed(playSpeed.value)
  }

  function track_play() {
    if(timeRange.time1&&timeRange.time2) {
      playState.value=-1
      ueCallBoatGuiji(timeRange.time1, timeRange.time2)
      let timer = setInterval(() => {
        if(playState.value===-1) { return }
        ueCallBoatDrive()
        playState.value = 1
        clearInterval(timer)
      }, 300);
    }
  }
  function track_stop() {
    playState.value = 0
    ueCallBoatCloseDrive()
  }
  function track_pause() {
    playState.value = 2
    ueCallBoatStop()
  }
  function track_resume() {
    playState.value = 1
    ueCallBoatContinue()
  }

  const previewState = ref(0)    /* 0--未开始/已结束； 1--托管中； 2--接管中; -1--禁用状态 */

  function preview_play() {
    if(previewState.value===-1) { return }
    previewState.value = 1
    if(props.boatInfo.typeName==='经典游') {
      ueCallFindJinghua()
      ueCallRunJinghua()
    } else {
      ueCallFindZhuanhang()
      ueCallRunZhuanhang()
    }
  }
  function preview_stop() {
    previewState.value = 0
    ueCallInitAll()
    ueCallClearAllAi()
  }
  function preview_pause() {
    previewState.value = 2
    if(props.boatInfo.typeName==='经典游') {
      ueCallRunOpJinghua()
    }else {
      ueCallRunOpZhuanhang()
    }
  }
  function preview_resume() {
    previewState.value = 1
    if(props.boatInfo.typeName==='经典游') {
      ueCallRunOpJinghua()
    }else {
      ueCallRunOpZhuanhang()
    }
  }

  const historyList = reactive({value: []})

  function formatIndex(index) {
    return index.toString().padStart(2, '0')
  }

  const historyState = ref(0)  /* 0--未开始/已结束； 1--播放中； 2--已暂停; -1--禁用状态 */
  const historyCurrent = ref(null)

  bus.on('ueRec_HistoryRun', (data) => {
    if(data.isOk=='true') {
      historyState.value=1
    }
  })

  function history_play(item,index) {
    if(previewState.value===-1) { return }
    historyCurrent.value = index
    historyState.value = -1
    ueCallHistoryRun(item.routeTypeId, item.mmsi, item.routeTime.slice(0,10)+'%20'+item.routeTime.slice(11))
  }

  function history_pause() {
    ueCallHistoryStop()
    historyState.value = 2
  }

  function history_resume() {
    ueCallHistoryAgain()
    historyState.value = 1
  }

  function history_stop() {
    ueCallHistoryClear()
    historyState.value = 0
    historyCurrent.value = null
  }

  
  watch(()=>props.boatInfo.mmsi, (val) => {
    GetLshb(val).then(res => {
      historyList.value = res.data.Rows.slice(0,4)
      timeRange.time1 = useDateFormat((new Date).getTime() - 30 * 60 * 1000, 'YYYY-MM-DD HH:mm:00').value
      timeRange.time2 = useDateFormat((new Date).getTime(), 'YYYY-MM-DD HH:mm:00').value
    })
  }, { immediate: true })

  const emit = defineEmits(['closeBoatInfo'])

  function changeTab(name) {
    currentTab.value = name
  }

  onBeforeUnmount(() => {
    bus.off('ueRec_boatGuiji')
    bus.off('ueRec_boatFockClear')
    bus.off('ueRec_pujiangInit')
    bus.off('ueRec_HistoryRun')
    // ueCallInitAll()
    ueCallBoatCloseDrive()
    ueCallHistoryClear()
    ueCallClearAllAi()
  })


</script>

<style lang="scss" scoped>
.boat-info {
  box-sizing: border-box;
  width: 389px;
  height: 445px;
  background: url('@/assets/imgs/page_ssky/bg-pjylboat.png') no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;

  &.bg-hxyl {
    height: 395px;
    background: url('@/assets/imgs/page_ssky/bg-boat.png') no-repeat;
    background-size: contain;
  }

  .dialog-close {
    top: 8px;
  }

  .bi-tab {
    padding-right: 20px;
    margin: 10px 0 14px;
    &>div.highlight::after {
      display: none;
    }
  }

  .content-cbxx {
    .cbxx-top {
      padding-left: 25px;
      margin-bottom: 20px;
      text-align: left;
      span:first-child {
        margin-right: 3px;
        font-size: 14px;
        color: #D9E6FF;
      }
      span:last-child {
        font-size: 14px;
        font-family: BarlowBold;
        color: #FFD400;
      }
    }
    .boat-fields {
      padding: 0 0 0 25px;
    }
    .cbxx-sales {
      box-sizing: border-box;
      padding-left: 25px;
      display: flex;
      align-items: center;
      margin: 20px 0 10px 0;
      &>div {
        width: 50%;
        display: flex;
        align-items: center;
        span:first-child {
          font-size: 14px;
          color: #D9E6FF;
          margin-right: 11px;
        }
        span:last-child {
          font-size: 14px;
          font-family: BarlowBold;
          color: #00FF95;
        }
      }
    }
    .boat-playback {
      .cb-time {
        padding: 0 30px 0 25px;
      }
      .cb-play {
        padding: 0 30px 0 40px;
      }
    }
  }

  .content-lshb {
    flex: 1;
    padding: 0 45px 20px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &>li {
      height: 58px;
      width: 100%;
      display: flex;
      align-items: flex-start;
      background: url('@/assets/imgs/page_yyjg/ent-item-bg.png') no-repeat;
      background-size: 100% 2px;
      background-position: bottom;
      &>span {
        margin-right: 30px;
        font-size: 28px;
        font-family: BarlowBold;
        color: #FBFDFF;
        line-height: 28px;
      }
      &>div {
        flex: 1;
        .cl-btn {
          display: block;
          width: 55px;
          height: 20px;
          font-size: 13px;
          font-style: italic;
          color: #FFFFFF;
          line-height: 20px;
          text-align: center;
          background: url('@/assets/imgs/page_ssky/bg-btn-blue.png');
          background-size: contain;
          cursor: pointer;
        }
        &>div:first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 20px;
          &>div {
            display: flex;
            align-items: center;
            &>span:nth-child(1) {
              font-size: 14px;
              font-weight: bold;
              color: #FBFDFF;
            }
            &>span:nth-child(2) {
              margin-left: 10px;
              font-size: 14px;
              font-family: Barlow;
              color: rgba($color: #FBFDFF, $alpha: 0.6);
            }
          }
        }
        &>div:last-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 8px;
          height: 20px;
          &>div {
            display: flex;
            align-items: center;
            &>span:nth-child(1), &>span:nth-child(4) {
              margin-right: 7px;
              font-size: 14px;
              color: #FBFDFF;
            }
            &>span:nth-child(2), &>span:nth-child(5) {
              font-size: 14px;
              font-family: Barlow;
              color: #FFEA00;
            }
            &>i:nth-child(3) {
              display: block;
              height: 12px;
              border-right: 1px dashed #ddd;
              margin: 0 6px 0 20px;
            }
          }
          
        }
      }
    }
  }

  .content-hxyl {
    box-sizing: border-box;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    &>span:not(.btn-disabled):hover {
      filter: brightness(1.3);
    }
    .play-btn {
      display: block;
      width: 79px;
      height: 30px;
      margin-left: 5px;
      background: url('@/assets/imgs/page_kkjk/bi-bg-btn2.png');
      background-size: contain;
      font-size: 13px;
      font-weight: 400;
      color: #ddd;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
  }
}

</style>