import { defineStore } from 'pinia'
|
import { store } from '../../index'
|
import { deepCopy } from '@/utils/utils'
|
import {
|
BASE_VIEW_CONFIG,
|
DEFAULT_INDICATOR_NAME_STYLE,
|
DEFAULT_INDICATOR_STYLE,
|
SENIOR_STYLE_SETTING_LIGHT
|
} from '@/views/chart/components/editor/util/chart'
|
import {
|
DEFAULT_CANVAS_STYLE_DATA_DARK,
|
DEFAULT_CANVAS_STYLE_DATA_LIGHT,
|
DEFAULT_CANVAS_STYLE_DATA_SCREEN_DARK
|
} from '@/views/chart/components/editor/util/dataVisualization'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import chartViewManager from '@/views/chart/components/js/panel'
|
import {
|
COMMON_COMPONENT_BACKGROUND_DARK,
|
COMMON_COMPONENT_BACKGROUND_LIGHT,
|
defaultStyleValue,
|
findBaseDeFaultAttr
|
} from '@/custom-component/component-list'
|
import { get, set } from 'lodash-es'
|
import { checkIsSameDs, viewFieldTimeTrans } from '@/utils/viewUtils'
|
import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
|
import { ElMessage } from 'element-plus-secondary'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import {
|
filterEnumParams,
|
filterEnumParamsReduce,
|
filterParamsOptions
|
} from '@/utils/componentUtils'
|
import { formatterItem } from '@/views/chart/components/js/formatter'
|
const { t } = useI18n()
|
|
export const dvMainStore = defineStore('dataVisualization', {
|
state: () => {
|
return {
|
canvasAttachInfo: {}, // 仪表板附加信息
|
fullscreenFlag: false, // 全屏启用标识
|
staticResourcePath: '/static-resource/',
|
canvasCollapse: {
|
defaultSide: false,
|
realTimeComponent: false,
|
canvas: false,
|
componentProp: false,
|
chartAreaCollapse: false,
|
datasetAreaCollapse: false
|
},
|
canvasState: {
|
curPointArea: 'base' // 当前焦点所在画布区域 base 主画布区域 hidden 隐藏画布区域
|
},
|
embeddedCallBack: 'no', // 嵌入模式是否允许反馈参数
|
editMode: 'preview', // 编辑器模式 edit preview
|
mobileInPc: false,
|
inMobile: false,
|
firstLoadMap: [],
|
canvasStyleData: { ...deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK), backgroundColor: null },
|
appData: null, //应用信息
|
// 当前展示画布缓存数据
|
componentDataCache: null,
|
// PC布局画布组件数据
|
pcComponentData: [],
|
// 移动端布局画布组件数据
|
mobileComponentData: [],
|
isInEditor: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
|
componentData: [], // 画布组件数据
|
curComponent: null,
|
curTabName: null, // 当前选中的tabName 大屏图层区域使用
|
curComponentIndex: null,
|
curCanvasScaleMap: {},
|
// 预览仪表板缩放信息
|
previewCanvasScale: {
|
scalePointWidth: 1,
|
scalePointHeight: 1
|
},
|
// 点击画布时是否点中组件，主要用于取消选中组件用。
|
// 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
|
isClickComponent: false,
|
// 大屏基础信息
|
dvInfo: {
|
dataState: null,
|
optType: null,
|
id: null,
|
name: null,
|
pid: null,
|
status: null,
|
selfWatermarkStatus: null,
|
watermarkInfo: {},
|
type: null,
|
mobileLayout: false
|
},
|
// 图表信息
|
canvasViewInfo: {},
|
// 图表展示数据信息
|
canvasViewDataInfo: {},
|
// 图表实例信息
|
canvasViewInstanceInfo: {},
|
// 图表原始数据，未被联动、查询、下钻过滤
|
canvasViewOriginDataInfo: {},
|
// 图表最新请求信息
|
lastViewRequestInfo: {},
|
// 仪表板基础矩阵信息
|
bashMatrixInfo: {
|
baseWidth: 0,
|
baseHeight: 0,
|
baseMarginLeft: 0,
|
baseMarginTop: 0
|
},
|
// 当前tab页内组件
|
curActiveTabInner: null,
|
// 联动设置状态
|
linkageSettingStatus: false,
|
// 当前设置联动的组件
|
curLinkageView: null,
|
// 和当前组件联动的目标组件
|
targetLinkageInfo: [],
|
// 当前仪表板联动 下钻 上卷等信息
|
nowPanelTrackInfo: {},
|
// 当前仪表板的跳转信息基础信息
|
nowPanelJumpInfo: {},
|
// 当前仪表板的跳转信息(只包括仪表板)
|
nowPanelJumpInfoTargetPanel: {},
|
// 当前仪表板的外部参数信息 兼容多仪表板嵌入式div
|
nowPanelOuterParamsInfoV2: {},
|
// 当前仪表板的外部参数基础信息 兼容多仪表板嵌入式div
|
nowPanelOuterParamsBaseInfoV2: {},
|
// 拖拽的组件信息
|
dragComponentInfo: null,
|
// 移动端布局状态
|
mobileLayoutStatus: false,
|
// 公共链接状态(当前是否是公共链接打开)
|
publicLinkStatus: false,
|
pcTabMatrixCount: {
|
x: 36,
|
y: 36
|
},
|
basePcScreenSize: {
|
width: 1920,
|
height: 1080
|
},
|
pcMatrixCount: {
|
x: 72,
|
y: 36
|
},
|
mobileMatrixCount: {
|
x: 6,
|
y: 12
|
},
|
mobileLayoutStyle: {
|
x: 300,
|
y: 600
|
},
|
scrollAutoMove: 0,
|
// 系统管理菜单是否收缩
|
isCollapse: false,
|
// 图表是否编辑记录
|
panelViewEditInfo: {},
|
// 仪表板图表明细
|
panelViewDetailsInfo: {},
|
// 批量操作组件类型 单一类型 or mix 混合类型,如果类型是UserView 走图表批量逻辑，
|
// mix 或者其他目前走 CommonAttr 公共属性处理逻辑
|
batchOptComponentType: null,
|
// panel edit batch operation status
|
batchOptStatus: false,
|
// 隐藏组件打开状态
|
hiddenListStatus: false,
|
// 最后隐藏组件
|
lastHiddenComponent: [],
|
// Currently selected components
|
curBatchOptComponents: [],
|
// Currently selected Multiplexing components
|
curMultiplexingComponents: {},
|
mixProperties: [],
|
mixPropertiesInner: {},
|
batchOptComponentInfo: null,
|
batchOptComponents: {},
|
// properties changed
|
changeProperties: {
|
customStyle: {},
|
customAttr: {}
|
},
|
allViewRender: [],
|
tabCollisionActiveId: null, // 当前在碰撞的Tab组件ID
|
tabMoveInActiveId: null, // 当前在移入的Tab ID
|
tabMoveOutActiveId: null, // 当前在移出的Tab ID
|
tabMoveOutComponentId: null, // 当前在移出Tab de组件ID
|
tabActiveTabNameMap: {}, // 编辑器中 tab组件中的活动tab页,
|
// 鼠标处于drag状态的坐标点
|
mousePointShadowMap: {
|
mouseX: 0,
|
mouseY: 0,
|
width: 0,
|
height: 0
|
},
|
previewVisible: false,
|
previewComponentData: [],
|
currentCanvasNewId: [],
|
// 初始状态下当前默认的系统色 dvInfo.type ==== 'dashboard'?'light':'dark'
|
curOriginThemes: 'light',
|
// 基础网格信息
|
baseCellInfo: {},
|
dataPrepareState: false, //数据准备状态
|
multiplexingStyleAdapt: true, //复用样式跟随主题
|
mainScrollTop: 0, //主画布运动量
|
isIframe: false, // 当前是否在iframe中
|
isPopWindow: false, // 当前是否在iframe弹框中
|
viewPageInfo: {} //表格分页信息
|
}
|
},
|
actions: {
|
setLastHiddenComponent(value?) {
|
if (value) {
|
this.lastHiddenComponent = [value]
|
} else if (this.lastHiddenComponent.length > 0) {
|
this.lastHiddenComponent = []
|
}
|
},
|
setIframeFlag(value) {
|
this.isIframe = value
|
},
|
setIsPopWindow(value) {
|
this.isPopWindow = value
|
},
|
setCanvasAttachInfo(value) {
|
this.canvasAttachInfo = value
|
},
|
setEmbeddedCallBack(value) {
|
this.embeddedCallBack = value
|
},
|
setPublicLinkStatus(value) {
|
this.publicLinkStatus = value
|
},
|
setFirstLoadMap(value) {
|
this.firstLoadMap = value
|
},
|
setDataPrepareState(value) {
|
this.dataPrepareState = value
|
},
|
setBaseCellInfo(value) {
|
this.baseCellInfo = value
|
},
|
aceSetCanvasData(value) {
|
this.canvasStyleData = value
|
},
|
setInMobile(value) {
|
this.inMobile = value
|
},
|
|
aceSetCurComponent(value) {
|
for (let i = 0; i < this.componentData.length; i++) {
|
if (this.componentData[i].id === value.id) {
|
this.componentData.splice(i, 1)
|
}
|
}
|
this.componentData.push(value)
|
this.curComponent = value
|
},
|
|
setClickComponentStatus(status) {
|
this.isClickComponent = status
|
},
|
|
setEditMode(mode) {
|
this.editMode = mode
|
},
|
setMobileInPc(mobileInPc) {
|
this.mobileInPc = mobileInPc
|
},
|
|
setInEditorStatus(status) {
|
this.isInEditor = status
|
},
|
|
setCanvasStyle(style) {
|
style.component['seniorStyleSetting'] =
|
style.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
|
style['component']['formatterItem'] =
|
style['component']['formatterItem'] || deepCopy(formatterItem)
|
this.canvasStyleData = style
|
},
|
setCanvasStyleScale(value) {
|
this.canvasStyleData.scale = value
|
},
|
setCanvasViewInfo(canvasViewInfo) {
|
this.canvasViewInfo = canvasViewInfo
|
},
|
getAppDataInfo() {
|
return this.appData
|
},
|
setAppDataInfo(appDataInfo) {
|
this.appData = appDataInfo
|
},
|
setCurComponentMobileConfig(component) {
|
this.curComponent = component
|
},
|
setCurTabName(val) {
|
this.curTabName = val
|
},
|
setCurComponent({ component, index }) {
|
this.setCurTabName(null)
|
this.setHiddenListStatus(false)
|
if (!component && this.curComponent) {
|
this.curComponent['editing'] = false
|
this.curComponent['resizing'] = false
|
this.curComponent['dragging'] = false
|
this.curComponent['canvasActive'] = false
|
// 如果当前组件不在主画布中 对应的分组的canvasActive 也要设置为false
|
if (this.curComponent.canvasId !== 'canvas-main') {
|
this.componentData.forEach(componentItem => {
|
if (this.curComponent.canvasId.includes(componentItem.id)) {
|
componentItem['canvasActive'] = false
|
}
|
})
|
}
|
}
|
if (!this.curComponent) {
|
this.componentData.forEach(componentItem => {
|
componentItem['canvasActive'] = false
|
})
|
}
|
if (component) {
|
this.componentData.forEach(componentItem => {
|
if (!component.canvasId.includes(componentItem.id)) {
|
componentItem['canvasActive'] = false
|
}
|
})
|
// Is the current component in editing status
|
if (!this.curComponent) {
|
component['editing'] = false
|
} else if (component.id !== this.curComponent.id) {
|
component['editing'] = false
|
}
|
}
|
this.curComponent = component
|
this.curComponentIndex = index
|
// 更新当前活动区域
|
if (this.curComponent && this.curComponent['category']) {
|
// 如果是图片 且图片配置了切换显示区
|
if (
|
this.curComponent.component !== 'Picture' ||
|
(this.curComponent.component === 'Picture' &&
|
(!this.curComponent.events?.checked ||
|
this.curComponent.events?.type !== 'displayChange'))
|
) {
|
this.canvasState['curPointArea'] = this.curComponent['category']
|
}
|
}
|
// 移动端通知
|
if (this.mobileInPc) {
|
useEmitt().emitter.emit('curComponentChange', {
|
type: 'curComponentChange',
|
value: this.curComponent ? JSON.parse(JSON.stringify(this.curComponent)) : null
|
})
|
}
|
},
|
setBashMatrixInfo(bashMatrixInfo) {
|
this.bashMatrixInfo = bashMatrixInfo
|
},
|
|
setShapeStyle(
|
{ top, left, width, height, rotate },
|
areaDataComponents = [],
|
moveType = 'move',
|
baseGroupComponentsRadio = {}
|
) {
|
if (this.curComponent.component === 'GroupArea' && areaDataComponents.length > 0) {
|
const topOffset = top - this.curComponent.style.top
|
const leftOffset = left - this.curComponent.style.left
|
const widthOffset = width - this.curComponent.style.width
|
const heightOffset = height - this.curComponent.style.height
|
if (moveType === 'move') {
|
areaDataComponents.forEach(component => {
|
component.style.top = component.style.top + topOffset
|
component.style.left = component.style.left + leftOffset
|
component.style.width = component.style.width + widthOffset
|
component.style.height = component.style.height + heightOffset
|
})
|
} else {
|
areaDataComponents.forEach(component => {
|
const componentRadio = baseGroupComponentsRadio[component.id]
|
if (componentRadio) {
|
component.style.top = top + height * componentRadio.topRadio
|
component.style.left = left + width * componentRadio.leftRadio
|
component.style.width = width * componentRadio.widthRadio
|
component.style.height = height * componentRadio.heightRadio
|
}
|
})
|
}
|
}
|
if (this.dvInfo.type === 'dashboard') {
|
if (top) this.curComponent.style.top = top < 0 ? 0 : Math.round(top)
|
if (left) this.curComponent.style.left = left < 0 ? 0 : Math.round(left)
|
if (width) this.curComponent.style.width = Math.round(width)
|
if (height) this.curComponent.style.height = Math.round(height)
|
if (rotate) this.curComponent.style.rotate = Math.round(rotate)
|
} else {
|
if (top) this.curComponent.style.top = top
|
if (left) this.curComponent.style.left = left
|
if (width) this.curComponent.style.width = width
|
if (height) this.curComponent.style.height = height
|
if (rotate) this.curComponent.style.rotate = rotate
|
}
|
},
|
|
setShapeSingleStyle({ key, value }) {
|
this.curComponent.style[key] = value
|
},
|
|
setComponentData(componentData = []) {
|
this.componentData = componentData
|
},
|
|
addCopyComponent(component, idMap, canvasViewInfoPre = this.canvasViewInfo) {
|
// 查找所属画布
|
if (component.canvasId === 'canvas-main') {
|
this.componentData.push(component)
|
} else {
|
this.componentData.forEach(componentItem => {
|
if (
|
component.canvasId.includes(componentItem.id) &&
|
componentItem.component == 'DeTabs'
|
) {
|
componentItem.propValue.forEach(tabItem => {
|
if (component.canvasId.includes(tabItem.name)) {
|
tabItem.componentData.push(component)
|
}
|
})
|
}
|
})
|
}
|
//组件组内部可能还有多个图表
|
this.updateCopyCanvasView(idMap, canvasViewInfoPre)
|
},
|
updateCopyCanvasView(idMap, canvasViewInfoPre = this.canvasViewInfo) {
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
const _this = this
|
//组件组内部可能还有多个图表
|
if (idMap) {
|
Object.keys(idMap).forEach(function (oldComponentId) {
|
if (canvasViewInfoPre[oldComponentId]) {
|
const newComponentId = idMap[oldComponentId]
|
const newView = {
|
...deepCopy(canvasViewInfoPre[oldComponentId]),
|
id: newComponentId,
|
linkageActive: false,
|
jumpActive: false
|
}
|
newView['customAttrMobile'] = null
|
newView['customStyleMobile'] = null
|
_this.canvasViewInfo[newComponentId] = newView
|
}
|
})
|
}
|
},
|
|
addComponent({ component, index, isFromGroup = false, componentData = this.componentData }) {
|
if (isFromGroup) {
|
componentData.push(component)
|
return
|
}
|
if (index !== undefined) {
|
componentData.splice(index, 0, component)
|
this.setCurComponent({ component: component, index: index })
|
} else {
|
componentData.push(component)
|
this.setCurComponent({ component: component, index: componentData.length - 1 })
|
}
|
const currentFont = useAppearanceStoreWithOut().fontList.find(ele => ele.isDefault)
|
//如果当前的组件是UserView 图表，则想canvasView中增加一项 UserView ID 和componentID保持一致
|
if (component.component === 'UserView') {
|
const defaultConfig = JSON.parse(JSON.stringify(BASE_VIEW_CONFIG))
|
if (component.innerType === 'bar-range') {
|
defaultConfig.customStyle.xAxis.axisLine.show = false
|
defaultConfig.customStyle.xAxis.splitLine.show = true
|
defaultConfig.customStyle.yAxis.axisLine.show = true
|
defaultConfig.customStyle.yAxis.splitLine.show = false
|
}
|
let newView = {
|
...defaultConfig,
|
id: component.id,
|
type: component.innerType,
|
render: component.render,
|
isPlugin: component.isPlugin,
|
plugin: {
|
isPlugin: component.isPlugin,
|
staticMap: component.staticMap
|
}
|
} as unknown as ChartObj
|
// 处理配置项默认值，不同图表的同一配置项默认值不同
|
const chartViewInstance = chartViewManager.getChartView(newView.render, newView.type)
|
if (chartViewInstance) {
|
newView = chartViewInstance.setupDefaultOptions(newView)
|
newView['title'] = component.name
|
}
|
currentFont && (newView.customStyle.text.fontFamily = currentFont.name)
|
this.canvasViewInfo[component.id] = newView
|
}
|
if (component.component === 'VQuery') {
|
const { color, titleColor, labelColor, borderColor, bgColor, text, titleLayout, layout } =
|
this.canvasStyleData.component.filterStyle || {}
|
const newView = {
|
...JSON.parse(JSON.stringify(BASE_VIEW_CONFIG)),
|
id: component.id,
|
title: t('visualization.query_component'),
|
type: component.innerType,
|
customStyle: {
|
component: {
|
show: true,
|
color,
|
titleShow: false,
|
text,
|
textColorShow: false,
|
labelColor,
|
borderColor,
|
title: '',
|
borderWidth: 1,
|
bgColor,
|
titleColor,
|
titleLayout,
|
layout,
|
btnList: ['sure'],
|
fontSize: '14',
|
labelShow: true,
|
fontWeight: '',
|
fontStyle: '',
|
fontSizeBtn: '14',
|
fontWeightBtn: '',
|
fontStyleBtn: '',
|
queryConditionWidth: 227,
|
nameboxSpacing: 8,
|
placeholderShow: true,
|
placeholderSize: 14,
|
queryConditionSpacing: 16,
|
queryConditionHeight: 32,
|
labelColorBtn: '#ffffff',
|
btnColor: '#3370ff'
|
}
|
}
|
}
|
this.canvasViewInfo[component.id] = newView
|
}
|
},
|
setLinkageTargetInfo(targetLinkageInfo) {
|
this.linkageSettingStatus = true
|
this.curLinkageView = this.curComponent
|
this.targetLinkageInfo = targetLinkageInfo
|
},
|
setFullscreenFlag(val) {
|
this.fullscreenFlag = val
|
},
|
removeViewFilter(componentId) {
|
this.componentData = this.componentData.map(item => {
|
const newItem = item
|
newItem.filters =
|
(newItem.filters &&
|
newItem.filters.filter(filter => filter.componentId !== componentId)) ||
|
[]
|
return newItem
|
})
|
},
|
|
deleteComponentById(componentId, componentData = this.componentData, deep = false) {
|
if (componentId) {
|
const indexResult = []
|
componentData.forEach((component, index) => {
|
if (componentId === component.id) {
|
indexResult.push(index)
|
} else if (deep && component.component === 'Group') {
|
this.deleteComponentById(componentId, component.propValue || [])
|
} else if (deep && component.innerType === 'DeTabs') {
|
component.propValue.forEach(ele => {
|
this.deleteComponentById(componentId, ele.componentData || [])
|
})
|
}
|
})
|
indexResult.forEach(indexItem => {
|
this.deleteComponent(indexItem, componentData)
|
})
|
}
|
},
|
|
deleteComponent(index?, componentData = this.componentData) {
|
if (index === undefined) {
|
index = this.curComponentIndex
|
}
|
|
if (/\d/.test(index)) {
|
this.curComponentIndex = null
|
componentData.splice(index, 1)
|
}
|
},
|
updateCurDvInfo(dvInfo) {
|
this.dvInfo = dvInfo
|
this.curOriginThemes = dvInfo.type === 'dashboard' ? 'light' : 'dark'
|
},
|
matrixSizeAdaptor() {
|
const { baseWidth, baseHeight, baseMarginLeft, baseMarginTop } = this.bashMatrixInfo
|
this.componentData.forEach(function (component) {
|
component.style.width = baseWidth * component.sizeX - baseMarginLeft
|
component.style.height = baseHeight * component.sizeY - baseMarginTop
|
component.style.left = baseWidth * (component.x - 1) + baseMarginLeft
|
component.style.top = baseHeight * (component.y - 1) + baseMarginTop
|
})
|
},
|
clearTargetViewLinkage(viewId, item) {
|
if (item.linkageFilters && item.linkageFilters.length > 0) {
|
const historyLinkageFiltersLength = item.linkageFilters.length
|
const newList = item.linkageFilters.filter(linkage => linkage.sourceViewId !== viewId)
|
item.linkageFilters.splice(0, item.linkageFilters.length)
|
// 重新push 可保证数组指针不变 可以watch到
|
if (newList.length > 0) {
|
newList.forEach(newLinkage => {
|
item.linkageFilters.push(newLinkage)
|
})
|
}
|
// 如果linkageFilters内容长度有变化 则需要重新查询
|
if (historyLinkageFiltersLength !== newList.length) {
|
useEmitt().emitter.emit('query-data-' + item.id)
|
}
|
}
|
},
|
// 清除相同sourceViewId 的 联动条件
|
clearViewLinkage(viewId) {
|
this.componentData.forEach(item => {
|
if (item.component === 'UserView' && item.innerType != 'VQuery') {
|
this.clearTargetViewLinkage(viewId, item)
|
} else if (item.component === 'Group') {
|
item.propValue.forEach(groupItem => {
|
this.clearTargetViewLinkage(viewId, groupItem)
|
})
|
} else if (item.component === 'DeTabs') {
|
item.propValue.forEach(tabItem => {
|
tabItem.componentData?.forEach(tabComponent => {
|
this.clearTargetViewLinkage(viewId, tabComponent)
|
})
|
})
|
}
|
})
|
},
|
addCurBatchComponent(componentInfo) {
|
const id = componentInfo.id
|
const componentType = componentInfo.component
|
this.curBatchOptComponents.push(id)
|
// 图表批量操作
|
if (componentType === 'UserView') {
|
// get view base info
|
const viewBaseInfo = this.canvasViewInfo[id]
|
// get properties
|
const chartViewInstance = chartViewManager.getChartView(
|
viewBaseInfo.render,
|
viewBaseInfo.type
|
)
|
if (chartViewInstance) {
|
if (this.curBatchOptComponents.length === 1) {
|
this.changeProperties.customAttr = viewBaseInfo.customAttr
|
this.changeProperties.customStyle = viewBaseInfo.customStyle
|
// 补充历史指标卡缺失属性
|
this.changeProperties.customAttr['indicator'] =
|
this.changeProperties.customAttr.indicator || deepCopy(DEFAULT_INDICATOR_STYLE)
|
this.changeProperties.customAttr['indicatorName'] =
|
this.changeProperties.customAttr.indicatorName ||
|
deepCopy(DEFAULT_INDICATOR_NAME_STYLE)
|
}
|
this.batchOptComponents[id] = {
|
properties: chartViewInstance.properties,
|
propertyInner: chartViewInstance.propertyInner,
|
value: chartViewInstance.name,
|
componentType: componentType
|
}
|
this.setBatchOptComponentInfo()
|
}
|
} else {
|
// 其他组件批量操作 do other
|
this.batchOptComponents[id] = findBaseDeFaultAttr(componentType)
|
this.setBatchOptComponentInfo()
|
}
|
if (this.batchOptComponentType !== 'UserView') {
|
this.batchOptComponentInfo = {
|
collapseName: 'background',
|
commonBackground: deepCopy(
|
this.curOriginThemes === 'light'
|
? COMMON_COMPONENT_BACKGROUND_LIGHT
|
: COMMON_COMPONENT_BACKGROUND_DARK
|
),
|
style: {}
|
}
|
|
this.mixPropertiesInner['common-style']?.forEach(styleKey => {
|
this.batchOptComponentInfo['style'][styleKey] = defaultStyleValue[styleKey]
|
})
|
}
|
},
|
setBatchOptComponentInfo() {
|
if (this.batchOptComponents && JSON.stringify(this.batchOptComponents) !== '{}') {
|
const batchAttachInfo = {
|
render: null,
|
type: null
|
}
|
this.mixPropertiesAdaptor(batchAttachInfo)
|
// 根据batchOptComponentType类型判断 组装batchOptComponentInfo信息
|
if (this.batchOptComponentType === 'UserView') {
|
// Assembly history settings 'customAttr' & 'customStyle'
|
this.batchOptComponentInfo = {
|
...deepCopy(BASE_VIEW_CONFIG),
|
mode: 'batchOpt',
|
render: batchAttachInfo.render,
|
type: batchAttachInfo.type,
|
commonBackground: deepCopy(
|
this.curOriginThemes === 'light'
|
? COMMON_COMPONENT_BACKGROUND_LIGHT
|
: COMMON_COMPONENT_BACKGROUND_DARK
|
),
|
customAttr: this.changeProperties.customAttr,
|
customStyle: this.changeProperties.customStyle
|
}
|
} else {
|
this.batchOptComponentInfo = {
|
collapseName: 'background',
|
commonBackground: deepCopy(
|
this.curOriginThemes === 'light'
|
? COMMON_COMPONENT_BACKGROUND_LIGHT
|
: COMMON_COMPONENT_BACKGROUND_DARK
|
),
|
style: {}
|
}
|
this.mixPropertiesInner['common-style']?.forEach(styleKey => {
|
this.batchOptComponentInfo['style'][styleKey] = defaultStyleValue[styleKey]
|
})
|
}
|
} else {
|
this.batchOptComponentInfo = null
|
}
|
},
|
mixPropertiesAdaptor(batchAttachInfo) {
|
this.mixProperties = []
|
this.mixPropertiesInner = {}
|
let mixPropertiesTemp = []
|
let mixPropertyInnerTemp = {}
|
let componentType = null
|
|
for (const key in this.batchOptComponents) {
|
const componentInfo = this.batchOptComponents[key]
|
if (componentType) {
|
componentType =
|
componentType === componentInfo.componentType ? componentInfo.componentType : 'mix'
|
} else {
|
componentType = componentInfo.componentType
|
}
|
if (mixPropertiesTemp.length > 0) {
|
// If it exists , taking the intersection
|
mixPropertiesTemp = mixPropertiesTemp.filter(
|
property => componentInfo.properties.indexOf(property) > -1
|
)
|
// 根据当前的mixPropertiesTemp 再对 mixPropertyInnerTemp 进行过滤
|
mixPropertiesTemp.forEach(propertyInnerItem => {
|
if (
|
mixPropertyInnerTemp[propertyInnerItem] &&
|
componentInfo.propertyInner[propertyInnerItem]
|
) {
|
mixPropertyInnerTemp[propertyInnerItem] = mixPropertyInnerTemp[
|
propertyInnerItem
|
].filter(
|
propertyInnerItemValue =>
|
componentInfo.propertyInner[propertyInnerItem].indexOf(propertyInnerItemValue) >
|
-1
|
)
|
}
|
})
|
} else {
|
// If it doesn't exist, assignment directly
|
mixPropertiesTemp = deepCopy(componentInfo.properties)
|
mixPropertyInnerTemp = deepCopy(componentInfo.propertyInner)
|
}
|
batchAttachInfo.type =
|
batchAttachInfo.type === null || batchAttachInfo.type === componentInfo.value
|
? componentInfo.value
|
: 'mix'
|
}
|
mixPropertiesTemp.forEach(property => {
|
if (mixPropertyInnerTemp[property]) {
|
this.mixPropertiesInner[property] = mixPropertyInnerTemp[property]
|
this.mixProperties.push(property)
|
}
|
})
|
this.batchOptComponentType = componentType
|
},
|
setChangeProperties(propertyInfo) {
|
if (this.batchOptComponentType === 'UserView') {
|
if (propertyInfo.subProp) {
|
const subValue = get(propertyInfo.value, propertyInfo.subProp)
|
const target = this.changeProperties[propertyInfo.custom][propertyInfo.property]
|
set(target, propertyInfo.subProp, subValue)
|
} else {
|
this.changeProperties[propertyInfo.custom][propertyInfo.property] = propertyInfo.value
|
}
|
// 修改对应图表的参数
|
this.curBatchOptComponents.forEach(viewId => {
|
const viewInfo = this.canvasViewInfo[viewId]
|
//针对双轴图chart-mix
|
if (
|
viewInfo.type.includes('chart-mix') &&
|
propertyInfo.property === 'basicStyle' &&
|
propertyInfo.subProp
|
) {
|
const subValue = get(propertyInfo.value, propertyInfo.subProp)
|
const target = viewInfo[propertyInfo.custom][propertyInfo.property]
|
set(target, propertyInfo.subProp, subValue)
|
switch (propertyInfo.subProp) {
|
case 'alpha':
|
const subAlpha = get(propertyInfo.value, 'subAlpha')
|
set(target, 'subAlpha', subAlpha)
|
break
|
case 'colorScheme':
|
const subColorScheme = get(propertyInfo.value, 'subColorScheme')
|
set(target, 'subColorScheme', subColorScheme)
|
break
|
case 'seriesColor':
|
const subSeriesColor = get(propertyInfo.value, 'subSeriesColor')
|
set(target, 'subSeriesColor', subSeriesColor)
|
break
|
case 'colors':
|
const subColors = get(propertyInfo.value, 'subColors')
|
set(target, 'subColors', subColors)
|
break
|
case 'lineWidth':
|
const leftLineWidth = get(propertyInfo.value, 'leftLineWidth')
|
set(target, 'leftLineWidth', leftLineWidth)
|
break
|
case 'lineSymbol':
|
const leftLineSymbol = get(propertyInfo.value, 'leftLineSymbol')
|
set(target, 'leftLineSymbol', leftLineSymbol)
|
break
|
case 'lineSymbolSize':
|
const leftLineSymbolSize = get(propertyInfo.value, 'leftLineSymbolSize')
|
set(target, 'leftLineSymbolSize', leftLineSymbolSize)
|
break
|
case 'lineSmooth':
|
const leftLineSmooth = get(propertyInfo.value, 'leftLineSmooth')
|
set(target, 'leftLineSmooth', leftLineSmooth)
|
break
|
}
|
} else if (propertyInfo.subProp) {
|
const subValue = get(propertyInfo.value, propertyInfo.subProp)
|
const target = viewInfo[propertyInfo.custom][propertyInfo.property]
|
set(target, propertyInfo.subProp, subValue)
|
} else {
|
viewInfo[propertyInfo.custom][propertyInfo.property] = propertyInfo.value
|
}
|
if (['tablePageMode', 'tablePageSize'].includes(propertyInfo.subProp)) {
|
useEmitt().emitter.emit('calcData-' + viewId, viewInfo)
|
} else {
|
setTimeout(() => {
|
useEmitt().emitter.emit('renderChart-' + viewId, viewInfo)
|
}, 0)
|
}
|
})
|
} else {
|
this.componentData.forEach(component => {
|
if (this.curBatchOptComponents.includes(component.id)) {
|
if (propertyInfo.custom === 'commonBackground') {
|
component.commonBackground = deepCopy(this.batchOptComponentInfo.commonBackground)
|
} else if (propertyInfo.custom === 'style' && component.style[propertyInfo.property]) {
|
component.style[propertyInfo.property] = propertyInfo.value
|
}
|
}
|
if (component.component === 'Group') {
|
component.propValue.forEach(groupItem => {
|
if (this.curBatchOptComponents.includes(groupItem.id)) {
|
if (propertyInfo.custom === 'commonBackground') {
|
groupItem.commonBackground = deepCopy(this.batchOptComponentInfo.commonBackground)
|
} else if (
|
propertyInfo.custom === 'style' &&
|
groupItem.style[propertyInfo.property]
|
) {
|
groupItem.style[propertyInfo.property] = propertyInfo.value
|
}
|
}
|
})
|
} else if (component.component === 'DeTabs') {
|
component.propValue.forEach(tabItem => {
|
tabItem.componentData?.forEach(tabComponent => {
|
if (this.curBatchOptComponents.includes(tabComponent.id)) {
|
if (propertyInfo.custom === 'commonBackground') {
|
tabComponent.commonBackground = deepCopy(
|
this.batchOptComponentInfo.commonBackground
|
)
|
} else if (
|
propertyInfo.custom === 'style' &&
|
tabComponent.style[propertyInfo.property]
|
) {
|
tabComponent.style[propertyInfo.property] = propertyInfo.value
|
}
|
}
|
})
|
})
|
}
|
})
|
}
|
},
|
setBatchChangeBackground(newBackground) {
|
this.componentData.forEach(component => {
|
if (component.component === 'UserView') {
|
if (this.curBatchOptComponents.includes(component.id)) {
|
component.commonBackground = deepCopy(newBackground)
|
}
|
} else if (component.component === 'Group') {
|
component.propValue.forEach(groupItem => {
|
if (this.curBatchOptComponents.includes(groupItem.id)) {
|
groupItem.commonBackground = deepCopy(newBackground)
|
}
|
})
|
} else if (component.component === 'DeTabs') {
|
component.propValue.forEach(tabItem => {
|
tabItem.componentData?.forEach(tabComponent => {
|
if (this.curBatchOptComponents.includes(tabComponent.id)) {
|
tabComponent.commonBackground = deepCopy(newBackground)
|
}
|
})
|
})
|
}
|
})
|
},
|
setBatchOptStatus(status) {
|
this.batchOptStatus = status
|
// Currently selected components
|
this.curBatchOptComponents = []
|
this.mixProperties = []
|
this.mixPropertiesInner = {}
|
this.batchOptComponentType = null
|
this.batchOptComponentInfo = null
|
this.batchOptComponents = {}
|
this.componentViewsData = {}
|
this.changeProperties = {
|
customStyle: {},
|
customAttr: {}
|
}
|
},
|
setHiddenListStatus(status?) {
|
if (status != undefined) {
|
this.hiddenListStatus = !!status
|
} else {
|
this.hiddenListStatus = !this.hiddenListStatus
|
}
|
if (this.dvInfo.type === 'dashboard') {
|
this.setBatchOptStatus(false)
|
}
|
},
|
removeCurBatchComponentWithId(id) {
|
for (let index = 0; index < this.curBatchOptComponents.length; index++) {
|
const element = this.curBatchOptComponents[index]
|
if (element === id) {
|
delete this.batchOptComponents[id]
|
this.curBatchOptComponents.splice(index, 1)
|
break
|
}
|
}
|
if (
|
this.curBatchOptComponents.length === 1 &&
|
this.canvasViewInfo &&
|
this.canvasViewInfo[this.curBatchOptComponents[0]]
|
) {
|
const lastViewId = this.curBatchOptComponents[0]
|
const viewBaseInfo = this.canvasViewInfo[lastViewId]
|
this.changeProperties.customAttr = viewBaseInfo.customAttr
|
this.changeProperties.customStyle = viewBaseInfo.customStyle
|
}
|
if (this.curBatchOptComponents.length === 0) {
|
this.changeProperties = {
|
customStyle: {},
|
customAttr: {}
|
}
|
}
|
this.setBatchOptComponentInfo()
|
},
|
removeCurMultiplexingComponentWithId(id) {
|
delete this.curMultiplexingComponents[id]
|
},
|
addCurMultiplexingComponent(componentInfo) {
|
if (componentInfo.componentId) {
|
this.curMultiplexingComponents[componentInfo.componentId] = componentInfo.component
|
}
|
},
|
initCurMultiplexingComponents() {
|
this.curMultiplexingComponents = {}
|
},
|
addCanvasViewInfo(viewId, viewInfo) {
|
this.canvasViewInfo[viewId] = viewInfo
|
},
|
removeCanvasViewInfo(viewId) {
|
delete this.canvasViewInfo[viewId]
|
},
|
clearLinkageSettingInfo() {
|
this.linkageSettingStatus = false
|
this.curLinkageView = null
|
this.targetLinkageInfo = []
|
},
|
setNowPanelTrackInfo(trackInfo) {
|
this.nowPanelTrackInfo = trackInfo
|
},
|
setNowPanelJumpInfo(jumpInfo) {
|
this.nowPanelJumpInfo = jumpInfo.baseJumpInfoMap
|
},
|
setNowPanelJumpInfoInner(jumpInfo) {
|
this.nowPanelJumpInfo = jumpInfo
|
},
|
setNowTargetPanelJumpInfo(jumpInfo) {
|
this.nowPanelJumpInfoTargetPanel = jumpInfo.baseJumpInfoVisualizationMap
|
},
|
setNowPanelOuterParamsInfoV2(outerParamsInfo, dvId = this.dvInfo.id) {
|
this.nowPanelOuterParamsInfoV2[dvId] = outerParamsInfo.outerParamsInfoMap
|
this.nowPanelOuterParamsBaseInfoV2[dvId] = outerParamsInfo.outerParamsInfoBaseMap
|
},
|
// 添加联动 下钻 等查询组件
|
addViewTrackFilter(data) {
|
const viewId = data.viewId
|
let trackInfo
|
if (data.option === 'linkage') {
|
// 维度日期类型转换
|
viewFieldTimeTrans(this.canvasViewDataInfo[viewId], data)
|
trackInfo = this.nowPanelTrackInfo
|
} else {
|
trackInfo = this.nowPanelJumpInfoTargetPanel
|
}
|
const preActiveComponentIds = []
|
const customFilterInfo = data.customFilter
|
for (let indexOuter = 0; indexOuter < this.componentData.length; indexOuter++) {
|
const element = this.componentData[indexOuter]
|
if (element.id !== viewId) {
|
if (['UserView', 'VQuery'].includes(element.component)) {
|
this.trackFilterCursor(
|
element,
|
data,
|
trackInfo,
|
preActiveComponentIds,
|
viewId,
|
customFilterInfo
|
)
|
this.componentData[indexOuter] = element
|
} else if (element.component === 'Group') {
|
element.propValue?.forEach((groupItem, index) => {
|
this.trackFilterCursor(
|
groupItem,
|
data,
|
trackInfo,
|
preActiveComponentIds,
|
viewId,
|
customFilterInfo
|
)
|
element.propValue[index] = groupItem
|
})
|
} else if (element.component === 'DeTabs') {
|
element.propValue?.forEach(tabItem => {
|
tabItem.componentData?.forEach((tabComponent, index) => {
|
this.trackFilterCursor(
|
tabComponent,
|
data,
|
trackInfo,
|
preActiveComponentIds,
|
viewId,
|
customFilterInfo
|
)
|
tabItem.componentData[index] = tabComponent
|
})
|
})
|
}
|
}
|
}
|
preActiveComponentIds.forEach(viewId => {
|
useEmitt().emitter.emit('query-data-' + viewId)
|
})
|
},
|
addWebParamsFilter(params, curComponentData = this.componentData) {
|
if (params) {
|
for (let index = 0; index < curComponentData.length; index++) {
|
const element = curComponentData[index]
|
if (['UserView'].includes(element.component)) {
|
this.trackWebFilterCursor(element, params)
|
this.componentData[index] = element
|
} else if (element.component === 'Group') {
|
element.propValue?.forEach((groupItem, index) => {
|
this.trackWebFilterCursor(groupItem, params)
|
element.propValue[index] = groupItem
|
})
|
} else if (element.component === 'DeTabs') {
|
element.propValue?.forEach(tabItem => {
|
tabItem.componentData?.forEach((tabComponent, index) => {
|
this.trackWebFilterCursor(tabComponent, params)
|
tabItem.componentData[index] = tabComponent
|
})
|
})
|
}
|
}
|
}
|
},
|
// 添加外部参数的过滤条件
|
addOuterParamsFilter(
|
paramsPre,
|
curComponentData = this.componentData,
|
source = 'inner',
|
dvId = this.dvInfo.id
|
) {
|
// params 结构 {key1:value1,key2:value2}
|
const params = {}
|
const paramsVersion = (paramsPre && paramsPre['outerParamsVersion']) || 'v1'
|
if (this.nowPanelOuterParamsBaseInfoV2[dvId]) {
|
let errorCount = 0
|
let errorMes = ''
|
Object.keys(this.nowPanelOuterParamsBaseInfoV2[dvId]).forEach(key => {
|
const targetInfo = this.nowPanelOuterParamsBaseInfoV2[dvId][key]
|
const userParams = paramsPre ? paramsPre[key] : null
|
const userParamsIsNull = !userParams || userParams.length === 0
|
if (targetInfo.required && userParamsIsNull) {
|
// 要求用户必填 但是用户没有输入参数
|
errorCount++
|
errorMes = errorMes + '[' + key + ']'
|
} else if (
|
userParamsIsNull &&
|
targetInfo.enabledDefault &&
|
targetInfo.defaultValue &&
|
targetInfo.defaultValue.length > 0
|
) {
|
// 非必填时 用户没有填写参数 但是启用默认值且有预设默认值时
|
if (paramsVersion === 'v2') {
|
params[key] = {
|
operator: 'in',
|
value: JSON.parse(targetInfo.defaultValue)
|
}
|
} else {
|
params[key] = JSON.parse(targetInfo.defaultValue)
|
}
|
} else if (!userParamsIsNull) {
|
params[key] = paramsPre[key]
|
}
|
})
|
if (errorCount > 0) {
|
ElMessage.error('参数' + errorMes + '不能为空')
|
throw new Error('参数' + errorMes + '不能为空')
|
}
|
} else {
|
return
|
}
|
|
if (params) {
|
const preActiveComponentIds = []
|
const trackInfo = this.nowPanelOuterParamsInfoV2[dvId]
|
for (let index = 0; index < curComponentData.length; index++) {
|
const element = curComponentData[index]
|
if (['UserView', 'VQuery'].includes(element.component)) {
|
this.trackOuterFilterCursor(
|
element,
|
params,
|
preActiveComponentIds,
|
trackInfo,
|
source,
|
paramsVersion
|
)
|
this.componentData[index] = element
|
} else if (element.component === 'Group') {
|
element.propValue?.forEach((groupItem, index) => {
|
this.trackOuterFilterCursor(
|
groupItem,
|
params,
|
preActiveComponentIds,
|
trackInfo,
|
source,
|
paramsVersion
|
)
|
element.propValue[index] = groupItem
|
})
|
} else if (element.component === 'DeTabs') {
|
element.propValue?.forEach(tabItem => {
|
tabItem.componentData?.forEach((tabComponent, index) => {
|
if (['UserView', 'VQuery'].includes(tabComponent.component)) {
|
this.trackOuterFilterCursor(
|
tabComponent,
|
params,
|
preActiveComponentIds,
|
trackInfo,
|
source,
|
paramsVersion
|
)
|
tabItem.componentData[index] = tabComponent
|
} else if (tabComponent.component === 'Group') {
|
tabComponent.propValue?.forEach((groupItem, index) => {
|
this.trackOuterFilterCursor(
|
groupItem,
|
params,
|
preActiveComponentIds,
|
trackInfo,
|
source,
|
paramsVersion
|
)
|
tabComponent.propValue[index] = groupItem
|
})
|
}
|
})
|
})
|
}
|
}
|
}
|
},
|
trackWebFilterCursor(element, params) {
|
if (params[element.id]) {
|
element['webParamsFilters'] = params[element.id]
|
useEmitt().emitter.emit('query-data-' + element.id)
|
}
|
},
|
trackOuterFilterCursor(
|
element,
|
params,
|
preActiveComponentIds,
|
trackInfo,
|
source,
|
outerParamsVersion = 'v1'
|
) {
|
// 弹窗区域禁用时 在弹窗区域的组件不生效
|
if (
|
!['UserView', 'VQuery'].includes(element.component) ||
|
(element.category === 'hidden' && !this.canvasStyleData.popupAvailable)
|
) {
|
return
|
}
|
const currentFilters = [] // 外部参数信息
|
const defaultValueMap = {}
|
// 外部参数 可能会包含多个参数
|
Object.keys(params).forEach(function (sourceInfo) {
|
// 获取外部参数的值 sourceInfo 是外部参数名称 支持数组传入
|
let operatorV2, paramValue, paramValueStr, parmaValueSource
|
if (outerParamsVersion === 'v2') {
|
operatorV2 = params[sourceInfo].operator
|
paramValue = params[sourceInfo].value
|
paramValueStr = params[sourceInfo].value
|
parmaValueSource = params[sourceInfo].value
|
} else {
|
paramValue = params[sourceInfo]
|
paramValueStr = params[sourceInfo]
|
parmaValueSource = params[sourceInfo]
|
}
|
let operator = 'in'
|
if (paramValue && !Array.isArray(paramValue)) {
|
paramValue = [paramValue]
|
operator = 'eq'
|
} else if (paramValue && Array.isArray(paramValue)) {
|
if (paramValue.length === 1) {
|
operator = 'eq'
|
}
|
paramValueStr = ''
|
paramValue.forEach((innerValue, index) => {
|
if (index === 0) {
|
paramValueStr = innerValue
|
} else {
|
paramValueStr = paramValueStr + ',' + innerValue
|
}
|
})
|
}
|
// 获取所有目标联动信息
|
const targetInfoList = trackInfo[sourceInfo] || []
|
|
targetInfoList.forEach(targetInfo => {
|
const targetInfoArray = targetInfo.split('#')
|
const targetViewId = targetInfoArray[0] // 目标图表
|
// DE_EMPTY 为清空条件标志
|
if (element.component === 'UserView' && element.id === targetViewId) {
|
if ('DE_EMPTY' !== paramValueStr && paramValueStr !== null && paramValueStr !== '') {
|
// 如果目标图表 和 当前循环组件id相等 则进行条件增减
|
const targetFieldId = targetInfoArray[1] // 目标图表列ID
|
const condition = {
|
fieldId: targetFieldId,
|
operator: operatorV2 || operator,
|
value: paramValue,
|
viewIds: [targetViewId]
|
}
|
let j = currentFilters.length
|
while (j--) {
|
const filter = currentFilters[j]
|
// 兼容性准备 viewIds 只会存放一个值
|
if (targetFieldId === filter.fieldId && filter.viewIds.includes(targetViewId)) {
|
currentFilters.splice(j, 1)
|
}
|
}
|
// 不存在该条件 且 条件有效 直接保存该条件
|
// !filterExist && vValid && currentFilters.push(condition)
|
|
currentFilters.push(condition)
|
}
|
preActiveComponentIds.push(element.id)
|
}
|
if (element.component === 'VQuery') {
|
element.propValue?.forEach(filterItem => {
|
if (filterItem.id === targetViewId) {
|
let queryParams = paramValue
|
const targetMatchMode = targetInfoArray[2] // 目标匹配模式
|
if (targetMatchMode === 'filter') {
|
paramValue = paramValue.map(option => {
|
if (typeof option === 'string' && option.includes(',')) {
|
return option.replace(/,/g, '-de-')
|
}
|
return option
|
})
|
queryParams = paramValue
|
// do filter
|
filterItem['optionFilter'] = queryParams
|
if (filterItem.defaultValueCheck) {
|
const result = filterParamsOptions(
|
deepCopy(filterItem['selectValue']),
|
deepCopy(queryParams)
|
)
|
if (result) {
|
filterItem['selectValue'] = result
|
filterItem['defaultValue'] = result
|
} else if (!filterItem.defaultValueFirstItem && !filterItem.required) {
|
filterItem.defaultValueCheck = false
|
}
|
}
|
} else {
|
if (!['1', '7'].includes(filterItem.displayType)) {
|
// 查询组件除了时间组件 其他入参只支持文本 这里全部转为文本
|
queryParams = paramValue.map(number => String(number))
|
}
|
filterItem.defaultMapValue = []
|
filterItem.mapValue = []
|
filterItem.defaultValueCheck = true
|
filterItem.defaultValueFirstItem = false
|
filterItem.timeType = 'fixed'
|
if (['0', '2'].includes(filterItem.displayType)) {
|
const { optionValueSource, field, displayId } = filterItem
|
const queryMapFlag = optionValueSource === 1 && field.id !== displayId
|
let queryMapParams = queryParams
|
if (queryMapFlag) {
|
queryParams = filterEnumParamsReduce(queryParams, field.id)
|
queryMapParams = filterEnumParams(queryParams, field.id)
|
}
|
// 0 文本类型 1 数字类型
|
if (filterItem.multiple) {
|
// multiple === true 多选
|
filterItem['selectValue'] = queryParams
|
filterItem['defaultValue'] = queryParams
|
} else {
|
// 单选
|
filterItem['selectValue'] = queryParams[0]
|
filterItem['defaultValue'] = queryParams[0]
|
}
|
filterItem['defaultMapValue'] = queryMapParams
|
filterItem['mapValue'] = queryMapParams
|
} else if (filterItem.displayType === '1') {
|
// 1 时间类型
|
filterItem['selectValue'] = queryParams[0]
|
filterItem['defaultValue'] = queryParams[0]
|
} else if (filterItem.displayType === '7') {
|
// 7 时间范围类型
|
filterItem['selectValue'] = queryParams
|
filterItem['defaultValue'] = queryParams
|
} else if (filterItem.displayType === '8') {
|
// 8 文本搜索
|
filterItem['conditionValueF'] = parmaValueSource + ''
|
filterItem['defaultConditionValueF'] = parmaValueSource + ''
|
} else if (filterItem.displayType === '9') {
|
// 9 下拉树
|
if (filterItem.multiple) {
|
// multiple === true 多选
|
filterItem['selectValue'] = queryParams
|
filterItem['defaultValue'] = queryParams
|
} else {
|
// 单选
|
filterItem['selectValue'] = queryParams[0]
|
filterItem['defaultValue'] = queryParams[0]
|
}
|
} else if (filterItem.displayType === '22') {
|
filterItem['defaultNumValueStart'] = queryParams[0]
|
filterItem['defaultNumValueEnd'] = queryParams[1]
|
filterItem['numValueStart'] = queryParams[0]
|
filterItem['numValueEnd'] = queryParams[1]
|
}
|
if ('DE_EMPTY' === paramValueStr) {
|
filterItem['selectValue'] = null
|
filterItem['defaultValue'] = null
|
filterItem['conditionValueF'] = null
|
filterItem['defaultConditionValueF'] = null
|
}
|
if (filterItem['defaultValue']) {
|
defaultValueMap[filterItem.id] = filterItem['defaultValue']
|
}
|
}
|
}
|
})
|
// 级联条件处理
|
if (element.cascade?.length && Object.keys(defaultValueMap).length) {
|
const allCascadeDataset = element.cascade
|
.flat()
|
.map(item => `--${item.datasetId}`)
|
.join('')
|
element.cascade.forEach(cascadeItem => {
|
Object.keys(defaultValueMap).forEach(key => {
|
const curDefaultValue = defaultValueMap[key]
|
if (cascadeItem.length) {
|
cascadeItem.forEach(itemInner => {
|
if (itemInner.datasetId.includes(key) && curDefaultValue) {
|
itemInner['currentSelectValue'] = Array.isArray(curDefaultValue)
|
? curDefaultValue
|
: [curDefaultValue]
|
itemInner['selectValue'] = Array.isArray(curDefaultValue)
|
? curDefaultValue
|
: [curDefaultValue]
|
} else if (!allCascadeDataset.includes(key)) {
|
itemInner['currentSelectValue'] = []
|
itemInner['selectValue'] = []
|
}
|
})
|
}
|
})
|
})
|
}
|
}
|
})
|
})
|
if (element.component === 'UserView') {
|
element['outerParamsFilters'] = currentFilters
|
}
|
if (source === 'outer') {
|
preActiveComponentIds.forEach(viewId => {
|
useEmitt().emitter.emit('query-data-' + viewId)
|
})
|
}
|
},
|
trackFilterCursor(
|
element,
|
sourceData,
|
trackInfo,
|
preActiveComponentIds,
|
viewId,
|
customFilter?
|
) {
|
const checkQDList = [...sourceData.dimensionList, ...sourceData.quotaList]
|
let currentFilters = element.linkageFilters || [] // 当前联动filter
|
if (['table-info', 'table-normal'].includes(element.innerType)) {
|
currentFilters = []
|
}
|
if (currentFilters.length) {
|
for (let i = currentFilters.length - 1; i >= 0; i--) {
|
if (currentFilters[i].filterType === 3) {
|
currentFilters.splice(i, 1)
|
}
|
}
|
}
|
// 联动的图表情况历史条件
|
// const currentFilters = []
|
checkQDList.forEach(QDItem => {
|
let sourceInfo = viewId + '#' + QDItem.id
|
if (sourceData.option === 'jump') {
|
sourceInfo = sourceInfo + '#' + sourceData.sourceFieldId
|
}
|
// 获取所有目标联动信息
|
const targetInfoList = trackInfo[sourceInfo] || []
|
const paramValue = [QDItem.value]
|
targetInfoList.forEach(targetInfo => {
|
const targetInfoArray = targetInfo.split('#')
|
const targetViewId = targetInfoArray[0] // 目标图表
|
if (element.component === 'UserView' && element.id === targetViewId) {
|
// 如果含有customFilter 仅加入customFilter
|
if (customFilter && checkIsSameDs(this.canvasViewInfo, viewId, element.id)) {
|
currentFilters.push({
|
filterType: 3,
|
customFilter: customFilter
|
})
|
} else {
|
// 如果目标图表 和 当前循环组件id相等 则进行条件增减
|
const targetFieldId = targetInfoArray[1] // 目标图表列ID
|
let condition
|
if (QDItem.timeValue && Array.isArray(QDItem.timeValue)) {
|
// 如果dimension.timeValue存在值且是数组 目前判断为是时间组件
|
condition = {
|
fieldId: targetFieldId,
|
operator: 'between',
|
value: QDItem.timeValue,
|
viewIds: [targetViewId],
|
sourceViewId: viewId
|
}
|
} else if (QDItem.value !== null && QDItem.value !== '') {
|
condition = {
|
fieldId: targetFieldId,
|
operator: 'eq',
|
value: [QDItem.value],
|
viewIds: [targetViewId],
|
sourceViewId: viewId
|
}
|
}
|
if (condition) {
|
let j = currentFilters.length
|
while (j--) {
|
const filter = currentFilters[j]
|
// 兼容性准备 viewIds 只会存放一个值
|
if (targetFieldId === filter.fieldId && filter.viewIds.includes(targetViewId)) {
|
currentFilters.splice(j, 1)
|
}
|
}
|
// 不存在该条件 且 条件有效 直接保存该条件
|
// !filterExist && vValid && currentFilters.push(condition)
|
currentFilters.push(condition)
|
}
|
}
|
preActiveComponentIds.includes(element.id) || preActiveComponentIds.push(element.id)
|
}
|
if (element.component === 'VQuery' && Array.isArray(element.propValue)) {
|
element.propValue?.forEach(filterItem => {
|
if (filterItem.id === targetViewId) {
|
let queryParams = paramValue
|
if (!['1', '7'].includes(filterItem.displayType)) {
|
// 查询组件除了时间组件 其他入参只支持文本 这里全部转为文本
|
queryParams = paramValue.map(number => String(number))
|
}
|
filterItem.defaultValueCheck = true
|
filterItem.defaultValueFirstItem = false
|
filterItem.timeType = 'fixed'
|
if (['0', '2'].includes(filterItem.displayType)) {
|
const { optionValueSource, field, displayId } = filterItem
|
const queryMapFlag = optionValueSource === 1 && field.id !== displayId
|
let queryMapParams = queryParams
|
if (queryMapFlag) {
|
queryParams = filterEnumParamsReduce(queryParams, field.id)
|
queryMapParams = filterEnumParams(queryParams, field.id)
|
}
|
// 0 文本类型 1 数字类型
|
if (filterItem.multiple) {
|
// multiple === true 多选
|
filterItem['selectValue'] = queryParams
|
filterItem['defaultValue'] = queryParams
|
} else {
|
// 单选
|
filterItem['selectValue'] = queryParams[0]
|
filterItem['defaultValue'] = queryParams[0]
|
}
|
filterItem['defaultMapValue'] = queryMapParams
|
filterItem['mapValue'] = queryMapParams
|
} else if (filterItem.displayType === '1') {
|
// 1 时间类型
|
filterItem['selectValue'] = queryParams[0]
|
filterItem['defaultValue'] = queryParams[0]
|
} else if (filterItem.displayType === '7') {
|
// 7 时间范围类型
|
if (QDItem.timeValue && Array.isArray(QDItem.timeValue)) {
|
// 如果dimension.timeValue存在值且是数组 目前判断为是时间组件
|
filterItem['selectValue'] = QDItem.timeValue
|
filterItem['defaultValue'] = QDItem.timeValue
|
} else {
|
filterItem['selectValue'] = queryParams
|
filterItem['defaultValue'] = queryParams
|
}
|
} else if (filterItem.displayType === '8') {
|
// 8 文本搜索
|
filterItem['conditionValueF'] = queryParams[0]
|
filterItem['defaultConditionValueF'] = queryParams[0]
|
}
|
}
|
})
|
}
|
})
|
})
|
element.linkageFilters = currentFilters
|
},
|
|
clearPanelLinkageInfo() {
|
this.componentData.forEach(item => {
|
if (item.component === 'UserView') {
|
if (item.linkageFilters && item.linkageFilters.length > 0) {
|
item.linkageFilters.splice(0, item.linkageFilters.length)
|
useEmitt().emitter.emit('query-data-' + item.id)
|
}
|
} else if (item.component === 'Group') {
|
item.propValue.forEach(groupItem => {
|
if (groupItem.linkageFilters && groupItem.linkageFilters.length > 0) {
|
groupItem.linkageFilters.splice(0, groupItem.linkageFilters.length)
|
useEmitt().emitter.emit('query-data-' + groupItem.id)
|
}
|
})
|
} else if (item.component === 'DeTabs') {
|
item.propValue.forEach(tabItem => {
|
tabItem.componentData?.forEach(tabComponent => {
|
if (tabComponent.linkageFilters && tabComponent.linkageFilters.length > 0) {
|
tabComponent.linkageFilters.splice(0, tabComponent.linkageFilters.length)
|
useEmitt().emitter.emit('query-data-' + tabComponent.id)
|
}
|
})
|
})
|
}
|
})
|
},
|
setTabCollisionActiveId(tabId) {
|
this.tabCollisionActiveId = tabId
|
},
|
setTabMoveInActiveId(tabId) {
|
this.tabMoveInActiveId = tabId
|
},
|
setMousePointShadowMap(mousePoint) {
|
this.mousePointShadowMap.mouseX = mousePoint.mouseX
|
this.mousePointShadowMap.mouseY = mousePoint.mouseY
|
this.mousePointShadowMap.width = mousePoint.width
|
this.mousePointShadowMap.height = mousePoint.height
|
},
|
setTabMoveOutComponentId(componentId) {
|
this.tabMoveOutComponentId = componentId
|
},
|
resetDvInfo() {
|
this.dvInfo = {
|
dataState: null,
|
optType: null,
|
id: null,
|
name: null,
|
pid: null,
|
status: null,
|
selfWatermarkStatus: null,
|
watermarkInfo: {},
|
type: null,
|
mobileLayout: false,
|
contentId: 0
|
}
|
this.mainScrollTop = 0
|
},
|
setViewDataDetails(viewId, chartDataInfo) {
|
this.canvasViewDataInfo[viewId] = chartDataInfo.data
|
const viewInfo = this.canvasViewInfo[viewId]
|
if (viewInfo) {
|
const oldCalParams = viewInfo.calParams
|
? viewInfo.calParams.reduce((map, params) => {
|
map[params.id] = params.value
|
return map
|
}, {})
|
: {}
|
if (chartDataInfo.calParams) {
|
chartDataInfo.calParams.forEach(paramsItem => {
|
if (oldCalParams[paramsItem.id]) {
|
paramsItem.value = oldCalParams[paramsItem.id]
|
}
|
})
|
}
|
this.canvasViewInfo[viewId]['calParams'] = chartDataInfo.calParams || null
|
}
|
},
|
getViewDataDetails(viewId) {
|
return this.canvasViewDataInfo[viewId]
|
},
|
setViewOriginData(viewId, dataInfo) {
|
this.canvasViewOriginDataInfo[viewId] = dataInfo
|
},
|
getViewOriginData(viewId) {
|
return this.canvasViewOriginDataInfo[viewId]
|
},
|
setViewInstanceInfo(viewId, instance) {
|
this.canvasViewInstanceInfo[viewId] = instance
|
},
|
getViewInstanceInfo(viewId) {
|
return this.canvasViewInstanceInfo[viewId]
|
},
|
setLastViewRequestInfo(viewId, viewRequestInfo) {
|
this.lastViewRequestInfo[viewId] = viewRequestInfo
|
},
|
getLastViewRequestInfo(viewId) {
|
return this.lastViewRequestInfo[viewId]
|
},
|
getViewDetails(viewId) {
|
return this.canvasViewInfo[viewId]
|
},
|
updateDvInfoCall(status = 1, newId?, contentId?) {
|
if (this.dvInfo) {
|
this.dvInfo.dataState = 'ready'
|
this.dvInfo.optType = null
|
if (newId) {
|
this.dvInfo.id = newId
|
}
|
if (contentId) {
|
this.dvInfo.contentId = contentId
|
}
|
this.dvInfo.status = status
|
}
|
},
|
popAreaActiveSwitch() {
|
if (this.canvasState['curPointArea'] === 'base') {
|
this.canvasState['curPointArea'] = 'hidden'
|
} else {
|
this.canvasState['curPointArea'] = 'base'
|
}
|
},
|
canvasStateChange({ key, value }) {
|
if (this.canvasState[key] && value) {
|
this.canvasState[key] = value
|
}
|
},
|
createInit(dvType, resourceId?, pid?, watermarkInfo?, preName) {
|
const optName =
|
dvType === 'dashboard' ? t('visualization.new_dashboard') : t('visualization.new_screen')
|
const name = preName ? preName : optName
|
this.hiddenListStatus = false
|
this.dvInfo = {
|
dataState: 'prepare',
|
optType: null,
|
id: resourceId,
|
name: name,
|
pid: pid,
|
type: dvType,
|
status: 0,
|
selfWatermarkStatus: true,
|
watermarkInfo: watermarkInfo,
|
mobileLayout: false,
|
contentId: '0',
|
weight: 9
|
}
|
const canvasStyleDataNew =
|
dvType === 'dashboard'
|
? DEFAULT_CANVAS_STYLE_DATA_LIGHT
|
: DEFAULT_CANVAS_STYLE_DATA_SCREEN_DARK
|
|
this.canvasStyleData = deepCopy(canvasStyleDataNew)
|
this.componentData = []
|
this.canvasViewInfo = {}
|
},
|
removeLinkageInfo(targetId) {
|
if (!!targetId && !!this.nowPanelTrackInfo) {
|
Object.keys(this.nowPanelTrackInfo).forEach(trackId => {
|
const targetInfo = this.nowPanelTrackInfo[trackId]
|
for (let i = 0; i < targetInfo.length; i++) {
|
if (targetInfo[i].indexOf(targetId) > -1) {
|
targetInfo.splice(i, 1)
|
i--
|
}
|
}
|
})
|
Object.keys(this.nowPanelTrackInfo).forEach(trackId => {
|
if (trackId.indexOf(targetId) > -1 || this.nowPanelTrackInfo[trackId].length === 0) {
|
delete this.nowPanelTrackInfo[trackId]
|
}
|
})
|
}
|
},
|
canvasDataInit() {
|
this.canvasViewInfo = {}
|
this.componentData = []
|
this.dvInfo = {
|
dataState: null,
|
optType: null,
|
id: null,
|
name: null,
|
pid: null,
|
status: null,
|
selfWatermarkStatus: null,
|
watermarkInfo: {},
|
type: null,
|
mobileLayout: false,
|
contentId: '0'
|
}
|
this.canvasStyleData = { ...deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK), backgroundColor: null }
|
},
|
removeGroupArea(curComponentData = this.componentData) {
|
// 清理临时组件
|
const groupAreaHis = curComponentData?.filter(ele => ele?.component === 'GroupArea')
|
if (groupAreaHis && groupAreaHis.length > 0) {
|
groupAreaHis.forEach(ele => {
|
this.deleteComponentById(ele.id, curComponentData)
|
})
|
}
|
},
|
setViewPageInfo(viewId, pageInfo) {
|
if (this.canvasViewInfo[viewId]) {
|
this.canvasViewInfo[viewId].pageInfo = pageInfo
|
}
|
},
|
getViewPageInfo(viewId) {
|
return this.canvasViewInfo[viewId]?.pageInfo
|
}
|
}
|
})
|
|
export const dvMainStoreWithOut = () => {
|
return dvMainStore(store)
|
}
|
