|
|
@@ -0,0 +1,316 @@
|
|
|
+<template>
|
|
|
+ <el-container class="home-container">
|
|
|
+ <el-main class="home-content" :key="gridListState">
|
|
|
+ <el-tabs
|
|
|
+ v-model="currentLayoutIndex"
|
|
|
+ v-if="layoutList && layoutList.length > 0"
|
|
|
+ @tab-click="handleClick"
|
|
|
+ >
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item, index) in layoutList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :style="{height: item.type == 'datav' ? '100%' : 'auto'}"
|
|
|
+ >
|
|
|
+ <div v-if="item.layout.main.layoutCol === 'customPage'">
|
|
|
+ <div class="d-home">
|
|
|
+ <img class="d-img" src="@/assets/img/home-d.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div v-if="item.dataType == 'datav'" class="fullheight">
|
|
|
+ <DatavDesignPreview
|
|
|
+ v-if="currentLayoutIndex == index"
|
|
|
+ ref="datavDesign"
|
|
|
+ :lessWidth="5"
|
|
|
+ :lessHeight="45"
|
|
|
+ :layout="item.layout"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="item.dataType == 'column'&& !isNewlayout" class="fullheight">
|
|
|
+ <template v-if="currentLayoutIndex == index">
|
|
|
+ <el-row
|
|
|
+ v-for="(grid, i) in item.layout.list"
|
|
|
+ :key="i"
|
|
|
+ :gutter="grid.options.gutter"
|
|
|
+ >
|
|
|
+ <div v-if="grid.type == 'grid'">
|
|
|
+ <el-col
|
|
|
+ v-for="(columns, j) in grid.columns"
|
|
|
+ :Key="j"
|
|
|
+ :span="columns.span"
|
|
|
+ >
|
|
|
+ <ht-column
|
|
|
+ v-for="(cl, k) in columns.list"
|
|
|
+ :key="k"
|
|
|
+ :column-alias="cl.alias"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ <div v-if="grid.type == 'tab'">
|
|
|
+ <el-col :span="24">
|
|
|
+ <ht-tabs-column :grid="grid"></ht-tabs-column>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ <div v-if="!grid.type">
|
|
|
+ <el-col :span="24">
|
|
|
+ <ht-column :column-alias="grid.alias" />
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="new-layout__content" v-else>
|
|
|
+ <!--根据layoutList循环，如果有中间部分，则用另一种排版方式，先循环this.newLayout.header，再循环this.mainLayout组成中间部分，最后循环this.newLayout.bottom-->
|
|
|
+ <div class="header-col" v-if="newLayout.header.length > 0">
|
|
|
+ <template v-for="(headerItem, index) in newLayout.header">
|
|
|
+ <ht-column
|
|
|
+ :key="index"
|
|
|
+ :column-alias="headerItem.alias"
|
|
|
+ :fromPreview="true"
|
|
|
+ :columnObj="item.layout.columnStyles"
|
|
|
+ :itemConfigure="headerItem.configure ? headerItem.configure : {}"
|
|
|
+ ></ht-column>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20" class="col-layout layout-row">
|
|
|
+ <el-col
|
|
|
+ v-for="(col, key) in mainLayout"
|
|
|
+ :key="key"
|
|
|
+ :class="key"
|
|
|
+ :span="colSpan(key)"
|
|
|
+ >
|
|
|
+ <template v-for="(colItem, index) in col">
|
|
|
+ <ht-column
|
|
|
+ :key="index"
|
|
|
+ :column-alias="colItem.alias"
|
|
|
+ :fromPreview="true"
|
|
|
+ :columnObj="item.layout.columnStyles"
|
|
|
+ ></ht-column>
|
|
|
+ </template>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="bottom-col" v-if="newLayout.bottom.length > 0">
|
|
|
+ <template v-for="(bottomItem, index) in newLayout.bottom">
|
|
|
+ <ht-column
|
|
|
+ :key="index"
|
|
|
+ :column-alias="bottomItem.alias"
|
|
|
+ :fromPreview="true"
|
|
|
+ :columnObj="item.layout.columnStyles"
|
|
|
+ ></ht-column>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import req from '@/request.js'
|
|
|
+import portal from '@/api/portal.js'
|
|
|
+let Base64 = require('js-base64').Base64
|
|
|
+import HtColumn from '@/components/common/HtColumn.vue'
|
|
|
+import HtTabsColumn from '@/components/common/HtTabsColumn.vue'
|
|
|
+import DatavDesignPreview from '@/components/portal/DatavDesignPreview.vue'
|
|
|
+import WidgetFormBus from '@/components/form/bus/WidgetFormBus.js'
|
|
|
+import TemplateEdit from '../../components/form/customView/TemplateEdit.vue'
|
|
|
+export default {
|
|
|
+ components: {HtColumn, HtTabsColumn, DatavDesignPreview},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ layout: {},
|
|
|
+ dataType: 'column',
|
|
|
+ gridList: [],
|
|
|
+ gridListState: 'init',
|
|
|
+ layoutList: [],
|
|
|
+ currentLayoutIndex: 0,
|
|
|
+ newLayout: {
|
|
|
+ header: [],
|
|
|
+ main: {
|
|
|
+ left: [],
|
|
|
+ center: [],
|
|
|
+ right: []
|
|
|
+ },
|
|
|
+ bottom: []
|
|
|
+ },
|
|
|
+ mainLayout: {
|
|
|
+ left: [],
|
|
|
+ center: [],
|
|
|
+ right: []
|
|
|
+ },
|
|
|
+ spanMap: {
|
|
|
+ two: {
|
|
|
+ left: 16,
|
|
|
+ right: 8
|
|
|
+ },
|
|
|
+ three: {
|
|
|
+ left: 8,
|
|
|
+ center: 8,
|
|
|
+ right: 8
|
|
|
+ },
|
|
|
+ 'equal-two': {
|
|
|
+ left: 12,
|
|
|
+ right: 12
|
|
|
+ },
|
|
|
+ customPage:{
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isNewlayout: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ colSpan() {
|
|
|
+ const layoutCol = this.newLayout.main.layoutCol || 'two'
|
|
|
+ return key => {
|
|
|
+ return this.spanMap[layoutCol][key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //获取用户可切换布局资源
|
|
|
+ WidgetFormBus.$emit('initLayoutList')
|
|
|
+ this.initLayoutList()
|
|
|
+ //获取用户优先级最高的布局
|
|
|
+ // portal.getHomeLayout().then(data => {
|
|
|
+ // let designHtml = data.value.designHtml;
|
|
|
+ // this.dataType = data.value.dataType;
|
|
|
+ // WidgetFormBus.$emit('changeLayout',data.value.id);
|
|
|
+ // this.layout = JSON.parse(Base64.decode(designHtml) || "{}");
|
|
|
+ // if (this.layout && this.layout.list && this.layout.list.length > 0) {
|
|
|
+ // this.gridList = this.layout.list;
|
|
|
+ // }
|
|
|
+ // this.gridListState = 'load';
|
|
|
+ // });
|
|
|
+
|
|
|
+ //监听切换布局
|
|
|
+ WidgetFormBus.$on('switchLayout', obj => {
|
|
|
+ WidgetFormBus.$emit('changeLayout', obj.id)
|
|
|
+ this.dataType = obj.dataType
|
|
|
+ this.layout = JSON.parse(Base64.decode(obj.designHtml) || '{}')
|
|
|
+ if (this.layout && this.layout.list && this.layout.list.length > 0) {
|
|
|
+ this.gridList = this.layout.list
|
|
|
+ }
|
|
|
+ this.gridListState = 'switch'
|
|
|
+ this.cacheUserLayout(obj.type, obj.id)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cacheUserLayout(type, layoutId) {
|
|
|
+ req
|
|
|
+ .post('${portal}/portal/main/v1/cacheUserLayout', {
|
|
|
+ type: type,
|
|
|
+ layoutId: layoutId,
|
|
|
+ layoutType: 0
|
|
|
+ })
|
|
|
+ .then(response => {})
|
|
|
+ },
|
|
|
+ initLayoutList() {
|
|
|
+ let _this = this
|
|
|
+ req
|
|
|
+ .get(
|
|
|
+ '${portal}/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/getCurrentAuthLayout?from=manage'
|
|
|
+ )
|
|
|
+ .then(response => {
|
|
|
+ if (response.data && response.data.length > 0) {
|
|
|
+ response.data.forEach(item => {
|
|
|
+ item.layout = JSON.parse(Base64.decode(item.designHtml) || '{}')
|
|
|
+ })
|
|
|
+ _this.layoutList = response.data
|
|
|
+ _this.layout = response.data[_this.currentLayoutIndex].layout
|
|
|
+ _this.setNewLayoutConfig()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ this.layout = this.layoutList[this.currentLayoutIndex].layout
|
|
|
+ this.setNewLayoutConfig()
|
|
|
+ },
|
|
|
+ setNewLayoutConfig() {
|
|
|
+ if (this.layout.main && Object.keys(this.layout.main).length > 0) {
|
|
|
+ this.isNewlayout = true
|
|
|
+ const {left, center, right} = this.layout.main || {}
|
|
|
+ this.newLayout = this.layout
|
|
|
+ this.mainLayout = {
|
|
|
+ left: left,
|
|
|
+ center: center,
|
|
|
+ right: right
|
|
|
+ }
|
|
|
+ this.layout.main.layoutCol !== 'three' && delete this.mainLayout.center
|
|
|
+ } else {
|
|
|
+ this.gridList = this.layout.list
|
|
|
+ this.isNewlayout = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home-container {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.home-content {
|
|
|
+ padding: 5px;
|
|
|
+ // height: auto;
|
|
|
+ .d-home{
|
|
|
+ .d-img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/ .el-card {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs__content,
|
|
|
+ .el-tabs__content {
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs--border-card > .el-tabs__content {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ /deep/ .el-main {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs__header {
|
|
|
+ margin: 0 0 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-main,
|
|
|
+/deep/.column-body {
|
|
|
+ // 隐藏滚动条
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (max-width: 1152px) {
|
|
|
+ /deep/.flow_item {
|
|
|
+ padding: 0 10px !important;
|
|
|
+ .flow_item__bg {
|
|
|
+ width: 32px !important;
|
|
|
+ height: 32px !important;
|
|
|
+ margin-top: 4px;
|
|
|
+ span {
|
|
|
+ font-size: 22px !important;
|
|
|
+ padding: 6px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flow_item__count {
|
|
|
+ font-size: 14px !important;
|
|
|
+ line-height: 26px !important;
|
|
|
+ }
|
|
|
+ .flow_item__text {
|
|
|
+ zoom: 0.9;
|
|
|
+ line-height: 26px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
qiaohj
