Merge remote-tracking branch 'origin/dev' into dev

2025-02-25 03:52:59 +08:00 · 2022-02-23 12:11:12 +08:00 · 2022-02-23 12:11:12 +08:00 · 69006a221e
commit 69006a221e
parent fabb431b7d ef6d790035
12 changed files with 114 additions and 307 deletions
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@ -126,8 +126,7 @@ export default {
      'targetLinkageInfo',
      'mobileLayoutStatus',
      'mobileComponentData',
-      'componentDataCache',
-      'styleChangeTimes'
+      'componentDataCache'
    ])
  },
  created() {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -8,7 +8,6 @@
      'rect-shape'
    ]"
  >
-    <div :style="componentBackGround">
    <EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
    <div v-if="requestStatus==='error'" class="chart-error-class">
      <div class="chart-error-message-class">
@ -67,7 +66,6 @@
      <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
    </div>
  </div>
-  </div>
 </template>

 <script>
@ -92,7 +90,6 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
 export default {
  name: 'UserView',
  components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
@ -169,31 +166,6 @@ export default {
  },

  computed: {
-    // 视图
-    componentBackGround() {
-      const customStyle = JSON.parse(this.chart.customStyle)
-      let style = {
-        height: '100%',
-        width: '100%',
-        backgroundSize: '100% 100% !important',
-        borderRadius: '0px'
-      }
-      if (customStyle && customStyle.background) {
-        style.borderRadius = customStyle.background.borderRadius + 'px!important'
-        if (customStyle.background.backgroundType === 'outImage' && typeof (customStyle.background.outImage) === 'string') {
-          style = {
-            background: `url(${customStyle.background.outImage}) no-repeat`,
-            ...style
-          }
-        } else if (!customStyle.background.backgroundType || customStyle.background.backgroundType === 'color') {
-          style = {
-            background: hexColorToRGBA(customStyle.background.color, customStyle.background.alpha),
-            ...style
-          }
-        }
-      }
-      return style
-    },
    scaleCoefficient() {
      if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
        return 1.1
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -1,8 +1,3 @@
-import {ApplicationContext} from "@/utils/ApplicationContext";
-import {BASE_MOBILE_STYLE, HYPERLINKS} from "@/components/canvas/custom-component/component-list";
-import store from "@/store";
-import {deepCopy, resetID} from "@/components/canvas/utils/utils";
-
 export const DEFAULT_COLOR_CASE = {
  value: 'default',
  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
@ -197,10 +192,7 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
  }
 }
 export const DEFAULT_BACKGROUND_COLOR = {
-  backgroundType: 'color',
  color: '#ffffff',
-  outImage: null,
-  innerImage: null,
  alpha: 100,
  borderRadius: 5
 }
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
      chart_option.radar.splitArea = customStyle.split.splitArea
    }
    if (customStyle.background) {
-      // chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+      chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
    }
  }
 }
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@ -40,7 +40,7 @@ export function getTheme(chart) {
    customStyle = JSON.parse(chart.customStyle)
    // bg
    if (customStyle.background) {
-      // bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+      bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
    }
    // legend
    if (customStyle.legend) {
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -7,7 +7,7 @@
      :style="trackBarStyleTime"
      @trackClick="trackClick"
    />
-    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" />
+    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
    <div v-if="chart.type === 'map'" class="map-zoom-box">
      <div style="margin-bottom: 0.5em;">
        <el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@ -87,7 +87,7 @@ export default {
    },
    bg_class() {
      return {
-        // borderRadius: this.borderRadius
+        borderRadius: this.borderRadius
      }
    }
  },
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@ -1,10 +1,10 @@
 <template>
-  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;">
+  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
    <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
      <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
    </span>
-    <div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;">
+    <div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;" :style="{background:container_bg_class.background}">
      <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
      <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
@ -109,6 +109,7 @@ export default {
    },
    bg_class() {
      return {
+        borderRadius: this.borderRadius
      }
    }
  },
@ -258,7 +259,12 @@ export default {
      }
    },
    setBackGroundBorder() {
-
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
    },
    chartResize() {
      this.initData()
@ -319,6 +325,12 @@ export default {
            this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
          }
        }
+        if (customStyle.background) {
+          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+
+          this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
      }
    },

--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@ -1,82 +1,24 @@
 <template>
  <div style="width: 100%">
    <el-col>
-      <el-row>
-        <el-col :span="5" class="col-label-item">
-          <el-radio v-model="colorForm.backgroundType" label="color" @change="changeBackgroundStyle"><span class="label-item">{{ $t('chart.color') }}</span></el-radio>
-        </el-col>
-        <el-col :span="19">
-          <el-color-picker v-model="colorForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="changeBackgroundStyle" />
-        </el-col>
-      </el-row>
-<!--      <el-row>-->
-<!--        <el-col :span="5" class="col-label-item">-->
-<!--          <el-radio v-model="colorForm.backgroundType" label="innerImage" @change="changeBackgroundStyle"><span class="label-item">边框</span></el-radio>-->
-<!--        </el-col>-->
-<!--        <el-col :span="19">-->
-<!--          <el-button @click="openBoardDialog"> 选择边框</el-button>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
-      <el-row style="height: 60px;margin-top:10px;overflow: hidden">
-        <el-col :span="5" class="col-label-item">
-          <el-radio v-model="colorForm.backgroundType" label="outImage" @change="changeBackgroundStyle"><span class="label-item">{{ $t('panel.photo') }}</span></el-radio>
-        </el-col>
-        <el-col :span="9">
-          <el-upload
-            action=""
-            accept=".jpeg,.jpg,.png,.gif,.svg"
-            class="avatar-uploader"
-            list-type="picture-card"
-            :class="{disabled:uploadDisabled}"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove"
-            :file-list="fileList"
-            :on-change="onChange"
-            :http-request="upload"
-          >
-            <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-row>
-        <el-col :span="5" class="col-label-item">
-          <span class="label-item">{{ $t('chart.border_radius') }}</span>
-        </el-col>
-        <el-col :span="19">
-          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
-        </el-col>
-      </el-row>
-      <el-row v-if="colorForm.backgroundType==='color'">
-        <el-col :span="5" class="col-label-item">
-          <span class="label-item">{{ $t('chart.not_alpha') }}</span>
-        </el-col>
-        <el-col :span="19">
+      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
-        </el-col>
-      </el-row>
-    </el-col>
-    <!--      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">-->
-    <!--        &lt;!&ndash;        <el-form-item :label="$t('chart.color')" class="form-item">&ndash;&gt;-->
-    <!--        &lt;!&ndash;          <el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />&ndash;&gt;-->
-    <!--        &lt;!&ndash;        </el-form-item>&ndash;&gt;-->
-    <!--        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">-->
-    <!--          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
-    <!--        </el-form-item>-->
+        </el-form-item>

-    <!--        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">-->
-    <!--          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
-    <!--        </el-form-item>-->
-    <!--      </el-form>-->
-    <!--    </el-col>-->
+        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">
+          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+        </el-form-item>
+      </el-form>
+    </el-col>
  </div>
 </template>

 <script>
 import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
-import { deepCopy } from '@/components/canvas/utils/utils'

 export default {
  name: 'BackgroundColorSelector',
@ -92,10 +34,6 @@ export default {
  },
  data() {
    return {
-      fileList: [],
-      dialogImageUrl: '',
-      dialogVisible: false,
-      uploadDisabled: false,
      colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
      predefineColors: COLOR_PANEL
    }
@ -124,120 +62,41 @@ export default {
          customStyle = JSON.parse(chart.customStyle)
        }
        if (customStyle.background) {
-          debugger
          this.colorForm = customStyle.background
-          this.colorForm.backgroundType = this.colorForm.backgroundType || 'color'
-          if (this.colorForm.outImage && typeof (this.colorForm.outImage) === 'string') {
-            this.fileList.push({ url: this.colorForm.outImage })
        }
      }
    }
-    },
-    onChangeType() {
-      this.changeBackgroundStyle()
-    },
-    handleRemove(file, fileList) {
-      this.uploadDisabled = false
-      this.colorForm.outImage = null
-      this.fileList = []
-      this.changeBackgroundStyle()
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    onChange(file, fileList) {
-      var _this = this
-      _this.uploadDisabled = true
-      const reader = new FileReader()
-      reader.onload = function() {
-        _this.colorForm.outImage = reader.result
-        _this.changeBackgroundStyle()
-      }
-      this.$store.state.styleChangeTimes++
-      reader.readAsDataURL(file.raw)
-    },
-    upload(file) {
-      // console.log('this is upload')
-    },
-    openBoardDialog() {
-      // console.log('this is upload')
-    }
  }
 }
 </script>

 <style scoped>
-  .shape-item{
+.shape-item{
  padding: 6px;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
-  }
-  .form-item-slider>>>.el-form-item__label{
+}
+.form-item-slider>>>.el-form-item__label{
  font-size: 12px;
  line-height: 38px;
-  }
-  .form-item>>>.el-form-item__label{
+}
+.form-item>>>.el-form-item__label{
  font-size: 12px;
-  }
-  .el-select-dropdown__item{
+}
+.el-select-dropdown__item{
  padding: 0 20px;
-  }
+}
  span{
    font-size: 12px
  }
  .el-form-item{
    margin-bottom: 6px;
  }
-  .color-picker-style{
+.color-picker-style{
  cursor: pointer;
  z-index: 1003;
-  }
-  .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;
-  }
-  .label-item{
-    font-size: 12px;
-    font-weight: bold;
-  }
-  .col-label-item{
-    text-align: right;
-    padding-right: 10px;
-  }
+}
 </style>
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@ -161,7 +161,7 @@ export default {
          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
        }
        if (customStyle.background) {
-          // this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
        }
      }
    },
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@ -1,5 +1,5 @@
 <template>
-  <div ref="tableContainer"  style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
    <el-row style="height: 100%;">
      <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
      <ux-grid
@ -124,6 +124,8 @@ export default {
  computed: {
    bg_class() {
      return {
+        background: hexColorToRGBA('#ffffff', 0),
+        borderRadius: this.borderRadius
      }
    }
  },
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -810,8 +810,8 @@
      </el-tabs>

      <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
-        <el-row :style="componentBackGround" class="padding-lr">
-          <div ref="imageWrapper" style="height: 100%;">
+        <el-row style="width: 100%;height: 100%;" class="padding-lr">
+          <div ref="imageWrapper" style="height: 100%">
            <plugin-com
              v-if="httpRequest.status && chart.type && view.isPlugin"
              ref="dynamicChart"
@ -1049,7 +1049,6 @@ import { compareItem } from '@/views/chart/chart/compare'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
 export default {
  name: 'ChartEdit',
  components: {
@ -1192,32 +1191,6 @@ export default {
  computed: {
    chartType() {
      return this.chart.type
-    },
-    // 视图
-    componentBackGround() {
-      const customStyle = JSON.parse(JSON.stringify(this.view.customStyle))
-      let style = {
-        height: '100%',
-        width: '100%',
-        backgroundSize: '100% 100% !important'
-      }
-      debugger
-      if (customStyle && customStyle.background) {
-        style['borderRadius'] = customStyle.background.borderRadius + 'px'
-        if (customStyle.background.backgroundType === 'outImage' && typeof (customStyle.background.outImage) === 'string') {
-          style = {
-            background: `url(${customStyle.background.outImage}) no-repeat`,
-            ...style
-          }
-        } else if (!customStyle.background.backgroundType || customStyle.background.backgroundType === 'color') {
-          style = {
-            background: hexColorToRGBA(customStyle.background.color, customStyle.background.alpha),
-            ...style
-          }
-        }
-      }
-
-      return style
    }
  },
  watch: {
@ -1245,7 +1218,6 @@ export default {
    // this.initAreas()
  },
  mounted() {
-    debugger
    this.bindPluginEvent()
    // this.get(this.$store.state.chart.viewId);
    this.getData(this.param.id)
@ -1544,7 +1516,6 @@ export default {
        this.closeChangeChart()
        // 从仪表板入口关闭
        if (this.$route.path.indexOf('panel') > -1) {
-          this.$store.commit('recordSnapshot')
          bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
        }
        this.$success(this.$t('commons.save_success'))