<template>
|
<el-container class="main-layout" >
|
<!-- 左侧菜单 -->
|
<el-aside width="250px" class="bg-white border-right border-light flex flex-column">
|
<h5 class="text-lg font-semibold px-4 py-3 border-bottom border-light">所有产品</h5>
|
|
<el-scrollbar class="flex-grow-1 overflow-auto">
|
<el-menu :default-active="activeIndex" class="border-0" @select="handleSelect" @open="handleOpen" @close="handleClose">
|
<template v-for="item in menuItems" :key="item.index">
|
<el-sub-menu v-if="item.subMenu" :index="item.index">
|
<template #title>
|
<img v-if="item.icon && isUrl(item.icon)" :src="item.icon" class="w-5 h-5 rounded-circle mr-2" />
|
<el-icon v-else class="mr-2">
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item v-for="subItem in item.subMenu" :key="subItem.index" :index="subItem.index" @click="handleSelectSubmenu(subItem)">
|
{{ subItem.title }}
|
</el-menu-item>
|
</el-menu-item-group>
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="item.index">
|
<el-icon class="mr-2">
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</el-scrollbar>
|
</el-aside>
|
|
<!-- 右侧内容 -->
|
<el-main style="padding: 0px;" class="bg-light overflow-auto">
|
<div class="h-100 d-flex flex-column box-border">
|
<div class="border-bottom border-light p-3 text-center">
|
<template v-if="pdfUrl">
|
<h1 class="text-3xl font-weight-bold mb-2 cursor-pointer text-dark" @click="openPdf">
|
{{ title }}
|
</h1>
|
<div class="d-flex justify-content-center align-items-center">
|
<PdfViewer :src="pdfUrl" :scale="1.0" :key="pdfUrl" class="w-100" />
|
</div>
|
</template>
|
|
<template v-else>
|
<h1 class="text-3xl font-weight-bold mb-6 text-dark">云游四方操作系统</h1>
|
<div class="row row-cols-1 row-cols-md-5 justify-content-center">
|
<div class="col mb-4">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景.png" alt="图1" class="img-fluid rounded-lg" />
|
</div>
|
<div class="col mb-4">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景2.png" alt="图2" class="img-fluid rounded-lg" />
|
</div>
|
<div class="col mb-4">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景图3.jpg" alt="图3" class="img-fluid rounded-lg" />
|
</div>
|
</div>
|
</template>
|
</div>
|
|
<!-- 推荐产品区 -->
|
<div class="flex-grow-1 overflow-auto">
|
<h5 class="h5 font-weight-semibold mb-1 ml-2">推荐产品</h5>
|
<div class="row row-cols-1 row-cols-md-5 g-4 ml-2">
|
<el-card v-for="(item, index) in products" :key="index" class="rounded-lg shadow-sm hover:shadow-lg transition-shadow">
|
<img :src="item.imgUrl" class="w-100 h-20 object-cover" />
|
<div class="text-center mt-2">
|
<p class="text-sm text-dark">{{ item.title }}</p>
|
<el-tooltip placement="top" effect="dark">
|
<template #content>
|
<p class="text-sm mt-2" v-html="item.desc"></p>
|
</template>
|
<p class="text-sm text-muted mt-2" v-html="item.desc"></p>
|
</el-tooltip>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</template>
|
<script lang="ts" setup>
|
import { ref } from 'vue'
|
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
|
import { MenuItem, Products, ProductCenter } from '@/models/portalModels';
|
import PdfViewer from '@/components/pdf/PdfViewer.vue'
|
|
const title = ref('')
|
const pdfUrl = ref('')
|
const curSubItem = ref<MenuItem>({} as MenuItem)
|
|
const activeIndex = ref('')
|
|
const menuItems: MenuItem[] = [
|
{
|
index: '1',
|
title: '工业信息化',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: "https://portal2.tos-cn-beijing.volces.com/portal/product-center/menu-icon/bi.svg",
|
subMenu: [
|
{
|
index: '1-1',
|
title: 'LIMS实验室管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/实验室管理系统.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/实验室管理系统.pdf',
|
},
|
{
|
index: '1-2',
|
title: 'TQS企业培训系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/TQS系统.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/企业培训系统.pdf',
|
},
|
{
|
index: '1-3',
|
title: 'CPTM企业能力管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/CPTM.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/企业人员技能培训系统.pdf',
|
},
|
{
|
index: '1-4',
|
title: 'JIT生产管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/JIT.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/生产管理系统.pdf',
|
},
|
],
|
},
|
{
|
index: '2',
|
title: 'SaaS平台',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: "https://portal2.tos-cn-beijing.volces.com/portal/product-center/menu-icon/SAAS.svg",
|
subMenu: [
|
{
|
index: '2-1',
|
title: 'ESMMS外部供应商管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/外部供应商管理系统.pdf',
|
},
|
{
|
index: '2-2',
|
title: 'S2B2B商城系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/S2B2B.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/S2B2B商城系统.pdf',
|
},
|
],
|
},
|
{
|
index: '3',
|
title: 'C端',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: "https://portal2.tos-cn-beijing.volces.com/portal/product-center/menu-icon/C.svg",
|
subMenu: [
|
],
|
},
|
];
|
|
const products = ref<Products[]>([
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png', title: 'ESMMS外部供应商管理系统', desc: '实现数据共享与订单自动化处理<br/>集成用户/工单管理模块，支持移动扫码追踪生产' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/S2B2B.png', title: 'S2B2B商城系统', desc: '通过数字化整合上下游资源<br/>打通多级分销信息壁垒，助力供应商增效增收。' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/实验室管理系统.png', title: 'LIMS实验室管理系统', desc: '聚焦汽车零部件质检行业<br/>实现委托单全流程数字化、设备智能管控、质检数据一体化管理及多级权限控制，提质增效' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/TQS系统.png', title: 'TQS系统', desc: '解决制造业、汽车业培训痛点。它涵盖多个模块，具备人员信息管理、培训管理、岗位技能培训管理等功能，能实现培训数字...' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '破信息壁垒，实现数据共享，自动化处理订单，增强沟通与生产跟踪。系统具备多模块功能，涵盖用户、订单、工单等管理，支持移动端扫码记录工时...' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/JIT.png', title: 'JIT', desc: '面向工业领域的生产管理系统，旨在减少库存和浪费、提升生产效率。它针对数据出错、库存积压等行业痛点，提供数字化管理、自动化检测等解决方案。系统具备物料管理、工艺路线管理等多种功能，实现生产全过程管控与高效运营' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/CPTM.png', title: 'CPTM', desc: '优化人力开发流程，助力企业发展。它解决了企业培训管理缺乏系统化、报考流程效率低等问题，具备集成平台管理、自动化流程、技能评估等功能，涵盖培训管理、人员信息管理等模块，推动员工和团队能力提升。' },
|
|
])
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath);
|
};
|
|
const handleClose = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath);
|
};
|
|
const handleSelectSubmenu = (item: MenuItem) => {
|
curImg.value = item.imgUrl
|
curSubItem.value = item
|
activeIndex.value = item.index
|
console.log(item)
|
showPdf(item)
|
};
|
|
const handleSelect = (index: String) => {
|
// curImg.value = item.imgUrl
|
// curSubItem.value = item
|
// activeIndex.value = item.index
|
// console.log(item)
|
// showPdf(item.pdfUrl)
|
};
|
|
const curImg = ref('https://portal2.tos-cn-beijing.volces.com/portal/bg.png');
|
|
|
const showPdf = (item: MenuItem) => {
|
console.log("MenuItem", item)
|
// 转换 MenuItem -> ProductCenter
|
const product: ProductCenter = {
|
url: item.pdfUrl,
|
name: item.title,
|
desc: item.index
|
}
|
pdfUrl.value = item.pdfUrl
|
title.value = item.title
|
// sessionStorage.setItem('pdfItem', JSON.stringify(product))
|
// window.open('/pdf-preview', '_blank')
|
}
|
|
const openPdf = () => {
|
// 转换 MenuItem -> ProductCenter
|
const product: ProductCenter = {
|
url: curSubItem.value.pdfUrl,
|
name: curSubItem.value.title,
|
desc: curSubItem.value.index
|
}
|
|
sessionStorage.setItem('pdfItem', JSON.stringify(product))
|
window.open('/pdf-preview', '_blank')
|
}
|
const isUrl = (url: string): boolean => {
|
return /^https?:\/\//.test(url)
|
}
|
|
</script>
|
|
<style>
|
/* .el-menu .el-menu-item.is-active {
|
font-weight: bold;
|
color: #ffd04b;
|
} */
|
.el-main {
|
--el-main-padding: 0px;
|
box-sizing: border-box;
|
display: block;
|
flex: 1;
|
flex-basis: auto;
|
overflow: auto;
|
padding: var(--el-main-padding);
|
}
|
</style>
|
|
