能力集市-知识库
This commit is contained in:
parent
a9d9aa7695
commit
3bc9f34921
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
// }
|
||||
.pageResource {
|
||||
position: absolute;
|
||||
top: 0.68rem;
|
||||
top: 1.2rem;
|
||||
left: -5.37rem;
|
||||
width: 176%;
|
||||
height: 90.5%;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue