This commit is contained in:
gongjiale 2023-01-05 16:30:32 +08:00
parent c0bb1422b1
commit 0df1914eb3
2 changed files with 719 additions and 787 deletions

View File

@ -553,7 +553,10 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
margin-top: 12px; margin-top: 12px;
} }
span:hover{
background: #0058e1;
color: #fff;
}
.down { .down {
background: #0058e1; background: #0058e1;
color: #ffffff; color: #ffffff;

View File

@ -2,27 +2,16 @@
<template> <template>
<div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }"> <div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }">
<home-header></home-header> <home-header></home-header>
<detail-back <detail-back v-show="!hiddenBackFlag" :returnType="returnType" :districtType="districtType"></detail-back>
v-show="!hiddenBackFlag"
:returnType="returnType"
:districtType="districtType"
></detail-back>
<template v-if="districtType==0 ||returnType=='打包模式' "> <template v-if="districtType == 0 || returnType == '打包模式'">
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<application-top-details <application-top-details :dataList="detailInfoObj" :navList="navList"></application-top-details>
:dataList="detailInfoObj"
:navList="navList"
></application-top-details>
<!-- 导航 --> <!-- 导航 -->
<div :class="{ fixed: scrollTop >= 600 }" style="z-index: 10012"> <div :class="{ fixed: scrollTop >= 600 }" style="z-index: 10012">
<div class="application-navigation"> <div class="application-navigation">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div <div class="nav" :class="{ selectNow: nav.key == selectNow }" @click="selectNav(nav.key)">
class="nav"
:class="{ selectNow: nav.key == selectNow }"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -41,16 +30,11 @@
</div> </div>
<div class="content" style="margin-left: 0.5rem"> <div class="content" style="margin-left: 0.5rem">
<div <div class="content-item" v-for="(item, i) in painPoint" :key="i" style="
class="content-item"
v-for="(item, i) in painPoint"
:key="i"
style="
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
font-size: 0.18rem; font-size: 0.18rem;
line-height: 0.3rem; line-height: 0.3rem;
" ">
>
{{ i + 1 + '、' + item.description }} {{ i + 1 + '、' + item.description }}
</div> </div>
</div> </div>
@ -58,26 +42,17 @@
</div> </div>
<!-- 解决方案 --> <!-- 解决方案 -->
<div <div id="integration-solution" class="solution scrollBox" style="background: #eee">
id="integration-solution"
class="solution scrollBox"
style="background: #eee"
>
<div class="title-1"> <div class="title-1">
<DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle> <DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
</div> </div>
<div class="flex-row-center"> <div class="flex-row-center">
<div class="content" style="background: #fff; margin-top: 0.2rem"> <div class="content" style="background: #fff; margin-top: 0.2rem">
<div <div class="content-item" v-for="(item, i) in solution" :key="i" style="
class="content-item"
v-for="(item, i) in solution"
:key="i"
style="
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
font-size: 0.18rem; font-size: 0.18rem;
line-height: 0.3rem; line-height: 0.3rem;
" ">
>
{{ i + 1 + '、' + item.description }} {{ i + 1 + '、' + item.description }}
</div> </div>
</div> </div>
@ -89,22 +64,11 @@
<div class="title-1"> <div class="title-1">
<DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle> <DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
</div> </div>
<div <div class="flex-row-center combine-content" v-for="(item, i) in combineList" :key="i" style="display: block">
class="flex-row-center combine-content" <div class="top" style="font-size: 0.24rem; text-align: center; margin-bottom: 0.3rem">
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 ? '组件服务' : '数据资源' }} {{ i == 0 ? '基础设施' : i == 1 ? '组件服务' : '数据资源' }}
</div> </div>
<div <div class="data-count" style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem">
class="data-count"
style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem"
>
<span style="color: #909399"> <span style="color: #909399">
{{ {{
@ -118,64 +82,24 @@
</div> </div>
<div class="bottom" style="display: flex; align-items: flex-start"> <div class="bottom" style="display: flex; align-items: flex-start">
<div class="title" :class="'title' + i"></div> <div class="title" :class="'title' + i"></div>
<div class="table-box" v-if="returnType=='典型赋能场景'"> <div class="table-box" v-if="returnType == '典型赋能场景'">
<el-table <el-table class="table" :data="item.list" stripe :header-cell-style="{ 'text-align': 'center' }">
class="table" <el-table-column prop="name" label="资源名称" align="center" width="200"
:data="item.list" show-overflow-tooltip="true"></el-table-column>
stripe <el-table-column prop="type" label="资源类型" align="center" width="100"
:header-cell-style="{ 'text-align': 'center' }" show-overflow-tooltip="true"></el-table-column>
> <el-table-column prop="dept" label="来源部门" align="center" width="300"
<el-table-column show-overflow-tooltip="true"></el-table-column>
prop="name"
label="资源名称"
align="center"
width="200"
show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="type"
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> </el-table>
</div> </div>
<div class="table-box" v-else> <div class="table-box" v-else>
<el-table <el-table class="table" :data="item.list" stripe :header-cell-style="{ 'text-align': 'center' }">
class="table" <el-table-column prop="name" label="资源名称" align="center" width="200"
:data="item.list" show-overflow-tooltip="true"></el-table-column>
stripe <el-table-column prop="platform" label="资源类型" align="center" width="100"
:header-cell-style="{ 'text-align': 'center' }" show-overflow-tooltip="true"></el-table-column>
> <el-table-column prop="dept" label="能力来源" align="center" width="300"
<el-table-column show-overflow-tooltip="true"></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> </el-table>
</div> </div>
</div> </div>
@ -187,7 +111,7 @@
<div class="title-1"> <div class="title-1">
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle> <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
</div> </div>
<div class="step-content" > <div class="step-content">
<!-- <el-steps direction="vertical" :space="150" :active="step.length"> <!-- <el-steps direction="vertical" :space="150" :active="step.length">
<el-step <el-step
v-for="(item, i) in step" v-for="(item, i) in step"
@ -205,15 +129,15 @@
</div> </div>
</div> --> </div> -->
<div class="left-process"> <div class="left-process">
<div class="li1" v-for="(item,i) in step" :key="i"> <div class="li1" v-for="(item, i) in step" :key="i">
<div > <div>
<div class="node"> <div class="node">
<div class="step-span" >{{i+1}}</div> <div class="step-span">{{ i+ 1}}</div>
<div > <div>
<div class="step-question">{{i+1}}:{{item.question}}</div> <div class="step-question">{{ i+ 1}}:{{ item.question }}</div>
<div class="question-son" v-for="(itemson,i) in item.answer" :key="i"> <div class="question-son" v-for="(itemson, i) in item.answer" :key="i">
<img src="~@/assets/home/arrow.png" style="margin-right:8px" />{{i+1}}>{{itemson.answer}} <img src="~@/assets/home/arrow.png" style="margin-right:8px" />{{ i+ 1}}>{{ itemson.answer }}
</div> </div>
</div> </div>
@ -230,19 +154,15 @@
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="area" > <div class="area">
<a-image <a-image style="width:615px;height:345px" :preview="false" :src="bgImg || imgSrcYyzy" />
style="width:615px;height:345px" <div class="label-name">{{ detailInfoObj.name }} <span class="label">
:preview="false"
:src="bgImg || imgSrcYyzy"
/>
<div class="label-name">{{detailInfoObj.name}} <span class="label">
{{ detailInfoObj.type }} {{ detailInfoObj.type }}
</span> </span>
<span class="label1"> <span class="label1">
{{ detailInfoObj.area }} {{ detailInfoObj.area }}
</span></div> </span>
</div>
<a-button class="rukou" @click="openScene(detailInfoObj.sceneUrl)"> <a-button class="rukou" @click="openScene(detailInfoObj.sceneUrl)">
进入场景 进入场景
</a-button> </a-button>
@ -256,45 +176,45 @@
</template> </template>
<script setup> <script setup>
import ApplicationTopDetails from './components/ApplicationTopDetails.vue' import ApplicationTopDetails from './components/ApplicationTopDetails.vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' // import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import detailBack from '@/views/home/detailBack.vue' import detailBack from '@/views/home/detailBack.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue' import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { getIntegrationDetail } from '@/api/home' import { getIntegrationDetail } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const painPoint = ref([]) const painPoint = ref([])
const solution = ref([]) const solution = ref([])
const step = ref([]) const step = ref([])
const bgImg = ref('') const bgImg = ref('')
const dataSourceCount = ref(0) const dataSourceCount = ref(0)
const infrastructureCount = ref(0) const infrastructureCount = ref(0)
const componentCount = ref(0) const componentCount = ref(0)
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const returnType = router.currentRoute.value.query.type const returnType = router.currentRoute.value.query.type
const districtType= router.currentRoute.value.query.districtType const districtType = router.currentRoute.value.query.districtType
const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag
const imgSrcYyzy = ref(require('@/assets/newHome/empty.png')) const imgSrcYyzy = ref(require('@/assets/newHome/empty.png'))
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) => { mybus.on('flyToView', (id) => {
let top = let top =
document.querySelector('#' + id) && document.querySelector('#' + id) &&
document.querySelector('#' + id).offsetTop - 50 document.querySelector('#' + id).offsetTop - 50
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
}) })
const navList = ref([ const navList = ref([
{ {
name: '场景痛点', name: '场景痛点',
key: 'integration-pain-point', key: 'integration-pain-point',
@ -311,11 +231,11 @@
name: '构建步骤', name: '构建步骤',
key: 'integration-step', key: 'integration-step',
}, },
]) ])
const selectNow = ref('integration-pain-point') const selectNow = ref('integration-pain-point')
const useWayShowList = ref([ const useWayShowList = ref([
{ {
title: '归属部门', title: '归属部门',
info: { info: {
@ -330,9 +250,9 @@
providerMobile: '联系人电话', providerMobile: '联系人电话',
}, },
}, },
]) ])
const combineList = ref([ const combineList = ref([
{ {
title: '基础设施', title: '基础设施',
list: [], list: [],
@ -345,10 +265,10 @@
title: '数据资源', title: '数据资源',
list: [], list: [],
}, },
]) ])
const detailInfoObj = ref({}) const detailInfoObj = ref({})
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox') domArr.value = document.querySelectorAll('.scrollBox')
scrollTop.value = scrollTop.value =
@ -372,21 +292,21 @@
} }
} }
}) })
}) })
const selectNav = (key) => { const selectNav = (key) => {
selectNow.value = key selectNow.value = key
mybus.emit('flyToView', selectNow.value) mybus.emit('flyToView', selectNow.value)
} }
const getAttrValue = (fuseAttrList, text) => { const getAttrValue = (fuseAttrList, text) => {
let _obj = fuseAttrList.find((v) => v.attrType === text) || {} let _obj = fuseAttrList.find((v) => v.attrType === text) || {}
let data = JSON.parse(_obj.attrValue || '[]') || [] let data = JSON.parse(_obj.attrValue || '[]') || []
return data return data
} }
// -- // --
const getIntegrationServicesDeatil = (id) => { const getIntegrationServicesDeatil = (id) => {
getIntegrationDetail(id).then( getIntegrationDetail(id).then(
(res) => { (res) => {
if (res.data.code !== 0) { if (res.data.code !== 0) {
@ -416,19 +336,19 @@
attrType: '应用领域', attrType: '应用领域',
attrValue: '', attrValue: '',
} }
if(returnType==='典型赋能场景'){ if (returnType === '典型赋能场景') {
let fuseResourceList = res.data.data.fuseAttrList || [] let fuseResourceList = res.data.data.fuseAttrList || []
combineList.value.forEach((item) => { combineList.value.forEach((item) => {
let arr = [] let arr = []
let resource = fuseResourceList.filter( let resource = fuseResourceList.filter(
(v) => v.attrType == item.title (v) => v.attrType == item.title
) )
// let a=resource[0].attrValue // let a=resource[0].attrValue
let resourceArrList=JSON.parse(resource[0].attrValue) let resourceArrList = JSON.parse(resource[0].attrValue)
if (resourceArrList.length > 0) { if (resourceArrList.length > 0) {
arr = resourceArrList.map((res) => ({ arr = resourceArrList.map((res) => ({
name: res.name, name: res.name,
@ -439,8 +359,8 @@ if (resourceArrList.length > 0) {
item.list = arr item.list = arr
} }
}) })
}else{ } else {
// //
let fuseResourceList = res.data.data.fuseResourceList || [] let fuseResourceList = res.data.data.fuseResourceList || []
combineList.value.forEach((item) => { combineList.value.forEach((item) => {
@ -493,10 +413,10 @@ if (resourceArrList.length > 0) {
message.error(err) message.error(err)
} }
) )
} }
getIntegrationServicesDeatil(id) getIntegrationServicesDeatil(id)
function handleOpenUrl(type) { function handleOpenUrl(type) {
let obj = let obj =
(detailInfoObj.value.fuseAttrList || []).find( (detailInfoObj.value.fuseAttrList || []).find(
(v) => v.attrType == type (v) => v.attrType == type
@ -510,23 +430,24 @@ if (resourceArrList.length > 0) {
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(url)) btoa(encodeURI(url))
) )
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
mybus.off('flyToView') mybus.off('flyToView')
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.area{ .area {
padding-top: 93px; padding-top: 93px;
text-align: center; text-align: center;
margin-bottom: 32px; margin-bottom: 32px;
.label-name{
font-size:26px; .label-name {
color:#212121; font-size: 26px;
font-weight:bold; color: #212121;
margin-top:32px; font-weight: bold;
margin-top: 32px;
} }
@ -538,6 +459,7 @@ if (resourceArrList.length > 0) {
color: #fff; color: #fff;
background: #7294c8; background: #7294c8;
} }
.label1 { .label1 {
padding: 0.01rem 0.1rem; padding: 0.01rem 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
@ -546,8 +468,9 @@ if (resourceArrList.length > 0) {
color: #fff; color: #fff;
background: #c66132; background: #c66132;
} }
.rukou { .rukou {
margin-top:24px; margin-top: 24px;
background: #0058e1; background: #0058e1;
color: #ffffff; color: #ffffff;
width: 90px; width: 90px;
@ -558,35 +481,37 @@ if (resourceArrList.length > 0) {
} }
} }
.area-desc{
.area-desc {
background: #f6f7f9; background: #f6f7f9;
padding: 24px; padding: 24px;
width: 1300px; width: 1300px;
margin-left: 343px; margin-left: 343px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.flex-row-between {
.flex-row-between {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.flex-row-start { .flex-row-start {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
.flex-row-center { .flex-row-center {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.IntegrationServicesDetails { .IntegrationServicesDetails {
.fixed { .fixed {
position: fixed !important; position: fixed !important;
z-index: 2000; z-index: 2000;
@ -594,7 +519,7 @@ if (resourceArrList.length > 0) {
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) { .fixed2>div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
@ -632,9 +557,9 @@ if (resourceArrList.length > 0) {
} }
} }
} }
} }
.use-way { .use-way {
padding: 0.8rem 0; padding: 0.8rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -677,11 +602,9 @@ if (resourceArrList.length > 0) {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: linear-gradient( background: linear-gradient(to right,
to right,
rgba(113, 132, 252, 0.4), rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4) rgba(148, 163, 252, 0.4));
);
padding: 0 0.3rem; padding: 0 0.3rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -712,9 +635,9 @@ if (resourceArrList.length > 0) {
} }
} }
} }
} }
.pain-point { .pain-point {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -732,6 +655,7 @@ if (resourceArrList.length > 0) {
background: url('~@/assets/home/fn/cjtd.png') no-repeat; background: url('~@/assets/home/fn/cjtd.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.cjtd img { .cjtd img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -748,9 +672,9 @@ if (resourceArrList.length > 0) {
margin: 0rem 0rem 0.1rem 0.1rem; margin: 0rem 0rem 0.1rem 0.1rem;
} }
} }
} }
.solution { .solution {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -762,9 +686,9 @@ if (resourceArrList.length > 0) {
margin: 0.3rem; margin: 0.3rem;
} }
} }
} }
.step { .step {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -772,6 +696,7 @@ if (resourceArrList.length > 0) {
margin: 0.3rem 4.5rem; margin: 0.3rem 4.5rem;
padding: 0.3rem; padding: 0.3rem;
background: #fff; background: #fff;
.left-process { .left-process {
padding-left: 18px; padding-left: 18px;
@ -795,22 +720,24 @@ if (resourceArrList.length > 0) {
} }
.step-question{ .step-question {
color: #0058e1; color: #0058e1;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
padding-top: 8px; padding-top: 8px;
margin-left: 12px; margin-left: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.question-son{
.question-son {
background: #f6f7f9; background: #f6f7f9;
font-size: 16px; font-size: 16px;
color: #414040; color: #414040;
margin-left: 12px; margin-left: 12px;
line-height: 24px; line-height: 24px;
padding: 12px 0px 12px 16px; padding: 12px 0px 12px 16px;
} }
.node { .node {
cursor: pointer; cursor: pointer;
@ -820,11 +747,11 @@ if (resourceArrList.length > 0) {
color: #212121; color: #212121;
} }
.step-span{ .step-span {
z-index: 1; z-index: 1;
color: #0058e1; color: #0058e1;
width: 50px; width: 50px;
height: 50px; height: 41px;
position: relative; position: relative;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
@ -833,6 +760,7 @@ if (resourceArrList.length > 0) {
padding-top: 6px; padding-top: 6px;
float: left; float: left;
background: url('~@/assets/home/step.png') no-repeat; background: url('~@/assets/home/step.png') no-repeat;
background-color: #fff;
} }
@ -852,9 +780,9 @@ if (resourceArrList.length > 0) {
} }
} }
.ability { .ability {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -897,6 +825,7 @@ if (resourceArrList.length > 0) {
background: url('~@/assets/home/fn/sjzy.png') no-repeat; background: url('~@/assets/home/fn/sjzy.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.table-box { .table-box {
height: 3.45rem; height: 3.45rem;
flex: 1; flex: 1;
@ -907,8 +836,8 @@ if (resourceArrList.length > 0) {
// width: 100%; // width: 100%;
font-size: 16px; font-size: 16px;
} }
.data-count {
} .data-count {}
} }
.name-box { .name-box {
@ -939,5 +868,5 @@ if (resourceArrList.length > 0) {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
} }
} }
</style> </style>