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 => {
-        item.id = uuid.v1()
-      })
+      if( data ) {
+        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 => {
-        item.id = uuid.v1()
-      })
+      if( data ) {
+        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="{
-      width: changeStyleWithScale(canvasStyleData.width) + 'px',
-      height: changeStyleWithScale(canvasStyleData.height) + 'px',
-    }"
+    :style="customStyle"
     @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 => {
-        item.id = generateID()
-      })
+      if( data ) {
+        data.forEach(item => {
+          item.id = uuid.v1()
+        })
+      }
 
       return data
     },