知识库--模型规则详情

This commit is contained in:
guoyue 2022-12-02 17:29:20 +08:00
parent 8b0e6b2519
commit b6e56cc0ea
4 changed files with 498 additions and 311 deletions

View File

@ -8,128 +8,126 @@
<template> <template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }"> <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<layer-service-top-details <layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
:dataList="dataList.data" <!-- tab导航 -->
></layer-service-top-details> <GovernanceModelNavigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
<!-- 模型信息--> </GovernanceModelNavigation>
<layer-service-information <!-- 输入数据 -->
:dataList="dataList.data" <GovernanceModelInputData :dataList="dataList.data" id="governance-model-input-data" class="scrollBox" title="输入数据">
id="service-information" </GovernanceModelInputData>
class="scrollBox" <!-- 输出数据 -->
></layer-service-information> <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> </div>
</template> </template>
<script setup> <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 LayerServiceTopDetails from '@/views/detailsAll/components/GovernanceModel/GovernanceModelTopDetails.vue' //
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import GovernanceModelInputData from '@/views/detailsAll/components/GovernanceModel/GovernanceModelInputData.vue' //
import { useRouter } from 'vue-router' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { import { useRouter } from 'vue-router'
updateVisits, import {
selectOne, updateVisits,
queryPartAppByKeyId2, selectOne,
browsingInsert, browsingInsert,
} from '@/api/home' } from '@/api/home';
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus';
const router = useRouter()
const scrollTop = ref(0) const router = useRouter()
const domArr = ref([]) const scrollTop = ref(0)
const selectNow = ref('') const domArr = ref([])
const dataList = reactive({ data: {} }) const selectNow = ref('')
const id = router.currentRoute.value.query.id const dataList = reactive({ data: {} })
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const id = router.currentRoute.value.query.id
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
let loading = ref(true) let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.body.scrollTop = 0
mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50 mybus.on('flyToView', (id) => {
document.documentElement.scrollTop = top let top = document.querySelector('#' + id).offsetTop - 50
document.body.scrollTop = top document.documentElement.scrollTop = top
}) document.body.scrollTop = top
onMounted(() => { })
window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox') onMounted(() => {
scrollTop.value = window.addEventListener('scroll', () => {
document.documentElement.scrollTop || document.body.scrollTop domArr.value = document.querySelectorAll('.scrollBox')
for (let i = 0; i < domArr.value.length; i++) { scrollTop.value =
if (i === 0) { document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { for (let i = 0; i < domArr.value.length; i++) {
selectNow.value = domArr.value[i].id if (i === 0) {
} if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
} else if (i == domArr.value.length - 1) { selectNow.value = domArr.value[i].id
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { }
selectNow.value = domArr.value[i].id } else if (i == domArr.value.length - 1) {
} if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
} else { selectNow.value = domArr.value[i].id
if ( }
scrollTop.value >= domArr.value[i].offsetTop - 50 && } else {
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 if (
) { scrollTop.value >= domArr.value[i].offsetTop - 50 &&
selectNow.value = domArr.value[i].id 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')
}) })
})
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')
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -9.56rem; margin-left: -9.56rem;
} }
.fixed2 > div:nth-of-type(3) { .fixed2>div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
</style> </style>

View File

@ -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>

View File

@ -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>

View File

@ -8,25 +8,17 @@
<template> <template>
<div> <div>
<div id="apply-container"> <div id="apply-container">
<home-header :showView="showView" :target-flag = "targetFlag"></home-header> <home-header :showView="showView" :target-flag="targetFlag"></home-header>
<detail-back></detail-back> <detail-back></detail-back>
<div class="detail-content"> <div class="detail-content">
<details-view v-if="showView === 'details-view'"></details-view> <details-view v-if="showView === 'details-view'"></details-view>
<algorithm-details <algorithm-details v-if="showView === 'algorithm-details'"></algorithm-details>
v-if="showView === 'algorithm-details'" <application-details v-else-if="showView === 'application-details'"></application-details>
></algorithm-details> <developer-components v-else-if="showView === 'development-of-component'"></developer-components>
<application-details <business-details v-else-if="showView === 'business-details'"></business-details>
v-else-if="showView === 'application-details'" <layer-service v-else-if="showView === 'layer-service'"></layer-service>
></application-details> <governance-model v-else-if="showView === 'governance-model'"></governance-model>
<developer-components <standard-doc v-else-if="showView === 'standard-doc'"></standard-doc>
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>
</div> </div>
<home-footer></home-footer> <home-footer></home-footer>
@ -35,147 +27,88 @@
</template> </template>
<script> <script>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import { defineComponent, reactive, ref } from 'vue' import { defineComponent, reactive, ref } from 'vue'
import DetailsView from './components/DetailsView.vue' import DetailsView from './components/DetailsView.vue'
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
// import Standard from "@/views/detailsAll/StandardDoc " // import Standard from "@/views/detailsAll/StandardDoc "
import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails' import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
import ApplicationDetails from '@/views/detailsAll/ApplicationDetails' import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
import DeveloperComponents from '@/views/detailsAll/DeveloperComponents' import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
import BusinessDetails from '@/views/detailsAll/BusinessDetails' import BusinessDetails from '@/views/detailsAll/BusinessDetails'
import LayerService from '@/views/detailsAll/LayerService' import LayerService from '@/views/detailsAll/LayerService'
import GovernanceModel from '@/views/detailsAll/GovernanceModel' import GovernanceModel from '@/views/detailsAll/GovernanceModel'
import StandardDoc from '@/views/detailsAll/StandardDoc' import StandardDoc from '@/views/detailsAll/StandardDoc'
import detailBack from '@/views/home/detailBack.vue' import detailBack from '@/views/home/detailBack.vue'
import { selectOne } from '@/api/home' import { selectOne } from '@/api/home'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
export default defineComponent({ export default defineComponent({
name: '', name: '',
props: {}, props: {},
components: { components: {
HomeHeader, HomeHeader,
DetailsView, DetailsView,
HomeFooter, HomeFooter,
AlgorithmDetails, AlgorithmDetails,
ApplicationDetails, ApplicationDetails,
DeveloperComponents, DeveloperComponents,
BusinessDetails, BusinessDetails,
LayerService, LayerService,
detailBack, detailBack,
StandardDoc, StandardDoc,
GovernanceModel, GovernanceModel,
}, },
setup() { setup() {
const formState = reactive({ const formState = reactive({
applyRequire: '', applyRequire: '',
applyDept: '', applyDept: '',
applyName: '', applyName: '',
applyPurpose: '', applyPurpose: '',
applySystem: '', applySystem: '',
}) })
const options = ref([ const options = ref([
{ {
value: '政法委', value: '政法委',
label: '政法委', label: '政法委',
}, },
{ {
value: '公安局', value: '公安局',
label: '公安局', label: '公安局',
}, },
{ {
value: '卫健委', value: '卫健委',
label: '卫健委', label: '卫健委',
}, },
{ {
value: '城市管理局', value: '城市管理局',
label: '城市管理局', label: '城市管理局',
}, },
{ {
value: '生态环境局', value: '生态环境局',
label: '生态环境局', label: '生态环境局',
}, },
{ {
value: '交通运输局', value: '交通运输局',
label: '交通运输局', label: '交通运输局',
}, },
]) ])
const router = useRouter() const router = useRouter()
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
let showView = ref('') let showView = ref('')
const targetFlag= ref(true) const targetFlag = ref(true)
const init = () => { const init = () => {
debugger debugger
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
if (res.data.data.type == '组件服务') { if (res.data.data.type == '组件服务') {
let detection = res.data.data.infoList.filter(
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 = 'algorithm-details'
break
case '开发组件':
showView.value = 'development-of-component'
break
case '业务组件':
showView.value = 'business-details'
break
case '图层服务':
showView.value = 'layer-service'
break
default:
break
}
}
})
} else {
showView.value = 'algorithm-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) {
console.log('obj============>', obj)
if (obj.type == '组件服务') {
let detection = obj.infoList.filter(
(item) => item.attrType === '组件类型' (item) => item.attrType === '组件类型'
)[0] )[0]
if (detection) { if (detection) {
obj.infoList.map((item) => { res.data.data.infoList.map((item) => {
if (item.attrType == '组件类型') { if (item.attrType == '组件类型') {
switch (item.attrValue) { switch (item.attrValue) {
case '智能算法': case '智能算法':
@ -198,24 +131,24 @@
} else { } else {
showView.value = 'algorithm-details' showView.value = 'algorithm-details'
} }
}else if (obj.type == '知识库') { } else if (res.data.data.type == '知识库') {
let detection = obj.infoList.filter( let detection = res.data.data.infoList.find((item) => item.attrType === '知识库类型')
(item) => item.attrType === '知识库类型' console.log('detection---ww--------->', detection);
)[0]
if (detection) { if (detection) {
obj.infoList.map((item) => { res.data.data.infoList.map((item) => {
if (item.attrType == '知识库类型') { if (item.attrType == '知识库类型') {
switch (item.attrValue) { switch (item.attrValue) {
case '数据标准': case '数据标准':
showView.value = 'standard-doc' showView.value = 'standard-doc'
break break
case '治理模型': case '治理模型':
showView.value = 'governance-model' showView.value = 'governance-model'
break break
default: default:
break showView.value = 'standard-doc'
} break
} }
}
}) })
} else { } else {
showView.value = 'standard-doc' showView.value = 'standard-doc'
@ -223,36 +156,96 @@
} else { } else {
showView.value = 'standard-doc' showView.value = 'standard-doc'
} }
})
} else if (obj) {
console.log('obj============>', obj)
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 = 'algorithm-details'
break
case '开发组件':
showView.value = 'development-of-component'
break
case '业务组件':
showView.value = 'business-details'
break
case '图层服务':
showView.value = 'layer-service'
break
default:
break
}
}
})
} 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 = 'standard-doc'
} }
} }
init() }
init()
return { return {
formState, formState,
options, options,
showView, showView,
targetFlag, targetFlag,
init, init,
router, router,
id, id,
} }
}, },
}) })
</script> </script>
<style scoped lang="less"></style> <style scoped lang="less">
<style>
html, </style>
body { <style>
height: unset; html,
} body {
#apply-container { height: unset;
height: 100vh; }
display: flex;
flex-direction: column; #apply-container {
justify-content: space-between; height: 100vh;
} display: flex;
.detail-content{ flex-direction: column;
margin-top:90px; justify-content: space-between;
} }
.detail-content {
margin-top: 90px;
}
</style> </style>