知识库--模型规则详情

2022-12-02 17:29:20 +08:00 · 2022-12-02 17:29:20 +08:00 · b6e56cc0ea
parent 8b0e6b2519
commit b6e56cc0ea
4 changed files with 498 additions and 311 deletions
--- a/front/src/views/detailsAll/GovernanceModel.vue
+++ b/front/src/views/detailsAll/GovernanceModel.vue
@ -8,29 +8,35 @@
 <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>
+    <layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
+    <!-- tab导航 -->
+    <GovernanceModelNavigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
+    </GovernanceModelNavigation>
+    <!-- 输入数据 -->
+    <GovernanceModelInputData :dataList="dataList.data" id="governance-model-input-data" class="scrollBox" title="输入数据">
+    </GovernanceModelInputData>
+    <!-- 输出数据 -->
+    <GovernanceModelInputData :dataList="dataList.data" id="governance-model-output-data" class="scrollBox"
+      title="输出数据">
+    </GovernanceModelInputData>
+    <!-- 模型规则 -->
+    <GovernanceModelInputData :dataList="dataList.data" id="governance-model-rule" class="scrollBox" title="模型规则">
+    </GovernanceModelInputData>
  </div>
 </template>
 <script setup>
-  import LayerServiceInformation from '@/views/detailsAll/components/GovernanceModel/GovernanceModelInformation.vue' //模型信息
+import GovernanceModelNavigation from '@/views/detailsAll/components/GovernanceModel/GovernanceModelNavigation.vue' // Tab信息
 import LayerServiceTopDetails from '@/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue' // 头部基本信息
+import GovernanceModelInputData from '@/views/detailsAll/components/GovernanceModel/GovernanceModelInputData.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'
+} from '@/api/home';
+import mybus from '@/myplugins/mybus';
+
 const router = useRouter()
 const scrollTop = ref(0)
 const domArr = ref([])
@ -38,17 +44,18 @@
 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')
@ -101,15 +108,6 @@
        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)
--- a/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelInputData.vue
+++ b/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelInputData.vue
@ -0,0 +1,108 @@
+<!--
+ * @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="title" type="INFORMATION"></DetalsTitle>
+    </div>
+    <div class="content">
+      <div class="content-left">
+        {{ title }}
+      </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 props = defineProps({
+  dataList: { type: Object, default: null },
+  title: { type: String, default: '' },
+})
+
+</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>
--- a/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelNavigation.vue
+++ b/front/src/views/detailsAll/components/GovernanceModel/GovernanceModelNavigation.vue
@ -0,0 +1,88 @@
+<!--
+ * @Description: 知识库--模型规则导航
+-->
+<template>
+  <div class="governance-navigation" v-if="navList.length > 0">
+    <template v-for="nav in navList" :key="nav.key">
+      <div class="nav" :class="{ select: nav.key == select }" @click="selectNav(nav.key)">
+        {{ nav.name }}
+        <span class="line"></span>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+import mybus from '@/myplugins/mybus'
+// 获取当前路由地址
+const navList = ref([
+  {
+    name: '输入数据',
+    key: 'governance-model-input-data',
+  },
+  {
+    name: '输出数据',
+    key: 'governance-model-output-data',
+  },
+  {
+    name: '详细规则',
+    key: 'governance-model-rule',
+  },
+])
+const select = ref('governance-model-input-data')
+
+const props = defineProps({
+  selectNow: { type: String, default: '' },
+  dataList: { type: Object, default: null },
+})
+
+watch(
+  () => props.selectNow,
+  (newValue) => {
+    select.value = newValue
+  }
+)
+console.log('selectNow------------>', props.selectNow);
+
+const selectNav = (key) => {
+  select.value = key
+  mybus.emit('flyToView', select.value)
+}
+
+</script>
+<style lang="less" scoped>
+.governance-navigation {
+  width: 1912px;
+  height: 84px;
+  line-height: 80px;
+  display: flex;
+  justify-content: space-around;
+  font-size: 24px;
+  color: #666;
+  background: #fff;
+  padding: 0 300px;
+  box-shadow: 0px 5px 10px #f2f3fb;
+  position: relative;
+
+  .nav {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .line {
+      width: 40px;
+      height: 4px;
+    }
+  }
+
+  .select {
+    color: #526aff;
+
+    .line {
+      background: #526aff;
+    }
+  }
+}
+</style>
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@ -12,18 +12,10 @@
      <detail-back></detail-back>
      <div class="detail-content">
        <details-view v-if="showView === 'details-view'"></details-view>
-      <algorithm-details
-        v-if="showView === 'algorithm-details'"
-      ></algorithm-details>
-      <application-details
-        v-else-if="showView === 'application-details'"
-      ></application-details>
-      <developer-components
-        v-else-if="showView === 'development-of-component'"
-      ></developer-components>
-      <business-details
-        v-else-if="showView === 'business-details'"
-      ></business-details>
+        <algorithm-details v-if="showView === 'algorithm-details'"></algorithm-details>
+        <application-details v-else-if="showView === 'application-details'"></application-details>
+        <developer-components v-else-if="showView === 'development-of-component'"></developer-components>
+        <business-details 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>
@ -112,7 +104,6 @@
      if (id) {
        selectOne(id).then((res) => {
          if (res.data.data.type == '组件服务') {
-             
            let detection = res.data.data.infoList.filter(
              (item) => item.attrType === '组件类型'
            )[0]
@ -141,10 +132,8 @@
              showView.value = 'algorithm-details'
            }
          } else if (res.data.data.type == '知识库') {
-             
-             let detection = res.data.data.infoList.filter(
-               (item) => item.attrType === '知识库类型'
-             )[0]
+            let detection = res.data.data.infoList.find((item) => item.attrType === '知识库类型')
+            console.log('detection---ww--------->', detection);
            if (detection) {
              res.data.data.infoList.map((item) => {
                if (item.attrType == '知识库类型') {
@ -240,18 +229,22 @@
 })
 </script>

-<style scoped lang="less"></style>
+<style scoped lang="less">
+
+</style>
 <style>
 html,
 body {
  height: unset;
 }
+
 #apply-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
+
 .detail-content {
  margin-top: 90px;
 }