feat:样式修改

2026-05-21 12:19:38 +08:00 · 2021-05-06 23:40:34 +08:00
parent 33320f6f14
commit 53b021bbf7
20 changed files with 461 additions and 297 deletions
--- a/frontend/src/components/RightPanel/index.vue
+++ b/frontend/src/components/RightPanel/index.vue
@@ -80,7 +80,7 @@ export default {
 .showRightPanel {
  overflow: hidden;
  position: relative;
-  width: calc(100% - 15px);
+  width:100%;
 }
 </style>

--- a/frontend/src/components/canvas/components/Editor/Grid.vue
+++ b/frontend/src/components/canvas/components/Editor/Grid.vue
@@ -1,26 +1,26 @@
 <template>
-    <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-            <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
-                <path 
-                    d="M 7.236328125 0 L 0 0 0 7.236328125" 
-                    fill="none" 
-                    stroke="rgba(207, 207, 207, 0.3)" 
-                    stroke-width="1">
-                </path>
-            </pattern>
-            <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
-                <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect>
-                <path 
-                    d="M 36.181640625 0 L 0 0 0 36.181640625" 
-                    fill="none" 
-                    stroke="rgba(186, 186, 186, 0.5)" 
-                    stroke-width="1">
-                </path>
-            </pattern>
-        </defs>
-        <rect width="100%" height="100%" fill="url(#grid)"></rect>
-    </svg>
+  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
+        <path
+          d="M 7.236328125 0 L 0 0 0 7.236328125"
+          fill="none"
+          stroke="rgba(207, 207, 207, 0.3)"
+          stroke-width="1"
+        />
+      </pattern>
+      <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
+        <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)" />
+        <path
+          d="M 36.181640625 0 L 0 0 0 36.181640625"
+          fill="none"
+          stroke="rgba(186, 186, 186, 0.5)"
+          stroke-width="1"
+        />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#grid)" />
+  </svg>
 </template>

 <style lang="scss" scoped>
@@ -29,4 +29,4 @@
    top: 0;
    left: 0;
 }
-</style>
+</style>
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -111,19 +111,21 @@ export default {
      return value * parseInt(scale) / 100
    },
    handleScaleChange() {
-      const componentData = deepCopy(this.componentData)
-      componentData.forEach(component => {
-        Object.keys(component.style).forEach(key => {
-          if (this.needToChangeHeight.includes(key)) {
-            component.style[key] = this.format(component.style[key], this.scaleHeight)
-          }
-          if (this.needToChangeWidth.includes(key)) {
-            component.style[key] = this.format(component.style[key], this.scaleWidth)
-          }
+      if (this.componentData) {
+        const componentData = deepCopy(this.componentData)
+        componentData.forEach(component => {
+          Object.keys(component.style).forEach(key => {
+            if (this.needToChangeHeight.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleHeight)
+            }
+            if (this.needToChangeWidth.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleWidth)
+            }
+          })
        })
-      })
-      this.componentDataShow = componentData
-      this.$nextTick(() => (eventBus.$emit('resizing', '')))
+        this.componentDataShow = componentData
+        this.$nextTick(() => (eventBus.$emit('resizing', '')))
+      }
    }
  }
 }
@@ -136,7 +138,7 @@ export default {
    width: 100%;
    height: 100%;
    border: 1px solid #E6E6E6;
-    background-size: 100% !important;
+    background-size: 100% 100% !important;
    .canvas-container {
        width: 100%;
        height: 100%;
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
@@ -106,6 +106,7 @@ export default {
      this.panelId = this.$route.path.split('/')[2]
      // 加载视图数据
      get('panel/group/findOne/' + this.panelId).then(response => {
+        debugger
        this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
        this.canvasStyleData = JSON.parse(response.data.panelStyle)
        this.resize()
@@ -148,7 +149,7 @@ export default {
    min-height: 600px;
    width: 100%;
    height: 100%;
-    background-size: 100% !important;
+    background-size: 100% 100% !important;
    overflow: auto;
    position: relative;
    margin: 0;
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="rect-shape">
+  <div v-loading="requestStatus==='waiting'" class="rect-shape">
    <div v-if="requestStatus==='error'" style=";width: 100%;height: 100%;background-color: #ece7e7; text-align: center">
      <div style="font-size: 12px; color: #9ea6b2;">
        获取数据出错 请联系管理员<br>
@@ -8,18 +8,16 @@
    </div>
    <chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table')" :ref="element.propValue.id" class="chart-class" :chart="chart" />
    <table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
-
  </div>
 </template>

 <script>

-import { post } from '@/api/panel/panel'
+import { viewData } from '@/api/panel/panel'
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'

 import { mapState } from 'vuex'
-import { deepCopy } from '@/components/canvas/utils/utils'

 import {
  DEFAULT_COLOR_CASE,
@@ -58,14 +56,8 @@ export default {
    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
-          }
-        }
+        // this.chart.stylePriority == panel 优先使用仪表盘样式
+        this.mergeStyle()
      },
      deep: true
    }
@@ -76,26 +68,26 @@ export default {
  data() {
    return {
      chart: {
-        viewFirst: false,
-        xaxis: [],
-        yaxis: [],
+        stylePriority: 'panel',
+        xaxis: '[]',
+        yaxis: '[]',
        show: true,
        type: 'panel',
        title: '',
-        customAttr: {
+        customAttr: JSON.stringify({
          color: DEFAULT_COLOR_CASE,
          size: DEFAULT_SIZE,
          label: DEFAULT_LABEL,
          tooltip: DEFAULT_TOOLTIP
-        },
-        customStyle: {
+        }),
+        customStyle: JSON.stringify({
          text: DEFAULT_TITLE_STYLE,
          legend: DEFAULT_LEGEND_STYLE,
          xAxis: DEFAULT_XAXIS_STYLE,
          yAxis: DEFAULT_YAXIS_STYLE,
          background: DEFAULT_BACKGROUND_COLOR
-        },
-        customFilter: []
+        }),
+        customFilter: '[]'
      },
      requestStatus: 'waiting',
      message: null
@@ -108,15 +100,39 @@ export default {

  },
  methods: {
+    mergeStyle() {
+      // this.chart.stylePriority == panel 优先使用仪表盘样式
+      if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
+        const customAttrChart = JSON.parse(this.chart.customAttr)
+        const customStyleChart = JSON.parse(this.chart.customStyle)
+
+        const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
+        const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
+
+        // 组件样式-标题设置
+        customStyleChart.text = customAttrPanel.text
+        // 组件样式-背景设置
+        customStyleChart.background = customAttrPanel.background
+        // 图形属性-颜色设置
+        customAttrChart.color = customStylePanel.color
+
+        this.chart = {
+          ...this.chart,
+          customAttr: JSON.stringify(customAttrChart),
+          customStyle: JSON.stringify(customAttrChart)
+        }
+      }
+    },
    getData(id) {
      if (id) {
        this.requestStatus = 'waiting'
        this.message = null
-        post('/chart/view/getData/' + id, this.filter).then(response => {
+        viewData(id, this.filter).then(response => {
          // 将视图传入echart组件
-          debugger
          if (response.success) {
            this.chart = response.data
+            this.requestStatus = 'merging'
+            this.mergeStyle()
            this.requestStatus = 'success'
          } else {
            this.requestStatus = 'error'
--- a/frontend/src/components/dataease/DeMainContainer.vue
+++ b/frontend/src/components/dataease/DeMainContainer.vue
@@ -14,7 +14,7 @@ export default {

  .ms-main-container {
    padding: 15px;
-    height: calc(100vh - 80px);
+    height: 100vh;
  }

 </style>