From 3bc9f349215c92b26ddb607289586e58ea53e878 Mon Sep 17 00:00:00 2001
From: hucongqian <hucongqian1990@163.com>
Date: Fri, 2 Dec 2022 09:45:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E9=9B=86=E5=B8=82-=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/detailsAll/GovernanceModel.vue  | 135 ++++++++++++
 front/src/views/detailsAll/StandardDoc.vue    | 138 ++++++++++++
 .../GovernanceModelInformation.vue            | 178 +++++++++++++++
 .../GovernanceModelTopDetails.vue             | 189 ++++++++++++++++
 .../StandardDoc/StandardDocInformation.vue    | 203 ++++++++++++++++++
 .../StandardDoc/StandardDocTopDetails.vue     | 169 +++++++++++++++
 front/src/views/home/DetailsPageconetent.vue  |  12 +-
 .../home/components/DetailsPageResource.vue   |   2 +-
 .../home/components/searchResultList.vue      |  27 ++-
 front/src/views/home/details.vue              |  65 +++++-
 10 files changed, 1099 insertions(+), 19 deletions(-)
 create mode 100644 front/src/views/detailsAll/GovernanceModel.vue
 create mode 100644 front/src/views/detailsAll/StandardDoc.vue
 create mode 100644 front/src/views/detailsAll/components/GovernanceModel/GovernanceModelInformation.vue
 create mode 100644 front/src/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue
 create mode 100644 front/src/views/detailsAll/components/StandardDoc/StandardDocInformation.vue
 create mode 100644 front/src/views/detailsAll/components/StandardDoc/StandardDocTopDetails.vue

diff --git a/front/src/views/detailsAll/GovernanceModel.vue b/front/src/views/detailsAll/GovernanceModel.vue
new file mode 100644
index 00000000..0b501ca9
--- /dev/null
+++ b/front/src/views/detailsAll/GovernanceModel.vue
@@ -0,0 +1,135 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:32:22
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-18 18:48:32
+ * @Description: 模型详情页
+-->
+<template>
+  <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
+    <!-- 头部基本信息 -->
+    <layer-service-top-details
+      :dataList="dataList.data"
+    ></layer-service-top-details>
+    <!-- 模型信息-->
+    <layer-service-information
+      :dataList="dataList.data"
+      id="service-information"
+      class="scrollBox"
+    ></layer-service-information>
+  </div>
+</template>
+<script setup>
+  import LayerServiceInformation from '@/views/detailsAll/components/GovernanceModel/GovernanceModelInformation.vue' //模型信息
+  import LayerServiceTopDetails from '@/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue' //头部基本信息
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } 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'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  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
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    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) => {
+        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)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
+        }).then(() => {
+          console.log('浏览记录+1')
+        })
+      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
+      })
+    } 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: 50%;
+    margin-left: -9.56rem;
+  }
+
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
+</style>
diff --git a/front/src/views/detailsAll/StandardDoc.vue b/front/src/views/detailsAll/StandardDoc.vue
new file mode 100644
index 00000000..c351ff2f
--- /dev/null
+++ b/front/src/views/detailsAll/StandardDoc.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:32:22
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-18 18:48:32
+ * @Description: 数据标准详情页
+-->
+<template>
+  <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
+    <!-- 头部基本信息 -->
+    <layer-service-top-details
+      :dataList="dataList.data"
+    ></layer-service-top-details>
+    <!-- 数据标准信息-->
+    <layer-service-information
+      :dataList="dataList.data"
+      id="service-information"
+      class="scrollBox"
+    ></layer-service-information>
+  </div>
+</template>
+<script setup>
+  import LayerServiceInformation from '@/views/detailsAll/components/StandardDoc/StandardDocInformation.vue' //数据标准信息
+  import LayerServiceTopDetails from '@/views/detailsAll/components/StandardDoc/StandardDocTopDetails.vue' //头部基本信息
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } 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'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  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)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
+        }).then(() => {
+          console.log('浏览记录+1')
+        })
+      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
+      })
+    } 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: 50%;
+    margin-left: -9.56rem;
+  }
+
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelInformation.vue b/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelInformation.vue
new file mode 100644
index 00000000..64090a6c
--- /dev/null
+++ b/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelInformation.vue
@@ -0,0 +1,178 @@
+<!--
+ * @Author: hisense.hucongqian
+ * @Date: 2022-12-01 08:56:28
+ * @LastEditors: hisense.hucongqian
+ * @LastEditTime: 2022-12-01 11:54:40
+ * @Description: 模型规则
+-->
+<template>
+  <!-- 图层信息  -->
+  <div class="usage-mode" >
+    <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.content" :key="index">
+              <img :src="iconImg" />
+              <span>{{ item.type }}</span>
+              <a-tooltip>
+                <template #title>{{ item.values }}</template>
+                <p>{{ item.values }}</p>
+              </a-tooltip>
+            </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({
+  content: [
+    {
+      type: '服务类型',
+      values: '',
+    },
+    {
+      type: '输入数据',
+      values: '',
+    },
+    {
+      type: '详细规则',
+      values: '',
+    },
+  ],
+})
+//数据初始化
+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 === '详细规则' 
+  )[0]
+  if (!obj) {
+    flag.value = false
+  } else {
+    console.log('dataList', props.dataList)
+    props.dataList.infoList.map((item) => {
+      handleInfoList(item)
+    })
+  }
+}
+const handleInfoList = (item) => {
+  if (item.attrType === '输入数据') {
+    dataFromLeft.value.content[0].values = item.attrValue || '123'
+  } else if (item.attrType === '输出数据') {
+    dataFromLeft.value.content[1].values = item.attrValue || '--'
+  } else if (item.attrType === '详细规则') {
+    dataFromLeft.value.content[2].values = item.attrValue || '--'
+  } 
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      let obj = val.infoList.filter(
+        (item) =>
+          item.attrType === '服务类型' ||
+          item.attrType === '输入数据' ||
+          item.attrType === '详细规则' 
+      )[0]
+      if (!obj) {
+        flag.value = false
+      } else {
+        console.log('dataList', val)
+        val.infoList.map((item) => {
+          handleInfoList(item)
+        })
+      }
+    }
+  }
+)
+</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;
+      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.5rem;
+          width: 120px;
+        }
+
+        p {
+          margin-bottom: 0;
+          font-size: 0.2rem;
+          color: #333333;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue b/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue
new file mode 100644
index 00000000..e2f7bdab
--- /dev/null
+++ b/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Author: hisense.hucongqian
+ * @Date: 2022-12-01 08:56:28
+ * @LastEditors: hisense.hucongqian
+ * @LastEditTime: 2022-12-01 11:54:40
+ * @Description: 模型详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="componentType">
+              {{ componentType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
+            </span>
+          </p>
+        </div>
+      </div>
+      <div class="main">
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ businessArea }}</template>
+          <div>应用领域：{{ businessArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  import { defineProps, ref, watch } from 'vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const businessArea = ref('')
+  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
+    }
+  }
+  console.log('val==========>', props.dataList.infoList)
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        console.log('val==========>', val)
+        debugger
+        businessArea.value = props.dataList.infoList.filter(
+          (item) => item.attrType === '应用场景'
+        )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (item) => item.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 {
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          max-width: 6rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 5.5rem;
+          right: -5.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;
+          word-break: break-all;
+        }
+      }
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ff8b55;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+        }
+      }
+    }
+    .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>
diff --git a/front/src/views/detailsAll/components/StandardDoc/StandardDocInformation.vue b/front/src/views/detailsAll/components/StandardDoc/StandardDocInformation.vue
new file mode 100644
index 00000000..e56cf76c
--- /dev/null
+++ b/front/src/views/detailsAll/components/StandardDoc/StandardDocInformation.vue
@@ -0,0 +1,203 @@
+<!--
+ * @Author: hisense.hucongqian
+ * @Date: 2022-12-01 08:56:28
+ * @LastEditors: hisense.hucongqian
+ * @LastEditTime: 2022-12-01 11:54:40
+ * @Description:数据标准规则
+-->
+<template>
+  <!-- 图层信息  -->
+  <div class="usage-mode" >
+    <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.content" :key="index">
+              <img :src="iconImg" />
+              <span>{{ item.type }}</span>
+              <a-tooltip>
+                <template #title>{{ item.values }}</template>
+                <p>{{ item.values }}</p>
+              </a-tooltip>
+            </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({
+  content: [
+    {
+      type: '标准简介',
+      values: '',
+    },
+    {
+      type: '发布日期',
+      values: '',
+    },
+    {
+      type: '归属单位',
+      values: '',
+    },
+    {
+      type: '实际应用系统',
+      values: '',
+    },
+    {
+      type: '责任人',
+      values: '',
+    },
+    {
+      type: '联系方式',
+      values: '',
+    },
+  ],
+})
+//数据初始化
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+const flag = ref(true)
+if (props.dataList.infoList) {
+  debugger
+  let obj = props.dataList.infoList.filter(
+    (item) =>
+      item.attrType === '标准简介' ||
+      item.attrType === '发布日期' ||
+      item.attrType === '归属单位' ||
+      item.attrType === '实际应用系统'||
+      item.attrType === '责任人'||
+      item.attrType === '联系方式'
+  )[0]
+  if (!obj) {
+    flag.value = false
+  } else {
+    console.log('dataList', props.dataList)
+    props.dataList.infoList.map((item) => {
+      handleInfoList(item)
+    })
+  }
+}
+const handleInfoList = (item) => {
+  if (item.attrType === '标准简介') {
+    dataFromLeft.value.content[0].values = item.attrValue || '--'
+  } else if (item.attrType === '发布日期') {
+    dataFromLeft.value.content[1].values = item.attrValue || '--'
+  } else if (item.attrType === '归属单位') {
+    dataFromLeft.value.content[2].values = item.attrValue || '--'
+  } else if (item.attrType === '实际应用系统') {
+    dataFromLeft.value.content[3].values = item.attrValue || '--'
+  } else if (item.attrType === '责任人') {
+    dataFromLeft.value.content[4].values = item.attrValue || '--'
+  } else if (item.attrType === '联系方式') {
+    dataFromLeft.value.content[5].values = 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 === '联系方式'
+        )[0]
+      if (!obj) {
+        flag.value = false
+      } else {
+        console.log('dataList', val)
+        val.infoList.map((item) => {
+          handleInfoList(item)
+        })
+      }
+    }
+  }
+)
+</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: 3.5rem;
+      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.5rem;
+          width: 120px;
+        }
+
+        p {
+          margin-bottom: 0;
+          font-size: 0.2rem;
+          color: #333333;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/front/src/views/detailsAll/components/StandardDoc/StandardDocTopDetails.vue b/front/src/views/detailsAll/components/StandardDoc/StandardDocTopDetails.vue
new file mode 100644
index 00000000..319755d1
--- /dev/null
+++ b/front/src/views/detailsAll/components/StandardDoc/StandardDocTopDetails.vue
@@ -0,0 +1,169 @@
+<!--
+ * @Author: hisense.hucongqian
+ * @Date: 2022-12-01 11:56:28
+ * @LastEditors: hisense.hucongqian
+ * @LastEditTime: 2022-12-01 11:54:40
+ * @Description:数据标准详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="componentType">
+              {{ componentType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
+            </span>
+          </p>
+        </div>
+      </div>
+      <div class="main">
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ businessArea }}</template>
+          <div>应用领域：{{ businessArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  import { defineProps, ref, watch } from 'vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const businessArea = ref('')
+  const componentType = ref('')
+  if (props.dataList.infoList) {
+  }
+  console.log('val==========>', props.dataList.infoList)
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+      }
+    }
+  )
+</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 {
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          max-width: 6rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 5.5rem;
+          right: -5.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;
+          word-break: break-all;
+        }
+      }
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ff8b55;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+        }
+      }
+    }
+    .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>
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index 341ba4ad..18c0def3 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -8,7 +8,7 @@
     <div class="details-pageconetent-left" v-else>
       <detailsPageInfrastructureTree v-show="flag != '6'" />
     </div>
-    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
+    <div class="top" v-if="Cardsname != '基础设施'">
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
@@ -72,7 +72,7 @@
       <div class="top-content-father" :key="listKey">
         <template
           v-if="
-            Cardsname == '组件服务' ||
+            Cardsname == '组件服务' ||Cardsname == '知识库' ||
             Cardsname == '应用资源' ||
             Cardsname == ''
           "
@@ -271,10 +271,6 @@
           </span>
         </div>
       </div>
-      <KnowledgeBase
-        :resourceList="resourceList"
-        :resourceTotal="resourceTotal"
-      ></KnowledgeBase>
     </div>
     <div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -308,7 +304,7 @@
     <div class="details-pageconetent-left" style="left: 0.16rem" v-else>
       <detailsPageInfrastructureTreeXha v-show="showFlag" />
     </div>
-    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
+    <div class="top" v-if="Cardsname != '基础设施'">
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -2554,7 +2550,7 @@
       span:nth-child(1) {
         display: inline-block;
         position: relative;
-        width: 0.68rem;
+        width: 0.9rem;
         font-weight: 600;
         white-space: normal;
         text-align: center;
diff --git a/front/src/views/home/components/DetailsPageResource.vue b/front/src/views/home/components/DetailsPageResource.vue
index 157a3605..9dd2be1d 100644
--- a/front/src/views/home/components/DetailsPageResource.vue
+++ b/front/src/views/home/components/DetailsPageResource.vue
@@ -62,7 +62,7 @@
   // }
   .pageResource {
     position: absolute;
-    top: 0.68rem;
+    top: 1.2rem;
     left: -5.37rem;
     width: 176%;
     height: 90.5%;
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 9c1d4ea9..6cc2b1b0 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -13,7 +13,7 @@
         <IntegrationServiceOrder
           ref="integrationServiceOrderDom"
           v-if="
-            selectCardsname === '融合服务' || selectCardsname === '赋能场景'
+            selectCardsname === '融合服务' || selectCardsname === '赋能场景' && selectCardsname !== '知识库'
           "
         ></IntegrationServiceOrder>
         <ul v-else>
@@ -291,12 +291,12 @@
           <div class="dec">
             <div
               v-if="
-                item.infoList.filter((val) => val.attrType == '组件类型')[0]
+                item.infoList.filter((val) => val.attrType == '组件类型'||val.attrType == '知识库类型')[0]
               "
             >
               <span>
                 {{
-                  item.infoList.filter((val) => val.attrType == '组件类型')[0]
+                  item.infoList.filter((val) => val.attrType == '组件类型'||val.attrType == '知识库类型')[0]
                     .attrValue
                 }}
               </span>
@@ -321,9 +321,9 @@
               {{ item.description || '--' }}
             </a-tooltip>
           </div>
-          <div class="btn">
+          <div class="btn" >
             <div class="bottom" v-if="selectCardsname !== '基础设施'">
-              <div>
+              <div v-if = 'selectCardsname !=="知识库"'>
                 <!-- <div
                   v-if="
                     selectCardsname !== '数据资源' &&
@@ -381,7 +381,7 @@
                   ></span>
                 </template>
               </div>
-              <div class="sc">
+              <div class="sc" v-if='selectCardsname !=="知识库"'>
                 <span
                   class="sc-down"
                   v-if="item.isCollect == 'false'"
@@ -412,6 +412,13 @@
               >
                 查看详情
               </a-button>
+              <a-button
+                type="primary"
+                @click.stop="downLoad(item)"
+                v-if="whoShow1.itShowQingDao&&selectCardsname =='知识库'"
+              >
+                下载
+              </a-button>
               <a-button
                 style="margin-left: 10px"
                 v-show="
@@ -724,6 +731,13 @@
           }
         }
       }
+      // 下载
+      const downLoad = (item) => {
+        const a = document.createElement('a')
+        a.href =  item.infoList.filter(val =>val.attrType === '标准文件')[0].attrValue
+        // a.download = item.infoList.filter(val =>val.attrType === '标准文件')[0].attrValue
+        a.click()    
+      }
 
       /**更换查询条件
        * val: 排序字段值
@@ -902,6 +916,7 @@
         imgSrcTcfw,
         imgSrcKfzj,
         imgSrcYwzj,
+        downLoad
       }
     },
     beforeUnmount() {
diff --git a/front/src/views/home/details.vue b/front/src/views/home/details.vue
index fd09da6c..29f7ca71 100644
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@@ -25,8 +25,11 @@
         v-else-if="showView === 'business-details'"
       ></business-details>
       <layer-service v-else-if="showView === 'layer-service'"></layer-service>
+      <governance-model v-else-if="showView === 'governance-model'"></governance-model>
+      <standard-doc v-else-if="showView === 'standard-doc'"></standard-doc>
       </div>
       <home-footer></home-footer>
+     
     </div>
   </div>
 </template>
@@ -36,11 +39,14 @@
   import { defineComponent, reactive, ref } from 'vue'
   import DetailsView from './components/DetailsView.vue'
   import HomeFooter from '@/views/newHome/components/Footer'
+  // import Standard from "@/views/detailsAll/StandardDoc "
   import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
   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 GovernanceModel from '@/views/detailsAll/GovernanceModel'
+  import StandardDoc from '@/views/detailsAll/StandardDoc'
   import detailBack from '@/views/home/detailBack.vue'
   import { selectOne } from '@/api/home'
   import { useRouter } from 'vue-router'
@@ -56,7 +62,10 @@
       DeveloperComponents,
       BusinessDetails,
       LayerService,
-      detailBack
+      detailBack,
+      StandardDoc,
+      GovernanceModel,
+      
     },
     setup() {
       const formState = reactive({
@@ -99,9 +108,11 @@
       let showView = ref('')
       const targetFlag= ref(true)
       const init = () => {
+        debugger
         if (id) {
           selectOne(id).then((res) => {
             if (res.data.data.type == '组件服务') {
+             
               let detection = res.data.data.infoList.filter(
                 (item) => item.attrType === '组件类型'
               )[0]
@@ -129,8 +140,32 @@
               } else {
                 showView.value = 'algorithm-details'
               }
-            } else {
-              showView.value = 'application-details'
+            } else if (res.data.data.type == '知识库') {
+             
+             let detection = res.data.data.infoList.filter(
+               (item) => item.attrType === '知识库类型'
+             )[0]
+             if (detection) {
+               res.data.data.infoList.map((item) => {
+                 if (item.attrType == '知识库类型') {
+                   switch (item.attrValue) {
+                    case '数据标准':
+                       showView.value = 'standard-doc'
+                       break
+                     case '治理模型':
+                       showView.value = 'governance-model'
+                       break
+                     default:
+                      showView.value = 'standard-doc'
+                       break
+                   }
+                 }
+               })
+             } else {
+               showView.value = 'standard-doc'
+             }
+           } else {
+              showView.value = 'standard-doc'
             }
           })
         } else if (obj) {
@@ -163,8 +198,30 @@
             } else {
               showView.value = 'algorithm-details'
             }
+          }else  if (obj.type == '知识库') {
+            let detection = obj.infoList.filter(
+              (item) => item.attrType === '知识库类型'
+            )[0]
+            if (detection) {
+              obj.infoList.map((item) => {
+                if (item.attrType == '知识库类型') {
+                  switch (item.attrValue) {
+                     case '数据标准':
+                       showView.value = 'standard-doc'
+                       break
+                     case '治理模型':
+                       showView.value = 'governance-model'
+                       break
+                     default:
+                       break
+                   }
+                  }
+              })
+            } else {
+              showView.value = 'standard-doc'
+            }
           } else {
-            showView.value = 'application-details'
+            showView.value = 'standard-doc'
           }
         }
       }