710 lines
18 KiB
Vue
710 lines
18 KiB
Vue
<!-- 融合服务详情 -->
|
|
<template>
|
|
<div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }">
|
|
<home-header></home-header>
|
|
<detail-back v-show="!hiddenBackFlag"></detail-back>
|
|
<!-- 头部基本信息 -->
|
|
<application-top-details
|
|
:dataList="detailInfoObj"
|
|
:navList="navList"
|
|
></application-top-details>
|
|
|
|
<!-- 导航 -->
|
|
<div :class="{ fixed: scrollTop >= 600 }">
|
|
<div class="application-navigation">
|
|
<template v-for="nav in navList" :key="nav.key">
|
|
<div
|
|
class="nav"
|
|
:class="{ selectNow: nav.key == selectNow }"
|
|
@click="selectNav(nav.key)"
|
|
>
|
|
{{ nav.name }}
|
|
<span class="line"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 场景痛点 -->
|
|
<div id="integration-pain-point" class="pain-point scrollBox">
|
|
<div class="title-1">
|
|
<DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle>
|
|
</div>
|
|
<div class="flex-row-center">
|
|
<div class="bg cjtd">
|
|
<img :preview="false" :src="bgImg" />
|
|
</div>
|
|
|
|
<div class="content" style="margin-left: 0.5rem">
|
|
<div
|
|
class="content-item"
|
|
v-for="(item, i) in painPoint"
|
|
:key="i"
|
|
style="
|
|
margin-bottom: 0.2rem;
|
|
font-size: 0.18rem;
|
|
line-height: 0.3rem;
|
|
"
|
|
>
|
|
{{ i + 1 + '、' + item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 解决方案 -->
|
|
<div
|
|
id="integration-solution"
|
|
class="solution scrollBox"
|
|
style="background: #eee"
|
|
>
|
|
<div class="title-1">
|
|
<DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
|
|
</div>
|
|
<div class="flex-row-center">
|
|
<div class="content" style="background: #fff; margin-top: 0.2rem">
|
|
<div
|
|
class="content-item"
|
|
v-for="(item, i) in solution"
|
|
:key="i"
|
|
style="
|
|
margin-bottom: 0.2rem;
|
|
font-size: 0.18rem;
|
|
line-height: 0.3rem;
|
|
"
|
|
>
|
|
{{ i + 1 + '、' + item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 使用能力 -->
|
|
<div id="integration-ability" class="ability scrollBox">
|
|
<div class="title-1">
|
|
<DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
|
|
</div>
|
|
<div
|
|
class="flex-row-center combine-content"
|
|
v-for="(item, i) in combineList"
|
|
:key="i"
|
|
style="display: block"
|
|
>
|
|
<div
|
|
class="top"
|
|
style="font-size: 0.24rem; text-align: center; margin-bottom: 0.3rem"
|
|
>
|
|
{{ i == 0 ? '基础设施' : i == 1 ? '组件服务' : '数据资源' }}
|
|
</div>
|
|
<div
|
|
class="data-count"
|
|
style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem"
|
|
>
|
|
<span style="color: #909399">
|
|
共
|
|
{{
|
|
i == 0
|
|
? infrastructureCount
|
|
: i == 1
|
|
? componentCount
|
|
: dataSourceCount
|
|
}}项，示例如下：
|
|
</span>
|
|
</div>
|
|
<div class="bottom" style="display: flex; align-items: flex-start">
|
|
<div class="title" :class="'title' + i"></div>
|
|
<div class="table-box">
|
|
<el-table
|
|
class="table"
|
|
:data="item.list"
|
|
stripe
|
|
:header-cell-style="{ 'text-align': 'center' }"
|
|
>
|
|
<el-table-column
|
|
prop="name"
|
|
label="资源名称"
|
|
align="center"
|
|
width="200"
|
|
show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="platform"
|
|
label="资源类型"
|
|
align="center"
|
|
width="100"
|
|
show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="dept"
|
|
label="能力来源"
|
|
align="center"
|
|
width="300"
|
|
show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 构建步骤 -->
|
|
<div id="integration-step" class="step scrollBox" style="background: #eee">
|
|
<div class="title-1">
|
|
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
|
|
</div>
|
|
<div class="flex-row-center step-content">
|
|
<el-steps direction="vertical" :space="150" :active="step.length">
|
|
<el-step
|
|
v-for="(item, i) in step"
|
|
:key="i"
|
|
:title="item.question"
|
|
:description="item.answer"
|
|
></el-step>
|
|
</el-steps>
|
|
</div>
|
|
</div>
|
|
<home-footer></home-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ApplicationTopDetails from './components/ApplicationTopDetails.vue'
|
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
|
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
|
import HomeFooter from '@/views/newHome/components/Footer'
|
|
import HomeHeader from '@/views/home/components/header'
|
|
import detailBack from '@/views/home/detailBack.vue'
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { getIntegrationDetail } from '@/api/home'
|
|
import mybus from '@/myplugins/mybus'
|
|
import { message } from 'ant-design-vue'
|
|
const router = useRouter()
|
|
const scrollTop = ref(0)
|
|
const domArr = ref([])
|
|
const painPoint = ref([])
|
|
const solution = ref([])
|
|
const step = ref([])
|
|
const bgImg = ref('')
|
|
const dataSourceCount = ref(0)
|
|
const infrastructureCount = ref(0)
|
|
const componentCount = ref(0)
|
|
const id = router.currentRoute.value.query.id
|
|
const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag
|
|
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) &&
|
|
document.querySelector('#' + id).offsetTop - 50
|
|
document.documentElement.scrollTop = top
|
|
document.body.scrollTop = top
|
|
})
|
|
|
|
const navList = ref([
|
|
{
|
|
name: '场景痛点',
|
|
key: 'integration-pain-point',
|
|
},
|
|
{
|
|
name: '解决方案',
|
|
key: 'integration-solution',
|
|
},
|
|
{
|
|
name: '使用能力',
|
|
key: 'integration-ability',
|
|
},
|
|
{
|
|
name: '构建步骤',
|
|
key: 'integration-step',
|
|
},
|
|
])
|
|
|
|
const selectNow = ref('integration-pain-point')
|
|
|
|
const useWayShowList = ref([
|
|
{
|
|
title: '归属部门',
|
|
info: {
|
|
deptUser: '部门联系人',
|
|
mobile: '联系人电话',
|
|
},
|
|
},
|
|
{
|
|
title: '服务商',
|
|
info: {
|
|
providerUser: '服务商联系人',
|
|
providerMobile: '联系人电话',
|
|
},
|
|
},
|
|
])
|
|
|
|
const combineList = ref([
|
|
{
|
|
title: '基础设施',
|
|
list: [],
|
|
},
|
|
{
|
|
title: '组件服务',
|
|
list: [],
|
|
},
|
|
{
|
|
title: '数据资源',
|
|
list: [],
|
|
},
|
|
])
|
|
const detailInfoObj = ref({})
|
|
|
|
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 selectNav = (key) => {
|
|
selectNow.value = key
|
|
mybus.emit('flyToView', selectNow.value)
|
|
}
|
|
|
|
const getAttrValue = (fuseAttrList, text) => {
|
|
let _obj = fuseAttrList.find((v) => v.attrType === text) || {}
|
|
let data = JSON.parse(_obj.attrValue || '[]') || []
|
|
return data
|
|
}
|
|
|
|
// 融合服务--详情
|
|
const getIntegrationServicesDeatil = (id) => {
|
|
getIntegrationDetail(id).then(
|
|
(res) => {
|
|
if (res.data.code !== 0) {
|
|
return message.error(res.data.msg)
|
|
}
|
|
detailInfoObj.value = res.data.data || {}
|
|
dataSourceCount.value = res.data.data.dataSourceCount || 0
|
|
infrastructureCount.value = res.data.data.infrastructureCount || 0
|
|
componentCount.value = res.data.data.componentCount || 0
|
|
// 资源属性
|
|
let fuseAttrList = res.data.data.fuseAttrList || []
|
|
// 融合关系
|
|
let fuseResourceList = res.data.data.fuseResourceList || []
|
|
let questionValue =
|
|
fuseAttrList.find((v) => v.attrType === '常见问题') || {}
|
|
let questionObj = {
|
|
attrType: '常见问题',
|
|
attrValue: questionValue.attrValue || '[]',
|
|
}
|
|
painPoint.value = getAttrValue(fuseAttrList, '场景痛点')
|
|
solution.value = getAttrValue(fuseAttrList, '解决方案')
|
|
step.value = getAttrValue(fuseAttrList, '使用步骤')
|
|
bgImg.value =
|
|
fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
|
|
let areaObj = {
|
|
attrType: '应用领域',
|
|
attrValue: '',
|
|
}
|
|
combineList.value.forEach((item) => {
|
|
let arr = []
|
|
let resource = fuseResourceList.filter(
|
|
(v) => v.resource && v.type == item.title
|
|
)
|
|
if (resource.length > 0) {
|
|
if (item.title === '基础设施') {
|
|
arr = resource.map((res) => ({
|
|
id: res.resource.idtCameraChannel,
|
|
name: res.resource.channelName,
|
|
dept: res.resource.nodeName
|
|
.split('-')
|
|
.splice(1)
|
|
.join('-')
|
|
.slice(1),
|
|
platform: '视频资源',
|
|
}))
|
|
} else if (item.title === '组件服务') {
|
|
arr = resource.map((res) => ({
|
|
id: res.resource.id,
|
|
name: res.resource.name,
|
|
dept: res.resource.deptName,
|
|
platform:
|
|
res.resource.infoList.find(
|
|
(item) => item.attrType === '组件类型'
|
|
)?.attrValue || '组件服务',
|
|
}))
|
|
} else if (item.title === '数据资源') {
|
|
arr = resource.map((res) => ({
|
|
id: res.resource.resourceId,
|
|
name: res.resource.resourceName,
|
|
dept: res.resource.deptName,
|
|
platform: '数据资源',
|
|
}))
|
|
}
|
|
}
|
|
|
|
item.list = arr
|
|
})
|
|
detailInfoObj.value.infoList = []
|
|
detailInfoObj.value.infoList.push(questionObj)
|
|
detailInfoObj.value.infoList.push(areaObj)
|
|
},
|
|
(err) => {
|
|
message.error(err)
|
|
}
|
|
)
|
|
}
|
|
getIntegrationServicesDeatil(id)
|
|
|
|
function handleOpenUrl(type) {
|
|
let obj =
|
|
(detailInfoObj.value.fuseAttrList || []).find(
|
|
(v) => v.attrType == type
|
|
) || {}
|
|
let url = obj.attrValue || ''
|
|
if (!obj.attrValue) {
|
|
return message.error('错误的文档链接地址！')
|
|
}
|
|
window.open(
|
|
window.SITE_CONFIG.previewUrl +
|
|
'hisense_office/onlinePreview?url=' +
|
|
btoa(encodeURI(url))
|
|
)
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
mybus.off('flyToView')
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.flex-row-between {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-row-start {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.flex-row-center {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.IntegrationServicesDetails {
|
|
.fixed {
|
|
position: fixed !important;
|
|
z-index: 2000;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.fixed2 > div:nth-of-type(3) {
|
|
margin-top: 0.84rem;
|
|
}
|
|
|
|
.application-navigation {
|
|
width: 19.12rem;
|
|
height: 0.84rem;
|
|
line-height: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 0.24rem;
|
|
color: #666;
|
|
background: #fff;
|
|
padding: 0 3rem;
|
|
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
|
position: relative;
|
|
|
|
.nav {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.line {
|
|
width: 0.4rem;
|
|
height: 0.04rem;
|
|
}
|
|
}
|
|
|
|
.selectNow {
|
|
color: #526aff;
|
|
|
|
.line {
|
|
background: #526aff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.use-way {
|
|
padding: 0.8rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.title-1 {
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.left {
|
|
.btn {
|
|
padding: 10px 20px;
|
|
color: #526aff;
|
|
background: #fff;
|
|
border-radius: 50px;
|
|
margin: 10px;
|
|
font-size: 0.2rem;
|
|
width: 150px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
width: 13rem;
|
|
justify-content: space-between;
|
|
|
|
.word-bg {
|
|
background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
|
|
}
|
|
|
|
.content-card {
|
|
height: 1.5rem;
|
|
width: 6.2rem;
|
|
border-radius: 0.2rem;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(113, 132, 252, 0.4),
|
|
rgba(148, 163, 252, 0.4)
|
|
);
|
|
padding: 0 0.3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.card-title {
|
|
font-size: 0.26rem;
|
|
color: #212956;
|
|
margin-bottom: 0.2rem;
|
|
line-height: 0.26rem;
|
|
}
|
|
|
|
.content-card-item {
|
|
width: 50%;
|
|
|
|
.card-text {
|
|
margin-right: 0.2rem;
|
|
color: rgba(33, 41, 86, 0.8);
|
|
font-size: 0.2rem;
|
|
max-width: 2.8rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pain-point {
|
|
padding: 0.8rem 0;
|
|
background: rgb(247, 248, 250);
|
|
|
|
.bg {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
// background: url('~@/assets/home/rhfw_square.png') no-repeat;
|
|
// background-size: 100%;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.cjtd {
|
|
width: 5.75rem;
|
|
height: 3.4rem;
|
|
background: url('~@/assets/home/fn/cjtd.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.cjtd img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
overflow: auto;
|
|
height: 3rem;
|
|
width: 7rem;
|
|
margin-top: 0.3rem;
|
|
|
|
.content-item {
|
|
font-size: 16px;
|
|
margin: 0rem 0rem 0.1rem 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.solution {
|
|
padding: 0.8rem 0;
|
|
background: rgb(247, 248, 250);
|
|
|
|
.content {
|
|
width: 11rem;
|
|
|
|
.content-item {
|
|
font-size: 16px;
|
|
margin: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step {
|
|
padding: 0.8rem 0;
|
|
background: rgb(247, 248, 250);
|
|
|
|
.step-content {
|
|
margin: 0.3rem 4.5rem;
|
|
padding: 0.3rem;
|
|
background: #fff;
|
|
|
|
:deep(.el-step__description.is-finish) {
|
|
color: #333;
|
|
line-height: 0.24rem;
|
|
margin-top: 0.05rem;
|
|
}
|
|
|
|
/deep/ .el-step__title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/deep/ .el-step__description {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ability {
|
|
padding: 0.8rem 0;
|
|
background: rgb(247, 248, 250);
|
|
|
|
.title-1 {
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.combine-content {
|
|
margin-top: 0.3rem;
|
|
align-items: flex-start;
|
|
border-bottom: 1px solid #ccc;
|
|
margin: 0.2rem 3.5rem 0;
|
|
padding: 0.2rem 0;
|
|
|
|
.title {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
margin-right: 0.4rem;
|
|
background: url('~@/assets/home/rhfw_square.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title0 {
|
|
width: 5.6rem;
|
|
height: 3.45rem;
|
|
background: url('~@/assets/home/fn/jcss.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title1 {
|
|
width: 5.6rem;
|
|
height: 3.45rem;
|
|
background: url('~@/assets/home/fn/zjfw.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title2 {
|
|
width: 5.6rem;
|
|
height: 3.45rem;
|
|
background: url('~@/assets/home/fn/sjzy.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.table-box {
|
|
height: 3.45rem;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table {
|
|
// width: 100%;
|
|
font-size: 16px;
|
|
}
|
|
.data-count {
|
|
}
|
|
}
|
|
|
|
.name-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.no-data {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.16rem;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.name-text {
|
|
font-size: 0.16rem;
|
|
color: #212121;
|
|
line-height: 0.3rem;
|
|
height: 0.3rem;
|
|
text-align: center;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|