提交 7f0231ba 编写于 作者: big_hedgehog01's avatar big_hedgehog01

优化首页功能

上级 07e5c9ee
<template>
<a-card
class="box-card"
:bordered="false"
:body-style="{
padding: '0px',
overflow: 'auto',
borderRadius: '4px',
top: element.options.titleRequired ? '50px' : '0',
bottom: '0px',
left: '0px',
right: '0px'
}"
>
<div
v-if="element.options.titleRequired && element.isSwith"
slot="title"
class="box-card-title module"
>
<a-tabs default-active-key="1">
<div slot="tabBarExtraContent">
<router-link v-if="element.options.moreUrl" :to="element.options.moreUrl">
</router-link>
</div>
<a-tab-pane key="1">
<template slot="tab">{{ element.options.title }}</template>
</a-tab-pane>
</a-tabs>
</div>
<div class="box-card-body" v-if="element.type == 'smallPage'" >
<component ref="smallPages" :is="componentFile" @setHeight="setHeight"/>
</div>
</a-card>
</template>
<script>
export default {
props: ['data', 'element'],
name: 'CardContainer',
components: {
},
data () {
const ComponentFile = this.render
return {
componentFile: ComponentFile,
loading: false, // 刷新按钮加载效果
timer: null // 刷新定时器
}
},
mounted () {
const self = this
/* 定时刷新 */
if (this.element.options.titleRequired && this.element.options.refresh > 0) {
const time = this.element.options.refresh * 60 * 1000
this.timer = setInterval(self.loadData, time)
}
},
methods: {
/* 异步加载工作台小页组件 */
render () {
const url = this.element.url
this.componentFile = () => ({
component: import(`@views/${url}`),
error: '',
delay: 100,
timeout: 10000
})
},
setHeight (height) {
this.$emit('setHeight', height)
},
reFreshData () {
this.loadData()
},
/* 刷新工作台小页组件 */
loadData () {
if (this.loading) {
return
}
this.loading = true
if (this.$refs.smallPages) {
if (typeof this.$refs.smallPages.loadData === 'function') {
this.$refs.smallPages.loadData()
}
}
const self = this
setTimeout(() => {
self.loading = false
}, 300)
}
},
beforeDestroy () {
/* 销毁定时器 */
clearInterval(this.timer)
}
}
</script>
<style lang="less" scoped>
.box-card {
position: relative;
::-webkit-scrollbar-thumb {
border-width: 12px 0 0 12px !important;
}
> .ant-card-head::after {
width: 4px;
height: 24px;
transform: perspective(0.5em) rotateY(25deg);
}
.box-card-body {
height: 100%;
}
}
</style>
<template>
<ant-modal
ref="antModalRef"
:visible="open"
:modal-title="formTitle"
:adjustSize="false"
:footer="null"
modalCutHeight="40"
dialogClass="designer-wrapper"
@cancel="cancel"
>
<div slot="content">
<a-layout-content style="height: calc(100vh - 50px);background: #f0f2f5;">
<div id="content" style="height: 100%;">
<grid-layout
ref="gridLayout"
:layout.sync="layout"
:col-num="colNum"
:row-height="1"
:is-draggable="false"
:is-resizable="false"
:vertical-compact="verticalCompact"
:margin="[0, 0]"
:use-css-transforms="true"
style="min-height: calc(100vh - 70px);"
class="content-box">
<grid-item
v-for="(item, index) in layout"
:key="item.i"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
<widget-form-item
:key="item.i"
:element="item"
:index="index"
:data="layout"
:isShowTool="false"
/>
</grid-item>
</grid-layout>
</div>
</a-layout-content>
</div>
</ant-modal>
</template>
<script>
import AntModal from '@/components/pt/dialog/AntModal'
import Split from '@/components/pt/split/Index'
import VueGridLayout from 'vue-grid-layout'
import WidgetFormItem from './WidgetFormItem'
const mouseXY = {
'x': null,
'y': null
}
document.addEventListener('dragover', function (e) {
mouseXY.x = e.clientX
mouseXY.y = e.clientY
}, false)
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
AntModal,
Split,
WidgetFormItem
},
data () {
return {
layout: [],
verticalCompact: true,
open: false,
formTitle: '预览',
colNum: 3, // 栅格数
form: {},
waitLayout: [],
selectWidget: null
}
},
methods: {
/** 修改按钮操作 */
show (row) {
this.open = true
this.$nextTick(() => (
this.$refs.antModalRef.setMaxDiolog()
))
/* getConfigAndPortalList(row.id).then(response => {
this.form = response.data.data
if (this.form.content === null || this.form.content === '') {
this.layout = []
} else {
this.layout = JSON.parse(this.form.content)
}
this.buildWaitLayout(response.data.sysPortletList, this.waitLayout)
}) */
this.form = row
if (this.form.content === null || this.form.content === '') {
this.layout = []
} else {
this.layout = JSON.parse(this.form.content)
}
this.formTitle = this.form.name
},
cancel () {
this.open = false
this.$emit('close')
}
}
}
</script>
<style lang="less">
@import './style/index.less';
</style>
<template>
<div
class="fm-widget-view"
v-if="element && element.key"
:label="element.name"
@click.stop="handleSelectWidget(index)"
>
<template v-if="element.type == 'smallPage'" >
<CardContainer :data="data" :element="element" @setHeight="setHeight"/>
</template>
<div class="fm-widget-view-action" v-if="isShowTool">
<!-- <span title="设置" @click.stop="handleWidgetOpensSet(index)"><a-icon type="setting" /></span>
<span title="拖动小页"> <a-icon type="drag" /></span>
<span title="复制小页" @click.stop="handleWidgetClone(index)"><a-icon type="copy" /></span> -->
<span title="删除小页" @click.stop="handleWidgetDelete(index)"><a-icon type="delete" /></span>
</div>
</div>
</template>
<script>
import CardContainer from './CardContainer'
export default {
props: ['element', 'select', 'index', 'data', 'layout', 'isShowTool', 'acitviteFlag'],
components: {
// FmUpload,
CardContainer
},
data () {
return {
selectWidget: this.select
}
},
methods: {
setHeight (height) {
this.$emit('setHeight', height, this.element)
},
handleSelectWidget (index) {
this.selectWidget = this.data[index]
},
handleWidgetOpensSet () {
this.$emit('handleWidgetOpensSet')
},
handleWidgetDelete (index) {
this.$emit('removeItem', this.element.i)
},
handleWidgetClone (index) {
let cloneData = {
...this.data.list[index],
options: { ...this.data.list[index].options },
key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999),
i: this.data.list.length + ''
}
if (
this.data.list[index].type === 'radio' ||
this.data.list[index].type === 'checkbox' ||
this.data.list[index].type === 'select'
) {
cloneData = {
...cloneData,
options: {
...cloneData.options,
options: cloneData.options.options.map(item => ({ ...item }))
}
}
}
this.data.list.splice(index, 0, cloneData)
this.$nextTick(() => {
this.selectWidget = this.data.list[index + 1]
})
}
},
watch: {
select (val) {
this.selectWidget = val
},
selectWidget: {
handler (val) {
this.$emit('update:select', val)
},
deep: true
}
}
}
</script>
<style lang="less">
.fm-widget-view-action{
position: absolute;
top: 0px;
right: 5px;
height: 20px;
z-index: 9;
.anticon{
cursor: pointer;
display: inline-block;
margin: 0 3px;
padding: 3px;
background: #f2f2f2;
border-radius: 2px;
color:#b5b5b5;
}
}
</style>
<template>
<div class="layout">
<div class="content-box">
<div class="container-center-left">
<ul class="list-ul">
<li v-for="item in waitLayout" :key="item.i">
<div @drag="drag(item)" @dragend="dragend(item)" draggable="true" unselectable="on">{{ item.title }}</div>
</li>
</ul>
</div>
<div class="container-center-right" id="content">
<grid-layout
ref="gridLayout"
:layout.sync="layout"
:col-num="colNum"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="verticalCompact"
:margin="[10, 10]"
:use-css-transforms="true"
class="hoverStyle">
<grid-item
v-for="(item, index) in layout"
:key="item.i"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
style="border: 1px solid #fff; overflow: auto;"
>
<widget-form-item
:key="item.i"
:element="item"
:index="index"
:data="layout"
/>
<span class="remove" @click="removeItem(item.i)">x</span>
</grid-item>
</grid-layout>
</div>
</div>
</div>
</template>
<script>
import VueGridLayout from 'vue-grid-layout'
import AreaChart from '@/views/demo/chart/dashboard-chart.vue'
import WidgetFormItem from './WidgetFormItem'
const waitLayout = [{
'x': 0,
'y': 0,
'w': 6,
'h': 5,
'i': '0',
'title': '小页2',
'key': 'AreaChart2',
'isShowTitle': false,
'name': 'sdf',
'type': 'smallPage',
'url': 'demo/chart/dashboard-chart.vue',
'options': {
'titleRequired': true,
'moreUrl': '',
'refresh': 1
}
},
{
'x': 2,
'y': 0,
'w': 6,
'h': 10,
'i': '1',
'title': '小页3',
'key': 'AreaChart3',
'isShowTitle': false,
'name': 'sdf',
'type': 'smallPage',
'url': 'demo/chart/echartDashBoard.vue',
'options': {
'titleRequired': true,
'moreUrl': '',
'refresh': 1
}
},
{
'x': 4,
'y': 0,
'w': 3,
'h': 15,
'i': '2',
'title': '小页4',
'key': 'AreaChart4',
'isShowTitle': false,
'name': 'sdf',
'type': 'smallPage',
'url': 'demo/chart/histogram-chart.vue',
'options': {
'titleRequired': true,
'moreUrl': '',
'refresh': 1
}
},
{
'x': 6,
'y': 0,
'w': 6,
'h': 5,
'i': '3',
'title': '小页5',
'key': 'AreaChart5',
'isShowTitle': false,
'name': 'sdf',
'type': 'smallPage',
'url': 'demo/chart/line-chart.vue',
'options': {
'titleRequired': true,
'moreUrl': '',
'refresh': 1
}
},
{
'x': 8,
'y': 0,
'w': 6,
'h': 5,
'i': '4',
'title': '小页6',
'key': 'AreaChart6',
'isShowTitle': false,
'name': 'sdf',
'type': 'smallPage',
'url': 'demo/chart/pie-chart.vue',
'options': {
'titleRequired': true,
'moreUrl': '',
'refresh': 1
}
}
]
const mouseXY = {
'x': null,
'y': null
}
const DragPos = {
'x': null,
'y': null,
'w': null,
'h': null,
'i': null,
'title': null,
'key': 'AreaChart'
}
document.addEventListener('dragover', function (e) {
mouseXY.x = e.clientX
mouseXY.y = e.clientY
}, false)
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
AreaChart,
WidgetFormItem
},
data () {
return {
layout: [{
'x': 0,
'y': 0,
'w': 6,
'h': 5,
'i': '0',
'title': '小页1',
'key': 'AreaChart',
'isShowTitle': false,
'name': 'sdf',
'type': 'smallPage',
'url': 'demo/chart/area-chart.vue',
'options': {
'titleRequired': true,
'moreUrl': '',
'refresh': 1
}
}],
verticalCompact: true,
colNum: 12, // 栅格数
waitLayout: waitLayout,
selectWidget: null
}
},
methods: {
drag: function (selectItem, e) {
const parentRect = document.getElementById('content').getBoundingClientRect()
let mouseInGrid = false
if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (
mouseXY.y < parentRect.bottom))) {
mouseInGrid = true
}
if (mouseInGrid === true && (this.layout.findIndex(item => item.i === 'drop')) === -1) {
this.layout.push({
x: (this.layout.length * 2) % (this.colNum || 12),
y: this.layout.length + (this.colNum || 12), // puts it at the bottom
w: selectItem.w,
h: selectItem.h,
i: 'drop'
})
}
const index = this.layout.findIndex(item => item.i === 'drop')
if (index !== -1) {
try {
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display = 'none'
} catch {}
const el = this.$refs.gridLayout.$children[index]
el.dragging = {
'top': mouseXY.y - parentRect.top,
'left': mouseXY.x - parentRect.left
}
const newPos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
if (mouseInGrid === true) {
this.$refs.gridLayout.dragEvent('dragstart', 'drop', newPos.x, newPos.y, selectItem.h, selectItem.w)
DragPos.i = String(index)
DragPos.x = this.layout[index].x
DragPos.y = this.layout[index].y
DragPos.w = selectItem.w
DragPos.h = selectItem.h
DragPos.title = String(selectItem.title)
DragPos.key = String(selectItem.key)
DragPos.isShowTitle = String(selectItem.isShowTitle)
DragPos.name = String(selectItem.name)
DragPos.type = String(selectItem.type)
DragPos.url = String(selectItem.url)
DragPos.options = String(selectItem.options)
}
if (mouseInGrid === false) {
this.$refs.gridLayout.dragEvent('dragend', 'drop', newPos.x, newPos.y, selectItem.h, selectItem.w)
this.layout = this.layout.filter(obj => obj.i !== 'drop')
}
}
},
dragend: function (selectItem, e) {
const parentRect = document.getElementById('content').getBoundingClientRect()
let mouseInGrid = false
if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (
mouseXY.y < parentRect.bottom))) {
mouseInGrid = true
}
if (mouseInGrid === true) {
this.$refs.gridLayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, DragPos.h, DragPos.w)
this.layout = this.layout.filter(obj => obj.i !== 'drop')
// UNCOMMENT below if you want to add a grid-item
this.layout.push({
x: DragPos.x,
y: DragPos.y,
w: DragPos.w,
h: DragPos.h,
i: DragPos.i,
title: DragPos.title,
key: DragPos.key,
isShowTitle: DragPos.isShowTitle,
name: DragPos.name,
type: DragPos.type,
url: DragPos.url,
options: DragPos.options
})
this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x, DragPos.y, DragPos.h, DragPos.w)
try {
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display = 'block'
} catch {}
}
},
removeItem: function (val) {
this.layout = this.layout.filter((item) => item.i !== val)
}
}
}
</script>
<style lang="less">
.layout {
//background: #999;
//height: 500px;
}
.hoverStyle {
border: 1px solid #999;
}
#layout {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.content-box {
width: 100%;
height: 100%;
}
.container-center-left {
width: 200px;
height: 100%;
background: #ffffff;
overflow: auto;
position: absolute;
left: 0;
}
.list-ul {
margin: 0 auto;
list-style: none;
width: 180px;
padding: 10px 0 0;
}
.list-ul li {
float: left;
margin: 5px 0;
display: inline-block;
width: 100%;
}
.list-ul li div {
padding: 6px 10px;
display: inline-block;
width: 100%;
font-size: 14px;
background: #f5f5f5;
}
.container-center-right {
width: 100%;
height: 100%;
}
.container-text {
text-align: center;
font-size: 32px;
color: #585858;
vertical-align: middle;
padding: 50px 0;
}
.droppable-element {
width: 150px;
text-align: center;
background: #fdd;
border: 1px solid black;
margin: 10px 0;
padding: 10px;
}
.remove {
position: absolute;
right: 2px;
top: 0;
cursor: pointer;
}
</style>
/* main .ant-pro-grid-content{
padding:6px;
} */
.content-box {
.vue-grid-item {
padding: 8px;
box-sizing: border-box;
box-shadow: none;
}
}
.designer-wrapper {
.ant-modal-body {
padding: 0;
background: #f0f2f5;
.ant-layout-header {
background: #ffffff;
padding: 0 10px;
box-shadow: 2px 5px 5px rgba(29, 35, 41, 0.05);
z-index: 99;
.logo-text {
font-size: 16px;
color: #ffffff;
padding-right: 50px;
}
.header-tip{
font-size: 12px;
color: #999999;
text-align: center;
}
.btn-group {
text-align: right;
.ant-btn {
margin: 0 5px;
}
}
}
.left-sider {
background: #ffffff;
box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
}
.right-sider {
background: #ffffff;
box-shadow: -8px 2px 8px rgba(29, 35, 41, 0.05);
padding: 10px;
.ant-form-item {
margin-bottom: 10px;
font-size: 12px;
.ant-form-item-label {
padding-bottom: 0;
}
}
}
.sider-toptitle {
font-size: 12px;
color: #666666;
padding: 20px 15px 10px;
}
.side-top-line{
padding: 10px 15px 20px;
border-bottom: 1px solid #e3e4e6;
.ant-select{
font-size: 12px;
}
}
.sider-title {
font-size: 14px;
color: #666666;
font-weight: bold;
padding: 10px 15px 5px;
}
.list-ul {
padding: 0 15px;
list-style: none;
}
.list-ul li {
display: inline-block;
width: 100%;
}
.list-ul li .aside-item {
padding: 7px 40px 7px 10px;
display: inline-block;
width: 170px;
font-size: 12px;
color: #333333;
background: #f4f6fc;
border: 1px solid #f4f6fc;
position: relative;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.list-ul li .aside-item:hover {
color: #3778eb;
background: #f4f6fc;
border: 1px dashed #3778eb;
cursor: pointer;
}
.list-ul li .aside-item:active {
color: #3778eb;
background: #f4f6fc;
border: 1px dashed #3778eb;
cursor: move;
}
.aside-actions{
position: absolute;
right: 3px;
top:8px;
background: #f4f6fc;
i{
margin: 0 1px;
font-size: 16px;
color:#a4a4a4;
}
}
.ant-layout-content {
padding: 8px;
overflow: auto;
.content-box {
/* border: 2px dashed #9e9e9e; */
.vue-grid-item {
box-shadow: none;
// background: red;
}
.fm-widget-view {
height: 100%;
overflow: auto;
}
.fm-widget-view-action {
position: absolute;
height: auto;
z-index: 999;
top: 14px;
right: 10px;
}
.fm-widget-view-action .anticon {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 6px;
border-radius: 2px;
color: #666666;
background:transparent;
font-size: 18px;
margin-right: 8px;
}
.fm-widget-view-action:hover {
.anticon {
color: ;
}
}
.fm-widget-view:hover{
outline: 1px dashed #3778eb;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.fm-widget-view.active {
outline: 1px solid #3778eb;
border: 0 solid #0e94cd;
}
}
}
}
}
.vue-grid-item.vue-grid-placeholder {
background: #2f54eb;
opacity: .1;
}
.vue-grid-item>.vue-resizable-handle {
bottom: 5px;
right: 5px;
}
.layout {
background: #999;
height: 500px;
}
#layout {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.container-center-left {
width: 200px;
height: 100%;
background: #ffffff;
overflow: auto;
position: absolute;
left: 0;
}
.droppable-element {
width: 150px;
text-align: center;
background: #fdd;
border: 1px solid black;
margin: 10px 0;
padding: 10px;
}
.remove {
position: absolute;
right: 2px;
top: 0;
cursor: pointer;
}
.slide-fade-enter-active {
transition: all 0.5s ease;
}
.slide-fade-leave-active {
transition: all 0.5s cubic-bezier(1, 0.5, 0.5, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
\ No newline at end of file
<template>
<div id="content" style="margin: -8px;">
<portal-defined
v-if="showPortalDefined"
ref="portalDefined"
@setPortalConfigs="setPortalConfigs"
@close="showPortalDefined = false" />
<grid-layout
ref="gridLayout"
:layout.sync="layout"
:col-num="colNum"
:row-height="1"
:is-draggable="false"
:is-resizable="false"
:vertical-compact="verticalCompact"
:margin="[0, 0]"
:use-css-transforms="true"
style="min-height: calc(100vh - 130px);"
class="content-box">
<grid-item
v-for="(item, index) in layout"
:key="item.i"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
style="overflow: auto;">
<widget-form-item
:key="item.i"
:element="item"
:index="index"
:data="layout"
@setHeight="setHeight"
:isShowTool="false" />
</grid-item>
</grid-layout>
<common-use/>
<about/>
<to-do/>
</div>
</template>
<script>
import AntModal from '@/components/pt/dialog/AntModal'
import VueGridLayout from 'vue-grid-layout'
import WidgetFormItem from '@/components/pt/portalConfig/WidgetFormItem'
import {
updateDefaultPortalConfig,
delSysPortalConfig
} from '@/api/system/sysPortalConfig'
import PortalDefined from '@/components/pt/portalConfig/PortalDefined'
import {
mapGetters
} from 'vuex'
let portalObj = [] // 记录页面结构
const mouseXY = {
'x': null,
'y': null
}
document.addEventListener('dragover', function (e) {
mouseXY.x = e.clientX
mouseXY.y = e.clientY
}, false)
import CommonUse from './portal/CommonUse.vue'
import ToDo from './portal/ToDo.vue'
import About from './portal/About.vue'
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
AntModal,
WidgetFormItem,
PortalDefined
CommonUse,
ToDo,
About
},
data () {
return {
layout: [],
showPortalDefined: false,
verticalCompact: true,
portalConfigs: null,
open: false,
formTitle: '门户配置',
colNum: 3, // 栅格数
form: {},
selectWidget: null
}
},
computed: {
...mapGetters([
'defaultPortal'
])
},
created () {
this.getDefaultInfo()
},
methods: {
/** 修改按钮操作 */
reloadTab (obj) {
// 通过工作台选择进入需要重新加载工作台布局信息
this.layout = []
this.form = obj
if (this.form.content === null || this.form.content === '') {
this.layout = []
} else {
this.layout = JSON.parse(this.form.content)
}
portalObj = this.layout
if (obj.applicationRange === 'U') {
// 执行后台方法保存默认工作台
updateDefaultPortalConfig(obj).then(response => {})
}
},
setHeight (height, item) {
if (height !== null && height !== '' && height !== 'undefined') {
item.h = height + 16
}
},
designPortal (obj, portalConfigs, type) {
if (type === 'delete') {
// 请求删除操作
var that = this
this.$confirm({
title: '确认删除小页【' + obj.name + '',
onOk () {
return delSysPortalConfig(obj.id)
.then(() => {
that.$message.success(
'删除成功',
3
)
that.open = false
that.portalConfigs.some((item, i) => {
if (item.id === obj.id) {
that.portalConfigs.splice(i, 1)
}
})
})
},
onCancel () {}
})
} else {
this.portalConfigs = portalConfigs
this.showPortalDefined = true
this.$nextTick(() => (
this.$refs.portalDefined.show(obj, 'user')
))
}
},
setPortalConfigs (portalConfig, type) {
// 设计页面回调方法,当添加回调时需要将新添加的小页追加到小页列表
if (type === 'add') {
this.portalConfigs.push(portalConfig)
}
if (type === 'add' || type === 'edit') {
// 添加编辑方法回调需要修改首页显示布局
this.form = portalConfig
this.layout = JSON.parse(this.form.content)
}
if (type === 'delete') {
this.portalConfigs.some((item, i) => {
if (item.id === portalConfig) {
this.portalConfigs.splice(i, 1)
}
})
}
},
getDefaultInfo () {
// 工作台打开时加载用户默认小页
this.layout = []
const data = this.defaultPortal
if (data.content === null || data.content === '') {
this.layout = []
} else {
this.layout = JSON.parse(data.content)
}
portalObj = this.layout
},
loadInfo () {
this.layout = portalObj
},
cancel () {
this.open = false
this.$emit('close')
}
}
}
</script>
<style lang="less" scoped>
@import '../../components/pt/portalConfig/style/index.less';
</style>
<template>
<div class="typical-home" ref="portaletDiv">
<a-row :gutter="[24,24]" class="module-list">
<!-- 待办事项 -->
<a-col :span="24" >
<div class="module-in module-in01 modlule-show" style="height: 260px;">
<a-page-header :ghost="false" title="平台简介">
<template slot="extra">
<a-icon type="more" />
</template>
</a-page-header>
<p>
<a-alert message="免费开源(欢迎star和fork)" type="info" show-icon />
</p>
<p style="text-indent: 30px;">
基于若依-ruoyi-vue项目扩展,前端采用Ant-Design-VUE,代码易读易懂、界面简洁美观,不仅仅是一个后台开发框架,它是一个企业级快速开发解决方案,我们将把UI交互、快速开发能力追求到极致,适配国产数据库,国产中间件,将支持多租户、flowable工作流,移动APP,更多插件正在扩展中
</p>
<p>
当前版本:V3.0(后台与ruoyi定期同步)
</p>
<p>
<a-row :gutter="[24,24]">
<a-col :span="8">
<a-button block style="height: 40px;" type="primary" @click="goTarget('https://gitee.com/big-hedgehog/aidex-sharp')">
访问码云
</a-button>
</a-col>
<a-col :span="8">
<a-button block style="height: 40px;" type="primary" ghost @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')">
访问若依
</a-button>
</a-col>
<a-col :span="8">
<a-button block style="height: 40px;" type="primary" ghost @click="caseDisplay('')">
案例2
</a-button>
</a-col>
</a-row>
</p>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
data () {
},
computed: {
},
created () {
},
methods: {
goTarget (url) {
window.open(url)
}
}
}
</script>
<template style="background:#f5f6fa;">
<div class="typical-home" ref="portaletDiv">
<a-row :gutter="[24,24]" class="module-list">
<a-col :span="8">
<div class="module-in module-in01">
<a-page-header :ghost="false" title="技术选型">
<template slot="extra">
<a-icon type="more" />
</template>
</a-page-header>
<a-row :gutter="[24,24]">
<a-col :span="12">
<div class="technology">
<a-list size="small" :split="false" :data-source="consoleTech">
<a-list-item slot="renderItem" slot-scope="item">
{{ item }}
</a-list-item>
<div slot="header">
后端
</div>
</a-list>
</div>
</a-col>
<a-col :span="12">
<div class="technology">
<a-list size="small" :split="false" :data-source="frontTech" >
<a-list-item slot="renderItem" slot-scope="item" >
{{ item }}
</a-list-item>
<div slot="header">
前端
</div>
</a-list>
</div>s
</a-col>
</a-row>
</div>
</a-col>
<a-col :span="8">
<div class="module-in module-in01 ">
<a-page-header :ghost="false" title="联系我们">
<template slot="extra">
<a-icon type="more" />
</template>
</a-page-header>
<p>
<a-alert message="专业UI设计(5年+)+VUE前端功能开发(3年+)" type="info" show-icon />
</p>
<a-list item-layout="horizontal" :data-source="detaildata" class="list-detail">
<a-list-item class="module-text">
<a-list-item-meta>
<template slot="description">
<span>【1】</span>
<span>接AiDex Sharp系列架构的定制服务</span>
</template>
</a-list-item-meta>
</a-list-item>
<a-list-item class="module-text">
<a-list-item-meta>
<template slot="description">
<span>【2】</span>
<span >接3个月以内工期的vue、springboot、springcloud、app、小程序等软件定制服务</span>
</template>
</a-list-item-meta>
</a-list-item>
<a-list-item class="module-text">
<a-list-item-meta>
<template slot="description">
<span>【3】</span>
<span>UI原型页面设计服务</span>
</template>
</a-list-item-meta>
</a-list-item>
<a-list-item class="module-text">
<a-list-item-meta>
<template slot="description">
<span>【4】</span>
<span>有意向请联系唯一指定QQ:1125373330(皮皮大刺猬)</span>
</template>
</a-list-item-meta>
</a-list-item>
</a-list>
</div>
</a-col>
<!-- 个人信息 -->
<a-col :span="8">
<div class="module-in module-in07" style="height: 370px;">
<a-page-header :ghost="false" title="关于我">
<template slot="extra">
<a-icon type="more" />
</template>
</a-page-header>
<a-row>
<a-col>
<a-col class="name">
<span>皮皮大刺猬</span>
<a-icon type="form" @click="compileshowModal" />
<a-modal v-model="compile" title="Basic Modal" @ok="compilehandleOk" centered>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</a-col>
<a-col>
<span>我的QQ:</span>
<span>1125373330</span>
</a-col>
<a-col>
<span>QQ群:</span>
<span>208511180</span>
</a-col>
<a-col>
<span>我的微信:</span>
<span>big-hebgehog</span>
</a-col>
<a-col>
<span>我的特长:</span>
<span>专业UI设计(5年+)+VUE前端功能开发(3年+)</span>
</a-col>
<a-col>
<span>项目:</span>
<span><a style="color: red;" @click="goTarget('https://gitee.com/big-hedgehog/aidex-sharp')">若依-Adiex Sharp快速开发平台</a></span>
</a-col>
<a-col>
<a-row>
<a-col :span="12">
<div class="QQcode" style="text-align: center;background: #f7f7f7;border: 1px solid #e8e8e8;width: 124px; margin: 0 auto;border-radius: 8px;padding-top: 8px;">
<img src="../images/QQCode.png"style="height:100px">
<p style="margin-bottom: 8px;">QQ</p>
</div>
</a-col>
<a-col :span="12">
<div class="wxcode" style="text-align: center;background: #f7f7f7;border: 1px solid #e8e8e8;width: 124px; margin: 0 auto;border-radius: 8px;padding-top: 8px;">
<img src="../images/wxCode.png" style="height:100px">
<p style="margin-bottom: 8px;">微信</p>
</div>
</a-col>
</a-row>
</a-col>
</a-col>
</a-row>
</div>
</a-col>
</a-row>
<a-row :gutter="[16,16]">
<!-- 顶部列表 -->
<a-col :span="16" class="module-list">
......@@ -153,6 +297,7 @@
</a-col>
<a-col :span="8" class="module-list">
<a-row :gutter="[0,16]">
<!-- 公告 -->
<a-col>
<div class="module-in module-in06">
......@@ -189,48 +334,7 @@
</a-tabs>
</div>
</a-col>
<!-- 个人信息 -->
<a-col>
<div class="module-in module-in07">
<a-page-header :ghost="false" title="个人信息">
<template slot="extra">
<a-icon type="more" />
</template>
</a-page-header>
<a-row type="flex">
<a-col flex="110px">
<a-avatar size="large" icon="user" />
</a-col>
<a-col>
<a-col class="name">
<span>Aidex</span>
<a-icon type="form" @click="compileshowModal" />
<a-modal v-model="compile" title="Basic Modal" @ok="compilehandleOk" centered>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</a-col>
<a-col>
<span>员工编号:</span>
<span>88888888888</span>
</a-col>
<a-col>
<span>组织机构:</span>
<span>Aidex Sharp快速开发平台</span>
</a-col>
<a-col>
<span>所属群组:</span>
<span>Aidex Sharp</span>
</a-col>
<a-col>
<span>所属部门:</span>
<span>市场部</span>
</a-col>
</a-col>
</a-row>
</div>
</a-col>
<!-- 产品热度 -->
<a-col>
<div class="module-in module-in08">
......@@ -288,8 +392,22 @@
</a-row>
</a-col>
</a-row>
</div>
</a-row></div>
</template>
<style type="less" >
body{
.modlule-show{
height: 240px;
.ant-btn-lg {
height: 40px;
padding: 0 15px;
font-size: 16px;
border-radius: 4px;
}
}
}
</style>
<script>
import lineRadar from '@/views/demo/chart/line-chart'
// 顶部列表
......@@ -461,6 +579,24 @@
'组件使用方法',
'组件使用方法'
]
// 后端技术
const consoleTech = [
'SpringBoot',
'Spring Security',
'JWT',
'MyBatis',
'Druid',
'Fastjson'
]
// 前端技术
const frontTech = [
'Vue',
'Vuex',
'Ant-Design-VUE',
'Axios',
'Sass',
'Quill'
]
// 公告
const noticedata = [{
state: '【升级】',
......@@ -633,6 +769,8 @@
projectdata,
apidata,
aiddata,
consoleTech,
frontTech,
noticedata,
dateFormat: 'YYYY-MM-DD',
statisticscolumns,
......@@ -682,6 +820,15 @@
},
modalcallback (key) {
console.log(key)
},
goTarget (href) {
window.open(href, '_blank')
},
caseDisplay (href) {
this.$message.success(
'案例系统正在研发中,敬请期待!',
3
)
}
}
}
......
......@@ -51,9 +51,25 @@
}
}
}
// 待办事项
.module-in01{
height: 370px;
.technology{
padding:0 16px;
background: #f7f9fa;
border-radius: 8px;
.ant-list-split{
.ant-list-item{
display: block;
border: 0!important;
padding:8px 0 ;
}
}
}
.list-totality{
.ant-card-bordered{
border:none;
......@@ -77,6 +93,17 @@
}
}
.list-detail{
.module-text {
height: auto!important;
line-height: 24px!important;
padding:8px 14px!important;
margin: 8px 0;
span:nth-child(2){
white-space: break-spaces!important;
word-wrap: break-word!important;
max-width: 88%!important;
}
}
.ant-list-item{
height: 40px;
line-height: 40px;
......@@ -108,6 +135,7 @@
max-width: 164px;
color: #131415;
}
}
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册