From c2bb7f5eb8e01bd1630a1c54421b281454022b9f Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Wed, 6 Jul 2022 10:09:53 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LayerService/LayerServiceNavigation.vue   | 473 +++++++++---------
 1 file changed, 236 insertions(+), 237 deletions(-)

diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index cf148632..b0e395c3 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -8,12 +8,7 @@
 <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)"
-      >
+      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -21,244 +16,248 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
-  import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
-  import { queryPartAppByKeyId2 } from '@/api/home'
-  // 获取当前路由地址
-  const router = useRouter()
-  const keyId = router.currentRoute.value.query.id
-  const navList = ref([
-    {
-      name: '图层展示',
-      key: 'service-presentation',
-    },
-    {
-      name: '图层信息',
-      key: 'service-information',
-    },
-    {
-      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 },
-    associatedComponents: { type: Array, default: null },
+import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+import { useRouter } from 'vue-router'
+import mybus from '@/myplugins/mybus'
+import { queryPartAppByKeyId2 } from '@/api/home'
+// 获取当前路由地址
+const router = useRouter()
+const keyId = router.currentRoute.value.query.id
+const navList = ref([
+  {
+    name: '图层展示',
+    key: 'service-presentation',
+  },
+  {
+    name: '图层信息',
+    key: 'service-information',
+  },
+  {
+    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 },
+  associatedComponents: { type: Array, default: null },
+})
+const list = ref([])
+// 根据能力id查询是否存在关联应用
+if (keyId) {
+  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+    console.log('ressssssss', res)
+    if (res.data.data.length > 0) {
+      // 存在关联应用时在导航栏加入关联应用
+      navList.value.unshift({
+        name: '关联应用',
+        key: 'layer-service-associated-ability',
+        show: true,
+      })
+      list.value.unshift('关联应用')
+    }
   })
-  const list = ref([])
-  // 根据能力id查询是否存在关联应用
-  if (keyId) {
-    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
-      console.log('ressssssss', res)
-      if (res.data.data.length > 0) {
-        // 存在关联应用时在导航栏加入关联应用
-        navList.value.unshift({
-          name: '关联应用',
-          key: 'layer-service-associated-ability',
-          show: true,
-        })
-        list.value.unshift('关联应用')
+}
+const select = ref('layer-service-associated-ability')
+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('图层预览')
       }
-    })
-  }
-  const select = ref('layer-service-associated-ability')
-  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.unshift('关联应用')
-    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
+    } 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('使用方式')
     }
-  )
-  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.unshift('关联应用')
-        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)
-      }
+  })
+  list.value.unshift('关联应用')
+  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 === list.value[0]
+  )[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.unshift('关联应用')
+      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 === list.value[0]
+        )[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;
+.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;
-    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;
-      }
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .line {
+      width: 0.4rem;
+      height: 0.04rem;
     }
   }
+
+  .select {
+    color: #526aff;
+
+    .line {
+      background: #526aff;
+    }
+  }
+}
 </style>