重构

src/style/common.less

@@ -41,7 +41,7 @@ html,body{
     overflow: auto;
 }
 .wrapper-content-nomargin {
-    height: calc(100% - 37px);
+    height: calc(100% - 30px);
     overflow: hidden;
 }
 .ibox {

src/view/Main.vue

@@ -99,7 +99,7 @@
 	.page-wrapper {
 		position: inherit;
 		margin: 0 0 0 220px;
-		height: calc(100% - 55px);
+		height: calc(100% - 51px);
 		overflow: auto;
 		width: calc(100% - 220px);
 	}

src/view/portal/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  	<div class="wrapper-content">
+  	<div class="wrapper-content-nomargin">
       <PortalIndex v-if="showIndex" @customizationAction="customizationAction"></PortalIndex>
       <PortalIndexCustomiz v-if="!showIndex"></PortalIndexCustomiz>
   	</div>
@@ -9,7 +9,6 @@
 import {baseUrl} from '@/common/biConfig'
 import PortalIndex from "./PortalIndex.vue"
 import PortalIndexCustomiz from "./PortalIndexCustomiz.vue"
-import Vue from "vue";
 
 export default {
   components:{PortalIndex,PortalIndexCustomiz},

src/view/portal/LayoutCenter.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="layout-center">
+        <layout-param :pageInfo="pageInfo"></layout-param>
+        <layout-optarea :pageInfo="pageInfo"></layout-optarea>
+    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import layoutParam from "./LayoutParam.vue"
+import LayoutOptarea from './LayoutOptarea.vue'
+
+export default {
+  components:{
+    layoutParam,
+    LayoutOptarea
+  },
+  props:{
+      pageInfo:{
+        type:Object,
+        required:true
+     }
+  },
+  data(){
+    return {
+        
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+     
+  },
+  watch: {
+  },
+  beforeMount(){
+   
+  },
+  beforeDestroy(){
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+    @import "../../style/mixin";
+    
+    .layout-center {
+        position: inherit;
+        margin: 0 0 0 223px;
+        height: calc(100% - 35px);
+    }
+</style>

src/view/portal/LayoutLeft.vue

@@ -0,0 +1,102 @@
+<template>
+  	    <div class="layout-left">
+            <div class="tabs-container">
+                <ul class="nav nav-tabs">
+                    <li :class="isActive('data-tab-1')"><a data-toggle="tab" @click="switchTabs('data-tab-1')" idx="0" aria-expanded="true">组件</a>
+                    </li>
+                    <li :class="isActive('data-tab-2')"><a data-toggle="tab" @click="switchTabs('data-tab-2')" idx="1" aria-expanded="false">立方体</a>
+                    </li>
+                    <li :class="isActive('data-tab-3')"><a data-toggle="tab" @click="switchTabs('data-tab-3')" idx="2" aria-expanded="false">数据表</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <div class="tab-content tab-content2">
+                <div id="data-tab-1" class="tab-pane" :class="isActive('data-tab-1')">
+                    <div class="panel-body" style="padding:0px;">
+                        <div id="paramtree">a</div>
+                        <div id="comptree"></div>
+                    </div>
+                </div>
+                <div id="data-tab-2" class="tab-pane" :class="isActive('data-tab-2')">
+                    <div class="panel-body" style="padding:0px;">
+                        <div id="datasettree">b</div>
+                    </div>
+                </div>
+                <div id="data-tab-3" class="tab-pane" :class="isActive('data-tab-3')">
+                    <div class="panel-body" style="padding:0px;">
+                        <div id="tabletree">c</div>
+                    </div>
+                </div>
+            </div>
+  	    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+
+export default {
+  components:{
+
+  },
+  props:{
+      pageInfo:{
+        type:Object,
+        required:true
+     }
+  },
+  data(){
+    return {
+        tabActive:"data-tab-1"
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+      switchTabs(val){
+          this.tabActive = val;
+      },
+      isActive(p){
+          return this.tabActive === p ? "active" : ""
+      }
+  },
+  watch: {
+  },
+  beforeMount(){
+   
+  },
+  beforeDestroy(){
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+    @import "../../style/mixin";
+    .layout-left {
+        position: fixed;
+        width: 220px;
+        height: calc(100% - 35px);
+        border-right: 1px solid #D3D3D3;
+        padding-top: 3px;
+        background-color: white;
+    }
+    .layout-left .nav-tabs > li > a {
+        padding: 5px 10px 5px 10px;
+        width:70px;
+        text-align: center;
+        font-size: 13px;
+        color: #A7B1C2;
+        font-weight: 600;
+        cursor: pointer;
+    }
+    .nav-tabs > li.active > a {
+        color: #555555;
+        cursor: default;
+    }
+</style>

src/view/portal/LayoutOptarea.vue

@@ -0,0 +1,112 @@
+<!-- 布局器 -->
+<script>
+import { baseUrl } from "@/common/biConfig";
+import $ from "jquery";
+
+export default {
+  components: {},
+  props: {
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  render(h) {
+    var json = this.pageInfo.body;
+    var trs = [];
+    for (var i = 1; true; i++) {
+      var tr = json["tr" + i];
+      if (!tr || tr == null) {
+        break;
+      }
+      var tds = [];
+      for (var j = 0; j < tr.length; j++) {
+        var td = tr[j];
+        tds.push(
+          h("td", {
+            attrs: {
+              class: "laytd",
+              height: td.height + "%",
+              width: td.width + "%",
+              colspan: td.colspan,
+              rowspan: td.rowspan,
+            },
+          }, "xxx")
+        );
+        /**
+        if(td.children){
+          for(var k=0; k<td.children.length; k++){
+            var comp = findTCompById(td.children[k]);
+            var str = compStr(comp, false);
+            ret = ret + str;
+            cps.push(comp);
+          }
+        }
+         */
+        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]);
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  computed: {},
+  methods: {},
+  watch: {},
+  beforeMount() {},
+  beforeDestroy() {},
+};
+</script>
+
+<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;
+	width:100%;
+  height:100%;
+  td.laytd {
+    border: 1px solid #D3D3D3;
+    text-align: left;
+    vertical-align: top;
+	  background-color:#f0f3f4;
+	  min-height:100px;
+	  padding:5px;
+  }
+}
+.layout-center-body {
+	height: calc(100% - 44px);
+	overflow: auto;
+}
+</style>

src/view/portal/LayoutParam.vue

@@ -0,0 +1,81 @@
+<template>
+    <div id="optparam" style="height:44px; overflow: auto;" class="ui-droppable">
+    	<span class="charttip" style="font-size:14px; text-align:left; padding: 10px;">把参数拖放此处</span>
+    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+
+export default {
+  components:{
+
+  },
+  props:{
+      pageInfo:{
+        type:Object,
+        required:true
+     }
+  },
+  data(){
+    return {
+        
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+     
+  },
+  watch: {
+  },
+  beforeMount(){
+   
+  },
+  beforeDestroy(){
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+    @import "../../style/mixin";
+    span.charttip {
+      color:#999999;
+      padding:3px;
+      display:block;
+    }
+    #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;
+    }
+</style>

src/view/portal/PortalIndex.vue

@@ -1,35 +1,15 @@
 <template>
-  <div class="wrapper wrapper-content">
+  <div class="wrapper-content">
     <div class="row">
       <div class="col-sm-3">
-        <div class="ibox float-e-margins">
+        <div class="ibox">
           <div class="ibox-content">
-            <button @click="customizationAction" class="btn btn-sm btn-primary">新建报表</button>
+            <button @click="customizationAction" class="btn btn-block btn-sm btn-primary">新建报表</button>
             <p class="text-warning">定制个性化的数据可视化界面</p>
           </div>
         </div>
       </div>
-      <div class="col-sm-9  animated fadeInRight">
-
-      <!-- <div class="file-box">
-        <div class="file">
-          <span class="corner"></span>
-          <div class="tooltip" align="right" style="position:absolute; display:none; margin:3px;" >
-            <button class="btn btn-default btn-xs" type="button" onclick="renamereport('${e.pageId}')" title="改名"><i class="fa fa-paste"></i></button>
-            <button class="btn btn-default btn-xs" type="button" onclick="editreport('${e.pageId}')" title="定制"><i class="fa fa-edit"></i></button>
-            <button class="btn btn-default btn-xs" type="button" onclick="delreport('${e.pageId}')" title="删除"><i class="fa fa-remove"></i></button>
-          </div>
-          <a href="show.action?pageId=${e.pageId}">
-          <div class="icon">
-            <i class="fa fa-bar-chart"></i>
-          </div>
-          </a>
-
-          <div class="file-name" align="center">
-            <a href="show.action?pageId=${e.pageId}">${e.pageName} </a>
-          </div>
-        </div>
-      </div> -->
+      <div class="col-sm-9">
 
 
       </div>
@@ -38,7 +18,7 @@
 </template>
 <script>
 export default {
-  name: "Main",
+  name: "portalMain",
   components: {},
   props: {
 
@@ -54,7 +34,7 @@ export default {
      
     },
     customizationAction(){
-
+      this.$parent.showIndex = false;
     }
   },
   watch: {

src/view/portal/PortalIndexCustomiz.vue

@@ -1,22 +1,43 @@
 <template>
-  <div class="Detail">
-      ddd
-  </div>
+  <div class="customizLayout">
+      <el-menu @select="handleSelect" class="el-menu-demo" background-color="#f6f8f8" text-color="#777" mode="horizontal">
+        <el-menu-item index="back"><i class="fa fa-arrow-left"></i> 返回</el-menu-item>
+        <el-menu-item index="save"><i class="glyphicon glyphicon-save"></i> 保存</el-menu-item>
+        <el-menu-item index="layout"><i class="glyphicon glyphicon-th-large"></i> 布局</el-menu-item>
+        <el-submenu index="data">
+          <template slot="title"><i class="fa fa-database"></i> 数据</template>
+          <el-menu-item index="data-1">选择立方体</el-menu-item>
+          <el-menu-item index="data-2">选择数据表</el-menu-item>
+        </el-submenu>
+      </el-menu>
+      <layout-left :pageInfo="pageInfo"></layout-left>
+      <layout-center :pageInfo="pageInfo"></layout-center>
+  </div> 
 </template>
 <script>
+import layoutLeft from "./LayoutLeft.vue"
+import LayoutCenter from "./LayoutCenter.vue"
+
 export default {
-  name: "reportDetail",
-  components: {},
+  name: "customizer",
+  components: {layoutLeft, LayoutCenter},
   props: {
 
   },
   data() {
     return {
-
+        pageInfo:null
     }
   },
   methods: {
-    
+    initPageInfo(){
+        this.pageInfo = {"layout":1,"body":{tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]}}
+    },
+    handleSelect(key, keyPath){
+      if(key === 'back'){
+        this.$parent.showIndex = true;
+      }
+    }
   },
   watch: {
 
@@ -25,10 +46,13 @@ export default {
 
   },
   mounted() {
-    
-  },
+    this.initPageInfo();
+  }
 }
 </script>
 <style lang="less" scoped>
-
+  .customizLayout {
+    height: 100%;
+    width: 100%;
+  }
 </style>