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

技术文档 优化

This commit is contained in:
guoyue 2022-08-03 12:58:51 +08:00
parent 1959ac68f9
commit dee93f83b9
7 changed files with 275 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/src/assets/menu/jcss.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
front/src/assets/menu/sevice-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
front/src/assets/menu/sjzy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
front/src/assets/menu/yyzy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
front/src/assets/menu/zjfw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

271
front/src/views/instructionManual/components/menuBook.vue
View File

@ -9,7 +9,10 @@
</div>
<div class="list-box">
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
<div class="item-name">{{ item.name }}</div>
<div class="item-name">
<div class="icon-name" :style="{ 'background-image': `url(${item.imgIcon || ''})` }"></div>
{{ item.name }}
</div>
<div class="name-box">
<div class="item-v" v-for="(v, j) in item.list" :key="j">{{ v }}</div>
</div>
@ -17,7 +20,6 @@
</div>
</div>
</div>
<!-- imgList -->
<div class="img-box" v-for="(item, i) in imgList" :key="i">
<div class="title">
<div class="text">{{ item.name }}</div>
@ -25,49 +27,101 @@
</div>
<div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
</div>
<div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
<div v-if="item.btnText" class="btn" @click="item.btnAction && item.btnAction()">{{ item.btnText }} >>
</div>
</div>
</div>
<a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class="
abilityToTypeFunctionData == item
? 'ability-to-type-down'
: ''
">
{{ item }}
</div>
</div>
</div>
<div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'">
<div class="title">组件类型选择</div>
<div class="component-type-content">
<a-radio-group v-model:value="componentTypeValue">
<a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item"
:value="item">
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const seviceList = ref(
[
{
name: '组件服务',
imgIcon: require('../../../assets/menu/zjfw.png'),
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
},
{
name: '应用资源',
imgIcon: require('../../../assets/menu/yyzy.png'),
list: ['办公系统', '业务系统', '门户网站', '大屏看板', '小程序', '公众号'],
},
{
name: '组件服务',
name: '基础设施',
imgIcon: require('../../../assets/menu/jcss.png'),
list: ['视频资源', '云资源', '感知资源'],
},
{
name: '组件服务',
name: '数据资源',
imgIcon: require('../../../assets/menu/sjzy.png'),
list: ['政务信息资源'],
},
]
)
const imgList = ref([
{
name: '总体流程',
bgImg: require('../../../assets/menu/process.png'),
className: 'process-img',
},
{
name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'),
btnText: '立即上架',
className: 'shelves-img'
className: 'shelves-img',
btnAction: () => {
showModal()
}
},
{
name: '能力申请',
bgImg: require('../../../assets/menu/apply.png'),
btnText: '立即申请',
className: 'apply-img'
className: 'apply-img',
btnAction: () => {
const newpage = router.resolve({
path: '/addApplication', // 跳转的页面路由
})
window.open(newpage.href, '_blank')
},
},
{
name: '需求发布',
@ -83,6 +137,75 @@ const imgList = ref([
},
])
//能力上架弹窗
function handlecancel() {
abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = ''
}
let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) {
abilityToTypeFunctionData.value = item
}
let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([
'智能算法',
'图层服务',
'开发组件',
// '办公组件',
'业务组件',
// '其他',
])
const visible = ref(false)
const showModal = () => {
visible.value = true
}
let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) {
if (componentTypeValueOld.value != item) {
componentTypeValue.value = item
componentTypeValueOld.value = item
} else {
componentTypeValue.value = ''
}
}
let componentTypeValue = ref('')
const handleOk = (e) => {
let snum = ref({})
if (abilityToTypeFunctionData.value == '组件服务') {
if (!componentTypeValue.value || componentTypeValue.value == '') {
message.error('请选择组件类型！')
return
} else if (
componentTypeValue.value === '智能算法' ||
componentTypeValue.value === '开发组件' ||
componentTypeValue.value === '业务组件' ||
componentTypeValue.value === '图层服务'
) {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
componentTypeValue: componentTypeValue.value,
}
} else {
message.error('功能开发中！')
return
}
} else {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
}
}
const applypage = router.resolve({
path: '/nenglishangjia', // 跳转的页面路由
query: snum.value,
})
window.open(applypage.href, '_blank')
visible.value = false
abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = ''
console.log(e)
}
</script>
@ -93,7 +216,7 @@ const imgList = ref([
}
.title {
margin-bottom: 20px;
margin-bottom: 35px;
.text {
padding: 20px 0;
@ -152,6 +275,8 @@ const imgList = ref([
height: 350px;
margin: 0 auto;
}
}
.img-bg {
@ -161,31 +286,26 @@ const imgList = ref([
.process-img {
height: 855px;
background-image: url('../../../assets/menu/process.png');
}
.shelves-img {
height: 497px;
width: 1107px;
margin: 0 auto;
background-image: url('../../../assets/menu/shelves.png');
}
.apply-img {
height: 752px;
background-image: url('../../../assets/menu/apply.png');
}
.demand-img {
height: 525px;
width: 1300px;
margin: 0 auto;
background-image: url('../../../assets/menu/demand.png');
}
.down-img {
height: 544px;
background-image: url('../../../assets/menu/down.png');
}
.list-box {
@ -209,6 +329,9 @@ const imgList = ref([
font-size: 20px;
text-align: center;
padding: 20px 0 10px 0;
display: flex;
align-items: center;
justify-content: center;
}
.name-box {
@ -218,17 +341,135 @@ const imgList = ref([
flex-wrap: wrap;
}
.icon-name {
width: 30px;
height: 30px;
background-size: 100% 100%;
margin-right: 4px;
}
.item-v {
min-width: 100px;
color: #fff;
font-size: 20px;
text-align: center;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 6px;
background: rgba(255, 255, 255, 0.2);
margin: 0 16px 20px 16px;
background: url('../../../assets/menu/sevice-bg.png');
background-size: 100% 100%;
}
}
}
</style>
<style lang="less" scoped>
.shangjia-class {
position: fixed;
left: 50%;
top: 50%;
margin-left: -2.6rem;
margin-top: -1.44rem;
font-size: 0.14rem;
font-weight: 500;
.ant-radio-inner {
height: 0.16rem;
width: 0.16rem;
}
.ant-radio-inner::after {
background-color: unset;
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
background-size: cover;
background-position: center;
}
.ant-modal-content {
border-radius: 0.1rem;
.ability-to-type,
.component-type {
display: flex;
margin-top: 0.2rem;
.title {
white-space: nowrap;
margin-right: 0.2rem;
display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
.ability-to-type {
.ability-to-type-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
.ability-to-type-down {
background: #0087ff;
color: #fff;
}
}
}
}
.ant-modal-title {
display: flex;
align-items: center;
}
.ant-modal-footer {
border: 0;
text-align: center;
padding-bottom: 0.2rem;
button {
margin-right: 0.2rem;
border-radius: 0.08rem;
}
}
.showBg {
height: 0.24rem;
width: 0.24rem;
background: url('~@/assets/home/shenqing.png') no-repeat;
background-size: cover;
background-position: center;
margin-right: 0.1rem;
}
}
</style>

19
front/src/views/instructionManual/index.vue
View File

@ -1,7 +1,6 @@
<template>
<home-header></home-header>
<div class="menu-container">
<div class="menu-box">
<div id="container" class="content-menu">
<div class="left">
<div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
@ -21,8 +20,6 @@
</div>
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
</div>
</div>
<!-- <home-footer></home-footer> -->
</template>
<script setup>
@ -133,7 +130,6 @@ onMounted(() => {
<style scoped lang="less">
.menu-box {
// overflow: hidden;
height: 100%;
}
@ -153,6 +149,8 @@ onMounted(() => {
.menu-container {
width: 100%;
padding-top: 0.74rem;
min-height: 1000px;
position: relative;
}
.content-menu {
@ -161,12 +159,6 @@ onMounted(() => {
justify-content: flex-start;
margin: 0 auto;
box-sizing: border-box;
// position: fixed;
// left: 50%;
// bottom: 0;
// transform: translateX(-50%);
// top: 0.6rem;
// top: 0;
}
.left {
@ -175,13 +167,13 @@ onMounted(() => {
margin-right: 20px;
background: rgba(244, 245, 248, 1);
overflow-y: scroll;
position: fixed;
position: absolute;
top: 200px;
left: 90px;
left: 85px;
}
.right {
width: 1300px;
width: 1400px;
height: calc(100% - 20px);
position: absolute;
top: 10px;
@ -226,5 +218,4 @@ onMounted(() => {
height: 100%;
position: relative;
}
</style>