eslint问题修复
This commit is contained in:
parent
09518566c7
commit
6c10a4bb29
|
|
@ -1,3 +1,10 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-06-14 09:31:29
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-15 16:33:55
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
|
|
@ -15,6 +22,7 @@ module.exports = {
|
|||
ignorePatterns: [
|
||||
'src/supermap',
|
||||
'src/views/home/videoSurveillance',
|
||||
'src/views/vab/*',
|
||||
'src/utils/coordinateSystemTransform.js',
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
|
||||
"lint:fix": "eslint --fix --ext .js,.vue .",
|
||||
"fix": "eslint src/**/*.* --fix",
|
||||
"clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
|
||||
"use:npm": "nrm use npm",
|
||||
"use:taobao": "nrm use taobao",
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</script>
|
||||
<style lang="less">
|
||||
@import '~@/vab/styles/vab.less';
|
||||
#vue-admin-beautiful{
|
||||
#vue-admin-beautiful {
|
||||
max-width: 1920px;
|
||||
// max-height: 1080px;
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -83,14 +83,22 @@ export function dataResourceInfo(params) {
|
|||
//能力云图-调用趋势
|
||||
export function callTheTrendPort(start, end, params) {
|
||||
return request({
|
||||
url: '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' + start + '&end=' + end + '&step=' + params,
|
||||
url:
|
||||
'/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' +
|
||||
start +
|
||||
'&end=' +
|
||||
end +
|
||||
'&step=' +
|
||||
params,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-调用次数
|
||||
export function totalCallsSnum(params) {
|
||||
return request({
|
||||
url: '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + params,
|
||||
url:
|
||||
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' +
|
||||
params,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -342,7 +342,7 @@ export function getIntegrationServicesList(params) {
|
|||
return request({
|
||||
url: '/fuse/page',
|
||||
method: 'get',
|
||||
params
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -359,6 +359,6 @@ export function getDevelopDocTree(params) {
|
|||
return request({
|
||||
url: '/resource/selectDevelopDoc',
|
||||
method: 'get',
|
||||
params
|
||||
params,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ export function getMyComment(params) {
|
|||
}
|
||||
export function demandComment(params) {
|
||||
return request({
|
||||
url: '/demandComment/'+ params,
|
||||
url: '/demandComment/' + params,
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -50,7 +50,14 @@ const setting = {
|
|||
//路由模式，可选值为 history 或 hash
|
||||
routerMode: 'hash',
|
||||
//不经过token校验的路由
|
||||
routesWhiteList: ['/login', '/register', '/callback', '/404', '/403', '/capabilityCloud'], // 新增统计云图白名单
|
||||
routesWhiteList: [
|
||||
'/login',
|
||||
'/register',
|
||||
'/callback',
|
||||
'/404',
|
||||
'/403',
|
||||
'/capabilityCloud',
|
||||
], // 新增统计云图白名单
|
||||
//加载时显示文字
|
||||
loadingText: '正在加载中...',
|
||||
//token名称
|
||||
|
|
|
|||
|
|
@ -2,182 +2,182 @@
|
|||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改
|
||||
*/
|
||||
import { getUserInfo, login, logout } from '@/api/user'
|
||||
import {
|
||||
getAccessToken,
|
||||
removeAccessToken,
|
||||
setAccessToken,
|
||||
} from '@/utils/accessToken'
|
||||
import { title, tokenName } from '@/config'
|
||||
import { message, notification } from 'ant-design-vue'
|
||||
import { getUserInfo, login, logout } from '@/api/user'
|
||||
import {
|
||||
getAccessToken,
|
||||
removeAccessToken,
|
||||
setAccessToken,
|
||||
} from '@/utils/accessToken'
|
||||
import { title, tokenName } from '@/config'
|
||||
import { message, notification } from 'ant-design-vue'
|
||||
|
||||
const state = () => ({
|
||||
accessToken: getAccessToken(),
|
||||
username: '',
|
||||
userId: '',
|
||||
avatar: '',
|
||||
role: 0, // 用户管理员权限
|
||||
})
|
||||
const getters = {
|
||||
accessToken: (state) => state.accessToken,
|
||||
username: (state) => state.username,
|
||||
avatar: (state) => state.avatar,
|
||||
role: (state) => state.role,
|
||||
userId: (state) => state.userId,
|
||||
}
|
||||
const mutations = {
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置accessToken
|
||||
* @param {*} state
|
||||
* @param {*} accessToken
|
||||
*/
|
||||
setAccessToken(state, accessToken) {
|
||||
state.accessToken = accessToken
|
||||
setAccessToken(accessToken)
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置用户名
|
||||
* @param {*} state
|
||||
* @param {*} username
|
||||
*/
|
||||
setUsername(state, username) {
|
||||
state.username = username
|
||||
},
|
||||
// 设置角色
|
||||
setRole(state, role) {
|
||||
state.role = role
|
||||
},
|
||||
// 设置用户userId
|
||||
setUserId(state, id) {
|
||||
state.userId = id
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置头像
|
||||
* @param {*} state
|
||||
* @param {*} avatar
|
||||
*/
|
||||
setAvatar(state, avatar) {
|
||||
state.avatar = avatar
|
||||
},
|
||||
}
|
||||
const actions = {
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 登录拦截放行时，设置虚拟角色
|
||||
* @param {*} { commit, dispatch }
|
||||
*/
|
||||
setVirtualRoles({ commit, dispatch }) {
|
||||
dispatch('acl/setFull', true, {
|
||||
root: true,
|
||||
})
|
||||
commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif')
|
||||
commit('setUsername', 'admin(未开启登录拦截)')
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 登录
|
||||
* @param {*} { commit }
|
||||
* @param {*} userInfo
|
||||
*/
|
||||
async login({ commit }, userInfo) {
|
||||
const { data } = await login(userInfo)
|
||||
// debugger
|
||||
const accessToken = data.data[tokenName]
|
||||
if (accessToken) {
|
||||
commit('setAccessToken', accessToken)
|
||||
const hour = new Date().getHours()
|
||||
const thisTime =
|
||||
hour < 8
|
||||
? '早上好'
|
||||
: hour <= 11
|
||||
? '上午好'
|
||||
: hour <= 13
|
||||
? '中午好'
|
||||
: hour < 18
|
||||
? '下午好'
|
||||
: '晚上好'
|
||||
notification.open({
|
||||
message: `欢迎登录${title}`,
|
||||
description: `${thisTime}！`,
|
||||
})
|
||||
} else {
|
||||
message.error(`登录接口异常，未正确返回${tokenName}...`)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
|
||||
* @param {*} { commit, dispatch, state }
|
||||
* @returns
|
||||
*/
|
||||
async getUserInfo({ commit }) {
|
||||
const { data } = await getUserInfo()
|
||||
if (!data) {
|
||||
message.error(`验证失败，请重新登录...`)
|
||||
return false
|
||||
}
|
||||
// debugger
|
||||
commit('setUsername', data.data.realName)
|
||||
commit('setRole', data.data.roleIdList.length)
|
||||
commit('setUserId', data.data.id)
|
||||
// TODO 获取用户信息，后续执行部分操作
|
||||
// let { username, avatar, roles, ability } = data
|
||||
// if (username && roles && Array.isArray(roles)) {
|
||||
// dispatch('acl/setRole', roles, {
|
||||
// root: true,
|
||||
// })
|
||||
// if (ability && ability.length > 0)
|
||||
// dispatch('acl/setAbility', ability, {
|
||||
// root: true,
|
||||
// })
|
||||
// commit('setUsername', username)
|
||||
// commit('setAvatar', avatar)
|
||||
// } else {
|
||||
// message.error('用户信息接口异常')
|
||||
// }
|
||||
},
|
||||
const state = () => ({
|
||||
accessToken: getAccessToken(),
|
||||
username: '',
|
||||
userId: '',
|
||||
avatar: '',
|
||||
role: 0, // 用户管理员权限
|
||||
})
|
||||
const getters = {
|
||||
accessToken: (state) => state.accessToken,
|
||||
username: (state) => state.username,
|
||||
avatar: (state) => state.avatar,
|
||||
role: (state) => state.role,
|
||||
userId: (state) => state.userId,
|
||||
}
|
||||
const mutations = {
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置accessToken
|
||||
* @param {*} state
|
||||
* @param {*} accessToken
|
||||
*/
|
||||
setAccessToken(state, accessToken) {
|
||||
state.accessToken = accessToken
|
||||
setAccessToken(accessToken)
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置用户名
|
||||
* @param {*} state
|
||||
* @param {*} username
|
||||
*/
|
||||
setUsername(state, username) {
|
||||
state.username = username
|
||||
},
|
||||
// 设置角色
|
||||
setRole(state, role) {
|
||||
state.role = role
|
||||
},
|
||||
// 设置用户userId
|
||||
setUserId(state, id) {
|
||||
state.userId = id
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置头像
|
||||
* @param {*} state
|
||||
* @param {*} avatar
|
||||
*/
|
||||
setAvatar(state, avatar) {
|
||||
state.avatar = avatar
|
||||
},
|
||||
}
|
||||
const actions = {
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 登录拦截放行时，设置虚拟角色
|
||||
* @param {*} { commit, dispatch }
|
||||
*/
|
||||
setVirtualRoles({ commit, dispatch }) {
|
||||
dispatch('acl/setFull', true, {
|
||||
root: true,
|
||||
})
|
||||
commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif')
|
||||
commit('setUsername', 'admin(未开启登录拦截)')
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 登录
|
||||
* @param {*} { commit }
|
||||
* @param {*} userInfo
|
||||
*/
|
||||
async login({ commit }, userInfo) {
|
||||
const { data } = await login(userInfo)
|
||||
// debugger
|
||||
const accessToken = data.data[tokenName]
|
||||
if (accessToken) {
|
||||
commit('setAccessToken', accessToken)
|
||||
const hour = new Date().getHours()
|
||||
const thisTime =
|
||||
hour < 8
|
||||
? '早上好'
|
||||
: hour <= 11
|
||||
? '上午好'
|
||||
: hour <= 13
|
||||
? '中午好'
|
||||
: hour < 18
|
||||
? '下午好'
|
||||
: '晚上好'
|
||||
notification.open({
|
||||
message: `欢迎登录${title}`,
|
||||
description: `${thisTime}！`,
|
||||
})
|
||||
} else {
|
||||
message.error(`登录接口异常，未正确返回${tokenName}...`)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
|
||||
* @param {*} { commit, dispatch, state }
|
||||
* @returns
|
||||
*/
|
||||
async getUserInfo({ commit }) {
|
||||
const { data } = await getUserInfo()
|
||||
if (!data) {
|
||||
message.error(`验证失败，请重新登录...`)
|
||||
return false
|
||||
}
|
||||
// debugger
|
||||
commit('setUsername', data.data.realName)
|
||||
commit('setRole', data.data.roleIdList.length)
|
||||
commit('setUserId', data.data.id)
|
||||
// TODO 获取用户信息，后续执行部分操作
|
||||
// let { username, avatar, roles, ability } = data
|
||||
// if (username && roles && Array.isArray(roles)) {
|
||||
// dispatch('acl/setRole', roles, {
|
||||
// root: true,
|
||||
// })
|
||||
// if (ability && ability.length > 0)
|
||||
// dispatch('acl/setAbility', ability, {
|
||||
// root: true,
|
||||
// })
|
||||
// commit('setUsername', username)
|
||||
// commit('setAvatar', avatar)
|
||||
// } else {
|
||||
// message.error('用户信息接口异常')
|
||||
// }
|
||||
},
|
||||
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 退出登录
|
||||
* @param {*} { dispatch }
|
||||
*/
|
||||
async logout({ dispatch }) {
|
||||
await logout(state.accessToken)
|
||||
await dispatch('resetAll')
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 重置accessToken、roles、ability、router等
|
||||
* @param {*} { commit, dispatch }
|
||||
*/
|
||||
async resetAll({ dispatch }) {
|
||||
await dispatch('setAccessToken', '')
|
||||
await dispatch('acl/setFull', false, {
|
||||
root: true,
|
||||
})
|
||||
await dispatch('acl/setRole', [], {
|
||||
root: true,
|
||||
})
|
||||
await dispatch('acl/setAbility', [], {
|
||||
root: true,
|
||||
})
|
||||
removeAccessToken()
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置token
|
||||
*/
|
||||
setAccessToken({ commit }, accessToken) {
|
||||
commit('setAccessToken', accessToken)
|
||||
},
|
||||
}
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
}
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 退出登录
|
||||
* @param {*} { dispatch }
|
||||
*/
|
||||
async logout({ dispatch }) {
|
||||
await logout(state.accessToken)
|
||||
await dispatch('resetAll')
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 重置accessToken、roles、ability、router等
|
||||
* @param {*} { commit, dispatch }
|
||||
*/
|
||||
async resetAll({ dispatch }) {
|
||||
await dispatch('setAccessToken', '')
|
||||
await dispatch('acl/setFull', false, {
|
||||
root: true,
|
||||
})
|
||||
await dispatch('acl/setRole', [], {
|
||||
root: true,
|
||||
})
|
||||
await dispatch('acl/setAbility', [], {
|
||||
root: true,
|
||||
})
|
||||
removeAccessToken()
|
||||
},
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 设置token
|
||||
*/
|
||||
setAccessToken({ commit }, accessToken) {
|
||||
commit('setAccessToken', accessToken)
|
||||
},
|
||||
}
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ let loadingInstance
|
|||
* @param {*} code
|
||||
* @param {*} msg
|
||||
*/
|
||||
const handleCode = (code, msg, res) => {
|
||||
const handleCode = (code, msg) => {
|
||||
debugger
|
||||
switch (code) {
|
||||
case 401:
|
||||
|
|
@ -49,7 +49,7 @@ const handleCode = (code, msg, res) => {
|
|||
message.error(msg || '接口异常')
|
||||
break
|
||||
case 302:
|
||||
window.location.href = redirect
|
||||
// window.location.href = redirect
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
@ -74,8 +74,7 @@ instance.interceptors.request.use(
|
|||
(config) => {
|
||||
debugger
|
||||
const token = getAccessToken()
|
||||
if (token)
|
||||
config.headers[tokenName] = token
|
||||
if (token) config.headers[tokenName] = token
|
||||
if (
|
||||
config.data &&
|
||||
config.headers['Content-Type'] ===
|
||||
|
|
@ -105,7 +104,7 @@ instance.interceptors.response.use(
|
|||
response['Access-Control-Expose-Headers'] = 'redirect'
|
||||
const { code, message } = response.data
|
||||
debugger
|
||||
if (code=='0' && response.headers.token) {
|
||||
if (code == '0' && response.headers.token) {
|
||||
setAccessToken(response.headers.token)
|
||||
} else {
|
||||
const token = getAccessToken()
|
||||
|
|
|
|||
|
|
@ -2,65 +2,65 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-01 17:23:11
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-11 16:39:36
|
||||
* @LastEditTime: 2022-07-15 16:36:53
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
/**
|
||||
* @author chuzhixin 1204505056@qq.com
|
||||
* @description 路由守卫，目前两种模式：all模式与intelligence模式
|
||||
*/
|
||||
import router from '@/router'
|
||||
import store from '@/store'
|
||||
import getPageTitle from '@/utils/pageTitle'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
import {
|
||||
// authentication,
|
||||
loginInterception,
|
||||
// recordRoute,
|
||||
routesWhiteList,
|
||||
} from '@/config'
|
||||
import { setAccessToken, getAccessToken } from '@/utils/accessToken'
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
// debugger
|
||||
// const SSOTOKEN = to.query.SSOToken
|
||||
// if (SSOTOKEN) {
|
||||
// setAccessToken(SSOTOKEN)
|
||||
// }
|
||||
const token = getAccessToken()
|
||||
console.log('token', token)
|
||||
let hasToken = token || store.getters['user/accessToken']
|
||||
// debugger
|
||||
if (!loginInterception) hasToken = true
|
||||
console.log('hasToken存在巨大问题', hasToken)
|
||||
if (hasToken) {
|
||||
import router from '@/router'
|
||||
import store from '@/store'
|
||||
import getPageTitle from '@/utils/pageTitle'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
import {
|
||||
// authentication,
|
||||
loginInterception,
|
||||
// recordRoute,
|
||||
routesWhiteList,
|
||||
} from '@/config'
|
||||
import { getAccessToken } from '@/utils/accessToken'
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
// debugger
|
||||
// const SSOTOKEN = to.query.SSOToken
|
||||
// if (SSOTOKEN) {
|
||||
// setAccessToken(SSOTOKEN)
|
||||
// }
|
||||
const token = getAccessToken()
|
||||
console.log('token', token)
|
||||
let hasToken = token || store.getters['user/accessToken']
|
||||
// debugger
|
||||
if (!loginInterception) hasToken = true
|
||||
console.log('hasToken存在巨大问题', hasToken)
|
||||
if (hasToken) {
|
||||
// setAccessToken(hasToken)
|
||||
await store.dispatch('user/getUserInfo')
|
||||
debugger
|
||||
next()
|
||||
} else {
|
||||
let accessRoutes = []
|
||||
accessRoutes = await store.dispatch('routes/setRoutes')
|
||||
accessRoutes.forEach((item) => {
|
||||
router.addRoute(item)
|
||||
})
|
||||
if (routesWhiteList.indexOf(to.path) !== -1) {
|
||||
next()
|
||||
} else {
|
||||
await store.dispatch('user/getUserInfo')
|
||||
debugger
|
||||
next()
|
||||
} else {
|
||||
let accessRoutes = []
|
||||
accessRoutes = await store.dispatch('routes/setRoutes')
|
||||
accessRoutes.forEach((item) => {
|
||||
router.addRoute(item)
|
||||
})
|
||||
if (routesWhiteList.indexOf(to.path) !== -1) {
|
||||
next()
|
||||
} else {
|
||||
// 这里是一个单点登录的入口
|
||||
getUserInfo().then(res=>{
|
||||
getUserInfo().then((res) => {
|
||||
console.log(res)
|
||||
router.replace('/home')
|
||||
})
|
||||
// await store.dispatch('user/getUserInfo')
|
||||
// next()
|
||||
// if (recordRoute)
|
||||
// next({ path: '/login', query: { redirect: to.path }, replace: true })
|
||||
// else next({ path: '/login', replace: true })
|
||||
// if (recordRoute)
|
||||
// next({ path: '/login', query: { redirect: to.path }, replace: true })
|
||||
// else next({ path: '/login', replace: true })
|
||||
// next()
|
||||
// window.open('http://www.baidu.com', '_self')
|
||||
}
|
||||
}
|
||||
})
|
||||
router.afterEach((to) => {
|
||||
document.title = getPageTitle(to.meta.title)
|
||||
})
|
||||
// window.open('http://www.baidu.com', '_self')
|
||||
}
|
||||
}
|
||||
})
|
||||
router.afterEach((to) => {
|
||||
document.title = getPageTitle(to.meta.title)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -53,10 +53,7 @@
|
|||
v-for="(item, index) in contenBox"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
:src="item.note1"
|
||||
alt=""
|
||||
/>
|
||||
<img :src="item.note1" alt="" />
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p>
|
||||
发布时间
|
||||
|
|
|
|||
|
|
@ -10,159 +10,194 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
|
||||
<!-- 导航 -->
|
||||
<algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
|
||||
</algorithm-navigation>
|
||||
<algorithm-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></algorithm-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
|
||||
<algorithm-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="algorithm-associated-ability"
|
||||
class="scrollBox"
|
||||
></algorithm-associated-ability>
|
||||
<!-- 算法展示 视频 -->
|
||||
<algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
|
||||
<algorithm-display
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-display"
|
||||
class="scrollBox"
|
||||
></algorithm-display>
|
||||
<!-- 算法优势 -->
|
||||
<algorithm-advantage :dataList="dataList.data" id="algorithm-advantage" class="scrollBox"></algorithm-advantage>
|
||||
<algorithm-advantage
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-advantage"
|
||||
class="scrollBox"
|
||||
></algorithm-advantage>
|
||||
<!-- 应用场景和应用案例 -->
|
||||
<!-- <application-scenarios-and-case
|
||||
id="application-scenarios-and-case"
|
||||
class="scrollBox"
|
||||
></application-scenarios-and-case> -->
|
||||
<algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</algorithm-application-scenarios>
|
||||
<algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</algorithm-application-case>
|
||||
<algorithm-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></algorithm-application-scenarios>
|
||||
<algorithm-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></algorithm-application-case>
|
||||
<!-- 算法试用 -->
|
||||
<algorithm-on-trial :dataList="dataList.data" id="algorithm-on-trial" class="scrollBox"></algorithm-on-trial>
|
||||
<algorithm-on-trial
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-on-trial"
|
||||
class="scrollBox"
|
||||
></algorithm-on-trial>
|
||||
<!-- 计费标准 -->
|
||||
<algorithm-charging-standard :dataList="dataList.data" id="charging-standard" class="scrollBox">
|
||||
</algorithm-charging-standard>
|
||||
<algorithm-charging-standard
|
||||
:dataList="dataList.data"
|
||||
id="charging-standard"
|
||||
class="scrollBox"
|
||||
></algorithm-charging-standard>
|
||||
<!-- 使用方式 -->
|
||||
<algorithm-usage-mode :dataList="dataList.data" id="usage-mode" class="scrollBox"></algorithm-usage-mode>
|
||||
<algorithm-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="usage-mode"
|
||||
class="scrollBox"
|
||||
></algorithm-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</algorithm-common-problem>
|
||||
<algorithm-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></algorithm-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
|
||||
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
|
||||
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
|
||||
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
|
||||
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
|
||||
import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
|
||||
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
|
||||
import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
|
||||
import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
|
||||
import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
|
||||
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const loading = ref(true)
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
|
||||
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
|
||||
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
|
||||
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
|
||||
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
|
||||
import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
|
||||
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
|
||||
import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
|
||||
import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
|
||||
import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
|
||||
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const loading = ref(true)
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
console.log(id, '-------------------------------------------------')
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
const init = (id) => {
|
||||
console.log(id, '-------------------------------------------------')
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,179 +1,211 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-30 10:22:31
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-15 16:37:23
|
||||
* @Description: 应用详情页
|
||||
-->
|
||||
<template>
|
||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<application-top-details :dataList="dataList.data"></application-top-details>
|
||||
<application-top-details
|
||||
:dataList="dataList.data"
|
||||
></application-top-details>
|
||||
<!-- 导航 -->
|
||||
<application-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
|
||||
<application-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></application-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="application-associated-ability" class="scrollBox"></application-associated-ability>
|
||||
<application-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="application-associated-ability"
|
||||
class="scrollBox"
|
||||
></application-associated-ability>
|
||||
<!-- 应用展示 视频 -->
|
||||
<application-presentation :dataList="dataList.data" id="application-presentation" class="scrollBox">
|
||||
</application-presentation>
|
||||
<application-presentation
|
||||
:dataList="dataList.data"
|
||||
id="application-presentation"
|
||||
class="scrollBox"
|
||||
></application-presentation>
|
||||
<!-- 关联组件 -->
|
||||
<application-associated-components :dataList="dataList.data" id="application-associated-components"
|
||||
class="scrollBox" v-if="false"></application-associated-components>
|
||||
<application-associated-components
|
||||
:dataList="dataList.data"
|
||||
id="application-associated-components"
|
||||
class="scrollBox"
|
||||
v-if="false"
|
||||
></application-associated-components>
|
||||
|
||||
<!-- 功能介绍-->
|
||||
<application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</application-function-intorduction>
|
||||
<application-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></application-function-intorduction>
|
||||
<!-- 使用能力 -->
|
||||
<application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
|
||||
</application-ability-toise>
|
||||
<application-ability-toise
|
||||
:dataList="dataList.data"
|
||||
id="ability-to-use"
|
||||
class="scrollBox"
|
||||
></application-ability-toise>
|
||||
<!-- 部署与安全-->
|
||||
<application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
|
||||
</application-deployment-and-security>
|
||||
<application-deployment-and-security
|
||||
:dataList="dataList.data"
|
||||
id="deployment-and-security"
|
||||
class="scrollBox"
|
||||
></application-deployment-and-security>
|
||||
<!-- 归属部门与服务商-->
|
||||
<application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
|
||||
class="scrollBox"></application-owning-department-and-service-provider>
|
||||
<application-owning-department-and-service-provider
|
||||
:dataList="dataList.data"
|
||||
id="department-and-service-provider"
|
||||
class="scrollBox"
|
||||
></application-owning-department-and-service-provider>
|
||||
<!-- 常见问题-->
|
||||
<application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</application-common-problem>
|
||||
<application-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></application-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
|
||||
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
|
||||
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
|
||||
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
|
||||
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
|
||||
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
|
||||
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
|
||||
import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
|
||||
import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
|
||||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop-50)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
|
||||
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
|
||||
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
|
||||
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
|
||||
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
|
||||
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
|
||||
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
|
||||
import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
|
||||
import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
|
||||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop-50)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
console.log(
|
||||
'初始化详情页=========================>',
|
||||
dataList.data,
|
||||
arrList.value
|
||||
)
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
console.log(
|
||||
'初始化详情页=========================>',
|
||||
dataList.data,
|
||||
arrList.value
|
||||
)
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
type: item.type,
|
||||
}
|
||||
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
associatedComponents.value.map((item) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
type: item.type,
|
||||
}
|
||||
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
const associatedComponentsFunction = () => {
|
||||
if (
|
||||
associatedComponents.value[0].dataList.length > 0 ||
|
||||
associatedComponents.value[1].dataList.length > 0 ||
|
||||
associatedComponents.value[2].dataList.length > 0
|
||||
) {
|
||||
return associatedComponents.value
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
// const associatedComponentsFunction = () => {
|
||||
// if (
|
||||
// associatedComponents.value[0].dataList.length > 0 ||
|
||||
// associatedComponents.value[1].dataList.length > 0 ||
|
||||
// associatedComponents.value[2].dataList.length > 0
|
||||
// ) {
|
||||
// return associatedComponents.value
|
||||
// }
|
||||
// }
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,149 +10,177 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<business-top-details :dataList="dataList.data"></business-top-details>
|
||||
<!-- 导航 -->
|
||||
<business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
|
||||
<business-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></business-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="business-associated-ability" class="scrollBox"></business-associated-ability>
|
||||
<business-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="business-associated-ability"
|
||||
class="scrollBox"
|
||||
></business-associated-ability>
|
||||
<!-- 组件展示 -->
|
||||
<business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
|
||||
</business-presentation>
|
||||
<business-presentation
|
||||
:dataList="dataList.data"
|
||||
id="business-presentation"
|
||||
class="scrollBox"
|
||||
></business-presentation>
|
||||
<!-- 功能介绍-->
|
||||
<business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</business-function-intorduction>
|
||||
<business-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></business-function-intorduction>
|
||||
<!-- 应用场景 -->
|
||||
<business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</business-application-scenarios>
|
||||
<business-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></business-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</business-application-case>
|
||||
<business-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></business-application-case>
|
||||
<!-- 使用方式 -->
|
||||
<business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
|
||||
<business-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="business-usage-mode"
|
||||
class="scrollBox"
|
||||
></business-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
|
||||
<business-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></business-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
|
||||
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
|
||||
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
|
||||
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
|
||||
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
|
||||
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
|
||||
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
|
||||
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
|
||||
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
|
||||
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
|
||||
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
|
||||
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
|
||||
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
|
||||
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
|
||||
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
|
||||
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
|
||||
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 18:59:01
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-15 16:38:44
|
||||
* @Description: 开发组件详情页
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -10,157 +10,187 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<developer-top-details :dataList="dataList.data"></developer-top-details>
|
||||
<!-- 导航 -->
|
||||
<developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
|
||||
<developer-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponentsFunction()"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></developer-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
|
||||
<developer-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="developer-associated-ability"
|
||||
class="scrollBox"
|
||||
></developer-associated-ability>
|
||||
<!-- 组件展示 视频 -->
|
||||
<Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
|
||||
</Developer-presentation>
|
||||
<Developer-presentation
|
||||
:dataList="dataList.data"
|
||||
id="eveloper-presentation"
|
||||
class="scrollBox"
|
||||
></Developer-presentation>
|
||||
<!-- 功能介绍-->
|
||||
<developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</developer-function-intorduction>
|
||||
<developer-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></developer-function-intorduction>
|
||||
<!-- 应用场景 -->
|
||||
<developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</developer-application-scenarios>
|
||||
<developer-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></developer-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</developer-application-case>
|
||||
<developer-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></developer-application-case>
|
||||
<!-- 组件试用 -->
|
||||
<developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
|
||||
<developer-trial
|
||||
:dataList="dataList.data"
|
||||
id="developer-trial"
|
||||
class="scrollBox"
|
||||
></developer-trial>
|
||||
<!-- 归属部门与服务商-->
|
||||
<developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
|
||||
class="scrollBox"></developer-owning-department-and-service-provider>
|
||||
<developer-owning-department-and-service-provider
|
||||
:dataList="dataList.data"
|
||||
id="department-and-service-provider"
|
||||
class="scrollBox"
|
||||
></developer-owning-department-and-service-provider>
|
||||
<!-- 常见问题-->
|
||||
<developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</developer-common-problem>
|
||||
<developer-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></developer-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
|
||||
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
|
||||
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
|
||||
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
|
||||
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
|
||||
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
|
||||
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
|
||||
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
|
||||
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
|
||||
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
|
||||
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
|
||||
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
|
||||
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
|
||||
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
|
||||
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
|
||||
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
|
||||
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
|
||||
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
|
||||
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
})
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => { })
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
})
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map(() => {})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
const associatedComponentsFunction = () => {
|
||||
if (associatedComponents.value[0].dataList.length > 0) {
|
||||
return associatedComponents.value
|
||||
init(id)
|
||||
const associatedComponentsFunction = () => {
|
||||
if (associatedComponents.value[0].dataList.length > 0) {
|
||||
return associatedComponents.value
|
||||
}
|
||||
}
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,156 +8,188 @@
|
|||
<template>
|
||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
|
||||
<layer-service-top-details
|
||||
:dataList="dataList.data"
|
||||
></layer-service-top-details>
|
||||
<!-- 导航 -->
|
||||
<layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
|
||||
<layer-service-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></layer-service-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
|
||||
class="scrollBox" v-if="!loading"></layer-service-associated-ability>
|
||||
<layer-service-associated-ability
|
||||
:associatedComponents="associatedComponents"
|
||||
id="layer-service-associated-ability"
|
||||
class="scrollBox"
|
||||
v-if="!loading"
|
||||
></layer-service-associated-ability>
|
||||
<!-- 图层展示 视频 -->
|
||||
<layer-service-presentation :dataList="dataList.data" id="service-presentation" class="scrollBox">
|
||||
</layer-service-presentation>
|
||||
<layer-service-presentation
|
||||
:dataList="dataList.data"
|
||||
id="service-presentation"
|
||||
class="scrollBox"
|
||||
></layer-service-presentation>
|
||||
<!-- 图层信息-->
|
||||
<layer-service-information :dataList="dataList.data" id="service-information" class="scrollBox">
|
||||
</layer-service-information>
|
||||
<layer-service-information
|
||||
:dataList="dataList.data"
|
||||
id="service-information"
|
||||
class="scrollBox"
|
||||
></layer-service-information>
|
||||
<!-- 应用场景 -->
|
||||
<layer-service-application-scenarios :dataList="dataList.data" id="service-application-scenarios" class="scrollBox">
|
||||
</layer-service-application-scenarios>
|
||||
<layer-service-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="service-application-scenarios"
|
||||
class="scrollBox"
|
||||
></layer-service-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<layer-service-application-case :dataList="dataList.data" id="service-application-case" class="scrollBox">
|
||||
</layer-service-application-case>
|
||||
<layer-service-application-case
|
||||
:dataList="dataList.data"
|
||||
id="service-application-case"
|
||||
class="scrollBox"
|
||||
></layer-service-application-case>
|
||||
<!-- 图层预览 -->
|
||||
<layer-service-preview :dataList="dataList.data" id="service-preview" class="scrollBox"></layer-service-preview>
|
||||
<layer-service-preview
|
||||
:dataList="dataList.data"
|
||||
id="service-preview"
|
||||
class="scrollBox"
|
||||
></layer-service-preview>
|
||||
<!-- 使用方式-->
|
||||
<layer-service-usage-mode :dataList="dataList.data" id="service-usage-mode" class="scrollBox">
|
||||
</layer-service-usage-mode>
|
||||
<layer-service-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="service-usage-mode"
|
||||
class="scrollBox"
|
||||
></layer-service-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<layer-service-common-problem :dataList="dataList.data" id="service-common-problem" class="scrollBox">
|
||||
</layer-service-common-problem>
|
||||
<layer-service-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="service-common-problem"
|
||||
class="scrollBox"
|
||||
></layer-service-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
|
||||
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
|
||||
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
|
||||
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
|
||||
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
|
||||
import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
|
||||
import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
|
||||
import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
|
||||
import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
|
||||
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
|
||||
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
|
||||
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
|
||||
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
|
||||
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
|
||||
import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
|
||||
import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
|
||||
import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
|
||||
import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
|
||||
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
align-items: center;
|
||||
.item {
|
||||
width: 424px;
|
||||
height:306px;
|
||||
height: 306px;
|
||||
padding: 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@
|
|||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '试用地址' && item.attrValue)[0]
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '试用地址' && item.attrValue
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { paddleocr,algo } from '@/api/file'
|
||||
import { algo } from '@/api/file'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
|
@ -85,10 +85,12 @@
|
|||
const imageResult1 = ref('')
|
||||
const menuOpenKeys2 = ref(['全文还原'])
|
||||
// 图片初始化
|
||||
let responseUrl = ref('static/image/' + router.currentRoute.value.query.exampleImg)
|
||||
let responseUrl = ref(
|
||||
'static/image/' + router.currentRoute.value.query.exampleImg
|
||||
)
|
||||
const imgType = router.currentRoute.value.query.exampleImg.split('.')[1]
|
||||
const handleChange = (info) => {
|
||||
debugger;
|
||||
debugger
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList)
|
||||
}
|
||||
|
|
@ -111,7 +113,7 @@
|
|||
company: router.currentRoute.value.query.company,
|
||||
algorithmName: router.currentRoute.value.query.algorithmName,
|
||||
data: base64.split('base64,')[1],
|
||||
type: router.currentRoute.value.query.type
|
||||
type: router.currentRoute.value.query.type,
|
||||
}
|
||||
algo(param).then((res) => {
|
||||
// wordValue.value = res.data
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { correct,algo } from '@/api/file'
|
||||
import { algo } from '@/api/file'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
// const keyId = router.currentRoute.value.query.id
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
company: router.currentRoute.value.query.company,
|
||||
algorithmName: router.currentRoute.value.query.algorithmName,
|
||||
data: wordValue.value,
|
||||
type: router.currentRoute.value.query.type
|
||||
type: router.currentRoute.value.query.type,
|
||||
}
|
||||
// correct(param).then((res) => {
|
||||
// // wordContent.value = res.data.data
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
// errorWordContent.value = val.value
|
||||
// })
|
||||
// })
|
||||
algo(param).then(res=>{
|
||||
algo(param).then((res) => {
|
||||
errorWord.value = res.data.data.text_data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,127 +16,125 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-else class="no-data">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '常见问题'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '常见问题'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpmmon-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 160px;
|
||||
background: #f7f8fa;
|
||||
.cpmmon-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 160px;
|
||||
background: #f7f8fa;
|
||||
|
||||
.content {
|
||||
width: 1300px;
|
||||
margin: 20px 0px;
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
.content {
|
||||
width: 1300px;
|
||||
margin: 20px 0px;
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
|
||||
.content-son {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
.content-son {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
.content-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.content-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
line-height: 34px;
|
||||
color: #666666;
|
||||
}
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
line-height: 34px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.content-top,
|
||||
.content-bottom {
|
||||
div:last-child {
|
||||
width: calc(100% - 54px);
|
||||
.content-top,
|
||||
.content-bottom {
|
||||
div:last-child {
|
||||
width: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
|
||||
.top-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.bottom-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
|
||||
ackground-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.bottom-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
|
||||
ackground-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 20px;
|
||||
.content-son:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-son:last-child {
|
||||
margin-bottom: 0px;
|
||||
.no-data {
|
||||
background: transparent !important;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
background: transparent !important;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,26 +7,42 @@
|
|||
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
">
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div class="tab-top" :class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
">
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
|
||||
<a-image
|
||||
:width="635"
|
||||
:height="340"
|
||||
:src="itemSonTitle.img"
|
||||
v-if="itemSonTitle.img"
|
||||
></a-image>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
|
|
@ -44,215 +60,215 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '功能介绍'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '功能介绍'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
)
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '功能介绍' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '功能介绍' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
}
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize() {
|
||||
return tabindex.value
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name) {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
}
|
||||
}
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize() {
|
||||
return tabindex.value
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name) {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.function-intorduction {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
.function-intorduction {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
overflow-x: unset;
|
||||
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
|
||||
.tab-son {
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
}
|
||||
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
}
|
||||
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,18 @@
|
|||
<template>
|
||||
<div class="application-presentation" v-if="flag">
|
||||
<detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
|
||||
<div class="main" :style="`${img}background-position:center;background-size:cover;`">
|
||||
<div
|
||||
class="main"
|
||||
:style="`${img}background-position:center;background-size:cover;`"
|
||||
>
|
||||
<div class="play" @click="showModal"></div>
|
||||
</div>
|
||||
<a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
|
|
@ -22,106 +30,106 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
height: '4.00rem', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
height: '4.00rem', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频'
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用图片'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,11 @@
|
|||
加入购物车
|
||||
</a-button> -->
|
||||
<!-- 融合服务 存在fuseResourceList -->
|
||||
<a-button type="primary" @click="handleAKeyApplication()" v-if="dataList.fuseResourceList">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleAKeyApplication()"
|
||||
v-if="dataList.fuseResourceList"
|
||||
>
|
||||
<template #icon>
|
||||
<form-outlined />
|
||||
</template>
|
||||
|
|
@ -66,223 +70,220 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import { scInsert } from '@/api/personalCenter'
|
||||
// import { sgcInsert } from '@/api/home'
|
||||
// import { useRouter } from 'vue-router'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import { scInsert } from '@/api/personalCenter'
|
||||
// import { sgcInsert } from '@/api/home'
|
||||
// import { useRouter } from 'vue-router'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
|
||||
console.log('dataList------------>', props.dataList);
|
||||
|
||||
// const router = useRouter()
|
||||
const applicationArea = ref('')
|
||||
// // 加入申购车
|
||||
// const addShoppingCart = () => {
|
||||
// console.log('加入申购车==================>', props.dataList)
|
||||
// sgcInsert({
|
||||
// delFlag: '0',
|
||||
// resourceId: props.dataList.id,
|
||||
// // userId: userId.value,
|
||||
// }).then((res) => {
|
||||
// console.log(res)
|
||||
// message.success('添加申购车成功！')
|
||||
// mybus.emit('getSgcNum')
|
||||
// })
|
||||
// }
|
||||
// // 立即申请
|
||||
// function toView() {
|
||||
// // window.open(newpage.href, '_blank')
|
||||
// router.push({
|
||||
// path: '/apply',
|
||||
// query: {
|
||||
// name: props.dataList.name,
|
||||
// resourceId: [props.dataList.id],
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
// 融合服务--一键申请
|
||||
const handleAKeyApplication = () => {
|
||||
let _applyList = [];
|
||||
(props.dataList.fuseResourceList || []).map(v => {
|
||||
let resource = v.resource || {}
|
||||
let obj = {
|
||||
arr: [
|
||||
{
|
||||
delFlag: resource.delFlag,
|
||||
description: resource.description,
|
||||
resourceId: resource.id,
|
||||
resourceName: resource.name,
|
||||
time: resource.createDate,
|
||||
type: resource.type,
|
||||
},
|
||||
],
|
||||
deptId: resource.deptId,
|
||||
deptName: resource.deptName,
|
||||
}
|
||||
_applyList.push(obj)
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
|
||||
localStorage.setItem(
|
||||
'applyList',
|
||||
JSON.stringify(_applyList)
|
||||
)
|
||||
router.push({
|
||||
path: '/apply',
|
||||
})
|
||||
}
|
||||
console.log('dataList------------>', props.dataList)
|
||||
|
||||
// 收藏
|
||||
const goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
})
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
console.log('props.dataList-----watch------->', val);
|
||||
// const router = useRouter()
|
||||
const applicationArea = ref('')
|
||||
// // 加入申购车
|
||||
// const addShoppingCart = () => {
|
||||
// console.log('加入申购车==================>', props.dataList)
|
||||
// sgcInsert({
|
||||
// delFlag: '0',
|
||||
// resourceId: props.dataList.id,
|
||||
// // userId: userId.value,
|
||||
// }).then((res) => {
|
||||
// console.log(res)
|
||||
// message.success('添加申购车成功！')
|
||||
// mybus.emit('getSgcNum')
|
||||
// })
|
||||
// }
|
||||
// // 立即申请
|
||||
// function toView() {
|
||||
// // window.open(newpage.href, '_blank')
|
||||
// router.push({
|
||||
// path: '/apply',
|
||||
// query: {
|
||||
// name: props.dataList.name,
|
||||
// resourceId: [props.dataList.id],
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
// 融合服务--一键申请
|
||||
const handleAKeyApplication = () => {
|
||||
let _applyList = []
|
||||
;(props.dataList.fuseResourceList || []).map((v) => {
|
||||
let resource = v.resource || {}
|
||||
let obj = {
|
||||
arr: [
|
||||
{
|
||||
delFlag: resource.delFlag,
|
||||
description: resource.description,
|
||||
resourceId: resource.id,
|
||||
resourceName: resource.name,
|
||||
time: resource.createDate,
|
||||
type: resource.type,
|
||||
},
|
||||
],
|
||||
deptId: resource.deptId,
|
||||
deptName: resource.deptName,
|
||||
}
|
||||
_applyList.push(obj)
|
||||
})
|
||||
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
}
|
||||
localStorage.setItem('applyList', JSON.stringify(_applyList))
|
||||
router.push({
|
||||
path: '/apply',
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
// 收藏
|
||||
const goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
})
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
console.log('props.dataList-----watch------->', val)
|
||||
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-top-details {
|
||||
height: 6rem;
|
||||
padding: 1.8rem 0 0;
|
||||
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
max-width: 7.2rem;
|
||||
color: #fff;
|
||||
margin-right: 0.8rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
// max-width: 3.3rem;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
max-width: 7rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.label-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lable-father {
|
||||
position: absolute;
|
||||
min-width: 3.5rem;
|
||||
right: -3.5rem;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0.01rem 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
border-radius: 0.13rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.18rem;
|
||||
line-height: 0.34rem;
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&>div:nth-of-type(2) {
|
||||
max-height: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
height: 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
background: #ff8b55;
|
||||
border-radius: 0.06rem;
|
||||
font-size: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-btn:nth-of-type(1) {
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.ant-btn:nth-of-type(2) {
|
||||
width: 2.2rem;
|
||||
}
|
||||
|
||||
.ant-btn:nth-of-type(3) {
|
||||
width: 1.45rem;
|
||||
background: #fff;
|
||||
color: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 5.8rem;
|
||||
height: 4rem;
|
||||
background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
|
||||
.algorithm-top-details {
|
||||
height: 6rem;
|
||||
padding: 1.8rem 0 0;
|
||||
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: -0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
max-width: 7.2rem;
|
||||
color: #fff;
|
||||
margin-right: 0.8rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
// max-width: 3.3rem;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
max-width: 7rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.label-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lable-father {
|
||||
position: absolute;
|
||||
min-width: 3.5rem;
|
||||
right: -3.5rem;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0.01rem 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
border-radius: 0.13rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.18rem;
|
||||
line-height: 0.34rem;
|
||||
|
||||
& > div:nth-of-type(1) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
max-height: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
height: 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
background: #ff8b55;
|
||||
border-radius: 0.06rem;
|
||||
font-size: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-btn:nth-of-type(1) {
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.ant-btn:nth-of-type(2) {
|
||||
width: 2.2rem;
|
||||
}
|
||||
|
||||
.ant-btn:nth-of-type(3) {
|
||||
width: 1.45rem;
|
||||
background: #fff;
|
||||
color: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 5.8rem;
|
||||
height: 4rem;
|
||||
background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: -0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@
|
|||
<template>
|
||||
<div class="business-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
|
@ -16,217 +21,217 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'business-usage-mode',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const select = ref('business-associated-ability')
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length > 0) {
|
||||
// 存在关联应用时在导航栏加入关联应用
|
||||
navList.value.unshift({
|
||||
name: '关联应用',
|
||||
key: 'business-associated-ability',
|
||||
show: true,
|
||||
})
|
||||
// list.value.push('关联应用')
|
||||
console.log('navList', navList)
|
||||
}
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'business-usage-mode',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
}
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '功能介绍' ||
|
||||
item.attrType === '应用场景' ||
|
||||
item.attrType === '应用案例'
|
||||
) {
|
||||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
item.show = true
|
||||
const select = ref('business-associated-ability')
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length > 0) {
|
||||
// 存在关联应用时在导航栏加入关联应用
|
||||
navList.value.unshift({
|
||||
name: '关联应用',
|
||||
key: 'business-associated-ability',
|
||||
show: true,
|
||||
})
|
||||
// list.value.push('关联应用')
|
||||
console.log('navList', navList)
|
||||
}
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => (item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
watch(
|
||||
() => props.selectNow,
|
||||
(newValue) => {
|
||||
select.value = newValue
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
// console.log('排序==============>', a, b)
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
val.infoList.map((item) => {
|
||||
if (
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '功能介绍' ||
|
||||
item.attrType === '应用场景' ||
|
||||
item.attrType === '应用案例'
|
||||
) {
|
||||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '功能介绍' ||
|
||||
item.attrType === '应用场景' ||
|
||||
item.attrType === '应用案例'
|
||||
) {
|
||||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) =>
|
||||
(item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
} else {
|
||||
item.show = true
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => (item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.selectNow,
|
||||
(newValue) => {
|
||||
select.value = newValue
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
// console.log('排序==============>', a, b)
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
val.infoList.map((item) => {
|
||||
if (
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '功能介绍' ||
|
||||
item.attrType === '应用场景' ||
|
||||
item.attrType === '应用案例'
|
||||
) {
|
||||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
item.show = true
|
||||
}
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) =>
|
||||
(item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.business-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 0.24rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 3rem;
|
||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||
position: relative;
|
||||
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
.business-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 0.24rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 3rem;
|
||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||
position: relative;
|
||||
|
||||
.line {
|
||||
width: 0.4rem;
|
||||
height: 0.04rem;
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 0.4rem;
|
||||
height: 0.04rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #526aff;
|
||||
|
||||
.line {
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #526aff;
|
||||
|
||||
.line {
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,54 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="groupArray.length > 0">
|
||||
<div class="group-box" v-for="(data, i) in groupArray" :key="i">
|
||||
<div class="flex-row-start row-tr" v-for="(item, j) in Object.keys(data)" :key="j"
|
||||
:class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''">
|
||||
<div class="td-name">{{ item }}</div>
|
||||
<div class="flex-row-start">
|
||||
<div class="td" v-for="(d, k) in data[item]" :key="k">{{ d || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="groupArray.length > 0">
|
||||
<div class="group-box" v-for="(data, i) in groupArray" :key="i">
|
||||
<div
|
||||
class="flex-row-start row-tr"
|
||||
v-for="(item, j) in Object.keys(data)"
|
||||
:key="j"
|
||||
:class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''"
|
||||
>
|
||||
<div class="td-name">{{ item }}</div>
|
||||
<div class="flex-row-start">
|
||||
<div class="td" v-for="(d, k) in data[item]" :key="k">
|
||||
{{ d || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ '哈啊哈哈哈哈' + groupArray.length }}
|
||||
<div v-if="groupArray.length == 0" class="no-data">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ '哈啊哈哈哈哈' + groupArray.length }}
|
||||
<div v-if="groupArray.length == 0" class="no-data">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from 'vue'
|
||||
export default {
|
||||
props: ["dataList"],
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
export default {
|
||||
props: ['dataList'],
|
||||
setup(props) {
|
||||
let groupArray = ref([])
|
||||
watch(
|
||||
() => {
|
||||
return props.dataList
|
||||
},
|
||||
(newVal) => {
|
||||
console.log('newVal------------>', newVal);
|
||||
groupArray = ref([])
|
||||
newVal.map(v => {
|
||||
groupArray.value.push(v)
|
||||
})
|
||||
groupArray.value = groupArray.value.splice(0)
|
||||
nextTick(() => {
|
||||
console.log('groupArray---子组件--------->', groupArray.value);
|
||||
})
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
groupArray,
|
||||
let groupArray = ref([])
|
||||
watch(
|
||||
() => {
|
||||
return props.dataList
|
||||
},
|
||||
(newVal) => {
|
||||
console.log('newVal------------>', newVal)
|
||||
groupArray = ref([])
|
||||
newVal.map((v) => {
|
||||
groupArray.value.push(v)
|
||||
})
|
||||
groupArray.value = groupArray.value.splice(0)
|
||||
nextTick(() => {
|
||||
console.log('groupArray---子组件--------->', groupArray.value)
|
||||
})
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
groupArray,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <script setup>
|
||||
|
|
@ -79,44 +84,43 @@ nextTick(() => {
|
|||
</script> -->
|
||||
|
||||
<style lang="less" scoped>
|
||||
.group-box {
|
||||
.group-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
.border {
|
||||
border: 1px solid #dddee1;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.row-tr {
|
||||
.row-tr {
|
||||
border: 1px solid #dddee1;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.no-border-right {
|
||||
.no-border-right {
|
||||
border: 1px solid #dddee1;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row-start {
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.td-name {
|
||||
.td-name {
|
||||
border-right: 1px solid #dddee1;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.td {
|
||||
.td {
|
||||
border-right: 1px solid #dddee1;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
|
@ -128,18 +132,18 @@ nextTick(() => {
|
|||
word-wrap: break-all;
|
||||
word-break: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #dddee1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
.no-data {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dddee1;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,68 @@
|
|||
export const titleNameArray = [
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-zj.png'),
|
||||
name: '组件服务',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-yy.png'),
|
||||
name: '应用资源',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-jc.png'),
|
||||
name: '基础设施',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-sj.png'),
|
||||
name: '数据资源',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-zs.png'),
|
||||
name: '知识库',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-zj.png'),
|
||||
name: '组件服务',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-yy.png'),
|
||||
name: '应用资源',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-jc.png'),
|
||||
name: '基础设施',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-sj.png'),
|
||||
name: '数据资源',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/banner-zs.png'),
|
||||
name: '知识库',
|
||||
},
|
||||
]
|
||||
|
||||
// 模糊查询
|
||||
export const keyongziyuanqingkaungArray = [
|
||||
{
|
||||
name: 'CPU/核：',
|
||||
value: 2102,
|
||||
},
|
||||
{
|
||||
name: '内存/T：',
|
||||
value: 6.68,
|
||||
},
|
||||
{
|
||||
name: '存储/T：',
|
||||
value: 2102,
|
||||
},
|
||||
{
|
||||
name: 'RDS for Mysql/G：',
|
||||
value: 982.82,
|
||||
},
|
||||
{
|
||||
name: 'RDS for SqlServer/G：',
|
||||
value: 997.17,
|
||||
},
|
||||
{
|
||||
name: 'CPU/核：',
|
||||
value: 2102,
|
||||
},
|
||||
{
|
||||
name: '内存/T：',
|
||||
value: 6.68,
|
||||
},
|
||||
{
|
||||
name: '存储/T：',
|
||||
value: 2102,
|
||||
},
|
||||
{
|
||||
name: 'RDS for Mysql/G：',
|
||||
value: 982.82,
|
||||
},
|
||||
{
|
||||
name: 'RDS for SqlServer/G：',
|
||||
value: 997.17,
|
||||
},
|
||||
]
|
||||
|
||||
export const shujuziyuanqingkuangArray = [
|
||||
{
|
||||
name: '已上线目录：',
|
||||
value: 10372,
|
||||
danwei: '条',
|
||||
},
|
||||
{
|
||||
name: '已发布服务：',
|
||||
value: 1080,
|
||||
danwei: '条',
|
||||
},
|
||||
{
|
||||
name: '已发布接口：',
|
||||
value: 976,
|
||||
danwei: '条',
|
||||
},
|
||||
{
|
||||
name: '更新时间：',
|
||||
value: '2022-05-06',
|
||||
},
|
||||
]
|
||||
{
|
||||
name: '已上线目录：',
|
||||
value: 10372,
|
||||
danwei: '条',
|
||||
},
|
||||
{
|
||||
name: '已发布服务：',
|
||||
value: 1080,
|
||||
danwei: '条',
|
||||
},
|
||||
{
|
||||
name: '已发布接口：',
|
||||
value: 976,
|
||||
danwei: '条',
|
||||
},
|
||||
{
|
||||
name: '更新时间：',
|
||||
value: '2022-05-06',
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,263 +1,280 @@
|
|||
<template>
|
||||
<!-- 青岛 -->
|
||||
<div class="details-pageconetent">
|
||||
<home-header></home-header>
|
||||
<div class="top">
|
||||
<div class="resultListSearchInput-father">
|
||||
<div class="resultListSearchInput-son">
|
||||
模糊搜索
|
||||
<a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
|
||||
@search="getAppResources" @change="onSearch" class="resultListSearchInput" />
|
||||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||||
<div class="hengxian"></div>
|
||||
</div>
|
||||
</div>
|
||||
<searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
|
||||
:resourceList="resourceList" :resourceTotal="resourceTotal" selectCardsname="融合服务" />
|
||||
<div class="pagination">
|
||||
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
|
||||
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
|
||||
:total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
|
||||
@showSizeChange="onShowSizeChange" />
|
||||
</div>
|
||||
<div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
|
||||
<a-empty />
|
||||
</div>
|
||||
<!-- 青岛 -->
|
||||
<div class="details-pageconetent">
|
||||
<home-header></home-header>
|
||||
<div class="top">
|
||||
<div class="resultListSearchInput-father">
|
||||
<div class="resultListSearchInput-son">
|
||||
模糊搜索
|
||||
<a-input-search
|
||||
v-model:value="searchValue"
|
||||
placeholder="请输入关键词"
|
||||
enter-button="搜索"
|
||||
size="large"
|
||||
@search="getAppResources"
|
||||
@change="onSearch"
|
||||
class="resultListSearchInput"
|
||||
/>
|
||||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||||
<div class="hengxian"></div>
|
||||
</div>
|
||||
</div>
|
||||
<searchResultList
|
||||
v-show="resourceList.data && resourceList.data.length > 0"
|
||||
:key="listKey2"
|
||||
:resourceList="resourceList"
|
||||
:resourceTotal="resourceTotal"
|
||||
selectCardsname="融合服务"
|
||||
/>
|
||||
<div class="pagination">
|
||||
<a-pagination
|
||||
v-if="resourceList.data && resourceList.data.length > 0"
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="currentPageSize"
|
||||
show-size-changer
|
||||
show-less-items
|
||||
show-quick-jumper
|
||||
:total="resourceTotal"
|
||||
:page-size-options="pageSizeOptions"
|
||||
@change="pageChange"
|
||||
@showSizeChange="onShowSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||||
style="margin-top: 2rem"
|
||||
>
|
||||
<a-empty />
|
||||
</div>
|
||||
</div>
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
<home-footer></home-footer>
|
||||
</template>
|
||||
<script>
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
onMounted,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
|
||||
|
||||
import {
|
||||
getIntegrationServicesList,
|
||||
} from '@/api/home.js'
|
||||
import { useRouter } from 'vue-router'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getIntegrationServicesList } from '@/api/home.js'
|
||||
import { useRouter } from 'vue-router'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
export default defineComponent({
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// 分页
|
||||
const loading = ref(true)
|
||||
const currentPage = ref(1)
|
||||
const currentPageSize = ref(5)
|
||||
const pageSizeOptions = ref(['5', '10', '20', '50'])
|
||||
const router = useRouter()
|
||||
const select = router.currentRoute.value.query.select
|
||||
const searchValue = ref('')
|
||||
const Cardsname = ref(select)
|
||||
const resourceList = reactive({ data: [] })
|
||||
const resourceTotal = ref(0)
|
||||
const current = ref(1)
|
||||
// 刷新筛选条件组件
|
||||
let listKey = ref(0)
|
||||
// 刷新筛选列表信息组件
|
||||
const listKey2 = ref(0)
|
||||
|
||||
// 查询参数
|
||||
const paramsGetResources = {
|
||||
pageNum: 1,
|
||||
pageSize: currentPageSize.value,
|
||||
type: Cardsname.value,
|
||||
name: '',
|
||||
orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
||||
orderType: 'DESC', // ASC 升序 DESC 降序
|
||||
}
|
||||
|
||||
// 查询
|
||||
const onSearch = () => {
|
||||
loading.value = true
|
||||
currentPage.value = 1
|
||||
}
|
||||
// 重置数据
|
||||
const chongzhi = () => {
|
||||
loading.value = true
|
||||
// 重置模糊查字段
|
||||
searchValue.value = ''
|
||||
// 分页
|
||||
const loading = ref(true)
|
||||
const currentPage = ref(1)
|
||||
const currentPageSize = ref(5)
|
||||
const pageSizeOptions = ref(['5', '10', '20', '50'])
|
||||
const router = useRouter()
|
||||
const select = router.currentRoute.value.query.select
|
||||
const searchValue = ref('')
|
||||
const Cardsname = ref(select)
|
||||
const resourceList = reactive({ data: [] })
|
||||
const resourceTotal = ref(0)
|
||||
const current = ref(1)
|
||||
// 刷新筛选条件组件
|
||||
let listKey = ref(0)
|
||||
// 刷新筛选列表信息组件
|
||||
const listKey2 = ref(0)
|
||||
|
||||
// 查询参数
|
||||
const paramsGetResources = {
|
||||
pageNum: 1,
|
||||
pageSize: currentPageSize.value,
|
||||
type: Cardsname.value,
|
||||
name: '',
|
||||
orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
||||
orderType: 'DESC', // ASC 升序 DESC 降序
|
||||
}
|
||||
|
||||
// 查询
|
||||
const onSearch = () => {
|
||||
loading.value = true
|
||||
currentPage.value = 1
|
||||
}
|
||||
// 重置数据
|
||||
const chongzhi = () => {
|
||||
loading.value = true
|
||||
// 重置模糊查字段
|
||||
searchValue.value = ''
|
||||
// 分页
|
||||
currentPage.value = 1
|
||||
currentPageSize.value = 5
|
||||
// 重置查询条件
|
||||
paramsGetResources.pageNum = 1
|
||||
paramsGetResources.pageSize = 5
|
||||
paramsGetResources.orderField = 'create_date'
|
||||
paramsGetResources.orderType = 'DESC'
|
||||
mybus.emit('chongzhi', {
|
||||
type: '融合服务'
|
||||
})
|
||||
getAppResources()
|
||||
}
|
||||
currentPage.value = 1
|
||||
currentPageSize.value = 5
|
||||
// 重置查询条件
|
||||
paramsGetResources.pageNum = 1
|
||||
paramsGetResources.pageSize = 5
|
||||
paramsGetResources.orderField = 'create_date'
|
||||
paramsGetResources.orderType = 'DESC'
|
||||
mybus.emit('chongzhi', {
|
||||
type: '融合服务',
|
||||
})
|
||||
getAppResources()
|
||||
}
|
||||
|
||||
const getAppResources = () => {
|
||||
getIntegrationList()
|
||||
}
|
||||
|
||||
const getAppResources = () => {
|
||||
getIntegrationList()
|
||||
// 获取融合服务列表
|
||||
const getIntegrationList = () => {
|
||||
let postData = {
|
||||
limit: currentPageSize.value,
|
||||
page: currentPage.value,
|
||||
orderField: paramsGetResources.orderField,
|
||||
orderType: paramsGetResources.orderType,
|
||||
name: searchValue.value,
|
||||
}
|
||||
|
||||
// 获取融合服务列表
|
||||
const getIntegrationList = () => {
|
||||
let postData = {
|
||||
limit: currentPageSize.value,
|
||||
page: currentPage.value,
|
||||
orderField: paramsGetResources.orderField,
|
||||
orderType: paramsGetResources.orderType,
|
||||
name: searchValue.value
|
||||
getIntegrationServicesList(postData).then(
|
||||
(res) => {
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
getIntegrationServicesList(postData).then(res => {
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
resourceList.data = res.data.data.list || []
|
||||
resourceTotal.value = res.data.data.total || 0
|
||||
}, err => {
|
||||
message.error(err)
|
||||
})
|
||||
resourceList.data = res.data.data.list || []
|
||||
resourceTotal.value = res.data.data.total || 0
|
||||
},
|
||||
(err) => {
|
||||
message.error(err)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
mybus.on('paramsGetResources', (ids) => {
|
||||
if (ids && ids.length > 0) {
|
||||
paramsGetResources.deptIds = ids
|
||||
} else {
|
||||
delete paramsGetResources.deptIds
|
||||
}
|
||||
getAppResources()
|
||||
console.log('paramsGetResources', paramsGetResources)
|
||||
})
|
||||
mybus.on('changePage', (page) => {
|
||||
paramsGetResources.pageNum = page
|
||||
getAppResources('分页查询')
|
||||
})
|
||||
mybus.on('changeSelcted', () => {
|
||||
getAppResources()
|
||||
})
|
||||
|
||||
mybus.on('paramsGetResources', (ids) => {
|
||||
if (ids && ids.length > 0) {
|
||||
paramsGetResources.deptIds = ids
|
||||
} else {
|
||||
delete paramsGetResources.deptIds
|
||||
}
|
||||
getAppResources()
|
||||
console.log('paramsGetResources', paramsGetResources)
|
||||
})
|
||||
mybus.on('changePage', (page) => {
|
||||
paramsGetResources.pageNum = page
|
||||
getAppResources('分页查询')
|
||||
})
|
||||
mybus.on('changeSelcted', () => {
|
||||
getAppResources()
|
||||
})
|
||||
mybus.on('refresh', () => {
|
||||
paramsGetResources.pageNum = 1
|
||||
currentPage.value = 1
|
||||
getAppResources()
|
||||
})
|
||||
mybus.on('changeCondition', (condition) => {
|
||||
paramsGetResources.orderField = condition.orderField
|
||||
paramsGetResources.orderType = condition.orderType
|
||||
getAppResources()
|
||||
})
|
||||
|
||||
mybus.on('refresh', () => {
|
||||
paramsGetResources.pageNum = 1
|
||||
currentPage.value = 1
|
||||
getAppResources()
|
||||
})
|
||||
mybus.on('changeCondition', (condition) => {
|
||||
paramsGetResources.orderField = condition.orderField
|
||||
paramsGetResources.orderType = condition.orderType
|
||||
getAppResources()
|
||||
})
|
||||
const pageChange = (val) => {
|
||||
console.log(val)
|
||||
loading.value = true
|
||||
currentPage.value = val
|
||||
paramsGetResources.pageNum = val
|
||||
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
|
||||
getAppResources(params)
|
||||
}
|
||||
|
||||
const pageChange = (val) => {
|
||||
console.log(val)
|
||||
loading.value = true
|
||||
currentPage.value = val
|
||||
paramsGetResources.pageNum = val
|
||||
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
|
||||
getAppResources(params)
|
||||
}
|
||||
onMounted(() => {
|
||||
listKey2.value++
|
||||
getAppResources()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
listKey2.value++;
|
||||
getAppResources()
|
||||
})
|
||||
// 分页
|
||||
const onShowSizeChange = (current, pageSize) => {
|
||||
currentPage.value = current
|
||||
currentPageSize.value = pageSize
|
||||
paramsGetResources.pageNum = current
|
||||
paramsGetResources.pageSize = pageSize
|
||||
getAppResources()
|
||||
}
|
||||
watch(currentPageSize, () => {
|
||||
console.log('pageSize', currentPageSize.value)
|
||||
})
|
||||
|
||||
// 分页
|
||||
const onShowSizeChange = (current, pageSize) => {
|
||||
currentPage.value = current
|
||||
currentPageSize.value = pageSize
|
||||
paramsGetResources.pageNum = current
|
||||
paramsGetResources.pageSize = pageSize
|
||||
getAppResources()
|
||||
}
|
||||
watch(currentPageSize, () => {
|
||||
console.log('pageSize', currentPageSize.value)
|
||||
})
|
||||
|
||||
return {
|
||||
listKey,
|
||||
searchValue,
|
||||
currentPage,
|
||||
resourceList,
|
||||
resourceTotal,
|
||||
pageChange,
|
||||
listKey2,
|
||||
Cardsname,
|
||||
getAppResources,
|
||||
chongzhi,
|
||||
onSearch,
|
||||
currentPageSize,
|
||||
pageSizeOptions,
|
||||
current,
|
||||
loading,
|
||||
}
|
||||
return {
|
||||
listKey,
|
||||
searchValue,
|
||||
currentPage,
|
||||
resourceList,
|
||||
resourceTotal,
|
||||
pageChange,
|
||||
listKey2,
|
||||
Cardsname,
|
||||
getAppResources,
|
||||
chongzhi,
|
||||
onSearch,
|
||||
currentPageSize,
|
||||
pageSizeOptions,
|
||||
current,
|
||||
loading,
|
||||
onShowSizeChange,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HomeHeader,
|
||||
HomeFooter,
|
||||
searchResultList,
|
||||
HomeHeader,
|
||||
HomeFooter,
|
||||
searchResultList,
|
||||
},
|
||||
beforeUnmount() {
|
||||
mybus.off('paramsGetResources')
|
||||
mybus.off('changeCondition')
|
||||
mybus.off('refresh')
|
||||
mybus.off('changePage')
|
||||
mybus.off('paramsGetResources')
|
||||
mybus.off('changeCondition')
|
||||
mybus.off('refresh')
|
||||
mybus.off('changePage')
|
||||
},
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.resultListSearchInput-father {
|
||||
.resultListSearchInput-father {
|
||||
background: #f3f5f9;
|
||||
padding: 0.2rem;
|
||||
|
||||
// padding-left: 0.2rem;
|
||||
// padding-top: 0.2rem;
|
||||
.resultListSearchInput-son {
|
||||
background: #fff;
|
||||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||||
background: #fff;
|
||||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||||
|
||||
.hengxian {
|
||||
width: 100%;
|
||||
height: 0.01rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.hengxian {
|
||||
width: 100%;
|
||||
height: 0.01rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resultListSearchInput {
|
||||
.resultListSearchInput {
|
||||
margin-left: 0.1rem;
|
||||
|
||||
:deep(.ant-input) {
|
||||
width: 4rem;
|
||||
height: 0.36rem;
|
||||
background: #fff;
|
||||
border-radius: 0.04rem;
|
||||
width: 4rem;
|
||||
height: 0.36rem;
|
||||
background: #fff;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
|
||||
:deep(.ant-input-search-button) {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0087ff;
|
||||
border-radius: 0.04rem !important;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height: 0.34rem;
|
||||
margin-left: 0.1rem;
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0087ff;
|
||||
border-radius: 0.04rem !important;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height: 0.34rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
:deep(.ant-input-group-addon) {
|
||||
left: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-reset {
|
||||
.button-reset {
|
||||
border: 0;
|
||||
outline: none;
|
||||
width: 0.8rem;
|
||||
|
|
@ -270,9 +287,9 @@ export default defineComponent({
|
|||
line-height: 0.34rem;
|
||||
margin-left: 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.details-pageconetent {
|
||||
.details-pageconetent {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -283,37 +300,37 @@ export default defineComponent({
|
|||
background: rgba(245, 243, 243, 0.3);
|
||||
|
||||
.details-pageconetent-left {
|
||||
max-height: 6.9rem;
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
top: 0.17rem;
|
||||
left: 2.5rem;
|
||||
margin-right: 0.17rem;
|
||||
overflow: auto;
|
||||
max-height: 6.9rem;
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
top: 0.17rem;
|
||||
left: 2.5rem;
|
||||
margin-right: 0.17rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.top {
|
||||
min-height: 7.2rem;
|
||||
position: relative;
|
||||
width: 11.5rem;
|
||||
display: flex;
|
||||
padding-top: 0.2rem;
|
||||
flex-direction: column;
|
||||
font-size: 0.16rem;
|
||||
justify-content: left;
|
||||
min-height: 7.2rem;
|
||||
position: relative;
|
||||
width: 11.5rem;
|
||||
display: flex;
|
||||
padding-top: 0.2rem;
|
||||
flex-direction: column;
|
||||
font-size: 0.16rem;
|
||||
justify-content: left;
|
||||
background: #f3f5f9;
|
||||
|
||||
.pagination {
|
||||
background: #f3f5f9;
|
||||
|
||||
.pagination {
|
||||
background: #f3f5f9;
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-card-grid) {
|
||||
:deep(.ant-card-grid) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,20 @@
|
|||
<template>
|
||||
<div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<application-top-details :dataList="detailInfoObj" :navList="navList"></application-top-details>
|
||||
<application-top-details
|
||||
:dataList="detailInfoObj"
|
||||
:navList="navList"
|
||||
></application-top-details>
|
||||
|
||||
<!-- 导航 -->
|
||||
<div :class="{ fixed: scrollTop >= 600 }">
|
||||
<div class="application-navigation">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div class="nav" :class="{ selectNow: nav.key == selectNow }" @click="selectNav(nav.key)">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ selectNow: nav.key == selectNow }"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
|
@ -17,7 +24,10 @@
|
|||
</div>
|
||||
|
||||
<!-- 组合能力 -->
|
||||
<div id="integration-combination-ability" class="combination-ability scrollBox">
|
||||
<div
|
||||
id="integration-combination-ability"
|
||||
class="combination-ability scrollBox"
|
||||
>
|
||||
<div class="title-1">
|
||||
<DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
|
||||
</div>
|
||||
|
|
@ -50,9 +60,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-card flex-row-start">
|
||||
<div class="right-item content-card-item" v-for="(use, i) in useWayShowList" :key="i">
|
||||
<div
|
||||
class="right-item content-card-item"
|
||||
v-for="(use, i) in useWayShowList"
|
||||
:key="i"
|
||||
>
|
||||
<div class="card-title title">{{ use.title }}</div>
|
||||
<div class="card-text" v-for="(d, k) in Object.keys(use.info)" :key="k">
|
||||
<div
|
||||
class="card-text"
|
||||
v-for="(d, k) in Object.keys(use.info)"
|
||||
:key="k"
|
||||
>
|
||||
{{ use.info[d] }}:{{ detailInfoObj[d] || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -61,390 +79,403 @@
|
|||
</div>
|
||||
|
||||
<!-- 常见问题-->
|
||||
<application-common-problem :dataList="detailInfoObj" id="common-problem" class="scrollBox">
|
||||
</application-common-problem>
|
||||
<application-common-problem
|
||||
:dataList="detailInfoObj"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></application-common-problem>
|
||||
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getIntegrationDetail } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getIntegrationDetail } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const id = router.currentRoute.value.query.id
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top =
|
||||
document.querySelector('#' + id) &&
|
||||
document.querySelector('#' + id).offsetTop - 50
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const id = router.currentRoute.value.query.id
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id) && document.querySelector('#' + id).offsetTop - 50;
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组合能力',
|
||||
key: 'integration-combination-ability',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'integration-use-way',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
|
||||
const selectNow = ref('integration-combination-ability')
|
||||
|
||||
const useWayShowList = ref([
|
||||
{
|
||||
title: '归属部门',
|
||||
info: {
|
||||
deptUser: '部门联系人',
|
||||
mobile: '联系人电话',
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组合能力',
|
||||
key: 'integration-combination-ability',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '服务商',
|
||||
info: {
|
||||
providerUser: '服务商联系人',
|
||||
providerMobile: '联系人电话',
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'integration-use-way',
|
||||
},
|
||||
},
|
||||
])
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
|
||||
const combineList = ref([
|
||||
{
|
||||
title: '基础设施',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
title: '组件服务',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
title: '数据资源',
|
||||
list: []
|
||||
},
|
||||
])
|
||||
const detailInfoObj = ref({})
|
||||
const selectNow = ref('integration-combination-ability')
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
const useWayShowList = ref([
|
||||
{
|
||||
title: '归属部门',
|
||||
info: {
|
||||
deptUser: '部门联系人',
|
||||
mobile: '联系人电话',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '服务商',
|
||||
info: {
|
||||
providerUser: '服务商联系人',
|
||||
providerMobile: '联系人电话',
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const combineList = ref([
|
||||
{
|
||||
title: '基础设施',
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
title: '组件服务',
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
title: '数据资源',
|
||||
list: [],
|
||||
},
|
||||
])
|
||||
const detailInfoObj = ref({})
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const selectNav = (key) => {
|
||||
selectNow.value = key
|
||||
mybus.emit('flyToView', selectNow.value)
|
||||
}
|
||||
|
||||
// 融合服务--详情
|
||||
const getIntegrationServicesDeatil = (id) => {
|
||||
getIntegrationDetail(id).then(res => {
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
detailInfoObj.value = res.data.data || {}
|
||||
// 资源属性
|
||||
let fuseAttrList = res.data.data.fuseAttrList || []
|
||||
// 融合关系
|
||||
let fuseResourceList = res.data.data.fuseResourceList || []
|
||||
let questionValue = fuseAttrList.find(v => v.attrType === '常见问题') || {}
|
||||
let questionObj = {
|
||||
attrType: '常见问题',
|
||||
attrValue: questionValue.attrValue || "[]"
|
||||
}
|
||||
let areaObj = {
|
||||
attrType: '应用领域',
|
||||
attrValue: detailInfoObj.value.applicationArea
|
||||
}
|
||||
combineList.value.map(item => {
|
||||
let arr = (fuseResourceList.filter(v => v.resource && v.resource.type == item.title) || []).map(d => d.resource.name)
|
||||
item.list = arr;
|
||||
return item
|
||||
})
|
||||
detailInfoObj.value.infoList = []
|
||||
detailInfoObj.value.infoList.push(questionObj)
|
||||
detailInfoObj.value.infoList.push(areaObj)
|
||||
}, err => {
|
||||
message.error(err)
|
||||
})
|
||||
}
|
||||
getIntegrationServicesDeatil(id)
|
||||
|
||||
function handleOpenUrl(type) {
|
||||
let obj = (detailInfoObj.value.fuseAttrList || []).find(v => v.attrType == type) || {};
|
||||
let url = obj.attrValue || '';
|
||||
if (!obj.attrValue) {
|
||||
return message.error('错误的文档链接地址！')
|
||||
const selectNav = (key) => {
|
||||
selectNow.value = key
|
||||
mybus.emit('flyToView', selectNow.value)
|
||||
}
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(url))
|
||||
)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
// 融合服务--详情
|
||||
const getIntegrationServicesDeatil = (id) => {
|
||||
getIntegrationDetail(id).then(
|
||||
(res) => {
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
detailInfoObj.value = res.data.data || {}
|
||||
// 资源属性
|
||||
let fuseAttrList = res.data.data.fuseAttrList || []
|
||||
// 融合关系
|
||||
let fuseResourceList = res.data.data.fuseResourceList || []
|
||||
let questionValue =
|
||||
fuseAttrList.find((v) => v.attrType === '常见问题') || {}
|
||||
let questionObj = {
|
||||
attrType: '常见问题',
|
||||
attrValue: questionValue.attrValue || '[]',
|
||||
}
|
||||
let areaObj = {
|
||||
attrType: '应用领域',
|
||||
attrValue: detailInfoObj.value.applicationArea,
|
||||
}
|
||||
combineList.value.map((item) => {
|
||||
let arr = (
|
||||
fuseResourceList.filter(
|
||||
(v) => v.resource && v.resource.type == item.title
|
||||
) || []
|
||||
).map((d) => d.resource.name)
|
||||
item.list = arr
|
||||
return item
|
||||
})
|
||||
detailInfoObj.value.infoList = []
|
||||
detailInfoObj.value.infoList.push(questionObj)
|
||||
detailInfoObj.value.infoList.push(areaObj)
|
||||
},
|
||||
(err) => {
|
||||
message.error(err)
|
||||
}
|
||||
)
|
||||
}
|
||||
getIntegrationServicesDeatil(id)
|
||||
|
||||
function handleOpenUrl(type) {
|
||||
let obj =
|
||||
(detailInfoObj.value.fuseAttrList || []).find(
|
||||
(v) => v.attrType == type
|
||||
) || {}
|
||||
let url = obj.attrValue || ''
|
||||
if (!obj.attrValue) {
|
||||
return message.error('错误的文档链接地址！')
|
||||
}
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(url))
|
||||
)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.flex-row-between {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex-row-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.IntegrationServicesDetails {
|
||||
.fixed {
|
||||
position: fixed !important;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
||||
.application-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
.flex-row-between {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 0.24rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 3rem;
|
||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||
position: relative;
|
||||
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 0.4rem;
|
||||
height: 0.04rem;
|
||||
}
|
||||
}
|
||||
|
||||
.selectNow {
|
||||
color: #526aff;
|
||||
|
||||
.line {
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.use-way {
|
||||
padding: 0.8rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.title-1 {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left {
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
color: #526aff;
|
||||
background: #fff;
|
||||
border-radius: 50px;
|
||||
margin: 10px;
|
||||
font-size: 0.2rem;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 13rem;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.word-bg {
|
||||
background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex-row-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.IntegrationServicesDetails {
|
||||
.fixed {
|
||||
position: fixed !important;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
border-radius: 0.2rem;
|
||||
background: linear-gradient(to right,
|
||||
rgba(113, 132, 252, 0.4),
|
||||
rgba(148, 163, 252, 0.4));
|
||||
padding: 0 0.3rem;
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
||||
.application-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
font-size: 0.24rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 3rem;
|
||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||
position: relative;
|
||||
|
||||
.card-title {
|
||||
font-size: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 0.26rem;
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 0.4rem;
|
||||
height: 0.04rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-card-item {
|
||||
width: 50%;
|
||||
.selectNow {
|
||||
color: #526aff;
|
||||
|
||||
.card-text {
|
||||
margin-right: 0.2rem;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
font-size: 0.2rem;
|
||||
max-width: 2.8rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
display: block;
|
||||
.line {
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.combination-ability {
|
||||
padding: 0.8rem 0;
|
||||
background: rgb(247, 248, 250);
|
||||
|
||||
.title-1 {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.combine-content {
|
||||
width: 13rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.combine-item {
|
||||
margin: 0 0.1rem;
|
||||
width: 4.28rem;
|
||||
.use-way {
|
||||
padding: 0.8rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.1rem 0;
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
|
||||
&:hover {
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
|
||||
.title-1 {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
.left {
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
color: #526aff;
|
||||
background: #fff;
|
||||
border-radius: 50px;
|
||||
margin: 10px;
|
||||
font-size: 0.2rem;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 13rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.word-bg {
|
||||
background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
border-radius: 0.2rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(113, 132, 252, 0.4),
|
||||
rgba(148, 163, 252, 0.4)
|
||||
);
|
||||
padding: 0 0.3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 0.26rem;
|
||||
}
|
||||
|
||||
.content-card-item {
|
||||
width: 50%;
|
||||
|
||||
.card-text {
|
||||
margin-right: 0.2rem;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
font-size: 0.2rem;
|
||||
max-width: 2.8rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.combination-ability {
|
||||
padding: 0.8rem 0;
|
||||
background: rgb(247, 248, 250);
|
||||
|
||||
.title-1 {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.combine-content {
|
||||
width: 13rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.combine-item {
|
||||
margin: 0 0.1rem;
|
||||
width: 4.28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.1rem 0;
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
|
||||
&:hover {
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
padding: 0.2rem 0;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.16rem;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-size: 0.16rem;
|
||||
color: #212121;
|
||||
line-height: 0.3rem;
|
||||
height: 0.3rem;
|
||||
text-align: center;
|
||||
padding: 0.2rem 0;
|
||||
font-size: .22rem;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.16rem;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-size: 0.16rem;
|
||||
color: #212121;
|
||||
line-height: 0.3rem;
|
||||
height: 0.3rem;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
clickData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
title: ''
|
||||
''
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,21 +4,40 @@
|
|||
<div id="container" class="content-menu">
|
||||
<div class="rela">
|
||||
<div class="left">
|
||||
<div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
|
||||
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
|
||||
<div
|
||||
class="first-title-text"
|
||||
v-for="(data, i) in titleList"
|
||||
:key="i"
|
||||
@click="changeName(data)"
|
||||
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
|
||||
>
|
||||
<div class="img" :class="data.className"></div>
|
||||
{{ data.name }}
|
||||
</div>
|
||||
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
|
||||
<abilityDocTree
|
||||
:dataList="treeArray"
|
||||
@treeClick="treeClick"
|
||||
:clickData="clickData"
|
||||
></abilityDocTree>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="new-menu-box" style="height: 100%" v-if="titleData.name === '新手指引'">
|
||||
<div
|
||||
class="new-menu-box"
|
||||
style="height: 100%"
|
||||
v-if="titleData.name === '新手指引'"
|
||||
>
|
||||
<!-- 新手指引 -->
|
||||
<a-empty description="新手指引" />
|
||||
</div>
|
||||
<div v-else style="height:100%">
|
||||
<iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
|
||||
:src="doc_base_url + clickData.doc"></iframe>
|
||||
<div v-else style="height: 100%">
|
||||
<iframe
|
||||
name="iframeName"
|
||||
width="1000"
|
||||
height="100%"
|
||||
id="iframeId"
|
||||
:frameborder="0"
|
||||
:src="doc_base_url + clickData.doc"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,199 +45,199 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import abilityDocTree from './components/abilityDocTree'
|
||||
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
|
||||
import { Empty, message } from 'ant-design-vue'
|
||||
import { getDevelopDocTree } from '@/api/home'
|
||||
import flatten from '@turf/flatten'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import abilityDocTree from './components/abilityDocTree'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getDevelopDocTree } from '@/api/home'
|
||||
// import flatten from '@turf/flatten'
|
||||
|
||||
const titleList = ref([
|
||||
{
|
||||
name: '新手指引',
|
||||
className: 'newGuide',
|
||||
},
|
||||
{
|
||||
name: '技术文档',
|
||||
className: 'doc',
|
||||
},
|
||||
])
|
||||
const titleData = ref(titleList.value[0])
|
||||
const clickData = ref({})
|
||||
const treeArray = ref([])
|
||||
const treeArrayCopy = ref([])
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
|
||||
let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
|
||||
const titleList = ref([
|
||||
{
|
||||
name: '新手指引',
|
||||
className: 'newGuide',
|
||||
},
|
||||
{
|
||||
name: '技术文档',
|
||||
className: 'doc',
|
||||
},
|
||||
])
|
||||
const titleData = ref(titleList.value[0])
|
||||
const clickData = ref({})
|
||||
const treeArray = ref([])
|
||||
const treeArrayCopy = ref([])
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
|
||||
let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
|
||||
|
||||
const treeClick = (item) => {
|
||||
clickData.value = item
|
||||
console.log('clickData------------>', item)
|
||||
titleData.value = titleList.value[1]
|
||||
}
|
||||
|
||||
const getTreeData = () => {
|
||||
getDevelopDocTree({})
|
||||
.then((res) => {
|
||||
console.log('res------文档树------>', res)
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
treeArray.value = res.data.data || []
|
||||
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
const changeName = (item) => {
|
||||
titleData.value = item
|
||||
if (item.name == '新手指引') {
|
||||
clickData.value = {}
|
||||
const treeClick = (item) => {
|
||||
clickData.value = item
|
||||
console.log('clickData------------>', item)
|
||||
titleData.value = titleList.value[1]
|
||||
}
|
||||
if (item.name == '技术文档') {
|
||||
if (!clickData.value.title) {
|
||||
clickData.value = {}
|
||||
treeArray.value = []
|
||||
treeArrayCopy.value.map((val, i) => {
|
||||
let obj = Object.assign({}, val, {
|
||||
title: val.title,
|
||||
show:
|
||||
(i === 0 && val.children && val.children.length > 0) ||
|
||||
typeList.includes(val.title)
|
||||
? true
|
||||
: false,
|
||||
children: [],
|
||||
})
|
||||
formData(val.children, obj)
|
||||
treeArray.value.push(obj)
|
||||
|
||||
const getTreeData = () => {
|
||||
getDevelopDocTree({})
|
||||
.then((res) => {
|
||||
console.log('res------文档树------>', res)
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
treeArray.value = res.data.data || []
|
||||
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
|
||||
})
|
||||
getFirstData(treeArrayCopy.value[0] || {})
|
||||
.catch((err) => {
|
||||
message.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
const changeName = (item) => {
|
||||
titleData.value = item
|
||||
if (item.name == '新手指引') {
|
||||
clickData.value = {}
|
||||
}
|
||||
if (item.name == '技术文档') {
|
||||
if (!clickData.value.title) {
|
||||
clickData.value = {}
|
||||
treeArray.value = []
|
||||
treeArrayCopy.value.map((val, i) => {
|
||||
let obj = Object.assign({}, val, {
|
||||
title: val.title,
|
||||
show:
|
||||
(i === 0 && val.children && val.children.length > 0) ||
|
||||
typeList.includes(val.title)
|
||||
? true
|
||||
: false,
|
||||
children: [],
|
||||
})
|
||||
formData(val.children, obj)
|
||||
treeArray.value.push(obj)
|
||||
})
|
||||
getFirstData(treeArrayCopy.value[0] || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const formData = (children = [], dataItem) => {
|
||||
children.map((item, index) => {
|
||||
let _obj = Object.assign({}, item, {
|
||||
title: item.title,
|
||||
show:
|
||||
(index === 0 && item.children && item.children.length > 0) ||
|
||||
const formData = (children = [], dataItem) => {
|
||||
children.map((item, index) => {
|
||||
let _obj = Object.assign({}, item, {
|
||||
title: item.title,
|
||||
show:
|
||||
(index === 0 && item.children && item.children.length > 0) ||
|
||||
typeList.includes(item.title)
|
||||
? true
|
||||
: false,
|
||||
children: [],
|
||||
? true
|
||||
: false,
|
||||
children: [],
|
||||
})
|
||||
if (item.children && item.children.length > 0) {
|
||||
formData(item.children, _obj)
|
||||
}
|
||||
dataItem.children.push(_obj)
|
||||
})
|
||||
if (item.children && item.children.length > 0) {
|
||||
formData(item.children, _obj)
|
||||
}
|
||||
dataItem.children.push(_obj)
|
||||
})
|
||||
}
|
||||
|
||||
const getFirstData = (firstObj = {}) => {
|
||||
if (firstObj && firstObj.children && firstObj.children.length > 0) {
|
||||
getFirstData(firstObj.children[0])
|
||||
} else {
|
||||
clickData.value = firstObj
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
})
|
||||
const getFirstData = (firstObj = {}) => {
|
||||
if (firstObj && firstObj.children && firstObj.children.length > 0) {
|
||||
getFirstData(firstObj.children[0])
|
||||
} else {
|
||||
clickData.value = firstObj
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.menu-box {
|
||||
// overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.first-title-text {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: #0058e1;
|
||||
.menu-box {
|
||||
// overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu {
|
||||
width: 1240px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto;
|
||||
margin-top: 74px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
top: 0.6rem;
|
||||
top: 0;
|
||||
}
|
||||
.first-title-text {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 240px;
|
||||
padding: 20px;
|
||||
height: 600px;
|
||||
margin-right: 20px;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
&:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 870px;
|
||||
height: calc(100% - 20px);
|
||||
.content-menu {
|
||||
width: 1240px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto;
|
||||
margin-top: 74px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
top: 0.6rem;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 260px;
|
||||
}
|
||||
.left {
|
||||
width: 240px;
|
||||
padding: 20px;
|
||||
height: 600px;
|
||||
margin-right: 20px;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
right: 0 !important;
|
||||
}
|
||||
.right {
|
||||
width: 870px;
|
||||
height: calc(100% - 20px);
|
||||
|
||||
.content {
|
||||
right: 16rem !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.sidebar {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content {
|
||||
right: 16rem !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.newGuide {
|
||||
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.new-menu-box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.doc {
|
||||
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.rela {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.newGuide {
|
||||
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.new-menu-box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rela {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
query: {
|
||||
select: type,
|
||||
tecHnosphere: '',
|
||||
appLiCation: ''
|
||||
appLiCation: '',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,195 +153,195 @@
|
|||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.popular-ability {
|
||||
height: 6.8rem;
|
||||
background: url('~@/assets/newHome/popular-bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 13rem;
|
||||
margin-top: 0.78rem;
|
||||
.popular-ability {
|
||||
height: 6.8rem;
|
||||
background: url('~@/assets/newHome/popular-bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
.top {
|
||||
font-size: 0.3rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 13rem;
|
||||
margin-top: 0.78rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.line {
|
||||
width: 0.34rem;
|
||||
height: 0.03rem;
|
||||
background-color: #fff;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.52rem;
|
||||
.left {
|
||||
.top {
|
||||
font-size: 0.3rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.line {
|
||||
width: 0.34rem;
|
||||
height: 0.03rem;
|
||||
background-color: #fff;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.52rem;
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.05rem;
|
||||
height: 1.39rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
margin-bottom: 0.01rem;
|
||||
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
|
||||
.img {
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
background-size: 100%;
|
||||
}
|
||||
.fwl {
|
||||
background: url('~@/assets/newHome/fwl-no.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.sgl {
|
||||
background: url('~@/assets/newHome/sgl-no.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.scl {
|
||||
background: url('~@/assets/newHome/scl-no.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.text {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.14rem;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
}
|
||||
.select:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.checked {
|
||||
background: rgba(255, 255, 255, 0.18) !important;
|
||||
border-right: 0.02rem solid #fff;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0.2rem;
|
||||
.item {
|
||||
width: 3.78rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
.item-left {
|
||||
width: 0.83rem;
|
||||
height: 100%;
|
||||
.select {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background: #eef1f8;
|
||||
justify-content: center;
|
||||
width: 1.05rem;
|
||||
height: 1.39rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
margin-bottom: 0.01rem;
|
||||
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
|
||||
.img {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
background-size: 100%;
|
||||
}
|
||||
.zj {
|
||||
background: url('~@/assets/newHome/popular-zj.png') no-repeat;
|
||||
.fwl {
|
||||
background: url('~@/assets/newHome/fwl-no.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.yy {
|
||||
background: url('~@/assets/newHome/popular-yy.png') no-repeat;
|
||||
.sgl {
|
||||
background: url('~@/assets/newHome/sgl-no.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.jc {
|
||||
background: url('~@/assets/newHome/popular-jc.png') no-repeat;
|
||||
.scl {
|
||||
background: url('~@/assets/newHome/scl-no.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.sj {
|
||||
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.zs {
|
||||
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.item-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.fw {
|
||||
width: 100%;
|
||||
padding-right: 0.1rem;
|
||||
padding-top: 0.03rem;
|
||||
text-align: right;
|
||||
color: 666;
|
||||
font-size: 0.14rem;
|
||||
color: #666;
|
||||
}
|
||||
.name {
|
||||
font-size: 0.18rem;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
margin-top: 0.05rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
padding: 0.24rem 0.3rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.14rem;
|
||||
color: #212121;
|
||||
line-height: 0.24rem;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
}
|
||||
.select:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.checked {
|
||||
background: rgba(255, 255, 255, 0.18) !important;
|
||||
border-right: 0.02rem solid #fff;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(4),
|
||||
.item:nth-of-type(5),
|
||||
.item:nth-of-type(6) {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.item:hover {
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
|
||||
.right {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0.2rem;
|
||||
.item {
|
||||
width: 3.78rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
.item-left {
|
||||
width: 0.83rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #eef1f8;
|
||||
.img {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
background-size: 100%;
|
||||
}
|
||||
.zj {
|
||||
background: url('~@/assets/newHome/popular-zj.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.yy {
|
||||
background: url('~@/assets/newHome/popular-yy.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.jc {
|
||||
background: url('~@/assets/newHome/popular-jc.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.sj {
|
||||
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.zs {
|
||||
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.item-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.fw {
|
||||
width: 100%;
|
||||
padding-right: 0.1rem;
|
||||
padding-top: 0.03rem;
|
||||
text-align: right;
|
||||
color: 666;
|
||||
font-size: 0.14rem;
|
||||
color: #666;
|
||||
}
|
||||
.name {
|
||||
font-size: 0.18rem;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
margin-top: 0.05rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
padding: 0.24rem 0.3rem;
|
||||
font-size: 0.14rem;
|
||||
color: #212121;
|
||||
line-height: 0.24rem;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(4),
|
||||
.item:nth-of-type(5),
|
||||
.item:nth-of-type(6) {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.item:hover {
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-top: 0.24rem;
|
||||
color: #fff;
|
||||
width: 1rem;
|
||||
height: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-left: 6rem;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
background: url('~@/assets/newHome/gd.png') no-repeat;
|
||||
background-size: contain;
|
||||
.bottom-btn {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-top: 0.24rem;
|
||||
color: #fff;
|
||||
width: 1rem;
|
||||
height: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-left: 6rem;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
background: url('~@/assets/newHome/gd.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.bottom-btn:hover {
|
||||
background: rgba(0, 88, 225, 0.1);
|
||||
}
|
||||
}
|
||||
.bottom-btn:hover {
|
||||
background: rgba(0, 88, 225, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -236,8 +236,8 @@
|
|||
checked: false,
|
||||
resourceId: val.resourceId,
|
||||
createDate: val.createDate,
|
||||
updateDate: val.updateDate,
|
||||
...getObj(val, val.resourceDTO ? 'resourceDTO' : 'fuseDTO')
|
||||
updateDate: val.updateDate,
|
||||
...getObj(val, val.resourceDTO ? 'resourceDTO' : 'fuseDTO'),
|
||||
}
|
||||
if (checkedList.value.indexOf(val.resourceId) == -1) {
|
||||
checkAll.value = false
|
||||
|
|
@ -250,8 +250,8 @@
|
|||
}
|
||||
|
||||
function getObj(val, typeStr) {
|
||||
let typeObj = val[typeStr] || {};
|
||||
console.log('typeObj------------>', typeObj);
|
||||
let typeObj = val[typeStr] || {}
|
||||
console.log('typeObj------------>', typeObj)
|
||||
return {
|
||||
name: typeObj.name,
|
||||
type: typeObj.type,
|
||||
|
|
@ -464,4 +464,4 @@
|
|||
.name:hover {
|
||||
color: #0087ff;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,38 +9,83 @@
|
|||
<div class="form-container">
|
||||
<div v-if="applySuccess">
|
||||
<div class="title">申请人信息</div>
|
||||
<a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
|
||||
:wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formName"
|
||||
name="basic"
|
||||
:label-col="{ style: { width: '106px' } }"
|
||||
:wrapper-col="{ style: { width: '230px' } }"
|
||||
labelAlign="left"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="base-info">
|
||||
<a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
|
||||
<a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
|
||||
<a-form-item
|
||||
label="申请人"
|
||||
name="applyUserName"
|
||||
:rules="[{ required: true, message: '请输入申请人' }]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入申请人"
|
||||
v-model:value="formName.applyUserName"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]">
|
||||
<a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
|
||||
<a-form-item
|
||||
style="margin: 0 22px"
|
||||
label="申请人电话"
|
||||
name="applyUserPhone"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入申请人电话"
|
||||
v-model:value="formName.applyUserPhone"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
|
||||
<a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
|
||||
<a-form-item
|
||||
label="申请单位"
|
||||
name="applyUserDeptName"
|
||||
:rules="[{ required: true, message: '请输入申请单位' }]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入申请单位"
|
||||
v-model:value="formName.applyUserDeptName"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<div class="title">需求信息</div>
|
||||
|
||||
<a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
|
||||
:rules="[{ required: true, message: '请输入需求标题' }]">
|
||||
<a-input style="width: 350px" v-model:value="formName.demandSubject" />
|
||||
<a-form-item
|
||||
style="margin-bottom: 10px"
|
||||
label="需求标题"
|
||||
name="demandSubject"
|
||||
:rules="[{ required: true, message: '请输入需求标题' }]"
|
||||
>
|
||||
<a-input
|
||||
style="width: 350px"
|
||||
v-model:value="formName.demandSubject"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
|
||||
:rules="[{ required: true, message: '请选择需求类型' }]">
|
||||
<a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
|
||||
<a-form-item
|
||||
style="margin-bottom: 10px"
|
||||
label="需求类型"
|
||||
name="detailsType"
|
||||
:rules="[{ required: true, message: '请选择需求类型' }]"
|
||||
>
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="formName.detailsType"
|
||||
@focus="focus"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option value="基础设施">基础设施</a-select-option>
|
||||
<a-select-option value="数据资源">数据资源</a-select-option>
|
||||
<a-select-option value="组件服务">组件服务</a-select-option>
|
||||
|
|
@ -49,14 +94,26 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="应用领域" name="detailsField" style="width: 350px"
|
||||
:rules="[{ required: true, message: '请输入应用领域' }]">
|
||||
<a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
|
||||
<a-form-item
|
||||
label="应用领域"
|
||||
name="detailsField"
|
||||
style="width: 350px"
|
||||
:rules="[{ required: true, message: '请输入应用领域' }]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入应用领域"
|
||||
v-model:value="formName.detailsField"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
|
||||
:rules="[{ required: true, message: '请输入需求描述' }]">
|
||||
<a-textarea style="
|
||||
<a-form-item
|
||||
style="margin-bottom: 10px"
|
||||
label="需求描述"
|
||||
name="demandDetails"
|
||||
:rules="[{ required: true, message: '请输入需求描述' }]"
|
||||
>
|
||||
<a-textarea
|
||||
style="
|
||||
width: 500px;
|
||||
height: 150px;
|
||||
font-size: 16px;
|
||||
|
|
@ -66,12 +123,24 @@
|
|||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
" v-model:value="formName.demandDetails" />
|
||||
"
|
||||
v-model:value="formName.demandDetails"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
|
||||
<a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
|
||||
@change="handleChange">
|
||||
<a-button style="
|
||||
<a-form-item
|
||||
style="color: #666; font-size: 16px"
|
||||
label="附件上传"
|
||||
name="applyDoc"
|
||||
>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
:action="upLoadUrl"
|
||||
:headers="headers"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-button
|
||||
style="
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
|
|
@ -82,7 +151,8 @@
|
|||
border: 1px solid #bbd3ef;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
">
|
||||
"
|
||||
>
|
||||
<upload-outlined></upload-outlined>
|
||||
文件上传
|
||||
</a-button>
|
||||
|
|
@ -93,7 +163,8 @@
|
|||
</a-form-item>
|
||||
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button style="
|
||||
<a-button
|
||||
style="
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
margin-right: 20px;
|
||||
|
|
@ -104,10 +175,15 @@
|
|||
border: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
" type="primary" html-type="cancle" @click="signOut">
|
||||
"
|
||||
type="primary"
|
||||
html-type="cancle"
|
||||
@click="signOut"
|
||||
>
|
||||
退出申请
|
||||
</a-button>
|
||||
<a-button style="
|
||||
<a-button
|
||||
style="
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
background: #0087ff;
|
||||
|
|
@ -117,7 +193,11 @@
|
|||
border: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
" type="primary" html-type="submit" @click="processStartHandle()">
|
||||
"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
@click="processStartHandle()"
|
||||
>
|
||||
提交申请
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
|
@ -129,7 +209,7 @@
|
|||
</div>
|
||||
<p>
|
||||
您已成功申请{{
|
||||
formName.demandSubject || ''
|
||||
formName.demandSubject || ''
|
||||
}},请耐心等待审批结果，结果会第一时间通知您！
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -140,219 +220,219 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
// import { UploadOutlined } from '@ant-design/icons-vue'
|
||||
import { getUser, getUserInfo, relaunch } from '@/api/home'
|
||||
import {
|
||||
demandApply,
|
||||
getDemandForm,
|
||||
updateDemandForm,
|
||||
} from '@/api/personalCenter'
|
||||
// import { baseURL } from '@/config'
|
||||
import { useRouter } from 'vue-router'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
// import { UploadOutlined } from '@ant-design/icons-vue'
|
||||
import { getUser, getUserInfo, relaunch } from '@/api/home'
|
||||
import {
|
||||
demandApply,
|
||||
getDemandForm,
|
||||
updateDemandForm,
|
||||
} from '@/api/personalCenter'
|
||||
// import { baseURL } from '@/config'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {},
|
||||
components: {
|
||||
HomeHeader,
|
||||
// UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const disabled = ref(false)
|
||||
const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
|
||||
const formName = reactive({
|
||||
applyUserDeptId: '',
|
||||
applyUserDeptName: '',
|
||||
applyUserId: '',
|
||||
applyUserName: '',
|
||||
applyUserPhone: '',
|
||||
demandDetails: '',
|
||||
demandSubject: '',
|
||||
detailsField: '',
|
||||
detailsType: '',
|
||||
enclosure: '',
|
||||
})
|
||||
// console.log(formName.demandSubject)
|
||||
|
||||
const router = useRouter()
|
||||
const id = ref(router.currentRoute.value.query.id)
|
||||
const taskId = ref(router.currentRoute.value.query.taskId)
|
||||
if (id.value) {
|
||||
getDemandForm(id.value).then((res) => {
|
||||
console.log('回填数据===============>', res)
|
||||
formName.applyUserPhone = res.data.data.applyUserPhone
|
||||
formName.demandSubject = res.data.data.demandSubject
|
||||
formName.detailsType = res.data.data.detailsType
|
||||
formName.detailsField = res.data.data.detailsField
|
||||
formName.demandDetails = res.data.data.demandDetails
|
||||
formName.enclosure = res.data.data.enclosure
|
||||
export default {
|
||||
name: '',
|
||||
props: {},
|
||||
components: {
|
||||
HomeHeader,
|
||||
// UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const disabled = ref(false)
|
||||
const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
|
||||
const formName = reactive({
|
||||
applyUserDeptId: '',
|
||||
applyUserDeptName: '',
|
||||
applyUserId: '',
|
||||
applyUserName: '',
|
||||
applyUserPhone: '',
|
||||
demandDetails: '',
|
||||
demandSubject: '',
|
||||
detailsField: '',
|
||||
detailsType: '',
|
||||
enclosure: '',
|
||||
})
|
||||
}
|
||||
getUser().then((res) => {
|
||||
formName.applyUserName = res.data.data.realName
|
||||
formName.applyUserId = res.data.data.id
|
||||
getUserInfo(formName.applyUserId).then((res) => {
|
||||
if (res.data.data.mobile) {
|
||||
formName.applyUserPhone = res.data.data.mobile
|
||||
}
|
||||
formName.applyUserDeptName = res.data.data.deptName
|
||||
formName.applyUserDeptId = res.data.data.deptId
|
||||
})
|
||||
})
|
||||
// console.log(formName.demandSubject)
|
||||
|
||||
const formRef = ref()
|
||||
const applySuccess = ref(true)
|
||||
|
||||
// 退出
|
||||
const signOut = () => {
|
||||
window.close()
|
||||
}
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList)
|
||||
}
|
||||
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} 文件上传成功`)
|
||||
formName.enclosure = info.file.response.data
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} 文件上传失败`)
|
||||
}
|
||||
}
|
||||
|
||||
const fileList = ref([])
|
||||
|
||||
const processStartHandle = () => {
|
||||
const router = useRouter()
|
||||
const id = ref(router.currentRoute.value.query.id)
|
||||
const taskId = ref(router.currentRoute.value.query.taskId)
|
||||
if (id.value) {
|
||||
updateDemandForm(formName).then((upres) => {
|
||||
if (upres.data.code == 0) {
|
||||
relaunch({ data: formName, taskId: taskId.value }).then((res) => {
|
||||
console.log('驳回================>', res)
|
||||
if (res.data.code == 0) {
|
||||
message.success('重新发起流程成功！')
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
} else {
|
||||
message.error('重新发起流程失败！')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
message.error('数据更新失败！')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
formRef.value.validate().then(() => {
|
||||
demandApply(formName).then((res) => {
|
||||
applySuccess.value = false
|
||||
message.success('操作成功！')
|
||||
console.log('能力申请================>', res)
|
||||
})
|
||||
getDemandForm(id.value).then((res) => {
|
||||
console.log('回填数据===============>', res)
|
||||
formName.applyUserPhone = res.data.data.applyUserPhone
|
||||
formName.demandSubject = res.data.data.demandSubject
|
||||
formName.detailsType = res.data.data.detailsType
|
||||
formName.detailsField = res.data.data.detailsField
|
||||
formName.demandDetails = res.data.data.demandDetails
|
||||
formName.enclosure = res.data.data.enclosure
|
||||
})
|
||||
}
|
||||
}
|
||||
getUser().then((res) => {
|
||||
formName.applyUserName = res.data.data.realName
|
||||
formName.applyUserId = res.data.data.id
|
||||
getUserInfo(formName.applyUserId).then((res) => {
|
||||
if (res.data.data.mobile) {
|
||||
formName.applyUserPhone = res.data.data.mobile
|
||||
}
|
||||
formName.applyUserDeptName = res.data.data.deptName
|
||||
formName.applyUserDeptId = res.data.data.deptId
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
formRef,
|
||||
formName,
|
||||
fileList,
|
||||
headers: {
|
||||
authorization: 'authorization-text',
|
||||
},
|
||||
handleChange,
|
||||
applySuccess,
|
||||
disabled,
|
||||
signOut,
|
||||
processStartHandle,
|
||||
upLoadUrl,
|
||||
// baseURL,
|
||||
}
|
||||
},
|
||||
}
|
||||
const formRef = ref()
|
||||
const applySuccess = ref(true)
|
||||
|
||||
// 退出
|
||||
const signOut = () => {
|
||||
window.close()
|
||||
}
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList)
|
||||
}
|
||||
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} 文件上传成功`)
|
||||
formName.enclosure = info.file.response.data
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} 文件上传失败`)
|
||||
}
|
||||
}
|
||||
|
||||
const fileList = ref([])
|
||||
|
||||
const processStartHandle = () => {
|
||||
if (id.value) {
|
||||
updateDemandForm(formName).then((upres) => {
|
||||
if (upres.data.code == 0) {
|
||||
relaunch({ data: formName, taskId: taskId.value }).then((res) => {
|
||||
console.log('驳回================>', res)
|
||||
if (res.data.code == 0) {
|
||||
message.success('重新发起流程成功！')
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
} else {
|
||||
message.error('重新发起流程失败！')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
message.error('数据更新失败！')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
formRef.value.validate().then(() => {
|
||||
demandApply(formName).then((res) => {
|
||||
applySuccess.value = false
|
||||
message.success('操作成功！')
|
||||
console.log('能力申请================>', res)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
formName,
|
||||
fileList,
|
||||
headers: {
|
||||
authorization: 'authorization-text',
|
||||
},
|
||||
handleChange,
|
||||
applySuccess,
|
||||
disabled,
|
||||
signOut,
|
||||
processStartHandle,
|
||||
upLoadUrl,
|
||||
// baseURL,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#apply-container {
|
||||
background-color: #f5f8fc;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 90px auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
aside {
|
||||
width: 282px;
|
||||
height: 96%;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
margin: 1% 0 3%;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 1090px;
|
||||
height: 99%;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
margin: 5% auto;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 20px 20px 30px 20px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.base-info {
|
||||
#apply-container {
|
||||
background-color: #f5f8fc;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 90px auto 0;
|
||||
display: flex;
|
||||
}
|
||||
justify-content: space-between;
|
||||
|
||||
:deep(.ant-form-item-label) {
|
||||
label {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
aside {
|
||||
width: 282px;
|
||||
height: 96%;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
margin: 1% 0 3%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
article {
|
||||
width: 1090px;
|
||||
height: 99%;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
margin: 5% auto;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 20px 20px 30px 20px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-required) {
|
||||
&::before {
|
||||
font-size: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.success {
|
||||
div {
|
||||
width: 100px;
|
||||
margin: 80px auto 40px;
|
||||
.base-info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
:deep(.ant-form-item-label) {
|
||||
label {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-required) {
|
||||
&::before {
|
||||
font-size: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.success {
|
||||
div {
|
||||
width: 100px;
|
||||
margin: 80px auto 40px;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: unset;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
height: unset;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue