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

Merge pull request #12231 from dataease/pr@dev-v2_dzz

Browse Source 
Pr@dev v2 dzz
This commit is contained in:
dataeaseShu 2024-09-14 16:42:36 +08:00 committed by GitHub
commit c0b483094a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
182 changed files with 3114 additions and 3351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/config/dev.ts
View File

@ -8,7 +8,7 @@ export default {
},
// 使用 proxy 实例
'/api': {
target: 'http://localhost:8100',
target: 'https://de2.fit2cloud.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, 'de2api')
}

3
core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
import { ref } from 'vue'
import { COLOR_CASES, COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { useI18n } from '@/hooks/web/useI18n'
@ -99,7 +100,7 @@ const resetCustomColor = () => {
</div>
<el-button @click="changeShowCustom" style="margin-left: 8px" size="default" plain>
<template #icon>
<icon name="icon_admin_outlined"></icon>
<icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></icon>
</template>
</el-button>
</div>

3
core/core-frontend/src/components/column-list/src/ColumnList.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import iconSetting from '@/assets/svg/icon-setting.svg'
import { reactive, ref, toRaw } from 'vue'
import { Icon } from '@/components/icon-custom'
import {
@ -56,7 +57,7 @@ const handleCheckAllChange = (val: CheckboxValueType) => {
<el-button secondary>
<template #icon>
<el-icon>
<Icon name="icon-setting"></Icon>
<Icon name="icon-setting"><iconSetting class="svg-icon" /></Icon>
</el-icon>
</template>
{{ $t('component.columnList') }}

36
core/core-frontend/src/components/dashboard/DbComponentToolBar.vue
View File

@ -1,36 +0,0 @@
<script setup lang="ts">
import ComponentGroup from '../visualization/ComponentGroup.vue'
import UserViewGroup from '../../custom-component/component-group/UserViewGroup.vue'
import TextGroup from '@/custom-component/component-group/TextGroup.vue'
import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
</script>
<template>
<el-row class="custom-main">
<component-group :base-width="300" icon-name="chart_pie" title="图表">
<user-view-group></user-view-group>
</component-group>
<component-group :base-width="148" icon-name="other_text" title="文本">
<text-group></text-group>
</component-group>
<component-group icon-name="other_media" title="媒体">
<media-group></media-group>
</component-group>
<component-group icon-name="other_material" title="素材">
<div>this is material test</div>
</component-group>
<component-group icon-name="other_setting" title="参数">
<div>setting</div>
</component-group>
</el-row>
</template>
<style lang="less">
.custom-main {
display: flex;
width: 100%;
height: @component-toolbar-height;
background-color: rgba(37, 45, 54, 1);
border-bottom: 1px solid rgba(85, 85, 85, 1);
color: #fff;
}
</style>

50
core/core-frontend/src/components/dashboard/DbToolbar.vue
View File

@ -1,4 +1,20 @@
<script setup lang="ts">
import dvBatch from '@/assets/svg/dv-batch.svg'
import dvDashboard from '@/assets/svg/dv-dashboard.svg'
import dvFilter from '@/assets/svg/dv-filter.svg'
import dvMedia from '@/assets/svg/dv-media.svg'
import dvMoreCom from '@/assets/svg/dv-more-com.svg'
import dvTab from '@/assets/svg/dv-tab.svg'
import dvText from '@/assets/svg/dv-text.svg'
import dvView from '@/assets/svg/dv-view.svg'
import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
import icon_phone_outlined from '@/assets/svg/icon_phone_outlined.svg'
import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
import icon_pc_fullscreen from '@/assets/svg/icon_pc_fullscreen.svg'
import dvPreviewOuter from '@/assets/svg/dv-preview-outer.svg'
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
import eventBus from '@/utils/eventBus'
import { useEmbedded } from '@/store/modules/embedded'
@ -443,7 +459,9 @@ const initOpenHandler = newWindow => {
</template>
<template v-else>
<el-icon v-if="!batchOptStatus" class="custom-el-icon back-icon" @click="backToMain()">
<Icon class="toolbar-icon" name="icon_left_outlined" />
<Icon name="icon_left_outlined"
><icon_left_outlined class="svg-icon toolbar-icon"
/></Icon>
</el-icon>
<div class="left-area" v-if="editMode === 'edit' && !batchOptStatus">
<span id="canvas-name" class="name-area" @dblclick="editCanvasName">
@ -457,7 +475,7 @@ const initOpenHandler = newWindow => {
:disabled="snapshotIndex < 1"
@click="undo()"
>
<Icon name="icon_undo_outlined"></Icon>
<Icon name="icon_undo_outlined"><icon_undo_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
@ -469,7 +487,7 @@ const initOpenHandler = newWindow => {
}"
@click="redo()"
>
<Icon name="icon_redo_outlined"></Icon>
<Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</div>
@ -484,7 +502,7 @@ const initOpenHandler = newWindow => {
:base-width="410"
:show-split-line="true"
is-label
:icon-name="'dv-view'"
:icon-name="dvView"
themes="light"
title="图表"
>
@ -495,7 +513,7 @@ const initOpenHandler = newWindow => {
:show-split-line="true"
is-label
themes="light"
icon-name="dv-filter"
:icon-name="dvFilter"
title="查询组件"
>
<query-group themes="light" :dv-model="dvModel"></query-group>
@ -504,7 +522,7 @@ const initOpenHandler = newWindow => {
is-label
themes="light"
:base-width="115"
icon-name="dv-text"
:icon-name="dvText"
title="富文本"
>
<text-group themes="light" :dv-model="dvModel"></text-group>
@ -514,12 +532,12 @@ const initOpenHandler = newWindow => {
themes="light"
placement="bottom"
:base-width="315"
icon-name="dv-media"
:icon-name="dvMedia"
title="媒体"
>
<media-group themes="light" :dv-model="dvModel"></media-group>
</component-group>
<component-group themes="light" is-label :base-width="115" icon-name="dv-tab" title="Tab">
<component-group themes="light" is-label :base-width="115" :icon-name="dvTab" title="Tab">
<tabs-group themes="light" :dv-model="dvModel"></tabs-group>
</component-group>
<component-group
@ -527,13 +545,13 @@ const initOpenHandler = newWindow => {
show-split-line
is-label
:base-width="115"
icon-name="dv-more-com"
:icon-name="dvMoreCom"
title="更多"
>
<db-more-com-group themes="light" :dv-model="dvModel"></db-more-com-group>
</component-group>
<component-button-label
icon-name="icon_copy_filled"
:icon-name="icon_copy_filled"
title="复用"
is-label
@customClick="multiplexingCanvasOpen"
@ -547,14 +565,14 @@ const initOpenHandler = newWindow => {
<component-button
tips="外部参数设置"
@custom-click="openOuterParamsSet"
icon-name="icon_params_setting"
:icon-name="icon_params_setting"
/>
</el-tooltip>
<el-tooltip effect="dark" content="批量操作" placement="bottom">
<component-button
tips="批量操作"
@custom-click="batchOptStatusChange(true)"
icon-name="dv-batch"
:icon-name="dvBatch"
/>
</el-tooltip>
@ -562,7 +580,7 @@ const initOpenHandler = newWindow => {
<component-button
tips="仪表板配置"
@custom-click="openDataBoardSetting"
icon-name="dv-dashboard"
:icon-name="dvDashboard"
/>
</el-tooltip>
<div class="divider"></div>
@ -570,7 +588,7 @@ const initOpenHandler = newWindow => {
<component-button
tips="切换至移动端布局"
@custom-click="openMobileSetting"
icon-name="icon_phone_outlined"
:icon-name="icon_phone_outlined"
/>
</el-tooltip>
</template>
@ -583,13 +601,13 @@ const initOpenHandler = newWindow => {
<el-dropdown-menu class="drop-style">
<el-dropdown-item @click="previewInner">
<el-icon style="margin-right: 8px; font-size: 16px">
<Icon name="icon_pc_fullscreen" />
<Icon name="icon_pc_fullscreen"><icon_pc_fullscreen class="svg-icon" /></Icon>
</el-icon>
全屏预览
</el-dropdown-item>
<el-dropdown-item @click="previewOuter()">
<el-icon style="margin-right: 8px; font-size: 16px">
<Icon name="dv-preview-outer" />
<Icon name="dv-preview-outer"><dvPreviewOuter class="svg-icon" /></Icon>
</el-icon>
新页面预览
</el-dropdown-item>

25
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
View File

@ -14,7 +14,9 @@
@click="handleHorizontalChange('left')"
class="hover-icon"
>
<Icon name="icon_left-align_outlined" />
<Icon name="icon_left-align_outlined"
><icon_leftAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" placement="top">
@ -26,7 +28,9 @@
@click="handleHorizontalChange('center')"
class="hover-icon"
>
<Icon name="icon_horizontal-align_outlined" />
<Icon name="icon_horizontal-align_outlined"
><icon_horizontalAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" placement="top">
@ -38,7 +42,9 @@
@click="handleHorizontalChange('right')"
class="hover-icon"
>
<Icon name="icon_right-align_outlined" />
<Icon name="icon_right-align_outlined"
><icon_rightAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
</el-form-item>
@ -54,7 +60,9 @@
@click="handleHorizontalChange('vertical', 'layout')"
class="hover-icon"
>
<Icon name="icon_title-top-align_outlined" />
<Icon name="icon_title-top-align_outlined"
><icon_titleTopAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" placement="top">
@ -66,7 +74,9 @@
@click="handleHorizontalChange('horizontal', 'layout')"
class="hover-icon"
>
<Icon name="icon_title-left-align_outlined" />
<Icon name="icon_title-left-align_outlined"
><icon_titleLeftAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
</el-form-item>
@ -145,6 +155,11 @@
</template>
<script setup lang="ts">
import icon_leftAlign_outlined from '@/assets/svg/icon_left-align_outlined.svg'
import icon_horizontalAlign_outlined from '@/assets/svg/icon_horizontal-align_outlined.svg'
import icon_rightAlign_outlined from '@/assets/svg/icon_right-align_outlined.svg'
import icon_titleTopAlign_outlined from '@/assets/svg/icon_title-top-align_outlined.svg'
import icon_titleLeftAlign_outlined from '@/assets/svg/icon_title-left-align_outlined.svg'
import { onMounted, reactive, computed } from 'vue'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'

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

@ -90,7 +90,7 @@
style="margin-left: 4px"
:class="{ 'hint-icon--dark': themes === 'dark' }"
>
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</el-form-item>
@ -145,7 +145,7 @@
</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</span>
@ -184,6 +184,7 @@
</template>
<script setup lang="ts">
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'

21
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
View File

@ -42,7 +42,7 @@
@click="checkBold"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -57,7 +57,7 @@
@click="checkItalic"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -74,7 +74,9 @@
@click="setPosition('left')"
>
<el-icon>
<Icon name="icon_left-alignment_outlined" />
<Icon name="icon_left-alignment_outlined"
><icon_leftAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -88,7 +90,9 @@
@click="setPosition('center')"
>
<el-icon>
<Icon name="icon_center-alignment_outlined" />
<Icon name="icon_center-alignment_outlined"
><icon_centerAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -102,7 +106,9 @@
@click="setPosition('right')"
>
<el-icon>
<Icon name="icon_right-alignment_outlined" />
<Icon name="icon_right-alignment_outlined"
><icon_rightAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -112,6 +118,11 @@
</template>
<script lang="ts" setup>
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
import { computed, reactive, ref } from 'vue'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'

5
core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
View File

@ -16,7 +16,9 @@
width="172"
height="79"
/>
<Icon v-else name="dv-no-img" style="width: 172px; height: 79px" />
<Icon v-else name="dv-no-img"
><dvNoImg class="svg-icon" style="width: 172px; height: 79px"
/></Icon>
</div>
<div class="title-main">
<div class="title-area">
@ -44,6 +46,7 @@
</template>
<script setup lang="ts">
import dvNoImg from '@/assets/svg/dv-no-img.svg'
import { computed, onMounted, reactive, toRefs } from 'vue'
import { imgUrlTrans } from '@/utils/imgUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'

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

@ -1,4 +1,5 @@
<script setup lang="tsx">
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { storeToRefs } from 'pinia'
@ -125,7 +126,7 @@ onMounted(() => {
<div>预览时生效</div>
</template>
<el-icon class="hint-icon--dark">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
<el-select

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

@ -1,4 +1,7 @@
<script setup lang="ts">
import dvReposition from '@/assets/svg/dv-reposition.svg'
import dvMax from '@/assets/svg/dv-max.svg'
import dvMin from '@/assets/svg/dv-min.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
@ -124,7 +127,7 @@ onUnmounted(() => {
/>
<el-icon @click="scaleDecrease(1)" class="hover-icon-custom" style="margin-right: 12px">
<Icon name="dv-min"></Icon
<Icon name="dv-min"><dvMin class="svg-icon"></dvMin></Icon
></el-icon>
<el-slider
style="width: 100px; margin-right: 12px"
@ -136,12 +139,12 @@ onUnmounted(() => {
size="small"
/>
<el-icon @click="scaleIncrease(1)" class="hover-icon-custom">
<Icon name="dv-max"></Icon
<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-icon @click="reposition" class="hover-icon-custom" style="margin-right: 12px">
<Icon name="dv-reposition"></Icon
<Icon name="dv-reposition"><dvReposition class="svg-icon"></dvReposition></Icon
></el-icon>
</el-tooltip>
</div>

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

@ -1,7 +1,19 @@
<script setup lang="ts">
import dvFilter from '@/assets/svg/dv-filter.svg'
import dvMaterial from '@/assets/svg/dv-material.svg'
import dvMedia from '@/assets/svg/dv-media.svg'
import dvMoreCom from '@/assets/svg/dv-more-com.svg'
import dvTab from '@/assets/svg/dv-tab.svg'
import dvText from '@/assets/svg/dv-text.svg'
import dvView from '@/assets/svg/dv-view.svg'
import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
import eventBus from '@/utils/eventBus'
import { ref, nextTick, computed, toRefs, onMounted } from 'vue'
import { ref, nextTick, computed, toRefs } from 'vue'
import { useEmbedded } from '@/store/modules/embedded'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@ -276,7 +288,9 @@ const fullScreenPreview = () => {
</template>
<template v-else>
<el-icon class="custom-el-icon back-icon" @click="backToMain()">
<Icon class="toolbar-icon" name="icon_left_outlined" />
<Icon name="icon_left_outlined"
><icon_left_outlined class="svg-icon toolbar-icon"
/></Icon>
</el-icon>
<div class="left-area">
<span id="dv-canvas-name" class="name-area" @dblclick="editCanvasName">
@ -289,7 +303,7 @@ const fullScreenPreview = () => {
:class="{ 'toolbar-icon-disabled': snapshotIndex < 1 }"
@click="undo()"
>
<Icon name="icon_undo_outlined"></Icon>
<Icon name="icon_undo_outlined"><icon_undo_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
<el-tooltip effect="ndark" :content="$t('commons.reduction')" placement="bottom">
@ -300,7 +314,7 @@ const fullScreenPreview = () => {
}"
@click="redo()"
>
<Icon name="icon_redo_outlined"></Icon>
<Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</div>
@ -310,7 +324,7 @@ const fullScreenPreview = () => {
show-split-line
is-label
:base-width="410"
icon-name="dv-view"
:icon-name="dvView"
title="图表"
>
<user-view-group></user-view-group>
@ -319,40 +333,40 @@ const fullScreenPreview = () => {
:base-width="115"
:show-split-line="true"
is-label
icon-name="dv-filter"
:icon-name="dvFilter"
title="查询组件"
>
<query-group :dv-model="dvModel"></query-group>
</component-group>
<component-group is-label :base-width="215" icon-name="dv-text" title="文本">
<component-group is-label :base-width="215" :icon-name="dvText" title="文本">
<text-group></text-group>
</component-group>
<component-group
is-label
placement="bottom"
:base-width="315"
icon-name="dv-media"
:icon-name="dvMedia"
title="媒体"
>
<media-group></media-group>
</component-group>
<component-group is-label :base-width="115" icon-name="dv-tab" title="Tab">
<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="dv-more-com" title="更多">
<component-group is-label :base-width="215" :icon-name="dvMoreCom" title="更多">
<more-com-group></more-com-group>
</component-group>
<component-group
is-label
:base-width="410"
icon-name="dv-material"
:icon-name="dvMaterial"
:show-split-line="true"
title="素材"
>
<common-group></common-group>
</component-group>
<component-button-label
icon-name="icon_copy_filled"
:icon-name="icon_copy_filled"
title="复用"
is-label
@customClick="multiplexingCanvasOpen"
@ -365,7 +379,7 @@ const fullScreenPreview = () => {
v-show="editMode === 'edit'"
tips="外部参数设置"
@custom-click="openOuterParamsSet"
icon-name="icon_params_setting"
:icon-name="icon_params_setting"
/>
</el-tooltip>
<div v-show="editMode === 'edit'" class="divider"></div>

133
core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
View File

@ -1,4 +1,64 @@
<script lang="ts" setup>
import bar from '@/assets/svg/bar.svg'
import dbMoreWeb from '@/assets/svg/db-more-web.svg'
import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'
import dvPictureReal from '@/assets/svg/dv-picture-real.svg'
import dvTab from '@/assets/svg/dv-tab.svg'
import iconStream from '@/assets/svg/icon-stream.svg'
import iconVideo from '@/assets/svg/icon-video.svg'
import icon_graphical from '@/assets/svg/icon_graphical.svg'
import icon_search from '@/assets/svg/icon_search.svg'
import other_material_board from '@/assets/svg/other_material_board.svg'
import other_material_icon from '@/assets/svg/other_material_icon.svg'
import scrollText from '@/assets/svg/scroll-text.svg'
import areaOrigin from '@/assets/svg/area-origin.svg'
import areaStackOrigin from '@/assets/svg/area-stack-origin.svg'
import barGroupOrigin from '@/assets/svg/bar-group-origin.svg'
import barGroupStackOrigin from '@/assets/svg/bar-group-stack-origin.svg'
import barHorizontalOrigin from '@/assets/svg/bar-horizontal-origin.svg'
import barOrigin from '@/assets/svg/bar-origin.svg'
import barRangeOrigin from '@/assets/svg/bar-range-origin.svg'
import barStackHorizontalOrigin from '@/assets/svg/bar-stack-horizontal-origin.svg'
import barStackOrigin from '@/assets/svg/bar-stack-origin.svg'
import bidirectionalBarOrigin from '@/assets/svg/bidirectional-bar-origin.svg'
import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
import funnelOrigin from '@/assets/svg/funnel-origin.svg'
import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
import heatMapOrigin from '@/assets/svg/heat-map-origin.svg'
import indicatorOrigin from '@/assets/svg/indicator-origin.svg'
import lineOrigin from '@/assets/svg/line-origin.svg'
import liquidOrigin from '@/assets/svg/liquid-origin.svg'
import mapOrigin from '@/assets/svg/map-origin.svg'
import percentageBarStackHorizontalOrigin from '@/assets/svg/percentage-bar-stack-horizontal-origin.svg'
import percentageBarStackOrigin from '@/assets/svg/percentage-bar-stack-origin.svg'
import pieDonutOrigin from '@/assets/svg/pie-donut-origin.svg'
import pieDonutRoseOrigin from '@/assets/svg/pie-donut-rose-origin.svg'
import pieOrigin from '@/assets/svg/pie-origin.svg'
import pieRoseOrigin from '@/assets/svg/pie-rose-origin.svg'
import progressBarOrigin from '@/assets/svg/progress-bar-origin.svg'
import quadrantOrigin from '@/assets/svg/quadrant-origin.svg'
import radarOrigin from '@/assets/svg/radar-origin.svg'
import richTextOrigin from '@/assets/svg/rich-text-origin.svg'
import sankeyOrigin from '@/assets/svg/sankey-origin.svg'
import scatterOrigin from '@/assets/svg/scatter-origin.svg'
import stockLineOrigin from '@/assets/svg/stock-line-origin.svg'
import symbolicMapOrigin from '@/assets/svg/symbolic-map-origin.svg'
import tableInfoOrigin from '@/assets/svg/table-info-origin.svg'
import tableNormalOrigin from '@/assets/svg/table-normal-origin.svg'
import tablePivotOrigin from '@/assets/svg/table-pivot-origin.svg'
import treemapOrigin from '@/assets/svg/treemap-origin.svg'
import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'
import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'
import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
import dvShow from '@/assets/svg/dv-show.svg'
import dvUnlock from '@/assets/svg/dv-unlock.svg'
import dvLock from '@/assets/svg/dv-lock.svg'
import dvMore from '@/assets/svg/dv-more.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
@ -114,12 +174,69 @@ const dragOnEnd = ({ oldIndex, newIndex }) => {
dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
}
const iconMap = {
bar: bar,
'db-more-web': dbMoreWeb,
'dv-more-time-clock': dvMoreTimeClock,
'dv-picture-real': dvPictureReal,
'dv-tab': dvTab,
'icon-stream': iconStream,
'icon-video': iconVideo,
icon_graphical: icon_graphical,
icon_search: icon_search,
other_material_board: other_material_board,
other_material_icon: other_material_icon,
'scroll-text': scrollText,
'area-origin': areaOrigin,
'area-stack-origin': areaStackOrigin,
'bar-group-origin': barGroupOrigin,
'bar-group-stack-origin': barGroupStackOrigin,
'bar-horizontal-origin': barHorizontalOrigin,
'bar-origin': barOrigin,
'bar-range-origin': barRangeOrigin,
'bar-stack-horizontal-origin': barStackHorizontalOrigin,
'bar-stack-origin': barStackOrigin,
'bidirectional-bar-origin': bidirectionalBarOrigin,
'bubble-map-origin': bubbleMapOrigin,
'chart-mix-group-origin': chartMixGroupOrigin,
'chart-mix-origin': chartMixOrigin,
'chart-mix-stack-origin': chartMixStackOrigin,
'flow-map-origin': flowMapOrigin,
'funnel-origin': funnelOrigin,
'gauge-origin': gaugeOrigin,
'heat-map-origin': heatMapOrigin,
'indicator-origin': indicatorOrigin,
'line-origin': lineOrigin,
'liquid-origin': liquidOrigin,
'map-origin': mapOrigin,
'percentage-bar-stack-horizontal-origin': percentageBarStackHorizontalOrigin,
'percentage-bar-stack-origin': percentageBarStackOrigin,
'pie-donut-origin': pieDonutOrigin,
'pie-donut-rose-origin': pieDonutRoseOrigin,
'pie-origin': pieOrigin,
'pie-rose-origin': pieRoseOrigin,
'progress-bar-origin': progressBarOrigin,
'quadrant-origin': quadrantOrigin,
'radar-origin': radarOrigin,
'rich-text-origin': richTextOrigin,
'sankey-origin': sankeyOrigin,
'scatter-origin': scatterOrigin,
'stock-line-origin': stockLineOrigin,
'symbolic-map-origin': symbolicMapOrigin,
'table-info-origin': tableInfoOrigin,
'table-normal-origin': tableNormalOrigin,
'table-pivot-origin': tablePivotOrigin,
'treemap-origin': treemapOrigin,
'waterfall-origin': waterfallOrigin,
'word-cloud-origin': wordCloudOrigin,
't-heatmap-origin': tHeatmapOrigin
}
const getIconName = item => {
if (item.component === 'UserView') {
const viewInfo = canvasViewInfo.value[item.id]
return `${viewInfo.type}-origin`
return iconMap[`${viewInfo.type}-origin`]
} else {
return item.icon
return iconMap[item.icon]
}
}
@ -183,7 +300,7 @@ const handleContextMenu = e => {
@click="onClick(transformIndex(index))"
>
<el-icon class="component-icon">
<Icon :name="getIconName(getComponent(index))"></Icon>
<Icon><component :is="getIconName(getComponent(index))"></component></Icon>
</el-icon>
<span
:id="`component-label-${getComponent(index)?.id}`"
@ -205,24 +322,24 @@ const handleContextMenu = e => {
v-show="!getComponent(index).isShow"
@click="showComponent"
>
<Icon name="dv-eye-close" class="opt-icon"></Icon>
<Icon name="dv-eye-close"><dvEyeClose class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-icon
class="component-base"
v-show="getComponent(index)?.isShow"
@click="hideComponent"
>
<Icon name="dv-show" class="opt-icon"></Icon>
<Icon name="dv-show"><dvShow class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-icon v-show="!getComponent(index)?.isLock" class="component-base" @click="lock">
<Icon class="opt-icon" name="dv-unlock"></Icon>
<Icon name="dv-unlock"><dvUnlock class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-icon
class="component-base component-icon-display"
v-show="getComponent(index)?.isLock"
@click="unlock"
>
<Icon name="dv-lock" class="opt-icon"></Icon>
<Icon name="dv-lock"><dvLock class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-dropdown
ref="dropdownMore"
@ -233,7 +350,7 @@ const handleContextMenu = e => {
>
<span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
<el-icon class="component-base">
<Icon name="dv-more" class="opt-icon"></Icon>
<Icon name="dv-more"><dvMore class="svg-icon opt-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>

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

@ -1,4 +1,66 @@
<script lang="ts" setup>
import bar from '@/assets/svg/bar.svg'
import dbMoreWeb from '@/assets/svg/db-more-web.svg'
import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'
import dvPictureReal from '@/assets/svg/dv-picture-real.svg'
import dvTab from '@/assets/svg/dv-tab.svg'
import iconStream from '@/assets/svg/icon-stream.svg'
import iconVideo from '@/assets/svg/icon-video.svg'
import icon_graphical from '@/assets/svg/icon_graphical.svg'
import icon_search from '@/assets/svg/icon_search.svg'
import other_material_board from '@/assets/svg/other_material_board.svg'
import other_material_icon from '@/assets/svg/other_material_icon.svg'
import scrollText from '@/assets/svg/scroll-text.svg'
import areaOrigin from '@/assets/svg/area-origin.svg'
import areaStackOrigin from '@/assets/svg/area-stack-origin.svg'
import barGroupOrigin from '@/assets/svg/bar-group-origin.svg'
import barGroupStackOrigin from '@/assets/svg/bar-group-stack-origin.svg'
import barHorizontalOrigin from '@/assets/svg/bar-horizontal-origin.svg'
import barOrigin from '@/assets/svg/bar-origin.svg'
import barRangeOrigin from '@/assets/svg/bar-range-origin.svg'
import barStackHorizontalOrigin from '@/assets/svg/bar-stack-horizontal-origin.svg'
import barStackOrigin from '@/assets/svg/bar-stack-origin.svg'
import bidirectionalBarOrigin from '@/assets/svg/bidirectional-bar-origin.svg'
import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
import funnelOrigin from '@/assets/svg/funnel-origin.svg'
import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
import heatMapOrigin from '@/assets/svg/heat-map-origin.svg'
import indicatorOrigin from '@/assets/svg/indicator-origin.svg'
import lineOrigin from '@/assets/svg/line-origin.svg'
import liquidOrigin from '@/assets/svg/liquid-origin.svg'
import mapOrigin from '@/assets/svg/map-origin.svg'
import percentageBarStackHorizontalOrigin from '@/assets/svg/percentage-bar-stack-horizontal-origin.svg'
import percentageBarStackOrigin from '@/assets/svg/percentage-bar-stack-origin.svg'
import pieDonutOrigin from '@/assets/svg/pie-donut-origin.svg'
import pieDonutRoseOrigin from '@/assets/svg/pie-donut-rose-origin.svg'
import pieOrigin from '@/assets/svg/pie-origin.svg'
import pieRoseOrigin from '@/assets/svg/pie-rose-origin.svg'
import progressBarOrigin from '@/assets/svg/progress-bar-origin.svg'
import quadrantOrigin from '@/assets/svg/quadrant-origin.svg'
import radarOrigin from '@/assets/svg/radar-origin.svg'
import richTextOrigin from '@/assets/svg/rich-text-origin.svg'
import sankeyOrigin from '@/assets/svg/sankey-origin.svg'
import scatterOrigin from '@/assets/svg/scatter-origin.svg'
import stockLineOrigin from '@/assets/svg/stock-line-origin.svg'
import symbolicMapOrigin from '@/assets/svg/symbolic-map-origin.svg'
import tableInfoOrigin from '@/assets/svg/table-info-origin.svg'
import tableNormalOrigin from '@/assets/svg/table-normal-origin.svg'
import tablePivotOrigin from '@/assets/svg/table-pivot-origin.svg'
import treemapOrigin from '@/assets/svg/treemap-origin.svg'
import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'
import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'
import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
import dvMore from '@/assets/svg/dv-more.svg'
import dvExpandDown from '@/assets/svg/dv-expand-down.svg'
import dvExpandRight from '@/assets/svg/dv-expand-right.svg'
import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
import dvShow from '@/assets/svg/dv-show.svg'
import dvUnlock from '@/assets/svg/dv-unlock.svg'
import dvLock from '@/assets/svg/dv-lock.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
@ -203,13 +265,69 @@ const dragOnEnd = ({ oldIndex, newIndex }) => {
dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
snapshotStore.recordSnapshotCache()
}
const iconMap = {
bar: bar,
'db-more-web': dbMoreWeb,
'dv-more-time-clock': dvMoreTimeClock,
'dv-picture-real': dvPictureReal,
'dv-tab': dvTab,
'icon-stream': iconStream,
'icon-video': iconVideo,
icon_graphical: icon_graphical,
icon_search: icon_search,
other_material_board: other_material_board,
other_material_icon: other_material_icon,
'scroll-text': scrollText,
'area-origin': areaOrigin,
'area-stack-origin': areaStackOrigin,
'bar-group-origin': barGroupOrigin,
'bar-group-stack-origin': barGroupStackOrigin,
'bar-horizontal-origin': barHorizontalOrigin,
'bar-origin': barOrigin,
'bar-range-origin': barRangeOrigin,
'bar-stack-horizontal-origin': barStackHorizontalOrigin,
'bar-stack-origin': barStackOrigin,
'bidirectional-bar-origin': bidirectionalBarOrigin,
'bubble-map-origin': bubbleMapOrigin,
'chart-mix-group-origin': chartMixGroupOrigin,
'chart-mix-origin': chartMixOrigin,
'chart-mix-stack-origin': chartMixStackOrigin,
'flow-map-origin': flowMapOrigin,
'funnel-origin': funnelOrigin,
'gauge-origin': gaugeOrigin,
'heat-map-origin': heatMapOrigin,
'indicator-origin': indicatorOrigin,
'line-origin': lineOrigin,
'liquid-origin': liquidOrigin,
'map-origin': mapOrigin,
'percentage-bar-stack-horizontal-origin': percentageBarStackHorizontalOrigin,
'percentage-bar-stack-origin': percentageBarStackOrigin,
'pie-donut-origin': pieDonutOrigin,
'pie-donut-rose-origin': pieDonutRoseOrigin,
'pie-origin': pieOrigin,
'pie-rose-origin': pieRoseOrigin,
'progress-bar-origin': progressBarOrigin,
'quadrant-origin': quadrantOrigin,
'radar-origin': radarOrigin,
'rich-text-origin': richTextOrigin,
'sankey-origin': sankeyOrigin,
'scatter-origin': scatterOrigin,
'stock-line-origin': stockLineOrigin,
'symbolic-map-origin': symbolicMapOrigin,
'table-info-origin': tableInfoOrigin,
'table-normal-origin': tableNormalOrigin,
'table-pivot-origin': tablePivotOrigin,
'treemap-origin': treemapOrigin,
'waterfall-origin': waterfallOrigin,
'word-cloud-origin': wordCloudOrigin,
't-heatmap-origin': tHeatmapOrigin
}
const getIconName = item => {
if (item.component === 'UserView') {
const viewInfo = canvasViewInfo.value[item.id]
return `${viewInfo.type}-origin`
return iconMap[`${viewInfo.type}-origin`]
} else {
return item.icon
return iconMap[item.icon]
}
}
@ -300,7 +418,7 @@ const canvasChange = () => {
>
<div style="width: 22px; padding-left: 3px"></div>
<el-icon class="component-icon">
<Icon :name="getIconName(element)"></Icon>
<Icon><component :is="getIconName(element)"></component></Icon>
</el-icon>
<span
:id="`component-label-${element?.id}`"
@ -328,7 +446,7 @@ const canvasChange = () => {
@click="hiddenAreaOnClick($event, element)"
>
<el-icon class="component-base">
<Icon name="dv-more" class="opt-icon"></Icon>
<Icon name="dv-more"><dvMore class="svg-icon opt-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -388,16 +506,18 @@ const canvasChange = () => {
v-show="getComponent(index)?.expand"
name="dv-expand-down"
class="expand-icon"
></Icon>
><dvExpandDown class="svg-icon expand-icon"
/></Icon>
<Icon
v-show="!getComponent(index)?.expand"
name="dv-expand-right"
class="expand-icon"
></Icon>
><dvExpandRight class="svg-icon expand-icon"
/></Icon>
</el-icon>
</div>
<el-icon class="component-icon">
<Icon :name="getIconName(getComponent(index))"></Icon>
<Icon><component :is="getIconName(getComponent(index))"></component></Icon>
</el-icon>
<span
:id="`component-label-${getComponent(index)?.id}`"
@ -420,28 +540,28 @@ const canvasChange = () => {
v-show="!getComponent(index).isShow"
@click="showComponent"
>
<Icon name="dv-eye-close" class="opt-icon"></Icon>
<Icon name="dv-eye-close"><dvEyeClose class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-icon
class="component-base"
v-show="getComponent(index)?.isShow"
@click="hideComponent"
>
<Icon name="dv-show" class="opt-icon"></Icon>
<Icon name="dv-show"><dvShow class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-icon
v-show="!getComponent(index)?.isLock"
class="component-base"
@click="lock"
>
<Icon class="opt-icon" name="dv-unlock"></Icon>
<Icon name="dv-unlock"><dvUnlock class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-icon
class="component-base component-icon-display"
v-show="getComponent(index)?.isLock"
@click="unlock"
>
<Icon name="dv-lock" class="opt-icon"></Icon>
<Icon name="dv-lock"><dvLock class="svg-icon opt-icon" /></Icon>
</el-icon>
<el-dropdown
ref="dropdownMore"
@ -452,7 +572,7 @@ const canvasChange = () => {
>
<span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
<el-icon class="component-base">
<Icon name="dv-more" class="opt-icon"></Icon>
<Icon name="dv-more"><dvMore class="svg-icon opt-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>

4
core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts"></script>
<template></template>
<template>
<div>ts</div>
</template>
<style scoped lang="less"></style>

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

@ -11,7 +11,7 @@
>
<div v-if="showCheck" class="del-from-mobile" @click="delFromMobile">
<el-icon>
<Icon name="mobile-checkbox"></Icon>
<Icon name="mobile-checkbox"><mobileCheckbox class="svg-icon" /></Icon>
</el-icon>
</div>
<div
@ -46,7 +46,7 @@
@click="selectCurComponent"
@mousedown="handleInnerMouseDownOnShape"
>
<Icon v-show="shapeLock" class="iconfont icon-suo" name="dv-lock"></Icon>
<Icon v-if="shapeLock" name="dv-lock"><dvLock class="svg-icon iconfont icon-suo" /></Icon>
<!--边框背景-->
<Board
v-if="svgInnerEnable"
@ -97,6 +97,8 @@
</template>
<script setup lang="ts">
import mobileCheckbox from '@/assets/svg/mobile-checkbox.svg'
import dvLock from '@/assets/svg/dv-lock.svg'
import eventBus from '@/utils/eventBus'
import calculateComponentPositionAndSize, {
calculateRadioComponentPositionAndSize

18
core/core-frontend/src/components/filter-text/src/FilterText.vue
View File

@ -1,4 +1,8 @@
<script lang="ts" setup>
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
import { nextTick, ref, watch } from 'vue'
import { Icon } from '@/components/icon-custom'
import { ElButton, ElDivider, ElIcon } from 'element-plus-secondary'
@ -50,7 +54,7 @@ watch(
<span class="title">个结果</span>
<el-divider direction="vertical" />
<el-icon @click="scrollPre" class="arrow-left arrow-filter" v-if="showScroll">
<Icon name="icon_left_outlined"></Icon>
<Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
</el-icon>
<div class="filter-texts-container" ref="container">
<p v-for="(ele, index) in filterTexts" :key="ele" class="text">
@ -58,7 +62,7 @@ watch(
{{ ele }}
</el-tooltip>
<el-icon @click="clearFilter(index)">
<Icon name="icon_close_outlined"></Icon>
<Icon name="icon_close_outlined"><icon_close_outlined class="svg-icon" /></Icon>
</el-icon>
</p>
<el-button
@ -68,13 +72,15 @@ watch(
@click="clearFilterAll"
>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
清空条件</el-button
>
</div>
<el-icon @click="scrollNext" class="arrow-right arrow-filter" v-if="showScroll">
<Icon name="icon_right_outlined"></Icon>
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
<el-button
type="text"
@ -84,7 +90,9 @@ watch(
@click="clearFilterAll"
>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
清空条件</el-button
>

7
core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { Icon } from '@/components/icon-custom'
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
import { propTypes } from '@/utils/propTypes'
import type { Placement } from 'element-plus-secondary'
import { ref, PropType } from 'vue'
@ -21,7 +22,7 @@ const props = defineProps({
type: String as () => Placement,
default: 'bottom-end'
},
iconName: propTypes.string.def('icon_more_outlined'),
iconName: propTypes.string.def(''),
inTable: propTypes.bool.def(false),
resourceType: propTypes.string.def('dashboard'),
node: {
@ -67,7 +68,7 @@ const emit = defineEmits(['handleCommand'])
@command="handleCommand"
>
<el-icon class="hover-icon" :class="inTable && 'hover-icon-in-table'" @click.stop>
<Icon :name="iconName"></Icon>
<Icon><component class="svg-icon" :is="iconName || icon_more_outlined"></component></Icon>
</el-icon>
<template #dropdown>
<el-dropdown-menu>
@ -80,7 +81,7 @@ const emit = defineEmits(['handleCommand'])
:class="{ 'de-hidden-drop-item': ele.hidden }"
>
<el-icon class="handle-icon" v-if="ele.svgName">
<Icon :name="ele.svgName"></Icon>
<Icon><component class="svg-icon" :is="ele.svgName"></component></Icon>
</el-icon>
{{ ele.label }}
</el-dropdown-item>

7
core/core-frontend/src/components/handle-more/src/HandleMore.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { Icon } from '@/components/icon-custom'
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
import { propTypes } from '@/utils/propTypes'
import type { Placement } from 'element-plus-secondary'
import { PropType } from 'vue'
@ -20,7 +21,7 @@ defineProps({
type: String as () => Placement,
default: 'bottom-end'
},
iconName: propTypes.string.def('icon_more_outlined'),
iconName: propTypes.string.def(''),
iconSize: propTypes.string.def('16px'),
inTable: propTypes.bool.def(false)
})
@ -40,7 +41,7 @@ const emit = defineEmits(['handleCommand'])
@command="handleCommand"
>
<el-icon class="hover-icon" :class="inTable && 'hover-icon-in-table'" @click.stop>
<Icon :name="iconName"></Icon>
<Icon><component class="svg-icon" :is="iconName || icon_more_outlined"></component></Icon>
</el-icon>
<template #dropdown>
<el-dropdown-menu :persistent="false">
@ -52,7 +53,7 @@ const emit = defineEmits(['handleCommand'])
:disabled="ele.disabled"
>
<el-icon class="handle-icon" :style="{ fontSize: iconSize }" v-if="ele.svgName">
<Icon :name="ele.svgName"></Icon>
<Icon><component class="svg-icon" :is="ele.svgName"></component></Icon>
</el-icon>
{{ ele.label }}
</el-dropdown-item>

1394
core/core-frontend/src/components/icon-custom/src/Icon.vue
View File

File diff suppressed because it is too large Load Diff

22
core/core-frontend/src/components/icon-group/board-list.ts Normal file
View File

@ -0,0 +1,22 @@
import board_1 from '@/assets/svg/board_1.svg'
import board_2 from '@/assets/svg/board_2.svg'
import board_3 from '@/assets/svg/board_3.svg'
import board_4 from '@/assets/svg/board_4.svg'
import board_5 from '@/assets/svg/board_5.svg'
import board_6 from '@/assets/svg/board_6.svg'
import board_7 from '@/assets/svg/board_7.svg'
import board_8 from '@/assets/svg/board_8.svg'
import board_9 from '@/assets/svg/board_9.svg'
const iconBoardMap = {
board_1: board_1,
board_2: board_2,
board_3: board_3,
board_4: board_4,
board_5: board_5,
board_6: board_6,
board_7: board_7,
board_8: board_8,
board_9: board_9
}
export { iconBoardMap }

91
core/core-frontend/src/components/icon-group/chart-dark-list.ts Normal file
View File

@ -0,0 +1,91 @@
import areaDark from '@/assets/svg/area-dark.svg'
import areaStackDark from '@/assets/svg/area-stack-dark.svg'
import barDark from '@/assets/svg/bar-dark.svg'
import barGroupDark from '@/assets/svg/bar-group-dark.svg'
import barGroupStackDark from '@/assets/svg/bar-group-stack-dark.svg'
import barHorizontalDark from '@/assets/svg/bar-horizontal-dark.svg'
import barRangeDark from '@/assets/svg/bar-range-dark.svg'
import barStackDark from '@/assets/svg/bar-stack-dark.svg'
import barStackHorizontalDark from '@/assets/svg/bar-stack-horizontal-dark.svg'
import bidirectionalBarDark from '@/assets/svg/bidirectional-bar-dark.svg'
import bubbleMapDark from '@/assets/svg/bubble-map-dark.svg'
import chartMixDark from '@/assets/svg/chart-mix-dark.svg'
import chartMixGroupDark from '@/assets/svg/chart-mix-group-dark.svg'
import chartMixStackDark from '@/assets/svg/chart-mix-stack-dark.svg'
import flowMapDark from '@/assets/svg/flow-map-dark.svg'
import funnelDark from '@/assets/svg/funnel-dark.svg'
import gaugeDark from '@/assets/svg/gauge-dark.svg'
import heatMapDark from '@/assets/svg/heat-map-dark.svg'
import indicatorDark from '@/assets/svg/indicator-dark.svg'
import lineDark from '@/assets/svg/line-dark.svg'
import liquidDark from '@/assets/svg/liquid-dark.svg'
import mapDark from '@/assets/svg/map-dark.svg'
import percentageBarStackDark from '@/assets/svg/percentage-bar-stack-dark.svg'
import percentageBarStackHorizontalDark from '@/assets/svg/percentage-bar-stack-horizontal-dark.svg'
import pieDark from '@/assets/svg/pie-dark.svg'
import pieDonutDark from '@/assets/svg/pie-donut-dark.svg'
import pieDonutRoseDark from '@/assets/svg/pie-donut-rose-dark.svg'
import pieRoseDark from '@/assets/svg/pie-rose-dark.svg'
import progressBarDark from '@/assets/svg/progress-bar-dark.svg'
import quadrantDark from '@/assets/svg/quadrant-dark.svg'
import radarDark from '@/assets/svg/radar-dark.svg'
import richTextDark from '@/assets/svg/rich-text-dark.svg'
import sankeyDark from '@/assets/svg/sankey-dark.svg'
import scatterDark from '@/assets/svg/scatter-dark.svg'
import stockLineDark from '@/assets/svg/stock-line-dark.svg'
import symbolicMapDark from '@/assets/svg/symbolic-map-dark.svg'
import tableInfoDark from '@/assets/svg/table-info-dark.svg'
import tableNormalDark from '@/assets/svg/table-normal-dark.svg'
import tablePivotDark from '@/assets/svg/table-pivot-dark.svg'
import treemapDark from '@/assets/svg/treemap-dark.svg'
import waterfallDark from '@/assets/svg/waterfall-dark.svg'
import wordCloudDark from '@/assets/svg/word-cloud-dark.svg'
import tHeatmapDark from '@/assets/svg/t-heatmap-dark.svg'
const iconChartDarkMap = {
'area-dark': areaDark,
'area-stack-dark': areaStackDark,
'bar-dark': barDark,
'bar-group-dark': barGroupDark,
'bar-group-stack-dark': barGroupStackDark,
'bar-horizontal-dark': barHorizontalDark,
'bar-range-dark': barRangeDark,
'bar-stack-dark': barStackDark,
'bar-stack-horizontal-dark': barStackHorizontalDark,
'bidirectional-bar-dark': bidirectionalBarDark,
'bubble-map-dark': bubbleMapDark,
'chart-mix-dark': chartMixDark,
'chart-mix-group-dark': chartMixGroupDark,
'chart-mix-stack-dark': chartMixStackDark,
'flow-map-dark': flowMapDark,
'funnel-dark': funnelDark,
'gauge-dark': gaugeDark,
'heat-map-dark': heatMapDark,
'indicator-dark': indicatorDark,
'line-dark': lineDark,
'liquid-dark': liquidDark,
'map-dark': mapDark,
'percentage-bar-stack-dark': percentageBarStackDark,
'percentage-bar-stack-horizontal-dark': percentageBarStackHorizontalDark,
'pie-dark': pieDark,
'pie-donut-dark': pieDonutDark,
'pie-donut-rose-dark': pieDonutRoseDark,
'pie-rose-dark': pieRoseDark,
'progress-bar-dark': progressBarDark,
'quadrant-dark': quadrantDark,
'radar-dark': radarDark,
'rich-text-dark': richTextDark,
'sankey-dark': sankeyDark,
'scatter-dark': scatterDark,
'stock-line-dark': stockLineDark,
'symbolic-map-dark': symbolicMapDark,
'table-info-dark': tableInfoDark,
'table-normal-dark': tableNormalDark,
'table-pivot-dark': tablePivotDark,
'treemap-dark': treemapDark,
'waterfall-dark': waterfallDark,
'word-cloud-dark': wordCloudDark,
't-heatmap-dark': tHeatmapDark
}
export { iconChartDarkMap }

91
core/core-frontend/src/components/icon-group/chart-list.ts Normal file
View File

@ -0,0 +1,91 @@
import areaStack from '@/assets/svg/area-stack.svg'
import area from '@/assets/svg/area.svg'
import barGroupStack from '@/assets/svg/bar-group-stack.svg'
import barGroup from '@/assets/svg/bar-group.svg'
import barHorizontal from '@/assets/svg/bar-horizontal.svg'
import barRange from '@/assets/svg/bar-range.svg'
import barStackHorizontal from '@/assets/svg/bar-stack-horizontal.svg'
import barStack from '@/assets/svg/bar-stack.svg'
import bar from '@/assets/svg/bar.svg'
import bidirectionalBar from '@/assets/svg/bidirectional-bar.svg'
import bubbleMap from '@/assets/svg/bubble-map.svg'
import chartMixGroup from '@/assets/svg/chart-mix-group.svg'
import chartMixStack from '@/assets/svg/chart-mix-stack.svg'
import chartMix from '@/assets/svg/chart-mix.svg'
import flowMap from '@/assets/svg/flow-map.svg'
import funnel from '@/assets/svg/funnel.svg'
import gauge from '@/assets/svg/gauge.svg'
import heatMap from '@/assets/svg/heat-map.svg'
import indicator from '@/assets/svg/indicator.svg'
import line from '@/assets/svg/line.svg'
import liquid from '@/assets/svg/liquid.svg'
import map from '@/assets/svg/map.svg'
import percentageBarStackHorizontal from '@/assets/svg/percentage-bar-stack-horizontal.svg'
import percentageBarStack from '@/assets/svg/percentage-bar-stack.svg'
import pieDonutRose from '@/assets/svg/pie-donut-rose.svg'
import pieDonut from '@/assets/svg/pie-donut.svg'
import pieRose from '@/assets/svg/pie-rose.svg'
import pie from '@/assets/svg/pie.svg'
import progressBar from '@/assets/svg/progress-bar.svg'
import quadrant from '@/assets/svg/quadrant.svg'
import radar from '@/assets/svg/radar.svg'
import richText from '@/assets/svg/rich-text.svg'
import sankey from '@/assets/svg/sankey.svg'
import scatter from '@/assets/svg/scatter.svg'
import stockLine from '@/assets/svg/stock-line.svg'
import symbolicMap from '@/assets/svg/symbolic-map.svg'
import tableInfo from '@/assets/svg/table-info.svg'
import tableNormal from '@/assets/svg/table-normal.svg'
import tablePivot from '@/assets/svg/table-pivot.svg'
import treemap from '@/assets/svg/treemap.svg'
import waterfall from '@/assets/svg/waterfall.svg'
import wordCloud from '@/assets/svg/word-cloud.svg'
import tHeatmap from '@/assets/svg/t-heatmap.svg'
const iconChartMap = {
'area-stack': areaStack,
area: area,
'bar-group-stack': barGroupStack,
'bar-group': barGroup,
'bar-horizontal': barHorizontal,
'bar-range': barRange,
'bar-stack-horizontal': barStackHorizontal,
'bar-stack': barStack,
bar: bar,
'bidirectional-bar': bidirectionalBar,
'bubble-map': bubbleMap,
'chart-mix-group': chartMixGroup,
'chart-mix-stack': chartMixStack,
'chart-mix': chartMix,
'flow-map': flowMap,
funnel: funnel,
gauge: gauge,
'heat-map': heatMap,
indicator: indicator,
line: line,
liquid: liquid,
map: map,
'percentage-bar-stack-horizontal': percentageBarStackHorizontal,
'percentage-bar-stack': percentageBarStack,
'pie-donut-rose': pieDonutRose,
'pie-donut': pieDonut,
'pie-rose': pieRose,
pie: pie,
'progress-bar': progressBar,
quadrant: quadrant,
radar: radar,
'rich-text': richText,
sankey: sankey,
scatter: scatter,
'stock-line': stockLine,
'symbolic-map': symbolicMap,
'table-info': tableInfo,
'table-normal': tableNormal,
'table-pivot': tablePivot,
treemap: treemap,
waterfall: waterfall,
'word-cloud': wordCloud,
't-heatmap': tHeatmap
}
export { iconChartMap }

34
core/core-frontend/src/components/icon-group/datasource-list.ts Normal file
View File

@ -0,0 +1,34 @@
import mysqlDs from '@/assets/svg/mysql-ds.svg'
import oracleDs from '@/assets/svg/oracle-ds.svg'
import sqlServerDs from '@/assets/svg/sqlServer-ds.svg'
import TiDBDs from '@/assets/svg/TiDB-ds.svg'
import impalaDs from '@/assets/svg/impala-ds.svg'
import mariadbDs from '@/assets/svg/mariadb-ds.svg'
import StarRocksDs from '@/assets/svg/StarRocks-ds.svg'
import pgDs from '@/assets/svg/pg-ds.svg'
import mongoDs from '@/assets/svg/mongo-ds.svg'
import ckDs from '@/assets/svg/ck-ds.svg'
import db2Ds from '@/assets/svg/db2-ds.svg'
import redshiftDs from '@/assets/svg/redshift-ds.svg'
import APIDs from '@/assets/svg/API-ds.svg'
import ExcelDs from '@/assets/svg/Excel-ds.svg'
import dorisDs from '@/assets/svg/doris-ds.svg'
const iconDatasourceMap = {
mysql: mysqlDs,
oracle: oracleDs,
sqlServer: sqlServerDs,
TiDB: TiDBDs,
impala: impalaDs,
mariadb: mariadbDs,
StarRocks: StarRocksDs,
pg: pgDs,
mongo: mongoDs,
ck: ckDs,
db2: db2Ds,
redshift: redshiftDs,
API: APIDs,
Excel: ExcelDs,
doris: dorisDs
}
export { iconDatasourceMap }

33
core/core-frontend/src/components/icon-group/field-calculated-list.ts Normal file
View File

@ -0,0 +1,33 @@
import icon_link_calculated_outlined from '@/assets/svg/icon_link-calculated_outlined.svg'
import icon_link_calculated_outlined_1 from '@/assets/svg/icon_link-calculated_outlined-1.svg'
import icon_text_calculated_outlined from '@/assets/svg/icon_text-calculated_outlined.svg'
import icon_text_calculated_outlined_1 from '@/assets/svg/icon_text-calculated_outlined-1.svg'
import icon_number_calculated_outlined from '@/assets/svg/icon_number-calculated_outlined.svg'
import icon_number_calculated_outlined_1 from '@/assets/svg/icon_number-calculated_outlined-1.svg'
import icon_local_calculated_outlined from '@/assets/svg/icon_local-calculated_outlined.svg'
import icon_local_calculated_outlined_1 from '@/assets/svg/icon_local-calculated_outlined-1.svg'
import icon_calendar_calculated_outlined from '@/assets/svg/icon_calendar-calculated_outlined.svg'
import icon_calendar_calculated_outlined_1 from '@/assets/svg/icon_calendar-calculated_outlined-1.svg'
const iconFieldCalculatedMap = [
icon_text_calculated_outlined,
icon_calendar_calculated_outlined,
icon_number_calculated_outlined,
icon_number_calculated_outlined,
icon_number_calculated_outlined,
icon_local_calculated_outlined,
'binary',
icon_link_calculated_outlined
]
const iconFieldCalculatedQMap = [
icon_text_calculated_outlined_1,
icon_calendar_calculated_outlined_1,
icon_number_calculated_outlined_1,
icon_number_calculated_outlined_1,
icon_number_calculated_outlined_1,
icon_local_calculated_outlined_1,
'binary',
icon_link_calculated_outlined_1
]
export { iconFieldCalculatedMap, iconFieldCalculatedQMap }

14
core/core-frontend/src/components/icon-group/field-list.ts Normal file
View File

@ -0,0 +1,14 @@
import field_text from '@/assets/svg/field_text.svg'
import field_time from '@/assets/svg/field_time.svg'
import field_value from '@/assets/svg/field_value.svg'
import field_location from '@/assets/svg/field_location.svg'
import field_url from '@/assets/svg/field_url.svg'
const iconFieldMap = {
text: field_text,
value: field_value,
location: field_location,
time: field_time,
url: field_url
}
export { iconFieldMap }

33
core/core-frontend/src/components/plugin/src/index.vue
View File

@ -102,38 +102,7 @@ const invokeMethod = param => {
}
onMounted(async () => {
const key = 'xpack-model-distributed'
let distributed = false
if (wsCache.get(key) === null) {
const res = await xpackModelApi()
wsCache.set('xpack-model-distributed', res.data)
distributed = res.data
} else {
distributed = wsCache.get(key)
}
if (distributed) {
if (window['DEXPack']) {
const xpack = await window['DEXPack'].mapping[attrs.jsname]
plugin.value = xpack.default
} else if (!window._de_xpack_not_loaded) {
window._de_xpack_not_loaded = true
window['VueDe'] = Vue
window['AxiosDe'] = axios
window['PiniaDe'] = Pinia
window['vueRouterDe'] = router
window['MittAllDe'] = useEmitt().emitter.all
window['I18nDe'] = i18n
if (!window.tinymce) {
window.tinymce = tinymce
}
loadDistributed().then(async res => {
new Function(res.data)()
useEmitt().emitter.emit('load-xpack')
})
}
} else {
loadComponent()
}
loadComponent()
})
const emits = defineEmits(['loadFail'])

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

@ -15,7 +15,7 @@
<div>预览时启用</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</div>
@ -26,6 +26,7 @@
</template>
<script setup lang="ts">
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'

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

@ -9,7 +9,9 @@
>
<el-row style="height: 20px">
<el-col :span="3">
<Icon name="warn-tree" style="width: 20px; height: 20px; float: right" />
<Icon name="warn-tree"
><warnTree style="width: 20px; height: 20px; float: right" class="svg-icon"
/></Icon>
</el-col>
<el-col :span="21">
<span style="font-size: 13px; margin-left: 10px; font-weight: bold; line-height: 20px">
@ -27,6 +29,7 @@
</template>
<script setup lang="ts">
import warnTree from '@/assets/svg/warn-tree.svg'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'

4
core/core-frontend/src/components/visualization/CanvasOptBar.vue
View File

@ -6,13 +6,15 @@
@mousedown="handOptBarMousedown"
>
<el-button size="mini" type="warning" @click="clearAllLinkage"
><el-icon class="bar-base-icon"> <Icon name="dv-bar-unLinkage"></Icon></el-icon
><el-icon class="bar-base-icon">
<Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon></el-icon
>{{ $t('visualization.remove_all_linkage') }}</el-button
>
</div>
</template>
<script lang="ts" setup>
import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { computed } from 'vue'
import { isMainCanvas } from '@/utils/canvasUtils'

2
core/core-frontend/src/components/visualization/ComponentButton.vue
View File

@ -25,7 +25,7 @@ const emits = defineEmits(['customClick'])
>
<el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
<el-icon class="toolbar-icon">
<Icon :name="iconName" />
<Icon><component :is="iconName"></component></Icon>
</el-icon>
<span>{{ title }}</span>
</el-col>

2
core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
View File

@ -20,7 +20,7 @@ const emits = defineEmits(['customClick'])
<div class="flex-align-center">
<el-row class="group_icon" :title="tips" @click="emits('customClick')">
<el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
<Icon class="toolbar-icon" :name="iconName" />
<Icon><component class="svg-icon toolbar-icon" :is="iconName"></component></Icon>
<span>{{ title }}</span>
</el-col>
</el-row>

29
core/core-frontend/src/components/visualization/ComponentEditBar.vue
View File

@ -23,12 +23,12 @@
<template v-if="element.component === 'VQuery' && showPosition === 'canvas'">
<span title="添加查询条件">
<el-icon class="bar-base-icon" @click="addQueryCriteria">
<Icon name="icon_add_outlined"></Icon
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon
></el-icon>
</span>
<span title="编辑查询条件">
<el-icon class="bar-base-icon" @click="editQueryCriteria">
<Icon name="icon_edit_outlined"></Icon
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon
></el-icon>
</span>
</template>
@ -40,7 +40,7 @@
>
<span>
<el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'enlarge')">
<Icon name="dv-bar-enlarge" />
<Icon name="dv-bar-enlarge"><dvBarEnlarge class="svg-icon" /></Icon>
</el-icon>
</span>
</el-tooltip>
@ -52,7 +52,7 @@
>
<span>
<el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'details')">
<Icon name="dv-details" />
<Icon name="dv-details"><dvDetails class="svg-icon" /></Icon>
</el-icon>
</span>
</el-tooltip>
@ -64,7 +64,7 @@
>
<span>
<el-icon class="bar-base-icon" @click="datasetParamsInit">
<Icon name="icon_params_setting"></Icon>
<Icon name="icon_params_setting"><icon_params_setting class="svg-icon" /></Icon>
</el-icon>
</span>
</el-tooltip>
@ -82,7 +82,7 @@
v-if="barShowCheck('unLinkage') && existLinkage"
>
<el-icon class="bar-base-icon" @click="clearLinkage">
<Icon name="dv-bar-unLinkage" />
<Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon>
</el-icon>
</span>
<div v-if="barShowCheck('batchOpt')" class="bar-checkbox-area">
@ -97,7 +97,7 @@
>
<el-icon class="bar-base-icon">
<el-tooltip :content="t('visualization.more')" effect="dark" placement="bottom">
<icon name="icon_more_outlined" />
<icon name="icon_more_outlined"><icon_more_outlined class="svg-icon" /></icon>
</el-tooltip>
</el-icon>
<template #dropdown>
@ -165,7 +165,7 @@
>
<el-icon @click="downloadClick" class="bar-base-icon">
<el-tooltip :content="t('chart.export')" effect="dark" placement="bottom">
<icon name="dv-preview-download" />
<icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></icon>
</el-tooltip>
</el-icon>
<template #dropdown>
@ -184,7 +184,9 @@
</el-dropdown>
<el-popover v-if="selectFieldShow" width="200" trigger="click" @mousedown="fieldsAreaDown">
<template #reference>
<el-icon class="bar-base-icon"> <Icon name="database"></Icon></el-icon>
<el-icon class="bar-base-icon">
<Icon name="database"><database class="svg-icon" /></Icon
></el-icon>
</template>
<fields-list :fields="state.curFields" :element="element" />
</el-popover>
@ -193,6 +195,15 @@
</template>
<script lang="ts" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import dvBarEnlarge from '@/assets/svg/dv-bar-enlarge.svg'
import dvDetails from '@/assets/svg/dv-details.svg'
import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
import database from '@/assets/svg/database.svg'
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'
import { computed, h, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'

3
core/core-frontend/src/components/visualization/EditMenu.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import language from '@/assets/svg/language.svg'
import { ref, onMounted } from 'vue'
import { Icon } from '@/components/icon-custom'
import { useUserStoreWithOut } from '@/store/modules/user'
@ -17,7 +18,7 @@ onMounted(() => {
@command="handleSetLanguage"
>
<el-icon>
<Icon name="language" />
<Icon name="language"><language class="svg-icon" /></Icon>
</el-icon>
<template #dropdown>
<el-dropdown-menu>

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

@ -14,16 +14,19 @@
<div class="top-area">
<span class="top-area-text">已选图表：</span>
<span class="top-area-value">
<Icon class-name="view-type-icon" :name="state.curJumpViewInfo.type" />
<Icon class-name="view-type-icon"
><component
class="svg-icon view-type-icon"
:is="iconChartMap[state.curJumpViewInfo.type]"
></component
></Icon>
{{ state.curJumpViewInfo.title }}</span
>
<span class="top-area-text margin-left">所用数据集：</span>
<span class="top-area-value">
<Icon
style="vertical-align: -0.2em"
class-name="view-type-icon"
name="dataset-outline"
/>
<Icon name="dataset-outline"
><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
/></Icon>
{{ state.curDatasetInfo.name }}</span
>
</div>
@ -66,7 +69,8 @@
<Icon
:name="`field_${fieldType[data.sourceDeType]}`"
:className="`field-icon-${fieldType[data.sourceDeType]}`"
/>
><component :is="iconFieldMap[fieldType[data.sourceDeType]]"></component
></Icon>
</el-icon>
{{ data.sourceFieldName }}
</span>
@ -135,7 +139,9 @@
</el-form-item>
</div>
<div class="icon-center">
<Icon style="width: 20px; height: 20px" name="dv-link-target" />
<Icon name="dv-link-target"
><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
/></Icon>
</div>
<div style="flex: 1">
<el-form-item>
@ -156,10 +162,12 @@
style="display: inline-block"
v-if="data.leaf"
>
<Icon name="dv-dashboard-spine"></Icon>
<Icon name="dv-dashboard-spine"
><dvDashboardSpine class="svg-icon"
/></Icon>
</el-icon>
<el-icon size="18px" style="display: inline-block" v-else>
<Icon name="dv-folder"></Icon>
<Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
</el-icon>
<span
style="margin-left: 8px; font-size: 14px"
@ -204,9 +212,11 @@
<span class="custom-option">
<Icon
style="width: 14px; height: 14px"
:name="`field_${fieldType[curViewField.deType]}`"
:className="`field-icon-${fieldType[curViewField.deType]}`"
/>
><component
:is="iconFieldMap[fieldType[curViewField.deType]]"
></component
></Icon>
<span style="float: left; margin-left: 4px; font-size: 14px">{{
curViewField.name
}}</span>
@ -215,7 +225,9 @@
</el-select>
</div>
<div class="icon-center">
<Icon style="width: 20px; height: 20px" name="dv-link-target" />
<Icon name="dv-link-target"
><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
/></Icon>
</div>
<div style="flex: 1">
<el-select
@ -233,10 +245,10 @@
>
<span class="custom-option">
<Icon
:name="item.type"
class-name="view-type-icon"
style="width: 14px; height: 14px"
/>
><component :is="iconChartMap[item.type]"></component
></Icon>
<span style="float: left; margin-left: 4px; font-size: 14px">{{
item.title
}}</span>
@ -262,9 +274,11 @@
<span class="custom-option">
<Icon
style="width: 14px; height: 14px"
:name="`field_${fieldType[viewField.deType]}`"
:className="`field-icon-${fieldType[viewField.deType]}`"
/>
><component
:is="iconFieldMap[fieldType[viewField.deType]]"
></component
></Icon>
<span style="float: left; margin-left: 4px; font-size: 14px">{{
viewField.name
}}</span>
@ -279,7 +293,9 @@
@click="deleteLinkJumpField(index)"
>
<el-icon size="20px">
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-button>
</div>
@ -308,7 +324,9 @@
{{ $t('visualization.target_url_tips') }}
</template>
<el-icon size="16px" class="hint-icon">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"
><icon_info_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
</div>
@ -328,7 +346,9 @@
<span v-html="$t('chart.reference_field_tip')"></span>
</template>
<el-icon size="16px" class="hint-icon">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"
><icon_info_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
</div>
@ -353,9 +373,12 @@
>
<el-icon>
<Icon
:name="`field_${fieldType[item.sourceDeType]}`"
:className="`field-icon-${fieldType[item.sourceDeType]}`"
/>
><component
class="svg-icon"
:className="`field-icon-${fieldType[item.sourceDeType]}`"
:is="iconFieldMap[fieldType[item.sourceDeType]]"
></component
></Icon>
</el-icon>
{{ item.sourceFieldName }}
</span>
@ -387,6 +410,14 @@
</template>
<script lang="ts" setup>
import { iconFieldMap } from '@/components/icon-group/field-list'
import { iconChartMap } from '@/components/icon-group/chart-list'
import datasetOutline from '@/assets/svg/dataset-outline.svg'
import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
import dvFolder from '@/assets/svg/dv-folder.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import {
queryVisualizationJumpInfo,
queryWithViewId,

247
core/core-frontend/src/components/visualization/LinkageField.vue
View File

@ -1,247 +0,0 @@
<template>
<el-popover width="400" trigger="click" style="max-height: 400px; overflow-y: auto">
<el-row>
<el-col :span="11">
<div class="ellipsis-area">{{ sourceLinkageInfo.targetViewName }}</div>
</el-col>
<el-col :span="11">
<div class="ellipsis-area">{{ linkageInfo.targetViewName }}</div>
</el-col>
</el-row>
<el-row class="match-area">
<el-row v-for="(itemLinkage, index) in linkageInfo.linkageFields" :key="index">
<el-col :span="11">
<div class="select-filed">
<el-select v-model="itemLinkage.sourceField" size="small" placeholder="请选择">
<el-option
v-for="item in sourceLinkageInfo.targetViewFields"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">
<svg-icon
v-if="item.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="item.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="item.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span class="name-area">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="11">
<div class="select-filed">
<el-select v-model="itemLinkage.targetField" size="small" placeholder="请选择">
<el-option
v-for="item in linkageInfo.targetViewFields"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">
<svg-icon
v-if="item.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="item.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="item.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span class="name-area">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button
:icon="Delete"
text
size="small"
class="delete-area"
@click="deleteLinkageField(index)"
/>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="bottom">
<el-button size="small" type="success" :icon="Plus" round @click="addLinkageField(null, null)"
>追加联动依赖字段</el-button
>
</el-row>
<template #reference>
<el-icon class="bar-base-icon"><Edit /></el-icon>
</template>
</el-popover>
</template>
<script setup lang="ts">
import { checkSameDataSet } from '@/api/chart'
import { storeToRefs } from 'pinia'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { computed, onMounted, toRefs } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
const dvMainStore = dvMainStoreWithOut()
const { targetLinkageInfo, curLinkageView } = storeToRefs(dvMainStore)
const props = defineProps({
element: {
type: Object,
required: true
},
active: {
type: Boolean,
required: false,
default: false
},
// 当前模式 preview 预览 edit 编辑，
activeModel: {
type: String,
required: false,
default: 'preview'
}
})
const { element } = toRefs(props)
const linkageInfo = computed(() => {
return targetLinkageInfo.value[element.value.id]
})
const sourceLinkageInfo = computed(() => {
return targetLinkageInfo.value[curLinkageView.value.id]
})
const deleteLinkageField = index => {
linkageInfo.value.linkageFields.splice(index, 1)
}
const addLinkageField = (sourceFieldId, targetFieldId) => {
const linkageFieldItem = {
sourceField: sourceFieldId,
targetField: targetFieldId
}
linkageInfo.value.linkageFields.push(linkageFieldItem)
}
onMounted(() => {
// 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
checkSameDataSet(curLinkageView.value.id, element.value.id).then(res => {
if (res.data === 'YES' && linkageInfo.value.linkageFields.length === 0) {
sourceLinkageInfo.value.targetViewFields.forEach(item => {
addLinkageField(item.id, item.id)
})
}
})
})
</script>
<style lang="less" scoped>
.custom-icon {
color: white;
}
.name-area {
float: left;
color: #8492a6;
font-size: 12px;
}
.slot-class {
color: white;
}
.bottom {
margin-top: 20px;
text-align: center;
}
.ellipsis-area {
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed {
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
.ed-popover {
height: 200px;
overflow: auto;
}
.bar-base-icon {
height: 22px;
width: 22px;
color: #ffffff;
&:hover {
color: rgba(255, 255, 255, 0.5);
}
&:active {
color: rgba(255, 255, 255, 0.7);
}
}
.bottom {
margin-top: 20px;
justify-content: center;
}
.delete-area {
float: left;
margin-top: 5px;
}
.match-area {
display: inline-block;
height: 120px;
overflow-y: auto;
}
</style>

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

@ -17,16 +17,19 @@
<div class="top-area">
<span class="top-area-text" style="margin-left: 0">已选图表：</span>
<span class="top-area-value">
<Icon class-name="view-type-icon" :name="state.curLinkageViewInfo.type" />
<Icon class-name="view-type-icon"
><component
class="svg-icon view-type-icon"
:is="iconChartMap[state.curLinkageViewInfo.type]"
></component
></Icon>
{{ state.curLinkageViewInfo.title }}</span
>
<span class="top-area-text">所用数据集：</span>
<span class="top-area-value">
<Icon
style="vertical-align: -0.2em"
class-name="view-type-icon"
name="dataset-outline"
/>
<Icon class-name="view-type-icon" name="dataset-outline"
><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
/></Icon>
{{ state.curDatasetInfo.name }}</span
>
</div>
@ -82,11 +85,13 @@
</span>
<span>
<span class="tree-select-field">
<Icon
class-name="view-type-icon"
style="margin-right: 4px"
:name="data.targetViewType"
/>
<Icon class-name="view-type-icon"
><component
:is="iconChartMap[data.targetViewType]"
style="margin-right: 4px"
class="svg-icon view-type-icon"
></component
></Icon>
{{ data.targetViewName }}
</span>
</span>
@ -133,7 +138,8 @@
class-name="view-type-icon"
style="margin-right: 4px"
:name="data.targetViewType"
/>
><component :is="iconChartMap[data.targetViewType]"></component
></Icon>
{{ data.targetViewName }}
</span>
</span>
@ -175,9 +181,9 @@
<span class="custom-option">
<Icon
style="width: 14px; height: 14px"
:name="`field_${fieldType[item.deType]}`"
:className="`field-icon-${fieldType[item.deType]}`"
/>
><component :is="iconFieldMap[fieldType[item.deType]]"></component
></Icon>
<span style="float: left; margin-left: 4px; font-size: 14px">{{
item.name
}}</span>
@ -187,7 +193,9 @@
</div>
</div>
<el-icon class="link-icon-join">
<Icon style="width: 20px; height: 20px" name="dv-link-target" />
<Icon style="width: 20px; height: 20px" name="dv-link-target"
><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
/></Icon>
</el-icon>
<div style="flex: 1">
<div class="select-filed">
@ -207,7 +215,8 @@
style="width: 14px; height: 14px"
:name="`field_${fieldType[item.deType]}`"
:className="`field-icon-${fieldType[item.deType]}`"
/>
><component :is="iconFieldMap[fieldType[item.deType]]"></component
></Icon>
<span style="float: left; margin-left: 4px; font-size: 14px">{{
item.name
}}</span>
@ -219,7 +228,9 @@
<el-button class="m-del-icon-btn" text @click="deleteLinkageField(index)">
<el-icon size="20px">
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-button>
</div>
@ -232,7 +243,9 @@
</el-row>
</el-row>
<el-row v-else style="height: 100%" class="custom-position">
<Icon style="width: 125px; height: 125px" name="dv-empty" />
<Icon name="dv-empty"
><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
/></Icon>
<span style="margin-top: 8px; font-size: 14px">请先勾选需要联动的图表</span>
</el-row>
</el-col>
@ -249,6 +262,12 @@
</template>
<script lang="ts" setup>
import { iconFieldMap } from '@/components/icon-group/field-list'
import { iconChartMap } from '@/components/icon-group/chart-list'
import datasetOutline from '@/assets/svg/dataset-outline.svg'
import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import dvEmpty from '@/assets/svg/dv-empty.svg'
import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
import { reactive, ref, nextTick, watch, computed } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'

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

@ -59,7 +59,7 @@
style="margin-right: 16px"
@handle-command="cmd => outerParamsOperation(cmd, node, data)"
:menu-list="state.optMenu"
icon-name="icon_more_outlined"
:icon-name="icon_more_outlined"
placement="bottom-start"
></handle-more>
</span>
@ -94,11 +94,9 @@
>
<div style="width: 16px"></div>
<div style="flex: 1; line-height: 32px">
<Icon
style="margin-top: 4px"
class-name="view-type-icon"
name="filter-params"
/>
<Icon name="filter-params"
><filterParams style="margin-top: 4px" class="svg-icon view-type-icon"
/></Icon>
<span>{{ findFilterName(baseFilter.id) }}</span>
</div>
<div style="flex: 1">
@ -157,7 +155,7 @@
<div style="flex: 1; display: flex; line-height: 32px">
<div style="width: 16px; margin-top: 2px; margin-right: 4px">
<el-icon>
<Icon name="icon_dataset" />
<Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
</el-icon>
</div>
<span>{{ baseDatasetInfo.name }}</span>
@ -190,9 +188,9 @@
>
<Icon
style="width: 14px; height: 14px"
:name="`field_${fieldType[item.deType]}`"
:className="`field-icon-${fieldType[item.deType]}`"
/>
><component :is="iconFieldMap[fieldType[item.deType]]"></component
></Icon>
<span style="font-size: 12px">{{ item.name }}</span>
</el-option>
</el-select>
@ -232,7 +230,8 @@
class-name="view-type-icon"
style="margin: 0 4px"
:name="viewInfo.chartType"
/>
><component :is="iconChartMap[viewInfo.chartType]"></component
></Icon>
</div>
<span style="font-size: 12px"> {{ viewInfo.chartName }}</span>
</div>
@ -284,6 +283,11 @@
</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 filterParams from '@/assets/svg/filter-params.svg'
import icon_dataset from '@/assets/svg/icon_dataset.svg'
import { ref, reactive, computed, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
@ -297,6 +301,8 @@ 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)
@ -312,12 +318,12 @@ const state = reactive({
optMenu: [
{
label: '重命名',
svgName: 'edit',
svgName: edit,
command: 'rename'
},
{
label: '删除',
svgName: 'delete',
svgName: _delete,
command: 'delete'
}
],

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

@ -59,7 +59,7 @@
style="margin-right: 10px"
@handle-command="cmd => outerParamsOperation(cmd, node, data)"
:menu-list="state.optMenu"
icon-name="icon_more_outlined"
:icon-name="icon_more_outlined"
placement="bottom-start"
></handle-more>
</span>
@ -103,18 +103,22 @@
:label="item.title"
:value="item.id"
>
<Icon
class-name="view-type-icon"
style="margin-right: 4px"
:name="item.type"
/>
<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 style="width: 20px; height: 20px" name="dv-link-target" />
<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">
@ -134,9 +138,11 @@
>
<Icon
style="width: 14px; height: 14px"
:name="`field_${fieldType[viewField.deType]}`"
: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>
@ -144,7 +150,9 @@
</div>
<el-button class="m-del-icon-btn" text @click="deleteOuterParamsField(index)">
<el-icon size="20px">
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-button>
</div>
@ -174,6 +182,11 @@
</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'
@ -188,6 +201,8 @@ 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)
@ -201,12 +216,12 @@ const state = reactive({
optMenu: [
{
label: '重命名',
svgName: 'edit',
svgName: edit,
command: 'rename'
},
{
label: '删除',
svgName: 'delete',
svgName: _delete,
command: 'delete'
}
],

5
core/core-frontend/src/components/visualization/common/DragInfo.vue
View File

@ -2,7 +2,9 @@
<div class="drag-info-main">
<template v-if="!mobileInPc">
<el-row style="justify-content: center">
<Icon style="width: 125px; height: 125px" name="dv-drag-tips"></Icon>
<Icon name="dv-drag-tips"
><dvDragTips class="svg-icon" style="width: 125px; height: 125px"
/></Icon>
</el-row>
<el-row class="tips-info"> {{ tips }} </el-row>
</template>
@ -11,6 +13,7 @@
</template>
<script lang="ts" setup>
import dvDragTips from '@/assets/svg/dv-drag-tips.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'

5
core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
View File

@ -13,8 +13,8 @@
<Icon
:style="{ color: curComponent.commonBackground.innerImageColor }"
class-name="svg-background"
:name="mainIconClass"
/>
><component :is="iconBoardMap[mainIconClass]"></component
></Icon>
</div>
<span class="demonstration">{{ template.name }}</span>
</div>
@ -28,6 +28,7 @@ import { computed, toRefs } from 'vue'
const dvMainStore = dvMainStoreWithOut()
const { curComponent } = storeToRefs(dvMainStore)
import Icon from '@/components/icon-custom/src/Icon.vue'
import { iconBoardMap } from '@/components/icon-group/board-list'
const props = defineProps({
template: {

13
core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue
View File

@ -10,11 +10,13 @@
:style="itemStyle"
@click.stop="setBoard"
>
<Icon
:style="{ color: commonBackground.innerImageColor }"
class-name="svg-background"
:name="mainIconClass"
/>
<Icon class-name="svg-background"
><component
:style="{ color: commonBackground.innerImageColor }"
class="svg-icon svg-background"
:is="iconBoardMap[mainIconClass]"
></component
></Icon>
</div>
<span class="demonstration">{{ template.name }}</span>
</div>
@ -24,6 +26,7 @@
import Icon from '@/components/icon-custom/src/Icon.vue'
import { computed, toRefs } from 'vue'
import { hexColorToRGBA } from '@/views/chart/components/js/util'
import { iconBoardMap } from '@/components/icon-group/board-list'
const props = defineProps({
template: {

11
core/core-frontend/src/components/visualization/component-background/BoardItem.vue
View File

@ -5,16 +5,19 @@
:class="{ 'selected-active': active, 'icon-area-dark': themes === 'dark' }"
>
<Icon
:style="{ color: innerImageColor }"
class-name="svg-background"
:name="mainIconClass(item)"
/>
><component
:style="{ color: innerImageColor }"
class="svg-icon svg-background"
:is="iconBoardMap[mainIconClass(item)]"
></component
></Icon>
</div>
<span>{{ item.name }}</span>
</div>
</template>
<script setup lang="ts">
import { iconBoardMap } from '@/components/icon-group/board-list'
import { toRefs } from 'vue'
const props = withDefaults(

22
core/core-frontend/src/components/visualization/linkJump.vue
View File

@ -1,4 +1,8 @@
<script lang="ts" setup>
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
import joinJoin from '@/assets/svg/join-join.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus-secondary'
@ -98,7 +102,9 @@ defineExpose({
<span class="label">已选择图表:</span>
<span class="name">
<el-icon class="main-color">
<Icon class="toolbar-icon" name="icon_left_outlined" />
<Icon name="icon_left_outlined"
><icon_left_outlined class="svg-icon toolbar-icon"
/></Icon>
</el-icon>
折线图1
</span>
@ -107,7 +113,9 @@ defineExpose({
<span class="label">所用数据集:</span>
<span class="name">
<el-icon class="main-color">
<Icon class="toolbar-icon" name="icon_left_outlined" />
<Icon name="icon_left_outlined"
><icon_left_outlined class="svg-icon toolbar-icon"
/></Icon>
</el-icon>
佩尔数据集
</span>
@ -172,7 +180,7 @@ defineExpose({
</el-select>
</el-form-item>
<el-icon class="join">
<Icon name="join-join"></Icon>
<Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
</el-icon>
<el-form-item label="目标仪表板">
<el-select v-model="formInline.region" placeholder="Activity zone" clearable>
@ -206,7 +214,7 @@ defineExpose({
</el-select>
</el-form-item>
<el-icon class="join">
<Icon name="join-join"></Icon>
<Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
</el-icon>
<el-form-item
label="目标字段"
@ -238,7 +246,9 @@ defineExpose({
</el-form-item>
<el-button v-if="formFields.fields.length > 1" text @click="removeField(field)">
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</template>
@ -246,7 +256,7 @@ defineExpose({
</div>
<el-button class="add-field" text @click="addField">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
添加联动图表字段
</el-button>

9
core/core-frontend/src/custom-component/canvas-icon/Component.vue
View File

@ -1,14 +1,13 @@
<template>
<Icon
v-if="element.innerType.includes('board')"
class-name="de-svg-main"
:name="element.innerType"
/>
<Icon v-if="element.innerType.includes('board')" class-name="de-svg-main"
><component class="svg-icon de-svg-main" :is="iconBoardMap[element.innerType]"></component
></Icon>
<component v-else :is="element.innerType"></component>
</template>
<script setup lang="ts">
import Icon from '@/components/icon-custom/src/Icon.vue'
import { iconBoardMap } from '@/components/icon-group/board-list'
import { toRefs } from 'vue'
const props = defineProps({
propValue: {

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

@ -1,4 +1,5 @@
<script setup lang="ts">
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { computed, toRefs } from 'vue'
import { ElFormItem, ElIcon } from 'element-plus-secondary'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@ -52,7 +53,7 @@ const onJumpValueChange = () => {
<div>事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</el-form-item>

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

@ -22,7 +22,7 @@
>
<template #prefix>
<el-icon :class="{ 'dark-icon': themes === 'dark' }">
<Icon :name="styleOptionKey.icon" />
<Icon><component :is="styleOptionKey.icon"></component></Icon>
</el-icon>
</template>
<el-option
@ -89,7 +89,7 @@
>
<template #prefix>
<el-icon :class="{ 'dark-icon': themes === 'dark' }">
<Icon :name="styleOptionMountedKey.icon" />
<Icon><component :is="styleOptionMountedKey.icon"></component></Icon>
</el-icon>
</template>
<el-option
@ -122,7 +122,7 @@
>
<template #prefix>
<el-icon :class="{ 'dark-icon': themes === 'dark' }">
<Icon :name="styleOptionKey.icon" />
<Icon><component :is="styleOptionKey.icon"></component></Icon>
</el-icon>
</template>
<el-option
@ -146,7 +146,7 @@
@click="checkBold"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -161,7 +161,7 @@
@click="checkItalic"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -178,7 +178,9 @@
@click="setPosition('textAlign', 'left')"
>
<el-icon>
<Icon name="icon_left-alignment_outlined" />
<Icon name="icon_left-alignment_outlined"
><icon_leftAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -192,7 +194,9 @@
@click="setPosition('textAlign', 'center')"
>
<el-icon>
<Icon name="icon_center-alignment_outlined" />
<Icon name="icon_center-alignment_outlined"
><icon_centerAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -206,7 +210,9 @@
@click="setPosition('textAlign', 'right')"
>
<el-icon>
<Icon name="icon_right-alignment_outlined" />
<Icon name="icon_right-alignment_outlined"
><icon_rightAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -227,7 +233,9 @@
@click="setPosition('headHorizontalPosition', 'left')"
>
<el-icon>
<Icon name="icon_left-alignment_outlined" />
<Icon name="icon_left-alignment_outlined"
><icon_leftAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -244,7 +252,9 @@
@click="setPosition('headHorizontalPosition', 'center')"
>
<el-icon>
<Icon name="icon_center-alignment_outlined" />
<Icon name="icon_center-alignment_outlined"
><icon_centerAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -261,7 +271,9 @@
@click="setPosition('headHorizontalPosition', 'right')"
>
<el-icon>
<Icon name="icon_right-alignment_outlined" />
<Icon name="icon_right-alignment_outlined"
><icon_rightAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -272,6 +284,17 @@
</template>
<script lang="tsx" setup>
import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'
import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
import dvStyleFontFamily from '@/assets/svg/dv-style-fontFamily.svg'
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
import { computed, h, reactive, ref, toRefs, watch } from 'vue'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@ -390,14 +413,13 @@ const fontSizeList = computed(() => {
}
return arr
})
const styleOptionKeyArrayPre = [
{
value: 'fontFamily',
label: '字体',
customOption: fontFamilyList,
width: '188px',
icon: 'dv-style-fontFamily'
icon: dvStyleFontFamily
}
]
@ -408,21 +430,21 @@ const styleOptionMountedKeyArray = [
label: '字间距',
customOption: letterSpacingList.value,
width: '90px',
icon: 'dv-style-letterSpacing'
icon: dvStyleLetterSpacing
},
{
value: 'fontSize',
label: '字体大小',
customOption: fontSizeList.value,
width: '90px',
icon: 'dv-style-fontSize'
icon: dvStyleFontSize
},
{
value: 'activeFontSize',
label: '激活字体大小',
customOption: fontSizeList.value,
width: '90px',
icon: 'dv-style-activeFont'
icon: dvStyleActiveFont
}
]
@ -433,14 +455,14 @@ const styleOptionKeyArray = [
label: '滚动速度',
customOption: scrollSpeedList,
width: '90px',
icon: 'dv-style-scroll-speed'
icon: dvStyleScrollSpeed
},
{
value: 'opacity',
label: '不透明度',
customOption: opacitySizeList,
width: '90px',
icon: 'dv-style-opacity'
icon: dvStyleOpacity
}
]

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

@ -1,63 +1,30 @@
import board_1 from '@/assets/svg/board_1.svg'
import board_2 from '@/assets/svg/board_2.svg'
import board_3 from '@/assets/svg/board_3.svg'
import board_4 from '@/assets/svg/board_4.svg'
import board_5 from '@/assets/svg/board_5.svg'
import board_6 from '@/assets/svg/board_6.svg'
import board_7 from '@/assets/svg/board_7.svg'
import board_8 from '@/assets/svg/board_8.svg'
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'
export const CANVAS_MATERIAL = [
{
category: 'CanvasBoard',
title: '边框',
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: '边框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 }
]
},
{
@ -65,24 +32,9 @@ export const CANVAS_MATERIAL = [
title: '图形',
span: 8,
details: [
{
value: 'RectShape',
type: 'graphical',
title: '矩形',
icon: 'graphical-rect'
},
{
value: 'SvgTriangle',
type: 'graphical',
title: '三角形',
icon: 'graphical-triangle'
},
{
value: 'CircleShape',
type: 'graphical',
title: '圆形',
icon: 'graphical-circular'
}
{ value: 'RectShape', type: 'graphical', title: '矩形', icon: graphicalRect },
{ value: 'SvgTriangle', type: 'graphical', title: '三角形', icon: graphicalTriangle },
{ value: 'CircleShape', type: 'graphical', title: '圆形', icon: graphicalCircular }
]
},
{
@ -90,516 +42,108 @@ export const CANVAS_MATERIAL = [
title: '图标',
span: 4,
details: [
{
value: 'Plus',
type: 'inner_svg',
icon: 'Plus'
},
{
value: 'Minus',
type: 'inner_svg',
icon: 'Minus'
},
{
value: 'CirclePlus',
type: 'inner_svg',
icon: 'CirclePlus'
},
{
value: 'Search',
type: 'inner_svg',
icon: 'Search'
},
{
value: 'Female',
type: 'inner_svg',
icon: 'Female'
},
{
value: 'Male',
type: 'inner_svg',
icon: 'Male'
},
{
value: 'Aim',
type: 'inner_svg',
icon: 'Aim'
},
{
value: 'House',
type: 'inner_svg',
icon: 'House'
},
{
value: 'FullScreen',
type: 'inner_svg',
icon: 'FullScreen'
},
{
value: 'Loading',
type: 'inner_svg',
icon: 'Loading'
},
{
value: 'Link',
type: 'inner_svg',
icon: 'Link'
},
{
value: 'Service',
type: 'inner_svg',
icon: 'Service'
},
{
value: 'Pointer',
type: 'inner_svg',
icon: 'Pointer'
},
{
value: 'Star',
type: 'inner_svg',
icon: 'Star'
},
{
value: 'Notification',
type: 'inner_svg',
icon: 'Notification'
},
{
value: 'Connection',
type: 'inner_svg',
icon: 'Connection'
},
{
value: 'ChatDotRound',
type: 'inner_svg',
icon: 'ChatDotRound'
},
{
value: 'Setting',
type: 'inner_svg',
icon: 'Setting'
},
{
value: 'Clock',
type: 'inner_svg',
icon: 'Clock'
},
{
value: 'Position',
type: 'inner_svg',
icon: 'Position'
},
{
value: 'Discount',
type: 'inner_svg',
icon: 'Discount'
},
{
value: 'Odometer',
type: 'inner_svg',
icon: 'Odometer'
},
{
value: 'ChatSquare',
type: 'inner_svg',
icon: 'ChatSquare'
},
{
value: 'ChatRound',
type: 'inner_svg',
icon: 'ChatRound'
},
{
value: 'ChatLineRound',
type: 'inner_svg',
icon: 'ChatLineRound'
},
{
value: 'ChatLineSquare',
type: 'inner_svg',
icon: 'ChatLineSquare'
},
{
value: 'ChatDotSquare',
type: 'inner_svg',
icon: 'ChatDotSquare'
},
{
value: 'View',
type: 'inner_svg',
icon: 'View'
},
{
value: 'Hide',
type: 'inner_svg',
icon: 'Hide'
},
{
value: 'Unlock',
type: 'inner_svg',
icon: 'Unlock'
},
{
value: 'Lock',
type: 'inner_svg',
icon: 'Lock'
},
{
value: 'RefreshRight',
type: 'inner_svg',
icon: 'RefreshRight'
},
{
value: 'RefreshLeft',
type: 'inner_svg',
icon: 'RefreshLeft'
},
{
value: 'Refresh',
type: 'inner_svg',
icon: 'Refresh'
},
{
value: 'Bell',
type: 'inner_svg',
icon: 'Bell'
},
{
value: 'MuteNotification',
type: 'inner_svg',
icon: 'MuteNotification'
},
{
value: 'User',
type: 'inner_svg',
icon: 'User'
},
{
value: 'Check',
type: 'inner_svg',
icon: 'Check'
},
{
value: 'CircleCheck',
type: 'inner_svg',
icon: 'CircleCheck'
},
{
value: 'Warning',
type: 'inner_svg',
icon: 'Warning'
},
{
value: 'CircleClose',
type: 'inner_svg',
icon: 'CircleClose'
},
{
value: 'Close',
type: 'inner_svg',
icon: 'Close'
},
{
value: 'PieChart',
type: 'inner_svg',
icon: 'PieChart'
},
{
value: 'More',
type: 'inner_svg',
icon: 'More'
},
{
value: 'Compass',
type: 'inner_svg',
icon: 'Compass'
},
{
value: 'Filter',
type: 'inner_svg',
icon: 'Filter'
},
{
value: 'Switch',
type: 'inner_svg',
icon: 'Switch'
},
{
value: 'Select',
type: 'inner_svg',
icon: 'Select'
},
{
value: 'SemiSelect',
type: 'inner_svg',
icon: 'SemiSelect'
},
{
value: 'CloseBold',
type: 'inner_svg',
icon: 'CloseBold'
},
{
value: 'EditPen',
type: 'inner_svg',
icon: 'EditPen'
},
{
value: 'Edit',
type: 'inner_svg',
icon: 'Edit'
},
{
value: 'Message',
type: 'inner_svg',
icon: 'Message'
},
{
value: 'MessageBox',
type: 'inner_svg',
icon: 'MessageBox'
},
{
value: 'TurnOff',
type: 'inner_svg',
icon: 'TurnOff'
},
{
value: 'Finished',
type: 'inner_svg',
icon: 'Finished'
},
{
value: 'Delete',
type: 'inner_svg',
icon: 'Delete'
},
{
value: 'Crop',
type: 'inner_svg',
icon: 'Crop'
},
{
value: 'SwitchButton',
type: 'inner_svg',
icon: 'SwitchButton'
},
{
value: 'Operation',
type: 'inner_svg',
icon: 'Operation'
},
{
value: 'Open',
type: 'inner_svg',
icon: 'Open'
},
{
value: 'Remove',
type: 'inner_svg',
icon: 'Remove'
},
{
value: 'ZoomOut',
type: 'inner_svg',
icon: 'ZoomOut'
},
{
value: 'ZoomIn',
type: 'inner_svg',
icon: 'ZoomIn'
},
{
value: 'InfoFilled',
type: 'inner_svg',
icon: 'InfoFilled'
},
{
value: 'CircleCheckFilled',
type: 'inner_svg',
icon: 'CircleCheckFilled'
},
{
value: 'SuccessFilled',
type: 'inner_svg',
icon: 'SuccessFilled'
},
{
value: 'WarningFilled',
type: 'inner_svg',
icon: 'WarningFilled'
},
{
value: 'CircleCloseFilled',
type: 'inner_svg',
icon: 'CircleCloseFilled'
},
{
value: 'QuestionFilled',
type: 'inner_svg',
icon: 'QuestionFilled'
},
{
value: 'WarnTriangleFilled',
type: 'inner_svg',
icon: 'WarnTriangleFilled'
},
{
value: 'UserFilled',
type: 'inner_svg',
icon: 'UserFilled'
},
{
value: 'MoreFilled',
type: 'inner_svg',
icon: 'MoreFilled'
},
{
value: 'Tools',
type: 'inner_svg',
icon: 'Tools'
},
{
value: 'HomeFilled',
type: 'inner_svg',
icon: 'HomeFilled'
},
{
value: 'Menu',
type: 'inner_svg',
icon: 'Menu'
},
{
value: 'UploadFilled',
type: 'inner_svg',
icon: 'UploadFilled'
},
{
value: 'Avatar',
type: 'inner_svg',
icon: 'Avatar'
},
{
value: 'HelpFilled',
type: 'inner_svg',
icon: 'HelpFilled'
},
{
value: 'Share',
type: 'inner_svg',
icon: 'Share'
},
{
value: 'StarFilled',
type: 'inner_svg',
icon: 'StarFilled'
},
{
value: 'Comment',
type: 'inner_svg',
icon: 'Comment'
},
{
value: 'Histogram',
type: 'inner_svg',
icon: 'Histogram'
},
{
value: 'Grid',
type: 'inner_svg',
icon: 'Grid'
},
{
value: 'Promotion',
type: 'inner_svg',
icon: 'Promotion'
},
{
value: 'DeleteFilled',
type: 'inner_svg',
icon: 'DeleteFilled'
},
{
value: 'RemoveFilled',
type: 'inner_svg',
icon: 'RemoveFilled'
},
{
value: 'CirclePlusFilled',
type: 'inner_svg',
icon: 'CirclePlusFilled'
},
{
value: 'ArrowLeft',
type: 'inner_svg',
icon: 'ArrowLeft'
},
{
value: 'ArrowUp',
type: 'inner_svg',
icon: 'ArrowUp'
},
{
value: 'ArrowRight',
type: 'inner_svg',
icon: 'ArrowRight'
},
{
value: 'ArrowDown',
type: 'inner_svg',
icon: 'ArrowDown'
},
{
value: 'ArrowLeftBold',
type: 'inner_svg',
icon: 'ArrowLeftBold'
},
{
value: 'ArrowUpBold',
type: 'inner_svg',
icon: 'ArrowUpBold'
},
{
value: 'ArrowRightBold',
type: 'inner_svg',
icon: 'ArrowRightBold'
},
{
value: 'ArrowDownBold',
type: 'inner_svg',
icon: 'ArrowDownBold'
},
{
value: 'DArrowRight',
type: 'inner_svg',
icon: 'DArrowRight'
},
{
value: 'DArrowLeft',
type: 'inner_svg',
icon: 'DArrowLeft'
},
{
value: 'Download',
type: 'inner_svg',
icon: 'Download'
},
{
value: 'Upload',
type: 'inner_svg',
icon: 'Upload'
},
{
value: 'Top',
type: 'inner_svg',
icon: 'Top'
},
{
value: 'Bottom',
type: 'inner_svg',
icon: 'Bottom'
}
{ value: 'Plus', type: 'inner_svg', icon: 'Plus' },
{ value: 'Minus', type: 'inner_svg', icon: 'Minus' },
{ value: 'CirclePlus', type: 'inner_svg', icon: 'CirclePlus' },
{ value: 'Search', type: 'inner_svg', icon: 'Search' },
{ value: 'Female', type: 'inner_svg', icon: 'Female' },
{ value: 'Male', type: 'inner_svg', icon: 'Male' },
{ value: 'Aim', type: 'inner_svg', icon: 'Aim' },
{ value: 'House', type: 'inner_svg', icon: 'House' },
{ value: 'FullScreen', type: 'inner_svg', icon: 'FullScreen' },
{ value: 'Loading', type: 'inner_svg', icon: 'Loading' },
{ value: 'Link', type: 'inner_svg', icon: 'Link' },
{ value: 'Service', type: 'inner_svg', icon: 'Service' },
{ value: 'Pointer', type: 'inner_svg', icon: 'Pointer' },
{ value: 'Star', type: 'inner_svg', icon: 'Star' },
{ value: 'Notification', type: 'inner_svg', icon: 'Notification' },
{ value: 'Connection', type: 'inner_svg', icon: 'Connection' },
{ value: 'ChatDotRound', type: 'inner_svg', icon: 'ChatDotRound' },
{ value: 'Setting', type: 'inner_svg', icon: 'Setting' },
{ value: 'Clock', type: 'inner_svg', icon: 'Clock' },
{ value: 'Position', type: 'inner_svg', icon: 'Position' },
{ value: 'Discount', type: 'inner_svg', icon: 'Discount' },
{ value: 'Odometer', type: 'inner_svg', icon: 'Odometer' },
{ value: 'ChatSquare', type: 'inner_svg', icon: 'ChatSquare' },
{ value: 'ChatRound', type: 'inner_svg', icon: 'ChatRound' },
{ value: 'ChatLineRound', type: 'inner_svg', icon: 'ChatLineRound' },
{ value: 'ChatLineSquare', type: 'inner_svg', icon: 'ChatLineSquare' },
{ value: 'ChatDotSquare', type: 'inner_svg', icon: 'ChatDotSquare' },
{ value: 'View', type: 'inner_svg', icon: 'View' },
{ value: 'Hide', type: 'inner_svg', icon: 'Hide' },
{ value: 'Unlock', type: 'inner_svg', icon: 'Unlock' },
{ value: 'Lock', type: 'inner_svg', icon: 'Lock' },
{ value: 'RefreshRight', type: 'inner_svg', icon: 'RefreshRight' },
{ value: 'RefreshLeft', type: 'inner_svg', icon: 'RefreshLeft' },
{ value: 'Refresh', type: 'inner_svg', icon: 'Refresh' },
{ value: 'Bell', type: 'inner_svg', icon: 'Bell' },
{ value: 'MuteNotification', type: 'inner_svg', icon: 'MuteNotification' },
{ value: 'User', type: 'inner_svg', icon: 'User' },
{ value: 'Check', type: 'inner_svg', icon: 'Check' },
{ value: 'CircleCheck', type: 'inner_svg', icon: 'CircleCheck' },
{ value: 'Warning', type: 'inner_svg', icon: 'Warning' },
{ value: 'CircleClose', type: 'inner_svg', icon: 'CircleClose' },
{ value: 'Close', type: 'inner_svg', icon: 'Close' },
{ value: 'PieChart', type: 'inner_svg', icon: 'PieChart' },
{ value: 'More', type: 'inner_svg', icon: 'More' },
{ value: 'Compass', type: 'inner_svg', icon: 'Compass' },
{ value: 'Filter', type: 'inner_svg', icon: 'Filter' },
{ value: 'Switch', type: 'inner_svg', icon: 'Switch' },
{ value: 'Select', type: 'inner_svg', icon: 'Select' },
{ value: 'SemiSelect', type: 'inner_svg', icon: 'SemiSelect' },
{ value: 'CloseBold', type: 'inner_svg', icon: 'CloseBold' },
{ value: 'EditPen', type: 'inner_svg', icon: 'EditPen' },
{ value: 'Edit', type: 'inner_svg', icon: 'Edit' },
{ value: 'Message', type: 'inner_svg', icon: 'Message' },
{ value: 'MessageBox', type: 'inner_svg', icon: 'MessageBox' },
{ value: 'TurnOff', type: 'inner_svg', icon: 'TurnOff' },
{ value: 'Finished', type: 'inner_svg', icon: 'Finished' },
{ value: 'Delete', type: 'inner_svg', icon: 'Delete' },
{ value: 'Crop', type: 'inner_svg', icon: 'Crop' },
{ value: 'SwitchButton', type: 'inner_svg', icon: 'SwitchButton' },
{ value: 'Operation', type: 'inner_svg', icon: 'Operation' },
{ value: 'Open', type: 'inner_svg', icon: 'Open' },
{ value: 'Remove', type: 'inner_svg', icon: 'Remove' },
{ value: 'ZoomOut', type: 'inner_svg', icon: 'ZoomOut' },
{ value: 'ZoomIn', type: 'inner_svg', icon: 'ZoomIn' },
{ value: 'InfoFilled', type: 'inner_svg', icon: 'InfoFilled' },
{ value: 'CircleCheckFilled', type: 'inner_svg', icon: 'CircleCheckFilled' },
{ value: 'SuccessFilled', type: 'inner_svg', icon: 'SuccessFilled' },
{ value: 'WarningFilled', type: 'inner_svg', icon: 'WarningFilled' },
{ value: 'CircleCloseFilled', type: 'inner_svg', icon: 'CircleCloseFilled' },
{ value: 'QuestionFilled', type: 'inner_svg', icon: 'QuestionFilled' },
{ value: 'WarnTriangleFilled', type: 'inner_svg', icon: 'WarnTriangleFilled' },
{ value: 'UserFilled', type: 'inner_svg', icon: 'UserFilled' },
{ value: 'MoreFilled', type: 'inner_svg', icon: 'MoreFilled' },
{ value: 'Tools', type: 'inner_svg', icon: 'Tools' },
{ value: 'HomeFilled', type: 'inner_svg', icon: 'HomeFilled' },
{ value: 'Menu', type: 'inner_svg', icon: 'Menu' },
{ value: 'UploadFilled', type: 'inner_svg', icon: 'UploadFilled' },
{ value: 'Avatar', type: 'inner_svg', icon: 'Avatar' },
{ value: 'HelpFilled', type: 'inner_svg', icon: 'HelpFilled' },
{ value: 'Share', type: 'inner_svg', icon: 'Share' },
{ value: 'StarFilled', type: 'inner_svg', icon: 'StarFilled' },
{ value: 'Comment', type: 'inner_svg', icon: 'Comment' },
{ value: 'Histogram', type: 'inner_svg', icon: 'Histogram' },
{ value: 'Grid', type: 'inner_svg', icon: 'Grid' },
{ value: 'Promotion', type: 'inner_svg', icon: 'Promotion' },
{ value: 'DeleteFilled', type: 'inner_svg', icon: 'DeleteFilled' },
{ value: 'RemoveFilled', type: 'inner_svg', icon: 'RemoveFilled' },
{ value: 'CirclePlusFilled', type: 'inner_svg', icon: 'CirclePlusFilled' },
{ value: 'ArrowLeft', type: 'inner_svg', icon: 'ArrowLeft' },
{ value: 'ArrowUp', type: 'inner_svg', icon: 'ArrowUp' },
{ value: 'ArrowRight', type: 'inner_svg', icon: 'ArrowRight' },
{ value: 'ArrowDown', type: 'inner_svg', icon: 'ArrowDown' },
{ value: 'ArrowLeftBold', type: 'inner_svg', icon: 'ArrowLeftBold' },
{ value: 'ArrowUpBold', type: 'inner_svg', icon: 'ArrowUpBold' },
{ value: 'ArrowRightBold', type: 'inner_svg', icon: 'ArrowRightBold' },
{ value: 'ArrowDownBold', type: 'inner_svg', icon: 'ArrowDownBold' },
{ value: 'DArrowRight', type: 'inner_svg', icon: 'DArrowRight' },
{ value: 'DArrowLeft', type: 'inner_svg', icon: 'DArrowLeft' },
{ value: 'Download', type: 'inner_svg', icon: 'Download' },
{ value: 'Upload', type: 'inner_svg', icon: 'Upload' },
{ value: 'Top', type: 'inner_svg', icon: 'Top' },
{ value: 'Bottom', type: 'inner_svg', icon: 'Bottom' }
]
}
]

3
core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { computed, toRefs } from 'vue'
import { ElFormItem, ElIcon, ElInputNumber } from 'element-plus-secondary'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@ -63,7 +64,7 @@ const handleInput = value => {
<div>Tab轮播退出编辑模式才开生效</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>

4
core/core-frontend/src/custom-component/component-group/CommonGroup.vue
View File

@ -88,8 +88,8 @@ const groupActiveChange = category => {
<Icon
v-if="['outer_svg', 'graphical'].includes(chartInfo.type)"
class-name="item-top-icon"
:name="chartInfo.icon"
/>
><component :is="chartInfo.icon"></component
></Icon>
<component v-else style="color: #a6a6a6" :is="chartInfo.icon"></component>
</div>
<div v-if="chartInfo.title" class="item-bottom">

3
core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import dbMoreWeb from '@/assets/svg/db-more-web.svg'
import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@ -38,7 +39,7 @@ const handleDragEnd = e => {
>
<drag-component
:themes="themes"
icon="db-more-web"
:icon="dbMoreWeb"
label="网页"
drag-info="DeFrame&DeFrame"
></drag-component>

4
core/core-frontend/src/custom-component/component-group/DragComponent.vue
View File

@ -34,7 +34,9 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
<div class="drag-component" :class="'drag-' + themes">
<div draggable="true" :data-id="dragInfo" class="icon-content">
<span v-if="name" class="label-content">{{ name }}</span>
<Icon v-if="icon" class="drag-icon" :name="icon" />
<Icon v-if="icon" class="drag-icon"
><component class="svg-icon drag-icon" :is="icon"></component
></Icon>
</div>
<div class="label-content">
<span>{{ label }}</span>

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

@ -1,4 +1,7 @@
<script setup lang="ts">
import iconVideo from '@/assets/svg/icon-video.svg'
import dvPictureShow from '@/assets/svg/dv-picture-show.svg'
import iconStream from '@/assets/svg/icon-stream.svg'
import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@ -45,21 +48,21 @@ const handleDragEnd = e => {
<div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
<drag-component
:themes="themes"
icon="dv-picture-show"
:icon="dvPictureShow"
label="图片"
drag-info="Picture&Picture"
v-on:click="newComponent('Picture')"
></drag-component>
<drag-component
:themes="themes"
icon="icon-video"
:icon="iconVideo"
label="视频"
drag-info="DeVideo&DeVideo"
v-on:click="newComponent('DeVideo')"
></drag-component>
<drag-component
:themes="themes"
icon="icon-stream"
:icon="iconStream"
label="流媒体"
drag-info="DeStreamMedia&DeStreamMedia"
v-on:click="newComponent('DeStreamMedia')"

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

@ -1,4 +1,5 @@
<script setup lang="ts">
import dbMoreWeb from '@/assets/svg/db-more-web.svg'
import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@ -52,7 +53,7 @@ const handleDragEnd = e => {
></drag-component>
<drag-component
:themes="themes"
icon="db-more-web"
:icon="dbMoreWeb"
label="网页"
drag-info="DeFrame&DeFrame"
v-on:click="newComponent('DeFrame')"

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

@ -1,4 +1,5 @@
<script setup lang="ts">
import dvFilterShow from '@/assets/svg/dv-filter-show.svg'
import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@ -51,7 +52,7 @@ const newComponent = componentName => {
>
<drag-component
:themes="themes"
icon="dv-filter-show"
:icon="dvFilterShow"
label="查询组件"
drag-info="VQuery&VQuery"
></drag-component>

3
core/core-frontend/src/custom-component/component-group/TabsGroup.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import dvTabShow from '@/assets/svg/dv-tab-show.svg'
import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@ -50,7 +51,7 @@ const handleDragEnd = e => {
>
<drag-component
:themes="themes"
icon="dv-tab-show"
:icon="dvTabShow"
label="Tab"
drag-info="DeTabs&DeTabs"
></drag-component>

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

@ -1,4 +1,6 @@
<script setup lang="ts">
import dvRichText from '@/assets/svg/dv-richText.svg'
import dvScrollText from '@/assets/svg/dv-scroll-text.svg'
import { toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@ -46,7 +48,7 @@ const newComponent = (componentName, innerType) => {
<div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
<drag-component
:themes="themes"
icon="dv-richText"
:icon="dvRichText"
label="富文本"
drag-info="UserView&rich-text"
v-on:click="newComponent('UserView', 'rich-text')"
@ -54,7 +56,7 @@ const newComponent = (componentName, innerType) => {
<drag-component
v-if="dvModel === 'dataV'"
:themes="themes"
icon="dv-scroll-text"
:icon="dvScrollText"
label="跑马灯"
drag-info="ScrollText&ScrollText"
v-on:click="newComponent('ScrollText', 'ScrollText')"

17
core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
View File

@ -1,4 +1,5 @@
<script setup lang="tsx">
import { iconChartMap } from '@/components/icon-group/chart-list'
import { reactive, ref, toRefs } from 'vue'
import eventBus from '@/utils/eventBus'
import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
@ -6,6 +7,7 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
import { ElScrollbar } from 'element-plus-secondary'
import { XpackComponent } from '@/components/plugin'
import { iconChartDarkMap } from '@/components/icon-group/chart-dark-list'
const props = defineProps({
propValue: {
@ -142,11 +144,16 @@ const loadPluginCategory = data => {
v-if="chartInfo['isPlugin']"
:static-content="chartInfo.icon"
/>
<Icon
v-else
class-name="item-top-icon"
:name="chartInfo.icon + (props.themes === 'dark' ? '-dark' : '')"
/>
<Icon v-else class-name="item-top-icon"
><component
class="svg-icon item-top-icon"
:is="
props.themes === 'dark'
? iconChartDarkMap[`${chartInfo.icon}-dark`]
: iconChartMap[chartInfo.icon]
"
></component
></Icon>
</div>
<div class="item-bottom">
<span>{{ chartInfo.title }}</span>

3
core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
View File

@ -14,7 +14,7 @@
</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</span>
@ -26,6 +26,7 @@
</template>
<script setup lang="ts">
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { reactive, ref, toRefs, watch, computed } from 'vue'
import { dvMainStoreWithOut } from '../../store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia/dist/pinia'

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

@ -13,7 +13,7 @@
<template #item="{ element }">
<span :key="element.name" class="item-dimension" :title="element.title">
<el-icon size="20px">
<Icon name="drag" />
<Icon name="drag"><drag class="svg-icon" /></Icon>
</el-icon>
<span class="item-span">
{{ element.title }}
@ -32,6 +32,7 @@
</template>
<script setup lang="ts">
import drag from '@/assets/svg/drag.svg'
import draggable from 'vuedraggable'
import { onMounted, ref, toRefs } from 'vue'
import { deepCopy } from '@/utils/utils'

8
core/core-frontend/src/custom-component/v-query/Component.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import eventBus from '@/utils/eventBus'
import { ElMessage } from 'element-plus-secondary'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@ -595,12 +597,14 @@ const autoStyle = computed(() => {
>
<el-tooltip effect="dark" content="设置过滤条件" placement="top">
<el-icon @click="editeQueryConfig(ele.id)">
<Icon name="icon_edit_outlined"></Icon>
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="删除条件" placement="top">
<el-icon style="margin-left: 8px" @click="delQueryConfig(index)">
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>
</div>

3
core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
import { ElSelect } from 'element-plus-secondary'
import { computed, ref, toRefs } from 'vue'
import RangeFilterTime from '@/custom-component/v-query/RangeFilterTime.vue'
@ -388,7 +389,7 @@ defineExpose({
style="margin-left: -4px"
>
<template #icon>
<Icon name="icon_admin_outlined"></Icon>
<Icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></Icon>
</template>
设置
</el-button>

20
core/core-frontend/src/custom-component/v-query/QueryCascade.vue
View File

@ -1,4 +1,8 @@
<script lang="ts" setup>
import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import joinJoin from '@/assets/svg/join-join.svg'
import { ref, shallowRef } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElMessage } from 'element-plus-secondary'
@ -202,14 +206,14 @@ defineExpose({
</template>
<div class="content">
<el-icon style="font-size: 16px">
<Icon name="icon_info_colorful"></Icon>
<Icon name="icon_info_colorful"><icon_info_colorful class="svg-icon" /></Icon>
</el-icon>
基于当前查询组件的查询条件，如果需要进行级联配置，需要满足以下条件：<br />
1. 展示类型：文本下拉组件和数字下拉组件；2. 选项值来源：选择数据集<br />
</div>
<el-button text @click="addCascadeBlock">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
添加级联配置
</el-button>
@ -217,13 +221,15 @@ defineExpose({
<div style="display: flex; align-items: center; justify-content: space-between">
<el-button :disabled="item.length === 2" text @click="addCascadeItem(item)">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
添加级联条件
</el-button>
<el-button @click="deleteCascadeBlock(index)" class="cascade-delete-block" text>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</div>
@ -257,7 +263,7 @@ defineExpose({
</div>
<div class="cascade-icon">
<el-icon>
<Icon name="join-join"></Icon>
<Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
</el-icon>
</div>
<div class="item-field">
@ -277,7 +283,9 @@ defineExpose({
</div>
<el-button v-show="idx !== 0" @click="deleteCascade(idx, item)" class="cascade-delete" text>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</div>

158
core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
View File

@ -1,5 +1,16 @@
getLastStart
<script lang="ts" setup>
import more_v from '@/assets/svg/more_v.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
import de_pwd_invisible from '@/assets/svg/de_pwd_invisible.svg'
import dvFolder from '@/assets/svg/dv-folder.svg'
import icon_dataset from '@/assets/svg/icon_dataset.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import {
ref,
reactive,
@ -31,6 +42,8 @@ import draggable from 'vuedraggable'
import type { ManipulateType } from 'dayjs'
import dayjs from 'dayjs'
import ConditionDefaultConfiguration from '@/custom-component/v-query/ConditionDefaultConfiguration.vue'
import { iconChartMap } from '@/components/icon-group/chart-list'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
@ -1455,7 +1468,7 @@ defineExpose({
<div class="title">
查询条件
<el-icon @click="addQueryCriteria">
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
<draggable tag="div" :list="conditions" handle=".handle">
@ -1468,14 +1481,14 @@ defineExpose({
:class="element.id === activeCondition && 'active'"
>
<el-icon class="handle">
<Icon name="icon_drag_outlined"></Icon>
<Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
</el-icon>
<div class="label flex-align-center icon" :title="element.name">
<el-icon
v-if="!element.auto && element.showError"
style="font-size: 16px; color: #f54a45"
>
<icon name="icon_warning_filled"></icon>
<icon name="icon_warning_filled"><icon_warning_filled class="svg-icon" /></icon>
</el-icon>
{{ element.name }}
</div>
@ -1483,7 +1496,7 @@ defineExpose({
<handle-more
@handle-command="cmd => addOperation(cmd, element, index)"
:menu-list="typeList"
icon-name="more_v"
:icon-name="more_v"
placement="bottom-end"
></handle-more>
<el-icon
@ -1491,10 +1504,12 @@ defineExpose({
@click.stop="element.visible = !element.visible"
v-if="element.visible"
>
<Icon name="icon_visible_outlined"></Icon>
<Icon name="icon_visible_outlined"
><icon_visible_outlined class="svg-icon"
/></Icon>
</el-icon>
<el-icon class="hover-icon" @click.stop="element.visible = !element.visible" v-else>
<Icon name="de_pwd_invisible"></Icon>
<Icon name="de_pwd_invisible"><de_pwd_invisible class="svg-icon" /></Icon>
</el-icon>
</div>
<div @click.stop v-if="activeConditionForRename.id === element.id" class="rename">
@ -1525,7 +1540,7 @@ defineExpose({
</div>
</template>
<el-icon style="margin-left: 4px; color: #646a73">
<icon name="icon_info_outlined"></icon>
<icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></icon>
</el-icon>
</el-tooltip>
</div>
@ -1549,7 +1564,11 @@ defineExpose({
<div v-for="field in fields" :key="field.componentId" class="list-item_field_de">
<el-checkbox :label="field.componentId"
><el-icon class="component-type">
<Icon :name="canvasViewInfo[field.componentId].type"></Icon> </el-icon
<Icon
><component
:is="iconChartMap[canvasViewInfo[field.componentId].type]"
></component
></Icon> </el-icon
><span
:title="canvasViewInfo[field.componentId].title"
class="checkbox-name ellipsis"
@ -1569,14 +1588,6 @@ defineExpose({
<template v-if="curComponent.checkedFieldsMap[field.componentId]" #prefix>
<el-icon>
<Icon
:name="`field_${
fieldType[
getDetype(
curComponent.checkedFieldsMap[field.componentId],
Object.values(field.fields)
)
]
}`"
:className="`field-icon-${
fieldType[
getDetype(
@ -1585,6 +1596,18 @@ defineExpose({
)
]
}`"
><component
:is="
iconFieldMap[
fieldType[
getDetype(
curComponent.checkedFieldsMap[field.componentId],
Object.values(field.fields)
)
]
]
"
></component
></Icon>
</el-icon>
</template>
@ -1618,9 +1641,12 @@ defineExpose({
:title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
>
<el-icon>
<Icon
:name="`field_${fieldType[ele.deType]}`"
:className="`field-icon-${fieldType[ele.deType]}`"
<Icon :className="`field-icon-${fieldType[ele.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[ele.deType]}`"
:is="iconFieldMap[fieldType[ele.deType]]"
></component
></Icon>
</el-icon>
<span :title="ele.name || ele.variableName" class="ellipsis">
@ -1717,7 +1743,7 @@ defineExpose({
@click="startTreeDesign"
>
<template #icon>
<icon name="icon_edit_outlined"></icon>
<icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
</template>
</el-button>
</div>
@ -1731,9 +1757,12 @@ defineExpose({
<span class="level-index">层级{{ indexCascade[index + 1] }}</span>
<span class="field-type"
><el-icon>
<Icon
:name="`field_${fieldType[ele.deType]}`"
:className="`field-icon-${fieldType[ele.deType]}`"
<Icon :className="`field-icon-${fieldType[ele.deType]}`"
><component
:class="`field-icon-${fieldType[ele.deType]}`"
class="svg-icon"
:is="iconFieldMap[fieldType[ele.deType]]"
></component
></Icon> </el-icon
></span>
<span class="field-tree_name">{{ ele.name }}</span>
@ -1741,7 +1770,7 @@ defineExpose({
</template>
<el-button @click="startTreeDesign" v-else text>
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
点击进行树结构设计
</el-button>
@ -1816,10 +1845,10 @@ defineExpose({
<template #default="{ node, data }">
<div class="content">
<el-icon size="18px" v-if="!data.leaf">
<Icon name="dv-folder"></Icon>
<Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
</el-icon>
<el-icon size="18px" v-if="data.leaf">
<Icon name="icon_dataset"></Icon>
<Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
</el-icon>
<span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
node.label
@ -1839,12 +1868,18 @@ defineExpose({
<template v-if="curComponent.field.id" #prefix>
<el-icon>
<Icon
:name="`field_${
fieldType[getDetype(curComponent.field.id, curComponent.dataset.fields)]
}`"
:className="`field-icon-${
fieldType[getDetype(curComponent.field.id, curComponent.dataset.fields)]
}`"
><component
:is="
iconFieldMap[
fieldType[
getDetype(curComponent.field.id, curComponent.dataset.fields)
]
]
"
></component
></Icon>
</el-icon>
</template>
@ -1865,9 +1900,12 @@ defineExpose({
:title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
>
<el-icon>
<Icon
:name="`field_${fieldType[ele.deType]}`"
:className="`field-icon-${fieldType[ele.deType]}`"
<Icon :className="`field-icon-${fieldType[ele.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[ele.deType]}`"
:is="iconFieldMap[fieldType[ele.deType]]"
></component
></Icon>
</el-icon>
<span>
@ -1887,16 +1925,20 @@ defineExpose({
<template v-if="curComponent.displayId" #prefix>
<el-icon>
<Icon
:name="`field_${
fieldType[
getDetype(curComponent.displayId, curComponent.dataset.fields)
]
}`"
:className="`field-icon-${
fieldType[
getDetype(curComponent.displayId, curComponent.dataset.fields)
]
}`"
><component
:is="
iconFieldMap[
fieldType[
getDetype(curComponent.displayId, curComponent.dataset.fields)
]
]
"
></component
></Icon>
</el-icon>
</template>
@ -1917,9 +1959,12 @@ defineExpose({
:title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
>
<el-icon>
<Icon
:name="`field_${fieldType[ele.deType]}`"
:className="`field-icon-${fieldType[ele.deType]}`"
<Icon :className="`field-icon-${fieldType[ele.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[ele.deType]}`"
:is="iconFieldMap[fieldType[ele.deType]]"
></component
></Icon>
</el-icon>
<span>
@ -1941,12 +1986,18 @@ defineExpose({
<template v-if="curComponent.sortId" #prefix>
<el-icon>
<Icon
:name="`field_${
fieldType[getDetype(curComponent.sortId, curComponent.dataset.fields)]
}`"
:className="`field-icon-${
fieldType[getDetype(curComponent.sortId, curComponent.dataset.fields)]
}`"
><component
:is="
iconFieldMap[
fieldType[
getDetype(curComponent.sortId, curComponent.dataset.fields)
]
]
"
></component
></Icon>
</el-icon>
</template>
@ -1962,9 +2013,12 @@ defineExpose({
:title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
>
<el-icon>
<Icon
:name="`field_${fieldType[ele.deType]}`"
:className="`field-icon-${fieldType[ele.deType]}`"
<Icon :className="`field-icon-${fieldType[ele.deType]}`"
><component
:class="`field-icon-${fieldType[ele.deType]}`"
class="svg-icon"
:is="iconFieldMap[fieldType[ele.deType]]"
></component
></Icon>
</el-icon>
<span>
@ -1994,7 +2048,9 @@ defineExpose({
<template #reference>
<el-button text>
<template #icon>
<Icon name="icon_edit_outlined"></Icon>
<Icon name="icon_edit_outlined"
><icon_edit_outlined class="svg-icon"
/></Icon>
</template>
{{ t('common.edit') }}
</el-button>
@ -2023,7 +2079,9 @@ defineExpose({
text
>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</div>
@ -2031,7 +2089,9 @@ defineExpose({
<div class="add-btn">
<el-button @click="valueSource.push('')" text>
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"
><icon_add_outlined class="svg-icon"
/></Icon>
</template>
添加选项值
</el-button>

8
core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import { guid } from '@/views/visualized/data/dataset/form/util.js'
import { ElMessage } from 'element-plus-secondary'
import { ref, shallowRef, computed } from 'vue'
@ -79,7 +81,7 @@ defineExpose({
<div style="display: flex; align-items: center; justify-content: space-between">
<el-button :disabled="treeList.length === 5" text @click="addCascadeItem">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
添加层级
</el-button>
@ -108,7 +110,9 @@ defineExpose({
</div>
<el-button v-show="idx !== 0" @click="deleteCascade(idx)" class="cascade-delete" text>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</div>

6
core/core-frontend/src/layout/components/AccountOperator.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import userImg from '@/assets/svg/user-img.svg'
import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'
import { computed, ref, unref } from 'vue'
import { Icon } from '@/components/icon-custom'
import { useUserStoreWithOut } from '@/store/modules/user'
@ -111,11 +113,11 @@ if (uid.value === '1') {
v-click-outside="openPopover"
>
<el-icon class="main-color">
<Icon name="user-img" />
<Icon name="user-img"><userImg class="svg-icon" /></Icon>
</el-icon>
<span class="uname-span">{{ name }}</span>
<el-icon class="el-icon-animate">
<Icon name="icon_expand-down_filled" />
<Icon name="icon_expand-down_filled"><icon_expandDown_filled class="svg-icon" /></Icon>
</el-icon>
</div>
<el-popover

8
core/core-frontend/src/layout/components/AiComponent.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import dvAiWindowMax from '@/assets/svg/dv-ai-window-max.svg'
import dvAiWindowMin from '@/assets/svg/dv-ai-window-min.svg'
import { onMounted, ref } from 'vue'
import { useEmitt } from '@/hooks/web/useEmitt'
const aiDialogShow = ref(false)
@ -39,7 +41,11 @@ onMounted(() => {
<div class="ai-content">
<el-icon class="close" @click="closeAi"><Close /></el-icon>
<el-icon class="size-class" @click="sizeChange"
><Icon :name="'dv-ai-window-' + sizeState"></Icon
><Icon
><component
:is="sizeState === 'min' ? dvAiWindowMin : dvAiWindowMax"
class="svg-icon"
></component></Icon
></el-icon>
<iframe :src="baseUrl" style="width: 100%; height: 100%" frameborder="0" allow="microphone">
</iframe>

3
core/core-frontend/src/layout/components/AiTips.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import dvAi from '@/assets/svg/dv-ai.svg'
import { onMounted, ref } from 'vue'
const visible = ref(true)
const emits = defineEmits(['confirm'])
@ -31,7 +32,7 @@ onMounted(() => {
<template #reference>
<div class="ai-popper-tips-icon">
<el-icon style="margin: 2px" class="ai-icon">
<Icon name="dv-ai" />
<Icon name="dv-ai"><dvAi class="svg-icon" /></Icon>
</el-icon>
</div>
</template>

8
core/core-frontend/src/layout/components/CollapseBar.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import icon_sideFold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
import icon_sideExpand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
const props = defineProps({
isCollapse: Boolean
})
@ -11,7 +13,11 @@ const setCollapse = () => {
<template>
<div class="de-collapse-bar" @click="setCollapse">
<el-icon style="color: #646a73">
<Icon :name="!isCollapse ? 'icon_side-fold_outlined' : 'icon_side-expand_outlined'"></Icon>
<Icon
><component
:is="!isCollapse ? icon_sideFold_outlined : icon_sideExpand_outlined"
></component
></Icon>
</el-icon>
{{ !isCollapse ? '收起导航' : '' }}
</div>

3
core/core-frontend/src/layout/components/Copilot.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import copilot from '@/assets/svg/copilot.svg'
import { onMounted, ref } from 'vue'
const visible = ref(true)
const emits = defineEmits(['confirm'])
@ -32,7 +33,7 @@ onMounted(() => {
<template #reference>
<div class="copilot-popper-tips-icon">
<el-icon style="margin: 2px" class="ai-icon">
<Icon name="copilot" />
<Icon name="copilot"><copilot class="svg-icon" /></Icon>
</el-icon>
</div>
</template>

26
core/core-frontend/src/layout/components/Header.vue
View File

@ -1,4 +1,8 @@
<script lang="ts" setup>
import logo from '@/assets/svg/logo.svg'
import copilot from '@/assets/svg/copilot.svg'
import dvAi from '@/assets/svg/dv-ai.svg'
import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'
import { computed, onMounted, ref } from 'vue'
import { usePermissionStore } from '@/store/modules/permission'
import { isExternal } from '@/utils/validate'
@ -18,7 +22,7 @@ import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
import AiComponent from '@/layout/components/AiComponent.vue'
import { findBaseParams } from '@/api/aiComponent'
import AiTips from '@/layout/components/AiTips.vue'
import Copilot from '@/layout/components/Copilot.vue'
import CopilotCom from '@/layout/components/Copilot.vue'
const appearanceStore = useAppearanceStoreWithOut()
const { push } = useRouter()
@ -120,13 +124,9 @@ onMounted(() => {
<template>
<el-header class="header-flex" :class="{ 'header-light': navigateBg && navigateBg === 'light' }">
<img class="logo" v-if="navigate" :src="navigate" alt="" />
<Icon
style="cursor: pointer"
v-else
@click="handleIconClick"
className="logo"
name="logo"
></Icon>
<Icon v-else @click="handleIconClick" className="logo" name="logo"
><logo class="svg-icon logo" style="cursor: pointer"
/></Icon>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
@ -143,9 +143,9 @@ onMounted(() => {
class="ai-icon copilot-icon"
v-if="!showOverlayCopilot && appearanceStore.getShowCopilot"
>
<Icon name="copilot" @click="handleCopilotClick" />
<Icon name="copilot" @click="handleCopilotClick"><copilot class="svg-icon" /></Icon>
</el-icon>
<Copilot
<CopilotCom
@confirm="copilotConfirm"
v-if="showOverlayCopilot && appearanceStore.getShowCopilot"
class="copilot-icon-tips"
@ -156,14 +156,16 @@ onMounted(() => {
class="ai-icon"
v-if="aiBaseUrl && !showOverlay && appearanceStore.getShowAi"
>
<Icon name="dv-ai" @click="handleAiClick" />
<Icon name="dv-ai" @click="handleAiClick"><dvAi class="svg-icon" /></Icon>
</el-icon>
<el-tooltip effect="dark" content="数据导出中心" placement="bottom">
<el-icon
class="preview-download_icon"
:class="navigateBg === 'light' && 'is-light-setting'"
>
<Icon name="dv-preview-download" @click="downloadClick" />
<Icon name="dv-preview-download" @click="downloadClick"
><dvPreviewDownload class="svg-icon"
/></Icon>
</el-icon>
</el-tooltip>

6
core/core-frontend/src/layout/components/HeaderSystem.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import logo from '@/assets/svg/logo.svg'
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
import { computed } from 'vue'
import { ElHeader } from 'element-plus-secondary'
import { useRouter } from 'vue-router'
@ -23,13 +25,13 @@ const navigate = computed(() => appearanceStore.getNavigate)
:class="{ 'header-light': navigateBg && navigateBg === 'light' }"
>
<img class="logo" v-if="navigate" :src="navigate" alt="" />
<Icon class="de-logo" v-else className="logo" name="logo"></Icon>
<Icon class="de-logo" v-else className="logo" name="logo"><logo class="svg-icon logo" /></Icon>
<el-divider direction="vertical" />
<span class="system">{{ props.title || '系统设置' }}</span>
<div class="operate-setting">
<span @click="backToMain" class="work-bar flex-align-center">
<el-icon>
<Icon name="icon_left_outlined"></Icon>
<Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
</el-icon>
<span class="work">返回工作台</span>
</span>

3
core/core-frontend/src/layout/components/LangSelector.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
import { ref, onMounted } from 'vue'
import { Icon } from '@/components/icon-custom'
import { useUserStoreWithOut } from '@/store/modules/user'
@ -38,7 +39,7 @@ onMounted(() => {
>
<span>{{ item.name }}</span>
<el-icon v-if="language === item.value">
<Icon name="icon_done_outlined"></Icon>
<Icon name="icon_done_outlined"><icon_done_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</div>

5
core/core-frontend/src/layout/components/SystemCfg.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import iconSetting from '@/assets/svg/icon-setting.svg'
import { useRouter } from 'vue-router'
import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
import { computed } from 'vue'
@ -24,7 +25,9 @@ const redirectUser = () => {
}"
>
<el-icon @click="redirectUser">
<Icon class="icon-setting" name="icon-setting" />
<Icon class="icon-setting" name="icon-setting"
><iconSetting class="svg-icon icon-setting"
/></Icon>
</el-icon>
</div>
</el-tooltip>

15
core/core-frontend/src/layout/components/ToolboxCfg.vue
View File

@ -1,4 +1,8 @@
<script lang="ts" setup>
import toolboxData_fill from '@/assets/svg/toolbox-data_fill.svg'
import toolboxIcon_template from '@/assets/svg/toolbox-icon_template.svg'
import toolboxLog from '@/assets/svg/toolbox-log.svg'
import sysTools from '@/assets/svg/sys-tools.svg'
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import TopDocCard from '@/layout/components/TopDocCard.vue'
@ -10,7 +14,11 @@ const { push, resolve } = useRouter()
const showToolbox = ref(true)
const cardInfoList = ref([] as unknown[])
const iconMap = {
'toolbox-data_fill': toolboxData_fill,
'toolbox-icon_template': toolboxIcon_template,
'toolbox-log': toolboxLog
}
const loadInfoList = () => {
const toolboxMenu = resolve('/toolbox')
if (!toolboxMenu) {
@ -22,12 +30,13 @@ const loadInfoList = () => {
showToolbox.value = false
return
}
children.forEach(item => {
const temp = {
name: item.meta.title,
rName: item.name,
path: item.path,
icon: 'toolbox-' + item.meta.icon
icon: iconMap['toolbox-' + item.meta.icon]
}
cardInfoList.value.push(temp)
})
@ -65,7 +74,7 @@ onMounted(() => {
}"
>
<el-icon>
<Icon name="sys-tools" />
<Icon name="sys-tools"><sysTools class="svg-icon" /></Icon>
</el-icon>
</div>
</template>

15
core/core-frontend/src/layout/components/TopDoc.vue
View File

@ -1,4 +1,9 @@
<script lang="ts" setup>
import topEnterpriseTrial from '@/assets/svg/top-enterprise-trial.svg'
import topHelpDoc from '@/assets/svg/top-help-doc.svg'
import topProductBbs from '@/assets/svg/top-product-bbs.svg'
import topTechnology from '@/assets/svg/top-technology.svg'
import docs from '@/assets/svg/docs.svg'
import { computed } from 'vue'
import { Icon } from '@/components/icon-custom'
import TopDocCard from '@/layout/components/TopDocCard.vue'
@ -8,14 +13,14 @@ const navigateBg = computed(() => appearanceStore.getNavigateBg)
const help = computed(() => appearanceStore.getHelp)
const cardInfoList = [
{ name: '帮助文档', url: help.value || 'https://dataease.io/docs/v2/', icon: 'top-help-doc' },
{ name: '产品论坛', url: 'https://bbs.fit2cloud.com/c/de/6', icon: 'top-product-bbs' },
{ name: '帮助文档', url: help.value || 'https://dataease.io/docs/v2/', icon: topHelpDoc },
{ name: '产品论坛', url: 'https://bbs.fit2cloud.com/c/de/6', icon: topProductBbs },
{
name: '技术博客',
url: 'https://blog.fit2cloud.com/categories/dataease',
icon: 'top-technology'
icon: topTechnology
},
{ name: '企业版试用', url: 'https://jinshuju.net/f/TK5TTd', icon: 'top-enterprise-trial' }
{ name: '企业版试用', url: 'https://jinshuju.net/f/TK5TTd', icon: topEnterpriseTrial }
]
</script>
@ -41,7 +46,7 @@ const cardInfoList = [
:class="{ 'is-light-setting': navigateBg && navigateBg === 'light' }"
>
<el-icon>
<Icon name="docs" />
<Icon name="docs"><docs class="svg-icon" /></Icon>
</el-icon>
</div>
</template>

4
core/core-frontend/src/layout/components/TopDocCard.vue
View File

@ -25,7 +25,9 @@ const openBlank = () => {
<template>
<div class="doc-card" @click="openBlank">
<el-row class="base-show">
<Icon class-name="item-top-icon" :name="cardInfo.icon" />
<Icon class-name="item-top-icon"
><component class="svg-icon item-top-icon" :is="cardInfo.icon"></component
></Icon>
</el-row>
<el-row class="base-show show-content"> {{ cardInfo.name }}</el-row>
</div>

3
core/core-frontend/src/views/401/index.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="page-not-found">
<Icon className="login-logo-icon" name="401"></Icon>
<Icon className="login-logo-icon" name="401"><Four class="svg-icon login-logo-icon" /></Icon>
<span class="span-403">{{ t('common.no_menu_tips') }}</span>
</div>
</template>
<script lang="ts" setup>
import Four from '@/assets/svg/401.svg'
import { Icon } from '@/components/icon-custom'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

3
core/core-frontend/src/views/404/index.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="page-not-found">
<Icon className="login-logo-icon" name="403"></Icon>
<Icon className="login-logo-icon" name="403"><Four class="svg-icon login-logo-icon" /></Icon>
<span class="span-403">{{ t('common.no_auth_tips') }}</span>
</div>
</template>
<script lang="ts" setup>
import Four from '@/assets/svg/403.svg'
import { Icon } from '@/components/icon-custom'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

3
core/core-frontend/src/views/about/index.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import logo from '@/assets/svg/logo.svg'
import aboutBg from '@/assets/img/about-bg.png'
import { ref, reactive, onMounted, h } from 'vue'
import { useUserStoreWithOut } from '@/store/modules/user'
@ -196,7 +197,7 @@ const syncFree = () => {
<img width="792" height="180" :src="aboutBg" />
<div class="color-overlay"></div>
<el-icon class="logo">
<icon name="logo"></icon>
<icon name="logo"><logo class="svg-icon" /></icon>
</el-icon>
<div class="content">
<div class="item">

17
core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
View File

@ -3,6 +3,8 @@ import { reactive, ref, toRefs } from 'vue'
import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
import Icon from '@/components/icon-custom/src/Icon.vue'
import { ElScrollbar } from 'element-plus-secondary'
import { iconChartDarkMap } from '@/components/icon-group/chart-dark-list'
import { iconChartMap } from '@/components/icon-group/chart-list'
const props = defineProps({
propValue: {
@ -99,11 +101,16 @@ const groupActiveChange = category => {
v-if="chartInfo['isPlugin']"
:static-content="chartInfo.icon"
/>
<Icon
v-else
class-name="item-top-icon"
:name="chartInfo.icon + (props.themes === 'dark' ? '-dark' : '')"
/>
<Icon v-else class-name="item-top-icon"
><component
class="svg-icon item-top-icon"
:is="
props.themes === 'dark'
? iconChartDarkMap[`${chartInfo.icon}-dark`]
: iconChartMap[chartInfo.icon]
"
></component
></Icon>
</div>
<div class="item-bottom">
<span>{{ chartInfo.title }}</span>

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

@ -1,8 +1,10 @@
<script lang="tsx" setup></script>
<script lang="tsx" setup>
import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
</script>
<template>
<div class="view-panel-Mask">
<Icon class-name="item-icon" name="dv-up-arrow" />
<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>

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

@ -1,4 +1,7 @@
<script setup lang="ts">
import dvFolder from '@/assets/svg/dv-folder.svg'
import icon_dataset from '@/assets/svg/icon_dataset.svg'
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
import { Tree } from '../../../../visualized/data/dataset/form/CreatDsGroup.vue'
import { computed, ref, watch, onMounted } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
@ -324,16 +327,16 @@ onMounted(() => {
>
<div class="m-icon">
<el-icon v-if="!data.leaf">
<Icon name="dv-folder" />
<Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
</el-icon>
<el-icon v-if="data.leaf">
<Icon name="icon_dataset" />
<Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
</el-icon>
</div>
{{ node.label }}
<el-icon class="checked-item" v-if="_modelValue === data.id">
<Icon name="icon_done_outlined" />
<Icon name="icon_done_outlined"><icon_done_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</template>

113
core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
View File

@ -1,8 +1,17 @@
<script lang="tsx" setup>
import icon_sortAToZ_outlined from '@/assets/svg/icon_sort-a-to-z_outlined.svg'
import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
@ -198,19 +207,26 @@ onMounted(() => {
>
<span v-if="type !== 'extColor'" style="display: flex; color: #646a73">
<el-icon v-if="'asc' === item.sort">
<Icon name="icon_sort-a-to-z_outlined" />
<Icon name="icon_sort-a-to-z_outlined"
><icon_sortAToZ_outlined class="svg-icon"
/></Icon>
</el-icon>
<el-icon v-if="'desc' === item.sort">
<Icon name="icon_sort-z-to-a_outlined" />
<Icon name="icon_sort-z-to-a_outlined"
><icon_sortZToA_outlined class="svg-icon"
/></Icon>
</el-icon>
<el-icon v-if="'custom_sort' === item.sort">
<Icon name="icon_sort_outlined" />
<Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
</el-icon>
<el-icon>
<Icon
:className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
:name="`field_${fieldType[item.deType]}`"
/>
<Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
:is="iconFieldMap[fieldType[item.deType]]"
></component
></Icon>
</el-icon>
</span>
<span v-if="type === 'extColor'" style="display: flex; color: #646a73">
@ -218,7 +234,12 @@ onMounted(() => {
<Icon
:className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
:name="`field_${fieldType[item.deType]}`"
/>
><component
class="svg-icon"
:class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
:is="iconFieldMap[fieldType[item.deType]]"
></component
></Icon>
</el-icon>
</span>
<el-tooltip
@ -236,11 +257,13 @@ onMounted(() => {
<span>{{ t('chart.delete') }}</span>
</template>
<el-icon class="child remove-icon">
<Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem" />
<Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem"
><icon_deleteTrash_outlined class="svg-icon inner-clas"
/></Icon>
</el-icon>
</el-tooltip>
<el-icon class="child" style="position: absolute; top: 7px; right: 10px; cursor: pointer">
<Icon name="icon_down_outlined-1" />
<Icon name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
</el-icon>
</el-tag>
<template #dropdown>
@ -260,13 +283,13 @@ onMounted(() => {
<span class="inner-dropdown-menu menu-item-padding">
<span class="menu-item-content">
<el-icon>
<Icon name="icon_sort_outlined" />
<Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
</el-icon>
<span>{{ t('chart.sort') }}</span>
<span class="summary-span-item">({{ t('chart.' + props.item.sort) }})</span>
</span>
<el-icon>
<Icon name="icon_right_outlined" />
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -282,7 +305,9 @@ onMounted(() => {
>
{{ t('chart.none') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'none' === item.sort" />
<Icon name="icon_done_outlined" v-if="'none' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -293,7 +318,9 @@ onMounted(() => {
>
{{ t('chart.asc') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'asc' === item.sort" />
<Icon name="icon_done_outlined" v-if="'asc' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -304,7 +331,9 @@ onMounted(() => {
>
{{ t('chart.desc') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'desc' === item.sort" />
<Icon name="icon_done_outlined" v-if="'desc' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -319,7 +348,9 @@ onMounted(() => {
>
{{ t('chart.custom_sort') }}{{ t('chart.sort') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'custom_sort' === item.sort" />
<Icon name="icon_done_outlined" v-if="'custom_sort' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -351,7 +382,7 @@ onMounted(() => {
<span class="summary-span-item">({{ t('chart.' + item.dateStyle) }})</span>
</span>
<el-icon>
<Icon name="icon_right_outlined" />
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -367,7 +398,9 @@ onMounted(() => {
>
{{ t('chart.y') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -382,7 +415,9 @@ onMounted(() => {
>
{{ t('chart.y_Q') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y_Q' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y_Q' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -393,7 +428,9 @@ onMounted(() => {
>
{{ t('chart.y_M') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y_M' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y_M' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -408,7 +445,9 @@ onMounted(() => {
>
{{ t('chart.y_W') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y_W' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y_W' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -419,7 +458,9 @@ onMounted(() => {
>
{{ t('chart.y_M_d') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y_M_d' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y_M_d' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -435,7 +476,9 @@ onMounted(() => {
>
{{ t('chart.H_m_s') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'H_m_s' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'H_m_s' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -450,7 +493,9 @@ onMounted(() => {
>
{{ t('chart.y_M_d_H_m') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y_M_d_H_m' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y_M_d_H_m' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -464,7 +509,9 @@ onMounted(() => {
>
{{ t('chart.y_M_d_H_m_s') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'y_M_d_H_m_s' === item.dateStyle" />
<Icon name="icon_done_outlined" v-if="'y_M_d_H_m_s' === item.dateStyle"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -487,7 +534,7 @@ onMounted(() => {
<span class="summary-span-item">({{ t('chart.' + item.datePattern) }})</span>
</span>
<el-icon>
<Icon name="icon_right_outlined" />
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -506,7 +553,9 @@ onMounted(() => {
>
{{ t('chart.date_sub') }}(1990-01-01)
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'date_sub' === item.datePattern" />
<Icon name="icon_done_outlined" v-if="'date_sub' === item.datePattern"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -520,7 +569,9 @@ onMounted(() => {
>
{{ t('chart.date_split') }}(1990/01/01)
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'date_split' === item.datePattern" />
<Icon name="icon_done_outlined" v-if="'date_split' === item.datePattern"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -538,7 +589,7 @@ onMounted(() => {
:command="beforeClickItem('rename')"
>
<el-icon>
<icon name="icon_edit_outlined"></icon>
<icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
</el-icon>
<span>{{ t('chart.show_name_set') }}</span>
</el-dropdown-item>
@ -553,7 +604,9 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item class="menu-item-padding" divided :command="beforeClickItem('remove')">
<el-icon>
<icon name="icon_delete-trash_outlined"></icon>
<icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></icon>
</el-icon>
<span>{{ t('chart.delete') }}</span>
</el-dropdown-item>

18
core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
View File

@ -1,9 +1,12 @@
<script lang="tsx" setup>
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { onMounted, ref, toRefs, watch } from 'vue'
import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
import { Delete } from '@element-plus/icons-vue'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
@ -91,21 +94,26 @@ onMounted(() => {
>
<span style="display: flex">
<el-icon>
<Icon
:className="`field-icon-${fieldType[item.deType]}`"
:name="`field_${fieldType[item.deType]}`"
<Icon :className="`field-icon-${fieldType[item.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[item.deType]}`"
:is="iconFieldMap[fieldType[item.deType]]"
></component
></Icon>
</el-icon>
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<el-icon class="child remove-icon" size="14px">
<Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem" />
<Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
><icon_deleteTrash_outlined class="svg-icon inner-class"
/></Icon>
</el-icon>
<el-icon
class="child"
style="position: absolute; top: 7px; right: 10px; color: #a6a6a6; cursor: pointer"
>
<Icon name="icon_down_outlined-1" />
<Icon name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
</el-icon>
</el-tag>
<template #dropdown>

24
core/core-frontend/src/views/chart/components/editor/drag-item/FilterItem.vue
View File

@ -1,9 +1,12 @@
<script lang="tsx" setup>
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import { onMounted, reactive, toRefs, watch } from 'vue'
import { formatterItem } from '@/views/chart/components/js/formatter'
import { getItemType } from './utils'
import { Delete, Filter } from '@element-plus/icons-vue'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
const state = reactive({
formatterItem: formatterItem,
@ -100,25 +103,28 @@ onMounted(() => {
>
<span style="display: flex">
<el-icon>
<Icon
:className="`field-icon-${fieldType[item.deType]}`"
:name="`field_${fieldType[item.deType]}`"
<Icon :className="`field-icon-${fieldType[item.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[item.deType]}`"
:is="iconFieldMap[fieldType[item.deType]]"
></component
></Icon>
</el-icon>
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<el-icon class="child remove-icon" size="14px">
<Icon
name="icon_delete-trash_outlined"
class-name="inner-class"
@click="removeItem"
></Icon>
<Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
><icon_deleteTrash_outlined class="svg-icon inner-class"
/></Icon>
</el-icon>
<el-icon
class="child"
style="position: absolute; top: 7px; right: 10px; color: #a6a6a6; cursor: pointer"
>
<Icon name="icon_down_outlined-1" class="el-icon-arrow-down el-icon-delete"></Icon>
<Icon name="icon_down_outlined-1" class="el-icon-arrow-down el-icon-delete"
><icon_down_outlined1 class="svg-icon el-icon-arrow-down el-icon-delete"
/></Icon>
</el-icon>
</el-tag>
<template #dropdown>

129
core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
View File

@ -1,4 +1,15 @@
<script lang="tsx" setup>
import icon_sortAToZ_outlined from '@/assets/svg/icon_sort-a-to-z_outlined.svg'
import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
import icon_functions_outlined from '@/assets/svg/icon_functions_outlined.svg'
import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { formatterItem } from '@/views/chart/components/js/formatter'
@ -7,6 +18,7 @@ import { Filter } from '@element-plus/icons-vue'
import { quotaViews } from '@/views/chart/components/js/util'
import { SUPPORT_Y_M } from '@/views/chart/components/editor/util/chart'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
@ -287,19 +299,26 @@ onMounted(() => {
>
<span style="display: flex; color: #646a73">
<el-icon v-if="'asc' === item.sort">
<Icon name="icon_sort-a-to-z_outlined" />
<Icon name="icon_sort-a-to-z_outlined"
><icon_sortAToZ_outlined class="svg-icon"
/></Icon>
</el-icon>
<el-icon v-if="'desc' === item.sort">
<Icon name="icon_sort-z-to-a_outlined" />
<Icon name="icon_sort-z-to-a_outlined"
><icon_sortZToA_outlined class="svg-icon"
/></Icon>
</el-icon>
<el-icon v-if="'custom_sort' === item.sort">
<Icon name="icon_sort_outlined" />
<Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
</el-icon>
<el-icon>
<Icon
:className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
:name="`field_${fieldType[item.deType]}`"
/>
<Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
><component
:class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
class="svg-icon"
:is="iconFieldMap[fieldType[item.deType]]"
></component
></Icon>
</el-icon>
</span>
<el-tooltip
@ -335,12 +354,14 @@ onMounted(() => {
<span>{{ t('chart.delete') }}</span>
</template>
<el-icon class="child remove-icon">
<Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem" />
<Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem"
><icon_deleteTrash_outlined class="svg-icon inner-class"
/></Icon>
</el-icon>
</el-tooltip>
<el-icon class="child" style="position: absolute; top: 7px; right: 10px; cursor: pointer">
<Icon name="icon_down_outlined-1" />
<Icon name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
</el-icon>
</el-tag>
<template #dropdown>
@ -360,12 +381,12 @@ onMounted(() => {
<span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
<span class="menu-item-content">
<el-icon>
<Icon name="icon_dashboard_outlined" />
<Icon name="icon_dashboard_outlined" ><icon_dashboard_outlined class="svg-icon" /></Icon>
</el-icon>
<span>{{ t('chart.chart_type') }}</span>
</span>
<el-icon>
<Icon name="icon_right_outlined"></Icon>
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -381,7 +402,7 @@ onMounted(() => {
>
{{ t('chart.chart_bar') }}
<el-icon class="sub-menu-content&#45;&#45;icon">
<Icon name="icon_done_outlined" v-if="'bar' === item.chartType" />
<Icon name="icon_done_outlined" v-if="'bar' === item.chartType" ><icon_done_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -392,7 +413,7 @@ onMounted(() => {
>
{{ t('chart.chart_line') }}
<el-icon class="sub-menu-content&#45;&#45;icon">
<Icon name="icon_done_outlined" v-if="'line' === item.chartType" />
<Icon name="icon_done_outlined" v-if="'line' === item.chartType" ><icon_done_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -414,13 +435,15 @@ onMounted(() => {
<span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
<span class="menu-item-content">
<el-icon>
<Icon name="icon_functions_outlined" />
<Icon name="icon_functions_outlined"
><icon_functions_outlined class="svg-icon"
/></Icon>
</el-icon>
<span>{{ t('chart.summary') }}</span>
<span class="summary-span-item">({{ t('chart.' + item.summary) }})</span>
</span>
<el-icon>
<Icon name="icon_right_outlined"></Icon>
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -440,7 +463,9 @@ onMounted(() => {
>
{{ t('chart.sum') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'sum' === item.summary" />
<Icon name="icon_done_outlined" v-if="'sum' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -455,7 +480,9 @@ onMounted(() => {
>
{{ t('chart.avg') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'avg' === item.summary" />
<Icon name="icon_done_outlined" v-if="'avg' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -470,7 +497,9 @@ onMounted(() => {
>
{{ t('chart.max') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'max' === item.summary" />
<Icon name="icon_done_outlined" v-if="'max' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -485,7 +514,9 @@ onMounted(() => {
>
{{ t('chart.min') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'min' === item.summary" />
<Icon name="icon_done_outlined" v-if="'min' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -500,7 +531,9 @@ onMounted(() => {
>
{{ t('chart.stddev_pop') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'stddev_pop' === item.summary" />
<Icon name="icon_done_outlined" v-if="'stddev_pop' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -515,7 +548,9 @@ onMounted(() => {
>
{{ t('chart.var_pop') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'var_pop' === item.summary" />
<Icon name="icon_done_outlined" v-if="'var_pop' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -526,7 +561,9 @@ onMounted(() => {
>
{{ t('chart.count') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'count' === item.summary" />
<Icon name="icon_done_outlined" v-if="'count' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -541,7 +578,9 @@ onMounted(() => {
>
{{ t('chart.count_distinct') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'count_distinct' === item.summary" />
<Icon name="icon_done_outlined" v-if="'count_distinct' === item.summary"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -565,7 +604,7 @@ onMounted(() => {
<span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
<span class="menu-item-content">
<el-icon>
<!-- <Icon name="icon_describe_outlined" />-->
<!-- <Icon name="icon_describe_outlined" ><icon_describe_outlined class="svg-icon" /></Icon>-->
</el-icon>
<span>{{ t('chart.quick_calc') }}</span>
<span class="summary-span-item">
@ -575,7 +614,7 @@ onMounted(() => {
</span>
</span>
<el-icon>
<Icon name="icon_right_outlined" />
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -591,7 +630,9 @@ onMounted(() => {
>
{{ t('chart.none') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'none' === item.compareCalc.type" />
<Icon name="icon_done_outlined" v-if="'none' === item.compareCalc.type"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -606,10 +647,9 @@ onMounted(() => {
>
{{ t('chart.yoy_label') }}
<el-icon class="sub-menu-content--icon">
<Icon
name="icon_done_outlined"
v-if="'yoy_label' === item.compareCalc.type"
/>
<Icon name="icon_done_outlined" v-if="'yoy_label' === item.compareCalc.type"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -624,10 +664,9 @@ onMounted(() => {
>
{{ t('chart.percent') }}
<el-icon class="sub-menu-content--icon">
<Icon
name="icon_done_outlined"
v-if="'percent' === item.compareCalc.type"
/>
<Icon name="icon_done_outlined" v-if="'percent' === item.compareCalc.type"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -656,13 +695,13 @@ onMounted(() => {
<span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
<span class="menu-item-content">
<el-icon>
<Icon name="icon_sort_outlined" />
<Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
</el-icon>
<span>{{ t('chart.sort') }}</span>
<span class="summary-span-item">({{ t('chart.' + item.sort) }})</span>
</span>
<el-icon>
<Icon name="icon_right_outlined" />
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
<template #dropdown>
@ -678,7 +717,9 @@ onMounted(() => {
>
{{ t('chart.none') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'none' === item.sort" />
<Icon name="icon_done_outlined" v-if="'none' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -689,7 +730,9 @@ onMounted(() => {
>
{{ t('chart.asc') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'asc' === item.sort" />
<Icon name="icon_done_outlined" v-if="'asc' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -700,7 +743,9 @@ onMounted(() => {
>
{{ t('chart.desc') }}
<el-icon class="sub-menu-content--icon">
<Icon name="icon_done_outlined" v-if="'desc' === item.sort" />
<Icon name="icon_done_outlined" v-if="'desc' === item.sort"
><icon_done_outlined class="svg-icon"
/></Icon>
</el-icon>
</span>
</el-dropdown-item>
@ -733,13 +778,15 @@ onMounted(() => {
<el-dropdown-item class="menu-item-padding" :command="beforeClickItem('rename')">
<el-icon>
<icon name="icon_edit_outlined"></icon>
<icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
</el-icon>
<span>{{ t('chart.show_name_set') }}</span>
</el-dropdown-item>
<el-dropdown-item class="menu-item-padding" :command="beforeClickItem('remove')">
<el-icon>
<icon name="icon_delete-trash_outlined"></icon>
<icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></icon>
</el-icon>
<span>{{ t('chart.delete') }}</span>
</el-dropdown-item>

3
core/core-frontend/src/views/chart/components/editor/drag-item/components/CustomSortEdit.vue
View File

@ -1,4 +1,5 @@
<script lang="tsx" setup>
import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
import draggable from 'vuedraggable'
import { getFieldData } from '@/api/chart'
import { reactive, watch, ref } from 'vue'
@ -88,7 +89,7 @@ init()
<template #item="{ element }">
<span :key="element.value" class="item-dimension" :title="element.value">
<el-icon class="item-icon">
<Icon name="icon_drag_outlined" />
<Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
</el-icon>
<span class="item-span">
{{ element.value }}

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

@ -1,4 +1,6 @@
<script lang="ts" setup>
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
import FunctionCfg from '@/views/chart/components/editor/editor-senior/components/FunctionCfg.vue'
import ScrollCfg from '@/views/chart/components/editor/editor-senior/components/ScrollCfg.vue'
@ -341,7 +343,9 @@ const removeJumpSenior = () => {
@click="removeLinkageSenior"
>
<el-icon>
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</button>
</template>
@ -353,7 +357,7 @@ const removeJumpSenior = () => {
:disabled="!chart.linkageActive"
>
<el-icon>
<Icon name="icon_edit_outlined" />
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</button>
</span>
@ -382,7 +386,9 @@ const removeJumpSenior = () => {
@click="removeJumpSenior"
>
<el-icon>
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</button>
</template>
@ -394,7 +400,7 @@ const removeJumpSenior = () => {
:disabled="!chart.jumpActive"
>
<el-icon>
<Icon name="icon_edit_outlined" />
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</button>
</span>

6
core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
View File

@ -1,4 +1,6 @@
<script lang="tsx" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { onMounted, reactive, watch, computed, PropType } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElIcon, ElMessage } from 'element-plus-secondary'
@ -164,7 +166,7 @@ onMounted(() => {
@click="editLine"
>
<el-icon>
<Icon name="icon_edit_outlined" />
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</button>
</span>
@ -220,7 +222,7 @@ onMounted(() => {
<span> {{ t('chart.assist_line_tip') }}</span>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</div>

19
core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { PropType, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElIcon, ElMessage } from 'element-plus-secondary'
@ -8,6 +9,7 @@ import TextLabelThresholdEdit from '@/views/chart/components/editor/editor-senio
import TextThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue'
import { fieldType } from '@/utils/attr'
import { defaultsDeep } from 'lodash-es'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
@ -320,7 +322,7 @@ init()
>
<template #icon>
<el-icon size="14px">
<Icon name="icon_edit_outlined" />
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</template>
</el-button>
@ -396,7 +398,7 @@ init()
>
<template #icon>
<el-icon size="14px">
<Icon name="icon_edit_outlined" />
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</template>
</el-button>
@ -494,7 +496,7 @@ init()
>
<template #icon>
<el-icon size="14px">
<Icon name="icon_edit_outlined" />
<Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
</el-icon>
</template>
</el-button>
@ -514,10 +516,13 @@ init()
<div class="field-style" :class="{ 'field-style-dark': themes === 'dark' }">
<span>
<el-icon>
<Icon
:className="`field-icon-${fieldType[fieldItem.field.deType]}`"
:name="`field_${fieldType[fieldItem.field.deType]}`"
/>
<Icon :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[fieldItem.field.deType]}`"
:is="iconFieldMap[fieldType[fieldItem.field.deType]]"
></component
></Icon>
</el-icon>
</span>
<span :title="fieldItem.field.name" class="field-text">{{

20
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue
View File

@ -1,9 +1,12 @@
<script lang="tsx" setup>
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import { computed, onMounted, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { fieldType } from '@/utils/attr'
import { find } from 'lodash-es'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
@ -230,10 +233,13 @@ onMounted(() => {
>
<span style="float: left">
<el-icon>
<Icon
:className="`field-icon-${fieldType[item.deType]}`"
:name="`field_${fieldType[item.deType]}`"
/>
<Icon :className="`field-icon-${fieldType[item.deType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldType[item.deType]}`"
:is="iconFieldMap[fieldType[item.deType]]"
></component
></Icon>
</el-icon>
</span>
<span :style="{ float: 'left', color: '#8492a6', fontSize: '12px' }">
@ -298,7 +304,9 @@ onMounted(() => {
class="hover-icon"
@click="removeLine(index)"
>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-col>
@ -306,7 +314,7 @@ onMounted(() => {
</div>
<el-button class="circle-button" text style="margin-left: 5px" @click="addLine">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
{{ t('chart.add_assist_line') }}
</el-button>

24
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
View File

@ -1,8 +1,12 @@
<script lang="tsx" setup>
import icon_info_filled from '@/assets/svg/icon_info_filled.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import { PropType, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
const { t } = useI18n()
@ -248,7 +252,9 @@ init()
<template>
<el-col>
<div class="tip">
<Icon name="icon_info_filled" class="icon-style"></Icon>
<Icon name="icon_info_filled" class="icon-style"
><icon_info_filled class="svg-icon icon-style"
/></Icon>
<span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}</span>
</div>
@ -274,8 +280,8 @@ init()
:className="`field-icon-${
fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
}`"
:name="`field_${fieldType[fieldOption.deType]}`"
/>
><component :is="iconFieldMap[fieldType[fieldOption.deType]]"></component
></Icon>
</el-icon>
{{ fieldOption.name }}
</el-option>
@ -289,7 +295,9 @@ init()
@click="removeThreshold(fieldIndex)"
>
<el-icon size="20px" style="color: #646a73">
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-button>
</el-row>
@ -422,7 +430,9 @@ init()
@click="removeCondition(fieldItem, index)"
>
<el-icon size="20px" style="color: #646a73">
<Icon name="icon_delete-trash_outlined" />
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</el-icon>
</el-button>
</div>
@ -437,7 +447,7 @@ init()
@click="addConditions(fieldItem)"
>
<template #icon>
<Icon name="icon_add_outlined" />
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
{{ t('chart.add_style') }}
</el-button>
@ -452,7 +462,7 @@ init()
@click="addThreshold"
>
<template #icon>
<Icon name="icon_add_outlined" />
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
{{ t('chart.add_condition') }}
</el-button>

8
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue
View File

@ -1,4 +1,6 @@
<script lang="tsx" setup>
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
@ -90,7 +92,7 @@ init()
<el-col>
<el-button class="circle-button" circle style="margin-bottom: 10px" @click="addThreshold">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
</el-button>
<div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@ -136,7 +138,9 @@ init()
@click="removeThreshold(index)"
>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</el-col>

8
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
View File

@ -1,4 +1,6 @@
<script lang="tsx" setup>
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
@ -103,7 +105,7 @@ init()
<el-col>
<el-button class="circle-button" circle style="margin-bottom: 10px" @click="addThreshold">
<template #icon>
<Icon name="icon_add_outlined"></Icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
</el-button>
<div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@ -197,7 +199,9 @@ init()
@click="removeThreshold(index)"
>
<template #icon>
<Icon name="icon_delete-trash_outlined"></Icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
</div>

17
core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
View File

@ -1,4 +1,7 @@
<script lang="tsx" setup>
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { PropType, toRefs, computed } from 'vue'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
@ -295,7 +298,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
@click="checkBold('fontWeight')"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -313,7 +316,9 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
@click="checkItalic('fontStyle')"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"
><icon_italic_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -351,7 +356,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
placement="top"
>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</el-checkbox>
@ -413,7 +418,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
@click="checkBold('fontWeightBtn')"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -431,7 +436,9 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
@click="checkItalic('fontStyleBtn')"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"
><icon_italic_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>

3
core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
import { ElColorPicker, ElPopover } from 'element-plus-secondary'
import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
@ -389,7 +390,7 @@ const colorItemBorderColor = (index, state) => {
@click="customColorExtendSettingOpened = !customColorExtendSettingOpened"
>
<el-icon style="font-size: 12px">
<Icon name="icon_admin_outlined" />
<Icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</div>

5
core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
View File

@ -1,4 +1,5 @@
<script lang="tsx" setup>
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { computed, onMounted, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
@ -197,7 +198,7 @@ onMounted(() => {
<template #content><span v-html="t('chart.axis_tip')"></span></template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
</el-tooltip>
@ -253,7 +254,7 @@ onMounted(() => {
<template #content>期望的坐标轴刻度数量，非最终结果。</template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined" />
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</span>
</el-tooltip>

11
core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
View File

@ -1,4 +1,7 @@
<script lang="ts" setup>
import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import { PropType, computed, onMounted, reactive, watch, nextTick } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import {
@ -179,7 +182,9 @@ defineExpose({ getFormData })
>
<template #prefix>
<el-icon>
<Icon name="icon_letter-spacing_outlined" />
<Icon name="icon_letter-spacing_outlined"
><icon_letterSpacing_outlined class="svg-icon"
/></Icon>
</el-icon>
</template>
<el-option
@ -209,7 +214,7 @@ defineExpose({ getFormData })
:class="{ dark: themes === 'dark', active: state.indicatorNameForm.isBolder }"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -232,7 +237,7 @@ defineExpose({ getFormData })
:class="{ dark: themes === 'dark', active: state.indicatorNameForm.isItalic }"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>

51
core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
View File

@ -1,4 +1,13 @@
<script lang="ts" setup>
import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
import icon_topAlign_outlined from '@/assets/svg/icon_top-align_outlined.svg'
import icon_verticalAlign_outlined from '@/assets/svg/icon_vertical-align_outlined.svg'
import icon_bottomAlign_outlined from '@/assets/svg/icon_bottom-align_outlined.svg'
import { PropType, computed, onMounted, reactive, watch, nextTick } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import {
@ -183,7 +192,9 @@ defineExpose({ getFormData })
>
<template #prefix>
<el-icon>
<Icon name="icon_letter-spacing_outlined" />
<Icon name="icon_letter-spacing_outlined"
><icon_letterSpacing_outlined class="svg-icon"
/></Icon>
</el-icon>
</template>
<el-option
@ -213,7 +224,7 @@ defineExpose({ getFormData })
:class="{ dark: themes === 'dark', active: state.indicatorValueForm.isBolder }"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -236,7 +247,7 @@ defineExpose({ getFormData })
:class="{ dark: themes === 'dark', active: state.indicatorValueForm.isItalic }"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -265,7 +276,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_left-alignment_outlined" />
<Icon name="icon_left-alignment_outlined"
><icon_leftAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -283,7 +296,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_center-alignment_outlined" />
<Icon name="icon_center-alignment_outlined"
><icon_centerAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -301,7 +316,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_right-alignment_outlined" />
<Icon name="icon_right-alignment_outlined"
><icon_rightAlignment_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -330,7 +347,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_top-align_outlined" />
<Icon name="icon_top-align_outlined"
><icon_topAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -348,7 +367,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_vertical-align_outlined" />
<Icon name="icon_vertical-align_outlined"
><icon_verticalAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -366,7 +387,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_bottom-align_outlined" />
<Icon name="icon_bottom-align_outlined"
><icon_bottomAlign_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>
@ -472,7 +495,9 @@ defineExpose({ getFormData })
>
<template #prefix>
<el-icon>
<Icon name="icon_letter-spacing_outlined" />
<Icon name="icon_letter-spacing_outlined"
><icon_letterSpacing_outlined class="svg-icon"
/></Icon>
</el-icon>
</template>
<el-option
@ -506,7 +531,7 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_bold_outlined" />
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</el-tooltip>
@ -533,7 +558,9 @@ defineExpose({ getFormData })
}"
>
<el-icon>
<Icon name="icon_italic_outlined" />
<Icon name="icon_italic_outlined"
><icon_italic_outlined class="svg-icon"
/></Icon>
</el-icon>
</div>
</el-tooltip>

Some files were not shown because too many files have changed in this diff Show More