bug修改

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
+      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
-        class="nav"
-        :class="{ select: nav.key == select }"
-        v-if="nav.show"
-        @click="selectNav(nav.key)"
-      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -21,14 +16,14 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+import { ref, defineProps, watch, getCurrentInstance } from 'vue'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  import { queryPartAppByKeyId2 } from '@/api/home'
+import { queryPartAppByKeyId2 } from '@/api/home'
-  // 获取当前路由地址
+// 获取当前路由地址
-  const router = useRouter()
+const router = useRouter()
-  const keyId = router.currentRoute.value.query.id
+const keyId = router.currentRoute.value.query.id
-  const navList = ref([
+const navList = ref([
   {
     name: '图层展示',
     key: 'service-presentation',
@@ -57,15 +52,15 @@
     name: '常见问题',
     key: 'service-common-problem',
   },
-  ])
+])
-  const props = defineProps({
+const props = defineProps({
   selectNow: { type: String, default: '' },
   dataList: { type: Object, default: null },
   associatedComponents: { type: Array, default: null },
-  })
+})
-  const list = ref([])
+const list = ref([])
-  // 根据能力id查询是否存在关联应用
+// 根据能力id查询是否存在关联应用
-  if (keyId) {
+if (keyId) {
   queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
     console.log('ressssssss', res)
     if (res.data.data.length > 0) {
@@ -78,14 +73,14 @@
       list.value.unshift('关联应用')
     }
   })
-  }
+}
-  const select = ref('layer-service-associated-ability')
+const select = ref('layer-service-associated-ability')
-  const selectNav = (key) => {
+const selectNav = (key) => {
   select.value = key
   console.log(key, select.value)
   mybus.emit('flyToView', select.value)
-  }
+}
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   list.value = []
   let arr = [
     '图层缩略图',
@@ -146,17 +141,17 @@
     }
   })
   select.value = navList.value.filter(
-      (item) => item.name === '关联应用'
+    (item) => item.name === list.value[0]
   )[0].key
   console.log('11111111111111111111111111', list.value, navList.value)
-  }
+}
-  watch(
+watch(
   () => props.selectNow,
   (newValue) => {
     select.value = newValue
   }
-  )
+)
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -222,16 +217,16 @@
       })
       if (list.value.length > 0) {
         select.value = navList.value.filter(
-            (item) => item.name === '图层展示'
+          (item) => item.name === list.value[0]
         )[0].key
       }
       console.log('11111111111111111111111111', list.value, navList.value)
     }
   }
-  )
+)
 </script>
 <style lang="less" scoped>
-  .business-navigation {
+.business-navigation {
   width: 19.12rem;
   height: 0.84rem;
   line-height: 0.8rem;
@@ -243,22 +238,26 @@
   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>