feat:主题设置

frontend/src/components/RightPanel/index.vue

@@ -63,7 +63,6 @@ export default {
     closeSidebar(evt) {
       const parent = evt.target.closest('.rightPanel')
       if (!parent) {
-        debugger
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
       }

frontend/src/components/canvas/components/Editor/ContextMenu.vue

@@ -47,7 +47,7 @@ export default {
       if (this.curComponent.component === 'user-view') {
         this.$store.dispatch('chart/setViewId', null)
         this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit' })
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
       }
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit')

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -81,9 +81,11 @@ export default {
       this.handleScaleChange()
     },
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
       return data
     },
     format(value, scale) {

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -96,9 +96,11 @@ export default {
       })
     },
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
       return data
     },
 

frontend/src/components/canvas/components/Editor/index.vue

@@ -3,10 +3,7 @@
     id="editor"
     class="editor"
     :class="{ edit: isEdit }"
-    :style="{
+    :style="customStyle"
-      width: changeStyleWithScale(canvasStyleData.width) + 'px',
-      height: changeStyleWithScale(canvasStyleData.height) + 'px',
-    }"
     @contextmenu="handleContextMenu"
     @mousedown="handleMouseDown"
   >
@@ -58,8 +55,8 @@
     </Shape>
     <!-- 右击菜单 -->
     <ContextMenu />
-    <!-- 标线 -->
+    <!-- 标线 (临时去掉标线 吸附等功能)-->
-    <MarkLine />
+    <!--    <MarkLine />-->
     <!-- 选中区域 -->
     <Area v-show="isShowArea" :start="start" :width="width" :height="height" />
   </div>
@@ -106,6 +103,29 @@ export default {
     }
   },
   computed: {
+    customStyle() {
+      let style = {
+        width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
+        height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px'
+      }
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image') {
+          style = {
+            width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
+            height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+          }
+        } else {
+          style = {
+            width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
+            height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
+            background: this.canvasStyleData.panel.color
+          }
+        }
+      }
+
+      return style
+    },
     panelInfo() {
       return this.$store.state.panel.panelInfo
     },
@@ -355,6 +375,7 @@ export default {
     position: relative;
     background: #fff;
     margin: auto;
+    background-size:100% 100% !important;
 
     .lock {
         opacity: .5;

frontend/src/components/canvas/components/Toolbar.vue

@@ -205,6 +205,7 @@ export default {
         panelStyle: JSON.stringify(this.canvasStyleData),
         panelData: JSON.stringify(this.componentData)
       }
+      debugger
       post('panel/group/save', requestInfo, () => {})
       this.$message.success('保存成功')
     },

frontend/src/components/canvas/custom-component/UserView.vue

@@ -8,6 +8,20 @@
 
 import { post } from '@/api/panel/panel'
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
+import {
+  DEFAULT_COLOR_CASE,
+  DEFAULT_SIZE,
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_LEGEND_STYLE,
+  DEFAULT_LABEL,
+  DEFAULT_TOOLTIP,
+  DEFAULT_XAXIS_STYLE,
+  DEFAULT_YAXIS_STYLE,
+  DEFAULT_BACKGROUND_COLOR
+} from '@/views/chart/chart/chart'
 
 export default {
   name: 'UserView',
@@ -29,11 +43,61 @@ export default {
   watch: {
     filter(val) {
       this.getData(this.element.propValue.viewId)
+    },
+    // deep监听panel 如果改变 提交到 store
+    canvasStyleData: {
+      handler(newVal, oldVla) {
+        debugger
+        // this.chart.viewFirst == false 优先使用仪表盘样式
+        if (!this.chart.viewFirst) {
+          this.chart = {
+            ...this.chart,
+            customAttr: this.canvasStyleData.chart.customAttr,
+            customStyle: this.canvasStyleData.chart.customStyle
+          }
+        }
+      },
+      deep: true
     }
   },
+  computed: mapState([
+    'canvasStyleData'
+  ]),
+  // computed: mapState({
+  //   canvasStyleData: function(state) {
+  //     debugger
+  //     // this.chart.viewFirst == false 优先使用仪表盘样式
+  //     if (!this.chart.viewFirst) {
+  //       this.chart.customAttr = state.canvasStyleData.chart.customAttr
+  //       this.chart.customStyle = state.canvasStyleData.chart.customStyle
+  //     }
+  //   }
+  //
+  // }),
   data() {
     return {
-      chart: {}
+      chart: {
+        viewFirst: false,
+        xaxis: [],
+        yaxis: [],
+        show: true,
+        type: 'panel',
+        title: '',
+        customAttr: {
+          color: DEFAULT_COLOR_CASE,
+          size: DEFAULT_SIZE,
+          label: DEFAULT_LABEL,
+          tooltip: DEFAULT_TOOLTIP
+        },
+        customStyle: {
+          text: DEFAULT_TITLE_STYLE,
+          legend: DEFAULT_LEGEND_STYLE,
+          xAxis: DEFAULT_XAXIS_STYLE,
+          yAxis: DEFAULT_YAXIS_STYLE,
+          background: DEFAULT_BACKGROUND_COLOR
+        },
+        customFilter: []
+      }
     }
   },
   created() {

frontend/src/components/canvas/index.vue

@@ -69,9 +69,11 @@ export default {
     },
 
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = generateID()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
 
       return data
     },

frontend/src/store/index.js

@@ -20,6 +20,10 @@ import layer from '@/components/canvas/store/layer'
 import snapshot from '@/components/canvas/store/snapshot'
 import lock from '@/components/canvas/store/lock'
 
+import {
+  DEFAULT_COMMON_CANVAS_STYLE
+} from '@/views/panel/panel'
+
 Vue.use(Vuex)
 
 const data = {
@@ -34,17 +38,14 @@ const data = {
     ...lock.state,
 
     editMode: 'edit', // 编辑器模式 edit preview
-    canvasStyleData: { // 页面全局数据
+    canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据  //扩展公共样式 公共的仪表盘样式，用来实时响应样式的变化
-      width: 1200,
-      height: 740,
-      scale: 100
-    },
     componentData: [], // 画布组件数据
     curComponent: null,
     curComponentIndex: null,
     // 点击画布时是否点中组件，主要用于取消选中组件用。
     // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
-    isClickComponent: false
+    isClickComponent: false,
+    canvasCommonStyleData: DEFAULT_COMMON_CANVAS_STYLE
   },
   mutations: {
     ...animation.mutations,
@@ -121,7 +122,6 @@ const data = {
       if (index === undefined) {
         index = state.curComponentIndex
       }
-
       state.componentData.splice(index, 1)
     }
   },

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

@@ -36,25 +36,20 @@ export default {
     }
   },
   watch: {
-    chart() {
+    chart: {
-      this.drawEcharts()
+      handler(newVal, oldVla) {
+        debugger
+        console.log('chart,watch')
+        this.preDraw()
+      },
+      deep: true
     },
     resize() {
       this.drawEcharts()
     }
   },
   mounted() {
-    // 基于准备好的dom，初始化echarts实例
+    this.preDraw()
-    console.log('chartId:' + this.chartId)
-    // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表盘有重复id情况
-    new Promise((resolve) => { resolve() }).then(() => {
-      //	此dom为echarts图标展示dom
-      this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
-      if (!this.myChart) {
-        this.myChart = this.$echarts.init(document.getElementById(this.chartId))
-      }
-      this.drawEcharts()
-    })
 
     // 监听元素变动事件
     eventBus.$on('resizing', (componentId) => {
@@ -62,6 +57,19 @@ export default {
     })
   },
   methods: {
+    preDraw() {
+      // 基于准备好的dom，初始化echarts实例
+      console.log('chartId:' + this.chartId)
+      // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表盘有重复id情况
+      new Promise((resolve) => { resolve() }).then(() => {
+        //	此dom为echarts图标展示dom
+        this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+        if (!this.myChart) {
+          this.myChart = this.$echarts.init(document.getElementById(this.chartId))
+        }
+        this.drawEcharts()
+      })
+    },
     drawEcharts() {
       const chart = this.chart
       let chart_option = {}

frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue

@@ -44,7 +44,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customStyle) {
-          const customStyle = JSON.parse(chart.customStyle)
+          let customStyle = null
+          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+          } else {
+            customStyle = JSON.parse(chart.customStyle)
+          }
           if (customStyle.background) {
             this.colorForm = customStyle.background
           }

frontend/src/views/chart/components/component-style/LegendSelector.vue

@@ -88,7 +88,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customStyle) {
-          const customStyle = JSON.parse(chart.customStyle)
+          let customStyle = null
+          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+          } else {
+            customStyle = JSON.parse(chart.customStyle)
+          }
           if (customStyle.legend) {
             this.legendForm = customStyle.legend
           }

frontend/src/views/chart/components/component-style/TitleSelector.vue

@@ -67,14 +67,23 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customStyle) {
-          const customStyle = JSON.parse(chart.customStyle)
+          let customStyle = null
-          if (customStyle.text) {
+          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            this.titleForm = customStyle.text
+            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+          } else {
+            customStyle = JSON.parse(chart.customStyle)
+          }
+          if (customStyle.background) {
+            this.colorForm = customStyle.background
           }
         }
       }
     }
   },
+  created() {
+    debugger
+    console.log(JSON.stringify(this.chart))
+  },
   mounted() {
     this.init()
   },

frontend/src/views/chart/components/component-style/XAxisSelector.vue

@@ -56,7 +56,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customStyle) {
-          const customStyle = JSON.parse(chart.customStyle)
+          let customStyle = null
+          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+          } else {
+            customStyle = JSON.parse(chart.customStyle)
+          }
           if (customStyle.xAxis) {
             this.axisForm = customStyle.xAxis
           }

frontend/src/views/chart/components/component-style/YAxisSelector.vue

@@ -56,7 +56,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customStyle) {
-          const customStyle = JSON.parse(chart.customStyle)
+          let customStyle = null
+          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+          } else {
+            customStyle = JSON.parse(chart.customStyle)
+          }
           if (customStyle.yAxis) {
             this.axisForm = customStyle.yAxis
           }

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -112,7 +112,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customAttr) {
-          const customAttr = JSON.parse(chart.customAttr)
+          let customAttr = null
+          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+          } else {
+            customAttr = JSON.parse(chart.customAttr)
+          }
           if (customAttr.color) {
             this.colorForm = customAttr.color
           }

frontend/src/views/chart/components/shape-attr/LabelSelector.vue

@@ -73,7 +73,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customAttr) {
-          const customAttr = JSON.parse(chart.customAttr)
+          let customAttr = null
+          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+          } else {
+            customAttr = JSON.parse(chart.customAttr)
+          }
           if (customAttr.label) {
             this.labelForm = customAttr.label
           }

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -138,7 +138,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customAttr) {
-          const customAttr = JSON.parse(chart.customAttr)
+          let customAttr = null
+          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+          } else {
+            customAttr = JSON.parse(chart.customAttr)
+          }
           if (customAttr.size) {
             this.sizeForm = customAttr.size
           }

frontend/src/views/chart/components/shape-attr/TooltipSelector.vue

@@ -82,7 +82,12 @@ export default {
       handler: function() {
         const chart = JSON.parse(JSON.stringify(this.chart))
         if (chart.customAttr) {
-          const customAttr = JSON.parse(chart.customAttr)
+          let customAttr = null
+          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+          } else {
+            customAttr = JSON.parse(chart.customAttr)
+          }
           if (customAttr.tooltip) {
             this.tooltipForm = customAttr.tooltip
           }

frontend/src/views/chart/view/ChartEdit.vue

@@ -441,6 +441,7 @@ export default {
           this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
           // 将视图传入echart组件
           this.chart = response.data
+          console.log(JSON.stringify(this.chart))
         })
       } else {
         this.view = {}

frontend/src/views/link/view/index.vue

@@ -36,9 +36,11 @@ export default {
       })
     },
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
       return data
     }
 

frontend/src/views/panel/GrantAuth/shareTree.vue

@@ -51,9 +51,11 @@ export default {
       })
     },
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
 
       return data
     }

frontend/src/views/panel/SubjectSetting/BackgroundSelector.vue

@@ -1,183 +0,0 @@
-<template>
-  <div>
-    <div style="width: 100%;">
-      <el-popover
-        placement="right"
-        width="250"
-        trigger="click"
-      >
-        <el-col>
-          <el-row>
-            <el-col :span="6">
-              <el-radio v-model="backgroundForm.backgroundType" label="color">颜色</el-radio>
-            </el-col>
-            <el-col :span="18">
-              <colorPicker v-model="backgroundForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">
-              <el-radio v-model="backgroundForm.backgroundType" label="image">图片</el-radio>
-            </el-col>
-            <el-col :span="18">
-              <el-upload
-                v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
-                class="avatar-uploader"
-                action=""
-                accept=".jpeg,.jpg,.png,.gif"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :on-exceed="handleExceed"
-                :on-error="handleError"
-                :http-request="handleAvatarSuccess"
-                :on-change="onChange"
-              >
-                <img v-if="imageUrl" :src="imageUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon" />
-              </el-upload>
-            </el-col>
-          </el-row>
-        </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">背景<i class="el-icon-setting el-icon--right" /></el-button>
-      </el-popover>
-    </div>
-  </div>
-</template>
-
-<script>
-import { DEFAULT_BACKGROUND_COLOR } from '@/views/panel/panel'
-
-export default {
-  name: 'BackgroundSelector',
-  props: {
-  },
-  data() {
-    return {
-      backgroundForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
-      systemParams: [],
-      filesTmp: [],
-      suffixes: new Set(['png', 'jpg', 'gif', 'jpeg']),
-      files: [],
-      imageUrl: ''
-    }
-  },
-  watch: {
-
-  },
-  mounted() {
-  },
-  methods: {
-    handleAvatarSuccess(file) {
-      console.log('file.name')
-      // var _this = this
-      // var event = event || window.event
-      // file = event.target.files[0]
-      // var reader = new FileReader()
-      // // 转base64
-      // reader.onload = function(e) {
-      //   _this.imageUrl = e.target.result // 将图片路径赋值给src
-      //   _this.guideImage = e.target.result // 将图片路径赋值给src
-      // }
-      // reader.readAsDataURL(file)
-    },
-    onChange(file, fileList) {
-      var _this = this
-      const reader = new FileReader()
-      reader.onload = function() {
-        _this.imageUrl = reader.result
-      }
-      reader.readAsDataURL(file.raw)
-    },
-    changeBackgroundStyle() {
-      this.$emit('onChangeBackgroundForm', this.backgroundForm)
-    },
-    handleExceed(files, fileList) {
-      this.$warning(this.$t('test_track.case.import.upload_limit_count'))
-    },
-    handleError(e) {
-      this.$warning('error' + JSON.stringify(e))
-    },
-    uploadValidate(file) {
-      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
-      if (!this.suffixes.has(suffix)) {
-        this.$warning(this.$t('test_track.case.import.upload_limit_format'))
-        return false
-      }
-
-      if (file.size / 1024 / 1024 > 5) {
-        this.$warning(this.$t('test_track.case.import.upload_limit_size'))
-        return false
-      }
-      this.errList = []
-      return true
-    },
-    upload(file) {
-      this.imageUrl = file.url
-      const reader = new FileReader()
-      reader.onload = (res) => {
-        this.imageUrl.src = res.target.result
-      }
-      reader.readAsDataURL(file)
-    },
-    removeValue(paramKey) {
-      this.systemParams.forEach((systemParam) => {
-        if (systemParam.paramKey === paramKey) {
-          systemParam.fileName = null
-          systemParam.file = null
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .avatar-uploader>>>.el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader>>>.el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 100px;
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
-  }
-  .avatar {
-    width: 100px;
-    height: 60px;
-    display: block;
-  }
-
-  .shape-item{
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .form-item-slider>>>.el-form-item__label{
-    font-size: 12px;
-    line-height: 38px;
-  }
-  .form-item>>>.el-form-item__label{
-    font-size: 12px;
-  }
-  .el-select-dropdown__item{
-    padding: 0 20px;
-  }
-  span{
-    font-size: 12px
-  }
-  .el-form-item{
-    margin-bottom: 6px;
-  }
-</style>

frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="250"
+        trigger="click"
+      >
+        <el-col>
+          <el-row>
+            <el-col :span="6">
+              <el-radio v-model="panel.backgroundType" label="color">颜色</el-radio>
+            </el-col>
+            <el-col :span="18">
+              <colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
+            </el-col>
+          </el-row>
+          <el-row style="height: 60px;margin-top:10px;overflow: hidden">
+            <el-col :span="6">
+              <el-radio v-model="panel.backgroundType" label="image">图片</el-radio>
+            </el-col>
+            <el-col :span="18">
+              <el-upload
+                action=""
+                accept=".jpeg,.jpg,.png,.gif"
+                class="avatar-uploader"
+                list-type="picture-card"
+                :class="{disabled:uploadDisabled}"
+                :on-preview="handlePictureCardPreview"
+                :on-remove="handleRemove"
+                :http-request="upload"
+                :file-list="filesTmp"
+                :on-change="onChange"
+              >
+                <i class="el-icon-plus" />
+              </el-upload>
+              <el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
+                <img width="100%" :src="dialogImageUrl" alt="">
+              </el-dialog>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">背景<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
+export default {
+  name: 'BackgroundSelector',
+  data() {
+    return {
+      filesTmp: [],
+      imageUrl: '',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadDisabled: false,
+      panel: null
+    }
+  },
+  computed: mapState([
+    'canvasStyleData'
+  ]),
+  watch: {
+    // deep监听panel 如果改变 提交到 store
+    panel: {
+      handler(newVal, oldVla) {
+        debugger
+        const canvasStyleData = deepCopy(this.canvasStyleData)
+        canvasStyleData.panel = this.panel
+        this.$store.commit('setCanvasStyle', canvasStyleData)
+      },
+      deep: true
+    }
+  },
+  created() {
+    // 初始化赋值
+    this.panel = this.canvasStyleData.panel
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      this.uploadDisabled = false
+      this.panel.imageUrl = null
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    onChange(file, fileList) {
+      debugger
+      var _this = this
+      _this.uploadDisabled = true
+      const reader = new FileReader()
+      reader.onload = function() {
+        _this.panel.imageUrl = reader.result
+      }
+      reader.readAsDataURL(file.raw)
+    },
+    upload(file) {
+      console.log('this is upload')
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar-uploader>>>.el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+  .avatar-uploader>>>.el-upload-list li{
+    width: 100px !important;
+    height: 60px !important;
+  }
+  .disabled>>>.el-upload--picture-card {
+    display: none;
+  }
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .form-item-slider>>>.el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+  }
+  .form-item>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .el-select-dropdown__item{
+    padding: 0 20px;
+  }
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>

frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="250"
+        trigger="click"
+      >
+        <el-col>
+          <el-radio v-model="panelStyleForm.gap" label="yes" @change="onChangePanelStyle">有间隙</el-radio>
+          <el-radio v-model="panelStyleForm.gap" label="no" @change="onChangePanelStyle">无间隙</el-radio>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">组件间隙<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
+export default {
+  name: 'BackgroundSelector',
+  props: {
+  },
+  data() {
+    return {
+      panelStyleForm: JSON.parse(JSON.stringify(DEFAULT_PANEL_STYLE))
+    }
+  },
+  methods: {
+    onChangePanelStyle() {
+      this.$emit('onChangePanelStyle', this.panelStyleForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar-uploader>>>.el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+  .avatar-uploader>>>.el-upload-list li{
+    width: 100px !important;
+    height: 60px !important;
+  }
+  .disabled>>>.el-upload--picture-card {
+    display: none;
+  }
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .form-item-slider>>>.el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+  }
+  .form-item>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .el-select-dropdown__item{
+    padding: 0 20px;
+  }
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>

frontend/src/views/panel/SubjectSetting/index.vue

@@ -10,24 +10,37 @@
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item title="仪表盘" name="panel">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
+            <background-selector class="attr-selector" />
-            <background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
+            <component-gap class="attr-selector" />
-            <background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
-            <background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
           </el-row>
         </el-collapse-item>
-        <el-collapse-item title="视图" name="view">
+        <el-collapse-item title="组件样式" name="component" @click="testClick">
-          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+          <el-row style="background-color: #f7f8fa; margin: 5px">
-          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+            <legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+            <x-axis-selector class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+            <y-axis-selector class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+            <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+          </el-row>
+        </el-collapse-item>
+        <el-collapse-item title="图形属性" name="graphical">
+          <el-row style="background-color: #f7f8fa; margin: 5px">
+            <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+            <label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+            <tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+          </el-row>
         </el-collapse-item>
         <el-collapse-item title="表格" name="table">
-          <div>简化流程：设计简洁直观的操作流程；</div>
+          <el-row style="background-color: #f7f8fa; margin: 5px">
-          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+            <label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+            <tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+          </el-row>
         </el-collapse-item>
-        <el-collapse-item title="过滤组件" name="4">
+        <el-collapse-item title="过滤组件" name="filter">
-          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+          <el-row style="background-color: #f7f8fa; margin: 5px">
-          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+            <background-selector class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />
+            <component-gap class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />
+          </el-row>
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -35,31 +48,166 @@
 </template>
 
 <script>
-import slider from './Slider'
+import slider from './PreSubject/Slider'
-import BackgroundSelector from './BackgroundSelector'
+import BackgroundSelector from './PanelStyle/BackgroundSelector'
+import ComponentGap from './PanelStyle/ComponentGap'
+
+import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
+import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
+import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
+import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
+import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
+import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
+import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
+import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
+import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
+import QuotaFilterEditor from '@/views/chart/components/filter/QuotaFilterEditor'
+import DimensionFilterEditor from '@/views/chart/components/filter/DimensionFilterEditor'
+import TableNormal from '@/views/chart/components/table/TableNormal'
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
 export default {
   components: {
     slider,
-    BackgroundSelector
+    BackgroundSelector,
+    ComponentGap,
+    ColorSelector,
+    SizeSelector,
+    LabelSelector,
+    TitleSelector,
+    LegendSelector,
+    TooltipSelector,
+    XAxisSelector,
+    YAxisSelector,
+    BackgroundColorSelector,
+    QuotaFilterEditor,
+    DimensionFilterEditor,
+    TableNormal
   },
   data() {
     return {
       panelInfo: this.$store.state.panel.panelInfo,
-      activeNames: ['1'],
+      activeNames: ['panel'],
-      backgroundType: 'color'
+      chart: null
+    }
+  },
+  computed: mapState([
+    'canvasStyleData'
+  ]),
+
+  watch: {
+    // deep监听panel 如果改变 提交到 store
+    chart: {
+      handler(newVal, oldVla) {
+        debugger
+        const canvasStyleData = deepCopy(this.canvasStyleData)
+        const chart = deepCopy(this.chart)
+        chart.xaxis = JSON.stringify(this.chart.xaxis)
+        chart.yaxis = JSON.stringify(this.chart.yaxis)
+        chart.customAttr = JSON.stringify(this.chart.customAttr)
+        chart.customStyle = JSON.stringify(this.chart.customStyle)
+        chart.customFilter = JSON.stringify(this.chart.customFilter)
+        canvasStyleData.chart = chart
+        this.$store.commit('setCanvasStyle', canvasStyleData)
+      },
+      deep: true
     }
   },
   created() {
-
+    debugger
+    // 初始化赋值
+    const chart = deepCopy(this.canvasStyleData.chart)
+    chart.xaxis = JSON.parse(chart.xaxis)
+    chart.yaxis = JSON.parse(chart.yaxis)
+    chart.customAttr = JSON.parse(chart.customAttr)
+    chart.customStyle = JSON.parse(chart.customStyle)
+    chart.customFilter = JSON.parse(chart.customFilter)
+    this.chart = chart
   },
 
   methods: {
-
+    testClick(val) {
+      debugger
+      console.log(JSON.stringify(this.chart))
+      console.log('message+>')
+    },
     handleChange(val) {
       console.log(val)
     },
-    changeBackgroundStyle() {
+    onChangePanelStyle(parma) {
-      console.log('changeBackgroundStyle')
+      console.log('parma:' + JSON.stringify(parma))
+    },
+
+    dimensionItemChange(item) {
+      this.save()
+    },
+
+    dimensionItemRemove(item) {
+      this.chart.xaxis.splice(item.index, 1)
+      this.save()
+    },
+
+    quotaItemChange(item) {
+      // 更新item
+      // this.view.yaxis.forEach(function(ele) {
+      //   if (ele.id === item.id) {
+      //     ele.summary = item.summary
+      //   }
+      // })
+      this.save()
+    },
+
+    quotaItemRemove(item) {
+      this.chart.yaxis.splice(item.index, 1)
+      this.save()
+    },
+
+    onColorChange(val) {
+      this.chart.customAttr.color = val
+      this.save()
+    },
+
+    onSizeChange(val) {
+      this.chart.customAttr.size = val
+      this.save()
+    },
+    onTextChange(val) {
+      this.chart.customStyle.text = val
+      // this.save()
+    },
+
+    onLegendChange(val) {
+      this.chart.customStyle.legend = val
+      this.save()
+    },
+
+    onLabelChange(val) {
+      this.chart.customAttr.label = val
+      this.save()
+    },
+
+    onTooltipChange(val) {
+      this.chart.customAttr.tooltip = val
+      this.save()
+    },
+
+    onChangeXAxisForm(val) {
+      this.chart.customStyle.xAxis = val
+      this.save()
+    },
+
+    onChangeYAxisForm(val) {
+      this.chart.customStyle.yAxis = val
+      this.save()
+    },
+
+    onChangeBackgroundForm(val) {
+      this.chart.customStyle.background = val
+      this.save()
+    },
+    save() {
+      console.log('save')
     }
   }
 }

frontend/src/views/panel/edit/index.vue

@@ -47,9 +47,9 @@
           <div v-show="show" class="leftPanel">
 
             <div class="leftPanel-items">
-              <view-select v-if=" showIndex===0" />
+              <view-select v-show=" showIndex===0" />
-              <filter-group v-if="showIndex===1" />
+              <filter-group v-show="showIndex===1" />
-              <subject-setting v-if="showIndex===2" />
+              <subject-setting v-show="showIndex===2" />
             </div>
           </div>
         </div>
@@ -195,7 +195,6 @@ export default {
   mounted() {
     this.insertToBody()
     bus.$on('component-on-drag', () => {
-      debugger
       this.show = false
     })
 
@@ -217,8 +216,10 @@ export default {
         this.$store.commit('setCanvasStyle', JSON.parse(canvasStyleDataTemp))
       } else if (panelId) {
         get('panel/group/findOne/' + panelId).then(response => {
+          debugger
           this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
-          this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
+          const panelStyle = JSON.parse(response.data.panelStyle)
+          this.$store.commit('setCanvasStyle', panelStyle)
         })
       }
     },
@@ -229,7 +230,6 @@ export default {
       this.$router.replace('/panel/index')
     },
     showPanel(type) {
-      debugger
       this.show = !this.show
       this.showIndex = type
     },
@@ -242,7 +242,6 @@ export default {
       // 点击样式按钮 排除
       const stick = evt.target.closest('.el-icon-magic-stick')
       if (!parent && !self && !stick) {
-        debugger
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
         this.showIndex = -1
@@ -257,10 +256,11 @@ export default {
     },
 
     resetID(data) {
-      data.forEach(item => {
+      if (data) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
-
+        })
+      }
       return data
     },
     handleDrop(e) {
@@ -291,7 +291,6 @@ export default {
         this.currentFilterCom.style.left = e.offsetX
         this.currentFilterCom.id = newComponentId
         if (this.currentWidget.filterDialog) {
-          debugger
           this.show = false
           this.openFilterDiolog()
           return

frontend/src/views/panel/enshrine/index.vue

@@ -52,9 +52,11 @@ export default {
       })
     },
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
 
       return data
     },

frontend/src/views/panel/list/EditPanel/index.vue

@@ -111,7 +111,6 @@ export default {
       })
     },
     handleFileChange(e) {
-      debugger
       const file = e.target.files[0]
       const reader = new FileReader()
       reader.onload = (res) => {

frontend/src/views/panel/list/PanelList.vue

@@ -284,7 +284,6 @@ export default {
     },
 
     clickMore(param) {
-      debugger
       switch (param.optType) {
         case 'rename':
           this.showEditPanel(param)
@@ -448,9 +447,11 @@ export default {
       this.linkResourceId = null
     },
     resetID(data) {
-      data.forEach(item => {
+      if( data ) {
-        item.id = uuid.v1()
+        data.forEach(item => {
-      })
+          item.id = uuid.v1()
+        })
+      }
 
       return data
     }

frontend/src/views/panel/list/PanelViewShow.vue

@@ -102,7 +102,6 @@ export default {
     saveToTemplate() {
       this.templateSaveShow = true
       html2canvas(this.$refs.imageWrapper).then(canvas => {
-        debugger
         const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -121,7 +120,6 @@ export default {
     },
     downloadToTemplate() {
       html2canvas(this.$refs.imageWrapper).then(canvas => {
-        debugger
         const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -140,7 +138,6 @@ export default {
     refreshTemplateInfo() {
       this.templateInfo = ''
       html2canvas(this.$refs.imageWrapper).then(canvas => {
-        debugger
         const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {

frontend/src/views/panel/panel.js

@@ -1,6 +1,47 @@
-export const DEFAULT_BACKGROUND_COLOR = {
+import {
+  DEFAULT_COLOR_CASE,
+  DEFAULT_SIZE,
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_LEGEND_STYLE,
+  DEFAULT_LABEL,
+  DEFAULT_TOOLTIP,
+  DEFAULT_XAXIS_STYLE,
+  DEFAULT_YAXIS_STYLE,
+  DEFAULT_BACKGROUND_COLOR
+} from '@/views/chart/chart/chart'
+
+export const DEFAULT_PANEL_STYLE = {
   color: '#ffffff',
-  image: null,
+  imageUrl: null,
-  imageName: null,
+  backgroundType: 'image',
-  backgroundType: 'color'
+  gap: 'no'
+}
+
+export const DEFAULT_COMMON_CANVAS_STYLE = {
+  width: 1200,
+  height: 740,
+  scale: 100,
+  openCommonStyle: true,
+  panel: DEFAULT_PANEL_STYLE,
+  chart: {
+    xaxis: [],
+    yaxis: [],
+    show: true,
+    type: 'panel',
+    title: '',
+    customAttr: {
+      color: DEFAULT_COLOR_CASE,
+      size: DEFAULT_SIZE,
+      label: DEFAULT_LABEL,
+      tooltip: DEFAULT_TOOLTIP
+    },
+    customStyle: {
+      text: DEFAULT_TITLE_STYLE,
+      legend: DEFAULT_LEGEND_STYLE,
+      xAxis: DEFAULT_XAXIS_STYLE,
+      yAxis: DEFAULT_YAXIS_STYLE,
+      background: DEFAULT_BACKGROUND_COLOR
+    },
+    customFilter: []
+  }
 }

frontend/src/views/panel/template/index.vue

@@ -106,7 +106,6 @@ export default {
       this.showTemplateEditDialog('edit', templateInfo)
     },
     saveTemplateEdit(templateEditForm) {
-      debugger
       post('/template/save', templateEditForm).then(response => {
         this.$message({
           message: '保存成功',

frontend/src/views/system/systemParamSettings/UiSetting.vue

@@ -219,7 +219,6 @@ export default {
   },
   methods: {
     query() {
-      debugger
       get('/system/ui/info').then(res => {
         this.systemParams = res.data
       })