Skip to content

phsl / client

Go to a project
Commit 6eede051 by 赵月辉
Options

对接行业应用接口

parent 8f3cae70
Showing with 157 additions and 32 deletions
src/api/industry.js 0 → 100644
import request from '@/utils/request'
// 获取行业应用菜单
export function industryMenu (query) {
return request({
url: '/api/v1/industryMenu',
method: 'get',
params: query
})
}
// 获取行业应用详情
export function solutionDetail (query) {
return request({
url: '/api/v1/solutionDetail',
method: 'get',
params: query
})
}
src/layout/user-layout.vue
......@@ -5,7 +5,7 @@
<div class="logo flex-align-center" @click="$router.push('/index')">
<img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
<img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
<span class="logo-text">先进公共服务平台</span>
<span class="logo-text">先进计算公共服务平台</span>
</div>
<div class="menu">
......@@ -14,7 +14,7 @@
mode="horizontal"
style="--el-menu-horizontal-height:48px"
@select="menuSelect">
<el-sub-menu index="1">
<el-sub-menu index="computingResource">
<template #title>计算资源</template>
<el-menu-item
v-for="item in computilityMenuData"
......@@ -22,14 +22,35 @@
{{ item.name }}
</el-menu-item>
</el-sub-menu>
<el-menu-item index="/industryApplications/detail">行业应用</el-menu-item>
<el-sub-menu index="industryApplications">
<template #title>行业应用</template>
<el-sub-menu v-for="item in industryMenuData" :index="'one'+item.value">
<template #title>{{ item.name }}</template>
<el-sub-menu v-for="twoLevel in item.child" :index="item.name+'twoLevel'+twoLevel.value">
<template #title>{{ twoLevel.name }}</template>
<el-menu-item
v-for="threeLevel in twoLevel.child"
:index="'/industryApplications/detail?id=' + threeLevel.id">
<div style="width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{ threeLevel.titleIndustry }}
</div>
</el-menu-item>
</el-sub-menu>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="/componentServices/componentServicesList">组件服务</el-menu-item>
<el-menu-item index="/partnership/partnershipList">合作伙伴</el-menu-item>
</el-menu>
</div>
<div class="right-menu">
<el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
<!-- {{ userStore.id}}-->
<div v-if="userStore.id" class="avatar-wrapper flex-align-center">
<router-link to="/console/overview" class="console">控制台</router-link>
<img :src="userStore.avatar" class="user-avatar"/>
<div class="user-name">{{ userStore.name }}</div>
</div>
<el-button v-else type="primary" @click="$router.push('/login')">登录/注册</el-button>
</div>
</div>
</div>
......@@ -42,7 +63,10 @@ import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppMain from '@/layout/components/AppMain.vue'
import { computilityMenu } from '@/api/computingResource.js'
import { industryMenu } from '@/api/industry.js'
import useUserStore from '@/store/modules/user.js'
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
......@@ -51,15 +75,20 @@ const activeMenu = computed(() => {
if (meta.activeMenu) {
return meta.activeMenu
}
const titleList = ['计算资源']
console.log(path)
console.log(fullPath)
const titleList = ['计算资源', '行业应用']
return titleList.includes(meta.title) ? fullPath : path
})
function menuSelect (val) {
function menuSelect (val, indexPath, item) {
router.push(val)
console.log(val)
console.log(indexPath)
}
const computilityMenuData = ref([])
const industryMenuData = ref([])
function getComputilityMenu () {
computilityMenu().then(res => {
......@@ -67,7 +96,15 @@ function getComputilityMenu () {
})
}
function getIndustryMenu () {
industryMenu().then(res => {
console.log(res.data)
industryMenuData.value = res.data
})
}
getComputilityMenu()
getIndustryMenu()
</script>
<style lang="scss" scoped>
......@@ -135,9 +172,9 @@ getComputilityMenu()
}
.el-sub-menu__title, .el-menu-item {
font-weight: 400;
font-weight: 500;
font-size: 16px;
color: #626566;
color: #4e5051;
}
}
......@@ -146,6 +183,22 @@ getComputilityMenu()
border-radius: 2px;
font-size: 14px;
}
.avatar-wrapper {
.user-avatar {
width: 30px;
height: 30px;
background: #FFF3D3;
border-radius: 30px;
margin: 0 10px 0 32px;
}
.user-name, .console {
font-weight: 400;
font-size: 16px;
color: #303233;
}
}
}
.app-main {
......
src/views/industryApplications/detail.vue
......@@ -10,13 +10,20 @@
</div>
<div class="block-title">行业概述</div>
<div class="content">图文内容</div>
<div class="sub-title">{{ titleIndustry }}</div>
<div class="content">
<div class="html-content" v-html="industryInfo"></div>
</div>
<div class="block-title">解决方案</div>
<div class="content">图文内容</div>
<div class="sub-title">{{ titleSolution }}</div>
<div class="content">
<div class="html-content" v-html="solutionInfo"></div>
</div>
<div class="block-title">资讯流程</div>
<div class="block-title">咨询流程</div>
<div class="flex flex-justify-center information-process">
<div class="item">
......@@ -24,51 +31,77 @@
<img class="icon" src="@/assets/images/Information-process-1.png" alt="">
<div class="title">需求咨询</div>
<div class="desc">描述业务需求，提交需求咨询</div>
<el-button>立即资讯
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div>
<div class="item">
<div class="index">2</div>
<img class="icon" src="@/assets/images/Information-process-2.png" alt="">
<div class="title">初步沟通</div>
<div class="desc">需求答疑，对齐核心诉求，确定合作意向</div>
<el-button>立即资讯
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div>
<div class="item">
<div class="index">3</div>
<img class="icon" src="@/assets/images/Information-process-3.png" alt="">
<div class="title">方案交流</div>
<div class="desc">针对相关方案进行线上或线下的交流探讨</div>
<el-button>立即资讯
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div>
<div class="item">
<div class="index">4</div>
<img class="icon" src="@/assets/images/Information-process-4.png" alt="">
<div class="title">商业流程</div>
<div class="desc">方案确定后，开始执行商务流程</div>
<el-button>立即资讯
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div>
</div>
</div>
</template>
<script setup name="Detail">
import { solutionDetail } from '@/api/industry.js'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
const route = useRoute()
const industryInfo = ref('')
const titleIndustry = ref('')
const solutionInfo = ref('')
const titleSolution = ref('')
watch(() => route.query.id, val => {
if (val) {
getDetail()
}
})
function getDetail () {
solutionDetail({id: route.query.id}).then(res => {
industryInfo.value = res.data.industryInfo
titleIndustry.value = res.data.titleIndustry
solutionInfo.value = res.data.solutionInfo
titleSolution.value = res.data.titleSolution
})
}
getDetail()
</script>
<style scoped lang="scss">
......@@ -95,15 +128,35 @@
}
.block-title {
font-weight: 500;
font-weight: bold;
color: #303233;
font-size: 28px;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
}
.sub-title {
font-weight: 500;
font-size: 20px;
color: #575a5b;
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.content {
width: 1280px;
margin: 0 auto 30px auto;
text-align: center;
:deep(.html-content) {
img {
height: auto;
max-width: 100%;
}
}
}
.information-process {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment