重构

src/view/portal/ChartDailog.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-	import {ajax} from '@/common/biConfig'
+	import {ajax, newGuid} from '@/common/biConfig'
 	import $ from 'jquery'
 
 	export default {
@@ -51,6 +51,8 @@
 				show:false,
 				mapArea:null,
 				mapAreaname:null,
+				layoutId:null,
+				comp:null,
 				opts:{
 					areas:[]
 				},
@@ -124,10 +126,46 @@
 						}
 					});
 				})
-				console.log(tp+","+index);
+				if(this.comp){
+					let comp = this.comp;
+					comp.chartJson.type = tp;
+					comp.chartJson.maparea = this.mapArea;
+					comp.chartJson.typeIndex = index;
+					this.$parent.$refs['mv_'+comp.id].chartView();
+				}else{
+					var compId = newGuid();
+					var name = "图表";
+					var comp = {"id":compId, "name":name, "type":"chart"};
+					comp.chartJson = {"type":tp, maparea:this.mapArea, typeIndex:index, xcol:{}, ycol:{}, scol:{}, params:[],height:tp == 'map' ? '400':'250'};
+					comp.kpiJson = [null, null, null];
+
+					this.$parent.addComp(this.layoutId, comp);
+				}
+			},
+			insertChart(layoutId, chart){
+				this.layoutId = layoutId;
+				this.show = true;
+				this.comp = null;
 			},
-			insertChart(chart){
+			//更改图形类型
+			changeType(comp){
 				this.show = true;
+				this.comp = comp;
+				let type = comp.chartJson.type;
+				let index = comp.chartJson.typeIndex;
+				//选中值
+				$(this.charts).each((a, b)=>{
+					$(b.children).each((c, d)=>{
+						if(b.type === type && d.index === index){
+							d.select = true;
+							b.show = true;
+						}else{
+							d.select = false;
+							b.show = false;
+						}
+					});
+				})
+				//this.$forceUpdate();
 			},
 			selectchart(chartId){
 				$(this.charts).each((a, b)=>{

src/view/portal/LayoutOptarea.vue

@@ -6,11 +6,13 @@ import ChartDailog from './ChartDailog.vue'
 import $ from "jquery";
 import * as utils from './Utils'
 import BoxView from "./view/Box.vue"
+import ChartView from "./view/Chart.vue"
 
 export default {
   components: {
     PortalText,
     BoxView,
+    ChartView,
     ChartDailog
   },
   props: {
@@ -105,7 +107,9 @@ export default {
       let title = h('div', {class:"ibox-title"}, [h('div', {class:"ctit"}, [h('h5', comp.name)]), h('div', {class:"ibox-tools"}, tools)]);
       let compctx = [];
       if(comp.type === 'box'){
-        compctx.push(h('box-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}, ''));
+        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}}));
       }
       let style = {padding:"3px"};
       let bgcolor = comp.bgcolor;
@@ -152,7 +156,7 @@ export default {
           divId = "chart_menu";
           items = {
                     "tblx": {name: "图表类型",callback:function(){
-                      setcharttype(false)
+                      ts.$refs['chartDailogForm'].changeType(comp);
                     }},
                     "data": {name: "数据", icon:"fa-database", callback:function(){
                       ts.editComp(comp, layoutId);
@@ -255,6 +259,8 @@ export default {
         }
       }
       td.children.splice(compIdx, 1);
+      //隐藏数据窗口
+      this.$parent.hidePanel();
       this.setUpdate();
       this.$forceUpdate();
     },
@@ -360,8 +366,7 @@ export default {
               var comp = {"id":newGuid(), "name":"交叉表", "type":"table"};
               execf(layoutId, comp);
             }else if(tp == "chart"){
-              ts.$refs['chartDailogForm'].insertChart();
-              //setcharttype(true, layoutId, curTmpInfo.id, curTmpInfo.tp)					
+              ts.$refs['chartDailogForm'].insertChart(layoutId);
             }else if(tp == "grid"){
               var comp = {"id":newGuid(), "name":"表格", "type":"grid"};
               execf(layoutId, comp);

src/view/portal/PortalIndexCustomiz.vue

@@ -99,6 +99,10 @@ export default {
         this.$refs['layoutBottomForm'].showPanel(comp);
         this.$refs['layoutRightForm'].closeproperty();
     },
+    hidePanel(){
+      this.$refs['layoutRightForm'].closeproperty();
+      this.$refs['layoutBottomForm'].closeDatapanel();
+    },
     showPropPanel(comp){
       this.$refs['layoutBottomForm'].closeDatapanel();
       this.$refs['layoutRightForm'].showPanel(comp);

src/view/portal/data/Box.vue

@@ -41,6 +41,9 @@ export default {
     boxView(){
       this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].boxView();
     },
+    setUpdate(){
+      this.$parent.$parent.isupdate = true;
+    },
     bindBoxEvent(){
       let ts = this;
       $("#boxDataPanel .h_ctx").droppable({
@@ -86,6 +89,7 @@ export default {
           json.name = node.text;
           ts.boxView();
           ts.$forceUpdate();
+          ts.setUpdate();
         }
       });
     }

src/view/portal/view/Chart.vue

@@ -0,0 +1,93 @@
+<script>
+import {baseUrl, ajax, loopChartJson} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+import { Loading } from 'element-ui'
+import * as echartsUtils from '@/common/echartsUtils'
+
+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', {attrs:{id:"ct_"+comp.id}, style:{width:'100%', height:"250px"}});
+    }else{
+      return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
+    }
+  },
+  mounted(){
+    this.chartView();
+    //放入window对象
+    window.echartsUtils = echartsUtils;
+    var echarts = require('echarts');
+    window.echarts = echarts;
+  },
+  computed: {
+  },
+  methods: {
+    chartView(){
+      let ts = this;
+      let json = this.comp;
+
+      if(json.kpiJson[0] == null){
+        return;
+      }
+      if(json.chartJson.type == "scatter" && json.kpiJson[1] == null  ){
+        return;
+      }
+      if(json.chartJson.type == "bubble" && json.kpiJson[2] == null  ){
+        return;
+      }
+
+      json = JSON.parse(JSON.stringify(json));
+	    //json.portalParams = pageInfo.params;
+      let loadingInstance = Loading.service({fullscreen:false, target:document.querySelector('#c_'+json.id+" div.ccctx")});
+      ajax({
+        url:"portal/ChartView.action",
+        type:"POST",
+        data:JSON.stringify(json),
+        postJSON:true,
+        success:(resp)=>{
+          ts.data = resp.rows;
+          loadingInstance.close();
+          //ts.$forceUpdate();
+          ts.$nextTick(()=>ts.showChart());
+        }
+      }, this);
+    },
+    /**
+     * 调用echarts渲染图形
+     */
+    showChart(){
+      let comp = this.comp;
+      let option = loopChartJson(this.data);
+      let myChart = echarts.getInstanceByDom(document.getElementById('ct_'+comp.id));
+      if(!myChart){
+        myChart = echarts.init(document.getElementById('ct_'+comp.id), "default");
+      }
+      myChart.setOption(option, true);
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>