From 617373eb8ef67ddab80d1ec809f54ee745cab3f2 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Thu, 7 Jul 2022 11:37:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E6=8A=80=E6=9C=AF?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=B7=BB=E5=8A=A0=E6=9A=82=E6=97=A0=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Algorithm/AlgorithmUsageMode.vue          |  20 +-
 .../components/Business/BusinessUsageMode.vue | 521 +++++++++---------
 .../LayerService/LayerServiceNavigation.vue   | 468 ++++++++--------
 .../LayerService/LayerServiceUsageMode.vue    |  37 +-
 4 files changed, 545 insertions(+), 501 deletions(-)

diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
index 9f43f6cb..380272aa 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
@@ -65,6 +65,7 @@
 
 <script setup>
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { message } from 'ant-design-vue'
   import { pinyin } from 'pinyin-pro'
   import { ref, defineProps, watch } from 'vue'
   let dataFrom = ref({
@@ -184,12 +185,19 @@
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '技术文档'
     )[0]
-    console.log('dataFrom.value.link', obj.attrValue)
-    window.open(
-      window.SITE_CONFIG.previewUrl +
-        'hisense_office/onlinePreview?url=' +
-        btoa(encodeURI(obj.attrValue))
-    )
+    // console.log('dataFrom.value.link', obj.attrValue)
+    if (obj) {
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+          'hisense_office/onlinePreview?url=' +
+          btoa(encodeURI(obj.attrValue))
+      )
+    } else {
+      message.config({
+        top: '100px', // 距离顶部的位置
+      })
+      message.error('暂无上传技术文档')
+    }
   }
 </script>
 
diff --git a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
index 053d6e75..e1e19e28 100644
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@@ -2,7 +2,10 @@
   <!-- 使用方式 -->
   <div class="usage-mode" v-if="flag">
     <div class="tltle">
-      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
     </div>
     <div class="content" v-for="item in dataFrom.content" :key="item.title">
       <div class="content-left">
@@ -84,281 +87,297 @@
 </template>
 
 <script setup>
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import { pinyin } from 'pinyin-pro'
-import { ref, defineProps, watch } from 'vue'
-let dataFrom = ref({
-  title: '使用方式',
-  englishTitle: 'USAGE',
-  content: [
-    {
-      title: '组件地址',
-      link: {
-        name: '接口地址：',
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { pinyin } from 'pinyin-pro'
+  import { ref, defineProps, watch } from 'vue'
+  import { message } from 'ant-design-vue'
+  let dataFrom = ref({
+    title: '使用方式',
+    englishTitle: 'USAGE',
+    content: [
+      {
+        title: '组件地址',
+        link: {
+          name: '接口地址：',
+        },
+        linkValue: '',
+        contact: '归属部门',
+        facilitator: { name: '归属部门：', value: '' },
+        people: { name: '部门联系人：', value: '' },
+        phone: {
+          name: '联系人电话：',
+          value: '',
+        },
+        contact2: '服务商',
+        facilitator2: { name: '服务商：', value: '' },
+        people2: { name: '服务商联系人：', value: '' },
+        phone2: {
+          name: '联系人电话：',
+          value: '',
+        },
       },
-      linkValue: '',
-      contact: '归属部门',
-      facilitator: { name: '归属部门：', value: '' },
-      people: { name: '部门联系人：', value: '' },
-      phone: {
-        name: '联系人电话：',
-        value: '',
-      },
-      contact2: '服务商',
-      facilitator2: { name: '服务商：', value: '' },
-      people2: { name: '服务商联系人：', value: '' },
-      phone2: {
-        name: '联系人电话：',
-        value: '',
-      },
-    },
-  ],
-})
-//数据初始化
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-const flag = ref(true)
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) =>
-      item.attrType === '技术文档' ||
-      item.attrType === '服务商' ||
-      item.attrType === '服务商联系人' ||
-      item.attrType === '使用手册' ||
-      item.attrType === '服务地址' ||
-      item.attrType === '样式服务地址' ||
-      item.attrType === '服务商联系电话'
-  )[0]
-  if (!obj) {
-    flag.value = false
-  } else {
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    dataFrom.value.content[0].link.value = props.dataList.apiUrl
-    dataFrom.value.content[0].facilitator.value = props.dataList.deptName
-    dataFrom.value.content[0].people.value = props.dataList.deptContacts
-    dataFrom.value.content[0].phone.value = props.dataList.deptPhone
-    console.log('dataList', props.dataList)
-    props.dataList.infoList.map((item) => {
-      if (item.attrType === '组件地址') {
-        dataFrom.value.content[0].linkValue = item.attrValue || '--'
-      } else if (item.attrType === '服务商') {
-        dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
-      } else if (item.attrType === '服务商联系人') {
-        dataFrom.value.content[0].people2.value = item.attrValue || '--'
-      } else if (item.attrType === '服务商联系电话') {
-        dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-      }
-    })
-  }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter(
-        (item) =>
-          item.attrType === '技术文档' ||
-          item.attrType === '服务商' ||
-          item.attrType === '服务商联系人' ||
-          item.attrType === '使用手册' ||
-          item.attrType === '服务地址' ||
-          item.attrType === '样式服务地址' ||
-          item.attrType === '服务商联系电话'
-      )[0]
-      if (!obj) {
-        flag.value = false
-      } else {
-        dataFrom.value.content[0].link.value = val.apiUrl
-        dataFrom.value.content[0].facilitator.value = val.deptName
-        dataFrom.value.content[0].people.value = val.deptContacts
-        dataFrom.value.content[0].phone.value = val.deptPhone
-        console.log('dataList', val)
-        val.infoList.map((item) => {
-          if (item.attrType === '组件地址') {
-            dataFrom.value.content[0].linkValue = item.attrValue || '--'
-          } else if (item.attrType === '服务商') {
-            dataFrom.value.content[0].facilitator2.value =
-              item.attrValue || '--'
-          } else if (item.attrType === '服务商联系人') {
-            dataFrom.value.content[0].people2.value = item.attrValue || '--'
-          } else if (item.attrType === '服务商联系电话') {
-            dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-          }
-        })
-      }
+    ],
+  })
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) =>
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '使用手册' ||
+        item.attrType === '服务地址' ||
+        item.attrType === '样式服务地址' ||
+        item.attrType === '服务商联系电话'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      dataFrom.value.content[0].link.value = props.dataList.apiUrl
+      dataFrom.value.content[0].facilitator.value = props.dataList.deptName
+      dataFrom.value.content[0].people.value = props.dataList.deptContacts
+      dataFrom.value.content[0].phone.value = props.dataList.deptPhone
+      console.log('dataList', props.dataList)
+      props.dataList.infoList.map((item) => {
+        if (item.attrType === '组件地址') {
+          dataFrom.value.content[0].linkValue = item.attrValue || '--'
+        } else if (item.attrType === '服务商') {
+          dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
+        } else if (item.attrType === '服务商联系人') {
+          dataFrom.value.content[0].people2.value = item.attrValue || '--'
+        } else if (item.attrType === '服务商联系电话') {
+          dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+        }
+      })
     }
   }
-)
-function technical() {
-  // 拼接路径
-  // const type = pinyin(props.dataList.type, {
-  //   pattern: 'initial',
-  // }).replace(/\s*/g, '')
-  // // 打开文档
-  // const id = props.dataList.id
-  // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
-  // console.log('dataFrom.value.link', dataFrom.value.link)
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '技术文档'
-  )[0]
-  console.log('dataFrom.value.link', obj.attrValue)
-  window.open(
-    window.SITE_CONFIG.previewUrl +
-    'hisense_office/onlinePreview?url=' +
-    btoa(encodeURI(obj.attrValue))
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter(
+          (item) =>
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '使用手册' ||
+            item.attrType === '服务地址' ||
+            item.attrType === '样式服务地址' ||
+            item.attrType === '服务商联系电话'
+        )[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          dataFrom.value.content[0].link.value = val.apiUrl
+          dataFrom.value.content[0].facilitator.value = val.deptName
+          dataFrom.value.content[0].people.value = val.deptContacts
+          dataFrom.value.content[0].phone.value = val.deptPhone
+          console.log('dataList', val)
+          val.infoList.map((item) => {
+            if (item.attrType === '组件地址') {
+              dataFrom.value.content[0].linkValue = item.attrValue || '--'
+            } else if (item.attrType === '服务商') {
+              dataFrom.value.content[0].facilitator2.value =
+                item.attrValue || '--'
+            } else if (item.attrType === '服务商联系人') {
+              dataFrom.value.content[0].people2.value = item.attrValue || '--'
+            } else if (item.attrType === '服务商联系电话') {
+              dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+            }
+          })
+        }
+      }
+    }
   )
-}
-function technicalNew() {
-  // 拼接路径
-  // const type = pinyin(props.dataList.type, {
-  //   pattern: 'initial',
-  // }).replace(/\s*/g, '')
-  // // 打开文档
-  // const id = props.dataList.id
-  // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '使用手册'
-  )[0]
-  console.log('dataFrom.value.link', obj.attrValue)
-  window.open(
-    window.SITE_CONFIG.previewUrl +
-    'hisense_office/onlinePreview?url=' +
-    btoa(encodeURI(obj.attrValue))
-  )
-}
+  function technical() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    // console.log('dataFrom.value.link', dataFrom.value.link)
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '技术文档'
+    )[0]
+    if (obj) {
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+          'hisense_office/onlinePreview?url=' +
+          btoa(encodeURI(obj.attrValue))
+      )
+    } else {
+      message.config({
+        top: '100px', // 距离顶部的位置
+      })
+      message.error('暂无上传技术文档')
+    }
+  }
+  function technicalNew() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '使用手册'
+    )[0]
+    console.log('dataFrom.value.link', obj.attrValue)
+    if (obj) {
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+          'hisense_office/onlinePreview?url=' +
+          btoa(encodeURI(obj.attrValue))
+      )
+    } else {
+      message.config({
+        top: '100px', // 距离顶部的位置
+      })
+      message.error('暂无上传使用手册')
+    }
+  }
 </script>
 
 <style lang="less" scoped>
-.usage-mode {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.8rem 0;
-
-  .content {
-    margin-top: 0.3rem;
+  .usage-mode {
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
 
-    .content-left {
-      height: 1.5rem;
-      width: 6.2rem;
-      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      border-radius: 0.1rem;
-      margin-right: 0.6rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+    .content {
+      margin-top: 0.3rem;
       display: flex;
-      align-items: center;
-      padding: 0 0.35rem;
 
-      .left {
-        .content-left-title {
-          font-size: 0.26rem;
-          line-height: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.2rem;
+      .content-left {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        margin-right: 0.6rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 0.35rem;
 
-          span:first-child {
-            margin-right: 0.1rem;
+        .left {
+          .content-left-title {
+            font-size: 0.26rem;
+            line-height: 0.26rem;
+            color: #212956;
+            margin-bottom: 0.2rem;
+
+            span:first-child {
+              margin-right: 0.1rem;
+            }
+          }
+
+          .content-left-content {
+            width: 4.2rem;
+            font-size: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            line-height: 0.2rem;
+
+            p {
+              display: -webkit-box;
+              margin-bottom: 0.1rem;
+
+              span:last-of-type {
+                width: 298px;
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+              }
+            }
           }
         }
 
-        .content-left-content {
-          width: 4.2rem;
-          font-size: 0.2rem;
+        .right {
+          div {
+            height: 0.4rem;
+            width: 1.3rem;
+            background: #ffffff;
+            border-radius: 0.2rem;
+            color: #526aff;
+            font-size: 0.2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+
+          div:first-child {
+            margin-bottom: 0.2rem;
+          }
+        }
+      }
+
+      .content-right {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 0 0.3rem;
+
+        .content-right-left {
+          border-right: 0.01rem solid #707fe0;
+          padding-right: 0.1rem;
+          margin-right: 0.1rem;
+        }
+
+        .content-right-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.15rem;
+        }
+
+        .content-right-content {
+          display: flex;
+          font-size: 0.16rem;
           color: rgba(33, 41, 86, 0.8);
           line-height: 0.2rem;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          flex-direction: column;
 
           p {
+            // width: 1.60rem;
+            height: 0.2rem;
             display: -webkit-box;
-            margin-bottom: 0.1rem;
+            // overflow: hidden;
+            margin-bottom: 0.08rem;
+            white-space: nowrap;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            margin-right: 0.15rem;
 
-            span:last-of-type {
-              width: 298px;
-              display: -webkit-box;
-              overflow: hidden;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
+            span {
+              cursor: pointer;
             }
           }
         }
       }
-
-      .right {
-        div {
-          height: 0.4rem;
-          width: 1.3rem;
-          background: #ffffff;
-          border-radius: 0.2rem;
-          color: #526aff;
-          font-size: 0.2rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-
-        div:first-child {
-          margin-bottom: 0.2rem;
-        }
-      }
-    }
-
-    .content-right {
-      height: 1.5rem;
-      width: 6.2rem;
-      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      border-radius: 0.1rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 0 0.3rem;
-
-      .content-right-left {
-        border-right: 0.01rem solid #707fe0;
-        padding-right: 0.1rem;
-        margin-right: 0.1rem;
-      }
-
-      .content-right-title {
-        font-size: 0.26rem;
-        line-height: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.15rem;
-      }
-
-      .content-right-content {
-        display: flex;
-        font-size: 0.16rem;
-        color: rgba(33, 41, 86, 0.8);
-        line-height: 0.2rem;
-        overflow: hidden;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        flex-direction: column;
-
-        p {
-          // width: 1.60rem;
-          height: 0.2rem;
-          display: -webkit-box;
-          // overflow: hidden;
-          margin-bottom: 0.08rem;
-          white-space: nowrap;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          margin-right: 0.15rem;
-
-          span {
-            cursor: pointer;
-          }
-        }
-      }
     }
   }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index b0e395c3..b0585b8f 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -8,7 +8,12 @@
 <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>
@@ -16,248 +21,247 @@
   </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 },
-})
-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('关联应用')
-    }
+  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 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 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('关联应用')
       }
-    } 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 === 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('图层预览')
+  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 === 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('使用方式')
           }
-        } 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 (navList.value.filter((item) => item.name === list.value[0])[0]) {
+          select.value = navList.value.filter(
+            (item) => item.name === list.value[0]
+          )[0].key
         }
-      })
-      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;
-  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;
+  .business-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    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;
 
-    .line {
-      width: 0.4rem;
-      height: 0.04rem;
+    .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;
+      }
     }
   }
-
-  .select {
-    color: #526aff;
-
-    .line {
-      background: #526aff;
-    }
-  }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
index 089ff5c7..401fb247 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@@ -90,6 +90,7 @@
 
 <script setup>
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { message } from 'ant-design-vue'
   import { pinyin } from 'pinyin-pro'
   import { ref, defineProps, watch } from 'vue'
   let dataFrom = ref({
@@ -213,12 +214,18 @@
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '技术文档'
     )[0]
-    console.log('dataFrom.value.link', obj.attrValue)
-    window.open(
-      window.SITE_CONFIG.previewUrl +
-        'hisense_office/onlinePreview?url=' +
-        btoa(encodeURI(obj.attrValue))
-    )
+    if (obj) {
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+          'hisense_office/onlinePreview?url=' +
+          btoa(encodeURI(obj.attrValue))
+      )
+    } else {
+      message.config({
+        top: '100px', // 距离顶部的位置
+      })
+      message.error('暂无上传技术文档')
+    }
   }
   function technicalNew() {
     // 拼接路径
@@ -231,12 +238,18 @@
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '使用手册'
     )[0]
-    console.log('dataFrom.value.link', obj.attrValue)
-    window.open(
-      window.SITE_CONFIG.previewUrl +
-        'hisense_office/onlinePreview?url=' +
-        btoa(encodeURI(obj.attrValue))
-    )
+    if (obj) {
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+          'hisense_office/onlinePreview?url=' +
+          btoa(encodeURI(obj.attrValue))
+      )
+    } else {
+      message.config({
+        top: '100px', // 距离顶部的位置
+      })
+      message.error('暂上传使用手册')
+    }
   }
 </script>