jxlcpy_base_daoshi_vue_ts/src/views/Nav/Nav.vue

<template>
  <div class="nav-container"></div>
</template>

<script lang="ts" setup>
import { reactive, computed, watch, nextTick } from 'vue'
import { useStore } from '@/store'
import { useBrandStatistics } from '@/composables/useStatistics'

interface State {
  pathShop: any[]
  replay: boolean
  pause: boolean
  speedUp: boolean
  controlIdx: number
  direction: string
}

const store = useStore()
const state = reactive<State>({
  pathShop: [], //经过店铺
  replay: false, //重播
  pause: false, //暂停
  speedUp: false, //加速
  controlIdx: 0, //导航方式索引
  direction: '' //方向
})

const config = computed(() => store.config)
const currentFloor = computed(() => store.currentFloor)
const shop = computed(() => store.shop)

//方向箭头
const directionIcon = computed(() => {
  switch (state.direction) {
    case '向前出发':
      return {
        text: state.direction,
        icon: require('../../assets/images/nav/up_arrow.png'),
        passIcon: require('../../assets/images/nav/thumb_up.png'), //经过店铺时的那个小箭头
        class: 'animate__fadeInUp'
      }

    case '向后出发':
      return {
        text: state.direction,
        icon: require('../../assets/images/nav/down_arrow.png'),
        passIcon: require('../../assets/images/nav/thumb_down.png'),
        class: 'animate__fadeInDown'
      }

    case '向左出发':
      return {
        text: state.direction,
        icon: require('../../assets/images/nav/left_arrow.png'),
        passIcon: require('../../assets/images/nav/thumb_left.png'),
        class: 'animate__fadeInRight'
      }

    case '向右出发':
      return {
        text: state.direction,
        icon: require('../../assets/images/nav/right_arrow.png'),
        passIcon: require('../../assets/images/nav/thumg_right.png'),
        class: 'animate__fadeInLeft'
      }
    default:
      return {
        text: '',
        icon: '',
        class: '',
        passIcon: ''
      }
  }
})

//模式列表
const list = computed(() => [
  {
    name: '最佳路线',
    nameEn: '',
    icon: require('../../assets/images/nav/best.png'),
    iconSelected: require('../../assets/images/nav/best_active.png')
  },
  {
    name: '扶梯模式',
    nameEn: '',
    icon: require('../../assets/images/nav/ft.png'),
    iconSelected: require('../../assets/images/nav/ft_active.png')
  },
  {
    name: '直梯模式',
    nameEn: '',
    icon: require('../../assets/images/nav/dt.png'),
    iconSelected: require('../../assets/images/nav/dt_active.png')
  }
])

//重播
function handleReplay() {
  window.Config.setPlaySpeed(4)
  state.replay = !state.replay
  state.pause = false
  state.speedUp = false
  window.Map_QM.pathRePlay()
}

//暂停导航 继续导航
function togglePause() {
  window.Config.setPlaySpeed(4)
  state.pause = !state.pause
  state.replay = false
  state.speedUp = false
  nextTick(() => {
    window.Map_QM.pathStop()
  })
}

//加速 恢复初始加速状态
function handleSpeedUp() {
  state.replay = false
  state.pause = false
  state.speedUp = !state.speedUp
  nextTick(() => {
    state.speedUp ? (window as any).Config.setPlaySpeed(10) : (window as any).Config.setPlaySpeed(4)
  })
}

//切换导航路线
function handleControl(index: number) {
  window.Config.setPlaySpeed(4)
  state.replay = false
  state.pause = false
  state.speedUp = false
  state.controlIdx = index
  selectedWayMethods(index)
}

//选择路线 0:最佳路线 1: 扶梯模式 2: 电梯模式
function selectedWayMethods(index: number) {
  switch (index) {
    case 0:
      //最佳路线
      window.Map_QM.ChangePathByGood()
      break
    case 1:
      //扶梯模式
      window.Map_QM.ChangePathByFt(backPathArray)
      break

    case 2:
      //电梯模式
      window.Map_QM.ChangePathByDt(backPathArray)
      break
    default:
      window.Map_QM.ChangePathByGood(backPathArray)
      break
  }
}

//导航动画
function startNavi({ floorOrder, yaxis }: { floorOrder: number; yaxis: number }) {
  window.Map_QM.pathNode({ floor: floorOrder, node: yaxis }, backPathArray)
}

//店铺经过相关数据
function backPathArray(_list: any[]) {
  state.direction = _list?.[0]?.Direction ?? ''
  state.pathShop = analyserShop(_list) ?? []
}

//处理地图传过来的店铺列表数据
function analyserShop(path: any[]) {
  const newPathshop: any[] = []

  if (!path.length) {
    return newPathshop
  }

  for (let i = 0; i < path.length; i++) {
    //途经店铺
    for (let k = 0; k < path[i].wayShop.length; k++) {
      //筛选非目的地
      if (path[i].wayShop[k].shop.code === shop.value.code || !path[i].wayShop[k].shop.navRecommend) {
        continue
      }
      newPathshop.push(path[i].wayShop[k].shop)
    }

    if (path[i]?.Facilities?.facCode && i < path.length - 1) {
      if (path[i].Facilities.facCode === 'ft') {
        const ft = {
          name: `乘坐扶梯，${path[i].Direction}`,
          url: '/static/img/ft.png',
          facCode: 1
        }
        newPathshop.push(ft)
      } else if (path[i].Facilities.facCode === 'dt') {
        const dt = {
          name: `乘坐直梯，${path[i].Direction}`,
          url: '/static/img/dt.png',
          facCode: 1
        }
        newPathshop.push(dt)
      }
    }
  }
  return newPathshop
}

//监听店铺改变 导航到新店铺
watch(
  shop,
  newVal => {
    useBrandStatistics('导航')
    const { floorOrder, yaxis } = newVal
    startNavi({ floorOrder, yaxis })
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped></style>