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">
          <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 class="right">
          <div class="tab-item"
               v-for="item,index in isCheck.data"
               :key="item.name"
               @click="changeImage(index,item.imageName)">
            <img class="tab-icon" :src="item.click? item.iconOn: item.icon" alt="">
          </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"/>
    <Tools v-if="checkTool" />

    <LunDuMessage v-if="checkLinDu" :datas="ldData.value"/>


    <SelectForUnit  v-if="showSelect"  />
  </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,ueCallShowWarningReturn,
    ueCallOpenVideoFusion, ueCallCloseVideoFusion, ueCallShowHangdaoLine, ueCallCloseHangdaoLine,ueCallCloseWarningReturn,
    ueCallOpenRlt, ueCallCloseRlt, ueCallFlyToHD, ueCallFlyToSP, ueCallFlyToZrcb, ueCallShowAllMi,ueCallGetNowTime
  } from '@/utils/UIInteractions'
  import WaterLevel from './cpns/WaterLevel.vue'
  import MiForChange from './cpns/MiForChange.vue'
  import Tools from './cpns/tools/Tools.vue'
  import LunDuMessage from './cpns/boatPanel/LunDuMessage.vue'
  import SelectForUnit from './SelectForUnit.vue'
  import { asideShow } from '@/store/index'
  import {ElMessage} from "element-plus";

  // 地图方法
  import {fullExtent,calculation,clearMap} from "@/utils/map/ArcgisUtil"



  let ldData=reactive({value: ''})
  const  checkLinDu=ref(false)
  const checkSelect = ref(false)
  const checkTool = ref(false)
  const checkSouXiao = ref(false)
  const checkQuanjing = ref(false)
  const checkRuale = ref(false)
  const checkCeMian = ref(false)
  const checkClear = ref(false)


  const showSelect = ref(false)


  bus.on('click_Lundu', (data) => {
    console.log(data)
    if(data!=null && data!='') {
      checkLinDu.value=true
      ldData.value=data
    }
  })
  const  isCheck=ref({
    data: [
      { name: '搜索', icon: require('@/assets/imgs/header/ssou-wei.png'), iconOn: require('@/assets/imgs/header/ssou-select.png'), imageName: 'ssou' ,click:false,checkIoc:showSelect},
      { name: '图层', icon: require('@/assets/imgs/header/tc-wei.png'), iconOn: require('@/assets/imgs/header/tc-select.png'), imageName: 'tc' ,click:false,checkIoc:checkTool},
      { name: '收缩', icon: require('@/assets/imgs/header/ss-wei.png'), iconOn: require('@/assets/imgs/header/ss-select.png'), imageName: 'ss' ,click:false,checkIoc:checkSouXiao},
      { name: '全景', icon: require('@/assets/imgs/page_ylcbq/qj-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qj-xuan.png'), imageName: 'qj' ,click:false,checkIoc:checkQuanjing},
      { name: '测量', icon: require('@/assets/imgs/page_ylcbq/cl-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cl-xuan.png'), imageName: 'cl' ,click:false,checkIoc:checkRuale},
      { name: '测面', icon: require('@/assets/imgs/page_ylcbq/cm-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cm-xuan.png'), imageName: 'cm' ,click:false,checkIoc:checkCeMian},
      { name: '清除', icon: require('@/assets/imgs/page_ylcbq/qc-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qc-xuan.png'), imageName: 'qc' ,click:false,checkIoc:checkClear},

    ]})
  const global_aside = asideShow()

  onMounted(() => [
    getWeather()
  ])

  const weather = ref('qing')

  function changeImage(index,name) {
    isCheck.value.data.forEach(i=>{
      if(i.imageName===name) {
        console.log(name)
        i.click =  !i.click ;
        i.checkIoc = !i.checkIoc;
        if (i.click) {
          // 选择
          if (name == 'qj') {
            //返回全景
            fullExtent();
            i.click =  !i.click ;
            i.checkIoc = !i.checkIoc;
          } else if (name == 'ss') {
            togglePageAside()
          }else if (name == 'cl') {
            calculation('distance')
          }else if (name == 'cm') {
            calculation('area')
          }
          else if (name == 'qc') {
            clearMap()
            i.click =  !i.click ;
            i.checkIoc = !i.checkIoc;
          }
        }else {
          // 取消
          if (name == 'ss') {
            togglePageAside()
          }else if (name == 'cl') {
            clearMap()
          }else if (name == 'cm') {
            clearMap()
          }else if (name == 'qc') {
            clearMap()
          }

        }

      }

    })
  }

  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:
          ueCallCloseWarningReturn()
          waterDeepShow.value = true
          break
        case 2:
          ueCallfullExtent()
          setTimeout(() => {
            ueCallBoatRealtime()
          }, 1000);
          break
        case 3:
          ueCallFlyToSP()
          bus.on('fly_Action', (data) => {
            if(data.isOk=='true') {
              ueCallOpenVideoFusion()
              bus.off('fly_Action')
            }
          })
          break
        case 4:
          bus.emit('toggle_sxdx', true)
          clickWeeather.value=true
          break
        case 5:
          if (clickWeeather.value) {
            miForChangeShow.value = true
            subList[index].status = true
            ueCallShowAllMi()
          }else {
            subList[index].status = false
          }
          break
        case 6:
          ueCallFlyToZrcb()
          break
      }
    } else {
      switch(index) {
        case 0:
          ueCallCloseHangdaoLine()
          break
        case 1:
          ueCallShowWarningReturn()
          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')
  }

  function togglePageAside() {
    global_aside.toggleAside()
  }
  
</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%;
  }
     .tab-icon {
  width: 50px;
  height: 50px;
}
  .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;
        padding: 0 25px;
        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;
    }
  }

  .right {
    margin-top: 8px;
    margin-right: 3px;
    .humidity, .temperature {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-right: 6px;
    }
      li{
          list-style: none;
          float: left;
        i {
          display: block;
          height: 50px;
          width: 50px;
        }
      }
    .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;
    }
  }

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

    .right-box {
      margin-left: 40px;
      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>