github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 19:42:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor: 国际化

Browse Source
This commit is contained in:
wangjiahao 2024-11-25 22:47:33 +08:00
parent 4673f942e7
commit 798772d5b2
61 changed files with 1265 additions and 1233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
View File

@ -25,7 +25,7 @@ public class MybatisPlusGenerator {
/**
* 这是要生成代码的表名称
*/
private static final String TABLE_NAME = "visualization_link_jump_target_view_info";
private static final String TABLE_NAME = "data_visualization_info";
/**
* 下面两个配置基本上不用动

8
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
View File

@ -27,7 +27,7 @@
v-if="dvInfo.type === 'dashboard'"
class="form-item"
:class="'form-item-' + themes"
label="仪表板字体选择"
:label="t('visualization.font_family_select')"
>
<el-select :effect="themes" v-model="canvasStyleData.fontFamily" @change="fontFamilyChange()">
<el-option
@ -203,10 +203,10 @@
@change="themeChange"
>
<span class="data-area-label">
<span style="margin-right: 4px"> 显示放大、导出等悬浮按钮 </span>
<span style="margin-right: 4px"> {{ t('visualization.button_tips') }}</span>
<el-tooltip class="item" :effect="toolTip" placement="bottom">
<template #content>
<div>预览时启用</div>
<div>{{ t('visualization.effective_during_preview') }}</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@ -221,7 +221,7 @@
size="small"
v-model="canvasStyleData.dashboard.showGrid"
@change="themeChange"
>显示辅助网格</el-checkbox
>{{ t('visualization.display_auxiliary_grid') }}</el-checkbox
>
</el-form-item>
</el-form>

36
core/core-frontend/src/components/data-visualization/CanvasAttr.vue
View File

@ -14,18 +14,19 @@ import CanvasBackground from '@/components/visualization/component-background/Ca
import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
import Icon from '../icon-custom/src/Icon.vue'
import CanvasBaseSetting from '@/components/visualization/CanvasBaseSetting.vue'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
let canvasAttrInit = false
const canvasAttrActiveNames = ref(['size', 'baseSetting', 'background', 'color'])
const { t } = useI18n()
const screenAdaptorList = [
{ label: '宽度优先', value: 'widthFirst' },
{ label: '高度优先', value: 'heightFirst' },
{ label: '铺满全屏', value: 'full' },
{ label: '不缩放', value: 'keep' }
{ label: t('visualization.screen_adaptor_width_first'), value: 'widthFirst' },
{ label: t('visualization.screen_adaptor_height_first'), value: 'heightFirst' },
{ label: t('visualization.screen_adaptor_full'), value: 'full' },
{ label: t('visualization.screen_adaptor_keep'), value: 'keep' }
]
const init = () => {
nextTick(() => {
@ -89,7 +90,7 @@ onMounted(() => {
<template>
<div class="attr-container de-collapse-style">
<el-collapse v-model="canvasAttrActiveNames">
<el-collapse-item effect="dark" title="尺寸" name="size">
<el-collapse-item effect="dark" :title="t('visualization.size')" name="size">
<el-form label-position="left" :label-width="14">
<el-row :gutter="8" class="m-size">
<el-col :span="12">
@ -121,10 +122,10 @@ onMounted(() => {
</el-row>
<el-row v-if="canvasStyleData.screenAdaptor">
<el-form-item style="margin-top: 16px">
<span class="form-item-scroll"> 缩放方式 </span>
<span class="form-item-scroll"> {{ t('visualization.screen_adaptor') }} </span>
<el-tooltip class="item" effect="dark" placement="top">
<template #content>
<div>预览时生效</div>
<div>{{ t('visualization.effective_during_preview') }}</div>
</template>
<el-icon class="hint-icon--dark">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@ -149,21 +150,30 @@ onMounted(() => {
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item effect="dark" title="基础配置" name="baseSetting">
<el-collapse-item effect="dark" :title="t('visualization.base_config')" name="baseSetting">
<canvas-base-setting themes="dark"></canvas-base-setting>
</el-collapse-item>
<el-collapse-item effect="dark" title="背景" name="background">
<el-collapse-item effect="dark" :title="t('visualization.background')" name="background">
<canvas-background themes="dark"></canvas-background>
</el-collapse-item>
<el-collapse-item effect="dark" title="配色" name="color" class="no-padding no-border-bottom">
<el-collapse-item
effect="dark"
:title="t('visualization.color_config')"
name="color"
class="no-padding no-border-bottom"
>
<component-color-selector themes="dark" @onColorChange="onColorChange" />
</el-collapse-item>
<el-collapse-item effect="dark" title="刷新配置" name="overallSetting">
<el-collapse-item
effect="dark"
:title="t('visualization.refresh_config')"
name="overallSetting"
>
<overall-setting themes="dark" />
</el-collapse-item>
<el-collapse-item
effect="dark"
title="高级样式设置"
:title="t('visualization.advanced_style_settings')"
name="seniorStyleSetting"
class="no-padding no-border-bottom"
>

5
core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
View File

@ -8,12 +8,13 @@ import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
import { useEmitt } from '@/hooks/web/useEmitt'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const { canvasStyleData, editMode } = storeToRefs(dvMainStore)
const snapshotStore = snapshotStoreWithOut()
const scale = ref(60)
const scaleChangeReady = ref(true)
const { t } = useI18n()
const handleScaleChange = () => {
if (scaleChangeReady.value) {
scaleChangeReady.value = false
@ -148,7 +149,7 @@ onUnmounted(() => {
<Icon name="dv-max"><dvMax class="svg-icon"></dvMax></Icon
></el-icon>
<el-divider direction="vertical" class="custom-divider_scale" />
<el-tooltip effect="ndark" content="定位到中心点" placement="top">
<el-tooltip effect="ndark" :content="t('visualization.locate_tips')" placement="top">
<el-icon @click="reposition" class="hover-icon-custom" style="margin-right: 12px">
<Icon name="dv-reposition"><dvReposition class="svg-icon"></dvReposition></Icon
></el-icon>

43
core/core-frontend/src/components/data-visualization/DvToolbar.vue
View File

@ -41,7 +41,7 @@ import DeAppApply from '@/views/common/DeAppApply.vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import { useUserStoreWithOut } from '@/store/modules/user'
import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
import { checkCanvasChange } from '@/api/visualization/dataVisualization'
import { useI18n } from '@/hooks/web/useI18n'
let nameEdit = ref(false)
let inputName = ref('')
let nameInput = ref(null)
@ -59,6 +59,7 @@ const dvModel = 'dataV'
const outerParamsSetRef = ref(null)
const fullScreeRef = ref(null)
const userStore = useUserStoreWithOut()
const { t } = useI18n()
const props = defineProps({
createType: {
@ -209,7 +210,7 @@ const backToMain = () => {
url = url + '?dvId=' + dvInfo.value.id
}
if (styleChangeTimes.value > 0) {
ElMessageBox.confirm('当前的更改尚未保存，确定退出吗？', {
ElMessageBox.confirm(t('visualization.change_save_tips'), {
confirmButtonType: 'primary',
type: 'warning',
autofocus: false,
@ -343,7 +344,7 @@ const fullScreenPreview = () => {
is-label
:base-width="410"
:icon-name="dvView"
title="图表"
:title="t('visualization.view')"
>
<user-view-group></user-view-group>
</component-group>
@ -352,11 +353,16 @@ const fullScreenPreview = () => {
:show-split-line="true"
is-label
:icon-name="dvFilter"
title="查询组件"
:title="t('visualization.query_component')"
>
<query-group :dv-model="dvModel"></query-group>
</component-group>
<component-group is-label :base-width="215" :icon-name="dvText" title="文本">
<component-group
is-label
:base-width="215"
:icon-name="dvText"
:title="t('visualization.text_html')"
>
<text-group></text-group>
</component-group>
<component-group
@ -364,14 +370,19 @@ const fullScreenPreview = () => {
placement="bottom"
:base-width="328"
:icon-name="dvMedia"
title="媒体"
:title="t('visualization.media')"
>
<media-group></media-group>
</component-group>
<component-group is-label :base-width="115" :icon-name="dvTab" title="Tab">
<tabs-group :dv-model="dvModel"></tabs-group>
</component-group>
<component-group is-label :base-width="215" :icon-name="dvMoreCom" title="更多">
<component-group
is-label
:base-width="215"
:icon-name="dvMoreCom"
:title="t('visualization.more')"
>
<more-com-group></more-com-group>
</component-group>
<component-group
@ -379,23 +390,27 @@ const fullScreenPreview = () => {
:base-width="410"
:icon-name="dvMaterial"
:show-split-line="true"
title="素材"
:title="t('visualization.source_material')"
>
<common-group></common-group>
</component-group>
<component-button-label
:icon-name="icon_copy_filled"
title="复用"
:title="t('visualization.multiplexing')"
is-label
@customClick="multiplexingCanvasOpen"
></component-button-label>
</div>
</template>
<div class="right-area">
<el-tooltip effect="dark" content="外部参数设置" placement="bottom">
<el-tooltip
effect="dark"
:content="t('visualization.external_parameter_settings')"
placement="bottom"
>
<component-button
v-show="editMode === 'edit'"
tips="外部参数设置"
:tips="t('visualization.external_parameter_settings')"
@custom-click="openOuterParamsSet"
:icon-name="icon_params_setting"
/>
@ -408,10 +423,10 @@ const fullScreenPreview = () => {
class="preview-button"
type="primary"
>
编辑
{{ t('visualization.edit') }}
</el-button>
<el-button v-else class="preview-button" @click="fullScreenPreview" style="float: right">
预览
{{ t('visualization.preview') }}
</el-button>
<el-button
@click="saveCanvasWithCheck()"
@ -419,7 +434,7 @@ const fullScreenPreview = () => {
style="float: right; margin-right: 12px"
type="primary"
>
保存
{{ t('visualization.save') }}
</el-button>
</div>
</div>

6
core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
View File

@ -79,6 +79,7 @@ import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
import RealTimeGroup from '@/components/data-visualization/RealTimeGroup.vue'
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
import { useI18n } from '@/hooks/web/useI18n'
const dropdownMore = ref(null)
const lockStore = lockStoreWithOut()
@ -87,6 +88,7 @@ const snapshotStore = snapshotStoreWithOut()
const layerStore = layerStoreWithOut()
const composeStore = composeStoreWithOut()
const contextmenuStore = contextmenuStoreWithOut()
const { t } = useI18n()
const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
@ -398,7 +400,7 @@ const canvasChange = () => {
<div class="real-time-component-list">
<button hidden="true" id="close-button"></button>
<div class="layer-area" @click="areaClick('hidden')" :class="{ activated: hiddenAreaActive }">
<span>弹窗区域({{ popComponentData.length }})</span>
<span>{{ t('visualization.pop_area') }}({{ popComponentData.length }})</span>
<el-switch v-model="canvasStyleData.popupAvailable" @change="canvasChange" size="small" />
</div>
<el-row class="list-wrap">
@ -475,7 +477,7 @@ const canvasChange = () => {
@click="areaClick('base')"
:class="{ activated: baseAreaActive }"
>
<span>大屏区域({{ baseComponentData.length }})</span>
<span>{{ t('visualization.screen_area') }}({{ baseComponentData.length }})</span>
</div>
<el-row class="list-wrap">
<div class="list-container" @contextmenu="handleContextMenu">

102
core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
View File

@ -12,6 +12,7 @@ import eventBus from '@/utils/eventBus'
import { componentArraySort, getCurInfo } from '@/store/modules/data-visualization/common'
import { useEmitt } from '@/hooks/web/useEmitt'
import { XpackComponent } from '@/components/plugin'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const copyStore = copyStoreWithOut()
const lockStore = lockStoreWithOut()
@ -31,7 +32,7 @@ const props = defineProps({
})
const { activePosition } = toRefs(props)
const { t } = useI18n()
const popComponentDataLength = computed(
() => componentData.value.filter(ele => ele.category === 'hidden').length
)
@ -238,7 +239,9 @@ const editQueryCriteria = () => {
<div class="context-menu-base context-menu-details" @mousedown="handleComposeMouseDown">
<ul @mouseup="handleMouseUp">
<template v-if="areaData.components.length">
<li @mousedown="handleComposeMouseDown" @click="componentCompose">组合</li>
<li @mousedown="handleComposeMouseDown" @click="componentCompose">
{{ t('visualization.view_group') }}
</li>
<el-dropdown
style="width: 100%"
trigger="hover"
@ -248,55 +251,68 @@ const editQueryCriteria = () => {
>
<li>
<div>
<span>对齐</span><el-icon><ArrowRight /></el-icon>
<span>{{ t('visualization.alignment') }}</span
><el-icon><ArrowRight /></el-icon>
</div>
</li>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item style="width: 118px" @click="alignment('left')"
>左对齐</el-dropdown-item
>
<el-dropdown-item style="width: 118px" @click="alignment('right')"
>右对齐</el-dropdown-item
>
<el-dropdown-item @click="alignment('top')">上对齐</el-dropdown-item>
<el-dropdown-item @click="alignment('bottom')">下对齐</el-dropdown-item>
<el-dropdown-item @click="alignment('transverse')">水平居中</el-dropdown-item>
<el-dropdown-item @click="alignment('direction')">垂直居中</el-dropdown-item>
<el-dropdown-item style="width: 118px" @click="alignment('left')">{{
t('visualization.left_justifying')
}}</el-dropdown-item>
<el-dropdown-item style="width: 118px" @click="alignment('right')">{{
t('visualization.right_justifying')
}}</el-dropdown-item>
<el-dropdown-item @click="alignment('top')">{{
t('visualization.top_justifying')
}}</el-dropdown-item>
<el-dropdown-item @click="alignment('bottom')">{{
t('visualization.bottom_justifying')
}}</el-dropdown-item>
<el-dropdown-item @click="alignment('transverse')">{{
t('visualization.horizontally_centered')
}}</el-dropdown-item>
<el-dropdown-item @click="alignment('direction')">{{
t('visualization.vertically_centered')
}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-divider class="custom-divider" />
<li @click="copy">复制</li>
<li @click="paste">粘贴</li>
<li @click="cut">剪切</li>
<li @click="copy">{{ t('visualization.copy') }}</li>
<li @click="paste">{{ t('visualization.paste') }}</li>
<li @click="cut">{{ t('visualization.cut') }}</li>
<el-divider class="custom-divider" />
<li @click="deleteComponent">删除</li>
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
</template>
<li
v-show="!(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')"
@click="decompose()"
>
取消组合
{{ t('visualization.cancel_group') }}
</li>
<el-divider class="custom-divider" v-show="composeDivider" />
<template v-if="curComponent">
<template v-if="!curComponent['isLock'] && curComponent.category === 'hidden'">
<li @click="categoryChange('base')">移动到大屏显示区</li>
<li @click="editQueryCriteria">编辑</li>
<li v-if="activePosition === 'aside'" @click="rename">重命名</li>
<li @click="copy">复制</li>
<li @click="paste">粘贴</li>
<li @click="categoryChange('base')">{{ t('visualization.move_to_screen_show') }}</li>
<li @click="editQueryCriteria">{{ t('visualization.edit') }}</li>
<li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
<li @click="copy">{{ t('visualization.copy') }}</li>
<li @click="paste">{{ t('visualization.paste') }}</li>
<el-divider class="custom-divider" />
<li @click="deleteComponent">删除</li>
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
</template>
<template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
<li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">编辑</li>
<li @click="upComponent">上移一层</li>
<li @click="downComponent">下移一层</li>
<li @click="topComponent">置于顶层</li>
<li @click="bottomComponent">置于底层</li>
<li @click="customSort" v-if="curComponent.component === 'DeTabs'">排序</li>
<li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">
{{ t('visualization.edit') }}
</li>
<li @click="upComponent">{{ t('visualization.up_component') }}</li>
<li @click="downComponent">{{ t('visualization.down_component') }}</li>
<li @click="topComponent">{{ t('visualization.top_component') }}</li>
<li @click="bottomComponent">{{ t('visualization.bottom_component') }}</li>
<li @click="customSort" v-if="curComponent.component === 'DeTabs'">
{{ t('visualization.sort') }}
</li>
<xpack-component
:chart="curComponent"
is-screen
@ -310,23 +326,27 @@ const editQueryCriteria = () => {
popComponentDataLength === 0
"
>
移动到大屏弹窗区
{{ t('visualization.move_to_pop_area') }}
</li>
<el-divider class="custom-divider" />
<li @click="hide" v-show="curComponent['isShow']">隐藏</li>
<li @click="show" v-show="!curComponent['isShow']">取消隐藏</li>
<li @click="lock">锁定</li>
<li @click="hide" v-show="curComponent['isShow']">{{ t('visualization.hidden') }}</li>
<li @click="show" v-show="!curComponent['isShow']">
{{ t('visualization.cancel_hidden') }}
</li>
<li @click="lock">{{ t('visualization.lock') }}</li>
<el-divider class="custom-divider" />
<li v-if="activePosition === 'aside'" @click="rename">重命名</li>
<li @click="copy">复制</li>
<li @click="paste">粘贴</li>
<li @click="cut">剪切</li>
<li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
<li @click="copy">{{ t('visualization.copy') }}</li>
<li @click="paste">{{ t('visualization.paste') }}</li>
<li @click="cut">{{ t('visualization.cut') }}</li>
<el-divider class="custom-divider" />
<li @click="deleteComponent">删除</li>
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
</template>
<li v-if="curComponent['isLock']" @click="unlock">解锁</li>
<li v-if="curComponent['isLock']" @click="unlock">{{ t('visualization.unlock') }}</li>
</template>
<li v-else-if="!curComponent && !areaData.components.length" @click="paste">粘贴</li>
<li v-else-if="!curComponent && !areaData.components.length" @click="paste">
{{ t('visualization.paste') }}
</li>
</ul>
</div>
</template>

15
core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
View File

@ -4,7 +4,7 @@
<el-form-item
class="form-item no-margin-bottom"
:class="'form-item-' + themes"
label="数据大屏字体选择"
:label="t('visualization.screen_font_family_select')"
>
<el-select
:effect="themes"
@ -28,10 +28,10 @@
@change="onThemeChange"
>
<div style="display: flex; line-height: 14px">
<span style="margin-right: 4px">显示弹窗区查询按钮</span>
<span style="margin-right: 4px">{{ t('visualization.show_pop_button') }}</span>
<el-tooltip class="item" :effect="themes" placement="bottom">
<template #content>
<div>预览时启用</div>
<div>{{ t('visualization.effective_during_preview') }}</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@ -49,10 +49,10 @@
@change="onThemeChange"
>
<div style="display: flex; line-height: 14px">
<span style="margin-right: 4px">显示放大、导出等悬浮按钮</span>
<span style="margin-right: 4px">{{ t('visualization.show_zoom_button') }}</span>
<el-tooltip class="item" :effect="themes" placement="bottom">
<template #content>
<div>预览时启用</div>
<div>{{ t('visualization.effective_during_preview') }}</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@ -68,7 +68,7 @@
size="small"
v-model="canvasStyleData.dashboard.showGrid"
@change="onThemeChange"
>显示辅助网格</el-checkbox
>{{ t('visualization.display_auxiliary_grid') }}</el-checkbox
>
</el-form-item>
</el-form>
@ -85,8 +85,9 @@ import Icon from '../icon-custom/src/Icon.vue'
import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
import { CHART_FONT_FAMILY } from '@/views/chart/components/editor/util/chart'
import { adaptTitleFontFamilyAll } from '@/utils/canvasStyle'
import { useI18n } from '@/hooks/web/useI18n'
const snapshotStore = snapshotStoreWithOut()
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const { canvasStyleData } = storeToRefs(dvMainStore)
const appearanceStore = useAppearanceStoreWithOut()

10
core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
View File

@ -21,8 +21,10 @@
</el-row>
<template #footer>
<div class="dialog-footer">
<el-button size="mini" @click="doUseCache(false)">否 </el-button>
<el-button type="primary" size="mini" @click="doUseCache(true)">是 </el-button>
<el-button size="mini" @click="doUseCache(false)">{{ t('visualization.yes') }} </el-button>
<el-button type="primary" size="mini" @click="doUseCache(true)">{{
t('visualization.no')
}}</el-button>
</div>
</template>
</el-dialog>
@ -50,8 +52,8 @@ const dialogInit = initInfo => {
const canvasTypeName =
initInfo.canvasType === 'dataV' ? t('work_branch.big_data_screen') : t('work_branch.dashboard')
dialogInfo.resourceId = initInfo.resourceId
dialogInfo.title = '存在未保存的' + canvasTypeName
dialogInfo.tips = canvasTypeName + '存在未保存的修改，立即恢复？'
dialogInfo.title = t('visualization.no_save_tips', [canvasTypeName])
dialogInfo.tips = canvasTypeName + t('visualization.no_save_tips2')
dialogShow.value = true
}

53
core/core-frontend/src/components/visualization/LinkJumpSet.vue
View File

@ -12,7 +12,7 @@
<div @keydown.stop @keyup.stop v-if="state.initState" style="height: 550px">
<el-row style="flex-direction: row">
<div class="top-area">
<span class="top-area-text">已选图表：</span>
<span class="top-area-text">{{ t('visualization.selected_view') }}：</span>
<span class="top-area-value">
<Icon class-name="view-type-icon"
><component
@ -22,7 +22,7 @@
></Icon>
{{ state.curJumpViewInfo.title }}</span
>
<span class="top-area-text margin-left">所用数据集：</span>
<span class="top-area-text margin-left">{{ t('visualization.used_dataset') }}：</span>
<span class="top-area-value">
<Icon name="dataset-outline"
><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
@ -35,9 +35,9 @@
<el-row class="preview">
<el-col :span="8" style="height: 100%; overflow-y: auto">
<el-row class="tree-head">
<span class="head-text">选择字段</span>
<span class="head-text">{{ t('visualization.to_select_view') }}</span>
<span class="head-filter">
仅看已选
{{ t('visualization.show_selected_only') }}
<el-switch size="small" v-model="state.showSelected" />
</span>
</el-row>
@ -126,12 +126,12 @@
v-if="state.linkJumpInfo?.jumpType === 'newPop'"
>
<template #label>
<span class="title">窗口大小</span>
<span class="title">{{ t('visualization.window_size') }}</span>
</template>
<el-radio-group class="larger-radio" v-model="state.linkJumpInfo.windowSize">
<el-radio label="large">大</el-radio>
<el-radio label="middle">中</el-radio>
<el-radio label="small">小</el-radio>
<el-radio label="large">{{ t('visualization.window_size_large') }}</el-radio>
<el-radio label="middle">{{ t('visualization.window_size_middle') }}</el-radio>
<el-radio label="small">{{ t('visualization.window_size_small') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-header>
@ -161,7 +161,9 @@
</div>
<div style="flex: 1">
<el-form-item>
<template #label> 目标{{ resourceType }} </template>
<template #label>
{{ t('visualization.target') }}{{ resourceType }}
</template>
<el-tree-select
v-model="state.linkJumpInfo.targetDvId"
:data="state.panelList"
@ -198,13 +200,15 @@
</div>
<div class="jump-com-list">
<el-tabs size="small" v-model="state.activeCollapse">
<el-tab-pane label="联动图表" name="view"> </el-tab-pane>
<el-tab-pane label="携带查询条件" name="filter"> </el-tab-pane>
<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"> 源字段 </el-col>
<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') }}
@ -225,7 +229,7 @@
<div style="flex: 1">
<el-select
v-model="targetViewInfo.sourceFieldActiveId"
:placeholder="'请选择字段'"
:placeholder="t('chart.pls_select_field')"
style="width: 100%"
>
<el-option
@ -260,7 +264,7 @@
<el-select
v-model="targetViewInfo.targetViewId"
:disabled="!targetViewInfo.sourceFieldActiveId"
:placeholder="'请选择图表'"
:placeholder="t('visualization.select_view')"
style="width: 100%"
@change="viewInfoOnChange(targetViewInfo)"
>
@ -291,7 +295,7 @@
<div style="flex: 1; margin: 0 8px">
<el-select
v-model="targetViewInfo.targetFieldId"
:placeholder="'请选择字段'"
:placeholder="t('visualization.pls_select_field')"
:disabled="fieldIdDisabledCheck(targetViewInfo)"
style="width: 100%"
>
@ -349,18 +353,21 @@
<template v-if="state.activeCollapse === 'filter'">
<template v-if="state.currentOutParams.length === 0">
<span
>目标仪表板无外部参数，因此无法携带条件查询，如有需要，<a
>{{ t('visualization.link_target_tips1')
}}<a
class="target_jump"
@click="resourceEdit(state.linkJumpInfo.targetDvId)"
>请前往设置外部参数</a
>{{ t('visualization.link_target_tips2') }}</a
></span
>
</template>
<template v-if="state.currentOutParams.length > 0">
<el-row style="margin-bottom: 8px" :gutter="8">
<el-col :span="12"> 源条件 </el-col>
<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%"> 联动外部参数 </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">
@ -376,7 +383,7 @@
<div style="flex: 1">
<el-select
v-model="targetViewInfo.sourceFieldActiveId"
:placeholder="'请选择字段'"
:placeholder="t('chart.pls_select_field')"
style="width: 100%"
>
<el-option
@ -412,7 +419,7 @@
<el-select
v-model="targetViewInfo.targetViewId"
:disabled="!targetViewInfo.sourceFieldActiveId"
:placeholder="'请选择参数'"
:placeholder="t('visualization.select_param')"
style="width: 100%"
@change="viewInfoOnChange(targetViewInfo)"
>
@ -931,10 +938,6 @@ const deleteLinkJumpFieldById = targetId => {
}
}
const deleteLinkJumpField = index => {
state.linkJumpInfo.targetViewInfoList.splice(index, 1)
}
const fieldIdDisabledCheck = targetViewInfo => {
return (
(state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&

42
core/core-frontend/src/components/visualization/LinkageSet.vue
View File

@ -2,7 +2,6 @@
<el-dialog
ref="enlargeDialog"
:append-to-body="true"
:title="t('visualization.linkage_setting')"
v-model="dialogShow"
width="70vw"
top="10vh"
@ -12,10 +11,18 @@
v-if="curComponent && curComponent.actionSelection"
:action-selection="customLinkageActive"
></linkage-set-option>
<div v-loading="loading" @keydown.stop @keyup.stop v-if="state.initState" style="height: 550px">
<div
v-loading="loading"
@keydown.stop
@keyup.stop
v-if="state.initState"
style="height: 550px; margin-top: 22px"
>
<el-row style="flex-direction: row">
<div class="top-area">
<span class="top-area-text" style="margin-left: 0">已选图表：</span>
<span class="top-area-text" style="margin-left: 0"
>{{ t('visualization.selected_view') }}：</span
>
<span class="top-area-value">
<Icon class-name="view-type-icon"
><component
@ -25,7 +32,7 @@
></Icon>
{{ state.curLinkageViewInfo.title }}</span
>
<span class="top-area-text">所用数据集：</span>
<span class="top-area-text">{{ t('visualization.used_dataset') }}：</span>
<span class="top-area-value">
<Icon class-name="view-type-icon" name="dataset-outline"
><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
@ -38,9 +45,10 @@
<el-row class="preview">
<el-col :span="8" style="height: 100%; overflow-y: auto">
<el-row class="tree-head">
<span class="head-text">选择图表</span>
<span class="head-text">{{ t('visualization.to_select_view') }}</span>
<span class="head-filter"
>仅看已选 <el-switch size="small" v-model="state.showSelected" />
>{{ t('visualization.show_selected_only') }}
<el-switch size="small" v-model="state.showSelected" />
</span>
</el-row>
<el-row class="tree-dataset-head" v-show="sameDsShow"
@ -48,13 +56,13 @@
><el-icon class="toggle-icon" @click="() => (toggleSameDs = !toggleSameDs)">
<CaretBottom v-show="toggleSameDs" />
<CaretRight v-show="!toggleSameDs" /> </el-icon
><span>同数据集</span></span
><span>{{ t('visualization.same_dataset') }}</span></span
>
<el-checkbox
v-model="sameDatasetComponentCheckAll"
:indeterminate="checkAllIsIndeterminate"
@change="batchSelectChange"
>全选</el-checkbox
>{{ t('visualization.select_all') }}</el-checkbox
></el-row
>
<el-tree
@ -62,7 +70,7 @@
class="custom-tree"
menu
ref="linkageInfoTree"
:empty-text="'暂无可用图表'"
:empty-text="t('visualization.no_available_view')"
:filter-node-method="filterNodeMethod"
:data="curLinkageTargetViewsInfoSameDs"
node-key="targetViewId"
@ -103,7 +111,7 @@
><el-icon class="toggle-icon" @click="() => (toggleDiffDs = !toggleDiffDs)">
<CaretBottom v-show="toggleDiffDs" />
<CaretRight v-show="!toggleDiffDs" /> </el-icon
><span>不同数据集</span></span
><span>{{ t('visualization.diff_dataset') }}</span></span
>
</el-row>
<el-tree
@ -111,7 +119,7 @@
class="custom-tree"
menu
ref="linkageInfoTreeDiffDs"
:empty-text="'暂无可用图表'"
:empty-text="t('visualization.no_available_view')"
:filter-node-method="filterNodeMethod"
:data="curLinkageTargetViewsInfoDiffDs"
node-key="targetViewId"
@ -149,11 +157,11 @@
</el-tree>
</el-col>
<el-col :span="16" class="preview-show">
<el-row class="content-head">配置图表间的字段关联关系</el-row>
<el-row class="content-head">{{ t('visualization.linkage_setting_tips1') }}</el-row>
<el-row v-if="state.linkageInfo && state.linkageInfo.linkageActive">
<el-row style="margin-top: 5px">
<div style="display: flex" class="inner-content">
<div style="flex: 1">当前图表源字段</div>
<div style="flex: 1">{{ t('visualization.current_chart_source_field') }}</div>
<div style="width: 36px"></div>
<div style="flex: 1">
{{ t('visualization.link_view_field') }}
@ -170,7 +178,7 @@
<div class="select-filed">
<el-select
v-model="itemLinkage.sourceField"
:placeholder="'请选择字段'"
:placeholder="t('chart.pls_select_field')"
style="width: 100%"
>
<el-option
@ -243,7 +251,7 @@
</div>
<el-row style="width: 100%; padding-left: 16px">
<el-button type="primary" icon="Plus" text @click="addLinkageField('', '')">
追加联动依赖字段
{{ t('visualization.add_linkage_dependency_fields') }}
</el-button>
</el-row>
</el-row>
@ -252,7 +260,9 @@
<Icon name="dv-empty"
><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
/></Icon>
<span style="margin-top: 8px; font-size: 14px">请先勾选需要联动的图表</span>
<span style="margin-top: 8px; font-size: 14px">
{{ t('visualization.select_linkage_tips') }}</span
>
</el-row>
</el-col>
</el-row>

20
core/core-frontend/src/components/visualization/LinkageSetOption.vue
View File

@ -1,6 +1,8 @@
<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
title: propTypes.string,
@ -31,20 +33,27 @@ const { title, themes, actionSelection } = toRefs(props)
<template>
<el-popover placement="right-start" :width="baseWidth" trigger="click" :show-arrow="false">
<template #reference>
<el-icon class="option-set"><Setting /></el-icon>
<span class="option-set ed-dialog__title"
>{{ t('visualization.linkage_setting') }}
<el-icon style="margin: 5px 0 0 5px"><Setting /></el-icon
></span>
</template>
<el-row>
如果联动维度已配置钻取，点击维度将
{{ t('visualization.select_linkage_tips') }}
<el-radio-group
style="margin-top: 12px"
v-model="actionSelection.linkageActive"
@change="selectionChange"
>
<el-radio label="custom"
><span style="font-weight: normal">弹出浮框，由用户选择联动或者下钻</span></el-radio
><span style="font-weight: normal">
{{ t('visualization.linkage_option1') }}
</span></el-radio
>
<el-radio label="auto"
><span style="font-weight: normal">同时触发联动和下钻</span></el-radio
><span style="font-weight: normal">{{
t('visualization.linkage_option2')
}}</span></el-radio
>
</el-radio-group>
</el-row>
@ -53,7 +62,8 @@ const { title, themes, actionSelection } = toRefs(props)
<style lang="less" scoped>
.option-set {
position: absolute;
left: 90px;
display: flex;
left: 24px;
top: 30px;
}
</style>

90
core/core-frontend/src/components/visualization/OuterParamsSet.vue
View File

@ -2,7 +2,7 @@
<el-dialog
class="params-class"
:append-to-body="true"
title="外部参数设置"
:title="t('visualization.outer_param_set')"
v-model="state.outerParamsSetVisible"
width="80vw"
top="10vh"
@ -13,7 +13,7 @@
<el-row class="preview">
<el-col :span="6" class="preview-left">
<el-row class="tree-head">
<span class="head-text">参数列表</span>
<span class="head-text">{{ t('visualization.params_list') }}</span>
<span class="head-filter">
<el-button type="primary" icon="Plus" text @click="addOuterParamsInfo"> </el-button>
</span>
@ -52,7 +52,9 @@
<span class="tree-select-field" v-else-if="data.paramName">
{{ data.paramName }}
</span>
<span class="tree-select-field" v-else> 未配置参数名 </span>
<span class="tree-select-field" v-else
>{{ t('visualization.no_setting_params_name_tip') }}
</span>
</span>
<span class="icon-more">
<handle-more
@ -70,7 +72,9 @@
</el-col>
<el-col :span="13" class="preview-show">
<el-row v-if="state.curNodeId">
<el-row class="new-params-title"> 选择参数关联组件 </el-row>
<el-row class="new-params-title">
{{ t('visualization.select_params_connect_component') }}
</el-row>
<el-row class="new-params-filter" v-if="state.outerParamsInfo?.filterInfo?.length">
<div style="display: flex" class="inner-content">
<div style="width: 16px; margin-top: 2px" class="expand-custom-outer">
@ -81,8 +85,8 @@
</el-icon>
</div>
</div>
<div style="flex: 1">查询组件</div>
<div style="flex: 1">关联条件</div>
<div style="flex: 1">{{ t('visualization.filter_component') }}</div>
<div style="flex: 1">{{ t('visualization.connection_condition') }}</div>
</div>
<div class="outer-filter-content">
<div
@ -104,7 +108,7 @@
v-model="baseFilter.filterSelected"
filterable
style="width: 100%"
placeholder="请选择查询条件"
:placeholder="t('visualization.select_query_condition')"
clearable
>
<el-option
@ -130,8 +134,8 @@
</el-icon>
</div>
</div>
<div style="flex: 1">图表</div>
<div style="flex: 1">关联字段或参数</div>
<div style="flex: 1">{{ t('visualization.view') }}</div>
<div style="flex: 1">{{ t('visualization.connection_params_fields') }}</div>
</div>
<div class="outer-dataset-content">
<div
@ -173,8 +177,14 @@
class="params-select--header"
v-model="baseDatasetInfo.activelist"
>
<el-tab-pane label="字段" name="dimensionList"></el-tab-pane>
<el-tab-pane label="参数" name="parameterList"></el-tab-pane>
<el-tab-pane
:label="t('visualization.fields')"
name="dimensionList"
></el-tab-pane>
<el-tab-pane
:label="t('visualization.params')"
name="parameterList"
></el-tab-pane>
</el-tabs>
</template>
<el-option
@ -202,7 +212,9 @@
<div class="ds-view-content" v-show="baseDatasetInfo.viewExpand">
<div style="display: flex; width: 100%; height: 22px">
<div class="ds-content-title">选择关联的图表</div>
<div class="ds-content-title">
{{ t('visualization.select_params_connect_view') }}
</div>
<div class="custom-view-diver"></div>
<div>
<el-checkbox
@ -211,7 +223,7 @@
:indeterminate="baseDatasetInfo.checkAllIsIndeterminate"
:disabled="!baseDatasetInfo.fieldIdSelected"
@change="batchSelectChange($event, baseDatasetInfo)"
>全选</el-checkbox
>{{ t('visualization.select_all') }}</el-checkbox
>
</div>
</div>
@ -246,22 +258,30 @@
</el-row>
</el-row>
<div v-else class="empty">
<empty-background description="请配置参数" img-type="noneWhite" />
<empty-background
:description="t('visualization.setting_params_tips')"
img-type="noneWhite"
/>
</div>
</el-col>
<el-col :span="5" class="params-attach-setting">
<el-row v-if="state.curNodeId">
<el-row class="new-params-title"> 参数配置 </el-row>
<el-row class="new-params-title">{{ t('visualization.setting_params') }} </el-row>
<el-row class="params-attach-content">
<el-row>
<el-checkbox v-model="state.outerParamsInfo.required">必填 </el-checkbox>
<el-checkbox v-model="state.outerParamsInfo.required"
>{{ t('visualization.required') }}
</el-checkbox>
</el-row>
<el-row>
<el-checkbox v-model="state.outerParamsInfo.enabledDefault">默认值 </el-checkbox>
<el-checkbox v-model="state.outerParamsInfo.enabledDefault"
>{{ t('visualization.default_value') }}
</el-checkbox>
<el-tooltip class="item" placement="bottom">
<template #content>
<div>
请使用JSON数组格式 示例: <br />单值 ["name1"], 多值 ["name1","name2"]
{{ t('visualization.default_value_tips1') }} <br />
{{ t('visualization.default_value_tips2') }}
</div>
</template>
<el-icon class="hint-icon">
@ -271,7 +291,7 @@
</el-row>
<el-input
:ref="el => setArgRef(el, state.outerParamsInfo.paramsInfoId)"
placeholder='请输入参数,如:["name1"]'
:placeholder="t('visualization.default_value_tips3')"
v-model="state.outerParamsInfo.defaultValue"
type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }"
@ -333,12 +353,12 @@ const state = reactive({
outerParamsSetVisible: false,
optMenu: [
{
label: '重命名',
label: t('visualization.rename'),
svgName: edit,
command: 'rename'
},
{
label: '删除',
label: t('visualization.delete'),
svgName: _delete,
command: 'delete'
}
@ -383,17 +403,17 @@ const state = reactive({
currentLinkPanelViewArray: [],
viewIdFieldArrayMap: {},
widgetSubjectsTrans: {
timeYearWidget: '年份过滤组件',
timeMonthWidget: '年月过滤组件',
timeDateWidget: '日期过滤组件',
timeDateRangeWidget: '日期范围过滤组件',
textSelectWidget: '文本下拉过滤组件',
textSelectGridWidget: '文本列表过滤组件',
textInputWidget: '文本搜索过滤组件',
textSelectTreeWidget: '下拉树过滤组件',
numberSelectWidget: '数字下拉过滤组件',
numberSelectGridWidget: '数字列表过滤组件',
numberRangeWidget: '数值区间过滤组件'
timeYearWidget: t('visualization.time_year_widget'),
timeMonthWidget: t('visualization.time_month_widget'),
timeDateWidget: t('visualization.time_date_widget'),
timeDateRangeWidget: t('visualization.time_date_range_widget'),
textSelectWidget: t('visualization.text_select_widget'),
textSelectGridWidget: t('visualization.time_year_widget'),
textInputWidget: t('visualization.text_input_widget'),
textSelectTreeWidget: t('visualization.text_select_tree_widget'),
numberSelectWidget: t('visualization.number_select_widget'),
numberSelectGridWidget: t('visualization.number_select_grid_widget'),
numberRangeWidget: t('visualization.number_range_widget')
}
})
@ -433,7 +453,7 @@ const validateArgs = (val, id) => {
if (!child) {
const errorDom = document.createElement('div')
errorDom.className = 'error-msg'
errorDom.innerText = '格式错误'
errorDom.innerText = t('visualization.format_error')
e.parentNode.appendChild(errorDom)
}
return false
@ -636,7 +656,7 @@ const save = () => {
})
if (checkErrorNum > 0) {
ElMessage({
message: `参数${checkMessage}默认值格式不正确！`,
message: t('visualization.params_setting_check_message'),
type: 'warning',
showClose: true
})
@ -644,7 +664,7 @@ const save = () => {
}
if (checkNullErrorNum > 0) {
ElMessage({
message: `存在未配置的参数名或者参数名称重复！`,
message: t('visualization.params_setting_check_message_tips'),
type: 'warning',
showClose: true
})

662
core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
View File

@ -1,662 +0,0 @@
<template>
<el-dialog
class="params-class"
:append-to-body="true"
title="外部参数设置"
v-model="state.outerParamsSetVisible"
width="70vw"
top="10vh"
trigger="click"
>
<el-row style="height: 550px">
<el-row v-loading="state.loading">
<el-row class="preview">
<el-col :span="8" style="height: 100%; overflow-y: hidden">
<el-row class="tree-head">
<span class="head-text">参数列表</span>
<span class="head-filter">
<el-button type="primary" icon="Plus" text @click="addOuterParamsInfo"> </el-button>
</span>
</el-row>
<el-row class="tree-content">
<el-tree
class="custom-tree"
menu
ref="outerParamsInfoTree"
:data="state.outerParamsInfoArray"
node-key="id"
highlight-current
:props="state.treeProp"
@node-click="nodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>
<div @click.stop>
<span class="auth-span">
<el-checkbox
v-model="data.checked"
@change="sourceFieldCheckedChange(data)"
/>
</span>
</div>
</span>
<span :id="'paramName-' + data.paramsInfoId">
<el-input
v-if="curEditDataId === data.paramsInfoId"
v-model="data.paramName"
size="small"
:placeholder="$t('visualization.input_param_name')"
@blur="closeEdit"
/>
<span class="tree-select-field" v-else-if="data.paramName">
{{ data.paramName }}
</span>
<span class="tree-select-field" v-else> 未配置参数名 </span>
</span>
<span class="icon-more">
<handle-more
style="margin-right: 10px"
@handle-command="cmd => outerParamsOperation(cmd, node, data)"
:menu-list="state.optMenu"
:icon-name="icon_more_outlined"
placement="bottom-start"
></handle-more>
</span>
</span>
</template>
</el-tree>
</el-row>
</el-col>
<el-col :span="16" class="preview-show">
<el-row v-if="state.curNodeId">
<el-row style="margin-top: 5px">
<div style="display: flex" class="inner-content">
<div style="flex: 1">联动组件</div>
<div style="width: 36px"></div>
<div style="flex: 1">联动组件字段</div>
<div style="width: 32px"></div>
</div>
<div style="width: 100%; max-height: 350px; overflow-y: auto">
<div
style="display: flex; padding: 0 16px 8px"
v-for="(targetViewInfo, index) in state.outerParamsInfo.targetViewInfoList"
:key="index"
>
<div style="flex: 1">
<div class="select-filed">
<el-select
v-model="targetViewInfo.targetViewId"
filterable
style="width: 100%"
size="small"
:placeholder="t('visualization.please_select')"
@change="viewInfoOnChange(targetViewInfo)"
>
<el-option
v-for="item in state.currentLinkPanelViewArray.filter(
curItem =>
!viewSelectedField.includes(curItem.id) ||
curItem.id === targetViewInfo.targetViewId
)"
:key="item.id"
:label="item.title"
:value="item.id"
>
<Icon class-name="view-type-icon"
><component
class="svg-icon view-type-icon"
style="margin-right: 4px"
:is="iconChartMap[item.type]"
></component
></Icon>
<span style="font-size: 12px"> {{ item.title }}</span>
</el-option>
</el-select>
</div>
</div>
<el-icon class="link-icon-join">
<Icon name="dv-link-target"
><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
/></Icon>
</el-icon>
<div style="flex: 1">
<div class="select-filed">
<el-select
v-model="targetViewInfo.targetFieldId"
filterable
:disabled="fieldIdDisabledCheck(targetViewInfo)"
style="width: 100%"
size="small"
:placeholder="t('visualization.please_select')"
>
<el-option
v-for="viewField in getFieldArray(targetViewInfo.targetViewId)"
:key="viewField.id"
:label="viewField.name"
:value="viewField.id"
>
<Icon
style="width: 14px; height: 14px"
:className="`field-icon-${fieldType[viewField.deType]}`"
><component
:is="iconFieldMap[fieldType[viewField.deType]]"
></component
></Icon>
<span style="font-size: 12px">{{ viewField.name }}</span>
</el-option>
</el-select>
</div>
</div>
<el-button class="m-del-icon-btn" text @click="deleteOuterParamsField(index)">
<el-icon size="20px">
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-button>
</div>
</div>
<el-row style="width: 100%; padding-left: 16px">
<el-button type="primary" icon="Plus" text @click="addOuterParamsField">
{{ t('visualization.add_param_link_field') }}
</el-button>
</el-row>
</el-row>
</el-row>
<div v-else class="empty">
<empty-background description="请配置参数" img-type="noneWhite" />
</div>
</el-col>
</el-row>
</el-row>
<el-row class="root-class">
<el-button size="small" @click="cancel()">{{ t('commons.cancel') }} </el-button>
<el-button type="primary" size="small" @click="save()"
>{{ t('commons.confirm') }}
</el-button>
</el-row>
</el-row>
</el-dialog>
</template>
<script setup lang="ts">
import _delete from '@/assets/svg/delete.svg'
import edit from '@/assets/svg/edit.svg'
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import { ref, reactive, computed, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import { deepCopy } from '@/utils/utils'
import generateID from '@/utils/generateID'
import { queryWithVisualizationId, updateOuterParamsSet } from '@/api/visualization/outerParams'
import { viewDetailList } from '@/api/visualization/dataVisualization'
import checkArrayRepeat from '@/utils/check'
import HandleMore from '@/components/handle-more/src/HandleMore.vue'
import { fieldType } from '@/utils/attr'
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { iconChartMap } from '../icon-group/chart-list'
import { iconFieldMap } from '../icon-group/field-list'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, componentData } = storeToRefs(dvMainStore)
const outerParamsInfoTree = ref(null)
const { t } = useI18n()
const curEditDataId = ref(null)
const snapshotStore = snapshotStoreWithOut()
const state = reactive({
loading: false,
outerParamsSetVisible: false,
optMenu: [
{
label: '重命名',
svgName: edit,
command: 'rename'
},
{
label: '删除',
svgName: _delete,
command: 'delete'
}
],
treeProp: {
id: 'paramsInfoId',
label: 'paramName',
children: 'children'
},
outerParams: {
checked: false,
outerParamsInfoArray: []
},
outerParamsInfoArray: [],
mapOuterParamsInfoArray: {},
panelList: [],
curNodeId: null,
outerParamsInfo: {
content: '',
linkType: '',
targetViewInfoList: [],
paramsInfoId: null
},
currentFiledTreeNode: null,
defaultOuterParamsInfo: {
paramName: '',
checked: true,
targetViewInfoList: []
},
defaultTargetViewInfo: {
targetViewId: null,
targetFieldId: null
},
currentLinkPanelViewArray: [],
viewIdFieldArrayMap: {},
widgetSubjectsTrans: {
timeYearWidget: '年份过滤组件',
timeMonthWidget: '年月过滤组件',
timeDateWidget: '日期过滤组件',
timeDateRangeWidget: '日期范围过滤组件',
textSelectWidget: '文本下拉过滤组件',
textSelectGridWidget: '文本列表过滤组件',
textInputWidget: '文本搜索过滤组件',
textSelectTreeWidget: '下拉树过滤组件',
numberSelectWidget: '数字下拉过滤组件',
numberSelectGridWidget: '数字列表过滤组件',
numberRangeWidget: '数值区间过滤组件'
}
})
const viewSelectedField = computed(() =>
state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
)
const closeEdit = () => {
curEditDataId.value = null
}
const outerParamsOperation = (cmd, node, data) => {
if (cmd === 'rename') {
curEditDataId.value = data.paramsInfoId
} else if (cmd === 'delete') {
removeOuterParamsInfo(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 = () => {
// 获取当前仪表板外部跳转信息
queryWithVisualizationId(dvInfo.value.id).then(rsp => {
state.outerParams = rsp.data
state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
if (state.outerParamsInfoArray.length >= 1) {
state.outerParamsInfoArray.forEach(outerParamsInfo => {
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
})
state.curNodeId = null
nextTick(() => {
// outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
// nodeClick(firstNode)
})
}
})
getPanelViewList(dvInfo.value.id)
}
const cancel = () => {
state.outerParamsSetVisible = false
}
const save = () => {
if (checkArrayRepeat(state.outerParams.outerParamsInfoArray, 'paramName')) {
ElMessage.warning({
message: t('visualization.repeat_params'),
showClose: true
})
return
}
updateOuterParamsSet(state.outerParams).then(() => {
ElMessage({
message: t('commons.save_success'),
type: 'success',
showClose: true
})
snapshotStore.recordSnapshotCache('renderChart')
cancel()
})
}
const nodeClick = data => {
state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
state.curNodeId = data.paramsInfoId
}
// 获取当前图表字段 关联仪表板的图表信息列表
const getPanelViewList = dvId => {
viewDetailList(dvId).then(rsp => {
state.viewIdFieldArrayMap = {}
state.currentLinkPanelViewArray = rsp.data
if (state.currentLinkPanelViewArray) {
state.currentLinkPanelViewArray.forEach(view => {
state.viewIdFieldArrayMap[view.id] = view.tableFields
})
}
// 增加过滤组件匹配
componentData.value.forEach(componentItem => {
if (componentItem.component === 'VQuery') {
componentItem.propValue.forEach(filterItem => {
state.currentLinkPanelViewArray.push({
id: filterItem.id,
type: 'filter',
name: filterItem.name,
title: filterItem.name
})
state.viewIdFieldArrayMap[filterItem.id] = [
{ id: 'empty', name: t('visualization.filter_no_select') }
]
})
}
})
})
}
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 sourceFieldCheckedChange = data => {
if (data.checked) {
state.outerParams.checked = true
}
nextTick(() => {
outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
nodeClick(data)
})
}
const addOuterParamsInfo = () => {
state.outerParams.checked = true
const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
outerParamsInfo['paramsInfoId'] = generateID()
state.outerParamsInfoArray.push(outerParamsInfo)
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
curEditDataId.value = outerParamsInfo['paramsInfoId']
}
const removeOuterParamsInfo = (node, data) => {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
children.splice(index, 1)
if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
delete state.mapOuterParamsInfoArray[data.paramsInfoId]
state.curNodeId = null
}
}
const optInit = () => {
state.outerParamsSetVisible = true
initParams()
}
defineExpose({
optInit
})
</script>
<style scoped lang="less">
.root-class {
margin: 15px 0px 5px;
justify-content: right;
}
.preview {
margin-top: 5px;
border: 1px solid #e6e6e6;
border-radius: 4px;
height: 470px !important;
overflow: hidden;
background-size: 100% 100% !important;
}
.tree-head {
height: 40px;
line-height: 40px;
font-size: 12px;
color: #3d4d66;
.head-text {
margin-left: 16px;
font-weight: 500;
font-size: 14px;
color: #1f2329;
}
.head-filter {
flex: 1;
text-align: right;
margin-right: 16px;
font-weight: 400;
font-size: 12px;
color: #646a73;
}
}
:deep(.ed-row) {
width: 100%;
}
.m-del-icon-btn {
color: #646a73;
margin-top: 4px;
margin-left: 4px;
&:hover {
background: rgba(31, 35, 41, 0.1) !important;
}
&:focus {
background: rgba(31, 35, 41, 0.1) !important;
}
&:active {
background: rgba(31, 35, 41, 0.2) !important;
}
}
.empty {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.preview-show {
border-left: 1px solid #e6e6e6;
background-size: 100% 100% !important;
}
.view-type-icon {
color: var(--ed-color-primary);
width: 22px;
height: 16px;
}
.custom-tree {
height: 100%;
width: 100%;
overflow-y: auto;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.icon-more {
margin-left: auto;
visibility: hidden;
}
&:hover .icon-more {
margin-left: auto;
visibility: visible;
}
}
.link-icon-join {
font-size: 20px;
margin-top: 7px;
margin-left: 8px;
margin-right: 8px;
}
.inner-content {
width: 100%;
padding: 16px 16px 8px 16px;
font-size: 14px !important;
}
.slot-class {
color: white;
}
.bottom {
margin-top: 15px;
text-align: center;
}
.ellip {
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
text-align: center;
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed {
/*width: 100%;*/
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
:deep(.ed-popover) {
height: 200px;
overflow: auto;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
:deep(.vue-treeselect__control) {
height: 28px;
}
:deep(.vue-treeselect__single-value) {
color: #606266;
line-height: 28px !important;
}
.auth-span {
float: right;
width: 40px;
margin-right: 5px;
}
.tree-content {
height: calc(100% - 70px);
overflow-y: auto;
}
.tree-bottom {
margin-top: 7px;
text-align: center;
}
:deep(.vue-treeselect__placeholder) {
line-height: 28px;
}
:deep(.ed-tree--highlight-current .ed-tree-node.is-current > .ed-tree-node__content) {
background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
}
.tree-content ::deep(.ed-input__inner) {
background: transparent;
border: 0px !important;
}
.params-class ::deep(.ed-dialog__title) {
font-size: 14px;
}
.params-class ::deep(.ed-dialog__headerbtn) {
z-index: 2;
}
.params-class ::deep(.ed-dialog__header) {
padding: 20px 20px 0;
}
.params-class ::deep(.ed-dialog__body) {
padding: 10px 20px 20px;
}
</style>

9
core/core-frontend/src/components/visualization/common/ComponentPosition.vue
View File

@ -28,7 +28,7 @@
v-model="curComponent['resizeInnerKeep']"
@change="snapshotChange"
>
调整大小保持内部组件尺寸
{{ t('visualization.keep_size') }}
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
@ -39,7 +39,7 @@
v-model="curComponent['maintainRadio']"
@change="maintainRadioChange"
>
保持宽高比
{{ t('visualization.keep_ratio') }}
</el-checkbox>
</el-form-item>
<el-row v-if="curComponent && curComponent.multiDimensional">
@ -51,7 +51,7 @@
v-model="curComponent.multiDimensional.enable"
@change="multiDimensionalChange"
>
3D旋转
{{ t('visualization.rotation_3d') }}
</el-checkbox>
</el-form-item>
<template v-if="curComponent.multiDimensional.enable">
@ -109,10 +109,11 @@ import _ from 'lodash'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
import { isGroupCanvas, isTabCanvas } from '@/utils/canvasUtils'
import { useI18n } from '@/hooks/web/useI18n'
const parentNode = ref(null)
const canvasId = ref('canvas-main')
const snapshotStore = snapshotStoreWithOut()
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const { curComponent, canvasStyleData } = storeToRefs(dvMainStore)
const positionMounted = ref({

10
core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
View File

@ -21,7 +21,7 @@
v-model="dvInfo.selfWatermarkStatus"
@change="onBackgroundChange"
>
水印
{{ t('visualization.watermark') }}}
</el-checkbox>
</el-form-item>
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
@ -31,7 +31,7 @@
v-model="canvasStyleData.backgroundColorSelect"
@change="onBackgroundChange"
>
{{ $t('chart.color') }}
{{ t('chart.color') }}
</el-checkbox>
</el-form-item>
@ -94,7 +94,7 @@
class="image-hint"
:class="`image-hint_${themes}`"
>
支持JPG、PNG、GIF、SVG
{{ t('visualization.pic_upload_tips2') }}
</span>
<el-button
size="small"
@ -104,7 +104,7 @@
@click="goFile"
:disabled="!canvasStyleData.backgroundImageEnable"
>
重新上传
{{ t('visualization.re_upload') }}
</el-button>
</el-row>
</div>
@ -168,7 +168,7 @@ const goFile = () => {
}
const sizeMessage = () => {
ElMessage.success('图片大小不符合')
ElMessage.success(t('visualization.pic_size_error'))
}
const reUpload = e => {

4
core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue
View File

@ -1,6 +1,6 @@
<!-- IconSlider.vue -->
<template>
<el-tooltip offset="22" effect="dark" placement="left" content="查询">
<el-tooltip offset="22" effect="dark" placement="left" :content="t('visualization.query')">
<div class="canvas-filter" @mousedown.stop @mousedup.stop>
<div class="icon-slider" @mouseenter="slideOut" @mouseleave="slideBack">
<div
@ -21,10 +21,12 @@ import { computed, ref } from 'vue'
import { ElTooltip } from 'element-plus-secondary'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const offset = ref(0)
const slideDistance = ref(14) // 滑动距离
const { canvasState } = storeToRefs(dvMainStore)
const { t } = useI18n()
const filterActive = computed(() => canvasState.value.curPointArea === 'hidden')
const slideOut = () => {

12
core/core-frontend/src/custom-component/common/CarouselSetting.vue
View File

@ -6,6 +6,8 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
import Icon from '../../components/icon-custom/src/Icon.vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const snapshotStore = snapshotStoreWithOut()
@ -58,7 +60,7 @@ const handleInput = value => {
v-model="carouselInfo.enable"
name="carouselInfo"
@modelChange="onSettingChange"
title="轮播"
:title="t('visualization.carousel')"
>
<el-row class="custom-row" style="margin-top: -8px">
<el-form label-position="top" @submit.prevent>
@ -67,11 +69,13 @@ const handleInput = value => {
:class="'form-item-' + themes"
style="width: 50%; margin-bottom: 0"
>
<span style="font-size: 12px">轮播时间（秒）</span>
<span style="font-size: 12px">{{ t('visualization.carousel_time') }}</span>
<el-tooltip class="item" :effect="themes" placement="top">
<template #content>
<div>轮播退出编辑模式才开生效</div>
<div v-if="element.innerType === 'picture-group'">启用条件样式后，轮播失效</div>
<div>{{ t('visualization.carousel_tips') }}</div>
<div v-if="element.innerType === 'picture-group'">
{{ t('visualization.carousel_tips2') }}
</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>

17
core/core-frontend/src/custom-component/common/CommonAttr.vue
View File

@ -111,12 +111,17 @@ onMounted(() => {
<template>
<div class="v-common-attr" ref="containerRef">
<el-collapse v-model="activeName" @change="onChange()">
<el-collapse-item :effect="themes" title="位置" name="position" v-if="positionComponentShow">
<el-collapse-item
:effect="themes"
:title="t('visualization.position')"
name="position"
v-if="positionComponentShow"
>
<component-position :themes="themes" />
</el-collapse-item>
<el-collapse-item
:effect="themes"
title="背景"
:title="t('visualization.background')"
name="background"
v-if="element && backgroundCustomShow"
>
@ -135,7 +140,7 @@ onMounted(() => {
v-model="element.style.showTabTitle"
@modelChange="val => onStyleAttrChange({ key: 'showTabTitle', value: val })"
:themes="themes"
title="Tab标签"
:title="t('visualization.tab_title')"
name="tabTitle"
class="common-style-area"
>
@ -148,7 +153,7 @@ onMounted(() => {
<el-collapse-item
v-if="styleShow"
:effect="themes"
title="样式"
:title="t('visualization.style')"
name="style"
class="common-style-area"
>
@ -161,7 +166,7 @@ onMounted(() => {
<el-collapse-item
v-if="element && element.events && eventsShow"
:effect="themes"
title="事件"
:title="t('visualization.event')"
name="events"
class="common-style-area"
>
@ -172,7 +177,7 @@ onMounted(() => {
v-model="element.style.borderActive"
@modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
:themes="themes"
title="边框"
:title="t('visualization.board')"
name="borderSetting"
class="common-style-area"
>

24
core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
View File

@ -5,10 +5,12 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { canvasStyleData, curComponent } = storeToRefs(dvMainStore)
const { t } = useI18n()
const props = withDefaults(
defineProps<{
@ -86,12 +88,12 @@ watch(
<el-row style="display: flex">
<el-form-item
style="width: 70px"
label="颜色"
:label="t('visualization.color')"
class="form-item"
:class="'form-item-' + themes"
>
<el-color-picker
title="颜色"
:title="t('visualization.color')"
v-model="styleForm.borderColor"
class="color-picker-style"
:triggerWidth="65"
@ -104,12 +106,12 @@ watch(
</el-form-item>
<el-form-item
style="width: 150px"
label="线宽"
:label="t('visualization.board_width')"
class="form-item"
:class="'form-item-' + themes"
>
<el-input-number
title="线宽"
:title="t('visualization.board_width')"
:min="0"
:max="50"
:effect="themes"
@ -126,12 +128,12 @@ watch(
<el-row style="display: flex">
<el-form-item
style="width: 70px"
label="颜色"
:label="t('visualization.color')"
class="form-item"
:class="'form-item-' + themes"
>
<el-color-picker
title="颜色"
:title="t('visualization.color')"
v-model="styleForm.borderColor"
class="color-picker-style"
:triggerWidth="65"
@ -145,12 +147,12 @@ watch(
</el-form-item>
<el-form-item
style="width: 150px"
label="圆角"
:label="t('visualization.board_radius')"
class="form-item"
:class="'form-item-' + themes"
>
<el-input-number
title="圆角"
:title="t('visualization.board_radius')"
:effect="themes"
:min="0"
:max="200"
@ -165,7 +167,7 @@ watch(
<el-row style="display: flex">
<el-form-item
style="width: 70px"
label="样式"
:label="t('visualization.style')"
class="form-item"
:class="'form-item-' + themes"
>
@ -187,12 +189,12 @@ watch(
</el-form-item>
<el-form-item
style="width: 150px"
label="线宽"
:label="t('visualization.board_width')"
class="form-item"
:class="'form-item-' + themes"
>
<el-input-number
title="线宽"
:title="t('visualization.board_width')"
:min="0"
:max="50"
:effect="themes"

14
core/core-frontend/src/custom-component/common/CommonEvent.vue
View File

@ -5,7 +5,9 @@ import { ElFormItem, ElIcon } from 'element-plus-secondary'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import Icon from '../../components/icon-custom/src/Icon.vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const { t } = useI18n()
const snapshotStore = snapshotStoreWithOut()
@ -46,11 +48,11 @@ const onJumpValueChange = () => {
size="small"
v-model="eventsInfo.checked"
@change="onEventChange"
>开启事件绑定</el-checkbox
>{{ t('visualization.enable_event_binding') }}</el-checkbox
>
<el-tooltip class="item" :effect="themes" placement="top">
<template #content>
<div>事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效</div>
<div>{{ t('visualization.event_binding_tips') }}</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@ -89,7 +91,7 @@ const onJumpValueChange = () => {
:effect="themes"
:disabled="!eventsInfo.checked"
clearable
:placeholder="'请输入跳转地址'"
:placeholder="t('visualization.input_url_tips')"
@change="onJumpValueChange"
/>
</el-form-item>
@ -106,9 +108,9 @@ const onJumpValueChange = () => {
:disabled="!eventsInfo.checked"
@change="onJumpValueChange"
>
<el-radio :effect="themes" label="_blank">新开页面</el-radio>
<el-radio :effect="themes" label="_self">当前页面</el-radio>
<el-radio :effect="themes" label="newPop">弹窗页面</el-radio>
<el-radio :effect="themes" label="_blank">{{ t('visualization.new_window') }}</el-radio>
<el-radio :effect="themes" label="_self">{{ t('visualization.now_window') }}</el-radio>
<el-radio :effect="themes" label="newPop">{{ t('visualization.pop_window') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>

27
core/core-frontend/src/custom-component/common/CommonStyleSet.vue
View File

@ -415,20 +415,25 @@ const state = reactive({
})
const styleColorKeyArray = [
{ value: 'color', label: '颜色', width: 90, icon: dvStyleColor },
{ value: 'color', label: t('visualization.color'), width: 90, icon: dvStyleColor },
{
value: 'headFontColor',
label: '头部字体颜色',
label: t('visualization.head_font_color'),
width: 90,
icon: dvStyleHeadFontColor
},
{
value: 'headFontActiveColor',
label: '激活字体颜色',
label: t('visualization.head_font_active_color'),
width: 90,
icon: dvStyleHeadFontActiveColor
},
{ value: 'backgroundColor', label: '背景色', width: 90, icon: dvStyleBackgroundColor }
{
value: 'backgroundColor',
label: t('visualization.background_color'),
width: 90,
icon: dvStyleBackgroundColor
}
]
const letterSpacingList = computed(() => {
@ -455,7 +460,7 @@ const fontSizeList = computed(() => {
const styleOptionKeyArrayPre = [
{
value: 'fontFamily',
label: '字体',
label: t('visualization.font_family'),
customOption: fontFamilyList,
width: '188px',
icon: dvStyleFontFamily
@ -466,21 +471,21 @@ const styleOptionKeyArrayPre = [
const styleOptionMountedKeyArray = [
{
value: 'letterSpacing',
label: '字间距',
label: t('visualization.letter_spacing'),
customOption: letterSpacingList.value,
width: '90px',
icon: dvStyleLetterSpacing
},
{
value: 'fontSize',
label: '字体大小',
label: t('visualization.font_size'),
customOption: fontSizeList.value,
width: '90px',
icon: dvStyleFontSize
},
{
value: 'activeFontSize',
label: '激活字体大小',
label: t('visualization.active_font_size'),
customOption: fontSizeList.value,
width: '90px',
icon: dvStyleActiveFont
@ -491,21 +496,21 @@ const styleOptionMountedKeyArray = [
const styleOptionKeyArray = [
{
value: 'scrollSpeed',
label: '滚动速度',
label: t('visualization.scroll_speed'),
customOption: scrollSpeedList,
width: '90px',
icon: dvStyleScrollSpeed
},
{
value: 'opacity',
label: '不透明度',
label: t('visualization.opacity'),
customOption: opacitySizeList,
width: '90px',
icon: dvStyleOpacity
},
{
value: 'backdropFilter',
label: '背景模糊',
label: t('visualization.background_opacity'),
customOption: backdropBlurList,
width: '90px',
icon: dvStyleBlur

92
core/core-frontend/src/custom-component/common/ComponentConfig.ts
View File

@ -10,36 +10,98 @@ import board_9 from '@/assets/svg/board_9.svg'
import graphicalCircular from '@/assets/svg/graphical-circular.svg'
import graphicalRect from '@/assets/svg/graphical-rect.svg'
import graphicalTriangle from '@/assets/svg/graphical-triangle.svg'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
export const CANVAS_MATERIAL = [
{
category: 'CanvasBoard',
title: '边框',
title: t('visualization.board'),
span: 8,
details: [
{ value: 'board_1', type: 'outer_svg', title: '边框1', icon: board_1 },
{ value: 'board_2', type: 'outer_svg', title: '边框2', icon: board_2 },
{ value: 'board_3', type: 'outer_svg', title: '边框3', icon: board_3 },
{ value: 'board_4', type: 'outer_svg', title: '边框4', icon: board_4 },
{ value: 'board_5', type: 'outer_svg', title: '边框5', icon: board_5 },
{ value: 'board_6', type: 'outer_svg', title: '边框6', icon: board_6 },
{ value: 'board_7', type: 'outer_svg', title: '边框7', icon: board_7 },
{ value: 'board_8', type: 'outer_svg', title: '边框8', icon: board_8 },
{ value: 'board_9', type: 'outer_svg', title: '边框9', icon: board_9 }
{
value: 'board_1',
type: 'outer_svg',
title: t('visualization.board_name', [1]),
icon: board_1
},
{
value: 'board_2',
type: 'outer_svg',
title: t('visualization.board_name', [2]),
icon: board_2
},
{
value: 'board_3',
type: 'outer_svg',
title: t('visualization.board_name', [3]),
icon: board_3
},
{
value: 'board_4',
type: 'outer_svg',
title: t('visualization.board_name', [4]),
icon: board_4
},
{
value: 'board_5',
type: 'outer_svg',
title: t('visualization.board_name', [5]),
icon: board_5
},
{
value: 'board_6',
type: 'outer_svg',
title: t('visualization.board_name', [6]),
icon: board_6
},
{
value: 'board_7',
type: 'outer_svg',
title: t('visualization.board_name', [7]),
icon: board_7
},
{
value: 'board_8',
type: 'outer_svg',
title: t('visualization.board_name', [8]),
icon: board_8
},
{
value: 'board_9',
type: 'outer_svg',
title: t('visualization.board_name', [9]),
icon: board_9
}
]
},
{
category: 'DeGraphical',
title: '图形',
title: t('visualization.graphic'),
span: 8,
details: [
{ value: 'RectShape', type: 'graphical', title: '矩形', icon: graphicalRect },
{ value: 'SvgTriangle', type: 'graphical', title: '三角形', icon: graphicalTriangle },
{ value: 'CircleShape', type: 'graphical', title: '圆形', icon: graphicalCircular }
{
value: 'RectShape',
type: 'graphical',
title: t('visualization.rect_shape'),
icon: graphicalRect
},
{
value: 'SvgTriangle',
type: 'graphical',
title: t('visualization.triangle'),
icon: graphicalTriangle
},
{
value: 'CircleShape',
type: 'graphical',
title: t('visualization.circle_shape'),
icon: graphicalCircular
}
]
},
{
category: 'CanvasIcon',
title: '图标',
title: t('visualization.icon'),
span: 4,
details: [
{ value: 'Plus', type: 'inner_svg', icon: 'Plus' },

11
core/core-frontend/src/custom-component/component-group/MediaGroup.vue
View File

@ -7,7 +7,8 @@ import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
propValue: {
type: Array,
@ -51,7 +52,7 @@ const handleDragEnd = e => {
class="media-component"
:themes="themes"
:icon="dvPictureShow"
label="图片"
:label="t('visualization.picture')"
drag-info="Picture&Picture"
v-on:click="newComponent('Picture', 'Picture')"
></drag-component>
@ -59,7 +60,7 @@ const handleDragEnd = e => {
class="media-component"
:themes="themes"
:icon="iconVideo"
label="视频"
:label="t('visualization.video')"
drag-info="DeVideo&DeVideo"
v-on:click="newComponent('DeVideo', 'DeVideo')"
></drag-component>
@ -67,7 +68,7 @@ const handleDragEnd = e => {
class="media-component"
:themes="themes"
:icon="iconStream"
label="流媒体"
:label="t('visualization.stream_media')"
drag-info="DeStreamMedia&DeStreamMedia"
v-on:click="newComponent('DeStreamMedia', 'DeStreamMedia')"
></drag-component>
@ -75,7 +76,7 @@ const handleDragEnd = e => {
class="media-component"
:themes="themes"
:icon="pictureGroupOrigin"
label="图片组"
:label="t('visualization.pic_group')"
drag-info="UserView&picture-group"
v-on:click="newComponent('UserView', 'picture-group')"
></drag-component>

7
core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
View File

@ -4,7 +4,8 @@ import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
propValue: {
type: Array,
@ -47,14 +48,14 @@ const handleDragEnd = e => {
<drag-component
:themes="themes"
name="YYYY-MM-DD 08:00:00"
label="日期时间"
:label="t('visualization.date_time')"
drag-info="DeTimeClock&DeTimeClock"
v-on:click="newComponent('DeTimeClock')"
></drag-component>
<drag-component
:themes="themes"
:icon="dbMoreWeb"
label="网页"
:label="t('visualization.web')"
drag-info="DeFrame&DeFrame"
v-on:click="newComponent('DeFrame')"
></drag-component>

5
core/core-frontend/src/custom-component/component-group/QueryGroup.vue
View File

@ -4,7 +4,8 @@ import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
propValue: {
type: Array,
@ -53,7 +54,7 @@ const newComponent = componentName => {
<drag-component
:themes="themes"
:icon="dvFilterShow"
label="查询组件"
:label="t('visualization.query_component')"
drag-info="VQuery&VQuery"
></drag-component>
</div>

7
core/core-frontend/src/custom-component/component-group/TextGroup.vue
View File

@ -5,7 +5,8 @@ import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
propValue: {
type: Array,
@ -49,7 +50,7 @@ const newComponent = (componentName, innerType) => {
<drag-component
:themes="themes"
:icon="dvRichText"
label="富文本"
:label="t('visualization.rich_text')"
drag-info="UserView&rich-text"
v-on:click="newComponent('UserView', 'rich-text')"
></drag-component>
@ -57,7 +58,7 @@ const newComponent = (componentName, innerType) => {
v-if="dvModel === 'dataV'"
:themes="themes"
:icon="dvScrollText"
label="跑马灯"
:label="t('visualization.scroll_text')"
drag-info="ScrollText&ScrollText"
v-on:click="newComponent('ScrollText', 'ScrollText')"
></drag-component>

84
core/core-frontend/src/custom-component/component-list.ts
View File

@ -2,6 +2,8 @@
import { deepCopy } from '@/utils/utils'
import { guid } from '@/views/visualized/data/dataset/form/util'
import { getViewConfig } from '@/views/chart/components/editor/util/chart'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
export const commonStyle = {
rotate: 0,
@ -24,13 +26,13 @@ export const BASE_EVENTS = {
showTips: false,
type: 'jump', // openHidden jump
typeList: [
{ key: 'jump', label: '跳转' },
{ key: 'download', label: '下载' },
{ key: 'share', label: '分享' },
{ key: 'fullScreen', label: '全屏' },
{ key: 'showHidden', label: '弹窗区域' },
{ key: 'refreshDataV', label: '刷新' },
{ key: 'refreshView', label: '刷新图表' }
{ key: 'jump', label: t('visualization.jump') },
{ key: 'download', label: t('visualization.download') },
{ key: 'share', label: t('visualization.share') },
{ key: 'fullScreen', label: t('visualization.fullscreen') },
{ key: 'showHidden', label: t('visualization.pop_area') },
{ key: 'refreshDataV', label: t('visualization.refresh') },
{ key: 'refreshView', label: t('visualization.refresh_view') }
],
jump: {
value: 'https://',
@ -255,8 +257,8 @@ export const commonAttr = {
const list = [
{
component: 'Group',
name: '组合',
label: '组合',
name: t('visualization.view_group'),
label: t('visualization.view_group'),
propValue: '&nbsp;',
icon: 'icon_graphical',
innerType: 'Group',
@ -268,8 +270,8 @@ const list = [
{
id: 100000001,
component: 'GroupArea',
name: '组合区域',
label: '组合区域',
name: 'group_area',
label: 'group_area',
propValue: '&nbsp;',
icon: 'icon_graphical',
innerType: 'GroupArea',
@ -280,8 +282,8 @@ const list = [
},
{
component: 'VQuery',
name: '查询',
label: '查询',
name: t('visualization.query'),
label: t('visualization.query'),
propValue: '',
icon: 'icon_search',
innerType: 'VQuery',
@ -307,8 +309,8 @@ const list = [
},
{
component: 'UserView',
name: '图表',
label: '图表',
name: t('visualization.view'),
label: t('visualization.view'),
propValue: { textValue: '', urlList: [] },
icon: 'bar',
innerType: 'bar',
@ -328,8 +330,8 @@ const list = [
},
{
component: 'DeVideo',
name: '视频',
label: '视频',
name: t('visualization.video'),
label: t('visualization.video'),
innerType: 'DeVideo',
editing: false,
canvasActive: false,
@ -347,8 +349,8 @@ const list = [
},
{
component: 'DeStreamMedia',
name: '流媒体',
label: '流媒体',
name: t('visualization.stream_media'),
label: t('visualization.stream_media'),
innerType: 'DeStreamMedia',
editing: false,
canvasActive: false,
@ -366,8 +368,8 @@ const list = [
},
{
component: 'DeFrame',
name: '网页',
label: '网页',
name: t('visualization.web'),
label: t('visualization.web'),
innerType: 'DeFrame',
editing: false,
canvasActive: false,
@ -386,8 +388,8 @@ const list = [
},
{
component: 'DeTimeClock',
name: '时间组件',
label: '时间组件',
name: t('visualization.time_component'),
label: t('visualization.time_component'),
icon: 'dv-more-time-clock',
innerType: 'DeTimeClock',
editing: false,
@ -417,8 +419,8 @@ const list = [
},
{
component: 'Picture',
name: '图片',
label: '图片',
name: t('visualization.picture'),
label: t('visualization.picture'),
icon: 'dv-picture-real',
innerType: 'Picture',
editing: false,
@ -443,8 +445,8 @@ const list = [
},
{
component: 'CanvasIcon',
name: '图标',
label: '图标',
name: t('visualization.icon'),
label: t('visualization.icon'),
propValue: '',
icon: 'other_material_icon',
innerType: '',
@ -463,8 +465,8 @@ const list = [
},
{
component: 'CanvasBoard',
name: '边框',
label: '边框',
name: t('visualization.border'),
label: t('visualization.border'),
propValue: '',
icon: 'other_material_board',
innerType: '',
@ -483,8 +485,8 @@ const list = [
},
{
component: 'RectShape',
name: '矩形',
label: '矩形',
name: t('visualization.rect_shape'),
label: t('visualization.rect_shape'),
propValue: '&nbsp;',
icon: 'icon_graphical',
style: {
@ -497,8 +499,8 @@ const list = [
},
{
component: 'CircleShape',
name: '圆形',
label: '圆形',
name: t('visualization.circle_shape'),
label: t('visualization.circle_shape'),
propValue: '&nbsp;',
icon: 'icon_graphical',
style: {
@ -513,8 +515,8 @@ const list = [
},
{
component: 'SvgTriangle',
name: '三角形',
label: '三角形',
name: t('visualization.triangle'),
label: t('visualization.triangle'),
icon: 'icon_graphical',
propValue: '',
style: {
@ -528,12 +530,12 @@ const list = [
},
{
component: 'DeTabs',
name: '选项卡',
label: '选项卡',
name: t('visualization.tabs'),
label: t('visualization.tabs'),
propValue: [
{
name: 'tab',
title: '新建Tab',
title: t('visualization.new_tab'),
componentData: [],
closable: true
}
@ -560,9 +562,9 @@ const list = [
},
{
component: 'ScrollText',
name: '跑马灯',
label: '跑马灯',
propValue: '双击编辑文字',
name: t('visualization.scroll_text'),
label: t('visualization.scroll_text'),
propValue: t('visualization.component_input_tips'),
innerType: 'ScrollText',
icon: 'scroll-text',
x: 1,

10
core/core-frontend/src/custom-component/de-tabs/Component.vue
View File

@ -44,16 +44,16 @@
<template #dropdown>
<el-dropdown-menu :style="{ 'font-family': fontFamily }">
<el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
编辑标题
{{ t('visualization.edit_title') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeHandleCommand('copyCur', tabItem)">
复制
{{ t('visualization.copy') }}
</el-dropdown-item>
<el-dropdown-item
v-if="element.propValue.length > 1"
:command="beforeHandleCommand('deleteCur', tabItem)"
>
删除
{{ t('visualization.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
@ -146,11 +146,13 @@ import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
const tabComponentRef = ref(null)
let carouselTimer = null
const { t } = useI18n()
const props = defineProps({
canvasStyleData: {
@ -271,7 +273,7 @@ function addTab() {
const newName = guid()
const newTab = {
name: newName,
title: '新建Tab',
title: t('visualization.new_tab'),
componentData: [],
closable: true
}

4
core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
View File

@ -3,7 +3,7 @@
ref="enlargeDialog"
destroy-on-close
:append-to-body="true"
:title="'自定义排序'"
:title="t('visualization.custom_sort')"
v-model="dialogShow"
width="30vw"
top="10vh"
@ -63,6 +63,8 @@ const save = () => {
eventBus.emit('onTabSortChange-' + config.value.id)
closeDialog()
}
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
defineExpose({
sortInit

2
core/core-frontend/src/custom-component/de-time-clock/CustomAttr.vue
View File

@ -14,7 +14,7 @@ const { curComponent } = storeToRefs(dvMainStore)
</script>
<template>
<el-collapse-item :effect="themes" title="位置" name="position" v-if="!dashboardActive">
<el-collapse-item :effect="themes" :title="t('visualization.position')" name="position" v-if="!dashboardActive">
<component-position :themes="themes" />
</el-collapse-item>
</template>

7
core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue
View File

@ -1,7 +1,7 @@
<template>
<el-row>
<el-form ref="form">
<el-form-item v-show="formatInfo.showDate" label="显示日期">
<el-form-item v-show="formatInfo.showDate" :label="t('visualization.show_data')">
<el-select
v-model="formatInfo.dateFormat"
:effect="themes"
@ -17,7 +17,7 @@
</el-select>
</el-form-item>
<el-form-item label="显示时间">
<el-form-item :label="t('visualization.show_time')">
<el-select
v-model="formatInfo.timeFormat"
:effect="themes"
@ -41,7 +41,8 @@
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const state = reactive({
timeOptions: [
{ value: 'hh:mm:ss', label: 'hh:mm:ss' },

5
core/core-frontend/src/custom-component/de-video/Attr.vue
View File

@ -3,7 +3,7 @@
<CommonAttr :themes="themes" :element="curComponent">
<el-collapse-item
:effect="themes"
title="链接信息"
:title="t('visualization.link_info')"
name="videoLinks"
v-if="curComponent && curComponent.videoLinks && !mobileInPc"
>
@ -18,8 +18,11 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import CommonAttr from '@/custom-component/common/CommonAttr.vue'
import { storeToRefs } from 'pinia'
import VideoLinks from '@/custom-component/de-video/VideoLinks.vue'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
const { t } = useI18n()
withDefaults(
defineProps<{
themes?: EditorTheme

18
core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
View File

@ -116,7 +116,7 @@ onBeforeUnmount(() => {
</script>
<template>
<el-collapse-item :effect="themes" title="图片组" name="picture">
<el-collapse-item :effect="themes" :title="t('visualization.pic_group')" name="picture">
<el-row class="img-area" :class="`img-area_${themes}`">
<el-col style="width: 130px !important">
<el-upload
@ -141,14 +141,14 @@ onBeforeUnmount(() => {
</el-row>
<el-row>
<span style="margin-top: 2px" class="image-hint" :class="`image-hint_${themes}`">
支持JPG、PNG、GIF、SVG
{{ t('visualization.pic_upload_tips2') }}
</span>
</el-row>
<el-row class="pic-adaptor">
<el-form-item
v-if="curComponent.style.adaptation"
class="form-item form-item-custom"
label="图片适应方式"
:label="t('visualization.pic_adaptor_type')"
size="small"
:effect="themes"
>
@ -158,9 +158,15 @@ onBeforeUnmount(() => {
@change="onStyleChange"
:effect="themes"
>
<el-radio label="adaptation" :effect="themes">适应组件</el-radio>
<el-radio label="original" :effect="themes">原始尺寸</el-radio>
<el-radio label="equiratio" :effect="themes">等比适应</el-radio>
<el-radio label="adaptation" :effect="themes">{{
t('visualization.pic_adaptation')
}}</el-radio>
<el-radio label="original" :effect="themes">{{
t('visualization.pic_original')
}}</el-radio>
<el-radio label="equiratio" :effect="themes">{{
t('visualization.pic_equiratio')
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-row>

25
core/core-frontend/src/custom-component/picture/Attr.vue
View File

@ -124,7 +124,12 @@ onBeforeUnmount(() => {
:background-color-picker-width="197"
:background-border-select-width="197"
>
<el-collapse-item :effect="themes" title="图片" name="picture" v-show="!mobileInPc">
<el-collapse-item
:effect="themes"
:title="t('visualization.picture')"
name="picture"
v-show="!mobileInPc"
>
<el-row class="img-area" :class="`img-area_${themes}`">
<el-col style="width: 130px !important">
<el-upload
@ -152,7 +157,7 @@ onBeforeUnmount(() => {
class="image-hint"
:class="`image-hint_${themes}`"
>
支持JPG、PNG、GIF、SVG
{{ t('visualization.pic_upload_tips2') }}
</span>
<el-button
@ -162,14 +167,14 @@ onBeforeUnmount(() => {
text
@click="goFile"
>
重新上传
{{ t('visualization.re_upload') }}
</el-button>
</el-row>
<el-row class="pic-adaptor">
<el-form-item
v-if="curComponent.style.adaptation"
class="form-item"
label="图片适应方式"
:label="t('visualization.pic_adaptor_type')"
size="small"
:effect="themes"
:class="'form-item-' + themes"
@ -180,9 +185,15 @@ onBeforeUnmount(() => {
@change="onStyleChange"
:effect="themes"
>
<el-radio label="adaptation" :effect="themes">适应组件</el-radio>
<el-radio label="original" :effect="themes">原始尺寸</el-radio>
<el-radio label="equiratio" :effect="themes">等比适应</el-radio>
<el-radio label="adaptation" :effect="themes">{{
t('visualization.pic_adaptation')
}}</el-radio>
<el-radio label="original" :effect="themes">{{
t('visualization.pic_original')
}}</el-radio>
<el-radio label="equiratio" :effect="themes">{{
t('visualization.pic_equiratio')
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-row>

12
core/core-frontend/src/custom-component/picture/Component.vue
View File

@ -8,8 +8,12 @@
/>
<div v-else class="pic-upload">
<span
><el-button @click="uploadImg" text style="font-family: inherit; color: #646a73" icon="Plus"
>请上传图片...</el-button
><el-button
@click="uploadImg"
text
style="font-family: inherit; color: #646a73"
icon="Plus"
>{{ t('visualization.pic_upload_tips') }}</el-button
></span
>
</div>
@ -20,8 +24,8 @@
import { CSSProperties, computed, nextTick, toRefs } from 'vue'
import { imgUrlTrans } from '@/utils/imgUtils'
import eventBus from '@/utils/eventBus'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
const dvMainStore = dvMainStoreWithOut()
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
propValue: {

5
core/core-frontend/src/custom-component/pop-area/Component.vue
View File

@ -33,7 +33,7 @@
@dragover="handleDragOver"
@dragleave="handleDragLeave"
>
<span>可点击或拖拽查询组件到此位置，点击预览可查看弹窗区</span>
<span>{{ t('visualization.pop_area_tips') }}</span>
</div>
</div>
</div>
@ -51,9 +51,12 @@ import eventBus from '@/utils/eventBus'
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
import { ElMessage } from 'element-plus-secondary'
import { storeToRefs } from 'pinia'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const areaActive = ref(false)
const { t } = useI18n()
const props = defineProps({
dvInfo: {
type: Object,

102
core/core-frontend/src/locales/en.ts
View File

@ -2743,6 +2743,108 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
column_name: 'Field name'
},
visualization: {
new: 'New',
new_folder: 'New Folder',
new_screen: 'New Data Screen',
new_dashboard: 'New Dashboard',
new_from_template: 'Create from Template',
folder: 'Folder',
copy: 'Copy',
move_to: 'Move to',
rename: 'Rename',
name: 'Name',
name_repeat: 'Name Repeated',
input_name_tips: 'Please enter the {0} name',
select_target_folder: 'Please select a target folder',
select_target_tips: 'Cannot select itself, please choose another folder',
input_tips: 'Please enter a name',
position: 'Position',
ds_group_name: 'Dataset Group Name',
ds_group_position: 'Dataset Group Position',
datasource_info: 'Datasource Information',
app_datasource: 'Application Datasource',
sys_datasource: 'System Datasource',
select_folder: 'Please select a folder',
belong_folder: 'Belonging Folder',
no_content: 'No related content found',
confirm: 'Confirm',
cancel: 'Cancel',
select_ds_group_folder: 'Please select the dataset group folder',
app_no_datasource_tips: 'There are unconfigured data sources',
dataset: 'Dataset',
delete: 'Delete',
delete_success: 'Deleted Successfully',
save_success: 'Saved Successfully',
change_save_tips: 'The current changes are unsaved. Are you sure you want to exit?',
mobile_config: 'Mobile Configuration',
visualization_component: 'Visualization Component',
component_style: 'Component Style',
whole_style: 'Overall Style',
time_asc: 'Sort by Time Ascending',
time_desc: 'Sort by Time Descending',
name_asc: 'Sort by Name Ascending',
name_desc: 'Sort by Name Descending',
delete_tips: 'Deleting this will remove all resources under this folder. Proceed with caution.',
delete_warn: 'Are you sure you want to delete this {0}?',
save_app: 'Save Application',
base_info: 'Basic Information',
close: 'Close',
adapt_new_subject: 'Adapt to New Theme',
export_tips:
'{0} in the current dashboard is a template chart and cannot be exported. Please configure the dataset first!',
preview_select_tips: 'Please select a dashboard on the left',
have_none_resource: 'No Dashboard Available',
attribute: 'Attribute',
dashboard_configuration: 'Dashboard Configuration',
batch_style_set: 'Batch Style Settings',
pic_import_tips: 'Supports JPG, PNG, GIF, SVG, and size not exceeding {0}',
pic_size_error: 'Image size does not meet requirements',
re_upload: 'Re-upload',
screen_configuration: 'Screen Configuration',
mobile_ios_tips: 'May not display on iOS',
layer_management: 'Layer Management',
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',
no_selected_component: 'No Selected Component',
no_params_tips: 'Parameters cannot be empty',
cancel_store: 'Cancel Favorite',
creator: 'Creator',
fullscreen: 'Fullscreen',
edit: 'Edit',
refresh_data: 'Refresh Data',
export_as: 'Export as',
select_screen_tips: 'Please select a data screen on the left',
no_screen: 'No Data Screen Available',
query: 'Query',
carousel: 'Carousel',
carousel_time: 'Carousel Time (seconds)',
carousel_tips: 'Carousel will take effect after exiting edit mode',
carousel_tips2: 'Conditional styles disable carousel',
background: 'Background',
tab_title: 'Tab Title',
style: 'Style',
event: 'Event',
board: 'Border',
color: 'Color',
board_width: 'Border Width',
board_radius: 'Border Radius',
enable_event_binding: 'Enable Event Binding',
event_binding_tips:
'Event binding takes effect after exiting edit mode. For rich text, enabling binding will disable internal click events.',
input_url_tips: 'Please enter the redirect URL',
edit_title: 'Edit Title',
custom_sort: 'Custom Sort',
show_data: 'Show Date',
show_time: 'Show Time',
link_info: 'Link Information',
pic_upload_tips: 'Please upload an image...',
pic_group: 'Image Group',
pic_upload_tips2: 'Supports JPG, PNG, GIF, SVG',
pic_adaptor_type: 'Image Adaptation Mode',
pop_area_tips: 'Click or drag a query component here. Click preview to see the pop-up area.',
out_params_no_select: 'External parameters do not need to be selected',
filter_no_select: 'Filter components do not need to be selected',
forbidden_copy: 'Current components are not allowed to be copied',

100
core/core-frontend/src/locales/tw.ts
View File

@ -2673,6 +2673,106 @@ export default {
column_name: '欄位名稱'
},
visualization: {
new: '新建',
new_folder: '新建文件夾',
new_screen: '新建數據大屏',
new_dashboard: '新建儀表板',
new_from_template: '從模板新建',
folder: '文件夾',
copy: '複製',
move_to: '移動到',
rename: '重命名',
name: '名稱',
name_repeat: '名稱重複',
input_name_tips: '請輸入{0}名稱',
select_target_folder: '請選擇目標文件夾',
select_target_tips: '不能選擇自身，請選擇其他文件夾',
input_tips: '請輸入名稱',
position: '所在位置',
ds_group_name: '數據集分組名稱',
ds_group_position: '數據集分組位置',
datasource_info: '數據源信息',
app_datasource: '應用數據源',
sys_datasource: '系統數據源',
select_folder: '請選擇所屬文件夾',
belong_folder: '所屬文件夾',
no_content: '沒有找到相關內容',
confirm: '確認',
cancel: '取消',
select_ds_group_folder: '請選擇數據集分組所屬文件夾',
app_no_datasource_tips: '存在未配置的數據源',
dataset: '數據集',
delete: '刪除',
delete_success: '刪除成功',
save_success: '保存成功',
change_save_tips: '當前的更改尚未保存，確定退出嗎？',
mobile_config: '移動端配置',
visualization_component: '可視化組件',
component_style: '組件樣式',
whole_style: '整體樣式',
time_asc: '按時間升序',
time_desc: '按時間降序',
name_asc: '按名稱升序',
name_desc: '按名稱降序',
delete_tips: '刪除後，此文件夾下的所有資源都會被刪除，請謹慎操作。',
delete_warn: '確定刪除該{0}嗎？',
save_app: '保存應用',
base_info: '基本信息',
close: '關閉',
adapt_new_subject: '適應新主題',
export_tips: '當前儀表板中{0}屬於模板圖表，無法導出，請先設置數據集！',
preview_select_tips: '請在左側選擇儀表板',
have_none_resource: '暫無儀表板',
attribute: '屬性',
dashboard_configuration: '儀表板配置',
batch_style_set: '批量設置樣式',
pic_import_tips: '支持JPG、PNG、GIF、SVG，大小不超過 {0}',
pic_size_error: '圖片大小不符合',
re_upload: '重新上傳',
screen_configuration: '儀表板配置',
mobile_ios_tips: 'IOS可能無法顯示',
layer_management: '圖層管理',
hold_canvas_tips: '按住空格可拖動畫布',
keep_subject: '保持源樣式',
select_component: '選擇組件',
show_selected_only: '選擇組件',
no_available_component: '當前沒有可用的組件',
no_selected_component: '當前選擇的組件',
no_params_tips: '參數不能為空',
cancel_store: '取消收藏',
creator: '創建人',
fullscreen: '全屏',
edit: '編輯',
refresh_data: '刷新數據',
export_as: '導出為',
select_screen_tips: '請在左側選擇數據大屏',
no_screen: '暫無數據大屏',
query: '查詢',
carousel: '輪播',
carousel_time: '輪播時間（秒）',
carousel_tips: '輪播退出編輯模式才可生效',
carousel_tips2: '啟用條件樣式後，輪播失效',
background: '背景',
tab_title: 'Tab標籤',
style: '樣式',
event: '事件',
board: '邊框',
color: '顏色',
board_width: '線寬',
board_radius: '圓角',
enable_event_binding: '開啟事件綁定',
event_binding_tips: '事件綁定需退出編輯模式後生效，富文本開啟綁定事件則內部點擊事件失效',
input_url_tips: '請輸入跳轉地址',
edit_title: '編輯標題',
custom_sort: '自定義排序',
show_data: '顯示日期',
show_time: '顯示時間',
link_info: '鏈接信息',
pic_upload_tips: '請上傳圖片...',
pic_group: '圖片組',
pic_upload_tips2: '支持JPG、PNG、GIF、SVG',
pic_adaptor_type: '圖片適應方式',
pop_area_tips: '可點擊或拖拽查詢組件到此位置，點擊預覽可查看彈窗區',
out_params_no_select: '外部參數無需選擇',
filter_no_select: '過濾元件無需選擇',
forbidden_copy: '目前元件不允許複製',

451
core/core-frontend/src/locales/zh-CN.ts
View File

@ -87,96 +87,6 @@ export default {
mobile: '移动端',
client: '客户端'
},
template_manage: {
name_already_exists_type: '分类名称已存在',
the_same_category: '同一分类下，该模板名称已存在',
name: '模板管理',
rename: '重命名',
edit_template: '编辑模板',
import_template: '导入模板',
template_name: '模板名称',
keywords: '搜索关键字',
catalog_name: '分类名称',
search_result: '的搜索结果',
search_result_unit: '个',
selected_count: '已选 {0} 项',
select_all_count: '全选 {0} 项',
add_catalog: '添加分类',
edit_catalog: '修改分类',
select_catalog: '选择分类',
no_selectable_catalog: '暂无可选分类',
please_select_catalog: '请选择分类',
no_template: '暂无模板',
not_found: '没有找到相关模板',
delete_failed_hint: '无法删除分类',
delete_failed_tip: '请先移除该分类下所有模板再进行删除分类操作',
delete_failed_confirm: '知道了',
delete_hint: '确定删除该模板吗?',
delete_batch_hint: '确定删除{0}个模板吗？',
add_success: '添加成功',
edit_success: '修改成功',
import_success: '导入成功',
cover_success: '覆盖成功',
cover_exists_hint: '当前分类存在相同模板名称，是否覆盖？',
template_size_hint: '模板大小需小于35MB',
hint: '提示',
relevant_content_found: '没有找到相关内容',
no_catalog: '当前无分类',
delete_catalog_hint: '确定删除该分类吗？',
delete_catalog_tip: '删除后不可恢复，是否继续？',
illegal_name_hint: '不合法命名，请更换！',
exists_name_hint: '当前名称已在模版管理中存在，请修改',
get_download_link_hint: '未获取模板下载链接请联系模板市场官方',
search_result_count: '的搜索结果是 {0} 个',
template_center: '模版中心',
preview: '预览'
},
work_branch: {
back_to_work_branch: '返回工作台',
recommended_dashboard: '推荐仪表板',
template_market_official: '未获取模板下载链接请联系模板市场官方',
create_quickly: '快速创建',
permission_to_create: '缺少创建权限',
new_using_template: '使用模板新建',
template_center: '模板中心',
view_all: '查看全部',
relevant_templates_found: '没有找到相关模板',
last_edited_by: '最近编辑人',
last_edit_time: '最近编辑时间',
big_data_screen: '数据大屏',
big_screen: '大屏',
dashboard: '仪表板',
data_set: '数据集',
data_source: '数据源',
recently_used: '最近使用',
my_collection: '我的收藏',
relevant_content_found: '没有找到相关内容',
no_content_yet: '暂无内容',
no_favorites_yet: '暂无收藏',
permission_denied: '没有权限',
search_keyword: '搜索关键词',
new_page_preview: '新页面预览',
cancel_favorites: '取消收藏',
open_dataset: '打开数据集',
administrator_for_authorization: '没有任何业务菜单权限，请联系管理员授权',
public_link_share: '公共链接分享',
share_time_limit: '必须大于当前时间',
ticket_setting: 'Ticket 设置',
cannot_share_link: '已经开启全局禁用分享，分享功能暂不可用，请联系管理员！',
open_link_hint: '开启后，用户可以通过该链接访问',
uuid_checker: '仅支持8-16位(字母数字)，请重新输入！',
error_password_hint: '密码格式错误，请重新填写！',
error_link_hint: '链接格式错误，请重新填写！',
password_null_hint: '密码不能为空，请重新输入！',
password_hint: "密码必须是包含数字、字母、特殊字符[!{'@'}#$%^&*()_+]的4-10位字符串",
max_ticket_count: '最多支持创建5个Ticket',
last: '上一个',
next: '下一个',
recommend: '推荐',
recent: '最近使用',
all_types: '全部类型',
all_source: '全部来源'
},
data_set: {
to_nth_digits: '保留第M至N位',
the_column_permissions: '确定删除列权限吗?',
@ -2675,6 +2585,242 @@ export default {
column_name: '字段名称'
},
visualization: {
new: '新建',
new_folder: '新建文件夹',
new_screen: '新建数据大屏',
new_dashboard: '新建仪表板',
new_from_template: '从模板新建',
folder: '文件夹',
copy: '复制',
move_to: '移动到',
rename: '重命名',
name: '名称',
name_repeat: '名称重复',
input_name_tips: '请输入{0}名称',
select_target_folder: '请选择目标文件夹',
select_target_tips: '不能选择自身，请选择其他文件夹',
input_tips: '请输入名称',
position: '所在位置',
ds_group_name: '数据集分组名称',
ds_group_position: '数据集分组位置',
datasource_info: '数据源信息',
app_datasource: '应用数据源',
sys_datasource: '系统数据源',
select_folder: '请选择所属文件夹',
belong_folder: '所属文件夹',
no_content: '没有找到相关内容',
confirm: '确认',
cancel: '取消',
select_ds_group_folder: '请选择数据集分组所属文件夹',
app_no_datasource_tips: '存在未配置的数据源',
dataset: '数据集',
delete: '删除',
delete_success: '删除成功',
save_success: '保存成功',
change_save_tips: '当前的更改尚未保存，确定退出吗？',
mobile_config: '移动端配置',
visualization_component: '可视化组件',
component_style: '组件样式',
whole_style: '整体样式',
time_asc: '按时间升序',
time_desc: '按时间降序',
name_asc: '按名称升序',
name_desc: '按名称降序',
delete_tips: '删除后，此文件夹下的所有资源都会被删除，请谨慎操作。',
delete_warn: '确定删除该{0}吗？',
save_app: '保存应用',
base_info: '基本信息',
close: '关闭',
adapt_new_subject: '适应新主题',
export_tips: '当前仪表板中{0}属于模版图表，无法导出，请先设置数据集！',
preview_select_tips: '请在左侧选择仪表板',
have_none_resource: '暂无仪表板',
attribute: '属性',
dashboard_configuration: '仪表板配置',
batch_style_set: '批量设置样式',
pic_import_tips: '支持JPG、PNG、GIF、SVG，大小不超过 {0}',
pic_size_error: '图片大小不符合',
re_upload: '重新上传',
screen_configuration: '仪表板配置',
mobile_ios_tips: 'IOS可能无法显示',
layer_management: '图层管理',
hold_canvas_tips: '按住空格可拖动画布',
keep_subject: '保持源样式',
select_component: '选择组件',
show_selected_only: '选择组件',
no_available_component: '当前没有可用的组件',
no_selected_component: '当前选择的组件',
no_params_tips: '参数不能为空',
cancel_store: '取消收藏',
creator: '创建人',
fullscreen: '全屏',
edit: '编辑',
refresh_data: '刷新数据',
export_as: '导出为',
select_screen_tips: '请在左侧选择数据大屏',
no_screen: '暂无数据大屏',
query: '查询',
carousel: '轮播',
carousel_time: '轮播时间（秒）',
carousel_tips: '轮播退出编辑模式才开生效',
carousel_tips2: '启用条件样式后，轮播失效',
background: '背景',
tab_title: 'Tab标签',
style: '样式',
event: '事件',
board: '边框',
color: '颜色',
board_width: '线宽',
board_radius: '圆角',
enable_event_binding: '开启事件绑定',
event_binding_tips: '事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效',
input_url_tips: '请输入跳转地址',
edit_title: '编辑标题',
custom_sort: '自定义排序',
show_data: '显示日期',
show_time: '显示时间',
link_info: '链接信息',
pic_upload_tips: '请上传图片...',
pic_group: '图片组',
pic_upload_tips2: '支持JPG、PNG、GIF、SVG',
pic_adaptor_type: '图片适应方式',
pop_area_tips: '可点击或拖拽查询组件到此位置，点击预览可查看弹窗区',
view: '图表',
query_component: '查询组件',
media: '媒体',
more: '更多',
source_material: '素材',
text_html: '文本',
external_parameter_settings: '外部参数设置',
screen_config: '大屏配置',
screen_adaptor: '缩放方式',
screen_adaptor_width_first: '宽度优先',
screen_adaptor_height_first: '高度优先',
screen_adaptor_full: '铺满全屏',
screen_adaptor_keep: '不缩放',
effective_during_preview: '预览时生效',
base_config: '基础配置',
color_config: '配色',
refresh_config: '刷新配置',
advanced_style_settings: '高级样式设置',
size: '尺寸',
font_family_select: '仪表板字体选择',
screen_font_family_select: '数据大屏字体选择',
button_tips: '显示放大、导出等悬浮按钮',
display_auxiliary_grid: '显示辅助网格',
show_pop_button: '显示弹窗区查询按钮',
show_zoom_button: '显示放大、导出等悬浮按钮',
keep_ratio: '保持宽高比',
rotation_3d: '3D旋转',
keep_size: '调整大小保持内部组件尺寸',
no_save_tips: '存在未保存的{0}',
no_save_tips2: '存在未保存的修改，立即恢复？',
locate_tips: '定位到中心点',
new_tab: '新建Tab',
pop_area: '弹窗区域',
refresh_view: '刷新图表',
view_group: '组合',
video: '视频',
stream_media: '流媒体',
web: '网页',
time_component: '时间组件',
picture: '图片',
icon: '图标',
rect_shape: '矩形',
circle_shape: '圆形',
triangle: '三角形',
tabs: '选项卡',
scroll_text: '跑马灯',
component_input_tips: '双击编辑文字',
screen_area: '大屏区域',
rich_text: '富文本',
date_time: '日期时间',
board_name: '边框{0}',
graphic: '图形',
selected_tips: '已选 {0} 项',
params_list: '参数列表',
params: '参数',
no_setting_params_name_tip: '未配置参数名',
select_params_connect_component: '选择参数关联组件',
connection_condition: '关联条件',
connection_params_fields: '关联字段或参数',
fields: '字段',
select_all: '全选',
select_params_connect_view: '选择关联的图表',
setting_params_tips: '请配置参数',
setting_params: '参数配置',
required: '必填',
default_value: '默认值',
default_value_tips1: '请使用JSON数组格式 示例:',
default_value_tips2: '单值 ["name1"], 多值 ["name1","name2"]',
default_value_tips3: '请输入参数,如:["name1"]',
time_year_widget: '年份过滤组件',
time_month_widget: '年月过滤组件',
time_date_widget: '日期过滤组件',
time_date_range_widget: '日期范围过滤组件',
text_select_widget: '文本下拉过滤组件',
text_select_grid_widget: '文本列表过滤组件',
text_input_widget: '文本搜索过滤组件',
text_select_tree_widget: '下拉树过滤组件',
number_select_widget: '数字下拉过滤组件',
number_select_grid_widget: '数字列表过滤组件',
number_range_widget: '数值区间过滤组件',
format_error: '格式错误',
params_setting_check_message: '参数{0}默认值格式不正确！',
params_setting_check_message_tips: '存在未配置的参数名或者参数名称重复！',
already_setting: '已设置',
bubble_dynamic_effect: '气泡动效',
save_page_tips: '请先保存当前页面',
selected_view: '已选图表',
used_dataset: '所用数据集',
to_select_view: '选择图表',
show_selected_only: '仅看已选',
same_dataset: '同数据集',
diff_dataset: '不同数据集',
no_available_view: '暂无可用图表',
linkage_setting_tips1: '配置图表间的字段关联关系',
current_chart_source_field: '当前图表源字段',
add_linkage_dependency_fields: '追加联动依赖字段',
select_linkage_tips: '请先勾选需要联动的图表',
linkage_option_tips1: '如果联动维度已配置钻取，点击维度将',
linkage_option1: '弹出浮框，由用户选择联动或者下钻',
linkage_option2: '同时触发联动和下钻',
window_size: '窗口大小',
window_size_large: '大',
window_size_middle: '中',
window_size_small: '小',
target: '目标',
linkage_view: '联动图表',
with_filter_params: '携带查询条件',
source_field: '源字段',
source_filter: '源条件',
link_target_tips1: '目标仪表板无外部参数，因此无法携带条件查询，如有需要，',
link_target_tips2: '目标仪表板无外部参数，因此无法携带条件查询，如有需要，',
link_outer_params: '联动外部参数',
indicator_name: '指标名称',
component_size: '大小',
component_annotation: '标注',
alignment: '对齐',
left_justifying: '左对齐',
right_justifying: '右对齐',
top_justifying: '上对齐',
bottom_justifying: '下对齐',
horizontally_centered: '水平居中',
vertically_centered: '垂直居中',
cancel_group: '取消组合',
move_to_screen_show: '移动到大屏显示区',
move_to_pop_area: '移动到大屏弹窗区',
sort: '排序',
hidden: '隐藏',
cancel_hidden: '取消隐藏',
template_view_tips: '当前为模板图表，请更换数据集...',
download: '下载',
refresh: '刷新',
head_font_color: '头部字体颜色',
head_font_active_color: '激活字体颜色',
background_color: '背景色',
active_font_size: '激活字体大小',
scroll_speed: '滚动速度',
out_params_no_select: '外部参数无需选择',
filter_no_select: '过滤组件无需选择',
forbidden_copy: '当前组件不允许复制',
@ -2685,7 +2831,6 @@ export default {
unpublished_tips: '取消发布后，该仪表板不能被查看。确定要取消发布？',
position_adjust_component: '位置调整',
active_font_size: '选中字体大小',
carousel: '轮播',
enable_carousel: '启用轮播',
switch_time: '切换时间',
position_adjust: '位置',
@ -2697,7 +2842,6 @@ export default {
down: '下载',
mobile_style_setting: '样式设置',
mobile_style_setting_tips: '自定义移动端背景',
board: '边框',
text: '文字',
board_background: '背景',
title_color: '标题颜色',
@ -2733,7 +2877,6 @@ export default {
market_network_tips:
'查看模板市场模板需要服务器与模板市场(https://templates.dataease.cn)连通，请检查网络...',
enter_name_tips: '请输入仪表板名称',
name: '名称',
apply_template: '应用模板',
style_template: '样式模板',
all_type: '全部分类',
@ -2760,7 +2903,6 @@ export default {
card_color_matching: '卡片配色',
table_color_matching: '表格配色',
background_color: '背景颜色',
more: '更多',
level: '层级',
enlarge: '放大',
panel_style: '仪表板样式',
@ -2779,8 +2921,6 @@ export default {
json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
inner_padding: '内边距',
board_radio: '圆角',
background: '背景',
component_style: '组件样式',
web_set_tips: '部分网站可能设置不允许嵌入而无法显示',
repeat_params: '存在名称重复的参数',
enable_outer_param_set: '启用外部参数设置',
@ -2827,22 +2967,14 @@ export default {
panel_list: '仪表板',
groupAdd: '新建目录',
panelAdd: '新建仪表板',
delete: '删除',
move_to: '移动到',
rename: '重命名',
import: '导入模板',
tips: '提示',
confirm_delete: '确认删除',
delete_success: '删除成功',
confirm: '确认',
cancel: '取消',
search: '搜索',
back: '返回',
view: '图表',
module: '组件',
filter_module: '查询组件',
select_by_module: '按组件选择',
edit: '编辑',
sys_template: '系统模板',
user_template: '用户模板',
add_category: '添加分类',
@ -2888,7 +3020,6 @@ export default {
custom_scope: '控制范围',
binding_parameters: '参数',
multiple_choice: '多选',
show_time: '显示时间',
single_choice: '单选',
field: '字段',
unshared_people: '未分享人员',
@ -2896,20 +3027,19 @@ export default {
error_data: '获取数据出错，请联系管理员',
canvas_size: '画布大小',
canvas_scale: '画布比例',
style: '样式',
clean_canvas: '清空画布',
insert_picture: '插入图片',
redo: '重做',
undo: '撤销',
panelNull: '这是个空的仪表板，可以通过编辑来丰富内容',
copy: '复制',
paste: '粘贴',
cut: '剪切',
lock: '锁定',
topComponent: '置顶',
bottomComponent: '置底',
upComponent: '上移',
downComponent: '下移',
unlock: '解锁',
top_component: '置于顶层',
bottom_component: '置于底层',
up_component: '上移一层',
down_component: '下移一层',
linkage_setting: '联动设置',
add_tab: '新增Tab',
open_aided_design: '打开组件辅助设计',
@ -2921,20 +3051,20 @@ export default {
top: 'y 坐标',
height: '高',
width: '宽',
color: '颜色',
backgroundColor: '背景色',
borderStyle: '边框风格',
borderWidth: '边框宽度',
borderColor: '边框颜色',
borderRadius: '圆角',
fontSize: '字体大小',
font_size: '字体大小',
fontWeight: '字体粗细',
lineHeight: '行高',
letterSpacing: '字间距',
letter_spacing: '字间距',
padding: '内间距',
margin: '外间距',
textAlign: '左右对齐',
opacity: '不透明度',
background_opacity: '背景模糊',
verticalAlign: '上下对齐',
text_align_left: '左对齐',
text_align_center: '左右居中',
@ -2944,7 +3074,6 @@ export default {
vertical_align_bottom: '下对齐',
border_style_solid: '实线',
border_style_dashed: '虚线',
select_component: '请选择组件',
other_module: '其他',
content: '内容',
default_panel_name: '默认仪表板名称',
@ -3044,6 +3173,98 @@ export default {
export_time: '导出时间',
you_can_type_here: '可以在这里输入其他内容'
},
template_manage: {
name_already_exists_type: '分类名称已存在',
the_same_category: '同一分类下，该模板名称已存在',
name: '模板管理',
rename: '重命名',
edit_template: '编辑模板',
import_template: '导入模板',
template_name: '模板名称',
keywords: '搜索关键字',
catalog_name: '分类名称',
search_result: '的搜索结果',
search_result_unit: '个',
selected_count: '已选 {0} 项',
select_all_count: '全选 {0} 项',
add_catalog: '添加分类',
edit_catalog: '修改分类',
select_catalog: '选择分类',
no_selectable_catalog: '暂无可选分类',
please_select_catalog: '请选择分类',
no_template: '暂无模板',
not_found: '没有找到相关模板',
delete_failed_hint: '无法删除分类',
delete_failed_tip: '请先移除该分类下所有模板再进行删除分类操作',
delete_failed_confirm: '知道了',
delete_hint: '确定删除该模板吗?',
delete_batch_hint: '确定删除{0}个模板吗？',
add_success: '添加成功',
edit_success: '修改成功',
import_success: '导入成功',
cover_success: '覆盖成功',
cover_exists_hint: '当前分类存在相同模板名称，是否覆盖？',
template_size_hint: '模板大小需小于35MB',
hint: '提示',
relevant_content_found: '没有找到相关内容',
no_catalog: '当前无分类',
delete_catalog_hint: '确定删除该分类吗？',
delete_catalog_tip: '删除后不可恢复，是否继续？',
illegal_name_hint: '不合法命名，请更换！',
exists_name_hint: '当前名称已在模版管理中存在，请修改',
get_download_link_hint: '未获取模板下载链接请联系模板市场官方',
search_result_count: '的搜索结果是 {0} 个',
template_center: '模版中心',
preview: '预览'
},
work_branch: {
new_empty: '空白新建',
new_folder: '新建文件夹',
back_to_work_branch: '返回工作台',
recommended_dashboard: '推荐仪表板',
template_market_official: '未获取模板下载链接请联系模板市场官方',
create_quickly: '快速创建',
permission_to_create: '缺少创建权限',
new_using_template: '使用模板新建',
template_center: '模板中心',
view_all: '查看全部',
relevant_templates_found: '没有找到相关模板',
last_edited_by: '最近编辑人',
last_edit_time: '最近编辑时间',
big_data_screen: '数据大屏',
big_screen: '大屏',
dashboard: '仪表板',
data_set: '数据集',
data_source: '数据源',
recently_used: '最近使用',
my_collection: '我的收藏',
relevant_content_found: '没有找到相关内容',
no_content_yet: '暂无内容',
no_favorites_yet: '暂无收藏',
permission_denied: '没有权限',
search_keyword: '搜索关键词',
new_page_preview: '新页面预览',
cancel_favorites: '取消收藏',
open_dataset: '打开数据集',
administrator_for_authorization: '没有任何业务菜单权限，请联系管理员授权',
public_link_share: '公共链接分享',
share_time_limit: '必须大于当前时间',
ticket_setting: 'Ticket 设置',
cannot_share_link: '已经开启全局禁用分享，分享功能暂不可用，请联系管理员！',
open_link_hint: '开启后，用户可以通过该链接访问',
uuid_checker: '仅支持8-16位(字母数字)，请重新输入！',
error_password_hint: '密码格式错误，请重新填写！',
error_link_hint: '链接格式错误，请重新填写！',
password_null_hint: '密码不能为空，请重新输入！',
password_hint: "密码必须是包含数字、字母、特殊字符[!{'@'}#$%^&*()_+]的4-10位字符串",
max_ticket_count: '最多支持创建5个Ticket',
last: '上一个',
next: '下一个',
recommend: '推荐',
recent: '最近使用',
all_types: '全部类型',
all_source: '全部来源'
},
link_ticket: {
require: '必选',
back: '返回公共链接设置页面',

6
core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
View File

@ -1,5 +1,7 @@
<script lang="tsx" setup>
import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
</script>
<template>
@ -7,7 +9,9 @@ import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
<Icon class-name="item-icon" name="dv-up-arrow"><dvUpArrow class="svg-icon item-icon" /></Icon>
<div>
<el-button style="opacity: 1 !important" type="warning" size="mini" round>
<span style="font-weight: bold; opacity: 1"> 当前为模板图表，请更换数据集...</span>
<span style="font-weight: bold; opacity: 1">{{
t('visualization.template_view_tips')
}}</span>
</el-button>
</div>
</div>

4
core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
View File

@ -45,7 +45,9 @@ const orgCheck = ref(true)
const datasetTree = ref<Tree[]>([])
const sourceName = computed(() => (props.sourceType === 'datasource' ? '数据源' : '数据集'))
const sourceName = computed(() =>
props.sourceType === 'datasource' ? t('visualization.datasource') : t('visualization.dataset')
)
const sortTypeChange = arr => {
const sortType = wsCache.get('TreeSort-dataset') || 'time_desc'

22
core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
View File

@ -149,7 +149,7 @@ const showProperties = (prop: EditorProperty) => {
const linkJumpSetOpen = () => {
if (!dvInfo.value.id) {
ElMessage.warning('请先保存当前页面')
ElMessage.warning(t('visualization.save_page_tips'))
return
}
//跳转设置需要先触发保存
@ -159,7 +159,7 @@ const linkJumpSetOpen = () => {
}
const linkageSetOpen = () => {
if (!dvInfo.value.id) {
ElMessage.warning('请先保存当前页面')
ElMessage.warning(t('visualization.save_page_tips'))
return
}
//跳转设置需要先触发保存
@ -328,16 +328,18 @@ const removeJumpSenior = () => {
v-if="showProperties('linkage')"
:themes="themes"
name="linkage"
:title="'联动设置'"
:title="t('visualization.linkage_setting')"
v-model="chart.linkageActive"
@modelChange="linkageActiveChange"
>
<div class="inner-container">
<span class="label" :class="'label-' + props.themes">联动设置</span>
<span class="label" :class="'label-' + props.themes">{{
t('visualization.linkage_setting')
}}</span>
<span class="right-btns">
<template v-if="seniorCounts.linkageCount > 0">
<span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
已设置
{{ t('visualization.already_setting') }}
</span>
<button
:class="'label-' + props.themes"
@ -377,16 +379,18 @@ const removeJumpSenior = () => {
v-if="showProperties('jump-set') && !isDataEaseBi"
:themes="themes"
name="jumpSet"
:title="'跳转设置'"
:title="t('visualization.jump_set')"
v-model="chart.jumpActive"
@modelChange="linkJumpActiveChange"
>
<div class="inner-container">
<span class="label" :class="'label-' + props.themes">跳转设置</span>
<span class="label" :class="'label-' + props.themes">{{
t('visualization.jump_set')
}}</span>
<span class="right-btns">
<template v-if="seniorCounts.jumpCount">
<span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
已设置
{{ t('visualization.already_setting') }}
</span>
<button
:class="'label-' + props.themes"
@ -424,7 +428,7 @@ const removeJumpSenior = () => {
</collapse-switch-item>
<collapse-switch-item
:effect="themes"
title="气泡动效"
:title="t('visualization.bubble_dynamic_effect')"
:change-model="chart.senior.bubbleCfg"
v-if="showProperties('bubble-animate')"
v-model="chart.senior.bubbleCfg.enable"

19
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -263,7 +263,7 @@ watch(
<el-collapse-item
:effect="themes"
name="position"
:title="'位置'"
:title="t('visualization.position')"
v-if="positionComponentShow"
>
<component-position :themes="themes" />
@ -334,7 +334,7 @@ watch(
<el-collapse-item
:effect="themes"
name="background"
title="背景"
:title="t('visualization.background')"
v-if="showProperties('background-overall-component') && commonBackgroundPop"
>
<background-overall-common
@ -349,7 +349,7 @@ watch(
v-model="commonBorderPop.borderActive"
@modelChange="val => onActiveChange(val)"
:themes="themes"
:title="'边框'"
:title="t('visualization.board')"
name="borderSetting"
class="common-style-area"
>
@ -359,7 +359,12 @@ watch(
@onStyleAttrChange="onStyleAttrChange"
></common-border-setting>
</collapse-switch-item>
<el-collapse-item :effect="themes" name="events" title="事件" v-if="eventsShow">
<el-collapse-item
:effect="themes"
name="events"
:title="t('visualization.event')"
v-if="eventsShow"
>
<common-event :themes="themes" :events-info="eventInfo"></common-event>
</el-collapse-item>
<el-collapse-item
@ -384,7 +389,7 @@ watch(
v-if="showProperties('indicator-name-selector')"
:change-model="chart.customAttr.indicatorName"
@modelChange="val => onIndicatorNameChange(val, 'show')"
title="指标名称"
:title="t('visualization.indicator_name')"
name="indicator-name"
>
<indicator-name-selector
@ -401,7 +406,7 @@ watch(
:effect="themes"
v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
name="size"
title="大小"
:title="t('visualization.component_size')"
>
<misc-selector
:property-inner="propertyInnerAll['misc-selector']"
@ -545,7 +550,7 @@ watch(
<el-collapse-item
:effect="themes"
name="flowMapPointSelector"
title="标注"
:title="t('visualization.component_annotation')"
v-if="showProperties('flow-map-point-selector')"
>
<flow-map-point-selector

4
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -3237,7 +3237,7 @@ const deleteChartFieldItem = id => {
<Expand v-else class="collapse-icon" />
</el-icon>
<div v-if="canvasCollapse.datasetAreaCollapse" class="collapse-title">
<span style="font-size: 14px">数据集</span>
<span style="font-size: 14px">{{ t('visualization.dataset') }}</span>
</div>
<el-container
v-if="!canvasCollapse.datasetAreaCollapse"
@ -3245,7 +3245,7 @@ const deleteChartFieldItem = id => {
class="dataset-area view-panel-row"
>
<el-header class="editor-title">
<span style="font-size: 14px">数据集</span>
<span style="font-size: 14px">{{ t('visualization.dataset') }}</span>
</el-header>
<el-main class="dataset-main-top">
<el-row class="dataset-select">

4
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -1517,14 +1517,14 @@ export const CHART_TYPE_CONFIGS = [
render: 'custom',
category: 'quota',
value: 'rich-text',
title: '富文本',
title: t('visualization.rich-text'),
icon: 'rich-text'
},
{
render: 'custom',
category: 'quota',
value: 'picture-group',
title: '图片组',
title: t('visualization.picture-group'),
icon: 'picture-group'
}
]

37
core/core-frontend/src/views/common/DeAppApply.vue
View File

@ -1,6 +1,6 @@
<template>
<el-drawer
:title="'保存应用'"
:title="t('visualization.save_app')"
v-model="state.appApplyDrawer"
custom-class="de-app-drawer"
:show-close="false"
@ -19,12 +19,16 @@
label-position="top"
>
<div class="de-row-rules" style="margin: 0 0 16px">
<span>基本信息</span>
<span>{{ t('visualization.base_info') }}</span>
</div>
<el-form-item :label="dvPreName + '名称'" prop="name">
<el-input v-model="state.form.name" autocomplete="off" :placeholder="'请输入名称'" />
<el-form-item :label="dvPreName + t('visualization.name')" prop="name">
<el-input
v-model="state.form.name"
autocomplete="off"
:placeholder="t('visualization.input_tips')"
/>
</el-form-item>
<el-form-item :label="dvPreName + '所在位置'" prop="pid">
<el-form-item :label="dvPreName + t('visualization.position')" prop="pid">
<el-tree-select
style="width: 100%"
@keydown.stop
@ -47,14 +51,14 @@
</template>
</el-tree-select>
</el-form-item>
<el-form-item :label="'数据集分组名称'" prop="datasetFolderName">
<el-form-item :label="t('visualization.ds_group_name')" prop="datasetFolderName">
<el-input
v-model="state.form.datasetFolderName"
autocomplete="off"
:placeholder="'请输入名称'"
:placeholder="t('visualization.input_tips')"
/>
</el-form-item>
<el-form-item label="数据集分组位置" prop="datasetFolderPid">
<el-form-item :label="t('visualization.ds_group_position')" prop="datasetFolderPid">
<el-tree-select
style="width: 100%"
@keydown.stop
@ -78,12 +82,13 @@
</el-tree-select>
</el-form-item>
<div class="de-row-rules" style="margin: 0 0 16px">
<span>数据源信息</span>
<span>{{ t('visualization.datasource_info') }}</span>
</div>
<el-row class="datasource-link">
<el-row class="head">
<el-col :span="11">应用数据源</el-col><el-col :span="2"></el-col
><el-col :span="11">系统数据源</el-col>
<el-col :span="11">{{ t('visualization.app_datasource') }}</el-col
><el-col :span="2"></el-col
><el-col :span="11">{{ t('visualization.sys_datasource') }}</el-col>
</el-row>
<el-row
:key="index"
@ -204,7 +209,7 @@ const state = reactive({
},
form: {
pid: '',
name: '新建',
name: t('visualization.new'),
datasetFolderPid: null,
datasetFolderName: null
},
@ -221,7 +226,7 @@ const state = reactive({
pid: [
{
required: true,
message: '请选择所属文件夹',
message: t('visualization.select_folder'),
trigger: 'blur'
}
],
@ -237,7 +242,7 @@ const state = reactive({
datasetFolderPid: [
{
required: true,
message: '请选择数据集分组所属文件夹',
message: t('visualization.select_ds_group_folder'),
trigger: 'blur'
}
]
@ -263,7 +268,7 @@ const initData = () => {
dfs(res as unknown as BusiTreeNode[])
state.dsTree = (res as unknown as BusiTreeNode[]) || []
if (state.dsTree.length && state.dsTree[0].name === 'root' && state.dsTree[0].id === '0') {
state.dsTree[0].name = '数据集'
state.dsTree[0].name = t('visualization.dataset')
}
})
}
@ -314,7 +319,7 @@ const saveApp = () => {
}
})
if (!datasourceMatchReady) {
ElMessage.error('存在未配置的数据源')
ElMessage.error(t('visualization.app_no_datasource_tips'))
return
}
appSaveForm.value?.validate(valid => {

4
core/core-frontend/src/views/common/DeResourceCreateOpt.vue
View File

@ -1,7 +1,7 @@
<template>
<el-dialog
class="create-dialog"
title="从模板新建"
:title="t('visualization.new_from_template')"
v-model="state.dialogShow"
width="700"
:before-close="close"
@ -32,7 +32,7 @@
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<el-col :span="4" class="name-area">名称</el-col>
<el-col :span="4" class="name-area">{{ t('visualization.name') }}</el-col>
<el-col :span="20">
<el-input v-model="state.dvCreateInfo.name" clearable size="small" />
</el-col>

48
core/core-frontend/src/views/common/DeResourceGroupOpt.vue
View File

@ -78,7 +78,7 @@ const nameRepeat = value => {
}
const nameValidator = (_, value, callback) => {
if (nameRepeat(value)) {
callback(new Error('名称重复'))
callback(new Error(t('visualization.name_repeat')))
} else {
callback()
}
@ -105,7 +105,7 @@ const filterMethod = value => {
const resetForm = () => {
dialogTitle.value = null
resourceFormNameLabel.value = ''
resourceForm.name = '新建'
resourceForm.name = t('visualization.new')
resourceForm.pid = ''
resourceDialogShow.value = false
}
@ -121,12 +121,15 @@ const dfs = (arr: BusiTreeNode[]) => {
const getDialogTitle = exec => {
return {
newFolder: '新建文件夹',
newLeaf: props.curCanvasType === 'dataV' ? '新建数据大屏' : '新建仪表板',
move: '移动到',
copy: '复制' + sourceLabel.value,
rename: '重命名',
newLeafAfter: '所属文件夹'
newFolder: t('visualization.new_folder'),
newLeaf:
props.curCanvasType === 'dataV'
? t('visualization.new_screen')
: t('visualization.new_dashboard'),
move: t('visualization.move_to'),
copy: t('visualization.copy') + sourceLabel.value,
rename: t('visualization.rename'),
newLeafAfter: t('visualization.belong_folder')
}[exec]
}
const placeholder = ref('')
@ -134,16 +137,17 @@ const placeholder = ref('')
const optInit = (type, data: BusiTreeNode, exec, parentSelect = false) => {
showParentSelected.value = parentSelect
nodeType.value = type
const optSource = data.leaf || type === 'leaf' ? sourceLabel.value : '文件夹'
placeholder.value =
const optSource = data.leaf || type === 'leaf' ? sourceLabel.value : t('visualization.folder')
const placeholderLabel =
data.leaf || type === 'leaf'
? props.curCanvasType === 'dataV'
? '请输入数据大屏名称'
: '请输入仪表板名称'
: '请输入文件夹名称'
? t('visualization.screen')
: t('visualization.dashboard')
: t('visualization.folder')
placeholder.value = t('visualization.input_name_tips', [placeholderLabel])
filterText.value = ''
dialogTitle.value = getDialogTitle(exec) + ('rename' === exec ? optSource : '')
resourceFormNameLabel.value = (exec === 'move' ? '' : optSource) + '名称'
resourceFormNameLabel.value = (exec === 'move' ? '' : optSource) + t('visualization.name')
const request = { busiFlag: curCanvasType.value, leaf: false, weight: 7 }
if (['newFolder'].includes(exec)) {
resourceForm.name = ''
@ -226,17 +230,17 @@ const nodeClick = (data: BusiTreeNode) => {
const checkParent = params => {
if (params.pid !== 0 && !params.pid) {
ElMessage.error('请选择目标文件夹')
ElMessage.error(t('visualization.select_target_folder'))
return false
}
// 如果有搜索需要校验当前pName 是否包含关键字（解决先点击再搜索后，未点击搜索结果也可以移动的问题）
if (filterText.value && !resourceForm.pName.includes(filterText.value)) {
ElMessage.error('请选择目标文件夹')
ElMessage.error(t('visualization.select_target_folder'))
return false
}
// 点击后不能选择自身作为父ID
if (params.pid === params.id) {
ElMessage.warning('不能选择自身，请选择其他文件夹')
ElMessage.warning(t('visualization.select_target_tips'))
return
}
return true
@ -336,7 +340,7 @@ const emits = defineEmits(['finish'])
v-model="resourceForm.name"
/>
</el-form-item>
<el-form-item v-if="showPid" :label="'所属文件夹'" prop="pid">
<el-form-item v-if="showPid" :label="t('visualization.belong_folder')" prop="pid">
<el-tree-select
style="width: 100%"
@keydown.stop
@ -392,14 +396,16 @@ const emits = defineEmits(['finish'])
</el-tree>
<div v-if="searchEmpty" class="empty-search">
<img :src="nothingTree" />
<span>没有找到相关内容</span>
<span>{{ t('visualization.no_content') }}</span>
</div>
</div>
</div>
</el-form>
<template #footer>
<el-button secondary @click="resetForm()">取消 </el-button>
<el-button type="primary" @click="saveResource()">确认 </el-button>
<el-button secondary @click="resetForm()">{{ t('visualization.cancel') }} </el-button>
<el-button type="primary" @click="saveResource()"
>{{ t('visualization.confirm') }}
</el-button>
</template>
</el-dialog>
</template>

64
core/core-frontend/src/views/common/DeResourceTree.vue
View File

@ -76,7 +76,7 @@ const anyManage = ref(false)
const { curCanvasType, showPosition } = toRefs(props)
const resourceLabel =
curCanvasType.value === 'dataV' ? t('work_branch.big_data_screen') : t('work_branch.dashboard')
const newResourceLabel = '新建' + resourceLabel
const newResourceLabel = t('visualization.new') + resourceLabel
const selectedNodeKey = ref(null)
const filterText = ref(null)
const expandedArray = ref([])
@ -90,17 +90,17 @@ const state = reactive({
originResourceTree: [] as BusiTreeNode[],
folderMenuList: [
{
label: '移动到',
label: t('visualization.move_to'), //'移动到'
command: 'move',
svgName: dvMove
},
{
label: '重命名',
label: t('visualization.rename'), //'重命名'
command: 'rename',
svgName: dvRename
},
{
label: '删除',
label: t('visualization.delete'), // 删除
command: 'delete',
svgName: dvDelete,
divided: true
@ -108,20 +108,20 @@ const state = reactive({
],
sortType: [
{
label: '按时间升序',
label: t('visualization.time_asc'), //'按时间升序'
value: 'time_asc'
},
{
label: '按时间降序',
label: t('visualization.time_desc'), //'按时间降序'
value: 'time_desc'
},
{
label: '按名称升序',
label: t('visualization.name_asc'), //'按名称升序'
value: 'name_asc'
},
{
label: '按名称降序',
value: 'time_asc'
label: t('visualization.name_desc'), //'按名称降序'
value: 'name_desc'
}
],
templateCreatePid: 0
@ -136,7 +136,7 @@ const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIfra
const resourceTypeList = computed(() => {
const list = [
{
label: '空白新建',
label: t('work_branch.new_empty'), //'空白新建',
svgName: dvSvgType.value,
command: 'newLeaf'
},
@ -146,7 +146,7 @@ const resourceTypeList = computed(() => {
command: 'newFromTemplate'
},
{
label: '新建文件夹',
label: t('work_branch.new_folder'), //'新建文件夹'
divided: true,
svgName: dvFolder,
command: 'newFolder'
@ -162,22 +162,22 @@ const { handleDrop, allowDrop, handleDragStart } = treeDraggbleChart(
const menuList = computed(() => {
const list = [
{
label: '复制',
label: t('visualization.copy'), //'复制',
command: 'copy',
svgName: dvCopyDark
},
{
label: '移动到',
label: t('visualization.move_to'), //'移动到',
command: 'move',
svgName: dvMove
},
{
label: '重命名',
label: t('visualization.rename'), //'重命名',
command: 'rename',
svgName: dvRename
},
{
label: '删除',
label: t('visualization.delete'), //'删除',
command: 'delete',
svgName: dvDelete,
divided: true
@ -289,19 +289,17 @@ const emit = defineEmits(['nodeClick'])
const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
if (cmd === 'delete') {
const msg = data.leaf ? '' : '删除后，此文件夹下的所有资源都会被删除，请谨慎操作。'
ElMessageBox.confirm(
data.leaf ? '确定删除该' + resourceLabel + '吗？' : '确定删除该文件夹吗？',
{
confirmButtonType: 'danger',
type: 'warning',
tip: msg,
autofocus: false,
showClose: false
}
).then(() => {
const msg = data.leaf ? '' : t('visualization.delete_tips')
const tips_label = data.leaf ? resourceLabel : t('visualization.folder')
ElMessageBox.confirm(t('visualization.delete_tips', tips_label), {
confirmButtonType: 'danger',
type: 'warning',
tip: msg,
autofocus: false,
showClose: false
}).then(() => {
deleteLogic(data.id, curCanvasType.value).then(() => {
ElMessage.success('删除成功')
ElMessage.success(t('visualization.delete_success'))
getTree()
})
})
@ -477,20 +475,20 @@ const getDefaultExpandedKeys = () => {
const sortList = [
{
name: '按创建时间升序',
name: t('visualization.time_asc'),
value: 'time_asc'
},
{
name: '按创建时间降序',
name: t('visualization.time_desc'),
value: 'time_desc',
divided: true
},
{
name: '按照名称升序',
name: t('visualization.name_asc'),
value: 'name_asc'
},
{
name: '按照名称降序',
name: t('visualization.name_desc'),
value: 'name_desc'
}
]
@ -556,7 +554,7 @@ defineExpose({
<div class="icon-methods" v-show="showPosition === 'preview'">
<span class="title"> {{ resourceLabel }} </span>
<div v-if="rootManage" class="flex-align-center">
<el-tooltip content="新建文件夹" placement="top" effect="dark">
<el-tooltip :content="t('work_branch.new_folder')" placement="top" effect="dark">
<el-icon
class="custom-icon btn"
style="margin-right: 20px"
@ -579,7 +577,7 @@ defineExpose({
<el-icon :class="`handle-icon color-${curCanvasType}`">
<Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
</el-icon>
空白新建
{{ t('work_branch.new_empty') }}
</el-dropdown-item>
<el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
<el-icon class="handle-icon">

24
core/core-frontend/src/views/common/MultiplexingCanvas.vue
View File

@ -4,7 +4,7 @@
size="90%"
v-model="dialogShow"
trigger="click"
title="复用"
:title="t('visualization.multiplexing')"
custom-class="custom-drawer"
>
<dashboard-preview-show
@ -24,10 +24,10 @@
<template #footer>
<el-row class="multiplexing-footer">
<el-col class="adapt-count">
<span>已选 {{ selectComponentCount }} 项</span>
<span>{{ (t('visualization.component_style'), [selectComponentCount]) }}</span>
</el-col>
<el-col class="adapt-select">
<span class="adapt-text"> 组件样式： </span>
<span class="adapt-text">{{ t('visualization.component_style') }} ： </span>
<el-select
style="width: 120px"
v-model="multiplexingStyleAdapt"
@ -42,13 +42,15 @@
/>
</el-select>
</el-col>
<el-button class="close-button" @click="dialogShow = false">关闭</el-button>
<el-button class="close-button" @click="dialogShow = false">{{
t('visualization.close')
}}</el-button>
<el-button
type="primary"
:disabled="!selectComponentCount"
class="confirm-button"
@click="saveMultiplexing"
>复用</el-button
>{{ t('visualization.multiplexing') }}</el-button
>
</el-row>
</template>
@ -63,22 +65,22 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import PreviewShow from '@/views/data-visualization/PreviewShow.vue'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const dialogShow = ref(false)
const copyStore = copyStoreWithOut()
const multiplexingPreviewShowRef = ref(null)
const { multiplexingStyleAdapt, curMultiplexingComponents } = storeToRefs(dvMainStore)
const curDvType = ref('dashboard')
const { t } = useI18n()
const selectComponentCount = computed(() => Object.keys(curMultiplexingComponents.value).length)
const state = reactive({
copyOptions: [
{ label: '适应新主题', value: true },
{ label: '保持源样式', value: false }
{ label: t('visualization.adapt_new_subject'), value: true },
{ label: t('visualization.keep_subject'), value: false }
]
})
const curDvType = ref('dashboard')
const selectComponentCount = computed(() => Object.keys(curMultiplexingComponents.value).length)
const dialogInit = (dvType = 'dashboard') => {
curDvType.value = dvType
dialogShow.value = true

10
core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
View File

@ -19,6 +19,7 @@ import { ElMessage } from 'element-plus-secondary'
import AppExportForm from '@/components/de-app/AppExportForm.vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useI18n } from '@/hooks/web/useI18n'
const userStore = useUserStoreWithOut()
const userName = computed(() => userStore.getName)
@ -44,6 +45,7 @@ const state = reactive({
const { fullscreenFlag, canvasViewDataInfo } = storeToRefs(dvMainStore)
const { width, node } = useMoveLine('DASHBOARD')
const { t } = useI18n()
const props = defineProps({
showPosition: {
@ -137,7 +139,7 @@ const downloadAsAppTemplate = downloadType => {
const downLoadToAppPre = () => {
const result = checkTemplate()
if (result && result.length > 0) {
ElMessage.warning(`当前仪表板中[${result}]属于模版图表，无法导出，请先设置数据集！`)
ElMessage.warning(t('visualization.export_tips', [result]))
} else {
appExportFormRef.value.init({
appName: state.dvInfo.name,
@ -290,15 +292,15 @@ defineExpose({
</div>
</template>
<template v-else-if="hasTreeData && mounted">
<empty-background description="请在左侧选择仪表板" img-type="select" />
<empty-background :description="t('visualization.preview_select_tips')" img-type="select" />
</template>
<template v-else-if="mounted">
<empty-background description="暂无仪表板" img-type="none">
<empty-background :description="t('visualization.have_none_resource')" img-type="none">
<el-button v-if="rootManage && !isDataEaseBi" @click="createNew" type="primary">
<template #icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
{{ $t('commons.create') }}{{ $t('chart.dashboard') }}
{{ t('commons.create') }}{{ t('chart.dashboard') }}
</el-button>
</empty-background>
</template>

6
core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
View File

@ -94,7 +94,7 @@
class="image-hint"
:class="`image-hint_${themes}`"
>
支持JPG、PNG、GIF、SVG，大小不超过 1M
{{ t('visualization.pic_import_tips', ['1M']) }}
</span>
<el-button
size="small"
@ -104,7 +104,7 @@
@click="goFile"
:disabled="!canvasStyleData.mobileSetting.backgroundImageEnable"
>
重新上传
{{ t('visualization.re_upload') }}
</el-button>
</el-row>
</div>
@ -159,7 +159,7 @@ const goFile = () => {
}
const sizeMessage = () => {
ElMessage.success('图片大小不符合')
ElMessage.success(t('visualization.pic_size_error'))
}
const reUpload = e => {

21
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

@ -16,6 +16,8 @@ import { debounce } from 'lodash-es'
import mobileHeader from '@/assets/img/mobile-header.png'
import ComponentStyleEditor from '@/views/common/ComponentStyleEditor.vue'
import { deepCopy } from '@/utils/utils'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
@ -191,7 +193,7 @@ const hanedleMessage = event => {
const saveCanvasWithCheckFromMobile = () => {
snapshotStore.resetStyleChangeTimes()
canvasSave(() => {
ElMessage.success('保存成功')
ElMessage.success(t('visualization.save_success'))
})
}
const loadCanvasData = () => {
@ -256,7 +258,7 @@ const handleBack = () => {
mobileStatusChange('mobilePatch', undefined)
return
}
ElMessageBox.confirm('当前的更改尚未保存，确定退出吗？', {
ElMessageBox.confirm(t('visualization.change_save_tips'), {
confirmButtonType: 'primary',
type: 'warning',
autofocus: false,
@ -314,11 +316,12 @@ const save = () => {
<div class="config-panel-foot"></div>
</div>
<div class="mobile-com-list">
<div class="config-mobile-sidebar">移动端配置</div>
<div class="config-mobile-sidebar">{{ t('visualization.mobile_config') }}</div>
<el-tabs size="small" v-model="activeCollapse">
<el-tab-pane label="可视化组件" name="com"> </el-tab-pane>
<el-tab-pane label="组件样式" name="componentStyle"> </el-tab-pane>
<el-tab-pane label="整体样式" name="style"> </el-tab-pane>
<el-tab-pane :label="t('visualization.visualization_component')" name="com"> </el-tab-pane>
<el-tab-pane :label="t('visualization.component_style')" name="componentStyle">
</el-tab-pane>
<el-tab-pane label="t('visualization.whole_style')" name="style"> </el-tab-pane>
</el-tabs>
<template v-if="!mobileLoading">
<div class="config-mobile-tab" v-show="activeCollapse === 'style'">
@ -352,9 +355,9 @@ const save = () => {
/>
</div>
<div class="mobile-com-mask" @click="addToMobile(item)">
<span v-show="item.component === 'DeStreamMedia'" style="color: #909399"
>IOS可能无法显示</span
>
<span v-show="item.component === 'DeStreamMedia'" style="color: #909399">{{
t('visualization.mobile_ios_tips')
}}</span>
</div>
<div class="pc-select-to-mobile" @click="addToMobile(item)" v-if="!mobileLoading"></div>
</div>

10
core/core-frontend/src/views/dashboard/index.vue
View File

@ -31,6 +31,7 @@ const interactiveStore = interactiveStoreWithOut()
import { useRequestStoreWithOut } from '@/store/modules/request'
import { usePermissionStoreWithOut } from '@/store/modules/permission'
import eventBus from '@/utils/eventBus'
import { useI18n } from '@/hooks/web/useI18n'
const embeddedStore = useEmbedded()
const { wsCache } = useCache()
const canvasCacheOutRef = ref(null)
@ -60,6 +61,7 @@ const {
const dataInitState = ref(false)
const appStore = useAppStoreWithOut()
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
const { t } = useI18n()
const state = reactive({
datasetTree: [],
@ -86,7 +88,9 @@ const otherEditorShow = computed(() => {
})
const otherEditorTitle = computed(() => {
return curComponent.value?.component === 'UserView' ? '属性' : curComponent.value?.label || '属性'
return curComponent.value?.component === 'UserView'
? t('visualization.attribute')
: curComponent.value?.label || t('visualization.attribute')
})
const viewEditorShow = computed(() => {
@ -292,7 +296,7 @@ onUnmounted(() => {
<dv-sidebar
v-show="!curComponent && !batchOptStatus"
:theme-info="'light'"
title="仪表板配置"
:title="t('visualization.dashboard_configuration')"
:width="420"
aside-position="right"
class="left-sidebar"
@ -309,7 +313,7 @@ onUnmounted(() => {
<dv-sidebar
v-if="batchOptStatus"
:theme-info="'light'"
title="批量设置样式"
:title="t('visualization.batch_style_set')"
:width="280"
aside-position="right"
class="left-sidebar"

13
core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
View File

@ -16,8 +16,10 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { getCanvasStyle } from '@/utils/style'
import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
import { iconChartMap } from '@/components/icon-group/chart-list'
import { useI18n } from '@/hooks/web/useI18n'
const dvMainStore = dvMainStoreWithOut()
const viewShow = ref(true)
const { t } = useI18n()
const props = defineProps({
canvasStyleData: {
@ -160,14 +162,15 @@ onBeforeMount(() => {
<el-row class="tree-head">
<span class="head-text">选择组件</span>
<span class="head-filter"
>仅看已选 <el-switch size="small" v-model="state.showSelected" />
>{{ t('visualization.show_selected_only') }}
<el-switch size="small" v-model="state.showSelected" />
</span>
</el-row>
<el-tree
class="custom-tree-multiplex"
menu
ref="multiplexInfoTree"
:empty-text="'暂无可用组件'"
:empty-text="t('visualization.no_available_component')"
:filter-node-method="filterNodeMethod"
:data="curMultiplexTargetComponentsInfo"
node-key="targetViewId"
@ -215,7 +218,11 @@ onBeforeMount(() => {
:dv-info="dvInfo"
:canvas-view-info="canvasViewInfo"
/>
<empty-background v-else description="当前未选择组件" img-type="select" />
<empty-background
v-else
:description="t('visualization.no_selected_component')"
img-type="select"
/>
</div>
</div>
</el-col>

2
core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
View File

@ -211,7 +211,7 @@ defineExpose({
:download-status="downloadStatus"
:show-pop-bar="true"
></de-preview>
<empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
<empty-background v-if="!state.initState" :description="t('visualization.no_params_tips')" img-type="noneWhite" />
</div>
<XpackComponent
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="

6
core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
View File

@ -174,7 +174,11 @@ defineExpose({
:is-selector="props.isSelector"
></de-preview>
</div>
<empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
<empty-background
v-if="!state.initState"
:description="t('visualization.no_params_tips')"
img-type="noneWhite"
/>
<XpackComponent
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
@loaded="XpackLoaded"

16
core/core-frontend/src/views/data-visualization/PreviewHead.vue
View File

@ -114,7 +114,7 @@ const initOpenHandler = newWindow => {
<el-tooltip
effect="dark"
:content="favorited ? '取消收藏' : t('visualization.store')"
:content="favorited ? t('visualization.cancel_store') : t('visualization.store')"
placement="top"
>
<el-icon
@ -132,7 +132,9 @@ const initOpenHandler = newWindow => {
</el-tooltip>
<el-divider style="margin: 0 16px 0 7px" direction="vertical" />
<div class="create-area flex-align-center">
<span style="line-height: 22px">创建人:{{ dvInfo.creatorName }}</span>
<span style="line-height: 22px"
>{{ t('visualization.creator') }}:{{ dvInfo.creatorName }}</span
>
<el-popover show-arrow :offset="8" placement="bottom" width="400" trigger="hover">
<template #reference>
<el-icon class="info-tips"
@ -151,7 +153,7 @@ const initOpenHandler = newWindow => {
<template #icon>
<icon name="icon_pc_fullscreen"><icon_pc_fullscreen class="svg-icon" /></icon>
</template>
全屏</el-button
{{ t('visualization.fullscreen') }}</el-button
>
<el-button secondary @click="preview()">
<template #icon>
@ -169,7 +171,7 @@ const initOpenHandler = newWindow => {
<template #icon>
<icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
</template>
编辑</el-button
{{ t('visualization.edit') }}</el-button
>
<el-dropdown trigger="click">
<el-icon class="head-more-icon">
@ -177,7 +179,9 @@ const initOpenHandler = newWindow => {
</el-icon>
<template #dropdown>
<el-dropdown-menu style="width: 130px">
<el-dropdown-item icon="Refresh" @click="reload()">刷新数据 </el-dropdown-item>
<el-dropdown-item icon="Refresh" @click="reload()"
>{{ t('visualization.refresh_data') }}
</el-dropdown-item>
<el-dropdown
style="width: 100%; overflow: hidden"
trigger="hover"
@ -186,7 +190,7 @@ const initOpenHandler = newWindow => {
>
<div class="ed-dropdown-menu__item flex-align-center icon">
<el-icon><Download /></el-icon>
导出为&nbsp;&nbsp;&nbsp;&nbsp;
{{ t('visualization.export_as') }}&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon><ArrowRight /></el-icon>
</div>
<template #dropdown>

8
core/core-frontend/src/views/data-visualization/PreviewShow.vue
View File

@ -21,9 +21,11 @@ import { ElMessage } from 'element-plus-secondary'
import { useEmitt } from '@/hooks/web/useEmitt'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useI18n } from '@/hooks/web/useI18n'
const userStore = useUserStoreWithOut()
const userName = computed(() => userStore.getName)
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, canvasViewDataInfo } = storeToRefs(dvMainStore)
@ -300,15 +302,15 @@ onBeforeMount(() => {
</div>
</template>
<template v-else-if="hasTreeData && mounted">
<empty-background description="请在左侧选择数据大屏" img-type="select" />
<empty-background :description="t('visualization.select_screen_tips')" img-type="select" />
</template>
<template v-else-if="mounted">
<empty-background description="暂无数据大屏" img-type="none">
<empty-background :description="t('visualization.no_screen')" img-type="none">
<el-button v-if="rootManage && !isDataEaseBi" @click="createNew" type="primary">
<template #icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
{{ $t('commons.create') }}{{ $t('work_branch.big_data_screen') }}
{{ t('commons.create') }}{{ t('work_branch.big_data_screen') }}
</el-button>
</empty-background>
</template>

12
core/core-frontend/src/views/data-visualization/index.vue
View File

@ -46,10 +46,12 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
import { usePermissionStoreWithOut } from '@/store/modules/permission'
import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
import { useI18n } from '@/hooks/web/useI18n'
const interactiveStore = interactiveStoreWithOut()
const embeddedStore = useEmbedded()
const { wsCache } = useCache()
const dvPreviewRef = ref(null)
const { t } = useI18n()
const eventCheck = e => {
if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
@ -486,7 +488,7 @@ eventBus.on('tabSort', tabSort)
>
<!-- 左侧组件列表 -->
<dv-sidebar
:title="'图层管理'"
:title="t('visualization.layer_management')"
:width="180"
:scroll-width="3"
:aside-position="'left'"
@ -545,7 +547,9 @@ eventBus.on('tabSort', tabSort)
:base-width="state.baseWidth"
>
<template v-slot:canvasDragTips>
<div class="canvas-drag-tip">按住空格可拖动画布</div>
<div class="canvas-drag-tip">
{{ t('visualization.hold_canvas_tips') }}按住空格可拖动画布
</div>
</template>
</canvas-core>
</div>
@ -571,7 +575,7 @@ eventBus.on('tabSort', tabSort)
</dv-sidebar>
<dv-sidebar
v-show="canvasPropertiesShow"
:title="'大屏配置'"
:title="t('visualization.screen_config')"
:width="240"
:side-name="'canvas'"
:aside-position="'right'"
@ -595,7 +599,7 @@ eventBus.on('tabSort', tabSort)
<dv-sidebar
v-if="batchOptStatus"
:theme-info="'dark'"
title="批量设置样式"
:title="t('visualization.batch_style_set')"
:width="280"
aside-position="right"
class="left-sidebar"