feat:增加仪表盘设计组件及设计 自适应view 组件

backend/src/main/java/io/dataease/base/domain/PanelDesign.java

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class PanelDesign implements Serializable {
+    private String id;
+
+    private String panelId;
+
+    private String componentId;
+
+    private String componentStyle;
+
+    private String componentType;
+
+    private String componentDetails;
+
+    private Long createTime;
+
+    private Long updateTime;
+
+    private String createPersion;
+
+    private String updatePersion;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.java

+package io.dataease.base.mapper;
+
+import io.dataease.base.domain.PanelDesign;
+import io.dataease.base.domain.PanelDesignExample;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface PanelDesignMapper {
+    long countByExample(PanelDesignExample example);
+
+    int deleteByExample(PanelDesignExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(PanelDesign record);
+
+    int insertSelective(PanelDesign record);
+
+    List<PanelDesign> selectByExample(PanelDesignExample example);
+
+    PanelDesign selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") PanelDesign record, @Param("example") PanelDesignExample example);
+
+    int updateByExample(@Param("record") PanelDesign record, @Param("example") PanelDesignExample example);
+
+    int updateByPrimaryKeySelective(PanelDesign record);
+
+    int updateByPrimaryKey(PanelDesign record);
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.java

+package io.dataease.base.mapper.ext;
+
+
+public interface ExtPanelDesignMapper {
+
+}

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.base.mapper.ext.ExtPanelDesignMapper">
+  <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelDesignDTO" extends="io.dataease.base.mapper.PanelDesignMapper.BaseResultMap">
+
+
+  </resultMap>
+
+</mapper>

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java

@@ -13,5 +13,7 @@ public interface ExtPanelGroupMapper {
     //会级联删除pid 下的所有数据
     int deleteCircle(@Param("pid") String pid);
 
+    PanelGroupDTO panelGroup(String id);
+
 
 }

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml

@@ -2,10 +2,15 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.dataease.base.mapper.ext.ExtPanelGroupMapper">
 
-  <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelGroupDTO" extends="io.dataease.base.mapper.PanelGroupMapper.BaseResultMap">
+    <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelGroupDTO"
+               extends="io.dataease.base.mapper.PanelGroupMapper.BaseResultMap">
         <result column="label" jdbcType="VARCHAR" property="label"/>
     </resultMap>
 
+    <select id="panelGroup" resultMap="BaseResultMapDTO">
+        select panel_group.*,panel_group.name as label from panel_group where id =#{id}
+    </select>
+
     <select id="panelGroupList" resultMap="BaseResultMapDTO">
         select panel_group.*,panel_group.name as label from panel_group
         <where>

backend/src/main/java/io/dataease/controller/CommonFilesController.java

@@ -17,6 +17,11 @@ public class CommonFilesController {
 
     @GetMapping("/images/{imageId}")
     public ResponseEntity<byte[]> image(@PathVariable("imageId") String imageId) {
-        return commonFilesService.getImageById(imageId);
+        return commonFilesService.getImageById(imageId,null);
+    }
+
+    @GetMapping("/images/{imageId}/{defaultImage}")
+    public ResponseEntity<byte[]> image(@PathVariable("imageId") String imageId,@PathVariable("defaultImage") String defaultImage) {
+        return commonFilesService.getImageById(imageId,defaultImage);
     }
 }

backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java

+package io.dataease.controller.panel;
+
+import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.service.panel.PanelGroupService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@RestController
+@RequestMapping("panel/design")
+public class PanelDesignController {
+
+    @Resource
+    private PanelGroupService panelGroupService;
+
+//    @GetMapping("/find/{id}")
+//    public void deleteCircle(@PathVariable String id) {
+//        panelGroupService.deleteCircle(id);
+//    }
+
+}

backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java

@@ -45,4 +45,10 @@ public class PanelGroupController {
     public void deleteCircle(@PathVariable String id) {
         panelGroupService.deleteCircle(id);
     }
+
+    @GetMapping("/findOne/{id}")
+    public PanelGroupDTO findOne(@PathVariable String id) throws Exception {
+        return panelGroupService.findOne(id);
+    }
+
 }

backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java

+package io.dataease.dto.panel;
+
+import io.dataease.base.domain.PanelDesign;
+import io.dataease.dto.chart.ChartViewDTO;
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-17
+ * Description:
+ */
+@Data
+public class PanelDesignDTO extends PanelDesign {
+
+    //当前视图是否在仪表盘中显示
+    private boolean keepFlag = false;
+
+    private ChartViewDTO chartView;
+
+    private Object systemComponent;
+
+    public PanelDesignDTO() {
+
+    }
+    public PanelDesignDTO(ChartViewDTO chartView) {
+        this.chartView=chartView;
+    }
+
+}

backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java

 package io.dataease.dto.panel;
 
 import io.dataease.base.domain.PanelGroup;
-import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.chart.ChartViewDTO;
 import lombok.Data;
 
+import java.util.ArrayList;
 import java.util.List;
 
 /**
@@ -17,4 +18,10 @@ public class PanelGroupDTO extends PanelGroup {
     private String label;
 
     private List<PanelGroupDTO> children;
+
+    //仪表盘组件样式设计
+    private List<PanelDesignDTO> panelDesigns = new ArrayList<>();
+
+    private List<ChartViewDTO> viewsUsable = new ArrayList<>();
+
 }

backend/src/main/java/io/dataease/service/CommonFilesService.java

 package io.dataease.service;
 
 import io.dataease.base.domain.FileMetadata;
+import org.apache.commons.lang.StringUtils;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
@@ -10,24 +11,27 @@ import javax.annotation.Resource;
 
 @Service
 public class CommonFilesService {
+    public final static String VIEW_DEFAULT_IMAGE="VIEW_DEFAULT_IMAGE";
 
     @Resource
     private FileService fileService;
 
 
-    public ResponseEntity<byte[]> getImageById(String imageId) {
+    public ResponseEntity<byte[]> getImageById(String imageId,String defaultImage) {
         byte[] bytes = null;
         MediaType contentType = MediaType.parseMediaType("application/octet-stream");
         FileMetadata fileMetadata = fileService.copyFile(imageId);
+        if (fileMetadata == null&& StringUtils.isNotEmpty(defaultImage)) {
+            imageId = defaultImage;
+            fileMetadata = fileService.copyFile(imageId);
+        }
         if (fileMetadata == null) {
             return null;
         }
-
         bytes = fileService.loadFileAsBytes(imageId);
         return ResponseEntity.ok()
                 .contentType(contentType)
                 .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileMetadata.getName() + "\"")
                 .body(bytes);
     }
-
 }

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

 package io.dataease.service.panel;
 
-import io.dataease.base.domain.DatasetGroup;
+import io.dataease.base.domain.*;
+import io.dataease.base.mapper.ChartViewMapper;
+import io.dataease.base.mapper.PanelDesignMapper;
 import io.dataease.base.mapper.PanelGroupMapper;
 import io.dataease.base.mapper.ext.ExtPanelGroupMapper;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.chart.ChartViewDTO;
 import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.panel.PanelDesignDTO;
 import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.service.chart.ChartViewService;
+import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.stereotype.Service;
 import org.springframework.util.Assert;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
@@ -24,10 +33,18 @@ import java.util.UUID;
 @Service
 public class PanelGroupService {
 
+    private Logger LOGGER = LoggerFactory.getLogger(this.getClass());
+
     @Resource
     private PanelGroupMapper panelGroupMapper;
     @Resource
     private ExtPanelGroupMapper extPanelGroupMapper;
+    @Resource
+    private PanelDesignMapper panelDesignMapper;
+    @Resource
+    private ChartViewService chartViewService;
+    @Resource
+    private ChartViewMapper chartViewMapper;
 
     public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
         List<PanelGroupDTO> panelGroupDTOList = extPanelGroupMapper.panelGroupList(panelGroupRequest);
@@ -69,4 +86,44 @@ public class PanelGroupService {
     }
 
 
+    public PanelGroupDTO findOne(String panelId) throws Exception{
+        PanelGroupDTO panelGroupDTO = extPanelGroupMapper.panelGroup(panelId);
+        Assert.notNull(panelGroupDTO, "未查询到仪表盘信息");
+        PanelDesignExample panelDesignExample = new PanelDesignExample();
+        panelDesignExample.createCriteria().andPanelIdEqualTo(panelId);
+        List<PanelDesign>  panelDesignList = panelDesignMapper.selectByExample(panelDesignExample);
+        if(CollectionUtils.isNotEmpty(panelDesignList)){
+            List<PanelDesignDTO> panelDesignDTOList = new ArrayList<>();
+            //TODO 加载所有视图和组件的数据
+            for(PanelDesign panelDesign:panelDesignList){
+                //TODO 获取view 视图数据
+                ChartViewDTO chartViewDTO = chartViewService.getData(panelDesign.getComponentId());
+                //TODO 获取systemComponent 系统组件数据（待开发）
+
+                PanelDesignDTO panelDesignDTO = new PanelDesignDTO(chartViewDTO);
+                BeanUtils.copyBean(panelDesignDTO,panelDesign);
+                panelDesignDTO.setKeepFlag(true);
+                panelDesignDTOList.add(panelDesignDTO);
+            }
+            panelGroupDTO.setPanelDesigns(panelDesignDTOList);
+        }
+        //获取所有可用的视图
+        panelGroupDTO.setViewsUsable(getUsableViews(panelId));
+        return panelGroupDTO;
+    }
+
+
+    public List<ChartViewDTO> getUsableViews(String panelId) throws Exception{
+        List<ChartViewDTO> chartViewDTOList = new ArrayList<>();
+        List<ChartView> allChartView = chartViewMapper.selectByExample(null);
+        Optional.ofNullable(allChartView).orElse(new ArrayList<>()).stream().forEach(chartView -> {
+            try {
+                chartViewDTOList.add(chartViewService.getData(chartView.getId()));
+            }catch (Exception e){
+                LOGGER.error("获取view详情出错："+chartView.getId(),e);
+            }
+        });
+        return chartViewDTOList;
+    }
+
 }

frontend/package.json

@@ -34,7 +34,8 @@
     "vue-router": "3.0.6",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
-    "webpack": "^4.46.0"
+    "webpack": "^4.46.0",
+    "vue-uuid": "2.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",

frontend/src/api/panel/panel.js

@@ -108,4 +108,11 @@ export function post(url, data) {
   })
 }
 
-export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree }
+export function get(url) {
+  return request({
+    url: url,
+    method: 'get'
+  })
+}
+
+export default {post,get,groupTree, defaultTree }

frontend/src/components/vue-drag-resize-rotate/index.vue

@@ -69,7 +69,11 @@ export default {
   replace: true,
   name: 'VueDragResizeRotate',
   props: {
-    viewId: {
+    preStyle: {
+      type: Object,
+      default: null
+    },
+    panelDesignId: {
       type: String,
       default: ''
     },
@@ -308,6 +312,8 @@ export default {
 
   data: function() {
     return {
+      styleInit:true,
+      styleCatch:{},
       left: this.x,
       top: this.y,
       right: null,
@@ -408,13 +414,21 @@ export default {
       }
     },
     style() {
-      return {
+      let newStyle ={};
+      if(this.styleInit && this.preStyle){
+        newStyle = this.preStyle;
+      }else{
+        newStyle ={
           transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
           width: this.computedWidth,
           height: this.computedHeight,
           zIndex: this.zIndex,
           ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
+        };
       }
+      this.styleInit = false;
+      this.$emit('newStyle', this.panelDesignId,newStyle);
+      return newStyle;
     },
     // 控制柄显示与否
     actualHandles() {
@@ -566,6 +580,14 @@ export default {
     this.resetBoundsAndMouseState()
   },
   mounted: function() {
+    //f2c 页面初始化后对样式重新赋值
+    if(this.preStyle){
+
+
+
+    }
+
+
     if (!this.enableNativeDrag) {
       this.$el.ondragstart = () => false
     }
@@ -601,9 +623,8 @@ export default {
 
   methods: {
     removeView(){
-      debugger
-      console.log(this.viewId);
-      this.$emit('removeView',this.viewId)
+      // console.log(this.panelDesignId);
+      this.$emit('removeView',this.panelDesignId)
     },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {

frontend/src/main.js

@@ -30,6 +30,10 @@ import UmyUi from 'umy-ui'
 import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
 Vue.use(UmyUi)
 
+// 引入vue-UUID组件
+import UUID from 'vue-uuid'
+Vue.use(UUID)
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

frontend/src/store/modules/panel.js

@@ -3,6 +3,7 @@ const getDefaultState = () => {
   return {
     panelName: '',
     panelInfo:{
+      id:null,
       name:''
     }
   }
@@ -15,7 +16,6 @@ const mutations = {
     state.panelName = panelName
   },
   setPanelInfo: (state, panelInfo) => {
-    debugger
     state.panelInfo = panelInfo
   }
 }
@@ -25,7 +25,6 @@ const actions = {
     commit('setPanelName', panelName)
   },
   setPanelInfo({ commit }, panelInfo) {
-    debugger
     commit('setPanelInfo', panelInfo)
   }
 }

frontend/src/views/chart/components/ChartComponent.vue

 <template>
   <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-    <div id="echart" style="width: 100%;height: 80vh;" />
+    <div :id="chartId" style="width: 100%;height: 100%;" />
   </div>
 </template>
 
@@ -13,6 +13,10 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    chartId: {
+      type: String,
+      required: false
     }
   },
   data() {
@@ -22,15 +26,21 @@ export default {
   },
   watch: {
     chart() {
+      debugger
+      this.drawEcharts()
+    },
+    resize() {
       this.drawEcharts()
     }
   },
   mounted() {
     // 基于准备好的dom，初始化echarts实例
-    this.myChart = this.$echarts.init(document.getElementById('echart'))
+    this.myChart = this.$echarts.init(document.getElementById(this.chartId))
+    this.drawEcharts()
   },
   methods: {
     drawEcharts() {
+      debugger
       const chart = this.chart
       let chart_option = {}
       // todo type
@@ -65,6 +75,11 @@ export default {
       window.onresize = function() {
         chart.resize()
       }
+    },
+    chartResize() {
+      // 指定图表的配置项和数据
+      const chart = this.myChart
+      chart.resize()
     }
   }
 }

frontend/src/views/panel/chart/chart.js

+export const DEFAULT_COLOR_CASE = {
+  value: 'default',
+  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+}
 export const BASE_BAR = {
   title: {
     text: ''
@@ -15,6 +19,23 @@ export const BASE_BAR = {
   series: []
 }
 
+export const BASE_LINE = {
+  title: {
+    text: ''
+  },
+  tooltip: {},
+  legend: {
+    data: []
+  },
+  xAxis: {
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: []
+}
+
 export default {
-  BASE_BAR
+  BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
 }

frontend/src/views/panel/components/ChartComponent.vue

+<template>
+  <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
+    <div id="echart" style="width: 100%;height: 80vh;" />
+  </div>
+</template>
+
+<script>
+import { BASE_BAR, BASE_LINE } from '../chart/chart'
+
+export default {
+  name: 'ChartComponent',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      myChart: {}
+    }
+  },
+  watch: {
+    chart() {
+      debugger
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    // 基于准备好的dom，初始化echarts实例
+    this.myChart = this.$echarts.init(document.getElementById('echart'))
+  },
+  methods: {
+    drawEcharts() {
+      debugger
+      const chart = this.chart
+      let chart_option = {}
+      // todo type
+      if (chart.type === 'bar') {
+        chart_option = JSON.parse(JSON.stringify(BASE_BAR))
+      } else if (chart.type === 'line') {
+        chart_option = JSON.parse(JSON.stringify(BASE_LINE))
+      }
+      // console.log(chart_option);
+      // 处理data
+      if (chart.data) {
+        chart_option.title.text = chart.title
+        chart_option.xAxis.data = chart.data.x
+        chart.data.series.forEach(function(y) {
+          chart_option.legend.data.push(y.name)
+          chart_option.series.push(y)
+        })
+      }
+      // console.log(chart_option);
+      // 处理shape attr
+      if (chart.customAttr) {
+        if (chart.customAttr.color) {
+          chart_option.color = chart.customAttr.color.colors
+        }
+      }
+      this.myEcharts(chart_option)
+    },
+    myEcharts(option) {
+      // 指定图表的配置项和数据
+      const chart = this.myChart
+      setTimeout(chart.setOption(option, true), 500)
+      window.onresize = function() {
+        chart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/panel/components/ColorSelector.vue

+<template>
+  <div>
+    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.color_case')" class="form-item">
+              <el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+                <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                  <div style="float: left">
+                    <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                  </div>
+                  <span style="margin-left: 4px;">{{ option.name }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+      <!--todo other color attr-->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      colorCases: [
+        {
+          name: this.$t('chart.color_default'),
+          value: 'default',
+          colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        },
+        {
+          name: this.$t('chart.color_retro'),
+          value: 'retro',
+          colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_elegant'),
+          value: 'elegant',
+          colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
+        },
+        {
+          name: this.$t('chart.color_future'),
+          value: 'future',
+          colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
+        },
+        {
+          name: this.$t('chart.color_gradual'),
+          value: 'gradual',
+          colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
+        },
+        {
+          name: this.$t('chart.color_simple'),
+          value: 'simple',
+          colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_business'),
+          value: 'business',
+          colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
+        },
+        {
+          name: this.$t('chart.color_gentle'),
+          value: 'gentle',
+          colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
+        },
+        {
+          name: this.$t('chart.color_technology'),
+          value: 'technology',
+          colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
+        }
+      ],
+      colorForm: {
+        colorCase: 'default'
+      }
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        this.colorForm.colorCase = chart.customAttr.color.value
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeColorCase() {
+      const that = this
+      const items = this.colorCases.filter(ele => {
+        return ele.value === that.colorForm.colorCase
+      })
+      this.$emit('onColorChange', {
+        value: items[0].value,
+        colors: items[0].colors
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{font-size: 12px}
+</style>

frontend/src/views/panel/components/DimensionItem.vue

+<template>
+  <span>
+    <el-dropdown trigger="click" size="mini">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis">
+          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-edit-outline">
+            item1
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete">
+            item2
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DimensionItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: inline-block;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+</style>

frontend/src/views/panel/components/QuotaItem.vue

+<template>
+  <span>
+    <el-dropdown trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis">
+          {{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-notebook-2">
+            <el-dropdown placement="right-start" size="mini" @command="summary">
+              <span class="el-dropdown-link">
+                {{ $t('chart.summary') }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('std')">{{ $t('chart.std') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('var_samp')">{{ $t('chart.var_samp') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-s-grid">
+            <el-dropdown placement="right-start" size="mini" @command="quickCalc">
+              <span class="el-dropdown-link">
+                {{ $t('chart.quick_calc') }}<span class="summary-span">(test)</span><i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeQuickCalc('none')">test</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+            <span>{{ $t('chart.show_name_set') }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+
+    <el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
+      <el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="itemForm.name" size="mini"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'QuotaItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      renameItem: false,
+      itemForm: {
+        name: ''
+      },
+      itemFormRules: {
+        name: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    summary(param) {
+      // console.log(param)
+      this.item.summary = param.type
+      this.$emit('onQuotaItemChange', this.item)
+    },
+    beforeSummary(type) {
+      return {
+        type: type
+      }
+    },
+    quickCalc(param) {
+
+    },
+    beforeQuickCalc(type) {
+      return {
+        type: type
+      }
+    },
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'rename':
+          this.showRename()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+    showRename() {
+      this.itemForm.name = this.item.name
+      this.renameItem = true
+    },
+    closeRename() {
+      this.renameItem = false
+      this.resetRename()
+    },
+    saveRename(param) {
+      this.item.name = param.name
+      this.$emit('onQuotaItemChange', this.item)
+      this.closeRename()
+    },
+    resetRename() {
+      this.itemForm = {
+        name: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: inline-block;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;;
+  }
+</style>