重构

src/view/portal/Index.vue

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

src/view/portal/LayoutBottom.vue

@@ -0,0 +1,113 @@
+<template>
+     <div class="layout-bottom" v-show="show">
+        <div class="ibox" style="margin-bottom:0px;">
+          <div class="ibox-title" style="height:30px;">
+            <h5> {{ title }} </h5>
+            <div class="ibox-tools">
+            <button class="btn btn-outline btn-danger btn-xs" @click="closeDatapanel()"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <div class="ibox-content" style="padding:0px; overflow:auto; height:150px;">
+            <dbox v-if="showBox" :comp="comp" ref="boxForm"></dbox>
+            <dchart v-if="showChart" :comp="comp" ref="chartForm"></dchart>
+            <dgrid v-if="showGrid" :comp="comp" ref="gridForm"></dgrid>
+            <dtable v-if="showTable" :comp="comp" ref="tableForm"></dtable>
+          </div>
+        </div>
+      </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from './Utils'
+import dbox from './data/Box'
+import dchart from './data/Chart'
+import dgrid from './data/Grid'
+import dtable from './data/Table'
+
+export default {
+  components:{
+    dbox, dchart, dgrid, dtable
+  },
+  props:{
+      pageInfo:{
+        type:Object,
+        required:true
+     }
+  },
+  data(){
+    return {
+      title:"数据面板",
+      show:false,
+      showBox:false,
+      showChart:false,
+      showGrid:false,
+      showTable:false,
+      comp:null
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+    showPanel(comp){
+      this.title = utils.getCompTypeDesc(comp.type) + "数据面板";
+      $(".layout-left").css("height", "calc(100% - 300px)");
+      $(".layout-center").css("height", "calc(100% - 218px)");
+      this.show = true;
+
+      this.showBox = false;
+      this.showChart = false;
+      this.showGrid = false;
+      this.showTable = false;
+
+      if(comp.type === 'box'){
+        this.showBox = true;
+      }else if(comp.type === 'chart'){
+        this.showChart = true;
+      }else if(comp.type ==='grid'){
+        this.showGrid = true;
+      }else if(comp.type === 'table'){
+        this.showTable = true;
+      }
+      this.comp = comp;
+    },
+   closeDatapanel(){
+      $(".layout-left").css("height", "calc(100% - 35px)");
+      $(".layout-center").css("height", "calc(100% - 35px)");
+      this.show = false;
+   }
+  },
+  watch: {
+    
+  },
+  beforeMount(){
+   
+  },
+  beforeDestroy(){
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .ibox-title h5 {
+    display: inline-block;
+    font-size: 14px;
+    margin: 0 0 7px;
+    padding: 0;
+    text-overflow: ellipsis;
+    float: left;
+  }
+  .ibox-tools {
+    display: inline-block;
+    float: right;
+    margin-top: -3px;
+    position: relative;
+    padding: 0;
+}
+</style>

src/view/portal/LayoutLeft.vue

@@ -172,12 +172,12 @@ export default {
 
         });
     },
-    initdset(){
+    initdset(table){
         let ref = $("#tabletree").jstree(true);
         if(ref){
             ref.destroy();
         }
-        if (!this.pageInfo.table) {
+        if (!table) {
             $('#tabletree').jstree({
                 core: {
                     data: {
@@ -212,7 +212,6 @@ export default {
                     }
                 });
             }
-            let table = this.pageInfo.table;
             var dt = {id:table.dsetId, text:table.dsetName+"("+table.priTable+")", state:{opened:true},icon:'fa fa-table', children:[]};;
             ajax({
                 url:"model/getDatasetCfg.action",
@@ -244,12 +243,12 @@ export default {
             }, this);
         }
     },
-    initcubes(){
+    initcubes(cubeId){
         let ref = $("#datasettree").jstree(true);
         if(ref){
             ref.destroy();
         }
-        if (!this.pageInfo.selectDs) {
+        if (!cubeId) {
             $('#datasettree').jstree({
                 core: {
                     data: {
@@ -287,7 +286,7 @@ export default {
             $('#datasettree').jstree({
                 core: {
                     data: {
-                        url: 'model/treeCube.action?cubeId=' + this.pageInfo.selectDs + '&t=' + Math.random()
+                        url: 'model/treeCube.action?cubeId=' + cubeId + '&t=' + Math.random()
                     },
                     check_callback: false
                 },

src/view/portal/LayoutOptarea.vue

@@ -4,10 +4,12 @@ import { baseUrl, newGuid } from "@/common/biConfig";
 import PortalText from "./PortalText.vue"
 import $ from "jquery";
 import * as utils from './Utils'
+import BoxView from "./view/Box.vue"
 
 export default {
   components: {
-    PortalText
+    PortalText,
+    BoxView
   },
   props: {
     pageInfo: {
@@ -98,7 +100,11 @@ export default {
         h('button', {class:"btn btn-outline btn-danger btn-xs", attrs:{title:"删除组件"}, on:{click:()=>{this.deleteComp(comp, layoutId)}}}, [h('i', {class:"fa fa-times"})])
       ];
       let title = h('div', {class:"ibox-title"}, [h('div', {class:"ctit"}, [h('h5', comp.name)]), h('div', {class:"ibox-tools"}, tools)]);
-      let ctx = h('div', {class:"cctx ibox-content", style:{padding:"3px"}}, [h('div', {class:"ccctx"}, comp.desc)]);
+      let compctx = [];
+      if(comp.type === 'box'){
+        compctx.push(h('box-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}, ''));
+      }
+      let ctx = h('div', {class:"cctx ibox-content", style:{padding:"3px"}}, [h('div', {class:"ccctx"}, comp.type=='text'?comp.desc:compctx)]);
       return h('div', {attrs:{class:"ibox", id:"c_" + comp.id}}, [title, ctx]);
     },
     showCompMenu(comp, layoutId){
@@ -166,9 +172,7 @@ export default {
         }else if(comp.type == "box" || comp.type == "mbox"){
           divId = "box_menu";
           items = {
-                    "sjklx": {name: "数据块类型", callback:function(){
-                      boxTypeChg();
-                    }},"data": {name: "数据", icon:"fa-database", callback:function(){
+                    "data": {name: "数据", icon:"fa-database", callback:function(){
                       ts.editComp(comp, layoutId);
                     }},"filter": {name: "筛选", icon:"fa-filter", callback:function(){
                       setcompfilter();
@@ -192,8 +196,11 @@ export default {
           });
     },
     editComp(comp, layoutId){
+      this.$parent.$refs['layoutleftForm'].tabActive = 'data-tab-2';
       if(comp.type === 'text'){
         this.$refs['portalTextForm'].insertText("update", layoutId, comp);
+      }else{
+        this.$parent.showDataPanel(comp);
       }
     },
     deleteComp(comp, layoutId){
@@ -465,4 +472,8 @@ table.r_layout {
 #optarea .ibox {
     margin-bottom: 10px !important;
 }
+.tipinfo {
+	color:#999;
+	padding:10px;
+}
 </style>

src/view/portal/PortalIndexCustomiz.vue

@@ -15,6 +15,7 @@
         <layout-param ref="paramForm" :pageInfo="pageInfo"></layout-param>
         <layout-optarea ref="optarea" :pageInfo="pageInfo"></layout-optarea>
       </div>
+      <layoutBottom :pageInfo="pageInfo" ref="layoutBottomForm"></layoutBottom>
       <portal-layout :pageInfo="pageInfo" ref="layout"></portal-layout>
       <selectCube ref="selectCubeForm" :callback="selectCubeCallback"></selectCube>
       <select-dset ref="selectDsetForm"></select-dset>
@@ -43,12 +44,14 @@ import SelectDset from "./SelectDset"
 import layoutParam from "./LayoutParam.vue"
 import LayoutOptarea from './LayoutOptarea.vue'
 import LayoutParamAdd from './LayoutParamAdd.vue'
+import LayoutBottom from './LayoutBottom.vue'
+import $ from 'jquery'
 import "jquery-contextmenu";
 import "jquery-contextmenu/dist/jquery.contextMenu.min.css";
 
 export default {
   name: "customizer",
-  components: {layoutLeft, PortalLayout, selectCube, SelectDset, layoutParam, LayoutOptarea, LayoutParamAdd},
+  components: {layoutLeft, PortalLayout, selectCube, SelectDset, layoutParam, LayoutOptarea, LayoutParamAdd, LayoutBottom},
   props: {
 
   },
@@ -57,6 +60,7 @@ export default {
         pageInfo:{"layout":1,"body":{tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]}},
         isupdate:false,
         saveShow:false,
+        dataPanelShow:false,
         saveInfo:{
           name:null
         },
@@ -78,10 +82,18 @@ export default {
         success:(resp)=>{
           this.pageInfo = JSON.parse(resp.rows);
           this.isbindTdEvent = true; //需要重新绑定事件
+
+          let o = this.$refs['layoutleftForm'];
+          o.initdset( this.pageInfo.table);
+          o.initcubes( this.pageInfo.selectDs);
         }
 
       }, this);
     },
+    //显示数据面板
+    showDataPanel(comp){
+        this.$refs['layoutBottomForm'].showPanel(comp);
+    },
     handleSelect(key, keyPath){
       if(key === 'back'){
         this.$parent.showIndex = true;
@@ -118,7 +130,7 @@ export default {
       this.pageInfo.selectDs = cubeId;
       var o = this.$refs['layoutleftForm'];
       o.tabActive = 'data-tab-2';
-      o.initcubes();
+      o.initcubes(cubeId);
     },
     savePage(){
       let ts = this;

src/view/portal/PortalText.vue

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

src/view/portal/SelectDset.vue

@@ -58,9 +58,9 @@ export default {
             return false;
           }
         });
-        this.$parent.pageInfo.table = {dsetId:dset.dsetId, dsid:dset.dsid,dsetName:dset.name,priTable:dset.priTable};
+        let table = this.$parent.pageInfo.table = {dsetId:dset.dsetId, dsid:dset.dsid,dsetName:dset.name,priTable:dset.priTable};
         this.$parent.$refs['layoutleftForm'].tabActive = 'data-tab-3';
-        this.$parent.$refs['layoutleftForm'].initdset();
+        this.$parent.$refs['layoutleftForm'].initdset(table);
      },
      loadData(){
 				ajax({

src/view/portal/Utils.js

@@ -51,6 +51,22 @@ export const getParamTypeDesc = (paramType)=>{
 	return tpname;
 }
 
+export const getCompTypeDesc = (compType)=>{
+	var name = "";
+	if(compType === 'text'){
+		name = "文本";
+	}else if(compType === 'box'){
+		name = "数据块";
+	}else if(compType === 'chart'){
+		name = "图形";
+	}else if(compType === 'grid'){
+		name = "表格";
+	}else if(compType === 'table'){
+		name = "交叉表";
+	}
+	return name;
+}
+
 //从布局器中查询td(容器)
 export const findLayoutById = (layoutId, pageInfo)=>{
 	var ret = null;

src/view/portal/data/Box.vue

@@ -0,0 +1,118 @@
+<template>
+    <div id="boxDataPanel" style="margin:3px;">
+        <div class="tsbd">
+          <div class="ts_h">
+            数据块度量：
+            <div class="h_ctx">
+              <span v-if="!comp.kpiJson" class="charttip">拖拽度量到此处</span>
+              <span v-if="comp.kpiJson"><span>{{comp.kpiJson.kpi_name}}</span></span>
+            </div>
+          </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+
+export default {
+  components:{
+    
+  },
+  props:{
+      comp:{
+        type:Object,
+        required:true
+      }
+  },
+  data(){
+    return {
+      
+    }
+  },
+  mounted(){
+     this.bindBoxEvent();
+  },
+  computed: {
+  },
+  methods: {
+    boxView(){
+      this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].boxView();
+    },
+    bindBoxEvent(){
+      let ts = this;
+      $("#boxDataPanel .h_ctx").droppable({
+        accept:"#datasettree .jstree-node",
+		    tolerance:"pointer",
+        over:function(e, ui){
+			    var ref = $("#datasettree").jstree(true);
+			    var node = ref.get_node(ui.draggable[0]);
+          var tp = node.li_attr.col_type;
+          //只能拖拽度量
+          if(tp != 2){
+            return;
+          }
+          
+          //对维度拖拽设置图标
+          $(ui.helper[0]).find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok");
+			    $(this).css("border", "1px solid #ff0000");
+        },
+        out:function(e, ui){
+          $(ui.helper[0]).find("span").removeClass("glyphicon-ok").addClass("glyphicon-remove");
+			    $(this).css("border", "1px solid #7F9DB9");
+        },
+       drop:function(e, ui){
+          let json = ts.comp;        
+          //清除边框颜色
+          $(this).css("border", "1px solid #7F9DB9");
+          
+          //获取TREE
+          var ref = $("#datasettree").jstree(true);
+		    	var node = ref.get_node(ui.draggable[0]);
+          var tp = node.li_attr.col_type;
+          //只能拖拽度量
+          if(tp == 2){
+          }else{
+            utils.msginfo("只能拖拽度量到数据块中显示。");
+            return;
+          }
+          
+          json.dsetId = node.li_attr.dsetId;
+          json.dsid = node.li_attr.dsid;
+          json.kpiJson = {"kpi_id":node.li_attr.col_id, "kpi_name" : node.text, "col_name":node.li_attr.col_name, "aggre":node.li_attr.aggre, "fmt":node.li_attr.fmt, "alias":node.li_attr.alias,"tname":node.li_attr.tname,"unit":node.li_attr.unit,"rate":node.li_attr.rate};
+          //设置title
+          json.name = node.text;
+          ts.boxView();
+          ts.$forceUpdate();
+        }
+      });
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .tsbd .ts_h{
+    font-size:13px;
+    margin:5px 20px 5px 5px;
+    width:125px;
+    float:left;
+  }
+  .tsbd .h_ctx{
+    border:1px solid #7F9DB9;
+    height:28px;
+    overflow:hidden;
+    border-radius:5px;
+    padding:2px;
+  }
+  span.charttip {
+    color:#999999;
+    padding:3px;
+    display:block;
+  }
+</style>

src/view/portal/data/Chart.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="chartDatasty" style="margin:3px;">
+       chart
+    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+
+export default {
+  components:{
+    
+  },
+  props:{
+      
+  },
+  data(){
+    return {
+      
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+    
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/data/Grid.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="chartDatasty" style="margin:3px;">
+       grid
+    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+
+export default {
+  components:{
+    
+  },
+  props:{
+      
+  },
+  data(){
+    return {
+      
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+    
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/data/Table.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="chartDatasty" style="margin:3px;">
+        table
+    </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+
+export default {
+  components:{
+    
+  },
+  props:{
+      
+  },
+  data(){
+    return {
+      
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+    
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/view/Box.vue

@@ -0,0 +1,64 @@
+<script>
+import {baseUrl, ajax} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+import { Loading } from 'element-ui'
+
+export default {
+  components:{    
+  },
+  data(){
+    return {
+      data:null
+    }
+  },
+  props:{
+      comp:{
+        type:Object,
+        required:true,
+        default:{}
+      }
+  },
+  render(h){
+    let ts = this;
+    let comp = this.comp;
+    if(this.data){
+      return h('div', {class:"boxcls", style:{"font-size":"32px", "text-align":"center"}}, this.data.value);
+    }else{
+      return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
+    }
+  },
+  mounted(){
+    this.boxView();
+  },
+  computed: {
+  },
+  methods: {
+    boxView(){
+      let ts = this;
+      let comp = this.comp;
+      if(comp.kpiJson){
+          let json = JSON.parse(JSON.stringify(comp));
+          let loadingInstance = Loading.service({fullscreen:false, target:document.querySelector('#c_'+comp.id+" div.ccctx")});
+          ajax({
+            url:"portal/BoxView.action",
+            type:"POST",
+            data:JSON.stringify(json),
+            postJSON:true,
+            success:(resp)=>{
+              ts.data = resp.rows[0];
+              loadingInstance.close();
+            }
+          }, this);
+      }
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>