hi-ucs/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 14:54:01
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-15 18:24:39
 * @Description: 应用详情页导航
-->
<template>
  <div class="business-navigation" v-if="navList.length > 0">
    <template v-for="nav in navList" :key="nav.key">
      <div
        class="nav"
        :class="{ select: nav.key == select }"
        v-if="nav.show"
        @click="selectNav(nav.key)"
      >
        {{ nav.name }}
        <span class="line"></span>
      </div>
    </template>
  </div>
</template>
<script setup>
  import { ref, defineProps, watch } from 'vue'
  import mybus from '@/myplugins/mybus'
  const navList = ref([
    {
      name: '图层展示',
      key: 'service-presentation',
    },
    {
      name: '图层信息',
      key: 'service-information',
    },
    {
      name: '关联能力',
      key: 'layer-service-associated-ability',
    },
    {
      name: '应用场景',
      key: 'service-application-scenarios',
    },
    {
      name: '应用案例',
      key: 'service-application-case',
    },
    {
      name: '图层预览',
      key: 'service-preview',
    },
    {
      name: '使用方式',
      key: 'service-usage-mode',
    },
    {
      name: '常见问题',
      key: 'service-common-problem',
    },
  ])
  const props = defineProps({
    selectNow: { type: String, default: '' },
    dataList: { type: Object, default: null },
  })
  const select = ref('service-presentation')
  const list = ref([])
  const selectNav = (key) => {
    select.value = key
    console.log(key, select.value)
    mybus.emit('flyToView', select.value)
  }
  if (props.dataList.infoList) {
    list.value = []
    let arr = [
      '图层缩略图',
      '坐标系',
      '应用场景',
      '应用案例',
      '是否可预览',
      '使用方式',
      '常见问题',
    ]
    // 排序
    // eslint-disable-next-line vue/no-mutating-props
    props.dataList.infoList.sort((a, b) => {
      return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
    })
    props.dataList.infoList.map((item) => {
      if (
        item.attrType === '常见问题' ||
        item.attrType === '应用场景' ||
        item.attrType === '应用案例'
      ) {
        list.value.push(item.attrType)
      } else if (item.attrType === '图层缩略图') {
        list.value.push('图层展示')
      } else if (item.attrType === '是否可预览') {
        if (item.attrValue === '是') {
          list.value.push('图层预览')
        }
      } else if (
        item.attrType === '服务类型' ||
        item.attrType === '覆盖区域' ||
        item.attrType === '切片策略' ||
        item.attrType === '坐标系' ||
        item.attrType === '切片尺寸' ||
        item.attrType === '最小级别' ||
        item.attrType === '数据范围' ||
        item.attrType === '图层类型' ||
        item.attrType === '最大级别'
      ) {
        list.value.push('图层信息')
      } else if (
        item.attrType === '技术文档' ||
        item.attrType === '服务商' ||
        item.attrType === '服务商联系人' ||
        item.attrType === '使用手册' ||
        item.attrType === '服务地址' ||
        item.attrType === '样式服务地址' ||
        item.attrType === '服务商联系电话'
      ) {
        list.value.push('使用方式')
      }
    })
    list.value.push('关联能力')
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
        item.show = true
      }
    })
    select.value = navList.value.filter(
      (item) => item.name === '图层展示'
    )[0].key
    console.log('11111111111111111111111111', list.value, navList.value)
  }
  watch(
    () => props.selectNow,
    (newValue) => {
      select.value = newValue
    }
  )
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        list.value = []
        let arr = [
          '图层缩略图',
          '坐标系',
          '应用场景',
          '应用案例',
          '是否可预览',
          '使用方式',
          '常见问题',
        ]
        // 排序
        // eslint-disable-next-line vue/no-mutating-props
        props.dataList.infoList.sort((a, b) => {
          // console.log('排序==============>', a, b)
          return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
        })
        val.infoList.map((item) => {
          if (
            item.attrType === '常见问题' ||
            item.attrType === '应用场景' ||
            item.attrType === '应用案例'
          ) {
            list.value.push(item.attrType)
          } else if (item.attrType === '图层缩略图') {
            list.value.push('图层展示')
          } else if (item.attrType === '是否可预览') {
            if (item.attrValue === '是') {
              list.value.push('图层预览')
            }
          } else if (
            item.attrType === '服务类型' ||
            item.attrType === '覆盖区域' ||
            item.attrType === '切片策略' ||
            item.attrType === '坐标系' ||
            item.attrType === '切片尺寸' ||
            item.attrType === '最小级别' ||
            item.attrType === '数据范围' ||
            item.attrType === '图层类型' ||
            item.attrType === '最大级别'
          ) {
            list.value.push('图层信息')
          } else if (
            item.attrType === '技术文档' ||
            item.attrType === '服务商' ||
            item.attrType === '服务商联系人' ||
            item.attrType === '使用手册' ||
            item.attrType === '服务地址' ||
            item.attrType === '样式服务地址' ||
            item.attrType === '服务商联系电话'
          ) {
            list.value.push('使用方式')
          }
        })
        list.value.push('关联能力')
        navList.value.forEach((item) => {
          console.log(item)
          if (list.value.indexOf(item.name) > -1) {
            item.show = true
          }
        })
        if (list.value.length > 0) {
          select.value = navList.value.filter(
            (item) => item.name === '图层展示'
          )[0].key
        }
        console.log('11111111111111111111111111', list.value, navList.value)
      }
    }
  )
</script>
<style lang="less" scoped>
  .business-navigation {
    width: 19.12rem;
    height: 0.84rem;
    line-height: 0.8rem;
    display: flex;
    justify-content: space-around;
    font-size: 0.24rem;
    color: #666;
    background: #fff;
    padding: 0 3rem;
    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
    position: relative;
    .nav {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .line {
        width: 0.4rem;
        height: 0.04rem;
      }
    }
    .select {
      color: #526aff;
      .line {
        background: #526aff;
      }
    }
  }
</style>