update：更新

src/components/layout-container/app-scroll-container/app-scroll-container.vue

 <template>
     <div class="app-scroll-container">
-        <div
-            v-if="containerModel.NORTH"
-            :style="containerModel.NORTH.style"
-            class="no-style overflow-auto app-scroll-container__header"
-        >
+        <div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
+            class="no-style overflow-auto app-scroll-container__header">
             <template v-for="name of containerModel.NORTH.name">
                 <slot :name="name"></slot>
             </template>
         </div>
         <div class="app-scroll-container__middle" :style="middleContainerStyle">
-            <div
-                v-if="containerModel.WEST"
-                :style="containerModel.WEST.style"
-                class="no-style overflow-auto app-scroll-container__left"
-            >
+            <div v-if="containerModel.WEST" :style="containerModel.WEST.style"
+                class="no-style overflow-auto app-scroll-container__left">
                 <template v-for="name of containerModel.WEST.name">
                     <slot :name="name"></slot>
                 </template>
             </div>
-            <div
-                v-if="containerModel.CENTER"
-                :style="containerModel.CENTER.style"
-                class="no-style overflow-auto app-scroll-container__center"
-            >
+            <div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
+                class="no-style overflow-auto app-scroll-container__center">
                 <template v-for="name of containerModel.CENTER.name">
                     <slot :name="name"></slot>
                 </template>
             </div>
-            <div
-                v-if="containerModel.EAST"
-                :style="containerModel.EAST.style"
-                class="no-style overflow-auto app-scroll-container__right"
-            >
+            <div v-if="containerModel.EAST" :style="containerModel.EAST.style"
+                class="no-style overflow-auto app-scroll-container__right">
                 <template v-for="name of containerModel.EAST.name">
                     <slot :name="name"></slot>
                 </template>
             </div>
         </div>
-        <div
-            v-if="containerModel.SOUTH"
-            :style="containerModel.SOUTH.style"
-            class="no-style overflow-auto app-scroll-container__bottom"
-        >
+        <div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
+            class="no-style overflow-auto app-scroll-container__bottom">
             <template v-for="name of containerModel.SOUTH.name">
                 <slot :name="name"></slot>
             </template>
@@ -51,6 +36,7 @@
 </template>
 
 <script lang="ts">
+import { Util } from '@/utils';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({})
@@ -100,23 +86,23 @@ export default class AppScrollContainer extends Vue {
      * @memberof AppScrollContainer
      */
     public initScrollContainer() {
-        let minusHeight = 0;
-        let minusWidth = 0;
+        let minusHeight = '';
+        let minusWidth:string = '';
         const curLayoutModelDetails = this.layoutModelDetails[this.name];
         if (curLayoutModelDetails && curLayoutModelDetails.details && curLayoutModelDetails.details.length > 0) {
             curLayoutModelDetails.details.forEach((key: string) => {
-                const { name, layoutWidth, layoutHeight, layoutPos } = this.layoutModelDetails[key];
+                const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];
                 const style = {};
                 if (layoutWidth) {
-                    Object.assign(style, { width: `${layoutWidth}px` });
+                    Object.assign(style, { width: Util.getBoxSize('WIDTH', widthMode, layoutWidth).width });
                     if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
-                        minusWidth += layoutWidth;
+                        minusWidth += ` - ${Util.getBoxSize('WIDTH', widthMode, layoutWidth).width}`;
                     }
                 }
                 if (layoutHeight) {
-                    Object.assign(style, { height: `${layoutHeight}px` });
+                    Object.assign(style, { height: Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height });
                     if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
-                        minusHeight += layoutHeight;
+                        minusHeight += ` - ${Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height}`;
                     }
                 }
                 if (this.containerModel.hasOwnProperty(layoutPos)) {
@@ -127,11 +113,10 @@ export default class AppScrollContainer extends Vue {
                 }
             });
         }
-        this.middleContainerStyle.height = minusHeight ? `calc(100% - ${minusHeight}px)` : '100%';
+        this.middleContainerStyle.height = minusHeight ? `calc(100%${minusHeight})` : '100%';
         if (this.containerModel.CENTER) {
-            this.containerModel.CENTER.style.width = minusWidth ? `calc(100% - ${minusWidth}px)` : '100%';
+            this.containerModel.CENTER.style.width = minusWidth ? `calc(100%${minusWidth})` : '100%';
         }
-        console.log(this.containerModel);
     }
 }
 </script>

src/model/panel-detail/panel-detail.ts

@@ -52,7 +52,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public layout:string = '';
+    public layout: string = '';
 
     /**
      *  布局占位（边缘布局使用）
@@ -60,7 +60,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public layoutPos:string = '';
+    public layoutPos: string = '';
 
     /**
      * 布局高度
@@ -68,7 +68,7 @@
      * @type {number}
      * @memberof PanelDetailModel
      */
-    public layoutHeight:number = 0;
+    public layoutHeight: number = 0;
 
     /**
      * 高度模式
@@ -76,7 +76,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public heightMode:string = '';
+    public heightMode: string = '';
 
     /**
      * 布局宽度
@@ -84,7 +84,7 @@
      * @type {number}
      * @memberof PanelDetailModel
      */
-    public layoutWidth:number = 0;
+    public layoutWidth: number = 0;
 
     /**
      * 宽度模式
@@ -92,7 +92,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public widthMode:string = '';
+    public widthMode: string = '';
 
     /**
      * 下档间隔
@@ -100,7 +100,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public spacingBottom:string = '';
+    public spacingBottom: string = '';
 
     /**
      * 左侧间隔
@@ -108,7 +108,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public spacingLeft:string = '';
+    public spacingLeft: string = '';
 
     /**
      * 右侧间隔
@@ -116,7 +116,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public spacingRight:string = '';
+    public spacingRight: string = '';
 
     /**
      * 顶部间隔
@@ -124,7 +124,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public spacingTop:string = '';
+    public spacingTop: string = '';
 
     /**
      * 自身水平对齐模式
@@ -132,7 +132,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public hAlignSelf:string = '';
+    public hAlignSelf: string = '';
 
     /**
      * 自身垂直对齐模式
@@ -140,7 +140,7 @@
      * @type {string}
      * @memberof PanelDetailModel
      */
-    public vAlignSelf:string = '';
+    public vAlignSelf: string = '';
 
     /**
      * Creates an instance of PanelDetailModel.

src/styles/default.less

@@ -6,6 +6,11 @@
 @import './app-code-list.less';
 @import './var.css';
 
+#app {
+    height: 100vh;
+    width: 100vw;
+}
+
 .ibiz-page-tag .tags-body .tags-container .ivu-tag.tag-is-active .ivu-tag-text {
   color: #1890ff;
 }
@@ -284,6 +289,12 @@
 
 /***    END:多数据视图属性布局    ***/
 
+// 自定义视图布局
+.app-view-layout{
+    width: 100%;
+    height: 100%;
+}
+
 // 看板视图，卡片模式
 // .view-container.appportalview,.view-container.deportalview,.view-container.deportalview9{
 //   >.view-card>.ivu-card-body>.content-container{

src/utils/util/util.ts

@@ -299,7 +299,7 @@ export class Util {
      * @returns {any}
      * @memberof Util
      */
-    public static formatData(arg: any,parent:any, params: any): any {
+    public static formatData(arg: any, parent: any, params: any): any {
         let _data: any = {};
         Object.keys(params).forEach((name: string) => {
             if (!name) {
@@ -309,11 +309,11 @@ export class Util {
             if (value && value.startsWith('%') && value.endsWith('%')) {
                 const key = value.substring(1, value.length - 1);
                 if (arg && arg.hasOwnProperty(key)) {
-                    if(arg[key] !== null && arg[key] !== undefined){
+                    if (arg[key] !== null && arg[key] !== undefined) {
                         value = arg[key];
-                    }else if(parent[key] !== null && parent[key] !== undefined){
+                    } else if (parent[key] !== null && parent[key] !== undefined) {
                         value = parent[key];
-                    }else{
+                    } else {
                         value = null;
                     }
                 } else {
@@ -337,9 +337,9 @@ export class Util {
      * @returns {any}
      * @memberof Util
      */
-    public static computedNavData(data:any,parentContext:any,parentParam:any,params:any):any{
+    public static computedNavData(data: any, parentContext: any, parentParam: any, params: any): any {
         let _data: any = {};
-        if(params && Object.keys(params).length >0){
+        if (params && Object.keys(params).length > 0) {
             Object.keys(params).forEach((name: string) => {
                 if (!name) {
                     return;
@@ -349,9 +349,9 @@ export class Util {
                     const key = value.substring(1, value.length - 1).toLowerCase();
                     if (data && data.hasOwnProperty(key)) {
                         value = data[key];
-                    }else if(parentContext && parentContext[key]){
+                    } else if (parentContext && parentContext[key]) {
                         value = parentContext[key];
-                    }else if(parentParam && parentParam[key]){
+                    } else if (parentParam && parentParam[key]) {
                         value = parentParam[key];
                     } else {
                         value = null;
@@ -372,7 +372,7 @@ export class Util {
      * @returns {string}
      * @memberof Util
      */
-    public static dateFormat(date: any,fmt: string = "YYYY-mm-dd HH:MM:SS"):string {
+    public static dateFormat(date: any, fmt: string = "YYYY-mm-dd HH:MM:SS"): string {
         let ret;
         const opt: any = {
             "Y+": date.getFullYear().toString(),        // 年
@@ -401,7 +401,7 @@ export class Util {
      * @returns {Object}
      * @memberof Util
      */
-    public static deepObjectMerge(FirstOBJ:any, SecondOBJ:any) {
+    public static deepObjectMerge(FirstOBJ: any, SecondOBJ: any) {
         for (var key in SecondOBJ) {
             FirstOBJ[key] = FirstOBJ[key] && FirstOBJ[key].toString() === "[object Object]" ?
                 this.deepObjectMerge(FirstOBJ[key], SecondOBJ[key]) : FirstOBJ[key] = SecondOBJ[key];
@@ -419,7 +419,7 @@ export class Util {
      * @returns {Promise}
      * @memberof Util
      */
-    public static validateItem(property: string, data:any, rules:any) {
+    public static validateItem(property: string, data: any, rules: any) {
         // 1.获取数值和规则
         const value = data[property];
         const rule = rules[property];
@@ -463,4 +463,29 @@ export class Util {
         else
             return null;
     }
+
+    /**
+     * 获取盒子大小（宽高模式针对面板项，按钮等项模型是控制的布局内容的宽高）
+     * @param mode 模式 "WIDTH" | "HEIGHT"
+     * @param style 样式 "FULL"(全部宽度) | "PX"（像素） | "PERCENTAGE"（百分比）
+     * @param value 
+     * @returns 
+     */
+    public static getBoxSize(mode: "WIDTH" | "HEIGHT", style: string, value: number) {
+        if (!mode || !style) {
+            return {};
+        }
+        if (style === "FULL") {
+            return { [mode.toLowerCase()]: "100%" };
+        } else {
+            if (!value) {
+                return {};
+            }
+            else if (style === "PERCENTAGE") {
+                return { [mode.toLowerCase()]: `${value}%` };
+            } else {
+                return { [mode.toLowerCase()]: `${value}px` };
+            }
+        }
+    }
 }
\ No newline at end of file