williamet/cas_tt_cloud_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

演示提交

Browse Source
This commit is contained in:
熊丽君
2022-02-16 08:54:56 +08:00
parent d6684a154b
commit 43023de455
33 changed files with 2417 additions and 1633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.production
View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = xxx管理系统
VITE_APP_ENV = 'production' VITE_APP_ENV = 'production'
# xxx管理系统/生产环境 # xxx管理系统/生产环境
VITE_APP_BASE_API = '/prod-api' VITE_APP_BASE_API = '/api'
# 是否在打包时开启压缩，支持 gzip 和 brotli # 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip,brotli VITE_BUILD_COMPRESS = gzip,brotli

2
src/api/login.js
View File

@ -33,7 +33,7 @@ export function register(data) {
// 获取用户详细信息 // 获取用户详细信息
export function getInfo() { export function getInfo() {
return request({ return request({
url: '/getInfo', url: '/enterprise/v1/user/info',
method: 'get' method: 'get'
}) })
} }

BIN
src/assets/images/profile.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

42
src/components/Breadcrumb/index.vue
View File

@ -1,8 +1,12 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span> <span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect"
>{{ item.meta.title }}</span
>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
@ -12,42 +16,44 @@
<script setup> <script setup>
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const levelList = ref([]) const levelList = ref([]);
function getBreadcrumb() { function getBreadcrumb() {
// only show routes with meta.title // only show routes with meta.title
let matched = route.matched.filter(item => item.meta && item.meta.title); let matched = route.matched.filter((item) => item.meta && item.meta.title);
const first = matched[0] const first = matched[0];
// 判断是否为首页 // 判断是否为首页
if (!isDashboard(first)) { if (!isDashboard(first)) {
matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched) matched = [{ path: "/admin", meta: { title: "首页" } }].concat(matched);
} }
levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) levelList.value = matched.filter(
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
);
} }
function isDashboard(route) { function isDashboard(route) {
const name = route && route.name const name = route && route.name;
if (!name) { if (!name) {
return false return false;
} }
return name.trim() === 'Index' return name.trim() === "Index";
} }
function handleLink(item) { function handleLink(item) {
const { redirect, path } = item const { redirect, path } = item;
if (redirect) { if (redirect) {
router.push(redirect) router.push(redirect);
return return;
} }
router.push(path) router.push(path);
} }
watchEffect(() => { watchEffect(() => {
// if you go to the redirect page, do not update the breadcrumbs // if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) { if (route.path.startsWith("/redirect/")) {
return return;
} }
getBreadcrumb() getBreadcrumb();
}) });
getBreadcrumb(); getBreadcrumb();
</script> </script>

78
src/components/webFooter/index.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div class="webFooter"> <div class="webFooter">
<div class="wrap"> <div class="wrap">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<div class="tit">解决方案</div> <div class="tit">解决方案</div>
<p><a href="">大型企业服务</a></p> <p><a href="">大型企业服务</a></p>
<p><a href="">科研院所服务</a></p> <p><a href="">科研院所服务</a></p>
<p><a href="">政府区域服务</a></p> <p><a href="">政府区域服务</a></p>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<div class="tit">创新服务</div> <div class="tit">创新服务</div>
<p><a href="">科技快报</a></p> <p><a href="">科技快报</a></p>
<p><a href="">海外人才推荐</a></p> <p><a href="">海外人才推荐</a></p>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="tit">联系我们</div> <div class="tit">联系我们</div>
<p><a href="">客服电话：400-666-8888</a></p> <p><a href="">客服电话：400-666-8888</a></p>
<p><a href="">邮箱：zhongkeyun@163.cn</a></p> <p><a href="">邮箱：zhongkeyun@163.cn</a></p>
<p><a href="">地址：安徽省合肥市科大讯飞大楼</a></p> <p><a href="">地址：安徽省合肥市科大讯飞大楼</a></p>
</el-col> </el-col>
<el-col :span="4" style="text-align: center;"> <!-- <el-col :span="4" style="text-align: center;">
<div class="tit">二维码</div> <div class="tit">二维码</div>
<p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p> <p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p>
</el-col> </el-col>
<el-col :span="4" style="text-align: center;"> <el-col :span="4" style="text-align: center;">
<div class="tit">二维码</div> <div class="tit">二维码</div>
<p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p> <p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p>
</el-col> </el-col> -->
</el-row> </el-row>
</div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -38,26 +38,26 @@ import { onMounted, reactive, watch } from "vue";
<style lang="scss" scoped> <style lang="scss" scoped>
.webFooter { .webFooter {
background: #DEE9FF; background: #dee9ff;
} }
.wrap { .wrap {
width: 1000px; width: 1000px;
margin: 0 auto; margin: 0 auto;
padding: 100px 0; padding: 100px 0;
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
.tit {
font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
.tit { }
font-size: 16px; .qrcode {
font-family: Source Han Sans CN; width: 88px;
font-weight: 500; height: 88px;
color: #333333; }
}
.qrcode {
width: 88px;
height: 88px;
}
} }
</style> </style>

77
src/layout/components/Navbar.vue
View File

@ -1,20 +1,25 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" /> id="hamburger-container"
<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" /> :is-active="getters.sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
v-if="!$store.state.settings.topNav"
/>
<top-nav
id="topmenu-container"
class="topmenu-container"
v-if="$store.state.settings.topNav"
/>
<div class="right-menu"> <div class="right-menu">
<template v-if="getters.device !== 'mobile'"> <template v-if="getters.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" /> <!-- <header-search id="header-search" class="right-menu-item" /> -->
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
@ -30,12 +35,10 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<router-link to="/user/profile"> <!-- /user/profile -->
<router-link to="">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item @click="setLayout">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided @click="logout"> <el-dropdown-item divided @click="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>
@ -48,38 +51,40 @@
</template> </template>
<script setup> <script setup>
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from "element-plus";
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from "@/components/Breadcrumb";
import TopNav from '@/components/TopNav' import TopNav from "@/components/TopNav";
import Hamburger from '@/components/Hamburger' import Hamburger from "@/components/Hamburger";
import Screenfull from '@/components/Screenfull' import Screenfull from "@/components/Screenfull";
import SizeSelect from '@/components/SizeSelect' import SizeSelect from "@/components/SizeSelect";
import HeaderSearch from '@/components/HeaderSearch' import HeaderSearch from "@/components/HeaderSearch";
import RuoYiGit from '@/components/RuoYi/Git' import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from '@/components/RuoYi/Doc' import RuoYiDoc from "@/components/RuoYi/Doc";
const store = useStore(); const store = useStore();
const getters = computed(() => store.getters); const getters = computed(() => store.getters);
function toggleSideBar() { function toggleSideBar() {
store.dispatch('app/toggleSideBar') store.dispatch("app/toggleSideBar");
} }
function logout() { function logout() {
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', { ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
store.dispatch('LogOut').then(() => { .then(() => {
location.href = '/index'; store.dispatch("LogOut").then(() => {
location.href = "/";
});
}) })
}).catch(() => { }); .catch(() => {});
} }
const emits = defineEmits(['setLayout']) const emits = defineEmits(["setLayout"]);
function setLayout() { function setLayout() {
emits('setLayout'); emits("setLayout");
} }
</script> </script>

33
src/layout/components/Sidebar/index.vue
View File

@ -1,12 +1,28 @@
<template> <template>
<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div
:class="{ 'has-logo': showLogo }"
:style="{
backgroundColor:
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground,
}"
>
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :background-color="
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground
"
:text-color="
sideTheme === 'theme-dark'
? variables.menuColor
: variables.menuLightColor
"
:unique-opened="true" :unique-opened="true"
:active-text-color="theme" :active-text-color="theme"
:collapse-transition="false" :collapse-transition="false"
@ -24,14 +40,14 @@
</template> </template>
<script setup> <script setup>
import Logo from './Logo' import Logo from "./Logo";
import SidebarItem from './SidebarItem' import SidebarItem from "./SidebarItem";
import variables from '@/assets/styles/variables.module.scss' import variables from "@/assets/styles/variables.module.scss";
const route = useRoute(); const route = useRoute();
const store = useStore(); const store = useStore();
const sidebarRouters = computed(() => store.getters.sidebarRouters); const sidebarRouters = computed(() => store.getters.sidebarRouters);
const showLogo = computed(() => store.state.settings.sidebarLogo); const showLogo = computed(() => store.state.settings.sidebarLogo);
const sideTheme = computed(() => store.state.settings.sideTheme); const sideTheme = computed(() => store.state.settings.sideTheme);
const theme = computed(() => store.state.settings.theme); const theme = computed(() => store.state.settings.theme);
@ -44,6 +60,5 @@ const activeMenu = computed(() => {
return meta.activeMenu; return meta.activeMenu;
} }
return path; return path;
}) });
</script> </script>

21
src/permission.js
View File

@ -25,17 +25,16 @@ router.beforeEach((to, from, next) => {
} else { } else {
if (store.getters.roles.length === 0) { if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息 // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => { store.dispatch('GetInfo').then((res) => {
next({ ...to, replace: true }) store.dispatch('GenerateRoutes',res.data.select_identity).then(accessRoutes => {
// store.dispatch('GenerateRoutes').then(accessRoutes => { // 根据roles权限生成可访问的路由表
// // 根据roles权限生成可访问的路由表 // accessRoutes.forEach(route => {
// accessRoutes.forEach(route => { // if (!isHttp(route.path)) {
// if (!isHttp(route.path)) { // router.addRoute(route) // 动态添加可访问路由表
// router.addRoute(route) // 动态添加可访问路由表 // }
// } // })
// }) next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
// next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 })
// })
}).catch(err => { }).catch(err => {
store.dispatch('LogOut').then(() => { store.dispatch('LogOut').then(() => {
ElMessage.error(err) ElMessage.error(err)

133
src/router/index.js
View File

@ -1,5 +1,6 @@
import { createWebHistory, createRouter } from 'vue-router' import { createWebHistory, createRouter } from 'vue-router'
import Layout from '@/layout' import Layout from '@/layout'
import ParentView from '@/components/ParentView'
/** /**
* Note: 路由配置项 * Note: 路由配置项
@ -27,6 +28,7 @@ export const constantRoutes = [
path: '/', path: '/',
name: 'Home', name: 'Home',
component: () => import('../views/websiteLayout.vue'), component: () => import('../views/websiteLayout.vue'),
hidden:true,
children: [ children: [
{ {
path: 'login', path: 'login',
@ -126,6 +128,7 @@ export const constantRoutes = [
{ {
path: '/identity', path: '/identity',
component: () => import('@/views/identity/layout'), component: () => import('@/views/identity/layout'),
hidden:true,
children:[ children:[
{ {
path:'index', path:'index',
@ -166,44 +169,19 @@ export const constantRoutes = [
] ]
}, },
{ {
path: '/one', path: '/admin',
component: Layout, component: Layout,
redirect: '/one/enterprise', redirect: '/admin/index',
children: [ children: [
{ {
path: 'enterprise', path: 'index',
component: () => import('@/views/admin/one/index'), component: () => import('@/views/admin/index'),
name: 'Enterprise', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'dashboard', affix: true },
} },
] ],
}, },
{
path: '/two',
component: Layout,
redirect: '/two/expert',
children: [
{
path: 'expert',
component: () => import('@/views/admin/two/index'),
name: 'Expert',
meta: { title: '首页', icon: 'dashboard', affix: true }
}
]
},
{
path: '/three',
component: Layout,
redirect: '/three/research',
children: [
{
path: 'research',
component: () => import('@/views/admin/three/index'),
name: 'Research',
meta: { title: '首页', icon: 'dashboard', affix: true }
}
]
},
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,
@ -285,6 +263,85 @@ export const constantRoutes = [
} }
]; ];
export const enterpriseRoutes = [
{
path: '/one',
component: Layout,
children: [
{
path: 'enterprise',
component: () => import('@/views/admin/one/index'),
name: 'Enterprise',
meta: { title: '账号管理', icon: 'dashboard' }
}
]
},
]
export const expertRoutes=[
{
path: '/account',
component: Layout,
meta: { title: '账号管理', icon: 'dashboard' },
alwaysShow:true,
redirect: 'noRedirect',
children: [
{
path: 'bill',
component: () => import('@/views/admin/two/account/bill'),
name: 'Bill',
meta: { title: '账单列表', icon: 'dashboard' }
}
]
},
// {
// path: '/technology',
// component: Layout,
// meta: { title: '技术管理', icon: 'dashboard' },
// alwaysShow:true,
// redirect: 'noRedirect',
// children: [
// {
// path: 'achievement',
// component: ParentView,
// meta: { title: '成果列表', icon: 'list' },
// alwaysShow:true,
// redirect: 'noRedirect',
// children:[
// {
// path: 'release',
// component: () => import('@/views/admin/two/technology/release'),
// name: 'release',
// meta: { title: '发布成果', icon: 'dashboard' }
// }
// ]
// },
// {
// path: 'research',
// component: () => import('@/views/admin/two/technology/research'),
// name: 'Research',
// meta: { title: '科研项目列表', icon: 'dashboard' }
// }
// ]
// },
]
export const researchRoutes=[
{
path: '/three',
component: Layout,
children: [
{
path: 'research',
component: () => import('@/views/admin/three/index'),
name: 'Research',
meta: { title: '菜单3', icon: 'dashboard' }
}
]
},
]
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: constantRoutes, routes: constantRoutes,

2
src/settings.js
View File

@ -20,7 +20,7 @@ export default {
/** /**
* 是否显示 tagsView * 是否显示 tagsView
*/ */
tagsView: true, tagsView: false,
/** /**
* 是否固定头部 * 是否固定头部

55
src/store/modules/permission.js
View File

@ -1,4 +1,4 @@
import { constantRoutes } from '@/router' import router,{ constantRoutes,enterpriseRoutes,expertRoutes,researchRoutes } from '@/router'
import { getRouters } from '@/api/menu' import { getRouters } from '@/api/menu'
import Layout from '@/layout/index' import Layout from '@/layout/index'
import ParentView from '@/components/ParentView' import ParentView from '@/components/ParentView'
@ -37,22 +37,47 @@ const permission = {
}, },
actions: { actions: {
// 生成路由 // 生成路由
GenerateRoutes({ commit }) { GenerateRoutes({ commit },role) {
return new Promise(resolve => { return new Promise(resolve => {
// 向后端请求路由数据 let data = []
getRouters().then(res => { if (role == 1) {
const sdata = JSON.parse(JSON.stringify(res.data)) // 企业
const rdata = JSON.parse(JSON.stringify(res.data)) data = enterpriseRoutes
const defaultData = JSON.parse(JSON.stringify(res.data)) } else if (role == 2) {
const sidebarRoutes = filterAsyncRouter(sdata) // 专家
const rewriteRoutes = filterAsyncRouter(rdata, false, true) data = expertRoutes
const defaultRoutes = filterAsyncRouter(defaultData) } else if (role == 4) {
commit('SET_ROUTES', rewriteRoutes) // 研究机构
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes)) data = researchRoutes
commit('SET_DEFAULT_ROUTES', sidebarRoutes) } else if (role == 8) {
commit('SET_TOPBAR_ROUTES', defaultRoutes) // 实验室
resolve(rewriteRoutes) } else if (role == 16) {
// 科技经纪人
}
data.map(item=>{
router.addRoute(item)
}) })
commit('SET_ROUTES', constantRoutes.concat(data))
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(data))
commit('SET_DEFAULT_ROUTES', constantRoutes.concat(data))
commit('SET_TOPBAR_ROUTES', data)
resolve(constantRoutes.concat(data))
// 向后端请求路由数据
// getRouters().then(res => {
// const sdata = JSON.parse(JSON.stringify(res.data))
// const rdata = JSON.parse(JSON.stringify(res.data))
// const defaultData = JSON.parse(JSON.stringify(res.data))
// const sidebarRoutes = filterAsyncRouter(sdata)
// const rewriteRoutes = filterAsyncRouter(rdata, false, true)
// const defaultRoutes = filterAsyncRouter(defaultData)
// commit('SET_ROUTES', rewriteRoutes)
// commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
// commit('SET_DEFAULT_ROUTES', sidebarRoutes)
// commit('SET_TOPBAR_ROUTES', defaultRoutes)
// resolve(rewriteRoutes)
// })
}) })
} }
} }

6
src/store/modules/user.js
View File

@ -51,8 +51,7 @@ const user = {
// 获取用户信息 // 获取用户信息
GetInfo({ commit, state }) { GetInfo({ commit, state }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
settled().then(res => { getInfo().then(res => {
res.data['avatar'] = ''
const avatar = res.data.avatar == "" ? defAva : import.meta.env.VITE_APP_BASE_API + res.data.avatar; const avatar = res.data.avatar == "" ? defAva : import.meta.env.VITE_APP_BASE_API + res.data.avatar;
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组 if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
@ -61,8 +60,9 @@ const user = {
} else { } else {
commit('SET_ROLES', ['ROLE_DEFAULT']) commit('SET_ROLES', ['ROLE_DEFAULT'])
} }
commit('SET_NAME', res.data.userName) commit('SET_NAME', res.data.name)
commit('SET_AVATAR', avatar) commit('SET_AVATAR', avatar)
localStorage.setItem('select_identity',res.data.select_identity)
resolve(res) resolve(res)
}).catch(error => { }).catch(error => {
reject(error) reject(error)

26
src/views/admin/index.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<component :is="componentId"></component>
</template>
<script setup>
import index1 from "./one/index.vue";
import index2 from "./two/index.vue";
import index3 from "./three/index.vue";
const route = useRoute();
const role = localStorage.getItem("select_identity");
const componentId = shallowRef(null);
onMounted(() => {
if (role == 1) {
componentId.value = index1;
} else if (role == 2) {
componentId.value = index2;
} else if (role == 4) {
componentId.value = index3;
} else if (role == 8) {
componentId.value = index3;
} else if (role == 16) {
componentId.value = index3;
} else {
alert("暂无身份");
}
});
</script>

2
src/views/admin/one/index.vue
View File

@ -1,3 +1,3 @@
<template> <template>
<div>index</div> <div>one-home</div>
</template> </template>

2
src/views/admin/three/index.vue
View File

@ -1,3 +1,3 @@
<template> <template>
<div>index3</div> <div>three-home</div>
</template> </template>

3
src/views/admin/two/account/bill.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div>bill</div>
</template>

136
src/views/admin/two/components/LineChart.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
// require("echarts/theme/macarons"); // echarts theme
// import resize from "./mixins/resize";
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
autoResize: {
type: Boolean,
default: true,
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({ expectedData, actualData, keys, arr } = {}) {
this.chart.setOption({
tooltip: {},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [
"2021-01",
"2021-02",
"2021-03",
"2021-04",
"2021-05",
"2021-06",
"2021-07",
"2021-08",
"2021-09",
"2021-10",
"2021-11",
"2021-12",
],
axisPointer: {
type: "shadow",
},
},
],
yAxis: [
{
type: "value",
min: 0,
axisLabel: {
formatter: "{value}",
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
},
],
grid: {
containLabel: true,
width: "99%",
left: 0,
top: 30,
bottom: 0,
},
series: [
{
name: "",
type: "line",
data: [
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
],
areaStyle: {
color: "#dbeefc",
},
itemStyle: {
normal: {
color: "rgba(73, 169,238, 1)",
},
},
// symbol: "none",
// smooth: true,
// showSymbol: false,
},
],
});
},
},
};
</script>

274
src/views/admin/two/index.vue
View File

@ -1,3 +1,273 @@
<template> <template>
<div>index2</div> <div class="app-container">
</template> <el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">总收入创新币</div>
<div class="card-panel-num">124,345</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">总收入金额</div>
<div class="card-panel-num">54,323</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">总充值创新币</div>
<div class="card-panel-num">124,345</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">总充值创新币金额</div>
<div class="card-panel-num">54,323</div>
</div>
</div>
</el-col>
</el-row>
<div class="card-panel surplus-currency">
<span style="margin-right: 50px; font-size: 16px; font-weight: 700"
>剩余创新币：98</span
>
<el-button class="x_btns">创新币充值</el-button>
</div>
<el-card>
<template #header>
<div>快捷功能</div>
</template>
<div class="card_body">
<div class="card_item">
<img
style="width: 70px; height: 70px; border-radius: 50%"
src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
/>
<div>发布成果</div>
</div>
<div class="card_item">
<img
style="width: 70px; height: 70px; border-radius: 50%"
src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
/>
<div>发布需求</div>
</div>
</div>
</el-card>
<el-card style="margin-top: 20px">
<template #header>
<div>数据统计</div>
</template>
<el-descriptions :column="4">
<el-descriptions-item label="发布成果:">
<span style="color: #f97c7c; font-weight: 700"> 0 </span
>项</el-descriptions-item
>
<el-descriptions-item label="成果需求:"
><span style="color: #f97c7c; font-weight: 700"> 0 </span
>项</el-descriptions-item
>
<el-descriptions-item label=""></el-descriptions-item>
<el-descriptions-item label="发布视频:"
><span style="color: #f97c7c; font-weight: 700"> 0 </span
>项</el-descriptions-item
>
<el-descriptions-item label="已报名活动:"
><span style="color: #f97c7c; font-weight: 700"> 0 </span>项
</el-descriptions-item>
<el-descriptions-item label="我的收藏:"
><span style="color: #f97c7c; font-weight: 700"> 0 </span
>项</el-descriptions-item
>
<el-descriptions-item label="代表专利:"
><span style="color: #f97c7c; font-weight: 700"> 0 </span
>项</el-descriptions-item
>
<el-descriptions-item label="我的沦文:"
><span style="color: #f97c7c; font-weight: 700"> 0 </span
>项</el-descriptions-item
>
</el-descriptions>
</el-card>
<el-card style="margin-top: 20px">
<template #header>
<div>收益走势</div>
</template>
<el-row :gutter="20">
<el-col :span="3" style="border-right: 1px solid #e4e7ed">
<div style="margin-top: 15px">累计收益</div>
<div style="font-size: 28px">4320.00</div>
<div style="margin-top: 100px">本月收益</div>
<div style="font-size: 28px">342.00</div>
<div>
<el-icon color="#f04133">
<caret-bottom />
</el-icon>
<span style="color: #f04133">10%</span>
<span>同比上月</span>
</div>
</el-col>
<el-col :span="21">
<!-- :chart-data="lineChartData3" -->
<div style="margin-left: 20px">近一年收益走势</div>
<LineChart />
</el-col>
</el-row>
</el-card>
</div>
</template>
<script setup>
import LineChart from "./components/LineChart.vue";
</script>
<style lang="scss" scoped>
::v-deep .el-card__header {
padding-top: 0;
padding-bottom: 0;
div {
height: 40px;
line-height: 40px;
}
}
.panel-group {
.card-panel-col {
margin-bottom: 20px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
border: 1px solid #ccc;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #36a3f7;
}
.icon-message {
background: #40c9c6;
}
.icon-money {
background: #36a3f7;
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-people {
color: #36a3f7;
}
.icon-message {
color: #40c9c6;
}
.icon-money {
color: #36a3f7;
}
.icon-shopping {
color: #34bfa3;
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 28px;
}
}
}
}
.surplus-currency {
margin-bottom: 20px;
height: 108px;
background-color: #f2f2f2;
padding: 20px 0 0 50px;
}
.card_body {
display: flex;
.card_item {
text-align: center;
margin-right: 50px;
}
}
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>

3
src/views/admin/two/technology/release.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div>release</div>
</template>

3
src/views/admin/two/technology/research.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div>research</div>
</template>

2
src/views/identity/index.vue
View File

@ -110,7 +110,7 @@ function handlePage(item) {
routeData = router.resolve({ path: "/one" }); routeData = router.resolve({ path: "/one" });
} else if (item.id == 2) { } else if (item.id == 2) {
// 专家 // 专家
routeData = router.resolve({ path: "/two" }); routeData = router.resolve({ path: "/admin" });
} else if (item.id == 4) { } else if (item.id == 4) {
// 研究机构 // 研究机构
routeData = router.resolve({ path: "/three" }); routeData = router.resolve({ path: "/three" });

4
src/views/signin.vue
View File

@ -88,7 +88,7 @@
</template> </template>
<script setup> <script setup>
import { getCodeImg } from "@/api/login"; import { getCodeNum } from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt"; import { encrypt, decrypt } from "@/utils/jsencrypt";
import Register from "./register.vue"; import Register from "./register.vue";
@ -156,7 +156,7 @@ function handleLogin() {
} }
function getCode() { function getCode() {
getCodeImg().then((res) => { getCodeNum().then((res) => {
captchaOnOff.value = captchaOnOff.value =
res.captchaOnOff === undefined ? true : res.captchaOnOff; res.captchaOnOff === undefined ? true : res.captchaOnOff;
if (captchaOnOff.value) { if (captchaOnOff.value) {

251
src/views/website/activity/detail.vue
View File

@ -1,51 +1,57 @@
<template> <template>
<div class="box conter1000"> <div class="box conter1000">
<div class="_head"> <div class="_head">
<div class="_l"> <div class="_l">
<el-image <el-image
style="width: 358px; height: 100%; vertical-align: middle" style="width: 358px; height: 100%; vertical-align: middle"
:src="state.data.image" :src="state.data.image"
fit="cover" fit="cover"
></el-image> ></el-image>
</div>
<div class="_r">
<p class="_title text_hidden">{{state.data.title }}</p>
<p class="_brief text_hidden">
<!-- 修改样式 -->
活动简介：{{state.data.description || '暂无'}}</p>
<p class="_classif">活动分类：{{state.data.industry}}</p>
<p class="_time">
活动时间：{{ parseTime(state.data.begin_at) }} ~ {{parseTime(state.data.finish_at) }}
</p>
<p class="_place text_hidden">
活动地点：{{state.data.address}}
</p>
<p class="_user">
<el-button class="x_btns" disabled>已报名</el-button>
<span class="_num"><span class="x_blue">{{state.data.join_count}}</span> 人报名</span>
</p>
</div>
</div> </div>
<div class="_info"> <div class="_r">
<div class="_l"> <p class="_title text_hidden">{{ state.data.title }}</p>
<p class="_tit">活动详情</p> <p class="_brief text_hidden">
<div class="html" v-html="state.data.content"></div> <!-- 修改样式 -->
</div> 活动简介：{{ state.data.description || "暂无" }}
<div class="_r">联系我</div> </p>
<p class="_classif">活动分类：{{ state.data.industry }}</p>
<p class="_time">
活动时间：{{ parseTime(state.data.begin_at) }} ~
{{ parseTime(state.data.finish_at) }}
</p>
<p class="_place text_hidden">活动地点：{{ state.data.address }}</p>
<p class="_user">
<el-button class="x_btns" disabled>已报名</el-button>
<span class="_num"
><span class="x_blue">{{ state.data.join_count }}</span>
人报名</span
>
</p>
</div> </div>
</div> </div>
<div class="_info">
<div class="_l">
<p class="_tit">活动详情</p>
<div class="html" v-html="state.data.content"></div>
</div>
<div class="_r">
<webContact />
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import webFooter from "@/components/webFooter/index.vue"; import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue"; import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import request from '@/utils/request' import webContact from "@/components/webContact/index.vue";
function detail (id) { import request from "@/utils/request";
function detail(id) {
return request({ return request({
url: '/v1/activity/detail', url: "/v1/activity/detail",
method: 'post', method: "post",
data: { id } data: { id },
}) });
} }
const loading = ref(true); const loading = ref(true);
@ -55,104 +61,107 @@ const state = reactive({
}); });
const route = useRoute(); const route = useRoute();
watch(route, () => { watch(route, () => {
getData() getData();
}) });
onMounted(() => { onMounted(() => {
getData() getData();
}); });
function getData () { function getData() {
let id = route.params.id; let id = route.params.id;
if (!id) return if (!id) return;
detail(id).then(res => { detail(id)
if (200 == res.code) { .then((res) => {
state.data = res.data; if (200 == res.code) {
state.data = res.data;
loading.value = false;
}
})
.catch(() => {
loading.value = false; loading.value = false;
} });
}).catch(() => {
loading.value = false;
})
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
._head { ._head {
padding: 20px; padding: 20px;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
._r { ._r {
padding-left: 18px; padding-left: 18px;
p { p {
margin: 11px 0; margin: 11px 0;
} }
._title { ._title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 30px; line-height: 30px;
height: 60px; height: 60px;
} }
._brief, ._brief,
._classif, ._classif,
._time, ._time,
._place { ._place {
font-size: 14px; font-size: 14px;
font-weight: 400;
color: #666666;
}
._brief,
._place {
line-height: 24px;
height: 48px;
}
._user {
margin-bottom: 0;
display: flex;
align-items: flex-end;
._num {
margin-left: 10px;
font-size: 16px;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
} .x_blue {
._brief, ._place { font-size: 30px;
line-height: 24px;
height: 48px;
}
._user {
margin-bottom: 0;
display: flex;
align-items: flex-end;
._num {
margin-left: 10px;
font-size: 16px;
font-weight: 400;
color: #666666;
.x_blue {
font-size: 30px;
}
} }
} }
} }
} }
._info {
display: flex;
margin-top: 16px;
margin-bottom: 35px;
._l {
width: 662px;
margin-right: 14px;
padding: 14px 40px 0 20px;
background-color: #fff;
._tit {
&::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 5px;
height: 5px;
background-color: #0054ff;
vertical-align: middle;
}
}
._txt {
margin-bottom: 45px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
._r {
flex: 1;
background-color: #fff;
}
}
} }
._info {
display: flex;
margin-top: 16px;
margin-bottom: 35px;
._l {
width: 662px;
margin-right: 14px;
padding: 14px 40px 0 20px;
background-color: #fff;
._tit {
&::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 5px;
height: 5px;
background-color: #0054ff;
vertical-align: middle;
}
}
._txt {
margin-bottom: 45px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
._r {
flex: 1;
background-color: #fff;
}
}
}
</style> </style>

71
src/views/website/index/comp/index2.vue
View File

@ -1,11 +1,17 @@
<template> <template>
<div class="box"> <div class="box">
<div style="position: absolute; top: 0; left: 50%">
<webReleaseActive
v-model:dialogVisible="dialogVisible"
></webReleaseActive>
</div>
<div class="wrap"> <div class="wrap">
<div class="tit"> <div class="tit">
<div class="left">科技活动</div> <div class="left">科技活动</div>
<div class="right"> <div class="right">
<!-- @click="dialogVisible = true" -->
<div class="publish">发布活动</div> <div class="publish">发布活动</div>
<div class="more">更多</div> <div class="more" @click="handlePage">更多</div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
@ -25,52 +31,68 @@
</div> </div>
<div class="item"> <div class="item">
<div class="img"> <div class="img">
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" /> <img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
/>
</div> </div>
<div class="dess"> <div class="dess">
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div> <div class="txt">
助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
</div>
<div class="dess1"> <div class="dess1">
<div class="time">活动时间：2021-11-01 08:00</div> <div class="time">活动时间：2021-11-01 08:00</div>
<div>1988人已观看</div> <div>1988人已观看</div>
</div> </div>
<div class="enroll">19.9元报名</div> <div class="enroll">19.9元报名</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="img"> <div class="img">
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" /> <img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
/>
</div> </div>
<div class="dess"> <div class="dess">
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div> <div class="txt">
助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
</div>
<div class="dess1"> <div class="dess1">
<div class="time">活动时间：2021-11-01 08:00</div> <div class="time">活动时间：2021-11-01 08:00</div>
<div>1988人已观看</div> <div>1988人已观看</div>
</div> </div>
<div class="enroll">19.9元报名</div> <div class="enroll">19.9元报名</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="img"> <div class="img">
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" /> <img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
/>
</div> </div>
<div class="dess"> <div class="dess">
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div> <div class="txt">
助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
</div>
<div class="dess1"> <div class="dess1">
<div class="time">活动时间：2021-11-01 08:00</div> <div class="time">活动时间：2021-11-01 08:00</div>
<div>1988人已观看</div> <div>1988人已观看</div>
</div> </div>
<div class="enroll">19.9元报名</div> <div class="enroll">19.9元报名</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="img"> <div class="img">
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" /> <img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
/>
</div> </div>
<div class="dess"> <div class="dess">
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div> <div class="txt">
助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
</div>
<div class="dess1"> <div class="dess1">
<div class="time">活动时间：2021-11-01 08:00</div> <div class="time">活动时间：2021-11-01 08:00</div>
<div>1988人已观看</div> <div>1988人已观看</div>
</div> </div>
<div class="enroll end">已结束</div> <div class="enroll end">已结束</div>
</div> </div>
@ -82,7 +104,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, onMounted, reactive } from "vue"; import { defineComponent, onMounted, reactive } from "vue";
import webReleaseActive from "@/components/webReleaseActive/index.vue";
const router = useRouter();
const dialogVisible = ref(false);
function handlePage() {
router.push("/activity");
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -152,7 +180,7 @@ import { defineComponent, onMounted, reactive } from "vue";
overflow: hidden; overflow: hidden;
.txt { .txt {
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.dess1 { .dess1 {
@ -164,17 +192,16 @@ import { defineComponent, onMounted, reactive } from "vue";
width: 90px; width: 90px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
background: #0054FF; background: #0054ff;
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
&.end { &.end {
background: #B4B4B4; background: #b4b4b4;
} }
} }
} }
img { img {
top: 0; top: 0;

97
src/views/website/index/index.vue
View File

@ -47,52 +47,56 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, getCurrentInstance, ref } from "vue"; import { reactive, onMounted, getCurrentInstance, ref } from "vue";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
import index1 from './comp/index1.vue'; import index1 from "./comp/index1.vue";
import index2 from './comp/index2.vue'; import index2 from "./comp/index2.vue";
import index3 from './comp/index3.vue'; import index3 from "./comp/index3.vue";
import index4 from './comp/index4.vue'; import index4 from "./comp/index4.vue";
import index5 from './comp/index5.vue'; import index5 from "./comp/index5.vue";
import index6 from './comp/index6.vue'; import index6 from "./comp/index6.vue";
import index7 from './comp/index7.vue'; import index7 from "./comp/index7.vue";
import index8 from './comp/index8.vue'; import index8 from "./comp/index8.vue";
const loading = ref(true); const loading = ref(true);
setTimeout(() => { setTimeout(() => {
loading.value = false; loading.value = false;
}, 1000) }, 1000);
onMounted(() => { onMounted(() => {});
function next() {
}) // 往下切换
function next() { // 往下切换
let len = 8; // 页面的个数 let len = 8; // 页面的个数
if (state.fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动 if (state.fullpage.current + 1 <= len) {
// 如果当前页面编号+1 小于总个数，则可以执行向下滑动
state.fullpage.current += 1; // 页面+1 state.fullpage.current += 1; // 页面+1
move(state.fullpage.current); // 执行切换 move(state.fullpage.current); // 执行切换
} }
} }
function pre() {// 往上切换 function pre() {
if (state.fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0，则可以执行向下滑动 // 往上切换
state.fullpage.current -= 1;// 页面+1 if (state.fullpage.current - 1 > 0) {
move(state.fullpage.current);// 执行切换 // 如果当前页面编号-1 大于0，则可以执行向下滑动
state.fullpage.current -= 1; // 页面+1
move(state.fullpage.current); // 执行切换
} }
} }
function move(index) { function move(index) {
state.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动 state.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
directToMove(index); //执行滚动 directToMove(index); //执行滚动
setTimeout(() => { //这里的动画是1s执行完，使用setTimeout延迟1s后解锁 setTimeout(() => {
//这里的动画是1s执行完，使用setTimeout延迟1s后解锁
state.fullpage.isScrolling = false; state.fullpage.isScrolling = false;
}, 1010); }, 1010);
} }
function directToMove(index) { function directToMove(index) {
let height = proxy.$refs["fullPage"]['clientHeight']; //获取屏幕的宽度 let height = proxy.$refs["fullPage"]["clientHeight"]; //获取屏幕的宽度
let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素 let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚 let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
scrollHeight = -(index - 1) * height + "px"; scrollHeight = -(index - 1) * height + "px";
scrollPage.style.transform = `translateY(${scrollHeight})`; scrollPage.style.transform = `translateY(${scrollHeight})`;
state.fullpage.current = index; state.fullpage.current = index;
} }
function mouseWheelHandle(event) { // 监听鼠标监听 function mouseWheelHandle(event) {
// 监听鼠标监听
// 添加冒泡阻止 // 添加冒泡阻止
let evt = event || window.event; let evt = event || window.event;
if (evt.stopPropagation) { if (evt.stopPropagation) {
@ -100,7 +104,8 @@ function mouseWheelHandle(event) { // 监听鼠标监听
} else { } else {
evt.returnValue = false; evt.returnValue = false;
} }
if (state.fullpage.isScrolling) { // 判断是否可以滚动 if (state.fullpage.isScrolling) {
// 判断是否可以滚动
return false; return false;
} }
let e = event.originalEvent || event; let e = event.originalEvent || event;
@ -113,11 +118,10 @@ function mouseWheelHandle(event) { // 监听鼠标监听
} }
let state = reactive({ let state = reactive({
fullpage: { fullpage: {
current: 1, // 当前的页面编号 current: 1, // 当前的页面编号
isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动 isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚 deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
}, },
showBox: 0, showBox: 0,
boxList: [ boxList: [
@ -136,26 +140,26 @@ let state = reactive({
zIndex: 1, zIndex: 1,
title: "index3", title: "index3",
}, },
// { {
// comp: index4, comp: index4,
// zIndex: 1, zIndex: 1,
// title: "index4", title: "index4",
// }, },
// { {
// comp: index5, comp: index5,
// zIndex: 1, zIndex: 1,
// title: "index5", title: "index5",
// }, },
// { {
// comp: index6, comp: index6,
// zIndex: 1, zIndex: 1,
// title: "index6", title: "index6",
// }, },
// { {
// comp: index7, comp: index7,
// zIndex: 1, zIndex: 1,
// title: "index7", title: "index7",
// }, },
{ {
comp: index8, comp: index8,
zIndex: 1, zIndex: 1,
@ -167,9 +171,6 @@ let state = reactive({
out: "animate__animated animate__fadeOutDown", out: "animate__animated animate__fadeOutDown",
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

94
src/views/website/innovate/innovate.vue
View File

@ -8,7 +8,9 @@
v-for="item in state.kind" v-for="item in state.kind"
:key="item.id" :key="item.id"
@click="handleActive(item.id, item.title)" @click="handleActive(item.id, item.title)"
>{{ item.title }}</div> >
{{ item.title }}
</div>
</div> </div>
<div class="_r"> <div class="_r">
<div style="width: 70%"> <div style="width: 70%">
@ -23,7 +25,11 @@
<div class="_info"> <div class="_info">
<p class="text_hidden">{{ item.title }}</p> <p class="text_hidden">{{ item.title }}</p>
<div class="_tags"> <div class="_tags">
<el-tag class="x_fff x_bg_blue">{{ item.description }}</el-tag> <el-tooltip :content="item.description" placement="top">
<el-tag class="x_fff x_bg_blue">{{
item.description
}}</el-tag>
</el-tooltip>
</div> </div>
</div> </div>
<div class="_detail" @click="handleDetail(item.id)">查看详情</div> <div class="_detail" @click="handleDetail(item.id)">查看详情</div>
@ -46,85 +52,93 @@
<script setup> <script setup>
import webFooter from "@/components/webFooter/index.vue"; import webFooter from "@/components/webFooter/index.vue";
import request from '@/utils/request' import request from "@/utils/request";
const router = useRouter(); const router = useRouter();
const loading = ref(true); const loading = ref(true);
const listLoading = ref(true); const listLoading = ref(true);
const state = reactive({ const state = reactive({
kind: [], kind: [],
kindId: '', kindId: "",
list: [], list: [],
pageNum: 1, pageNum: 1,
total: 1, total: 1,
pageSize: 9, pageSize: 9,
pageSizes: [9, 9 << 1, 9 << 2, 9 << 3], pageSizes: [9, 9 << 1, 9 << 2, 9 << 3],
title: "", title: "",
}); });
function kind () { function kind() {
return request({ return request({
url: '/v1/service/innovate/kind', url: "/v1/service/innovate/kind",
method: 'get', method: "get",
}) });
} }
function innovate () { function innovate() {
return request({ return request({
url: '/v1/service/innovate', url: "/v1/service/innovate",
method: 'post', method: "post",
data: { kind_id: state.kindId, page_num: state.pageNum, page_size: state.pageSize, title: state.title } data: {
}) kind_id: state.kindId,
page_num: state.pageNum,
page_size: state.pageSize,
title: state.title,
},
});
} }
function getDataList () { function getDataList() {
listLoading.value = true; listLoading.value = true;
innovate().then(res => { innovate()
if (200 == res.code) { .then((res) => {
state.total = res.data.count; if (200 == res.code) {
state.list = res.data.data; state.total = res.data.count;
state.list = res.data.data;
listLoading.value = false;
}
})
.catch(() => {
listLoading.value = false; listLoading.value = false;
} });
}).catch(() => {
listLoading.value = false;
})
} }
onMounted(() => { onMounted(() => {
init(); init();
}); });
function init () { function init() {
loading.value = true; loading.value = true;
kind().then(res => { kind()
if (200 == res.code) { .then((res) => {
state.kind = res.data; if (200 == res.code) {
if (res.data.length > 0) { state.kind = res.data;
state.kindId = res.data[0].id; if (res.data.length > 0) {
getDataList(); state.kindId = res.data[0].id;
getDataList();
}
loading.value = false;
} }
})
.catch(() => {
loading.value = false; loading.value = false;
} });
}).catch(() => {
loading.value = false;
})
} }
function handleDetail (id) { function handleDetail(id) {
let routeData = router.resolve({ path: `/innovate/detail/${id}` }); let routeData = router.resolve({ path: `/innovate/detail/${id}` });
window.open(routeData.href, '_blank'); window.open(routeData.href, "_blank");
} }
function handleActive (id, title) { function handleActive(id, title) {
state.kindId = id; state.kindId = id;
state.pageNum = 1; state.pageNum = 1;
state.title = ""; state.title = "";
getDataList(); getDataList();
} }
function handleQuery () { function handleQuery() {
state.pageNum = 1; state.pageNum = 1;
getDataList(); getDataList();
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -201,6 +215,8 @@ function handleQuery () {
margin: 10px 0 0; margin: 10px 0 0;
.el-tag { .el-tag {
font-size: 14px; font-size: 14px;
width: 100%;
overflow: hidden;
} }
} }
} }

284
src/views/website/searchList/components/expertItem.vue
View File

@ -1,162 +1,172 @@
<template> <template>
<div class="box"> <div class="box">
<div class="wrap"> <div class="wrap">
<div class="img"> <div class="img">
<!-- <img :src="data.image" alt /> --> <!-- <img :src="data.image" alt /> -->
<img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" /> <el-image :src="data.image" fit="fill"></el-image>
</div> </div>
<div class="content"> <div class="content">
<div class="tit"> <div class="tit">
<span style="cursor: pointer;" @click="handleDetail(data.id)">姓名：{{ data.name }}</span> <span style="cursor: pointer" @click="handleDetail(data.id)"
<div> >姓名：{{ data.name }}</span
<span style="vertical-align: middle;">匹配度</span> >
<el-rate style="display: inline-block" v-model="state.val" disabled></el-rate> <div>
</div> <span style="vertical-align: middle">匹配度</span>
</div> <el-rate
<!-- <div class="labelList"> style="display: inline-block"
v-model="state.val"
disabled
></el-rate>
</div>
</div>
<!-- <div class="labelList">
<div v-for="item in data.industrys">{{ item }}</div> <div v-for="item in data.industrys">{{ item }}</div>
</div>--> </div>-->
<div v-if="data.industrys" class="line"> <div v-if="data.industrys" class="line">
所属领域： 所属领域：
<span>{{ data.industrys[data.industrys.length - 1] }}</span> <span>{{ data.industrys[data.industrys.length - 1] }}</span>
</div>
<div class="line">
所在机构：
<span>{{ data.research_name }}</span>
</div>
<div
v-if="data.patent_title"
class="line"
v-for="(patent_title,index) in data.patent_title"
:key="index"
>{{ patent_title }}</div>
</div>
<div class="keywordsWrap">
<div class="keywords">
<wordcloud v-if="data.keywords" :data="createdData(data.keywords)"></wordcloud>
</div>
</div>
</div> </div>
<slot></slot> <div class="line">
所在机构：
<span>{{ data.research_name }}</span>
</div>
<div
v-if="data.patent_title"
class="line"
v-for="(patent_title, index) in data.patent_title"
:key="index"
>
{{ patent_title }}
</div>
</div>
<div class="keywordsWrap">
<div class="keywords">
<wordcloud
v-if="data.keywords"
:data="createdData(data.keywords)"
></wordcloud>
</div>
</div>
</div> </div>
<slot></slot>
</div>
</template> </template>
<script setup> <script setup>
import wordcloud from './wordcloud.vue' import wordcloud from "./wordcloud.vue";
const router = useRouter(); const router = useRouter();
import collectAndVisit from './collectAndVisit.vue' import collectAndVisit from "./collectAndVisit.vue";
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
function handleDetail (id) { function handleDetail(id) {
let routeData = router.resolve({ path: `/searchList/4/detail/${id}` }); let routeData = router.resolve({ path: `/searchList/4/detail/${id}` });
window.open(routeData.href, '_blank'); window.open(routeData.href, "_blank");
} }
const state = reactive({ const state = reactive({
val: 3, val: 3,
}); });
function createdData (arr) { function createdData(arr) {
let l = []; let l = [];
let snap = JSON.parse(JSON.stringify(arr)) let snap = JSON.parse(JSON.stringify(arr));
snap.map(e => { snap.map((e) => {
l.push({ name: e, value: 30 }) l.push({ name: e, value: 30 });
return { name: e, value: 30 } return { name: e, value: 30 };
}) });
return l; return l;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
.wrap { .wrap {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.img { .img {
width: 90px; width: 90px;
margin-right: 12px; margin-right: 12px;
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img { .el-image {
width: 90px; width: 90px;
height: 90px; height: 90px;
border-radius: 50%; border-radius: 50%;
} }
}
.keywordsWrap {
display: flex;
align-items: center;
justify-content: center;
}
.keywords {
width: 129px;
height: 129px;
}
.content {
flex: 1;
overflow: hidden;
.labelList {
overflow: hidden;
div {
padding: 2px 4px;
float: left;
background: #0054ff;
border-radius: 4px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
.line {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
margin: 10px 0;
span {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333;
}
}
.tit {
overflow: hidden;
display: flex;
& > span {
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
overflow: hidden;
}
& > div {
width: 175px;
vertical-align: middle;
}
}
}
} }
.keywordsWrap {
display: flex;
align-items: center;
justify-content: center;
}
.keywords {
width: 129px;
height: 129px;
}
.content {
flex: 1;
overflow: hidden;
.labelList {
overflow: hidden;
div {
padding: 2px 4px;
float: left;
background: #0054ff;
border-radius: 4px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
.line {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
margin: 10px 0;
span {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333;
}
}
.tit {
overflow: hidden;
display: flex;
& > span {
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
overflow: hidden;
}
& > div {
width: 175px;
vertical-align: middle;
}
}
}
}
} }
</style> </style>

158
src/views/website/searchList/index0.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<div class="index"> <div class="index">
<searchContainer bannerKey="首页>企业库" title="企业库" @handleQuery="handleQuery"> <searchContainer
bannerKey="首页>企业库>企业列表"
title="企业库"
@handleQuery="handleQuery"
>
<template v-slot> <template v-slot>
<el-row type="flex" style="padding: 20px 0;"> <el-row type="flex" style="padding: 20px 0">
<div style="flex: 1"> <div style="flex: 1">
<div style="position: relative;"> <div style="position: relative">
<industrySelect @industryChange="industryChange"></industrySelect> <industrySelect @industryChange="industryChange"></industrySelect>
<div class="total"> <div class="total">
共找到 共找到
@ -12,28 +16,37 @@
</div> </div>
<div v-loading="loading"> <div v-loading="loading">
<div class="item" v-for="item in state.list" :key="item.id"> <div class="item" v-for="item in state.list" :key="item.id">
<el-row type="flex" style="padding: 40px 20px;"> <el-row type="flex" style="padding: 40px 20px">
<div class="img"> <div class="img">
<!-- <img :src="item.image" alt /> --> <!-- <img :src="item.image" alt /> -->
<img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" alt /> <img
src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
alt
/>
</div> </div>
<div class="content"> <div class="content">
<div class="tit" @click="handleDetail(item.id)"> <div class="tit" @click="handleDetail(item.id)">
<div style="float: right;"> <div style="float: right">
<span>匹配度</span> <span>匹配度</span>
<el-rate style="display: inline-block" v-model="state.val" disabled></el-rate> <el-rate
style="display: inline-block"
v-model="state.val"
disabled
></el-rate>
</div> </div>
<div class="text" style="flex: 1">{{ item.name }}</div> <div class="text" style="flex: 1">{{ item.name }}</div>
</div> </div>
<div class="line"> <div class="line">
企业规模： <span>{{item.kind_title}}</span> 企业规模： <span>{{ item.kind_title }}</span>
</div> </div>
<div class="line"> <div class="line">
核心产品及应用场景： <span>{{item.product}}</span> 核心产品及应用场景： <span>{{ item.product }}</span>
</div> </div>
<div class="line"> <div class="line">
企业网站： <a :href="item.url"><span>{{item.url}}</span></a> 企业网站：
<a :href="item.url"
><span>{{ item.url }}</span></a
>
</div> </div>
</div> </div>
<div class="keywords" style="flex: 1"> <div class="keywords" style="flex: 1">
@ -63,16 +76,19 @@
<script setup> <script setup>
import webContact from "@/components/webContact/index.vue"; import webContact from "@/components/webContact/index.vue";
import request from '@/utils/request' import request from "@/utils/request";
const router = useRouter(); const router = useRouter();
import { onMounted } from 'vue'; import { onMounted } from "vue";
import searchContainer from './components/searchContainer.vue' import searchContainer from "./components/searchContainer.vue";
import industrySelect from './components/industrySelect.vue' import industrySelect from "./components/industrySelect.vue";
import wordcloud from './components/wordcloud.vue' import wordcloud from "./components/wordcloud.vue";
function handleDetail (id) { function handleDetail(id) {
let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: {keyword: state.keyword}}); let routeData = router.resolve({
window.open(routeData.href, '_blank'); path: `/searchList/0/detail/${id}`,
query: { keyword: state.keyword },
});
window.open(routeData.href, "_blank");
} }
const loading = ref(true); const loading = ref(true);
@ -81,33 +97,35 @@ const state = reactive({
total: 1, total: 1,
pageSize: 10, pageSize: 10,
pageSizes: [10, 10 << 1, 10 << 2, 10 << 3], pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
keyword: '', keyword: "",
industryList: [], industryList: [],
id1: '', id1: "",
id2: '', id2: "",
id3: '', id3: "",
val: 3, val: 3,
arr: [{ arr: [
"name": "Cat", {
"value": 26 name: "Cat",
}, value: 26,
{ },
"name": "fish", {
"value": 19 name: "fish",
}] value: 19,
},
],
}); });
function createdData(arr) { function createdData(arr) {
let l = []; let l = [];
let snap = JSON.parse(JSON.stringify(arr)) let snap = JSON.parse(JSON.stringify(arr));
snap.map(e=>{ snap.map((e) => {
l.push({name: e,value: 30}) l.push({ name: e, value: 30 });
return {name: e,value: 30} return { name: e, value: 30 };
}) });
return l; return l;
} }
function search () { function search() {
let industry = ''; let industry = "";
if (state.id1) { if (state.id1) {
industry += state.id1; industry += state.id1;
} }
@ -118,19 +136,23 @@ function search () {
industry += `-${state.id3}`; industry += `-${state.id3}`;
} }
return request({ return request({
url: '/v1/search', url: "/v1/search",
method: 'post', method: "post",
data: { industry, mode: 1, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword } data: {
}) industry,
mode: 1,
page_num: state.pageNum,
page_size: state.pageSize,
keyword: state.keyword,
},
});
} }
function handleQuery(keyword) {
function handleQuery (keyword) {
state.keyword = keyword; state.keyword = keyword;
getDataList() getDataList();
} }
function industryChange (industry) { function industryChange(industry) {
if (industry.id1) { if (industry.id1) {
state.id1 = industry.id1; state.id1 = industry.id1;
} }
@ -140,23 +162,24 @@ function industryChange (industry) {
if (industry.id3) { if (industry.id3) {
state.id3 = industry.id3; state.id3 = industry.id3;
} }
getDataList() getDataList();
} }
function getDataList () { function getDataList() {
loading.value = true; loading.value = true;
search().then(res => { search()
if (200 == res.code) { .then((res) => {
// 总条数 if (200 == res.code) {
state.total = res.data.count; // 总条数
state.list = res.data.data; state.total = res.data.count;
state.list = res.data.data;
loading.value = false;
}
})
.catch(() => {
loading.value = false; loading.value = false;
} });
}).catch(() => {
loading.value = false;
})
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -189,9 +212,9 @@ function getDataList () {
.img { .img {
width: 90px; width: 90px;
margin-right: 12px; margin-right: 12px;
display: flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
img { img {
width: 90px; width: 90px;
height: 90px; height: 90px;
@ -208,13 +231,12 @@ function getDataList () {
color: #666666; color: #666666;
margin: 10px 0; margin: 10px 0;
span { span {
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
} }
} }
.keywords { .keywords {
flex: 1; flex: 1;

703
src/views/website/searchList/index0Detail.vue
View File

@ -1,403 +1,420 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<searchContainer bannerKey="首页>企业库" title="企业库" @handleQuery="handleQuery"> <searchContainer
<template v-slot> bannerKey="首页>企业库>企业详情"
<div class="head"> title="企业库"
<el-breadcrumb separator="/"> @handleQuery="handleQuery"
<el-breadcrumb-item> >
<span class="one">找企业</span> <template v-slot>
</el-breadcrumb-item> <div class="head">
<el-breadcrumb-item> <el-breadcrumb separator="/">
<span>企业详情</span> <el-breadcrumb-item>
</el-breadcrumb-item> <span class="one">找企业</span>
</el-breadcrumb> </el-breadcrumb-item>
<el-breadcrumb-item>
<span>企业详情</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-row type="flex">
<div style="flex: 1">
<div class="item">
<el-row type="flex" style="padding: 40px 20px">
<div class="img">
<!-- <img :src="state.companyDetail.image" alt /> -->
<img
src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
alt
/>
</div> </div>
<el-row type="flex"> <div class="content">
<div style="flex: 1"> <div class="tit">
<div class="item"> <div style="float: right">
<el-row type="flex" style="padding: 40px 20px;"> <span>匹配度</span>
<div class="img"> <el-rate
<!-- <img :src="state.companyDetail.image" alt /> --> style="display: inline-block"
<img v-model="state.val"
src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" disabled
alt ></el-rate>
/>
</div>
<div class="content">
<div class="tit">
<div style="float: right;">
<span>匹配度</span>
<el-rate
style="display: inline-block"
v-model="state.val"
disabled
></el-rate>
</div>
<div
class="text"
style="flex: 1"
>{{ state.companyDetail.name }}</div>
</div>
<div class="line">
企业规模：
<span>{{ state.companyDetail.introduce }}</span>
</div>
<div class="line">
核心产品及应用场景：
<span>{{ state.companyDetail.product }}</span>
</div>
<div class="line">
企业网站：
<a :href="state.companyDetail.url">
<span>{{ state.companyDetail.url }}</span>
</a>
</div>
</div>
<div class="keywords" style="flex: 1">
<wordcloud
v-if="state.companyDetail.keywords"
:data="createdData(state.companyDetail.keywords)"
></wordcloud>
</div>
<div class="btns">
<div class="order">预约对接</div>
<div class="share">一键分享</div>
</div>
</el-row>
</div>
<div class="product">
<div style="padding: 20px 0;">
<div class="pointTit">企业简介</div>
</div>
<div class="html" v-html="state.companyDetail.introduce"></div>
<div style="padding: 20px 0;">
<div class="pointTit">生产方向</div>
</div>
<section v-if="state.companyDetail.directions">
<div v-for="item in state.companyDetail.directions" class="describe">{{state.companyDetail.introduce}}</div>
</section>
<div style="padding: 20px 0;">
<div class="pointTit">产品列表</div>
</div>
<section v-for="item in state.companyProduct" :key="item.id">
<div style="border: 1px solid #DCDCDC;margin-bottom: 10px;">
<productItem :data="item"></productItem>
</div>
</section>
</div>
<div style="padding: 20px 0;">
<div class="pointTit">企业推荐</div>
</div>
<div>
<div class="item" v-for="item in state.list" :key="item.id">
<el-row type="flex" style="padding: 40px 20px;">
<div class="img">
<!-- <img :src="item.image" alt /> -->
<img
src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
alt
/>
</div>
<div class="content">
<div class="tit" @click="handleDetail(item.id)">
<div style="float: right;">
<span>匹配度</span>
<el-rate
style="display: inline-block"
v-model="state.val"
disabled
></el-rate>
</div>
<div
class="text"
style="flex: 1"
>{{ item.name.repeat(10) }}</div>
</div>
<div class="line">
企业规模：
<span>{{ item.kind_title }}</span>
</div>
<div class="line">
核心产品及应用场景：
<span>{{ item.product }}</span>
</div>
<div class="line">
企业网站：
<a :href="item.url">
<span>{{ item.url }}</span>
</a>
</div>
</div>
<div class="keywords" style="flex: 1">
<wordcloud :data="createdData(item.keywords)"></wordcloud>
</div>
</el-row>
</div>
</div>
</div> </div>
<div class="r"><webContact /></div> <div class="text" style="flex: 1">
{{ state.companyDetail.name }}
</div>
</div>
<div class="line">
企业规模：
<span>{{ state.companyDetail.introduce }}</span>
</div>
<div class="line">
核心产品及应用场景：
<span>{{ state.companyDetail.product }}</span>
</div>
<div class="line">
企业网站：
<a :href="state.companyDetail.url">
<span>{{ state.companyDetail.url }}</span>
</a>
</div>
</div>
<div class="keywords" style="flex: 1">
<wordcloud
v-if="state.companyDetail.keywords"
:data="createdData(state.companyDetail.keywords)"
></wordcloud>
</div>
<div class="btns">
<div class="order">预约对接</div>
<div class="share">一键分享</div>
</div>
</el-row>
</div>
<div class="product">
<div style="padding: 20px 0">
<div class="pointTit">企业简介</div>
</div>
<div class="html" v-html="state.companyDetail.introduce"></div>
<div style="padding: 20px 0">
<div class="pointTit">生产方向</div>
</div>
<section v-if="state.companyDetail.directions">
<div
v-for="item in state.companyDetail.directions"
class="describe"
>
{{ state.companyDetail.introduce }}
</div>
</section>
<div style="padding: 20px 0">
<div class="pointTit">产品列表</div>
</div>
<section v-for="item in state.companyProduct" :key="item.id">
<div style="border: 1px solid #dcdcdc; margin-bottom: 10px">
<productItem :data="item"></productItem>
</div>
</section>
</div>
<div style="padding: 20px 0">
<div class="pointTit">企业推荐</div>
</div>
<div>
<div class="item" v-for="item in state.list" :key="item.id">
<el-row type="flex" style="padding: 40px 20px">
<div class="img">
<!-- <img :src="item.image" alt /> -->
<img
src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
alt
/>
</div>
<div class="content">
<div class="tit" @click="handleDetail(item.id)">
<div style="float: right">
<span>匹配度</span>
<el-rate
style="display: inline-block"
v-model="state.val"
disabled
></el-rate>
</div>
<div class="text" style="flex: 1">
{{ item.name.repeat(10) }}
</div>
</div>
<div class="line">
企业规模：
<span>{{ item.kind_title }}</span>
</div>
<div class="line">
核心产品及应用场景：
<span>{{ item.product }}</span>
</div>
<div class="line">
企业网站：
<a :href="item.url">
<span>{{ item.url }}</span>
</a>
</div>
</div>
<div class="keywords" style="flex: 1">
<wordcloud :data="createdData(item.keywords)"></wordcloud>
</div>
</el-row> </el-row>
</template> </div>
</searchContainer> </div>
</div> </div>
<div class="r"><webContact /></div>
</el-row>
</template>
</searchContainer>
</div>
</template> </template>
<script setup> <script setup>
import webContact from "@/components/webContact/index.vue"; import webContact from "@/components/webContact/index.vue";
import request from '@/utils/request' import request from "@/utils/request";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
import { onMounted } from 'vue'; import { onMounted } from "vue";
import searchContainer from './components/searchContainer.vue' import searchContainer from "./components/searchContainer.vue";
import wordcloud from './components/wordcloud.vue' import wordcloud from "./components/wordcloud.vue";
import productItem from './components/productItem.vue' import productItem from "./components/productItem.vue";
const loading = ref(true); const loading = ref(true);
const state = reactive({ const state = reactive({
pageNum: 1, pageNum: 1,
pageSize: 4, pageSize: 4,
keyword: '', keyword: "",
val: 3, val: 3,
companyDetail: {}, companyDetail: {},
companyProduct: [], companyProduct: [],
arr: [{ arr: [
"name": "Cat", {
"value": 26 name: "Cat",
value: 26,
}, },
{ {
"name": "fish", name: "fish",
"value": 19 value: 19,
}] },
],
}); });
// 建议 列表前4条 // 建议 列表前4条
function recommend () { function recommend() {
return request({ return request({
url: '/v1/search', url: "/v1/search",
method: 'post', method: "post",
data: { mode: 1, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword } data: {
}) mode: 1,
page_num: state.pageNum,
page_size: state.pageSize,
keyword: state.keyword,
},
});
} }
// 公司详情 // 公司详情
function company (id) { function company(id) {
return request({ return request({
url: '/v1/manage/company', url: "/v1/manage/company",
method: 'post', method: "post",
data: { company_id: id } data: { company_id: id },
}) });
} }
function companyProduct (id) { function companyProduct(id) {
return request({ return request({
url: '/v1/manage/company/product', url: "/v1/manage/company/product",
method: 'post', method: "post",
data: { company_id: id, page_num: 1, page_size: 10, } data: { company_id: id, page_num: 1, page_size: 10 },
}) });
} }
function createdData (arr) { function createdData(arr) {
let l = []; let l = [];
let snap = JSON.parse(JSON.stringify(arr)) let snap = JSON.parse(JSON.stringify(arr));
snap.map(e => { snap.map((e) => {
l.push({ name: e, value: 30 }) l.push({ name: e, value: 30 });
return { name: e, value: 30 } return { name: e, value: 30 };
}) });
return l; return l;
} }
function handleDetail (id) { function handleDetail(id) {
let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: { keyword: state.keyword } }); let routeData = router.resolve({
window.open(routeData.href, '_blank'); path: `/searchList/0/detail/${id}`,
query: { keyword: state.keyword },
});
window.open(routeData.href, "_blank");
} }
function handleList (mode, keyword) { function handleList(mode, keyword) {
router.push({ path: `/searchList/${mode}`, query: { keyword } }); router.push({ path: `/searchList/${mode}`, query: { keyword } });
} }
// 首次加载数据，其后跳转页面 // 首次加载数据，其后跳转页面
let flag = true; let flag = true;
function handleQuery (keyword) { function handleQuery(keyword) {
state.keyword = keyword; state.keyword = keyword;
if (flag) { if (flag) {
getDataList(); getDataList();
flag = false; flag = false;
} else { } else {
handleList(0, keyword); handleList(0, keyword);
} }
} }
function getDataList() {
function getDataList () { loading.value = true;
loading.value = true; recommend().then((res) => {
recommend().then(res => { if (200 == res.code) {
if (200 == res.code) { // 总条数
// 总条数 state.total = res.data.count;
state.total = res.data.count; state.list = res.data.data;
state.list = res.data.data; }
} });
}) let id = route.params.id;
let id = route.params.id; if (!id) return;
if (!id) return company(id)
company(id).then(res => { .then((res) => {
if (200 == res.code) { if (200 == res.code) {
state.companyDetail = res.data; state.companyDetail = res.data;
loading.value = false;
}
}).catch(() => {
loading.value = false; loading.value = false;
}); }
companyProduct(id).then(res => {
if (200 == res.code) {
state.companyProduct = res.data.data;
}
}) })
.catch(() => {
loading.value = false;
});
companyProduct(id).then((res) => {
if (200 == res.code) {
state.companyProduct = res.data.data;
}
});
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.head { .head {
padding: 15px 0px; padding: 15px 0px;
span { span {
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
} }
.one { .one {
color: #333333; color: #333333;
} }
} }
.r { .r {
display: inline-block; display: inline-block;
width: 325px; width: 325px;
margin-left: 14px; margin-left: 14px;
min-height: 200px; min-height: 200px;
} }
.product { .product {
width: 661px; width: 661px;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
background: #fff; background: #fff;
.describe { .describe {
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.pointTit { .pointTit {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
&:before { &:before {
content: ""; content: "";
top: 8px; top: 8px;
left: 0px; left: 0px;
position: absolute; position: absolute;
display: block; display: block;
width: 5px; width: 5px;
height: 5px; height: 5px;
background: #0054ff; background: #0054ff;
} }
} }
.item { .item {
overflow: hidden;
background-color: #fff;
margin-bottom: 16px;
.btns {
overflow: hidden; overflow: hidden;
background-color: #fff; padding-top: 20px;
margin-bottom: 16px; width: 100%;
.btns { div {
overflow: hidden; text-align: center;
padding-top: 20px; float: right;
width: 100%; cursor: pointer;
user-select: none;
width: 101px;
height: 36px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 36px;
box-sizing: border-box;
&:hover {
opacity: 0.7;
}
}
.share {
color: #333333;
background: #f2f6ff;
border: 1px solid #dcdcdc;
margin-right: 10px;
}
.order {
background: #0054ff;
color: #ffffff;
border: none;
}
}
div { .img {
text-align: center; width: 90px;
float: right; margin-right: 12px;
cursor: pointer; display: flex;
user-select: none; align-items: center;
width: 101px; justify-content: center;
height: 36px; img {
font-size: 14px; width: 90px;
font-family: Source Han Sans CN; height: 90px;
font-weight: 400; border-radius: 50%;
line-height: 36px;
box-sizing: border-box;
&:hover {
opacity: 0.7;
}
}
.share {
color: #333333;
background: #f2f6ff;
border: 1px solid #dcdcdc;
margin-right: 10px;
}
.order {
background: #0054ff;
color: #ffffff;
border: none;
}
} }
}
.content {
display: inline-block;
width: 390px;
.line {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
margin: 10px 0;
span {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333;
}
}
}
.keywords {
flex: 1;
width: 129px;
height: 129px;
}
.tit {
width: 100%;
overflow: hidden;
cursor: pointer;
.text {
margin-right: 200px;
overflow: hidden;
.img { text-overflow: ellipsis;
width: 90px; white-space: nowrap;
margin-right: 12px; font-size: 20px;
display: flex; font-family: Source Han Sans CN;
align-items: center; font-weight: bold;
justify-content: center; color: #333333;
img {
width: 90px;
height: 90px;
border-radius: 50%;
}
}
.content {
display: inline-block;
width: 390px;
.line {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
margin: 10px 0;
span {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333;
}
}
}
.keywords {
flex: 1;
width: 129px;
height: 129px;
}
.tit {
width: 100%;
overflow: hidden;
cursor: pointer;
.text {
margin-right: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
}
} }
}
} }
</style> </style>

161
src/views/website/searchList/index1.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<div class="index"> <div class="index">
<searchContainer bannerKey="首页>找成果" title="成果库" @handleQuery="handleQuery"> <searchContainer
bannerKey="首页>成果库>成果列表"
title="成果库"
@handleQuery="handleQuery"
>
<template v-slot> <template v-slot>
<el-row type="flex" style="padding: 20px 0;"> <el-row type="flex" style="padding: 20px 0">
<div style="flex: 1"> <div style="flex: 1">
<div style="position: relative;"> <div style="position: relative">
<industrySelect @industryChange="industryChange"></industrySelect> <industrySelect @industryChange="industryChange"></industrySelect>
<div class="total"> <div class="total">
共找到 共找到
@ -12,28 +16,37 @@
</div> </div>
<div v-loading="loading"> <div v-loading="loading">
<div class="item" v-for="item in state.list" :key="item.id"> <div class="item" v-for="item in state.list" :key="item.id">
<el-row type="flex" style="padding: 40px 20px;"> <el-row type="flex" style="padding: 40px 20px">
<div class="img"> <div class="img">
<!-- <img :src="item.image" alt /> --> <!-- <img :src="item.image" alt /> -->
<img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" alt /> <img
src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
alt
/>
</div> </div>
<div class="content"> <div class="content">
<div class="tit" @click="handleDetail(item.id)"> <div class="tit" @click="handleDetail(item.id)">
<div style="float: right;"> <div style="float: right">
<span>匹配度</span> <span>匹配度</span>
<el-rate style="display: inline-block" v-model="state.val" disabled></el-rate> <el-rate
style="display: inline-block"
v-model="state.val"
disabled
></el-rate>
</div> </div>
<div class="text" style="flex: 1">{{ item.name }}</div> <div class="text" style="flex: 1">{{ item.name }}</div>
</div> </div>
<div class="line"> <div class="line">
企业规模： <span>{{item.kind_title}}</span> 企业规模： <span>{{ item.kind_title }}</span>
</div> </div>
<div class="line"> <div class="line">
核心产品及应用场景： <span>{{item.product}}</span> 核心产品及应用场景： <span>{{ item.product }}</span>
</div> </div>
<div class="line"> <div class="line">
企业网站： <a :href="item.url"><span>{{item.url}}</span></a> 企业网站：
<a :href="item.url"
><span>{{ item.url }}</span></a
>
</div> </div>
</div> </div>
<div class="keywords" style="flex: 1"> <div class="keywords" style="flex: 1">
@ -63,16 +76,19 @@
<script setup> <script setup>
import webContact from "@/components/webContact/index.vue"; import webContact from "@/components/webContact/index.vue";
import request from '@/utils/request' import request from "@/utils/request";
const router = useRouter(); const router = useRouter();
import { onMounted } from 'vue'; import { onMounted } from "vue";
import searchContainer from './components/searchContainer.vue' import searchContainer from "./components/searchContainer.vue";
import industrySelect from './components/industrySelect.vue' import industrySelect from "./components/industrySelect.vue";
import wordcloud from './components/wordcloud.vue' import wordcloud from "./components/wordcloud.vue";
function handleDetail (id) { function handleDetail(id) {
let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: {keyword: state.keyword}}); let routeData = router.resolve({
window.open(routeData.href, '_blank'); path: `/searchList/0/detail/${id}`,
query: { keyword: state.keyword },
});
window.open(routeData.href, "_blank");
} }
const loading = ref(true); const loading = ref(true);
@ -81,33 +97,35 @@ const state = reactive({
total: 1, total: 1,
pageSize: 10, pageSize: 10,
pageSizes: [10, 10 << 1, 10 << 2, 10 << 3], pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
keyword: '', keyword: "",
industryList: [], industryList: [],
id1: '', id1: "",
id2: '', id2: "",
id3: '', id3: "",
val: 3, val: 3,
arr: [{ arr: [
"name": "Cat", {
"value": 26 name: "Cat",
}, value: 26,
{ },
"name": "fish", {
"value": 19 name: "fish",
}] value: 19,
},
],
}); });
function createdData(arr) { function createdData(arr) {
let l = []; let l = [];
let snap = JSON.parse(JSON.stringify(arr)) let snap = JSON.parse(JSON.stringify(arr));
snap.map(e=>{ snap.map((e) => {
l.push({name: e,value: 30}) l.push({ name: e, value: 30 });
return {name: e,value: 30} return { name: e, value: 30 };
}) });
return l; return l;
} }
function search () { function search() {
let industry = ''; let industry = "";
if (state.id1) { if (state.id1) {
industry += state.id1; industry += state.id1;
} }
@ -118,19 +136,23 @@ function search () {
industry += `-${state.id3}`; industry += `-${state.id3}`;
} }
return request({ return request({
url: '/v1/search', url: "/v1/search",
method: 'post', method: "post",
data: { industry, mode: 2, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword } data: {
}) industry,
mode: 2,
page_num: state.pageNum,
page_size: state.pageSize,
keyword: state.keyword,
},
});
} }
function handleQuery(keyword) {
function handleQuery (keyword) {
state.keyword = keyword; state.keyword = keyword;
getDataList() getDataList();
} }
function industryChange (industry) { function industryChange(industry) {
if (industry.id1) { if (industry.id1) {
state.id1 = industry.id1; state.id1 = industry.id1;
} }
@ -140,23 +162,27 @@ function industryChange (industry) {
if (industry.id3) { if (industry.id3) {
state.id3 = industry.id3; state.id3 = industry.id3;
} }
getDataList() getDataList();
} }
function getDataList () { function getDataList() {
loading.value = true; loading.value = true;
search().then(res => { search()
if (200 == res.code) { .then((res) => {
// 总条数 if (200 == res.code) {
state.total = res.data.count; // 总条数
state.list = res.data.data; // state.total = res.data.count;
// state.list = res.data.data;
// todo... detail页暂无
state.total = 0;
state.list = [];
loading.value = false;
}
})
.catch(() => {
loading.value = false; loading.value = false;
} });
}).catch(() => {
loading.value = false;
})
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -189,9 +215,9 @@ function getDataList () {
.img { .img {
width: 90px; width: 90px;
margin-right: 12px; margin-right: 12px;
display: flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
img { img {
width: 90px; width: 90px;
height: 90px; height: 90px;
@ -208,13 +234,12 @@ function getDataList () {
color: #666666; color: #666666;
margin: 10px 0; margin: 10px 0;
span { span {
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
} }
} }
.keywords { .keywords {
flex: 1; flex: 1;

121
src/views/website/searchList/index4.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<div class="index"> <div class="index">
<searchContainer bannerKey="首页>找专家" title="专家库" @handleQuery="handleQuery"> <searchContainer
bannerKey="首页>专家库>专家列表"
title="专家库"
@handleQuery="handleQuery"
>
<template v-slot> <template v-slot>
<el-row type="flex" style="padding: 20px 0;"> <el-row type="flex" style="padding: 20px 0">
<div style="flex: 1"> <div style="flex: 1">
<div style="position: relative;"> <div style="position: relative">
<industrySelect @industryChange="industryChange"></industrySelect> <industrySelect @industryChange="industryChange"></industrySelect>
<div class="total"> <div class="total">
共找到 共找到
@ -12,7 +16,7 @@
</div> </div>
<div v-loading="loading"> <div v-loading="loading">
<section v-for="item in state.list" :key="item.id"> <section v-for="item in state.list" :key="item.id">
<expertItem style="width: 661px;" :data="item"></expertItem> <expertItem style="width: 661px" :data="item"></expertItem>
</section> </section>
</div> </div>
@ -36,17 +40,20 @@
<script setup> <script setup>
import webContact from "@/components/webContact/index.vue"; import webContact from "@/components/webContact/index.vue";
import request from '@/utils/request' import request from "@/utils/request";
const router = useRouter(); const router = useRouter();
import { onMounted } from 'vue'; import { onMounted } from "vue";
import searchContainer from './components/searchContainer.vue' import searchContainer from "./components/searchContainer.vue";
import industrySelect from './components/industrySelect.vue' import industrySelect from "./components/industrySelect.vue";
import expertItem from './components/expertItem.vue' import expertItem from "./components/expertItem.vue";
import wordcloud from './components/wordcloud.vue' import wordcloud from "./components/wordcloud.vue";
function handleDetail (id) { function handleDetail(id) {
let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: {keyword: state.keyword}}); let routeData = router.resolve({
window.open(routeData.href, '_blank'); path: `/searchList/0/detail/${id}`,
query: { keyword: state.keyword },
});
window.open(routeData.href, "_blank");
} }
const loading = ref(true); const loading = ref(true);
@ -55,33 +62,35 @@ const state = reactive({
total: 1, total: 1,
pageSize: 10, pageSize: 10,
pageSizes: [10, 10 << 1, 10 << 2, 10 << 3], pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
keyword: '', keyword: "",
industryList: [], industryList: [],
id1: '', id1: "",
id2: '', id2: "",
id3: '', id3: "",
val: 3, val: 3,
arr: [{ arr: [
"name": "Cat", {
"value": 26 name: "Cat",
}, value: 26,
{ },
"name": "fish", {
"value": 19 name: "fish",
}] value: 19,
},
],
}); });
function createdData(arr) { function createdData(arr) {
let l = []; let l = [];
let snap = JSON.parse(JSON.stringify(arr)) let snap = JSON.parse(JSON.stringify(arr));
snap.map(e=>{ snap.map((e) => {
l.push({name: e,value: 30}) l.push({ name: e, value: 30 });
return {name: e,value: 30} return { name: e, value: 30 };
}) });
return l; return l;
} }
function search () { function search() {
let industry = ''; let industry = "";
if (state.id1) { if (state.id1) {
industry += state.id1; industry += state.id1;
} }
@ -92,19 +101,23 @@ function search () {
industry += `-${state.id3}`; industry += `-${state.id3}`;
} }
return request({ return request({
url: '/v1/search', url: "/v1/search",
method: 'post', method: "post",
data: { industry, mode: 5, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword } data: {
}) industry,
mode: 5,
page_num: state.pageNum,
page_size: state.pageSize,
keyword: state.keyword,
},
});
} }
function handleQuery(keyword) {
function handleQuery (keyword) {
state.keyword = keyword; state.keyword = keyword;
getDataList() getDataList();
} }
function industryChange (industry) { function industryChange(industry) {
if (industry.id1) { if (industry.id1) {
state.id1 = industry.id1; state.id1 = industry.id1;
} }
@ -114,23 +127,24 @@ function industryChange (industry) {
if (industry.id3) { if (industry.id3) {
state.id3 = industry.id3; state.id3 = industry.id3;
} }
getDataList() getDataList();
} }
function getDataList () { function getDataList() {
loading.value = true; loading.value = true;
search().then(res => { search()
if (200 == res.code) { .then((res) => {
// 总条数 if (200 == res.code) {
state.total = res.data.count; // 总条数
state.list = res.data.data; state.total = res.data.count;
state.list = res.data.data;
loading.value = false;
}
})
.catch(() => {
loading.value = false; loading.value = false;
} });
}).catch(() => {
loading.value = false;
})
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -153,5 +167,4 @@ function getDataList () {
min-height: 200px; min-height: 200px;
background-color: #fff; background-color: #fff;
} }
</style> </style>

1079
src/views/website/searchList/index4Detail.vue
View File

File diff suppressed because it is too large Load Diff

125
src/views/website/solution/solution.vue
View File

@ -1,21 +1,34 @@
<template> <template>
<div class="small" v-loading="loading"> <div class="small" v-loading="loading">
<div class="_title"> <div class="_title">
<div v-if="!state.banner" style="height: 394px; background-color: #108de9"></div> <div
v-if="!state.banner"
style="height: 394px; background-color: #108de9"
></div>
<div v-else style="height: 394px"> <div v-else style="height: 394px">
<img :src="state.banner" style="width: 100%;height: 100%;" alt="banner" /> <img
:src="state.banner"
style="width: 100%; height: 100%"
alt="banner"
/>
</div> </div>
<div v-if="state.caseList.length" class="_li" :class="isFixed ? '_fixed' : ''"> <div
v-if="state.caseList.length"
class="_li"
:class="isFixed ? '_fixed' : ''"
>
<ul class="conter1000"> <ul class="conter1000">
<li <li
:class="activeId == item.id ? '_active' : ''" :class="activeId == item.id ? '_active' : ''"
v-for="(item, index) in state.caseList" v-for="(item, index) in state.caseList"
:key="item.id" :key="item.id"
@click="setScrollTop(item.id, index)" @click="setScrollTop(item.id, index)"
>{{ item.title }}</li> >
{{ item.title }}
</li>
</ul> </ul>
</div> </div>
<h2 v-else style="text-align: center; line-height: 100px;">暂无数据</h2> <h2 v-else style="text-align: center; line-height: 100px">暂无数据</h2>
</div> </div>
<div class="box" v-show="!isShowMore"> <div class="box" v-show="!isShowMore">
<div <div
@ -25,13 +38,20 @@
:key="index" :key="index"
:data-id="item.id" :data-id="item.id"
> >
<h3 class="_tit text-center" style="font-size: 24px; color: #333333">{{ item.title }}</h3> <h3 class="_tit text-center" style="font-size: 24px; color: #333333">
{{ item.title }}
</h3>
<div class="_info conter1000"> <div class="_info conter1000">
<div class="_r" v-if="isOddEvenNumber(index)"> <div class="_r" v-if="isOddEvenNumber(index)">
<img :src="item.image" alt srcset /> <img :src="item.image" alt srcset />
</div> </div>
<div class="_l" :class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"> <div
<h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">{{ item.title }}</h3> class="_l"
:class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
>
<h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
{{ item.title }}
</h3>
<!-- <p>{{ item.description }}</p> --> <!-- <p>{{ item.description }}</p> -->
<p>{{ item.description }}</p> <p>{{ item.description }}</p>
</div> </div>
@ -41,14 +61,24 @@
</div> </div>
<div class="_list conter1400"> <div class="_list conter1400">
<ul> <ul>
<li v-for="child in item.children" :key="item.id" @click="handlePath(item.id)"> <li
<el-image style="width: 100%; height: 135px" :src="child.image" fit="cover"></el-image> v-for="child in item.children"
:key="child.id"
@click="handlePath(child.id)"
>
<el-image
style="width: 100%; height: 135px"
:src="child.image"
fit="cover"
></el-image>
<div class="_head text_hidden">{{ child.title }}</div> <div class="_head text_hidden">{{ child.title }}</div>
<div class="_detail text_hidden">{{ child.description }}</div> <div class="_detail text_hidden">{{ child.description }}</div>
</li> </li>
</ul> </ul>
<div class="_liBtn text-right"> <div class="_liBtn text-right">
<el-button class="x_btns" @click="handleShowMore(item)">查看更多</el-button> <el-button class="x_btns" @click="handleShowMore(item)"
>查看更多</el-button
>
</div> </div>
</div> </div>
</div> </div>
@ -65,27 +95,32 @@
import { nextTick, onMounted } from "vue"; import { nextTick, onMounted } from "vue";
import seeMore from "./components/seeMore.vue"; import seeMore from "./components/seeMore.vue";
import webFooter from "@/components/webFooter/index.vue"; import webFooter from "@/components/webFooter/index.vue";
import request from '@/utils/request' import request from "@/utils/request";
import { banner } from "@/api/website/home/index"; import { banner } from "@/api/website/home/index";
const router = useRouter(); const router = useRouter();
function handlePath (id) { function handlePath(id) {
let routeData = router.resolve({ path: `/solution/detail/${id}/`}); let routeData = router.resolve({ path: `/solution/detail/${id}/` });
window.open(routeData.href, '_blank'); window.open(routeData.href, "_blank");
} }
function solution_case (mode) { function solution_case(mode) {
return request({ return request({
url: '/v1/service/solution_case', url: "/v1/service/solution_case",
method: 'post', method: "post",
data: { mode } data: { mode },
}) });
} }
const loading = ref(true); const loading = ref(true);
const oneLevelTitle = ref({}); const oneLevelTitle = ref({});
const modeDict = { 'small': 101, 'large': 102, 'government': 103, 'scientific': 104 }; const modeDict = { small: 101, large: 102, government: 103, scientific: 104 };
const keyDict = { 'small': '解决方案>中小型企业', 'large': '解决方案>大型企业服务', 'government': '解决方案>政府区域服务', 'scientific': '解决方案>政府区域服务' }; const keyDict = {
small: "解决方案>中小型企业服务",
large: "解决方案>大型企业服务",
government: "解决方案>政府区域服务",
scientific: "解决方案>政府区域服务",
};
const isShowMore = ref(false); const isShowMore = ref(false);
const activeId = ref(""); const activeId = ref("");
const itemRefs = []; const itemRefs = [];
@ -96,41 +131,43 @@ const setItemRef = (el) => {
}; };
const state = reactive({ const state = reactive({
caseList: [], caseList: [],
banner: '' banner: "",
}); });
const scrollTop = ref(0); const scrollTop = ref(0);
const isFixed = ref(false); const isFixed = ref(false);
const route = useRoute(); const route = useRoute();
watch(route, () => { watch(route, () => {
init0() init0();
}) });
onMounted(() => { onMounted(() => {
init0() init0();
}); });
function init0 () { function init0() {
let name = route.params.name; let name = route.params.name;
if(!name) return if (!name) return;
let mode = modeDict[name]; let mode = modeDict[name];
let key = keyDict[name]; let key = keyDict[name];
solution_case(mode).then(res => { solution_case(mode).then((res) => {
if (200 == res.code) { if (200 == res.code) {
state.caseList = res.data state.caseList = res.data;
init(); init();
} }
}) });
loading.value = true; loading.value = true;
banner(key).then(res => { banner(key)
if (200 == res.code) { .then((res) => {
state.banner = res.data.images if (200 == res.code) {
state.banner = res.data.images;
loading.value = false;
}
})
.catch(() => {
loading.value = false; loading.value = false;
} });
}).catch(() => {
loading.value = false;
})
} }
function init () { function init() {
if (state.caseList.length) { if (state.caseList.length) {
activeId.value = state.caseList[0].id; activeId.value = state.caseList[0].id;
} }
@ -149,7 +186,7 @@ function init () {
}); });
}); });
} }
function getScroll () { function getScroll() {
return { return {
left: left:
window.pageXOffset || window.pageXOffset ||
@ -163,7 +200,7 @@ function getScroll () {
0, 0,
}; };
} }
function setScrollTop (id, index) { function setScrollTop(id, index) {
// if (isShowMore.value) return false; // if (isShowMore.value) return false;
isShowMore.value = false; isShowMore.value = false;
nextTick(() => { nextTick(() => {
@ -174,10 +211,10 @@ function setScrollTop (id, index) {
}); });
activeId.value = id; activeId.value = id;
} }
function isOddEvenNumber (num) { function isOddEvenNumber(num) {
return num % 2 == 0 ? false : true; return num % 2 == 0 ? false : true;
} }
function handleShowMore (item) { function handleShowMore(item) {
oneLevelTitle.value = item; oneLevelTitle.value = item;
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
@ -250,7 +287,7 @@ function handleShowMore (item) {
} }
} }
._r { ._r {
width: 520px; width: 420px;
background: #f2f6ff; background: #f2f6ff;
img { img {
width: 100%; width: 100%;