Merge pull request #13579 from dataease/pr@dev-v2@refactor_jump-zh
refactor(仪表板、数据大屏): 携带过滤条件跳转优化，增加校验目标资源权限提示
This commit is contained in:
王嘉豪
GitHub
commit
2a89ca5dcc
@ -143,7 +143,7 @@
|
||||
<div class="m-row">
|
||||
<div style="flex: 1">
|
||||
<el-form-item>
|
||||
<template #label> 当前{{ resourceType }} </template>
|
||||
<template #label> {{ curSource }} </template>
|
||||
<el-select style="width: 100%" v-model="dvInfo.name" disabled>
|
||||
<el-option
|
||||
:key="dvInfo.name"
|
||||
@ -162,7 +162,7 @@
|
||||
<div style="flex: 1">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
{{ t('visualization.target') }}{{ resourceType }}
|
||||
{{ targetSource }}
|
||||
</template>
|
||||
<el-tree-select
|
||||
v-model="state.linkJumpInfo.targetDvId"
|
||||
@ -198,176 +198,26 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jump-com-list">
|
||||
<el-tabs size="small" v-model="state.activeCollapse">
|
||||
<el-tab-pane :label="t('visualization.linkage_view')" name="view">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('visualization.with_filter_params')" name="filter">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template v-if="state.activeCollapse === 'view'">
|
||||
<el-row style="margin-bottom: 8px" :gutter="8">
|
||||
<el-col :span="7"> {{ t('visualization.source_field') }} </el-col>
|
||||
<el-col :span="2"></el-col>
|
||||
<el-col :span="7" style="margin-left: -2.9%">
|
||||
{{ t('visualization.link_view_field') }}
|
||||
</el-col>
|
||||
<el-col :span="8"></el-col>
|
||||
</el-row>
|
||||
<div class="main-scrollbar-container">
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
<div
|
||||
style="display: flex; margin-bottom: 6px"
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.targetType === 'view'
|
||||
)"
|
||||
:key="index"
|
||||
<template v-if="state.linkJumpInfo.targetDvId">
|
||||
<div class="jump-com-list">
|
||||
<el-tabs size="small" v-model="state.activeCollapse">
|
||||
<el-tab-pane :label="t('visualization.linkage_view')" name="view">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="t('visualization.with_filter_params')"
|
||||
name="filter"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="t('chart.pls_select_field')"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="curViewField in state.linkJumpCurViewFieldArray"
|
||||
:key="curViewField.id"
|
||||
:label="curViewField.name"
|
||||
:value="curViewField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:class="`field-icon-${fieldType[curViewField.deType]}`"
|
||||
:is="iconFieldMap[fieldType[curViewField.deType]]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ curViewField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="icon-center">
|
||||
<Icon name="dv-link-target"
|
||||
><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
|
||||
/></Icon>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetViewId"
|
||||
:disabled="!targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="t('visualization.select_view')"
|
||||
style="width: 100%"
|
||||
@change="viewInfoOnChange(targetViewInfo)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.currentLinkPanelViewArray.filter(
|
||||
item => item.type !== 'outerParams'
|
||||
)"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon view-type-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap[item.type]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="flex: 1; margin: 0 8px">
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetFieldId"
|
||||
:placeholder="t('visualization.pls_select_field')"
|
||||
:disabled="fieldIdDisabledCheck(targetViewInfo)"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="viewField in state.viewIdFieldArrayMap[
|
||||
targetViewInfo.targetViewId
|
||||
]"
|
||||
:key="viewField.id"
|
||||
:label="viewField.name"
|
||||
:value="viewField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:class="`field-icon-${fieldType[viewField.deType]}`"
|
||||
:is="iconFieldMap[fieldType[viewField.deType]]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ viewField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
class="m-del-icon-btn"
|
||||
text
|
||||
@click="deleteLinkJumpFieldById(targetViewInfo.targetId)"
|
||||
>
|
||||
<el-icon size="20px">
|
||||
<Icon name="icon_delete-trash_outlined"
|
||||
><icon_deleteTrash_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-button
|
||||
style="margin-top: 8px"
|
||||
:disabled="!state.linkJumpInfo.targetDvId"
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField('view')"
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="state.activeCollapse === 'filter'">
|
||||
<template v-if="state.currentOutParams.length === 0">
|
||||
<span
|
||||
>{{ t('visualization.link_target_tips1')
|
||||
}}<a
|
||||
class="target_jump"
|
||||
@click="resourceEdit(state.linkJumpInfo.targetDvId)"
|
||||
>{{ t('visualization.link_target_tips2') }}</a
|
||||
></span
|
||||
>
|
||||
</template>
|
||||
<template v-if="state.currentOutParams.length > 0">
|
||||
<template v-if="state.activeCollapse === 'view'">
|
||||
<el-row style="margin-bottom: 8px" :gutter="8">
|
||||
<el-col :span="12"> {{ t('visualization.source_filter') }} </el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="10" style="margin-left: -2.9%">
|
||||
{{ t('visualization.link_outer_params') }}
|
||||
<el-col :span="7"> {{ t('visualization.source_field') }} </el-col>
|
||||
<el-col :span="2"></el-col>
|
||||
<el-col :span="7" style="margin-left: -2.9%">
|
||||
{{ t('visualization.link_view_field') }}
|
||||
</el-col>
|
||||
<el-col :span="8"></el-col>
|
||||
</el-row>
|
||||
<div class="main-scrollbar-container">
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
@ -376,7 +226,7 @@
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.targetType === 'outerParams'
|
||||
item => item.targetType === 'view'
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
@ -387,22 +237,23 @@
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="curFilterField in state.linkJumpCurFilterFieldArray"
|
||||
:key="curFilterField.id"
|
||||
:label="curFilterField.name"
|
||||
:value="curFilterField.id"
|
||||
v-for="curViewField in state.linkJumpCurViewFieldArray"
|
||||
:key="curViewField.id"
|
||||
:label="curViewField.name"
|
||||
:value="curViewField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap['filter']"
|
||||
:class="`field-icon-${fieldType[curViewField.deType]}`"
|
||||
:is="iconFieldMap[fieldType[curViewField.deType]]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ curFilterField.name }}</span
|
||||
>{{ curViewField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
@ -419,12 +270,14 @@
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetViewId"
|
||||
:disabled="!targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="t('visualization.select_param')"
|
||||
:placeholder="t('visualization.select_view')"
|
||||
style="width: 100%"
|
||||
@change="viewInfoOnChange(targetViewInfo)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.currentOutParams"
|
||||
v-for="item in state.currentLinkPanelViewArray.filter(
|
||||
item => item.type !== 'outerParams'
|
||||
)"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
@ -445,6 +298,38 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="flex: 1; margin: 0 8px">
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetFieldId"
|
||||
:placeholder="t('chart.pls_select_field')"
|
||||
:disabled="fieldIdDisabledCheck(targetViewInfo)"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="viewField in state.viewIdFieldArrayMap[
|
||||
targetViewInfo.targetViewId
|
||||
]"
|
||||
:key="viewField.id"
|
||||
:label="viewField.name"
|
||||
:value="viewField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:class="`field-icon-${fieldType[viewField.deType]}`"
|
||||
:is="iconFieldMap[fieldType[viewField.deType]]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ viewField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
class="m-del-icon-btn"
|
||||
@ -465,12 +350,144 @@
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField('outerParams')"
|
||||
@click="addLinkJumpField('view')"
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="state.activeCollapse === 'filter'">
|
||||
<template v-if="state.currentOutParams.length === 0">
|
||||
<span
|
||||
>{{ t('visualization.link_target_tips1')
|
||||
}}<a
|
||||
class="target_jump"
|
||||
@click="resourceEdit(state.linkJumpInfo.targetDvId)"
|
||||
>{{ t('visualization.link_target_tips2') }}</a
|
||||
></span
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="state.linkJumpCurFilterFieldArray.length === 0">
|
||||
<span>当前图表无绑定的查询条件</span>
|
||||
</template>
|
||||
<template v-else-if="state.currentOutParams.length > 0">
|
||||
<el-row style="margin-bottom: 8px" :gutter="8">
|
||||
<el-col :span="12"> {{ t('visualization.source_filter') }} </el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="10" style="margin-left: -2.9%">
|
||||
{{ t('visualization.link_outer_params') }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="main-scrollbar-container">
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
<div
|
||||
style="display: flex; margin-bottom: 6px"
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.targetType === 'outerParams'
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="t('chart.pls_select_field')"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="curFilterField in state.linkJumpCurFilterFieldArray"
|
||||
:key="curFilterField.id"
|
||||
:label="curFilterField.name"
|
||||
:value="curFilterField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap['filter']"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ curFilterField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="icon-center">
|
||||
<Icon name="dv-link-target"
|
||||
><dvLinkTarget
|
||||
style="width: 20px; height: 20px"
|
||||
class="svg-icon"
|
||||
/></Icon>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetViewId"
|
||||
:disabled="!targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="t('visualization.select_param')"
|
||||
style="width: 100%"
|
||||
@change="viewInfoOnChange(targetViewInfo)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.currentOutParams"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon view-type-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap[item.type]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
class="m-del-icon-btn"
|
||||
text
|
||||
@click="deleteLinkJumpFieldById(targetViewInfo.targetId)"
|
||||
>
|
||||
<el-icon size="20px">
|
||||
<Icon name="icon_delete-trash_outlined"
|
||||
><icon_deleteTrash_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-button
|
||||
style="margin-top: 8px"
|
||||
:disabled="!state.linkJumpInfo.targetDvId"
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField('outerParams')"
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<empty-background
|
||||
style="height: auto"
|
||||
:description="selectSourceTips"
|
||||
img-type="noneWhite"
|
||||
/>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -616,14 +633,29 @@ const { t } = useI18n()
|
||||
const dialogShow = ref(false)
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const appStore = useAppStoreWithOut()
|
||||
const { wsCache } = useCache()
|
||||
const embeddedStore = useEmbedded()
|
||||
|
||||
const resourceType = computed(() =>
|
||||
dvInfo.value.type === 'dashboard' ? t('work_branch.dashboard') : t('work_branch.big_data_screen')
|
||||
)
|
||||
|
||||
const selectSourceTips =
|
||||
dvInfo.type === 'dashboard'
|
||||
? t('visualization.select_target_dashboard_tips')
|
||||
: t('visualization.select_target_screen_tips')
|
||||
|
||||
const targetSource =
|
||||
dvInfo.value.type === 'dashboard'
|
||||
? t('visualization.target_dashboard')
|
||||
: t('visualization.target_screen')
|
||||
|
||||
const curSource =
|
||||
dvInfo.value.type === 'dashboard'
|
||||
? t('visualization.cur_dashboard')
|
||||
: t('visualization.cur_screen')
|
||||
|
||||
const state = reactive({
|
||||
curDataVWeight: 0,
|
||||
activeCollapse: 'view',
|
||||
loading: false,
|
||||
showSelected: false,
|
||||
@ -910,6 +942,7 @@ const getPanelViewList = dvId => {
|
||||
|
||||
const dvNodeClick = data => {
|
||||
if (data.leaf) {
|
||||
state.curDataVWeight = data.weight
|
||||
state.linkJumpInfo.targetViewInfoList = []
|
||||
addLinkJumpField()
|
||||
getPanelViewList(data.id)
|
||||
@ -982,9 +1015,13 @@ const filterNodeMethod = (value, data) => {
|
||||
}
|
||||
|
||||
const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
|
||||
const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
|
||||
const openType = '_blank'
|
||||
|
||||
const resourceEdit = resourceId => {
|
||||
if (state.curDataVWeight && state.curDataVWeight < 7) {
|
||||
ElMessage.error(t('visualization.no_edit_auth'))
|
||||
return
|
||||
}
|
||||
const baseUrl = dvInfo.value.type === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId='
|
||||
if (isEmbedded.value) {
|
||||
embeddedStore.clearState()
|
||||
|
||||
@ -1,424 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
|
||||
import joinJoin from '@/assets/svg/join-join.svg'
|
||||
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
|
||||
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ref, reactive } from 'vue'
|
||||
import type { FormInstance } from 'element-plus-secondary'
|
||||
|
||||
interface FieldsItem {
|
||||
sourceField: string
|
||||
targetField: string
|
||||
targetPanel: string
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const dialogVisible = ref(false)
|
||||
const formInline = reactive({
|
||||
user: '',
|
||||
region: '',
|
||||
date: ''
|
||||
})
|
||||
const checkAll = ref(false)
|
||||
const selectValue = ref(false)
|
||||
const jumpType = ref('1')
|
||||
const openType = ref('1')
|
||||
const isIndeterminate = ref(true)
|
||||
const checkedFields = ref(['Shanghai', 'Beijing'])
|
||||
const fields = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
|
||||
|
||||
const fieldFormRef = ref<FormInstance>()
|
||||
const formFields = reactive<{
|
||||
fields: FieldsItem[]
|
||||
}>({
|
||||
fields: [
|
||||
{
|
||||
sourceField: '1',
|
||||
targetField: '2',
|
||||
targetPanel: '3'
|
||||
},
|
||||
{
|
||||
sourceField: '5',
|
||||
targetField: '6',
|
||||
targetPanel: '7'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const removeField = (item: FieldsItem) => {
|
||||
const index = formFields.fields.indexOf(item)
|
||||
if (index !== -1) {
|
||||
formFields.fields.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const addField = () => {
|
||||
formFields.fields.push({
|
||||
sourceField: '',
|
||||
targetField: '',
|
||||
targetPanel: ''
|
||||
})
|
||||
}
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
|
||||
const handleCheckAllChange = (val: boolean) => {
|
||||
checkedFields.value = val ? fields : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedFieldsChange = (value: string[]) => {
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === fields.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < fields.length
|
||||
}
|
||||
|
||||
const dialogInit = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
dialogInit
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog class="jump-linkage" v-model="dialogVisible" width="1000px" title="跳转设置">
|
||||
<div class="chart-dataset-name">
|
||||
<div class="chart-name">
|
||||
<span class="label">已选择图表:</span>
|
||||
<span class="name">
|
||||
<el-icon class="main-color">
|
||||
<Icon name="icon_left_outlined"
|
||||
><icon_left_outlined class="svg-icon toolbar-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
折线图1
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-name dataset">
|
||||
<span class="label">所用数据集:</span>
|
||||
<span class="name">
|
||||
<el-icon class="main-color">
|
||||
<Icon name="icon_left_outlined"
|
||||
><icon_left_outlined class="svg-icon toolbar-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
佩尔数据集
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-config">
|
||||
<div class="select-field">
|
||||
<div class="title">
|
||||
选择字段
|
||||
<el-switch v-model="selectValue" inactive-text="仅看已选" />
|
||||
</div>
|
||||
<div class="select-all">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>全选</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="field-list">
|
||||
<el-checkbox-group v-model="checkedFields" @change="handleCheckedFieldsChange">
|
||||
<div
|
||||
v-for="field in fields"
|
||||
:key="field"
|
||||
class="list-item_primary"
|
||||
:class="[checkedFields.includes(field) ? 'active' : '']"
|
||||
>
|
||||
<el-checkbox :label="field">{{ field }}</el-checkbox>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-panel">
|
||||
<div class="operation-type">
|
||||
<div class="type">
|
||||
<span class="label">跳转类型</span>
|
||||
<el-radio-group v-model="jumpType">
|
||||
<el-radio label="1">外部链接</el-radio>
|
||||
<el-radio label="2">系统仪表板</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="type">
|
||||
<span class="label">打开方式</span>
|
||||
<el-radio-group v-model="openType">
|
||||
<el-radio label="1">当前页面</el-radio>
|
||||
<el-radio label="2">新开页面</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-field">
|
||||
<div class="field-scroll">
|
||||
<el-form
|
||||
label-position="top"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="panel-form-field"
|
||||
>
|
||||
<el-form-item label="当前仪表板">
|
||||
<el-select v-model="formInline.region" placeholder="Activity zone" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-icon class="join">
|
||||
<Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<el-form-item label="目标仪表板">
|
||||
<el-select v-model="formInline.region" placeholder="Activity zone" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
ref="fieldFormRef"
|
||||
hide-required-asterisk
|
||||
label-position="top"
|
||||
:inline="true"
|
||||
:model="formFields"
|
||||
class="field-form"
|
||||
:class="[formFields.fields.length > 1 ? 'show-trash' : 'only-one']"
|
||||
>
|
||||
<template v-for="(field, index) in formFields.fields" :key="field.sourceField">
|
||||
<el-form-item
|
||||
label="源字段"
|
||||
:prop="'fields.' + index + '.sourceField'"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '源字段 can not be null',
|
||||
trigger: 'change'
|
||||
}"
|
||||
>
|
||||
<el-select v-model="field.sourceField" placeholder="Activity zone" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-icon class="join">
|
||||
<Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<el-form-item
|
||||
label="目标字段"
|
||||
:prop="'fields.' + index + '.targetPanel'"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '目标字段 can not be null',
|
||||
trigger: 'change'
|
||||
}"
|
||||
>
|
||||
<el-select v-model="field.targetPanel" placeholder="Activity zone" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="' '"
|
||||
:prop="'fields.' + index + '.targetField'"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '字段 can not be null',
|
||||
trigger: 'change'
|
||||
}"
|
||||
>
|
||||
<el-select v-model="field.targetField" placeholder="Activity zone" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-button v-if="formFields.fields.length > 1" text @click="removeField(field)">
|
||||
<template #icon>
|
||||
<Icon name="icon_delete-trash_outlined"
|
||||
><icon_deleteTrash_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button class="add-field" text @click="addField">
|
||||
<template #icon>
|
||||
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
|
||||
</template>
|
||||
添加联动图表字段
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="resetForm(fieldFormRef)">{{ t('chart.cancel') }} </el-button>
|
||||
<el-button @click="submitForm(fieldFormRef)" type="primary"
|
||||
>{{ t('chart.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.jump-linkage {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 14px;
|
||||
|
||||
.chart-dataset-name {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.chart-name {
|
||||
.label {
|
||||
color: #646a73;
|
||||
}
|
||||
.name {
|
||||
color: #1f2329;
|
||||
|
||||
.main-color {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataset {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-config {
|
||||
width: 952px;
|
||||
height: 416px;
|
||||
border: 1px solid #dee0e3;
|
||||
border-radius: 4px;
|
||||
|
||||
.select-field {
|
||||
height: 100%;
|
||||
float: left;
|
||||
width: 259px;
|
||||
border-right: 1px solid #dee0e3;
|
||||
|
||||
.title {
|
||||
margin: 16px 16px 0 16px;
|
||||
color: #1f2329;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
|
||||
.ed-switch {
|
||||
margin-left: auto;
|
||||
.ed-switch__label {
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-all {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.field-list {
|
||||
.list-item_primary {
|
||||
border-radius: 0;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
height: 100%;
|
||||
margin-left: 259px;
|
||||
width: calc(100% - 259px);
|
||||
.operation-type {
|
||||
padding: 9px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 1px solid #dee0e3;
|
||||
|
||||
.type {
|
||||
margin-bottom: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
color: #646a73;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-field {
|
||||
height: 323px;
|
||||
|
||||
.field-scroll {
|
||||
width: 100%;
|
||||
padding: 16px 16px 8px 16px;
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.add-field {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.join {
|
||||
font-size: 18px;
|
||||
margin: 37px 8px 0;
|
||||
}
|
||||
|
||||
.panel-form-field {
|
||||
.ed-form-item {
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
.ed-select {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-form {
|
||||
.ed-form-item {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
&.show-trash {
|
||||
.ed-form-item {
|
||||
&:nth-child(5n - 1) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
:nth-child(5n) {
|
||||
margin: 32px 0 0 5px;
|
||||
color: #646a73;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&.only-one {
|
||||
.ed-form-item {
|
||||
&:nth-child(4n) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ed-select {
|
||||
width: 196px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2647,6 +2647,13 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
|
||||
column_name: 'Field name'
|
||||
},
|
||||
visualization: {
|
||||
no_edit_auth: 'No edit permissions for the target resource, please contact the administrator!',
|
||||
select_target_dashboard_tips: 'Please select the target dashboard',
|
||||
select_target_screen_tips: 'Please select the target data screen',
|
||||
cur_dashboard: 'Current dashboard',
|
||||
cur_screen: 'Current data screen',
|
||||
target_dashboard: 'Target dashboard',
|
||||
target_screen: 'Target data screen',
|
||||
component_id: 'Component ID',
|
||||
view_id: 'Chart ID',
|
||||
resource_create_tips: 'Select components from the top toolbar and add them here to create.',
|
||||
@ -2726,7 +2733,6 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
|
||||
hold_canvas_tips: 'Hold spacebar to drag the canvas',
|
||||
keep_subject: 'Keep Original Style',
|
||||
select_component: 'Select Component',
|
||||
show_selected_only: 'Show Selected Only',
|
||||
no_available_component: 'No available components currently',
|
||||
no_selected_component: 'Currently selected component',
|
||||
no_params_tips: 'Parameters cannot be empty',
|
||||
@ -2879,8 +2885,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
|
||||
source_filter: 'Source Filter',
|
||||
link_target_tips1:
|
||||
'The target dashboard has no external parameters, so conditional queries cannot be carried out. If needed,',
|
||||
link_target_tips2:
|
||||
'The target dashboard has no external parameters, so conditional queries cannot be carried out. If needed,',
|
||||
link_target_tips2: 'Please go to the settings for external parameters.',
|
||||
link_outer_params: 'Linked External Parameters',
|
||||
indicator_name: 'Indicator Name',
|
||||
component_size: 'Size',
|
||||
@ -3249,7 +3254,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
|
||||
choose_background_tips: "The component's own background will overwrite the current setting",
|
||||
setting_background: 'Set Background',
|
||||
setting_jump: 'Jump Setting',
|
||||
select_view: 'Please select a chart...',
|
||||
select_view: 'Please select a chart',
|
||||
visual: 'Virtualization',
|
||||
prohibit_multiple: 'Prohibit multiple fields in the same dataset',
|
||||
be_empty_dir: 'This is an empty directory!',
|
||||
|
||||
@ -2585,6 +2585,13 @@ export default {
|
||||
column_name: '欄位名稱'
|
||||
},
|
||||
visualization: {
|
||||
no_edit_auth: '目標資源沒有編輯權限，請聯繫管理員！',
|
||||
select_target_dashboard_tips: '請選擇目標儀表板',
|
||||
select_target_screen_tips: '請選擇目標數據大屏',
|
||||
cur_dashboard: '當前儀表板',
|
||||
cur_screen: '當前數據大屏',
|
||||
target_dashboard: '目標儀表板',
|
||||
target_screen: '目標數據大屏',
|
||||
component_id: '組件ID',
|
||||
view_id: '圖表ID',
|
||||
resource_create_tips: '從頂部工具欄中選擇組件，添加到這裡創建。',
|
||||
@ -2662,7 +2669,7 @@ export default {
|
||||
hold_canvas_tips: '按住空格可拖動畫布',
|
||||
keep_subject: '保持源樣式',
|
||||
select_component: '選擇組件',
|
||||
show_selected_only: '選擇組件',
|
||||
show_selected_only: '僅展示已選',
|
||||
no_available_component: '當前沒有可用的組件',
|
||||
no_selected_component: '當前選擇的組件',
|
||||
no_params_tips: '參數不能為空',
|
||||
@ -2809,7 +2816,7 @@ export default {
|
||||
source_field: '來源字段',
|
||||
source_filter: '來源條件',
|
||||
link_target_tips1: '目標儀表板無外部參數，因此無法攜帶條件查詢，如有需要，',
|
||||
link_target_tips2: '目標儀表板無外部參數，因此無法攜帶條件查詢，如有需要，',
|
||||
link_target_tips2: '請前往設定外部參數',
|
||||
link_outer_params: '聯動外部參數',
|
||||
indicator_name: '指標名稱',
|
||||
component_size: '大小',
|
||||
@ -3169,7 +3176,7 @@ export default {
|
||||
choose_background_tips: '組件自有背景會覆蓋當前設置',
|
||||
setting_background: '設置背景',
|
||||
setting_jump: '跳轉設置',
|
||||
select_view: '請選擇圖表...',
|
||||
select_view: '請選擇圖表',
|
||||
visual: '虛擬化',
|
||||
prohibit_multiple: '禁止同數據集多字段',
|
||||
be_empty_dir: '是空目錄！',
|
||||
|
||||
@ -2587,6 +2587,13 @@ export default {
|
||||
column_name: '字段名称'
|
||||
},
|
||||
visualization: {
|
||||
no_edit_auth: '目标资源没有编辑权限，请联系管理员！',
|
||||
select_target_dashboard_tips: '请选择目标仪表板',
|
||||
select_target_screen_tips: '请选择目标数据大屏',
|
||||
cur_dashboard: '当前仪表板',
|
||||
cur_screen: '当前数据大屏',
|
||||
target_dashboard: '目标仪表板',
|
||||
target_screen: '目标数据大屏',
|
||||
component_id: '组件ID',
|
||||
view_id: '图表ID',
|
||||
resource_create_tips: '从顶部工具栏中选择组件，添加到这里创建',
|
||||
@ -2664,7 +2671,7 @@ export default {
|
||||
hold_canvas_tips: '按住空格可拖动画布',
|
||||
keep_subject: '保持源样式',
|
||||
select_component: '选择组件',
|
||||
show_selected_only: '选择组件',
|
||||
show_selected_only: '仅展示已选',
|
||||
no_available_component: '当前没有可用的组件',
|
||||
no_selected_component: '当前选择的组件',
|
||||
no_params_tips: '参数不能为空',
|
||||
@ -2811,7 +2818,7 @@ export default {
|
||||
source_field: '源字段',
|
||||
source_filter: '源条件',
|
||||
link_target_tips1: '目标仪表板无外部参数，因此无法携带条件查询，如有需要，',
|
||||
link_target_tips2: '目标仪表板无外部参数，因此无法携带条件查询，如有需要，',
|
||||
link_target_tips2: '请前往设置外部参数',
|
||||
link_outer_params: '联动外部参数',
|
||||
indicator_name: '指标名称',
|
||||
component_size: '大小',
|
||||
@ -3172,7 +3179,7 @@ export default {
|
||||
choose_background_tips: '组件自有背景会覆盖当前设置',
|
||||
setting_background: '设置背景',
|
||||
setting_jump: '跳转设置',
|
||||
select_view: '请选择图表...',
|
||||
select_view: '请选择图表',
|
||||
visual: '虚拟化',
|
||||
prohibit_multiple: '禁止同数据集多字段',
|
||||
be_empty_dir: '是空目录！',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user