重构

src/style/common.less

@@ -176,4 +176,11 @@ html,body{
 		height:16px;
 		color:#3f36c3;
 	}
-}
+}
+.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
+    margin-bottom: 5px;
+}
+.el-form-item__label{
+    font-weight: normal;
+}
+

src/view/portal/LayoutBottom.vue

@@ -56,8 +56,8 @@ export default {
   methods: {
     showPanel(comp){
       this.title = utils.getCompTypeDesc(comp.type) + "数据面板";
-      $(".layout-left").css("height", "calc(100% - 300px)");
-      $(".layout-center").css("height", "calc(100% - 218px)");
+      $(".layout-left").css("height", "calc(100% - 296px)");
+      $(".layout-center").css("height", "calc(100% - 180px)");
       this.show = true;
 
       this.showBox = false;
@@ -77,8 +77,8 @@ export default {
       this.comp = comp;
     },
    closeDatapanel(){
-      $(".layout-left").css("height", "calc(100% - 35px)");
-      $(".layout-center").css("height", "calc(100% - 35px)");
+      $(".layout-left").css("height", "100%");
+      $(".layout-center").css("height", "100%");
       this.show = false;
    }
   },

src/view/portal/LayoutLeft.vue

@@ -315,7 +315,7 @@ export default {
     .layout-left {
         position: fixed;
         width: 220px;
-        height: calc(100% - 35px);
+        height: 100%;
         border-right: 1px solid #D3D3D3;
         padding-top: 3px;
         background-color: white;

src/view/portal/LayoutOptarea.vue

@@ -104,7 +104,39 @@ export default {
       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)]);
+      let style = {padding:"3px"};
+      let bgcolor = comp.bgcolor;
+      if(bgcolor){
+        style['background-color'] = bgcolor;
+      }
+      let bodys = {class:"ccctx", style:{}};
+      if(comp.type ==='text'){
+        bodys.domProps = {innerHTML:comp.desc.replace(/\n/g,"<br>")};
+        //处理 text 的 style
+        if(comp.style){
+          let s = comp.style;
+          let s2 = bodys.style;
+          if(s.talign){
+            s2['text-align'] = s.talign;
+          }
+          if(s.tfontsize){
+            s2['font-size'] = s.tfontsize + "px";
+          }
+          if(s.tfontcolor){
+            s2['color'] = s.tfontcolor;
+          }
+          if(s.tfontweight){
+            s2['font-weight'] = "bold";
+          }
+          if(s.titalic){
+            s2['font-style'] = 'italic';
+          }
+          if(s.tunderscore){
+            s2['text-decoration'] = 'underline';
+          }
+        }
+      }
+      let ctx = h('div', {class:"cctx ibox-content", style:style}, [h('div', bodys, comp.type=='text'?"":compctx)]);
       return h('div', {attrs:{class:"ibox", id:"c_" + comp.id}}, [title, ctx]);
     },
     showCompMenu(comp, layoutId){
@@ -129,7 +161,7 @@ export default {
                       compevent();
                     }},
                     "prop": {name: "属性", callback:function(){
-                      setComp();
+                      ts.setComp(comp, layoutId);
                     }}
                 };
         }else if(comp.type == "table"){
@@ -145,7 +177,7 @@ export default {
                       compevent();
                     }},
                     "prop": {name: "属性", callback:function(){
-                      setComp();
+                      ts.setComp(comp, layoutId);
                     }}
                 };
         }else if(comp.type == "text"){
@@ -155,7 +187,7 @@ export default {
                       ts.editComp(comp, layoutId);
                     }},
                     "prop": {name: "属性", callback:function(){
-                      setComp();
+                      ts.setComp(comp, layoutId);
                     }}
                 };
         }else if(comp.type == "grid"){
@@ -166,7 +198,7 @@ export default {
                     }},"filter": {name: "筛选", icon:"fa-filter", callback:function(){
                       setcompfilter();
                     }},"prop": {name: "属性", callback:function(){
-                      setComp();
+                      ts.setComp(comp, layoutId);
                     }}
                 };
         }else if(comp.type == "box" || comp.type == "mbox"){
@@ -177,7 +209,7 @@ export default {
                     }},"filter": {name: "筛选", icon:"fa-filter", callback:function(){
                       setcompfilter();
                     }},"prop": {name: "属性", callback:function(){
-                      setComp();
+                      ts.setComp(comp, layoutId);
                     }}
                 };
         }
@@ -203,6 +235,9 @@ export default {
         this.$parent.showDataPanel(comp);
       }
     },
+    setComp(comp, layoutId){
+      this.$parent.showPropPanel(comp);
+    },
     deleteComp(comp, layoutId){
       if(!confirm("是否确认删除组件？")){
         return;

src/view/portal/LayoutRight.vue

@@ -0,0 +1,126 @@
+<template>
+     <div class="layout-right" v-show="show">
+        <div class="ibox">
+          <div class="ibox-title">
+            <h5>{{title}}</h5>
+            <div class="ibox-tools">
+              <button class="btn btn-outline btn-danger btn-xs" @click="closeproperty()"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <div class="ibox-content" style="padding:0;">
+            <pbox v-if="showBox" ref="boxForm" :comp="comp"></pbox>
+            <ptext v-if="showText" ref="textForm" :comp="comp"></ptext>
+          </div>
+        </div>
+      </div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from './Utils'
+import pbox from './prop/Box'
+import ptext from './prop/Text'
+
+export default {
+  components:{
+    pbox,ptext
+  },
+  props:{
+      pageInfo:{
+        type:Object,
+        required:true
+     }
+  },
+  data(){
+    return {
+      title:"属性面板",
+      show:false,
+      showBox:false,
+      showChart:false,
+      showGrid:false,
+      showTable:false,
+      showText:false,
+      comp:null
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+     
+  },
+  methods: {
+    showPanel(comp){
+      this.title = utils.getCompTypeDesc(comp.type) + "属性面板";
+      this.show = true;
+      this.comp = comp;
+
+      this.showBox = false;
+      this.showChart = false;
+      this.showGrid = false;
+      this.showTable = false;
+      this.showText = false;
+
+      $(".layout-center").css("margin-right","220px");
+
+      if(comp.type === 'box'){
+        this.showBox = true;
+        this.$nextTick(()=> this.$refs['boxForm'].init());
+      }else if(comp.type === 'chart'){
+        this.showChart = true;
+      }else if(comp.type ==='grid'){
+        this.showGrid = true;
+      }else if(comp.type === 'table'){
+        this.showTable = true;
+      }else if(comp.type === 'text'){
+        this.showText = true;
+        this.$nextTick(()=>this.$refs['textForm'].init());
+      }
+    },
+   closeproperty(){
+      $(".layout-center").css("margin-right","");
+      this.show = false;
+   }
+  },
+  watch: {
+    
+  },
+  beforeMount(){
+   
+  },
+  beforeDestroy(){
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .layout-right {
+	  position: fixed;
+    width: 217px;
+    height: 100%;
+    right: 0;
+    .ibox {
+      	height: 100%;
+	      margin-bottom:0px;
+	      overflow:auto;
+    }
+
+  .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/PortalIndexCustomiz.vue

@@ -10,12 +10,15 @@
           <el-menu-item index="data-2">选择数据表</el-menu-item>
         </el-submenu>
       </el-menu>
-      <layout-left :pageInfo="pageInfo" ref="layoutleftForm"></layout-left>
-      <div class="layout-center">
-        <layout-param ref="paramForm" :pageInfo="pageInfo"></layout-param>
-        <layout-optarea ref="optarea" :pageInfo="pageInfo"></layout-optarea>
+      <div class="report-layut">
+        <layout-left :pageInfo="pageInfo" ref="layoutleftForm"></layout-left>
+        <layout-right :pageInfo="pageInfo" ref="layoutRightForm"></layout-right>
+        <div class="layout-center">
+          <layout-param ref="paramForm" :pageInfo="pageInfo"></layout-param>
+          <layout-optarea ref="optarea" :pageInfo="pageInfo"></layout-optarea>
+        </div>
+        <layoutBottom :pageInfo="pageInfo" ref="layoutBottomForm"></layoutBottom>
       </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>
@@ -48,10 +51,11 @@ import LayoutBottom from './LayoutBottom.vue'
 import $ from 'jquery'
 import "jquery-contextmenu";
 import "jquery-contextmenu/dist/jquery.contextMenu.min.css";
+import LayoutRight from './LayoutRight.vue'
 
 export default {
   name: "customizer",
-  components: {layoutLeft, PortalLayout, selectCube, SelectDset, layoutParam, LayoutOptarea, LayoutParamAdd, LayoutBottom},
+  components: {layoutLeft, PortalLayout, selectCube, SelectDset, layoutParam, LayoutOptarea, LayoutParamAdd, LayoutBottom, LayoutRight},
   props: {
 
   },
@@ -93,6 +97,11 @@ export default {
     //显示数据面板
     showDataPanel(comp){
         this.$refs['layoutBottomForm'].showPanel(comp);
+        this.$refs['layoutRightForm'].closeproperty();
+    },
+    showPropPanel(comp){
+      this.$refs['layoutBottomForm'].closeDatapanel();
+      this.$refs['layoutRightForm'].showPanel(comp);
     },
     handleSelect(key, keyPath){
       if(key === 'back'){
@@ -187,6 +196,10 @@ export default {
   .layout-center {
         position: inherit;
         margin: 0 0 0 223px;
-        height: calc(100% - 35px);
+        height: 100%;
+    }
+    .report-layut {
+       width: 100%;
+       height: calc(100% - 35px);
     }
 </style>

src/view/portal/Utils.js

@@ -10,6 +10,49 @@ export const layout = {
     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}]}
 }
 
+export const fmtJson = [{
+	"text":"整数",
+	"value":"#,##0"
+},{
+	"text":"小数(保留一位)",
+	"value":"#,##0.0"
+},{
+	"text":"小数(保留两位)",
+	"value":"#,##0.00"
+},{
+	"text":"小数(保留四位)",
+	"value":"#,##0.0000"
+},{
+	"text":"百分比",
+	"value":"#,##0%"
+},{
+	"text": "百分比(保留一位小数)",
+	"value": "#,##0.0%"
+}, {
+	"text": "百分比(保留两位小数)",
+	"value": "#,##0.00%"
+}, {
+	"text": "百分比(保留四位小数)",
+	"value": "#,##0.0000%"
+}];
+
+export const rates = [{
+	"text":"1",
+	"value":"1"
+},{
+	"text":"千",
+	"value":"1000"
+},{
+	"text":"万",
+	"value":"10000"
+},{
+	"text":"百万",
+	"value":"1000000"
+},{
+	"text":"亿",
+	"value":"100000000"
+}];
+
 export const msginfo = (msg, type)=>{
 	if(!type || type === 'error'){
 		Message.error({message:msg, type:"error",showClose: true});

src/view/portal/prop/Box.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-form :model="prop" ref="propForm" label-position="left" size="mini">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="文本属性" name="1">
+            <el-form-item label="标题" label-width="70px">
+              <el-input v-model="prop.title" @blur="changevalue('title')"></el-input>
+            </el-form-item>
+            <el-form-item label="单位" label-width="70px">
+              <el-input v-model="prop.unit" @blur="changevalue('unit')"></el-input>
+            </el-form-item>
+            <el-form-item label="格式化" label-width="70px">
+               <el-select v-model="prop.fmt" placeholder="请选择" @change="changevalue('fmt')">
+                  <el-option
+                    v-for="item in opts.fmt"
+                    :key="item.value"
+                    :label="item.text"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="度量比例" label-width="70px">
+               <el-select v-model="prop.rate" placeholder="请选择" @change="changevalue('rate')">
+                  <el-option
+                    v-for="item in opts.rates"
+                    :key="item.value"
+                    :label="item.text"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="字体大小" label-width="70px">
+              <el-slider v-model="prop.tfontsize" :max="99" :min="9" @change="changevalue('tfontsize')"></el-slider>
+            </el-form-item>
+            <el-form-item label="字体颜色" label-width="180px">
+              <el-color-picker v-model="prop.tfontcolor" @change="changevalue('tfontcolor')"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="背景颜色" label-width="180px">
+              <el-color-picker v-model="prop.bgcolor" @change="changevalue('bgcolor')"></el-color-picker>
+            </el-form-item>
+      </el-collapse-item>
+      
+    </el-collapse>
+  </el-form>
+</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 {
+      activeName:"1",
+      prop:{
+        title:null,
+        unit:null,
+        fmt:null,
+        rate:null,
+        tfontsize:32,
+        tfontcolor:null,
+        bgcolor:null
+      },
+      opts:{
+        fmt:utils.fmtJson,
+        rates: utils.rates
+      }
+    }
+  },
+  mounted(){
+    
+  },
+  computed: {
+  },
+  methods: {
+    init(){
+      let p = this.prop;
+      let c = this.comp;
+      p.title = c.name;
+      p.unit = c.kpiJson.unit;
+      p.fmt = c.kpiJson.fmt;
+      p.rate = c.kpiJson.rate;
+      p.bgcolor = c.bgcolor;
+      p.tfontsize = c.kpiJson.tfontsize;
+      p.tfontcolor = c.kpiJson.tfontcolor;
+    },
+    boxView(){
+      this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].boxView();
+    },
+    compRender(){
+      this.$parent.$parent.$refs['optarea'].$forceUpdate();
+    },
+    changevalue(prop){
+      let c = this.comp;
+      let v = this.prop[prop];
+      if(prop === 'title'){
+        c.name = v;
+      }else if(prop === 'unit' || prop === 'fmt' || prop == 'rate' || prop === 'tfontsize' || prop === 'tfontcolor'){
+        c.kpiJson[prop] = v;
+        this.boxView();
+      }else if(prop === 'bgcolor'){
+        this.comp[prop] = v;
+        this.compRender();
+      }
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/prop/Text.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-form :model="prop" ref="propForm" label-position="left" size="mini">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="文本属性" name="1">
+            <el-form-item label="是否显示标题" label-width="170px">
+              <el-switch v-model="prop.showTitle"></el-switch>
+            </el-form-item>
+            <el-form-item label="标题" label-width="70px">
+              <el-input v-model="prop.title" @blur="changevalue('title')"></el-input>
+            </el-form-item>
+            <el-form-item label="位置" label-width="70px">
+              <el-radio-group v-model="prop.talign" size="mini" @change="changevalue('talign')">
+              <el-radio-button label="left">左</el-radio-button>
+              <el-radio-button label="center">中</el-radio-button>
+              <el-radio-button label="right">右</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+             <el-form-item label="背景颜色" label-width="180px">
+              <el-color-picker v-model="prop.bgcolor" @change="changevalue('bgcolor')"></el-color-picker>
+            </el-form-item>
+      </el-collapse-item>
+      <el-collapse-item title="文本字体" name="2">
+            <el-form-item label="字体大小" label-width="70px">
+              <el-slider v-model="prop.tfontsize" :max="99" :min="9" @change="changevalue('tfontsize')"></el-slider>
+            </el-form-item>
+            <el-form-item label="字体颜色" label-width="180px">
+               <el-color-picker v-model="prop.tfontcolor" @change="changevalue('tfontcolor')"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="是否粗体" label-width="170px">
+              <el-switch v-model="prop.tfontweight" @change="changevalue('tfontweight')"></el-switch>
+            </el-form-item>
+            <el-form-item label="是否斜体" label-width="170px">
+              <el-switch v-model="prop.titalic" @change="changevalue('titalic')"></el-switch>
+            </el-form-item>
+            <el-form-item label="是否下划线" label-width="170px">
+              <el-switch v-model="prop.tunderscore" @change="changevalue('tunderscore')"></el-switch>
+            </el-form-item>
+      </el-collapse-item>
+    </el-collapse>
+  </el-form>
+</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 {
+      activeName:"1",
+      prop:{
+        showTitle:false,
+        title:null,
+        talign:"left",
+        tfontsize:12,
+        tfontcolor:null,
+        tunderscore:null,
+        titalic:null,
+        tfontweight:null,
+        bgcolor:null
+      }
+    }
+  },
+  mounted(){
+    
+  },
+  computed: {
+  },
+  methods: {
+    init(){
+      this.prop.title = this.comp.name;
+    },
+    compRender(){
+      this.$parent.$parent.$refs['optarea'].$forceUpdate();
+    },
+    changevalue(prop){
+      let c = this.comp;
+      let v = this.prop[prop];
+      if(!c.style){
+          c.style = {};
+      }
+      if(prop === 'title'){
+        c.name = v;
+      }else if(prop === 'talign' || prop === 'tfontsize' || prop ==='tfontcolor' || prop === 'tunderscore' 
+        || prop ==='titalic' || prop ==='tfontweight'){
+        c.style[prop] = v;
+        this.compRender();
+      }else if(prop === 'bgcolor'){
+        c.bgcolor = v;
+        this.compRender();
+      }
+    }
+  },
+  watch: {
+    /**
+    'prop.title':function(val){
+      if(val != null){
+        this.$props.comp.name = val;
+      }
+    },
+    immediate: false
+    **/
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/view/Box.vue

@@ -23,7 +23,18 @@ export default {
     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);
+      let size = this.data.fontsize;
+      let color = this.data.fontcolor;
+      if(size){
+        size += "px";
+      }else{
+        size = "32px";
+      }
+      let style = {"font-size":size, "text-align":"center"};
+      if(color){
+        style.color = color;
+      }
+      return h('div', {class:"boxcls", style:style}, this.data.value);
     }else{
       return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
     }