提交data-visualization\components\visualization文件
This commit is contained in:
parent
9982d69156
commit
540fb2e873
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="width: 100%" ref="bgForm">
|
||||
<el-form label-position="top" style="width: 100%; margin-bottom: 16px">
|
||||
<el-form size="small" label-position="top" style="width: 100%; margin-bottom: 16px">
|
||||
<el-form-item
|
||||
class="form-item no-margin-bottom"
|
||||
:class="'form-item-' + themes"
|
||||
|
||||
@ -33,12 +33,8 @@
|
||||
import warnTree from '@/assets/svg/warn-tree.svg'
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const dialogShow = ref(false)
|
||||
const { t } = useI18n()
|
||||
import { useCache } from '@/data-visualization/hooks/web/useCache'
|
||||
const { wsCache } = useCache()
|
||||
const emits = defineEmits(['doUseCache'])
|
||||
|
||||
const dialogInfo = {
|
||||
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="showButton && (!dvMainStore.mobileInPc || isMobile())"
|
||||
class="bar-main-right"
|
||||
@mousedown="handOptBarMousedown"
|
||||
>
|
||||
<el-button size="mini" type="info" @click="exitFullscreen">
|
||||
<el-icon style="margin-right: 8px">
|
||||
<Icon name="exit_fullscreen"
|
||||
><exit_fullscreen style="font-size: 16px" class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
{{ $t('visualization.ext_fullscreen') }}</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import exit_fullscreen from '@/assets/svg/exit-fullscreen.svg'
|
||||
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||
import { computed } from 'vue'
|
||||
import { isMainCanvas } from '@/data-visualization/utils/canvasUtils'
|
||||
import { isMobile } from '@/data-visualization/utils/utils'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import Icon from '../icon-custom/src/Icon.vue'
|
||||
import { ElIcon } from 'element-plus-secondary'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
|
||||
const { fullscreenFlag } = storeToRefs(dvMainStore)
|
||||
|
||||
const props = defineProps({
|
||||
canvasId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'canvas-main'
|
||||
},
|
||||
showPosition: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: 'preview'
|
||||
}
|
||||
})
|
||||
|
||||
const handOptBarMousedown = e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const showButton = computed(() => {
|
||||
if (isMainCanvas(props.canvasId)) {
|
||||
return fullscreenFlag.value && props.showPosition === 'preview'
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const exitFullscreen = () => {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bar-main-right {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bar-main-edit-right {
|
||||
top: 8px;
|
||||
right: 102px !important;
|
||||
}
|
||||
|
||||
.bar-main-left {
|
||||
left: 0px;
|
||||
opacity: 0;
|
||||
height: fit-content;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,10 +2,13 @@
|
||||
<div
|
||||
v-if="existLinkage && (!dvMainStore.mobileInPc || isMobile())"
|
||||
class="bar-main-right"
|
||||
:class="{ 'bar-main-edit-right': dvEditMode }"
|
||||
:class="{
|
||||
'bar-main-preview-fixed': dvPreviewMode,
|
||||
'bar-main-preview-fixed-fullscreen': fullscreenFlag
|
||||
}"
|
||||
@mousedown="handOptBarMousedown"
|
||||
>
|
||||
<el-button size="mini" type="warning" @click="clearAllLinkage"
|
||||
<el-button type="warning" @click="clearAllLinkage"
|
||||
><el-icon class="bar-base-icon">
|
||||
<Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon></el-icon
|
||||
>{{ $t('visualization.remove_all_linkage') }}</el-button
|
||||
@ -20,7 +23,9 @@ import { computed } from 'vue'
|
||||
import { isMainCanvas } from '@/data-visualization/utils/canvasUtils'
|
||||
import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
|
||||
import { isMobile } from '@/data-visualization/utils/utils'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { fullscreenFlag } = storeToRefs(dvMainStore)
|
||||
|
||||
const props = defineProps({
|
||||
canvasStyleData: {
|
||||
@ -35,6 +40,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'canvas-main'
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@ -48,9 +57,10 @@ const clearAllLinkage = () => {
|
||||
useEmitt().emitter.emit('clearPanelLinkage', { viewId: 'all' })
|
||||
}
|
||||
|
||||
const dvEditMode = computed(() => {
|
||||
return dvMainStore.dvInfo.type === 'dataV' && dvMainStore.editMode === 'preview' && !isMobile()
|
||||
const dvPreviewMode = computed(() => {
|
||||
return dvMainStore.dvInfo.type === 'dataV' && props.isFixed
|
||||
})
|
||||
|
||||
const existLinkage = computed(() => {
|
||||
if (isMainCanvas(props.canvasId)) {
|
||||
let linkageFiltersCount = 0
|
||||
@ -87,7 +97,7 @@ const existLinkage = computed(() => {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@ -104,4 +114,14 @@ const existLinkage = computed(() => {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-main-preview-fixed {
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.bar-main-preview-fixed-fullscreen {
|
||||
top: 5px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,8 +21,6 @@ const emits = defineEmits(['customClick'])
|
||||
<el-row class="group_icon" :title="tips" @click="emits('customClick')">
|
||||
<el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
|
||||
<Icon><component class="svg-icon toolbar-icon" :is="iconName"></component></Icon>
|
||||
|
||||
<!-- <img src="@/assets/newimg/avatar.png" alt="" srcset=""> -->
|
||||
<span>{{ title }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -171,6 +171,7 @@
|
||||
|
||||
<xpack-component
|
||||
:chart="element"
|
||||
resource-table="snapshot"
|
||||
jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
|
||||
@close-item="closeItem"
|
||||
/>
|
||||
@ -267,7 +268,8 @@ const emits = defineEmits([
|
||||
'showViewDetails',
|
||||
'amRemoveItem',
|
||||
'linkJumpSetOpen',
|
||||
'linkageSetOpen'
|
||||
'linkageSetOpen',
|
||||
'componentImageDownload'
|
||||
])
|
||||
const { t } = useI18n()
|
||||
const { emitter } = useEmitt()
|
||||
@ -479,13 +481,12 @@ const exportAsExcel = () => {
|
||||
const chartExtRequest = dvMainStore.getLastViewRequestInfo(element.value.id)
|
||||
const viewInfo = dvMainStore.getViewDetails(element.value.id)
|
||||
const chart = { ...viewInfo, chartExtRequest, data: viewDataInfo, busiFlag: dvInfo.value.type }
|
||||
exportExcelDownload(chart, () => {
|
||||
exportExcelDownload(chart, dvInfo.value.name, () => {
|
||||
openMessageLoading(callbackExport)
|
||||
})
|
||||
}
|
||||
const exportAsImage = () => {
|
||||
// do export
|
||||
useEmitt().emitter.emit('componentImageDownload-' + element.value.id)
|
||||
emits('componentImageDownload')
|
||||
}
|
||||
const deleteComponent = () => {
|
||||
eventBus.emit('removeMatrixItem-' + canvasId.value, index.value)
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { deepCopy } from '@/data-visualization/utils/utils'
|
||||
import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
|
||||
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
const loading = ref(false)
|
||||
const subject = ref()
|
||||
const subjectDialogShow = ref(false)
|
||||
@ -31,7 +33,13 @@ const optInit = item => {
|
||||
}
|
||||
|
||||
const saveSubject = () => {
|
||||
|
||||
if (disabledCheck.value) {
|
||||
ElMessage.error('请输入正确参数')
|
||||
return
|
||||
}
|
||||
canvasViewInfo.value[state.viewId]['calParams'] = curDataSetParamsInfo.value
|
||||
useEmitt().emitter.emit('calcData-' + state.viewId, canvasViewInfo.value[state.viewId])
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const disabledCheck = computed(() => {
|
||||
@ -57,8 +65,6 @@ defineExpose({
|
||||
statesCheck,
|
||||
resetForm
|
||||
})
|
||||
|
||||
const emits = defineEmits(['finish'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="previewPopDialog"
|
||||
:custom-class="'preview_pop_custom'"
|
||||
modal-class="preview_pop_custom"
|
||||
:append-to-body="true"
|
||||
:fullscreen="state.fullscreen"
|
||||
v-model="state.dialogShow"
|
||||
@ -23,8 +23,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue'
|
||||
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useEmbedded } from '@/data-visualization/store/modules/embedded'
|
||||
const state = reactive({
|
||||
dialogShow: false,
|
||||
name: '',
|
||||
@ -33,7 +33,6 @@ const state = reactive({
|
||||
width: '70vw',
|
||||
height: '70%'
|
||||
})
|
||||
|
||||
const dialogStyle = computed(() => {
|
||||
if (state.fullscreen) {
|
||||
return {}
|
||||
@ -46,7 +45,7 @@ const previewInit = params => {
|
||||
if (params.url.includes('?')) {
|
||||
state.url = `${params.url}&popWindow=true`
|
||||
} else {
|
||||
state.url = `${params.url}&popWindow=true`
|
||||
state.url = `${params.url}?popWindow=true`
|
||||
}
|
||||
if (params.size === 'large') {
|
||||
state.fullscreen = true
|
||||
|
||||
@ -5,21 +5,15 @@ import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visu
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { snapshotStoreWithOut } from '@/data-visualization//modules/data-visualization/snapshot'
|
||||
import Icon from '../icon-custom/src/Icon.vue'
|
||||
import dvInfoSvg from '@/assets/svg/dv-info.svg'
|
||||
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||
import combinationSvg from '@/assets/svg/combinationpage.svg'
|
||||
import scatterSvg from '@/assets/svg/scatterpage.svg'
|
||||
import { composeStoreWithOut } from '@/data-visualization/store/modules/data-visualization/compose'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { canvasCollapse,curComponent } = storeToRefs(dvMainStore)
|
||||
const { canvasCollapse } = storeToRefs(dvMainStore)
|
||||
let componentNameEdit = ref(false)
|
||||
let inputComponentName = ref({ id: null, name: null })
|
||||
let componentNameInputAttr = ref(null)
|
||||
import dvInfoSvg from '@/assets/svg/dv-info.svg'
|
||||
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const composeStore = composeStoreWithOut()
|
||||
const { areaData } = storeToRefs(composeStore)
|
||||
const { t } = useI18n()
|
||||
const emit = defineEmits(['close', 'rename'])
|
||||
const props = defineProps({
|
||||
element: {
|
||||
required: false,
|
||||
@ -64,13 +58,10 @@ const props = defineProps({
|
||||
type: String as PropType<EditorTheme>,
|
||||
default: 'light'
|
||||
},
|
||||
title: String,
|
||||
activePosition: {
|
||||
type: String,
|
||||
default: 'canvas'
|
||||
}
|
||||
title: String
|
||||
})
|
||||
const { width, asidePosition, sideName, themeInfo, view, themes, element,activePosition } = toRefs(props)
|
||||
|
||||
const { width, asidePosition, sideName, themeInfo, view, themes, element } = toRefs(props)
|
||||
const collapseChange = () => {
|
||||
canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
|
||||
}
|
||||
@ -131,33 +122,6 @@ const editComponentName = () => {
|
||||
const onComponentNameChange = () => {
|
||||
snapshotStore.recordSnapshotCache('onComponentNameChange')
|
||||
}
|
||||
|
||||
//组合
|
||||
const combinationclick = () => {
|
||||
if(areaData.value.components.length){
|
||||
composeStore.compose()
|
||||
snapshotStore.recordSnapshotCache('componentCompose')
|
||||
menuOpt('componentCompose')
|
||||
}else{
|
||||
ElMessage.warning('请选择多个组件进行组合！')
|
||||
return
|
||||
}
|
||||
}
|
||||
//打散
|
||||
const scatterclick= () => {
|
||||
if(curComponent.value['component'] == 'Group'){
|
||||
composeStore.decompose()
|
||||
snapshotStore.recordSnapshotCache('decompose')
|
||||
menuOpt('decompose')
|
||||
}else{
|
||||
ElMessage.warning('请选择组合！')
|
||||
return
|
||||
}
|
||||
}
|
||||
const menuOpt = optName => {
|
||||
const param = { opt: optName }
|
||||
activePosition.value === 'aside' && emit('close', param)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -173,7 +137,7 @@ const menuOpt = optName => {
|
||||
:id="'attr-slide-component-name' + slideIndex"
|
||||
v-if="!canvasCollapse[sideName]"
|
||||
class="name-area-attr"
|
||||
style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap;"
|
||||
style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
|
||||
:style="{ width: componentNameEdit ? '300px' : 'auto' }"
|
||||
:class="{ 'component-name-dark': themeInfo === 'dark' }"
|
||||
@dblclick="editComponentName"
|
||||
@ -191,7 +155,7 @@ const menuOpt = optName => {
|
||||
<span>
|
||||
<el-icon
|
||||
v-show="element && element['id']"
|
||||
style="margin: 6px 0 0 4px; cursor: pointer"
|
||||
style="margin: 2px 0 0 4px; cursor: pointer"
|
||||
><Icon><dvInfoSvg class="svg-icon" /></Icon
|
||||
></el-icon>
|
||||
</span>
|
||||
@ -204,15 +168,6 @@ const menuOpt = optName => {
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div v-if="!canvasCollapse[sideName] && asidePosition === 'left'">
|
||||
<el-icon title="组合" style="font-size: 16px;margin-right: 8px;cursor: pointer" @click="combinationclick">
|
||||
<Icon><combinationSvg class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<el-icon title="打散" style="font-size: 16px;margin-right: 5px;cursor: pointer" @click="scatterclick">
|
||||
<Icon><scatterSvg class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-icon
|
||||
:title="title"
|
||||
:class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
|
||||
@ -227,7 +182,6 @@ const menuOpt = optName => {
|
||||
/>
|
||||
<Fold v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="main-content" v-if="!canvasCollapse[sideName]">
|
||||
<el-scrollbar>
|
||||
@ -399,15 +353,16 @@ const menuOpt = optName => {
|
||||
</style>
|
||||
<style>
|
||||
.ed-popper.is-light {
|
||||
border: 1px solid #434343;
|
||||
border: 1px solid #434343 !important;
|
||||
background: rgba(41, 41, 41, 1) !important;
|
||||
color: #ffffff ;
|
||||
}
|
||||
.ed-popper[data-popper-placement^=bottom] .ed-popper__arrow::before {
|
||||
background: rgba(41, 41, 41, 1) !important;
|
||||
}
|
||||
.ed-popover.ed-popper{
|
||||
background: rgba(41, 41, 41, 1);
|
||||
border: 1px solid #434343;
|
||||
background: rgba(41, 41, 41, 1) !important;
|
||||
border: 1px solid #434343 !important;
|
||||
}
|
||||
.ed-collapse-item.ed-collapse--light .ed-collapse-item__header{
|
||||
background-color: #1a1a1a;
|
||||
@ -466,14 +421,14 @@ const menuOpt = optName => {
|
||||
color: #ebebeb !important;
|
||||
}
|
||||
.ed-collapse-item__wrap .ed-input-number__decrease, .ed-input-number__increase{
|
||||
background-color: #434343;
|
||||
color:#ffffff;
|
||||
background-color: #434343 !important;
|
||||
color:#ffffff !important;
|
||||
}
|
||||
.ed-input-number__decrease, .ed-input-number__increase{
|
||||
color:#ffffff;
|
||||
color:#ffffff !important;
|
||||
}
|
||||
.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__increase{
|
||||
border-bottom: 1px solid #5f5f5f !important;
|
||||
border-bottom: 1px solid #434343 !important;
|
||||
border-left: 1px solid #5f5f5f !important;
|
||||
}
|
||||
.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__decrease{
|
||||
@ -569,7 +524,7 @@ color: #ffffff !important;
|
||||
}
|
||||
.ed-input-number--dark:not(.is-disabled) .ed-input-number__decrease:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper, .ed-input-number--dark:not(.is-disabled) .ed-input-number__increase:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper{
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #0089ff;
|
||||
border: 1px solid #0089ff !important;
|
||||
}
|
||||
.ed-input__wrapper.is-focus {
|
||||
box-shadow: none !important;
|
||||
@ -582,15 +537,18 @@ color: #ffffff !important;
|
||||
}
|
||||
.ed-input-number--light:not(.is-disabled).is-controls-right .ed-input-number__decrease:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper, .ed-input-number--light:not(.is-disabled).is-controls-right .ed-input-number__increase:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper{
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #0089ff;
|
||||
border: 1px solid #0089ff !important;
|
||||
}
|
||||
.ed-input-number--light .ed-input-number__decrease.is-disabled .ed-icon, .ed-input-number--light .ed-input-number__increase.is-disabled .ed-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-input-number__decrease:hover, .ed-input-number__increase:hover {
|
||||
color: #0089ff;
|
||||
color: #0089ff !important;
|
||||
}
|
||||
.ed-select .ed-input.is-disabled:not(.ed-input--dark) .ed-input__wrapper:hover{
|
||||
box-shadow: none!important;;
|
||||
}
|
||||
.icon-checkbox:before{
|
||||
content:''
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,7 +40,7 @@ const setNameIdTrans = (from, to, originName, name2Auto?: string[]) => {
|
||||
pre[next[from]] = next[to]
|
||||
return pre
|
||||
}, {})
|
||||
const on = originName.match(/\[(.+?)\]/g)
|
||||
const on = originName.match(/\[(.+?)\]/g) || []
|
||||
if (on) {
|
||||
on.forEach(itm => {
|
||||
const ele = itm.slice(1, -1)
|
||||
|
||||
@ -236,7 +236,12 @@
|
||||
state.linkJumpInfo?.jumpType === 'newPop'
|
||||
}"
|
||||
>
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
<el-scrollbar
|
||||
height="fit-content"
|
||||
:max-height="
|
||||
state.linkJumpInfo?.jumpType === 'newPop' ? '138px' : '178px'
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="display: flex; margin-bottom: 6px"
|
||||
v-for="(
|
||||
@ -667,11 +672,6 @@ const selectSourceTips = t('visualization.select_target_resource')
|
||||
|
||||
const targetSource = t('visualization.target_dashboard_dataV')
|
||||
|
||||
const curSource =
|
||||
dvInfo.value.type === 'dashboard'
|
||||
? t('visualization.cur_dashboard')
|
||||
: t('visualization.cur_screen')
|
||||
|
||||
const state = reactive({
|
||||
curDataVWeight: 0,
|
||||
activeCollapse: 'view',
|
||||
@ -746,6 +746,28 @@ const dialogInit = viewItem => {
|
||||
init(viewItem)
|
||||
}
|
||||
|
||||
const initCurFilterFieldArray = componentDataCheck => {
|
||||
componentDataCheck.forEach(componentItem => {
|
||||
if (componentItem.component === 'VQuery' && componentItem.propValue instanceof Array) {
|
||||
componentItem.propValue.forEach(filterItem => {
|
||||
if (filterItem.checkedFields.includes(state.viewId)) {
|
||||
state.linkJumpCurFilterFieldArray.push({
|
||||
id: filterItem.id,
|
||||
name: filterItem.name,
|
||||
deType: 'filter'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (componentItem.component === 'Group') {
|
||||
initCurFilterFieldArray(componentItem.propValue)
|
||||
} else if (componentItem.component === 'DeTabs') {
|
||||
componentItem.propValue.forEach(tabItem => {
|
||||
initCurFilterFieldArray(tabItem.componentData)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const init = viewItem => {
|
||||
state.initState = false
|
||||
state.viewId = viewItem.id
|
||||
@ -792,19 +814,7 @@ const init = viewItem => {
|
||||
|
||||
// 获取当前过滤条件明细 过滤原则：1.在当前仪表板或者大屏 2.作用于当前图表
|
||||
state.linkJumpCurFilterFieldArray = []
|
||||
componentData.value.forEach(componentItem => {
|
||||
if (componentItem.component === 'VQuery' && componentItem.propValue instanceof Array) {
|
||||
componentItem.propValue.forEach(filterItem => {
|
||||
if (filterItem.checkedFields.includes(state.viewId)) {
|
||||
state.linkJumpCurFilterFieldArray.push({
|
||||
id: filterItem.id,
|
||||
name: filterItem.name,
|
||||
deType: 'filter'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
initCurFilterFieldArray(componentData.value)
|
||||
|
||||
if (chartDetails.tableId) {
|
||||
// 获取当前数据集信息
|
||||
|
||||
@ -158,7 +158,23 @@
|
||||
</el-col>
|
||||
<el-col :span="16" class="preview-show">
|
||||
<el-row class="content-head">{{ t('visualization.linkage_setting_tips1') }}</el-row>
|
||||
<el-row v-if="state.linkageInfo && state.linkageInfo.linkageActive">
|
||||
<el-row
|
||||
v-if="
|
||||
state.linkageInfo &&
|
||||
state.linkageInfo.linkageActive &&
|
||||
curComponent?.innerType === 'indicator'
|
||||
"
|
||||
style="height: 100%"
|
||||
class="custom-position"
|
||||
>
|
||||
<Icon name="dv-empty"
|
||||
><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
|
||||
/></Icon>
|
||||
<span style="margin-top: 8px; font-size: 14px">
|
||||
{{ t('visualization.indicator_linkage') }}</span
|
||||
>
|
||||
</el-row>
|
||||
<el-row v-else-if="state.linkageInfo && state.linkageInfo.linkageActive">
|
||||
<el-row style="margin-top: 5px">
|
||||
<div style="display: flex" class="inner-content">
|
||||
<div style="flex: 1">{{ t('visualization.current_chart_source_field') }}</div>
|
||||
@ -367,7 +383,10 @@ const sameDsShow = computed(
|
||||
)
|
||||
|
||||
const diffDsShow = computed(
|
||||
() => curLinkageTargetViewsInfoDiffDs.value && curLinkageTargetViewsInfoDiffDs.value.length > 0
|
||||
() =>
|
||||
curLinkageTargetViewsInfoDiffDs.value &&
|
||||
curLinkageTargetViewsInfoDiffDs.value.length > 0 &&
|
||||
curComponent.value.innerType !== 'indicator'
|
||||
)
|
||||
|
||||
const dialogInit = viewItem => {
|
||||
@ -387,7 +406,8 @@ const linkageSetting = curViewId => {
|
||||
dvId: dvInfo.value.id,
|
||||
sourceViewId: curViewId,
|
||||
targetViewIds: targetViewIds,
|
||||
linkageInfo: null
|
||||
linkageInfo: null,
|
||||
resourceTable: 'snapshot'
|
||||
}
|
||||
getViewLinkageGatherArray(requestInfo).then(rsp => {
|
||||
// 获取当前仪表板的图表(去掉当前图表)
|
||||
@ -556,12 +576,19 @@ const linkageFieldAdaptor = async data => {
|
||||
JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
|
||||
(state.curLinkageViewInfo.type.includes('chart-mix')
|
||||
? JSON.stringify(state.curLinkageViewInfo.extBubble)
|
||||
: '') +
|
||||
(['indicator'].includes(state.curLinkageViewInfo.type)
|
||||
? JSON.stringify(state.curLinkageViewInfo.yAxis)
|
||||
: '')
|
||||
const targetCheckAllAxisStr =
|
||||
JSON.stringify(targetChartDetails.xAxis) +
|
||||
JSON.stringify(targetChartDetails.xAxisExt) +
|
||||
JSON.stringify(state.curLinkageViewInfo.extStack) +
|
||||
(targetChartDetails.type.includes('chart-mix')
|
||||
? JSON.stringify(targetChartDetails.extBubble)
|
||||
: '') +
|
||||
(['indicator'].includes(state.curLinkageViewInfo.type)
|
||||
? JSON.stringify(state.curLinkageViewInfo.yAxis)
|
||||
: '')
|
||||
state.sourceLinkageInfo.targetViewFields.forEach(item => {
|
||||
if (
|
||||
@ -586,10 +613,11 @@ const sourceLinkageInfoFilter = computed(() => {
|
||||
JSON.stringify(state.curLinkageViewInfo.xAxis) +
|
||||
JSON.stringify(state.curLinkageViewInfo.drillFields) +
|
||||
JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
|
||||
JSON.stringify(state.curLinkageViewInfo.extStack) +
|
||||
(state.curLinkageViewInfo.type.includes('chart-mix')
|
||||
? JSON.stringify(state.curLinkageViewInfo.extBubble)
|
||||
: '') +
|
||||
(state.curLinkageViewInfo.type.includes('table-normal')
|
||||
(['table-normal', 'indicator'].includes(state.curLinkageViewInfo.type)
|
||||
? JSON.stringify(state.curLinkageViewInfo.yAxis)
|
||||
: '')
|
||||
return state.sourceLinkageInfo.targetViewFields.filter(item =>
|
||||
@ -644,7 +672,7 @@ defineExpose({
|
||||
|
||||
.preview {
|
||||
margin-top: 5px;
|
||||
border: 1px solid rgb(61,61,61);
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
height: 470px !important;
|
||||
overflow: hidden;
|
||||
@ -652,7 +680,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.preview-show {
|
||||
border-left: 1px solid #5f5f5f;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
height: 470px;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
@ -701,7 +729,7 @@ defineExpose({
|
||||
flex-direction: column;
|
||||
span {
|
||||
line-height: 22px;
|
||||
color: #909399;
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
|
||||
@ -742,7 +770,7 @@ defineExpose({
|
||||
margin-right: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #d2d2d2;
|
||||
color: #646a73;
|
||||
.ed-switch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -21,13 +21,11 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const selection = ref()
|
||||
|
||||
const selectionChange = () => {
|
||||
// do selection
|
||||
}
|
||||
|
||||
const { title, themes, actionSelection } = toRefs(props)
|
||||
const { actionSelection } = toRefs(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -44,7 +42,7 @@ const { title, themes, actionSelection } = toRefs(props)
|
||||
<el-icon style="margin: 5px 0 0 5px"><Setting /></el-icon
|
||||
></span>
|
||||
</template>
|
||||
<el-row style="color: #fff;">
|
||||
<el-row>
|
||||
{{ t('visualization.select_linkage_tips') }}
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
style="width: 100%"
|
||||
v-model="data.paramName"
|
||||
:placeholder="$t('visualization.input_param_name')"
|
||||
@blur="closeEdit"
|
||||
@blur="closeEdit(data)"
|
||||
/>
|
||||
</div>
|
||||
<span class="tree-select-field" v-else-if="data.paramName">
|
||||
@ -62,8 +62,7 @@
|
||||
</span>
|
||||
<span class="icon-more" v-if="!(curEditDataId === data.paramsInfoId)">
|
||||
<handle-more
|
||||
style="margin-right: 15px;"
|
||||
class="icon-more-box"
|
||||
style="margin-right: 15px"
|
||||
@handle-command="cmd => outerParamsOperation(cmd, node, data)"
|
||||
:menu-list="state.optMenu"
|
||||
:icon-name="icon_more_vertical_outlined"
|
||||
@ -465,11 +464,18 @@ const validateArgs = (val, id) => {
|
||||
}
|
||||
}
|
||||
|
||||
const viewSelectedField = computed(() =>
|
||||
state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
|
||||
)
|
||||
|
||||
const closeEdit = () => {
|
||||
const closeEdit = params => {
|
||||
if (!params.paramName || params.paramName.length < 2 || params.paramName.length > 25) {
|
||||
ElMessage({
|
||||
message: t('commons.params_value') + t('common.input_limit', [2, 25]),
|
||||
type: 'warning',
|
||||
showClose: true
|
||||
})
|
||||
if (params.paramName.length > 25) {
|
||||
params.paramName = params.paramName.splice(0.25)
|
||||
}
|
||||
return
|
||||
}
|
||||
curEditDataId.value = null
|
||||
}
|
||||
|
||||
@ -481,18 +487,6 @@ const outerParamsOperation = (cmd, node, data) => {
|
||||
}
|
||||
}
|
||||
|
||||
const fieldIdDisabledCheck = targetViewInfo => {
|
||||
return (
|
||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
|
||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
|
||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
|
||||
)
|
||||
}
|
||||
|
||||
const getFieldArray = id => {
|
||||
return state.viewIdFieldArrayMap[id]
|
||||
}
|
||||
|
||||
const initParams = async () => {
|
||||
state.baseFilterInfo = []
|
||||
state.baseDatasetInfo = []
|
||||
@ -720,28 +714,6 @@ const getPanelViewList = dvId => {
|
||||
})
|
||||
}
|
||||
|
||||
const addOuterParamsField = () => {
|
||||
state.outerParamsInfo.targetViewInfoList.push({
|
||||
targetViewId: '',
|
||||
targetFieldId: ''
|
||||
})
|
||||
}
|
||||
const deleteOuterParamsField = index => {
|
||||
state.outerParamsInfo.targetViewInfoList.splice(index, 1)
|
||||
}
|
||||
|
||||
const viewInfoOnChange = targetViewInfo => {
|
||||
if (
|
||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
|
||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
|
||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
|
||||
) {
|
||||
targetViewInfo.targetFieldId = 'empty'
|
||||
} else {
|
||||
targetViewInfo.targetFieldId = null
|
||||
}
|
||||
}
|
||||
|
||||
const initSelected = data => {
|
||||
nextTick(() => {
|
||||
outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
|
||||
@ -809,20 +781,11 @@ defineExpose({
|
||||
.root-class {
|
||||
margin: 15px 0px 5px;
|
||||
justify-content: right;
|
||||
.ed-button{
|
||||
color: #F2F4F5;
|
||||
background-color: #212121;
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
.ed-button--primary{
|
||||
background-color:#0089FF;
|
||||
border: 1px solid #0089FF;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #434343;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
height: 470px !important;
|
||||
overflow: hidden;
|
||||
@ -922,18 +885,13 @@ defineExpose({
|
||||
margin-left: auto;
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.icon-more {
|
||||
|
||||
&:hover .icon-more {
|
||||
margin-left: auto;
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
.icon-more-box:hover{
|
||||
border-radius: 4px;
|
||||
background: #434343;
|
||||
}
|
||||
}
|
||||
rgb(2, 1, 1)
|
||||
|
||||
.link-icon-join {
|
||||
font-size: 20px;
|
||||
margin-top: 7px;
|
||||
@ -1156,7 +1114,7 @@ rgb(2, 1, 1)
|
||||
}
|
||||
|
||||
.params-attach-setting {
|
||||
border-left: 1px solid #434343;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.params-attach-content {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
width="70vw"
|
||||
trigger="click"
|
||||
class="userViewEnlarge-class"
|
||||
@close="handleClose"
|
||||
>
|
||||
<template #header v-if="!isIframe">
|
||||
<div class="header-title">
|
||||
@ -34,12 +35,12 @@
|
||||
size="middle"
|
||||
@click="downloadViewImage"
|
||||
>
|
||||
<el-icon color="#ffffff" size="16" style="margin-right: 3px"
|
||||
<el-icon color="#1F2329" size="16" style="margin-right: 3px"
|
||||
><icon_download_outlined
|
||||
/></el-icon>
|
||||
{{ t('chart.export_img') }}
|
||||
</el-button>
|
||||
<!-- <el-button
|
||||
<el-button
|
||||
class="m-button"
|
||||
v-if="optType === 'details' && exportPermissions[1]"
|
||||
link
|
||||
@ -68,7 +69,7 @@
|
||||
state.dataFrom === 'template'
|
||||
"
|
||||
>
|
||||
<el-icon color="#ffffff" size="16" style="margin-right: 3px"
|
||||
<el-icon color="#1F2329" size="16" style="margin-right: 3px"
|
||||
><icon_download_outlined
|
||||
/></el-icon>
|
||||
{{ t('chart.export_raw_details') }}
|
||||
@ -85,7 +86,7 @@
|
||||
><icon_download_outlined
|
||||
/></el-icon>
|
||||
{{ t('chart.export_excel_formatter') }}
|
||||
</el-button> -->
|
||||
</el-button>
|
||||
<el-divider
|
||||
class="close-divider"
|
||||
direction="vertical"
|
||||
@ -107,6 +108,7 @@
|
||||
:class="{
|
||||
'enlarge-inner-with-header': optType === 'details' && sourceViewType.includes('chart-mix')
|
||||
}"
|
||||
v-loading="requestStore.loadingMap[permissionStore.currentPath]"
|
||||
ref="viewContainer"
|
||||
:style="customExport"
|
||||
>
|
||||
@ -179,19 +181,19 @@ import { activeWatermarkCheckUser } from '@/data-visualization/components/waterm
|
||||
import { getCanvasStyle } from '@/data-visualization/utils/style'
|
||||
import { exportPermission } from '@/data-visualization/utils/utils'
|
||||
import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
|
||||
// import { supportExtremumChartType } from '@/data-visualization/chart/components/js/extremumUitl'
|
||||
const downLoading = ref(false)
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const dialogShow = ref(false)
|
||||
// const requestStore = useRequestStoreWithOut()
|
||||
let viewInfo = ref<DeepPartial<ChartObj>>(null)
|
||||
const config = ref(null)
|
||||
const canvasStyleData = ref(null)
|
||||
const viewContainer = ref(null)
|
||||
const { t } = useI18n()
|
||||
const optType = ref(null)
|
||||
const chartComponentDetails = ref(null)
|
||||
const chartComponentDetails2 = ref(null)
|
||||
const { dvInfo, editMode, isIframe } = storeToRefs(dvMainStore)
|
||||
const { dvInfo, isIframe, canvasStyleData } = storeToRefs(dvMainStore)
|
||||
const exportLoading = ref(false)
|
||||
const sourceViewType = ref()
|
||||
const activeName = ref('left')
|
||||
@ -308,7 +310,6 @@ const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
|
||||
viewInfo.value = deepCopy(view) as DeepPartial<ChartObj>
|
||||
viewInfo.value.customStyle.text.show = false
|
||||
config.value = deepCopy(item)
|
||||
canvasStyleData.value = canvasStyle
|
||||
if (opt === 'details') {
|
||||
if (!viewInfo.value.type?.includes('table')) {
|
||||
assign(viewInfo.value, DETAIL_CHART_ATTR)
|
||||
@ -372,7 +373,7 @@ const downloadViewDetails = (downloadType = 'view') => {
|
||||
busiFlag: dvInfo.value.type
|
||||
}
|
||||
exportLoading.value = true
|
||||
exportExcelDownload(chart, () => {
|
||||
exportExcelDownload(chart, dvInfo.value.name, () => {
|
||||
openMessageLoading(exportData)
|
||||
})
|
||||
exportLoading.value = false
|
||||
@ -416,10 +417,19 @@ const openMessageLoading = cb => {
|
||||
customClass
|
||||
})
|
||||
}
|
||||
// 地图
|
||||
const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
|
||||
const htmlToImage = () => {
|
||||
downLoading.value = true
|
||||
debugger
|
||||
downLoading.value = mapChartTypes.includes(viewInfo.value.type) ? false : true
|
||||
useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
|
||||
const renderTime = viewInfo.value.type?.includes('table') ? 2000 : 500
|
||||
useEmitt().emitter.emit('l7-prepare-picture', viewInfo.value.id)
|
||||
// 表格和支持最值图表的渲染时间为2000毫秒，其他图表为500毫秒。
|
||||
const renderTime =
|
||||
viewInfo.value.type?.includes('table') ||
|
||||
supportExtremumChartType({ type: viewInfo.value.type })
|
||||
? 2000
|
||||
: 500
|
||||
setTimeout(() => {
|
||||
initWatermark()
|
||||
toPng(viewContainer.value)
|
||||
@ -429,12 +439,14 @@ const htmlToImage = () => {
|
||||
a.setAttribute('download', viewInfo.value.title)
|
||||
a.href = dataUrl
|
||||
a.click()
|
||||
useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
|
||||
useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
|
||||
initWatermark()
|
||||
})
|
||||
.catch(error => {
|
||||
downLoading.value = false
|
||||
initWatermark()
|
||||
useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
|
||||
useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
|
||||
console.error('oops, something went wrong!', error)
|
||||
})
|
||||
@ -582,4 +594,30 @@ defineExpose({
|
||||
.ed-select-group__wrap:not(:last-of-type)::after{
|
||||
background: #434343 !important;
|
||||
}
|
||||
.ed-select .ed-input.is-focus .ed-input__wrapper{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ed-select .ed-input__wrapper.is-focus{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ed-dropdown-menu{
|
||||
background-color: rgb(41, 41, 41);
|
||||
|
||||
}
|
||||
.ed-dropdown-menu__item{
|
||||
color: #fff;
|
||||
}
|
||||
.ed-dropdown-menu__item--divided{
|
||||
border-top: 1px solid #5f5f5f;
|
||||
}
|
||||
.ed-dropdown-menu__item:not(.is-disabled):hover{
|
||||
background-color: rgb(61, 61, 61);
|
||||
}
|
||||
.ed-dropdown__popper.ed-popper{
|
||||
border: 1px solid #5f5f5f;
|
||||
background:transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dropdown :teleported="false" trigger="click">
|
||||
<el-dropdown
|
||||
:id="'view-track-bar-' + chartId"
|
||||
:teleported="false"
|
||||
trigger="click"
|
||||
@visible-change="visibleChange"
|
||||
>
|
||||
<input id="input" ref="trackButton" type="button" hidden />
|
||||
<template #dropdown>
|
||||
<div :class="{ 'data-mobile': isDataVMobile }">
|
||||
@ -12,6 +17,7 @@
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in trackMenu"
|
||||
:key="key"
|
||||
@mousedown.stop
|
||||
@click="trackMenuClick(item)"
|
||||
><span class="menu-item">{{ state.i18n_map[item] }}</span></el-dropdown-item
|
||||
>
|
||||
@ -52,11 +58,27 @@ const state = reactive({
|
||||
linkage: t('visualization.linkage'),
|
||||
linkageAndDrill: t('visualization.linkage_and_drill'),
|
||||
jump: t('visualization.jump'),
|
||||
enlarge: t('visualization.enlarge')
|
||||
enlarge: t('visualization.enlarge'),
|
||||
event_jump: t('visualization.jump'),
|
||||
event_download: t('visualization.download'),
|
||||
event_share: t('visualization.share'),
|
||||
event_fullScreen: t('visualization.fullscreen'),
|
||||
event_showHidden: t('visualization.pop_area'),
|
||||
event_refreshDataV: t('visualization.refresh'),
|
||||
event_refreshView: t('visualization.refresh_view')
|
||||
}
|
||||
})
|
||||
|
||||
const trackButtonClick = () => {
|
||||
const visibleChange = () => {
|
||||
document.querySelectorAll('.g2-tooltip')?.forEach(tooltip => {
|
||||
if (tooltip.id?.includes(chartId.value)) {
|
||||
tooltip.classList.toggle('hidden-tooltip', true)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 添加图表标识，用于区分不同图表的 tooltip
|
||||
const chartId = ref(null)
|
||||
const trackButtonClick = (id?: string) => {
|
||||
chartId.value = id
|
||||
setTimeout(() => {
|
||||
trackButton.value.click()
|
||||
}, 50)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user