重构

src/view/portal/LayoutOptarea.vue

@@ -7,12 +7,14 @@ import $ from "jquery";
 import * as utils from './Utils'
 import BoxView from "./view/Box.vue"
 import ChartView from "./view/Chart.vue"
+import GridView from "./view/Grid.vue"
 
 export default {
   components: {
     PortalText,
     BoxView,
     ChartView,
+    GridView,
     ChartDailog
   },
   props: {
@@ -110,6 +112,8 @@ export default {
         compctx.push(h('box-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}));
       }else if(comp.type ==='chart'){
         compctx.push(h('chart-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}));
+      }else if(comp.type === 'grid'){
+        compctx.push(h('grid-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}));
       }
       let style = {padding:"3px"};
       let bgcolor = comp.bgcolor;

src/view/portal/data/Grid.vue

@@ -1,6 +1,22 @@
 <template>
-    <div class="chartDatasty" style="margin:3px;">
-       grid
+    <div style="margin:10px;">
+       <div class="tableDatasty" id="gridData">
+        <template v-if="!comp.cols || comp.cols.length === 0">
+          <div class="tipinfo">拖拽数据表字段到此处作为表格的列字段</div>
+        </template>
+        <template v-if="comp.cols.length > 0">
+          <b>
+            表格字段：
+          </b>
+          <template v-for="item in comp.cols">
+            <span :key="item.id" class="dimcol">
+              <span class="text">{{item.name}}</span>
+              <div class="ibox-tools"><button class="btn btn-outline btn-success btn-xs"><i class="fa fa-wrench"></i></button>
+              </div>
+           </span>
+          </template>
+        </template>
+       </div>
     </div>
 </template>
 
@@ -14,7 +30,10 @@ export default {
     
   },
   props:{
-      
+      comp:{
+        type:Object,
+        required:true
+      }
   },
   data(){
     return {
@@ -22,13 +41,74 @@ export default {
     }
   },
   mounted(){
-
+    this.bindDropEvent();
   },
   computed: {
      
   },
   methods: {
-    
+     setUpdate(){
+      this.$parent.$parent.isupdate = true;
+    },
+    gridView(){
+      this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].gridView();
+    },
+    bindDropEvent(){
+      let ts = this;
+      $("#gridData").droppable({
+          accept:"#tabletree .jstree-node",
+		      tolerance:"pointer",
+         over:function(e, ui){
+            //对维度拖拽设置图标
+            $(ui.helper[0]).find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok");
+            $("#gridData").css("border", "1px solid #ff0000");
+          },
+          out:function(e, ui){
+            $(ui.helper[0]).find("span").removeClass("glyphicon-ok").addClass("glyphicon-remove");
+            $("#gridData").css("border", "1px dotted #666");
+          },
+         drop:function(e, ui){
+           let grid = ts.comp;
+            //清除边框颜色
+            $("#gridData").css("border", "1px dotted #666");
+            
+           //获取TREE
+          var ref = $("#tabletree").jstree(true);
+          var node = ref.get_node(ui.draggable[0]);
+            
+            if(grid.dsetId && grid.dsetId != node.li_attr.dsetId){
+              utils.msginfo("你拖入的字段"+node.text+"与表格已有的内容不在同一个表中，拖放失败！");
+              return;
+            }else{
+              grid.dsetId = node.li_attr.dsetId;
+              grid.dsid = node.li_attr.dsid;
+            }
+            if(!grid.cols){
+              grid.cols = [];
+            }
+            //判断是否存在
+            var exist = function(gid){
+              var r = false;
+              for(let j=0; j<grid.cols.length; j++){
+                if(grid.cols[j].id == gid){
+                  r = true;
+                  break;
+                }
+              }
+              return r;
+            };
+            if(exist(node.id)){
+              utils.msginfo("您拖拽的字段 " + node.text+" 已经存在。");
+              return;
+            }
+            grid.cols.push({id:node.id,name:node.li_attr.name,tname:node.li_attr.tname,type:node.li_attr.type,expression:node.li_attr.expression});
+            
+           ts.setUpdate();
+           ts.gridView();
+          }
+        });
+        
+    }
   },
   watch: {
     
@@ -37,5 +117,40 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  
+  .tipinfo {
+    color:#999;
+    padding:10px;
+  }
+  .tableDatasty{
+    border: 1px dotted #666;
+    padding:5px;
+    border-radius:5px;
+    .col {
+      border: 1px solid #DF7809;
+      display: inline-block;
+      margin: 5px;
+      padding: 5px;
+      text-align: center;
+      width:120px;
+      font-size:14px;
+      border-radius:5px;
+    }
+    .dimcol {
+        border: 1px solid #0C6ADF;
+        display: inline-block;
+        margin: 5px;
+        padding: 5px;
+        text-align: left;
+      font-size:14px;
+      width:120px;
+      border-radius:5px;
+    }
+  }
+  .ibox-tools {
+    display: inline-block;
+    float: right;
+    margin-top: 0;
+    position: relative;
+    padding: 0;
+}
 </style>

src/view/portal/prop/Chart.vue

@@ -42,6 +42,9 @@
           <el-form-item label="是否显示值" label-width="170px">
             <el-switch v-model="prop.dataLabel" @change="changevalue('dataLabel')"></el-switch>
           </el-form-item>
+          <el-form-item label="值的颜色" label-width="180px">
+              <el-color-picker v-model="prop.dataLabelColor" @change="changevalue('dataLabelColor')"></el-color-picker>
+            </el-form-item>
             <template v-if="ctp === 'pie'">
                 <el-form-item label="标签显示内容" label-width="106px">
                     <el-select v-model="prop.labelType" placeholder="请选择" @change="changevalue('labelType')">
@@ -182,6 +185,7 @@ export default {
         marginLeft:65,
         marginRight:10,
         dataLabel:false,
+        dataLabelColor:null,
         xdispName:"",
         tickInterval:null,
         routeXaxisLable:null,
@@ -229,6 +233,9 @@ export default {
       p.title = c.name;
       this.ctp = c.chartJson.type;
       this.typeIndex = c.chartJson.typeIndex;
+      if(c.chartJson.xcol){
+        p.xdispName = c.chartJson.xcol.xdispName;
+      }
     },
     chartView(){
       this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].chartView();
@@ -243,10 +250,33 @@ export default {
       if(prop === 'title'){
         c.name = v;
         this.$parent.$forceUpdate();
-      }else if(col === 'showLegend' || col == "legendLayout" || col == "legendpos" || col == "dataLabel" || col == "markerEnabled" || col == "marginLeft" || col == "marginRight"){
+      }else if(col === 'showLegend' || col == "legendLayout" || col == "legendpos" || col == "dataLabel"  || col ==='dataLabelColor' || col == "markerEnabled" || col == "marginLeft" || col == "marginRight"){
         c.chartJson[prop] = v;
         this.chartView();
+      }else if(col == "tickInterval" || col == "routeXaxisLable" || col == "xdispName" || col == "top"){
+        c.chartJson.xcol[prop] = v;
+         this.chartView();
+      }else if(col == "ydispName" || col == "unit" || col == "fmt" || col == "min" || col == "max" || col == "rate"){
+        var o = c.kpiJson[0];
+        o[col] = v;
+        this.chartView();
+      }else if(col == "y2dispName" || col == "unit2" || col == "fmt2" || col == "rate2" || col == "mergeData"){	//处理y2col y2轴
+        var o = c.kpiJson[1];
+				
+				if(col == "y2dispName"){
+					o.ydispName = v;
+				}else if(col == "unit2"){
+					o.unit = v;
+				}else if(col == "fmt2"){
+					o.fmt = v;
+				}else if(col == "rate2"){
+					o.rate = v;
+				}else if(col == "mergeData"){
+					o.mergeData = v;
+        }     
+        this.chartView();
       }
+
     }
   },
   watch: {

src/view/portal/view/Grid.vue

@@ -0,0 +1,52 @@
+<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 comp = this.comp;
+    if(comp.cols && comp.cols.length > 0){
+      let ths = [];
+      comp.cols.forEach(element => {
+        ths.push(h('th', {class:"grid3-td"}, [h('div', {class:"dg-cell"}, element.name)]));
+      });
+      let table = h('table', {class:"lockgrid"}, [h('thead', [h("tr", ths)])]);
+      return table;
+    }
+    return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
+  },
+  mounted(){
+    this.gridView();
+  },
+  computed: {
+  },
+  methods: {
+    gridView(){
+      
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>