ghjg-digital-twin/src/views/ssky/cpns/BoatInfo.vue

<template>
  <div class="boat-info">
    <i class="dialog-close" @click="handleClose"></i>
    <span class="bi-title">--</span>
    <div class="dialog-tab bi-tab">
      <div :class="{'highlight': currentTab==='cbxx'}" @click="changeTab('cbxx')"><span>船舶信息</span></div>
      <div :class="{'highlight': currentTab==='bgxx'}" @click="changeTab('bgxx')"><span>报港信息</span></div>
    </div>
    <div class="content-cbxx" v-if="currentTab==='cbxx'">
      <div class="cbxx-top bottom-divider">
        <span>驶入黄浦江时间：</span><span>2022-10-07  12:25:34</span>
      </div>
      <ul class="boat-fields bottom-divider">
        <li><span>船舶编码：</span><span>--</span></li>
        <li><span>行驶速度：</span><span>--</span></li>
        <li><span>船舶长度：</span><span>--</span></li>
        <li><span>船舶宽度：</span><span>--</span></li>
        <li><span>船舶类型：</span><span>--</span></li>
        <li><span>航班类型：</span><span>--</span></li>
      </ul>
      <div class="boat-playback">
        <div class="cb-row1">
          <span>轨迹回放</span>
        </div>
        <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"
              @change="handlePickTime"
            />
          </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"
              @change="handlePickTime"
            />
          </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>
      </div>
    </div>
    <div class="content-bgxx" v-if="currentTab==='bgxx'">
      
    </div>
  </div>
</template>

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

<script setup>
  import { defineProps, reactive, ref, watch, onBeforeUnmount } from 'vue'
  import { ElDatePicker } from 'element-plus'
  import 'element-plus/es/components/date-picker/style/css'
  import bus from '@/utils/bus';
  import { useDateFormat } from '@vueuse/core'

  const props = defineProps(['boat-info'])

  const currentTab = ref('cbxx')

  const timeRange = reactive({
    time1: '',
    time2: ''
  })

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

  onBeforeUnmount(() => {
    bus.off('ueRec_boatGuiji')
  })

  function handlePickTime() {
    if(timeRange.time1&&timeRange.time2) {
      playState.value=-1
      ueCallBoatGuiji(timeRange.time1, timeRange.time2)
    }
  }

  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(playState.value===-1) { return }
    playState.value = 1
    ueCallBoatDrive()
  }
  function track_stop() {
    playState.value = 0
    ueCallBoatCloseDrive()
  }
  function track_pause() {
    playState.value = 2
    ueCallBoatStop()
  }
  function track_resume() {
    playState.value = 1
    ueCallBoatContinue()
  }

  watch(()=>props.boatInfo, (val) => {
    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
    handlePickTime()
  }, { immediate: true })

  const emit = defineEmits(['closeBoatInfo'])

  function handleClose() {
    emit('closeBoatInfo')
  }

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


</script>

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

  .dialog-close {
    top: 8px;
  }

  .bi-title {
    display: block;
    width: fit-content;
    height: 34px;
    padding-left: 16px;
    font-size: 16px;
    line-height: 34px;
    font-weight: bold;
    font-style: italic;
    color: #FFFFFF;
  }

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

  .bottom-divider {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      display: block;
      width: calc(100% - 10px);
      height: 1px;
      background-color: rgba($color: #fff, $alpha: 0.2);
    }
  }

  .content-cbxx {
    .cbxx-top {
      padding: 0 0 5px 25px;
      margin-bottom: 20px;
      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;
    }
    .boat-playback {
      margin-top: 10px;
      .cb-row1 {
        justify-content: center;
      }
      .cb-time {
        padding: 0 30px 0 25px;
      }
      .cb-play {
        padding: 0 30px 0 40px;
      }
    }
  }

}

</style>