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

赋能场景存储查询条件

This commit is contained in:
guoyue 2022-09-13 18:03:55 +08:00
parent 90a3aa8e37
commit 31a809f9d9
4 changed files with 603 additions and 652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
front/src/views/home/components/CanAssignCase.vue
View File

@ -1,19 +1,11 @@
<template> <template>
<div class="box"> <div class="box">
<div class="CanCase"> <div class="CanCase">
<div <div class="caseBox" v-for="(item, index) in caseList" :key="index" @click="toView(item)">
class="caseBox" <a-image :preview="false" :src="
v-for="(item, index) in caseList"
:key="index"
@click="toView(item)"
>
<a-image
:preview="false"
:src="
item.fuseAttrList.filter((val) => val.attrType == '服务图片')[0] item.fuseAttrList.filter((val) => val.attrType == '服务图片')[0]
.attrValue .attrValue
" " />
/>
<h3>{{ item.name }}</h3> <h3>{{ item.name }}</h3>
<p>发布时间 {{ item.updateDate }}</p> <p>发布时间 {{ item.updateDate }}</p>
</div> </div>
@ -21,45 +13,57 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue' import { ref, onMounted, onBeforeUnmount, watch, defineProps, defineEmits } from 'vue'
import { defineProps } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const props = defineProps({ const props = defineProps({
resourceList: { resourceList: {
type: Object, type: Object,
default: () => {}, default: () => { },
}, },
selectCardsname: { selectCardsname: {
type: String, type: String,
default: '组件服务', default: '组件服务',
}, },
}) })
const caseList = ref([]) const emits = defineEmits(['saveSearchCodition'])
onMounted(() => { const caseList = ref([])
onMounted(() => {
caseList.value = props.resourceList.data caseList.value = props.resourceList.data
console.log(caseList.value, 'caseList.value') console.log('caseList.value------------>', caseList.value);
}) })
onBeforeUnmount(() => {}) onBeforeUnmount(() => { })
function toView(item) { function toView(item) {
emits('saveSearchCodition', 1)
router.push({ router.push({
path: '/integrationServicesDetails', path: '/integrationServicesDetails',
query: { query: {
id: item.id, id: item.id,
}, },
}) })
}
watch(
() => props.resourceList.data,
(val) => {
if (val) {
caseList.value = val
} }
}
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.box { .box {
.CanCase { .CanCase {
margin-top: 0.2rem; margin-top: 0.2rem;
display: grid; display: grid;
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-columns: 33.33% 33.33% 33.33%;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
.caseBox { .caseBox {
width: 3.5rem; width: 3.5rem;
height: 3rem; height: 3rem;
@ -69,20 +73,23 @@
padding: 0.2rem; padding: 0.2rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
cursor: pointer; cursor: pointer;
img { img {
width: 3rem; width: 3rem;
height: 1.8rem; height: 1.8rem;
} }
h3 { h3 {
font-size: 0.18rem; font-size: 0.18rem;
font-weight: bold; font-weight: bold;
margin-top: 0.1rem; margin-top: 0.1rem;
} }
p { p {
font-size: 0.16rem; font-size: 0.16rem;
color: #797979; color: #797979;
} }
} }
} }
} }
</style> </style>

50
front/src/views/home/integrationServices.vue
View File

@ -26,7 +26,8 @@
:resourceList="resourceList" :resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition" :resourceList="resourceList" :resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition"
ref="searchResultListDom" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" /> ref="searchResultListDom" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
<CanAssignCase v-else v-show="resourceList.data && resourceList.data.length > 0" :resourceList="resourceList" <CanAssignCase v-else v-show="resourceList.data && resourceList.data.length > 0" :resourceList="resourceList"
:resourceTotal="resourceTotal" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" /> @saveSearchCodition="saveSearchCodition" :resourceTotal="resourceTotal"
:selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
<div class="pagination"> <div class="pagination">
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage" <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
@ -53,22 +54,11 @@ import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
export default defineComponent({ export default defineComponent({
beforeRouteEnter(to, from, next) {
console.log('to---integrationServices--beforeRouteEnter------->', to)
console.log('from---integrationServices--beforeRouteEnter------->', from)
console.log('next---integrationServices--beforeRouteEnter------->', next)
// 返回按钮，刷新页面，所以from.name为undefined
// if (from.name || from.name !== 'details') {
// console.log('清空------------>')
// localStorage.removeItem('DetailsPageconetent')
// }
next()
},
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
console.log('to---integrationServices--beforeRouteLeave------->', to) console.log('to---integrationServices--beforeRouteLeave------->', to)
console.log('from---integrationServices--beforeRouteLeave------->', from) console.log('from---integrationServices--beforeRouteLeave------->', from)
console.log('next---integrationServices--beforeRouteLeave------->', next) console.log('next---integrationServices--beforeRouteLeave------->', next)
if (to.name !== 'packagingDetails') { if (to.name !== 'packagingDetails' && to.name !== 'integrationServicesDetails') {
localStorage.removeItem('integrationServices') localStorage.removeItem('integrationServices')
} }
next() next()
@ -78,7 +68,7 @@ export default defineComponent({
const loading = ref(true) const loading = ref(true)
const currentPage = ref(1) const currentPage = ref(1)
const currentPageSize = ref(5) const currentPageSize = ref(5)
const pageSizeOptions = ref(['2','5', '10', '20', '50']) const pageSizeOptions = ref(['2', '5', '10', '20', '50'])
const router = useRouter() const router = useRouter()
const select = router.currentRoute.value.query.select const select = router.currentRoute.value.query.select
const searchValue = ref('') const searchValue = ref('')
@ -95,7 +85,6 @@ export default defineComponent({
name: '赋能场景', name: '赋能场景',
}, },
]) ])
const searchData = null;
const number = ref(0) const number = ref(0)
// 查询参数 // 查询参数
const paramsGetResources = { const paramsGetResources = {
@ -110,39 +99,35 @@ export default defineComponent({
const storageSearchInfo = JSON.parse(localStorage.getItem('integrationServices')) const storageSearchInfo = JSON.parse(localStorage.getItem('integrationServices'))
// 读取本地存储：表单赋值 // 读取本地存储：表单赋值
const handleSetSearchData = () => { const handleSetSearchData = () => {
console.log('storageSearchInfo------------>', storageSearchInfo)
if (storageSearchInfo) { if (storageSearchInfo) {
number.value = storageSearchInfo.type == '打包模式' ? 0 : 1;
// 搜索名称 // 搜索名称
searchValue.value = storageSearchInfo.name; searchValue.value = storageSearchInfo.name;
currentPage.value = storageSearchInfo.page; currentPage.value = storageSearchInfo.page;
currentPageSize.value = storageSearchInfo.limit; currentPageSize.value = storageSearchInfo.limit;
titleName.value[number.value].name = storageSearchInfo.type;;
paramsGetResources.limit = storageSearchInfo.limit; paramsGetResources.limit = storageSearchInfo.limit;
paramsGetResources.page = storageSearchInfo.page; paramsGetResources.page = storageSearchInfo.page;
paramsGetResources.type = storageSearchInfo.type; paramsGetResources.type = storageSearchInfo.type;
// 延迟使用，因为还没有返回跟挂载 // 延迟使用，因为还没有返回跟挂载
nextTick(() => { nextTick(() => {
searchResultListDom.value.changeCondition({ searchResultListDom.value && searchResultListDom.value.changeCondition && searchResultListDom.value.changeCondition({
value: storageSearchInfo.orderField, value: storageSearchInfo.orderField,
orderType: storageSearchInfo.orderType, orderType: storageSearchInfo.orderType,
}, true) }, true)
}) })
console.log('paramsGetResources------------>', paramsGetResources);
return;
getIntegrationList() getIntegrationList()
} }
} }
const changeCards = (val) => { const changeCards = (val) => {
console.log(val) // 打包模式
number.value = val number.value = val;
paramsGetResources.type = titleName.value[number.value].name;
resetAction() resetAction()
} }
// 查询 // 查询
const onSearch = () => { const onSearch = () => {
currentPage.value = 1 currentPage.value = 1
getIntegrationList() getIntegrationList()
} }
@ -168,9 +153,8 @@ export default defineComponent({
// 获取融合服务列表 // 获取融合服务列表
const getIntegrationList = () => { const getIntegrationList = () => {
loadingData.value = true loadingData.value = true
console.log('获取融合服务列表------------>')
paramsGetResources.name = searchValue.value; paramsGetResources.name = searchValue.value;
console.log('paramsGetResources------------>', paramsGetResources); console.log('paramsGetResources------参数下发------>', paramsGetResources);
getIntegrationServicesList(paramsGetResources).then( getIntegrationServicesList(paramsGetResources).then(
(res) => { (res) => {
loadingData.value = false loadingData.value = false
@ -194,13 +178,11 @@ export default defineComponent({
delete paramsGetResources.deptIds delete paramsGetResources.deptIds
} }
getIntegrationList() getIntegrationList()
console.log('paramsGetResources-----paramsGetResources------->', paramsGetResources);
}) })
mybus.on('changePage', (page) => { mybus.on('changePage', (page) => {
paramsGetResources.page = page paramsGetResources.page = page
console.log('paramsGetResources----changePage-------->', paramsGetResources); getIntegrationList()
getIntegrationList('分页查询')
}) })
mybus.on('changeSelcted', () => { mybus.on('changeSelcted', () => {
@ -213,19 +195,15 @@ export default defineComponent({
getIntegrationList() getIntegrationList()
}) })
mybus.on('changeCondition', (condition) => { mybus.on('changeCondition', (condition) => {
console.log('changeCondition------>', condition)
paramsGetResources.orderField = condition.orderField paramsGetResources.orderField = condition.orderField
paramsGetResources.orderType = condition.orderType paramsGetResources.orderType = condition.orderType
getIntegrationList() getIntegrationList()
}) })
const pageChange = (val) => { const pageChange = (val) => {
console.log('val-----pageChange------->', val);
currentPage.value = val currentPage.value = val
paramsGetResources.page = val paramsGetResources.page = val
getIntegrationList() //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法 getIntegrationList() //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
console.log('paramsGetResources----pageChange-------->', paramsGetResources);
} }
// 分页 // 分页
@ -238,8 +216,8 @@ export default defineComponent({
} }
// 存储查询条件到本地 // 存储查询条件到本地
const saveSearchCodition = () => { const saveSearchCodition = (n) => {
console.log('融合服务------------>', searchData); console.log('融合服务-----存储查询条件到本地------->', paramsGetResources);
localStorage.setItem( localStorage.setItem(
'integrationServices', 'integrationServices',
JSON.stringify(paramsGetResources) JSON.stringify(paramsGetResources)
@ -252,7 +230,6 @@ export default defineComponent({
} else { } else {
getIntegrationList() getIntegrationList()
} }
}) })
return { return {
@ -275,7 +252,6 @@ export default defineComponent({
onShowSizeChange, onShowSizeChange,
saveSearchCodition, saveSearchCodition,
searchResultListDom, searchResultListDom,
} }
}, },
components: { components: {

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

@ -2,21 +2,15 @@
<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>
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<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 }"> <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 <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>
@ -30,19 +24,16 @@
<DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle> <DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle>
</div> </div>
<div class="flex-row-center"> <div class="flex-row-center">
<div class="bg cjtd"><a-image :preview="false" :src="bgImg" /></div> <div class="bg cjtd">
<a-image :preview="false" :src="bgImg" />
</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>
@ -50,26 +41,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>
@ -81,48 +63,20 @@
<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 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> <div class="table-box">
<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" show-overflow-tooltip="true">
:data="item.list" </el-table-column>
stripe <el-table-column prop="dept" label="能力来源" align="center" width="300" show-overflow-tooltip="true">
:header-cell-style="{ 'text-align': 'center' }" </el-table-column>
> <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>
@ -136,12 +90,7 @@
</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 <el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></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>
@ -150,37 +99,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 { ref, onMounted, onBeforeUnmount } from 'vue' import detailBack from '@/views/home/detailBack.vue'
import { useRouter } from 'vue-router' import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getIntegrationDetail } from '@/api/home' import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import { getIntegrationDetail } from '@/api/home'
import { message } from 'ant-design-vue' import mybus from '@/myplugins/mybus'
const router = useRouter() import { message } from 'ant-design-vue'
const scrollTop = ref(0) const router = useRouter()
const domArr = ref([]) const scrollTop = ref(0)
const painPoint = ref([]) const domArr = ref([])
const solution = ref([]) const painPoint = ref([])
const step = ref([]) const solution = ref([])
const bgImg = ref('') const step = ref([])
const id = router.currentRoute.value.query.id const bgImg = ref('')
document.documentElement.style.transition = 'all 0.3s ease' const id = router.currentRoute.value.query.id
document.documentElement.scrollTop = 0 document.documentElement.style.transition = 'all 0.3s ease'
document.body.style.transition = 'all 0.3s ease' document.documentElement.scrollTop = 0
document.body.scrollTop = 0 document.body.style.transition = 'all 0.3s ease'
mybus.on('flyToView', (id) => { document.body.scrollTop = 0
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',
@ -197,11 +147,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: {
@ -216,9 +166,9 @@
providerMobile: '联系人电话', providerMobile: '联系人电话',
}, },
}, },
]) ])
const combineList = ref([ const combineList = ref([
{ {
title: '基础设施', title: '基础设施',
list: [], list: [],
@ -231,10 +181,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 =
@ -258,15 +208,23 @@
} }
} }
}) })
}) })
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 getIntegrationServicesDeatil = (id) => { let _obj = fuseAttrList.find((v) => v.attrType === text) || {};
data =
JSON.parse(
_obj.attrValue || '[]'
) || []
}
// 融合服务--详情
const getIntegrationServicesDeatil = (id) => {
getIntegrationDetail(id).then( getIntegrationDetail(id).then(
(res) => { (res) => {
if (res.data.code !== 0) { if (res.data.code !== 0) {
@ -283,18 +241,9 @@
attrType: '常见问题', attrType: '常见问题',
attrValue: questionValue.attrValue || '[]', attrValue: questionValue.attrValue || '[]',
} }
painPoint.value = getAttrValue(fuseAttrList, painPoint.value, '场景痛点');
JSON.parse( getAttrValue(fuseAttrList, solution.value, '解决方案');
fuseAttrList.find((v) => v.attrType === '场景痛点').attrValue getAttrValue(fuseAttrList, step.value, '使用步骤');
) || []
solution.value =
JSON.parse(
fuseAttrList.find((v) => v.attrType === '解决方案').attrValue
) || []
step.value =
JSON.parse(
fuseAttrList.find((v) => v.attrType === '使用步骤').attrValue
) || []
bgImg.value = bgImg.value =
fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || '' fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
let areaObj = { let areaObj = {
@ -361,10 +310,10 @@
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
@ -378,36 +327,36 @@
'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;
@ -415,7 +364,7 @@
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) { .fixed2>div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
@ -453,9 +402,9 @@
} }
} }
} }
} }
.use-way { .use-way {
padding: 0.8rem 0; padding: 0.8rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -498,11 +447,9 @@
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;
@ -533,11 +480,12 @@
} }
} }
} }
} }
.pain-point { .pain-point {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
.bg { .bg {
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
@ -545,58 +493,67 @@
// background-size: 100%; // background-size: 100%;
margin-top: 0.3rem; margin-top: 0.3rem;
} }
.cjtd { .cjtd {
width: 5.75rem; width: 5.75rem;
height: 3.4rem; height: 3.4rem;
background: url('~@/assets/home/fn/cjtd.png') no-repeat; background: url('~@/assets/home/fn/cjtd.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.content { .content {
overflow: auto; overflow: auto;
height: 3rem; height: 3rem;
width: 7rem; width: 7rem;
margin-top: 0.3rem; margin-top: 0.3rem;
.content-item { .content-item {
font-size: 16px; font-size: 16px;
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);
.content { .content {
width: 11rem; width: 11rem;
.content-item { .content-item {
font-size: 16px; font-size: 16px;
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);
.step-content { .step-content {
margin: 0.3rem 4.5rem; margin: 0.3rem 4.5rem;
padding: 0.3rem; padding: 0.3rem;
background: #fff; background: #fff;
:deep(.el-step__description.is-finish) { :deep(.el-step__description.is-finish) {
color: #333; color: #333;
line-height: 0.24rem; line-height: 0.24rem;
margin-top: 0.05rem; margin-top: 0.05rem;
} }
/deep/ .el-step__title { /deep/ .el-step__title {
font-size: 18px; font-size: 18px;
} }
/deep/ .el-step__description { /deep/ .el-step__description {
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);
@ -608,38 +565,49 @@
margin-top: 0.3rem; margin-top: 0.3rem;
align-items: flex-start; align-items: flex-start;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
margin: 0.2rem 4rem 0; margin: 0.2rem 3.5rem 0;
padding: 0.2rem 0; padding: 0.2rem 0;
.title { .title {
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
margin-right: 0.5rem; margin-right: 0.4rem;
background: url('~@/assets/home/rhfw_square.png') no-repeat; background: url('~@/assets/home/rhfw_square.png') no-repeat;
background-size: 100%; background-size: 100% 100%;
} }
.title0 { .title0 {
width: 5.6rem; width: 5.6rem;
height: 3.45rem; height: 3.45rem;
background: url('~@/assets/home/fn/jcss.png') no-repeat; background: url('~@/assets/home/fn/jcss.png') no-repeat;
background-size: 100%; background-size: 100% 100%;
} }
.title1 { .title1 {
width: 5.6rem; width: 5.6rem;
height: 3.45rem; height: 3.45rem;
background: url('~@/assets/home/fn/zjfw.png') no-repeat; background: url('~@/assets/home/fn/zjfw.png') no-repeat;
background-size: 100%; background-size: 100% 100%;
} }
.title2 { .title2 {
width: 5.6rem; width: 5.6rem;
height: 3.45rem; height: 3.45rem;
background: url('~@/assets/home/fn/sjzy.png') no-repeat; background: url('~@/assets/home/fn/sjzy.png') no-repeat;
background-size: 100%; background-size: 100% 100%;
} }
.table-box {
height: 3.45rem;
flex: 1;
overflow-y: auto;
}
.table { .table {
width: 100%; // width: 100%;
font-size: 16px; font-size: 16px;
} }
} }
.name-box { .name-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -668,5 +636,5 @@
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
} }
} }
</style> </style>

2
front/src/views/instructionManual/components/abilityDocTree.vue
View File

@ -26,7 +26,7 @@ import {
ref, ref,
watch, watch,
defineProps, defineProps,
nextTick, defineEmits,
} from 'vue' } from 'vue'
import { getDevelopDocTree } from '@/api/home' import { getDevelopDocTree } from '@/api/home'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'