ghjg-digital-twin/src/views/home/Header.vue

<template>
  <div id="header">
    <div class="main">
      <div class="title">黄浦江数字孪生系统</div>
      <div class="content">
        <div class="left">
          <i class="temperature"></i>
          <div class="wsd-title">
            <span>温度</span>
            <span>temperature</span>
          </div>
          <span class="wsd-data">{{temperature}}</span>
          <span class="wsd-unit">℃</span>
        </div>
        <div class="right">
          <div class="right-btns">
            <i class="rb-fulls" @click="ueCallfullExtent"></i>
            <i class="rb-search"></i>
          </div>
          <div class="right-box">
            <span class="now-time" @click="ueCallGetNowTime">{{time}}</span>
            <div class="date">
              <span>{{day}}</span>
              <span>{{date}}</span>
            </div>
            <i class="weather" :class="weather" @click="toggleScene"></i>
            
          </div>
        </div>
      </div>
    </div>
    <div class="sub">
      <ul>
        <li v-for="item,index in subList" :class="{'highlight': item.status}">
          <span @click="handleToggleLayer(index)">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <MiForChange v-if="miForChangeShow"/>
    <water-level v-if="waterDeepShow"/>
  </div>
</template>

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

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useNow, useDateFormat } from '@vueuse/core'
  import bus from '@/utils/bus'
  import { GetWeather } from '@/apis/other'
  import {
    ueCallBoatRealtime, ueCallClearBoatTime, ueCallfullExtent,ueCallCloseMi,
    ueCallOpenVideoFusion, ueCallCloseVideoFusion, ueCallShowHangdaoLine, ueCallCloseHangdaoLine,
    ueCallOpenRlt, ueCallCloseRlt, ueCallFlyToHD, ueCallFlyToSP, ueCallFlyToZrcb, ueCallGetNowTime
  } from '@/utils/UIInteractions'
  import WaterLevel from './cpns/WaterLevel.vue'
  import MiForChange from './cpns/MiForChange.vue'
  onMounted(() => [
    getWeather()
  ])

  const weather = ref('qing')

  function getWeather() {
    GetWeather().then(res => {
      switch(res.data.weather) {
        case '晴': weather.value = 'qing'; break
        case '多云':weather.value = 'duoyun'; break
        case '小雨':weather.value = 'xiaoyu'; break
        case '中雨':weather.value = 'zhongyu'; break
        case '大雨':weather.value = 'dayu'; break
        case '雾':weather.value = 'wu'; break
        case '小雪':weather.value = 'xiaoxue'; break
      }
    })
  }

  const subList = reactive([
    { name: '航道', status: false },
    { name: '潮高', status: false },
    { name: '船舶', status: true },
    { name: '视频', status: false },
    { name: '水下地形', status: false },
    { name: '断面', status: false },
    { name: '中燃船舶', status: false },
  ])
  
  function handleToggleLayer(index) {
    subList[index].status = !subList[index].status
    if(subList[index].status===true) {
      switch(index) {
        case 0:
          ueCallFlyToHD()
          setTimeout(() => {
            ueCallShowHangdaoLine()
          }, 1000);
          break
        case 1:
          waterDeepShow.value = true
          break
        case 2:
          ueCallfullExtent()
          setTimeout(() => {
            ueCallBoatRealtime()
          }, 1000);
          break
        case 3:
          ueCallFlyToSP()
          setTimeout(() => {
            ueCallOpenVideoFusion()
          }, 1000);
          break
        case 4:
          bus.emit('toggle_sxdx', true)
          clickWeeather.value=true
          break
        case 5:
          if (clickWeeather.value) {
            miForChangeShow.value = true
            subList[index].status = true
          }else {
            subList[index].status = false
          }
          break
        case 6:
          ueCallFlyToZrcb()
          break
      }
    } else {
      switch(index) {
        case 0:
          ueCallCloseHangdaoLine()
          break
        case 1:
          waterDeepShow.value = false
          break
        case 2:
          ueCallClearBoatTime()
          break
        case 3:
          ueCallCloseVideoFusion()
          break
        case 4:
          clickWeeather.value=false
          miForChangeShow.value = false
          subList[index+1].status = false
          ueCallCloseMi()
          bus.emit('toggle_sxdx', false)
          break
        case 5:
          miForChangeShow.value = false
          ueCallCloseMi()
          break
        case 6:
          ueCallfullExtent()
          break
      }
    }
  }
  const clickWeeather = ref(false)
  const temperature = ref('8')
  const time = useDateFormat(useNow(), 'HH:mm')
  const date = useDateFormat(useNow(), 'YYYY.MM.DD')
  const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })

  const waterDeepShow = ref(false)

  const miForChangeShow = ref(false)

  function toggleScene() {
    bus.emit('toggleSceneBox')
  }
  
</script>

<style lang="scss" scoped>
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 119px;
    background: url('@/assets/imgs/header/bg-main.png') no-repeat;
    background-size: 100% 100%;
  }

  .sub {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 1114px;
    height: 105px;
    transform: translateX(-50%);
    background: url('@/assets/imgs/header/bg-sub.png') no-repeat;
    background-size: 100% 100%;

    &>ul {
      position: absolute;
      bottom: 9px;
      left: 0;
      width: 100%;
      text-align: center;
      li {
        display: inline-block;
        width: 110px;
        height: 72px;
        margin: 0 5px;
        text-align: center;
        span {
          display: inline-block;
          margin-top: 40px;
          width: fit-content;
          font-size: 20px;
          font-family: YSBTH;
          font-weight: 400;
          color: #CCE6FF;
          opacity: 0.65;
          cursor: pointer;
          &:hover {
            transform: scale(1.1);
          }
        }
        
      }
      .highlight {
        background: url('@/assets/imgs/header/bg-sub-highl.png') no-repeat;
        background-size: 100% 100%;
        span {
          color: #EDF3FF;
          opacity: 1;
        }
      }
    }
  }

  .title {
    position: absolute;
    width: fit-content;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: YSBTH;
    font-size: 42px;
  }

  .content {
    position: absolute;
    top: 32px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .left, .right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  .left {
    margin-left: 30px;
    .humidity, .temperature {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-right: 6px;
    }
    .humidity {
      background: url('@/assets/imgs/header/humidity.png') no-repeat;
    }
    .temperature {
      background: url('@/assets/imgs/header/temperature.png') no-repeat;
    }
    .humidity, .temperature {
      background-size: contain;
    }

    .wsd-title {
      text-align: left;
      margin-right: 9px;
      font-family: PFlight;
      span {
        display: block;
        color: #F6F6F6;
      }
      span:first-child {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 3px;
      }
      span:last-child {
        font-size: 8px;
        line-height: 8px;
      }
    }

    .wsd-data {
      font-family: PFlight;
      font-size: 26px;
      line-height: 26px;
    }

    .wsd-unit {
      font-family: PFlight;
      font-size: 14px;
      line-height: 14px;
      transform: translateY(-5px);
      margin: 0 18px 0 3px;
    }
  }

  .right {
    .right-btns {
      display: flex;
      align-items: center;
      &>i {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 20px;
        cursor: pointer;
      }
      .rb-search {
        background: url('@/assets/imgs/header/search.png') no-repeat;
        background-size: contain;
      }
      .rb-fulls {
        width: 40px;
        height: 40px;
        background: url('@/assets/imgs/header/fulls.png') no-repeat;
        background-size: contain;
      }
    }

    .right-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // cursor: pointer;
      
    }

    .now-time {
      font-family: PFlight;
      font-size: 30px;
      margin-right: 16px;
      cursor: pointer;
      &:hover {
        filter: brightness(1.2);
      }
    }

    .date {
      position: relative;
      text-align: left;
      margin-right: 28px;
      span {
        color: #ccc;
        display: block;
        font-size: 12px;
        line-height: 14px;
      }
      &::after {
        content: '';
        position: absolute;
        right: -28px;
        top: 7px;
        display: inline-block;
        width: 1px;
        height: 14px;
        background-color: #fff;
      }
    }
    
    .weather {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
      background-size: contain;
      margin: 0 36px;
      cursor: pointer;

      &.qing {
        background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
        background-size: contain;
      }
      &.duoyun {
        background: url('@/assets/imgs/scene/w-duoyun.png') no-repeat;
        background-size: contain;
      }
      &.xiaoyu {
        background: url('@/assets/imgs/scene/w-xiaoyu.png') no-repeat;
        background-size: contain;
      }
      &.zhongyu {
        background: url('@/assets/imgs/scene/w-zhongyu.png') no-repeat;
        background-size: contain;
      }
      &.dayu {
        background: url('@/assets/imgs/scene/w-dayu.png') no-repeat;
        background-size: contain;
      }
      &.wu {
        background: url('@/assets/imgs/scene/w-wu.png') no-repeat;
        background-size: contain;
      }
      &.xiaoxue {
        background: url('@/assets/imgs/scene/w-xiaoxue.png') no-repeat;
        background-size: contain;
      }
    }

  }

}
</style>