重构

src/view/portal/LayoutRight.vue

@@ -10,6 +10,7 @@
           <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>
+            <pchart v-if="showChart" ref="chartForm" :comp="comp"></pchart>
           </div>
         </div>
       </div>
@@ -21,10 +22,11 @@ import $ from 'jquery'
 import * as utils from './Utils'
 import pbox from './prop/Box'
 import ptext from './prop/Text'
+import pchart from './prop/Chart'
 
 export default {
   components:{
-    pbox,ptext
+    pbox,ptext,pchart
   },
   props:{
       pageInfo:{
@@ -69,6 +71,7 @@ export default {
         this.$nextTick(()=> this.$refs['boxForm'].init());
       }else if(comp.type === 'chart'){
         this.showChart = true;
+        this.$nextTick(()=>this.$refs['chartForm'].init());
       }else if(comp.type ==='grid'){
         this.showGrid = true;
       }else if(comp.type === 'table'){

src/view/portal/Utils.js

@@ -53,6 +53,10 @@ export const rates = [{
 	"value":"100000000"
 }];
 
+export const pielabels = [{"text":"名称","value":"n"},{"text":"名称+值","value":"nv"},{"text":"名称+比例","value":"np"}];
+
+export const legendpos = [{text: '右上', value: 'righttop'},{text: '中上', value: 'centertop'},{text: '中下', value: 'centerbottom'}];
+
 export const msginfo = (msg, type)=>{
 	if(!type || type === 'error'){
 		Message.error({message:msg, type:"error",showClose: true});

src/view/portal/prop/Chart.vue

@@ -0,0 +1,260 @@
+<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>
+        <template v-if="ctp != 'gauge'">
+          <el-form-item label="是否隐藏图例" label-width="170px">
+            <el-switch v-model="prop.showLegend" @change="changevalue('showLegend')"></el-switch>
+          </el-form-item>
+          <el-form-item label="图例位置" label-width="70px">
+              <el-select v-model="prop.legendpos" placeholder="请选择" @change="changevalue('legendpos')">
+                <el-option
+                  v-for="item in opts.legendpos"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item label="排列方式" label-width="100px">
+            <el-radio-group v-model="prop.legendLayout" size="mini" @change="changevalue('legendLayout')">
+            <el-radio-button label="vertical">垂直</el-radio-button>
+            <el-radio-button label="horizontal">水平</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </template>
+        <template v-if="ctp == 'line' || ctp == 'area' || ctp == 'radar'">
+         <el-form-item label="是否禁用描点" label-width="170px">
+          <el-switch v-model="prop.markerEnabled" @change="changevalue('markerEnabled')"></el-switch>
+         </el-form-item>
+        </template>
+         <template v-if="ctp == 'line' || ctp == 'column' || ctp == 'area' || ctp == 'bar' || ctp =='scatter' || ctp == 'bubble'">
+          <el-form-item label="左间距" label-width="70px">
+            <el-slider v-model="prop.marginLeft" :max="300" :min="1" @change="changevalue('marginLeft')"></el-slider>
+          </el-form-item>
+          <el-form-item label="右间距" label-width="70px">
+            <el-slider v-model="prop.marginRight" :max="300" :min="1" @change="changevalue('marginRight')"></el-slider>
+          </el-form-item>
+          <el-form-item label="是否显示值" label-width="170px">
+            <el-switch v-model="prop.dataLabel" @change="changevalue('dataLabel')"></el-switch>
+          </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')">
+                      <el-option
+                        v-for="item in opts.pielabels"
+                        :key="item.value"
+                        :label="item.text"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+          </template>
+      </el-collapse-item>
+      <el-collapse-item title="横轴" name="3">
+        <el-form-item label="标题" label-width="70px">
+          <el-input v-model="prop.xdispName" @blur="changevalue('xdispName')"></el-input>
+        </el-form-item>
+        <el-form-item label="显示间隔" label-width="70px">
+          <el-slider v-model="prop.tickInterval" :max="20" :min="0" @change="changevalue('tickInterval')"></el-slider>
+        </el-form-item>
+         <el-form-item label="旋转角度" label-width="70px">
+          <el-slider v-model="prop.routeXaxisLable" :max="360" :min="0" @change="changevalue('routeXaxisLable')"></el-slider>
+        </el-form-item>
+        <el-form-item label="取Top" label-width="70px">
+          <el-slider v-model="prop.top" :max="100" :min="1" @change="changevalue('top')"></el-slider>
+        </el-form-item>
+      </el-collapse-item>
+       <el-collapse-item title="纵轴" name="2">
+             <el-form-item label="标题" label-width="70px">
+              <el-input v-model="prop.ydispName" @blur="changevalue('ydispName')"></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>
+            <template v-if="!(ctp == 'pie' || ctp == 'scatter' || ctp == 'bubble' || ctp == 'map' || ctp == 'radar')">
+              <el-form-item label="最小值" label-width="80px">
+                <el-input-number v-model="prop.min" @change="changevalue('min')" :precision="2"></el-input-number>
+              </el-form-item>
+            </template>
+            <template v-if="ctp == 'gauge'">
+              <el-form-item label="最大值" label-width="80px">
+                  <el-input-number v-model="prop.max" @change="changevalue('max')" :precision="2"></el-input-number>
+                </el-form-item>
+            </template>
+            <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-collapse-item>
+       <template v-if="isy2()">
+        <el-collapse-item title="第二纵轴" name="4">
+            <el-form-item label="标题" label-width="70px">
+              <el-input v-model="prop.y2dispName" @blur="changevalue('y2dispName')"></el-input>
+            </el-form-item>
+            <el-form-item label="单位" label-width="70px">
+                <el-input v-model="prop.unit2" @blur="changevalue('unit2')"></el-input>
+              </el-form-item>
+              <el-form-item label="格式化" label-width="70px">
+                <el-select v-model="prop.fmt2" placeholder="请选择" @change="changevalue('fmt2')">
+                    <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.rate2" placeholder="请选择" @change="changevalue('rate2')">
+                    <el-option
+                      v-for="item in opts.rates"
+                      :key="item.value"
+                      :label="item.text"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+              </el-form-item>
+              <template v-if="(ctp == 'column' || ctp == 'line') && (typeIndex==2 || typeIndex==4)">
+              <el-form-item label="合并数据" label-width="170px">
+                <el-switch v-model="prop.mergeData" @change="changevalue('mergeData')"></el-switch>
+              </el-form-item>
+              </template>
+        </el-collapse-item>
+       </template>
+    </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,
+        default:{}
+      }
+  },
+  data(){
+    return {
+      activeName:"1",
+      prop:{
+        title:null,
+        unit:null,
+        fmt:null,
+        rate:null,
+        showLegend:true,
+        legendLayout:"horizontal",
+        markerEnabled:false,
+        marginLeft:65,
+        marginRight:10,
+        dataLabel:false,
+        xdispName:"",
+        tickInterval:null,
+        routeXaxisLable:null,
+        top:null,
+        ydispName:"",
+        min:null,
+        max:null,
+        labelType:null,
+        y2dispName:null,
+        unit2:null,
+        fmt2:null,
+        rate2:null,
+        mergeData:null
+      },
+      ctp:null, //图形类型
+      typeIndex:null, //选择的第几个图
+      opts:{
+        fmt:utils.fmtJson,
+        rates: utils.rates,
+        legendpos:utils.legendpos,
+        pielabels:utils.pielabels
+      }
+    }
+  },
+  mounted(){
+    
+  },
+  computed: {
+  },
+  methods: {
+    //是否显示y2
+    isy2(){
+      let ctp = this.ctp;
+      let typeIndex = this.typeIndex;
+      if(ctp =="scatter" || ctp == "bubble"){  	//散点图或气泡图需要y2轴的属性
+        return true;
+      }
+      if((ctp == 'column' || ctp == 'line') && (typeIndex==2 || typeIndex==4)){   //双坐标设置第二坐标
+        return true;
+      }
+    },
+    init(){
+      let p = this.prop;
+      let c = this.comp;
+      p.title = c.name;
+      this.ctp = c.chartJson.type;
+      this.typeIndex = c.chartJson.typeIndex;
+    },
+    chartView(){
+      this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].chartView();
+    },
+    compRender(){
+      this.$parent.$parent.$refs['optarea'].$forceUpdate();
+    },
+    changevalue(prop){
+      let c = this.comp;
+      let v = this.prop[prop];
+      let col = prop;
+      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"){
+        c.chartJson[prop] = v;
+        this.chartView();
+      }
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/prop/Text.vue

@@ -8,7 +8,7 @@
             <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-form-item label="位置" label-width="80px">
               <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>

src/view/portal/view/Chart.vue

@@ -84,6 +84,10 @@ export default {
   },
   watch: {
     
+  },
+  beforeDestroy(){
+    delete window.echartsUtils;
+    delete window.echarts;
   }
 }
 </script>