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

eslint问题修复

This commit is contained in:
wuhongjian 2022-07-15 21:35:22 +08:00
parent 09518566c7
commit 6c10a4bb29
36 changed files with 4649 additions and 4036 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/.eslintrc.js
View File

@ -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 = { module.exports = {
root: true, root: true,
env: { env: {
@ -15,6 +22,7 @@ module.exports = {
ignorePatterns: [ ignorePatterns: [
'src/supermap', 'src/supermap',
'src/views/home/videoSurveillance', 'src/views/home/videoSurveillance',
'src/views/vab/*',
'src/utils/coordinateSystemTransform.js', 'src/utils/coordinateSystemTransform.js',
], ],
} }

4
front/package.json
View File

@ -5,7 +5,9 @@
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "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", "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
"use:npm": "nrm use npm", "use:npm": "nrm use npm",
"use:taobao": "nrm use taobao", "use:taobao": "nrm use taobao",

2
front/src/App.vue
View File

@ -26,7 +26,7 @@
</script> </script>
<style lang="less"> <style lang="less">
@import '~@/vab/styles/vab.less'; @import '~@/vab/styles/vab.less';
#vue-admin-beautiful{ #vue-admin-beautiful {
max-width: 1920px; max-width: 1920px;
// max-height: 1080px; // max-height: 1080px;
margin: auto; margin: auto;

12
front/src/api/capabilityCloud.js
View File

@ -83,14 +83,22 @@ export function dataResourceInfo(params) {
//能力云图-调用趋势 //能力云图-调用趋势
export function callTheTrendPort(start, end, params) { export function callTheTrendPort(start, end, params) {
return request({ 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', method: 'get',
}) })
} }
//能力云图-调用次数 //能力云图-调用次数
export function totalCallsSnum(params) { export function totalCallsSnum(params) {
return request({ 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', method: 'get',
}) })
} }

6
front/src/api/home.js
View File

@ -342,7 +342,7 @@ export function getIntegrationServicesList(params) {
return request({ return request({
url: '/fuse/page', url: '/fuse/page',
method: 'get', method: 'get',
params params,
}) })
} }
@ -359,6 +359,6 @@ export function getDevelopDocTree(params) {
return request({ return request({
url: '/resource/selectDevelopDoc', url: '/resource/selectDevelopDoc',
method: 'get', method: 'get',
params params,
}) })
} }

2
front/src/api/personalCenter.js
View File

@ -199,7 +199,7 @@ export function getMyComment(params) {
} }
export function demandComment(params) { export function demandComment(params) {
return request({ return request({
url: '/demandComment/'+ params, url: '/demandComment/' + params,
method: 'get', method: 'get',
params, params,
}) })

9
front/src/config/default/setting.config.js
View File

@ -50,7 +50,14 @@ const setting = {
//路由模式，可选值为 history 或 hash //路由模式，可选值为 history 或 hash
routerMode: 'hash', routerMode: 'hash',
//不经过token校验的路由 //不经过token校验的路由
routesWhiteList: ['/login', '/register', '/callback', '/404', '/403', '/capabilityCloud'], // 新增统计云图白名单 routesWhiteList: [
'/login',
'/register',
'/callback',
'/404',
'/403',
'/capabilityCloud',
], // 新增统计云图白名单
//加载时显示文字 //加载时显示文字
loadingText: '正在加载中...', loadingText: '正在加载中...',
//token名称 //token名称

354
front/src/store/modules/user.js
View File

@ -2,182 +2,182 @@
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改 * @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改
*/ */
import { getUserInfo, login, logout } from '@/api/user' import { getUserInfo, login, logout } from '@/api/user'
import { import {
getAccessToken, getAccessToken,
removeAccessToken, removeAccessToken,
setAccessToken, setAccessToken,
} from '@/utils/accessToken' } from '@/utils/accessToken'
import { title, tokenName } from '@/config' import { title, tokenName } from '@/config'
import { message, notification } from 'ant-design-vue' import { message, notification } from 'ant-design-vue'
const state = () => ({ const state = () => ({
accessToken: getAccessToken(), accessToken: getAccessToken(),
username: '', username: '',
userId: '', userId: '',
avatar: '', avatar: '',
role: 0, // 用户管理员权限 role: 0, // 用户管理员权限
}) })
const getters = { const getters = {
accessToken: (state) => state.accessToken, accessToken: (state) => state.accessToken,
username: (state) => state.username, username: (state) => state.username,
avatar: (state) => state.avatar, avatar: (state) => state.avatar,
role: (state) => state.role, role: (state) => state.role,
userId: (state) => state.userId, userId: (state) => state.userId,
} }
const mutations = { const mutations = {
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置accessToken * @description 设置accessToken
* @param {*} state * @param {*} state
* @param {*} accessToken * @param {*} accessToken
*/ */
setAccessToken(state, accessToken) { setAccessToken(state, accessToken) {
state.accessToken = accessToken state.accessToken = accessToken
setAccessToken(accessToken) setAccessToken(accessToken)
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置用户名 * @description 设置用户名
* @param {*} state * @param {*} state
* @param {*} username * @param {*} username
*/ */
setUsername(state, username) { setUsername(state, username) {
state.username = username state.username = username
}, },
// 设置角色 // 设置角色
setRole(state, role) { setRole(state, role) {
state.role = role state.role = role
}, },
// 设置用户userId // 设置用户userId
setUserId(state, id) { setUserId(state, id) {
state.userId = id state.userId = id
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置头像 * @description 设置头像
* @param {*} state * @param {*} state
* @param {*} avatar * @param {*} avatar
*/ */
setAvatar(state, avatar) { setAvatar(state, avatar) {
state.avatar = avatar state.avatar = avatar
}, },
} }
const actions = { const actions = {
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 登录拦截放行时，设置虚拟角色 * @description 登录拦截放行时，设置虚拟角色
* @param {*} { commit, dispatch } * @param {*} { commit, dispatch }
*/ */
setVirtualRoles({ commit, dispatch }) { setVirtualRoles({ commit, dispatch }) {
dispatch('acl/setFull', true, { dispatch('acl/setFull', true, {
root: true, root: true,
}) })
commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif') commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif')
commit('setUsername', 'admin(未开启登录拦截)') commit('setUsername', 'admin(未开启登录拦截)')
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 登录 * @description 登录
* @param {*} { commit } * @param {*} { commit }
* @param {*} userInfo * @param {*} userInfo
*/ */
async login({ commit }, userInfo) { async login({ commit }, userInfo) {
const { data } = await login(userInfo) const { data } = await login(userInfo)
// debugger // debugger
const accessToken = data.data[tokenName] const accessToken = data.data[tokenName]
if (accessToken) { if (accessToken) {
commit('setAccessToken', accessToken) commit('setAccessToken', accessToken)
const hour = new Date().getHours() const hour = new Date().getHours()
const thisTime = const thisTime =
hour < 8 hour < 8
? '早上好' ? '早上好'
: hour <= 11 : hour <= 11
? '上午好' ? '上午好'
: hour <= 13 : hour <= 13
? '中午好' ? '中午好'
: hour < 18 : hour < 18
? '下午好' ? '下午好'
: '晚上好' : '晚上好'
notification.open({ notification.open({
message: `欢迎登录${title}`, message: `欢迎登录${title}`,
description: `${thisTime}！`, description: `${thisTime}！`,
}) })
} else { } else {
message.error(`登录接口异常，未正确返回${tokenName}...`) message.error(`登录接口异常，未正确返回${tokenName}...`)
} }
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用 * @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
* @param {*} { commit, dispatch, state } * @param {*} { commit, dispatch, state }
* @returns * @returns
*/ */
async getUserInfo({ commit }) { async getUserInfo({ commit }) {
const { data } = await getUserInfo() const { data } = await getUserInfo()
if (!data) { if (!data) {
message.error(`验证失败，请重新登录...`) message.error(`验证失败，请重新登录...`)
return false return false
} }
// debugger // debugger
commit('setUsername', data.data.realName) commit('setUsername', data.data.realName)
commit('setRole', data.data.roleIdList.length) commit('setRole', data.data.roleIdList.length)
commit('setUserId', data.data.id) commit('setUserId', data.data.id)
// TODO 获取用户信息，后续执行部分操作 // TODO 获取用户信息，后续执行部分操作
// let { username, avatar, roles, ability } = data // let { username, avatar, roles, ability } = data
// if (username && roles && Array.isArray(roles)) { // if (username && roles && Array.isArray(roles)) {
// dispatch('acl/setRole', roles, { // dispatch('acl/setRole', roles, {
// root: true, // root: true,
// }) // })
// if (ability && ability.length > 0) // if (ability && ability.length > 0)
// dispatch('acl/setAbility', ability, { // dispatch('acl/setAbility', ability, {
// root: true, // root: true,
// }) // })
// commit('setUsername', username) // commit('setUsername', username)
// commit('setAvatar', avatar) // commit('setAvatar', avatar)
// } else { // } else {
// message.error('用户信息接口异常') // message.error('用户信息接口异常')
// } // }
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 退出登录 * @description 退出登录
* @param {*} { dispatch } * @param {*} { dispatch }
*/ */
async logout({ dispatch }) { async logout({ dispatch }) {
await logout(state.accessToken) await logout(state.accessToken)
await dispatch('resetAll') await dispatch('resetAll')
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 重置accessToken、roles、ability、router等 * @description 重置accessToken、roles、ability、router等
* @param {*} { commit, dispatch } * @param {*} { commit, dispatch }
*/ */
async resetAll({ dispatch }) { async resetAll({ dispatch }) {
await dispatch('setAccessToken', '') await dispatch('setAccessToken', '')
await dispatch('acl/setFull', false, { await dispatch('acl/setFull', false, {
root: true, root: true,
}) })
await dispatch('acl/setRole', [], { await dispatch('acl/setRole', [], {
root: true, root: true,
}) })
await dispatch('acl/setAbility', [], { await dispatch('acl/setAbility', [], {
root: true, root: true,
}) })
removeAccessToken() removeAccessToken()
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置token * @description 设置token
*/ */
setAccessToken({ commit }, accessToken) { setAccessToken({ commit }, accessToken) {
commit('setAccessToken', accessToken) commit('setAccessToken', accessToken)
}, },
} }
export default { export default {
state, state,
getters, getters,
mutations, mutations,
actions, actions,
} }

9
front/src/utils/request.js
View File

@ -22,7 +22,7 @@ let loadingInstance
* @param {*} code * @param {*} code
* @param {*} msg * @param {*} msg
*/ */
const handleCode = (code, msg, res) => { const handleCode = (code, msg) => {
debugger debugger
switch (code) { switch (code) {
case 401: case 401:
@ -49,7 +49,7 @@ const handleCode = (code, msg, res) => {
message.error(msg || '接口异常') message.error(msg || '接口异常')
break break
case 302: case 302:
window.location.href = redirect // window.location.href = redirect
break break
} }
} }
@ -74,8 +74,7 @@ instance.interceptors.request.use(
(config) => { (config) => {
debugger debugger
const token = getAccessToken() const token = getAccessToken()
if (token) if (token) config.headers[tokenName] = token
config.headers[tokenName] = token
if ( if (
config.data && config.data &&
config.headers['Content-Type'] === config.headers['Content-Type'] ===
@ -105,7 +104,7 @@ instance.interceptors.response.use(
response['Access-Control-Expose-Headers'] = 'redirect' response['Access-Control-Expose-Headers'] = 'redirect'
const { code, message } = response.data const { code, message } = response.data
debugger debugger
if (code=='0' && response.headers.token) { if (code == '0' && response.headers.token) {
setAccessToken(response.headers.token) setAccessToken(response.headers.token)
} else { } else {
const token = getAccessToken() const token = getAccessToken()

96
front/src/vab/plugins/permissions.js
View File

@ -2,65 +2,65 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-01 17:23:11 * @Date: 2022-04-01 17:23:11
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-11 16:39:36 * @LastEditTime: 2022-07-15 16:36:53
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 路由守卫，目前两种模式：all模式与intelligence模式 * @description 路由守卫，目前两种模式：all模式与intelligence模式
*/ */
import router from '@/router' import router from '@/router'
import store from '@/store' import store from '@/store'
import getPageTitle from '@/utils/pageTitle' import getPageTitle from '@/utils/pageTitle'
import { getUserInfo } from '@/api/user' import { getUserInfo } from '@/api/user'
import { import {
// authentication, // authentication,
loginInterception, loginInterception,
// recordRoute, // recordRoute,
routesWhiteList, routesWhiteList,
} from '@/config' } from '@/config'
import { setAccessToken, getAccessToken } from '@/utils/accessToken' import { getAccessToken } from '@/utils/accessToken'
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
// debugger // debugger
// const SSOTOKEN = to.query.SSOToken // const SSOTOKEN = to.query.SSOToken
// if (SSOTOKEN) { // if (SSOTOKEN) {
// setAccessToken(SSOTOKEN) // setAccessToken(SSOTOKEN)
// } // }
const token = getAccessToken() const token = getAccessToken()
console.log('token', token) console.log('token', token)
let hasToken = token || store.getters['user/accessToken'] let hasToken = token || store.getters['user/accessToken']
// debugger // debugger
if (!loginInterception) hasToken = true if (!loginInterception) hasToken = true
console.log('hasToken存在巨大问题', hasToken) console.log('hasToken存在巨大问题', hasToken)
if (hasToken) { if (hasToken) {
// setAccessToken(hasToken) // setAccessToken(hasToken)
await store.dispatch('user/getUserInfo') await store.dispatch('user/getUserInfo')
debugger debugger
next() next()
} else { } else {
let accessRoutes = [] let accessRoutes = []
accessRoutes = await store.dispatch('routes/setRoutes') accessRoutes = await store.dispatch('routes/setRoutes')
accessRoutes.forEach((item) => { accessRoutes.forEach((item) => {
router.addRoute(item) router.addRoute(item)
}) })
if (routesWhiteList.indexOf(to.path) !== -1) { if (routesWhiteList.indexOf(to.path) !== -1) {
next() next()
} else { } else {
// 这里是一个单点登录的入口 // 这里是一个单点登录的入口
getUserInfo().then(res=>{ getUserInfo().then((res) => {
console.log(res) console.log(res)
router.replace('/home') router.replace('/home')
}) })
// await store.dispatch('user/getUserInfo') // await store.dispatch('user/getUserInfo')
// next() // next()
// if (recordRoute) // if (recordRoute)
// next({ path: '/login', query: { redirect: to.path }, replace: true }) // next({ path: '/login', query: { redirect: to.path }, replace: true })
// else next({ path: '/login', replace: true }) // else next({ path: '/login', replace: true })
// next() // next()
// window.open('http://www.baidu.com', '_self') // window.open('http://www.baidu.com', '_self')
} }
} }
}) })
router.afterEach((to) => { router.afterEach((to) => {
document.title = getPageTitle(to.meta.title) document.title = getPageTitle(to.meta.title)
}) })

5
front/src/views/assignCase/components/queryPage.vue
View File

@ -53,10 +53,7 @@
v-for="(item, index) in contenBox" v-for="(item, index) in contenBox"
:key="index" :key="index"
> >
<img <img :src="item.note1" alt="" />
:src="item.note1"
alt=""
/>
<h3>{{ item.name }}</h3> <h3>{{ item.name }}</h3>
<p> <p>
发布时间 发布时间

295
front/src/views/detailsAll/AlgorithmDetails.vue
View File

@ -10,159 +10,194 @@
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details> <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" <algorithm-associated-ability
id="algorithm-associated-ability" class="scrollBox"></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 <!-- <application-scenarios-and-case
id="application-scenarios-and-case" id="application-scenarios-and-case"
class="scrollBox" class="scrollBox"
></application-scenarios-and-case> --> ></application-scenarios-and-case> -->
<algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox"> <algorithm-application-scenarios
</algorithm-application-scenarios> :dataList="dataList.data"
<algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox"> id="application-scenarios"
</algorithm-application-case> 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> </div>
</template> </template>
<script setup> <script setup>
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue' import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue' import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue' import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue' import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue' import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue' import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios' import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase' import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式 import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准 import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题 import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { import {
updateVisits, updateVisits,
selectOne, selectOne,
queryPartAppByKeyId2, queryPartAppByKeyId2,
browsingInsert, browsingInsert,
} from '@/api/home' } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const loading = ref(true) const loading = ref(true)
const selectNow = ref('') const selectNow = ref('')
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.body.scrollTop = 0
mybus.on('flyToView', (id) => { mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50 let top = document.querySelector('#' + id).offsetTop - 50
// console.log(top, document.querySelector('#' + id).offsetTop) // console.log(top, document.querySelector('#' + id).offsetTop)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
}) })
onMounted(() => { onMounted(() => {
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox') domArr.value = document.querySelectorAll('.scrollBox')
scrollTop.value = scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) { for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) { if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else if (i == domArr.value.length - 1) { } else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else { } else {
if ( if (
scrollTop.value >= domArr.value[i].offsetTop - 50 && scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) { ) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} }
} }
})
}) })
})
const init = (id) => { const init = (id) => {
console.log(id, '-------------------------------------------------') console.log(id, '-------------------------------------------------')
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data) console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([]) const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value.indexOf(id) === -1) { if (arrList.value.indexOf(id) === -1) {
arrList.value.push(id) arrList.value.push(id)
updateVisits({ updateVisits({
id: res.data.data.id, id: res.data.data.id,
visits: res.data.data.visits || '0', visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => { }).then(() => {
window.sessionStorage.setItem( console.log('浏览记录+1')
'visits',
JSON.stringify(arrList.value)
)
}) })
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
}) })
}) associatedComponents.value.map((item, index) => {
associatedComponents.value.map((item, index) => { let queryPartAppByKeyIdParams = {
let queryPartAppByKeyIdParams = { keyId: id,
keyId: id, }
} queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => { associatedComponents.value[index].dataList = res.data.data
associatedComponents.value[index].dataList = res.data.data loading.value = false
loading.value = false })
}) })
}) } else if (obj) {
} else if (obj) { dataList.data = obj
dataList.data = obj console.log('预览==============', obj)
console.log('预览==============', obj) }
} }
} init(id)
init(id) onBeforeUnmount(() => {
onBeforeUnmount(() => { mybus.off('flyToView')
mybus.off('flyToView') })
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2>div:nth-of-type(3) { .fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
</style> </style>

326
front/src/views/detailsAll/ApplicationDetails.vue
View File

@ -1,179 +1,211 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:32:22 * @Date: 2022-06-08 11:32:22
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-30 10:22:31 * @LastEditTime: 2022-07-15 16:37:23
* @Description: 应用详情页 * @Description: 应用详情页
--> -->
<template> <template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }"> <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" <application-navigation
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation> :dataList="dataList.data"
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></application-navigation>
<!-- 关联能力 --> <!-- 关联能力 -->
<application-associated-ability v-if="!loading" :associatedComponents="associatedComponents" <application-associated-ability
id="application-associated-ability" class="scrollBox"></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" <application-associated-components
class="scrollBox" v-if="false"></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" <application-owning-department-and-service-provider
class="scrollBox"></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> </div>
</template> </template>
<script setup> <script setup>
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue' import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue' import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue' import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue' import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue' import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue' import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue' import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue' import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue' import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题 import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { import {
updateVisits, updateVisits,
selectOne, selectOne,
queryPartAppByKeyId, queryPartAppByKeyId,
browsingInsert, browsingInsert,
} from '@/api/home' } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const associatedComponents = ref([{ type: '组件服务', dataList: [] }]) const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
let loading = ref(true) let loading = ref(true)
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const selectNow = ref('') const selectNow = ref('')
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.body.scrollTop = 0
mybus.on('flyToView', (id) => { mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50 let top = document.querySelector('#' + id).offsetTop - 50
// console.log(top, document.querySelector('#' + id).offsetTop-50) // console.log(top, document.querySelector('#' + id).offsetTop-50)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
}) })
onMounted(() => { onMounted(() => {
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox') domArr.value = document.querySelectorAll('.scrollBox')
scrollTop.value = scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) { for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) { if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else if (i == domArr.value.length - 1) { } else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else { } else {
if ( if (
scrollTop.value >= domArr.value[i].offsetTop - 50 && scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) { ) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} }
} }
})
}) })
})
const init = (id) => { const init = (id) => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
const arrList = ref([]) const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
console.log( console.log(
'初始化详情页=========================>', '初始化详情页=========================>',
dataList.data, dataList.data,
arrList.value arrList.value
) )
if (arrList.value && arrList.value.indexOf(id) === -1) { if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id) arrList.value.push(id)
updateVisits({ updateVisits({
id: res.data.data.id, id: res.data.data.id,
visits: res.data.data.visits || '0', visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => { }).then(() => {
window.sessionStorage.setItem( console.log('浏览记录+1')
'visits',
JSON.stringify(arrList.value)
)
}) })
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
}) })
}) associatedComponents.value.map((item) => {
associatedComponents.value.map((item, index) => { let queryPartAppByKeyIdParams = {
let queryPartAppByKeyIdParams = { keyId: id,
keyId: id, type: item.type,
type: item.type, }
} queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => { associatedComponents.value[0].dataList = res.data.data
associatedComponents.value[0].dataList = res.data.data loading.value = false
loading.value = false })
}) })
}) } else if (obj) {
} else if (obj) { dataList.data = obj
dataList.data = obj console.log('预览==============', obj)
console.log('预览==============', obj) }
} }
} // const associatedComponentsFunction = () => {
const associatedComponentsFunction = () => { // if (
if ( // associatedComponents.value[0].dataList.length > 0 ||
associatedComponents.value[0].dataList.length > 0 || // associatedComponents.value[1].dataList.length > 0 ||
associatedComponents.value[1].dataList.length > 0 || // associatedComponents.value[2].dataList.length > 0
associatedComponents.value[2].dataList.length > 0 // ) {
) { // return associatedComponents.value
return associatedComponents.value // }
} // }
} init(id)
init(id) onBeforeUnmount(() => {
onBeforeUnmount(() => { mybus.off('flyToView')
mybus.off('flyToView') })
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2>div:nth-of-type(3) { .fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
</style> </style>

278
front/src/views/detailsAll/BusinessDetails.vue
View File

@ -10,149 +10,177 @@
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<business-top-details :dataList="dataList.data"></business-top-details> <business-top-details :dataList="dataList.data"></business-top-details>
<!-- 导航 --> <!-- 导航 -->
<business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents" <business-navigation
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation> :dataList="dataList.data"
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></business-navigation>
<!-- 关联能力 --> <!-- 关联能力 -->
<business-associated-ability v-if="!loading" :associatedComponents="associatedComponents" <business-associated-ability
id="business-associated-ability" class="scrollBox"></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> </div>
</template> </template>
<script setup> <script setup>
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例 import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue' import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景 import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍 import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息 import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条 import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示 import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式 import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题 import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { import {
updateVisits, updateVisits,
selectOne, selectOne,
queryPartAppByKeyId2, queryPartAppByKeyId2,
browsingInsert, browsingInsert,
} from '@/api/home' } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const selectNow = ref('') const selectNow = ref('')
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let loading = ref(true) let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.body.scrollTop = 0
mybus.on('flyToView', (id) => { mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50 let top = document.querySelector('#' + id).offsetTop - 50
// console.log(top, document.querySelector('#' + id).offsetTop) // console.log(top, document.querySelector('#' + id).offsetTop)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
}) })
onMounted(() => { onMounted(() => {
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox') domArr.value = document.querySelectorAll('.scrollBox')
scrollTop.value = scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) { for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) { if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else if (i == domArr.value.length - 1) { } else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else { } else {
if ( if (
scrollTop.value >= domArr.value[i].offsetTop - 50 && scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) { ) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} }
} }
})
}) })
})
const init = (id) => { const init = (id) => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data) console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([]) const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) { if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id) arrList.value.push(id)
updateVisits({ updateVisits({
id: res.data.data.id, id: res.data.data.id,
visits: res.data.data.visits || '0', visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => { }).then(() => {
window.sessionStorage.setItem( console.log('浏览记录+1')
'visits',
JSON.stringify(arrList.value)
)
}) })
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
}) })
}) associatedComponents.value.map((item, index) => {
associatedComponents.value.map((item, index) => { let queryPartAppByKeyIdParams = {
let queryPartAppByKeyIdParams = { keyId: id,
keyId: id, }
} queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => { associatedComponents.value[index].dataList = res.data.data
associatedComponents.value[index].dataList = res.data.data loading.value = false
loading.value = false })
}) })
}) } else if (obj) {
} else if (obj) { dataList.data = obj
dataList.data = obj console.log('预览==============', obj)
console.log('预览==============', obj) }
} }
} init(id)
init(id) onBeforeUnmount(() => {
onBeforeUnmount(() => { mybus.off('flyToView')
mybus.off('flyToView') })
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2>div:nth-of-type(3) { .fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
</style> </style>

302
front/src/views/detailsAll/DeveloperComponents.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:32:22 * @Date: 2022-06-08 11:32:22
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-20 18:59:01 * @LastEditTime: 2022-07-15 16:38:44
* @Description: 开发组件详情页 * @Description: 开发组件详情页
--> -->
<template> <template>
@ -10,157 +10,187 @@
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<developer-top-details :dataList="dataList.data"></developer-top-details> <developer-top-details :dataList="dataList.data"></developer-top-details>
<!-- 导航 --> <!-- 导航 -->
<developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()" <developer-navigation
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation> :dataList="dataList.data"
:associatedComponents="associatedComponentsFunction()"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></developer-navigation>
<!-- 关联能力 --> <!-- 关联能力 -->
<developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents" <developer-associated-ability
id="developer-associated-ability" class="scrollBox"></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" <developer-owning-department-and-service-provider
class="scrollBox"></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> </div>
</template> </template>
<script setup> <script setup>
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景 import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue' import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式 import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍 import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例 import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息 import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue' import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示 import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题 import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用 import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { import {
updateVisits, updateVisits,
selectOne, selectOne,
queryPartAppByKeyId2, queryPartAppByKeyId2,
browsingInsert, browsingInsert,
} from '@/api/home' } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const selectNow = ref('') const selectNow = ref('')
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let loading = ref(true) let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.body.scrollTop = 0
mybus.on('flyToView', (id) => { mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50 let top = document.querySelector('#' + id).offsetTop - 50
// console.log(top, document.querySelector('#' + id).offsetTop) // console.log(top, document.querySelector('#' + id).offsetTop)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.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
}
}
}
}) })
}) onMounted(() => {
const init = (id) => { // console.clear()
if (id) { window.addEventListener('scroll', () => {
let queryPartAppByKeyIdParams = { domArr.value = document.querySelectorAll('.scrollBox')
keyId: id, scrollTop.value =
} document.documentElement.scrollTop || document.body.scrollTop
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => { for (let i = 0; i < domArr.value.length; i++) {
associatedComponents.value[0].dataList = res.data.data if (i === 0) {
loading.value = false if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
}) selectNow.value = domArr.value[i].id
selectOne(id).then((res) => { }
// console.clear() } else if (i == domArr.value.length - 1) {
dataList.data = res.data.data if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
console.log('初始化详情页=========================>', dataList.data) selectNow.value = domArr.value[i].id
const arrList = ref([]) }
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) } else {
if (arrList.value && arrList.value.indexOf(id) === -1) { if (
arrList.value.push(id) scrollTop.value >= domArr.value[i].offsetTop - 50 &&
updateVisits({ scrollTop.value <= domArr.value[i + 1].offsetTop - 50
id: res.data.data.id, ) {
visits: res.data.data.visits || '0', selectNow.value = domArr.value[i].id
}).then(() => { }
window.sessionStorage.setItem( }
'visits',
JSON.stringify(arrList.value)
)
})
} }
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
}) })
associatedComponents.value.map((item, index) => { }) })
} else if (obj) { const init = (id) => {
dataList.data = obj if (id) {
console.log('预览==============', obj) 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)
init(id) const associatedComponentsFunction = () => {
const associatedComponentsFunction = () => { if (associatedComponents.value[0].dataList.length > 0) {
if (associatedComponents.value[0].dataList.length > 0) { return associatedComponents.value
return associatedComponents.value }
} }
} onBeforeUnmount(() => {
onBeforeUnmount(() => { mybus.off('flyToView')
mybus.off('flyToView') })
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2>div:nth-of-type(3) { .fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
</style> </style>

292
front/src/views/detailsAll/LayerService.vue
View File

@ -8,156 +8,188 @@
<template> <template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }"> <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" <layer-service-navigation
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></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" <layer-service-associated-ability
class="scrollBox" v-if="!loading"></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> </div>
</template> </template>
<script setup> <script setup>
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例 import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue' import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景 import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题 import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息 import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航 import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示 import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览 import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息 import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式 import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { import {
updateVisits, updateVisits,
selectOne, selectOne,
queryPartAppByKeyId2, queryPartAppByKeyId2,
browsingInsert, browsingInsert,
} from '@/api/home' } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const selectNow = ref('') const selectNow = ref('')
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let loading = ref(true) let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.body.scrollTop = 0
mybus.on('flyToView', (id) => { mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50 let top = document.querySelector('#' + id).offsetTop - 50
// console.log(top, document.querySelector('#' + id).offsetTop) // console.log(top, document.querySelector('#' + id).offsetTop)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
}) })
onMounted(() => { onMounted(() => {
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox') domArr.value = document.querySelectorAll('.scrollBox')
scrollTop.value = scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) { for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) { if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else if (i == domArr.value.length - 1) { } else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} else { } else {
if ( if (
scrollTop.value >= domArr.value[i].offsetTop - 50 && scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) { ) {
selectNow.value = domArr.value[i].id selectNow.value = domArr.value[i].id
} }
} }
} }
})
}) })
})
const init = (id) => { const init = (id) => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data) console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([]) const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) { if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id) arrList.value.push(id)
updateVisits({ updateVisits({
id: res.data.data.id, id: res.data.data.id,
visits: res.data.data.visits || '0', visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => { }).then(() => {
window.sessionStorage.setItem( console.log('浏览记录+1')
'visits',
JSON.stringify(arrList.value)
)
}) })
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
}) })
}) associatedComponents.value.map((item, index) => {
associatedComponents.value.map((item, index) => { let queryPartAppByKeyIdParams = {
let queryPartAppByKeyIdParams = { keyId: id,
keyId: id, }
} queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => { associatedComponents.value[index].dataList = res.data.data
associatedComponents.value[index].dataList = res.data.data loading.value = false
loading.value = false })
}) })
}) } else if (obj) {
} else if (obj) { dataList.data = obj
dataList.data = obj console.log('预览==============', obj)
console.log('预览==============', obj) }
} }
} init(id)
init(id) onBeforeUnmount(() => {
onBeforeUnmount(() => { mybus.off('flyToView')
mybus.off('flyToView') })
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2>div:nth-of-type(3) { .fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; margin-top: 0.84rem;
} }
</style> </style>

2
front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
View File

@ -92,7 +92,7 @@
align-items: center; align-items: center;
.item { .item {
width: 424px; width: 424px;
height:306px; height: 306px;
padding: 35px; padding: 35px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
View File

@ -38,7 +38,9 @@
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (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) { if (!obj) {
flag.value = false flag.value = false
} else { } else {

10
front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
View File

@ -73,7 +73,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { paddleocr,algo } from '@/api/file' import { algo } from '@/api/file'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
@ -85,10 +85,12 @@
const imageResult1 = ref('') const imageResult1 = ref('')
const menuOpenKeys2 = 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 imgType = router.currentRoute.value.query.exampleImg.split('.')[1]
const handleChange = (info) => { const handleChange = (info) => {
debugger; debugger
if (info.file.status !== 'uploading') { if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList) console.log(info.file, info.fileList)
} }
@ -111,7 +113,7 @@
company: router.currentRoute.value.query.company, company: router.currentRoute.value.query.company,
algorithmName: router.currentRoute.value.query.algorithmName, algorithmName: router.currentRoute.value.query.algorithmName,
data: base64.split('base64,')[1], data: base64.split('base64,')[1],
type: router.currentRoute.value.query.type type: router.currentRoute.value.query.type,
} }
algo(param).then((res) => { algo(param).then((res) => {
// wordValue.value = res.data // wordValue.value = res.data

6
front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
View File

@ -43,7 +43,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { correct,algo } from '@/api/file' import { algo } from '@/api/file'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
// const keyId = router.currentRoute.value.query.id // const keyId = router.currentRoute.value.query.id
@ -58,7 +58,7 @@
company: router.currentRoute.value.query.company, company: router.currentRoute.value.query.company,
algorithmName: router.currentRoute.value.query.algorithmName, algorithmName: router.currentRoute.value.query.algorithmName,
data: wordValue.value, data: wordValue.value,
type: router.currentRoute.value.query.type type: router.currentRoute.value.query.type,
} }
// correct(param).then((res) => { // correct(param).then((res) => {
// // wordContent.value = res.data.data // // wordContent.value = res.data.data
@ -72,7 +72,7 @@
// errorWordContent.value = val.value // errorWordContent.value = val.value
// }) // })
// }) // })
algo(param).then(res=>{ algo(param).then((res) => {
errorWord.value = res.data.data.text_data errorWord.value = res.data.data.text_data
}) })
} }

200
front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
View File

@ -16,127 +16,125 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="no-data"> <div v-else class="no-data">暂无数据</div>
暂无数据
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '常见问题' (item) => item.attrType === '常见问题'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
obj.attrValue.map((item) => { obj.attrValue.map((item) => {
let params = { let params = {
title: item.question, title: item.question,
answer: item.answer, answer: item.answer,
} }
dataFrom.value.push(params) 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)
})
}
} }
} }
) 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cpmmon-problem { .cpmmon-problem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 160px; padding-top: 160px;
background: #f7f8fa; background: #f7f8fa;
.content { .content {
width: 1300px; width: 1300px;
margin: 20px 0px; margin: 20px 0px;
background: #ffffff; background: #ffffff;
padding: 40px; padding: 40px;
.content-son { .content-son {
font-size: 20px; font-size: 20px;
margin-bottom: 60px; margin-bottom: 60px;
.content-top { .content-top {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
line-height: 20px; line-height: 20px;
} }
.content-bottom { .content-bottom {
display: flex; display: flex;
line-height: 34px; line-height: 34px;
color: #666666; color: #666666;
} }
.content-top, .content-top,
.content-bottom { .content-bottom {
div:last-child { div:last-child {
width: calc(100% - 54px); 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 { .content-son:last-child {
width: 34px; margin-bottom: 0px;
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 { .no-data {
margin-bottom: 0px; 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> </style>

408
front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
View File

@ -7,26 +7,42 @@
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle> <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
</div> </div>
<div class="tab"> <div class="tab">
<div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name" <div
@click="tabSwitch(itemSonTitle.name)" class="tab-son" :class=" v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
:key="itemSonTitle.name"
@click="tabSwitch(itemSonTitle.name)"
class="tab-son"
:class="
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue) tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
"> "
>
<a-tooltip> <a-tooltip>
<template #title>{{ itemSonTitle.name }}</template> <template #title>{{ itemSonTitle.name }}</template>
<div class="tab-top" :class=" <div
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : '' class="tab-top"
"> :class="
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
"
>
{{ itemSonTitle.name }} {{ itemSonTitle.name }}
</div> </div>
</a-tooltip> </a-tooltip>
<div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div> <div
class="tab-bottom"
v-if="tabInitialize() == itemSonTitle.name"
></div>
</div> </div>
</div> </div>
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle"> <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
<div class="content" v-if="tabindex == itemSonTitle.name"> <div class="content" v-if="tabindex == itemSonTitle.name">
<div class="content-left"> <div class="content-left">
<div class="content-left-scene" v-if="!itemSonTitle.img"></div> <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>
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
@ -44,215 +60,215 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
// tab切换方法 // tab切换方法
let tabindex = ref('场景说明一') let tabindex = ref('场景说明一')
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '功能介绍' (item) => item.attrType === '功能介绍'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
dataFrom.value = obj dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name 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
}
} }
} }
) watch(
//滚动条样式 () => props.dataList,
function tabIndexClass(index, title, content) { (val) => {
if (title == '功能介绍' && index == 0 && content.length > 6) { if (val) {
return 'tab-son-class' 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.function-intorduction { .function-intorduction {
width: 100%; width: 100%;
background: #f7f8fa; 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;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: unset; overflow-x: unset;
.tab { .application-scenarios-and-case-son {
max-width: 13rem; padding-top: 0.8rem;
overflow-x: auto; padding-bottom: 0.8rem;
display: flex; display: flex;
justify-content: center; flex-direction: column;
color: #808080; align-items: center;
border-bottom: 0.01rem #e4e6f5 solid; overflow: unset;
margin-top: 0.45rem;
margin-bottom: 0.4rem;
cursor: pointer;
padding-left: 0.4rem;
padding-right: 0.4rem;
.tab-son { .tab {
max-width: 13rem;
overflow-x: auto;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; color: #808080;
margin-right: 1rem; 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 { .tab-son {
min-width: 1.2rem; display: flex;
font-size: 0.24rem; flex-direction: column;
line-height: 0.24rem; align-items: center;
margin-bottom: 0.2rem; margin-right: 1rem;
max-width: 2rem;
height: 0.24rem; .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; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -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 { .application-scenarios-and-case-son:first-child {
background: rgba(82, 106, 255, 0.4); padding-top: 1rem;
}
.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;
}
}
</style> </style>

194
front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
View File

@ -8,10 +8,18 @@
<template> <template>
<div class="application-presentation" v-if="flag"> <div class="application-presentation" v-if="flag">
<detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title> <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 class="play" @click="showModal"></div>
</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> <template #footer></template>
<div style="width: 100%; display: flex; justify-content: center"> <div style="width: 100%; display: flex; justify-content: center">
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
@ -22,106 +30,106 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, defineProps, watch } from 'vue' import { ref, reactive, defineProps, watch } from 'vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const visible = ref(false) const visible = ref(false)
const options = reactive({ const options = reactive({
width: '7.00rem', //播放器宽度 width: '7.00rem', //播放器宽度
height: '4.00rem', //播放器高度 height: '4.00rem', //播放器高度
color: '#409eff', //主题色 color: '#409eff', //主题色
title: '', //视频名称 title: '', //视频名称
src: '', //视频源 src: '', //视频源
muted: false, //静音 muted: false, //静音
webFullScreen: false, webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速 speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
autoPlay: true, //自动播放 autoPlay: true, //自动播放
loop: false, //循环播放 loop: false, //循环播放
mirror: false, //镜像画面 mirror: false, //镜像画面
ligthOff: false, //关灯模式 ligthOff: false, //关灯模式
volume: 0.3, //默认音量大小 volume: 0.3, //默认音量大小
control: true, //是否显示控制 control: true, //是否显示控制
controlBtns: [ controlBtns: [
'audioTrack', 'audioTrack',
'quality', 'quality',
'speedRate', 'speedRate',
'volume', 'volume',
'setting', 'setting',
'pip', 'pip',
'pageFullScreen', 'pageFullScreen',
'fullScreen', 'fullScreen',
], //显示所有按钮, ], //显示所有按钮,
}) })
const showModal = () => { const showModal = () => {
visible.value = true 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;'
}
} }
} const props = defineProps({
watch( dataList: { type: Object, default: null },
() => props.dataList, })
(val) => { const flag = ref(true)
if (val) { const img = ref({})
let obj = val.infoList.filter( console.log('111111111111111111111,', props.dataList)
(item) => item.attrType === '应用展示视频' 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] )[0]
console.log('视频==============>', obj) options.src = obj.attrValue
if (!obj) { if (imgindex) {
flag.value = false img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
} 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;'
}
} }
} }
} }
) 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-presentation { .application-presentation {
padding: 0.8rem 3rem 0; padding: 0.8rem 3rem 0;
.main { .main {
height: 3.4rem; height: 3.4rem;
border-radius: 0.1rem; border-radius: 0.1rem;
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat; 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;
background-size: 100%; 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> </style>

421
front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
View File

@ -53,7 +53,11 @@
加入购物车 加入购物车
</a-button> --> </a-button> -->
<!-- 融合服务 存在fuseResourceList --> <!-- 融合服务 存在fuseResourceList -->
<a-button type="primary" @click="handleAKeyApplication()" v-if="dataList.fuseResourceList"> <a-button
type="primary"
@click="handleAKeyApplication()"
v-if="dataList.fuseResourceList"
>
<template #icon> <template #icon>
<form-outlined /> <form-outlined />
</template> </template>
@ -66,223 +70,220 @@
</div> </div>
</template> </template>
<script setup> <script setup>
// import { ShoppingCartOutlined } from '@ant-design/icons-vue' // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue' import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter' import { scInsert } from '@/api/personalCenter'
// import { sgcInsert } from '@/api/home' // import { sgcInsert } from '@/api/home'
// import { useRouter } from 'vue-router' // import { useRouter } from 'vue-router'
// import mybus from '@/myplugins/mybus' // import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
// 获取当前路由地址 // 获取当前路由地址
const router = useRouter() const router = useRouter()
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, 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)
}) })
localStorage.setItem( console.log('dataList------------>', props.dataList)
'applyList',
JSON.stringify(_applyList)
)
router.push({
path: '/apply',
})
}
// 收藏 // const router = useRouter()
const goTOCollection = () => { const applicationArea = ref('')
console.log('收藏===================》', props.dataList) // // 加入申购车
scInsert([{ resourceId: props.dataList.id }]).then((res) => { // const addShoppingCart = () => {
console.log(res) // console.log('加入申购车==================>', props.dataList)
message.success('收藏成功') // sgcInsert({
}) // delFlag: '0',
} // resourceId: props.dataList.id,
if (props.dataList.infoList) { // // userId: userId.value,
applicationArea.value = props.dataList.infoList.filter( // }).then((res) => {
(val) => val.attrType === '应用领域' // console.log(res)
)[0].attrValue // message.success('添加申购车成功！')
} // mybus.emit('getSgcNum')
watch( // })
() => props.dataList, // }
(val) => { // // 立即申请
if (val) { // function toView() {
console.log('props.dataList-----watch------->', val); // // 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( localStorage.setItem('applyList', JSON.stringify(_applyList))
(val) => val.attrType === '应用领域' router.push({
)[0].attrValue 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.algorithm-top-details { .algorithm-top-details {
height: 6rem; height: 6rem;
padding: 1.8rem 0 0; padding: 1.8rem 0 0;
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat; 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;
background-size: 100%; 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> </style>

399
front/src/views/detailsAll/components/Business/BusinessNavigation.vue
View File

@ -8,7 +8,12 @@
<template> <template>
<div class="business-navigation" v-if="navList.length > 0"> <div class="business-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <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 }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -16,217 +21,217 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch, getCurrentInstance } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home' import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址 // 获取当前路由地址
const router = useRouter() const router = useRouter()
const keyId = router.currentRoute.value.query.id const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{ {
name: '组件展示', name: '组件展示',
key: 'business-presentation', key: 'business-presentation',
}, },
{ {
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',
}, },
{ {
name: '应用场景', name: '应用场景',
key: 'application-scenarios', key: 'application-scenarios',
}, },
{ {
name: '应用案例', name: '应用案例',
key: 'application-case', key: 'application-case',
}, },
{ {
name: '使用方式', name: '使用方式',
key: 'business-usage-mode', key: 'business-usage-mode',
}, },
{ {
name: '常见问题', name: '常见问题',
key: 'common-problem', key: 'common-problem',
}, },
]) ])
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, 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)
}
}) })
} const select = ref('business-associated-ability')
const selectNav = (key) => { const list = ref([])
select.value = key // 根据能力id查询是否存在关联应用
console.log(key, select.value) if (keyId) {
mybus.emit('flyToView', select.value) queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
} console.log('ressssssss', res)
if (props.dataList.infoList) { if (res.data.data.length > 0) {
list.value = [] // 存在关联应用时在导航栏加入关联应用
let arr = [ navList.value.unshift({
'关联应用', name: '关联应用',
'组件视频介绍', key: 'business-associated-ability',
'功能介绍', show: true,
'应用场景', })
'应用案例', // list.value.push('关联应用')
'使用方式', console.log('navList', navList)
'常见问题',
]
// 排序
// 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
} }
} })
})
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) const selectNav = (key) => {
} select.value = key
watch( console.log(key, select.value)
() => props.selectNow, mybus.emit('flyToView', select.value)
(newValue) => {
select.value = newValue
} }
) if (props.dataList.infoList) {
watch( list.value = []
() => props.dataList, let arr = [
(val) => { '关联应用',
if (val) { '组件视频介绍',
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)
// 排序 })
// eslint-disable-next-line vue/no-mutating-props props.dataList.infoList.map((item) => {
props.dataList.infoList.sort((a, b) => { if (
// console.log('排序==============>', a, b) item.attrType === '常见问题' ||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType) item.attrType === '功能介绍' ||
}) item.attrType === '应用场景' ||
val.infoList.map((item) => { item.attrType === '应用案例'
if ( ) {
item.attrType === '常见问题' || list.value.push(item.attrType)
item.attrType === '功能介绍' || } else if (item.attrType === '组件视频介绍') {
item.attrType === '应用场景' || list.value.push('组件展示')
item.attrType === '应用案例' }
) { })
list.value.push(item.attrType) list.value.unshift('关联应用')
} else if (item.attrType === '组件视频介绍') { list.value.push('使用方式')
list.value.push('组件展示') navList.value.forEach((item) => {
} console.log(item)
}) if (list.value.indexOf(item.name) > -1) {
list.value.unshift('关联应用') if (item.name == '关联应用') {
list.value.push('使用方式') if (props.associatedComponents[0].dataList.length != 0) {
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 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) })
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.business-navigation { .business-navigation {
width: 19.12rem; width: 19.12rem;
height: 0.84rem; height: 0.84rem;
line-height: 0.8rem; 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;
display: flex; display: flex;
flex-direction: column; justify-content: space-around;
justify-content: space-between; font-size: 0.24rem;
align-items: center; color: #666;
background: #fff;
padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative;
.line { .nav {
width: 0.4rem; cursor: pointer;
height: 0.04rem; 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> </style>

2330
front/src/views/home/DetailsPageconetent.vue
View File

File diff suppressed because it is too large Load Diff

128
front/src/views/home/components/CompareGroupView.vue
View File

@ -1,54 +1,59 @@
<template> <template>
<div> <div>
<div v-if="groupArray.length > 0"> <div v-if="groupArray.length > 0">
<div class="group-box" v-for="(data, i) in groupArray" :key="i"> <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" <div
:class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''"> class="flex-row-start row-tr"
<div class="td-name">{{ item }}</div> v-for="(item, j) in Object.keys(data)"
<div class="flex-row-start"> :key="j"
<div class="td" v-for="(d, k) in data[item]" :key="k">{{ d || '--' }}</div> :class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''"
</div> >
</div> <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>
{{ '哈啊哈哈哈哈' + groupArray.length }} </div>
<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> </template>
<script> <script>
import { defineComponent, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from 'vue' import { ref, watch, nextTick } from 'vue'
export default { export default {
props: ["dataList"], props: ['dataList'],
setup(props) { setup(props) {
let groupArray = ref([]) let groupArray = ref([])
watch( watch(
() => { () => {
return props.dataList return props.dataList
}, },
(newVal) => { (newVal) => {
console.log('newVal------------>', newVal); console.log('newVal------------>', newVal)
groupArray = ref([]) groupArray = ref([])
newVal.map(v => { newVal.map((v) => {
groupArray.value.push(v) groupArray.value.push(v)
}) })
groupArray.value = groupArray.value.splice(0) groupArray.value = groupArray.value.splice(0)
nextTick(() => { nextTick(() => {
console.log('groupArray---子组件--------->', groupArray.value); console.log('groupArray---子组件--------->', groupArray.value)
}) })
}, },
{ {
deep: true, deep: true,
immediate: true immediate: true,
}
)
return {
groupArray,
} }
} )
}
return {
groupArray,
}
},
}
</script> </script>
<!-- <script setup> <!-- <script setup>
@ -79,44 +84,43 @@ nextTick(() => {
</script> --> </script> -->
<style lang="less" scoped> <style lang="less" scoped>
.group-box { .group-box {
margin-bottom: 20px; margin-bottom: 20px;
} }
.border { .border {
border: 1px solid #dddee1; border: 1px solid #dddee1;
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.row-tr {
.row-tr {
border: 1px solid #dddee1; border: 1px solid #dddee1;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
} }
.no-border-right { .no-border-right {
border: 1px solid #dddee1; border: 1px solid #dddee1;
border-right: none; border-right: none;
} }
.flex-row-start { .flex-row-start {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.td-name { .td-name {
border-right: 1px solid #dddee1; border-right: 1px solid #dddee1;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
width: 200px; width: 200px;
font-size: 14px; font-size: 14px;
} }
.td { .td {
border-right: 1px solid #dddee1; border-right: 1px solid #dddee1;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -128,18 +132,18 @@ nextTick(() => {
word-wrap: break-all; word-wrap: break-all;
word-break: normal; word-break: normal;
overflow: hidden; overflow: hidden;
} }
.border-bottom { .border-bottom {
border-bottom: 1px solid #dddee1; border-bottom: 1px solid #dddee1;
} }
.no-data { .no-data {
height: 100px; height: 100px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #dddee1; border: 1px solid #dddee1;
} }
</style> </style>

120
front/src/views/home/constantData/showData.js
View File

@ -1,68 +1,68 @@
export const titleNameArray = [ export const titleNameArray = [
{ {
photo: require('@/assets/newHome/banner-zj.png'), photo: require('@/assets/newHome/banner-zj.png'),
name: '组件服务', name: '组件服务',
}, },
{ {
photo: require('@/assets/newHome/banner-yy.png'), photo: require('@/assets/newHome/banner-yy.png'),
name: '应用资源', name: '应用资源',
}, },
{ {
photo: require('@/assets/newHome/banner-jc.png'), photo: require('@/assets/newHome/banner-jc.png'),
name: '基础设施', name: '基础设施',
}, },
{ {
photo: require('@/assets/newHome/banner-sj.png'), photo: require('@/assets/newHome/banner-sj.png'),
name: '数据资源', name: '数据资源',
}, },
{ {
photo: require('@/assets/newHome/banner-zs.png'), photo: require('@/assets/newHome/banner-zs.png'),
name: '知识库', name: '知识库',
}, },
] ]
// 模糊查询 // 模糊查询
export const keyongziyuanqingkaungArray = [ export const keyongziyuanqingkaungArray = [
{ {
name: 'CPU/核：', name: 'CPU/核：',
value: 2102, value: 2102,
}, },
{ {
name: '内存/T：', name: '内存/T：',
value: 6.68, value: 6.68,
}, },
{ {
name: '存储/T：', name: '存储/T：',
value: 2102, value: 2102,
}, },
{ {
name: 'RDS for Mysql/G：', name: 'RDS for Mysql/G：',
value: 982.82, value: 982.82,
}, },
{ {
name: 'RDS for SqlServer/G：', name: 'RDS for SqlServer/G：',
value: 997.17, value: 997.17,
}, },
] ]
export const shujuziyuanqingkuangArray = [ export const shujuziyuanqingkuangArray = [
{ {
name: '已上线目录：', name: '已上线目录：',
value: 10372, value: 10372,
danwei: '条', danwei: '条',
}, },
{ {
name: '已发布服务：', name: '已发布服务：',
value: 1080, value: 1080,
danwei: '条', danwei: '条',
}, },
{ {
name: '已发布接口：', name: '已发布接口：',
value: 976, value: 976,
danwei: '条', danwei: '条',
}, },
{ {
name: '更新时间：', name: '更新时间：',
value: '2022-05-06', value: '2022-05-06',
}, },
] ]

495
front/src/views/home/integrationServices.vue
View File

@ -1,263 +1,280 @@
<template> <template>
<!-- 青岛 --> <!-- 青岛 -->
<div class="details-pageconetent"> <div class="details-pageconetent">
<home-header></home-header> <home-header></home-header>
<div class="top"> <div class="top">
<div class="resultListSearchInput-father"> <div class="resultListSearchInput-father">
<div class="resultListSearchInput-son"> <div class="resultListSearchInput-son">
模糊搜索 模糊搜索
<a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large" <a-input-search
@search="getAppResources" @change="onSearch" class="resultListSearchInput" /> v-model:value="searchValue"
<button class="button-reset" @click="chongzhi()">重置</button> placeholder="请输入关键词"
<div class="hengxian"></div> enter-button="搜索"
</div> size="large"
</div> @search="getAppResources"
<searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2" @change="onSearch"
:resourceList="resourceList" :resourceTotal="resourceTotal" selectCardsname="融合服务" /> class="resultListSearchInput"
<div class="pagination"> />
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage" <button class="button-reset" @click="chongzhi()">重置</button>
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper <div class="hengxian"></div>
: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> </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> </div>
<home-footer></home-footer> </div>
<home-footer></home-footer>
</template> </template>
<script> <script>
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
defineComponent,
reactive,
ref,
toRefs,
onMounted,
watch,
} from 'vue'
import { import { getIntegrationServicesList } from '@/api/home.js'
getIntegrationServicesList, import { useRouter } from 'vue-router'
} from '@/api/home.js' import HomeHeader from '@/views/home/components/header'
import { useRouter } from 'vue-router' import searchResultList from '@/views/home/components/searchResultList.vue'
import HomeHeader from '@/views/home/components/header' import { message } from 'ant-design-vue'
import searchResultList from '@/views/home/components/searchResultList.vue'
import { message } from 'ant-design-vue'
export default defineComponent({ export default defineComponent({
setup() { 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) currentPage.value = 1
const currentPage = ref(1) currentPageSize.value = 5
const currentPageSize = ref(5) // 重置查询条件
const pageSizeOptions = ref(['5', '10', '20', '50']) paramsGetResources.pageNum = 1
const router = useRouter() paramsGetResources.pageSize = 5
const select = router.currentRoute.value.query.select paramsGetResources.orderField = 'create_date'
const searchValue = ref('') paramsGetResources.orderType = 'DESC'
const Cardsname = ref(select) mybus.emit('chongzhi', {
const resourceList = reactive({ data: [] }) type: '融合服务',
const resourceTotal = ref(0) })
const current = ref(1) getAppResources()
// 刷新筛选条件组件 }
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()
}
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,
} }
getIntegrationServicesList(postData).then(
// 获取融合服务列表 (res) => {
const getIntegrationList = () => { if (res.data.code !== 0) {
let postData = { return message.error(res.data.msg)
limit: currentPageSize.value,
page: currentPage.value,
orderField: paramsGetResources.orderField,
orderType: paramsGetResources.orderType,
name: searchValue.value
} }
getIntegrationServicesList(postData).then(res => { resourceList.data = res.data.data.list || []
if (res.data.code !== 0) { resourceTotal.value = res.data.data.total || 0
return message.error(res.data.msg) },
} (err) => {
resourceList.data = res.data.data.list || [] message.error(err)
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) => { mybus.on('refresh', () => {
if (ids && ids.length > 0) { paramsGetResources.pageNum = 1
paramsGetResources.deptIds = ids currentPage.value = 1
} else { getAppResources()
delete paramsGetResources.deptIds })
} mybus.on('changeCondition', (condition) => {
getAppResources() paramsGetResources.orderField = condition.orderField
console.log('paramsGetResources', paramsGetResources) paramsGetResources.orderType = condition.orderType
}) getAppResources()
mybus.on('changePage', (page) => { })
paramsGetResources.pageNum = page
getAppResources('分页查询')
})
mybus.on('changeSelcted', () => {
getAppResources()
})
mybus.on('refresh', () => { const pageChange = (val) => {
paramsGetResources.pageNum = 1 console.log(val)
currentPage.value = 1 loading.value = true
getAppResources() currentPage.value = val
}) paramsGetResources.pageNum = val
mybus.on('changeCondition', (condition) => { let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
paramsGetResources.orderField = condition.orderField getAppResources(params)
paramsGetResources.orderType = condition.orderType }
getAppResources()
})
const pageChange = (val) => { onMounted(() => {
console.log(val) listKey2.value++
loading.value = true getAppResources()
currentPage.value = val })
paramsGetResources.pageNum = val
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
getAppResources(params)
}
onMounted(() => { // 分页
listKey2.value++; const onShowSizeChange = (current, pageSize) => {
getAppResources() currentPage.value = current
}) currentPageSize.value = pageSize
paramsGetResources.pageNum = current
paramsGetResources.pageSize = pageSize
getAppResources()
}
watch(currentPageSize, () => {
console.log('pageSize', currentPageSize.value)
})
// 分页 return {
const onShowSizeChange = (current, pageSize) => { listKey,
currentPage.value = current searchValue,
currentPageSize.value = pageSize currentPage,
paramsGetResources.pageNum = current resourceList,
paramsGetResources.pageSize = pageSize resourceTotal,
getAppResources() pageChange,
} listKey2,
watch(currentPageSize, () => { Cardsname,
console.log('pageSize', currentPageSize.value) getAppResources,
}) chongzhi,
onSearch,
return { currentPageSize,
listKey, pageSizeOptions,
searchValue, current,
currentPage, loading,
resourceList, onShowSizeChange,
resourceTotal, }
pageChange,
listKey2,
Cardsname,
getAppResources,
chongzhi,
onSearch,
currentPageSize,
pageSizeOptions,
current,
loading,
}
}, },
components: { components: {
HomeHeader, HomeHeader,
HomeFooter, HomeFooter,
searchResultList, searchResultList,
}, },
beforeUnmount() { beforeUnmount() {
mybus.off('paramsGetResources') mybus.off('paramsGetResources')
mybus.off('changeCondition') mybus.off('changeCondition')
mybus.off('refresh') mybus.off('refresh')
mybus.off('changePage') mybus.off('changePage')
}, },
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.resultListSearchInput-father { .resultListSearchInput-father {
background: #f3f5f9; background: #f3f5f9;
padding: 0.2rem; padding: 0.2rem;
// padding-left: 0.2rem; // padding-left: 0.2rem;
// padding-top: 0.2rem; // padding-top: 0.2rem;
.resultListSearchInput-son { .resultListSearchInput-son {
background: #fff; background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem; padding: 0.2rem 0.2rem 0rem 0.3rem;
.hengxian { .hengxian {
width: 100%; width: 100%;
height: 0.01rem; height: 0.01rem;
background: rgba(150, 144, 144, 0.3); background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem; margin-top: 0.2rem;
} }
} }
} }
.resultListSearchInput { .resultListSearchInput {
margin-left: 0.1rem; margin-left: 0.1rem;
:deep(.ant-input) { :deep(.ant-input) {
width: 4rem; width: 4rem;
height: 0.36rem; height: 0.36rem;
background: #fff; background: #fff;
border-radius: 0.04rem; border-radius: 0.04rem;
} }
:deep(.ant-input-search-button) { :deep(.ant-input-search-button) {
width: 0.8rem; width: 0.8rem;
height: 0.36rem; height: 0.36rem;
background: #0087ff; background: #0087ff;
border-radius: 0.04rem !important; border-radius: 0.04rem !important;
font-size: 0.14rem; font-size: 0.14rem;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
line-height: 0.34rem; line-height: 0.34rem;
margin-left: 0.1rem; margin-left: 0.1rem;
} }
:deep(.ant-input-group-addon) { :deep(.ant-input-group-addon) {
left: 0 !important; left: 0 !important;
} }
} }
.button-reset { .button-reset {
border: 0; border: 0;
outline: none; outline: none;
width: 0.8rem; width: 0.8rem;
@ -270,9 +287,9 @@ export default defineComponent({
line-height: 0.34rem; line-height: 0.34rem;
margin-left: 2.5rem; margin-left: 2.5rem;
cursor: pointer; cursor: pointer;
} }
.details-pageconetent { .details-pageconetent {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
@ -283,37 +300,37 @@ export default defineComponent({
background: rgba(245, 243, 243, 0.3); background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left { .details-pageconetent-left {
max-height: 6.9rem; max-height: 6.9rem;
position: absolute; position: absolute;
width: 2.5rem; width: 2.5rem;
top: 0.17rem; top: 0.17rem;
left: 2.5rem; left: 2.5rem;
margin-right: 0.17rem; margin-right: 0.17rem;
overflow: auto; overflow: auto;
} }
.top { .top {
min-height: 7.2rem; min-height: 7.2rem;
position: relative; position: relative;
width: 11.5rem; width: 11.5rem;
display: flex; display: flex;
padding-top: 0.2rem; padding-top: 0.2rem;
flex-direction: column; flex-direction: column;
font-size: 0.16rem; font-size: 0.16rem;
justify-content: left; justify-content: left;
background: #f3f5f9;
.pagination {
background: #f3f5f9; background: #f3f5f9;
padding-bottom: 0.6rem;
.pagination { }
background: #f3f5f9;
padding-bottom: 0.6rem;
}
} }
} }
:deep(.ant-card-grid) { :deep(.ant-card-grid) {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
</style> </style>

721
front/src/views/home/integrationServicesDetails.vue
View File

@ -2,13 +2,20 @@
<template> <template>
<div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }"> <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="{ fixed: scrollTop >= 600 }">
<div class="application-navigation"> <div class="application-navigation">
<template v-for="nav in navList" :key="nav.key"> <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 }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -17,7 +24,10 @@
</div> </div>
<!-- 组合能力 --> <!-- 组合能力 -->
<div id="integration-combination-ability" class="combination-ability scrollBox"> <div
id="integration-combination-ability"
class="combination-ability scrollBox"
>
<div class="title-1"> <div class="title-1">
<DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle> <DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
</div> </div>
@ -50,9 +60,17 @@
</div> </div>
</div> </div>
<div class="content-card flex-row-start"> <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-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] || '--' }} {{ use.info[d] }}:{{ detailInfoObj[d] || '--' }}
</div> </div>
</div> </div>
@ -61,390 +79,403 @@
</div> </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> <home-footer></home-footer>
</div> </div>
</template> </template>
<script setup> <script setup>
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue' import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题 import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { getIntegrationDetail } from '@/api/home' import { getIntegrationDetail } from '@/api/home'
import mybus from '@/myplugins/mybus' 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 navList = ref([
const scrollTop = ref(0) {
const domArr = ref([]) name: '组合能力',
const id = router.currentRoute.value.query.id key: 'integration-combination-ability',
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: '联系人电话',
}, },
}, {
{ name: '使用方式',
title: '服务商', key: 'integration-use-way',
info: {
providerUser: '服务商联系人',
providerMobile: '联系人电话',
}, },
}, {
]) name: '常见问题',
key: 'common-problem',
},
])
const combineList = ref([ const selectNow = ref('integration-combination-ability')
{
title: '基础设施',
list: []
},
{
title: '组件服务',
list: []
},
{
title: '数据资源',
list: []
},
])
const detailInfoObj = ref({})
onMounted(() => { const useWayShowList = ref([
window.addEventListener('scroll', () => { {
domArr.value = document.querySelectorAll('.scrollBox') title: '归属部门',
scrollTop.value = info: {
document.documentElement.scrollTop || document.body.scrollTop deptUser: '部门联系人',
for (let i = 0; i < domArr.value.length; i++) { mobile: '联系人电话',
if (i === 0) { },
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { },
selectNow.value = domArr.value[i].id {
} title: '服务商',
} else if (i == domArr.value.length - 1) { info: {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { providerUser: '服务商联系人',
selectNow.value = domArr.value[i].id providerMobile: '联系人电话',
} },
} else { },
if ( ])
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 const combineList = ref([
) { {
selectNow.value = domArr.value[i].id 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) { const selectNav = (key) => {
let obj = (detailInfoObj.value.fuseAttrList || []).find(v => v.attrType == type) || {}; selectNow.value = key
let url = obj.attrValue || ''; mybus.emit('flyToView', selectNow.value)
if (!obj.attrValue) {
return message.error('错误的文档链接地址！')
} }
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.flex-row-between { .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;
display: flex; display: flex;
justify-content: space-around; flex-direction: row;
font-size: 0.24rem; align-items: center;
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;
justify-content: space-between; justify-content: space-between;
}
.word-bg { .flex-row-start {
background: linear-gradient(90deg, #7184fc, #94a3fc) !important; 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 { .fixed2 > div:nth-of-type(3) {
height: 1.5rem; margin-top: 0.84rem;
width: 6.2rem; }
border-radius: 0.2rem;
background: linear-gradient(to right, .application-navigation {
rgba(113, 132, 252, 0.4), width: 19.12rem;
rgba(148, 163, 252, 0.4)); height: 0.84rem;
padding: 0 0.3rem; line-height: 0.8rem;
display: flex; 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 { .nav {
font-size: 0.26rem; cursor: pointer;
color: #212956; display: flex;
margin-bottom: 0.2rem; flex-direction: column;
line-height: 0.26rem; justify-content: space-between;
align-items: center;
.line {
width: 0.4rem;
height: 0.04rem;
}
} }
.content-card-item { .selectNow {
width: 50%; color: #526aff;
.card-text { .line {
margin-right: 0.2rem; background: #526aff;
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 { .use-way {
padding: 0.8rem 0; 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding: 0.1rem 0;
cursor: pointer;
height: 2.5rem;
&:hover { .title-1 {
border-radius: 0.02rem; margin-bottom: 0.3rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
} }
.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; color: #212121;
line-height: 0.3rem;
height: 0.3rem;
text-align: center; text-align: center;
padding: 0.2rem 0; width: 50%;
font-size: .22rem; box-sizing: border-box;
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;
width: 50%;
box-sizing: border-box;
}
}
</style> </style>

2
front/src/views/instructionManual/components/abilityDocTree.vue
View File

@ -56,7 +56,7 @@
clickData: { clickData: {
type: Object, type: Object,
default: () => { default: () => {
title: '' ''
}, },
}, },
}) })

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

@ -4,21 +4,40 @@
<div id="container" class="content-menu"> <div id="container" class="content-menu">
<div class="rela"> <div class="rela">
<div class="left"> <div class="left">
<div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)" <div
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }"> 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> <div class="img" :class="data.className"></div>
{{ data.name }} {{ data.name }}
</div> </div>
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree> <abilityDocTree
:dataList="treeArray"
@treeClick="treeClick"
:clickData="clickData"
></abilityDocTree>
</div> </div>
<div class="right"> <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="新手指引" /> <a-empty description="新手指引" />
</div> </div>
<div v-else style="height:100%"> <div v-else style="height: 100%">
<iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0" <iframe
:src="doc_base_url + clickData.doc"></iframe> name="iframeName"
width="1000"
height="100%"
id="iframeId"
:frameborder="0"
:src="doc_base_url + clickData.doc"
></iframe>
</div> </div>
</div> </div>
</div> </div>
@ -26,199 +45,199 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree' import abilityDocTree from './components/abilityDocTree'
import { ref, reactive, onMounted, nextTick, watch } from 'vue' import { ref, onMounted } from 'vue'
import { Empty, message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home' import { getDevelopDocTree } from '@/api/home'
import flatten from '@turf/flatten' // import flatten from '@turf/flatten'
const titleList = ref([ const titleList = ref([
{ {
name: '新手指引', name: '新手指引',
className: 'newGuide', className: 'newGuide',
}, },
{ {
name: '技术文档', name: '技术文档',
className: 'doc', className: 'doc',
}, },
]) ])
const titleData = ref(titleList.value[0]) const titleData = ref(titleList.value[0])
const clickData = ref({}) const clickData = ref({})
const treeArray = ref([]) const treeArray = ref([])
const treeArrayCopy = ref([]) const treeArrayCopy = ref([])
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'] let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
let doc_base_url = ref(window.SITE_CONFIG['frontUrl']) let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
const treeClick = (item) => { const treeClick = (item) => {
clickData.value = item clickData.value = item
console.log('clickData------------>', item) console.log('clickData------------>', item)
titleData.value = titleList.value[1] 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 = {}
} }
if (item.name == '技术文档') {
if (!clickData.value.title) { const getTreeData = () => {
clickData.value = {} getDevelopDocTree({})
treeArray.value = [] .then((res) => {
treeArrayCopy.value.map((val, i) => { console.log('res------文档树------>', res)
let obj = Object.assign({}, val, { if (res.data.code !== 0) {
title: val.title, return message.error(res.data.msg)
show: }
(i === 0 && val.children && val.children.length > 0) || treeArray.value = res.data.data || []
typeList.includes(val.title) treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
? true
: false,
children: [],
})
formData(val.children, obj)
treeArray.value.push(obj)
}) })
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) => { const formData = (children = [], dataItem) => {
children.map((item, index) => { children.map((item, index) => {
let _obj = Object.assign({}, item, { let _obj = Object.assign({}, item, {
title: item.title, title: item.title,
show: show:
(index === 0 && item.children && item.children.length > 0) || (index === 0 && item.children && item.children.length > 0) ||
typeList.includes(item.title) typeList.includes(item.title)
? true ? true
: false, : false,
children: [], 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(() => { const getFirstData = (firstObj = {}) => {
getTreeData() if (firstObj && firstObj.children && firstObj.children.length > 0) {
}) getFirstData(firstObj.children[0])
} else {
clickData.value = firstObj
}
}
onMounted(() => {
getTreeData()
})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.menu-box { .menu-box {
// overflow: hidden; // overflow: hidden;
height: 100%; height: 100%;
}
.first-title-text {
cursor: pointer;
font-size: 18px;
color: #333;
padding-bottom: 10px;
display: flex;
align-items: center;
&:hover {
color: #0058e1;
} }
}
.content-menu { .first-title-text {
width: 1240px; cursor: pointer;
display: flex; font-size: 18px;
justify-content: flex-start; color: #333;
margin: 0 auto; padding-bottom: 10px;
margin-top: 74px; display: flex;
box-sizing: border-box; align-items: center;
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
top: 0.6rem;
top: 0;
}
.left { &:hover {
width: 240px; color: #0058e1;
padding: 20px; }
height: 600px; }
margin-right: 20px;
background: rgba(244, 245, 248, 0.8);
overflow-y: scroll;
position: absolute;
top: 10px;
left: 0;
}
.right { .content-menu {
width: 870px; width: 1240px;
height: calc(100% - 20px); 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; .left {
top: 10px; width: 240px;
left: 260px; 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 {
right: 0 !important; width: 870px;
} height: calc(100% - 20px);
.content { position: absolute;
right: 16rem !important; top: 10px;
left: 0 !important; left: 260px;
} }
.img { .sidebar {
height: 20px; right: 0 !important;
width: 20px; }
margin-right: 8px;
}
.doc { .content {
background: url('~@/assets/capabilityCloud/doc.png') no-repeat; right: 16rem !important;
background-size: 100%; left: 0 !important;
} }
.newGuide { .img {
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat; height: 20px;
background-size: 100%; width: 20px;
} margin-right: 8px;
}
.new-menu-box { .doc {
height: 100%; background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
display: flex; background-size: 100%;
align-items: center; }
justify-content: center;
}
.rela { .newGuide {
width: 100%; background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
height: 100%; background-size: 100%;
position: relative; }
}
.new-menu-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.rela {
width: 100%;
height: 100%;
position: relative;
}
</style> </style>

2
front/src/views/newHome/components/Navigation2.vue
View File

@ -100,7 +100,7 @@
query: { query: {
select: type, select: type,
tecHnosphere: '', tecHnosphere: '',
appLiCation: '' appLiCation: '',
}, },
}) })
} }

320
front/src/views/newHome/components/PopularAbility.vue
View File

@ -153,195 +153,195 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.popular-ability { .popular-ability {
height: 6.8rem; height: 6.8rem;
background: url('~@/assets/newHome/popular-bg.png') no-repeat; background: url('~@/assets/newHome/popular-bg.png') no-repeat;
background-size: 100%; background-size: 100%;
display: flex;
justify-content: center;
.main {
width: 13rem;
margin-top: 0.78rem;
display: flex; display: flex;
flex-direction: column; justify-content: center;
flex-wrap: wrap; .main {
.top { width: 13rem;
font-size: 0.3rem; margin-top: 0.78rem;
color: #fff;
text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; .top {
align-items: center; font-size: 0.3rem;
.line { color: #fff;
width: 0.34rem; text-align: center;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
.select { justify-content: center;
cursor: pointer; 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; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; .select {
justify-content: center; cursor: pointer;
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%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
flex-wrap: wrap;
align-items: center; 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 { .img {
width: 0.56rem; width: 0.36rem;
height: 0.56rem; height: 0.36rem;
background-size: 100%; background-size: 100%;
} }
.zj { .fwl {
background: url('~@/assets/newHome/popular-zj.png') no-repeat; background: url('~@/assets/newHome/fwl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.yy { .sgl {
background: url('~@/assets/newHome/popular-yy.png') no-repeat; background: url('~@/assets/newHome/sgl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.jc { .scl {
background: url('~@/assets/newHome/popular-jc.png') no-repeat; background: url('~@/assets/newHome/scl-no.png') no-repeat;
background-size: contain; 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 { .text {
width: 100%; color: rgba(255, 255, 255, 0.6);
padding: 0.24rem 0.3rem;
font-size: 0.14rem; font-size: 0.14rem;
color: #212121; margin-top: 0.08rem;
line-height: 0.24rem;
height: 1rem;
overflow: hidden;
} }
} }
.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), .right {
.item:nth-of-type(5), cursor: pointer;
.item:nth-of-type(6) { display: flex;
margin-top: 0.2rem; justify-content: space-between;
} flex-wrap: wrap;
.item:hover { margin-left: 0.2rem;
border-radius: 0.02rem; .item {
border: 0.01rem solid #0058e1; width: 3.78rem;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3); 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 {
.bottom-btn { cursor: pointer;
cursor: pointer; text-align: center;
text-align: center; margin-top: 0.24rem;
margin-top: 0.24rem; color: #fff;
color: #fff; width: 1rem;
width: 1rem; height: 0.24rem;
height: 0.24rem; line-height: 0.24rem;
line-height: 0.24rem; margin-left: 6rem;
margin-left: 6rem; span {
span { display: inline-block;
display: inline-block; width: 0.1rem;
width: 0.1rem; height: 0.1rem;
height: 0.1rem; background: url('~@/assets/newHome/gd.png') no-repeat;
background: url('~@/assets/newHome/gd.png') no-repeat; background-size: contain;
background-size: contain; }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
} }
}
</style> </style>

10
front/src/views/personalCenter/components/Collection.vue
View File

@ -236,8 +236,8 @@
checked: false, checked: false,
resourceId: val.resourceId, resourceId: val.resourceId,
createDate: val.createDate, createDate: val.createDate,
updateDate: val.updateDate, updateDate: val.updateDate,
...getObj(val, val.resourceDTO ? 'resourceDTO' : 'fuseDTO') ...getObj(val, val.resourceDTO ? 'resourceDTO' : 'fuseDTO'),
} }
if (checkedList.value.indexOf(val.resourceId) == -1) { if (checkedList.value.indexOf(val.resourceId) == -1) {
checkAll.value = false checkAll.value = false
@ -250,8 +250,8 @@
} }
function getObj(val, typeStr) { function getObj(val, typeStr) {
let typeObj = val[typeStr] || {}; let typeObj = val[typeStr] || {}
console.log('typeObj------------>', typeObj); console.log('typeObj------------>', typeObj)
return { return {
name: typeObj.name, name: typeObj.name,
type: typeObj.type, type: typeObj.type,
@ -464,4 +464,4 @@
.name:hover { .name:hover {
color: #0087ff; color: #0087ff;
} }
</style> </style>

542
front/src/views/personalCenter/components/addApplication.vue
View File

@ -9,38 +9,83 @@
<div class="form-container"> <div class="form-container">
<div v-if="applySuccess"> <div v-if="applySuccess">
<div class="title">申请人信息</div> <div class="title">申请人信息</div>
<a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }" <a-form
:wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off"> ref="formRef"
:model="formName"
name="basic"
:label-col="{ style: { width: '106px' } }"
:wrapper-col="{ style: { width: '230px' } }"
labelAlign="left"
autocomplete="off"
>
<div class="base-info"> <div class="base-info">
<a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]"> <a-form-item
<a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" /> label="申请人"
name="applyUserName"
:rules="[{ required: true, message: '请输入申请人' }]"
>
<a-input
placeholder="请输入申请人"
v-model:value="formName.applyUserName"
/>
</a-form-item> </a-form-item>
<a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[ <a-form-item
{ style="margin: 0 22px"
required: true, label="申请人电话"
pattern: /^1[3456789]\d{9}$/, name="applyUserPhone"
message: '请输入正确的电话号码', :rules="[
}, {
]"> required: true,
<a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" /> pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的电话号码',
},
]"
>
<a-input
placeholder="请输入申请人电话"
v-model:value="formName.applyUserPhone"
/>
</a-form-item> </a-form-item>
<a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]"> <a-form-item
<a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" /> label="申请单位"
name="applyUserDeptName"
:rules="[{ required: true, message: '请输入申请单位' }]"
>
<a-input
placeholder="请输入申请单位"
v-model:value="formName.applyUserDeptName"
/>
</a-form-item> </a-form-item>
</div> </div>
<div class="title">需求信息</div> <div class="title">需求信息</div>
<a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject" <a-form-item
:rules="[{ required: true, message: '请输入需求标题' }]"> style="margin-bottom: 10px"
<a-input style="width: 350px" v-model:value="formName.demandSubject" /> label="需求标题"
name="demandSubject"
:rules="[{ required: true, message: '请输入需求标题' }]"
>
<a-input
style="width: 350px"
v-model:value="formName.demandSubject"
/>
</a-form-item> </a-form-item>
<a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType" <a-form-item
:rules="[{ required: true, message: '请选择需求类型' }]"> style="margin-bottom: 10px"
<a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px"> 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> <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-select>
</a-form-item> </a-form-item>
<a-form-item label="应用领域" name="detailsField" style="width: 350px" <a-form-item
:rules="[{ required: true, message: '请输入应用领域' }]"> label="应用领域"
<a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" /> name="detailsField"
style="width: 350px"
:rules="[{ required: true, message: '请输入应用领域' }]"
>
<a-input
placeholder="请输入应用领域"
v-model:value="formName.detailsField"
/>
</a-form-item> </a-form-item>
<a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails" <a-form-item
:rules="[{ required: true, message: '请输入需求描述' }]"> style="margin-bottom: 10px"
<a-textarea style=" label="需求描述"
name="demandDetails"
:rules="[{ required: true, message: '请输入需求描述' }]"
>
<a-textarea
style="
width: 500px; width: 500px;
height: 150px; height: 150px;
font-size: 16px; font-size: 16px;
@ -66,12 +123,24 @@
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
resize: none; resize: none;
" v-model:value="formName.demandDetails" /> "
v-model:value="formName.demandDetails"
/>
</a-form-item> </a-form-item>
<a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc"> <a-form-item
<a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers" style="color: #666; font-size: 16px"
@change="handleChange"> label="附件上传"
<a-button style=" name="applyDoc"
>
<a-upload
v-model:file-list="fileList"
name="file"
:action="upLoadUrl"
:headers="headers"
@change="handleChange"
>
<a-button
style="
width: 100px; width: 100px;
height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
@ -82,7 +151,8 @@
border: 1px solid #bbd3ef; border: 1px solid #bbd3ef;
padding: 0; padding: 0;
text-align: center; text-align: center;
"> "
>
<upload-outlined></upload-outlined> <upload-outlined></upload-outlined>
文件上传 文件上传
</a-button> </a-button>
@ -93,7 +163,8 @@
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button style=" <a-button
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
margin-right: 20px; margin-right: 20px;
@ -104,10 +175,15 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" type="primary" html-type="cancle" @click="signOut"> "
type="primary"
html-type="cancle"
@click="signOut"
>
退出申请 退出申请
</a-button> </a-button>
<a-button style=" <a-button
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
background: #0087ff; background: #0087ff;
@ -117,7 +193,11 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" type="primary" html-type="submit" @click="processStartHandle()"> "
type="primary"
html-type="submit"
@click="processStartHandle()"
>
提交申请 提交申请
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -129,7 +209,7 @@
</div> </div>
<p> <p>
您已成功申请{{ 您已成功申请{{
formName.demandSubject || '' formName.demandSubject || ''
}},请耐心等待审批结果，结果会第一时间通知您！ }},请耐心等待审批结果，结果会第一时间通知您！
</p> </p>
</div> </div>
@ -140,219 +220,219 @@
</template> </template>
<script> <script>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
// import { UploadOutlined } from '@ant-design/icons-vue' // import { UploadOutlined } from '@ant-design/icons-vue'
import { getUser, getUserInfo, relaunch } from '@/api/home' import { getUser, getUserInfo, relaunch } from '@/api/home'
import { import {
demandApply, demandApply,
getDemandForm, getDemandForm,
updateDemandForm, updateDemandForm,
} from '@/api/personalCenter' } from '@/api/personalCenter'
// import { baseURL } from '@/config' // import { baseURL } from '@/config'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
export default { export default {
name: '', name: '',
props: {}, props: {},
components: { components: {
HomeHeader, HomeHeader,
// UploadOutlined, // UploadOutlined,
}, },
setup() { setup() {
const disabled = ref(false) const disabled = ref(false)
const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload') const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
const formName = reactive({ const formName = reactive({
applyUserDeptId: '', applyUserDeptId: '',
applyUserDeptName: '', applyUserDeptName: '',
applyUserId: '', applyUserId: '',
applyUserName: '', applyUserName: '',
applyUserPhone: '', applyUserPhone: '',
demandDetails: '', demandDetails: '',
demandSubject: '', demandSubject: '',
detailsField: '', detailsField: '',
detailsType: '', detailsType: '',
enclosure: '', 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
}) })
} // console.log(formName.demandSubject)
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
})
})
const formRef = ref() const router = useRouter()
const applySuccess = ref(true) const id = ref(router.currentRoute.value.query.id)
const taskId = ref(router.currentRoute.value.query.taskId)
// 退出
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) { if (id.value) {
updateDemandForm(formName).then((upres) => { getDemandForm(id.value).then((res) => {
if (upres.data.code == 0) { console.log('回填数据===============>', res)
relaunch({ data: formName, taskId: taskId.value }).then((res) => { formName.applyUserPhone = res.data.data.applyUserPhone
console.log('驳回================>', res) formName.demandSubject = res.data.data.demandSubject
if (res.data.code == 0) { formName.detailsType = res.data.data.detailsType
message.success('重新发起流程成功！') formName.detailsField = res.data.data.detailsField
window.setTimeout(() => { formName.demandDetails = res.data.data.demandDetails
window.close() formName.enclosure = res.data.data.enclosure
}, 1000)
} else {
message.error('重新发起流程失败！')
}
})
} else {
message.error('数据更新失败！')
}
})
} else {
formRef.value.validate().then(() => {
demandApply(formName).then((res) => {
applySuccess.value = false
message.success('操作成功！')
console.log('能力申请================>', res)
})
}) })
} }
} 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 { const formRef = ref()
formRef, const applySuccess = ref(true)
formName,
fileList, // 退出
headers: { const signOut = () => {
authorization: 'authorization-text', window.close()
}, }
handleChange, const handleChange = (info) => {
applySuccess, if (info.file.status !== 'uploading') {
disabled, console.log(info.file, info.fileList)
signOut, }
processStartHandle,
upLoadUrl, if (info.file.status === 'done') {
// baseURL, 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> </script>
<style scoped lang="less"> <style scoped lang="less">
#apply-container { #apply-container {
background-color: #f5f8fc; background-color: #f5f8fc;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 90px auto 0; 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 {
display: flex; display: flex;
} justify-content: space-between;
:deep(.ant-form-item-label) { aside {
label { width: 282px;
color: #666; height: 96%;
font-size: 16px; overflow-y: auto;
background-color: #fff;
margin: 1% 0 3%;
}
&::after { article {
content: ''; 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) { .base-info {
&::before { display: flex;
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; :deep(.ant-form-item-label) {
font-size: 20px; label {
font-weight: bold; color: #666;
color: #000; 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>
<style> <style>
body, body,
html { html {
height: unset; height: unset;
} }
</style> </style>