报表布局器

src/style/common.less

@@ -150,4 +150,9 @@ html,body{
     background-color: transparent;
     -webkit-transition: all .5s;
     transition: all .5s;
-}
+}
+ /**固定弹出窗口的高度 */
+ .el-dialog-div{
+    height: 50vh;
+    overflow: auto;
+ }

src/view/bireport/ReportDesign.vue

@@ -274,7 +274,8 @@
 	}
 </script>
 
-<style lang="css">
+<style lang="less">
+@import "../../style/common";
 .icon_kpi {
 	color:#e07900;
 }
@@ -288,12 +289,12 @@
 	z-index:9999;
 	padding:3px;
 	box-shadow:0 2px 3px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.12);
-}
-.vakata-dnd .miconcancel {
-	display:inline-block;
-	width:16px;
-	height:16px;
-	color:#3f36c3;
+	.miconcancel {
+		display:inline-block;
+		width:16px;
+		height:16px;
+		color:#3f36c3;
+	}
 }
 .el-tabs--border-card {
 	box-shadow:none;
@@ -304,11 +305,6 @@
 	right:20px;
 	top:73px;
 }
-/**固定弹出窗口的高度 */
- .el-dialog-div{
-    height: 60vh;
-    overflow: auto;
- }
  .el-tabs--border-card>.el-tabs__content {
 	 padding: 5px;
  }

src/view/portal/Index.vue

@@ -38,6 +38,6 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-	@import "../../style/mixin";
+<style lang="less">
+  @import "../../style/common";
 </style>

src/view/portal/LayoutOptarea.vue

@@ -43,8 +43,8 @@ export default {
           }
         }
          */
-        trs.push(h('tr', {}, tds));
       }
+      trs.push(h('tr', {}, tds));
     }
     let table = h('table', {attrs:{border:"0", cellspacing:"0", cellpadding:"0", class:"r_layout", id:"layout_table"}}, [h('tbody', trs)]);
     return h("div", {attrs:{id:"optarea", class:"layout-center-body", align:"center"}}, [table]);
@@ -63,34 +63,6 @@ export default {
 
 <style lang="less" scoped>
 @import "../../style/mixin";
-#optparam {
-  border: 1px solid #d3d3d3;
-  background-color: #ffffff;
-}
-#optparam span.pppp {
-  background-color: #f6f8f8;
-  border: 1px solid #cacaca;
-  display: inline-block;
-  margin: 4px;
-  padding: 2px;
-  text-align: center;
-  width: 180px;
-  border-radius: 3px;
-}
-#optparam span.text {
-  cursor: pointer;
-  display: inline-block;
-  width: 120px;
-  overflow: hidden;
-  white-space: nowrap;
-  margin-top: 5px;
-}
-#optparam b {
-  color: #555;
-  font-size: 13px;
-  font-weight: normal;
-  margin-left: 5px;
-}
 table.r_layout {
 	border-collapse:collapse;
 	table-layout:fixed;

src/view/portal/PortalIndexCustomiz.vue

@@ -12,15 +12,17 @@
       </el-menu>
       <layout-left :pageInfo="pageInfo"></layout-left>
       <layout-center :pageInfo="pageInfo"></layout-center>
+      <portal-layout :pageInfo="pageInfo" ref="layout"></portal-layout>
   </div> 
 </template>
 <script>
 import layoutLeft from "./LayoutLeft.vue"
 import LayoutCenter from "./LayoutCenter.vue"
+import PortalLayout from "./PortalLayoutDailog.vue"
 
 export default {
   name: "customizer",
-  components: {layoutLeft, LayoutCenter},
+  components: {layoutLeft, LayoutCenter, PortalLayout},
   props: {
 
   },
@@ -37,6 +39,9 @@ export default {
       if(key === 'back'){
         this.$parent.showIndex = true;
       }
+      if(key ==='layout'){
+        this.$refs['layout'].setLayout();
+      }
     }
   },
   watch: {

src/view/portal/PortalLayoutDailog.vue

@@ -0,0 +1,80 @@
+<template>
+    <el-dialog title="设置报表布局" :visible.sync="show" :close-on-click-modal="false" custom-class="nopadding">
+      <div class="el-dialog-div">
+        <el-radio-group v-model="layoutId">
+          <template v-for="l in layouts">
+            <span class="rlayout" :key="l">
+              <div class="onelayout">
+                <img :src="require('../../assets/layout/l'+l+'.png')" @click="selectRadio(l)">
+                <el-radio :label="l"><template v-if="l === 6">自定义</template><template v-if="l !== 6">布局{{l}}</template></el-radio>
+              </div>
+            </span>
+          </template>
+        </el-radio-group>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save()">确 定</el-button>
+        <el-button @click="show = false">取 消</el-button>
+      </div>
+    </el-dialog>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import * as layout from './layout'
+import $ from 'jquery'
+
+export default {
+  components:{
+
+  },
+  props:{
+      pageInfo:{
+        type:Object,
+        required:true
+     }
+  },
+  data(){
+    return {
+        show:false,
+        layouts:[1,2,3,4,5,6],
+        layoutId:1
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+     setLayout(){
+       this.show = true;
+     },
+     selectRadio(l){
+       this.layoutId = l;
+     },
+     save(){
+       let l = this.layoutId;
+       if(l === 6){  //自定义
+
+       }else{
+         let json = layout.layout["l"+l];
+         this.pageInfo.layout = l;
+         this.pageInfo.body = json;
+         this.show = false;
+       }
+     }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+   span.rlayout {
+    display:inline-block;
+    width:100px;
+    height:100px;
+    text-align:center;
+    vertical-align:central;
+  }
+</style>

src/view/portal/layout.js

@@ -0,0 +1,10 @@
+import $ from 'jquery'
+
+//默认5种布局
+export const layout = {
+    l1 : {tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]},
+    l2 : {tr1:[{colspan:1, rowspan:1, width:50, height:100, id:1},{colspan:1, rowspan:1, width:50, height:100, id:2}]},
+    l3: {tr1:[{colspan:2, rowspan:1, width:100, height:50, id:1}],tr2:[{colspan:1, rowspan:1, width:50, height:50, id:2},{colspan:1, rowspan:1, width:50, height:50, id:3}]},
+    l4: {tr1:[{colspan:2, rowspan:1, width:100, height:33, id:1}],tr2:[{colspan:1, rowspan:1, width:50, height:33, id:2},{colspan:1, rowspan:1, width:50, height:33, id:3}], tr3:[{colspan:2, rowspan:1, width:100, height:33, id:4}]},
+    l5:{tr1:[{colspan:2, rowspan:1, width:100, height:20, id:1}],tr2:[{colspan:1, rowspan:1, width:50, height:20, id:2},{colspan:1, rowspan:1, width:50, height:20, id:3}], tr3:[{colspan:2, rowspan:1, width:100, height:20, id:4}],tr4:[{colspan:1, rowspan:1, width:50, height:20, id:5},{colspan:1, rowspan:1, width:50, height:20, id:6}],tr5:[{colspan:2, rowspan:1, width:100, height:20, id:7}]}
+};

src/view/portal/scripts.js

@@ -1,30 +0,0 @@
-export let PortalIndexResource = {
-  js:[
-    "./static/resource/ext-res/js/jquery.min.js",
-    "./static/resource/js/json.js",
-    "./static/resource/ext-res/js/ext-base.js",
-	  "./static/resource/jquery-easyui-1.4.4/jquery.easyui.min.js",
-    "./static/resource/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js",
-    "./static/resource/ext-res/My97DatePicker/WdatePicker.js",
-    "./static/resource/js/portal.js",
-    "./static/resource/js/portal-comp.js",
-    "./static/resource/js/portal-chart.js",
-    "./static/resource/js/portal-param.js",
-    "./static/resource/js/portal-table.js",
-	  "./static/resource/ext-res/js/echarts.min.js",
-    "./static/resource/ext-res/js/sortabletable.js",
-    "./static/resource/ext-res/js/jquery.resizeend.min.js",
-	  "./static/resource/ext-res/js/jquery-resizable.js",
-  ],
-  css:[
-    "./static/resource/ext-res/css/bootstrap.min.css",
-    "./static/resource/css/style.css",
-    "./static/resource/css/font-awesome.css?v=4.4.0",
-    "./static/resource/css/portal.css",
-    "./static/resource/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css",
-	  "./static/resource/jquery-easyui-1.4.4/themes/gray/easyui.css",
-	  "./static/resource/jquery-easyui-1.4.4/themes/icon.css",
-    "./static/resource/css/animate.css",
-  ]
-};
-