业务组件详情页-bug修改

front/public/static/config/footerData.js

@@ -6,43 +6,43 @@
  * @FilePath: \qiantai\front\public\static\config\footerData.js
  * @Description: 底部菜单数据配置配置
  */
-const footerDataList = {
+// const footerDataList = {
-  // 市局
+// 市局
-  // company: {
+// company: {
-  //   left: '青岛市大数据发展管理局建设',
+//   left: '青岛市大数据发展管理局建设',
-  //   right: '海信网络科技股份有限公司'
+//   right: '海信网络科技股份有限公司'
-  // },
+// },
-  // address: [
+// address: [
-  //   {
+//   {
-  //     name: '鲁IC备00000000号',
+//     name: '鲁IC备00000000号',
-  //     value: '政府标识码3702000106',
+//     value: '政府标识码3702000106',
-  //   },
+//   },
-  //   {
+//   {
-  //     name: '版权所有：青岛市大数据发展管理局',
+//     name: '版权所有：青岛市大数据发展管理局',
-  //     value: '地址：山东省青岛市香港中路17号市级机关办公楼',
+//     value: '地址：山东省青岛市香港中路17号市级机关办公楼',
-  //   },
+//   },
-  //   {
+//   {
-  //     name: '电话：0532-8561234',
+//     name: '电话：0532-8561234',
-  //     value: '传真：0532-2145122',
+//     value: '传真：0532-2145122',
-  //   },
+//   },
-  // ]
+// ]
-  // 西海岸
+// 西海岸
-  company: {
+//   company: {
-    left: '青岛西海岸新区大数据发展促进局建设',
+//     left: '青岛西海岸新区大数据发展促进局建设',
-    right: 'v0.81'
+//     right: 'v0.81'
-  },
+//   },
-  address: [
+//   address: [
-    {
+//     {
-      name: '鲁IC备00000000号',
+//       name: '鲁IC备00000000号',
-      value: '政府标识码3702000106',
+//       value: '政府标识码3702000106',
-    },
+//     },
-    {
+//     {
-      name: '版权所有：青岛西海岸新区大数据发展促进局',
+//       name: '版权所有：青岛西海岸新区大数据发展促进局',
-      value: '地址：青岛市西海岸新区长江中路369号',
+//       value: '地址：青岛市西海岸新区长江中路369号',
-    },
+//     },
-    {
+//     {
-      name: '电话：0532-86986596',
+//       name: '电话：0532-86986596',
-      value: '传真：0532-86986596',
+//       value: '传真：0532-86986596',
-    },
+//     },
-  ]
+//   ]
-}
+// }

front/public/static/config/location.js

@@ -3,7 +3,7 @@
  * @Date: 2020-07-07 16:03:23
  * @LastEditors: hisense.wuhongjian
  * @LastEditTime: 2022-04-01 10:51:45
- * @Description: 数据资源参数配置
+ * @Description: 三方参数配置
  */
 // const newLocation = 'qingdao'
 // const newLocation = 'baotou'
@@ -14,11 +14,11 @@ const whoShow = {}
 const launchedDataNumObject = {}
 // 导航数据
 const navListManagement = {}
+// 底部数据
+const footerDataList = {}
 // qingdao
 if (newLocation === 'qingdao') {
-  // 数据资源数据
   whoShow.itShowQingDao = true
-  // 导航数据
   navListManagement.navList = [
     { name: '共享门户', key: 'home' },
     { name: '能力集市', key: 'DetailsPageconetent' },
@@ -31,10 +31,29 @@ if (newLocation === 'qingdao') {
     // { name: '后台管理', key: 'houtaiguanli' },
     { name: '赋能案例', key: 'assignCase' },
   ]
+  footerDataList.footerList = {
+    company: {
+      left: '青岛市大数据发展管理局建设',
+      right: '海信网络科技股份有限公司',
+    },
+    address: [
+      {
+        name: '鲁IC备00000000号',
+        value: '政府标识码3702000106',
+      },
+      {
+        name: '版权所有：青岛市大数据发展管理局',
+        value: '地址：山东省青岛市香港中路17号市级机关办公楼',
+      },
+      {
+        name: '电话：0532-8561234',
+        value: '传真：0532-2145122',
+      },
+    ],
+  }
 }
 // baotou
 else if (newLocation === 'baotou') {
-  // 数据资源数据
   whoShow.itShowBaoTou = true
   launchedDataNumObject.launchedDataNum = [
     {
@@ -47,7 +66,6 @@ else if (newLocation === 'baotou') {
       num: 976,
     },
   ]
-  // 导航数据
   navListManagement.navList = [
     { name: '共享门户', key: 'home' },
     { name: '能力集市', key: 'DetailsPageconetent' },
@@ -60,12 +78,30 @@ else if (newLocation === 'baotou') {
     // { name: '后台管理', key: 'houtaiguanli' },
     { name: '赋能案例', key: 'assignCase' },
   ]
+  footerDataList.footerList = {
+    company: {
+      left: '青岛西海岸新区大数据发展促进局建设',
+      right: 'v0.81',
+    },
+    address: [
+      {
+        name: '鲁IC备00000000号',
+        value: '政府标识码3702000106',
+      },
+      {
+        name: '版权所有：青岛西海岸新区大数据发展促进局',
+        value: '地址：青岛市西海岸新区长江中路369号',
+      },
+      {
+        name: '电话：0532-86986596',
+        value: '传真：0532-86986596',
+      },
+    ],
+  }
 }
 // xihaian
 else if (newLocation === 'xihaian') {
-  // 数据资源数据
   whoShow.itShowXiHaiAn = true
-  // 导航数据
   navListManagement.navList = [
     { name: '共享门户', key: 'home' },
     { name: '能力集市', key: 'DetailsPageconetent' },
@@ -78,4 +114,24 @@ else if (newLocation === 'xihaian') {
     // { name: '后台管理', key: 'houtaiguanli' },
     { name: '赋能案例', key: 'assignCase' },
   ]
+  footerDataList.footerList = {
+    company: {
+      left: '青岛西海岸新区大数据发展促进局建设',
+      right: 'v0.81',
+    },
+    address: [
+      {
+        name: '鲁IC备00000000号',
+        value: '政府标识码3702000106',
+      },
+      {
+        name: '版权所有：青岛西海岸新区大数据发展促进局',
+        value: '地址：青岛市西海岸新区长江中路369号',
+      },
+      {
+        name: '电话：0532-86986596',
+        value: '传真：0532-86986596',
+      },
+    ],
+  }
 }

front/src/views/detailsAll/LayerService.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:32:22
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 18:59:01
+ * @Description: 图层服务详情页
+-->
+<template>
+  <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
+    <!-- 头部基本信息 -->
+    <layer-service-top-details
+      :dataList="dataList.data"
+    ></layer-service-top-details>
+    <!-- 导航 -->
+    <layer-service-navigation
+      :dataList="dataList.data"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></layer-service-navigation>
+    <!-- 图层展示  视频 -->
+    <layer-service-presentation
+      :dataList="dataList.data"
+      id="service-presentation"
+      class="scrollBox"
+    ></layer-service-presentation>
+    <!-- 图层信息-->
+    <layer-service-information
+      :dataList="dataList.data"
+      id="service-information"
+      class="scrollBox"
+    ></layer-service-information>
+    <!-- 应用场景 -->
+    <layer-service-application-scenarios
+      :dataList="dataList.data"
+      id="service-application-scenarios"
+      class="scrollBox"
+    ></layer-service-application-scenarios>
+    <!-- 应用案例 -->
+    <layer-service-application-case
+      :dataList="dataList.data"
+      id="service-application-case"
+      class="scrollBox"
+    ></layer-service-application-case>
+    <!-- 图层预览 -->
+    <layer-service-preview
+      :dataList="dataList.data"
+      id="service-preview"
+      class="scrollBox"
+    ></layer-service-preview>
+    <!-- 使用方式-->
+    <layer-service-usage-mode
+      :dataList="dataList.data"
+      id="service-usage-mode"
+      class="scrollBox"
+    ></layer-service-usage-mode>
+    <!-- 常见问题-->
+    <layer-service-common-problem
+      :dataList="dataList.data"
+      id="service-common-problem"
+      class="scrollBox"
+    ></layer-service-common-problem>
+  </div>
+</template>
+<script setup>
+  import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+  import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
+  import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
+  import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
+  import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
+  import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
+  import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
+  import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
+  import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { updateVisits, selectOne } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
+  })
+
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+      })
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
+  }
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
+</script>
+<style lang="less" scoped>
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
+</style>

front/src/views/detailsAll/components/Business/BusinessUsageMode.vue

@@ -120,11 +120,11 @@
         if (item.attrType === '组件地址') {
           dataFrom.value.content[0].linkValue = item.attrValue || '--'
         } else if (item.attrType === '服务商') {
-          dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
+          dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系人') {
-          dataFrom.value.content[0].people.value = item.attrValue || '--'
+          dataFrom.value.content[0].people2.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系电话') {
-          dataFrom.value.content[0].phone.value = item.attrValue || '--'
+          dataFrom.value.content[0].phone2.value = item.attrValue || '--'
         }
       })
     }
@@ -144,12 +144,12 @@
             if (item.attrType === '组件地址') {
               dataFrom.value.content[0].linkValue = item.attrValue || '--'
             } else if (item.attrType === '服务商') {
-              dataFrom.value.content[0].facilitator.value =
+              dataFrom.value.content[0].facilitator2.value =
                 item.attrValue || '--'
             } else if (item.attrType === '服务商联系人') {
-              dataFrom.value.content[0].people.value = item.attrValue || '--'
+              dataFrom.value.content[0].people2.value = item.attrValue || '--'
             } else if (item.attrType === '服务商联系电话') {
-              dataFrom.value.content[0].phone.value = item.attrValue || '--'
+              dataFrom.value.content[0].phone2.value = item.attrValue || '--'
             }
           })
         }

front/src/views/detailsAll/components/LayerService/LayerServiceApplicationCase.vue

@@ -0,0 +1,303 @@
+<!-- 应用案例 -->
+<template>
+  <div class="application-scenarios-and-case" v-if="flag">
+    <div
+      class="application-scenarios-and-case-son"
+      v-for="item in dataFrom"
+      :key="item.title"
+    >
+      <div class="title">
+        <DetalsTitle
+          :title="item.title"
+          :type="item.englishTitle"
+        ></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in item.content"
+          :key="itemSonTitle.title"
+          @click="tabSwitch(itemSonTitle.title, item.title)"
+          class="tab-son"
+          :class="tabIndexClass(indexSonTitle, item.title, item.content)"
+        >
+          <div
+            class="tab-top"
+            :class="
+              tabInitialize(item.title) == itemSonTitle.title
+                ? 'tab-top-down'
+                : ''
+            "
+          >
+            {{ itemSonTitle.title }}
+          </div>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize(item.title) == itemSonTitle.title"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in item.content" :key="itemSonTitle">
+        <div
+          class="content"
+          v-if="tabInitialize(item.title) == itemSonTitle.title"
+        >
+          <div :class="contentLocation(0, item.title)">
+            <div
+              :class="
+                item.title == '应用场景'
+                  ? 'content-left-scene'
+                  : 'content-left-case'
+              "
+            ></div>
+          </div>
+          <div :class="contentLocation(1, item.title)">
+            <div
+              :class="
+                item.title == '应用场景'
+                  ? 'content-right-scene'
+                  : 'content-right-case'
+              "
+            >
+              <div class="content-top">{{ itemSonTitle.title }}</div>
+              <div class="content-bottom">{{ itemSonTitle.content }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref([
+    {
+      title: '应用案例',
+      englishTitle: 'CASE',
+      content: [
+        {
+          title: '应用案例一',
+          content:
+            '应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例二',
+          content:
+            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例三',
+          content:
+            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例四',
+          content:
+            '应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例五',
+          content:
+            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例六',
+          content:
+            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+      ],
+    },
+  ])
+  const flag = ref(true)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用案例'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
+        if (!obj) {
+          flag.value = false
+        }
+      }
+    }
+  )
+  const { log } = console
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '应用场景' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
+  }
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  let tabindexCase = ref('应用案例一')
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize(title) {
+    if (title == '应用场景') {
+      return tabindex.value
+    } else {
+      return tabindexCase.value
+    }
+  }
+  //tab切换点击事件
+  function tabSwitch(name, title) {
+    if (title == '应用场景') {
+      tabindex.value = name
+      return tabindex.value
+    } else {
+      tabindexCase.value = name
+      return tabindexCase.value
+    }
+  }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .application-scenarios-and-case {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+          text-align: center;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+        }
+        .content-right {
+          position: absolute;
+          right: 0;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 5;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue

@@ -0,0 +1,254 @@
+<!-- 应用场景-->
+<template>
+  <div class="function-intorduction" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-left">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div class="content-right">
+            <div class="content-right-scene">
+              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用场景'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '应用场景' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+</script>
+
+<style lang="less" scoped>
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          margin-right: 1rem;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServiceCommonProblem.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- 常见问题 -->
+  <div class="cpmmon-problem" v-if="flag">
+    <div class="title">
+      <DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in dataFrom" :key="index" class="content-son">
+        <div class="content-top">
+          <div class="top-img"></div>
+          <div>{{ item.title }}</div>
+        </div>
+        <div class="content-bottom">
+          <div class="bottom-img"></div>
+          <div>{{ item.answer }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '常见问题'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      obj.attrValue.map((item) => {
+        let params = {
+          title: item.question,
+          answer: item.answer,
+        }
+        dataFrom.value.push(params)
+      })
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          obj.attrValue.map((item) => {
+            let params = {
+              title: item.question,
+              answer: item.answer,
+            }
+            dataFrom.value.push(params)
+          })
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .cpmmon-problem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 0.8rem;
+    background: #f7f8fa;
+    .content {
+      width: 13rem;
+      margin: 0.2rem 0rem;
+      background: #ffffff;
+      padding: 0.4rem;
+      .content-son {
+        font-size: 0.2rem;
+        margin-bottom: 0.6rem;
+        .content-top {
+          display: flex;
+          align-items: center;
+          margin-bottom: 0.2rem;
+          line-height: 0.2rem;
+        }
+        .content-bottom {
+          display: flex;
+          line-height: 0.34rem;
+          color: #666666;
+        }
+        .content-top,
+        .content-bottom {
+          div:last-child {
+            width: calc(100% - 0.54rem);
+          }
+        }
+        .top-img {
+          width: 0.34rem;
+          height: 0.3rem;
+          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
+          background-position: center;
+          background-size: cover;
+          margin-right: 0.2rem;
+        }
+        .bottom-img {
+          width: 0.34rem;
+          height: 0.3rem;
+          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
+          ackground-size: cover;
+          background-position: center;
+          margin-right: 0.2rem;
+        }
+      }
+      .content-son:last-child {
+        margin-bottom: 0rem;
+      }
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue

@@ -0,0 +1,206 @@
+<template>
+  <!-- 图层信息  -->
+  <div class="usage-mode" v-if="flag">
+    <div class="tltle">
+      <DetalsTitle title="图层信息" type="INFORMATION"></DetalsTitle>
+    </div>
+    <div class="content">
+      <div class="content-left">
+        <div class="content-left-content">
+          <ul>
+            <li v-for="(item, index) in dataFromLeft" :key="index">
+              <img :src="iconImg" />
+              <span>{{ item.type }}</span>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+          <ul>
+            <li v-for="(item, index) in dataFromCenter" :key="index">
+              <img :src="iconImg" />
+              <span>{{ item.type }}</span>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+          <ul>
+            <li v-for="(item, index) in dataFromRight" :key="index">
+              <img :src="iconImg" />
+              <span>{{ item.type }}</span>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png')
+  const dataFromLeft = ref([
+    {
+      type: '服务类型',
+      value: '服务类型名称',
+    },
+    {
+      type: '覆盖区域',
+      value: '覆盖区域名称',
+    },
+    {
+      type: '切片策略',
+      value: '名称',
+    },
+  ])
+  const dataFromCenter = ref([
+    {
+      type: '坐标系',
+      value: '名称',
+    },
+    {
+      type: '切片尺寸详情',
+      value: '名称',
+    },
+    {
+      type: '最小级别名称',
+      value: '名称',
+    },
+  ])
+  const dataFromRight = ref([
+    {
+      type: '数据范围',
+      value: '名称',
+    },
+    {
+      type: '图层名称',
+      value: '名称',
+    },
+    {
+      type: '最大级别',
+      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 === '图层信息'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      // dataFrom.value.content[0].link.value = props.dataList.apiUrl
+      // dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
+      // 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 === '技术文档')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          // dataFrom.value.content[0].link.value = val.apiUrl
+          // dataFrom.value.content[0].facilitator.value = val.deptContacts
+          // 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 || '--'
+          //   }
+          // })
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .usage-mode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
+    .content {
+      margin-top: 0.3rem;
+      display: flex;
+      .content-left {
+        height: 2.8rem;
+        width: 13rem;
+        background: url('~@/assets/detailsAll/layer-service/layer-bg.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 0.35rem;
+
+        .content-left-content {
+          width: 100%;
+          font-size: 0.2rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          ul {
+            padding: 0;
+            margin: 0;
+          }
+          ul li {
+            list-style: none;
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.3rem;
+            line-height: 0.25rem;
+          }
+          img {
+            margin: 0 0.2rem 0 0;
+            width: 0.15rem;
+            height: 0.15rem;
+          }
+          span {
+            font-size: 0.2rem;
+            color: #666666;
+            display: block;
+            margin-right: 0.8rem;
+            width: 120px;
+          }
+          p {
+            width: 2rem;
+            margin-bottom: 0;
+            font-size: 0.2rem;
+            color: #333333;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+        }
+      }
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue

@@ -0,0 +1,195 @@
+<!--
+ * @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: '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('algorithm-display')
+  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 === '图层预览' ||
+        item.attrType === '应用场景' ||
+        item.attrType === '应用案例'
+      ) {
+        list.value.push(item.attrType)
+      } else if (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 === 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 === '图层预览' ||
+            item.attrType === '应用场景' ||
+            item.attrType === '应用案例'
+          ) {
+            list.value.push(item.attrType)
+          } else if (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 === 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;
+      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>

front/src/views/detailsAll/components/LayerService/LayerServicePresentation.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 15:25:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:30:52
+ * @Description: 图层展示  视频播放
+-->
+<template>
+  <div class="application-presentation" v-if="flag">
+    <detals-title title="图层展示" type="IMAGE"></detals-title>
+    <div class="main">
+      <img :src="img" />
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const img = ref()
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    let imgindex = props.dataList.infoList.filter(
+      (item) => item.attrType === '组件图片'
+    )[0]
+    if (!imgindex) {
+      flag.value = false
+    } else {
+      img.value = imgindex.attrValue
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let imgindex = props.dataList.infoList.filter(
+          (item) => item.attrType === '组件图片'
+        )[0]
+        if (!imgindex) {
+          flag.value = false
+        } else {
+          img.value = imgindex.attrValue
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-presentation {
+    padding: 0.8rem 3rem 0.8rem;
+    background: url('~@/assets/detailsAll/layer-service/layer-bgShow.png')
+      no-repeat;
+    background-position: center -66px;
+    background-size: 50%;
+
+    .main {
+      height: 3.8rem;
+      border-radius: 0.1rem;
+
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .play {
+        width: 0.96rem;
+        height: 0.96rem;
+        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+        background-size: 100%;
+        cursor: pointer;
+      }
+      img {
+        width: 50%;
+        height: 100%;
+        border-radius: 0.1rem;
+      }
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 15:25:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:30:52
+ * @Description: 图层预览  视频播放
+-->
+<template>
+  <div class="application-presentation" v-if="flag">
+    <detals-title title="图层预览" type="PREVIEW"></detals-title>
+    <div class="main" :style="`${img}background-position:center;`"></div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const img = ref({})
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    let imgindex = props.dataList.infoList.filter(
+      (item) => item.attrType === '图层预览'
+    )[0]
+    if (!imgindex) {
+      flag.value = false
+    } else {
+      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let imgindex = props.dataList.infoList.filter(
+          (item) => item.attrType === '图层预览'
+        )[0]
+        if (!imgindex) {
+          flag.value = false
+        } else {
+          img.value =
+            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-presentation {
+    padding: 0.8rem 3rem 0;
+    .main {
+      height: 5rem;
+      border-radius: 0.1rem;
+      // background-image: url('~@/assets/detailsAll/sf_video_bg.png');
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue

@@ -0,0 +1,233 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:56:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:31:12
+ * @Description: 算法详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <span class="name">{{ props.dataList.name }}</span>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
+            <span class="label">{{ props.dataList.shareType }}</span>
+            <span class="label">{{ props.dataList.shareCondition }}</span>
+          </p>
+        </div>
+        <!-- <span class="label">免费</span> -->
+      </div>
+      <div class="main">
+        <div>应用领域：{{ businessArea }}</div>
+        <!-- 应用描述 -->
+        <div>
+          {{ props.dataList.description }}
+        </div>
+      </div>
+      <div class="bottom" v-if="props.dataList.id">
+        <a-button type="primary" @click="toView()">
+          <!--<template #icon><form-outlined /></template>-->
+          申请使用
+        </a-button>
+        <a-button type="primary" @click="addShoppingCart()">
+          <!--<template #icon><shopping-cart-outlined /></template>-->
+          加入购物车
+        </a-button>
+        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert } from '@/api/personalCenter'
+  import { sgcInsert } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const router = useRouter()
+  const businessArea = ref('')
+  // 加入申购车
+  const addShoppingCart = () => {
+    console.log('加入申购车==================>', props.dataList)
+    sgcInsert({
+      delFlag: '0',
+      resourceId: props.dataList.id,
+      // userId: userId.value,
+    }).then((res) => {
+      console.log(res)
+      message.success('添加申购车成功！')
+      mybus.emit('getSgcNum')
+    })
+  }
+  // 立即申请
+  function toView() {
+    // window.open(newpage.href, '_blank')
+    router.push({
+      path: '/apply',
+      query: {
+        name: props.dataList.name,
+        resourceId: [props.dataList.id],
+      },
+    })
+  }
+  // 收藏
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+      console.log(res)
+      message.success('收藏成功')
+    })
+  }
+  const componentType = ref('')
+  if (props.dataList.infoList) {
+    businessArea.value = props.dataList.infoList.filter(
+      (val) => val.attrType === '应用领域'
+    )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        businessArea.value = props.dataList.infoList.filter(
+          (val) => val.attrType === '应用领域'
+        )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-top-details {
+    height: 6rem;
+    padding: 1.8rem 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    .left {
+      max-width: 7.2rem;
+      color: #fff;
+      margin-right: 0.8rem;
+
+      .top {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 0.14rem;
+        }
+        .name {
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+        }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 2.5rem;
+          right: -2.5rem;
+          top: 0;
+        }
+        .label {
+          padding: 0.01rem 0.1rem;
+          margin-right: 0.1rem;
+          border-radius: 0.13rem;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+      .main {
+        margin-top: 0.4rem;
+        font-size: 0.18rem;
+        line-height: 0.34rem;
+        & > div:nth-of-type(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > div:nth-of-type(2) {
+          margin-top: 0.2rem;
+          max-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ffffff;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .ant-btn-primary {
+          color: #1890ff;
+        }
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+          background-image: url('~@/assets/detailsAll/layer-service/layer-apply-using.png');
+          background-repeat: no-repeat;
+          background-position: 24px center;
+          background-color: #ff8b55;
+          color: #fff;
+          padding-left: 26px;
+        }
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+          background-image: url('~@/assets/detailsAll/layer-service/layer-shopping-car.png');
+          background-repeat: no-repeat;
+          background-position: 24px center;
+          background-color: #ff8b55;
+          color: #fff;
+          padding-left: 26px;
+        }
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+          background: #fff;
+          color: #526aff;
+        }
+      }
+    }
+    .right {
+      width: 5.8rem;
+      height: 4rem;
+      background: url('~@/assets/detailsAll/layer-service/layer-top-bg.png')
+        no-repeat;
+      background-size: 100%;
+      margin-top: -0.4rem;
+    }
+  }
+</style>

front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue

@@ -0,0 +1,288 @@
+<template>
+  <!-- 使用方式 -->
+  <div class="usage-mode" v-if="flag">
+    <div class="tltle">
+      <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">
+        <div class="left">
+          <div class="content-left-content">
+            <p>
+              <span>服务地址：</span>
+              <span>{{ item.linkValue }}</span>
+            </p>
+            <p>
+              <span>样式服务地址：</span>
+              <span>{{ item.linkValue }}</span>
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div @click="technical()">接口文档</div>
+          <div @click="technicalNew()">使用手册</div>
+        </div>
+      </div>
+      <div class="content-right">
+        <div class="content-right-title">{{ item.contact }}</div>
+        <div class="content-right-content">
+          <p>
+            <span>{{ item.people.name }}</span>
+            <a-tooltip>
+              <template #title>{{ item.people.value }}</template>
+              <span>{{ item.people.value }}</span>
+            </a-tooltip>
+          </p>
+          <p>
+            <span>{{ item.phone.name }}</span>
+            <a-tooltip>
+              <template #title>{{ item.phone.value }}</template>
+              <span>{{ item.phone.value }}</span>
+            </a-tooltip>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</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: '接口地址：',
+        },
+        linkValue: '',
+        contact: '归属部门',
+        facilitator: { name: '归属部门：', value: '讯飞科大' },
+        people: { name: '部门联系人：', value: '李四' },
+        phone: {
+          name: '联系人电话：',
+          value: '12345678901',
+        },
+      },
+    ],
+  })
+  //数据初始化
+  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 === '技术文档'
+    )[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.deptContacts
+      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 === '技术文档')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          dataFrom.value.content[0].link.value = val.apiUrl
+          dataFrom.value.content[0].facilitator.value = val.deptContacts
+          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 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)
+    // window.open(
+    //   window.SITE_CONFIG.previewUrl +
+    //     'hisense_office/onlinePreview?url=' +
+    //     btoa(encodeURI(dataFrom.value.link))
+    // )
+  }
+  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')
+    console.log('dataFrom.value.link', dataFrom.value.link)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(dataFrom.value.link))
+    )
+  }
+</script>
+
+<style lang="less" scoped>
+  .usage-mode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
+    .content {
+      margin-top: 0.3rem;
+      display: flex;
+      .content-left {
+        height: 1.8rem;
+        width: 6.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        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;
+        .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;
+              overflow: hidden;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              // margin-bottom: 0.1rem;
+              font-size: 20px;
+              color: #212956;
+              line-height: 26px;
+            }
+            p:last-of-type {
+              margin-top: 20px;
+            }
+          }
+        }
+        .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.8rem;
+        width: 6.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        justify-content: space-around;
+
+        padding: 0 0.3rem;
+        flex-direction: column;
+        justify-content: center;
+        .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.18rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          flex-direction: row;
+          margin-top: 0.2rem;
+          justify-content: space-between;
+          p {
+            // width: 1.60rem;
+            height: 0.2rem;
+            display: -webkit-box;
+            // overflow: hidden;
+            white-space: nowrap;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            margin-right: 0.15rem;
+            span {
+              cursor: pointer;
+              font-size: 20px;
+              color: #212956;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

front/src/views/home/DetailsPageconetent.vue

@@ -1053,12 +1053,12 @@
         :resourceTotal="resourceTotal"
       ></KnowledgeBase>
     </div>
-    <div class="talk-monitor" @click="openMonitor">
+    <!--<div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
         <template #title>问答机器人</template>
         <i></i>
       </a-tooltip>
-    </div>
+    </div>-->
   </div>
   <home-footer></home-footer>
 </template>

front/src/views/home/details.vue

@@ -22,6 +22,7 @@
       <business-details
         v-else-if="showView === 'business-details'"
       ></business-details>
+      <layer-service v-else-if="showView === 'layer-service'"></layer-service>
       <home-footer></home-footer>
     </div>
   </div>
@@ -36,6 +37,7 @@
   import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
   import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
   import BusinessDetails from '@/views/detailsAll/BusinessDetails'
+  import LayerService from '@/views/detailsAll/LayerService'
   import { selectOne } from '@/api/home'
   import { useRouter } from 'vue-router'
   export default defineComponent({
@@ -49,6 +51,7 @@
       ApplicationDetails,
       DeveloperComponents,
       BusinessDetails,
+      LayerService,
     },
     setup() {
       const formState = reactive({
@@ -88,7 +91,7 @@
       const router = useRouter()
       const id = router.currentRoute.value.query.id
       const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-      let showView = ref('developer-components')
+      let showView = ref('details-view')
       const init = () => {
         if (id) {
           selectOne(id).then((res) => {
@@ -109,6 +112,9 @@
                       case '业务组件':
                         showView.value = 'business-details'
                         break
+                      case 'GIS图层':
+                        showView.value = 'layer-service'
+                        break
                       default:
                         break
                     }
@@ -140,6 +146,9 @@
                     case '业务组件':
                       showView.value = 'business-details'
                       break
+                    case 'GIS图层':
+                      showView.value = 'layer-service'
+                      break
                     default:
                       break
                   }

front/src/views/newHome/components/Footer.vue

@@ -26,10 +26,10 @@
 <script setup>
   import { ref } from 'vue'
   // eslint-disable-next-line no-undef
-  console.log('footerDataList', footerDataList)
+  console.log('footerDataList', footerDataList.footerList)
   let dataList = ref({})
   // eslint-disable-next-line no-undef
-  dataList.value = footerDataList
+  dataList.value = footerDataList.footerList
 </script>
 <style lang="less" scoped>
   .footer {