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

<template>
  <div id="header">
    <div class="bg-gradient"></div>
    <div class="container">
      <div class="title">黄浦江水上智能监控系统</div>
      <div class="content">
        <div class="left">
          <i class="humidity"></i>
          <div class="wsd-title">
            <span>湿度</span>
            <span>Humidity</span>
          </div>
          <span class="wsd-data">{{humidity}}</span>
          <span class="wsd-unit">RH%</span>
          <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">
          <i class="btn-dfmz" @click="handleDfmz"></i>
          <i class="btn-fulls" @click="handleFullExtent"></i>
          <i class="btn-tools" @click="changeToolsShow()"></i>
          <div class="tool-box" v-show="toolsShow">
            <i class="tb-icon-close" @click="changeToolsShow(false)"></i>
            <div class="search-wrapper">
              <input type="text" class="tools-search"/>
              <i class="search-btn"></i>
            </div>
            <div class="tool-items-wrapper">
              <div class="tool-items"
                v-for="item, index in toolList"
                :key="item.name"
                @click="handleToolClick(index)"
              >
                <img class="tool-icon" :src="item.status? item.iconOn: item.icon" alt="">
                <span :class="['tool-label', {'tool-label-highlight':item.status}]">{{item.name}}</span>
              </div>
            </div>
          </div>
          <div v-show="waterLevelShow" class="water-level">
            <span class="wl-title">水位监测</span>
            <div class="wl-main">
              <div class="wl-left">
                <span class="wl-subtitle">水位值</span>
                <div class="wl-aside-main">
                  <div class="wl-aside-label">
                    <span v-show="item%500 === 0" v-for="item in waterLevelNum">{{item}}mm</span>
                  </div>
                  <div id="water-axis" class="wl-aside-axis">
                    <div id="dragger-left" class="wl-axis-dragger">
                      <img src="@/assets/imgs/arrow-left.png" alt="">
                      <i></i>
                    </div>
                  </div>
                </div>
              </div>
              <div id="wl-center" class="wl-center"></div>
              <div class="wl-right">
                <span class="wl-subtitle">时间轴</span>
                <div class="wl-aside-main">
                  <div id="time-axis" class="wl-aside-axis">
                    <div @mousedown="handleTimeDrag" id="dragger-right" class="wl-axis-dragger">
                      <i></i>
                      <img src="@/assets/imgs/arrow-right.png" alt="">
                    </div>
                  </div>
                  <div class="wl-aside-label">
                    <span v-show="item%2 ===0" v-for="item in waterLevelTime">{{item}}:00</span>
                  </div>
                </div>
              </div>
            </div>
            
          </div>
          <div class="right-box" @click="toggleScene">
            <span class="now-time">{{time}}</span>
            <div class="date">
              <span>{{day}}</span>
              <span>{{date}}</span>
            </div>
            <i class="weather"></i>
          </div>
          <div v-show="sceneBoxShow" class="scene-box">
            <div class="sb-time-row">
              <div v-for="item, index in sceneList.time" @click="toggleTime((index+1)*6)" class="scene-item">
                <img :src="item.icon" alt="">
                <span :class="{'highlight': item.status}">{{item.name}}</span>
              </div>
            </div>
            <div class="sb-weather-row">
              <div v-for="item, index in sceneList.weather" @click="toggleWeather(index)" class="scene-item">
                <img :src="item.icon" alt="">
                <span :class="{'highlight': item.status}">{{item.name}}</span>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    
  </div>
</template>

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

<script setup>
  import { onMounted, reactive, ref, computed, nextTick, watch, onBeforeUnmount } from 'vue';
  import { useNow, useDateFormat } from '@vueuse/core'
  import { addResponseEventListener, callUIInteraction } from '@/webRtcVideo.js'
  import { setWaterLevel } from '@/echarts/options'
  import bus from '@/utils/bus'

  const sceneBoxShow = ref(false)

  function toggleScene() {
    sceneBoxShow.value = !sceneBoxShow.value
  }

  const sceneList = reactive({
    time: [
      { name: '早晨', icon: require('@/assets/imgs/scene/zaochen.png'), status: false },
      { name: '中午', icon: require('@/assets/imgs/scene/qingtian.png'), status: false },
      { name: '傍晚', icon: require('@/assets/imgs/scene/bangwan.png'), status: false },
      { name: '晚上', icon: require('@/assets/imgs/scene/wanshang.png'), status: false },
    ],
    weather: [
      { name: '晴', icon: require('@/assets/imgs/scene/w-qing.png'), status: false },
      { name: '多云', icon: require('@/assets/imgs/scene/w-duoyun.png'), status: false },
      { name: '雾', icon: require('@/assets/imgs/scene/w-wu.png'), status: false },
      { name: '小雨', icon: require('@/assets/imgs/scene/w-xiaoyu.png'), status: false },
      { name: '中雨', icon: require('@/assets/imgs/scene/w-zhongyu.png'), status: false },
      { name: '大雨', icon: require('@/assets/imgs/scene/w-dayu.png'), status: false },
      { name: '小雪', icon: require('@/assets/imgs/scene/w-xiaoxue.png'), status: false },
      { name: '中雪', icon: require('@/assets/imgs/scene/w-zhongxue.png'), status: false },
      { name: '大雪', icon: require('@/assets/imgs/scene/w-daxue.png'), status: false },
    ]
  })

  function callUIInteractionFormat(action) {
    if(action['Parameters']) {
      action['Parameters'] = JSON.stringify(action['Parameters'])
    }
    callUIInteraction(action)
  }

  function toggleTime(hour) {
    let action = {
      "ActionName":"change_time",
      "Parameters":{
        "hour":hour,"minutes":0,"seconds":0
      }
    }
    callUIInteractionFormat(action);
  }

  function toggleWeather(type) {
    let action = {
      "ActionName":"change_weather",
      "Parameters":{
        "weather_type":type,
      }
    }
    console.log(action)
    callUIInteractionFormat(action);
  }

  const waterLevelNow = ref(450)
  const waterLevelShow = ref(false)

  // 水位时间条拖动时的处理函数
  function handleTimeDrag(event) {
    let timeDragger = document.getElementById('dragger-right')
    let totalH = document.getElementById('time-axis').offsetHeight
    event =event||window.event
    let tp =event.clientY - timeDragger.offsetTop
    let top = event.clientY-tp
    timeDragger.onmousemove = function(event){
      event =event||window.event
      top = event.clientY-tp
      if(top>-3 && top<totalH-22) {
        timeDragger.style.top= top+"px"
      }else {
        timeDragger.onmousemove = null
        handleTimeDragDone(parseInt(top/totalH*100))
      }
    }
    timeDragger.onmouseup= function(){
      timeDragger.onmousemove = null
      handleTimeDragDone(parseInt(top/totalH*100))
    }
  }

  // 水位时间条拖动完成时的处理函数
  function handleTimeDragDone(perIn) {
    let perOut = -perIn*perIn / 60 + 1.8*perIn + 20
    let waterAxisH = document.getElementById('water-axis').offsetHeight-23
    let height = perOut/100*waterAxisH
    let waterLevelDragger = document.getElementById('dragger-left')
    waterLevelDragger.style.bottom= parseInt(height) + 'px'
    waterLevelNow.value = perOut*10
    setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
    toggleSwqk(parseInt(perOut*6+100))
  }

  onMounted(() => [
    setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
  ])

  const temperature = ref('32')
  const humidity = ref('42.3')
  const time = useDateFormat(useNow(), 'HH:mm')
  const date = useDateFormat(useNow(), 'YYYY.MM.DD')
  const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })

  const toolList = reactive([
    { name: '船舶位置', icon: require('@/assets/imgs/tool/tool-cbwz.png'), iconOn: require('@/assets/imgs/tool/tool-cbwz-h.png'), status: true },
    { name: '行驶航线', icon: require('@/assets/imgs/tool/tool-xshx.png'), iconOn: require('@/assets/imgs/tool/tool-xshx-h.png'), status: false },
    { name: '游览灯光', icon: require('@/assets/imgs/tool/tool-yldg.png'), iconOn: require('@/assets/imgs/tool/tool-yldg-h.png'), status: false },
    { name: '航线展示', icon: require('@/assets/imgs/tool/tool-hxzs.png'), iconOn: require('@/assets/imgs/tool/tool-hxzs-h.png'), status: false },
    { name: '淤泥预警', icon: require('@/assets/imgs/tool/tool-ynyj.png'), iconOn: require('@/assets/imgs/tool/tool-ynyj-h.png'), status: false },
    { name: '模拟驾驶', icon: require('@/assets/imgs/tool/tool-mnjs.png'), iconOn: require('@/assets/imgs/tool/tool-mnjs-h.png'), status: false },
    { name: '水位情况', icon: require('@/assets/imgs/tool/tool-swqk.png'), iconOn: require('@/assets/imgs/tool/tool-swqk-h.png'), status: false },
    { name: '视频融合', icon: require('@/assets/imgs/tool/tool-sprh.png'), iconOn: require('@/assets/imgs/tool/tool-sprh-h.png'), status: false },
    { name: '中燃船舶', icon: require('@/assets/imgs/tool/tool-zrcb.png'), iconOn: require('@/assets/imgs/tool/tool-zrcb-h.png'), status: false },
  ])

  const toolsShow = ref(true)
  function changeToolsShow(param) {

    toolsShow.value = param || !toolsShow.value
  }

  function handleFullExtent() {
    let action = {
      "ActionName":"full_extent"
    }
    callUIInteractionFormat(action);
  }

  let dfmzStatus = false

  function handleDfmz() {
    let action = dfmzStatus? { "ActionName":"icon_close" }: { "ActionName":"icon_start" }
    callUIInteractionFormat(action);
    dfmzStatus = !dfmzStatus
  }

  
  const waterLevelNum = computed(() => {
    let arr = []
    for(let i=2000; i<=5000; i+=200) {
      arr.push(i)
    }
    return arr
  })
  const waterLevelTime = computed(() => {
    let arr = []
    for(let i=24; i>=1; i--) {
      let a = ''
      if(i<10) {
        a = '0'+i
      }else {
        a = i
      }
      arr.push(a)
    }
    return arr
  })


  function handleToolClick(index) {
    toolList[index].status = !toolList[index].status
    let status = toolList[index].status
    switch (index) {
      case 0:
        if(status) { cbwzOn() } else { cbwzOff() }
        break;
      case 1:
        xshxOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
      case 2:
        if(status) { yldgOn() } else { yldgOff() }
        break;
      case 3:
        if(status) { hxzsOn() } else { hxzsOff() }
        break;
      case 4:
        if(status) { ynyjOn() } else { ynyjOff() }
        break;
      case 5:
        if(status) { mnjsOn() } else { mnjsOff() }
        break;
      case 6:
        if(status) {
          waterLevelShow.value = true
          swqkOn()
          nextTick(() => {
            setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
          })
        } else {
          waterLevelShow.value = false 
        }
        break;
      case 7:
        sprhOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
      case 8:
        zrcbOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
    }

  }


  function cbwzOn() {
    let action1 = {
      "ActionName":"fly",
      "Parameters":{
        "x":180389,"y":-96050,"z":230000,"roll_x":0,"roll_y":-65,"roll_z":4.5
      }
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"boat_realtime"
    }
    callUIInteractionFormat(action2);
    let action3 = {
      "ActionName":"start_time"
    }
    callUIInteractionFormat(action3);
  }

  function cbwzOff() {
    let action = {
      "ActionName":"clear_boat_time"
    }
    callUIInteractionFormat(action);
  }

  function xshxOn() {
    let action = {
      "ActionName":"drive_demo_boat"
    }
    callUIInteractionFormat(action);
  }

  function yldgOn() {
    let action1 = {
      "ActionName":"light_start"
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"change_time",
      "Parameters":{
        "hour":23,"minutes":30,"seconds":0
      }
    }
    callUIInteractionFormat(action2);
  }

  function yldgOff() {
    let action1 = {
      "ActionName":"light_close"
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"change_time",
      "Parameters":{
        "hour":12,"minutes":30,"seconds":0
      }
    }
    callUIInteractionFormat(action2);
  }

  function hxzsOn() {
    let action1 = {
      "ActionName":"fly",
      "Parameters":{
        "x":247875,"y":-120222,"z":71577,"roll_x":0,"roll_y":-80,"roll_z":64
      }
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"start_rline"
    }
    callUIInteractionFormat(action2);
  }

  function hxzsOff() {
    let action = {
      "ActionName":"close_rline"
    }
    callUIInteractionFormat(action);
  }

  function ynyjOn() {
    let action = {
      "ActionName":"start_yjyj"
    }
    callUIInteractionFormat(action);
  }

  function ynyjOff() {
    let action = {
      "ActionName":"close_yjyj"
    }
    callUIInteractionFormat(action);
  }

  function mnjsOn() {
    let action = {
      "ActionName":"simulate_drive"
    }
    callUIInteractionFormat(action);
  }

  function mnjsOff() {
    let action = {
      "ActionName":"simulate_drive_close"
    }
    callUIInteractionFormat(action);
  }

  function swqkOn() {
    let action1 = {
      "ActionName":"fly",
      "Parameters":{ "x":230843,"y":-78457,"z":998,"roll_x":0,"roll_y":-20,"roll_z":64 }
    }
    callUIInteractionFormat(JSON.stringify(action1));
    toggleSwqk(374)
  }

  function toggleSwqk(param) {
    let action = {
      "ActionName":"set_water_z",
      "Parameters":{ "water_z":param }
    }
    callUIInteractionFormat(action);
  }

  function sprhOn() {
    let action = {
      "ActionName":"fly_camera"
    }
    callUIInteractionFormat(action);
  }

  function zrcbOn() {
    let action = {
      "ActionName":"fly",
      "Parameters":{ "x":666635,"y":-1152420,"z":5000,"roll_x":0,"roll_y":-24,"roll_z":-170.0 }
    }
    callUIInteractionFormat(action);
  }

  bus.on('hideToolBox', () => { toolsShow.value = false});

  onBeforeUnmount(() => {
    bus.off('hideToolBox');
  })
  
</script>

<style lang="scss" scoped>
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12.4%;
  z-index: 100;

  .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/imgs/header.png') no-repeat;
    background-size: 100% 100%;
    z-index: 101;
  }
  
  .bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,17,50,0), rgba(0,17,51,0.55), rgba(0,17,50,0.8));
    z-index: 100;
  }
  

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

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

  .left {
    margin-left: 40px;
    .humidity, .temperature {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-right: 6px;
    }
    .humidity {
      background: url('@/assets/imgs/humidity.png') no-repeat;
    }
    .temperature {
      background: url('@/assets/imgs/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 {

    .btn-dfmz, .btn-fulls, .btn-tools {
      display: inline-block;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
    .btn-dfmz {
      background: url('@/assets/imgs/dfmz.png') no-repeat;
      background-size: contain;
      
    }
    .btn-fulls {
      background: url('@/assets/imgs/fulls.png') no-repeat;
      background-size: contain;
    }
    .btn-tools {
      margin-right: 36px;
      background: url('@/assets/imgs/tool/tools.png') no-repeat;
      background-size: contain;
    }

    .tool-box {
      position: absolute;
      top: 3.5vh;
      right: 360px;
      display: inline-block;
      width: 33.8vh;
      height: 40vh;
      background: url('@/assets/imgs/tool/toolbox-bg.png') no-repeat;
      background-size: contain;
      box-sizing: border-box;
      padding-top: 28px;

      .tb-icon-close {
        position: absolute;
        display: block;
        right: 13px;
        top: 33px;
        width: 20px;
        height: 20px;
        background: url('@/assets/imgs/tool/toolbox-close.png') no-repeat;
        background-size: contain;
        cursor: pointer;
      }

      .search-wrapper {
        position: relative;
        width: 100%;
        height: 8.2%;
        margin-top: 26px;
        text-align: center;
        .tools-search {
          box-sizing: border-box;
          width: 84%;
          height: 100%;
          outline: none;
          border: 1px solid #01B9BE;
          border-radius: 18px;
          background-color: transparent;
          color: #fff;
          padding: 0 35px 0 15px;
          font-size: 14px;
        }
        .search-btn {
          display: inline-block;
          position: absolute;
          right: 11%;
          top: 20%;
          width: 6%;
          height: 58%;
          background: url('@/assets/imgs/icon-search.png') no-repeat;
          background-size: contain;
          cursor: pointer;
        }
      }

      .tool-items-wrapper {
        box-sizing: border-box;
        padding: 4% 6% 6%;
        width: 100%;
        height: 84%;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        .tool-items {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.3%;
          cursor: pointer;
          .tool-icon {
            width: 6.94vh;
            height: 6.94vh;
            transform: translateY(8px);
          }
          .tool-label {
            font-size: 12px;
          }
          .tool-label-highlight {
            color: yellow;
          }
        }
      }
      
    }

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

    .now-time {
      font-family: PFlight;
      font-size: 30px;
      margin-right: 16px;
    }
    
    .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/weather-dy.png') no-repeat;
      background-size: contain;
      margin: 0 36px;
    }

    .scene-box {
      position: absolute;
      box-sizing: border-box;
      padding: 25px 20px;
      top: 5vh;
      right: 0.5vw;
      width: 300px;
      height: 350px;
      background-color: rgba(14, 30, 50, 0.7);
      transition: all 0.5s linear;

      .sb-time-row, .sb-weather-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }

      .sb-weather-row {
        margin-top: 10px;
        .scene-item {
          width: 26%;
        }
      }

      .sb-time-row {
        .scene-item {
          width: 20%;
        }
      }

      .scene-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 15px;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
        }
        .highlight {
          color: yellow;
        }
      }

    }

    .water-level {
      position: absolute;
      bottom: -77vh;
      right: 19vw;
      width: 360px;
      height: 370px;
      background: rgba(0,38,77,0.5);
      text-align: center;

      .wl-title {
        display: block;
        margin: 14px 0 10px;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
      }

      .wl-main {
        box-sizing: border-box;
        padding: 0 20px 18px;
        display: flex;
        justify-content: space-between;
        height: calc(100% - 58px);
      }

      .wl-subtitle {
        display: block;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
        color: transparent;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFD24C 100%);
        -webkit-background-clip: text;
        text-align: right;
      }

      .wl-aside-main {
        display: flex;
        justify-content: space-between;
        height: calc(100% - 26px);
      }

      .wl-aside-label {
        box-sizing: border-box;
        padding-bottom: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &>span {
          font-size: 14px;
          font-family: DIN;
          font-weight: bold;
          color: transparent;
          background: linear-gradient(183deg, #55C5FF 0%, #FFFFFF 50%, #86D2FF 100%);
          -webkit-background-clip: text;
        }
      }

      .wl-aside-axis {
        position: relative;
        width: 23px;
        height: 100%;
        background: url('@/assets/imgs/water-level.png') no-repeat;
        background-size: contain;
      }

      .wl-axis-dragger {
        position: absolute;
        bottom: 40%;
        right: 6px;
        width: 40px;
        height: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          display: inline-block;
          width: 14px;
          height: 14px;
          background-color: #fff;
          border-radius: 50%;
        }
      }

      .wl-left  {
        width: 35%;
        box-sizing: border-box;
        
      }

      .wl-center {
        width: 36%;
        height: 100%;
      }
      .wl-right  {
        width: 28%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 8px;

        .wl-subtitle {
          text-align: left;
        }

        .wl-aside-axis {
          background: url('@/assets/imgs/water-timeaxis.png') no-repeat;
          background-size: contain;
        }

        .wl-axis-dragger {
          cursor: pointer;
          left: 0;
          bottom: 0;
        }

      }
    }

  }
}
</style>