Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
wangwei
commit
7e5a658977
|
|
@ -1 +1,7 @@
|
|||
back/dist-西海岸-后台管理.zip
|
||||
front/public/index.html
|
||||
front/public/index.html
|
||||
back/public/index.html
|
||||
back/dist-西海岸-后台管理-带配置文件.zip
|
||||
back/dist-市局-后台管理-带配置文件.zip
|
||||
front/public/index.html
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-11 10:11:40
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-13 11:21:09
|
||||
* @LastEditTime: 2022-06-20 16:20:34
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -29,7 +29,8 @@
|
|||
};
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/#/vueTemplateDemo';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://124.222.94.39:9796/#/vueTemplateDemo';
|
||||
window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/#/vueTemplateDemo';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/#/vueTemplateDemo';
|
||||
window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9797/#/vueTemplateDemo';
|
||||
window.SITE_CONFIG['menuList'] = []; // 左侧菜单列表（后台返回，未做处理）
|
||||
window.SITE_CONFIG['permissions'] = []; // 页面按钮操作权限（后台返回，未做处理）
|
||||
window.SITE_CONFIG['dynamicRoutes'] = []; // 动态路由列表
|
||||
|
|
@ -70,7 +71,8 @@
|
|||
// window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
|
||||
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
|
||||
// WebSocket地址
|
||||
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
|
||||
</script>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -5,6 +5,13 @@ import { isURL } from '@/utils/validate'
|
|||
import store from '@/store'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
|
||||
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
||||
const originalPush = Router.prototype.push
|
||||
Router.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err)
|
||||
}
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
// 页面路由(独立页面)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default new Vuex.Store({
|
|||
// 导航条, 布局风格, default(白色) / colorful(鲜艳)
|
||||
navbarLayoutType: 'colorful',
|
||||
// 侧边栏, 布局皮肤, default(白色) / dark(黑色)
|
||||
sidebarLayoutSkin: 'dark',
|
||||
sidebarLayoutSkin: 'default',
|
||||
// 侧边栏, 折叠状态
|
||||
sidebarFold: false,
|
||||
// 侧边栏, 菜单
|
||||
|
|
|
|||
|
|
@ -1,79 +1,122 @@
|
|||
<template>
|
||||
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
|
||||
<nav
|
||||
class="aui-navbar"
|
||||
:class="`aui-navbar--${$store.state.navbarLayoutType}`"
|
||||
>
|
||||
<div class="aui-navbar__header">
|
||||
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
|
||||
<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
|
||||
<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
|
||||
<a class="aui-navbar__brand-mini" href="javascript:;">{{
|
||||
$t("brand.mini")
|
||||
}}</a>
|
||||
<a class="aui-navbar__brand-lg" href="javascript:;">{{
|
||||
$t("brand.lg")
|
||||
}}</a>
|
||||
<span>——</span>
|
||||
<span class="back-title-text">后台管理系统</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="aui-navbar__body">
|
||||
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
|
||||
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
|
||||
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
|
||||
<!-- <el-menu-item
|
||||
index="1"
|
||||
@click="$store.state.sidebarFold = !$store.state.sidebarFold"
|
||||
>
|
||||
<svg
|
||||
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#icon-outdent"></use>
|
||||
</svg>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" @click="refresh()">
|
||||
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
|
||||
</el-menu-item>
|
||||
<svg
|
||||
class="
|
||||
icon-svg
|
||||
aui-navbar__icon-menu aui-navbar__icon-menu--refresh
|
||||
"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#icon-sync"></use>
|
||||
</svg>
|
||||
</el-menu-item> -->
|
||||
</el-menu>
|
||||
<el-menu class="aui-navbar__menu" mode="horizontal">
|
||||
<el-menu-item index="1">
|
||||
<el-dropdown placement="bottom" :show-timeout="0">
|
||||
<el-button size="mini">{{ $t('_lang') }}</el-button>
|
||||
<el-button size="mini">{{ $t("_lang") }}</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="(val, key) in i18nMessages"
|
||||
:key="key"
|
||||
@click.native="$i18n.locale = key"
|
||||
>{{ val._lang }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<a href="//115.28.200.119:9091" target="_blank">
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
|
||||
<use xlink:href="#icon-earth"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" v-if="$hasPermission('sys:notice:all')">
|
||||
<el-badge :is-dot="messageTip">
|
||||
<a href="#" @click="myNoticeRouter()"><i class="el-icon-bell"></i></a>
|
||||
<a href="#" @click="myNoticeRouter()"
|
||||
><i class="el-icon-bell"></i
|
||||
></a>
|
||||
</el-badge>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4" @click="fullscreenHandle()">
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
|
||||
<use xlink:href="#icon-fullscreen"></use>
|
||||
</svg>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5" class="aui-navbar__avatar">
|
||||
<el-dropdown placement="bottom" :show-timeout="0">
|
||||
<span class="el-dropdown-link">
|
||||
<img src="~@/assets/img/avatar.png">
|
||||
<img src="~@/assets/img/avatar.png" />
|
||||
<span>{{ $store.state.user.name }}</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="updatePasswordHandle()">{{
|
||||
$t("updatePassword.title")
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="logoutHandle()">{{
|
||||
$t("logout")
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<!-- 弹窗, 修改密码 -->
|
||||
<update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
|
||||
<update-password
|
||||
v-if="updatePasswordVisible"
|
||||
ref="updatePassword"
|
||||
></update-password>
|
||||
</nav>
|
||||
</template>
|
||||
<script>
|
||||
import { messages } from '@/i18n'
|
||||
import screenfull from 'screenfull'
|
||||
import UpdatePassword from './main-navbar-update-password'
|
||||
import { clearLoginInfo } from '@/utils'
|
||||
import { messages } from "@/i18n";
|
||||
import screenfull from "screenfull";
|
||||
import UpdatePassword from "./main-navbar-update-password";
|
||||
import { clearLoginInfo } from "@/utils";
|
||||
// import Cookies from 'js-cookie'
|
||||
// var socket = null
|
||||
export default {
|
||||
inject: ['refresh'],
|
||||
inject: ["refresh"],
|
||||
data() {
|
||||
return {
|
||||
i18nMessages: messages,
|
||||
updatePasswordVisible: false,
|
||||
messageTip: false
|
||||
}
|
||||
messageTip: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
UpdatePassword
|
||||
UpdatePassword,
|
||||
},
|
||||
created() {
|
||||
// var vue = this
|
||||
|
|
@ -101,56 +144,96 @@ export default {
|
|||
// }
|
||||
|
||||
// 未读通知数
|
||||
this.getUnReadCount()
|
||||
this.getUnReadCount();
|
||||
},
|
||||
methods: {
|
||||
myNoticeRouter() {
|
||||
this.$router.replace('notice-notice-user')
|
||||
this.$router.replace("notice-notice-user");
|
||||
},
|
||||
getUnReadCount() {
|
||||
this.$http.get('/sys/notice/mynotice/unread').then(({ data: res }) => {
|
||||
this.$http
|
||||
.get("/sys/notice/mynotice/unread")
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
if (res.data > 0) {
|
||||
this.messageTip = true
|
||||
this.messageTip = true;
|
||||
}
|
||||
}).catch(() => {})
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 全屏
|
||||
fullscreenHandle() {
|
||||
if (!screenfull.enabled) {
|
||||
return this.$message({
|
||||
message: this.$t('fullscreen.prompt'),
|
||||
type: 'warning',
|
||||
duration: 500
|
||||
})
|
||||
message: this.$t("fullscreen.prompt"),
|
||||
type: "warning",
|
||||
duration: 500,
|
||||
});
|
||||
}
|
||||
screenfull.toggle()
|
||||
screenfull.toggle();
|
||||
},
|
||||
// 修改密码
|
||||
updatePasswordHandle() {
|
||||
this.updatePasswordVisible = true
|
||||
this.updatePasswordVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.updatePassword.init()
|
||||
})
|
||||
this.$refs.updatePassword.init();
|
||||
});
|
||||
},
|
||||
// 退出
|
||||
logoutHandle() {
|
||||
this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
|
||||
confirmButtonText: this.$t('confirm'),
|
||||
cancelButtonText: this.$t('cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http.post('/logout').then(({ data: res }) => {
|
||||
this.$confirm(
|
||||
this.$t("prompt.info", { handle: this.$t("logout") }),
|
||||
this.$t("prompt.title"),
|
||||
{
|
||||
confirmButtonText: this.$t("confirm"),
|
||||
cancelButtonText: this.$t("cancel"),
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.$http
|
||||
.post("/logout")
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
clearLoginInfo()
|
||||
this.$router.push({ name: 'login' })
|
||||
}).catch(() => {})
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
clearLoginInfo();
|
||||
this.$router.push({ name: "login" });
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
font-family: "header-typeface";
|
||||
src: url("~@/assets/font/header-typeface.ttf");
|
||||
}
|
||||
.aui-navbar {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-image: url("~@/assets/img/activitiMyWorkDynamics/header-bak.png");
|
||||
.aui-navbar__header {
|
||||
width: 25%;
|
||||
.aui-navbar__brand {
|
||||
margin-left: 20px;
|
||||
a {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.aui-navbar__brand-mini {
|
||||
display: block;
|
||||
}
|
||||
.back-title-text {
|
||||
margin-top: 5px;
|
||||
font-family: header-typeface;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,135 @@
|
|||
<template>
|
||||
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
|
||||
<el-submenu
|
||||
v-if="menu.children && menu.children.length >= 1"
|
||||
:index="menu.id"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<template slot="title">
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
|
||||
<span>{{ menu.name }}</span>
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
|
||||
<use :xlink:href="`#${menu.icon}`"></use>
|
||||
</svg>
|
||||
<span class="first-level-text">{{ menu.name }}</span>
|
||||
</template>
|
||||
<sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
|
||||
<sub-menu
|
||||
v-for="item in menu.children"
|
||||
:key="item.id"
|
||||
:menu="item"
|
||||
></sub-menu>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="menu.id" ref="li">
|
||||
<a
|
||||
:href="isBrowserTabOpen(menu.id) ? getBrowserTabOpenURL(menu.id) : 'javascript:;'"
|
||||
:href="
|
||||
isBrowserTabOpen(menu.id)
|
||||
? getBrowserTabOpenURL(menu.id)
|
||||
: 'javascript:;'
|
||||
"
|
||||
:target="isBrowserTabOpen(menu.id) ? '_blank' : '_self'"
|
||||
@click="isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)">
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
|
||||
@click="
|
||||
isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)
|
||||
"
|
||||
>
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
|
||||
<use :xlink:href="`#${menu.icon}`"></use>
|
||||
</svg>
|
||||
<span>{{ menu.name }}</span>
|
||||
</a>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubMenu from './main-sidebar-sub-menu'
|
||||
import SubMenu from "./main-sidebar-sub-menu";
|
||||
export default {
|
||||
name: 'sub-menu',
|
||||
name: "sub-menu",
|
||||
data() {
|
||||
return {
|
||||
browserTabOpenList: [
|
||||
'1156748733921165314',
|
||||
]
|
||||
}
|
||||
browserTabOpenList: ["1156748733921165314"],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SubMenu
|
||||
SubMenu,
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.li) {
|
||||
let $li = this.$refs.li.$el
|
||||
let $a = $li.firstElementChild
|
||||
let $li = this.$refs.li.$el;
|
||||
let $a = $li.firstElementChild;
|
||||
if ($a) {
|
||||
let pl = '0', pr = '0'
|
||||
let pl = "0",
|
||||
pr = "0";
|
||||
if ($li.currentStyle) {
|
||||
pl = $li.currentStyle['paddingLeft']
|
||||
pr = $li.currentStyle['paddingRight']
|
||||
pl = $li.currentStyle["paddingLeft"];
|
||||
pr = $li.currentStyle["paddingRight"];
|
||||
} else {
|
||||
pl = window.document.defaultView.getComputedStyle($li, null)['paddingLeft']
|
||||
pr = window.document.defaultView.getComputedStyle($li, null)['paddingRight']
|
||||
pl = window.document.defaultView.getComputedStyle($li, null)[
|
||||
"paddingLeft"
|
||||
];
|
||||
pr = window.document.defaultView.getComputedStyle($li, null)[
|
||||
"paddingRight"
|
||||
];
|
||||
}
|
||||
$li.setAttribute('style', `padding-left: 0; padding-right: 0;`)
|
||||
$a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
|
||||
$li.setAttribute("style", `padding-left: 0; padding-right: 0;`);
|
||||
$a.setAttribute(
|
||||
"style",
|
||||
`padding-left: ${pl}; padding-right: ${pr};`
|
||||
);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 是否通过浏览器Tab打开菜单
|
||||
isBrowserTabOpen(menuId) {
|
||||
return this.browserTabOpenList.filter(item => item === menuId).length >= 1;
|
||||
return (
|
||||
this.browserTabOpenList.filter((item) => item === menuId).length >= 1
|
||||
);
|
||||
},
|
||||
// 获取浏览器Tab打开菜单URL
|
||||
getBrowserTabOpenURL(menuId) {
|
||||
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
||||
return route ? route.meta.iframeURL : '';
|
||||
var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
|
||||
(item) => item.meta.menuId === menuId
|
||||
)[0];
|
||||
return route ? route.meta.iframeURL : "";
|
||||
},
|
||||
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
||||
gotoRouteHandle(menuId) {
|
||||
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
||||
var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
|
||||
(item) => item.meta.menuId === menuId
|
||||
)[0];
|
||||
if (route) {
|
||||
this.$router.push({ name: route.name })
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$router.push({ name: route.name });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.aui-sidebar__menu {
|
||||
.el-menu-item > a {
|
||||
.first-level-text {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-menu-item {
|
||||
a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
color: #ffffff;
|
||||
background-color: #0058e1;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,34 @@
|
|||
<template>
|
||||
<div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
|
||||
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
|
||||
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
|
||||
<svg class="icon-svg" aria-hidden="true">
|
||||
<use xlink:href="#icon-setting"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="aui-theme-tools__content">
|
||||
<div class="aui-theme-tools__item">
|
||||
<h3>Navbar</h3>
|
||||
<el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="$store.state.navbarLayoutType"
|
||||
true-label="colorful"
|
||||
>colorful 鲜艳</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="aui-theme-tools__item">
|
||||
<h3>Sidebar</h3>
|
||||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
|
||||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
|
||||
>dark 黑色</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="aui-theme-tools__item">
|
||||
<h3>Theme</h3>
|
||||
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
|
||||
<el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
|
||||
<el-radio
|
||||
v-for="item in themeList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
>{{ `${item.name} ${item.desc}` }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,35 +40,44 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
themeList: require('@/element-ui/config.js'),
|
||||
themeColor: 'turquoise'
|
||||
}
|
||||
themeList: require("@/element-ui/config.js"),
|
||||
themeColor: "turquoise",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
themeColorChangeHandle(val) {
|
||||
var styleList = [
|
||||
{
|
||||
id: 'J_elementTheme',
|
||||
url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
|
||||
id: "J_elementTheme",
|
||||
url: `${
|
||||
process.env.BASE_URL
|
||||
}element-theme/${val}/index.css?t=${new Date().getTime()}`,
|
||||
},
|
||||
{
|
||||
id: 'J_auiTheme',
|
||||
url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
|
||||
}
|
||||
]
|
||||
id: "J_auiTheme",
|
||||
url: `${
|
||||
process.env.BASE_URL
|
||||
}element-theme/${val}/aui.css?t=${new Date().getTime()}`,
|
||||
},
|
||||
];
|
||||
for (var i = 0; i < styleList.length; i++) {
|
||||
var el = document.querySelector(`#${styleList[i].id}`)
|
||||
var el = document.querySelector(`#${styleList[i].id}`);
|
||||
if (el) {
|
||||
el.href = styleList[i].url
|
||||
continue
|
||||
}
|
||||
el = document.createElement('link')
|
||||
el.id = styleList[i].id
|
||||
el.href = styleList[i].url
|
||||
el.rel = 'stylesheet'
|
||||
document.querySelector('head').appendChild(el)
|
||||
}
|
||||
}
|
||||
el.href = styleList[i].url;
|
||||
continue;
|
||||
}
|
||||
el = document.createElement("link");
|
||||
el.id = styleList[i].id;
|
||||
el.href = styleList[i].url;
|
||||
el.rel = "stylesheet";
|
||||
document.querySelector("head").appendChild(el);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.aui-theme-tools__toggle {
|
||||
background-color: #0058e1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-20 10:38:17
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 11:33:13
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="bsabilityimport">
|
||||
<div class="item" @click="downloadTemplate()">
|
||||
<svg t="1655692930310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1593" width="200" height="200"><path d="M599.13 0.476L33.55 109.306a20.778 20.778 0 0 0-16.492 20.42v764.308a20.778 20.778 0 0 0 16.372 20.48l565.58 108.83a20.837 20.837 0 0 0 3.81 0.654 19.29 19.29 0 0 0 12.622-4.465 21.313 21.313 0 0 0 7.56-16.015V20.361a21.313 21.313 0 0 0-7.56-16.074 19.23 19.23 0 0 0-16.313-3.81z m-206.11 696.08l-46.14-83.348c-10.597-18.575-20.241-37.864-32.148-59.951h-2.203c-10.538 21.67-20.004 40.305-29.767 58.344l-43.937 76.323-87.278-5 115.557-175.985L158.454 342.8l91.147-5.953 41.317 70.608c9.466 16.55 18.337 33.697 30.541 55.784h2.798c9.824-22.683 18.159-40.543 27.03-58.404l38.935-77.395 86.683-5.953-108.592 188.249L483.93 701.915zM966.519 122.76H663.487v143.36h40.364v40.96h-40.364v102.4h40.364v40.96h-40.364V552.9h40.364v40.96h-40.364v122.939h40.364v40.96h-40.364v143.419h302.972a40.781 40.781 0 0 0 40.424-40.96V163.72a40.781 40.781 0 0 0-40.364-40.96zM905.912 757.7H744.275v-40.96h161.637z m0-163.9H744.275v-40.9h161.637z m0-143.418H744.275v-40.9h161.637z m0-143.42H744.275v-40.84h161.637z" fill="#1296db" p-id="1594"></path></svg>
|
||||
<span>下载模板</span>
|
||||
</div>
|
||||
<el-upload
|
||||
ref="addUpload"
|
||||
class="item"
|
||||
:action="fileUploadUrl"
|
||||
:on-success="onSuccess"
|
||||
:on-remove="onRemove"
|
||||
:show-file-list='false'
|
||||
:on-error="onErrorFile"
|
||||
:on-exceed='onExceed'
|
||||
:limit='1'
|
||||
:on-preview="onPreview"
|
||||
list-type="text"
|
||||
>
|
||||
<svg t="1655692986683" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2083" width="200" height="200"><path d="M192 256v29h9.9c-6.5-9.3-9.9-19-9.9-29z m384 128c-41.9 0-82.3-2.2-120-6.4L590.2 512 467.5 634.8c34.4 3.4 70.8 5.2 108.5 5.2 212.1 0 384-57.3 384-128V256c0 70.7-171.9 128-384 128z m-263.9-99h51.3l17.2 17.2c57.2 11.3 124 17.8 195.4 17.8 212.1 0 384-57.3 384-128S788.1 64 576 64s-384 57.3-384 128c0 36.6 46.2 69.7 120.1 93zM576 704c-59.1 0-115.2-4.5-165.2-12.4L363.4 739H192v93c0 70.7 171.9 128 384 128s384-57.3 384-128V576c0 70.7-171.9 128-384 128z" fill="#E6C27C" p-id="2084"></path><path d="M336.9 349H198.6l98.9 98.9H64v128.2h233.5L198.6 675h138.3l162.9-163z" fill="#497CAD" p-id="2085"></path></svg>
|
||||
<div>导入数据</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/resource//importResource?token=' + Cookies.get('ucsToken')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadTemplate () {
|
||||
window.open(window.SITE_CONFIG.apiURL + '/%E8%83%BD%E5%8A%9B%E8%B5%84%E6%BA%90%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx?token=' + Cookies.get('ucsToken'))
|
||||
},
|
||||
onSuccess (res, file) {
|
||||
this.$message({
|
||||
message: '导入成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$refs.addUpload.clearFiles()
|
||||
},
|
||||
onErrorFile () {
|
||||
this.$message('导入失败！')
|
||||
this.$refs.addUpload.clearFiles() // 去掉文件列表
|
||||
},
|
||||
onRemove (file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
onPreview (file) {
|
||||
console.log('点击预览===============>', file)
|
||||
window.open(file.response.data)
|
||||
},
|
||||
onExceed (files, fileList) {
|
||||
this.$message.warning('当前附件数量已达上限，请先删除部分附件！')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.bsabilityimport {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 250px 300px;
|
||||
.item {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
span {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
}
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.item:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid #1296db;
|
||||
border-radius: 10px;
|
||||
svg {
|
||||
animation: turn 2s linear infinite;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turn {
|
||||
0% {
|
||||
-webkit-transform: rotateY(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotateY(90deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotateY(270deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,27 +8,44 @@
|
|||
clearable
|
||||
/>
|
||||
</el-col>
|
||||
<el-button type="primary" @click="flashTableData">查询</el-button>
|
||||
<el-button type="primary" @click="restTableData">重置</el-button>
|
||||
<el-button type="primary" class="button-new" @click="flashTableData"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" class="button-new" @click="restTableData"
|
||||
>重置</el-button
|
||||
>
|
||||
<div style="float: right">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="button-text-new"
|
||||
@click="deleteData"
|
||||
>批量删除</el-button>
|
||||
>批量删除</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="button-new"
|
||||
@click="addDataDialogVisabled = true"
|
||||
>动态发布</el-button>
|
||||
>动态发布</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 20px">
|
||||
<el-table :data="tableData" border @selection-change="tableChange">
|
||||
<el-table-column width="60" type="selection" align="center"></el-table-column> <!-- 全选 -->
|
||||
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
|
||||
<el-table-column
|
||||
width="60"
|
||||
type="selection"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- 全选 -->
|
||||
<el-table-column
|
||||
label="序号"
|
||||
width="60"
|
||||
type="index"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="动态标题" prop="title">
|
||||
<template slot-scope="scope">
|
||||
<div class="boxtitle">
|
||||
|
|
@ -44,10 +61,19 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="图片地址" prop="imageUrl"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="createDate" sortable></el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
prop="createDate"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column width="200" label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="openEditDialog(scope.row)" type="text" icon="el-icon-setting"
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="openEditDialog(scope.row)"
|
||||
type="text"
|
||||
icon="el-icon-setting"
|
||||
class="button-text-new"
|
||||
>编辑</el-button
|
||||
>
|
||||
<!-- <el-button size="mini" type="success" icon="el-icon-plus"
|
||||
|
|
@ -57,14 +83,23 @@
|
|||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="button-text-new"
|
||||
@click="deleteData(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="button-text-new"
|
||||
@click="openPreviewData(scope.row)"
|
||||
>预览</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
</el-row><el-pagination
|
||||
<!-- 分页 --> </el-row
|
||||
><el-pagination
|
||||
style="margin-top: 20px; text-align: center"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
|
|
@ -77,7 +112,8 @@
|
|||
</el-pagination>
|
||||
|
||||
<!-- 新增项目 -->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增项目"
|
||||
:visible.sync="addDataDialogVisabled"
|
||||
@close="addDataDialogClose"
|
||||
|
|
@ -98,6 +134,18 @@
|
|||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="摘要">
|
||||
<el-input
|
||||
v-model="addDataFrom.note1"
|
||||
autocomplete="off"
|
||||
placeholder="摘要"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
@input="noteExceed"
|
||||
:rows="3"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="content" label="内容">
|
||||
<el-input
|
||||
v-model="addDataFrom.content"
|
||||
|
|
@ -133,22 +181,31 @@
|
|||
:on-exceed="handleExceed"
|
||||
:on-preview="showView"
|
||||
:limit="1"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
list-type="picture"
|
||||
>
|
||||
<el-button size="small" type="primary" class="button-new"
|
||||
>点击上传</el-button
|
||||
>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="addDataDialogVisabled = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addDataDialogConfirm"
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addDataDialogConfirm"
|
||||
class="button-new"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑项目 -->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="编辑项目"
|
||||
:visible.sync="editDataDialogVisabled"
|
||||
@close="editDataDialogClose"
|
||||
|
|
@ -169,6 +226,18 @@
|
|||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="摘要">
|
||||
<el-input
|
||||
v-model="eidtDataForm.note1"
|
||||
autocomplete="off"
|
||||
placeholder="摘要"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
@input="noteExceed"
|
||||
:rows="3"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="content" label="内容">
|
||||
<el-input
|
||||
v-model="eidtDataForm.content"
|
||||
|
|
@ -202,19 +271,70 @@
|
|||
:on-remove="editUploadRemoveFile"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="showView"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
list-type="picture"
|
||||
>
|
||||
<el-button size="small" type="primary" class="button-new"
|
||||
>点击上传</el-button
|
||||
>
|
||||
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDataDialogVisabled = false">取 消</el-button>
|
||||
<el-button type="primary" @click="eidtDataDialogConfirm">确 定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="eidtDataDialogConfirm"
|
||||
class="button-new"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 预览项目 -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="预览项目"
|
||||
:visible.sync="perviewDataDialogVisabled"
|
||||
@close="perviewDataDialogClose"
|
||||
width="1300px"
|
||||
top="10vh"
|
||||
>
|
||||
<div class="preview-dialog">
|
||||
<div class="preview-title">
|
||||
<div class="title-text">
|
||||
<span>{{ previewData.title }}</span>
|
||||
</div>
|
||||
<div class="title-time">
|
||||
<span>发布时间：</span>
|
||||
<span>{{ previewData.updateDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-note">
|
||||
<span>摘要：</span>
|
||||
<span>{{ previewData.note1 }}</span>
|
||||
</div>
|
||||
<div class="preview-image">
|
||||
<img
|
||||
width="100%"
|
||||
v-if="previewData.imageUrl != ''"
|
||||
:src="previewData.imageUrl"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
width="100%"
|
||||
v-else
|
||||
src="~@/assets/img/activitiMyWorkDynamics/no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="preview-content">
|
||||
<span>{{ previewData.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogVisibleImg">
|
||||
<img width="100%" :src="previewImg" alt="">
|
||||
<img width="100%" :src="previewImg" alt="" />
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
|
|
@ -224,13 +344,13 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
|
||||
// 表格筛选条件对象
|
||||
queryData: {
|
||||
keyworld: '',
|
||||
keyworld: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
// 表格数据数组对象
|
||||
tableData: [],
|
||||
|
|
@ -241,270 +361,309 @@ export default {
|
|||
// imageUrl: '',
|
||||
// 新增数据表单对象
|
||||
addDataFrom: {
|
||||
title: '',
|
||||
content: '',
|
||||
imageUrl: '',
|
||||
delFlag: 0
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
delFlag: 0,
|
||||
},
|
||||
// 新增数据表单验证对象
|
||||
addDataFromRules: {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
],
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
imageUrl: [
|
||||
{ required: true, message: '请输入图片地址', trigger: 'blur' }
|
||||
]
|
||||
{ required: true, message: "请输入图片地址", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
editDataDialogVisabled: false,
|
||||
eidtDataForm: {
|
||||
title: '',
|
||||
content: '',
|
||||
imageUrl: ''
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
},
|
||||
eidtDataFromRules: {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
],
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
imageUrl: [
|
||||
{ required: true, message: '请输入图片地址', trigger: 'blur' }
|
||||
]
|
||||
{ required: true, message: "请输入图片地址", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
previewImg: '', // 预览图片
|
||||
perviewDataDialogVisabled: false,
|
||||
previewData: {
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
delFlag: 0,
|
||||
},
|
||||
previewImg: "", // 预览图片
|
||||
deleteDataArr: [],
|
||||
dialogVisibleImg: false
|
||||
}
|
||||
dialogVisibleImg: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTableData()
|
||||
this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
tableChange(val) {
|
||||
this.deleteDataArr = val.map(item => item.id)
|
||||
console.log(this.deleteDataArr)
|
||||
this.deleteDataArr = val.map((item) => item.id);
|
||||
console.log(this.deleteDataArr);
|
||||
},
|
||||
restTableData() {
|
||||
this.queryData.keyworld = ''
|
||||
this.getTableData()
|
||||
this.queryData.keyworld = "";
|
||||
this.getTableData();
|
||||
},
|
||||
showView(file) {
|
||||
this.previewImg = file.url
|
||||
this.dialogVisibleImg = true
|
||||
this.previewImg = file.url;
|
||||
this.dialogVisibleImg = true;
|
||||
},
|
||||
getTableData() {
|
||||
this.$http.get('/workdynamics/page', {
|
||||
this.$http
|
||||
.get("/workdynamics/page", {
|
||||
params: {
|
||||
limit: this.queryData.pageSize,
|
||||
page: this.queryData.pageIndex,
|
||||
name: this.queryData.keyworld
|
||||
}
|
||||
name: this.queryData.keyworld,
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.tableData = res.data.list
|
||||
this.queryData.total = res.data.total
|
||||
this.tableData = res.data.list;
|
||||
this.queryData.total = res.data.total;
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
},
|
||||
flashTableData() {
|
||||
this.queryData.pageIndex = 1
|
||||
this.getTableData()
|
||||
this.queryData.pageIndex = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小更改
|
||||
handleSizeChange(value) {
|
||||
this.queryData.pageSize = value
|
||||
this.getTableData()
|
||||
this.queryData.pageSize = value;
|
||||
this.getTableData();
|
||||
},
|
||||
// 当前索引更改
|
||||
handleCurrentChange(val) {
|
||||
this.queryData.pageIndex = val
|
||||
this.getTableData()
|
||||
this.queryData.pageIndex = val;
|
||||
this.getTableData();
|
||||
},
|
||||
// 新增数据窗口关闭事件
|
||||
addDataDialogClose() {
|
||||
this.$refs.addDataFormRef.resetFields()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.$refs.addDataFormRef.resetFields();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
this.$refs.addUpload.clearFiles();
|
||||
// this.addDataFrom.imagesFiles = []
|
||||
// this.$refs.addDataFromUploadRef.clearFiles()
|
||||
},
|
||||
editDataDialogClose() {
|
||||
this.$refs.editDataFormRef.resetFields()
|
||||
this.eidtDataForm.imageUrl = ''
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.$refs.editDataFormRef.resetFields();
|
||||
this.eidtDataForm.imageUrl = "";
|
||||
this.$refs.editUpload.clearFiles();
|
||||
},
|
||||
// 追加数据
|
||||
addDataDialogConfirm() {
|
||||
this.$refs.addDataFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
//console.log("新增新增", this.addDataFrom);
|
||||
this.$http
|
||||
.post('/workdynamics/insert', this.addDataFrom)
|
||||
.post("/workdynamics/insert", this.addDataFrom)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message.success('新增成功')
|
||||
this.addDataDialogVisabled = false
|
||||
this.getTableData()
|
||||
this.$message.success("新增成功");
|
||||
this.addDataDialogVisabled = false;
|
||||
this.getTableData();
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.$message.success('表单数据填写不完整')
|
||||
this.$message.success("表单数据填写不完整");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
// 限定图片
|
||||
handleExceed() {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
this.$message({ type: "error", message: "最多支持一张图片上传" });
|
||||
},
|
||||
// 限制标题
|
||||
titleExceed(str) {
|
||||
if (str.length >= 200) {
|
||||
this.$message.error('标题文字不能超过200字')
|
||||
this.$message.error("标题文字不能超过200字");
|
||||
}
|
||||
},
|
||||
// 限制内容
|
||||
contentExceed(str) {
|
||||
if (str.length >= 2000) {
|
||||
this.$message.error('内容文字不能超过2000字')
|
||||
this.$message.error("内容文字不能超过2000字");
|
||||
}
|
||||
},
|
||||
//限制摘要
|
||||
noteExceed(str) {
|
||||
if (str.length >= 1000) {
|
||||
this.$message.error("摘要文字不能超过1000字");
|
||||
}
|
||||
},
|
||||
// 删除数据
|
||||
deleteData(row) {
|
||||
console.log(row)
|
||||
this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
console.log(row);
|
||||
this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
let ids = []
|
||||
let ids = [];
|
||||
if (this.deleteDataArr.length > 1) {
|
||||
ids = this.deleteDataArr
|
||||
ids = this.deleteDataArr;
|
||||
} else {
|
||||
ids = [row.id]
|
||||
ids = [row.id];
|
||||
}
|
||||
console.log(ids)
|
||||
this.$http.delete('/workdynamics/delete', {
|
||||
data: ids
|
||||
console.log(ids);
|
||||
this.$http
|
||||
.delete("/workdynamics/delete", {
|
||||
data: ids,
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
this.getTableData()
|
||||
})
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getTableData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
//预览工作动态信息
|
||||
async openPreviewData(row) {
|
||||
console.log("预览预览", row);
|
||||
const { data: res } = await this.$http.get(
|
||||
`workdynamics/select/${row.id}`
|
||||
);
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.previewData = res.data;
|
||||
|
||||
this.perviewDataDialogVisabled = true;
|
||||
},
|
||||
perviewDataDialogClose() {
|
||||
this.perviewDataDialogVisabled = false;
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.addDataFrom.imageUrl = res.data
|
||||
this.addDataFrom.imageUrl = res.data;
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isImage && isLt2M
|
||||
return isImage && isLt2M;
|
||||
},
|
||||
eidtHandleAvatarSuccess(res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.eidtDataForm.imageUrl = res.data
|
||||
this.eidtDataForm.imageUrl = res.data;
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
editBeforeAvatarUpload(file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isImage && isLt2M
|
||||
return isImage && isLt2M;
|
||||
},
|
||||
async openEditDialog(row) {
|
||||
const { data: res } = await this.$http.get(`workdynamics/select/${row.id}`)
|
||||
const { data: res } = await this.$http.get(
|
||||
`workdynamics/select/${row.id}`
|
||||
);
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.eidtDataForm = res.data
|
||||
this.eidtDataForm = res.data;
|
||||
|
||||
this.editDataDialogVisabled = true
|
||||
this.editDataDialogVisabled = true;
|
||||
},
|
||||
eidtDataDialogConfirm() {
|
||||
this.$refs.editDataFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
console.log(this.eidtDataForm)
|
||||
console.log(this.eidtDataForm);
|
||||
this.$http
|
||||
.put('/workdynamics/update', this.eidtDataForm)
|
||||
.put("/workdynamics/update", this.eidtDataForm)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message.success('编辑成功')
|
||||
this.editDataDialogVisabled = false
|
||||
this.getTableData()
|
||||
this.$message.success("编辑成功");
|
||||
this.editDataDialogVisabled = false;
|
||||
this.getTableData();
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.$message.success('表单数据填写不完整')
|
||||
this.$message.success("表单数据填写不完整");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
addUploadRemoveFile(file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
this.$refs.addUpload.clearFiles();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
},
|
||||
editUploadRemoveFile(file, fileList) {
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.eidtDataForm.imageUrl = ''
|
||||
}
|
||||
this.$refs.editUpload.clearFiles();
|
||||
this.eidtDataForm.imageUrl = "";
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
editDialogShowFileList() {
|
||||
if (this.eidtDataForm.imageUrl) {
|
||||
return [{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }]
|
||||
}
|
||||
}
|
||||
}
|
||||
return [
|
||||
{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
|
||||
];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
|
|
@ -513,7 +672,7 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
|
|
@ -546,5 +705,85 @@ export default {
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.preview-dialog {
|
||||
width: 100%;
|
||||
height: 723px;
|
||||
overflow: auto;
|
||||
/* 滚动条凹槽的颜色，还可以设置边框属性 */
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
/* 滚动条的宽度 */
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
//margin-top: -40px;
|
||||
border-bottom: solid #c6c6c6 1px;
|
||||
.title-text {
|
||||
text-align: center;
|
||||
span {
|
||||
font-size: 24px;
|
||||
color: #0558e1;
|
||||
}
|
||||
}
|
||||
.title-time {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-top: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-note {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
text-align: left;
|
||||
margin-top: 24px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.preview-image {
|
||||
width: 900px;
|
||||
//height: 100%;
|
||||
margin-top: 16px;
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
padding-left: 300px;
|
||||
}
|
||||
.preview-content {
|
||||
line-height: 30px;
|
||||
text-indent: 2em;
|
||||
margin-top: 16px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-new {
|
||||
background-color: #0558e1;
|
||||
border: none;
|
||||
}
|
||||
.button-text-new {
|
||||
color: #0558e1;
|
||||
}
|
||||
.el-icon-delete {
|
||||
color: #0558e1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-05-06 11:17:55
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-08 17:19:11
|
||||
* @LastEditTime: 2022-06-20 17:40:52
|
||||
* @Description: 编目弹窗
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -441,17 +441,7 @@ export default {
|
|||
const newData = [...this.data]
|
||||
this.editData = {}
|
||||
newData.forEach(val => {
|
||||
if (val.key === key) {
|
||||
this.editData = val
|
||||
} else {
|
||||
if (val.children) {
|
||||
val.children.forEach(item => {
|
||||
if (item.key === key) {
|
||||
this.editData = item
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
this.handleChangeFor(val, key)
|
||||
})
|
||||
if (this.editData) {
|
||||
this.editData[column] = value
|
||||
|
|
@ -459,6 +449,17 @@ export default {
|
|||
}
|
||||
console.log(this.data)
|
||||
},
|
||||
handleChangeFor (val, key) {
|
||||
if (val.key === key) {
|
||||
this.editData = val
|
||||
} else {
|
||||
if (val.children) {
|
||||
val.children.forEach(item => {
|
||||
this.handleChangeFor(item, key)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
edit (key) {
|
||||
if (this.flag) {
|
||||
const newData = [...this.data]
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 16:45:25
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-16 12:46:36
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 18:38:34
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -28,21 +28,25 @@
|
|||
<!-- 站点配置 -->
|
||||
<script>
|
||||
window.SITE_CONFIG = {};
|
||||
window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
|
||||
window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
|
||||
window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
|
||||
// window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
|
||||
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||
// window.SITE_CONFIG['previewUrl'] = 'http://localhost:8080/';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
|
||||
// window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
// 西海岸版本
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://10.134.135.9:9797';
|
||||
// window.SITE_CONFIG['previewUrl'] = 'http://10.134.135.9:9796/';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9796/document/#/devModelFile/';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
|
||||
// 开发
|
||||
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
|
||||
window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
|
||||
// 穿透版本
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
|
||||
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
|
||||
|
|
@ -60,6 +64,7 @@
|
|||
|
||||
<script type="text/javascript" src="./static/config/basicConfig.js"></script>
|
||||
<script type="text/javascript" src="./static/config/mapConfig.js"></script>
|
||||
<script type="text/javascript" src="./static/config/footerData.js"></script>
|
||||
<!-- ==========地图相关配置========== -->
|
||||
<script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
* @Author: zhangfeihu
|
||||
* @Date: 2022-06-16 16:37:31
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-20 16:18:04
|
||||
* @FilePath: \qiantai\front\public\static\config\footerData.js
|
||||
* @Description: 底部菜单数据配置配置
|
||||
*/
|
||||
const footerDataList = {
|
||||
// 市局
|
||||
// company: {
|
||||
// left: '青岛市大数据发展管理局建设',
|
||||
// right: '海信网络科技股份有限公司'
|
||||
// },
|
||||
// address: [
|
||||
// {
|
||||
// name: '鲁IC备00000000号',
|
||||
// value: '政府标识码3702000106',
|
||||
// },
|
||||
// {
|
||||
// name: '版权所有：青岛市大数据发展管理局',
|
||||
// value: '地址：山东省青岛市香港中路17号市级机关办公楼',
|
||||
// },
|
||||
// {
|
||||
// name: '电话：0532-8561234',
|
||||
// value: '传真：0532-2145122',
|
||||
// },
|
||||
// ]
|
||||
// 西海岸
|
||||
company: {
|
||||
left: '青岛西海岸新区大数据发展促进局建设',
|
||||
right: 'v0.81'
|
||||
},
|
||||
address: [
|
||||
{
|
||||
name: '鲁IC备00000000号',
|
||||
value: '政府标识码3702000106',
|
||||
},
|
||||
{
|
||||
name: '版权所有：青岛西海岸新区大数据发展促进局',
|
||||
value: '地址：青岛市西海岸新区长江中路369号',
|
||||
},
|
||||
{
|
||||
name: '电话：0532-86986596',
|
||||
value: '传真：0532-86986596',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import request from '@/utils/request'
|
||||
//能力云图-知识库
|
||||
export function KnowledgeBaseStatic() {
|
||||
return request({
|
||||
url: '/census/center/v2/knowledgeInfo',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-概览总数
|
||||
export function wholeAmount() {
|
||||
return request({
|
||||
url: '/census/center/v2/whole_amount',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-概览ehcarts
|
||||
export function trafficStatistics(data) {
|
||||
return request({
|
||||
url: '/census/center/v2/trafficStatistics',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
//能力云图-应用资源总数
|
||||
export function applicationNum() {
|
||||
return request({
|
||||
url: '/census/center/v2/applicationNum',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-区市应用资源排名
|
||||
export function districtResourceRank() {
|
||||
return request({
|
||||
url: '/census/center/v2/districtResourceRank',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-委办局应用资源分布
|
||||
export function cityResourceRank() {
|
||||
return request({
|
||||
url: '/census/center/v2/cityResourceRank',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-组件服务
|
||||
export function assemblerBaseStatic() {
|
||||
return request({
|
||||
url: '/census/center/v2/assemblerInfo',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-组件服务排行
|
||||
export function componentServiceRank(params) {
|
||||
return request({
|
||||
url: '/census/center/v2/componentServiceRank',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-20 17:16:35
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-05-26 22:40:46
|
||||
* @LastEditTime: 2022-06-19 18:42:39
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
|
@ -46,3 +46,40 @@ export function correct(params) {
|
|||
export function paddleocr(params) {
|
||||
return axios.post('http://15.72.183.90:7008/paddleocr', params, config2)
|
||||
}
|
||||
|
||||
// 能力云图-数据资源
|
||||
export function count() {
|
||||
return axios.post(
|
||||
'http://10.134.135.24:30058/share-portal/platform/index/abilityMarket/count',
|
||||
config2
|
||||
)
|
||||
}
|
||||
export function getVideoList(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.9:8001/hx-weather-warning/camera/getCameraListByName?name=' +
|
||||
params.name +
|
||||
'&pageNo=' +
|
||||
params.pageNo +
|
||||
'&pageSize=' +
|
||||
params.pageSize,
|
||||
config2
|
||||
)
|
||||
}
|
||||
// 能力云图-数据资源-总数据数
|
||||
export function getRecord(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.24:30090/api/share-portal/platform/catalogue/query?serviceName=' +
|
||||
params.serviceName +
|
||||
'&orderField=' +
|
||||
params.orderField +
|
||||
'&orderType=' +
|
||||
params.orderType +
|
||||
'&pageNum=' +
|
||||
params.pageNum +
|
||||
'&pageSize=' +
|
||||
params.pageSize +
|
||||
'&serviceType=' +
|
||||
params.serviceType,
|
||||
config2
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 757 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 788 B |
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
Binary file not shown.
|
After Width: | Height: | Size: 789 B |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 17:48:03
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-15 19:40:28
|
||||
* @LastEditTime: 2022-06-20 16:10:57
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
/**
|
||||
|
|
@ -50,7 +50,7 @@ const setting = {
|
|||
//路由模式，可选值为 history 或 hash
|
||||
routerMode: 'hash',
|
||||
//不经过token校验的路由
|
||||
routesWhiteList: ['/login', '/register', '/callback', '/404', '/403'],
|
||||
routesWhiteList: ['/login', '/register', '/callback', '/404', '/403', '/capabilityCloud'], // 新增统计云图白名单
|
||||
//加载时显示文字
|
||||
loadingText: '正在加载中...',
|
||||
//token名称
|
||||
|
|
|
|||
|
|
@ -376,6 +376,16 @@ export const constantRoutes = [
|
|||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
// 能力云图
|
||||
{
|
||||
path: '/capabilityCloud',
|
||||
name: 'capabilityCloud',
|
||||
component: () => import('@/views/capabilityCloud'),
|
||||
meta: {
|
||||
title: '能力云图',
|
||||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
// 赋能案例详情
|
||||
{
|
||||
path: '/AssignCaseDetailPage',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.zhangfeihu
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.zhangfeihu
|
||||
* @LastEditTime: 2022-06-13 14:31:19
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 18:58:40
|
||||
* @Description: 赋能案例-详情页
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -281,8 +281,8 @@
|
|||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value > domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value < domArr.value[i + 1].offsetTop - 50
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,426 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:16:10
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-19 17:52:19
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="application-resources">
|
||||
<div class="top"><span class="title">应用资源</span></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<div class="img"></div>
|
||||
<div class="content">
|
||||
<div class="name">总应用数</div>
|
||||
<div claSS="num">{{ num1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="img"></div>
|
||||
<div class="content">
|
||||
<div class="name">建设中应用数</div>
|
||||
<div claSS="num">{{ num2 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="img"></div>
|
||||
<div class="content">
|
||||
<div class="name">停用应用数</div>
|
||||
<div claSS="num">{{ num3 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="nav">
|
||||
<div
|
||||
:class="{ select: select == '委办局应用资源分布' }"
|
||||
@click="selectNav('委办局应用资源分布')"
|
||||
>
|
||||
委办局应用资源分布
|
||||
<i v-show="select == '委办局应用资源分布'"></i>
|
||||
</div>
|
||||
<div
|
||||
:class="{ select: select == '区市应用资源排名' }"
|
||||
@click="selectNav('区市应用资源排名')"
|
||||
>
|
||||
区市应用资源排名
|
||||
<i v-show="select == '区市应用资源排名'"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-box2" id="echarts-box2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import {
|
||||
applicationNum,
|
||||
districtResourceRank,
|
||||
cityResourceRank,
|
||||
} from '@/api/capabilityCloud'
|
||||
const num1 = ref(0)
|
||||
const num2 = ref(0)
|
||||
const num3 = ref(0)
|
||||
const select = ref('区市应用资源排名')
|
||||
let myChart = null
|
||||
const selectNav = (val) => {
|
||||
select.value = val
|
||||
switch (val) {
|
||||
case '区市应用资源排名':
|
||||
districtResourceRank().then((res) => {
|
||||
res.data.data = res.data.data.splice(0, 5)
|
||||
option.xAxis.data = []
|
||||
option.series[0].data = []
|
||||
option.series[1].data = []
|
||||
option.yAxis[0].max = res.data.data[0].count * 1.5
|
||||
res.data.data.forEach((val) => {
|
||||
option.xAxis.data.push(val.deptName)
|
||||
option.series[0].data.push(val.count)
|
||||
option.series[1].data.push(val.count)
|
||||
})
|
||||
myChart.setOption(option)
|
||||
})
|
||||
break
|
||||
case '委办局应用资源分布':
|
||||
cityResourceRank().then((res) => {
|
||||
res.data.data = res.data.data.splice(0, 5)
|
||||
option.xAxis.data = []
|
||||
option.series[0].data = []
|
||||
option.series[1].data = []
|
||||
option.yAxis[0].max = res.data.data[0].count * 1.5
|
||||
res.data.data.forEach((val) => {
|
||||
option.xAxis.data.push(val.deptName)
|
||||
option.series[0].data.push(val.count)
|
||||
option.series[1].data.push(val.count)
|
||||
})
|
||||
myChart.setOption(option)
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
applicationNum().then((res) => {
|
||||
num1.value =
|
||||
res.data.data.filter((val) => val.type == '总应用数')[0].amount || 0
|
||||
num2.value =
|
||||
res.data.data.filter((val) => val.type == '建设中应用数')[0].amount || 0
|
||||
num3.value =
|
||||
res.data.data.filter((val) => val.type == '停用应用数')[0].amount || 0
|
||||
})
|
||||
const option = {
|
||||
animation: true,
|
||||
grid: {
|
||||
top: '5%',
|
||||
bottom: '15%',
|
||||
right: '5%',
|
||||
},
|
||||
xAxis: {
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴轴线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(77, 128, 254, 0.2)',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
textStyle: {
|
||||
color: 'rgb(255,255,255,0.5)', //X轴文字颜色
|
||||
},
|
||||
// interval: 0,
|
||||
// rotate: 30,
|
||||
interval: 0,
|
||||
formatter: function (value) {
|
||||
var ret = '' //拼接加 返回的类目项
|
||||
var maxLength = 6 //每项显示文字个数
|
||||
var valLength = value.length //X轴类目项的文字个数
|
||||
var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
|
||||
if (rowN > 1) {
|
||||
//如果类目项的文字大于3,
|
||||
for (var i = 0; i < rowN; i++) {
|
||||
var temp = '' //每次截取的字符串
|
||||
var start = i * maxLength //开始截取的位置
|
||||
var end = start + maxLength //结束截取的位置
|
||||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||
temp = value.substring(start, end) + '\n'
|
||||
ret += temp //凭借最终的字符串
|
||||
}
|
||||
return ret
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25,
|
||||
// splitNumber: 4,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(77, 128, 254, 0.2)',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(77, 128, 254, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
margin: 14,
|
||||
fontSize: 16,
|
||||
textStyle: {
|
||||
color: '#65D5FF',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '设备在线率',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(146, 225, 255, 1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 151, 251, 1)',
|
||||
},
|
||||
]),
|
||||
label: {
|
||||
// 标签显示位置
|
||||
show: true,
|
||||
position: 'top', // insideTop 或者横向的 insideLeft
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
z: 10,
|
||||
zlevel: 0,
|
||||
},
|
||||
{
|
||||
// 分隔
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0F375F',
|
||||
},
|
||||
},
|
||||
symbolRepeat: 'fixed',
|
||||
symbolMargin: 6,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [32, 2],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [1, 1],
|
||||
data: [],
|
||||
width: 2,
|
||||
z: 0,
|
||||
zlevel: 1,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
xAxisIndex: [0],
|
||||
endValue: 4,
|
||||
startValue: 0,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const chart = document.getElementById('echarts-box2')
|
||||
if (chart) {
|
||||
myChart = echarts.init(chart)
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
}
|
||||
selectNav('委办局应用资源分布')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-resources {
|
||||
width: 9.24rem;
|
||||
height: 4.65rem;
|
||||
background: rgba(0, 108, 188, 0.1);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
.top {
|
||||
font-size: 24px;
|
||||
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.2rem;
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.item {
|
||||
width: 2.6rem;
|
||||
height: 1.12rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(33, 54, 88, 0.5),
|
||||
rgba(33, 54, 88, 0)
|
||||
);
|
||||
margin-top: 0.14rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.img {
|
||||
width: 0.66rem;
|
||||
height: 0.66rem;
|
||||
margin-left: 0.26rem;
|
||||
margin-right: 0.26rem;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 800ms ease-out;
|
||||
-moz-transition: all 800ms ease-out;
|
||||
transition: all 800ms ease-out;
|
||||
}
|
||||
.img:hover {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
-webkit-transition-delay: 0.2s;
|
||||
-moz-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
.content {
|
||||
width: 1.5rem;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.num {
|
||||
font-size: 32px;
|
||||
color: #1ef6f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
.img {
|
||||
background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2) .img {
|
||||
background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item:nth-of-type(3) .img {
|
||||
background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 6.53rem;
|
||||
height: 3.54rem;
|
||||
over-flow: hidden;
|
||||
position: relative;
|
||||
.nav {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0.3rem;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 1.5rem;
|
||||
& > div {
|
||||
cursor: pointer;
|
||||
background: rgba(8, 153, 231, 0.3);
|
||||
padding: 0.1rem 0.2rem;
|
||||
margin-left: 0.1rem;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 0.1rem;
|
||||
background: url('~@/assets/capabilityCloud/select_sj.png')
|
||||
no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
background: url(~@/assets/capabilityCloud/select.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.echarts-box2 {
|
||||
width: 6.53rem;
|
||||
height: 4.04rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-resources:hover {
|
||||
border: 2px solid;
|
||||
animation: turn 5s linear infinite;
|
||||
}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,586 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:15:33
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-19 18:19:58
|
||||
* @Description: 能力云图-组件服务
|
||||
-->
|
||||
<template>
|
||||
<div class="component-services">
|
||||
<div class="component-services-top">
|
||||
<span class="title">组件服务</span>
|
||||
</div>
|
||||
<div class="component-services-content">
|
||||
<!-- 上架总量 -->
|
||||
<div class="component-services-content-left">
|
||||
<div class="component-services-content-left-top">组件</div>
|
||||
<div class="component-services-content-left-bottom">
|
||||
<div
|
||||
class="component-services-content-left-bottom-son"
|
||||
v-for="(item, index) in snum"
|
||||
:key="index"
|
||||
>
|
||||
<P>{{ item.title }}</P>
|
||||
<p class="num">{{ item.num }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 组件数量和调用趋势 -->
|
||||
<div class="component-services-content-right">
|
||||
<div class="component-services-content-right-left">
|
||||
<div class="component-services-content-right-left-title">
|
||||
组件数量
|
||||
</div>
|
||||
<div class="component-services-content-right-left-content">
|
||||
<div
|
||||
v-for="(item, index) in servicesSnum"
|
||||
:key="index"
|
||||
class="component-services-content-right-left-content-son"
|
||||
>
|
||||
<p>{{ item.type }}</p>
|
||||
<p class="num">{{ item.amount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-services-content-right-right">
|
||||
<div class="component-services-content-right-right-title">
|
||||
<div class="component-services-content-right-right-title-top">
|
||||
<div
|
||||
class="component-services-content-right-right-title-top-left"
|
||||
>
|
||||
调用趋势
|
||||
</div>
|
||||
<div
|
||||
class="component-services-content-right-right-title-top-right"
|
||||
>
|
||||
<div
|
||||
@click="timeSwitch('周')"
|
||||
:class="timeSwitchindex == '周' ? 'timeDown' : ''"
|
||||
>
|
||||
周
|
||||
</div>
|
||||
<div
|
||||
@click="timeSwitch('月')"
|
||||
:class="timeSwitchindex == '月' ? 'timeDown' : ''"
|
||||
>
|
||||
月
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-services-content-right-right-title-bottom">
|
||||
次
|
||||
</div>
|
||||
</div>
|
||||
<div class="callTheTrend" id="callTheTrend"></div>
|
||||
<div class="component-services-content-right-right-bottom">
|
||||
<div class="component-services-content-right-right-bottom-left">
|
||||
<div
|
||||
class="components-can-assign"
|
||||
@click="ranking('total')"
|
||||
:class="dataclick == 'total' ? 'down' : ''"
|
||||
>
|
||||
组件赋能排行
|
||||
</div>
|
||||
<div
|
||||
class="components-scores"
|
||||
@click="ranking('score')"
|
||||
:class="dataclick == 'score' ? 'down' : ''"
|
||||
>
|
||||
组件评分排行
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-services-content-right-right-bottom-right">
|
||||
<div>
|
||||
<span>TOP</span>
|
||||
<span>名称</span>
|
||||
<span>应用数</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in dataList" :key="index">
|
||||
<span>{{ index + 1 }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.name }}</template>
|
||||
<span>{{ item.name }}</span>
|
||||
</a-tooltip>
|
||||
<span>{{ item.count || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import {
|
||||
assemblerBaseStatic,
|
||||
componentServiceRank,
|
||||
} from '@/api/capabilityCloud'
|
||||
import * as moment from 'moment'
|
||||
let snum = ref([
|
||||
{ title: '上架总量', num: '0000' },
|
||||
{ title: '总调用次数(API)', num: '0' },
|
||||
{ title: '健康度(API)', num: '100%' },
|
||||
])
|
||||
let dataclick = ref('total')
|
||||
let dataList = ref([])
|
||||
let timeSwitchindex = ref('周')
|
||||
let servicesSnum = ref([])
|
||||
let callTheTrendData = ref({ time: [], snum: [] })
|
||||
//年月切换
|
||||
const timeSwitch = (name) => {
|
||||
timeSwitchindex.value = name
|
||||
callTheTrendData.value.time = []
|
||||
callTheTrendData.value.snum = []
|
||||
if (name == '周') {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let time = moment()
|
||||
.subtract('days', 6 - i)
|
||||
.format('MM-DD')
|
||||
callTheTrendData.value.time.push(time)
|
||||
callTheTrendData.value.snum.push('0')
|
||||
console.log('time', callTheTrendData.value, name)
|
||||
}
|
||||
callTheTrend(callTheTrendData.value)
|
||||
} else {
|
||||
for (let i = 0; i < 31; i++) {
|
||||
let time = moment()
|
||||
.subtract('days', 30 - i)
|
||||
.format('MM-DD')
|
||||
callTheTrendData.value.time.push(time)
|
||||
callTheTrendData.value.snum.push('0')
|
||||
console.log('time', callTheTrendData.value, name)
|
||||
}
|
||||
callTheTrend(callTheTrendData.value)
|
||||
}
|
||||
}
|
||||
//调用趋势echarts图
|
||||
const callTheTrend = (dataFrom) => {
|
||||
echarts.init(document.getElementById('callTheTrend')).dispose()
|
||||
let chartDom = document.getElementById('callTheTrend')
|
||||
let myChart = echarts.init(chartDom)
|
||||
let option
|
||||
option = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '0%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(28,119,205,0.8)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
size: 18,
|
||||
},
|
||||
},
|
||||
data: dataFrom.time,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '个',
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
size: 18,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(244,124,37, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(244,124,37, 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#ffe22e',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: '#f47c25',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: '3px',
|
||||
},
|
||||
},
|
||||
data: dataFrom.snum,
|
||||
},
|
||||
],
|
||||
}
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
//组件复制排名接口
|
||||
const ranking = (name) => {
|
||||
dataclick.value = name
|
||||
let params = {
|
||||
type: name,
|
||||
}
|
||||
debugger
|
||||
componentServiceRank(params).then((res) => {
|
||||
dataList.value = res.data.data
|
||||
console.log('res', dataList.value)
|
||||
})
|
||||
}
|
||||
//组件服务数量接口
|
||||
const NumberOfComponentServices = () => {
|
||||
assemblerBaseStatic().then((res) => {
|
||||
snum.value[0].num = res.data.data[0].amount
|
||||
res.data.data.map((item, index) => {
|
||||
if (index != 0) {
|
||||
servicesSnum.value.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
timeSwitch(timeSwitchindex.value)
|
||||
NumberOfComponentServices()
|
||||
ranking(dataclick.value)
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
callTheTrend(callTheTrendData.value)
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.component-services {
|
||||
height: 4.63rem;
|
||||
width: 7.84rem;
|
||||
position: relative;
|
||||
background: rgba(0, 108, 188, 0.1);
|
||||
border: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||
border-radius: 0.03rem;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
.component-services-top {
|
||||
width: 7.84rem;
|
||||
height: 0.44rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: url('~@/assets/capabilityCloud/Component_services_bg.png')
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
line-height: 0.44rem;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
.component-services-content {
|
||||
padding: 0.28rem 0 0.28rem 0.28rem;
|
||||
width: 7.84rem;
|
||||
height: 4.65rem;
|
||||
display: flex;
|
||||
.component-services-content-left {
|
||||
margin-right: 0.18rem;
|
||||
.component-services-content-left-top {
|
||||
width: 1.16rem;
|
||||
height: 1.04rem;
|
||||
margin-left: 0.15rem;
|
||||
line-height: 1.04rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.2rem;
|
||||
background: url('~@/assets/capabilityCloud/Component_services_title.png')
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.component-services-content-left-bottom {
|
||||
width: 1.48rem;
|
||||
margin-top: -0.15rem;
|
||||
padding-top: 0.52rem;
|
||||
background: url('~@/assets/capabilityCloud/Component_services_content_bg.png')
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.component-services-content-left-bottom-son {
|
||||
text-align: center;
|
||||
margin-bottom: 0.56rem;
|
||||
& > p:first-child {
|
||||
color: #ffffff;
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.16rem;
|
||||
margin-bottom: 0.12rem;
|
||||
margin-top: ;
|
||||
}
|
||||
& > p:last-child {
|
||||
color: #1ef6f5;
|
||||
font-size: 0.28rem;
|
||||
line-height: 0.28rem;
|
||||
}
|
||||
}
|
||||
.component-services-content-left-bottom-son:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.component-services-content-right {
|
||||
width: (100% - 1.66rem);
|
||||
margin-top: 0.35rem;
|
||||
display: flex;
|
||||
.component-services-content-right-left {
|
||||
width: 1.6rem;
|
||||
height: 3.72rem;
|
||||
background: -webkit-linear-gradient(#214677, transparent);
|
||||
margin-right: 0.13rem;
|
||||
.component-services-content-right-left-title {
|
||||
font-size: 0.2rem;
|
||||
color: #ffffff;
|
||||
padding: 0.14rem 0 0.1rem 0;
|
||||
border-bottom: #00ffff 0.01rem solid;
|
||||
text-align: center;
|
||||
margin: 0 0.13rem;
|
||||
}
|
||||
.component-services-content-right-left-content {
|
||||
padding-top: 0.14rem;
|
||||
.component-services-content-right-left-content-son {
|
||||
background: url('~@/assets/capabilityCloud/Component_services_snum.png')
|
||||
no-repeat;
|
||||
background-size: 1.1rem 0.59rem;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
& > p:first-child {
|
||||
color: #ffffff;
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.16rem;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
& > p:last-child {
|
||||
color: #1ef6f5;
|
||||
font-size: 0.28rem;
|
||||
line-height: 0.28rem;
|
||||
padding-bottom: 0.24rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.component-services-content-right-left-content-son :first-child {
|
||||
& > p:last-child {
|
||||
color: #1ef6f5;
|
||||
font-size: 0.28rem;
|
||||
line-height: 0.28rem;
|
||||
padding-bottom: 0.38rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.component-services-content-right-right {
|
||||
width: 3.96rem;
|
||||
.component-services-content-right-right-title {
|
||||
.component-services-content-right-right-title-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.component-services-content-right-right-title-top-left {
|
||||
font-size: 0.18rem;
|
||||
height: 0.2rem;
|
||||
line-height: 0.18rem;
|
||||
color: #ffffff;
|
||||
background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
|
||||
no-repeat;
|
||||
background-size: 0.7rem 0.08rem;
|
||||
background-position: bottom;
|
||||
}
|
||||
.component-services-content-right-right-title-top-right {
|
||||
margin-left: 0.15rem;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
font-size: 0.14rem;
|
||||
& > div {
|
||||
font-size: 0.14rem;
|
||||
height: 0.26rem;
|
||||
width: 0.4rem;
|
||||
border: 0.01rem solid #61d2d2;
|
||||
text-align: center;
|
||||
line-height: 0.24rem;
|
||||
margin-right: 0.05rem;
|
||||
border-radius: 0.12rem;
|
||||
background: #05315b;
|
||||
cursor: pointer;
|
||||
}
|
||||
.timeDown {
|
||||
background: #005ea3;
|
||||
border: #00ffff 0.01rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
.component-services-content-right-right-title-bottom {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 0.14rem;
|
||||
}
|
||||
}
|
||||
.callTheTrend {
|
||||
height: 1.32rem;
|
||||
width: 100%;
|
||||
}
|
||||
.component-services-content-right-right-bottom {
|
||||
display: flex;
|
||||
padding-top: 0.13rem;
|
||||
.component-services-content-right-right-bottom-left {
|
||||
width: 1.28rem;
|
||||
border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||
margin-right: 0.2rem;
|
||||
.components-can-assign,
|
||||
.components-scores {
|
||||
margin-top: 0.13rem;
|
||||
height: 0.88rem;
|
||||
width: 1.25rem;
|
||||
font-size: 0.16rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 0.88rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 117, 203, 0.2),
|
||||
rgba(0, 117, 203, 0)
|
||||
);
|
||||
}
|
||||
.components-can-assign:hover,
|
||||
.components-scores:hover {
|
||||
border-left: 0.02rem solid #00ffff;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 117, 203, 1),
|
||||
rgba(0, 117, 203, 0)
|
||||
);
|
||||
color: #ffffff;
|
||||
}
|
||||
.down {
|
||||
border-left: 0.02rem solid #00ffff;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 117, 203, 1),
|
||||
rgba(0, 117, 203, 0)
|
||||
);
|
||||
color: #ffffff;
|
||||
}
|
||||
.components-can-assign {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.component-services-content-right-right-bottom-right {
|
||||
width: 2.5rem;
|
||||
font-size: 0.16rem;
|
||||
border: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
& > div {
|
||||
& > span {
|
||||
display: inline-block;
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||
border-bottom: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||
}
|
||||
& > span:first-child {
|
||||
width: 0.47rem;
|
||||
text-align: center;
|
||||
}
|
||||
& > span:nth-child(2) {
|
||||
width: 1.47rem;
|
||||
padding-left: 0.05rem;
|
||||
}
|
||||
& > span:last-child {
|
||||
width: 0.5rem;
|
||||
color: #1ffefd;
|
||||
text-align: center;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
& > div:first-child {
|
||||
color: #1ffefd;
|
||||
background: #27528c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.component-services:hover {
|
||||
border: 2px solid;
|
||||
animation: turn 5s linear infinite;
|
||||
}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:15:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-19 18:08:39
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="data-resources">
|
||||
<div class="resources-top">
|
||||
<span class="title">数据资源</span>
|
||||
</div>
|
||||
<div class="resources-bottom">
|
||||
<div class="resources-left">
|
||||
<div v-for="(item, index) in resourcesLeft" :key="index">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<h2 class="num">{{ item.num || '0' }}</h2>
|
||||
</div>
|
||||
<img :src="leftImg" alt="" />
|
||||
</div>
|
||||
<div class="resources-right">
|
||||
<div class="resources-right-title">
|
||||
<h3>数据赋能排行</h3>
|
||||
</div>
|
||||
<div class="resources-right-table">
|
||||
<a-table
|
||||
:data-source="assignRankings"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
bordered="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { count, getRecord } from '@/api/file'
|
||||
// import { abc } from './dataABC.json'
|
||||
// 左侧数据
|
||||
const resourcesLeft = ref([
|
||||
{
|
||||
name: '总数据数',
|
||||
num: '',
|
||||
},
|
||||
{
|
||||
name: '总申请次数',
|
||||
num: '',
|
||||
},
|
||||
{
|
||||
name: '满足率',
|
||||
num: '',
|
||||
},
|
||||
])
|
||||
// 右侧数据
|
||||
const assignRankings = ref([
|
||||
{
|
||||
index: '1',
|
||||
name: ' ',
|
||||
operation: ' ',
|
||||
},
|
||||
{
|
||||
index: '2',
|
||||
name: ' ',
|
||||
operation: ' ',
|
||||
},
|
||||
{
|
||||
index: '3',
|
||||
name: ' ',
|
||||
operation: ' ',
|
||||
},
|
||||
{
|
||||
index: '4',
|
||||
name: ' ',
|
||||
operation: ' ',
|
||||
},
|
||||
{
|
||||
index: '5',
|
||||
name: ' ',
|
||||
operation: ' ',
|
||||
},
|
||||
])
|
||||
const columns = ref([
|
||||
{
|
||||
title: 'Top',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '55%',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '应用数',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
width: '30%',
|
||||
},
|
||||
])
|
||||
// 左侧图片
|
||||
const leftImg = require('@/assets/capabilityCloud/resources-left.png')
|
||||
// 请求左侧数据开始
|
||||
const obj = {
|
||||
serviceName: '',
|
||||
orderField: 'updateTime',
|
||||
orderType: 'desc',
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
serviceType: 'data',
|
||||
}
|
||||
getRecord(obj).then((res) => {
|
||||
if (res.data.data) {
|
||||
// res.data.data.list.forEach((val) => {
|
||||
// val.name = val.serviceName
|
||||
// val.createDate = val.updateTime
|
||||
// val.id = val.serviceId // "requestNum": 0, // "requestQuantity": 0, // "starNum": 4, // "shareStatus": "2"
|
||||
// })
|
||||
// resourceList.data = res.data.data.list || []
|
||||
resourcesLeft.value[0].num = res.data.data.total || '0' // getShoppingCartList(resourceData.value.data.records)
|
||||
console.log('数据资源~~~~~~~~~~~', resourcesLeft.value[0].num)
|
||||
}
|
||||
})
|
||||
// 请求左侧数据结束
|
||||
// 请求右侧数据开始
|
||||
const contentData = ref([])
|
||||
count().then((res) => {
|
||||
contentData.value = res.data.data
|
||||
console.log(contentData.value)
|
||||
// 总申请次数
|
||||
resourcesLeft.value[1].num = contentData.value.requestCount || '0'
|
||||
// 总满足率
|
||||
resourcesLeft.value[2].num =
|
||||
contentData.value.satisfactionRate * 100 + '%' || '0' + '%'
|
||||
// 排行
|
||||
for (let i = 1; i < 6; i++) {
|
||||
// TOP
|
||||
assignRankings.value[i - 1].index = i
|
||||
//
|
||||
assignRankings.value[i - 1].name =
|
||||
contentData.value.resourceTop5[i - 1].service_name || ''
|
||||
assignRankings.value[i - 1].opacity =
|
||||
contentData.value.resourceTop5[i - 1].count || ' '
|
||||
}
|
||||
})
|
||||
// 请求右侧数据结束
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.data-resources {
|
||||
width: 4.4rem;
|
||||
height: 4.63rem;
|
||||
background: rgba(0, 108, 188, 0.1);
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid rgba(0, 108, 188, 0.7);
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
.resources-top {
|
||||
height: 0.6rem;
|
||||
background: url('~@/assets/capabilityCloud/resources-title.png') no-repeat;
|
||||
text-align: center;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.resources-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.resources-left {
|
||||
width: 1.56rem;
|
||||
height: 2.75rem;
|
||||
background-image: linear-gradient(#214678, transparent);
|
||||
text-align: center;
|
||||
margin-left: 0.18rem;
|
||||
position: relative;
|
||||
div {
|
||||
margin: 0 0.1rem;
|
||||
border-bottom: 0.01rem solid #1f557c;
|
||||
h3 {
|
||||
font-size: 0.16rem;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0rem;
|
||||
padding-top: 0.16rem;
|
||||
}
|
||||
.num {
|
||||
font-size: 0.28rem;
|
||||
color: #1ef6f5;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
div:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
img {
|
||||
width: 90%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.38rem;
|
||||
margin-left: -45%;
|
||||
animation: move 5s linear 0s infinite;
|
||||
@keyframes move {
|
||||
from {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.resources-right {
|
||||
margin-left: 0.18rem;
|
||||
width: 2.35rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.resources-right-title {
|
||||
width: 2.24rem;
|
||||
height: 1rem;
|
||||
text-align: center;
|
||||
background: url('~@/assets/capabilityCloud/resources-right.png')
|
||||
no-repeat center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
h3 {
|
||||
font-size: 0.18rem;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
height: 0.38rem;
|
||||
line-height: 0.38rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
#1b76cc 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
text-shadow: 0rem 0rem 0.02rem rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
.resources-right-table {
|
||||
width: 100%;
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
background-color: #1f557c;
|
||||
border: none;
|
||||
color: #1ef6f5;
|
||||
height: 0.32rem;
|
||||
padding: 0;
|
||||
}
|
||||
:deep(.ant-table-row) {
|
||||
height: 0.45rem;
|
||||
}
|
||||
:deep(.ant-table-cell) {
|
||||
text-align: center;
|
||||
transition: all 0s;
|
||||
background: transparent;
|
||||
border-bottom: 0.01rem solid #1f557c;
|
||||
border-right: 0.01rem solid #1f557c;
|
||||
padding: 0;
|
||||
}
|
||||
:deep(.ant-table-cell:nth-child(1)) {
|
||||
border-left: 0.01rem solid #1f557c;
|
||||
}
|
||||
:deep(.ant-table-cell:nth-child(2)) {
|
||||
text-align: left;
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
:deep(.ant-table-cell:nth-child(3)) {
|
||||
color: #1ef6f5;
|
||||
}
|
||||
:deep(.ant-table-tbody) {
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ant-table) {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
:deep(.ant-table-content > table) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-table-container) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-table-cell-row-hover) {
|
||||
transition: all 0s;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-resources:hover {
|
||||
border: 2px solid;
|
||||
animation: turn 5s linear infinite;
|
||||
}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:15:33
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-19 18:45:10
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="infrastructure">
|
||||
<div class="infrastructure-top">
|
||||
<span class="title">基础设施</span>
|
||||
</div>
|
||||
<div class="infrastructure-content">
|
||||
<div
|
||||
class="infrastructure-content-son"
|
||||
v-for="(item, index) in myDataList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="num-class"
|
||||
:style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
|
||||
>
|
||||
<div>{{ item.title }}</div>
|
||||
<div>{{ item.snum }}</div>
|
||||
</div>
|
||||
<div class="health-degree">
|
||||
<div class="health-degree-title">健康度</div>
|
||||
<a-progress
|
||||
:stroke-color="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}"
|
||||
:percent="item.percentage"
|
||||
:show-info="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="percentage" :style="fontFormat(item.title)">
|
||||
{{ item.percentage }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { getVideoList } from '@/api/file.js'
|
||||
let myDataList = ref([
|
||||
{
|
||||
title: '视频资源数量',
|
||||
snum: '0',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
|
||||
},
|
||||
{
|
||||
title: '云资源',
|
||||
snum: '0',
|
||||
percentage: '0',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
|
||||
},
|
||||
{
|
||||
title: '感知资源',
|
||||
snum: '0',
|
||||
percentage: '0',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
|
||||
},
|
||||
])
|
||||
function fontFormat(name) {
|
||||
switch (name) {
|
||||
case '视频资源数量':
|
||||
return 'color: #32ff91;'
|
||||
break
|
||||
case '云资源':
|
||||
return 'color: #f4fd25;'
|
||||
break
|
||||
case '感知资源':
|
||||
return 'color: #ff1d18;'
|
||||
break
|
||||
}
|
||||
}
|
||||
const params = {
|
||||
name: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
getVideoList(params).then((res) => {
|
||||
// 赋值
|
||||
myDataList.value[1].sum = res.data.data.total
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.infrastructure {
|
||||
width: 4.4rem;
|
||||
height: 4.63rem;
|
||||
position: relative;
|
||||
background: rgba(0, 108, 188, 0.1);
|
||||
border: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||
border-radius: 0.03rem;
|
||||
padding: 0.2rem;
|
||||
padding-top: 0;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
.infrastructure-top {
|
||||
width: 4.4rem;
|
||||
height: 0.44rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: url('~@/assets/capabilityCloud/infrastructure_title.png')
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
line-height: 0.44rem;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
.infrastructure-content {
|
||||
width: 4rem;
|
||||
margin-top: 0.62rem;
|
||||
.infrastructure-content-son {
|
||||
display: flex;
|
||||
width: 4rem;
|
||||
height: 1.17rem;
|
||||
background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
|
||||
align-items: center;
|
||||
margin-bottom: 0.14rem;
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
.num-class {
|
||||
width: 1.5rem;
|
||||
height: 1rem;
|
||||
text-align: center;
|
||||
margin-right: 0.2rem;
|
||||
& > div:first-child {
|
||||
font-size: 0.18rem;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.1rem;
|
||||
line-height: 0.18rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
& > div:last-child {
|
||||
font-size: 0.36rem;
|
||||
line-height: 0.36rem;
|
||||
color: #1ce2e5;
|
||||
}
|
||||
}
|
||||
.health-degree {
|
||||
width: 1.35rem;
|
||||
.health-degree-title {
|
||||
font-size: 0.14rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
:deep(.ant-progress-outer) {
|
||||
height: 0.27rem;
|
||||
}
|
||||
:deep(.ant-progress-inner) {
|
||||
height: 0.27rem;
|
||||
border-radius: 0.14rem;
|
||||
border: 0.01rem solid rgba(8, 153, 231, 0.6);
|
||||
background: rgba(21, 65, 123, 0.6);
|
||||
div {
|
||||
height: 0.27rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .health-degree:
|
||||
.percentage {
|
||||
height: 0.57rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
font-family: 'DIN-Bold';
|
||||
margin-left: 0.1rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.infrastructure:hover {
|
||||
border: 2px solid;
|
||||
animation: turn 5s linear infinite;
|
||||
}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:15:33
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-19 18:59:06
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="knowledge-base">
|
||||
<div class="knowledge-top">
|
||||
<span class="title">知识库</span>
|
||||
</div>
|
||||
<div class="knowledge-content">
|
||||
<div v-for="(item, index) in contentBox" :key="index">
|
||||
<img :src="item.photo" alt="" />
|
||||
<h3>{{ item.name }}</h3>
|
||||
<h3>{{ item.type }}</h3>
|
||||
<h6 class="num">{{ item.num }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { KnowledgeBaseStatic } from '@/api/capabilityCloud'
|
||||
const contentBoxData = ref([])
|
||||
const contentBox = ref([
|
||||
{
|
||||
photo: require('@/assets/capabilityCloud/Knowledge-up.png'),
|
||||
name: '知识库',
|
||||
type: '上架总量',
|
||||
num: '',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/capabilityCloud/Knowledge-look.png'),
|
||||
name: '知识库',
|
||||
type: '浏览总量',
|
||||
num: '',
|
||||
},
|
||||
])
|
||||
KnowledgeBaseStatic().then((res) => {
|
||||
contentBoxData.value = res.data.data
|
||||
contentBoxData.value.forEach((item) => {
|
||||
if (item.type == '知识库上架总量') {
|
||||
contentBox.value[0].num = item.amount
|
||||
} else {
|
||||
contentBox.value[1].num = item.amount
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.knowledge-base {
|
||||
width: 1.52rem;
|
||||
height: 4.63rem;
|
||||
background: rgba(0, 108, 188, 0.1);
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid rgba(0, 108, 188, 0.7);
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
.knowledge-top {
|
||||
height: 0.6rem;
|
||||
background: url('~@/assets/capabilityCloud/Knowledge-title.png') no-repeat;
|
||||
text-align: center;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.knowledge-content {
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
width: 1.18rem;
|
||||
height: 1.76rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-image: linear-gradient(#214678, transparent);
|
||||
margin-bottom: 0.2rem;
|
||||
img {
|
||||
margin: 0.27rem 0 0.12rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 0.16rem;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
.num {
|
||||
font-weight: 300;
|
||||
font-size: 0.28rem;
|
||||
color: #1ef6f5;
|
||||
margin-bottom: 0.27rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.knowledge-base:hover {
|
||||
border: 2px solid;
|
||||
animation: turn 5s linear infinite;
|
||||
}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:15:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-19 17:52:04
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="platform-overview">
|
||||
<div class="top"><span class="title">平台概览</span></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="box">
|
||||
<div class="item">
|
||||
<div class="name">平台访问量</div>
|
||||
<div claSS="num">{{ num1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="item">
|
||||
<div class="name">用户量</div>
|
||||
<div claSS="num">{{ num2 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" :key="showKey">
|
||||
<div class="title_echarts">浏览趋势</div>
|
||||
<div class="echarts-box" id="echarts-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import * as moment from 'moment'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { wholeAmount, trafficStatistics } from '@/api/capabilityCloud'
|
||||
const num1 = ref(0)
|
||||
const num2 = ref(0)
|
||||
const showKey = ref(0)
|
||||
wholeAmount().then((res) => {
|
||||
num1.value =
|
||||
res.data.data.filter((val) => val.type == '平台访问量')[0].amount || 0
|
||||
num2.value =
|
||||
res.data.data.filter((val) => val.type == '用户量')[0].amount || 0
|
||||
})
|
||||
// 获取近七天日期
|
||||
const getDate = () => {
|
||||
const date = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
date.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
|
||||
}
|
||||
return date.reverse()
|
||||
}
|
||||
const dateList = getDate()
|
||||
var charts = {
|
||||
unit: '次',
|
||||
names: ['浏览'],
|
||||
lineX: dateList,
|
||||
value: [[]],
|
||||
}
|
||||
var color = ['rgba(23, 255, 243']
|
||||
var lineY = []
|
||||
|
||||
for (var i = 0; i < charts.names.length; i++) {
|
||||
var x = i
|
||||
if (x > color.length - 1) {
|
||||
x = color.length - 1
|
||||
}
|
||||
var data = {
|
||||
name: charts.names[i],
|
||||
type: 'line',
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00b5ff',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#39da78',
|
||||
},
|
||||
]),
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(33, 34, 35, 0.35)',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: color[x] + ', 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
data: charts.value[i],
|
||||
}
|
||||
lineY.push(data)
|
||||
}
|
||||
var option = {
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(17,61,116,0.8)',
|
||||
borderWidth: 0,
|
||||
trigger: 'axis',
|
||||
formatter: function (val) {
|
||||
console.log(val)
|
||||
let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
|
||||
<span>日期 : ${val[0].name}</span>
|
||||
<div style="margin-left: 18px">浏览次数 : ${val[0].value}</div>
|
||||
</div>`
|
||||
return res
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: charts.names,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: 'rgb(0,253,255,0.6)',
|
||||
},
|
||||
right: '4%',
|
||||
},
|
||||
grid: {
|
||||
top: '14%',
|
||||
left: '4%',
|
||||
right: '5%',
|
||||
bottom: '12%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: charts.lineX,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgb(255,255,255,0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: charts.unit,
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: 'rgb(255,255,255,0.5)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(23,255,243,0.3)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255,255,255,0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: lineY,
|
||||
}
|
||||
onMounted(() => {
|
||||
trafficStatistics({
|
||||
startDate: dateList[0],
|
||||
endDate: dateList[dateList.length - 1],
|
||||
}).then((res) => {
|
||||
res.data.data.browseDayList.forEach((val, index) => {
|
||||
charts.value[0].push(val[dateList[index]] + '')
|
||||
})
|
||||
const chart = document.getElementById('echarts-box')
|
||||
if (chart) {
|
||||
const myChart = echarts.init(chart)
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.platform-overview {
|
||||
width: 9.24rem;
|
||||
height: 4.65rem;
|
||||
background: rgba(0, 108, 188, 0.1);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
.top {
|
||||
font-size: 24px;
|
||||
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.2rem;
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.box {
|
||||
width: 1.94rem;
|
||||
height: 1.94rem;
|
||||
background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
animation: turn 10s linear infinite;
|
||||
.item {
|
||||
width: 1.94rem;
|
||||
height: 1.94rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: turn2 10s linear infinite;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.num {
|
||||
font-size: 32px;
|
||||
color: #fdc623;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 6.53rem;
|
||||
height: 3.54rem;
|
||||
position: relative;
|
||||
.title_echarts {
|
||||
font-size: 0.18rem;
|
||||
height: 0.21rem;
|
||||
line-height: 0.18rem;
|
||||
color: #ffffff;
|
||||
background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
|
||||
no-repeat;
|
||||
background-size: 0.7rem 0.08rem;
|
||||
background-position: bottom left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.2rem;
|
||||
}
|
||||
.echarts-box {
|
||||
width: 6.53rem;
|
||||
height: 4.04rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turn {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(270deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes turn2 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(-180deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-270deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
.platform-overview:hover {
|
||||
border: 2px solid;
|
||||
animation: turn3 5s linear infinite;
|
||||
}
|
||||
@keyframes turn3 {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:11:03
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-19 17:57:14
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="capability-cloud">
|
||||
<div class="header"><span class="title">数字资源驾驶舱</span></div>
|
||||
<div class="main">
|
||||
<platform-overview></platform-overview>
|
||||
<application-resources></application-resources>
|
||||
</div>
|
||||
<div class="main">
|
||||
<component-services></component-services>
|
||||
<infrastructure></infrastructure>
|
||||
<data-resources></data-resources>
|
||||
<knowledge-base></knowledge-base>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import PlatformOverview from '@/views/capabilityCloud/components/PlatformOverview.vue'
|
||||
import ApplicationResources from '@/views/capabilityCloud/components/ApplicationResources.vue'
|
||||
import ComponentServices from '@/views/capabilityCloud/components/ComponentServices.vue'
|
||||
import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue'
|
||||
import DataResources from '@/views/capabilityCloud/components/DataResources.vue'
|
||||
import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue'
|
||||
</script>
|
||||
<style lang="less">
|
||||
@font-face {
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'DIN-Bold';
|
||||
src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'ZhiheiJ-W5.ttf';
|
||||
src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
|
||||
}
|
||||
.capability-cloud {
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
.title {
|
||||
font-family: ZhiheiJ-W5;
|
||||
background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
|
||||
font-weight: 600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.num {
|
||||
font-family: DIN-Bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.capability-cloud {
|
||||
height: 10.8rem;
|
||||
background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
& > .header {
|
||||
height: 1.04rem;
|
||||
text-align: center;
|
||||
background: url('~@/assets/capabilityCloud/header.png') no-repeat;
|
||||
font-size: 0.46rem;
|
||||
}
|
||||
& > .main {
|
||||
margin-top: 0.2rem;
|
||||
padding: 0 0.24rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:06:06
|
||||
* @LastEditTime: 2022-06-20 09:59:01
|
||||
* @Description: 算法上架
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -22,7 +22,35 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="vue-box">
|
||||
<algorithm-essential-information
|
||||
<put-on-the-shelf
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:videoList="videoList"
|
||||
:externalField="['算法名称', '算法描述', '共享条件', '共享类型']"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '算法优势'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="sfys"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '应用场景'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="yycj"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '部署与使用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:imgList="imgList"
|
||||
:externalField="['接口服务', '接口请求方式']"
|
||||
:configure="bs"
|
||||
></put-on-the-shelf>
|
||||
<!-- <algorithm-essential-information
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
|
|
@ -37,14 +65,19 @@
|
|||
v-else-if="showView === '应用场景'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
></algorithm-scenarios>
|
||||
<algorithm-deployment-use
|
||||
></algorithm-scenarios> -->
|
||||
<!-- <algorithm-scenarios
|
||||
v-else-if="showView === '应用场景'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
></algorithm-scenarios> -->
|
||||
<!-- <algorithm-deployment-use
|
||||
v-else-if="showView === '部署与使用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:imgList="imgList"
|
||||
></algorithm-deployment-use>
|
||||
></algorithm-deployment-use> -->
|
||||
</div>
|
||||
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
|
||||
<button v-show="showView !== '基本信息'" @click="back()">上一步</button>
|
||||
|
|
@ -57,10 +90,11 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
|
||||
import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
|
||||
import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
|
||||
import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
|
||||
// import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
|
||||
// import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
|
||||
// import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
|
||||
import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
|
||||
// import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCategoryTree } from '@/api/personalCenter'
|
||||
|
|
@ -70,6 +104,94 @@
|
|||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const showView = ref('基本信息')
|
||||
const sfys = ref([
|
||||
{
|
||||
name: '算法优势',
|
||||
list: [
|
||||
{
|
||||
name: '算法优势名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '算法优势描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const yycj = ref([
|
||||
{
|
||||
name: '应用场景',
|
||||
list: [
|
||||
{
|
||||
name: '应用场景名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '应用场景描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '应用场景图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const bs = ref([
|
||||
{
|
||||
name: '计费标准信息',
|
||||
list: [
|
||||
{
|
||||
name: '计费方式',
|
||||
field: 'type',
|
||||
type: 'radio',
|
||||
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '计费标准',
|
||||
field: 'price',
|
||||
type: 'number',
|
||||
company: '元',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '计费标准描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
list: [
|
||||
{
|
||||
name: '问题',
|
||||
field: 'question',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '答复',
|
||||
field: 'answer',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const navList = ref([])
|
||||
const navList2 = ref([])
|
||||
const fileList = ref({})
|
||||
|
|
@ -79,7 +201,13 @@
|
|||
const refData = ref({})
|
||||
const submitFlag = ref(true)
|
||||
const dataFrom = ref({
|
||||
infoList: [],
|
||||
infoList: [
|
||||
{
|
||||
attrType: '组件类型',
|
||||
attrValue: '智能算法',
|
||||
delFlag: 0,
|
||||
},
|
||||
],
|
||||
delFlag: 0,
|
||||
type: '组件服务',
|
||||
deptId: '',
|
||||
|
|
@ -187,7 +315,6 @@
|
|||
}
|
||||
init()
|
||||
mybus.on('chageDataFrom', (obj) => {
|
||||
console.log(obj, dataFrom.value.infoList)
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrType !== obj.attrType
|
||||
)
|
||||
|
|
@ -195,6 +322,7 @@
|
|||
obj.attrValue = ''
|
||||
}
|
||||
dataFrom.value.infoList.push(obj)
|
||||
console.log('数据变更=================》', obj, dataFrom.value.infoList)
|
||||
})
|
||||
mybus.on('chageFileList', (obj) => {
|
||||
fileList.value = obj
|
||||
|
|
@ -208,10 +336,10 @@
|
|||
//datafrom外面数据
|
||||
mybus.on('chageDataFromDwon', (obj) => {
|
||||
switch (obj.attrType) {
|
||||
case '名称':
|
||||
case '算法名称':
|
||||
dataFrom.value.name = obj.attrValue
|
||||
break
|
||||
case '描述':
|
||||
case '算法描述':
|
||||
dataFrom.value.description = obj.attrValue
|
||||
break
|
||||
case '共享条件':
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-15 17:55:02
|
||||
* @LastEditTime: 2022-06-17 19:31:27
|
||||
* @Description: 应用上架
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -22,7 +22,34 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="vue-box">
|
||||
<application-essential-information
|
||||
<put-on-the-shelf
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:videoList="videoList"
|
||||
:imgList="imgList"
|
||||
:externalField="['应用名称', '应用描述']"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '功能介绍'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="gnjs"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '关联组件'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="glzj"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '部署与应用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:externalField="['共享条件', '共享类型']"
|
||||
:configure="bs"
|
||||
></put-on-the-shelf>
|
||||
<!-- <application-essential-information
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
|
|
@ -45,7 +72,7 @@
|
|||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:imgList="imgList"
|
||||
></application-deployment-use>
|
||||
></application-deployment-use> -->
|
||||
</div>
|
||||
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
|
||||
<button v-show="showView !== '基本信息'" @click="back()">上一步</button>
|
||||
|
|
@ -58,10 +85,11 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ApplicationEssentialInformation from '@/views/capacityOnTheShelf/components/ApplicationEssentialInformation.vue'
|
||||
import ApplicationFunctionIntroduction from '@/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue'
|
||||
import ApplicationAssociatedComponents from '@/views/capacityOnTheShelf/components/ApplicationAssociatedComponents.vue'
|
||||
import ApplicationDeploymentUse from '@/views/capacityOnTheShelf/components/ApplicationDeploymentUse.vue'
|
||||
// import ApplicationEssentialInformation from '@/views/capacityOnTheShelf/components/ApplicationEssentialInformation.vue'
|
||||
// import ApplicationFunctionIntroduction from '@/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue'
|
||||
// import ApplicationAssociatedComponents from '@/views/capacityOnTheShelf/components/ApplicationAssociatedComponents.vue'
|
||||
// import ApplicationDeploymentUse from '@/views/capacityOnTheShelf/components/ApplicationDeploymentUse.vue'
|
||||
import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCategoryTree } from '@/api/personalCenter'
|
||||
|
|
@ -85,6 +113,75 @@
|
|||
type: '应用资源',
|
||||
deptId: '',
|
||||
})
|
||||
const gnjs = ref([
|
||||
{
|
||||
name: '功能介绍',
|
||||
list: [
|
||||
{
|
||||
name: '功能名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '功能描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '功能图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const glzj = ref([
|
||||
{
|
||||
name: '关联组件',
|
||||
list: [
|
||||
{
|
||||
name: '关联组件名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '关联组件描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '关联组件地址',
|
||||
field: 'url',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const bs = ref([
|
||||
{
|
||||
name: '常见问题',
|
||||
list: [
|
||||
{
|
||||
name: '问题',
|
||||
field: 'question',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '答复',
|
||||
field: 'answer',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
getUser().then((res) => {
|
||||
dataFrom.value.deptId = res.data.data.deptId
|
||||
})
|
||||
|
|
@ -209,10 +306,10 @@
|
|||
//datafrom外面数据
|
||||
mybus.on('chageDataFromDwon', (obj) => {
|
||||
switch (obj.attrType) {
|
||||
case '名称':
|
||||
case '应用名称':
|
||||
dataFrom.value.name = obj.attrValue
|
||||
break
|
||||
case '描述':
|
||||
case '应用描述':
|
||||
dataFrom.value.description = obj.attrValue
|
||||
break
|
||||
case '共享条件':
|
||||
|
|
|
|||
|
|
@ -0,0 +1,454 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-20 09:35:51
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-21 10:37:49
|
||||
* @Description: 业务组件
|
||||
-->
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="header">能力上架申请</div>
|
||||
<div class="top">
|
||||
<div
|
||||
v-for="(nav, index) in navList"
|
||||
:key="nav"
|
||||
:class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
|
||||
>
|
||||
<span class="bg-box">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</span>
|
||||
<span>{{ nav.name }}</span>
|
||||
<div class="line" v-if="index !== navList.length - 1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vue-box">
|
||||
<put-on-the-shelf
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:videoList="videoList"
|
||||
:externalField="[
|
||||
'组件名称',
|
||||
'组件描述',
|
||||
'共享条件',
|
||||
'共享类型',
|
||||
'部门联系人',
|
||||
'部门联系人电话',
|
||||
]"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '功能介绍'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="gnjs"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '应用场景'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="yycj"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '部署与使用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:fileList2="fileList2"
|
||||
:imgList="imgList"
|
||||
:configure="bs"
|
||||
></put-on-the-shelf>
|
||||
</div>
|
||||
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
|
||||
<button v-show="showView !== '基本信息'" @click="back()">上一步</button>
|
||||
<button v-show="showView === '部署与使用'" @click="preview()">
|
||||
预览
|
||||
</button>
|
||||
<button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
|
||||
<button v-show="showView === '部署与使用'" @click="submit()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCategoryTree } from '@/api/personalCenter'
|
||||
import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
|
||||
import { getUser, getUserInfo } from '@/api/home'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const showView = ref('基本信息')
|
||||
const gnjs = ref([
|
||||
{
|
||||
name: '功能介绍',
|
||||
list: [
|
||||
{
|
||||
name: '功能名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '功能描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '功能图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const yycj = ref([
|
||||
{
|
||||
name: '应用场景',
|
||||
list: [
|
||||
{
|
||||
name: '应用场景名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '应用场景描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '应用场景图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const bs = ref([
|
||||
{
|
||||
name: '计费标准信息',
|
||||
list: [
|
||||
{
|
||||
name: '计费方式',
|
||||
field: 'type',
|
||||
type: 'radio',
|
||||
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '计费标准',
|
||||
field: 'price',
|
||||
type: 'number',
|
||||
company: '元',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '计费标准描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
list: [
|
||||
{
|
||||
name: '问题',
|
||||
field: 'question',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '答复',
|
||||
field: 'answer',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const navList = ref([])
|
||||
const navList2 = ref([])
|
||||
const fileList = ref({})
|
||||
const fileList2 = ref({})
|
||||
const imgList = ref({})
|
||||
const videoList = ref({})
|
||||
const data = ref({})
|
||||
const refData = ref({})
|
||||
const submitFlag = ref(true)
|
||||
const dataFrom = ref({
|
||||
infoList: [
|
||||
{
|
||||
attrType: '组件类型',
|
||||
attrValue: '业务组件',
|
||||
delFlag: 0,
|
||||
},
|
||||
],
|
||||
delFlag: 0,
|
||||
type: '组件服务',
|
||||
deptId: '',
|
||||
})
|
||||
getUser().then((res) => {
|
||||
dataFrom.value.deptId = res.data.data.deptId
|
||||
})
|
||||
const back = () => {
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index > 0) {
|
||||
showView.value = navList2.value[index - 1]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
const next = () => {
|
||||
let i = -1
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index < navList.value.length - 1) {
|
||||
i = index + 1
|
||||
}
|
||||
})
|
||||
if (i !== -1) {
|
||||
showView.value = navList2.value[i]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value, refData.value)
|
||||
}
|
||||
}
|
||||
// 预览
|
||||
const preview = () => {
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
console.log('预览==============>', dataFrom.value)
|
||||
window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
|
||||
const newpage = router.resolve({
|
||||
path: '/details',
|
||||
})
|
||||
window.open(newpage.href, '_blank')
|
||||
}
|
||||
const submit = () => {
|
||||
console.log('提交数据=============>', dataFrom.value)
|
||||
if (submitFlag.value) {
|
||||
submitFlag.value = false
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
shangjiainsert(dataFrom.value).then((res) => {
|
||||
const instanceId = res.data.data
|
||||
dataFrom.value.id = res.data.data
|
||||
getUser().then((res6) => {
|
||||
getUserInfo(res6.data.data.id).then((res2) => {
|
||||
const deptId = res2.data.data.deptId
|
||||
const userId = res2.data.data.id
|
||||
const userName = res2.data.data.realName
|
||||
const params = {
|
||||
instanceId: instanceId,
|
||||
deptId: deptId,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
resourceDTO: [dataFrom.value],
|
||||
}
|
||||
shangjiaapply(params).then((res3) => {
|
||||
console.log('res3', res3)
|
||||
if (res3.data.code == 0) {
|
||||
message.success('上架成功！')
|
||||
submitFlag.value = true
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const init = () => {
|
||||
getCategoryTree().then((res) => {
|
||||
// console.clear()
|
||||
res.data.data = res.data.data
|
||||
.filter((item) => item.name === '组件服务一')[0]
|
||||
.children.filter((item) => item.name === '业务组件')[0]
|
||||
navList.value = []
|
||||
navList2.value = []
|
||||
res.data.data.children.forEach((val) => {
|
||||
console.log(val)
|
||||
navList.value.push({
|
||||
name: val.name,
|
||||
key: val.name,
|
||||
})
|
||||
navList2.value.push(val.name)
|
||||
})
|
||||
data.value = res.data.data.children
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('所有编目结构==============>', res.data.data)
|
||||
})
|
||||
}
|
||||
init()
|
||||
mybus.on('chageDataFrom', (obj) => {
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrType !== obj.attrType
|
||||
)
|
||||
if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
|
||||
obj.attrValue = ''
|
||||
}
|
||||
dataFrom.value.infoList.push(obj)
|
||||
console.log('数据变更=================》', obj, dataFrom.value.infoList)
|
||||
})
|
||||
mybus.on('chageFileList', (obj) => {
|
||||
fileList.value = obj
|
||||
})
|
||||
mybus.on('chageFileList2', (obj) => {
|
||||
fileList2.value = obj
|
||||
})
|
||||
mybus.on('chageImgList', (obj) => {
|
||||
imgList.value = obj
|
||||
})
|
||||
mybus.on('chageVideoList', (obj) => {
|
||||
videoList.value = obj
|
||||
})
|
||||
//datafrom外面数据
|
||||
mybus.on('chageDataFromDwon', (obj) => {
|
||||
switch (obj.attrType) {
|
||||
case '组件名称':
|
||||
dataFrom.value.name = obj.attrValue
|
||||
break
|
||||
case '组件描述':
|
||||
dataFrom.value.description = obj.attrValue
|
||||
break
|
||||
case '共享条件':
|
||||
dataFrom.value.shareCondition = obj.attrValue
|
||||
break
|
||||
case '共享类型':
|
||||
dataFrom.value.shareType = obj.attrValue
|
||||
break
|
||||
case '部门联系人':
|
||||
dataFrom.value.deptContacts = obj.attrValue
|
||||
break
|
||||
case '部门联系人电话':
|
||||
dataFrom.value.deptPhone = obj.attrValue
|
||||
break
|
||||
case '服务接口':
|
||||
dataFrom.value.apiUrl = obj.attrValue
|
||||
break
|
||||
case '接口请求方式':
|
||||
dataFrom.value.apiMethodType = obj.attrValue
|
||||
break
|
||||
}
|
||||
// console.log('dataFrom.value', dataFrom.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('chageDataFrom')
|
||||
mybus.off('chageFileList')
|
||||
mybus.off('chageFileList2')
|
||||
mybus.off('chageImgList')
|
||||
mybus.off('chageDataFromDwon')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
top: 64px;
|
||||
margin: 15px 400px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.vue-box {
|
||||
padding: 0 100px;
|
||||
}
|
||||
.top {
|
||||
margin: 10px 20px 0;
|
||||
padding: 15px 30px;
|
||||
background: #edf4fc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bg-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(214, 214, 214);
|
||||
margin-right: 10px;
|
||||
transition: all 0.3s ease;
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin-left: 10px;
|
||||
width: 130px;
|
||||
height: 1px;
|
||||
background: #999;
|
||||
}
|
||||
}
|
||||
.finish {
|
||||
color: #0087ff;
|
||||
.bg-box {
|
||||
background: #9ccefa;
|
||||
color: #fff;
|
||||
border: 1px solid #9ccefa;
|
||||
span {
|
||||
background: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
background: #0087ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 400px 0;
|
||||
button {
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #0087ff;
|
||||
}
|
||||
button:nth-of-type(1) {
|
||||
color: #0087ff;
|
||||
background: #e1edfa;
|
||||
}
|
||||
button:nth-of-type(2) {
|
||||
background: #01c5dc;
|
||||
}
|
||||
}
|
||||
.first {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,454 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-20 09:35:17
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-21 10:37:45
|
||||
* @Description: 开发组件
|
||||
-->
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="header">能力上架申请</div>
|
||||
<div class="top">
|
||||
<div
|
||||
v-for="(nav, index) in navList"
|
||||
:key="nav"
|
||||
:class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
|
||||
>
|
||||
<span class="bg-box">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</span>
|
||||
<span>{{ nav.name }}</span>
|
||||
<div class="line" v-if="index !== navList.length - 1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vue-box">
|
||||
<put-on-the-shelf
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:videoList="videoList"
|
||||
:externalField="[
|
||||
'组件名称',
|
||||
'组件描述',
|
||||
'共享条件',
|
||||
'共享类型',
|
||||
'部门联系人',
|
||||
'部门联系人电话',
|
||||
]"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '功能介绍'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="gnjs"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '应用场景'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:configure="yycj"
|
||||
></put-on-the-shelf>
|
||||
<put-on-the-shelf
|
||||
v-else-if="showView === '部署与使用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:fileList2="fileList2"
|
||||
:imgList="imgList"
|
||||
:configure="bs"
|
||||
></put-on-the-shelf>
|
||||
</div>
|
||||
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
|
||||
<button v-show="showView !== '基本信息'" @click="back()">上一步</button>
|
||||
<button v-show="showView === '部署与使用'" @click="preview()">
|
||||
预览
|
||||
</button>
|
||||
<button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
|
||||
<button v-show="showView === '部署与使用'" @click="submit()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCategoryTree } from '@/api/personalCenter'
|
||||
import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
|
||||
import { getUser, getUserInfo } from '@/api/home'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const showView = ref('基本信息')
|
||||
const gnjs = ref([
|
||||
{
|
||||
name: '功能介绍',
|
||||
list: [
|
||||
{
|
||||
name: '功能名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '功能描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '功能图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const yycj = ref([
|
||||
{
|
||||
name: '应用场景',
|
||||
list: [
|
||||
{
|
||||
name: '应用场景名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '应用场景描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '应用场景图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const bs = ref([
|
||||
{
|
||||
name: '计费标准信息',
|
||||
list: [
|
||||
{
|
||||
name: '计费方式',
|
||||
field: 'type',
|
||||
type: 'radio',
|
||||
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '计费标准',
|
||||
field: 'price',
|
||||
type: 'number',
|
||||
company: '元',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '计费标准描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
list: [
|
||||
{
|
||||
name: '问题',
|
||||
field: 'question',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
{
|
||||
name: '答复',
|
||||
field: 'answer',
|
||||
type: 'textArea',
|
||||
note1: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const navList = ref([])
|
||||
const navList2 = ref([])
|
||||
const fileList = ref({})
|
||||
const fileList2 = ref({})
|
||||
const imgList = ref({})
|
||||
const videoList = ref({})
|
||||
const data = ref({})
|
||||
const refData = ref({})
|
||||
const submitFlag = ref(true)
|
||||
const dataFrom = ref({
|
||||
infoList: [
|
||||
{
|
||||
attrType: '组件类型',
|
||||
attrValue: '开发组件',
|
||||
delFlag: 0,
|
||||
},
|
||||
],
|
||||
delFlag: 0,
|
||||
type: '组件服务',
|
||||
deptId: '',
|
||||
})
|
||||
getUser().then((res) => {
|
||||
dataFrom.value.deptId = res.data.data.deptId
|
||||
})
|
||||
const back = () => {
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index > 0) {
|
||||
showView.value = navList2.value[index - 1]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
const next = () => {
|
||||
let i = -1
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index < navList.value.length - 1) {
|
||||
i = index + 1
|
||||
}
|
||||
})
|
||||
if (i !== -1) {
|
||||
showView.value = navList2.value[i]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value, refData.value)
|
||||
}
|
||||
}
|
||||
// 预览
|
||||
const preview = () => {
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
console.log('预览==============>', dataFrom.value)
|
||||
window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
|
||||
const newpage = router.resolve({
|
||||
path: '/details',
|
||||
})
|
||||
window.open(newpage.href, '_blank')
|
||||
}
|
||||
const submit = () => {
|
||||
console.log('提交数据=============>', dataFrom.value)
|
||||
if (submitFlag.value) {
|
||||
submitFlag.value = false
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
shangjiainsert(dataFrom.value).then((res) => {
|
||||
const instanceId = res.data.data
|
||||
dataFrom.value.id = res.data.data
|
||||
getUser().then((res6) => {
|
||||
getUserInfo(res6.data.data.id).then((res2) => {
|
||||
const deptId = res2.data.data.deptId
|
||||
const userId = res2.data.data.id
|
||||
const userName = res2.data.data.realName
|
||||
const params = {
|
||||
instanceId: instanceId,
|
||||
deptId: deptId,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
resourceDTO: [dataFrom.value],
|
||||
}
|
||||
shangjiaapply(params).then((res3) => {
|
||||
console.log('res3', res3)
|
||||
if (res3.data.code == 0) {
|
||||
message.success('上架成功！')
|
||||
submitFlag.value = true
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const init = () => {
|
||||
getCategoryTree().then((res) => {
|
||||
// console.clear()
|
||||
res.data.data = res.data.data
|
||||
.filter((item) => item.name === '组件服务一')[0]
|
||||
.children.filter((item) => item.name === '开发组件')[0]
|
||||
navList.value = []
|
||||
navList2.value = []
|
||||
res.data.data.children.forEach((val) => {
|
||||
console.log(val)
|
||||
navList.value.push({
|
||||
name: val.name,
|
||||
key: val.name,
|
||||
})
|
||||
navList2.value.push(val.name)
|
||||
})
|
||||
data.value = res.data.data.children
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('所有编目结构==============>', res.data.data)
|
||||
})
|
||||
}
|
||||
init()
|
||||
mybus.on('chageDataFrom', (obj) => {
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrType !== obj.attrType
|
||||
)
|
||||
if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
|
||||
obj.attrValue = ''
|
||||
}
|
||||
dataFrom.value.infoList.push(obj)
|
||||
console.log('数据变更=================》', obj, dataFrom.value.infoList)
|
||||
})
|
||||
mybus.on('chageFileList', (obj) => {
|
||||
fileList.value = obj
|
||||
})
|
||||
mybus.on('chageFileList2', (obj) => {
|
||||
fileList2.value = obj
|
||||
})
|
||||
mybus.on('chageImgList', (obj) => {
|
||||
imgList.value = obj
|
||||
})
|
||||
mybus.on('chageVideoList', (obj) => {
|
||||
videoList.value = obj
|
||||
})
|
||||
//datafrom外面数据
|
||||
mybus.on('chageDataFromDwon', (obj) => {
|
||||
switch (obj.attrType) {
|
||||
case '组件名称':
|
||||
dataFrom.value.name = obj.attrValue
|
||||
break
|
||||
case '组件描述':
|
||||
dataFrom.value.description = obj.attrValue
|
||||
break
|
||||
case '共享条件':
|
||||
dataFrom.value.shareCondition = obj.attrValue
|
||||
break
|
||||
case '共享类型':
|
||||
dataFrom.value.shareType = obj.attrValue
|
||||
break
|
||||
case '部门联系人':
|
||||
dataFrom.value.deptContacts = obj.attrValue
|
||||
break
|
||||
case '部门联系人电话':
|
||||
dataFrom.value.deptPhone = obj.attrValue
|
||||
break
|
||||
case '服务接口':
|
||||
dataFrom.value.apiUrl = obj.attrValue
|
||||
break
|
||||
case '接口请求方式':
|
||||
dataFrom.value.apiMethodType = obj.attrValue
|
||||
break
|
||||
}
|
||||
// console.log('dataFrom.value', dataFrom.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('chageDataFrom')
|
||||
mybus.off('chageFileList')
|
||||
mybus.off('chageFileList2')
|
||||
mybus.off('chageImgList')
|
||||
mybus.off('chageDataFromDwon')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
top: 64px;
|
||||
margin: 15px 400px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.vue-box {
|
||||
padding: 0 100px;
|
||||
}
|
||||
.top {
|
||||
margin: 10px 20px 0;
|
||||
padding: 15px 30px;
|
||||
background: #edf4fc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bg-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(214, 214, 214);
|
||||
margin-right: 10px;
|
||||
transition: all 0.3s ease;
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin-left: 10px;
|
||||
width: 130px;
|
||||
height: 1px;
|
||||
background: #999;
|
||||
}
|
||||
}
|
||||
.finish {
|
||||
color: #0087ff;
|
||||
.bg-box {
|
||||
background: #9ccefa;
|
||||
color: #fff;
|
||||
border: 1px solid #9ccefa;
|
||||
span {
|
||||
background: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
background: #0087ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 400px 0;
|
||||
button {
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #0087ff;
|
||||
}
|
||||
button:nth-of-type(1) {
|
||||
color: #0087ff;
|
||||
background: #e1edfa;
|
||||
}
|
||||
button:nth-of-type(2) {
|
||||
background: #01c5dc;
|
||||
}
|
||||
}
|
||||
.first {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,574 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-17 14:11:08
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 16:40:33
|
||||
* @Description: 上架
|
||||
-->
|
||||
<template>
|
||||
<div class="put-on-the-shelf">
|
||||
<div v-for="title in props.refData.children" :key="title.id">
|
||||
<div class="top">
|
||||
<div></div>
|
||||
<div>{{ title.name }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<template v-if="title.isConfigure">
|
||||
<div class="bottom">
|
||||
<div class="items" v-if="data[title.name].length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(val, index) in data[title.name]"
|
||||
:key="'key1' + val.name + index"
|
||||
>
|
||||
<p>
|
||||
<span>{{ title.name }}-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p
|
||||
v-for="attr in props.configure.filter(
|
||||
(item, index2) => item.name === title.name
|
||||
)[0].list"
|
||||
:key="'key2' + attr.name + index2"
|
||||
>
|
||||
<span>{{ attr.name }}</span>
|
||||
<span v-if="attr.type === 'image'">
|
||||
<a-image :width="85" :height="60" :src="val.img" />
|
||||
</span>
|
||||
<span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del(title.name, index)"></i>
|
||||
<div @click="del(title.name, index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多{{ title.name }}</div>
|
||||
<div
|
||||
class="form"
|
||||
v-for="(val, index) in props.configure.filter(
|
||||
(item) => item.name === title.name
|
||||
)[0].list"
|
||||
:key="'key3' + val.name + index"
|
||||
>
|
||||
<span>{{ val.name }}</span>
|
||||
<a-input
|
||||
v-model:value="val.note1"
|
||||
:maxlength="24"
|
||||
:placeholder="'请填写' + val.name + ',不超过24个字符'"
|
||||
v-if="val.type == 'input'"
|
||||
/>
|
||||
<a-textarea
|
||||
v-model:value="val.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
:placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'textArea'"
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="val.note1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:step="0.01"
|
||||
string-mode
|
||||
:placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'number'"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-model:value="val.note1"
|
||||
:options="val.options"
|
||||
v-else-if="val.type == 'radio'"
|
||||
/>
|
||||
<upload
|
||||
:key="showKey"
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="val"
|
||||
:list="[]"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
v-else-if="val.type == 'image'"
|
||||
></upload>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add(title.name)">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="bottom">
|
||||
<div class="form" v-for="item in title.children" :key="item.id">
|
||||
<span>{{ item.name }}</span>
|
||||
<a-input
|
||||
v-if="item.type == 'input'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if="item.type == 'radio'"
|
||||
v-model:value="item.note1"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-textarea
|
||||
v-else-if="item.type == 'textArea'"
|
||||
v-model:value="item.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<upload
|
||||
v-else-if="item.type == 'image'"
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.imgList"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.type == 'file' && item.name !== '使用手册'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.fileList"
|
||||
tip="支持文件类型，大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.name == '使用手册'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:busType="2"
|
||||
:list="props.fileList2"
|
||||
tip="支持文件类型，大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.type == 'video'"
|
||||
type="视频"
|
||||
btnName="上传视频"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.videoList"
|
||||
tip="支持视频类型，大小不超过100M"
|
||||
></upload>
|
||||
<a-select
|
||||
v-else-if="item.type == 'select'"
|
||||
style="width: 240px"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请选择' + item.name"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(itemSelect, indexSelect) in item.options"
|
||||
:key="indexSelect"
|
||||
:value="itemSelect.dictLabel"
|
||||
>
|
||||
{{ itemSelect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<div
|
||||
v-else-if="item.type == 'checkBox'"
|
||||
class="application-Area"
|
||||
id="application-Area"
|
||||
:key="showKey"
|
||||
>
|
||||
<div
|
||||
v-for="(itemson, indexson) in item.options"
|
||||
:key="indexson"
|
||||
class="application-Area-son"
|
||||
@click="ApplicationArea(item, itemson)"
|
||||
:class="
|
||||
item.note2.indexOf(itemson.dictLabel) != -1
|
||||
? 'application-Area-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemson.dictLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import upload from '@/views/components/upload'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
const props = defineProps({
|
||||
// 展示数据
|
||||
refData: { type: Object, default: null },
|
||||
// 表单数据
|
||||
dataFrom: { type: Array, default: null },
|
||||
// 文件回显
|
||||
fileList: { type: Array, default: null },
|
||||
fileList2: { type: Array, default: null },
|
||||
// 图片回显
|
||||
imgList: { type: Array, default: null },
|
||||
// 视频回显
|
||||
videoList: { type: Array, default: null },
|
||||
// 外部字段
|
||||
externalField: { type: Array, default: null },
|
||||
// 多条的配置
|
||||
configure: { type: Array, default: null },
|
||||
// [{
|
||||
// name:'计费标准信息',
|
||||
// list:[
|
||||
// {
|
||||
// name:'计费方式',
|
||||
// type:'radio',
|
||||
// field:'type',
|
||||
// options:
|
||||
// {
|
||||
// name:'一次性买断',
|
||||
// value:'1'
|
||||
// },
|
||||
// {
|
||||
// name:'按调用次数',
|
||||
// value:'2'
|
||||
// },
|
||||
// {
|
||||
// name:'按并发路数',
|
||||
// value:'3'
|
||||
// },
|
||||
// {
|
||||
// name:'按年计费',
|
||||
// value:'4'
|
||||
// }
|
||||
// ],
|
||||
// note1:''
|
||||
// },
|
||||
// {
|
||||
// name:'计费标准',
|
||||
// field:'price',
|
||||
// type:'number',
|
||||
// company:'元',
|
||||
// note1: ''
|
||||
// },
|
||||
// {
|
||||
// name:'计费标准描述',
|
||||
// field:'desc',
|
||||
// type:'textArea',
|
||||
// note1:''
|
||||
// }
|
||||
// ]
|
||||
// }]
|
||||
})
|
||||
console.log('props==========>', props)
|
||||
const data = ref({
|
||||
list: [],
|
||||
})
|
||||
const showKey = ref(0)
|
||||
props.refData.children.map((item) => {
|
||||
if (
|
||||
props.configure &&
|
||||
props.configure.filter((val) => val.name === item.name).length > 0
|
||||
) {
|
||||
item.isConfigure = true
|
||||
data.value[item.name] = []
|
||||
console.log('item==========>', item, data.value)
|
||||
} else {
|
||||
item.isConfigure = false
|
||||
}
|
||||
})
|
||||
let arr = props.refData.children.filter((item) => {
|
||||
if (props.configure) {
|
||||
if (!item.isConfigure) {
|
||||
return item
|
||||
}
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
})
|
||||
data.value.list = []
|
||||
// 获取字典数据
|
||||
arr.forEach((val) => {
|
||||
val.children.forEach((item) => {
|
||||
if (item.isLinkToDic === 'true' && item.linkValue) {
|
||||
getCategoryTreePage({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dictTypeId: item.linkValue,
|
||||
deFlage: 0,
|
||||
}).then((res) => {
|
||||
if (item.type === 'radio') {
|
||||
item.options = res.data.data.list.map((radio) => radio.dictLabel)
|
||||
} else if (item.type === 'select' || item.type === 'checkBox') {
|
||||
if (item.type === 'checkBox') {
|
||||
if (!item.note2) {
|
||||
item.note2 = []
|
||||
}
|
||||
}
|
||||
item.options = res.data.data.list
|
||||
}
|
||||
data.value.list.push(item)
|
||||
})
|
||||
} else {
|
||||
data.value.list.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
if (props.dataFrom) {
|
||||
console.log(props.dataFrom, data.value.list)
|
||||
props.dataFrom.infoList.forEach((item) => {
|
||||
if (
|
||||
props.configure &&
|
||||
props.configure.filter((val) => val.name === item.attrType).length > 0
|
||||
) {
|
||||
data.value[item.attrType] = JSON.parse(item.attrValue)
|
||||
} else if (item.attrType === '应用领域') {
|
||||
props.refData.children.forEach((val) => {
|
||||
val.children.forEach((child) => {
|
||||
if (child.name === item.attrType) {
|
||||
// 通过;分割成数组
|
||||
child.note2 = item.attrValue.split(';')
|
||||
showKey.value++
|
||||
console.log('应用领域', item, item.attrValue.split(';'), child)
|
||||
}
|
||||
})
|
||||
})
|
||||
// item.note1 = item.attrValue.split(';')
|
||||
}
|
||||
})
|
||||
}
|
||||
const add = (title) => {
|
||||
let list = props.configure.filter((item) => item.name === title)[0].list
|
||||
let flag = true
|
||||
list.forEach((item) => {
|
||||
console.log(item)
|
||||
if (item.type !== 'number' && !item.note1.length > 0) {
|
||||
flag = false
|
||||
} else if (item.type === 'number' && !item.note1 > 0) {
|
||||
flag = false
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
let obj = {}
|
||||
list.forEach((item) => {
|
||||
obj[item.field] = item.note1
|
||||
})
|
||||
data.value[title].push(obj)
|
||||
console.log(data.value[title])
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: title,
|
||||
attrValue: JSON.stringify(data.value[title]),
|
||||
delFlag: 0,
|
||||
})
|
||||
list.forEach((item) => {
|
||||
item.note1 = ''
|
||||
showKey.value++
|
||||
})
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const del = (title, index) => {
|
||||
data.value[title].splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: title,
|
||||
attrValue: JSON.stringify(data.value[title]),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
const ApplicationArea = (item, itemson) => {
|
||||
console.log(item, itemson)
|
||||
if (item.note2.indexOf(itemson.dictLabel) === -1) {
|
||||
item.note2.push(itemson.dictLabel)
|
||||
} else {
|
||||
item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
|
||||
}
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: item.name,
|
||||
attrValue: item.note2.join(';'),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
watch(data.value.list, (newProps, oldProps) => {
|
||||
console.log(newProps, oldProps)
|
||||
newProps.forEach((val) => {
|
||||
console.log('数据发生改变==========>', val)
|
||||
if (
|
||||
props.configure &&
|
||||
props.configure.filter((item) => item.name === val.name).length > 0
|
||||
) {
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
} else if (
|
||||
props.externalField &&
|
||||
props.externalField.indexOf(val.name) > -1
|
||||
) {
|
||||
mybus.emit('chageDataFromDwon', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
} else {
|
||||
if (val.name !== '应用领域') {
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.put-on-the-shelf {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.application-Area {
|
||||
width: 570px;
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-09 15:41:19
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-17 11:15:33
|
||||
* @LastEditTime: 2022-06-20 16:38:35
|
||||
* @Description: 上传组件
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -46,11 +46,12 @@
|
|||
data: { type: Array, default: null },
|
||||
list: { type: Array, default: null },
|
||||
emitFlag: { type: String, default: '' },
|
||||
busType: { type: Number, default: 0 },
|
||||
})
|
||||
console.log('window.SITE_CONFIG.apiURL', window.SITE_CONFIG.apiURL)
|
||||
const apiURL = window.SITE_CONFIG.apiURL
|
||||
const fileList = ref([])
|
||||
if (props.list.length > 0) {
|
||||
if (props.list && props.list.length > 0) {
|
||||
fileList.value = JSON.parse(JSON.stringify(props.list))
|
||||
}
|
||||
const beforeUpload = (file) => {
|
||||
|
|
@ -107,7 +108,13 @@
|
|||
mybus.emit('chageImgList', fileList.value)
|
||||
}
|
||||
} else if (props.type === '文件') {
|
||||
console.log('busType', props.busType)
|
||||
if (props.busType == 2) {
|
||||
console.log('busType', props.busType)
|
||||
mybus.emit('chageFileList2', fileList.value)
|
||||
} else {
|
||||
mybus.emit('chageFileList', fileList.value)
|
||||
}
|
||||
} else if (props.type === '视频') {
|
||||
mybus.emit('chageVideoList', fileList.value)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 10:39:37
|
||||
* @LastEditTime: 2022-06-20 18:58:46
|
||||
* @Description: 算法详情页
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -117,8 +117,8 @@
|
|||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value > domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value < domArr.value[i + 1].offsetTop - 50
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-15 18:10:36
|
||||
* @LastEditTime: 2022-06-20 18:59:18
|
||||
* @Description: 应用详情页
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop-50)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
|
|
@ -109,8 +109,8 @@
|
|||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value > domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value < domArr.value[i + 1].offsetTop - 50
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
<!--
|
||||
* @Author: hisense.gaoyuanwei
|
||||
* @Date: 2022-06-20 10:12:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 18:58:56
|
||||
* @Description: 业务组件详情页
|
||||
-->
|
||||
<template>
|
||||
<div class="business-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<business-top-details :dataList="dataList.data"></business-top-details>
|
||||
<!-- 导航 -->
|
||||
<business-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></business-navigation>
|
||||
<!-- 组件展示 -->
|
||||
<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-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-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>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
|
||||
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
|
||||
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
|
||||
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
|
||||
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
|
||||
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
|
||||
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
|
||||
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 18:59:01
|
||||
* @Description: 开发组件详情页
|
||||
-->
|
||||
<template>
|
||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<developer-top-details :dataList="dataList.data"></developer-top-details>
|
||||
<!-- 导航 -->
|
||||
<developer-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></developer-navigation>
|
||||
<!-- 组件展示 视频 -->
|
||||
<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-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-trial
|
||||
:dataList="dataList.data"
|
||||
id="developer-trial"
|
||||
class="scrollBox"
|
||||
></developer-trial>
|
||||
<!-- 归属部门与服务商-->
|
||||
<developer-owning-department-and-service-provider
|
||||
:dataList="dataList.data"
|
||||
id="department-and-service-provider"
|
||||
class="scrollBox"
|
||||
></developer-owning-department-and-service-provider>
|
||||
<!-- 常见问题-->
|
||||
<developer-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></developer-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
|
||||
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
|
||||
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
|
||||
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
|
||||
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
|
||||
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
|
||||
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
|
||||
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
|
||||
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
document.body.scrollTop = 0
|
||||
mybus.on('flyToView', (id) => {
|
||||
let top = document.querySelector('#' + id).offsetTop - 50
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,9 @@
|
|||
<span class="name">{{ props.dataList.name }}</span>
|
||||
<div class="label-content">
|
||||
<p class="lable-father">
|
||||
<span class="label">{{ props.dataList.type }}</span>
|
||||
<span class="label">
|
||||
{{ componentType || props.dataList.type }}
|
||||
</span>
|
||||
<span class="label">{{ props.dataList.shareType }}</span>
|
||||
<span class="label">{{ props.dataList.shareCondition }}</span>
|
||||
</p>
|
||||
|
|
@ -77,6 +79,7 @@
|
|||
},
|
||||
})
|
||||
}
|
||||
const componentType = ref('')
|
||||
// 收藏
|
||||
const goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
|
|
@ -89,6 +92,12 @@
|
|||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (obj) {
|
||||
componentType.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
|
|
@ -97,6 +106,12 @@
|
|||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (obj) {
|
||||
componentType.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,303 @@
|
|||
<!-- 应用案例 -->
|
||||
<template>
|
||||
<div class="application-scenarios-and-case" v-if="flag">
|
||||
<div
|
||||
class="application-scenarios-and-case-son"
|
||||
v-for="item in dataFrom"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="title">
|
||||
<DetalsTitle
|
||||
:title="item.title"
|
||||
:type="item.englishTitle"
|
||||
></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in item.content"
|
||||
:key="itemSonTitle.title"
|
||||
@click="tabSwitch(itemSonTitle.title, item.title)"
|
||||
class="tab-son"
|
||||
:class="tabIndexClass(indexSonTitle, item.title, item.content)"
|
||||
>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize(item.title) == itemSonTitle.title
|
||||
? 'tab-top-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.title }}
|
||||
</div>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in item.content" :key="itemSonTitle">
|
||||
<div
|
||||
class="content"
|
||||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||
>
|
||||
<div :class="contentLocation(0, item.title)">
|
||||
<div
|
||||
:class="
|
||||
item.title == '应用场景'
|
||||
? 'content-left-scene'
|
||||
: 'content-left-case'
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div :class="contentLocation(1, item.title)">
|
||||
<div
|
||||
:class="
|
||||
item.title == '应用场景'
|
||||
? 'content-right-scene'
|
||||
: 'content-right-case'
|
||||
"
|
||||
>
|
||||
<div class="content-top">{{ itemSonTitle.title }}</div>
|
||||
<div class="content-bottom">{{ itemSonTitle.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
let dataFrom = ref([
|
||||
{
|
||||
title: '应用案例',
|
||||
englishTitle: 'CASE',
|
||||
content: [
|
||||
{
|
||||
title: '应用案例一',
|
||||
content:
|
||||
'应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例二',
|
||||
content:
|
||||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例三',
|
||||
content:
|
||||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例四',
|
||||
content:
|
||||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例五',
|
||||
content:
|
||||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例六',
|
||||
content:
|
||||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const flag = ref(true)
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用案例'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const { log } = console
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class-two'
|
||||
}
|
||||
}
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
let tabindexCase = ref('应用案例一')
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize(title) {
|
||||
if (title == '应用场景') {
|
||||
return tabindex.value
|
||||
} else {
|
||||
return tabindexCase.value
|
||||
}
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name, title) {
|
||||
if (title == '应用场景') {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
} else {
|
||||
tabindexCase.value = name
|
||||
return tabindexCase.value
|
||||
}
|
||||
}
|
||||
//内容位置初始化
|
||||
function contentLocation(index, title) {
|
||||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
text-align: center;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.content-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.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: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
<!-- 应用场景-->
|
||||
<template>
|
||||
<div class="function-intorduction" v-if="flag">
|
||||
<div class="application-scenarios-and-case-son">
|
||||
<!-- {{ dataFrom.attrType }} -->
|
||||
<div class="title">
|
||||
<DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
:height="340"
|
||||
:src="itemSonTitle.img"
|
||||
v-if="itemSonTitle.img"
|
||||
></a-image>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
<!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用场景'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
//滚动条样式
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.function-intorduction {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<!-- 常见问题 -->
|
||||
<div class="cpmmon-problem" v-if="flag">
|
||||
<div class="title">
|
||||
<DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-for="(item, index) in dataFrom" :key="index" class="content-son">
|
||||
<div class="content-top">
|
||||
<div class="top-img"></div>
|
||||
<div>{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div class="bottom-img"></div>
|
||||
<div>{{ item.answer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '常见问题'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpmmon-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 0.8rem;
|
||||
background: #f7f8fa;
|
||||
.content {
|
||||
width: 13rem;
|
||||
margin: 0.2rem 0rem;
|
||||
background: #ffffff;
|
||||
padding: 0.4rem;
|
||||
.content-son {
|
||||
font-size: 0.2rem;
|
||||
margin-bottom: 0.6rem;
|
||||
.content-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 0.2rem;
|
||||
}
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
line-height: 0.34rem;
|
||||
color: #666666;
|
||||
}
|
||||
.content-top,
|
||||
.content-bottom {
|
||||
div:last-child {
|
||||
width: calc(100% - 0.54rem);
|
||||
}
|
||||
}
|
||||
.top-img {
|
||||
width: 0.34rem;
|
||||
height: 0.3rem;
|
||||
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.bottom-img {
|
||||
width: 0.34rem;
|
||||
height: 0.3rem;
|
||||
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
|
||||
ackground-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
.content-son:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
<!--功能介绍-->
|
||||
<template>
|
||||
<div class="function-intorduction" v-if="flag">
|
||||
<div class="application-scenarios-and-case-son">
|
||||
<!-- {{ dataFrom.attrType }} -->
|
||||
<div class="title">
|
||||
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
:height="340"
|
||||
:src="itemSonTitle.img"
|
||||
v-if="itemSonTitle.img"
|
||||
></a-image>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
<!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '功能介绍'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
//滚动条样式
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.function-intorduction {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
text-align: center;
|
||||
.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;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 14:54:01
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-15 18:24:39
|
||||
* @Description: 应用详情页导航
|
||||
-->
|
||||
<template>
|
||||
<div class="business-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'business-usage-mode',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const select = ref('algorithm-display')
|
||||
const list = ref([])
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '功能介绍' ||
|
||||
item.attrType === '应用场景' ||
|
||||
item.attrType === '应用案例'
|
||||
) {
|
||||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => 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.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.business-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 0.24rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 3rem;
|
||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||
position: relative;
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 15:25:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:30:52
|
||||
* @Description: 应用展示 视频播放
|
||||
-->
|
||||
<template>
|
||||
<div class="application-presentation" v-if="flag">
|
||||
<detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
|
||||
<div
|
||||
class="main"
|
||||
:style="`${img}background-position:center;background-size:cover;`"
|
||||
>
|
||||
<!-- <a-image :src="img"></a-image> -->
|
||||
<div class="play" @click="showModal"></div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
height: '4.00rem', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:31:12
|
||||
* @Description: 算法详情页头部
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-top-details">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<span class="name">{{ props.dataList.name }}</span>
|
||||
<div class="label-content">
|
||||
<p class="lable-father">
|
||||
<span class="label">
|
||||
{{ componentType || props.dataList.type }}
|
||||
</span>
|
||||
<span class="label">{{ props.dataList.shareType }}</span>
|
||||
<span class="label">{{ props.dataList.shareCondition }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- <span class="label">免费</span> -->
|
||||
</div>
|
||||
<div class="main">
|
||||
<div>应用领域：{{ businessArea }}</div>
|
||||
<!-- 应用描述 -->
|
||||
<div>
|
||||
{{ props.dataList.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="props.dataList.id">
|
||||
<!-- <a-button type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button type="primary" @click="addShoppingCart()">
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
加入购物车
|
||||
</a-button> -->
|
||||
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import { scInsert } from '@/api/personalCenter'
|
||||
// import { sgcInsert } from '@/api/home'
|
||||
// import { useRouter } from 'vue-router'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
// const router = useRouter()
|
||||
const businessArea = 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 goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
})
|
||||
}
|
||||
const componentType = ref('')
|
||||
if (props.dataList.infoList) {
|
||||
businessArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (obj) {
|
||||
componentType.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
businessArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (obj) {
|
||||
componentType.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-top-details {
|
||||
height: 6rem;
|
||||
padding: 1.8rem 0 0;
|
||||
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.left {
|
||||
max-width: 7.2rem;
|
||||
color: #fff;
|
||||
margin-right: 0.8rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
.name {
|
||||
// max-width: 3.3rem;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.label-content {
|
||||
position: relative;
|
||||
}
|
||||
.lable-father {
|
||||
position: absolute;
|
||||
min-width: 2.5rem;
|
||||
right: -2.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: #ffffff;
|
||||
border-radius: 0.06rem;
|
||||
font-size: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ant-btn-primary {
|
||||
color: #1890ff;
|
||||
}
|
||||
.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/business/business_right_bg.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: -0.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
<template>
|
||||
<!-- 使用方式 -->
|
||||
<div class="usage-mode" v-if="flag">
|
||||
<div class="tltle">
|
||||
<DetalsTitle
|
||||
:title="dataFrom.title"
|
||||
:type="dataFrom.englishTitle"
|
||||
></DetalsTitle>
|
||||
</div>
|
||||
<div class="content" v-for="item in dataFrom.content" :key="item.title">
|
||||
<div class="content-left">
|
||||
<div class="left">
|
||||
<div class="content-left-title">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="content-left-content">
|
||||
<p>
|
||||
<span>{{ item.link.name }}</span>
|
||||
<span>{{ item.linkValue }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div @click="technical()">技术文档</div>
|
||||
<div @click="technicalNew()">新手指引</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-left">
|
||||
<div class="content-right-title">{{ item.contact }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.people.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.people.value }}</template>
|
||||
<span>{{ item.people.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.phone.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.phone.value }}</template>
|
||||
<span>{{ item.phone.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right-right">
|
||||
<div class="content-right-title">{{ item.contact2 }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.people2.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.people2.value }}</template>
|
||||
<span>{{ item.people2.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.phone2.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.phone2.value }}</template>
|
||||
<span>{{ item.phone2.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { pinyin } from 'pinyin-pro'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
let dataFrom = ref({
|
||||
title: '使用方式',
|
||||
englishTitle: 'USAGE',
|
||||
content: [
|
||||
{
|
||||
title: '组件地址',
|
||||
link: {
|
||||
name: '接口地址：',
|
||||
},
|
||||
linkValue: '',
|
||||
contact: '归属部门',
|
||||
facilitator: { name: '归属部门：', value: '讯飞科大' },
|
||||
people: { name: '部门联系人：', value: '李四' },
|
||||
phone: {
|
||||
name: '联系人电话：',
|
||||
value: '12345678901',
|
||||
},
|
||||
contact2: '服务商',
|
||||
facilitator2: { name: '服务商：', value: '科大讯飞' },
|
||||
people2: { name: '服务商联系人：', value: '李四' },
|
||||
phone2: {
|
||||
name: '联系人电话：',
|
||||
value: '1234567890',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '技术文档'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataFrom.value.content[0].link.value = props.dataList.apiUrl
|
||||
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
|
||||
console.log('dataList', props.dataList)
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType === '组件地址') {
|
||||
dataFrom.value.content[0].linkValue = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系人') {
|
||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
dataFrom.value.content[0].link.value = val.apiUrl
|
||||
dataFrom.value.content[0].facilitator.value = val.deptContacts
|
||||
console.log('dataList', val)
|
||||
val.infoList.map((item) => {
|
||||
if (item.attrType === '组件地址') {
|
||||
dataFrom.value.content[0].linkValue = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator.value =
|
||||
item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系人') {
|
||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
function technical() {
|
||||
// 拼接路径
|
||||
const type = pinyin(props.dataList.type, {
|
||||
pattern: 'initial',
|
||||
}).replace(/\s*/g, '')
|
||||
// 打开文档
|
||||
const id = props.dataList.id
|
||||
window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||||
// console.log('dataFrom.value.link', dataFrom.value.link)
|
||||
// window.open(
|
||||
// window.SITE_CONFIG.previewUrl +
|
||||
// 'hisense_office/onlinePreview?url=' +
|
||||
// btoa(encodeURI(dataFrom.value.link))
|
||||
// )
|
||||
}
|
||||
function technicalNew() {
|
||||
// 拼接路径
|
||||
// const type = pinyin(props.dataList.type, {
|
||||
// pattern: 'initial',
|
||||
// }).replace(/\s*/g, '')
|
||||
// // 打开文档
|
||||
// const id = props.dataList.id
|
||||
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||||
console.log('dataFrom.value.link', dataFrom.value.link)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(dataFrom.value.link))
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.usage-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.8rem 0;
|
||||
.content {
|
||||
margin-top: 0.3rem;
|
||||
display: flex;
|
||||
.content-left {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
|
||||
no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 0.1rem;
|
||||
margin-right: 0.6rem;
|
||||
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.35rem;
|
||||
.left {
|
||||
.content-left-title {
|
||||
font-size: 0.26rem;
|
||||
line-height: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
span:first-child {
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
}
|
||||
.content-left-content {
|
||||
width: 4.2rem;
|
||||
font-size: 0.2rem;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
line-height: 0.2rem;
|
||||
p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
div {
|
||||
height: 0.4rem;
|
||||
width: 1.3rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.2rem;
|
||||
color: #526aff;
|
||||
font-size: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
div:first-child {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
|
||||
no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 0.1rem;
|
||||
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 0.3rem;
|
||||
.content-right-left {
|
||||
border-right: 0.01rem solid #707fe0;
|
||||
padding-right: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.content-right-title {
|
||||
font-size: 0.26rem;
|
||||
line-height: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
.content-right-content {
|
||||
display: flex;
|
||||
font-size: 0.18rem;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
line-height: 0.2rem;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
height: 0.2rem;
|
||||
display: -webkit-box;
|
||||
// overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
<!-- 应用案例 -->
|
||||
<template>
|
||||
<div class="application-scenarios-and-case" v-if="flag">
|
||||
<div
|
||||
class="application-scenarios-and-case-son"
|
||||
v-for="item in dataFrom"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="title">
|
||||
<DetalsTitle
|
||||
:title="item.title"
|
||||
:type="item.englishTitle"
|
||||
></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in item.content"
|
||||
:key="itemSonTitle.title"
|
||||
@click="tabSwitch(itemSonTitle.title, item.title)"
|
||||
class="tab-son"
|
||||
:class="tabIndexClass(indexSonTitle, item.title, item.content)"
|
||||
>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize(item.title) == itemSonTitle.title
|
||||
? 'tab-top-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.title }}
|
||||
</div>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in item.content" :key="itemSonTitle">
|
||||
<div
|
||||
class="content"
|
||||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||
>
|
||||
<div :class="contentLocation(0, item.title)">
|
||||
<div
|
||||
:class="
|
||||
item.title == '应用场景'
|
||||
? 'content-left-scene'
|
||||
: 'content-left-case'
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div :class="contentLocation(1, item.title)">
|
||||
<div
|
||||
:class="
|
||||
item.title == '应用场景'
|
||||
? 'content-right-scene'
|
||||
: 'content-right-case'
|
||||
"
|
||||
>
|
||||
<div class="content-top">{{ itemSonTitle.title }}</div>
|
||||
<div class="content-bottom">{{ itemSonTitle.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
let dataFrom = ref([
|
||||
{
|
||||
title: '应用案例',
|
||||
englishTitle: 'CASE',
|
||||
content: [
|
||||
{
|
||||
title: '应用案例一',
|
||||
content:
|
||||
'应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例二',
|
||||
content:
|
||||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例三',
|
||||
content:
|
||||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例四',
|
||||
content:
|
||||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例五',
|
||||
content:
|
||||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例六',
|
||||
content:
|
||||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例七',
|
||||
content:
|
||||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const flag = ref(true)
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用案例'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const { log } = console
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class-two'
|
||||
}
|
||||
}
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
let tabindexCase = ref('应用案例一')
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize(title) {
|
||||
if (title == '应用场景') {
|
||||
return tabindex.value
|
||||
} else {
|
||||
return tabindexCase.value
|
||||
}
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name, title) {
|
||||
if (title == '应用场景') {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
} else {
|
||||
tabindexCase.value = name
|
||||
return tabindexCase.value
|
||||
}
|
||||
}
|
||||
//内容位置初始化
|
||||
function contentLocation(index, title) {
|
||||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 1300px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 1px #e4e6f5 solid;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 100px;
|
||||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
color: #526aff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 430px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 230px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 1300px;
|
||||
height: 340px;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.content-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 340px;
|
||||
width: 635px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 635px 340px;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<!-- 应用场景-->
|
||||
<template>
|
||||
<div class="application-scenarios-and-case" v-if="flag">
|
||||
<div class="application-scenarios-and-case-son">
|
||||
<!-- {{ dataFrom.attrType }} -->
|
||||
<div class="title">
|
||||
<DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-right">
|
||||
<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>
|
||||
</div>
|
||||
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||
<div class="content-right-scene" :class="'content-right-case'">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
debugger
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用场景'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
debugger
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const { log } = console
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class-two'
|
||||
}
|
||||
}
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize() {
|
||||
return tabindex.value
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name) {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
}
|
||||
//内容位置初始化
|
||||
function contentLocation(index, title) {
|
||||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 1300px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 1px #e4e6f5 solid;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 100px;
|
||||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
color: #526aff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 430px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 230px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 1300px;
|
||||
height: 340px;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 620px;
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 340px;
|
||||
width: 635px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 635px 340px;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<!-- 常见问题 -->
|
||||
<div class="cpmmon-problem" v-if="flag">
|
||||
<div class="title">
|
||||
<DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-for="(item, index) in dataFrom" :key="index" class="content-son">
|
||||
<div class="content-top">
|
||||
<div class="top-img"></div>
|
||||
<div>{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div class="bottom-img"></div>
|
||||
<div>{{ item.answer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '常见问题'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpmmon-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 80px;
|
||||
background: #f7f8fa;
|
||||
.content {
|
||||
width: 1300px;
|
||||
margin: 20px 0px;
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
.content-son {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
.content-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
line-height: 34px;
|
||||
color: #666666;
|
||||
}
|
||||
.content-top,
|
||||
.content-bottom {
|
||||
div:last-child {
|
||||
width: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
.top-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bottom-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
|
||||
ackground-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.content-son:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
<!--功能介绍-->
|
||||
<template>
|
||||
<div class="function-intorduction" v-if="flag">
|
||||
<div class="application-scenarios-and-case-son">
|
||||
<!-- {{ dataFrom.attrType }} -->
|
||||
<div class="title">
|
||||
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
:height="340"
|
||||
:src="itemSonTitle.img"
|
||||
v-if="itemSonTitle.img"
|
||||
></a-image>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '功能介绍'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
//滚动条样式
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.function-intorduction {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
text-align: center;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 14:54:01
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-15 18:24:39
|
||||
* @Description: 应用详情页导航
|
||||
-->
|
||||
<template>
|
||||
<div class="application-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'eveloper-presentation',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '组件试用',
|
||||
key: 'developer-trial',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'department-and-service-provider',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const select = ref('algorithm-display')
|
||||
const list = ref([])
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
props.dataList.infoList.map((item) => {
|
||||
debugger
|
||||
if (
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '应用案例' ||
|
||||
item.attrType === '应用场景'
|
||||
) {
|
||||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => 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 = []
|
||||
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.push('组件试用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 0.24rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 3rem;
|
||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||
position: relative;
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<!--使用方式-->
|
||||
<template>
|
||||
<div class="application-deployment-and-security" v-if="flag">
|
||||
<div class="title">
|
||||
<DetalsTitle
|
||||
:title="dataFrom.title"
|
||||
:type="dataFrom.englishTitle"
|
||||
></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-card">
|
||||
<div class="left">
|
||||
<p>{{ dataFrom.linkName }}</p>
|
||||
<a-tooltip>
|
||||
<template #title>{{ dataFrom.link }}</template>
|
||||
<p>{{ dataFrom.link }}</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div @click="technical()">技术文档</div>
|
||||
<div @click="technicaltow()">新手指引</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<div v-for="(item, index) in dataFrom.content" :key="index">
|
||||
<div class="card-title">{{ item.childrenTitle }}</div>
|
||||
<div class="card-content">
|
||||
<div v-for="carditem in item.childrenContent" :key="carditem">
|
||||
<div>
|
||||
<span>{{ carditem.attrType }}：</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ carditem.attrValue }}</template>
|
||||
<span>{{ carditem.attrValue }}</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import { pinyin } from 'pinyin-pro'
|
||||
let flag = ref(true)
|
||||
let dataFrom = ref({
|
||||
title: '使用方式',
|
||||
englishTitle: 'USAGE',
|
||||
linkName: '组件地址',
|
||||
link: '',
|
||||
content: [
|
||||
{
|
||||
childrenTitle: '归属部门',
|
||||
childrenContent: [
|
||||
{
|
||||
attrType: '部门联系人',
|
||||
attrValue: '------',
|
||||
},
|
||||
{
|
||||
attrType: '联系人电话',
|
||||
attrValue: '------',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
childrenTitle: '服务商信息',
|
||||
childrenContent: [
|
||||
{
|
||||
attrType: '服务商联系人',
|
||||
attrValue: '------',
|
||||
},
|
||||
{
|
||||
attrType: '联系人电话',
|
||||
attrValue: '------',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
console.log(dataFrom.value)
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件地址'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
dataFrom.value.content[0].childrenContent[0].attrValue =
|
||||
props.dataList.deptContacts
|
||||
dataFrom.value.content[0].childrenContent[1].attrValue =
|
||||
props.dataList.deptPhone
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType == '组件地址') {
|
||||
dataFrom.value.link = item.attrValue
|
||||
} else if (item.attrType == '服务商联系人') {
|
||||
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||||
item.attrValue
|
||||
} else if (item.attrType == '服务商联系电话') {
|
||||
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||||
item.attrValue
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log('obj', dataFrom.value)
|
||||
//技术文档
|
||||
function technical() {
|
||||
// 拼接路径
|
||||
const type = pinyin(props.dataList.type, {
|
||||
pattern: 'initial',
|
||||
}).replace(/\s*/g, '')
|
||||
// 打开文档
|
||||
const id = props.dataList.id
|
||||
window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||||
// console.log('dataFrom.value.link', dataFrom.value.link)
|
||||
// window.open(
|
||||
// window.SITE_CONFIG.previewUrl +
|
||||
// 'hisense_office/onlinePreview?url=' +
|
||||
// btoa(encodeURI(dataFrom.value.link))
|
||||
// )
|
||||
}
|
||||
function technicaltow() {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '使用手册'
|
||||
)[0]
|
||||
console.log('dataFrom.value.link', obj.attrValue)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(obj.attrValue))
|
||||
)
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '组件地址')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
dataFrom.value.content[0].childrenContent[0].attrValue =
|
||||
props.dataList.deptContacts
|
||||
dataFrom.value.content[0].childrenContent[1].attrValue =
|
||||
props.dataList.deptPhone
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType == '组件地址') {
|
||||
dataFrom.value.link = item.attrValue
|
||||
} else if (item.attrType == '服务商联系人') {
|
||||
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||||
item.attrValue
|
||||
} else if (item.attrType == '服务商联系电话') {
|
||||
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||||
item.attrValue
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application-deployment-and-security {
|
||||
padding: 0.8rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.title {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
width: 13rem;
|
||||
justify-content: space-between;
|
||||
.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;
|
||||
align-items: center;
|
||||
& > div {
|
||||
height: 0.9rem;
|
||||
width: 3.1rem;
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
& > div:first-child {
|
||||
padding-left: 0;
|
||||
border-right: 0.01rem solid #b0b9f1;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 0.26rem;
|
||||
}
|
||||
.card-content {
|
||||
white-space: nowrap;
|
||||
div {
|
||||
display: inline-block;
|
||||
margin-right: 0.2rem;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
font-size: 0.2rem;
|
||||
max-width: 2.8rem;
|
||||
div {
|
||||
max-width: 2.8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
div:first-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-card:first-child {
|
||||
position: relative;
|
||||
.left {
|
||||
border: 0;
|
||||
p:first-child {
|
||||
font-size: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 0.26rem;
|
||||
}
|
||||
p:last-child {
|
||||
font-size: 0.2rem;
|
||||
color: #212956;
|
||||
line-height: 0.26rem;
|
||||
max-width: 4.5rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
top: 50%;
|
||||
width: 1.28rem;
|
||||
margin-top: -0.45rem;
|
||||
cursor: pointer;
|
||||
& > div {
|
||||
width: 1.28rem;
|
||||
height: 0.4rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 0.2rem;
|
||||
color: #526aff;
|
||||
text-align: center;
|
||||
line-height: 0.4rem;
|
||||
}
|
||||
& > div:first-child {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 15:25:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:30:52
|
||||
* @Description: 应用展示 视频播放
|
||||
-->
|
||||
<template>
|
||||
<div class="application-presentation" v-if="flag">
|
||||
<detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
|
||||
<div
|
||||
class="main"
|
||||
:style="`${img}background-position:center;background-size:cover;`"
|
||||
>
|
||||
<div class="play" @click="showModal"></div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
height: '4.00rem', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:31:12
|
||||
* @Description: 开发组件详情页头部
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-top-details">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<span class="name">{{ props.dataList.name }}</span>
|
||||
<div class="label-content">
|
||||
<p class="lable-father">
|
||||
<span class="label">
|
||||
{{ componentType || props.dataList.type }}
|
||||
</span>
|
||||
<span class="label">{{ props.dataList.shareType }}</span>
|
||||
<span class="label">{{ props.dataList.shareCondition }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- <span class="label">免费</span> -->
|
||||
</div>
|
||||
<div class="main">
|
||||
<div>应用领域：{{ applicationArea }}</div>
|
||||
<div>
|
||||
{{ props.dataList.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="props.dataList.id">
|
||||
<!-- <a-button type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button type="primary" @click="addShoppingCart()">
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
加入购物车
|
||||
</a-button> -->
|
||||
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import { scInsert } from '@/api/personalCenter'
|
||||
// import { sgcInsert } from '@/api/home'
|
||||
// import { useRouter } from 'vue-router'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
// 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 goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
})
|
||||
}
|
||||
const componentType = ref('')
|
||||
if (props.dataList.infoList) {
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (obj) {
|
||||
componentType.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (obj) {
|
||||
componentType.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-top-details {
|
||||
height: 6rem;
|
||||
padding: 1.8rem 0 0;
|
||||
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.left {
|
||||
max-width: 7.2rem;
|
||||
color: #fff;
|
||||
margin-right: 0.8rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
.name {
|
||||
// max-width: 3.3rem;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.label-content {
|
||||
position: relative;
|
||||
}
|
||||
.lable-father {
|
||||
position: absolute;
|
||||
min-width: 2.5rem;
|
||||
right: -2.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>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-09 09:29:29
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:21:26
|
||||
* @Description: 组件试用
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-on-trial" v-if="flag">
|
||||
<detals-title title="组件试用" type="PROBATION"></detals-title>
|
||||
<div class="main">
|
||||
<div class="main-left">
|
||||
<p>{{ dataFrom.linkName }}</p>
|
||||
<p>{{ dataFrom.link }}</p>
|
||||
</div>
|
||||
<div class="main-center">
|
||||
<p>{{ dataFrom.numberName }}</p>
|
||||
<p>{{ dataFrom.number }}</p>
|
||||
<div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
|
||||
</div>
|
||||
<div class="main-right">
|
||||
<p>{{ dataFrom.passwordName }}</p>
|
||||
<p>{{ dataFrom.password }}</p>
|
||||
<div @click="copyFunction(dataFrom.password2, '复制密码')">
|
||||
复制密码
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
let flag = ref(true)
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const dataFrom = ref({
|
||||
linkName: '试用地址',
|
||||
link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
|
||||
numberName: '试用账号',
|
||||
number: 'zhangfeihu',
|
||||
passwordName: '试用密码',
|
||||
password: '**************************',
|
||||
password2: '',
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '试用地址'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType == '试用地址') {
|
||||
dataFrom.value.link = item.attrValue
|
||||
} else if (item.attrType == '试用用户名') {
|
||||
dataFrom.value.number = item.attrValue
|
||||
} else if (item.attrType == '试用密码') {
|
||||
dataFrom.value.password2 = item.attrValue
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const onTrial = ref('http://localhost:8080/#/details?id=1522550194535735298')
|
||||
//复制方法
|
||||
const copyFunction = (data, name) => {
|
||||
let url = data
|
||||
let oInput = document.createElement('input')
|
||||
oInput.value = url
|
||||
document.body.appendChild(oInput)
|
||||
oInput.select() // 选择对象;
|
||||
console.log(oInput.value)
|
||||
document.execCommand('Copy') // 执行浏览器复制命令
|
||||
oInput.remove() // 执行浏览器复制命令
|
||||
message.success(name + '成功')
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType == '试用地址') {
|
||||
dataFrom.value.link = item.attrValue
|
||||
} else if (item.attrType == '试用用户名') {
|
||||
dataFrom.value.number = item.attrValue
|
||||
} else if (item.attrType == '试用密码') {
|
||||
dataFrom.value.password2 = item.attrValue
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-on-trial {
|
||||
padding: 0.8rem 0px 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.main {
|
||||
margin-top: 0.3rem;
|
||||
width: 13rem;
|
||||
height: 2.5rem;
|
||||
background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
|
||||
display: grid;
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
align-items: center;
|
||||
.main-left {
|
||||
border-right: 0.01rem #ffffff solid;
|
||||
padding-left: 0.7rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.main-center {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.main-right {
|
||||
padding-right: 0.7rem;
|
||||
}
|
||||
& > div > p:first-child {
|
||||
font-size: 0.26rem;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
& > div > p:nth-child(2) {
|
||||
font-size: 0.22rem;
|
||||
color: #ffffff;
|
||||
line-height: 0.34rem;
|
||||
}
|
||||
& > div:first-child > p:last-child {
|
||||
text-decoration: underline;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
}
|
||||
& > div > div:last-child {
|
||||
height: 0.34rem;
|
||||
width: 1.1rem;
|
||||
border: 0.01rem solid #ffffff;
|
||||
border-radius: 0.06rem;
|
||||
font-size: 0.18rem;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 0.34rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -123,6 +123,7 @@
|
|||
const navList = ref([
|
||||
{ name: '共享门户', key: 'home' },
|
||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
{ name: '能力云图', key: 'capabilityCloud' },
|
||||
{ name: '能力统计', key: 'abilityStatistics' },
|
||||
{ name: '开发指南', key: 'developmentGuide' },
|
||||
{ name: '需求中心', key: 'demandCenter' },
|
||||
|
|
@ -178,6 +179,11 @@
|
|||
},
|
||||
})
|
||||
break
|
||||
case '能力云图':
|
||||
router.push({
|
||||
path: '/capabilityCloud',
|
||||
})
|
||||
break
|
||||
case '开发指南':
|
||||
router.push({
|
||||
path: '/developmentGuide',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-14 09:43:49
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-15 18:19:22
|
||||
* @LastEditTime: 2022-06-20 18:44:52
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -16,7 +16,13 @@
|
|||
<application-details
|
||||
v-else-if="showView === 'application-details'"
|
||||
></application-details>
|
||||
<ability-to-recommend-bottom></ability-to-recommend-bottom>
|
||||
<developer-components
|
||||
v-else-if="showView === 'development-of-component'"
|
||||
></developer-components>
|
||||
<business-details
|
||||
v-else-if="showView === 'business-details'"
|
||||
></business-details>
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -25,9 +31,11 @@
|
|||
import HomeHeader from '@/views/home/components/header'
|
||||
import { defineComponent, reactive, ref } from 'vue'
|
||||
import DetailsView from './components/DetailsView.vue'
|
||||
import AbilityToRecommendBottom from '@/views/home/components/AbilityToRecommendBottom'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
|
||||
import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
|
||||
import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
|
||||
import BusinessDetails from '@/views/detailsAll/BusinessDetails'
|
||||
import { selectOne } from '@/api/home'
|
||||
import { useRouter } from 'vue-router'
|
||||
export default defineComponent({
|
||||
|
|
@ -36,9 +44,11 @@
|
|||
components: {
|
||||
HomeHeader,
|
||||
DetailsView,
|
||||
AbilityToRecommendBottom,
|
||||
HomeFooter,
|
||||
AlgorithmDetails,
|
||||
ApplicationDetails,
|
||||
DeveloperComponents,
|
||||
BusinessDetails,
|
||||
},
|
||||
setup() {
|
||||
const formState = reactive({
|
||||
|
|
@ -78,12 +88,35 @@
|
|||
const router = useRouter()
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
let showView = ref('algorithm-details')
|
||||
let showView = ref('developer-components')
|
||||
const init = () => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
if (res.data.data.type == '组件服务') {
|
||||
let detection = res.data.data.infoList.filter(
|
||||
(item) => item.attrType === '组件类型'
|
||||
)[0]
|
||||
if (detection) {
|
||||
res.data.data.infoList.map((item) => {
|
||||
if (item.attrType == '组件类型') {
|
||||
switch (item.attrValue) {
|
||||
case '智能算法':
|
||||
showView.value = 'algorithm-details'
|
||||
break
|
||||
case '开发组件':
|
||||
showView.value = 'development-of-component'
|
||||
break
|
||||
case '业务组件':
|
||||
showView.value = 'business-details'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
showView.value = 'algorithm-details'
|
||||
}
|
||||
} else {
|
||||
showView.value = 'application-details'
|
||||
}
|
||||
|
|
@ -91,7 +124,30 @@
|
|||
} else if (obj) {
|
||||
console.log('obj============>', obj)
|
||||
if (obj.type == '组件服务') {
|
||||
let detection = obj.infoList.filter(
|
||||
(item) => item.attrType === '组件类型'
|
||||
)[0]
|
||||
if (detection) {
|
||||
obj.infoList.map((item) => {
|
||||
if (item.attrType == '组件类型') {
|
||||
switch (item.attrValue) {
|
||||
case '智能算法':
|
||||
showView.value = 'algorithm-details'
|
||||
break
|
||||
case '开发组件':
|
||||
showView.value = 'development-of-component'
|
||||
break
|
||||
case '业务组件':
|
||||
showView.value = 'business-details'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
showView.value = 'algorithm-details'
|
||||
}
|
||||
} else {
|
||||
showView.value = 'application-details'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,21 @@
|
|||
<!--
|
||||
* @Author: 851673013@qq.com 851673013@qq.com
|
||||
* @Date: 2022-06-16 15:20:52
|
||||
* @LastEditors: 851673013@qq.com 851673013@qq.com
|
||||
* @LastEditTime: 2022-06-16 17:14:56
|
||||
* @FilePath: \qiantai\front\src\views\newHome\components\Footer.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="fotter-son">
|
||||
<div class="top">
|
||||
<div>青岛市大数据发展管理局建设</div>
|
||||
<div>{{ dataList.company.left }}</div>
|
||||
<div class="shuxian"></div>
|
||||
<div>海信网络科技股份有限公司</div>
|
||||
<div>{{ dataList.company.right }}</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<p v-for="item in dataList" :key="item">
|
||||
<p v-for="(item, index) in dataList.address" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</p>
|
||||
|
|
@ -16,21 +24,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
let dataList = reactive([
|
||||
{
|
||||
name: '鲁IC备00000000号',
|
||||
value: '政府标识码3702000106',
|
||||
},
|
||||
{
|
||||
name: '版权所有：青岛市大数据发展管理局',
|
||||
value: '地址：山东省青岛市香港中路17号市级机关办公楼',
|
||||
},
|
||||
{
|
||||
name: '电话：0532-8561234',
|
||||
value: '传真0532-2145122',
|
||||
},
|
||||
])
|
||||
import { ref } from 'vue'
|
||||
// eslint-disable-next-line no-undef
|
||||
console.log('footerDataList', footerDataList)
|
||||
let dataList = ref({})
|
||||
// eslint-disable-next-line no-undef
|
||||
dataList.value = footerDataList
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
|
|
|
|||
|
|
@ -1,65 +1,104 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="work-dyn-detail-content">
|
||||
<home-header></home-header>
|
||||
<div id="work-dyn-list">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<router-link to="/home">门户首页</router-link>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>工作动态</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div id="work-dyn-list" v-loading="loading">
|
||||
<div class="name">{{ item.title }}</div>
|
||||
<div class="time">发布日期：{{ item.createDate }}</div>
|
||||
<a-image
|
||||
width="100"
|
||||
height="100"
|
||||
alt="暂无图片"
|
||||
:src="item.imageUrl"
|
||||
:fallback="imgSrc"
|
||||
/>
|
||||
<div class="detail-main-content">
|
||||
<div v-if="item.note1" class="summary-content">
|
||||
摘要：{{ item.note1 }}
|
||||
</div>
|
||||
<a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
|
||||
<div class="text">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { workdynamicsDetails } from '@/api/home'
|
||||
const router = useRouter()
|
||||
const item = ref({})
|
||||
const loading = ref(true)
|
||||
const imgSrc = ref(require('@/assets/newHome/zw.png'))
|
||||
const id = router.currentRoute.value.query.id
|
||||
workdynamicsDetails(id).then((res) => {
|
||||
console.log('详情=================>', res.data.data)
|
||||
item.value = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#work-dyn-list {
|
||||
.work-dyn-detail-content {
|
||||
.ant-breadcrumb {
|
||||
margin: 90px auto 0;
|
||||
padding: 5px 400px;
|
||||
background-color: #f5f8fc;
|
||||
}
|
||||
#work-dyn-list {
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 90px auto 0;
|
||||
// margin: 90px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
padding: 0 400px;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #0558e1;
|
||||
margin-top: 54px;
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 200px;
|
||||
margin-top: 10px;
|
||||
.time {
|
||||
text-align: center;
|
||||
margin: 10px 0 24px;
|
||||
}
|
||||
.text {
|
||||
width: 1000px;
|
||||
margin-top: 20px;
|
||||
.detail-main-content {
|
||||
border-top: 1px solid #c6c6c6;
|
||||
padding-top: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: #212121;
|
||||
.summary-content {
|
||||
word-wrap: break-word;
|
||||
text-indent: 32px;
|
||||
}
|
||||
.time {
|
||||
margin-left: 70%;
|
||||
:deep(.ant-image) {
|
||||
text-align: center;
|
||||
margin: 16px 0;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.ant-image-img {
|
||||
max-width: 900px;
|
||||
max-height: 590px;
|
||||
}
|
||||
}
|
||||
// :deep(.ant-image-img) {
|
||||
// width: 200px;
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
.text {
|
||||
word-wrap: break-word;
|
||||
text-indent: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue