Merge branch 'dev' into pr@dev_eslint_auto_fix

2026-05-20 02:58:10 +08:00 · 2022-10-25 17:52:13 +08:00
parent 6919ee27b8 300cddcd42
commit 59eef06a6f
44 changed files with 798 additions and 152 deletions
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -677,7 +677,9 @@ export default {
      'tabMoveInActiveId',
      'tabActiveTabNameMap',
      'mousePointShadowMap',
-      'tabMoveOutComponentId'
+      'tabMoveOutComponentId',
+      'tabCollisionActiveId',
+      'tabMoveInActiveId'
    ])
  },
  watch: {
@@ -1920,8 +1922,8 @@ export default {
      const left = this.left
      const width = this.width
      const height = this.height
-      // tab 移入检测开启
-      if (this.isTabMoveCheck) {
+      // tab 移入检测开启 tab组件不能相互移入另一个tab组件
+      if (this.isTabMoveCheck && this.element.type !== 'de-tabs') {
        const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
        for (const item of nodes) {
          if (
@@ -1951,7 +1953,7 @@ export default {
            const brAndBr = (collisionT + collisionH) >= (top + height) && (collisionL + collisionW) >= (left + width)
            if (tfAndTf && bfAndBf && trAndTr && brAndBr) {
              this.$store.commit('setTabCollisionActiveId', item.getAttribute('component-id'))
-            } else {
+            } else if (this.tabCollisionActiveId === item.getAttribute('component-id')) {
              this.$store.commit('setTabCollisionActiveId', null)
            }

@@ -1972,7 +1974,7 @@ export default {
            const activeBrAndBr = (activeT + activeH) >= (top + height) && (activeL + activeW) >= (left + width)
            if (activeTfAndTf && activeBfAndBf && activeTrAndTr && activeBrAndBr) {
              this.$store.commit('setTabMoveInActiveId', item.getAttribute('component-id'))
-            } else {
+            } else if (this.tabMoveInActiveId === item.getAttribute('component-id')) {
              this.$store.commit('setTabMoveInActiveId', null)
            }
          }
--- a/frontend/src/components/GradientColorSelector/base.js
+++ b/frontend/src/components/GradientColorSelector/base.js
@@ -86,7 +86,7 @@ export const colorCases = [
 export const gradientColorCases = [
  {
    name: '渐变色1',
-    value: 'gradient1',
+    value: 'gradient1_continuous_gradient',
    colors: [
      ['rgba(144,202,249,0.5)', 'rgba(1,87,155,0.9)'],
      ['rgba(127,222,234,1)', 'rgba(0,77,65,1)'],
@@ -101,3 +101,72 @@ export const gradientColorCases = [
 export const isGradientValue = value => {
  return value && gradientColorCases.some(item => item.value === value)
 }
+
+export const getColorType = value => {
+  if (value.endsWith('_split_gradient')) {
+    return 'split_gradient'
+  }
+  const cloneColorCases = JSON.parse(JSON.stringify(colorCases))
+  if (cloneColorCases.some(item => item.value === value)) {
+    return 'simple'
+  }
+  return 'gradient'
+}
+
+export const getMapColorCases = () => {
+  const cloneColorCases = JSON.parse(JSON.stringify(colorCases))
+  return cloneColorCases.map(colorItem => {
+    const curColors = colorItem.colors
+    const len = curColors.length
+    const start = curColors[0]
+    const end = curColors[len - 1]
+    const itemResult = {
+      name: colorItem.name,
+      value: colorItem.value + '_split_gradient',
+      baseColors: [start, end],
+      colors: stepsColor(start, end, 9, 1)
+    }
+    return itemResult
+  })
+}
+
+export function stepsColor(start, end, steps, gamma) {
+  var i; var j; var ms; var me; var output = []; var so = []
+  gamma = gamma || 1
+  var normalize = function(channel) {
+    return Math.pow(channel / 255, gamma)
+  }
+  start = parseColor(start).map(normalize)
+  end = parseColor(end).map(normalize)
+  for (i = 0; i < steps; i++) {
+    ms = (steps - 1) === 0 ? 0 : (i / (steps - 1))
+    me = 1 - ms
+    for (j = 0; j < 3; j++) {
+      so[j] = pad(
+        Math.round(
+          Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255
+        ).toString(16)
+      )
+    }
+    output.push('#' + so.join(''))
+  }
+  function parseColor(hexStr) {
+    return hexStr.length === 4
+      ? hexStr
+        .substr(1)
+        .split('')
+        .map(function(s) {
+          return 0x11 * parseInt(s, 16)
+        })
+      : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(
+        function(s) {
+          return parseInt(s, 16)
+        }
+      )
+  }
+  function pad(s) {
+    return s.length === 1 ? '0' + s : s
+  }
+  return output
+}
+
--- a/frontend/src/components/GradientColorSelector/index.vue
+++ b/frontend/src/components/GradientColorSelector/index.vue
@@ -20,7 +20,7 @@
        <el-tooltip
          class="item"
          effect="dark"
-          content="重置"
+          :content="$t('commons.reset')"
          placement="top"
        >
          <i class="el-icon-refresh" />
@@ -38,7 +38,7 @@
      <div class="custom-switch-div">
        <el-switch
          v-model="enableCustom"
-          active-text="自定义"
+          :active-text="$t('commons.reset')"
          inactive-text=""
        />
      </div>
@@ -47,7 +47,7 @@
        @tab-click="handleClick"
      >
        <el-tab-pane
-          v-for="(pane, i) in tabPanes"
+          v-for="(pane, i) in tabPanes.filter(item => item.name === 'simple' || (showIndex === 1 && item.name === 'split_gradient') || (showIndex === 2 && item.name === 'gradient'))"
          :key="i"
          :label="pane.label"
          :name="pane.name"
@@ -84,22 +84,29 @@
                v-for="(co,index) in option.colors"
                v-else
                :key="index"
-                class="color-span-base is-editor"
+                class="color-span-base"
+                :class="option.value.endsWith('_split_gradient') && index % 8 !== 0 ? 'static-editor' : 'is-editor'"
              >
-                <el-color-picker
-                  v-if="i === 0"
-                  v-model="option.colors[index]"
-                  @change="switchColorItem(option.colors, index)"
+                <span
+                  v-if="option.value.endsWith('_split_gradient') && index % 8 !== 0"
+                  class="color-span-base-split"
+                  :style="{background: formatBgColor(co)}"
                />
+
                <de-color-picker
-                  v-else
+                  v-else-if="option.value.endsWith('_continuous_gradient')"
                  :id="option.value + index"
                  ref="de-color-picker"
                  v-model="option.colors[index]"
                  :base-id="option.value + index"
                  show-alpha
                  color-format="rgb"
-                  @change="switchColorItem(option.colors, index)"
+                  @change="switchColorItem(option.colors, option.value)"
+                />
+                <el-color-picker
+                  v-else
+                  v-model="option.colors[index]"
+                  @change="switchColorItem(option.colors, option.value)"
                />
              </span>

@@ -132,7 +139,7 @@
 </template>

 <script>
-import { colorCases, gradientColorCases } from './base'
+import { colorCases, gradientColorCases, getMapColorCases, getColorType, stepsColor } from './base'
 import DeColorPicker from './DeColorPicker'
 export default {
  name: 'GradientColorSelector',
@@ -148,6 +155,10 @@ export default {
          colors: []
        }
      }
+    },
+    showIndex: {
+      type: Number,
+      default: 1
    }
  },
  data() {
@@ -161,12 +172,17 @@ export default {
      activeName: 'simple',
      tabPanes: [
        {
-          label: '纯色',
+          label: this.$t('chart.solid_color'),
          name: 'simple',
          data: JSON.parse(JSON.stringify(colorCases))
        },
        {
-          label: '渐变',
+          label: this.$t('chart.split_gradient'),
+          name: 'split_gradient',
+          data: JSON.parse(JSON.stringify(getMapColorCases()))
+        },
+        {
+          label: this.$t('chart.continuous_gradient'),
          name: 'gradient',
          data: JSON.parse(JSON.stringify(gradientColorCases))
        }
@@ -200,10 +216,27 @@ export default {
        parents.scrollTo(0, top)
      }
    },
-    switchColorItem(colors, index) {
-      this.colorDto.colors = JSON.parse(JSON.stringify(colors))
+    switchColorItem(colors, value) {
+      const activeName = getColorType(value)
+      if (activeName === 'split_gradient') {
+        const start = colors[0]
+        const end = colors[colors.length - 1]
+        const targetColors = stepsColor(start, end, 9, 1)
+        this.colorDto.colors = JSON.parse(JSON.stringify(targetColors))
+        this.fillSplitGradientPanel()
+      } else {
+        this.colorDto.colors = JSON.parse(JSON.stringify(colors))
+      }
+
      this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
    },
+    fillSplitGradientPanel() {
+      this.tabPanes[1].data.forEach(item => {
+        if (item.value === this.colorDto.value) {
+          item.colors = this.colorDto.colors
+        }
+      })
+    },
    initcolorDto() {
      let haspPropValue = true
      if (!this.colorDto.value) {
@@ -211,9 +244,9 @@ export default {
        this.colorDto.colors = this.colorCases[0].colors
        haspPropValue = false
      }
-      this.activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
+      this.activeName = getColorType(this.colorDto.value)
      if (haspPropValue) {
-        this.tabPanes[this.activeName === 'simple' ? 0 : 1].data.forEach(item => {
+        this.tabPanes[this.activeName === 'simple' ? 0 : this.activeName === 'split_gradient' ? 1 : 2].data.forEach(item => {
          if (item.value === this.colorDto.value) {
            item.colors = JSON.parse(JSON.stringify(this.colorDto.colors))
          }
@@ -270,14 +303,15 @@ export default {
          return str
        })
      })
-      this.tabPanes[1].data = JSON.parse(JSON.stringify(this.gradientColorCases))
+      const len = this.tabPanes.length
+      this.tabPanes[len - 1].data = JSON.parse(JSON.stringify(this.gradientColorCases))
    },
    formatBgColor(color, useValue) {
      let activeName = this.activeName
      if (useValue) {
-        activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
+        activeName = getColorType(this.colorDto.value)
      }
-      if (activeName === 'simple') {
+      if (activeName === 'simple' || activeName === 'split_gradient') {
        return color
      }
      return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
@@ -296,11 +330,8 @@ export default {
    },
    reset() {
      if (this.colorDto.value) {
-        let activeName = 'simple'
-        if (this.gradientColorCases.some(item => item.value === this.colorDto.value)) {
-          activeName = 'gradient'
-        }
-        (activeName === 'simple' ? colorCases : gradientColorCases).forEach(curcase => {
+        const activeName = getColorType(this.colorDto.value);
+        (activeName === 'simple' ? colorCases : activeName === 'split_gradient' ? getMapColorCases() : gradientColorCases).forEach(curcase => {
          if (curcase.value === this.colorDto.value) {
            this.colorDto.colors = JSON.parse(JSON.stringify(curcase.colors))
            this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
@@ -318,7 +349,7 @@ export default {
 }
 .gradient-popper {
  background: #fff;
-  padding: 0 10px;
+  padding: 0 10px !important;
  margin-top: 1px !important;
  border-top: none;
  height: 300px;
@@ -340,7 +371,8 @@ export default {
 .color-span-base {
  width: 20px;
  height: 20px;
-  display:inline-block;
+  display:flex;
+  align-items: center;
 }
 .is-editor {
  width:23px !important;
@@ -352,7 +384,11 @@ export default {
  align-items: center !important;
  cursor: pointer;
  padding-left: 5px !important;
+  .static-editor:nth-child(2) {
+    margin-left: 5px !important;
+  }
 }
+
 .custom-switch-div {
  position: absolute;
  top: 8px;
@@ -380,4 +416,11 @@ export default {
    }
  }
 }
+.is-split {
+  width: 28px !important;
+}
+.color-span-base-split {
+  width: 20px;
+  height: 20px;
+}
 </style>
--- a/frontend/src/components/canvas/DeCanvas.vue
+++ b/frontend/src/components/canvas/DeCanvas.vue
@@ -282,7 +282,6 @@ export default {
      })
    },
    handleDragOver(e) {
-      // console.log("handleDragOver-"+this.canvasId)
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
      this.$refs[this.editorRefName].handleDragOver(e)
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -41,12 +41,14 @@
        :in-screen="inScreen"
        :edit-mode="'preview'"
        :h="config.style.height"
+        :canvas-id="canvasId"
      />
      <component
        :is="config.component"
        v-else
        ref="wrapperChild"
        class="component"
+        :canvas-id="canvasId"
        :out-style="config.style"
        :style="getComponentStyleDefault(config.style)"
        :prop-value="config.propValue"
@@ -83,6 +85,10 @@ export default {
  components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
  mixins: [mixins],
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    sourceConfig: {
      type: Object,
      require: true,
--- a/frontend/src/components/canvas/components/Editor/DeEditor.vue
+++ b/frontend/src/components/canvas/components/Editor/DeEditor.vue
@@ -65,6 +65,7 @@
      <de-out-widget
        v-if="renderOk && item.type==='custom'"
        :id="'component' + item.id"
+        :canvas-id="canvasId"
        ref="wrapperChild"
        class="component"
        :style="getComponentStyleDefault(item.style)"
@@ -79,6 +80,7 @@
        :is="item.component"
        v-else-if="renderOk && item.type==='other'"
        :id="'component' + item.id"
+        :canvas-id="canvasId"
        ref="wrapperChild"
        class="component"
        :style="getComponentStyle(item.style)"
@@ -91,6 +93,7 @@
        :is="item.component"
        v-else-if="renderOk"
        :id="'component' + item.id"
+        :canvas-id="canvasId"
        ref="wrapperChild"
        class="component"
        :filters="filterMap[item.propValue && item.propValue.viewId]"
@@ -1433,10 +1436,12 @@ export default {
            matrixStyleOriginWidth: this.matrixStyle.originWidth,
            matrixStyleOriginHeight: this.matrixStyle.originHeight
          })
-        this.$store.commit('setPreviewCanvasScale', {
-          scaleWidth: this.scalePointWidth,
-          scaleHeight: this.scalePointHeight
-        })
+        if(this.canvasId === 'canvas-main'){
+          this.$store.commit('setPreviewCanvasScale', {
+            scaleWidth: this.scalePointWidth,
+            scaleHeight: this.scalePointHeight
+          })
+        }
      }
    },
    getShapeStyleIntDeDrag(style, prop, item) {
@@ -1499,7 +1504,6 @@ export default {
      }
    },
    handleDragOver(e) {
-      console.log('handleDragOver--x=' + e.pageX + ';y=' + e.pageY)
      this.dragComponentInfo.shadowStyle.x = e.pageX - 220
      this.dragComponentInfo.shadowStyle.y = e.pageY - 90 + this.scrollTop
      this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth
@@ -1645,7 +1649,6 @@ export default {
      let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
      newX = newX > 0 ? newX : 1
      newY = newY > 0 ? newY : 1
-      console.log('moveTabCollisionActive=' + this.moveTabCollisionActive)
      if (this.moveTabCollisionActive) {
        return
      }
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -43,6 +43,7 @@
          :key="index"
          ref="viewWrapperChild"
          :config="item"
+          :canvas-id="canvasId"
          :source-config="componentData[index]"
          :search-count="searchCount"
          :in-screen="inScreen"
@@ -438,7 +439,9 @@ export default {
      } else {
        this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
      }
-      this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+      if(this.canvasId === 'canvas-main'){
+        this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+      }
      this.handleScaleChange()
    },
    resetID(data) {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -216,6 +216,10 @@ export default {
  name: 'UserView',
  components: { UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: null
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -39,6 +39,7 @@
                :is="element.component"
                v-if="element.type==='custom'"
                :id="'component' + element.id"
+                :canvas-id="canvasId"
                ref="deOutWidget"
                class="component-custom"
                :out-style="element.style"
@@ -63,6 +64,10 @@ export default {
  name: 'DeOutWidget',
  mixins: [inputStyleMixin],
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: () => {}
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -35,6 +35,10 @@ import customInput from '@/components/widget/DeWidget/customInput'
 export default {
  mixins: [customInput],
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: null
@@ -221,6 +225,7 @@ export default {
    },
    getCondition() {
      const param = {
+        canvasId: this.canvasId,
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -27,6 +27,10 @@ import bus from '@/utils/bus'
 export default {

  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: null
@@ -104,6 +108,7 @@ export default {
    },
    getCondition() {
      const param = {
+        canvasId: this.canvasId,
        component: this.element,
        value: !this.value ? [] : Array.isArray(this.value) ? this.value : [this.value],
        operator: this.operator
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -47,6 +47,10 @@ import bus from '@/utils/bus'
 export default {

  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: null
@@ -230,6 +234,7 @@ export default {
    },
    getCondition() {
      const param = {
+        canvasId: this.canvasId,
        component: this.element,
        value: [this.form.min, this.form.max],
        operator: this.operator
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -52,6 +52,10 @@ export default {
  components: { ElVisualSelect },
  mixins: [customInput],
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: () => {}
@@ -311,6 +315,7 @@ export default {
    },
    getCondition() {
      const param = {
+        canvasId: this.canvasId,
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -73,6 +73,10 @@ import { attrsMap, styleAttrs, textSelectGridWidget } from '@/components/widget/

 export default {
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: null
@@ -312,6 +316,7 @@ export default {
    },
    getCondition() {
      const param = {
+        canvasId: this.canvasId,
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -36,6 +36,10 @@ export default {
  components: { ElTreeSelect },
  mixins: [customInput],
  props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
    element: {
      type: Object,
      default: () => {}
@@ -298,6 +302,7 @@ export default {
      const val = this.formatFilterValue()

      const param = {
+        canvasId: this.canvasId,
        component: this.element,
        value: val,
        operator: this.operator,
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -45,14 +45,6 @@
                {{ $t('detabs.eidttitle') }}
              </el-dropdown-item>

-              <el-dropdown-item :command="beforeHandleCommand('selectView', item)">
-                {{ $t('detabs.selectview') }}
-              </el-dropdown-item>
-
-              <el-dropdown-item :command="beforeHandleCommand('selectOthers', item)">
-                {{ $t('detabs.selectOthers') }}
-              </el-dropdown-item>
-
              <el-dropdown-item
                v-if=" element.options.tabList.length > 1"
                :command="beforeHandleCommand('deleteCur', item)"