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
@@ -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>
|
||||
Reference in New Issue
Block a user