From 5f823af95a37a8dc707df3ba0dcf88ea4f2ca6aa Mon Sep 17 00:00:00 2001
From: TaoJinlong <jinlong@fit2cloud.com>
Date: Wed, 17 Mar 2021 13:17:47 +0800
Subject: [PATCH 1/3] fix: sql

---
 backend/src/main/resources/db/migration/V12__panel_table.sql | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/backend/src/main/resources/db/migration/V12__panel_table.sql b/backend/src/main/resources/db/migration/V12__panel_table.sql
index 323be7b353..0a4fea5f3c 100644
--- a/backend/src/main/resources/db/migration/V12__panel_table.sql
+++ b/backend/src/main/resources/db/migration/V12__panel_table.sql
@@ -90,8 +90,7 @@ CREATE TABLE `panel_share` (
   `create_time` bigint(13) DEFAULT NULL COMMENT '创建日期',
   PRIMARY KEY (`share_id`) USING BTREE,
   UNIQUE KEY `UK_share_user_id` (`user_id`) USING BTREE,
-  UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE,
-
+  UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE
 ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='仪表板分享';
 
 

From 63fe122209af48dd56a09d256982f77a4f0eec55 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 17 Mar 2021 16:12:30 +0800
Subject: [PATCH 2/3] =?UTF-8?q?refactor(=E8=A7=86=E5=9B=BE):=20=E5=9B=BE?=
 =?UTF-8?q?=E5=BD=A2=E5=B1=9E=E6=80=A7=EF=BC=8C=E5=A2=9E=E5=8A=A0=20?=
 =?UTF-8?q?=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88=20=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/zh.js                       |  14 +-
 frontend/src/views/chart/chart/chart.js       |   6 +-
 .../views/chart/components/ChartComponent.vue |   7 +
 .../views/chart/components/ColorSelector.vue  | 130 ++++++++++++++++++
 frontend/src/views/chart/group/Group.vue      |   5 +
 frontend/src/views/chart/view/ChartEdit.vue   |  36 +++--
 6 files changed, 181 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/views/chart/components/ColorSelector.vue

diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 7d864f6b1d..46ef617959 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -602,7 +602,19 @@ export default {
     std: '标准差',
     var_samp: '方差',
     quick_calc: '快速计算',
-    show_name_set: '显示名设置'
+    show_name_set: '显示名设置',
+    color: '颜色',
+    color_case: '配色方案',
+    pls_slc_color_case: '请选择配色方案',
+    color_default: '默认',
+    color_retro: '复古',
+    color_future: '未来',
+    color_gradual: '渐变',
+    color_business: '商务',
+    color_gentle: '柔和',
+    color_elegant: '淡雅',
+    color_technology: '科技',
+    color_simple: '简洁'
   },
   dataset: {
     datalist: '数据集',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 7392c1b3d2..ee38bc088f 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -1,3 +1,7 @@
+export const DEFAULT_COLOR_CASE = {
+  value: 'default',
+  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+}
 export const BASE_BAR = {
   title: {
     text: ''
@@ -33,5 +37,5 @@ export const BASE_LINE = {
 }
 
 export default {
-  BASE_BAR, BASE_LINE
+  BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
 }
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 20c906e16b..3cf27335bc 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -40,6 +40,7 @@ export default {
         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
@@ -49,6 +50,12 @@ export default {
         })
       }
       // 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) {
diff --git a/frontend/src/views/chart/components/ColorSelector.vue b/frontend/src/views/chart/components/ColorSelector.vue
new file mode 100644
index 0000000000..383cd1ee4f
--- /dev/null
+++ b/frontend/src/views/chart/components/ColorSelector.vue
@@ -0,0 +1,130 @@
+<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>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 35a2a951e1..a7ce7ad8cc 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -211,6 +211,7 @@
 <script>
 import { post } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
+import { DEFAULT_COLOR_CASE } from '../chart/chart'
 
 export default {
   name: 'Group',
@@ -503,6 +504,10 @@ export default {
       view.name = this.table.name
       view.sceneId = this.currGroup.id
       view.tableId = this.table.id
+      view.type = 'bar'
+      view.customAttr = JSON.stringify({
+        color: DEFAULT_COLOR_CASE
+      })
       post('/chart/view/save', view).then(response => {
         this.selectTableFlag = false
         this.$store.dispatch('chart/setTableId', null)
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index ba202edd03..b65d2cdb7a 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -79,14 +79,16 @@
           <el-row>
             <div class="chart-type">
               <!--TODO 这里要替换好看点的图标-->
-              <el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px"/></el-radio>
+              <el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px" /></el-radio>
               <el-radio v-model="view.type" label="line">折线图</el-radio>
             </div>
           </el-row>
         </div>
         <div style="height: 45%;overflow:auto;border-top: 1px solid #e6e6e6">
           <el-tabs type="card" :stretch="true" class="tab-header">
-            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">TODO</el-tab-pane>
+            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
+              <color-selector :chart="chart" @onColorChange="onColorChange" />
+            </el-tab-pane>
             <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">TODO</el-tab-pane>
           </el-tabs>
         </div>
@@ -144,10 +146,13 @@ import draggable from 'vuedraggable'
 import DimensionItem from '../components/DimensionItem'
 import QuotaItem from '../components/QuotaItem'
 import ChartComponent from '../components/ChartComponent'
+// shape attr
+import { DEFAULT_COLOR_CASE } from '../chart/chart'
+import ColorSelector from '../components/ColorSelector'
 
 export default {
   name: 'ChartEdit',
-  components: { ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   data() {
     return {
       table: {},
@@ -158,7 +163,10 @@ export default {
         yaxis: [],
         show: true,
         type: 'bar',
-        title: ''
+        title: '',
+        customAttr: {
+          color: DEFAULT_COLOR_CASE
+        }
       },
       // 定义要被拖拽对象的数组
       arr1: [
@@ -224,17 +232,6 @@ export default {
         this.quota = response.data.quota
       })
     },
-    get(id) {
-      if (id) {
-        post('/chart/view/get/' + id, null).then(response => {
-          this.view = response.data
-          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-        })
-      } else {
-        this.view = {}
-      }
-    },
     save() {
       const view = JSON.parse(JSON.stringify(this.view))
       view.id = this.view.id
@@ -253,6 +250,7 @@ export default {
       })
       view.xaxis = JSON.stringify(view.xaxis)
       view.yaxis = JSON.stringify(view.yaxis)
+      view.customAttr = JSON.stringify(view.customAttr)
       post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         this.getData(response.data.id)
@@ -269,6 +267,7 @@ export default {
           this.view = response.data
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+          this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           // 将视图传入echart组件
           this.chart = response.data
         })
@@ -365,6 +364,11 @@ export default {
       //   }
       // })
       this.save()
+    },
+
+    onColorChange(val) {
+      this.view.customAttr.color = val
+      this.save()
     }
   }
 }
@@ -399,6 +403,7 @@ export default {
     border: solid 1px #eee;
     text-align: left;
     color: #606266;
+    background-color: rgba(35,46,64,.05);
     display: block;
   }
 
@@ -408,6 +413,7 @@ export default {
     border: solid 1px #eee;
     text-align: left;
     color: #606266;
+    background-color: rgba(35,46,64,.05);
   }
 
   .item + .item {

From 1f6f8503b47b78d2ce2408186f629e8bf0b1fbb5 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 17 Mar 2021 16:30:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=E8=AE=BE=E8=AE=A1=E7=BB=84=E4=BB=B6=E5=8F=8A=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=20=E5=A2=9E=E5=8A=A0=E9=9D=A2=E6=9D=BF=E4=B8=AD=20vie?=
 =?UTF-8?q?w=20=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/vue-drag-resize-rotate/index.vue  |  9 +++++++++
 frontend/src/store/modules/panel.js              | 13 ++++++++++++-
 frontend/src/views/panel/list/PanelList.vue      |  7 ++-----
 frontend/src/views/panel/list/PanelViewShow.vue  | 16 +++-------------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
index c019654d98..16686fc84e 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -69,6 +69,10 @@ export default {
   replace: true,
   name: 'VueDragResizeRotate',
   props: {
+    viewId: {
+      type: String,
+      default: ''
+    },
     className: {
       type: String,
       default: 'vdr'
@@ -596,6 +600,11 @@ export default {
   },
 
   methods: {
+    removeView(){
+      debugger
+      console.log(this.viewId);
+      this.$emit('removeView',this.viewId)
+    },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
       this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
diff --git a/frontend/src/store/modules/panel.js b/frontend/src/store/modules/panel.js
index a3c5d064e7..d90be32b5a 100644
--- a/frontend/src/store/modules/panel.js
+++ b/frontend/src/store/modules/panel.js
@@ -1,7 +1,10 @@
 
 const getDefaultState = () => {
   return {
-    panelName: ''
+    panelName: '',
+    panelInfo:{
+      name:''
+    }
   }
 }
 
@@ -10,12 +13,20 @@ const state = getDefaultState()
 const mutations = {
   setPanelName: (state, panelName) => {
     state.panelName = panelName
+  },
+  setPanelInfo: (state, panelInfo) => {
+    debugger
+    state.panelInfo = panelInfo
   }
 }
 
 const actions = {
   setPanelName({ commit }, panelName) {
     commit('setPanelName', panelName)
+  },
+  setPanelInfo({ commit }, panelInfo) {
+    debugger
+    commit('setPanelInfo', panelInfo)
   }
 }
 
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 3de67d91e2..97b7b0e1e0 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -389,12 +389,9 @@ export default {
     },
 
     nodeClick(data, node) {
-      // console.log(data);
-      // console.log(node);
       if (data.nodeType === 'panel') {
-        this.sceneMode = true
         this.currGroup = data
-        this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
+        this.$store.dispatch('panel/setPanelInfo', data)
       }
       if (node.expanded) {
         this.expandedArray.push(data.id)
@@ -477,7 +474,7 @@ export default {
     panelDefaultClick(data, node) {
       console.log(data)
       console.log(node)
-      this.$store.dispatch('panel/setPanelName', data.name)
+      this.$store.dispatch('panel/setPanelInfo', data)
       // 切换view
       this.$emit('switchComponent', { name: 'PanelView' })
     },
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index c8dd93f61a..8295a524de 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -34,6 +34,7 @@
       <el-col class="panel-design">
         <!--TODO 仪表盘设计公共设置区域-->
         <el-row class="panel-design-head">
+          <span style="float: left;line-height: 40px; color: gray">名称：{{panelInfo.name}}</span>
           <span style="float: right;line-height: 40px;">
             <el-button size="mini">
               背景图
@@ -126,19 +127,8 @@ export default {
     }
   },
   computed: {
-    tableId() {
-      // console.log(this.$store.state.chart.tableId);
-      this.initTableData(this.$store.state.chart.tableId)
-      return this.$store.state.chart.tableId
-    },
-    sceneId() {
-      // console.log(this.$store.state.chart.sceneId);
-      return this.$store.state.chart.sceneId
-    },
-    vId() {
-      // console.log(this.$store.state.chart.viewId);
-      this.getData(this.$store.state.chart.viewId)
-      return this.$store.state.chart.viewId
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
     }
 
   },