center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #2132 from dataease/pr@dev@refactor_aided-design-matrix

Browse Source 
refactor: 去掉矩阵密度选项，适配新的矩阵密度
This commit is contained in:
王嘉豪 2022-04-18 18:37:59 +08:00 committed by GitHub
commit 23e47281f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 79 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/canvas/components/Editor/Grid.vue
View File

@ -5,16 +5,25 @@
<path
:d="smallGridPathD"
fill="none"
stroke="rgba(207, 207, 207, 0.6)"
stroke="rgba(207, 207, 207, 0.5)"
stroke-width="1"
/>
</pattern>
<pattern id="middleGrid" :width="middleGridW" :height="middleGridH" patternUnits="userSpaceOnUse">
<rect :width="middleGridW" :height="middleGridH" fill="url(#smallGrid)" />
<path
:d="middleGridPathD"
fill="none"
stroke="rgba(207, 207, 207, 0.7)"
stroke-width="1.5"
/>
</pattern>
<pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
<rect :width="gridW" :height="gridH" fill="url(#smallGrid)" />
<rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
<path
:d="pathD"
fill="none"
stroke="rgba(64,158,255,0.6)"
stroke="rgba(64,158,255,0.8)"
stroke-width="1"
/>
</pattern>
@ -44,6 +53,9 @@ export default {
pathD: function() {
return 'M ' + this.gridW + ' 0 L 0 0 0 ' + this.gridH
},
middleGridPathD: function() {
return 'M ' + this.middleGridW + ' 0 L 0 0 0 ' + this.middleGridH
},
smallGridPathD: function() {
return 'M ' + this.smallGridW + ' 0 L 0 0 0 ' + this.smallGridH
},
@ -53,6 +65,12 @@ export default {
gridH: function() {
return this.matrixStyle.height * 2 * this.matrixBase
},
middleGridW: function() {
return this.matrixStyle.width * this.matrixBase
},
middleGridH: function() {
return this.matrixStyle.height * this.matrixBase
},
smallGridW: function() {
return this.matrixStyle.width
},

12
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -1011,12 +1011,12 @@ export default {
}
},
watch: {
'canvasStyleData.aidedDesign.matrixBase': {
handler(newVal, oldVal) {
this.changeComponentSizePoint(newVal / oldVal)
},
deep: true
},
// 'canvasStyleData.aidedDesign.matrixBase': {
// handler(newVal, oldVal) {
// this.changeComponentSizePoint(newVal / oldVal)
// },
// deep: true
// },
customStyle: {
handler(newVal) {
// 获取当前宽高（宽高改变后重新渲染画布）

4
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -317,7 +317,7 @@ const list = [
},
x: 1,
y: 36,
sizex: 10,
sizex: 12,
sizey: 6,
auxiliaryMatrix: true,
miniSizex: 1,
@ -347,7 +347,7 @@ const list = [
},
x: 1,
y: 1,
sizex: 10,
sizex: 12,
sizey: 10,
miniSizex: 1,
miniSizey: 1

27
frontend/src/components/canvas/utils/utils.js
View File

@ -67,6 +67,15 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
}
export function panelInit(componentData, componentStyle) {
// style初始化
componentStyle.refreshTime = (componentStyle.refreshTime || 5)
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
// // // 初始化密度为最高密度
// const matrixChange = 2 / componentStyle.aidedDesign.matrixBase
// componentStyle.aidedDesign.matrixBase = 2
componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
if (item.options.attrs &&
@ -96,12 +105,6 @@ export function panelInit(componentData, componentStyle) {
}
item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
})
// style初始化
componentStyle.refreshTime = (componentStyle.refreshTime || 5)
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
// 将data 和 style 数据设置到全局store中
store.commit('setComponentData', resetID(componentData))
store.commit('setCanvasStyle', componentStyle)
@ -115,3 +118,15 @@ export function resetID(data) {
}
return data
}
export function matrixBaseChange(component) {
const matrixBase = store.state.canvasStyleData.aidedDesign.matrixBase
if (component) {
component.x = (component.x - 1) * matrixBase
component.y = (component.y - 1) * matrixBase
component.sizex = component.sizex * matrixBase
component.sizey = component.sizey * matrixBase
}
return component
}

4
frontend/src/components/widget/DeWidget/DeTabs.vue
View File

@ -39,6 +39,10 @@
{{ $t('detabs.selectview') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeHandleCommond('selectOthers', item)">
添加其他组件
</el-dropdown-item>
<el-dropdown-item v-if=" element.options.tabList.length > 1" :command="beforeHandleCommond('deleteCur', item)">
{{ $t('table.delete') }}
</el-dropdown-item>

4
frontend/src/views/panel/AssistComponent/index.vue
View File

@ -83,7 +83,7 @@ import componentList, { assistList, pictureList, otherList } from '@/components/
import toast from '@/components/canvas/utils/toast'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import generateID from '@/components/canvas/utils/generateID'
import { deepCopy } from '@/components/canvas/utils/utils'
import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex'
@ -163,7 +163,7 @@ export default {
let component
componentList.forEach(componentTemp => {
if (id === componentTemp.id) {
component = deepCopy(componentTemp)
component = matrixBaseChange(deepCopy(componentTemp))
}
})
// 图片移入是 不支持矩阵 暂时无法监听窗口取消事件

14
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
View File

@ -11,13 +11,13 @@
<el-form-item :label="'辅助网格'" class="form-item form-item-slider">
<el-checkbox v-model="aidedDesign.showGrid" size="mini" @change="onChangePanelStyle" />
</el-form-item>
<el-form-item :label="'矩阵密度'" class="form-item form-item-slider">
<el-radio-group v-model="aidedDesign.matrixBase" size="mini">
<el-radio-button :label="1">普通</el-radio-button>
<el-radio-button :label="2">适中</el-radio-button>
<el-radio-button :label="4">密集</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- <el-form-item :label="'矩阵密度'" class="form-item form-item-slider">-->
<!-- <el-radio-group v-model="aidedDesign.matrixBase" size="mini" @change="onChangePanelStyle">-->
<!-- <el-radio-button :label="1">普通</el-radio-button>-->
<!-- <el-radio-button :label="2">适中</el-radio-button>-->
<!-- <el-radio-button :label="4">密集</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">辅助设计 <i

3
frontend/src/views/panel/ViewSelect/index.vue
View File

@ -75,6 +75,7 @@ import { mapState } from 'vuex'
import { queryPanelViewTree } from '@/api/panel/panel'
import { deleteCircle } from '@/api/chart/chart'
import { pluginTypes } from '@/api/chart/chart'
import { matrixBaseChange } from '@/components/canvas/utils/utils'
export default {
name: 'ViewSelect',
@ -201,7 +202,7 @@ export default {
// 用户视图设置 复制一个模板
componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') {
component = deepCopy(componentTemp)
component = matrixBaseChange(deepCopy(componentTemp))
}
})
component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix

4
frontend/src/views/panel/edit/index.vue
View File

@ -338,7 +338,7 @@ import ViewSelect from '../ViewSelect'
import SubjectSetting from '../SubjectSetting'
import bus from '@/utils/bus'
import Editor from '@/components/canvas/components/Editor/index'
import { deepCopy, panelInit } from '@/components/canvas/utils/utils'
import { deepCopy, matrixBaseChange, panelInit } from '@/components/canvas/utils/utils'
import componentList, {
BASE_MOBILE_STYLE,
COMMON_BACKGROUND,
@ -992,7 +992,7 @@ export default {
// 用户视图设置 复制一个模板
componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') {
component = deepCopy(componentTemp)
component = matrixBaseChange(deepCopy(componentTemp))
const propValue = {
id: newComponentId,
viewId: newViewInfo.id

2
frontend/src/views/panel/filter/index.vue
View File

@ -30,7 +30,7 @@
<script>
import { ApplicationContext } from '@/utils/ApplicationContext'
import { deepCopy } from '@/components/canvas/utils/utils'
import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex'
export default {

1
frontend/src/views/panel/list/PanelList.vue
View File

@ -419,6 +419,7 @@ export default {
this.editPanel.optType = param.optType
this.editPanel.panelInfo.nodeType = param.type
this.editPanel.visible = true
const temp = DEFAULT_COMMON_CANVAS_STYLE_STRING
switch (param.optType) {
case 'new':
this.editPanel.titlePre = this.$t('commons.create')

12
frontend/src/views/panel/panel.js
View File

@ -21,10 +21,13 @@ export const CANVAS_STYLE = {
auxiliaryMatrix: true,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
aidedDesign: {
showGrid: false,
matrixBase: 4 // 当前matrix的基数 （是pcMatrixCount的几倍）
}, // 辅助设计
refreshViewLoading: true, // 仪表板视图loading提示
refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
refreshTime: 5, // 仪表板刷新时间 默认5分钟
aidedDesign: AIDED_DESIGN // 辅助设计
refreshTime: 5 // 仪表板刷新时间 默认5分钟
}
export const AIDED_DESIGN = {
@ -32,6 +35,11 @@ export const AIDED_DESIGN = {
matrixBase: 1 // 当前matrix的基数 （是pcMatrixCount的几倍）
}
// export const AIDED_DESIGN_NEW = {
// showGrid: true,
// matrixBase: 4 // 当前matrix的基数 （是pcMatrixCount的几倍）
// }
export const DEFAULT_COMMON_CANVAS_STYLE_STRING = {
...CANVAS_STYLE,
chart: BASE_CHART_STRING