wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

bug修复

This commit is contained in:
wuhongjian 2022-10-13 10:29:20 +08:00
parent b57d9c5b11
commit ce50c9221e
1 changed files with 581 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
front/src/views/home/integrationServicesDetails.vue
View File

@ -4,13 +4,20 @@
<home-header></home-header> <home-header></home-header>
<detail-back></detail-back> <detail-back></detail-back>
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<application-top-details :dataList="detailInfoObj" :navList="navList"></application-top-details> <application-top-details
:dataList="detailInfoObj"
:navList="navList"
></application-top-details>
<!-- 导航 --> <!-- 导航 -->
<div :class="{ fixed: scrollTop >= 600 }"> <div :class="{ fixed: scrollTop >= 600 }">
<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 class="nav" :class="{ selectNow: nav.key == selectNow }" @click="selectNav(nav.key)"> <div
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>
@ -29,11 +36,16 @@
</div> </div>
<div class="content" style="margin-left: 0.5rem"> <div class="content" style="margin-left: 0.5rem">
<div class="content-item" v-for="(item, i) in painPoint" :key="i" style=" <div
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>
@ -41,17 +53,26 @@
</div> </div>
<!-- 解决方案 --> <!-- 解决方案 -->
<div id="integration-solution" class="solution scrollBox" style="background: #eee"> <div
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 class="content-item" v-for="(item, i) in solution" :key="i" style=" <div
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>
@ -63,20 +84,48 @@
<div class="title-1"> <div class="title-1">
<DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle> <DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
</div> </div>
<div class="flex-row-center combine-content" v-for="(item, i) in combineList" :key="i" style="display: block"> <div
<div class="top" style="font-size: 0.24rem; text-align: center; margin-bottom: 0.3rem"> 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 ? '组件服务' : '数据资源' }} {{ i == 0 ? '基础设施' : i == 1 ? '组件服务' : '数据资源' }}
</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"> <div class="table-box">
<el-table class="table" :data="item.list" stripe :header-cell-style="{ 'text-align': 'center' }"> <el-table
<el-table-column prop="name" label="数据" align="center" width="200" show-overflow-tooltip="true"> class="table"
</el-table-column> :data="item.list"
<el-table-column prop="dept" label="能力来源" align="center" width="300" show-overflow-tooltip="true"> stripe
</el-table-column> :header-cell-style="{ 'text-align': 'center' }"
<el-table-column prop="platform" label="申请平台" align="center" width="100" show-overflow-tooltip="true"> >
</el-table-column> <el-table-column
prop="name"
label="数据"
align="center"
width="200"
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-column
prop="platform"
label="申请平台"
align="center"
width="100"
show-overflow-tooltip="true"
></el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -90,7 +139,12 @@
</div> </div>
<div class="flex-row-center step-content"> <div class="flex-row-center step-content">
<el-steps direction="vertical" :space="150" :active="step.length"> <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-step
v-for="(item, i) in step"
:key="i"
:title="item.question"
:description="item.answer"
></el-step>
</el-steps> </el-steps>
</div> </div>
</div> </div>
@ -99,38 +153,38 @@
</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 id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
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',
@ -147,11 +201,11 @@ const navList = ref([
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: {
@ -166,9 +220,9 @@ const useWayShowList = ref([
providerMobile: '联系人电话', providerMobile: '联系人电话',
}, },
}, },
]) ])
const combineList = ref([ const combineList = ref([
{ {
title: '基础设施', title: '基础设施',
list: [], list: [],
@ -181,10 +235,10 @@ const combineList = ref([
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 =
@ -208,23 +262,21 @@ onMounted(() => {
} }
} }
}) })
}) })
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, data, text) => { const getAttrValue = (fuseAttrList, text) => {
let _obj = fuseAttrList.find((v) => v.attrType === text) || {}; let _obj = fuseAttrList.find((v) => v.attrType === text) || {}
data = let data = JSON.parse(_obj.attrValue || '[]') || []
JSON.parse( return data
_obj.attrValue || '[]' }
) || []
}
// 融合服务--详情 // 融合服务--详情
const getIntegrationServicesDeatil = (id) => { const getIntegrationServicesDeatil = (id) => {
getIntegrationDetail(id).then( getIntegrationDetail(id).then(
(res) => { (res) => {
if (res.data.code !== 0) { if (res.data.code !== 0) {
@ -241,9 +293,9 @@ const getIntegrationServicesDeatil = (id) => {
attrType: '常见问题', attrType: '常见问题',
attrValue: questionValue.attrValue || '[]', attrValue: questionValue.attrValue || '[]',
} }
getAttrValue(fuseAttrList, painPoint.value, '场景痛点'); painPoint.value = getAttrValue(fuseAttrList, '场景痛点')
getAttrValue(fuseAttrList, solution.value, '解决方案'); solution.value = getAttrValue(fuseAttrList, '解决方案')
getAttrValue(fuseAttrList, step.value, '使用步骤'); step.value = getAttrValue(fuseAttrList, '使用步骤')
bgImg.value = bgImg.value =
fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || '' fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
let areaObj = { let areaObj = {
@ -310,10 +362,10 @@ const getIntegrationServicesDeatil = (id) => {
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
@ -327,36 +379,36 @@ function handleOpenUrl(type) {
'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>
.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;
@ -364,7 +416,7 @@ onBeforeUnmount(() => {
left: 0; left: 0;
} }
.fixed2>div:nth-of-type(3) { .fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
@ -402,9 +454,9 @@ onBeforeUnmount(() => {
} }
} }
} }
} }
.use-way { .use-way {
padding: 0.8rem 0; padding: 0.8rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -447,9 +499,11 @@ onBeforeUnmount(() => {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: linear-gradient(to right, background: linear-gradient(
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;
@ -480,9 +534,9 @@ onBeforeUnmount(() => {
} }
} }
} }
} }
.pain-point { .pain-point {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -512,9 +566,9 @@ onBeforeUnmount(() => {
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);
@ -526,9 +580,9 @@ onBeforeUnmount(() => {
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);
@ -551,9 +605,9 @@ onBeforeUnmount(() => {
font-size: 14px; font-size: 14px;
} }
} }
} }
.ability { .ability {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -636,5 +690,5 @@ onBeforeUnmount(() => {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
} }
} }
</style> </style>