From cfb0aa3d4fef813da65b7afdd64880304d2842ec Mon Sep 17 00:00:00 2001
From: Administrator <123456>
Date: Wed, 4 Aug 2021 08:04:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=B1=E6=80=9D=E7=A6=B9=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=EF=BC=9A=E6=8F=90=E4=BA=A4=E6=A8=A1=E5=9D=97=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../moduleAndLayout/ModuleAndLaySetting.vue   |  13 ++
 .../moduleAndLayout/ModuleMain.vue            | 163 ++++++++++++++++--
 .../moduleAndLaySettingConfig.js              |   4 +-
 3 files changed, 166 insertions(+), 14 deletions(-)
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleAndLaySetting.vue

diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleAndLaySetting.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleAndLaySetting.vue
new file mode 100644
index 0000000..a55dfef
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleAndLaySetting.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>111111</div>
+</template>
+
+<script>
+    export default {
+        name: "ModuleAndLaySetting"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleMain.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleMain.vue
index da5d746..f813f9e 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleMain.vue
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleMain.vue
@@ -1,40 +1,145 @@
 <template>
     <div class="module-main-style">
-        <template v-if="module-style && moduleDataList.length > 0">
+        <template v-if="moduleDataList && moduleDataList.length > 0">
             <div v-for="moduleType in moduleDataList" :key="moduleType.module_type_id" class="module-type-class">
                 <a-divider class="divider-style">
                    ● <span class="type-name-style">{{moduleType.module_type_name}}</span> ●
                 </a-divider>
-                <draggable :value="moduleType.module_list" class="clearfix module-draggable-style">
-<!--                    <div v-for="module,index in moduleType.module_list" :key="module" class="module-style"-->
-<!--                         :style="{width:getWidth(index),margin:">-->
-<!--                    </div>-->
+                <draggable v-model="moduleType.module_list" class="clearfix module-draggable-style" :sort="true" handle=".move">
+                    <div v-for="item,index in moduleType.module_list" :key="item" class="module-style"
+                         :style="{width:getWidth(index),margin:getMarginStyle(moduleType.module_list.length,index)}">
+                        <div class="module-title-style">
+                            <span>{{getModuleName(moduleType.module_type_id,item)}}</span>
+                            <div class="icon-container-style">
+                                <my-icon type="icon-yincang" title="隐藏" class="icon-style"></my-icon>
+                                <my-icon type="icon-tuozhuai" title="按住拖动" class="icon-style move"></my-icon>
+                                <my-icon type="icon-gengduo" title="更多" class="icon-style"></my-icon>
+                            </div>
+                        </div>
+                        <template v-if="getModuleUrl(moduleType.module_type_id,item) !== ''">
+                            <component :is="getCom(moduleType.module_type_id,item)"></component>
+                        </template>
+                        <div v-else class="no-module-tip-style">模块暂未开放，敬请期待！</div>
+                    </div>
                 </draggable>
-            </div>9
+            </div>
         </template>
-        <div class="module-tips-class"></div>
+        <div v-else class="module-tips-class">暂未选择任何模块展示</div>
     </div>
 </template>
 
 <script>
-    import {defaultShowModule} from './moduleAndLaySettingConfig'
+    import {moduleData,defaultShowModule} from './moduleAndLaySettingConfig'
     import {Divider} from 'ant-design-vue'
     import draggable from 'vuedraggable'
     export default {
         name: "ModuleMain",
-        props:["moduleData"],
+        props:{
+            moduleData:{
+                type:Array,
+            },
+            layoutType:{
+                type:Number,
+                default:0
+            }
+        },
         data:function () {
             return{
-                moduleDataList:this.moduleData?this.moduleData:defaultShowModule
+                moduleDataList:this.moduleData?this.moduleData:defaultShowModule,
+                layout:this.layoutType
             }
         },
         components:{
             ADivider:Divider,
             draggable
         },
+        methods:{
+            getCom: function (type_id,item){
+                return () => import(`@/views/superFusionPlatform/mainPlatform/moduleAndLayout/${this.getModuleUrl(type_id,item)}`)
+            },
+            getModuleUrl:function(type_id,item){
+                return (moduleData.filter((type)=>{return type.module_type_id === type_id})[0]).
+                module_list.filter((module)=>{return module.module_id === item})[0].module_url
+            },
+            getModuleName:function(type_id,item){
+                return (moduleData.filter((type)=>{return type.module_type_id === type_id})[0]).
+                module_list.filter((module)=>{return module.module_id === item})[0].module_name
+            },
+            getWidth:function(index){
+                let num = 0;
+                if (this.layout <= 2){
+                    num = index % 3;
+                }else if (this.layout === 3){
+                    num = index % 2;
+                }else{
+                    num = index % 4;
+                }
+
+                switch (num) {
+                    case 0:
+                        if (this.layout <= 1 || this.layout === 4){
+                            return 'calc((100% - 44px) * 0.25)'
+                        }else{
+                            return 'calc((100% - 44px) * 0.5)'
+                        }
+                    case 1:
+                        if (this.layout === 1 || this.layout === 2 || this.layout === 4){
+                            return 'calc((100% - 44px) * 0.25)'
+                        }else{
+                            return 'calc((100% - 44px) * 0.5)'
+                        }
+                    case 2:
+                        if(this.layout === 1){
+                            return 'calc((100% - 44px) * 0.5)'
+                        }else{
+                            return 'calc((100% - 44px) * 0.25)'
+                        }
+                    case 3:
+                        return 'calc((100% - 44px) * 0.25)'
+                }
+            },
+            getMarginStyle:function (length,index) {
+                let margin = "";
+                if ((this.layout <= 2 && index % 3 < 2) || (this.layout === 3 && index % 2 === 0)
+                    || (this.layout === 4 && index % 4 < 3)){
+                    margin = "0 22px";
+                } else{
+                    margin = "0 0"
+                }
+
+                let row = 0
+                if (this.layout <= 2){//3列
+                    row = Math.ceil(length / 3)
+                    if (index < (row-1) * 3){
+                        margin += " 14px 0"
+                    }else{
+                        margin += " 0 0"
+                    }
+
+                }else if(this.layout === 3){//2列
+                    row = Math.ceil(length / 2)
+                    if (index < (row-1) * 2){
+                        margin += " 14px 0"
+                    }else{
+                        margin += " 0 0"
+                    }
+                }else{//4列
+                    row = Math.ceil(length / 4)
+                    if (index < (row-1) * 4){
+                        margin += " 14px 0"
+                    }else{
+                        margin += " 0 0"
+                    }
+                }
+                return margin;
+            }
+        },
         watch:{
             moduleData:function (newData) {
                 this.moduleDataList = newData?newData:defaultShowModule
+            },
+            layoutType:function (newData) {
+                this.layout = newData;
             }
         }
     }
@@ -68,7 +173,41 @@
             .module-draggable-style{
                 .module-style{
                     float: left;
-                    min-height: 5rem;
+                    min-height: 10rem;
+                    background-color: white;
+                    .module-title-style{
+                        display: flex;
+                        width: 100%;
+                        height: 40px;
+                        padding: 0 25px;
+                        align-content: center;
+                        align-items: center;
+                        justify-content: space-between;
+                        font-size: 16px;
+                        color:white;
+                        /*justify-items: space-around;*/
+                        background:linear-gradient(to bottom right,#038aff,#3ea0ff);
+                        background:-moz-linear-gradient(to bottom right,#038aff,#3ea0ff);
+                        background:-webkit-linear-gradient(to bottom right,#038aff,#3ea0ff);
+                        .icon-style{
+                            font-size: 18px;
+                            margin-right: 20px;
+                            cursor: pointer;
+                            &:nth-last-of-type(1){
+                                margin-right: 0;
+                            }
+                        }
+                    }
+                    .no-module-tip-style{
+                        display: flex;
+                        width: 100%;
+                        height:120px;
+                        align-items: center;
+                        align-content: center;
+                        justify-items: center;
+                        justify-content: center;
+                        font-size: 16px;
+                    }
                 }
             }
         }
@@ -77,7 +216,7 @@
             height: 5rem;
             line-height: 5rem;
             text-align: center;
-            font-size: 14px;
+            font-size: 16px;
         }
     }
 </style>
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleAndLaySettingConfig.js b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleAndLaySettingConfig.js
index f8b10ce..24c549b 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleAndLaySettingConfig.js
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleAndLaySettingConfig.js
@@ -77,8 +77,8 @@ export const moduleData=[{
 ]
 
 export const layoutData={
-    layout_one:"3列（1:1:2）",
-    layout_two:"3列（1:2:1）",
+    layout_one:"3列（1:2:1）",
+    layout_two:"3列（1:1:2）",
     layout_three:"3列（2:1:1）",
     layout_four:"2列（2:2）",
     layout_five:"4列（1:1:1:1）",