mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
feat: 新增图表独立配置混合
This commit is contained in:
mtruning
+7
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h1>全局接口配置</h1>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="go-chart-theme-color">
|
||||
<n-card
|
||||
v-for="(value, key) in chartColors"
|
||||
:key="key"
|
||||
class="card-box"
|
||||
:class="{ selected: key === selectName }"
|
||||
size="small"
|
||||
hoverable
|
||||
embedded
|
||||
@click="selectTheme(key)"
|
||||
>
|
||||
<div class="go-flex-items-center">
|
||||
<n-text>{{ chartColorsName[key] }}</n-text>
|
||||
<span
|
||||
class="theme-color-item"
|
||||
v-for="colorItem in fetchShowColors(value.color)"
|
||||
:key="colorItem"
|
||||
:style="{ backgroundColor: colorItem }"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="theme-bottom"
|
||||
:style="{ backgroundImage: chartColorsshow[key] }"
|
||||
></div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import {
|
||||
chartColors,
|
||||
chartColorsName,
|
||||
chartColorsshow,
|
||||
ChartColorsNameType
|
||||
} from '@/settings/chartThemes/index'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { SquareIcon } = icon.ionicons5
|
||||
const chartEditStoreStore = useChartEditStoreStore()
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const themeColor = ref(designStore.getAppTheme)
|
||||
|
||||
const selectName = computed(() => {
|
||||
return chartEditStoreStore.getEditCanvasConfig.chartThemeColor
|
||||
})
|
||||
|
||||
// 获取用来展示的色号
|
||||
const fetchShowColors = (colors: Array<string>) => {
|
||||
return cloneDeep(colors).splice(0, 6)
|
||||
}
|
||||
|
||||
// 设置主体色（在 ContentEdit > List 中进行注入）
|
||||
const selectTheme = (theme: ChartColorsNameType) => {
|
||||
chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(chart-theme-color) {
|
||||
padding-top: 20px;
|
||||
.card-box {
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
padding: 0;
|
||||
@include filter-bg-color('background-color4-shallow');
|
||||
border-radius: 23px;
|
||||
overflow: hidden;
|
||||
@include deep() {
|
||||
.n-card__content {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.go-flex-items-center {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.theme-color-item {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.theme-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import CanvasPage from './index.vue'
|
||||
|
||||
export { CanvasPage }
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="go-canvas-setting">
|
||||
<n-form inline :label-width="45" size="small" label-placement="left">
|
||||
<n-form-item label="宽度">
|
||||
<!-- 尺寸选择 -->
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="canvasConfig.width"
|
||||
:validator="validator"
|
||||
@update:value="chartEditStoreStore.computedScale"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="高度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="canvasConfig.height"
|
||||
:validator="validator"
|
||||
@update:value="chartEditStoreStore.computedScale"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<n-card class="upload-box">
|
||||
<n-upload
|
||||
v-model:file-list="uploadFileListRef"
|
||||
:show-file-list="false"
|
||||
:customRequest="customRequest"
|
||||
:onBeforeUpload="beforeUploadHandle"
|
||||
>
|
||||
<n-upload-dragger>
|
||||
<img
|
||||
v-if="canvasConfig.backgroundImage"
|
||||
class="upload-show"
|
||||
:src="canvasConfig.backgroundImage"
|
||||
alt="背景"
|
||||
/>
|
||||
<div class="upload-img" v-show="!canvasConfig.backgroundImage">
|
||||
<img src="@/assets/images/canvas/noImage.png" />
|
||||
<n-text class="upload-desc" depth="3">
|
||||
背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif
|
||||
的文件
|
||||
</n-text>
|
||||
</div>
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
</n-card>
|
||||
<n-space vertical :size="12">
|
||||
<n-space>
|
||||
<n-text>背景色</n-text>
|
||||
<n-color-picker
|
||||
style="width: 326px;"
|
||||
:showPreview="true"
|
||||
:swatches="swatchesColors"
|
||||
v-model:value="canvasConfig.background"
|
||||
/>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>使用颜色</n-text>
|
||||
<n-switch
|
||||
size="small"
|
||||
v-model:value="canvasConfig.selectColor"
|
||||
:loading="switchSelectColorLoading"
|
||||
:round="false"
|
||||
:disabled="!canvasConfig.backgroundImage"
|
||||
:onUpdate="switchSelectColorHandle"
|
||||
/>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>背景</n-text>
|
||||
<n-button
|
||||
size="small"
|
||||
:disabled="!canvasConfig.backgroundImage"
|
||||
@click="clearImage"
|
||||
>
|
||||
清除背景图
|
||||
</n-button>
|
||||
<n-button
|
||||
size="small"
|
||||
:disabled="!canvasConfig.background"
|
||||
@click="clearColor"
|
||||
>
|
||||
清除颜色
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
|
||||
<!-- 主题选择和全局配置 -->
|
||||
<n-tabs class="tabs-box" size="small" type="segment">
|
||||
<n-tab-pane
|
||||
v-for="item in globalTabList"
|
||||
:key="item.key"
|
||||
:name="item.key"
|
||||
size="small"
|
||||
display-directive="show:lazy"
|
||||
>
|
||||
<template #tab>
|
||||
<n-space>
|
||||
<span>{{ item.title }}</span>
|
||||
<n-icon size="16" class="icon-position">
|
||||
<component :is="item.icon"></component>
|
||||
</n-icon>
|
||||
</n-space>
|
||||
</template>
|
||||
<component :is="item.render"></component>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { backgroundImageSize } from '@/settings/designSetting'
|
||||
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { UploadCustomRequestOptions } from 'naive-ui'
|
||||
import { fileToUrl, loadAsyncComponent } from '@/utils'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { ColorPaletteIcon } = icon.ionicons5
|
||||
const { ZAxisIcon } = icon.carbon
|
||||
|
||||
const chartEditStoreStore = useChartEditStoreStore()
|
||||
const canvasConfig = chartEditStoreStore.getEditCanvasConfig
|
||||
|
||||
const uploadFileListRef = ref()
|
||||
const switchSelectColorLoading = ref(false)
|
||||
|
||||
const ChartThemeColor = loadAsyncComponent(() =>
|
||||
import('./components/ChartThemeColor/index.vue')
|
||||
)
|
||||
const ChartDataSetting = loadAsyncComponent(() =>
|
||||
import('./components/ChartDataSetting/index.vue')
|
||||
)
|
||||
|
||||
// 页面设置
|
||||
const swatchesColors = [
|
||||
'#232324',
|
||||
'#2a2a2b',
|
||||
'#313132',
|
||||
'#373739',
|
||||
'#757575',
|
||||
'#e0e0e0',
|
||||
'#eeeeee',
|
||||
'#fafafa'
|
||||
]
|
||||
|
||||
const globalTabList = [
|
||||
{
|
||||
key: 'ChartTheme',
|
||||
title: '主题颜色',
|
||||
icon: ColorPaletteIcon,
|
||||
render: ChartThemeColor
|
||||
},
|
||||
{
|
||||
key: 'ChartSysSetting',
|
||||
title: '数据配置',
|
||||
icon: ZAxisIcon,
|
||||
render: ChartDataSetting
|
||||
}
|
||||
]
|
||||
|
||||
// 规则
|
||||
const validator = (x: number) => x > 50
|
||||
|
||||
// 前置处理
|
||||
//@ts-ignore
|
||||
const beforeUploadHandle = async ({ file }) => {
|
||||
uploadFileListRef.value = []
|
||||
const type = file.file.type
|
||||
const size = file.file.size
|
||||
|
||||
if (size > 1024 * 1024 * backgroundImageSize) {
|
||||
window['$message'].warning(
|
||||
`图片超出 ${backgroundImageSize}M 限制，请重新上传！`
|
||||
)
|
||||
return false
|
||||
}
|
||||
if (type !== 'image/png' && type !== 'image/jpeg' && type !== 'image/gif') {
|
||||
window['$message'].warning('文件格式不符合，请重新上传！')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 清除背景
|
||||
const clearImage = () => {
|
||||
chartEditStoreStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.BACKGROUND_IAMGE,
|
||||
undefined
|
||||
)
|
||||
chartEditStoreStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.SELECT_COLOR,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 清除颜色
|
||||
const clearColor = () => {
|
||||
chartEditStoreStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.BACKGROUND,
|
||||
undefined
|
||||
)
|
||||
if (canvasConfig.backgroundImage) {
|
||||
chartEditStoreStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.SELECT_COLOR,
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 启用/关闭 颜色
|
||||
const switchSelectColorHandle = () => {
|
||||
switchSelectColorLoading.value = true
|
||||
setTimeout(() => {
|
||||
switchSelectColorLoading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 自定义上传操作
|
||||
const customRequest = (options: UploadCustomRequestOptions) => {
|
||||
const {
|
||||
file,
|
||||
data,
|
||||
headers,
|
||||
withCredentials,
|
||||
action,
|
||||
onFinish,
|
||||
onError,
|
||||
onProgress
|
||||
} = options
|
||||
|
||||
nextTick(() => {
|
||||
if (file.file) {
|
||||
const ImageUrl = fileToUrl(file.file)
|
||||
chartEditStoreStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.BACKGROUND_IAMGE,
|
||||
ImageUrl
|
||||
)
|
||||
chartEditStoreStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.SELECT_COLOR,
|
||||
false
|
||||
)
|
||||
} else {
|
||||
window['$message'].error('添加图片失败，请稍后重试！')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$updloadWidth: 326px;
|
||||
$updloadHeight: 193px;
|
||||
@include go(canvas-setting) {
|
||||
padding-top: 20px;
|
||||
.upload-box {
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
@include deep() {
|
||||
.n-card__content {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.n-upload-dragger {
|
||||
padding: 5px;
|
||||
width: $updloadWidth;
|
||||
}
|
||||
}
|
||||
.upload-show {
|
||||
width: -webkit-fill-available;
|
||||
height: $updloadHeight;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.upload-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 150px;
|
||||
}
|
||||
.upload-desc {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-position {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.tabs-box {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
数据
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="go-chart-content-details" v-if="targetData">
|
||||
<!-- 名称 -->
|
||||
<SettingItemBox name="名称">
|
||||
<n-input
|
||||
type="text"
|
||||
maxlength="6"
|
||||
show-count
|
||||
placeholder="请输入图表名称"
|
||||
size="small"
|
||||
v-model:value="targetData.chartConfig.title"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
<!-- 位置 -->
|
||||
<PositionSetting :chartAttr="targetData.attr" />
|
||||
<!-- 自定义配置项 -->
|
||||
<component :is="targetData.chartConfig.conNode()" :optionData="targetData.option"></component>
|
||||
<!-- 全局设置 -->
|
||||
<GlobalSetting :optionData="targetData.option" :in-chart="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, Ref } from 'vue'
|
||||
import { loadAsyncComponent } from '@/utils'
|
||||
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { GlobalSetting, PositionSetting } from '@/components/ChartItemSetting/index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { SettingItemBox } from '@/components/ChartItemSetting/index'
|
||||
|
||||
const GlobalSettingCom = loadAsyncComponent(() =>
|
||||
import('@/components/ChartItemSetting/index')
|
||||
)
|
||||
const chartEditStoreStore = useChartEditStoreStore()
|
||||
|
||||
const targetData: Ref<CreateComponentType> = computed(() => {
|
||||
const list = chartEditStoreStore.getComponentList
|
||||
const targetIndex = chartEditStoreStore.fetchTargetIndex()
|
||||
return list[targetIndex]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('chart-content-details') {
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user